From c0213e8deb870e7a27bf03eba41691e8b7904980 Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Thu, 2 Apr 2026 15:00:39 -0700 Subject: [PATCH 1/4] Fix oauth/pay logged out state and no-balance copy Redirect logged-out users to sign up via useRequiresAccount hook (preserving query params for return), and update no-balance/no-coin error messages to link users to audius.co/wallet in a new tab. Co-Authored-By: Claude Opus 4.6 --- .../src/pages/oauth-pay-page/OAuthPayPage.tsx | 32 +++++++++++++++---- .../web/src/pages/oauth-pay-page/messages.ts | 5 +-- 2 files changed, 28 insertions(+), 9 deletions(-) diff --git a/packages/web/src/pages/oauth-pay-page/OAuthPayPage.tsx b/packages/web/src/pages/oauth-pay-page/OAuthPayPage.tsx index 73b895e184a..8f16adf9476 100644 --- a/packages/web/src/pages/oauth-pay-page/OAuthPayPage.tsx +++ b/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(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 = () => {
- {isLoggedIn ? ( + {isLoggedIn && (
{ {messages.userDoesNotHoldMint} + + {messages.walletLink} + + . )} @@ -317,6 +332,15 @@ export const OAuthPayPage = () => { {messages.insufficientBalance} + + {messages.walletLink} + + . )} @@ -348,12 +372,6 @@ export const OAuthPayPage = () => {
- ) : ( -
- - Please sign in to confirm this transaction. - -
)}
diff --git a/packages/web/src/pages/oauth-pay-page/messages.ts b/packages/web/src/pages/oauth-pay-page/messages.ts index f7bf0271212..a2bd2166a3a 100644 --- a/packages/web/src/pages/oauth-pay-page/messages.ts +++ b/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: 'Insufficient 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: 'You do not hold this coin. Add funds on your ', + walletLink: 'wallet', transactionComplete: 'Your transaction is complete!', sent: 'Sent', viewOnSolana: 'View On Solana Block Explorer', From 6b0199827d8fed55fd73365ca67c52ac016c6fa4 Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Thu, 2 Apr 2026 15:15:35 -0700 Subject: [PATCH 2/4] Update no-balance copy and underline wallet link Unify both error cases into a single "Not enough balance, add funds on your wallet." message with an underlined link. Shown proactively before the user clicks confirm (confirm button is already disabled). Co-Authored-By: Claude Opus 4.6 --- .../src/pages/oauth-pay-page/OAuthPayPage.tsx | 26 +++++-------------- .../web/src/pages/oauth-pay-page/messages.ts | 4 +-- 2 files changed, 8 insertions(+), 22 deletions(-) diff --git a/packages/web/src/pages/oauth-pay-page/OAuthPayPage.tsx b/packages/web/src/pages/oauth-pay-page/OAuthPayPage.tsx index 8f16adf9476..ffb83cb384e 100644 --- a/packages/web/src/pages/oauth-pay-page/OAuthPayPage.tsx +++ b/packages/web/src/pages/oauth-pay-page/OAuthPayPage.tsx @@ -310,25 +310,8 @@ export const OAuthPayPage = () => { - {/* Error Messages */} - {!userHoldsMint && ( - - - {messages.userDoesNotHoldMint} - - {messages.walletLink} - - . - - - )} - - {userHoldsMint && !hasSufficientBalance && ( + {/* Insufficient / no balance message — shown before confirm */} + {!hasSufficientBalance && ( {messages.insufficientBalance} @@ -336,7 +319,10 @@ export const OAuthPayPage = () => { href='https://audius.co/wallet' target='_blank' rel='noopener noreferrer' - style={{ color: 'inherit' }} + style={{ + color: 'inherit', + textDecoration: 'underline' + }} > {messages.walletLink} diff --git a/packages/web/src/pages/oauth-pay-page/messages.ts b/packages/web/src/pages/oauth-pay-page/messages.ts index a2bd2166a3a..a4f7689c54f 100644 --- a/packages/web/src/pages/oauth-pay-page/messages.ts +++ b/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. Add funds on your ', + insufficientBalance: 'Not enough balance, add funds on your ', missingParamsError: 'Whoops, this is an invalid link (missing required parameters).', handleAndRecipientError: @@ -32,7 +32,7 @@ export const messages = { transactionFailed: 'Transaction failed', loading: 'Loading...', sendingTransaction: 'Sending transaction...', - userDoesNotHoldMint: 'You do not hold this coin. Add funds on your ', + userDoesNotHoldMint: 'Not enough balance, add funds on your ', walletLink: 'wallet', transactionComplete: 'Your transaction is complete!', sent: 'Sent', From fe481f2457fba03c3b351f318e727ebe95bc4347 Mon Sep 17 00:00:00 2001 From: Raymond Jacobson Date: Thu, 2 Apr 2026 17:23:00 -0700 Subject: [PATCH 3/4] Fix balance comparison across different decimal scales The balance (e.g. 18 decimals for AUDIO) and URL amount (e.g. 8 decimals from tokenInfo) used different decimal scales, causing the raw bigint comparison to always pass. Normalize both to the same scale via FixedDecimal before comparing so the insufficient balance message and disabled confirm button appear correctly. Co-Authored-By: Claude Opus 4.6 --- packages/web/src/pages/oauth-pay-page/hooks.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/packages/web/src/pages/oauth-pay-page/hooks.ts b/packages/web/src/pages/oauth-pay-page/hooks.ts index 160931ee6c6..c60ee74c80f 100644 --- a/packages/web/src/pages/oauth-pay-page/hooks.ts +++ b/packages/web/src/pages/oauth-pay-page/hooks.ts @@ -9,6 +9,7 @@ import { useUserByHandle, useQueryContext } from '@audius/common/api' +import { FixedDecimal } from '@audius/fixed-decimal' import { useUserbank } from '@audius/common/hooks' import { SolanaWalletAddress } from '@audius/common/models' import { isValidSolAddress } from '@audius/common/store' @@ -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(() => { From ce7d1a9c195e518f6f2ae6355f83453385a0a0e4 Mon Sep 17 00:00:00 2001 From: Ray Jacobson Date: Thu, 2 Apr 2026 17:33:33 -0700 Subject: [PATCH 4/4] Fix lint --- packages/web/src/pages/oauth-pay-page/hooks.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/web/src/pages/oauth-pay-page/hooks.ts b/packages/web/src/pages/oauth-pay-page/hooks.ts index c60ee74c80f..c236e44e731 100644 --- a/packages/web/src/pages/oauth-pay-page/hooks.ts +++ b/packages/web/src/pages/oauth-pay-page/hooks.ts @@ -9,10 +9,10 @@ import { useUserByHandle, useQueryContext } from '@audius/common/api' -import { FixedDecimal } from '@audius/fixed-decimal' 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'