From 7d8009d7b73d9f6735cc3c2152a31db4c5add022 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Tue, 23 Sep 2025 13:02:30 -0700
Subject: [PATCH 1/2] [PE-6754] Add loading state to receive tokens flow

---
 .../common/src/messages/walletMessages.ts     |  2 +
 .../ReceiveTokensDrawer.tsx                   | 55 ++++++++++---------
 .../ReceiveTokensModal.tsx                    | 32 ++++++++---
 3 files changed, 55 insertions(+), 34 deletions(-)

diff --git a/packages/common/src/messages/walletMessages.ts b/packages/common/src/messages/walletMessages.ts
index 97f3550a143..90c7e39e7c4 100644
--- a/packages/common/src/messages/walletMessages.ts
+++ b/packages/common/src/messages/walletMessages.ts
@@ -100,6 +100,8 @@ export const walletMessages = {
   receiveTokensCopy: 'Copy Wallet Address',
   receiveTokensClose: 'Close',
   receiveTokensCopied: 'Copied to Clipboard!',
+  receiveTokensLoadingTitle: 'Hold on',
+  receiveTokensLoadingSubtitle: 'Setting up your wallet',
   becomeMemberTitle: 'Become a member',
   becomeMemberBody: (coinTicker: string) =>
     `Buy ${coinTicker} to gain access to exclusive members-only perks!`,
diff --git a/packages/mobile/src/components/receive-tokens-drawer/ReceiveTokensDrawer.tsx b/packages/mobile/src/components/receive-tokens-drawer/ReceiveTokensDrawer.tsx
index 80255fad71f..9df91d25ff2 100644
--- a/packages/mobile/src/components/receive-tokens-drawer/ReceiveTokensDrawer.tsx
+++ b/packages/mobile/src/components/receive-tokens-drawer/ReceiveTokensDrawer.tsx
@@ -19,7 +19,6 @@ import {
 import { QRCodeComponent, BalanceSection } from 'app/components/core'
 import { AddressTile } from 'app/components/core/AddressTile'
 import Drawer from 'app/components/drawer/Drawer'
-import Skeleton from 'app/components/skeleton'
 import { useToast } from 'app/hooks/useToast'
 
 import { DrawerHeader } from '../drawer/DrawerHeader'
@@ -30,7 +29,7 @@ export const ReceiveTokensDrawer = () => {
   const { isOpen, onClose, data } = useReceiveTokensModal()
   const { toast } = useToast()
   const { mint } = data ?? {}
-  const { userBankAddress } = useUserbank(mint)
+  const { userBankAddress, loading: userBankLoading } = useUserbank(mint)
 
   const handleCopyAddress = useCallback(() => {
     if (userBankAddress) {
@@ -51,6 +50,32 @@ export const ReceiveTokensDrawer = () => {
     )
   }
 
+  if (userBankLoading || !userBankAddress) {
+    return (
+      <Drawer isOpen={isOpen} onClose={onClose}>
+        <Flex
+          direction='column'
+          justifyContent='center'
+          alignItems='center'
+          ph='l'
+          pv='xl'
+          gap='xl'
+          h={160}
+        >
+          <LoadingSpinner style={{ height: 32, width: 32 }} />
+          <Flex column gap='xs' alignItems='center'>
+            <Text variant='heading' size='l'>
+              {walletMessages.receiveTokensLoadingTitle}
+            </Text>
+            <Text variant='title' size='l' strength='weak'>
+              {walletMessages.receiveTokensLoadingSubtitle}
+            </Text>
+          </Flex>
+        </Flex>
+      </Drawer>
+    )
+  }
+
   return (
     <Drawer isOpen={isOpen} onClose={onClose} drawerHeader={renderHeader}>
       <Flex direction='column' gap='xl' ph='xl'>
@@ -64,18 +89,7 @@ export const ReceiveTokensDrawer = () => {
             alignItems='center'
             justifyContent='center'
           >
-            {userBankAddress ? (
-              <QRCodeComponent value={userBankAddress} size={QR_CODE_SIZE} />
-            ) : (
-              <Flex
-                alignItems='center'
-                justifyContent='center'
-                w={QR_CODE_SIZE}
-                h={QR_CODE_SIZE}
-              >
-                <LoadingSpinner />
-              </Flex>
-            )}
+            <QRCodeComponent value={userBankAddress} size={QR_CODE_SIZE} />
           </Flex>
           <Flex gap='xl' justifyContent='center' flex={1}>
             <Text variant='body' size='l'>
@@ -85,11 +99,7 @@ export const ReceiveTokensDrawer = () => {
         </Flex>
 
         {/* Address Tile */}
-        {userBankAddress ? (
-          <AddressTile address={userBankAddress} />
-        ) : (
-          <Skeleton height={58} />
-        )}
+        <AddressTile address={userBankAddress} />
 
         {/* Hint Section */}
         <Hint
@@ -106,12 +116,7 @@ export const ReceiveTokensDrawer = () => {
         </Hint>
 
         {/* Copy Button */}
-        <Button
-          variant='primary'
-          fullWidth
-          onPress={handleCopyAddress}
-          disabled={!userBankAddress}
-        >
+        <Button variant='primary' fullWidth onPress={handleCopyAddress}>
           {walletMessages.receiveTokensCopy}
         </Button>
       </Flex>
diff --git a/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx b/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx
index 11adefb8422..5f5c348aa62 100644
--- a/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx
+++ b/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx
@@ -37,7 +37,7 @@ export const ReceiveTokensModal = () => {
 
   const { data: coin } = useArtistCoin(mint ?? '')
   const { tokenBalanceFormatted } = useFormattedTokenBalance(mint ?? '')
-  const { userBankAddress, wallet } = useUserbank(mint)
+  const { userBankAddress, loading: userBankLoading } = useUserbank(mint)
   const tokenInfo = coin ? transformArtistCoinToTokenInfo(coin) : undefined
   const balance = tokenBalanceFormatted
 
@@ -46,16 +46,32 @@ export const ReceiveTokensModal = () => {
     toast(walletMessages.receiveTokensCopied)
   }, [userBankAddress, toast])
 
-  if (wallet === null) {
+  if (userBankLoading || !userBankAddress) {
     return (
       <ResponsiveModal
         isOpen={isOpen}
         onClose={onClose}
-        size='l'
+        size='m'
         dismissOnClickOutside
       >
-        <Flex justifyContent='center' alignItems='center' p='xl' w='100%'>
-          <LoadingSpinner h='2xl' />
+        <Flex
+          direction='column'
+          justifyContent='center'
+          alignItems='center'
+          p='xl'
+          w='100%'
+          h={400}
+          gap='l'
+        >
+          <LoadingSpinner size='2xl' color='subdued' />
+          <Flex column gap='xs' alignItems='center'>
+            <Text variant='heading' size='l'>
+              {walletMessages.receiveTokensLoadingTitle}
+            </Text>
+            <Text variant='title' size='l' strength='weak'>
+              {walletMessages.receiveTokensLoadingSubtitle}
+            </Text>
+          </Flex>
         </Flex>
       </ResponsiveModal>
     )
@@ -100,9 +116,7 @@ export const ReceiveTokensModal = () => {
             alignItems='center'
             justifyContent='center'
           >
-            {userBankAddress ? (
-              <QRCodeComponent value={userBankAddress} />
-            ) : null}
+            <QRCodeComponent value={userBankAddress} />
           </Flex>
           <Flex column gap='xl' h={DIMENSIONS} justifyContent='center' flex={1}>
             <Text variant='body' size='l'>
@@ -112,7 +126,7 @@ export const ReceiveTokensModal = () => {
           </Flex>
         </Flex>
 
-        {userBankAddress ? <AddressTile address={userBankAddress} /> : null}
+        <AddressTile address={userBankAddress} />
 
         {isMobile ? hint : null}
 

From 87a18e8fa562c126c4dbdd80484021953e81b739 Mon Sep 17 00:00:00 2001
From: Dylan Jeffers <dylan@audius.co>
Date: Wed, 24 Sep 2025 11:11:33 -0700
Subject: [PATCH 2/2] Finalize

---
 .../receive-tokens-drawer/ReceiveTokensDrawer.tsx | 15 ++++++++++-----
 .../receive-tokens-modal/ReceiveTokensModal.tsx   | 13 +++++++------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/packages/mobile/src/components/receive-tokens-drawer/ReceiveTokensDrawer.tsx b/packages/mobile/src/components/receive-tokens-drawer/ReceiveTokensDrawer.tsx
index 9df91d25ff2..e1d8c56f653 100644
--- a/packages/mobile/src/components/receive-tokens-drawer/ReceiveTokensDrawer.tsx
+++ b/packages/mobile/src/components/receive-tokens-drawer/ReceiveTokensDrawer.tsx
@@ -14,7 +14,8 @@ import {
   LoadingSpinner,
   Divider,
   Hint,
-  TextLink
+  TextLink,
+  useTheme
 } from '@audius/harmony-native'
 import { QRCodeComponent, BalanceSection } from 'app/components/core'
 import { AddressTile } from 'app/components/core/AddressTile'
@@ -24,11 +25,13 @@ import { useToast } from 'app/hooks/useToast'
 import { DrawerHeader } from '../drawer/DrawerHeader'
 
 const QR_CODE_SIZE = 160
+const LOADING_HEIGHT = 160
 
 export const ReceiveTokensDrawer = () => {
   const { isOpen, onClose, data } = useReceiveTokensModal()
   const { toast } = useToast()
   const { mint } = data ?? {}
+  const { spacing } = useTheme()
   const { userBankAddress, loading: userBankLoading } = useUserbank(mint)
 
   const handleCopyAddress = useCallback(() => {
@@ -50,19 +53,21 @@ export const ReceiveTokensDrawer = () => {
     )
   }
 
-  if (userBankLoading || !userBankAddress) {
+  if (!userBankLoading || !userBankAddress) {
     return (
       <Drawer isOpen={isOpen} onClose={onClose}>
         <Flex
-          direction='column'
+          column
           justifyContent='center'
           alignItems='center'
           ph='l'
           pv='xl'
           gap='xl'
-          h={160}
+          h={LOADING_HEIGHT}
         >
-          <LoadingSpinner style={{ height: 32, width: 32 }} />
+          <LoadingSpinner
+            style={{ height: spacing['2xl'], width: spacing['2xl'] }}
+          />
           <Flex column gap='xs' alignItems='center'>
             <Text variant='heading' size='l'>
               {walletMessages.receiveTokensLoadingTitle}
diff --git a/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx b/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx
index 5f5c348aa62..833af585824 100644
--- a/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx
+++ b/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx
@@ -28,18 +28,19 @@ import { ToastContext } from 'components/toast/ToastContext'
 import { copyToClipboard } from 'utils/clipboardUtil'
 
 const DIMENSIONS = 160
+const LOADING_HEIGHT = 400
 
 export const ReceiveTokensModal = () => {
-  const { isOpen, onClose, data } = useReceiveTokensModal()
   const { toast } = useContext(ToastContext)
   const { isMobile } = useMedia()
+  const { isOpen, onClose, data } = useReceiveTokensModal()
   const { mint } = data ?? {}
-
-  const { data: coin } = useArtistCoin(mint ?? '')
-  const { tokenBalanceFormatted } = useFormattedTokenBalance(mint ?? '')
+  const { data: coin } = useArtistCoin(mint)
+  const { tokenBalanceFormatted: balance } = useFormattedTokenBalance(
+    mint ?? ''
+  )
   const { userBankAddress, loading: userBankLoading } = useUserbank(mint)
   const tokenInfo = coin ? transformArtistCoinToTokenInfo(coin) : undefined
-  const balance = tokenBalanceFormatted
 
   const handleCopy = useCallback(() => {
     copyToClipboard(userBankAddress ?? '')
@@ -60,7 +61,7 @@ export const ReceiveTokensModal = () => {
           alignItems='center'
           p='xl'
           w='100%'
-          h={400}
+          h={LOADING_HEIGHT}
           gap='l'
         >
           <LoadingSpinner size='2xl' color='subdued' />