feat: realtime balance fetcher for recent transactions

.changeset/nasty-months-provide.md

@@ -0,0 +1,44 @@
+---
+"@rainbow-me/rainbowkit": patch
+"example": patch
+---
+
+Added `useRefetchBalance` hook to support realtime balance in rainbowkit. The returned hook function should be called upon a successful transaction.
+
+Example usage:
+
+```
+ import {
+ usePrepareSendTransaction,
+ useSendTransaction,
+ useWaitForTransaction,
+ } from "wagmi";
+ import { useRefetchBalance, ConnectButton } from '@rainbow-me/rainbowkit';
+
+ const YourApp = () => {
+ const refetchBalance = useRefetchBalance();
+
+ const { config: sendTransactionConfig } = usePrepareSendTransaction({
+ to: "<to_address>",
+ value: "<value>",
+ });
+
+ const { data: transactionData, sendTransaction } = useSendTransaction(
+ sendTransactionConfig
+ );
+
+ useWaitForTransaction({
+ hash: transactionData?.hash,
+ onSuccess: refetchBalance,
+ });
+
+ return (
+ <div>
+ <ConnectButton />
+ <button disabled={!sendTransaction} onClick={() => sendTransaction?.()}>
+ Send Transaction
+ </button>
+ </div>
+ );
+ };
+```

packages/example/pages/index.tsx

@@ -6,6 +6,7 @@ import {
  useAddRecentTransaction,
  useChainModal,
  useConnectModal,
+ useRefetchBalance,
 } from '@rainbow-me/rainbowkit';
 import { GetServerSideProps } from 'next';
 import { getServerSession } from 'next-auth';
@@ -18,6 +19,7 @@ import {
  useSendTransaction,
  useSignMessage,
  useSignTypedData,
+ useWaitForTransaction,
 } from 'wagmi';
 import { AppContextProps } from '../lib/AppContextProps';
 import { getAuthOptions } from './api/auth/[...nextauth]';
@@ -41,6 +43,7 @@ const Example = ({ authEnabled }: AppContextProps) => {
  const { openConnectModal, connectModalOpen } = useConnectModal();
  const { address, isConnected: isWagmiConnected } = useAccount();
  const { status } = useSession();
+ const refetchBalance = useRefetchBalance();
 
  const defaultProps = ConnectButton.__defaultProps;
 
@@ -126,6 +129,13 @@ const Example = ({ authEnabled }: AppContextProps) => {
  const connected =
  isWagmiConnected && (!authEnabled || status === 'authenticated');
 
+ // Whenever a transaction gets completed we want to refetch
+ // balances in <ConnectButton /> and <AccountModal /> components
+ useWaitForTransaction({
+ hash: transactionData?.hash,
+ onSuccess: refetchBalance,
+ });
+
  return (
  <div
  style={{

packages/rainbowkit/src/components/ConnectButton/ConnectButtonRenderer.tsx

@@ -1,9 +1,10 @@
 import React, { ReactNode, useContext } from 'react';
-import { useAccount, useBalance, useNetwork } from 'wagmi';
+import { useAccount, useNetwork } from 'wagmi';
 import { normalizeResponsiveValue } from '../../css/sprinkles.css';
 import { useIsMounted } from '../../hooks/useIsMounted';
 import { useMainnetEnsAvatar } from '../../hooks/useMainnetEnsAvatar';
 import { useMainnetEnsName } from '../../hooks/useMainnetEnsName';
+import { useRealtimeBalance } from '../../hooks/useRealtimeBalance';
 import { useRecentTransactions } from '../../transactions/useRecentTransactions';
 import { isMobile } from '../../utils/isMobile';
 import { useAsyncImage } from '../AsyncImage/useAsyncImage';
@@ -90,7 +91,7 @@ export function ConnectButtonRenderer({
  isMobile() ? 'smallScreen' : 'largeScreen'
  ]
  : false;
- const { data: balanceData } = useBalance({
+ const balanceData = useRealtimeBalance({
  address: shouldShowBalance ? address : undefined,
  });
  const displayBalance = balanceData

packages/rainbowkit/src/components/ProfileDetails/ProfileDetails.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { useAccount, useBalance, useEnsAvatar, useEnsName } from 'wagmi';
+import { useAccount, useEnsAvatar, useEnsName } from 'wagmi';
+import { useRealtimeBalance } from '../../hooks/useRealtimeBalance';
 import { isMobile } from '../../utils/isMobile';
 import { Avatar } from '../Avatar/Avatar';
 import { Box } from '../Box/Box';
@@ -33,7 +34,7 @@ export function ProfileDetails({
 }: ProfileDetailsProps) {
  const showRecentTransactions = useContext(ShowRecentTransactionsContext);
 
- const { data: balanceData } = useBalance({
+ const balanceData = useRealtimeBalance({
  address,
  });
 

packages/rainbowkit/src/components/RainbowKitProvider/RainbowKitProvider.tsx

@@ -19,6 +19,7 @@ import {
  RainbowKitChain,
  RainbowKitChainProvider,
 } from './RainbowKitChainContext';
+import { RealtimeBalanceStatusProvider } from './RealtimeBalanceStatusContext';
 import { ShowBalanceProvider } from './ShowBalanceContext';
 import { ShowRecentTransactionsContext } from './ShowRecentTransactionsContext';
 import { WalletButtonProvider } from './WalletButtonContext';
@@ -107,60 +108,62 @@ export function RainbowKitProvider({
 
  return (
  <RainbowKitChainProvider chains={chains} initialChain={initialChain}>
- <WalletButtonProvider>
- <I18nProvider locale={locale}>
- <CoolModeContext.Provider value={coolMode}>
- <ModalSizeProvider modalSize={modalSize}>
- <ShowRecentTransactionsContext.Provider
- value={showRecentTransactions}
- >
- <TransactionStoreProvider>
- <AvatarContext.Provider value={avatarContext}>
- <AppContext.Provider value={appContext}>
- <ThemeIdContext.Provider value={id}>
- <ShowBalanceProvider>
- <ModalProvider>
- {theme ? (
- <div {...createThemeRootProps(id)}>
- <style
- // biome-ignore lint/security/noDangerouslySetInnerHtml: TODO
- dangerouslySetInnerHTML={{
- // Selectors are sanitized to only contain alphanumeric
- // and underscore characters. Theme values generated by
- // cssStringFromTheme are sanitized, removing
- // characters that terminate values / HTML tags.
- __html: [
- `${selector}{${cssStringFromTheme(
- 'lightMode' in theme
- ? theme.lightMode
- : theme,
- )}}`,
-
- 'darkMode' in theme
- ? `@media(prefers-color-scheme:dark){${selector}{${cssStringFromTheme(
- theme.darkMode,
- { extends: theme.lightMode },
- )}}}`
- : null,
- ].join(''),
- }}
- />
- {children}
- </div>
- ) : (
- children
- )}
- </ModalProvider>
- </ShowBalanceProvider>
- </ThemeIdContext.Provider>
- </AppContext.Provider>
- </AvatarContext.Provider>
- </TransactionStoreProvider>
- </ShowRecentTransactionsContext.Provider>
- </ModalSizeProvider>
- </CoolModeContext.Provider>
- </I18nProvider>
- </WalletButtonProvider>
+ <RealtimeBalanceStatusProvider>
+ <WalletButtonProvider>
+ <I18nProvider locale={locale}>
+ <CoolModeContext.Provider value={coolMode}>
+ <ModalSizeProvider modalSize={modalSize}>
+ <ShowRecentTransactionsContext.Provider
+ value={showRecentTransactions}
+ >
+ <TransactionStoreProvider>
+ <AvatarContext.Provider value={avatarContext}>
+ <AppContext.Provider value={appContext}>
+ <ThemeIdContext.Provider value={id}>
+ <ShowBalanceProvider>
+ <ModalProvider>
+ {theme ? (
+ <div {...createThemeRootProps(id)}>
+ <style
+ // biome-ignore lint/security/noDangerouslySetInnerHtml: TODO
+ dangerouslySetInnerHTML={{
+ // Selectors are sanitized to only contain alphanumeric
+ // and underscore characters. Theme values generated by
+ // cssStringFromTheme are sanitized, removing
+ // characters that terminate values / HTML tags.
+ __html: [
+ `${selector}{${cssStringFromTheme(
+ 'lightMode' in theme
+ ? theme.lightMode
+ : theme,
+ )}}`,
+
+ 'darkMode' in theme
+ ? `@media(prefers-color-scheme:dark){${selector}{${cssStringFromTheme(
+ theme.darkMode,
+ { extends: theme.lightMode },
+ )}}}`
+ : null,
+ ].join(''),
+ }}
+ />
+ {children}
+ </div>
+ ) : (
+ children
+ )}
+ </ModalProvider>
+ </ShowBalanceProvider>
+ </ThemeIdContext.Provider>
+ </AppContext.Provider>
+ </AvatarContext.Provider>
+ </TransactionStoreProvider>
+ </ShowRecentTransactionsContext.Provider>
+ </ModalSizeProvider>
+ </CoolModeContext.Provider>
+ </I18nProvider>
+ </WalletButtonProvider>
+ </RealtimeBalanceStatusProvider>
  </RainbowKitChainProvider>
  );
 }

packages/rainbowkit/src/components/RainbowKitProvider/RealtimeBalanceStatusContext.tsx

@@ -0,0 +1,44 @@
+import React, {
+ ReactNode,
+ createContext,
+ useContext,
+ useEffect,
+ useState,
+} from 'react';
+
+type BalanceStatus = 'show' | 'refetch';
+
+const RealtimeBalanceStatusContext = createContext<{
+ status: BalanceStatus;
+ setStatus: (status: BalanceStatus) => void;
+}>({
+ status: 'show',
+ setStatus: () => {},
+});
+
+interface RealtimeBalanceStatusProviderProps {
+ children: ReactNode;
+}
+
+export const RealtimeBalanceStatusProvider = ({
+ children,
+}: RealtimeBalanceStatusProviderProps) => {
+ const [status, setStatus] = useState<BalanceStatus>('show');
+
+ useEffect(() => {
+ if (status === 'refetch') {
+ // Whenever status is 'refetch' immediately set it to 'show'.
+ // This will force wagmi's 'useBalance' hook to refetch the balance
+ setStatus('show');
+ }
+ }, [status]);
+
+ return (
+ <RealtimeBalanceStatusContext.Provider value={{ status, setStatus }}>
+ {children}
+ </RealtimeBalanceStatusContext.Provider>
+ );
+};
+
+export const useRealtimeBalanceStatus = () =>
+ useContext(RealtimeBalanceStatusContext);

packages/rainbowkit/src/hooks/useRealtimeBalance.ts

@@ -0,0 +1,18 @@
+import { useBalance } from 'wagmi';
+import { useRealtimeBalanceStatus } from '../components/RainbowKitProvider/RealtimeBalanceStatusContext';
+
+export const useRealtimeBalance = (
+ parameters: Parameters<typeof useBalance>[0],
+): ReturnType<typeof useBalance>['data'] => {
+ const { status } = useRealtimeBalanceStatus();
+
+ const { data: balanceData } = useBalance({
+ ...parameters,
+ address:
+ status === 'show' && parameters?.address ? parameters.address : undefined,
+ // wagmi caches balance data which means we would have to set it to 0
+ cacheTime: 0,
+ });
+
+ return balanceData;
+};

packages/rainbowkit/src/hooks/useRefetchBalance.ts

@@ -0,0 +1,9 @@
+import { useRealtimeBalanceStatus } from '../components/RainbowKitProvider/RealtimeBalanceStatusContext';
+
+export const useRefetchBalance = () => {
+ const { setStatus } = useRealtimeBalanceStatus();
+
+ return () => {
+ setStatus('refetch');
+ };
+};

packages/rainbowkit/src/index.ts

@@ -29,4 +29,5 @@ export { darkTheme } from './themes/darkTheme';
 export { midnightTheme } from './themes/midnightTheme';
 export { cssStringFromTheme } from './css/cssStringFromTheme';
 export { cssObjectFromTheme } from './css/cssObjectFromTheme';
+export { useRefetchBalance } from './hooks/useRefetchBalance';
 export { __private__ } from './__private__';