From 938d524d82d6e9709b34ee598111abc6936b114f Mon Sep 17 00:00:00 2001
From: Manuel Gellfart <manu@safe.global>
Date: Wed, 18 Sep 2024 14:24:41 +0200
Subject: [PATCH] fix: show unavailable networks when replaying Safes (#4197)

---
 src/components/common/NetworkInput/index.tsx    | 17 +++++++++++------
 .../components/CreateSafeOnNewChain/index.tsx   |  3 ++-
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/src/components/common/NetworkInput/index.tsx b/src/components/common/NetworkInput/index.tsx
index 03de70334e..67b51bfc15 100644
--- a/src/components/common/NetworkInput/index.tsx
+++ b/src/components/common/NetworkInput/index.tsx
@@ -16,7 +16,7 @@ const NetworkInput = ({
 }: {
   name: string
   required?: boolean
-  chainConfigs: ChainInfo[]
+  chainConfigs: (ChainInfo & { available: boolean })[]
 }): ReactElement => {
   const isDarkMode = useDarkMode()
   const theme = useTheme()
@@ -24,11 +24,16 @@ const NetworkInput = ({
   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
index 32d6781be0..abdf712b5e 100644
--- 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()}>