From dae8741aae8a2471bcf05bc347e7cd07b04396e2 Mon Sep 17 00:00:00 2001 From: David Colon <38386583+Da-Colon@users.noreply.github.com> Date: Thu, 5 Dec 2024 09:21:42 -0500 Subject: [PATCH] Refactor SafeMenuItem and related hooks to simplify network handling and remove unused chain switching logic --- .../ui/menus/SafesMenu/SafeMenuItem.tsx | 19 ++---------- src/hooks/DAO/loaders/useFractalNode.ts | 6 ++-- src/hooks/utils/useAutomaticSwitchChain.ts | 29 ++++--------------- src/pages/dao/SafeController.tsx | 3 +- src/pages/home/SafeDisplayRow.tsx | 17 +---------- 5 files changed, 15 insertions(+), 59 deletions(-) diff --git a/src/components/ui/menus/SafesMenu/SafeMenuItem.tsx b/src/components/ui/menus/SafesMenu/SafeMenuItem.tsx index 76d500805..2b3f9c124 100644 --- 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 index d4c2a3e86..863057f95 100644 --- 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 index e738b67b8..f226cda09 100644 --- 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 index 2f3c92f68..9e5763700 100644 --- 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 index 6f668f8d4..b3e1289a0 100644 --- 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';