From 09fc8a6fa8c52794d5fcacb3640cf6b981276ef0 Mon Sep 17 00:00:00 2001
From: Usame Algan <5880855+usame-algan@users.noreply.github.com>
Date: Mon, 16 Sep 2024 10:22:31 +0200
Subject: [PATCH] [Multichain] fix: Hide header network selector on non-safe
 routes [SW-171] (#4163)

* fix: Hide header network selector on non-safe routes

* fix: Failing import export data e2e test

* fix: Move MenuItem component back to be a function and fix e2e test

* fix: Revert NetworkInput refactor

* fix: Failing load_safe e2e test
---
 cypress/e2e/pages/load_safe.pages.js          |  2 +-
 cypress/e2e/pages/owners.pages.js             |  2 +-
 cypress/e2e/smoke/import_export_data.cy.js    |  6 +-
 src/components/common/Header/index.tsx        |  8 +-
 src/components/common/NetworkInput/index.tsx  | 37 ++++---
 .../common/NetworkSelector/index.tsx          | 97 +++++++------------
 6 files changed, 60 insertions(+), 92 deletions(-)

diff --git a/cypress/e2e/pages/load_safe.pages.js b/cypress/e2e/pages/load_safe.pages.js
index 45626eebf2..503c9608c1 100644
--- a/cypress/e2e/pages/load_safe.pages.js
+++ b/cypress/e2e/pages/load_safe.pages.js
@@ -210,7 +210,7 @@ export function verifyDataInReviewSection(safeName, ownerName, threshold = null,
   cy.findByText(ownerName).should('be.visible')
   if (ownerAddress !== null) cy.get(safeDataForm).contains(ownerAddress).should('be.visible')
   if (threshold !== null) cy.get(safeDataForm).contains(threshold).should('be.visible')
-  if (network !== null) cy.get(sidebar.chainLogo).eq(1).contains(network).should('be.visible')
+  if (network !== null) cy.get(sidebar.chainLogo).eq(0).contains(network).should('be.visible')
 }
 
 export function clickOnAddBtn() {
diff --git a/cypress/e2e/pages/owners.pages.js b/cypress/e2e/pages/owners.pages.js
index 0e4100be15..cf42f816fc 100644
--- a/cypress/e2e/pages/owners.pages.js
+++ b/cypress/e2e/pages/owners.pages.js
@@ -80,7 +80,7 @@ export function verifyOwnerDeletionWindowDisplayed() {
 }
 
 function clickOnThresholdDropdown() {
-  cy.get(thresholdDropdown).eq(1).click()
+  cy.get(thresholdDropdown).eq(0).click()
 }
 
 export function getThresholdOptions() {
diff --git a/cypress/e2e/smoke/import_export_data.cy.js b/cypress/e2e/smoke/import_export_data.cy.js
index 6ecc9d6dd9..129a9101ea 100644
--- a/cypress/e2e/smoke/import_export_data.cy.js
+++ b/cypress/e2e/smoke/import_export_data.cy.js
@@ -3,7 +3,6 @@ import * as file from '../pages/import_export.pages'
 import * as main from '../pages/main.page'
 import * as constants from '../../support/constants'
 import * as ls from '../../support/localstorage_data.js'
-import * as createwallet from '../pages/create_wallet.pages'
 import * as sideBar from '../pages/sidebar.pages'
 import { getSafes, CATEGORIES } from '../../support/safes/safesHandler.js'
 
@@ -16,10 +15,7 @@ describe('[SMOKE] Import Export Data tests', () => {
 
   beforeEach(() => {
     cy.clearLocalStorage()
-    cy.visit(constants.dataSettingsUrl).then(() => {
-      main.acceptCookies()
-      createwallet.selectNetwork(constants.networks.sepolia)
-    })
+    cy.visit(constants.dataSettingsUrl)
   })
 
   it('[SMOKE] Verify Safe can be accessed after test file upload', () => {
diff --git a/src/components/common/Header/index.tsx b/src/components/common/Header/index.tsx
index d121352992..5d7cdbf2ff 100644
--- a/src/components/common/Header/index.tsx
+++ b/src/components/common/Header/index.tsx
@@ -109,9 +109,11 @@ const Header = ({ onMenuToggle, onBatchToggle }: HeaderProps): ReactElement => {
         </Track>
       </div>
 
-      <div className={classnames(css.element, css.networkSelector)}>
-        <NetworkSelector offerSafeCreation />
-      </div>
+      {safeAddress && (
+        <div className={classnames(css.element, css.networkSelector)}>
+          <NetworkSelector offerSafeCreation />
+        </div>
+      )}
     </Paper>
   )
 }
diff --git a/src/components/common/NetworkInput/index.tsx b/src/components/common/NetworkInput/index.tsx
index 529ea42c8e..03de70334e 100644
--- a/src/components/common/NetworkInput/index.tsx
+++ b/src/components/common/NetworkInput/index.tsx
@@ -5,22 +5,10 @@ import { FormControl, InputLabel, ListSubheader, MenuItem, Select } from '@mui/m
 import partition from 'lodash/partition'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import css from './styles.module.css'
-import { type ReactElement, useMemo } from 'react'
+import { type ReactElement, useCallback, useMemo } from 'react'
 import { Controller, useFormContext } from 'react-hook-form'
 import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 
-const NetworkMenuItem = ({ chainId, chainConfigs }: { chainId: string; chainConfigs: ChainInfo[] }) => {
-  const chain = useMemo(() => chainConfigs.find((chain) => chain.chainId === chainId), [chainConfigs, chainId])
-
-  if (!chain) return null
-
-  return (
-    <MenuItem key={chainId} value={chainId} sx={{ '&:hover': { backgroundColor: 'inherit' } }}>
-      <ChainIndicator chainId={chain.chainId} />
-    </MenuItem>
-  )
-}
-
 const NetworkInput = ({
   name,
   required = false,
@@ -35,6 +23,19 @@ const NetworkInput = ({
   const [testNets, prodNets] = useMemo(() => partition(chainConfigs, (config) => config.isTestnet), [chainConfigs])
   const { control } = useFormContext() || {}
 
+  const renderMenuItem = useCallback(
+    (chainId: string, isSelected: boolean) => {
+      const chain = chainConfigs.find((chain) => chain.chainId === chainId)
+      if (!chain) return null
+      return (
+        <MenuItem key={chainId} value={chainId} sx={{ '&:hover': { backgroundColor: 'inherit' } }}>
+          <ChainIndicator chainId={chain.chainId} />
+        </MenuItem>
+      )
+    },
+    [chainConfigs],
+  )
+
   return (
     <Controller
       name={name}
@@ -50,7 +51,7 @@ const NetworkInput = ({
             fullWidth
             label="Network"
             IconComponent={ExpandMoreIcon}
-            renderValue={(value) => <NetworkMenuItem chainConfigs={chainConfigs} chainId={value} />}
+            renderValue={(value) => renderMenuItem(value, true)}
             MenuProps={{
               sx: {
                 '& .MuiPaper-root': {
@@ -66,15 +67,11 @@ const NetworkInput = ({
               },
             }}
           >
-            {prodNets.map((chain) => (
-              <NetworkMenuItem key={chain.chainId} chainConfigs={chainConfigs} chainId={chain.chainId} />
-            ))}
+            {prodNets.map((chain) => renderMenuItem(chain.chainId, false))}
 
             {testNets.length > 0 && <ListSubheader className={css.listSubHeader}>Testnets</ListSubheader>}
 
-            {testNets.map((chain) => (
-              <NetworkMenuItem key={chain.chainId} chainConfigs={chainConfigs} chainId={chain.chainId} />
-            ))}
+            {testNets.map((chain) => renderMenuItem(chain.chainId, false))}
           </Select>
         </FormControl>
       )}
diff --git a/src/components/common/NetworkSelector/index.tsx b/src/components/common/NetworkSelector/index.tsx
index 01599e7152..65b69aa80f 100644
--- a/src/components/common/NetworkSelector/index.tsx
+++ b/src/components/common/NetworkSelector/index.tsx
@@ -1,5 +1,7 @@
 import ChainIndicator from '@/components/common/ChainIndicator'
 import { useDarkMode } from '@/hooks/useDarkMode'
+import { useAppSelector } from '@/store'
+import { selectChains } from '@/store/chainsSlice'
 import { useTheme } from '@mui/material/styles'
 import Link from 'next/link'
 import type { SelectChangeEvent } from '@mui/material'
@@ -22,7 +24,7 @@ import type { NextRouter } from 'next/router'
 import { useRouter } from 'next/router'
 import css from './styles.module.css'
 import { useChainId } from '@/hooks/useChainId'
-import { type ReactElement, useMemo, useState } from 'react'
+import { type ReactElement, useCallback, useMemo, useState } from 'react'
 import { trackEvent, OVERVIEW_EVENTS } from '@/services/analytics'
 
 import { useAllSafesGrouped } from '@/components/welcome/MyAccounts/useAllSafesGrouped'
@@ -32,7 +34,7 @@ import uniq from 'lodash/uniq'
 import useSafeOverviews from '@/components/welcome/MyAccounts/useSafeOverviews'
 import { useReplayableNetworks } from '@/features/multichain/hooks/useReplayableNetworks'
 import { useSafeCreationData } from '@/features/multichain/hooks/useSafeCreationData'
-import { type SafeOverview, type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
+import { type ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import PlusIcon from '@/public/images/common/plus.svg'
 import useAddressBook from '@/hooks/useAddressBook'
 import { CreateSafeOnSpecificChain } from '@/features/multichain/components/CreateSafeOnNewChain'
@@ -205,39 +207,6 @@ const UndeployedNetworks = ({
   )
 }
 
-const DeployedNetworkMenuItem = ({
-  chainId,
-  chainConfigs,
-  isSelected = false,
-  onClick,
-  safeOverviews,
-}: {
-  chainId: string
-  chainConfigs: ChainInfo[]
-  isSelected?: boolean
-  onClick?: () => void
-  safeOverviews?: SafeOverview[]
-}) => {
-  const chain = chainConfigs.find((chain) => chain.chainId === chainId)
-  const safeOverview = safeOverviews?.find((overview) => chainId === overview.chainId)
-  const isWalletConnected = !!useWallet()
-  const router = useRouter()
-
-  if (!chain) return null
-  return (
-    <MenuItem key={chainId} value={chainId} sx={{ '&:hover': { backgroundColor: 'inherit' } }}>
-      <Link href={getNetworkLink(router, chain.shortName, isWalletConnected)} onClick={onClick} className={css.item}>
-        <ChainIndicator
-          responsive={isSelected}
-          chainId={chain.chainId}
-          fiatValue={safeOverview ? safeOverview.fiatTotal : undefined}
-          inline
-        />
-      </Link>
-    </MenuItem>
-  )
-}
-
 const NetworkSelector = ({
   onChainSelect,
   offerSafeCreation = false,
@@ -251,6 +220,7 @@ const NetworkSelector = ({
   const chainId = useChainId()
   const router = useRouter()
   const safeAddress = useSafeAddress()
+  const chains = useAppSelector(selectChains)
   const isWalletConnected = !!useWallet()
 
   const isSafeOpened = safeAddress !== ''
@@ -297,6 +267,33 @@ const NetworkSelector = ({
     }
   }
 
+  const renderMenuItem = useCallback(
+    (chainId: string, isSelected: boolean) => {
+      const chain = chains.data.find((chain) => chain.chainId === chainId)
+      const safeOverview = safeOverviews?.find((overview) => chainId === overview.chainId)
+
+      if (!chain) return null
+
+      return (
+        <MenuItem key={chainId} value={chainId} sx={{ '&:hover': { backgroundColor: 'inherit' } }}>
+          <Link
+            href={getNetworkLink(router, chain.shortName, isWalletConnected)}
+            onClick={onChainSelect}
+            className={css.item}
+          >
+            <ChainIndicator
+              responsive={isSelected}
+              chainId={chain.chainId}
+              fiatValue={safeOverview ? safeOverview.fiatTotal : undefined}
+              inline
+            />
+          </Link>
+        </MenuItem>
+      )
+    },
+    [chains.data, isWalletConnected, onChainSelect, router, safeOverviews],
+  )
+
   return configs.length ? (
     <Select
       value={chainId}
@@ -305,15 +302,7 @@ const NetworkSelector = ({
       className={css.select}
       variant="standard"
       IconComponent={ExpandMoreIcon}
-      renderValue={(value) => (
-        <DeployedNetworkMenuItem
-          chainConfigs={configs}
-          chainId={value}
-          onClick={onChainSelect}
-          safeOverviews={safeOverviews}
-          isSelected
-        />
-      )}
+      renderValue={(value) => renderMenuItem(value, true)}
       MenuProps={{
         transitionDuration: 0,
         sx: {
@@ -336,27 +325,11 @@ const NetworkSelector = ({
         },
       }}
     >
-      {prodNets.map((chain) => (
-        <DeployedNetworkMenuItem
-          key={chain.chainId}
-          chainConfigs={configs}
-          chainId={chain.chainId}
-          onClick={onChainSelect}
-          safeOverviews={safeOverviews}
-        />
-      ))}
+      {prodNets.map((chain) => renderMenuItem(chain.chainId, false))}
 
       {testNets.length > 0 && <TestnetDivider />}
 
-      {testNets.map((chain) => (
-        <DeployedNetworkMenuItem
-          key={chain.chainId}
-          chainConfigs={configs}
-          chainId={chain.chainId}
-          onClick={onChainSelect}
-          safeOverviews={safeOverviews}
-        />
-      ))}
+      {testNets.map((chain) => renderMenuItem(chain.chainId, false))}
 
       {offerSafeCreation && isSafeOpened && (
         <UndeployedNetworks chains={configs} deployedChains={availableChainIds} safeAddress={safeAddress} />