fix: load only supported chains tokens

lifinance · Oct 11, 2022 · 882beb7 · 882beb7
1 parent 8ead9ae
commit 882beb7
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/packages/widget/src/hooks/useTokens.ts b/packages/widget/src/hooks/useTokens.ts
@@ -1,10 +1,12 @@
 import { useQuery } from '@tanstack/react-query';
 import { isItemAllowed, useLiFi, useWidgetConfig } from '../providers';
 import type { Token } from '../types';
+import { useChains } from './useChains';
 import { useFeaturedTokens } from './useFeaturedTokens';
 
 export const useTokens = (selectedChainId?: number) => {
   const lifi = useLiFi();
+  const { getChainById, isLoading: isSupportedChainsLoading } = useChains();
   const featuredTokens = useFeaturedTokens(selectedChainId);
   const { tokens, chains, disabledChains } = useWidgetConfig();
   const { data, isLoading } = useQuery(
@@ -20,6 +22,7 @@ export const useTokens = (selectedChainId?: number) => {
     async () => {
       const chainAllowed =
         selectedChainId &&
+        getChainById(selectedChainId) &&
         isItemAllowed(selectedChainId, chains, disabledChains);
       if (!chainAllowed) {
         return [];
@@ -52,6 +55,9 @@ export const useTokens = (selectedChainId?: number) => {
         ) ?? []),
       ] as Token[];
     },
+    {
+      enabled: !isSupportedChainsLoading,
+    },
   );
   return {
     tokens: data,