Refactor SafeMenuItem and related hooks to simplify network handling …

…and remove unused chain switching logic
decentdao · Dec 5, 2024 · dae8741 · dae8741
1 parent 1915478
commit dae8741
Show file tree

Hide file tree

Showing 5 changed files with 15 additions and 59 deletions.
diff --git a/src/components/ui/menus/SafesMenu/SafeMenuItem.tsx b/src/components/ui/menus/SafesMenu/SafeMenuItem.tsx
@@ -2,11 +2,9 @@ import { Box, Button, Flex, Image, MenuItem, Spacer, Text } from '@chakra-ui/rea
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Address } from 'viem';
-import { useSwitchChain } from 'wagmi';
 import { DAO_ROUTES } from '../../../../constants/routes';
 import useAvatar from '../../../../hooks/utils/useAvatar';
-import { useNetworkConfigStore } from '../../../../providers/NetworkConfig/useNetworkConfigStore';
-import { getChainIdFromPrefix, getNetworkIcon } from '../../../../utils/url';
+import { getNetworkIcon } from '../../../../utils/url';
 import Avatar from '../../page/Header/Avatar';
 
 export interface SafeMenuItemProps {
@@ -20,26 +18,13 @@ export interface SafeMenuItemProps {
 export function SafeMenuItem({ address, network, name }: SafeMenuItemProps) {
   const navigate = useNavigate();
 
-  const { addressPrefix } = useNetworkConfigStore();
-  const { switchChain } = useSwitchChain({
-    mutation: {
-      onSuccess: () => {
-        navigate(DAO_ROUTES.dao.relative(network, address));
-      },
-    },
-  });
-
   // if by chance the safe name is an ENS name, let's attempt to get the avatar for that
   const avatarURL = useAvatar(name);
 
   const { t } = useTranslation('dashboard');
 
   const onClickNav = () => {
-    if (addressPrefix !== network) {
-      switchChain({ chainId: getChainIdFromPrefix(network) });
-    } else {
-      navigate(DAO_ROUTES.dao.relative(network, address));
-    }
+    navigate(DAO_ROUTES.dao.relative(network, address));
   };
 
   return (

diff --git a/src/hooks/DAO/loaders/useFractalNode.ts b/src/hooks/DAO/loaders/useFractalNode.ts
@@ -11,9 +11,11 @@ import { useDecentModules } from './useDecentModules';
 export const useFractalNode = ({
   addressPrefix,
   safeAddress,
+  wrongNetwork,
 }: {
   addressPrefix?: string;
   safeAddress?: Address;
+  wrongNetwork?: boolean;
 }) => {
   const safeApi = useSafeAPI();
   const lookupModules = useDecentModules();
@@ -85,11 +87,11 @@ export const useFractalNode = ({
   ]);
 
   useEffect(() => {
-    if (`${addressPrefix}${safeAddress}` !== currentValidSafe.current) {
+    if (`${addressPrefix}${safeAddress}` !== currentValidSafe.current && !wrongNetwork) {
       reset({ error: false });
       setDAO();
     }
-  }, [addressPrefix, safeAddress, setDAO, reset]);
+  }, [addressPrefix, safeAddress, setDAO, reset, wrongNetwork]);
 
   return { errorLoading };
 };
diff --git a/src/hooks/utils/useAutomaticSwitchChain.ts b/src/hooks/utils/useAutomaticSwitchChain.ts
@@ -1,35 +1,18 @@
 import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { toast } from 'sonner';
-import { useSwitchChain } from 'wagmi';
 import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { getChainIdFromPrefix } from '../../utils/url';
 
 export const useAutomaticSwitchChain = ({
-  addressPrefix,
+  urlAddressPrefix,
 }: {
-  addressPrefix: string | undefined;
+  urlAddressPrefix: string | undefined;
 }) => {
-  const { t } = useTranslation(['common']);
-  const networkConfig = useNetworkConfigStore();
-  const { switchChain } = useSwitchChain({
-    mutation: {
-      onSuccess: () => {
-        window.location.reload();
-      },
-      onError: error => {
-        if (error.name !== 'UserRejectedRequestError') {
-          toast.warning(t('automaticChainSwitchingErrorMessage'));
-        }
-      },
-    },
-  });
+  const { setCurrentConfig, getConfigByChainId, addressPrefix } = useNetworkConfigStore();
 
   useEffect(() => {
-    if (addressPrefix === undefined || networkConfig.addressPrefix === addressPrefix) {
+    if (urlAddressPrefix === undefined || addressPrefix === urlAddressPrefix) {
       return;
     }
-
-    switchChain({ chainId: getChainIdFromPrefix(addressPrefix) });
-  }, [switchChain, addressPrefix, networkConfig.addressPrefix]);
+    setCurrentConfig(getConfigByChainId(getChainIdFromPrefix(urlAddressPrefix)));
+  }, [addressPrefix, setCurrentConfig, getConfigByChainId, urlAddressPrefix]);
 };
diff --git a/src/pages/dao/SafeController.tsx b/src/pages/dao/SafeController.tsx
@@ -20,17 +20,18 @@ import LoadingProblem from '../LoadingProblem';
 
 export function SafeController() {
   const { invalidQuery, wrongNetwork, addressPrefix, safeAddress } = useParseSafeAddress();
+  useAutomaticSwitchChain({ urlAddressPrefix: addressPrefix });
 
   useUpdateSafeData(safeAddress);
   usePageTitle();
   useTemporaryProposals();
-  useAutomaticSwitchChain({ addressPrefix });
 
   const { subgraphInfo } = useDaoInfoStore();
 
   const { errorLoading } = useFractalNode({
     addressPrefix,
     safeAddress,
+    wrongNetwork,
   });
 
   useGovernanceContracts();

diff --git a/src/pages/home/SafeDisplayRow.tsx b/src/pages/home/SafeDisplayRow.tsx
@@ -3,13 +3,11 @@ import { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Address } from 'viem';
-import { useSwitchChain } from 'wagmi';
 import Avatar from '../../components/ui/page/Header/Avatar';
 import { DAO_ROUTES } from '../../constants/routes';
 import useAvatar from '../../hooks/utils/useAvatar';
 import { createAccountSubstring } from '../../hooks/utils/useGetAccountName';
 import { useGetSafeName } from '../../hooks/utils/useGetSafeName';
-import { useNetworkConfigStore } from '../../providers/NetworkConfig/useNetworkConfigStore';
 import { getChainIdFromPrefix, getChainName, getNetworkIcon } from '../../utils/url';
 
 interface SafeDisplayRowProps {
@@ -27,17 +25,8 @@ export function SafeDisplayRow({
   showAddress,
   name,
 }: SafeDisplayRowProps) {
-  const { addressPrefix } = useNetworkConfigStore();
   const navigate = useNavigate();
 
-  const { switchChain } = useSwitchChain({
-    mutation: {
-      onSuccess: () => {
-        navigate(DAO_ROUTES.dao.relative(network, address));
-      },
-    },
-  });
-
   const { getSafeName } = useGetSafeName(getChainIdFromPrefix(network));
   const [safeName, setSafeName] = useState(name);
 
@@ -54,11 +43,7 @@ export function SafeDisplayRow({
 
   const onClickNav = () => {
     if (onClick) onClick();
-    if (addressPrefix !== network) {
-      switchChain({ chainId: getChainIdFromPrefix(network) });
-    } else {
-      navigate(DAO_ROUTES.dao.relative(network, address));
-    }
+    navigate(DAO_ROUTES.dao.relative(network, address));
   };
 
   const nameColor = showAddress ? 'neutral-7' : 'white-0';