hide add network button on multichain groups

safe-global · Oct 1, 2024 · e5c02db · e5c02db
1 parent 0156bc4
commit e5c02db
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 17 deletions.
diff --git a/src/components/common/NetworkSelector/index.tsx b/src/components/common/NetworkSelector/index.tsx
@@ -20,7 +20,7 @@ import {
 } from '@mui/material'
 import partition from 'lodash/partition'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
-import useChains from '@/hooks/useChains'
+import useChains, { useCurrentChain } from '@/hooks/useChains'
 import type { NextRouter } from 'next/router'
 import { useRouter } from 'next/router'
 import css from './styles.module.css'
@@ -169,8 +169,6 @@ const UndeployedNetworks = ({
   const allCompatibleChains = useCompatibleNetworks(safeCreationData)
   const isUnsupportedSafeCreationVersion = Boolean(!allCompatibleChains?.length)
 
-  const multichainDisabled = deployedChainInfos.length === 1 && !hasMultiChainAddNetworkFeature(deployedChainInfos[0])
-
   const availableNetworks = useMemo(
     () => allCompatibleChains?.filter((config) => !deployedChains.includes(config.chainId)) || [],
     [allCompatibleChains, deployedChains],
@@ -196,7 +194,7 @@ const UndeployedNetworks = ({
   }
 
   const errorMessage =
-    safeCreationDataError || (safeCreationData && noAvailableNetworks) || multichainDisabled
+    safeCreationDataError || (safeCreationData && noAvailableNetworks)
       ? 'Adding another network is not possible for this Safe.'
       : isUnsupportedSafeCreationVersion
       ? 'This account was created from an outdated mastercopy. Adding another network is not possible.'
@@ -276,10 +274,13 @@ const NetworkSelector = ({
   const chainId = useChainId()
   const router = useRouter()
   const safeAddress = useSafeAddress()
+  const currentChain = useCurrentChain()
   const chains = useAppSelector(selectChains)
 
   const isSafeOpened = safeAddress !== ''
 
+  const addNetworkFeatureEnabled = hasMultiChainAddNetworkFeature(currentChain)
+
   const safesGrouped = useAllSafesGrouped()
   const availableChainIds = useMemo(() => {
     if (!isSafeOpened) {
@@ -375,7 +376,7 @@ const NetworkSelector = ({
 
       {testNets.map((chain) => renderMenuItem(chain.chainId, false))}
 
-      {offerSafeCreation && isSafeOpened && (
+      {offerSafeCreation && isSafeOpened && addNetworkFeatureEnabled && (
         <UndeployedNetworks
           chains={configs}
           deployedChains={availableChainIds}

diff --git a/src/components/sidebar/SafeListContextMenu/MultiAccountContextMenu.tsx b/src/components/sidebar/SafeListContextMenu/MultiAccountContextMenu.tsx
@@ -27,10 +27,12 @@ const MultiAccountContextMenu = ({
   name,
   address,
   chainIds,
+  addNetwork,
 }: {
   name: string
   address: string
   chainIds: string[]
+  addNetwork: boolean
 }): ReactElement => {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | undefined>()
   const [open, setOpen] = useState<typeof defaultOpen>(defaultOpen)
@@ -72,13 +74,14 @@ const MultiAccountContextMenu = ({
           </ListItemIcon>
           <ListItemText data-testid="rename-btn">Rename</ListItemText>
         </MenuItem>
-
-        <MenuItem onClick={handleOpenModal(ModalType.ADD_CHAIN, OVERVIEW_EVENTS.ADD_NEW_NETWORK)}>
-          <ListItemIcon>
-            <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" color="primary" />
-          </ListItemIcon>
-          <ListItemText data-testid="add-chain-btn">Add another network</ListItemText>
-        </MenuItem>
+        {addNetwork && (
+          <MenuItem onClick={handleOpenModal(ModalType.ADD_CHAIN, OVERVIEW_EVENTS.ADD_NEW_NETWORK)}>
+            <ListItemIcon>
+              <SvgIcon component={PlusIcon} inheritViewBox fontSize="small" color="primary" />
+            </ListItemIcon>
+            <ListItemText data-testid="add-chain-btn">Add another network</ListItemText>
+          </MenuItem>
+        )}
       </ContextMenu>
 
       {open[ModalType.RENAME] && (

diff --git a/src/components/welcome/MyAccounts/MultiAccountItem.tsx b/src/components/welcome/MyAccounts/MultiAccountItem.tsx
@@ -28,14 +28,15 @@ import { type MultiChainSafeItem } from './useAllSafesGrouped'
 import { shortenAddress } from '@/utils/formatters'
 import { type SafeItem } from './useAllSafes'
 import SubAccountItem from './SubAccountItem'
-import { getSafeSetups, getSharedSetup } from './utils/multiChainSafe'
+import { getSafeSetups, getSharedSetup, hasMultiChainAddNetworkFeature } from './utils/multiChainSafe'
 import { AddNetworkButton } from './AddNetworkButton'
 import { isPredictedSafeProps } from '@/features/counterfactual/utils'
 import ChainIndicator from '@/components/common/ChainIndicator'
 import MultiAccountContextMenu from '@/components/sidebar/SafeListContextMenu/MultiAccountContextMenu'
 import { useGetMultipleSafeOverviewsQuery } from '@/store/api/gateway'
 import useWallet from '@/hooks/wallets/useWallet'
 import { selectCurrency } from '@/store/settingsSlice'
+import { selectChains } from '@/store/chainsSlice'
 
 type MultiAccountItemProps = {
   multiSafeAccountItem: MultiChainSafeItem
@@ -73,8 +74,9 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
   const isCurrentSafe = sameAddress(safeAddress, address)
   const isWelcomePage = router.pathname === AppRoutes.welcome.accounts
   const [expanded, setExpanded] = useState(isCurrentSafe)
+  const chains = useAppSelector(selectChains)
 
-  const deployedChains = useMemo(() => safes.map((safe) => safe.chainId), [safes])
+  const deployedChainIds = useMemo(() => safes.map((safe) => safe.chainId), [safes])
 
   const isWatchlist = useMemo(
     () => multiSafeAccountItem.safes.every((safe) => safe.isWatchlist),
@@ -116,10 +118,13 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
     () =>
       safes.some((safeItem) => {
         const undeployedSafe = undeployedSafes[safeItem.chainId]?.[safeItem.address]
+        const chain = chains.data.find((chain) => chain.chainId === safeItem.chainId)
+        const addNetworkFeatureEnabled = hasMultiChainAddNetworkFeature(chain)
+
         // We can only replay deployed Safes and new counterfactual Safes.
-        return !undeployedSafe || !isPredictedSafeProps(undeployedSafe.props)
+        return (!undeployedSafe || !isPredictedSafeProps(undeployedSafe.props)) && addNetworkFeatureEnabled
       }),
-    [safes, undeployedSafes],
+    [chains.data, safes, undeployedSafes],
   )
 
   const findOverview = useCallback(
@@ -170,7 +175,12 @@ const MultiAccountItem = ({ onLinkClick, multiSafeAccountItem }: MultiAccountIte
               )}
             </Typography>
           </Box>
-          <MultiAccountContextMenu name={name ?? ''} address={address} chainIds={deployedChains} />
+          <MultiAccountContextMenu
+            name={name ?? ''}
+            address={address}
+            chainIds={deployedChainIds}
+            addNetwork={hasReplayableSafe}
+          />
         </AccordionSummary>
         <AccordionDetails sx={{ padding: '0px 12px' }}>
           <Box>