最近のトランザクション

最近の取引を表示する

RainbowKitのアカウントモーダル内に最近の取引を表示するようにオプトインできます。すべての取引はローカルストレージに保管され、表示するためにはRainbowKitに手動で登録する必要があります。

デフォルトのConnectButton実装は、保留中の取引がある場合、ユーザーのアバターの周りにローディングインジケーターを表示します。カスタムConnectButton実装は、レンダリング関数に渡されるaccount.hasPendingTransactionsプロパティを介してこの振る舞いを再現できます。

RainbowKitProviderでshowRecentTransactionsオプションを有効にしてこの機能を使用します。

import { RainbowKitProvider } from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider showRecentTransactions={true} {...etc}>
      {/* ... */}
    </RainbowKitProvider>
  );
};

useAddRecentTransactionフックを使用して取引をRainbowKitに登録できます。

import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';

export default () => {
  const addRecentTransaction = useAddRecentTransaction();

  return (
    <button
      onClick={() => {
        addRecentTransaction({
          hash: '0x...',
          description: '...',
        });
      }}
    >
      Add recent transaction
    </button>
  );
};

取引がRainbowKitに登録されると、そのステータスは完了時に更新されます。

デフォルトでは、トランザクションが採掘されたブロックの上に1つのブロックが採掘されると、トランザクションは完了したと見なされますが、カスタムconfirmations値を指定することでこれを設定できます。

import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';

export default () => {
  const addRecentTransaction = useAddRecentTransaction();

  return (
    <button
      onClick={() => {
        addRecentTransaction({
          hash: '0x...',
          description: '...',
          confirmations: 100,
        });
      }}
    >
      Add recent transaction
    </button>
  );
};

概要

入門

高度な設定

最近のトランザクション

最近の取引を表示する