feat(frontend): show all-time volume

fix: pnpm

fixup! feat(frontend): show all-time volume

fix: make requests concurrently

fixup! feat(frontend): show all-time volume

fix: font size and layout shift

fixup! feat(frontend): show all-time volume

fix: reduce request frequency

packages/frontend/package.json

@@ -39,6 +39,7 @@
     "bn.js": "5.2.1",
     "debounce": "^1.2.1",
     "ethers": "^5.6.1",
+    "graphql-request": "^6.1.0",
     "hash.js": "1.1.7",
     "js-sha3": "0.8.0",
     "react": "^18.2.0",

packages/frontend/src/App.tsx

@@ -5,13 +5,15 @@ import { Header } from './components/Header/Header';
 import { Hero } from './components/Hero/Hero';
 import { Route, Routes } from 'react-router-dom';
 import { SpaceTravelCanvas } from './space-travel/SpaceTravelCanvas';
+import { Stats } from './components/Stats/Stats';
 
 const Layout: FunctionComponent<{ children: ReactNode }> = ({ children }) => {
   return (
     <>
       <SpaceTravelCanvas />
       <div className="relative">
         <Header />
+        <Stats />
         <main className="px-2 sm:px-8 relative">{children}</main>
         <Footer />
       </div>

packages/frontend/src/components/Stats/Stats.tsx

@@ -0,0 +1,23 @@
+import { useAllTimeStats } from 'src/hooks/useAllTimeStats';
+import { numberWithCommas } from 'src/utils/numberWithCommas';
+
+const Stats = () => {
+  const { error, data } = useAllTimeStats();
+
+  if (error) {
+    console.error('Failed to fetch all-time stats:', error);
+  }
+
+  return (
+    <div className="font-display m-auto text-center text-sm p-2 flex place-items-center justify-center relative">
+      {data ? (
+        `All-time volume: $${numberWithCommas(data)}`
+      ) : (
+        // To avoid layout shifts
+        <span className="invisible">Placehodler</span>
+      )}
+    </div>
+  );
+};
+
+export { Stats };

packages/frontend/src/hooks/useAllTimeStats.tsx

@@ -0,0 +1,48 @@
+import { useQuery } from '@tanstack/react-query';
+import { request, gql } from 'graphql-request';
+import GRAPH_URLS from 'src/subgraph.json';
+
+const ALL_TIME_STATS_QUERY = gql`
+  query {
+    allTimeStats(id: "current") {
+      volumeUsd
+    }
+  }
+`;
+
+type AllTimeStatsResponse = {
+  allTimeStats: {
+    volumeUsd: string;
+  };
+};
+
+const useAllTimeStats = () => {
+  return useQuery(
+    ['allTimeStats'],
+    async () => {
+      const responses = (await Promise.all(
+        Object.values(GRAPH_URLS).map(url =>
+          request(url, ALL_TIME_STATS_QUERY).catch((error: any) => {
+            console.error(`Failed to fetch data from ${url}:`, error);
+
+            return { allTimeStats: { volumeUsd: '0' } };
+          })
+        )
+      )) as AllTimeStatsResponse[];
+
+      const totalVolumeUsd = responses.reduce(
+        (sum: number, response: AllTimeStatsResponse) =>
+          sum + Number(response.allTimeStats?.volumeUsd ?? '0'),
+        0
+      );
+
+      return Math.round(totalVolumeUsd);
+    },
+    {
+      staleTime: 1000 * 60 * 5, // 5 minutes
+      refetchOnWindowFocus: false,
+    }
+  );
+};
+
+export { useAllTimeStats };

packages/frontend/src/subgraph.json

@@ -0,0 +1,9 @@
+{
+  "1": "https://gateway-arbitrum.network.thegraph.com/api/3e9d2f58d24bcd5d854ba4c4c8df5c3b/subgraphs/id/G316MkVLSw1ksstmonpSQ1UEBUWmRSZf4QkoRA5CN4TA",
+  "10": "https://api.thegraph.com/subgraphs/name/sifiorg/sifi-optimism",
+  "56": "https://api.thegraph.com/subgraphs/name/sifiorg/sifi-bsc",
+  "137": "https://gateway-arbitrum.network.thegraph.com/api/3e9d2f58d24bcd5d854ba4c4c8df5c3b/subgraphs/id/VJesTAc98ochTTwDQViVgnM4jWhyRC4pyWHBpDQkCjj",
+  "8453": "https://api.thegraph.com/subgraphs/name/sifiorg/sifi-base",
+  "42161": "https://gateway-arbitrum.network.thegraph.com/api/3e9d2f58d24bcd5d854ba4c4c8df5c3b/subgraphs/id/BVexPGe3pnB7Mw7ajFkEDQJ8XY8XdVKbAL37ydmorhSQ",
+  "43114": "https://gateway-arbitrum.network.thegraph.com/api/3e9d2f58d24bcd5d854ba4c4c8df5c3b/subgraphs/id/4cn8JGVKUJBWRJNt4n5KQNMKyMLjRATUBLQ9oSCbL9QA"
+}

packages/frontend/tsconfig.json

@@ -18,6 +18,6 @@
     "composite": true,
     "outDir": "dist"
   },
-  "include": ["src/**/*", ".storybook/decorators/*", "src"],
+  "include": ["src/**/*", ".storybook/decorators/*", "src", "src/subgraph.json"],
   "exclude": ["node_modules", "dist"]
 }