Skip to content

Commit

Permalink
chore: refactor connect button (#182)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
frontendphil authored Oct 23, 2024
1 parent d76586d commit fd8581a
Show file tree
Hide file tree
Showing 24 changed files with 383 additions and 226 deletions.
11 changes: 9 additions & 2 deletions extension/src/panel/providers/index.ts
Original file line number Diff line number Diff line change
@@ -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'
205 changes: 0 additions & 205 deletions extension/src/panel/routes/ConnectButton/index.tsx

This file was deleted.

4 changes: 2 additions & 2 deletions extension/src/panel/routes/Edit/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Expand Down Expand Up @@ -223,7 +223,7 @@ const EditConnection: React.FC = () => {
/>
</Field>
<Field label="Pilot Account" labelFor="">
<ConnectButton
<ConnectWallet
route={route}
onConnect={({ providerType, chainId, account }) => {
updateConnection({
Expand Down
Original file line number Diff line number Diff line change
@@ -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
Expand Down
91 changes: 91 additions & 0 deletions extension/src/panel/routes/Edit/wallet/ConnectWallet.tsx
Original file line number Diff line number Diff line change
@@ -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
}
15 changes: 15 additions & 0 deletions extension/src/panel/routes/Edit/wallet/Connected.tsx
Original file line number Diff line number Diff line change
@@ -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>
)
11 changes: 11 additions & 0 deletions extension/src/panel/routes/Edit/wallet/Section.tsx
Original file line number Diff line number Diff line change
@@ -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
Loading

0 comments on commit fd8581a

Please sign in to comment.