Wallet Connect

Connect button and connected account in one control. Wrong-network outranks showing a balance — a figure from the wrong ledger is worse than none, because it looks authoritative.

src/components/ui/wallet-connect.tsx

About

From the component's own source, where it was written.

Connect button and connected account, in one control.

Wrong-network is a separate state from connected, and it takes priority over showing a balance. A balance rendered while the wallet sits on an unexpected chain is a number from the wrong ledger — worse than showing nothing, because it looks authoritative.

Connecting is a distinct state too: wallet prompts open in another window and can sit unanswered for a long time, so the button has to stop inviting a second click.

Install

npx astralyx-ui add wallet-connect

Usage

import { WalletConnect } from '@/components/ui/wallet-connect'

<WalletConnect
  address={address}
  balance="2.41 ETH"
  wrongNetwork={chainId !== 1}
  onConnect={connect}
  onSwitchNetwork={switchChain}
/>

Composer

Change the props and the source below follows.

Props

state

tsx

<WalletConnect
  address={address}
  wrongNetwork={false}
  onConnect={connect}
/>

Examples

States

tsx

<WalletConnect onConnect={connect} />
<WalletConnect address={address} wrongNetwork />

API

Generated from the source, so it cannot fall behind the code. One table per exported component, then hooks, functions and types.

`WalletConnect`

Connect button and connected account, in one control.

Extends Omit<ComponentProps<'div'>, 'onSelect'>.

Prop	Type	Default	Description
address	string	—	Absent renders the connect button.
ensName	ReactNode	—	—
avatar	ReactNode	—	—
balance	ReactNode	—	—
chainName	ReactNode	—	—
wrongNetwork	boolean	false	Takes priority over the connected view — no balance is shown from an unsupported chain.
connecting	boolean	false	A distinct state: wallet prompts open in another window and can sit unanswered, so the button stops inviting a second click.
onConnect	() => void	—	The component performs no wallet calls itself.
onDisconnect	() => void	—	The component performs no wallet calls itself.
onSwitchNetwork	() => void	—	The component performs no wallet calls itself.
explorerHref	string	—	—
connectLabel	ReactNode	'Connect wallet'	—
wrongNetworkLabel	ReactNode	'Wrong network'	—
disconnectLabel	ReactNode	'Disconnect'	—