chore: refactor connect button (#182)

* move files

* create dedicated components

* more and smaller components

* less prop drilling

* simplify logic

* more cohesion for provider logo component

* update import

* move wallet connect closer to its usage

* create @/chains alias

* use more from route, less duplicate checks

* routes aren't always the same

extension/src/panel/providers/index.ts

@@ -1,4 +1,11 @@
 export { default as ForkProvider } from './ForkProvider'
 export { getReadOnlyProvider } from './readOnlyProvider'
-export { ProvideInjectedWallet, useInjectedWallet } from './useInjectedWallet'
-export { default as useWalletConnect } from './useWalletConnect'
+export {
+  ProvideInjectedWallet,
+  useInjectedWallet,
+  type InjectedWalletContextT,
+} from './useInjectedWallet'
+export {
+  default as useWalletConnect,
+  type WalletConnectResult,
+} from './useWalletConnect'

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

@@ -26,7 +26,6 @@ import { useClearTransactions } from '../../state/transactionHooks'
 import { decodeRoleKey, encodeRoleKey } from '../../utils'
 import AvatarInput from '../AvatarInput'
 import ChainSelect from '../ChainSelect'
-import ConnectButton from '../ConnectButton'
 import {
   asLegacyConnection,
   fromLegacyConnection,
@@ -35,6 +34,7 @@ import { ModSelect, NO_MODULE_OPTION } from '../ModSelect'
 import { useRoute, useRoutes, useSelectedRouteId } from '../routeHooks'
 import useConnectionDryRun from '../useConnectionDryRun'
 import classes from './style.module.css'
+import { ConnectWallet } from './wallet'
 
 type ConnectionPatch = {
   label?: string
@@ -223,7 +223,7 @@ const EditConnection: React.FC = () => {
               />
             </Field>
             <Field label="Pilot Account" labelFor="">
-              <ConnectButton
+              <ConnectWallet
                 route={route}
                 onConnect={({ providerType, chainId, account }) => {
                   updateConnection({

extension/src/panel/routes/ConnectButton/Account.tsx → extension/src/panel/routes/Edit/wallet/Account.tsx

@@ -1,7 +1,7 @@
 import { Circle, RawAddress } from '@/components'
+import { ProviderType } from '@/types'
 import { validateAddress } from '@/utils'
-import { ProviderType } from '../../../types'
-import { ProviderLogo } from './ProviderLogo'
+import { ProviderLogo } from './providerLogo'
 
 type AccountProps = {
   providerType: ProviderType

extension/src/panel/routes/Edit/wallet/ConnectWallet.tsx

@@ -0,0 +1,91 @@
+import { WalletConnectResult } from '@/providers'
+import { ProviderType, Route } from '@/types'
+import { ZeroAddress } from 'ethers'
+import { ChainId, parsePrefixedAddress } from 'ser-kit'
+import { InjectedWalletContextT } from '../../../providers/useInjectedWallet'
+import { getChainId, isConnectedTo } from '../../routeHooks'
+import { InjectedWallet, InjectedWalletConnect } from './injectedWallet'
+import { WalletConnect, WalletConnectConnect } from './walletConnect'
+
+interface Props {
+  route: Route
+  onConnect(args: {
+    providerType: ProviderType
+    chainId: ChainId
+    account: string
+  }): void
+  onDisconnect(): void
+}
+
+export const ConnectWallet = ({ route, onConnect, onDisconnect }: Props) => {
+  const pilotAddress = getPilotAddress(route)
+  const chainId = getChainId(route.avatar)
+
+  const isConnected = (
+    provider: InjectedWalletContextT | WalletConnectResult
+  ) =>
+    route.initiator != null && isConnectedTo(provider, route.initiator, chainId)
+
+  // not connected
+  if (pilotAddress == null) {
+    return (
+      <div className="flex flex-col gap-2">
+        <WalletConnectConnect
+          routeId={route.id}
+          onConnect={(chainId, account) =>
+            onConnect({
+              providerType: ProviderType.WalletConnect,
+              chainId,
+              account,
+            })
+          }
+        />
+
+        <InjectedWalletConnect
+          onConnect={(chainId, account) =>
+            onConnect({
+              providerType: ProviderType.InjectedWallet,
+              chainId,
+              account,
+            })
+          }
+        />
+      </div>
+    )
+  }
+
+  switch (route.providerType) {
+    case ProviderType.InjectedWallet:
+      return (
+        <InjectedWallet
+          chainId={chainId}
+          pilotAddress={pilotAddress}
+          onDisconnect={onDisconnect}
+          isConnected={isConnected}
+        />
+      )
+    case ProviderType.WalletConnect:
+      return (
+        <WalletConnect
+          pilotAddress={pilotAddress}
+          chainId={chainId}
+          routeId={route.id}
+          isConnected={isConnected}
+        />
+      )
+  }
+}
+
+const getPilotAddress = (route: Route) => {
+  if (route.initiator == null) {
+    return null
+  }
+
+  const address = parsePrefixedAddress(route.initiator)[1].toLowerCase()
+
+  if (address === ZeroAddress) {
+    return null
+  }
+
+  return address
+}

extension/src/panel/routes/Edit/wallet/Connected.tsx

@@ -0,0 +1,15 @@
+import { Button } from '@/components'
+import { PropsWithChildren } from 'react'
+import { Section } from './Section'
+
+type ConnectedProps = PropsWithChildren<{
+  onDisconnect: () => void
+}>
+
+export const Connected = ({ children, onDisconnect }: ConnectedProps) => (
+  <Section>
+    {children}
+
+    <Button onClick={onDisconnect}>Disconnect</Button>
+  </Section>
+)

extension/src/panel/routes/Edit/wallet/Section.tsx

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react'
+
+export const Section = ({ children }: PropsWithChildren) => (
+  <div className="flex flex-col gap-4">{children}</div>
+)
+
+const Actions = ({ children }: PropsWithChildren) => (
+  <div className="flex gap-2">{children}</div>
+)
+
+Section.Actions = Actions