[Issue #2565] network config extended

src/components/ui/page/Global/index.tsx

@@ -21,7 +21,6 @@ import { Layout } from '../Layout';
 
 const useUserTracking = () => {
   const { address } = useAccount();
-
   useEffect(() => {
     Sentry.setUser(address ? { id: address } : null);
     if (address) {

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]);
 };

src/providers/NetworkConfig/web3-modal.config.ts

@@ -12,29 +12,32 @@ const supportedWagmiChains = supportedNetworks.map(network => network.chain);
 export const walletConnectProjectId = import.meta.env.VITE_APP_WALLET_CONNECT_PROJECT_ID;
 export const queryClient = new QueryClient();
 
-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.',
   url: import.meta.env.VITE_APP_SITE_URL,
   icons: [`${import.meta.env.VITE_APP_SITE_URL}/favicon-96x96.png`],
 };
 
-const transportsReducer = (accumulator: Record<string, HttpTransport>, network: NetworkConfig) => {
+export const transportsReducer = (
+  accumulator: Record<string, HttpTransport>,
+  network: NetworkConfig,
+) => {
   accumulator[network.chain.id] = http(network.rpcEndpoint);
   return accumulator;
 };
 
 export const wagmiConfig = defaultWagmiConfig({
   chains: supportedWagmiChains as [Chain, ...Chain[]],
   projectId: walletConnectProjectId,
-  metadata: wagmiMetadata,
+  metadata,
   transports: supportedNetworks.reduce(transportsReducer, {}),
   batch: {
     multicall: true,
   },
 });
 
 if (walletConnectProjectId) {
-  createWeb3Modal({ wagmiConfig, projectId: walletConnectProjectId });
+  createWeb3Modal({ wagmiConfig, projectId: walletConnectProjectId, metadata: metadata });
 }