[PE-6754] Add loading state to receive tokens flow

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!`,

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

@@ -14,23 +14,25 @@ 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'
 import Drawer from 'app/components/drawer/Drawer'
-import Skeleton from 'app/components/skeleton'
 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 { userBankAddress } = useUserbank(mint)
+  const { spacing } = useTheme()
+  const { userBankAddress, loading: userBankLoading } = useUserbank(mint)
 
   const handleCopyAddress = useCallback(() => {
     if (userBankAddress) {
@@ -51,6 +53,34 @@ export const ReceiveTokensDrawer = () => {
     )
   }
 
+  if (!userBankLoading || !userBankAddress) {
+    return (
+      <Drawer isOpen={isOpen} onClose={onClose}>
+        <Flex
+          column
+          justifyContent='center'
+          alignItems='center'
+          ph='l'
+          pv='xl'
+          gap='xl'
+          h={LOADING_HEIGHT}
+        >
+          <LoadingSpinner
+            style={{ height: spacing['2xl'], width: spacing['2xl'] }}
+          />
+          <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 +94,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 +104,7 @@ export const ReceiveTokensDrawer = () => {
         </Flex>
 
         {/* Address Tile */}
-        {userBankAddress ? (
-          <AddressTile address={userBankAddress} />
-        ) : (
-          <Skeleton height={58} />
-        )}
+        <AddressTile address={userBankAddress} />
 
         {/* Hint Section */}
         <Hint
@@ -106,12 +121,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>

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

@@ -28,34 +28,51 @@ 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 { userBankAddress, wallet } = useUserbank(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 ?? '')
     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={LOADING_HEIGHT}
+          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 +117,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 +127,7 @@ export const ReceiveTokensModal = () => {
           </Flex>
         </Flex>
 
-        {userBankAddress ? <AddressTile address={userBankAddress} /> : null}
+        <AddressTile address={userBankAddress} />
 
         {isMobile ? hint : null}