最近のトランザクション
最近のトランザクション
最近の取引を表示する
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に登録されると、そのステータスは完了時に更新されます。
デフォルトでは、トランザクションが採掘されたブロックの上に1つのブロックが採掘されると、トランザクションは完了したと見なされますが、カスタム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>
);
};