<WalletWidget>

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

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

Example

import { WalletWidget } from '@money-sdk/react'

function Layout() {
  return (
    <header>
      <WalletWidget theme={{ variant: 'dark' }} size="large" shape="squared" />
    </header>
  )
}

INFO

The widget is invisible until the user connects the wallet — it returns null when disconnected. Place it in a container that's always mounted (e.g. your root layout) and render your own connect button next to it.

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 turns 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. Falls back 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.

CSS var(...) references are eagerly resolved before being forwarded to the iframe, so you can reference your own design tokens:

<WalletWidget
  theme={{
    variant: 'glow',
    colors: { accentColor: 'var(--brand-accent)' },
  }}
/>

props.size

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

Defaults to 'medium'.

props.shape

Choose between two different shapes for the collapsed 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 uses compact mode and expands to occupy the full screen.

Defaults to 540.

props.noAutoCollapse

Prevent the wallet widget from collapsing when clicking outside of it.

Defaults to false.

props.experimental_mode

Render mode. dropdown expands the widget in place (appropriate for desktop); modal renders the widget in a centered portal. Defaults to dropdown — it remains responsive via the smallBreakpoint prop.

props.className

Additional CSS classes for custom styling.

Defaults to undefined.

props.style

Inline styles for custom styling.

Defaults to undefined.