From 2c6e90cbb037628966be72aaf698656052c89560 Mon Sep 17 00:00:00 2001
From: MrX-SNX <max@cc.snxdao.io>
Date: Mon, 8 Jul 2024 12:00:13 +0100
Subject: [PATCH] feat: all snx burned (#349)

---
 .../ui/components/SupplyChangeStats.tsx       | 21 ++++++++++++++++---
 ultrasound/ui/hooks/useBurnEvents.ts          |  3 +++
 2 files changed, 21 insertions(+), 3 deletions(-)

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 (
     <Flex
@@ -30,14 +34,25 @@ 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} />
@@ -45,7 +60,7 @@ export function SupplyChangeStats() {
               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
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,