Poll for Payout Wallet Owner

packages/web/src/components/payout-wallet-modal/PayoutWalletModal.tsx

@@ -195,10 +195,8 @@ export const PayoutWalletModal = () => {
 
         const usdcMint = new PublicKey(env.USDC_MINT_ADDRESS)
         const addressPubkey = new PublicKey(address)
-        const info =
-          await sdk.services.claimableTokensClient.connection.getAccountInfo(
-            addressPubkey
-          )
+        const connection = sdk.services.claimableTokensClient.connection
+        const info = await connection.getAccountInfo(addressPubkey)
 
         let usdcAta: string | null = null
 
@@ -218,7 +216,7 @@ export const PayoutWalletModal = () => {
               usdcAta = address
             }
           } catch (e) {
-            console.debug(e)
+            console.debug(`Account ${address} is not a token account`, e)
             // fall through
           }
         } else {
@@ -228,19 +226,18 @@ export const PayoutWalletModal = () => {
             addressPubkey
           )
           try {
-            const account = await getAccount(
-              sdk.services.claimableTokensClient.connection,
-              ataPubkey
-            )
+            const account = await getAccount(connection, ataPubkey)
             if (account.mint.equals(usdcMint)) {
               usdcAta = ataPubkey.toBase58()
             }
           } catch (e) {
             // No USDC mint ATA. Make one if possible.
             if (e instanceof TokenAccountNotFoundError) {
               const payer = await sdk.services.solanaRelay.getFeePayer()
+              const res = await connection.getLatestBlockhash()
               const transaction =
                 await sdk.services.claimableTokensClient.buildTransaction({
+                  recentBlockhash: res.blockhash,
                   instructions: [
                     createAssociatedTokenAccountIdempotentInstruction(
                       payer,
@@ -254,13 +251,31 @@ export const PayoutWalletModal = () => {
                   ]
                 })
 
-              await sdk.services.solanaRelay.relay({
-                transaction,
-                confirmationOptions: {
-                  commitment: 'confirmed'
-                }
+              const { signature } = await sdk.services.solanaRelay.relay({
+                transaction
               })
               usdcAta = ataPubkey.toBase58()
+              await connection.confirmTransaction({
+                signature,
+                blockhash: res.blockhash,
+                lastValidBlockHeight: res.lastValidBlockHeight
+              })
+              let owner = null
+              let retryCount = 0
+              // Obscene max retry count is intentional
+              while (owner === null && retryCount < 10000) {
+                try {
+                  owner = await getAssociatedTokenAccountOwner(
+                    usdcAta as SolanaWalletAddress
+                  )
+                } catch (e) {
+                  console.debug(
+                    'Retry getAssociatedTokenAccountOwner...',
+                    retryCount++
+                  )
+                  await new Promise((resolve) => setTimeout(resolve, 500))
+                }
+              }
             }
           }
         }
@@ -295,7 +310,7 @@ export const PayoutWalletModal = () => {
       const owner = await getAssociatedTokenAccountOwner(
         user.spl_usdc_payout_wallet
       )
-      return owner.toString()
+      return owner?.toString()
     }
     return null
   }, [user])

packages/web/src/pages/pay-and-earn-page/components/PayoutWalletCard.tsx

@@ -1,11 +1,12 @@
-import { useCallback } from 'react'
+import { useCallback, useContext } from 'react'
 
 import { accountSelectors } from '@audius/common/store'
 import { shortenSPLAddress } from '@audius/common/utils'
 import {
   Flex,
   IconLogoCircle,
   IconLogoCircleUSDC,
+  LoadingSpinner,
   Paper,
   Text,
   TextLink
@@ -14,6 +15,7 @@ import { useSelector } from 'react-redux'
 import { useAsync } from 'react-use'
 
 import { useModalState } from 'common/hooks/useModalState'
+import { ToastContext } from 'components/toast/ToastContext'
 import { getAssociatedTokenAccountOwner } from 'services/solana/solana'
 
 const { getAccountUser } = accountSelectors
@@ -28,20 +30,26 @@ const messages = {
 export const PayoutWalletCard = () => {
   const user = useSelector(getAccountUser)
   const [, setIsOpen] = useModalState('PayoutWallet')
+  const { toast } = useContext(ToastContext)
 
   const handleChangeWallet = useCallback(() => {
     setIsOpen(true)
   }, [setIsOpen])
 
   const { value: payoutWallet } = useAsync(async () => {
     if (user?.spl_usdc_payout_wallet) {
-      const owner = await getAssociatedTokenAccountOwner(
-        user.spl_usdc_payout_wallet
-      )
-      return owner.toBase58()
+      try {
+        const owner = await getAssociatedTokenAccountOwner(
+          user.spl_usdc_payout_wallet
+        )
+        return owner.toBase58()
+      } catch (e) {
+        toast('Failed to load USDC payout wallet')
+        return null
+      }
     }
     return null
-  }, [user])
+  }, [user?.spl_usdc_payout_wallet])
 
   return (
     <Paper direction='column' shadow='far' borderRadius='l' pv='l' ph='xl'>
@@ -71,11 +79,17 @@ export const PayoutWalletCard = () => {
               <IconLogoCircle size='m' />
             )}
             <Text variant='body' size='m' strength='strong'>
-              {user?.spl_usdc_payout_wallet
-                ? payoutWallet
-                  ? shortenSPLAddress(payoutWallet)
-                  : ''
-                : messages.audiusWallet}
+              {user?.spl_usdc_payout_wallet ? (
+                payoutWallet ? (
+                  shortenSPLAddress(payoutWallet)
+                ) : (
+                  <Flex w='xl'>
+                    <LoadingSpinner />
+                  </Flex>
+                )
+              ) : (
+                messages.audiusWallet
+              )}
             </Text>
           </Flex>
           <TextLink

packages/web/src/services/solana/solana.ts

@@ -152,17 +152,8 @@ export const getAssociatedTokenAccountOwner = async (
   accountAddress: SolanaWalletAddress
 ) => {
   const connection = await getSolanaConnection()
-  try {
-    const { owner } = await getAccount(
-      connection,
-      new PublicKey(accountAddress)
-    )
-    return owner
-  } catch (e) {
-    // Not a token account, so return the provided address
-    console.error(e)
-    return new PublicKey(accountAddress)
-  }
+  const { owner } = await getAccount(connection, new PublicKey(accountAddress))
+  return owner
 }
 
 /**