Skip to main content

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. エラー画面のスクリーンショット