76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { useAccount, useBalance } from "wagmi";
|
|
import { Canvas } from "@react-three/fiber";
|
|
import { OrbitControls } from "@react-three/drei";
|
|
import { gsap } from "gsap";
|
|
import { formatBalance } from "@/lib/utils";
|
|
|
|
export function BalanceDisplay() {
|
|
const { address } = useAccount();
|
|
const { data: balance, isLoading } = useBalance({ address });
|
|
const displayRef = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (displayRef.current && balance) {
|
|
gsap.from(displayRef.current, {
|
|
opacity: 0,
|
|
y: 20,
|
|
duration: 0.8,
|
|
ease: "power3.out",
|
|
});
|
|
}
|
|
}, [balance]);
|
|
|
|
if (isLoading) {
|
|
return (
|
|
<div className="bg-gray-900 rounded-xl p-8 h-64 flex items-center justify-center">
|
|
<div className="text-gray-400">Loading balance...</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const balanceValue = balance?.value || BigInt(0);
|
|
const formattedBalance = formatBalance(balanceValue);
|
|
|
|
return (
|
|
<div ref={displayRef} className="relative bg-gray-900 rounded-xl p-8 overflow-hidden border border-gray-800">
|
|
<div className="absolute inset-0 bg-gradient-to-br from-blue-500/10 to-purple-500/10" />
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_50%_50%,rgba(59,130,246,0.1),transparent_50%)]" />
|
|
<div className="relative z-10">
|
|
<h2 className="text-2xl font-semibold mb-4 bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
|
|
Total Balance
|
|
</h2>
|
|
<div className="flex items-center gap-8">
|
|
<div className="flex-1">
|
|
<div className="text-5xl font-bold mb-2 bg-gradient-to-r from-white to-gray-300 bg-clip-text text-transparent">
|
|
{formattedBalance}
|
|
</div>
|
|
<div className="text-gray-400">{balance?.symbol || "ETH"}</div>
|
|
</div>
|
|
<div className="w-64 h-64">
|
|
<Canvas camera={{ position: [0, 0, 5] }}>
|
|
<ambientLight intensity={0.5} />
|
|
<pointLight position={[10, 10, 10]} intensity={1.5} />
|
|
<pointLight position={[-10, -10, -10]} intensity={0.5} color="#8b5cf6" />
|
|
<mesh>
|
|
<torusGeometry args={[1, 0.3, 16, 100]} />
|
|
<meshStandardMaterial
|
|
color="#3b82f6"
|
|
metalness={0.8}
|
|
roughness={0.2}
|
|
emissive="#1e40af"
|
|
emissiveIntensity={0.2}
|
|
/>
|
|
</mesh>
|
|
<OrbitControls enableZoom={false} autoRotate autoRotateSpeed={2} />
|
|
</Canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|