feat: realtime balance fetcher for recent transactions

[magiziz]

Changes

• Added useRefetchBalance hook to TransactionStoreContext to support real-time balance support

Screen recordings / screenshots

realtime_transaction_with_store.mov

What to test

1. Replace address and value here and try sending the transaction to yourself
2. After that's done make sure you go to our example dApp here and under "Add recent transactions" make sure you're adding the transaction hash and description
3. Wait a few seconds and see your balance being refreshed for connect button and account modal

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
rainbowkit-example	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 7, 2024 7:00am
rainbowkit-site	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 7, 2024 7:00am

[DanielSinclair]

Looks like we also need to add docs. Want to create a section below "Advanced" called "Hooks", bump the Modal Hooks doc there as "Modals", and create a new doc for "Balances"?

[DanielSinclair]

Noticed some merge conflicts too with v2

[DanielSinclair]

I think we could simplify this:

• If the dev uses useBalance within their dApp (or calls the refetch fn from the return type), then it should also re-render the balance inside the hook in the RainbowKit usage. We should test to confirm this (if you haven't already). That would reduce the need for us to have a separate function for them to call, as it may already refetch based on their dapp usage (or they could force it that way)
• We also already have the useAddRecentTransaction hook and the TransactionStoreProvider which allows a dev to tell RainbowKit about a transaction to follow. This API is due for a refactor, but we generally want devs to funnel their transactions into that store so that RainbowKit can react to them. That reactive functionality should suffice for these refetch balance needs. We already poll to follow the status of a transaction there, so we could simply call useBalance again internally upon each tx confirmation (that way RainbowKit always has the latest balance).
• As part of that eventual transaction store refactor, we could also maybe detect when a transaction is sent from Wagmi and automatically include it in the store and follow it (automatically reacting with balance updates for txs sent by that dapp). There are edge cases though, like the user submitting the tx elsewhere with an i.e. gasless signature.

[magiziz]

We could pass this logic in here which would be less work, but that would cause a lot of re-renders + make unnecessary RPC calls since it'll happen pretty often due to how our transaction store provider works.

We'll call refetch whenever is necessary to update our balance (e.g when a tx has successfully passed).

[DanielSinclair]

Everything else looks good; just need that 1 balance fetch optimization I think

[DanielSinclair]

@magiziz Should we move this logic to useProfile so that we're caching it and reduce the number of balance fetches? Currently I believe this hook would be called even if showBalance is disabled, and would cause duplicate balance fetch calls when rendering Profile -> Transaction UI