396 lines
14 KiB
TypeScript
396 lines
14 KiB
TypeScript
|
'use client';
|
|||
|
|
|
|||
|
|
import { useState, useEffect, useRef } from 'react';
|
|||
|
|
import Image from 'next/image';
|
|||
|
|
|
|||
|
|
// 数字增长动画Hook
|
|||
|
|
function useCountUp(end: number, duration: number = 1500, startRangePercent: number = 0.75) {
|
|||
|
|
const [mounted, setMounted] = useState(false);
|
|||
|
|
const [count, setCount] = useState(end); // 初始值设为目标值，避免hydration错误
|
|||
|
|
const [hasAnimated, setHasAnimated] = useState(false);
|
|||
|
|
const elementRef = useRef<HTMLDivElement>(null);
|
|||
|
|
const startValueRef = useRef<number>(end);
|
|||
|
|
|
|||
|
|
// 客户端挂载后设置随机起始值
|
|||
|
|
useEffect(() => {
|
|||
|
|
setMounted(true);
|
|||
|
|
startValueRef.current = Math.floor(end * (startRangePercent + Math.random() * 0.15));
|
|||
|
|
setCount(startValueRef.current);
|
|||
|
|
}, [end, startRangePercent]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!mounted) return;
|
|||
|
|
|
|||
|
|
const observer = new IntersectionObserver(
|
|||
|
|
(entries) => {
|
|||
|
|
if (entries[0].isIntersecting && !hasAnimated) {
|
|||
|
|
setHasAnimated(true);
|
|||
|
|
const start = startValueRef.current;
|
|||
|
|
const startTime = Date.now();
|
|||
|
|
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
const elapsed = Date.now() - startTime;
|
|||
|
|
const progress = Math.min(elapsed / duration, 1);
|
|||
|
|
|
|||
|
|
// 使用缓动函数 - easeOutCubic 更自然
|
|||
|
|
const easeOutCubic = 1 - Math.pow(1 - progress, 3);
|
|||
|
|
const currentCount = Math.floor(start + (end - start) * easeOutCubic);
|
|||
|
|
|
|||
|
|
setCount(currentCount);
|
|||
|
|
|
|||
|
|
if (progress === 1) {
|
|||
|
|
setCount(end); // 确保最终值准确
|
|||
|
|
clearInterval(timer);
|
|||
|
|
}
|
|||
|
|
}, 16);
|
|||
|
|
|
|||
|
|
return () => clearInterval(timer);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{ threshold: 0.1 }
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
if (elementRef.current) {
|
|||
|
|
observer.observe(elementRef.current);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return () => observer.disconnect();
|
|||
|
|
}, [end, duration, hasAnimated, mounted]);
|
|||
|
|
|
|||
|
|
return { count, elementRef };
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 格式化数字 - 确保始终显示正确的单位
|
|||
|
|
function formatNumber(num: number, prefix: string = '', suffix: string = '', forceUnit: 'M' | 'K' | '' = '') {
|
|||
|
|
if (forceUnit === 'M') {
|
|||
|
|
return `${prefix}${Math.floor(num)}${suffix}`;
|
|||
|
|
} else if (forceUnit === 'K') {
|
|||
|
|
return `${prefix}${Math.floor(num)}${suffix}`;
|
|||
|
|
} else if (num >= 1000000) {
|
|||
|
|
return `${prefix}${Math.floor(num / 1000000)}M${suffix}`;
|
|||
|
|
} else if (num >= 1000) {
|
|||
|
|
return `${prefix}${Math.floor(num / 1000)}K${suffix}`;
|
|||
|
|
}
|
|||
|
|
return `${prefix}${num.toLocaleString()}${suffix}`;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function StatsSection() {
|
|||
|
|
const tvl = useCountUp(485, 1500, 0.80); // 从80-95%开始
|
|||
|
|
const apy = useCountUp(515, 1500, 0.85); // 5.15 * 100，从85-100%开始
|
|||
|
|
const yield_ = useCountUp(45, 1500, 0.75); // 从75-90%开始
|
|||
|
|
const users = useCountUp(23928, 1800, 0.80); // 从80-95%开始
|
|||
|
|
|
|||
|
|
const [mounted, setMounted] = useState(false);
|
|||
|
|
const [imagesVisible, setImagesVisible] = useState(false);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
// 客户端挂载
|
|||
|
|
setMounted(true);
|
|||
|
|
|
|||
|
|
// 延迟显示图片动画
|
|||
|
|
const timer = setTimeout(() => {
|
|||
|
|
setImagesVisible(true);
|
|||
|
|
}, 500);
|
|||
|
|
return () => clearTimeout(timer);
|
|||
|
|
}, []);
|
|||
|
|
return (
|
|||
|
|
<section
|
|||
|
|
className="bg-white flex flex-row items-center justify-center flex-shrink-0 w-full relative"
|
|||
|
|
style={{
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
borderColor: '#e5e7eb',
|
|||
|
|
borderWidth: '0px 0px 1px 0px',
|
|||
|
|
padding: '0px 0px 1px 0px'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* .section2 */}
|
|||
|
|
<div
|
|||
|
|
className="flex flex-row items-center justify-center w-[1440px] h-[183px] relative"
|
|||
|
|
>
|
|||
|
|
{/* .container4 - Grid container */}
|
|||
|
|
<div
|
|||
|
|
className="flex-shrink-0 grid gap-0 relative w-full"
|
|||
|
|
style={{
|
|||
|
|
gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
|
|||
|
|
gridTemplateRows: 'repeat(1, minmax(0, 1fr))'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{/* Card 1 - Total Value Locked */}
|
|||
|
|
<div
|
|||
|
|
className="bg-white flex flex-row items-center justify-between h-[182px] relative"
|
|||
|
|
style={{
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
borderColor: '#e5e7eb',
|
|||
|
|
borderWidth: '0px 1px 0px 0px',
|
|||
|
|
gridColumn: '1 / span 1',
|
|||
|
|
gridRow: '1 / span 1'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
|
|||
|
|
<div
|
|||
|
|
className="text-[#4b5563] text-left relative font-inter"
|
|||
|
|
style={{
|
|||
|
|
fontSize: '16px',
|
|||
|
|
lineHeight: '150%',
|
|||
|
|
fontWeight: 400
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Total Value Locked
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
ref={tvl.elementRef}
|
|||
|
|
className="text-[#111827] text-left relative font-jetbrains"
|
|||
|
|
style={{
|
|||
|
|
fontSize: '48px',
|
|||
|
|
lineHeight: '110%',
|
|||
|
|
letterSpacing: '-0.01em',
|
|||
|
|
fontWeight: 800
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{formatNumber(tvl.count, '$', 'M+', 'M')}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Card 2 - Avg. APY */}
|
|||
|
|
<div
|
|||
|
|
className="bg-white flex flex-row items-center justify-between h-[182px] relative"
|
|||
|
|
style={{
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
borderColor: '#e5e7eb',
|
|||
|
|
borderWidth: '0px 1px 0px 0px',
|
|||
|
|
padding: '0px 32px',
|
|||
|
|
gridColumn: '2 / span 1',
|
|||
|
|
gridRow: '1 / span 1'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
|
|||
|
|
<div
|
|||
|
|
className="text-[#4b5563] text-left relative font-inter"
|
|||
|
|
style={{
|
|||
|
|
fontSize: '16px',
|
|||
|
|
lineHeight: '150%',
|
|||
|
|
fontWeight: 400
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Avg. APY
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
ref={apy.elementRef}
|
|||
|
|
className="text-[#111827] text-left relative font-jetbrains"
|
|||
|
|
style={{
|
|||
|
|
fontSize: '48px',
|
|||
|
|
lineHeight: '110%',
|
|||
|
|
letterSpacing: '-0.01em',
|
|||
|
|
fontWeight: 800
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{(apy.count / 100).toFixed(2)}%
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Card 3 - Yield Captured */}
|
|||
|
|
<div
|
|||
|
|
className="bg-white flex flex-row items-center justify-between h-[182px] relative"
|
|||
|
|
style={{
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
borderColor: '#e5e7eb',
|
|||
|
|
borderWidth: '0px 1px 0px 0px',
|
|||
|
|
padding: '0px 32px',
|
|||
|
|
gridColumn: '3 / span 1',
|
|||
|
|
gridRow: '1 / span 1'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
|
|||
|
|
<div
|
|||
|
|
className="text-[#4b5563] text-left relative font-inter"
|
|||
|
|
style={{
|
|||
|
|
fontSize: '16px',
|
|||
|
|
lineHeight: '150%',
|
|||
|
|
fontWeight: 400
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Yield Captured
|
|||
|
|
</div>
|
|||
|
|
<div
|
|||
|
|
ref={yield_.elementRef}
|
|||
|
|
className="text-[#111827] text-left relative self-stretch font-jetbrains"
|
|||
|
|
style={{
|
|||
|
|
fontSize: '48px',
|
|||
|
|
lineHeight: '110%',
|
|||
|
|
letterSpacing: '-0.01em',
|
|||
|
|
fontWeight: 800
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{formatNumber(yield_.count, '$', 'M', 'M')}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Card 4 - Connected Users */}
|
|||
|
|
<div
|
|||
|
|
className="bg-white flex flex-row items-center justify-between h-[182px] relative"
|
|||
|
|
style={{
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
borderColor: 'transparent',
|
|||
|
|
borderWidth: '0px 1px 0px 0px',
|
|||
|
|
padding: '0px 0px 0px 32px',
|
|||
|
|
gridColumn: '4 / span 1',
|
|||
|
|
gridRow: '1 / span 1'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
|
|||
|
|
<div
|
|||
|
|
className="text-[#4b5563] text-left relative font-inter"
|
|||
|
|
style={{
|
|||
|
|
fontSize: '16px',
|
|||
|
|
lineHeight: '150%',
|
|||
|
|
fontWeight: 400
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Connected Users
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* .frame-38 - Number and avatars */}
|
|||
|
|
<div className="flex flex-row items-center justify-between self-stretch flex-shrink-0 relative">
|
|||
|
|
{/* Number */}
|
|||
|
|
<div
|
|||
|
|
ref={users.elementRef}
|
|||
|
|
className="text-[#111827] text-left relative font-jetbrains"
|
|||
|
|
style={{
|
|||
|
|
fontSize: '48px',
|
|||
|
|
lineHeight: '110%',
|
|||
|
|
letterSpacing: '-0.01em',
|
|||
|
|
fontWeight: 800
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
{users.count.toLocaleString()}+
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* .container9 - Avatar group */}
|
|||
|
|
<div className="flex flex-row items-center justify-start flex-shrink-0 relative overflow-hidden">
|
|||
|
|
{/* Avatar 1 - image-23 */}
|
|||
|
|
<div
|
|||
|
|
className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
|
|||
|
|
mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
|
|||
|
|
}`}
|
|||
|
|
style={{
|
|||
|
|
borderRadius: '15239273px',
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
borderWidth: '1.82px',
|
|||
|
|
padding: '1.82px',
|
|||
|
|
aspectRatio: 1,
|
|||
|
|
transitionDelay: '100ms'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Image
|
|||
|
|
src="/image-230.png"
|
|||
|
|
alt="User"
|
|||
|
|
width={33}
|
|||
|
|
height={33}
|
|||
|
|
className="absolute object-cover"
|
|||
|
|
style={{
|
|||
|
|
left: '1.82px',
|
|||
|
|
top: '1.82px',
|
|||
|
|
aspectRatio: 1
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Avatar 2 - image-24 */}
|
|||
|
|
<div
|
|||
|
|
className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
|
|||
|
|
mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
|
|||
|
|
}`}
|
|||
|
|
style={{
|
|||
|
|
margin: '0 0 0 -8px',
|
|||
|
|
borderRadius: '15239273px',
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
borderWidth: '1.82px',
|
|||
|
|
padding: '1.82px',
|
|||
|
|
aspectRatio: 1,
|
|||
|
|
transitionDelay: '200ms'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Image
|
|||
|
|
src="/image-240.png"
|
|||
|
|
alt="User"
|
|||
|
|
width={36}
|
|||
|
|
height={36}
|
|||
|
|
className="absolute object-cover"
|
|||
|
|
style={{
|
|||
|
|
left: '0px',
|
|||
|
|
top: '0px',
|
|||
|
|
aspectRatio: 1
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Avatar 3 - image-25 */}
|
|||
|
|
<div
|
|||
|
|
className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
|
|||
|
|
mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
|
|||
|
|
}`}
|
|||
|
|
style={{
|
|||
|
|
margin: '0 0 0 -8px',
|
|||
|
|
borderRadius: '15239273px',
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
borderWidth: '1.82px',
|
|||
|
|
padding: '1.82px',
|
|||
|
|
aspectRatio: 1,
|
|||
|
|
transitionDelay: '300ms'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Image
|
|||
|
|
src="/image-250.png"
|
|||
|
|
alt="User"
|
|||
|
|
width={40}
|
|||
|
|
height={40}
|
|||
|
|
className="absolute object-cover"
|
|||
|
|
style={{
|
|||
|
|
left: '6px',
|
|||
|
|
top: '0.5px',
|
|||
|
|
aspectRatio: 1
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Avatar 4 - image-252 */}
|
|||
|
|
<div
|
|||
|
|
className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
|
|||
|
|
mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
|
|||
|
|
}`}
|
|||
|
|
style={{
|
|||
|
|
margin: '0 0 0 -8px',
|
|||
|
|
borderRadius: '15239273px',
|
|||
|
|
borderStyle: 'solid',
|
|||
|
|
borderWidth: '1.82px',
|
|||
|
|
padding: '1.82px',
|
|||
|
|
aspectRatio: 1,
|
|||
|
|
transitionDelay: '400ms'
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Image
|
|||
|
|
src="/image-251.png"
|
|||
|
|
alt="User"
|
|||
|
|
width={36}
|
|||
|
|
height={36}
|
|||
|
|
className="absolute object-cover"
|
|||
|
|
style={{
|
|||
|
|
left: '0px',
|
|||
|
|
top: '0px',
|
|||
|
|
aspectRatio: 1
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
);
|
|||
|
|
}
|