From ca18abae058f9b1034d57e03b1b9ec82e5d3e793 Mon Sep 17 00:00:00 2001
From: Philipp Giese <187786+frontendphil@users.noreply.github.com>
Date: Tue, 28 Jan 2025 16:41:25 +0100
Subject: [PATCH] fix(pilot-app): do not update chain id when a wallet connects
 (#694)

---
 .../app/app/components/wallet/Connect.tsx      | 13 +++----------
 .../app/components/wallet/ConnectWallet.tsx    | 10 ++++------
 .../app/app/routes/edit-route.$data.tsx        | 18 +++++-------------
 3 files changed, 12 insertions(+), 29 deletions(-)

diff --git a/deployables/app/app/components/wallet/Connect.tsx b/deployables/app/app/components/wallet/Connect.tsx
index bf05b45d7..9291e73dd 100644
--- a/deployables/app/app/components/wallet/Connect.tsx
+++ b/deployables/app/app/components/wallet/Connect.tsx
@@ -1,28 +1,21 @@
-import { verifyChainId } from '@zodiac/chains'
-import { ProviderType } from '@zodiac/schema'
+import { ProviderType, type HexAddress } from '@zodiac/schema'
 import { Labeled, PrimaryButton } from '@zodiac/ui'
 import { ConnectKitButton, ConnectKitProvider } from 'connectkit'
-import type { ChainId } from 'ser-kit'
 import { useAccountEffect } from 'wagmi'
 
 type ConnectProps = {
-  onConnect(args: {
-    providerType: ProviderType
-    chainId: ChainId
-    account: string
-  }): void
+  onConnect(args: { providerType: ProviderType; account: HexAddress }): void
 }
 
 export const Connect = ({ onConnect }: ConnectProps) => {
   useAccountEffect({
-    onConnect({ address, chainId, connector, isReconnected }) {
+    onConnect({ address, connector, isReconnected }) {
       if (isReconnected) {
         return
       }
 
       onConnect({
         account: address,
-        chainId: verifyChainId(chainId),
         providerType:
           connector.type === 'injected'
             ? ProviderType.InjectedWallet
diff --git a/deployables/app/app/components/wallet/ConnectWallet.tsx b/deployables/app/app/components/wallet/ConnectWallet.tsx
index 7d5fae161..35b1236ac 100644
--- a/deployables/app/app/components/wallet/ConnectWallet.tsx
+++ b/deployables/app/app/components/wallet/ConnectWallet.tsx
@@ -1,5 +1,5 @@
 import { invariant } from '@epic-web/invariant'
-import { verifyChainId, ZERO_ADDRESS } from '@zodiac/chains'
+import { ZERO_ADDRESS } from '@zodiac/chains'
 import { type HexAddress, ProviderType } from '@zodiac/schema'
 import { useEffect, useRef } from 'react'
 import { type ChainId } from 'ser-kit'
@@ -9,7 +9,6 @@ import { Wallet } from './Wallet'
 
 type OnConnectArgs = {
   providerType: ProviderType
-  chainId: ChainId
   account: HexAddress
 }
 
@@ -90,7 +89,7 @@ const useAutoReconnect = ({
   currentConnectedAddress,
   onConnect,
 }: UseAutoReconnectOptions) => {
-  const { address, chainId, connector } = useAccount()
+  const { address, connector } = useAccount()
 
   const accountConnected =
     currentConnectedAddress != null && currentConnectedAddress !== ZERO_ADDRESS
@@ -102,7 +101,7 @@ const useAutoReconnect = ({
   }, [onConnect])
 
   useEffect(() => {
-    if (address == null || chainId == null || connector == null) {
+    if (address == null || connector == null) {
       return
     }
 
@@ -112,11 +111,10 @@ const useAutoReconnect = ({
 
     onConnectRef.current({
       account: address,
-      chainId: verifyChainId(chainId),
       providerType:
         connector.type === 'injected'
           ? ProviderType.InjectedWallet
           : ProviderType.WalletConnect,
     })
-  }, [accountConnected, address, chainId, connector])
+  }, [accountConnected, address, connector])
 }
diff --git a/deployables/app/app/routes/edit-route.$data.tsx b/deployables/app/app/routes/edit-route.$data.tsx
index 86fc497cd..6da33914f 100644
--- a/deployables/app/app/routes/edit-route.$data.tsx
+++ b/deployables/app/app/routes/edit-route.$data.tsx
@@ -8,7 +8,7 @@ import {
 } from '@/components'
 import { dryRun, editRoute, jsonRpcProvider, parseRouteData } from '@/utils'
 import { invariant, invariantResponse } from '@epic-web/invariant'
-import { Chain, getChainId, verifyChainId, ZERO_ADDRESS } from '@zodiac/chains'
+import { getChainId, verifyChainId, ZERO_ADDRESS } from '@zodiac/chains'
 import {
   formData,
   getHexString,
@@ -154,14 +154,10 @@ export const clientAction = async ({
       const route = parseRouteData(params.data)
 
       const account = getHexString(data, 'account')
-      const chainId = verifyChainId(getInt(data, 'chainId'))
       const providerType = verifyProviderType(getInt(data, 'providerType'))
 
       return editRoute(
-        updatePilotAddress(
-          updateChainId(updateProviderType(route, providerType), chainId),
-          account,
-        ),
+        updatePilotAddress(updateProviderType(route, providerType), account),
       )
     }
     case Intent.DisconnectWallet: {
@@ -195,15 +191,14 @@ const EditRoute = ({
 
             <WalletProvider>
               <ConnectWallet
-                chainId={optimisticRoute.chainId}
+                chainId={chainId}
                 pilotAddress={optimisticRoute.pilotAddress}
                 providerType={optimisticRoute.providerType}
-                onConnect={({ account, chainId, providerType }) => {
+                onConnect={({ account, providerType }) => {
                   submit(
                     formData({
                       intent: Intent.ConnectWallet,
                       account,
-                      chainId,
                       providerType,
                     }),
                     { method: 'POST' },
@@ -318,12 +313,11 @@ const useOptimisticRoute = () => {
 
   const [optimisticConnection, setOptimisticConnection] = useState({
     pilotAddress,
-    chainId,
     providerType,
   })
 
   useEffect(() => {
-    setOptimisticConnection({ pilotAddress, chainId, providerType })
+    setOptimisticConnection({ pilotAddress, providerType })
   }, [chainId, pilotAddress, providerType])
 
   useEffect(() => {
@@ -341,7 +335,6 @@ const useOptimisticRoute = () => {
       case Intent.DisconnectWallet: {
         setOptimisticConnection({
           pilotAddress: ZERO_ADDRESS,
-          chainId: Chain.ETH,
           providerType: undefined,
         })
 
@@ -351,7 +344,6 @@ const useOptimisticRoute = () => {
       case Intent.ConnectWallet: {
         setOptimisticConnection({
           pilotAddress: getHexString(formData, 'account'),
-          chainId: verifyChainId(getInt(formData, 'chainId')),
           providerType: verifyProviderType(getInt(formData, 'providerType')),
         })
       }