<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:
| Attribute | Description | Default | Values |
|---|---|---|---|
variant | The skin for the expanded wallet widget. | 'glow' | 'dark' | 'flat' | 'glow' |
colors.accentColor | The accent color for the wallet widget. Setting this will turn on monochromatic mode, removing any other competing color (e.g. token icons). | undefined | Any valid CSS color string. |
colors.collapsed.accentColor | The accent color for the collapsed wallet widget. Will fallback to colors.accentColor if that is defined. | undefined | Any valid CSS color string. |
colors.collapsed.backgroundColor | The background color for the collapsed wallet widget. | undefined | Any 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.