fix: update local tokens cache to keep priceUSD in sync (#61)

lifinance · Mar 1, 2023 · d3f4d87 · d3f4d87
1 parent 66c52c0
commit d3f4d87
Show file tree

Hide file tree

Showing 7 changed files with 52 additions and 29 deletions.
diff --git a/packages/widget/src/components/ChainSelect/useChainSelect.ts b/packages/widget/src/components/ChainSelect/useChainSelect.ts
@@ -20,7 +20,7 @@ export const useChainSelect = (formType: SwapFormType) => {
     }
     const selectedChains = chainOrder
       .map((chainId) => chains.find((chain) => chain.id === chainId))
-      .filter((chain) => chain) as EVMChain[];
+      .filter(Boolean) as EVMChain[];
 
     return selectedChains;
   };

diff --git a/packages/widget/src/hooks/useRouteExecution.ts b/packages/widget/src/hooks/useRouteExecution.ts
@@ -105,7 +105,7 @@ export const useRouteExecution = ({
       if (!routeExecution?.route) {
         throw Error('Execution route not found.');
       }
-      queryClient.removeQueries(['routes']);
+      queryClient.removeQueries(['routes'], { exact: false });
       return lifi.executeRoute(account.signer, routeExecution.route, {
         updateCallback,
         switchChainHook,

diff --git a/packages/widget/src/hooks/useSwapRoutes.ts b/packages/widget/src/hooks/useSwapRoutes.ts
@@ -1,5 +1,5 @@
 import { isAddress } from '@ethersproject/address';
-import type { Route } from '@lifi/sdk';
+import type { Route, RoutesResponse, Token } from '@lifi/sdk';
 import { LifiErrorCode } from '@lifi/sdk';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import Big from 'big.js';
@@ -176,7 +176,7 @@ export const useSwapRoutes = () => {
             steps: [contractCallQuote],
           };
 
-          return { routes: [route] };
+          return { routes: [route] } as RoutesResponse;
         }
         return lifi.getRoutes(
           {
@@ -213,6 +213,30 @@ export const useSwapRoutes = () => {
           }
           return true;
         },
+        onSuccess(data) {
+          if (data.routes[0]) {
+            // Update local tokens cache to keep priceUSD in sync
+            const { fromToken, toToken } = data.routes[0];
+            [fromToken, toToken].forEach((token) => {
+              queryClient.setQueriesData<Token[]>(
+                ['token-balances', account.address, token.chainId],
+                (data) => {
+                  if (data) {
+                    const clonedData = [...data];
+                    const index = clonedData.findIndex(
+                      (dataToken) => dataToken.address === token.address,
+                    );
+                    clonedData[index] = {
+                      ...clonedData[index],
+                      ...token,
+                    };
+                    return clonedData;
+                  }
+                },
+              );
+            });
+          }
+        },
       },
     );
 

diff --git a/packages/widget/src/hooks/useTokenAddressBalance.ts b/packages/widget/src/hooks/useTokenAddressBalance.ts
@@ -9,6 +9,7 @@ export const useTokenAddressBalance = (
     useTokenBalances(chainId);
 
   const token = useMemo(() => {
+    console.log('useTokenAddressBalance');
     const token = (tokensWithBalance ?? tokens)?.find(
       (token) => token.address === tokenAddress && token.chainId === chainId,
     );

diff --git a/packages/widget/src/hooks/useTokenBalance.ts b/packages/widget/src/hooks/useTokenBalance.ts
@@ -83,19 +83,20 @@ export const useTokenBalance = (token?: Token, accountAddress?: string) => {
         });
       }
 
-      queryClient.setQueryData<TokenAmount[]>(
+      queryClient.setQueriesData<TokenAmount[]>(
         ['token-balances', accountAddress, token!.chainId],
         (data) => {
           if (data) {
-            const index = data.findIndex(
+            const clonedData = [...data];
+            const index = clonedData.findIndex(
               (dataToken) => dataToken.address === token!.address,
             );
-            data[index] = {
-              ...data[index],
+            clonedData[index] = {
+              ...clonedData[index],
               amount: formattedAmount,
             };
+            return clonedData;
           }
-          return data;
         },
       );
 
@@ -112,11 +113,10 @@ export const useTokenBalance = (token?: Token, accountAddress?: string) => {
   );
 
   const refetchAllBalances = () => {
-    queryClient.refetchQueries([
-      'token-balances',
-      token?.chainId,
-      accountAddress,
-    ]);
+    queryClient.refetchQueries(
+      ['token-balances', accountAddress, token?.chainId],
+      { exact: false },
+    );
   };
 
   const refetchNewBalance = useCallback(() => {

diff --git a/packages/widget/src/hooks/useTokenSearch.ts b/packages/widget/src/hooks/useTokenSearch.ts
@@ -21,20 +21,18 @@ export const useTokenSearch = (
         },
       );
       if (token) {
-        queryClient.setQueriesData(
-          ['tokens'],
-          (data?: TokensResponse) => {
-            if (
-              !data?.tokens[chainId as number].some(
-                (t) => t.address === token.address,
-              )
-            ) {
-              data?.tokens[chainId as number].push(token as Token);
-            }
-            return data;
-          },
-          { updatedAt: Date.now() },
-        );
+        queryClient.setQueriesData<TokensResponse>(['tokens'], (data) => {
+          if (
+            data &&
+            !data.tokens[chainId as number].some(
+              (t) => t.address === token.address,
+            )
+          ) {
+            const clonedData = { ...data };
+            clonedData.tokens[chainId as number].push(token as Token);
+            return clonedData;
+          }
+        });
       }
       return token as Token;
     },

diff --git a/packages/widget/src/pages/SettingsPage/EnabledToolsButton.tsx b/packages/widget/src/pages/SettingsPage/EnabledToolsButton.tsx
@@ -14,7 +14,7 @@ export const EnabledToolsButton: React.FC<{
   const navigate = useNavigate();
   const [enabledTools, tools] = useSettingsStore((state) => {
     const enabledTools = Object.values(state[`_enabled${type}`] ?? {});
-    return [enabledTools.filter((tool) => tool).length, enabledTools.length];
+    return [enabledTools.filter(Boolean).length, enabledTools.length];
   }, shallow);
 
   const handleClick = () => {