From d43b1067f600fadefb75a116d2b9d3002b69d011 Mon Sep 17 00:00:00 2001
From: Britt Cyr <cyrbritt@gmail.com>
Date: Fri, 15 Nov 2024 16:10:03 -0500
Subject: [PATCH] Add 24 hour volume to ui (#287)

* Add 24 hour volume to ui

* space

* rename
---
 debug-ui/app/components/AppWalletProvider.tsx | 12 ++++++++++++
 debug-ui/app/page.tsx                         | 16 +++++++++++++---
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/debug-ui/app/components/AppWalletProvider.tsx b/debug-ui/app/components/AppWalletProvider.tsx
index 2e331fd21..34b56cba1 100644
--- a/debug-ui/app/components/AppWalletProvider.tsx
+++ b/debug-ui/app/components/AppWalletProvider.tsx
@@ -46,6 +46,7 @@ interface AppStateContextValue {
   labelsByAddr: LabelsByAddr;
   activeByAddr: ActiveByAddr;
   marketVolumes: VolumeByAddr;
+  dailyVolumes: VolumeByAddr;
   setMarketAddrs: Dispatch<SetStateAction<string[]>>;
   setLabelsByAddr: Dispatch<SetStateAction<LabelsByAddr>>;
   setActiveByAddr: Dispatch<SetStateAction<ActiveByAddr>>;
@@ -72,6 +73,7 @@ const AppWalletProvider = ({
   const [network, setNetwork] = useState<WalletAdapterNetwork | null>(null);
   const [marketAddrs, setMarketAddrs] = useState<string[]>([]);
   const [marketVolumes, setMarketVolumes] = useState<VolumeByAddr>({});
+  const [dailyVolumes, setDailyVolumes] = useState<VolumeByAddr>({});
   const [labelsByAddr, setLabelsByAddr] = useState<LabelsByAddr>({});
   const [activeByAddr, setActiveByAddr] = useState<ActiveByAddr>({});
   const [loading, setLoading] = useState<boolean>(false);
@@ -197,6 +199,15 @@ const AppWalletProvider = ({
         setActiveByAddr(activeByAddr);
 
         fetchAndSetMfxAddrLabels(conn, marketAddrs, setLabelsByAddr);
+
+        const tickers = await fetch(
+          'https://mfx-stats-mainnet.fly.dev/tickers',
+        );
+        const dailyVolumeByAddr: VolumeByAddr = {};
+        (await tickers.json()).forEach((ticker: any) => {
+          dailyVolumeByAddr[ticker['ticker_id']] = ticker['target_volume'];
+        });
+        setDailyVolumes(dailyVolumeByAddr);
       } catch (e) {
         console.error('fetching app state:', e);
         toast.error(`placeOrder: ${ensureError(e).message}`);
@@ -234,6 +245,7 @@ const AppWalletProvider = ({
               setMarketAddrs,
               setMarketVolumes,
               setActiveByAddr,
+              dailyVolumes,
               loading,
             }}
           >
diff --git a/debug-ui/app/page.tsx b/debug-ui/app/page.tsx
index ebab0b959..992cf5f50 100644
--- a/debug-ui/app/page.tsx
+++ b/debug-ui/app/page.tsx
@@ -9,8 +9,14 @@ import 'react-toggle/style.css';
 
 const Home = (): ReactElement => {
   const readOnly = process.env.NEXT_PUBLIC_READ_ONLY === 'true';
-  const { marketAddrs, loading, labelsByAddr, marketVolumes, activeByAddr } =
-    useAppState();
+  const {
+    marketAddrs,
+    loading,
+    labelsByAddr,
+    marketVolumes,
+    activeByAddr,
+    dailyVolumes,
+  } = useAppState();
   const [showAll, setShowAll] = useState<boolean>(false);
 
   function handleShowAllChange(event: { target: { checked: any } }) {
@@ -53,7 +59,11 @@ const Home = (): ReactElement => {
                         {addrToLabel(market, labelsByAddr)}
                       </Link>
                       {marketVolumes[market] != 0
-                        ? ': $' + marketVolumes[market]?.toFixed(2)
+                        ? ' Total: $' + marketVolumes[market]?.toFixed(2)
+                        : ''}
+                      {dailyVolumes[market] != 0 &&
+                      dailyVolumes[market] !== undefined
+                        ? ', 24 Hour: $' + dailyVolumes[market]?.toFixed(2)
                         : ''}
                     </li>
                   ),