feat(pilot-app): disconnect wallet

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()
+      }}
+    />
   )
 }

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>
+)

deployables/app/app/components/wallet/index.ts

@@ -1 +1,2 @@
 export { ConnectWallet } from './ConnectWallet'
+export { WalletProvider } from './WalletProvider'

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',
           )
 

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) => {