[Multichain] fix: Network selector links and visual style [SW-184] (#…

…4180) * fix: Network selector links and visual style * fix: Update dependency arrays
safe-global · Sep 17, 2024 · 8680d6b · 8680d6b
1 parent 6555c95
commit 8680d6b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 24 deletions.
diff --git a/src/components/common/NetworkSelector/NetworkMultiSelector.tsx b/src/components/common/NetworkSelector/NetworkMultiSelector.tsx
@@ -1,4 +1,5 @@
 import useChains from '@/hooks/useChains'
+import useSafeAddress from '@/hooks/useSafeAddress'
 import { useCallback, type ReactElement } from 'react'
 import { Checkbox, Autocomplete, TextField, Chip } from '@mui/material'
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
@@ -7,7 +8,6 @@ import css from './styles.module.css'
 import { Controller, useFormContext, useWatch } from 'react-hook-form'
 import { useRouter } from 'next/router'
 import { getNetworkLink } from '.'
-import useWallet from '@/hooks/wallets/useWallet'
 import { SetNameStepFields } from '@/components/new-safe/create/steps/SetNameStep'
 import { getSafeSingletonDeployment } from '@safe-global/safe-deployments'
 import { getLatestSafeVersion } from '@/utils/chains'
@@ -21,7 +21,7 @@ const NetworkMultiSelector = ({
 }): ReactElement => {
   const { configs } = useChains()
   const router = useRouter()
-  const isWalletConnected = !!useWallet()
+  const safeAddress = useSafeAddress()
 
   const {
     formState: { errors },
@@ -36,10 +36,10 @@ const NetworkMultiSelector = ({
     (chains: ChainInfo[]) => {
       if (chains.length !== 1) return
       const shortName = chains[0].shortName
-      const networkLink = getNetworkLink(router, shortName, isWalletConnected)
+      const networkLink = getNetworkLink(router, safeAddress, shortName)
       router.replace(networkLink)
     },
-    [isWalletConnected, router],
+    [router, safeAddress],
   )
 
   const handleDelete = useCallback(

diff --git a/src/components/common/NetworkSelector/index.tsx b/src/components/common/NetworkSelector/index.tsx
@@ -39,24 +39,25 @@ 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'
-import { AppRoutes } from '@/config/routes'
-import useWallet from '@/hooks/wallets/useWallet'
 
-export const getNetworkLink = (router: NextRouter, networkShortName: string, isWalletConnected: boolean) => {
-  const shouldKeepPath = !router.query.safe
+export const getNetworkLink = (router: NextRouter, safeAddress: string, networkShortName: string) => {
+  const isSafeOpened = safeAddress !== ''
+
+  const query = (
+    isSafeOpened
+      ? {
+          safe: `${networkShortName}:${safeAddress}`,
+        }
+      : { chain: networkShortName }
+  ) as {
+    safe?: string
+    chain?: string
+    safeViewRedirectURL?: string
+  }
 
   const route = {
-    pathname: shouldKeepPath
-      ? router.pathname
-      : isWalletConnected
-      ? AppRoutes.welcome.accounts
-      : AppRoutes.welcome.index,
-    query: {
-      chain: networkShortName,
-    } as {
-      chain: string
-      safeViewRedirectURL?: string
-    },
+    pathname: router.pathname,
+    query,
   }
 
   if (router.query?.safeViewRedirectURL) {
@@ -242,7 +243,6 @@ const NetworkSelector = ({
   const router = useRouter()
   const safeAddress = useSafeAddress()
   const chains = useAppSelector(selectChains)
-  const isWalletConnected = !!useWallet()
 
   const isSafeOpened = safeAddress !== ''
 
@@ -283,7 +283,7 @@ const NetworkSelector = ({
 
     if (shortName) {
       trackEvent({ ...OVERVIEW_EVENTS.SWITCH_NETWORK, label: newChainId })
-      const networkLink = getNetworkLink(router, shortName, isWalletConnected)
+      const networkLink = getNetworkLink(router, safeAddress, shortName)
       router.push(networkLink)
     }
   }
@@ -298,7 +298,7 @@ const NetworkSelector = ({
       return (
         <MenuItem key={chainId} value={chainId} sx={{ '&:hover': { backgroundColor: 'inherit' } }}>
           <Link
-            href={getNetworkLink(router, chain.shortName, isWalletConnected)}
+            href={getNetworkLink(router, safeAddress, chain.shortName)}
             onClick={onChainSelect}
             className={css.item}
           >
@@ -312,7 +312,7 @@ const NetworkSelector = ({
         </MenuItem>
       )
     },
-    [chains.data, isWalletConnected, onChainSelect, router, safeOverviews],
+    [chains.data, onChainSelect, router, safeAddress, safeOverviews],
   )
 
   return configs.length ? (

diff --git a/src/components/common/NetworkSelector/styles.module.css b/src/components/common/NetworkSelector/styles.module.css
@@ -37,9 +37,9 @@
   font-size: 11px;
   font-weight: bold;
   line-height: 32px;
-  background-color: var(--color-background-main);
   text-align: center;
   letter-spacing: 1px;
+  width: 100%;
 }
 
 [data-theme='dark'] .undeployedNetworksHeader {
@@ -50,6 +50,8 @@
   background-color: var(--color-background-main);
   text-align: center;
   line-height: 32px;
+  padding: 0;
+  margin-top: var(--space-1);
 }
 
 .plusIcon {