Recent Transactions

Show your recent transactions

You can opt in to displaying recent transactions within SnowConeKit's account modal. Note that all transactions are kept in local storage and must be manually registered with SnowConeKit 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 SnowConeKitProvider.

import { SnowConeKitProvider } from '@snowcone/snowconekit';

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

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

import { useAddRecentTransaction } from '@snowcone/snowconekit';

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

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

Once a transaction has been registered with SnowConeKit, 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 '@snowcone/snowconekit';

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

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