Add 24 hour volume to ui (#287)

* Add 24 hour volume to ui * space * rename
CKS-Systems · Nov 15, 2024 · d43b106 · d43b106
1 parent 9cd2ac1
commit d43b106
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 3 deletions.
diff --git 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
@@ -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>
                   ),