最近のトランザクション

最近の取引を表示する

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に登録されると、そのステータスは完了時に更新されます。

デフォルトでは、取引はその取引がマインされたブロックに別のブロックが追加された時点で完了と見なされますが、この動作はカスタム 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>
  );
};

概要

入門

高度な設定

最近のトランザクション

最近の取引を表示する