422 lines
16 KiB
TypeScript
422 lines
16 KiB
TypeScript
|
"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>
|
|||
|
|
);
|
|||
|
|
}
|