fixes for wallet connection

deployables/app/app/components/wallet/ConnectWallet.tsx

@@ -3,7 +3,8 @@ import { type HexAddress, ProviderType } from '@zodiac/schema'
 import { useEffect, useRef } from 'react'
 import { type ChainId } from 'ser-kit'
 import { useAccount, useAccountEffect, useDisconnect } from 'wagmi'
-import { Connect, type OnConnectArgs } from './Connect'
+import { EmptyAccount } from './EmptyAccount'
+import type { OnConnectArgs } from './LaunchConnectKit'
 import { Wallet } from './Wallet'
 
 export type ConnectWalletProps = {
@@ -24,7 +25,7 @@ export const ConnectWallet = ({
 
   useAutoReconnect({ currentConnectedAddress: pilotAddress, onConnect })
 
-  const accountNotConnected =
+  const pilotAccountIsEmpty =
     pilotAddress == null || pilotAddress === ZERO_ADDRESS
 
   const disconnectRequestRef = useRef(false)
@@ -41,8 +42,8 @@ export const ConnectWallet = ({
     },
   })
 
-  if (accountNotConnected) {
-    return <Connect onConnect={onConnect} />
+  if (pilotAccountIsEmpty) {
+    return <EmptyAccount onConnect={onConnect} />
   }
 
   return (

deployables/app/app/components/wallet/EmptyAccount.tsx

@@ -0,0 +1,18 @@
+import { Labeled, PrimaryButton } from '@zodiac/ui'
+import { LaunchConnectKit, type OnConnectArgs } from './LaunchConnectKit'
+
+type Props = {
+  onConnect?: (args: OnConnectArgs) => void
+}
+
+export const EmptyAccount = ({ onConnect }: Props) => {
+  return (
+    <LaunchConnectKit onConnect={onConnect}>
+      {({ show }) => (
+        <Labeled label="Pilot Account">
+          <PrimaryButton onClick={show}>Connect wallet</PrimaryButton>
+        </Labeled>
+      )}
+    </LaunchConnectKit>
+  )
+}

deployables/app/app/components/wallet/Connect.tsx → deployables/app/app/components/wallet/LaunchConnectKit.tsx

@@ -1,9 +1,8 @@
+import type { ChainId } from '@zodiac/chains'
 import { ProviderType, type HexAddress } from '@zodiac/schema'
-import { Labeled, PrimaryButton } from '@zodiac/ui'
 import {
-  ConnectKitButton,
+  ConnectKitButton as ConnectKitButtonBase,
   ConnectKitProvider,
-  Types as ConnectKitTypes,
 } from 'connectkit'
 import { useAccountEffect } from 'wagmi'
 
@@ -13,16 +12,16 @@ export type OnConnectArgs = {
 }
 
 type ConnectProps = {
+  children: (props: { show?: () => void }) => React.ReactNode
   onConnect?: (args: OnConnectArgs) => void
+  initialChainId?: ChainId
 }
 
-const connectKitOptions: ConnectKitTypes.ConnectKitOptions = {
-  initialChainId: 0,
-  hideNoWalletCTA: true,
-  hideQuestionMarkCTA: true,
-}
-
-export const Connect = ({ onConnect }: ConnectProps) => {
+export const LaunchConnectKit = ({
+  initialChainId,
+  onConnect,
+  children,
+}: ConnectProps) => {
   useAccountEffect({
     onConnect({ address, connector, isReconnected }) {
       if (isReconnected) {
@@ -44,14 +43,16 @@ export const Connect = ({ onConnect }: ConnectProps) => {
   })
 
   return (
-    <ConnectKitProvider options={connectKitOptions}>
-      <ConnectKitButton.Custom>
-        {({ show }) => (
-          <Labeled label="Pilot Account">
-            <PrimaryButton onClick={show}>Connect wallet</PrimaryButton>
-          </Labeled>
-        )}
-      </ConnectKitButton.Custom>
+    <ConnectKitProvider
+      options={{
+        initialChainId: initialChainId ?? 0,
+        hideNoWalletCTA: true,
+        hideQuestionMarkCTA: true,
+      }}
+    >
+      <ConnectKitButtonBase.Custom>
+        {({ show }) => children({ show })}
+      </ConnectKitButtonBase.Custom>
     </ConnectKitProvider>
   )
 }

deployables/app/app/components/wallet/Wallet.tsx

@@ -1,5 +1,5 @@
 import type { ChainId } from 'ser-kit'
-import { useAccount, useReconnect, useSwitchChain } from 'wagmi'
+import { useAccount, useSwitchChain } from 'wagmi'
 import { Account } from './Account'
 import { Connected } from './Connected'
 import { SwitchChain } from './SwitchChain'
@@ -20,7 +20,6 @@ export const Wallet = ({
 }: WalletProps) => {
   const { address, chainId: accountChainId, addresses = [] } = useAccount()
   const { switchChain } = useSwitchChain()
-  const { reconnect } = useReconnect()
 
   const isServer = typeof document === 'undefined'
 
@@ -31,10 +30,7 @@ export const Wallet = ({
   // Wallet disconnected
   if (address == null || addresses.length === 0) {
     return (
-      <WalletDisconnected
-        onDisconnect={onDisconnect}
-        onReconnect={() => reconnect()}
-      >
+      <WalletDisconnected>
         <Account>{pilotAddress}</Account>
       </WalletDisconnected>
     )

deployables/app/app/components/wallet/WalletDisconnected.tsx

@@ -1,17 +1,11 @@
 import { SecondaryButton, Warning } from '@zodiac/ui'
 import type { PropsWithChildren } from 'react'
+import { LaunchConnectKit } from './LaunchConnectKit'
 import { Section } from './Section'
 
-type WalletDisconnectedProps = PropsWithChildren<{
-  onReconnect: () => void
-  onDisconnect: () => void
-}>
+type WalletDisconnectedProps = PropsWithChildren
 
-export const WalletDisconnected = ({
-  children,
-  onReconnect,
-  onDisconnect,
-}: WalletDisconnectedProps) => (
+export const WalletDisconnected = ({ children }: WalletDisconnectedProps) => (
   <Section>
     {children}
 
@@ -21,13 +15,13 @@ export const WalletDisconnected = ({
     </Warning>
 
     <Section.Actions>
-      <SecondaryButton fluid onClick={onReconnect}>
-        Connect
-      </SecondaryButton>
-
-      <SecondaryButton fluid onClick={onDisconnect}>
-        Disconnect
-      </SecondaryButton>
+      <LaunchConnectKit>
+        {({ show }) => (
+          <SecondaryButton fluid onClick={show}>
+            Connect wallet
+          </SecondaryButton>
+        )}
+      </LaunchConnectKit>
     </Section.Actions>
   </Section>
 )

deployables/app/app/components/wallet/WrongAccount.tsx

@@ -10,7 +10,7 @@ export const WrongAccount = ({ children, onDisconnect }: WrongAccountProps) => (
   <Section>
     {children}
 
-    <Warning title="Account is not connected">
+    <Warning title="Wallet is set to a different account">
       Switch your wallet to this account in order to use Pilot.
     </Warning>