fix issues in connection migration

extension/src/routes/RoutesDrawer/ConnectButton/index.tsx

@@ -7,14 +7,18 @@ import { shortenAddress } from '../../../components/Address'
 import { CHAIN_NAME } from '../../../chains'
 import { useMetaMask, useWalletConnect } from '../../../providers'
 import PUBLIC_PATH from '../../../publicPath'
-import { ProviderType } from '../../../types'
+import { ProviderType, Route } from '../../../types'
 import { validateAddress } from '../../../utils'
 import { useRoute, useRoutes } from '../../routeHooks'
 
 import metamaskLogoUrl from './metamask-logo.svg'
 import classes from './style.module.css'
 import walletConnectLogoUrl from './wallet-connect-logo.png'
-import { ChainId, parsePrefixedAddress } from 'ser-kit'
+import { ChainId, formatPrefixedAddress, parsePrefixedAddress } from 'ser-kit'
+import {
+  asLegacyConnection,
+  fromLegacyConnection,
+} from '../../legacyConnectionMigrations'
 
 const walletConnectLogo = (
   <img src={PUBLIC_PATH + walletConnectLogoUrl} alt="wallet connect logo" />
@@ -28,7 +32,7 @@ const metamaskLogo = (
 )
 
 const ConnectButton: React.FC<{ id: string }> = ({ id }) => {
-  const [connections, setConnections] = useRoutes()
+  const [routes, setRoutes] = useRoutes()
   const { connected, route, chainId } = useRoute(id)
   const pilotAddress =
     route.initiator && parsePrefixedAddress(route.initiator)[1].toLowerCase()
@@ -41,16 +45,16 @@ const ConnectButton: React.FC<{ id: string }> = ({ id }) => {
     chainId: ChainId,
     account: string
   ) => {
-    setConnections(
-      connections.map((c) =>
-        c.id === id
-          ? {
-              ...route,
+    setRoutes(
+      routes.map((r) =>
+        r.id === id
+          ? fromLegacyConnection({
+              ...asLegacyConnection(r),
               providerType,
               chainId,
-              pilotAddress: account.toLowerCase(),
-            }
-          : c
+              pilotAddress: account,
+            })
+          : r
       )
     )
   }
@@ -63,8 +67,15 @@ const ConnectButton: React.FC<{ id: string }> = ({ id }) => {
       walletConnect.disconnect()
     }
 
-    setConnections(
-      connections.map((c) => (c.id === id ? { ...route, pilotAddress: '' } : c))
+    setRoutes(
+      routes.map((r) =>
+        r.id === id
+          ? fromLegacyConnection({
+              ...asLegacyConnection(route),
+              pilotAddress: '',
+            })
+          : r
+      )
     )
   }
 

extension/src/routes/RoutesDrawer/Edit/index.tsx

@@ -31,6 +31,7 @@ import {
   asLegacyConnection,
   fromLegacyConnection,
 } from '../../legacyConnectionMigrations'
+import { ZeroAddress } from 'ethers'
 
 interface Props {
   connectionId: string
@@ -48,6 +49,8 @@ type ConnectionPatch = {
   multisendCallOnly?: string
 }
 
+const ETH_ZERO_ADDRESS = 'eth:0x0000000000000000000000000000000000000000'
+
 const EditConnection: React.FC<Props> = ({ connectionId, onLaunched }) => {
   const [routes, setRoutes] = useRoutes()
   const { route } = useRoute(connectionId)
@@ -107,11 +110,10 @@ const EditConnection: React.FC<Props> = ({ connectionId, onLaunched }) => {
 
   const updateConnection = (patch: ConnectionPatch) => {
     setRoutes((routes) =>
-      routes.map((r) =>
-        r.id === route.id
-          ? fromLegacyConnection({ ...asLegacyConnection(r), ...patch })!
-          : r
-      )
+      routes.map((r) => {
+        if (r.id !== route.id) return r
+        return fromLegacyConnection({ ...asLegacyConnection(r), ...patch })
+      })
     )
   }
 
@@ -219,16 +221,17 @@ const EditConnection: React.FC<Props> = ({ connectionId, onLaunched }) => {
             <Field label="Piloted Safe" labelFor="">
               <AvatarInput
                 availableSafes={safes}
-                value={avatarAddress}
+                value={avatarAddress === ZeroAddress ? '' : avatarAddress || ''}
                 onChange={async (address) => {
                   const keepTransactionBundle =
                     address.toLowerCase() ===
                     connection.avatarAddress.toLowerCase()
                   const confirmed =
                     keepTransactionBundle || (await confirmClearTransactions())
+
                   if (confirmed) {
                     updateConnection({
-                      avatarAddress: address,
+                      avatarAddress: address || undefined,
                       moduleAddress: '',
                       moduleType: undefined,
                     })