Components

Wyllet exports nine components and one helper function for avatars. WylletButton, WylletEmbed, ConnectGate, Avatar and ChainIcon read Wyllet's context and must be rendered inside WylletProvider. WylletMark and QRCode work anywhere. TokenIcon works anywhere unless you pass chainId, which renders a ChainIcon badge.

import {
  Avatar,
  addressGradient,
  ChainIcon,
  ConnectGate,
  QRCode,
  TokenIcon,
  WylletButton,
  WylletEmbed,
  WylletMark,
  WylletProvider,
} from 'wyllet'

WylletProvider

Holds Wyllet's state, renders the panel and toasts, and injects the styles. Place it inside WagmiProvider and QueryClientProvider.

<WagmiProvider config={config}>
  <QueryClientProvider client={queryClient}>
    <WylletProvider>{children}</WylletProvider>
  </QueryClientProvider>
</WagmiProvider>

Every prop is documented on WylletProvider.

WylletButton

The Island button. A call to action when disconnected, and the account's avatar, name, network badge and balance when connected. See WylletButton.

<WylletButton size="lg" display="compact" label="Enter app" />

When connected, the button shows "Verify" if a sign-in is still needed and "Wrong network" when the wallet is on a chain your config does not include. Clicking it in the wrong-network state opens the Networks tab.

The button renders inside an error boundary. If it ever crashes, it is replaced with a plain connect button that still opens the panel. For a fully custom button, use useWylletButton.

ConnectGate

Renders its children only when the user is connected, on a supported network and, if an auth adapter is set, signed in. Otherwise it renders a prompt with a button that opens the right step. See ConnectGate.

GateReason is 'disconnected' | 'wrongNetwork' | 'unauthenticated'.

<ConnectGate requireAuth={false} fallback={(reason) => <p>Blocked: {reason}</p>}>
  <Dashboard />
</ConnectGate>

Children are never rendered on the server or during the first client render, so gated content does not leak into server HTML.

WylletEmbed

The real Wyllet panel rendered inline, inside your own layout, instead of in an overlay. Use it for a connect card on a sign-in page, an account panel in a sidebar, or a live preview. It shows the connect view while the user is disconnected and the account view once they are connected (and signed in, when you use SIWE).

import { WylletEmbed } from 'wyllet'
 
export function SignInPage() {
  return (
    <main className="grid place-items-center">
      <WylletEmbed />
    </main>
  )
}

It uses the provider's theme, wallets, tokens and options, and the panel class name slot. Its navigation is local: connecting, switching tabs or going back never opens the drawer, and there is no close button. Wallet detection only exists in the browser, so it renders after mount and outputs an empty box during server rendering. It is at most 420px wide.

Avatar

An address avatar. Shows the ENS avatar when one exists and ENS is enabled, otherwise a gradient generated from the address. If you pass a custom avatar component to WylletProvider, Avatar renders that instead.

<Avatar address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" size={40} />

ENS names that fail normalization are ignored instead of throwing, so a malicious reverse record cannot crash the avatar.

addressGradient

function addressGradient(address: string): string

Returns the CSS background value Avatar uses: a deterministic gradient, so the same address gets the same colors everywhere. Use it to match Wyllet's avatars in your own UI.

<div style={{ width: 32, height: 32, borderRadius: '50%', background: addressGradient(address) }} />

ChainIcon

A chain logo as an img. The source is chosen in this order: the provider's chainIcons prop, the icon passed to customChain, a built-in official mark, then a colored monogram.

<ChainIcon chainId={8453} size={24} />

Built-in marks cover Ethereum, OP, Arbitrum, Base, Polygon, Avalanche, zkSync, Linea, Scroll, Gnosis, Zora and Blast, and their testnets. BNB Chain gets a monogram because its brand guidelines require approval first.

TokenIcon

A token logo with an optional chain badge in the corner.

<TokenIcon symbol="USDC" chainId={8453} size={28} />

Built-in marks: ETH, WETH, USDC, USDT, DAI, WBTC, OP, ARB, POL, MATIC, AVAX, LINK and UNI. Any other symbol gets a generated monogram. To get the icon URL without rendering, use tokenIconUri.

WylletMark

Wyllet's logo as an inline SVG. It makes no image request and is hidden from assistive technology (aria-hidden).

<WylletMark size={20} />

QRCode

The QR code Wyllet uses for WalletConnect and the Receive screen, rendered as an SVG. The encoder is built in. See Pretty QR codes that still scan for how the design was tested.

<div style={{ background: '#fff', color: '#111', padding: 8, display: 'inline-block' }}>
  <QRCode value="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" size={240} />
</div>

How it renders:

• Modules are drawn in currentColor on a transparent background. Put it on a light background with a dark color, as in the example.
• It uses error correction level Q. A center logo covers about 24% of the code's width, with one extra module cleared around it.
• A 2-module quiet zone is included inside the SVG's bounds.
• Wyllet's scan test runs at 240px, so avoid rendering it smaller than that.