WylletProvider

<WylletProvider> holds Wyllet's options and renders the panel and toasts. Place it inside <WagmiProvider> and <QueryClientProvider>, and render every Wyllet component and hook inside it.

Usage

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
import type { ReactNode } from 'react'
import { WagmiProvider } from 'wagmi'
import { obsidianTheme, WylletProvider } from 'wyllet'
import { config } from './wagmi'
 
const queryClient = new QueryClient()
 
export function Providers({ children }: { children: ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <WylletProvider
          theme={obsidianTheme({ accentColor: '#C6F432' })}
          appearance={{ presentation: 'popover' }}
          shortcut="mod+k"
        >
          {children}
        </WylletProvider>
      </QueryClientProvider>
    </WagmiProvider>
  )
}

Every prop is optional except children. Wyllet components and hooks throw an error if they are rendered outside the provider.

Props

Appearance

appearance groups the options that change how the panel looks and behaves. Pass only the keys you want to change; the rest keep their defaults.

<WylletProvider
  appearance={{
    presentation: 'popover',
    identityCard: true,
    accountTabs: ['tokens', 'activity'],
    toastPosition: 'bottom-right',
  }}
>

App info

appInfo accepts any subset of these fields. Values you pass are merged over the ones getDefaultConfig() registered from appName, appDescription, appUrl and appIcon.

The connect panel footer shows "By connecting you accept the Terms and Privacy Policy" only when both termsUrl and privacyUrl are set. A disclaimer replaces that notice entirely.

Keyboard shortcut

shortcut is a +-separated combination. The modifiers are mod, ctrl, meta, shift and alt, and the last part is the key. mod means ⌘ on macOS and Ctrl elsewhere.

<WylletProvider shortcut="mod+k">

The shortcut toggles the panel. It opens the account view when the user is connected (and signed in, if you use SIWE), and the connect view otherwise. While disconnected, <WylletButton> shows the shortcut as a hint.

Custom avatar

avatar receives the address, the resolved ENS avatar URL (when there is one) and the size in pixels.

import type { CustomAvatarProps } from 'wyllet'
 
function MyAvatar({ address, ensImage, size }: CustomAvatarProps) {
  return <img src={ensImage ?? `/avatars/${address}.png`} width={size} height={size} alt="" />
}
 
<WylletProvider avatar={MyAvatar}>

Callbacks

onConnect runs after each connection, including automatic reconnects on page load. Use isReconnected to tell them apart.

<WylletProvider
  onConnect={({ address, chainId, connectorId, isReconnected }) => {
    if (!isReconnected) analytics.track('wallet_connected', { connectorId, chainId })
  }}
  onDisconnect={() => analytics.track('wallet_disconnected')}
>

Related

• Configuration
• Presentations
• Theming
• Hooks