81 lines
3.1 KiB
TypeScript
81 lines
3.1 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import Image from "next/image";
|
||
|
|
import { useRouter } from "next/navigation";
|
||
|
|
import { Button } from "@heroui/react";
|
||
|
|
import { useApp } from "@/contexts/AppContext";
|
||
|
|
import { buttonStyles } from "@/lib/buttonStyles";
|
||
|
|
import { useAccount } from "wagmi";
|
||
|
|
import { useSuppliedBalance } from "@/hooks/useLendingSupply";
|
||
|
|
import { useCollateralValue } from "@/hooks/useCollateral";
|
||
|
|
import { useTokenList } from "@/hooks/useTokenList";
|
||
|
|
|
||
|
|
export default function LendingPlaceholder() {
|
||
|
|
const { t } = useApp();
|
||
|
|
const router = useRouter();
|
||
|
|
const { isConnected } = useAccount();
|
||
|
|
const { bySymbol } = useTokenList();
|
||
|
|
const { formattedBalance: suppliedBalance } = useSuppliedBalance();
|
||
|
|
const { valueRaw: valueA } = useCollateralValue(bySymbol['YT-A']);
|
||
|
|
const { valueRaw: valueB } = useCollateralValue(bySymbol['YT-B']);
|
||
|
|
const { valueRaw: valueC } = useCollateralValue(bySymbol['YT-C']);
|
||
|
|
|
||
|
|
const totalPortfolio = isConnected
|
||
|
|
? parseFloat(suppliedBalance) + valueA + valueB + valueC
|
||
|
|
: 0;
|
||
|
|
const portfolioDisplay = `$${totalPortfolio.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
||
|
|
const collateralTotal = valueA + valueB + valueC;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="relative rounded-2xl h-[180px] overflow-hidden">
|
||
|
|
{/* Dark Background */}
|
||
|
|
<div className="absolute inset-0 bg-[#0f172b]" />
|
||
|
|
|
||
|
|
{/* Green Glow Effect */}
|
||
|
|
<div
|
||
|
|
className="absolute w-32 h-32 rounded-full right-0 top-[-64px]"
|
||
|
|
style={{
|
||
|
|
background: "rgba(0, 188, 125, 0.2)",
|
||
|
|
filter: "blur(40px)",
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
|
||
|
|
{/* Content - Centered */}
|
||
|
|
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col gap-4 w-[90%]">
|
||
|
|
{/* Your Portfolio Section */}
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
{/* Label Row */}
|
||
|
|
<div className="flex items-center justify-between h-[21px]">
|
||
|
|
<span className="text-[10px] font-bold text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
{t("lending.yourPortfolio")}
|
||
|
|
</span>
|
||
|
|
{collateralTotal > 0 && (
|
||
|
|
<span className="text-[10px] font-bold text-[#10b981] dark:text-green-400 leading-[150%] tracking-[0.01em]">
|
||
|
|
+${collateralTotal.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} {t("lending.collateral")}
|
||
|
|
</span>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Amount */}
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<span className="text-heading-h2 font-bold text-white leading-[130%] tracking-[-0.01em]">
|
||
|
|
{portfolioDisplay}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* Supply USDC Button */}
|
||
|
|
<Button
|
||
|
|
color="default"
|
||
|
|
variant="solid"
|
||
|
|
className="h-11 rounded-xl px-6 text-body-small font-bold bg-[#282E3F] dark:bg-white dark:text-[#282E3F] text-background"
|
||
|
|
onPress={() => router.push("/lending/supply")}
|
||
|
|
endContent={<Image src="/icons/actions/arrow-right-icon.svg" alt="" width={20} height={20} />}
|
||
|
|
>
|
||
|
|
{t("lending.supplyUsdc")}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|