fix: show unavailable networks when replaying Safes (#4197)

safe-global · Sep 18, 2024 · 938d524 · 938d524
1 parent 1db148e
commit 938d524
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/components/common/NetworkInput/index.tsx b/src/components/common/NetworkInput/index.tsx
@@ -16,19 +16,24 @@ const NetworkInput = ({
 }: {
   name: string
   required?: boolean
-  chainConfigs: ChainInfo[]
+  chainConfigs: (ChainInfo & { available: boolean })[]
 }): ReactElement => {
   const isDarkMode = useDarkMode()
   const theme = useTheme()
   const [testNets, prodNets] = useMemo(() => partition(chainConfigs, (config) => config.isTestnet), [chainConfigs])
   const { control } = useFormContext() || {}
 
   const renderMenuItem = useCallback(
-    (chainId: string, isSelected: boolean) => {
+    (chainId: string, isDisabled: boolean) => {
       const chain = chainConfigs.find((chain) => chain.chainId === chainId)
       if (!chain) return null
       return (
-        <MenuItem key={chainId} value={chainId} sx={{ '&:hover': { backgroundColor: 'inherit' } }}>
+        <MenuItem
+          disabled={isDisabled}
+          key={chainId}
+          value={chainId}
+          sx={{ '&:hover': { backgroundColor: 'inherit' } }}
+        >
           <ChainIndicator chainId={chain.chainId} />
         </MenuItem>
       )
@@ -51,7 +56,7 @@ const NetworkInput = ({
             fullWidth
             label="Network"
             IconComponent={ExpandMoreIcon}
-            renderValue={(value) => renderMenuItem(value, true)}
+            renderValue={(value) => renderMenuItem(value, false)}
             MenuProps={{
               sx: {
                 '& .MuiPaper-root': {
@@ -67,11 +72,11 @@ const NetworkInput = ({
               },
             }}
           >
-            {prodNets.map((chain) => renderMenuItem(chain.chainId, false))}
+            {prodNets.map((chain) => renderMenuItem(chain.chainId, !chain.available))}
 
             {testNets.length > 0 && <ListSubheader className={css.listSubHeader}>Testnets</ListSubheader>}
 
-            {testNets.map((chain) => renderMenuItem(chain.chainId, false))}
+            {testNets.map((chain) => renderMenuItem(chain.chainId, !chain.available))}
           </Select>
         </FormControl>
       )}

diff --git a/src/features/multichain/components/CreateSafeOnNewChain/index.tsx b/src/features/multichain/components/CreateSafeOnNewChain/index.tsx
@@ -109,7 +109,8 @@ const ReplaySafeDialog = ({
   const submitDisabled =
     isUnsupportedSafeCreationVersion || !!safeCreationDataError || safeCreationDataLoading || !formState.isValid
 
-  const noChainsAvailable = !chain && safeCreationData && replayableChains && replayableChains.length === 0
+  const noChainsAvailable =
+    !chain && safeCreationData && replayableChains && replayableChains.filter((chain) => chain.available).length === 0
 
   return (
     <Dialog open={open} onClose={onClose} onClick={(e) => e.stopPropagation()}>