Lesson 4: トランザクションカードコンポーネントを実装する

このレッスンでは、NFTのミント処理（トランザクション）が実行された際に、その結果（成功または失敗）やトランザクションハッシュをユーザーに分かりやすく表示するためのUIコンポーネント、TransactionCard.tsxを実装します。

📦 components/TransactionCard.tsxの実装

components/TransactionCard.tsx`というファイルを作成し、以下のコードを記述します。

//components/TransactionCard.tsx

import { useNotification } from '@coinbase/onchainkit/minikit';
import {
  Transaction,
  TransactionButton,
  TransactionError,
  TransactionResponse,
  TransactionStatus,
  TransactionStatusAction,
  TransactionStatusLabel,
  TransactionToast,
  TransactionToastAction,
  TransactionToastIcon,
  TransactionToastLabel,
} from '@coinbase/onchainkit/transaction';
import { useCallback } from 'react';
import { Abi } from 'viem';
import { useAccount } from 'wagmi';

type TransactionProps = {
  calls: {
    address: `0x${string}`;
    abi: Abi;
    functionName: string;
    args: (string | number | bigint | boolean | `0x${string}`)[];
  }[];
};

/**
 * トランザクションカードコンポーネント
 * @returns
 */
export function TransactionCard({ calls }: TransactionProps) {
  const { address } = useAccount();

  const sendNotification = useNotification();

  /**
   * トランザクションが正常に実行された時に実行するコールバック関数
   */
  const handleSuccess = useCallback(
    async (response: TransactionResponse) => {
      const transactionHash = response.transactionReceipts[0].transactionHash;

      console.log(`Transaction successful: ${transactionHash}`);

      // トランザクション成功時に MiniKit 通知を送る
      await sendNotification({
        title: 'Congratulations!',
        body: `You sent your a transaction, ${transactionHash}!`,
      });
    },
    [sendNotification]
  );

  return (
    <div className="w-full">
      {address ? (
        <Transaction
          calls={calls}
          onSuccess={handleSuccess}
          onError={(error: TransactionError) => console.error('Transaction failed:', error)}
        >
          <TransactionButton className="text-md text-white" text="Mint NFT" />
          <TransactionStatus>
            <TransactionStatusAction />
            <TransactionStatusLabel />
          </TransactionStatus>
          <TransactionToast className="mb-4">
            <TransactionToastIcon />
            <TransactionToastLabel />
            <TransactionToastAction />
          </TransactionToast>
        </Transaction>
      ) : (
        <p className="mt-2 text-center text-sm text-yellow-400">
          Connect your wallet to send a transaction
        </p>
      )}
    </div>
  );
}

📖 コード解説

useAccountフックの活用

useOnchainKitフックからOnChainKitで生成されたウォレットアドレスを取得しています。

const { address } = useAccount();

useNotificationフックの活用

useNotificationフックのsendNotificationメソッドを使ってトランザクション正常終了時にユーザー向けに通知を送信するようにしています。

const sendNotification = useNotification();

トランザクションが正常に実行された時に実行するコールバック関数

OnChainKitのコンポーネント越しに送信したトランザクションが正常に終了した時にユーザー向けに通知を飛ばすようにしています。

sendNotificationメソッドはテンプレプロジェクトで生成されたものをそのまま使っています。

const handleSuccess = useCallback(
  async (response: TransactionResponse) => {
    const transactionHash = response.transactionReceipts[0].transactionHash;

    console.log(`Transaction successful: ${transactionHash}`);

    // トランザクション成功時に MiniKit 通知を送る
    await sendNotification({
      title: 'Congratulations!',
      body: `You sent your a transaction, ${transactionHash}!`,
    });
  },
  [sendNotification]
);

OnChainKitのTransaction関連コンポーネント

トランザクションを送信する部分にはOnChainKitのTransaction関連コンポーネントを活用しています。

import {
  Transaction,
  TransactionButton,
  TransactionError,
  TransactionResponse,
  TransactionStatus,
  TransactionStatusAction,
  TransactionStatusLabel,
  TransactionToast,
  TransactionToastAction,
  TransactionToastIcon,
  TransactionToastLabel,
} from '@coinbase/onchainkit/transaction';

これらのコンポーネントを活用するだけですぐにトランザクションを送信するアプリを構築することができます！

開発者側で用意する必要があるのはコールデータのみです！

コールデータは前のレッスンで実装したcallsを渡すようにしています。

<Transaction
  calls={calls}
  onSuccess={handleSuccess}
  onError={(error: TransactionError) => console.error('Transaction failed:', error)}
>
  <TransactionButton className="text-md text-white" text="Mint NFT" />
  <TransactionStatus>
    <TransactionStatusAction />
    <TransactionStatusLabel />
  </TransactionStatus>
  <TransactionToast className="mb-4">
    <TransactionToastIcon />
    <TransactionToastLabel />
    <TransactionToastAction />
  </TransactionToast>
</Transaction>

---

これで、ユーザーにトランザクションを実行するためのUIコンポーネントが実装できました！

🙋‍♂️ 質問する

ここまでの作業で何かわからないことがある場合は、Discordの#baseで質問をしてください。

ヘルプをするときのフローが円滑になるので、エラーレポートには下記の3点を記載してください ✨

1. 質問が関連しているセクション番号とレッスン番号
2. 何をしようとしていたか
3. エラー文をコピー&ペースト
4. エラー画面のスクリーンショット