feat: all snx burned (#349)

Synthetixio · Jul 8, 2024 · 2c6e90c · 2c6e90c
1 parent 6d9ead9
commit 2c6e90c
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 3 deletions.
diff --git 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 (
     <Flex
@@ -30,22 +34,33 @@ export function SupplyChangeStats() {
             </Text>
             <Tabs variant="soft-rounded" size="sm">
               <TabList>
-                <Tab color="gray.500" _selected={{ color: 'white', bg: 'whiteAlpha.400' }}>
+                <Tab
+                  color="gray.500"
+                  _selected={{ color: 'white', bg: 'whiteAlpha.400' }}
+                  onClick={() => setSelectedTime('supplyChange7Days')}
+                >
                   7D
                 </Tab>
+                <Tab
+                  color="gray.500"
+                  _selected={{ color: 'white', bg: 'whiteAlpha.400' }}
+                  onClick={() => setSelectedTime('totalBurned')}
+                >
+                  All
+                </Tab>
               </TabList>
             </Tabs>
           </Flex>
           <Text fontWeight={700} fontSize="24px">
-            -{events?.supplyChange7Days} SNX
+            -{events ? events[selectedTime] : 0} SNX
           </Text>
           <Flex gap="2" alignItems="center">
             <Image src={burnSvg} />
             <Text fontSize="16px" color="gray.500" fontWeight={400}>
               Burnt
             </Text>
             <Text fontSize="18px" color="gray.500" fontWeight={700}>
-              {events?.supplyChange7Days} SNX
+              {events ? events[selectedTime] : 0} SNX
             </Text>
           </Flex>
           <Flex gap="2" alignItems="center">

diff --git 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,