Developer Docs
API Reference
<WalletWidget>

<WalletWidget>

<WalletWidget> is the React component responsible for rendering the wallet widget.

<WalletWidget> must be rendered inside of a <WalletProvider>.

Example

import { WalletWidget } from '@passkeys/react';
 
function Layout() {
  return (
    <header>
      <WalletWidget theme={{ variant: 'dark' }} size="large" shape="squared" />
    </header>
  );
}

Reference

props.theme

Customize the theme of the wallet widget by passing an object with the following attributes:

AttributeDescriptionDefaultValues
variantThe skin for the expanded wallet widget.'glow''dark' | 'flat' | 'glow'
colors.accentColorThe accent color for the wallet widget. Setting this will turn on monochromatic mode, removing any other competing color (e.g. token icons).undefinedAny valid CSS color string.
colors.collapsed.accentColorThe accent color for the collapsed wallet widget. Will fallback to colors.accentColor if that is defined.undefinedAny valid CSS color string.
colors.collapsed.backgroundColorThe background color for the collapsed wallet widget.undefinedAny valid CSS color string.

props.size

Choose between four different sizes for the wallet widget: small, medium, large and huge.

Defaults to 'medium'.

props.shape

Choose between two different shapes for the wallet widget: rounded and squared.

Defaults to 'rounded'.

props.compact

Enable compact mode. This mode is a tiny version of the collapsed wallet widget that only contains the avatar.

Defaults to false.

props.noAutoCompact

Prevent the wallet widget from switching into compact mode on small screens.

Defaults to false.

props.smallBreakpoint

Defines the breakpoint, in pixels, which is used to optimize the wallet widget for small screens.

When the viewport's width is below this number, the wallet widget will use compact mode and expand to occupy the full screen.

Defaults to 540.

props.noAutoCollapse

Prevent wallet widget from collapsing when clicking outside of it.

Defaults to false.

props.className

Additional CSS classes for custom styling.

Defaults to undefined.

props.style

Inline styles to custom styling.

Defaults to undefined.

Passkeys Developer Kit

©2024 Exodus Movement, Inc. All rights reserved.

Start building

Sign up to ship the simplest web3 onboarding solution.