<WalletWidget>

<WalletWidget> 是负责渲染钱包组件的 React 组件。

<WalletWidget> 必须渲染在 <WalletProvider> 内部。

示例

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

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

INFO

在用户连接钱包之前，该组件保持不可见 —— 断开状态下它会返回 null。 请将它放置在一个始终挂载的容器中（例如你的根布局），并在它旁边渲染 你自己的连接按钮。

参考

props.theme

通过传入具有以下属性的对象来自定义钱包组件的主题：

属性	描述	默认值	取值
variant	展开状态钱包组件的皮肤。	'glow'	'dark' | 'flat' | 'glow'
colors.accentColor	钱包组件的强调色。设置此项会启用单色模式，移除任何其他竞争色（例如 token 图标）。	undefined	任意有效的 CSS 颜色字符串。
colors.collapsed.accentColor	折叠状态钱包组件的强调色。若 colors.accentColor 已定义，则回落到该值。	undefined	任意有效的 CSS 颜色字符串。
colors.collapsed.backgroundColor	折叠状态钱包组件的背景色。	undefined	任意有效的 CSS 颜色字符串。

CSS var(...) 引用会在被转发到 iframe 之前主动解析，因此你可以引用 自己的设计 token：

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

props.size

为折叠状态的钱包组件选择四种尺寸之一：small、medium、large 和 huge。

默认值为 'medium'。

props.shape

为折叠状态的钱包组件选择两种形状之一：rounded 和 squared。

默认值为 'rounded'。

props.compact

启用紧凑模式。该模式是折叠状态钱包组件的一个迷你版本，只包含头像。

默认值为 false。

props.noAutoCompact

阻止钱包组件在小屏幕上自动切换到紧凑模式。

默认值为 false。

props.smallBreakpoint

定义以像素为单位的断点，用于针对小屏幕优化钱包组件。

当视口宽度低于此数值时，钱包组件会使用紧凑模式并展开占满整个屏幕。

默认值为 540。

props.noAutoCollapse

阻止钱包组件在点击外部时折叠。

默认值为 false。

props.experimental_mode

渲染模式。dropdown 在原位展开组件（适合桌面端）；modal 在一个 居中 portal 中渲染组件。默认值为 dropdown —— 它仍会通过 smallBreakpoint prop 保持响应式。

props.className

用于自定义样式的额外 CSS class。

默认值为 undefined。

props.style

用于自定义样式的 inline 样式。

默认值为 undefined。