[PE-7028] Poll on receive (#13103)

### Description

Polls user balance when receive modal/drawer is open

Author: dylanjeffers

packages/common/src/api/tan-query/types.ts

@@ -28,6 +28,8 @@ export type QueryOptions<T = any> = Pick<
   | 'placeholderData'
   | 'refetchOnMount'
   | 'throwOnError'
+  | 'refetchInterval'
+  | 'refetchOnWindowFocus'
 >
 
 export type SelectableQueryOptions<TData, TResult = TData> = Omit<

packages/common/src/api/tan-query/wallets/useTokenBalance.ts

@@ -57,7 +57,12 @@ export const useTokenBalance = ({
       includeConnectedWallets: includeExternalWallets,
       includeStaked
     },
-    { enabled: isAudio }
+    {
+      enabled: isAudio,
+      refetchInterval: isPolling ? pollingInterval : undefined,
+      refetchOnWindowFocus: !isPolling,
+      ...queryOptions
+    }
   )
 
   // Artist coins query
@@ -95,6 +100,8 @@ export const useTokenBalance = ({
           decimals
         }
       },
+      refetchInterval: isPolling ? pollingInterval : undefined,
+      refetchOnWindowFocus: !isPolling,
       ...queryOptions,
       enabled: !isUsdc && queryOptions.enabled !== false
     }

packages/common/src/hooks/useFormattedTokenBalance.ts

@@ -26,14 +26,22 @@ type UseFormattedTokenBalanceReturn = {
  * Hook to get formatted balance and price information for any supported mint
  * @param mint - The mint symbol to get balance and price for
  * @param locale - Locale for number formatting (defaults to 'en-US')
+ * @param isPolling - Whether to enable polling for balance updates
+ * @param pollingInterval - Interval for polling in milliseconds (defaults to 3000ms)
  * @returns Object with formatted balance, price, and loading states
  */
 export const useFormattedTokenBalance = (
   mint: string,
-  locale: string = 'en-US'
+  locale: string = 'en-US',
+  isPolling?: boolean,
+  pollingInterval?: number
 ): UseFormattedTokenBalanceReturn => {
   const { data: tokenBalance, isPending: isTokenBalanceLoading } =
-    useTokenBalance({ mint })
+    useTokenBalance({
+      mint,
+      isPolling,
+      pollingInterval
+    })
 
   const { data, isPending: isTokenPriceLoading } = useArtistCoin(mint)
 

packages/mobile/src/components/core/BalanceSection.tsx

@@ -11,10 +11,24 @@ import { TokenIcon } from './TokenIcon'
 export type BalanceSectionProps = {
   /** Mint address for fetching balance */
   mint?: string
+  /** Whether to enable polling for balance updates */
+
+  isPolling?: boolean
+  /** Interval for polling in milliseconds */
+  pollingInterval?: number
 }
 
-export const BalanceSection = ({ mint }: BalanceSectionProps) => {
-  const { tokenBalanceFormatted } = useFormattedTokenBalance(mint ?? '')
+export const BalanceSection = ({
+  mint,
+  isPolling,
+  pollingInterval
+}: BalanceSectionProps) => {
+  const { tokenBalanceFormatted } = useFormattedTokenBalance(
+    mint ?? '',
+    'en-US',
+    isPolling,
+    pollingInterval
+  )
   const { data: coin } = useArtistCoin(mint)
   const tokenInfo = coin ? transformArtistCoinToTokenInfo(coin) : undefined
 

packages/mobile/src/components/receive-tokens-drawer/ReceiveTokensDrawer.tsx

@@ -84,7 +84,7 @@ export const ReceiveTokensDrawer = () => {
   return (
     <Drawer isOpen={isOpen} onClose={onClose} drawerHeader={renderHeader}>
       <Flex direction='column' gap='xl' ph='xl'>
-        <BalanceSection mint={mint} />
+        <BalanceSection mint={mint} isPolling={isOpen} pollingInterval={3000} />
 
         {/* QR Code and Explainer Section */}
         <Flex row gap='m' alignItems='center'>

packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx

@@ -37,7 +37,10 @@ export const ReceiveTokensModal = () => {
   const { mint } = data ?? {}
   const { data: coin } = useArtistCoin(mint)
   const { tokenBalanceFormatted: balance } = useFormattedTokenBalance(
-    mint ?? ''
+    mint ?? '',
+    'en-US',
+    isOpen,
+    3000 // Poll every 3 seconds when modal is open
   )
   const { userBankAddress, loading: userBankLoading } = useUserbank(mint)
   const tokenInfo = coin ? transformArtistCoinToTokenInfo(coin) : undefined