feat: integrate automatic chain switching and update Wagmi configurat…

…ion for network support
decentdao · Dec 7, 2024 · 999f0f6 · 999f0f6
1 parent a3f879b
commit 999f0f6
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/src/hooks/utils/useAutomaticSwitchChain.ts b/src/hooks/utils/useAutomaticSwitchChain.ts
@@ -1,4 +1,5 @@
 import { useEffect } from 'react';
+import { useSwitchChain } from 'wagmi';
 import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { getChainIdFromPrefix } from '../../utils/url';
 
@@ -8,11 +9,25 @@ export const useAutomaticSwitchChain = ({
   urlAddressPrefix: string | undefined;
 }) => {
   const { setCurrentConfig, getConfigByChainId, addressPrefix } = useNetworkConfigStore();
+  const { switchChain } = useSwitchChain({
+    mutation: {
+      onError: () => {
+        if (addressPrefix !== urlAddressPrefix && urlAddressPrefix !== undefined) {
+          const chainId = getChainIdFromPrefix(urlAddressPrefix);
+          switchChain({ chainId });
+        }
+      },
+    },
+  });
 
   useEffect(() => {
     if (urlAddressPrefix === undefined || addressPrefix === urlAddressPrefix) {
       return;
     }
-    setCurrentConfig(getConfigByChainId(getChainIdFromPrefix(urlAddressPrefix)));
-  }, [addressPrefix, setCurrentConfig, getConfigByChainId, urlAddressPrefix]);
+    const chainId = getChainIdFromPrefix(urlAddressPrefix);
+    setCurrentConfig(getConfigByChainId(chainId));
+    if (addressPrefix !== urlAddressPrefix && urlAddressPrefix !== undefined) {
+      switchChain({ chainId });
+    }
+  }, [addressPrefix, setCurrentConfig, getConfigByChainId, urlAddressPrefix, switchChain]);
 };
diff --git a/src/providers/NetworkConfig/web3-modal.config.ts b/src/providers/NetworkConfig/web3-modal.config.ts
@@ -1,12 +1,18 @@
 import { QueryClient } from '@tanstack/react-query';
+import { createWeb3Modal } from '@web3modal/wagmi/react';
+import { defaultWagmiConfig } from '@web3modal/wagmi/react/config';
 import { HttpTransport } from 'viem';
 import { http } from 'wagmi';
+import { Chain } from 'wagmi/chains';
 import { NetworkConfig } from '../../types/network';
+import { supportedNetworks } from './useNetworkConfigStore';
+
+const supportedWagmiChains = supportedNetworks.map(network => network.chain);
 
 export const walletConnectProjectId = import.meta.env.VITE_APP_WALLET_CONNECT_PROJECT_ID;
 export const queryClient = new QueryClient();
 
-export const wagmiMetadata = {
+const metadata = {
   name: import.meta.env.VITE_APP_NAME,
   description:
     'Are you outgrowing your Multisig? Decent extends Safe treasuries into on-chain hierarchies of permissions, token flows, and governance.',
@@ -21,3 +27,17 @@ export const transportsReducer = (
   accumulator[network.chain.id] = http(network.rpcEndpoint);
   return accumulator;
 };
+
+export const wagmiConfig = defaultWagmiConfig({
+  chains: supportedWagmiChains as [Chain, ...Chain[]],
+  projectId: walletConnectProjectId,
+  metadata,
+  transports: supportedNetworks.reduce(transportsReducer, {}),
+  batch: {
+    multicall: true,
+  },
+});
+
+if (walletConnectProjectId) {
+  createWeb3Modal({ wagmiConfig, projectId: walletConnectProjectId, metadata: metadata });
+}