feat(frontend): show recent swaps across all chains (sifiorg#398)

xykota · Nov 7, 2023 · a141f4e · a141f4e
1 parent aa3af61
commit a141f4e
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 18 deletions.
diff --git a/packages/frontend/src/components/RecentWarps/RecentWarps.tsx b/packages/frontend/src/components/RecentWarps/RecentWarps.tsx
@@ -3,7 +3,7 @@ import { FunctionComponent } from 'react';
 import { useRecentWarps } from 'src/hooks/useRecentWarps';
 import { useTokens } from 'src/hooks/useTokens';
 import { getIconFromSymbol } from 'src/utils';
-import { Stats } from '../Stats/Stats';
+import { getChainIcon } from 'src/utils/chains';
 
 const RecentWarpsTableData: FunctionComponent = () => {
   const { data: warps, error, isLoading } = useRecentWarps();
@@ -45,11 +45,17 @@ const RecentWarpsTableData: FunctionComponent = () => {
                     From
                   </span>
                   <div className="flex items-center">
-                    <img
-                      className="mr-3 h-6 w-6 rounded-full"
-                      src={getIconFromSymbol(warp.tokenIn.symbol, fromTokens)}
-                      alt="Logo"
-                    />
+                    <div className="relative mr-3 ">
+                      <img
+                        className="h-6 w-6 rounded-full"
+                        src={getIconFromSymbol(warp.tokenIn.symbol, fromTokens)}
+                        alt="Logo"
+                      />
+                      <img
+                        src={getChainIcon(warp.chainId)}
+                        className="w-3 h-3 -right-1 -bottom-1 absolute"
+                      />
+                    </div>
                     <span>{`${formatTokenAmount(warp.amountInDecimal)} ${
                       warp.tokenIn.symbol
                     }`}</span>
@@ -75,11 +81,17 @@ const RecentWarpsTableData: FunctionComponent = () => {
                     To
                   </span>
                   <div className="flex items-center sm:pl-8">
-                    <img
-                      className="mr-3 h-6 w-6 rounded-full"
-                      src={getIconFromSymbol(warp.tokenOut.symbol, fromTokens)}
-                      alt="Logo"
-                    />
+                    <div className="relative mr-3 ">
+                      <img
+                        className="h-6 w-6 rounded-full"
+                        src={getIconFromSymbol(warp.tokenOut.symbol, fromTokens)}
+                        alt="Logo"
+                      />
+                      <img
+                        src={getChainIcon(warp.chainId)}
+                        className="w-3 h-3 -right-1 -bottom-1 absolute"
+                      />
+                    </div>
                     <span>{`${formatTokenAmount(warp.amountOutDecimal)} ${
                       warp.tokenOut.symbol
                     }`}</span>

diff --git a/packages/frontend/src/hooks/useRecentWarps.tsx b/packages/frontend/src/hooks/useRecentWarps.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import { request, gql } from 'graphql-request';
 import GRAPH_URLS from 'src/subgraph.json';
-import { useSwapFormValues } from './useSwapFormValues';
+import { SUPPORTED_CHAINS } from 'src/utils/chains';
 
 const RECENT_WARPS_QUERY = gql`
   query recentWarps($since: BigInt!) {
@@ -22,6 +22,7 @@ const RECENT_WARPS_QUERY = gql`
 
 type Warp = {
   addedAt: string;
+  chainId: number;
   amountInDecimal: string;
   tokenIn: {
     symbol: string;
@@ -41,16 +42,39 @@ type GraphUrls = {
   [key: string]: string;
 };
 
-const useRecentWarps = () => {
-  const { fromChain } = useSwapFormValues();
+const getRecentWarpsForChainId = async (chainId: number): Promise<Warp[]> => {
+  const url = (GRAPH_URLS as GraphUrls)[chainId.toString()];
+
+  if (!url) return [];
 
+  const response: RecentWarpsResponse = await request(url, RECENT_WARPS_QUERY, { since: '0' });
+
+  return response.warps.map(warp => ({ ...warp, chainId })) as Warp[];
+};
+
+const useRecentWarps = () => {
   return useQuery(
-    ['recentWarps', fromChain.id.toString()],
+    ['recentWarps'],
     async () => {
-      const url = (GRAPH_URLS as GraphUrls)[fromChain.id];
-      const response: RecentWarpsResponse = await request(url, RECENT_WARPS_QUERY, { since: '0' });
+      const responses = await Promise.allSettled(
+        SUPPORTED_CHAINS.map(({ id }) => getRecentWarpsForChainId(id))
+      );
+
+      return responses
+        .map(response => {
+          if (
+            response.status === 'fulfilled' &&
+            (response satisfies PromiseFulfilledResult<Warp[]>) &&
+            response.value?.length
+          ) {
+            return response.value;
+          }
 
-      return response.warps as Warp[];
+          return [];
+        })
+        .flat()
+        .sort((a, b) => (Number(a.addedAt) < Number(b.addedAt) ? 1 : -1))
+        .slice(0, 10);
     },
     {
       staleTime: 1000 * 60 * 5, // 5 minutes