Presentations

The connect and account views open in a single panel. The presentation option decides how that panel enters the screen: as a side drawer, a popover anchored to the element that opened it, or a centered modal. On phones it becomes a bottom sheet.

Choosing a presentation

<WylletProvider appearance={{ presentation: 'popover' }}>

Every presentation shares the same behavior: the panel renders in a portal on document.body, traps focus while open, locks page scroll, closes on Escape or a click outside, and returns focus to the previously focused element when it closes.

Drawer

The drawer is the default. Use drawerSide to choose the side it slides in from.

<WylletProvider appearance={{ presentation: 'drawer', drawerSide: 'left' }}>

The drawer is up to 420px wide and leaves a small gap around its edges. The page behind it is dimmed by the theme's overlay color and overlayBlur effect.

Popover

The popover opens next to its anchor element, aligned to the anchor's left or right edge depending on which half of the viewport the anchor is in. It opens below the anchor, or above it when there is not enough room below. The overlay behind a popover is transparent.

<WylletProvider appearance={{ presentation: 'popover' }}>

The popover needs to know which element to anchor to:

• <WylletButton> and the button inside <ConnectGate> pass themselves as the anchor automatically.
• When you open the panel yourself, pass the element. See Opening with an anchor.

If the panel is opened without an anchor, the popover falls back to a modal. That includes opening it with the provider's keyboard shortcut.

The anchor's position is measured when the panel opens.

Modal

A centered dialog, up to 400px wide.

<WylletProvider appearance={{ presentation: 'modal' }}>

Mobile bottom sheet

On screens up to 640px wide, the panel opens as a bottom sheet regardless of presentation. The sheet has a drag handle: drag it down, or flick it, to dismiss. A short drag snaps back.

Set mobileSheet to false to keep the configured presentation on phones as well.

<WylletProvider appearance={{ presentation: 'modal', mobileSheet: false }}>

Opening with an anchor

You can open the panel from any element in your UI. To anchor a popover to it, pass the element when you open the panel.

With useWylletButton(), the open functions take the element as their first argument:

import { useWylletButton } from 'wyllet'
 
function AccountChip() {
  const { open, openAccount } = useWylletButton()
  return (
    <>
      <button onClick={(e) => open(e.currentTarget)}>Wallet</button>
      <button onClick={(e) => openAccount(e.currentTarget, 'activity')}>Activity</button>
    </>
  )
}

With useWyllet(), the functions take an options object with an anchor field:

import { useWyllet } from 'wyllet'
 
function Toolbar() {
  const { openConnect, openTab } = useWyllet()
  return (
    <>
      <button onClick={(e) => openConnect({ anchor: e.currentTarget })}>Connect</button>
      <button onClick={(e) => openTab('networks', { anchor: e.currentTarget })}>Networks</button>
    </>
  )
}

useWyllet() also returns open(view, options), openAccount(options) and close(). open() with no view opens the account view when connected and the connect view otherwise. See Hooks.

Embedded

To show the panel inside your own layout rather than over it, render <WylletEmbed /> where you want it. It is the same panel with the same theme and options, without an overlay, focus trap or scroll lock. The rest of the site keeps using the presentation you configured. See WylletEmbed.

Animations

The panel animates in and out. Set disableAnimations: true in appearance to turn transitions off. Users who have prefers-reduced-motion enabled get reduced motion automatically.

Related

• WylletProvider for every appearance option.
• WylletButton
• Account panel
• Compare the presentations live in the playground.