Rainbow logo
RainbowKit
2.2.4

Neueste Transaktionen

Neueste Transaktionen

Zeigen Sie Ihre letzten Transaktionen an

Sie können sich dafür entscheiden, in RainbowKits Konto-Modul die letzten Transaktionen anzuzeigen. Beachten Sie, dass alle Transaktionen im lokalen Speicher aufbewahrt werden und manuell bei RainbowKit registriert werden müssen, um angezeigt zu werden.

Die Standardimplementierung des ConnectButton zeigt auch einen Ladeindikator um das Benutzer-Avatar an, wenn ausstehende Transaktionen vorhanden sind. Benutzerdefinierte ConnectButton-Implementierungen können dieses Verhalten über die account.hasPendingTransactions Eigenschaft nachbilden, die an Ihre Render-Funktion übergeben wird.

Um diese Funktion zu nutzen, aktivieren Sie zuerst die showRecentTransactions-Option auf RainbowKitProvider.

import { RainbowKitProvider } from '@rainbow-me/rainbowkit';
const App = () => {
return (
<RainbowKitProvider showRecentTransactions={true} {...etc}>
{/* ... */}
</RainbowKitProvider>
);
};

Transaktionen können dann mit RainbowKit über den useAddRecentTransaction Hook registriert werden.

import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';
export default () => {
const addRecentTransaction = useAddRecentTransaction();
return (
<button onClick={() => { addRecentTransaction({ hash: '0x...', description: '...', }); }} >
Add recent transaction
</button>
);
};

Sobald eine Transaktion bei RainbowKit registriert wurde, wird ihr Status nach Abschluss aktualisiert.

Standardmäßig wird die Transaktion als abgeschlossen betrachtet, sobald ein einziger Block auf dem Block abgebaut wurde, in dem die Transaktion abgebaut wurde. Dies kann jedoch durch Angabe eines benutzerdefinierten confirmations-Wertes konfiguriert werden.

import { useAddRecentTransaction } from '@rainbow-me/rainbowkit';
export default () => {
const addRecentTransaction = useAddRecentTransaction();
return (
<button onClick={() => { addRecentTransaction({ hash: '0x...', description: '...', confirmations: 100, }); }} >
Add recent transaction
</button>
);
};