<EmbeddedWallet />

ウォレットの作成

ウォレット作成画面の表示

ウォレット作成画面を表示し、作成後にウォレットアドレスを表示します。

import { EmbeddedWallet } from "@prex0/uikit/wallet";
import { Address } from "@prex0/uikit/identity";

function WalletComponent() {
  return (
    <EmbeddedWallet
      title="サンプルウォレット"
    >
      <Address />
    </EmbeddedWallet>
  );
}

ウォレット作成画面のカスタマイズ

<CustomWalletCreationComponent />を導入し、ウォレット作成画面をカスタマイズします。

import {
  EmbeddedWallet,
  WalletError,
  CreateWalletButton,
  RestoreWalletButton,
} from "@prex0/uikit/wallet";
import { Address } from "@prex0/uikit/identity";

function CustomWalletCreationComponent() {
  return (
    <div className="p-4 text-center">
      <h1 className="font-bold text-2xl mb-4">サンプルウォレット</h1>
      <WalletError />
      <CreateWalletButton
        buttonText="ウォレットを作成する"
        className="bg-blue-500 text-white"
      />
      <RestoreWalletButton
        buttonText="すでにウォレットを持っている"
        className="bg-green-500 text-white"
      />
    </div>
  );
}

function WalletComponent() {
  return (
    <EmbeddedWallet
      walletCreationComponent={<CustomWalletCreationComponent />}
    >
      <Address />
    </EmbeddedWallet>
  );
}