diff --git a/ultrasound/ui/components/SupplyChangeStats.tsx b/ultrasound/ui/components/SupplyChangeStats.tsx index e3cbb8090..ea292c1c4 100644 --- a/ultrasound/ui/components/SupplyChangeStats.tsx +++ b/ultrasound/ui/components/SupplyChangeStats.tsx @@ -2,9 +2,13 @@ import { Flex, Image, Link, Spinner, Tab, TabList, Tabs, Text } from '@chakra-ui import { useBurnEvents } from '../hooks/useBurnEvents'; import burnSvg from './svgs/burn.svg'; import mintedSvg from './svgs/minted.svg'; +import { useState } from 'react'; export function SupplyChangeStats() { const { data: events, isLoading } = useBurnEvents(); + const [selectedTime, setSelectedTime] = useState<'totalBurned' | 'supplyChange7Days'>( + 'supplyChange7Days' + ); return ( - + setSelectedTime('supplyChange7Days')} + > 7D + setSelectedTime('totalBurned')} + > + All + - -{events?.supplyChange7Days} SNX + -{events ? events[selectedTime] : 0} SNX @@ -45,7 +60,7 @@ export function SupplyChangeStats() { Burnt - {events?.supplyChange7Days} SNX + {events ? events[selectedTime] : 0} SNX diff --git a/ultrasound/ui/hooks/useBurnEvents.ts b/ultrasound/ui/hooks/useBurnEvents.ts index cc51a8d21..74e77baac 100644 --- a/ultrasound/ui/hooks/useBurnEvents.ts +++ b/ultrasound/ui/hooks/useBurnEvents.ts @@ -84,6 +84,9 @@ export function useBurnEvents() { return { totalBurns: events.length, + totalBurned: totalBurned.toLocaleString('en-US', { + maximumFractionDigits: 2, + }), groupedByMonths, groupedByLast30Days, supplyChange7Days,