<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 を返します。常にマウントされているコンテナ（例: ルートレイアウト）に 配置し、その隣に独自の connect ボタンを描画してください。

リファレンス

props.theme

次の属性を持つオブジェクトを渡して、ウォレットウィジェットのテーマを カスタマイズします。

属性	説明	デフォルト	値
variant	展開されたウォレットウィジェットのスキン。	'glow'	'dark' | 'flat' | 'glow'
colors.accentColor	ウォレットウィジェットのアクセントカラー。これを設定するとモノクロモードがオンになり、他の競合する色（例: トークンアイコン）が取り除かれます。	undefined	任意の有効な CSS 色文字列。
colors.collapsed.accentColor	折りたたまれたウォレットウィジェットのアクセントカラー。定義されていない場合は colors.accentColor にフォールバックします。	undefined	任意の有効な CSS 色文字列。
colors.collapsed.backgroundColor	折りたたまれたウォレットウィジェットの背景色。	undefined	任意の有効な CSS 色文字列。

CSS の var(...) 参照は iframe に転送される前に積極的に解決されるため、独自の デザイントークンを参照できます。

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

props.size

折りたたまれたウォレットウィジェットのサイズは 4 種類から選択できます: small、medium、large、huge。

デフォルトは 'medium' です。

props.shape

折りたたまれたウォレットウィジェットの形状は 2 種類から選択できます: rounded と squared。

デフォルトは 'rounded' です。

props.compact

コンパクトモードを有効にします。このモードでは、折りたたまれたウォレット ウィジェットがアバターのみを含む極小バージョンになります。

デフォルトは false です。

props.noAutoCompact

小さな画面でウォレットウィジェットがコンパクトモードに切り替わるのを 防ぎます。

デフォルトは false です。

props.smallBreakpoint

ウォレットウィジェットを小さな画面向けに最適化するために使用する ブレークポイントを、ピクセル単位で定義します。

ビューポートの幅がこの数値を下回る場合、ウォレットウィジェットは コンパクトモードを使用し、画面全体を占めるように展開されます。

デフォルトは 540 です。

props.noAutoCollapse

ウォレットウィジェットの外側をクリックしたときに折りたたまれないように します。

デフォルトは false です。

props.experimental_mode

描画モード。dropdown はその場でウィジェットを展開します（デスクトップに 適しています）。modal は中央のポータルにウィジェットを描画します。 デフォルトは dropdown で、smallBreakpoint prop を介してレスポンシブの ままです。

props.className

カスタムスタイル用の追加 CSS クラスです。

デフォルトは undefined です。

props.style

カスタムスタイル用のインラインスタイルです。

デフォルトは undefined です。