Fix oauth/pay logged out state and no-balance copy

packages/web/src/pages/oauth-pay-page/OAuthPayPage.tsx

@@ -14,9 +14,11 @@ import {
   PlainButton
 } from '@audius/harmony'
 import cn from 'classnames'
+import { useLocation } from 'react-router'
 
 import LoadingSpinner from 'components/loading-spinner/LoadingSpinner'
 import { ProfileInfo } from 'components/profile-info/ProfileInfo'
+import { useRequiresAccount } from 'hooks/useRequiresAccount'
 
 import { ContentWrapper } from '../oauth-login-page/components/ContentWrapper'
 
@@ -26,8 +28,12 @@ import { messages } from './messages'
 
 export const OAuthPayPage = () => {
   const { data: account } = useCurrentAccountUser()
+  const location = useLocation()
   const [error, setError] = useState<string | null>(null)
 
+  // Redirect logged-out users to sign up, returning here after account creation
+  useRequiresAccount(`${location.pathname}${location.search}`)
+
   const {
     recipient,
     handleUser,
@@ -212,7 +218,7 @@ export const OAuthPayPage = () => {
         </Flex>
 
         <div className={styles.formArea}>
-          {isLoggedIn ? (
+          {isLoggedIn && (
             <div className={styles.userInfoContainer}>
               <Text
                 variant='body'
@@ -304,19 +310,23 @@ export const OAuthPayPage = () => {
                 </Flex>
               </Flex>
 
-              {/* Error Messages */}
-              {!userHoldsMint && (
-                <Hint css={{ marginTop: 'var(--harmony-unit-4)' }}>
-                  <Text variant='body' size='s' color='danger'>
-                    {messages.userDoesNotHoldMint}
-                  </Text>
-                </Hint>
-              )}
-
-              {userHoldsMint && !hasSufficientBalance && (
+              {/* Insufficient / no balance message — shown before confirm */}
+              {!hasSufficientBalance && (
                 <Hint css={{ marginTop: 'var(--harmony-unit-4)' }}>
                   <Text variant='body' size='s' color='danger'>
                     {messages.insufficientBalance}
+                    <a
+                      href='https://audius.co/wallet'
+                      target='_blank'
+                      rel='noopener noreferrer'
+                      style={{
+                        color: 'inherit',
+                        textDecoration: 'underline'
+                      }}
+                    >
+                      {messages.walletLink}
+                    </a>
+                    .
                   </Text>
                 </Hint>
               )}
@@ -348,12 +358,6 @@ export const OAuthPayPage = () => {
                 </Button>
               </Flex>
             </div>
-          ) : (
-            <div className={styles.userInfoContainer}>
-              <Text variant='body' size='m' color='subdued'>
-                Please sign in to confirm this transaction.
-              </Text>
-            </div>
           )}
         </div>
       </div>

packages/web/src/pages/oauth-pay-page/hooks.ts

@@ -12,6 +12,7 @@ import {
 import { useUserbank } from '@audius/common/hooks'
 import { SolanaWalletAddress } from '@audius/common/models'
 import { isValidSolAddress } from '@audius/common/store'
+import { FixedDecimal } from '@audius/fixed-decimal'
 import { useQuery } from '@tanstack/react-query'
 import * as queryString from 'query-string'
 import { useLocation } from 'react-router'
@@ -236,11 +237,16 @@ export const useOAuthPaySetup = ({
     }
   }, [amount])
 
-  // Check if user has sufficient balance
+  // Check if user has sufficient balance.
+  // The balance FixedDecimal may use different decimals (e.g. 18 for AUDIO)
+  // than the URL amount (which uses tokenInfo.decimals, e.g. 8). Convert
+  // the amount to the balance's decimal scale before comparing.
   const hasSufficientBalance = useMemo(() => {
-    if (!tokenBalance || !amountBigInt) return false
-    return tokenBalance.balance.value >= amountBigInt
-  }, [tokenBalance, amountBigInt])
+    if (!tokenBalance || !amountBigInt || !tokenInfo) return false
+    const amountFD = new FixedDecimal(amountBigInt, tokenInfo.decimals)
+    const normalizedAmount = new FixedDecimal(amountFD, tokenBalance.decimals)
+    return tokenBalance.balance.value >= normalizedAmount.value
+  }, [tokenBalance, amountBigInt, tokenInfo])
 
   // Check if user holds the mint at all
   const userHoldsMint = useMemo(() => {

packages/web/src/pages/oauth-pay-page/messages.ts

@@ -8,7 +8,7 @@ export const messages = {
   confirm: 'Confirm',
   cancel: 'Cancel',
   invalidRecipient: 'Invalid recipient',
-  insufficientBalance: 'Insufficient balance',
+  insufficientBalance: 'Not enough balance, add funds on your ',
   missingParamsError:
     'Whoops, this is an invalid link (missing required parameters).',
   handleAndRecipientError:
@@ -32,7 +32,8 @@ export const messages = {
   transactionFailed: 'Transaction failed',
   loading: 'Loading...',
   sendingTransaction: 'Sending transaction...',
-  userDoesNotHoldMint: 'You do not hold this coin.',
+  userDoesNotHoldMint: 'Not enough balance, add funds on your ',
+  walletLink: 'wallet',
   transactionComplete: 'Your transaction is complete!',
   sent: 'Sent',
   viewOnSolana: 'View On Solana Block Explorer',