chore: enable chains update from config

lifinance · Dec 1, 2023 · 9cc4f33 · 9cc4f33
1 parent a42e720
commit 9cc4f33
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 52 deletions.
diff --git a/packages/widget/src/AppProvider.tsx b/packages/widget/src/AppProvider.tsx
@@ -21,19 +21,19 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
 }) => {
   return (
     <QueryClientProvider client={queryClient}>
-      <StoreProvider config={config}>
-        <WidgetProvider config={config}>
-          <ThemeProvider>
-            <I18nProvider>
-              <WalletProvider>
-                <FormProvider>
+      <WidgetProvider config={config}>
+        <ThemeProvider>
+          <I18nProvider>
+            <WalletProvider>
+              <FormProvider>
+                <StoreProvider config={config}>
                   <AppRouter>{children}</AppRouter>
-                </FormProvider>
-              </WalletProvider>
-            </I18nProvider>
-          </ThemeProvider>
-        </WidgetProvider>
-      </StoreProvider>
+                </StoreProvider>
+              </FormProvider>
+            </WalletProvider>
+          </I18nProvider>
+        </ThemeProvider>
+      </WidgetProvider>
     </QueryClientProvider>
   );
 };

diff --git a/packages/widget/src/hooks/useChains.ts b/packages/widget/src/hooks/useChains.ts
@@ -1,54 +1,25 @@
-import { useQuery } from '@tanstack/react-query';
-import { useFormContext } from 'react-hook-form';
-import { FormKey, isItemAllowed, useWidgetConfig } from '../providers';
-import { useChainOrderStore } from '../stores';
+import { useMemo } from 'react';
+import { isItemAllowed, useWidgetConfig } from '../providers';
 import { useAvailableChains } from './useAvailableChains';
 
 export const useChains = () => {
-  const { chains, keyPrefix } = useWidgetConfig();
-  const { getValues, setValue } = useFormContext();
-  const initializeChains = useChainOrderStore(
-    (state) => state.initializeChains,
-  );
+  const { chains } = useWidgetConfig();
   const {
     chains: availableChains,
     isLoading: isLoadingAvailableChains,
     getChainById,
   } = useAvailableChains();
 
-  const { data: filteredChains, isLoading: isLoadingFilteredChains } = useQuery(
-    {
-      queryKey: ['filtered-chains', availableChains?.length, keyPrefix],
-      queryFn: () => {
-        if (!availableChains) {
-          return;
-        }
-        const filteredChains = availableChains.filter((chain) =>
-          isItemAllowed(chain.id, chains),
-        );
-        const chainOrder = initializeChains(
-          filteredChains.map((chain) => chain.id),
-        );
-        const [fromChainValue, toChainValue] = getValues([
-          FormKey.FromChain,
-          FormKey.ToChain,
-        ]);
-        if (!fromChainValue) {
-          setValue(FormKey.FromChain, chainOrder[0]);
-        }
-        if (!toChainValue) {
-          setValue(FormKey.ToChain, chainOrder[0]);
-        }
-
-        return filteredChains;
-      },
-      enabled: Boolean(availableChains),
-    },
-  );
+  const filteredChains = useMemo(() => {
+    const filteredChains = availableChains?.filter((chain) =>
+      isItemAllowed(chain.id, chains),
+    );
+    return filteredChains;
+  }, [availableChains, chains]);
 
   return {
     chains: filteredChains,
     getChainById,
-    isLoading: isLoadingAvailableChains || isLoadingFilteredChains,
+    isLoading: isLoadingAvailableChains,
   };
 };
diff --git a/packages/widget/src/stores/chains/ChainOrderStore.tsx b/packages/widget/src/stores/chains/ChainOrderStore.tsx
@@ -1,6 +1,9 @@
-import { createContext, useContext, useRef } from 'react';
+import { createContext, useContext, useEffect, useRef } from 'react';
+import { useFormContext } from 'react-hook-form';
 import type { StoreApi } from 'zustand';
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+import { useChains } from '../../hooks';
+import { FormKey } from '../../providers';
 import type { PersistStoreProviderProps } from '../types';
 import { createChainOrderStore } from './createChainOrderStore';
 import type { ChainOrderState } from './types';
@@ -18,9 +21,33 @@ export function ChainOrderStoreProvider({
   ...props
 }: PersistStoreProviderProps) {
   const storeRef = useRef<ChainOrderStore>();
+  const { chains: filteredChains } = useChains();
+  const { setValue, getValues } = useFormContext();
+
   if (!storeRef.current) {
     storeRef.current = createChainOrderStore(props);
   }
+
+  useEffect(() => {
+    if (filteredChains) {
+      const chainOrder = storeRef.current
+        ?.getState()
+        .initializeChains(filteredChains.map((chain) => chain.id));
+      if (chainOrder) {
+        const [fromChainValue, toChainValue] = getValues([
+          FormKey.FromChain,
+          FormKey.ToChain,
+        ]);
+        if (!fromChainValue) {
+          setValue(FormKey.FromChain, chainOrder[0]);
+        }
+        if (!toChainValue) {
+          setValue(FormKey.ToChain, chainOrder[0]);
+        }
+      }
+    }
+  }, [filteredChains, getValues, setValue]);
+
   return (
     <ChainOrderStoreContext.Provider value={storeRef.current}>
       {children}