diff --git a/src/components/common/NetworkSelector/NetworkMultiSelector.tsx b/src/components/common/NetworkSelector/NetworkMultiSelector.tsx index a54ecabf24..29683515e4 100644 --- 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 index 493182b2f4..ffeb760a6b 100644 --- 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 ( @@ -312,7 +312,7 @@ const NetworkSelector = ({ ) }, - [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 index e4429bdf3d..f7c31f9a7d 100644 --- 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 {