89 lines
3.5 KiB
TypeScript
89 lines
3.5 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useQuery } from "@tanstack/react-query";
|
||
|
|
import { useApp } from "@/contexts/AppContext";
|
||
|
|
import { fetchProducts, fetchProductDetail } from "@/lib/api/fundmarket";
|
||
|
|
|
||
|
|
interface RepayPoolStatsProps {
|
||
|
|
tokenType: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function RepayPoolStats({ tokenType }: RepayPoolStatsProps) {
|
||
|
|
const { t } = useApp();
|
||
|
|
|
||
|
|
const { data: products = [] } = useQuery({
|
||
|
|
queryKey: ['token-list'],
|
||
|
|
queryFn: () => fetchProducts(true),
|
||
|
|
staleTime: 5 * 60 * 1000,
|
||
|
|
});
|
||
|
|
|
||
|
|
const product = products.find(p => p.tokenSymbol === tokenType);
|
||
|
|
|
||
|
|
const { data: detail } = useQuery({
|
||
|
|
queryKey: ['product-detail', product?.id],
|
||
|
|
queryFn: () => fetchProductDetail(product!.id),
|
||
|
|
enabled: !!product?.id,
|
||
|
|
staleTime: 5 * 60 * 1000,
|
||
|
|
});
|
||
|
|
|
||
|
|
const tvlDisplay = detail?.tvlUsd != null
|
||
|
|
? `$${detail.tvlUsd.toLocaleString('en-US', { maximumFractionDigits: 0 })}`
|
||
|
|
: '--';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6">
|
||
|
|
{/* Left Card - Total Value Locked and Utilization */}
|
||
|
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-2xl border border-border-normal dark:border-gray-700 px-4 md:px-6 py-4 flex items-center justify-between md:h-[98px]">
|
||
|
|
{/* Total Value Locked */}
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<span className="text-[12px] font-bold text-[#90a1b9] dark:text-gray-400 leading-4 uppercase">
|
||
|
|
{t("repay.totalValueLocked")}
|
||
|
|
</span>
|
||
|
|
<span className="text-[20px] font-bold text-[#0f172b] dark:text-white leading-7 tracking-[-0.45px]">
|
||
|
|
{tvlDisplay}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Utilization */}
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<span className="text-[12px] font-bold text-[#90a1b9] dark:text-gray-400 leading-4 uppercase text-right">
|
||
|
|
{t("repay.utilization")}
|
||
|
|
</span>
|
||
|
|
<span className="text-[20px] font-bold text-[#0f172b] dark:text-white leading-7 tracking-[-0.45px] text-right">
|
||
|
|
42.8%
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Right Card - Reward Multiplier */}
|
||
|
|
<div className="bg-white/50 dark:bg-gray-800/50 rounded-2xl border border-border-normal dark:border-gray-700 px-4 md:px-6 py-4 flex items-center justify-between md:h-[98px]">
|
||
|
|
{/* Reward Multiplier */}
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<span className="text-[12px] font-bold text-[#90a1b9] dark:text-gray-400 leading-4 uppercase">
|
||
|
|
{t("repay.rewardMultiplier")}
|
||
|
|
</span>
|
||
|
|
<span className="text-[20px] font-bold text-[#0f172b] dark:text-white leading-7 tracking-[-0.45px]">
|
||
|
|
2.5x
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Overlapping Circles */}
|
||
|
|
<div className="relative w-20 h-8">
|
||
|
|
{/* Green Circle */}
|
||
|
|
<div className="absolute left-0 top-0 w-8 h-8 rounded-full bg-[#00bc7d] border-2 border-white dark:border-gray-900" />
|
||
|
|
|
||
|
|
{/* Blue Circle */}
|
||
|
|
<div className="absolute left-6 top-0 w-8 h-8 rounded-full bg-[#2b7fff] border-2 border-white dark:border-gray-900" />
|
||
|
|
|
||
|
|
{/* Gray Circle with +3 */}
|
||
|
|
<div className="absolute left-12 top-0 w-8 h-8 rounded-full bg-[#e2e8f0] dark:bg-gray-600 border-2 border-white dark:border-gray-900 flex items-center justify-center">
|
||
|
|
<span className="text-[10px] font-bold text-[#45556c] dark:text-gray-300 leading-[15px] tracking-[0.12px]">
|
||
|
|
+3
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|