WylletButton

<WylletButton> is the Wallet Island: one button that changes with the connection state. When disconnected it is a call to action; when connected it shows the account's avatar, name, network and balance, and opens the account panel.

Usage

import { WylletButton } from 'wyllet'
 
<WylletButton />
<WylletButton size="lg" display="compact" label="Enter app" />

Props

States

The button renders differently depending on the connection.

"Wrong network" means the wallet is on a chain that is not in your wagmi config. The labels come from messages (connect, connecting, wrongNetwork and verify), so you can rename them. See Translations.

The button passes itself as the anchor when it opens the panel, so the popover presentation positions the panel next to it. See Presentations.

If the button ever throws while rendering, Wyllet falls back to a plain connect button so users can still open the panel.

Headless: useWylletButton

useWylletButton() returns the same state that powers <WylletButton>, so you can build your own trigger with full control over markup and styles.

import { useWylletButton } from 'wyllet'
 
export function ConnectButton() {
  const { mounted, account, chain, authStatus, open } = useWylletButton()
 
  if (!mounted) return null
 
  if (!account) {
    return <button onClick={(e) => open(e.currentTarget)}>Connect wallet</button>
  }
 
  return (
    <button onClick={(e) => open(e.currentTarget)}>
      {chain?.unsupported ? 'Wrong network' : authStatus === 'unauthenticated' ? 'Verify' : account.displayName}
      {account.balance && ` · ${account.balance.formatted} ${account.balance.symbol}`}
    </button>
  )
}

Return value

account contains:

chain contains:

Styling

The button uses the islandBackground, islandText and shadows.island theme tokens while connected, and the accent color while disconnected. Change them through your theme, or add classes with className or classNames.island. See Theming and Class names.

Related

• Presentations
• ConnectGate
• Hooks