From 3de469b308b47b67cee9c2443750419c61525966 Mon Sep 17 00:00:00 2001
From: Philipp Giese <187786+frontendphil@users.noreply.github.com>
Date: Thu, 16 Jan 2025 16:05:53 +0100
Subject: [PATCH] feat(pilot-app): disconnect wallet (#564)

* restructure context for wallets

* make tests more robust
---
 .../app/components/wallet/ConnectWallet.tsx   | 51 +++++--------------
 .../app/components/wallet/WalletProvider.tsx  | 27 ++++++++++
 .../app/app/components/wallet/index.ts        |  1 +
 .../app/app/routes/edit-route.$data.spec.ts   |  6 +--
 .../app/app/routes/edit-route.$data.tsx       | 49 +++++++++++-------
 5 files changed, 76 insertions(+), 58 deletions(-)
 create mode 100644 deployables/app/app/components/wallet/WalletProvider.tsx

diff --git a/deployables/app/app/components/wallet/ConnectWallet.tsx b/deployables/app/app/components/wallet/ConnectWallet.tsx
index 06310bdbc..7ff4f7964 100644
--- a/deployables/app/app/components/wallet/ConnectWallet.tsx
+++ b/deployables/app/app/components/wallet/ConnectWallet.tsx
@@ -1,30 +1,11 @@
 import { invariant } from '@epic-web/invariant'
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { ZERO_ADDRESS } from '@zodiac/chains'
 import { type HexAddress, ProviderType } from '@zodiac/schema'
-import { getDefaultConfig } from 'connectkit'
 import { type ChainId } from 'ser-kit'
-import { createConfig, WagmiProvider } from 'wagmi'
-import { injected, metaMask, walletConnect } from 'wagmi/connectors'
+import { useDisconnect } from 'wagmi'
 import { Connect } from './Connect'
 import { Wallet } from './Wallet'
 
-const queryClient = new QueryClient()
-
-const WALLETCONNECT_PROJECT_ID = '0f8a5e2cf60430a26274b421418e8a27'
-
-const wagmiConfig = createConfig(
-  getDefaultConfig({
-    appName: 'Zodiac Pilot',
-    walletConnectProjectId: WALLETCONNECT_PROJECT_ID,
-    connectors: [
-      injected(),
-      metaMask(),
-      walletConnect({ projectId: WALLETCONNECT_PROJECT_ID }),
-    ],
-  }),
-)
-
 interface Props {
   pilotAddress: HexAddress | null
   chainId?: ChainId
@@ -44,14 +25,10 @@ export const ConnectWallet = ({
   onConnect,
   onDisconnect,
 }: Props) => {
+  const { disconnect } = useDisconnect()
+
   if (pilotAddress == null || pilotAddress === ZERO_ADDRESS) {
-    return (
-      <QueryClientProvider client={queryClient}>
-        <WagmiProvider config={wagmiConfig}>
-          <Connect onConnect={onConnect} />
-        </WagmiProvider>
-      </QueryClientProvider>
-    )
+    return <Connect onConnect={onConnect} />
   }
 
   invariant(
@@ -60,15 +37,15 @@ export const ConnectWallet = ({
   )
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <WagmiProvider config={wagmiConfig}>
-        <Wallet
-          chainId={chainId}
-          providerType={providerType}
-          pilotAddress={pilotAddress}
-          onDisconnect={onDisconnect}
-        />
-      </WagmiProvider>
-    </QueryClientProvider>
+    <Wallet
+      chainId={chainId}
+      providerType={providerType}
+      pilotAddress={pilotAddress}
+      onDisconnect={() => {
+        disconnect()
+
+        onDisconnect()
+      }}
+    />
   )
 }
diff --git a/deployables/app/app/components/wallet/WalletProvider.tsx b/deployables/app/app/components/wallet/WalletProvider.tsx
new file mode 100644
index 000000000..5dcf8355b
--- /dev/null
+++ b/deployables/app/app/components/wallet/WalletProvider.tsx
@@ -0,0 +1,27 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { getDefaultConfig } from 'connectkit'
+import type { PropsWithChildren } from 'react'
+import { createConfig, injected, WagmiProvider } from 'wagmi'
+import { metaMask, walletConnect } from 'wagmi/connectors'
+
+const queryClient = new QueryClient()
+
+const WALLETCONNECT_PROJECT_ID = '0f8a5e2cf60430a26274b421418e8a27'
+
+const wagmiConfig = createConfig(
+  getDefaultConfig({
+    appName: 'Zodiac Pilot',
+    walletConnectProjectId: WALLETCONNECT_PROJECT_ID,
+    connectors: [
+      injected(),
+      metaMask(),
+      walletConnect({ projectId: WALLETCONNECT_PROJECT_ID }),
+    ],
+  }),
+)
+
+export const WalletProvider = ({ children }: PropsWithChildren) => (
+  <QueryClientProvider client={queryClient}>
+    <WagmiProvider config={wagmiConfig}>{children}</WagmiProvider>
+  </QueryClientProvider>
+)
diff --git a/deployables/app/app/components/wallet/index.ts b/deployables/app/app/components/wallet/index.ts
index 8524fdbef..865f9befa 100644
--- a/deployables/app/app/components/wallet/index.ts
+++ b/deployables/app/app/components/wallet/index.ts
@@ -1 +1,2 @@
 export { ConnectWallet } from './ConnectWallet'
+export { WalletProvider } from './WalletProvider'
diff --git a/deployables/app/app/routes/edit-route.$data.spec.ts b/deployables/app/app/routes/edit-route.$data.spec.ts
index 94fe3aba5..606b15920 100644
--- a/deployables/app/app/routes/edit-route.$data.spec.ts
+++ b/deployables/app/app/routes/edit-route.$data.spec.ts
@@ -341,7 +341,7 @@ describe('Edit route', () => {
 
         await render(`/edit-route/${btoa(JSON.stringify(route))}`)
 
-        expect(screen.getByText('Roles v1')).toBeInTheDocument()
+        expect(await screen.findByText('Roles v1')).toBeInTheDocument()
       })
 
       it('is possible to select the v1 roles mod', async () => {
@@ -451,7 +451,7 @@ describe('Edit route', () => {
 
         await render(`/edit-route/${btoa(JSON.stringify(route))}`)
 
-        expect(screen.getByText('Roles v2')).toBeInTheDocument()
+        expect(await screen.findByText('Roles v2')).toBeInTheDocument()
       })
 
       it('is possible to select the v2 roles mod', async () => {
@@ -529,7 +529,7 @@ describe('Edit route', () => {
           await render(`/edit-route/${btoa(JSON.stringify(route))}`)
 
           await userEvent.type(
-            screen.getByRole('textbox', { name: 'Role Key' }),
+            await screen.findByRole('textbox', { name: 'Role Key' }),
             'MANAGER',
           )
 
diff --git a/deployables/app/app/routes/edit-route.$data.tsx b/deployables/app/app/routes/edit-route.$data.tsx
index a3c8ef1e2..d6600db50 100644
--- a/deployables/app/app/routes/edit-route.$data.tsx
+++ b/deployables/app/app/routes/edit-route.$data.tsx
@@ -3,11 +3,12 @@ import {
   ChainSelect,
   ConnectWallet,
   DebugRouteData,
+  WalletProvider,
   ZodiacMod,
 } from '@/components'
 import { editRoute, jsonRpcProvider, parseRouteData } from '@/utils'
 import { invariantResponse } from '@epic-web/invariant'
-import { verifyChainId } from '@zodiac/chains'
+import { verifyChainId, ZERO_ADDRESS } from '@zodiac/chains'
 import {
   formData,
   getHexString,
@@ -130,6 +131,11 @@ export const clientAction = async ({
         ),
       )
     }
+    case Intent.DisconnectWallet: {
+      const route = parseRouteData(params.data)
+
+      return editRoute(request.url, updatePilotAddress(route, ZERO_ADDRESS))
+    }
     default:
       return serverAction()
   }
@@ -157,23 +163,29 @@ const EditRoute = ({
           }}
         />
 
-        <ConnectWallet
-          chainId={chainId}
-          pilotAddress={getPilotAddress(waypoints)}
-          providerType={providerType}
-          onConnect={({ account, chainId, providerType }) => {
-            submit(
-              formData({
-                intent: Intent.ConnectWallet,
-                account,
-                chainId,
-                providerType,
-              }),
-              { method: 'POST' },
-            )
-          }}
-          onDisconnect={() => {}}
-        />
+        <WalletProvider>
+          <ConnectWallet
+            chainId={chainId}
+            pilotAddress={getPilotAddress(waypoints)}
+            providerType={providerType}
+            onConnect={({ account, chainId, providerType }) => {
+              submit(
+                formData({
+                  intent: Intent.ConnectWallet,
+                  account,
+                  chainId,
+                  providerType,
+                }),
+                { method: 'POST' },
+              )
+            }}
+            onDisconnect={() => {
+              submit(formData({ intent: Intent.DisconnectWallet }), {
+                method: 'POST',
+              })
+            }}
+          />
+        </WalletProvider>
 
         <AvatarInput
           value={avatar}
@@ -221,6 +233,7 @@ enum Intent {
   UpdateAvatar = 'UpdateAvatar',
   RemoveAvatar = 'RemoveAvatar',
   ConnectWallet = 'ConnectWallet',
+  DisconnectWallet = 'DisconnectWallet',
 }
 
 const getPilotAddress = (waypoints?: Waypoints) => {