fix: use wallet network as default for safe creation (#4241)

safe-global · Sep 24, 2024 · 11754e1 · 11754e1
1 parent 88a9549
commit 11754e1
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/src/components/common/NetworkSelector/NetworkMultiSelector.tsx b/src/components/common/NetworkSelector/NetworkMultiSelector.tsx
@@ -1,6 +1,6 @@
-import useChains from '@/hooks/useChains'
+import useChains, { useCurrentChain } from '@/hooks/useChains'
 import useSafeAddress from '@/hooks/useSafeAddress'
-import { useCallback, type ReactElement } from 'react'
+import { useCallback, useEffect, type ReactElement } from 'react'
 import { Checkbox, Autocomplete, TextField, Chip } from '@mui/material'
 import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import ChainIndicator from '../ChainIndicator'
@@ -24,6 +24,7 @@ const NetworkMultiSelector = ({
   const { configs } = useChains()
   const router = useRouter()
   const safeAddress = useSafeAddress()
+  const currentChain = useCurrentChain()
 
   const {
     formState: { errors },
@@ -34,7 +35,7 @@ const NetworkMultiSelector = ({
 
   const selectedNetworks: ChainInfo[] = useWatch({ control, name: SetNameStepFields.networks })
 
-  const updateSelectedNetwork = useCallback(
+  const updateCurrentNetwork = useCallback(
     (chains: ChainInfo[]) => {
       if (chains.length !== 1) return
       const shortName = chains[0].shortName
@@ -48,10 +49,10 @@ const NetworkMultiSelector = ({
     (deletedChainId: string) => {
       const currentValues: ChainInfo[] = getValues(name) || []
       const updatedValues = currentValues.filter((chain) => chain.chainId !== deletedChainId)
-      updateSelectedNetwork(updatedValues)
+      updateCurrentNetwork(updatedValues)
       setValue(name, updatedValues)
     },
-    [getValues, name, setValue, updateSelectedNetwork],
+    [getValues, name, setValue, updateCurrentNetwork],
   )
 
   const isOptionDisabled = useCallback(
@@ -95,6 +96,12 @@ const NetworkMultiSelector = ({
     [isAdvancedFlow, selectedNetworks],
   )
 
+  useEffect(() => {
+    if (selectedNetworks.length === 1 && selectedNetworks[0].chainId !== currentChain?.chainId) {
+      updateCurrentNetwork([selectedNetworks[0]])
+    }
+  }, [selectedNetworks, currentChain, updateCurrentNetwork])
+
   return (
     <>
       <Controller
@@ -140,7 +147,7 @@ const NetworkMultiSelector = ({
             }
             isOptionEqualToValue={(option, value) => option.chainId === value.chainId}
             onChange={(_, data) => {
-              updateSelectedNetwork(data)
+              updateCurrentNetwork(data)
               return field.onChange(data)
             }}
           />

diff --git a/src/components/new-safe/create/steps/SetNameStep/index.tsx b/src/components/new-safe/create/steps/SetNameStep/index.tsx
@@ -21,6 +21,9 @@ import type { ChainInfo } from '@safe-global/safe-gateway-typescript-sdk'
 import { useSafeSetupHints } from '../OwnerPolicyStep/useSafeSetupHints'
 import type { CreateSafeInfoItem } from '../../CreateSafeInfos'
 import NetworkMultiSelector from '@/components/common/NetworkSelector/NetworkMultiSelector'
+import { useAppSelector } from '@/store'
+import { selectChainById } from '@/store/chainsSlice'
+import useWallet from '@/hooks/wallets/useWallet'
 
 type SetNameStepForm = {
   name: string
@@ -51,8 +54,10 @@ function SetNameStep({
 }) {
   const router = useRouter()
   const currentChain = useCurrentChain()
+  const wallet = useWallet()
+  const walletChain = useAppSelector((state) => selectChainById(state, wallet?.chainId || ''))
 
-  const initialState = data.networks.length > 1 ? data.networks : currentChain ? [currentChain] : []
+  const initialState = data.networks.length ? data.networks : walletChain ? [walletChain] : []
   const formMethods = useForm<SetNameStepForm>({
     mode: 'all',
     defaultValues: {