init: 初始化 AssetX 项目仓库
包含 webapp（Next.js 用户端）、webapp-back（Go 后端）、 antdesign（管理后台）、landingpage（营销落地页）、 数据库 SQL 和配置文件。
This commit is contained in:
421
webapp/app/market/page.tsx
Normal file
421
webapp/app/market/page.tsx
Normal file
@@ -0,0 +1,421 @@
|
||||
"use client";
|
||||
|
||||
import { useRouter, useSearchParams } from "next/navigation";
|
||||
import { Suspense, useState, useMemo, useEffect, useCallback } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { useReadContracts, useAccount } from "wagmi";
|
||||
import Sidebar from "@/components/layout/Sidebar";
|
||||
import TopBar from "@/components/layout/TopBar";
|
||||
import PageTitle from "@/components/layout/PageTitle";
|
||||
import SectionHeader from "@/components/layout/SectionHeader";
|
||||
import ViewToggle from "@/components/fundmarket/ViewToggle";
|
||||
import StatsCards from "@/components/fundmarket/StatsCards";
|
||||
import StatsCardsSkeleton from "@/components/fundmarket/StatsCardsSkeleton";
|
||||
import ProductCard from "@/components/fundmarket/ProductCard";
|
||||
import ProductCardSkeleton from "@/components/fundmarket/ProductCardSkeleton";
|
||||
import ProductCardList from "@/components/fundmarket/ProductCardList";
|
||||
import ProductCardListSkeleton from "@/components/fundmarket/ProductCardListSkeleton";
|
||||
import { fetchProducts, fetchStats } from "@/lib/api/fundmarket";
|
||||
import { fetchContracts } from "@/lib/api/contracts";
|
||||
import { abis } from "@/lib/contracts";
|
||||
import { useApp } from "@/contexts/AppContext";
|
||||
|
||||
const erc20BalanceOfAbi = [
|
||||
{
|
||||
name: "balanceOf",
|
||||
type: "function",
|
||||
stateMutability: "view",
|
||||
inputs: [{ name: "account", type: "address" }],
|
||||
outputs: [{ name: "", type: "uint256" }],
|
||||
},
|
||||
] as const;
|
||||
|
||||
function formatPoolCap(usd: number): string {
|
||||
if (usd >= 1_000_000) return `$${(usd / 1_000_000).toFixed(1)}M`;
|
||||
if (usd >= 1_000) return `$${(usd / 1_000).toFixed(1)}K`;
|
||||
return `$${usd.toFixed(2)}`;
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Suspense>
|
||||
<HomeContent />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
function HomeContent() {
|
||||
const router = useRouter();
|
||||
const searchParams = useSearchParams();
|
||||
const { t } = useApp();
|
||||
const { address: userAddress, chainId: userChainId } = useAccount();
|
||||
const initialView = searchParams.get("view") === "list" ? "list" : "grid";
|
||||
const [viewMode, setViewMode] = useState<"grid" | "list">(initialView);
|
||||
const [isTransitioning, setIsTransitioning] = useState(false);
|
||||
|
||||
const { data: products = [], isLoading: productsLoading } = useQuery({
|
||||
queryKey: ["fundmarket-products"],
|
||||
queryFn: () => fetchProducts(),
|
||||
});
|
||||
|
||||
const { data: stats = [], isLoading: statsLoading } = useQuery({
|
||||
queryKey: ["fundmarket-stats"],
|
||||
queryFn: () => fetchStats(),
|
||||
});
|
||||
|
||||
// 从合约注册表获取 YTAssetFactory 地址（复用已缓存的 contract-registry 查询）
|
||||
const { data: contractConfigs = [] } = useQuery({
|
||||
queryKey: ["contract-registry"],
|
||||
queryFn: fetchContracts,
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
|
||||
const factoryByChain = useMemo(() => {
|
||||
const map: Record<number, `0x${string}`> = {};
|
||||
for (const c of contractConfigs) {
|
||||
if (c.name === "YTAssetFactory" && c.address) {
|
||||
map[c.chain_id] = c.address as `0x${string}`;
|
||||
}
|
||||
}
|
||||
return map;
|
||||
}, [contractConfigs]);
|
||||
|
||||
// 为每个有合约地址的产品构建 getVaultInfo 调用
|
||||
const vaultContracts = useMemo(() => {
|
||||
return products
|
||||
.filter((p) => p.contractAddress && factoryByChain[p.chainId])
|
||||
.map((p) => ({
|
||||
address: factoryByChain[p.chainId],
|
||||
abi: abis.YTAssetFactory as any,
|
||||
functionName: "getVaultInfo" as const,
|
||||
args: [p.contractAddress as `0x${string}`],
|
||||
chainId: p.chainId,
|
||||
}));
|
||||
}, [products, factoryByChain]);
|
||||
|
||||
const { data: vaultData, isLoading: isVaultLoading } = useReadContracts({
|
||||
contracts: vaultContracts,
|
||||
query: { enabled: vaultContracts.length > 0 },
|
||||
});
|
||||
|
||||
// 超时 3 秒后不再等合约数据，直接渲染
|
||||
const [vaultTimedOut, setVaultTimedOut] = useState(false);
|
||||
useEffect(() => {
|
||||
if (vaultContracts.length === 0) return;
|
||||
setVaultTimedOut(false);
|
||||
const t = setTimeout(() => setVaultTimedOut(true), 3000);
|
||||
return () => clearTimeout(t);
|
||||
}, [vaultContracts.length]);
|
||||
|
||||
const contractsReady = vaultContracts.length === 0 || vaultData !== undefined || vaultTimedOut;
|
||||
|
||||
// 从合约实时数据提取 Pool Cap / Pool Capacity % / Maturity
|
||||
const formatLockUp = (nextRedemptionTime: bigint): string => {
|
||||
const ts = Number(nextRedemptionTime);
|
||||
if (!ts) return '--';
|
||||
const diff = ts * 1000 - Date.now();
|
||||
if (diff <= 0) return 'Matured';
|
||||
const totalDays = Math.ceil(diff / (1000 * 60 * 60 * 24));
|
||||
if (totalDays >= 365) return `${Math.floor(totalDays / 365)}y ${totalDays % 365}d`;
|
||||
if (totalDays >= 30) return `${Math.floor(totalDays / 30)}mo`;
|
||||
return `${totalDays}d`;
|
||||
};
|
||||
|
||||
const vaultInfoMap = useMemo(() => {
|
||||
if (!vaultData) return {} as Record<number, { poolCap: string; poolCapacityPercent: number; maturity?: string; lockUp: string; status: 'active' | 'full' | 'ended' }>;
|
||||
const map: Record<number, { poolCap: string; poolCapacityPercent: number; maturity?: string; lockUp: string; status: 'active' | 'full' | 'ended' }> = {};
|
||||
const eligibleProducts = products.filter(
|
||||
(p) => p.contractAddress && factoryByChain[p.chainId]
|
||||
);
|
||||
eligibleProducts.forEach((p, i) => {
|
||||
const entry = vaultData[i];
|
||||
if (entry?.status !== "success" || !entry.result) return;
|
||||
// getVaultInfo: [exists, totalAssets, idleAssets, managedAssets, totalSupply, hardCap, usdcPrice, ytPrice, nextRedemptionTime]
|
||||
const res = entry.result as [boolean, bigint, bigint, bigint, bigint, bigint, bigint, bigint, bigint];
|
||||
const hardCap = res[5];
|
||||
const totalSupply = res[4];
|
||||
const nextRedemptionTime = res[8];
|
||||
if (hardCap === 0n) return;
|
||||
|
||||
// Pool Cap = hardCap 直接读取（18 dec YT tokens）
|
||||
const poolCapTokens = Number(hardCap) / 1e18;
|
||||
const percent = (Number(totalSupply) / Number(hardCap)) * 100;
|
||||
|
||||
// Maturity = nextRedemptionTime（Unix 秒），0 表示未配置，留 undefined 让外层 fallback API 值
|
||||
let maturity: string | undefined;
|
||||
if (nextRedemptionTime > 0n) {
|
||||
const date = new Date(Number(nextRedemptionTime) * 1000);
|
||||
const dateStr = date.toLocaleDateString("en-GB", {
|
||||
day: "2-digit",
|
||||
month: "short",
|
||||
year: "numeric",
|
||||
});
|
||||
maturity = date < new Date() ? `${dateStr} (Matured)` : dateStr;
|
||||
}
|
||||
|
||||
const isMatured = nextRedemptionTime > 0n && Number(nextRedemptionTime) * 1000 < Date.now();
|
||||
const isFull = hardCap > 0n && totalSupply >= hardCap;
|
||||
const status: 'active' | 'full' | 'ended' = isMatured ? 'ended' : isFull ? 'full' : 'active';
|
||||
|
||||
map[p.id] = {
|
||||
poolCap: poolCapTokens > 0 ? formatPoolCap(poolCapTokens) : "--",
|
||||
poolCapacityPercent: Math.min(percent, 100),
|
||||
maturity,
|
||||
lockUp: formatLockUp(nextRedemptionTime),
|
||||
status,
|
||||
};
|
||||
});
|
||||
return map;
|
||||
}, [vaultData, products, factoryByChain]);
|
||||
|
||||
// ERC20 balanceOf batch — one call per product token contract, requires wallet connected
|
||||
const balanceContracts = useMemo(() => {
|
||||
if (!userAddress) return [];
|
||||
return products
|
||||
.filter((p) => p.contractAddress && factoryByChain[p.chainId])
|
||||
.map((p) => ({
|
||||
address: p.contractAddress as `0x${string}`,
|
||||
abi: erc20BalanceOfAbi,
|
||||
functionName: "balanceOf" as const,
|
||||
args: [userAddress],
|
||||
chainId: p.chainId,
|
||||
}));
|
||||
}, [products, factoryByChain, userAddress]);
|
||||
|
||||
const { data: balanceData } = useReadContracts({
|
||||
contracts: balanceContracts,
|
||||
query: { enabled: balanceContracts.length > 0 },
|
||||
});
|
||||
|
||||
// Compute "Your Total Balance" = Σ(tokenBalance[i] * ytPrice[i])
|
||||
// ytPrice has 30 decimals, balance has 18 decimals → divide by 10^48
|
||||
const totalBalanceUSD = useMemo(() => {
|
||||
if (!userAddress || !vaultData || !balanceData) return null;
|
||||
const eligibleProducts = products.filter(
|
||||
(p) => p.contractAddress && factoryByChain[p.chainId]
|
||||
);
|
||||
let totalUsdMillionths = 0n;
|
||||
eligibleProducts.forEach((_, i) => {
|
||||
const vEntry = vaultData[i];
|
||||
const bEntry = balanceData[i];
|
||||
if (vEntry?.status !== "success" || !vEntry.result) return;
|
||||
if (bEntry?.status !== "success" || bEntry.result === undefined) return;
|
||||
const res = vEntry.result as [boolean, bigint, bigint, bigint, bigint, bigint, bigint, bigint, bigint];
|
||||
const ytPriceRaw = res[7];
|
||||
const balanceRaw = bEntry.result as bigint;
|
||||
if (!ytPriceRaw || !balanceRaw) return;
|
||||
// Multiply first, divide once: (balance * ytPrice * 1e6) / 10^48
|
||||
totalUsdMillionths += (balanceRaw * ytPriceRaw * 1_000_000n) / (10n ** 48n);
|
||||
});
|
||||
return Number(totalUsdMillionths) / 1_000_000;
|
||||
}, [userAddress, vaultData, balanceData, products, factoryByChain]);
|
||||
|
||||
// Fetch net USDC deposited from backend (for earning calculation)
|
||||
const { data: netDepositedData } = useQuery({
|
||||
queryKey: ["net-deposited", userAddress, userChainId],
|
||||
queryFn: async () => {
|
||||
if (!userAddress) return null;
|
||||
const chainId = userChainId ?? 97;
|
||||
const res = await fetch(`/api/fundmarket/net-deposited?address=${userAddress.toLowerCase()}&chain_id=${chainId}`);
|
||||
const json = await res.json();
|
||||
return json.data as { netDepositedUSD: number } | null;
|
||||
},
|
||||
enabled: !!userAddress,
|
||||
refetchInterval: 60_000,
|
||||
});
|
||||
|
||||
// Your Total Earning = currentValue (totalBalanceUSD) - netDepositedUSD
|
||||
// Only compute when netDepositedUSD > 0 (i.e. scanner has real data)
|
||||
const totalEarningUSD = useMemo(() => {
|
||||
if (totalBalanceUSD === null || !netDepositedData) return null;
|
||||
if (netDepositedData.netDepositedUSD <= 0) return null;
|
||||
return totalBalanceUSD - netDepositedData.netDepositedUSD;
|
||||
}, [totalBalanceUSD, netDepositedData]);
|
||||
|
||||
// Stat label translation keys in API order
|
||||
const statLabelKeys = [
|
||||
"productPage.totalValueLocked",
|
||||
"productPage.cumulativeYield",
|
||||
"productPage.yourTotalBalance",
|
||||
"productPage.yourTotalEarning",
|
||||
];
|
||||
|
||||
// Override stats[2] (Your Total Balance) with computed on-chain value
|
||||
const displayStats = useMemo(() => {
|
||||
if (!stats.length) return stats;
|
||||
const result = stats.map((stat, i) => ({
|
||||
...stat,
|
||||
label: statLabelKeys[i] ? t(statLabelKeys[i]) : stat.label,
|
||||
}));
|
||||
if (result[2] && totalBalanceUSD !== null) {
|
||||
result[2] = {
|
||||
...result[2],
|
||||
value: totalBalanceUSD > 0
|
||||
? `$${totalBalanceUSD >= 1_000_000
|
||||
? `${(totalBalanceUSD / 1_000_000).toFixed(2)}M`
|
||||
: totalBalanceUSD >= 1_000
|
||||
? `${(totalBalanceUSD / 1_000).toFixed(2)}K`
|
||||
: totalBalanceUSD.toFixed(2)}`
|
||||
: "$0.00",
|
||||
};
|
||||
}
|
||||
if (result[3] && totalEarningUSD !== null) {
|
||||
const isPositive = totalEarningUSD >= 0;
|
||||
const absVal = Math.abs(totalEarningUSD);
|
||||
const formatted = absVal >= 1_000_000
|
||||
? `${(absVal / 1_000_000).toFixed(2)}M`
|
||||
: absVal >= 1_000
|
||||
? `${(absVal / 1_000).toFixed(2)}K`
|
||||
: absVal.toFixed(2);
|
||||
result[3] = {
|
||||
...result[3],
|
||||
value: `${isPositive ? '' : '-'}$${formatted}`,
|
||||
isPositive,
|
||||
};
|
||||
}
|
||||
return result;
|
||||
}, [stats, totalBalanceUSD, totalEarningUSD, t]);
|
||||
|
||||
const loading = productsLoading || statsLoading || (isVaultLoading && !contractsReady);
|
||||
|
||||
const breadcrumbItems = [
|
||||
{ label: "ASSETX", href: "/market" },
|
||||
{ label: "Fund Market" },
|
||||
];
|
||||
|
||||
const handleViewChange = useCallback((newMode: "grid" | "list") => {
|
||||
if (newMode === viewMode) return;
|
||||
setIsTransitioning(true);
|
||||
// 同步更新 URL search params（replaceState，不产生历史记录）
|
||||
const params = new URLSearchParams(searchParams.toString());
|
||||
if (newMode === "grid") {
|
||||
params.delete("view");
|
||||
} else {
|
||||
params.set("view", newMode);
|
||||
}
|
||||
const qs = params.toString();
|
||||
window.history.replaceState(null, "", qs ? `?${qs}` : window.location.pathname);
|
||||
setTimeout(() => {
|
||||
setViewMode(newMode);
|
||||
setIsTransitioning(false);
|
||||
}, 200);
|
||||
}, [viewMode, searchParams]);
|
||||
|
||||
const handleInvest = (productId: number) => {
|
||||
router.push(`/market/product/${productId}`);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-100 dark:bg-gray-800 flex">
|
||||
<Sidebar />
|
||||
<div className="flex-1 min-w-0 flex flex-col md:ml-[240px] pt-14 md:pt-0">
|
||||
{/* Top Bar */}
|
||||
<div className="bg-gray-100 dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-4 md:px-8 py-3">
|
||||
<TopBar breadcrumbItems={breadcrumbItems} />
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="px-4 md:px-8 pt-4 md:pt-8 pb-4 md:pb-8">
|
||||
{/* Page Title */}
|
||||
<PageTitle title="AssetX Fund Market" />
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="mb-8">
|
||||
{loading ? (
|
||||
<StatsCardsSkeleton />
|
||||
) : (
|
||||
<StatsCards stats={displayStats} />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Assets Section */}
|
||||
<div className="flex flex-col gap-6 mt-8 md:mt-16">
|
||||
{/* Section Header with View Toggle */}
|
||||
<SectionHeader title="Assets">
|
||||
<ViewToggle value={viewMode} onChange={handleViewChange} />
|
||||
</SectionHeader>
|
||||
|
||||
{/* Product Cards - Grid or List View */}
|
||||
<div
|
||||
className="transition-opacity duration-200"
|
||||
style={{ opacity: isTransitioning ? 0 : 1 }}
|
||||
>
|
||||
{loading ? (
|
||||
viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{[1, 2, 3].map((index) => (
|
||||
<div key={index}>
|
||||
<ProductCardSkeleton />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
{[1, 2, 3].map((index) => (
|
||||
<ProductCardListSkeleton key={index} />
|
||||
))}
|
||||
</div>
|
||||
)
|
||||
) : viewMode === "grid" ? (
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{products.map((product, index) => (
|
||||
<div
|
||||
key={product.id}
|
||||
className="animate-fade-in"
|
||||
style={{
|
||||
animationDelay: `${index * 0.1}s`,
|
||||
}}
|
||||
>
|
||||
<ProductCard
|
||||
productId={product.id}
|
||||
name={product.name}
|
||||
category={product.category}
|
||||
categoryColor={product.categoryColor}
|
||||
iconUrl={product.iconUrl}
|
||||
yieldAPY={product.yieldAPY}
|
||||
poolCap={vaultInfoMap[product.id]?.poolCap ?? product.poolCap}
|
||||
maturity={vaultInfoMap[product.id]?.maturity || "--"}
|
||||
risk={product.risk}
|
||||
riskLevel={product.riskLevel}
|
||||
lockUp={vaultInfoMap[product.id]?.lockUp ?? '--'}
|
||||
circulatingSupply={product.circulatingSupply}
|
||||
poolCapacityPercent={vaultInfoMap[product.id]?.poolCapacityPercent ?? product.poolCapacityPercent}
|
||||
status={vaultInfoMap[product.id]?.status}
|
||||
onInvest={() => handleInvest(product.id)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-4">
|
||||
{products.map((product, index) => (
|
||||
<div
|
||||
key={product.id}
|
||||
className="animate-fade-in"
|
||||
style={{
|
||||
animationDelay: `${index * 0.08}s`,
|
||||
}}
|
||||
>
|
||||
<ProductCardList
|
||||
productId={product.id}
|
||||
name={product.name}
|
||||
category={product.category}
|
||||
categoryColor={product.categoryColor}
|
||||
iconUrl={product.iconUrl}
|
||||
poolCap={vaultInfoMap[product.id]?.poolCap ?? product.poolCap}
|
||||
lockUp={vaultInfoMap[product.id]?.lockUp ?? '--'}
|
||||
poolCapacityPercent={vaultInfoMap[product.id]?.poolCapacityPercent ?? product.poolCapacityPercent}
|
||||
status={vaultInfoMap[product.id]?.status}
|
||||
onInvest={() => handleInvest(product.id)}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user