UIのカスタマイズ

ウォレットの承認前に、アプリ独自の購入内容や取引内容を表示する場合は、独自の確認コンポーネントを参照してください。 useSeams().walletのトランザクションメソッドのreview.renderを通じて、Reactコンポーネントを渡します。

Seamsは、アプリ側のReactコンポーネントとウォレットiframeで共通のテーマ設定を使います。 まず、少数のテーマトークンを変更してください。 操作部品の形状や寸法を変える場合は、形状プリセットを追加してください。

共通のテーマを適用する

React側のコンポーネントにはThemeを使い、ウォレットiframeにはseams.config.setAppearanceを使います。 どちらにも、同じ色と完全な形状プリセットを渡します。

import type { SeamsWeb } from '@seams/wallet';
import {
  HostedSeamsAuthMenu,
  type HostedAuthMenuOutcome,
  SHAPE_PRESETS,
  Theme,
} from '@seams/wallet/react';

const colors = {
  colorBackground: '#ffffff',
  textPrimary: '#000000',
  buttonBackground: '#000000',
};

export function ThemedAuthMenu({
  onOutcome,
}: {
  onOutcome: (outcome: HostedAuthMenuOutcome) => void;
}) {
  return (
    <Theme
      theme="light"
      tokens={{
        light: {
          colors,
          shape: SHAPE_PRESETS.rounded,
        },
      }}
    >
      <HostedSeamsAuthMenu onOutcome={onOutcome} />
    </Theme>
  );
}

export function applyWalletTheme(seams: SeamsWeb): void {
  seams.config.setAppearance({
    theme: {
      id: 'brand',
      mode: 'light',
      colors,
      shape: { ...SHAPE_PRESETS.rounded },
    },
    palette: 'default',
  });
}

初期テーマは、プロバイダー設定のappearanceで指定します。 実行中にテーマを切り替える場合は、seams.config.setAppearanceを使います。

seams.config.setAppearanceにも、形状レコード全体を送ってください。 表示設定の更新はキーごとにマージします。 完全なプリセットを渡すと、丸い部品から四角い部品へ戻す際に、古い値が残るのを防げます。

期待する結果

React側のアカウント・認証コンポーネントは、Themeのトークンを読み取ります。 認証メニュー、取引確認、エクスポートビューアーは、iframeの表示設定を読み取ります。 同じプリセットから両方を設定すると、テーマの切り替えが視覚的に統一されます。

対処可能な失敗

• 指定がないトークンにはSDKの既定値を使います。形状を変える際は、SHAPE_PRESETS.squareまたはSHAPE_PRESETS.roundedから始めてください。
• トークンを受け取るすべてのReactコンポーネントより上に、Themeを配置してください。境界の外のコンポーネントは、独自のスタイルを保持します。

トークン名、CSS変数、実行中の切り替え、iframeの詳細は、テーマの設定を参照してください。