Transações Recentes

Transações Recentes

Mostre suas transações recentes

Você pode optar por exibir transações recentes no modal de conta do RainbowKit. Note que todas as transações são mantidas no armazenamento local e devem ser registradas manualmente no RainbowKit para serem exibidas.

A implementação padrão do ConnectButton também exibirá um indicador de carregamento ao redor do avatar do usuário se houver transações pendentes. Implementações personalizadas do ConnectButton podem recriar esse comportamento usando a propriedade account.hasPendingTransactions que é passada para sua função de renderização.

Para utilizar este recurso, primeiro ative a opção showRecentTransactions no RainbowKitProvider.

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

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

As transações podem ser registradas no RainbowKit usando o gancho useAddRecentTransaction.

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

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

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

Uma vez que uma transação foi registrada no RainbowKit, seu status será atualizado após a conclusão.

Por padrão, a transação será considerada concluída assim que um único bloco for minerado sobre o bloco em que a transação foi minerada, mas isso pode ser configurado especificando um valor personalizado de 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>
  );
};