diff --git a/packages/web/src/pages/oauth-pay-page/OAuthPayPage.tsx b/packages/web/src/pages/oauth-pay-page/OAuthPayPage.tsx index 73b895e184a..ffb83cb384e 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 && (
{ - {/* Error Messages */} - {!userHoldsMint && ( - - - {messages.userDoesNotHoldMint} - - - )} - - {userHoldsMint && !hasSufficientBalance && ( + {/* Insufficient / no balance message — shown before confirm */} + {!hasSufficientBalance && ( {messages.insufficientBalance} + + {messages.walletLink} + + . )} @@ -348,12 +358,6 @@ export const OAuthPayPage = () => {
- ) : ( -
- - Please sign in to confirm this transaction. - -
)}
diff --git a/packages/web/src/pages/oauth-pay-page/hooks.ts b/packages/web/src/pages/oauth-pay-page/hooks.ts index 160931ee6c6..c236e44e731 100644 --- a/packages/web/src/pages/oauth-pay-page/hooks.ts +++ b/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(() => { diff --git a/packages/web/src/pages/oauth-pay-page/messages.ts b/packages/web/src/pages/oauth-pay-page/messages.ts index f7bf0271212..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', + 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',