Getting Started

Recent Transactions

Show your recent transactions

You can opt in to displaying recent transactions within RainbowKit's account modal. Note that all transactions are kept in local storage and must be manually registered with RainbowKit in order to be displayed.

The default ConnectButton implementation will also display a loading indicator around the user's avatar if there are any pending transactions. Custom ConnectButton implementations can recreate this behavior via the account.hasPendingTransactions property that is passed to your render function.

To use this feature, first enable the showRecentTransactions option on RainbowKitProvider.

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

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

Transactions can then be registered with RainbowKit using the useAddRecentTransaction hook.

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

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

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

Once a transaction has been registered with RainbowKit, its status will be updated upon completion.

By default the transaction will be considered completed once a single block has been mined on top of the block in which the transaction was mined, but this can be configured by specifying a custom confirmations value.

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

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

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