Fix buy-sell modal error handling and UI improvements#12728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
faridsalau merged 2 commits into from
Aug 14, 2025
Merged

Fix buy-sell modal error handling and UI improvements #12728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cd793c6
Fix buy-sell modal error handling and UI improvements
faridsalau Aug 13, 2025
38857b8
Remove comment
faridsalau Aug 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 33 additions & 5 deletions packages/common/src/store/ui/buy-sell/swapFormSchema.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
import { FixedDecimal } from '@audius/fixed-decimal'
import { z } from 'zod'

import { buySellMessages as messages } from '../../../messages'
Expand All@@ -9,7 +10,8 @@ export const createSwapFormSchema = (
min: number = 0,
max: number = Number.MAX_SAFE_INTEGER,
balance: number | undefined = undefined,
tokenSymbol: string = ''
tokenSymbol: string = '',
decimals: number = 8
) =>
z.object({
inputAmount: z
Expand All@@ -18,7 +20,13 @@ export const createSwapFormSchema = (
(val) => {
// Allow empty string during typing, but require it for final validation
if (val === '') return false
return !isNaN(parseFloat(val))
try {
// eslint-disable-next-line no-new
new FixedDecimal(val, decimals)

@dharit-tandharit-tanAug 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: instead of eslint disable, would _ = new FixedDecimal() work?

return true
} catch {
return false
}
},
{
message: messages.emptyAmount
Expand All@@ -27,7 +35,13 @@ export const createSwapFormSchema = (
.refine(
(val) => {
if (val === '') return false
return parseFloat(val) >= min
try {
const amount = new FixedDecimal(val, decimals)
const minAmount = new FixedDecimal(min, decimals)
return amount.value >= minAmount.value
} catch {
return false
}
},
{
message: messages.minAmount(min, tokenSymbol)
Expand All@@ -36,7 +50,13 @@ export const createSwapFormSchema = (
.refine(
(val) => {
if (val === '') return false
return parseFloat(val) <= max
try {
const amount = new FixedDecimal(val, decimals)
const maxAmount = new FixedDecimal(max, decimals)
return amount.value <= maxAmount.value
} catch {
return false
}
},
{
message: messages.maxAmount(max, tokenSymbol)
Expand All@@ -45,7 +65,15 @@ export const createSwapFormSchema = (
.refine(
(val) => {
if (val === '') return false
return !balance || parseFloat(val) <= balance
// Treat only null/undefined as "unknown balance"; do not bypass check for numeric 0

@dharit-tandharit-tanAug 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty for comment

if (balance == null || balance === undefined) return true
try {
const amount = new FixedDecimal(val, decimals)
const balanceAmount = new FixedDecimal(balance, decimals)
return amount.value <= balanceAmount.value
} catch {
return false
}
},
{
message: messages.insufficientBalance(tokenSymbol)
Expand Down
54 changes: 36 additions & 18 deletions packages/common/src/store/ui/buy-sell/useGroupCoinPairs.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
import { useMemo } from 'react'

import { UserCoin } from '~/api'
import { useQueryContext, UserCoin } from '~/api'
import { useFeatureFlag } from '~/hooks'
import { FeatureFlags } from '~/services'

export type CoinPairItem = UserCoin | 'find-more'

/**
* Groups coins into pairs for 2-column layout rendering.
* Groups coins into pairs for responsive layout rendering.
* Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
* based on the ARTIST_COINS feature flag.
*
* @param coins Array of user coins
* @param singleColumn Whether to force single column layout (1 item per row)
* @returns Array of coin pairs, where each pair contains 1-2 items
*/
export const useGroupCoinPairs = (coins?: UserCoin[]) => {
export const useGroupCoinPairs = (coins?: UserCoin[], singleColumn = false) => {
const { env } = useQueryContext()
const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
FeatureFlags.ARTIST_COINS
)
Expand All@@ -23,27 +25,43 @@ export const useGroupCoinPairs = (coins?: UserCoin[]) => {
if (!coins) return []

// Filter out USDC coins
const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
const filteredCoins = coins.filter((coin) => {
if (!isArtistCoinsEnabled) return coin.mint === env.WAUDIO_MINT_ADDRESS
return coin.ticker !== 'USDC' && coin.balance > 0
})

// Group coins into pairs for row rendering
// Group coins for responsive layout
const coinPairs: CoinPairItem[][] = []

for (let i = 0; i < filteredCoins.length; i += 2) {
const pair: CoinPairItem[] = [filteredCoins[i]]
if (i + 1 < filteredCoins.length) {
pair.push(filteredCoins[i + 1])
} else if (isArtistCoinsEnabled) {
// If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
pair.push('find-more')
if (singleColumn) {
// Single column layout - each coin gets its own row
filteredCoins.forEach((coin) => {
coinPairs.push([coin])
})

// Add FindMoreCoins in its own row if artist coins enabled
if (isArtistCoinsEnabled) {
coinPairs.push(['find-more'])
}
} else {
// Two column layout - group coins into pairs
for (let i = 0; i < filteredCoins.length; i += 2) {
const pair: CoinPairItem[] = [filteredCoins[i]]
if (i + 1 < filteredCoins.length) {
pair.push(filteredCoins[i + 1])
} else if (isArtistCoinsEnabled) {
// If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
pair.push('find-more')
}
coinPairs.push(pair)
}
coinPairs.push(pair)
}

// If even number of coins and artist coins enabled, FindMoreCoins gets its own row
if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
coinPairs.push(['find-more'])
// If even number of coins and artist coins enabled, FindMoreCoins gets its own row
if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
coinPairs.push(['find-more'])
}
}

return coinPairs
}, [coins, isArtistCoinsEnabled])
}, [coins, env.WAUDIO_MINT_ADDRESS, isArtistCoinsEnabled, singleColumn])
}
50 changes: 37 additions & 13 deletions packages/common/src/store/ui/buy-sell/useTokenSwapForm.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
import { useCallback, useEffect, useMemo } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'

import { useFormik } from 'formik'
import { toFormikValidationSchema } from 'zod-formik-adapter'

import { buySellMessages as messages } from '~/messages'

import { useTokenExchangeRate, useTokenPrice } from '../../../api'

import { MIN_SWAP_AMOUNT_USD, MAX_SWAP_AMOUNT_USD } from './constants'
Expand DownExpand Up@@ -139,9 +137,15 @@ export const useTokenSwapForm = ({
// Create validation schema
const validationSchema = useMemo(() => {
return toFormikValidationSchema(
createSwapFormSchema(min, max, availableBalance, inputToken.symbol)
createSwapFormSchema(
min,
max,
availableBalance,
inputToken.symbol,
inputToken.decimals
)
)
}, [min, max, availableBalance, inputToken.symbol])
}, [min, max, availableBalance, inputToken.symbol, inputToken.decimals])

// Initialize form with Formik
const formik = useFormik<SwapFormValues>({
Expand All@@ -167,6 +171,20 @@ export const useTokenSwapForm = ({
}
}, [initialInputValue, values.inputAmount, setFieldValue])

// Re-validate input when token or balance changes. Guard to avoid infinite loops.
const lastValidationKeyRef = useRef<string | null>(null)
// Only re-validate on actual token change to avoid recursive updates during balance polling
const tokenValidationKey = inputToken.address
useEffect(() => {
if (!values.inputAmount || values.inputAmount === '') return
if (lastValidationKeyRef.current !== tokenValidationKey) {
lastValidationKeyRef.current = tokenValidationKey
setFieldTouched('inputAmount', true, true)
// Explicitly validate to refresh errors for the new token
formik.validateForm()
}
}, [tokenValidationKey, values.inputAmount, setFieldTouched, formik])

// Calculate the numeric value of the input amount
const numericInputAmount = useMemo(() => {
if (!values.inputAmount) return 0
Expand DownExpand Up@@ -234,17 +252,22 @@ export const useTokenSwapForm = ({
return errors.inputAmount
}, [touched.inputAmount, errors.inputAmount, values.inputAmount])

// Derive if current error is specifically an insufficient balance error
// Derive insufficient balance directly from numeric values to avoid schema or message coupling
const isInsufficientBalance = useMemo(() => {
return (
formik.errors.inputAmount ===
messages.insufficientBalance(inputToken.symbol)
)
}, [formik.errors.inputAmount, inputToken.symbol])
if (isBalanceLoading) return false
if (values.inputAmount === '') return false
return numericInputAmount > availableBalance
}, [
isBalanceLoading,
values.inputAmount,
numericInputAmount,
availableBalance
])

useEffect(() => {
if (onTransactionDataChange) {
const isValid = numericInputAmount > 0 && !errors.inputAmount
const isValid =
numericInputAmount > 0 && !errors.inputAmount && !isBalanceLoading

onTransactionDataChange({
inputAmount: numericInputAmount,
Expand All@@ -263,7 +286,8 @@ export const useTokenSwapForm = ({
isExchangeRateLoading,
onTransactionDataChange,
isInsufficientBalance,
currentExchangeRate
currentExchangeRate,
isBalanceLoading
])

// Handle input changes
Expand Down
11 changes: 9 additions & 2 deletions packages/web/src/components/buy-sell-modal/BuySellFlow.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -322,8 +322,15 @@ export const BuySellFlow = (props: BuySellFlowProps) => {
if (activeTab === 'sell' && !hasSufficientBalance) {
return messages.insufficientAUDIOForSale
}
// Prioritize the specific validation error from the form
if (hasAttemptedSubmit && transactionData?.error) {
// Show validation errors immediately for sell and convert tabs (like insufficient balance)
if (
(activeTab === 'sell' || activeTab === 'convert') &&
transactionData?.error
) {
return transactionData.error
}
// For buy tab, only show validation errors after attempted submit
if (activeTab === 'buy' && hasAttemptedSubmit && transactionData?.error) {
return transactionData.error
}
// Fallback for empty input, though zod should handle it via transactionData.error
Expand Down
66 changes: 35 additions & 31 deletions packages/web/src/components/buy-sell-modal/DropdownSection.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -39,40 +39,43 @@ type CustomSingleValueProps = {

const CustomSingleValue = (
props: SingleValueProps<TokenOption> & CustomSingleValueProps
) => (
<components.SingleValue {...props}>
<Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
<Flex gap='s' alignItems='center'>
<TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
<Flex direction='column'>
{props.shouldShowLargeTicker ? (
<Flex alignSelf='flex-start'>
<Text variant='heading' size='s' color='subdued'>
{messages.tokenTicker(props.symbol, !!props.isStablecoin)}
</Text>
</Flex>
) : null}
{!props.hasReceiveAmount ? (
<Text variant='title' size='s' color='default'>
{messages.stackedBalance(props.formattedAvailableBalance!)}
</Text>
) : null}
{props.hasReceiveAmount &&
props.formattedReceiveAmount !== DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
<Flex direction='column'>
<Text variant='heading' size='s'>
{props.formattedReceiveAmount}
</Text>
<Text variant='title' size='s' color='subdued'>
{messages.tokenTicker(props.symbol, !!props.isStablecoin)}
) => {
return (
<components.SingleValue {...props}>
<Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
<Flex gap='s' alignItems='center'>
<TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
<Flex direction='column'>
{props.shouldShowLargeTicker ? (
<Flex alignSelf='flex-start'>
<Text variant='heading' size='s' color='subdued'>
{messages.tokenTicker(props.symbol, !!props.isStablecoin)}
</Text>
</Flex>
) : null}
{!props.hasReceiveAmount ? (
<Text variant='title' size='s' color='default'>
{messages.stackedBalance(props.formattedAvailableBalance!)}
</Text>
</Flex>
) : null}
) : null}
{props.hasReceiveAmount &&
props.formattedReceiveAmount !==
DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
<Flex direction='column'>

@dharit-tandharit-tanAug 13, 2025

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: just column

<Text variant='heading' size='s'>
{props.formattedReceiveAmount}
</Text>
<Text variant='title' size='s' color='subdued'>
{messages.tokenTicker(props.symbol, !!props.isStablecoin)}
</Text>
</Flex>
) : null}
</Flex>
</Flex>
</Flex>
</Flex>
</components.SingleValue>
)
</components.SingleValue>
)
}

const CustomOption = (props: OptionProps<TokenOption>) => {
const { spacing, cornerRadius, color } = useTheme()
Expand DownExpand Up@@ -180,6 +183,7 @@ export const DropdownSection = ({
ph='m'
borderRadius='s'
css={{
maxHeight: spacing.unit16,
cursor: isClickable ? 'pointer' : 'default',
'&:hover': isClickable
? {
Expand Down
3 changes: 2 additions & 1 deletion packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -180,7 +180,8 @@ export const YourCoins = () => {
userId: userIdString || ''
})

const coinPairs = useGroupCoinPairs(artistCoins)
const { isMobile, isTablet } = useMedia()
const coinPairs = useGroupCoinPairs(artistCoins, isMobile || isTablet)

if (isLoadingCoins || !userIdString) {
return <YourCoinsSkeleton />
Expand Down
, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
Fix buy-sell modal error handling and UI improvements#12728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

faridsalau
merged 2 commits into

from

Aug 14, 2025
 Merged


Fix buy-sell modal error handling and UI improvements
#12728
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
cd793c6

Fix buy-sell modal error handling and UI improvements


faridsalau Aug 13, 2025
38857b8

Remove comment


faridsalau Aug 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 33 additions & 5 deletions
packages/common/src/store/ui/buy-sell/swapFormSchema.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
import { FixedDecimal } from '@audius/fixed-decimal'
import { z } from 'zod'

import { buySellMessages as messages } from '../../../messages'
Expand All@@ -9,7 +10,8 @@ export const createSwapFormSchema = (
 min: number = 0,
 max: number = Number.MAX_SAFE_INTEGER,
 balance: number | undefined = undefined,
 tokenSymbol: string = ''
 tokenSymbol: string = '',
 decimals: number = 8
) =>
 z.object({
 inputAmount: z
Expand All@@ -18,7 +20,13 @@ export const createSwapFormSchema = (
 (val) => {
 // Allow empty string during typing, but require it for final validation
 if (val === '') return false
 return !isNaN(parseFloat(val))
 try {
 // eslint-disable-next-line no-new
 new FixedDecimal(val, decimals)
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: instead of eslint disable, would _ = new FixedDecimal() work?
 return true
 } catch {
 return false
 }
 },
 {
 message: messages.emptyAmount
Expand All@@ -27,7 +35,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) >= min
 try {
 const amount = new FixedDecimal(val, decimals)
 const minAmount = new FixedDecimal(min, decimals)
 return amount.value >= minAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.minAmount(min, tokenSymbol)
Expand All@@ -36,7 +50,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) <= max
 try {
 const amount = new FixedDecimal(val, decimals)
 const maxAmount = new FixedDecimal(max, decimals)
 return amount.value <= maxAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.maxAmount(max, tokenSymbol)
Expand All@@ -45,7 +65,15 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return !balance || parseFloat(val) <= balance
 // Treat only null/undefined as "unknown balance"; do not bypass check for numeric 0
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty for comment
 if (balance == null || balance === undefined) return true
 try {
 const amount = new FixedDecimal(val, decimals)
 const balanceAmount = new FixedDecimal(balance, decimals)
 return amount.value <= balanceAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.insufficientBalance(tokenSymbol)
Expand Down

54 changes: 36 additions & 18 deletions
packages/common/src/store/ui/buy-sell/useGroupCoinPairs.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
import { useMemo } from 'react'

import { UserCoin } from '~/api'
import { useQueryContext, UserCoin } from '~/api'
import { useFeatureFlag } from '~/hooks'
import { FeatureFlags } from '~/services'

export type CoinPairItem = UserCoin | 'find-more'

/**
 * Groups coins into pairs for 2-column layout rendering.
 * Groups coins into pairs for responsive layout rendering.
 * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
 * based on the ARTIST_COINS feature flag.
 *
 * @param coins Array of user coins
 * @param singleColumn Whether to force single column layout (1 item per row)
 * @returns Array of coin pairs, where each pair contains 1-2 items
 */
export const useGroupCoinPairs = (coins?: UserCoin[]) => {
export const useGroupCoinPairs = (coins?: UserCoin[], singleColumn = false) => {
 const { env } = useQueryContext()
 const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
 FeatureFlags.ARTIST_COINS
 )
Expand All@@ -23,27 +25,43 @@ export const useGroupCoinPairs = (coins?: UserCoin[]) => {
 if (!coins) return []

 // Filter out USDC coins
 const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
 const filteredCoins = coins.filter((coin) => {
 if (!isArtistCoinsEnabled) return coin.mint === env.WAUDIO_MINT_ADDRESS
 return coin.ticker !== 'USDC' && coin.balance > 0
 })

 // Group coins into pairs for row rendering
 // Group coins for responsive layout
 const coinPairs: CoinPairItem[][] = []

 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 if (singleColumn) {
 // Single column layout - each coin gets its own row
 filteredCoins.forEach((coin) => {
 coinPairs.push([coin])
 })

 // Add FindMoreCoins in its own row if artist coins enabled
 if (isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 } else {
 // Two column layout - group coins into pairs
 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 }
 coinPairs.push(pair)
 }
 coinPairs.push(pair)
 }

 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 }

 return coinPairs
 }, [coins, isArtistCoinsEnabled])
 }, [coins, env.WAUDIO_MINT_ADDRESS, isArtistCoinsEnabled, singleColumn])
}

50 changes: 37 additions & 13 deletions
packages/common/src/store/ui/buy-sell/useTokenSwapForm.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
import { useCallback, useEffect, useMemo } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'

import { useFormik } from 'formik'
import { toFormikValidationSchema } from 'zod-formik-adapter'

import { buySellMessages as messages } from '~/messages'

import { useTokenExchangeRate, useTokenPrice } from '../../../api'

import { MIN_SWAP_AMOUNT_USD, MAX_SWAP_AMOUNT_USD } from './constants'
Expand DownExpand Up@@ -139,9 +137,15 @@ export const useTokenSwapForm = ({
 // Create validation schema
 const validationSchema = useMemo(() => {
 return toFormikValidationSchema(
 createSwapFormSchema(min, max, availableBalance, inputToken.symbol)
 createSwapFormSchema(
 min,
 max,
 availableBalance,
 inputToken.symbol,
 inputToken.decimals
 )
 )
 }, [min, max, availableBalance, inputToken.symbol])
 }, [min, max, availableBalance, inputToken.symbol, inputToken.decimals])

 // Initialize form with Formik
 const formik = useFormik<SwapFormValues>({
Expand All@@ -167,6 +171,20 @@ export const useTokenSwapForm = ({
 }
 }, [initialInputValue, values.inputAmount, setFieldValue])

 // Re-validate input when token or balance changes. Guard to avoid infinite loops.
 const lastValidationKeyRef = useRef<string | null>(null)
 // Only re-validate on actual token change to avoid recursive updates during balance polling
 const tokenValidationKey = inputToken.address
 useEffect(() => {
 if (!values.inputAmount || values.inputAmount === '') return
 if (lastValidationKeyRef.current !== tokenValidationKey) {
 lastValidationKeyRef.current = tokenValidationKey
 setFieldTouched('inputAmount', true, true)
 // Explicitly validate to refresh errors for the new token
 formik.validateForm()
 }
 }, [tokenValidationKey, values.inputAmount, setFieldTouched, formik])

 // Calculate the numeric value of the input amount
 const numericInputAmount = useMemo(() => {
 if (!values.inputAmount) return 0
Expand DownExpand Up@@ -234,17 +252,22 @@ export const useTokenSwapForm = ({
 return errors.inputAmount
 }, [touched.inputAmount, errors.inputAmount, values.inputAmount])

 // Derive if current error is specifically an insufficient balance error
 // Derive insufficient balance directly from numeric values to avoid schema or message coupling
 const isInsufficientBalance = useMemo(() => {
 return (
 formik.errors.inputAmount ===
 messages.insufficientBalance(inputToken.symbol)
 )
 }, [formik.errors.inputAmount, inputToken.symbol])
 if (isBalanceLoading) return false
 if (values.inputAmount === '') return false
 return numericInputAmount > availableBalance
 }, [
 isBalanceLoading,
 values.inputAmount,
 numericInputAmount,
 availableBalance
 ])

 useEffect(() => {
 if (onTransactionDataChange) {
 const isValid = numericInputAmount > 0 && !errors.inputAmount
 const isValid =
 numericInputAmount > 0 && !errors.inputAmount && !isBalanceLoading

 onTransactionDataChange({
 inputAmount: numericInputAmount,
Expand All@@ -263,7 +286,8 @@ export const useTokenSwapForm = ({
 isExchangeRateLoading,
 onTransactionDataChange,
 isInsufficientBalance,
 currentExchangeRate
 currentExchangeRate,
 isBalanceLoading
 ])

 // Handle input changes
Expand Down

11 changes: 9 additions & 2 deletions
packages/web/src/components/buy-sell-modal/BuySellFlow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -322,8 +322,15 @@ export const BuySellFlow = (props: BuySellFlowProps) => {
 if (activeTab === 'sell' && !hasSufficientBalance) {
 return messages.insufficientAUDIOForSale
 }
 // Prioritize the specific validation error from the form
 if (hasAttemptedSubmit && transactionData?.error) {
 // Show validation errors immediately for sell and convert tabs (like insufficient balance)
 if (
 (activeTab === 'sell' || activeTab === 'convert') &&
 transactionData?.error
 ) {
 return transactionData.error
 }
 // For buy tab, only show validation errors after attempted submit
 if (activeTab === 'buy' && hasAttemptedSubmit && transactionData?.error) {
 return transactionData.error
 }
 // Fallback for empty input, though zod should handle it via transactionData.error
Expand Down

66 changes: 35 additions & 31 deletions
packages/web/src/components/buy-sell-modal/DropdownSection.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,40 +39,43 @@ type CustomSingleValueProps = {

const CustomSingleValue = (
 props: SingleValueProps<TokenOption> & CustomSingleValueProps
) => (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !== DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
) => {
 return (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 </Flex>
 ) : null}
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !==
 DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: just column
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 </Flex>
 </Flex>
 </Flex>
 </Flex>
</components.SingleValue>
)
 </components.SingleValue>
)
}

const CustomOption = (props: OptionProps<TokenOption>) => {
 const { spacing, cornerRadius, color } = useTheme()
Expand DownExpand Up@@ -180,6 +183,7 @@ export const DropdownSection = ({
 ph='m'
 borderRadius='s'
 css={{
 maxHeight: spacing.unit16,
 cursor: isClickable ? 'pointer' : 'default',
 '&:hover': isClickable
 ? {
Expand Down

3 changes: 2 additions & 1 deletion
packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -180,7 +180,8 @@ export const YourCoins = () => {
 userId: userIdString || ''
 })

 const coinPairs = useGroupCoinPairs(artistCoins)
 const { isMobile, isTablet } = useMedia()
 const coinPairs = useGroupCoinPairs(artistCoins, isMobile || isTablet)

 if (isLoadingCoins || !userIdString) {
 return <YourCoinsSkeleton />
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Fix buy-sell modal error handling and UI improvements#12728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

faridsalau
merged 2 commits into

from

Aug 14, 2025
 Merged


Fix buy-sell modal error handling and UI improvements
#12728
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
cd793c6

Fix buy-sell modal error handling and UI improvements


faridsalau Aug 13, 2025
38857b8

Remove comment


faridsalau Aug 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 33 additions & 5 deletions
packages/common/src/store/ui/buy-sell/swapFormSchema.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
import { FixedDecimal } from '@audius/fixed-decimal'
import { z } from 'zod'

import { buySellMessages as messages } from '../../../messages'
Expand All@@ -9,7 +10,8 @@ export const createSwapFormSchema = (
 min: number = 0,
 max: number = Number.MAX_SAFE_INTEGER,
 balance: number | undefined = undefined,
 tokenSymbol: string = ''
 tokenSymbol: string = '',
 decimals: number = 8
) =>
 z.object({
 inputAmount: z
Expand All@@ -18,7 +20,13 @@ export const createSwapFormSchema = (
 (val) => {
 // Allow empty string during typing, but require it for final validation
 if (val === '') return false
 return !isNaN(parseFloat(val))
 try {
 // eslint-disable-next-line no-new
 new FixedDecimal(val, decimals)
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: instead of eslint disable, would _ = new FixedDecimal() work?
 return true
 } catch {
 return false
 }
 },
 {
 message: messages.emptyAmount
Expand All@@ -27,7 +35,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) >= min
 try {
 const amount = new FixedDecimal(val, decimals)
 const minAmount = new FixedDecimal(min, decimals)
 return amount.value >= minAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.minAmount(min, tokenSymbol)
Expand All@@ -36,7 +50,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) <= max
 try {
 const amount = new FixedDecimal(val, decimals)
 const maxAmount = new FixedDecimal(max, decimals)
 return amount.value <= maxAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.maxAmount(max, tokenSymbol)
Expand All@@ -45,7 +65,15 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return !balance || parseFloat(val) <= balance
 // Treat only null/undefined as "unknown balance"; do not bypass check for numeric 0
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty for comment
 if (balance == null || balance === undefined) return true
 try {
 const amount = new FixedDecimal(val, decimals)
 const balanceAmount = new FixedDecimal(balance, decimals)
 return amount.value <= balanceAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.insufficientBalance(tokenSymbol)
Expand Down

54 changes: 36 additions & 18 deletions
packages/common/src/store/ui/buy-sell/useGroupCoinPairs.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
import { useMemo } from 'react'

import { UserCoin } from '~/api'
import { useQueryContext, UserCoin } from '~/api'
import { useFeatureFlag } from '~/hooks'
import { FeatureFlags } from '~/services'

export type CoinPairItem = UserCoin | 'find-more'

/**
 * Groups coins into pairs for 2-column layout rendering.
 * Groups coins into pairs for responsive layout rendering.
 * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
 * based on the ARTIST_COINS feature flag.
 *
 * @param coins Array of user coins
 * @param singleColumn Whether to force single column layout (1 item per row)
 * @returns Array of coin pairs, where each pair contains 1-2 items
 */
export const useGroupCoinPairs = (coins?: UserCoin[]) => {
export const useGroupCoinPairs = (coins?: UserCoin[], singleColumn = false) => {
 const { env } = useQueryContext()
 const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
 FeatureFlags.ARTIST_COINS
 )
Expand All@@ -23,27 +25,43 @@ export const useGroupCoinPairs = (coins?: UserCoin[]) => {
 if (!coins) return []

 // Filter out USDC coins
 const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
 const filteredCoins = coins.filter((coin) => {
 if (!isArtistCoinsEnabled) return coin.mint === env.WAUDIO_MINT_ADDRESS
 return coin.ticker !== 'USDC' && coin.balance > 0
 })

 // Group coins into pairs for row rendering
 // Group coins for responsive layout
 const coinPairs: CoinPairItem[][] = []

 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 if (singleColumn) {
 // Single column layout - each coin gets its own row
 filteredCoins.forEach((coin) => {
 coinPairs.push([coin])
 })

 // Add FindMoreCoins in its own row if artist coins enabled
 if (isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 } else {
 // Two column layout - group coins into pairs
 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 }
 coinPairs.push(pair)
 }
 coinPairs.push(pair)
 }

 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 }

 return coinPairs
 }, [coins, isArtistCoinsEnabled])
 }, [coins, env.WAUDIO_MINT_ADDRESS, isArtistCoinsEnabled, singleColumn])
}

50 changes: 37 additions & 13 deletions
packages/common/src/store/ui/buy-sell/useTokenSwapForm.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
import { useCallback, useEffect, useMemo } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'

import { useFormik } from 'formik'
import { toFormikValidationSchema } from 'zod-formik-adapter'

import { buySellMessages as messages } from '~/messages'

import { useTokenExchangeRate, useTokenPrice } from '../../../api'

import { MIN_SWAP_AMOUNT_USD, MAX_SWAP_AMOUNT_USD } from './constants'
Expand DownExpand Up@@ -139,9 +137,15 @@ export const useTokenSwapForm = ({
 // Create validation schema
 const validationSchema = useMemo(() => {
 return toFormikValidationSchema(
 createSwapFormSchema(min, max, availableBalance, inputToken.symbol)
 createSwapFormSchema(
 min,
 max,
 availableBalance,
 inputToken.symbol,
 inputToken.decimals
 )
 )
 }, [min, max, availableBalance, inputToken.symbol])
 }, [min, max, availableBalance, inputToken.symbol, inputToken.decimals])

 // Initialize form with Formik
 const formik = useFormik<SwapFormValues>({
Expand All@@ -167,6 +171,20 @@ export const useTokenSwapForm = ({
 }
 }, [initialInputValue, values.inputAmount, setFieldValue])

 // Re-validate input when token or balance changes. Guard to avoid infinite loops.
 const lastValidationKeyRef = useRef<string | null>(null)
 // Only re-validate on actual token change to avoid recursive updates during balance polling
 const tokenValidationKey = inputToken.address
 useEffect(() => {
 if (!values.inputAmount || values.inputAmount === '') return
 if (lastValidationKeyRef.current !== tokenValidationKey) {
 lastValidationKeyRef.current = tokenValidationKey
 setFieldTouched('inputAmount', true, true)
 // Explicitly validate to refresh errors for the new token
 formik.validateForm()
 }
 }, [tokenValidationKey, values.inputAmount, setFieldTouched, formik])

 // Calculate the numeric value of the input amount
 const numericInputAmount = useMemo(() => {
 if (!values.inputAmount) return 0
Expand DownExpand Up@@ -234,17 +252,22 @@ export const useTokenSwapForm = ({
 return errors.inputAmount
 }, [touched.inputAmount, errors.inputAmount, values.inputAmount])

 // Derive if current error is specifically an insufficient balance error
 // Derive insufficient balance directly from numeric values to avoid schema or message coupling
 const isInsufficientBalance = useMemo(() => {
 return (
 formik.errors.inputAmount ===
 messages.insufficientBalance(inputToken.symbol)
 )
 }, [formik.errors.inputAmount, inputToken.symbol])
 if (isBalanceLoading) return false
 if (values.inputAmount === '') return false
 return numericInputAmount > availableBalance
 }, [
 isBalanceLoading,
 values.inputAmount,
 numericInputAmount,
 availableBalance
 ])

 useEffect(() => {
 if (onTransactionDataChange) {
 const isValid = numericInputAmount > 0 && !errors.inputAmount
 const isValid =
 numericInputAmount > 0 && !errors.inputAmount && !isBalanceLoading

 onTransactionDataChange({
 inputAmount: numericInputAmount,
Expand All@@ -263,7 +286,8 @@ export const useTokenSwapForm = ({
 isExchangeRateLoading,
 onTransactionDataChange,
 isInsufficientBalance,
 currentExchangeRate
 currentExchangeRate,
 isBalanceLoading
 ])

 // Handle input changes
Expand Down

11 changes: 9 additions & 2 deletions
packages/web/src/components/buy-sell-modal/BuySellFlow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -322,8 +322,15 @@ export const BuySellFlow = (props: BuySellFlowProps) => {
 if (activeTab === 'sell' && !hasSufficientBalance) {
 return messages.insufficientAUDIOForSale
 }
 // Prioritize the specific validation error from the form
 if (hasAttemptedSubmit && transactionData?.error) {
 // Show validation errors immediately for sell and convert tabs (like insufficient balance)
 if (
 (activeTab === 'sell' || activeTab === 'convert') &&
 transactionData?.error
 ) {
 return transactionData.error
 }
 // For buy tab, only show validation errors after attempted submit
 if (activeTab === 'buy' && hasAttemptedSubmit && transactionData?.error) {
 return transactionData.error
 }
 // Fallback for empty input, though zod should handle it via transactionData.error
Expand Down

66 changes: 35 additions & 31 deletions
packages/web/src/components/buy-sell-modal/DropdownSection.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,40 +39,43 @@ type CustomSingleValueProps = {

const CustomSingleValue = (
 props: SingleValueProps<TokenOption> & CustomSingleValueProps
) => (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !== DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
) => {
 return (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 </Flex>
 ) : null}
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !==
 DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: just column
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 </Flex>
 </Flex>
 </Flex>
 </Flex>
</components.SingleValue>
)
 </components.SingleValue>
)
}

const CustomOption = (props: OptionProps<TokenOption>) => {
 const { spacing, cornerRadius, color } = useTheme()
Expand DownExpand Up@@ -180,6 +183,7 @@ export const DropdownSection = ({
 ph='m'
 borderRadius='s'
 css={{
 maxHeight: spacing.unit16,
 cursor: isClickable ? 'pointer' : 'default',
 '&:hover': isClickable
 ? {
Expand Down

3 changes: 2 additions & 1 deletion
packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -180,7 +180,8 @@ export const YourCoins = () => {
 userId: userIdString || ''
 })

 const coinPairs = useGroupCoinPairs(artistCoins)
 const { isMobile, isTablet } = useMedia()
 const coinPairs = useGroupCoinPairs(artistCoins, isMobile || isTablet)

 if (isLoadingCoins || !userIdString) {
 return <YourCoinsSkeleton />
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Fix buy-sell modal error handling and UI improvements#12728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

faridsalau
merged 2 commits into

from

Aug 14, 2025
 Merged


Fix buy-sell modal error handling and UI improvements
#12728
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
cd793c6

Fix buy-sell modal error handling and UI improvements


faridsalau Aug 13, 2025
38857b8

Remove comment


faridsalau Aug 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 33 additions & 5 deletions
packages/common/src/store/ui/buy-sell/swapFormSchema.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
import { FixedDecimal } from '@audius/fixed-decimal'
import { z } from 'zod'

import { buySellMessages as messages } from '../../../messages'
Expand All@@ -9,7 +10,8 @@ export const createSwapFormSchema = (
 min: number = 0,
 max: number = Number.MAX_SAFE_INTEGER,
 balance: number | undefined = undefined,
 tokenSymbol: string = ''
 tokenSymbol: string = '',
 decimals: number = 8
) =>
 z.object({
 inputAmount: z
Expand All@@ -18,7 +20,13 @@ export const createSwapFormSchema = (
 (val) => {
 // Allow empty string during typing, but require it for final validation
 if (val === '') return false
 return !isNaN(parseFloat(val))
 try {
 // eslint-disable-next-line no-new
 new FixedDecimal(val, decimals)
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: instead of eslint disable, would _ = new FixedDecimal() work?
 return true
 } catch {
 return false
 }
 },
 {
 message: messages.emptyAmount
Expand All@@ -27,7 +35,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) >= min
 try {
 const amount = new FixedDecimal(val, decimals)
 const minAmount = new FixedDecimal(min, decimals)
 return amount.value >= minAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.minAmount(min, tokenSymbol)
Expand All@@ -36,7 +50,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) <= max
 try {
 const amount = new FixedDecimal(val, decimals)
 const maxAmount = new FixedDecimal(max, decimals)
 return amount.value <= maxAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.maxAmount(max, tokenSymbol)
Expand All@@ -45,7 +65,15 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return !balance || parseFloat(val) <= balance
 // Treat only null/undefined as "unknown balance"; do not bypass check for numeric 0
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty for comment
 if (balance == null || balance === undefined) return true
 try {
 const amount = new FixedDecimal(val, decimals)
 const balanceAmount = new FixedDecimal(balance, decimals)
 return amount.value <= balanceAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.insufficientBalance(tokenSymbol)
Expand Down

54 changes: 36 additions & 18 deletions
packages/common/src/store/ui/buy-sell/useGroupCoinPairs.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
import { useMemo } from 'react'

import { UserCoin } from '~/api'
import { useQueryContext, UserCoin } from '~/api'
import { useFeatureFlag } from '~/hooks'
import { FeatureFlags } from '~/services'

export type CoinPairItem = UserCoin | 'find-more'

/**
 * Groups coins into pairs for 2-column layout rendering.
 * Groups coins into pairs for responsive layout rendering.
 * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
 * based on the ARTIST_COINS feature flag.
 *
 * @param coins Array of user coins
 * @param singleColumn Whether to force single column layout (1 item per row)
 * @returns Array of coin pairs, where each pair contains 1-2 items
 */
export const useGroupCoinPairs = (coins?: UserCoin[]) => {
export const useGroupCoinPairs = (coins?: UserCoin[], singleColumn = false) => {
 const { env } = useQueryContext()
 const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
 FeatureFlags.ARTIST_COINS
 )
Expand All@@ -23,27 +25,43 @@ export const useGroupCoinPairs = (coins?: UserCoin[]) => {
 if (!coins) return []

 // Filter out USDC coins
 const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
 const filteredCoins = coins.filter((coin) => {
 if (!isArtistCoinsEnabled) return coin.mint === env.WAUDIO_MINT_ADDRESS
 return coin.ticker !== 'USDC' && coin.balance > 0
 })

 // Group coins into pairs for row rendering
 // Group coins for responsive layout
 const coinPairs: CoinPairItem[][] = []

 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 if (singleColumn) {
 // Single column layout - each coin gets its own row
 filteredCoins.forEach((coin) => {
 coinPairs.push([coin])
 })

 // Add FindMoreCoins in its own row if artist coins enabled
 if (isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 } else {
 // Two column layout - group coins into pairs
 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 }
 coinPairs.push(pair)
 }
 coinPairs.push(pair)
 }

 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 }

 return coinPairs
 }, [coins, isArtistCoinsEnabled])
 }, [coins, env.WAUDIO_MINT_ADDRESS, isArtistCoinsEnabled, singleColumn])
}

50 changes: 37 additions & 13 deletions
packages/common/src/store/ui/buy-sell/useTokenSwapForm.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
import { useCallback, useEffect, useMemo } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'

import { useFormik } from 'formik'
import { toFormikValidationSchema } from 'zod-formik-adapter'

import { buySellMessages as messages } from '~/messages'

import { useTokenExchangeRate, useTokenPrice } from '../../../api'

import { MIN_SWAP_AMOUNT_USD, MAX_SWAP_AMOUNT_USD } from './constants'
Expand DownExpand Up@@ -139,9 +137,15 @@ export const useTokenSwapForm = ({
 // Create validation schema
 const validationSchema = useMemo(() => {
 return toFormikValidationSchema(
 createSwapFormSchema(min, max, availableBalance, inputToken.symbol)
 createSwapFormSchema(
 min,
 max,
 availableBalance,
 inputToken.symbol,
 inputToken.decimals
 )
 )
 }, [min, max, availableBalance, inputToken.symbol])
 }, [min, max, availableBalance, inputToken.symbol, inputToken.decimals])

 // Initialize form with Formik
 const formik = useFormik<SwapFormValues>({
Expand All@@ -167,6 +171,20 @@ export const useTokenSwapForm = ({
 }
 }, [initialInputValue, values.inputAmount, setFieldValue])

 // Re-validate input when token or balance changes. Guard to avoid infinite loops.
 const lastValidationKeyRef = useRef<string | null>(null)
 // Only re-validate on actual token change to avoid recursive updates during balance polling
 const tokenValidationKey = inputToken.address
 useEffect(() => {
 if (!values.inputAmount || values.inputAmount === '') return
 if (lastValidationKeyRef.current !== tokenValidationKey) {
 lastValidationKeyRef.current = tokenValidationKey
 setFieldTouched('inputAmount', true, true)
 // Explicitly validate to refresh errors for the new token
 formik.validateForm()
 }
 }, [tokenValidationKey, values.inputAmount, setFieldTouched, formik])

 // Calculate the numeric value of the input amount
 const numericInputAmount = useMemo(() => {
 if (!values.inputAmount) return 0
Expand DownExpand Up@@ -234,17 +252,22 @@ export const useTokenSwapForm = ({
 return errors.inputAmount
 }, [touched.inputAmount, errors.inputAmount, values.inputAmount])

 // Derive if current error is specifically an insufficient balance error
 // Derive insufficient balance directly from numeric values to avoid schema or message coupling
 const isInsufficientBalance = useMemo(() => {
 return (
 formik.errors.inputAmount ===
 messages.insufficientBalance(inputToken.symbol)
 )
 }, [formik.errors.inputAmount, inputToken.symbol])
 if (isBalanceLoading) return false
 if (values.inputAmount === '') return false
 return numericInputAmount > availableBalance
 }, [
 isBalanceLoading,
 values.inputAmount,
 numericInputAmount,
 availableBalance
 ])

 useEffect(() => {
 if (onTransactionDataChange) {
 const isValid = numericInputAmount > 0 && !errors.inputAmount
 const isValid =
 numericInputAmount > 0 && !errors.inputAmount && !isBalanceLoading

 onTransactionDataChange({
 inputAmount: numericInputAmount,
Expand All@@ -263,7 +286,8 @@ export const useTokenSwapForm = ({
 isExchangeRateLoading,
 onTransactionDataChange,
 isInsufficientBalance,
 currentExchangeRate
 currentExchangeRate,
 isBalanceLoading
 ])

 // Handle input changes
Expand Down

11 changes: 9 additions & 2 deletions
packages/web/src/components/buy-sell-modal/BuySellFlow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -322,8 +322,15 @@ export const BuySellFlow = (props: BuySellFlowProps) => {
 if (activeTab === 'sell' && !hasSufficientBalance) {
 return messages.insufficientAUDIOForSale
 }
 // Prioritize the specific validation error from the form
 if (hasAttemptedSubmit && transactionData?.error) {
 // Show validation errors immediately for sell and convert tabs (like insufficient balance)
 if (
 (activeTab === 'sell' || activeTab === 'convert') &&
 transactionData?.error
 ) {
 return transactionData.error
 }
 // For buy tab, only show validation errors after attempted submit
 if (activeTab === 'buy' && hasAttemptedSubmit && transactionData?.error) {
 return transactionData.error
 }
 // Fallback for empty input, though zod should handle it via transactionData.error
Expand Down

66 changes: 35 additions & 31 deletions
packages/web/src/components/buy-sell-modal/DropdownSection.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,40 +39,43 @@ type CustomSingleValueProps = {

const CustomSingleValue = (
 props: SingleValueProps<TokenOption> & CustomSingleValueProps
) => (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !== DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
) => {
 return (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 </Flex>
 ) : null}
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !==
 DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: just column
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 </Flex>
 </Flex>
 </Flex>
 </Flex>
</components.SingleValue>
)
 </components.SingleValue>
)
}

const CustomOption = (props: OptionProps<TokenOption>) => {
 const { spacing, cornerRadius, color } = useTheme()
Expand DownExpand Up@@ -180,6 +183,7 @@ export const DropdownSection = ({
 ph='m'
 borderRadius='s'
 css={{
 maxHeight: spacing.unit16,
 cursor: isClickable ? 'pointer' : 'default',
 '&:hover': isClickable
 ? {
Expand Down

3 changes: 2 additions & 1 deletion
packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -180,7 +180,8 @@ export const YourCoins = () => {
 userId: userIdString || ''
 })

 const coinPairs = useGroupCoinPairs(artistCoins)
 const { isMobile, isTablet } = useMedia()
 const coinPairs = useGroupCoinPairs(artistCoins, isMobile || isTablet)

 if (isLoadingCoins || !userIdString) {
 return <YourCoinsSkeleton />
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
Fix buy-sell modal error handling and UI improvements#12728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

faridsalau
merged 2 commits into

from

Aug 14, 2025
 Merged


Fix buy-sell modal error handling and UI improvements
#12728
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
cd793c6

Fix buy-sell modal error handling and UI improvements


faridsalau Aug 13, 2025
38857b8

Remove comment


faridsalau Aug 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 33 additions & 5 deletions
packages/common/src/store/ui/buy-sell/swapFormSchema.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
import { FixedDecimal } from '@audius/fixed-decimal'
import { z } from 'zod'

import { buySellMessages as messages } from '../../../messages'
Expand All@@ -9,7 +10,8 @@ export const createSwapFormSchema = (
 min: number = 0,
 max: number = Number.MAX_SAFE_INTEGER,
 balance: number | undefined = undefined,
 tokenSymbol: string = ''
 tokenSymbol: string = '',
 decimals: number = 8
) =>
 z.object({
 inputAmount: z
Expand All@@ -18,7 +20,13 @@ export const createSwapFormSchema = (
 (val) => {
 // Allow empty string during typing, but require it for final validation
 if (val === '') return false
 return !isNaN(parseFloat(val))
 try {
 // eslint-disable-next-line no-new
 new FixedDecimal(val, decimals)
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: instead of eslint disable, would _ = new FixedDecimal() work?
 return true
 } catch {
 return false
 }
 },
 {
 message: messages.emptyAmount
Expand All@@ -27,7 +35,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) >= min
 try {
 const amount = new FixedDecimal(val, decimals)
 const minAmount = new FixedDecimal(min, decimals)
 return amount.value >= minAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.minAmount(min, tokenSymbol)
Expand All@@ -36,7 +50,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) <= max
 try {
 const amount = new FixedDecimal(val, decimals)
 const maxAmount = new FixedDecimal(max, decimals)
 return amount.value <= maxAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.maxAmount(max, tokenSymbol)
Expand All@@ -45,7 +65,15 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return !balance || parseFloat(val) <= balance
 // Treat only null/undefined as "unknown balance"; do not bypass check for numeric 0
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty for comment
 if (balance == null || balance === undefined) return true
 try {
 const amount = new FixedDecimal(val, decimals)
 const balanceAmount = new FixedDecimal(balance, decimals)
 return amount.value <= balanceAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.insufficientBalance(tokenSymbol)
Expand Down

54 changes: 36 additions & 18 deletions
packages/common/src/store/ui/buy-sell/useGroupCoinPairs.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
import { useMemo } from 'react'

import { UserCoin } from '~/api'
import { useQueryContext, UserCoin } from '~/api'
import { useFeatureFlag } from '~/hooks'
import { FeatureFlags } from '~/services'

export type CoinPairItem = UserCoin | 'find-more'

/**
 * Groups coins into pairs for 2-column layout rendering.
 * Groups coins into pairs for responsive layout rendering.
 * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
 * based on the ARTIST_COINS feature flag.
 *
 * @param coins Array of user coins
 * @param singleColumn Whether to force single column layout (1 item per row)
 * @returns Array of coin pairs, where each pair contains 1-2 items
 */
export const useGroupCoinPairs = (coins?: UserCoin[]) => {
export const useGroupCoinPairs = (coins?: UserCoin[], singleColumn = false) => {
 const { env } = useQueryContext()
 const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
 FeatureFlags.ARTIST_COINS
 )
Expand All@@ -23,27 +25,43 @@ export const useGroupCoinPairs = (coins?: UserCoin[]) => {
 if (!coins) return []

 // Filter out USDC coins
 const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
 const filteredCoins = coins.filter((coin) => {
 if (!isArtistCoinsEnabled) return coin.mint === env.WAUDIO_MINT_ADDRESS
 return coin.ticker !== 'USDC' && coin.balance > 0
 })

 // Group coins into pairs for row rendering
 // Group coins for responsive layout
 const coinPairs: CoinPairItem[][] = []

 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 if (singleColumn) {
 // Single column layout - each coin gets its own row
 filteredCoins.forEach((coin) => {
 coinPairs.push([coin])
 })

 // Add FindMoreCoins in its own row if artist coins enabled
 if (isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 } else {
 // Two column layout - group coins into pairs
 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 }
 coinPairs.push(pair)
 }
 coinPairs.push(pair)
 }

 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 }

 return coinPairs
 }, [coins, isArtistCoinsEnabled])
 }, [coins, env.WAUDIO_MINT_ADDRESS, isArtistCoinsEnabled, singleColumn])
}

50 changes: 37 additions & 13 deletions
packages/common/src/store/ui/buy-sell/useTokenSwapForm.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
import { useCallback, useEffect, useMemo } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'

import { useFormik } from 'formik'
import { toFormikValidationSchema } from 'zod-formik-adapter'

import { buySellMessages as messages } from '~/messages'

import { useTokenExchangeRate, useTokenPrice } from '../../../api'

import { MIN_SWAP_AMOUNT_USD, MAX_SWAP_AMOUNT_USD } from './constants'
Expand DownExpand Up@@ -139,9 +137,15 @@ export const useTokenSwapForm = ({
 // Create validation schema
 const validationSchema = useMemo(() => {
 return toFormikValidationSchema(
 createSwapFormSchema(min, max, availableBalance, inputToken.symbol)
 createSwapFormSchema(
 min,
 max,
 availableBalance,
 inputToken.symbol,
 inputToken.decimals
 )
 )
 }, [min, max, availableBalance, inputToken.symbol])
 }, [min, max, availableBalance, inputToken.symbol, inputToken.decimals])

 // Initialize form with Formik
 const formik = useFormik<SwapFormValues>({
Expand All@@ -167,6 +171,20 @@ export const useTokenSwapForm = ({
 }
 }, [initialInputValue, values.inputAmount, setFieldValue])

 // Re-validate input when token or balance changes. Guard to avoid infinite loops.
 const lastValidationKeyRef = useRef<string | null>(null)
 // Only re-validate on actual token change to avoid recursive updates during balance polling
 const tokenValidationKey = inputToken.address
 useEffect(() => {
 if (!values.inputAmount || values.inputAmount === '') return
 if (lastValidationKeyRef.current !== tokenValidationKey) {
 lastValidationKeyRef.current = tokenValidationKey
 setFieldTouched('inputAmount', true, true)
 // Explicitly validate to refresh errors for the new token
 formik.validateForm()
 }
 }, [tokenValidationKey, values.inputAmount, setFieldTouched, formik])

 // Calculate the numeric value of the input amount
 const numericInputAmount = useMemo(() => {
 if (!values.inputAmount) return 0
Expand DownExpand Up@@ -234,17 +252,22 @@ export const useTokenSwapForm = ({
 return errors.inputAmount
 }, [touched.inputAmount, errors.inputAmount, values.inputAmount])

 // Derive if current error is specifically an insufficient balance error
 // Derive insufficient balance directly from numeric values to avoid schema or message coupling
 const isInsufficientBalance = useMemo(() => {
 return (
 formik.errors.inputAmount ===
 messages.insufficientBalance(inputToken.symbol)
 )
 }, [formik.errors.inputAmount, inputToken.symbol])
 if (isBalanceLoading) return false
 if (values.inputAmount === '') return false
 return numericInputAmount > availableBalance
 }, [
 isBalanceLoading,
 values.inputAmount,
 numericInputAmount,
 availableBalance
 ])

 useEffect(() => {
 if (onTransactionDataChange) {
 const isValid = numericInputAmount > 0 && !errors.inputAmount
 const isValid =
 numericInputAmount > 0 && !errors.inputAmount && !isBalanceLoading

 onTransactionDataChange({
 inputAmount: numericInputAmount,
Expand All@@ -263,7 +286,8 @@ export const useTokenSwapForm = ({
 isExchangeRateLoading,
 onTransactionDataChange,
 isInsufficientBalance,
 currentExchangeRate
 currentExchangeRate,
 isBalanceLoading
 ])

 // Handle input changes
Expand Down

11 changes: 9 additions & 2 deletions
packages/web/src/components/buy-sell-modal/BuySellFlow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -322,8 +322,15 @@ export const BuySellFlow = (props: BuySellFlowProps) => {
 if (activeTab === 'sell' && !hasSufficientBalance) {
 return messages.insufficientAUDIOForSale
 }
 // Prioritize the specific validation error from the form
 if (hasAttemptedSubmit && transactionData?.error) {
 // Show validation errors immediately for sell and convert tabs (like insufficient balance)
 if (
 (activeTab === 'sell' || activeTab === 'convert') &&
 transactionData?.error
 ) {
 return transactionData.error
 }
 // For buy tab, only show validation errors after attempted submit
 if (activeTab === 'buy' && hasAttemptedSubmit && transactionData?.error) {
 return transactionData.error
 }
 // Fallback for empty input, though zod should handle it via transactionData.error
Expand Down

66 changes: 35 additions & 31 deletions
packages/web/src/components/buy-sell-modal/DropdownSection.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,40 +39,43 @@ type CustomSingleValueProps = {

const CustomSingleValue = (
 props: SingleValueProps<TokenOption> & CustomSingleValueProps
) => (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !== DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
) => {
 return (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 </Flex>
 ) : null}
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !==
 DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: just column
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 </Flex>
 </Flex>
 </Flex>
 </Flex>
</components.SingleValue>
)
 </components.SingleValue>
)
}

const CustomOption = (props: OptionProps<TokenOption>) => {
 const { spacing, cornerRadius, color } = useTheme()
Expand DownExpand Up@@ -180,6 +183,7 @@ export const DropdownSection = ({
 ph='m'
 borderRadius='s'
 css={{
 maxHeight: spacing.unit16,
 cursor: isClickable ? 'pointer' : 'default',
 '&:hover': isClickable
 ? {
Expand Down

3 changes: 2 additions & 1 deletion
packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -180,7 +180,8 @@ export const YourCoins = () => {
 userId: userIdString || ''
 })

 const coinPairs = useGroupCoinPairs(artistCoins)
 const { isMobile, isTablet } = useMedia()
 const coinPairs = useGroupCoinPairs(artistCoins, isMobile || isTablet)

 if (isLoadingCoins || !userIdString) {
 return <YourCoinsSkeleton />
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Fix buy-sell modal error handling and UI improvements#12728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

faridsalau
merged 2 commits into

from

Aug 14, 2025
 Merged


Fix buy-sell modal error handling and UI improvements
#12728
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
cd793c6

Fix buy-sell modal error handling and UI improvements


faridsalau Aug 13, 2025
38857b8

Remove comment


faridsalau Aug 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 33 additions & 5 deletions
packages/common/src/store/ui/buy-sell/swapFormSchema.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
import { FixedDecimal } from '@audius/fixed-decimal'
import { z } from 'zod'

import { buySellMessages as messages } from '../../../messages'
Expand All@@ -9,7 +10,8 @@ export const createSwapFormSchema = (
 min: number = 0,
 max: number = Number.MAX_SAFE_INTEGER,
 balance: number | undefined = undefined,
 tokenSymbol: string = ''
 tokenSymbol: string = '',
 decimals: number = 8
) =>
 z.object({
 inputAmount: z
Expand All@@ -18,7 +20,13 @@ export const createSwapFormSchema = (
 (val) => {
 // Allow empty string during typing, but require it for final validation
 if (val === '') return false
 return !isNaN(parseFloat(val))
 try {
 // eslint-disable-next-line no-new
 new FixedDecimal(val, decimals)
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: instead of eslint disable, would _ = new FixedDecimal() work?
 return true
 } catch {
 return false
 }
 },
 {
 message: messages.emptyAmount
Expand All@@ -27,7 +35,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) >= min
 try {
 const amount = new FixedDecimal(val, decimals)
 const minAmount = new FixedDecimal(min, decimals)
 return amount.value >= minAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.minAmount(min, tokenSymbol)
Expand All@@ -36,7 +50,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) <= max
 try {
 const amount = new FixedDecimal(val, decimals)
 const maxAmount = new FixedDecimal(max, decimals)
 return amount.value <= maxAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.maxAmount(max, tokenSymbol)
Expand All@@ -45,7 +65,15 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return !balance || parseFloat(val) <= balance
 // Treat only null/undefined as "unknown balance"; do not bypass check for numeric 0
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty for comment
 if (balance == null || balance === undefined) return true
 try {
 const amount = new FixedDecimal(val, decimals)
 const balanceAmount = new FixedDecimal(balance, decimals)
 return amount.value <= balanceAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.insufficientBalance(tokenSymbol)
Expand Down

54 changes: 36 additions & 18 deletions
packages/common/src/store/ui/buy-sell/useGroupCoinPairs.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
import { useMemo } from 'react'

import { UserCoin } from '~/api'
import { useQueryContext, UserCoin } from '~/api'
import { useFeatureFlag } from '~/hooks'
import { FeatureFlags } from '~/services'

export type CoinPairItem = UserCoin | 'find-more'

/**
 * Groups coins into pairs for 2-column layout rendering.
 * Groups coins into pairs for responsive layout rendering.
 * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
 * based on the ARTIST_COINS feature flag.
 *
 * @param coins Array of user coins
 * @param singleColumn Whether to force single column layout (1 item per row)
 * @returns Array of coin pairs, where each pair contains 1-2 items
 */
export const useGroupCoinPairs = (coins?: UserCoin[]) => {
export const useGroupCoinPairs = (coins?: UserCoin[], singleColumn = false) => {
 const { env } = useQueryContext()
 const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
 FeatureFlags.ARTIST_COINS
 )
Expand All@@ -23,27 +25,43 @@ export const useGroupCoinPairs = (coins?: UserCoin[]) => {
 if (!coins) return []

 // Filter out USDC coins
 const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
 const filteredCoins = coins.filter((coin) => {
 if (!isArtistCoinsEnabled) return coin.mint === env.WAUDIO_MINT_ADDRESS
 return coin.ticker !== 'USDC' && coin.balance > 0
 })

 // Group coins into pairs for row rendering
 // Group coins for responsive layout
 const coinPairs: CoinPairItem[][] = []

 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 if (singleColumn) {
 // Single column layout - each coin gets its own row
 filteredCoins.forEach((coin) => {
 coinPairs.push([coin])
 })

 // Add FindMoreCoins in its own row if artist coins enabled
 if (isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 } else {
 // Two column layout - group coins into pairs
 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 }
 coinPairs.push(pair)
 }
 coinPairs.push(pair)
 }

 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 }

 return coinPairs
 }, [coins, isArtistCoinsEnabled])
 }, [coins, env.WAUDIO_MINT_ADDRESS, isArtistCoinsEnabled, singleColumn])
}

50 changes: 37 additions & 13 deletions
packages/common/src/store/ui/buy-sell/useTokenSwapForm.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
import { useCallback, useEffect, useMemo } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'

import { useFormik } from 'formik'
import { toFormikValidationSchema } from 'zod-formik-adapter'

import { buySellMessages as messages } from '~/messages'

import { useTokenExchangeRate, useTokenPrice } from '../../../api'

import { MIN_SWAP_AMOUNT_USD, MAX_SWAP_AMOUNT_USD } from './constants'
Expand DownExpand Up@@ -139,9 +137,15 @@ export const useTokenSwapForm = ({
 // Create validation schema
 const validationSchema = useMemo(() => {
 return toFormikValidationSchema(
 createSwapFormSchema(min, max, availableBalance, inputToken.symbol)
 createSwapFormSchema(
 min,
 max,
 availableBalance,
 inputToken.symbol,
 inputToken.decimals
 )
 )
 }, [min, max, availableBalance, inputToken.symbol])
 }, [min, max, availableBalance, inputToken.symbol, inputToken.decimals])

 // Initialize form with Formik
 const formik = useFormik<SwapFormValues>({
Expand All@@ -167,6 +171,20 @@ export const useTokenSwapForm = ({
 }
 }, [initialInputValue, values.inputAmount, setFieldValue])

 // Re-validate input when token or balance changes. Guard to avoid infinite loops.
 const lastValidationKeyRef = useRef<string | null>(null)
 // Only re-validate on actual token change to avoid recursive updates during balance polling
 const tokenValidationKey = inputToken.address
 useEffect(() => {
 if (!values.inputAmount || values.inputAmount === '') return
 if (lastValidationKeyRef.current !== tokenValidationKey) {
 lastValidationKeyRef.current = tokenValidationKey
 setFieldTouched('inputAmount', true, true)
 // Explicitly validate to refresh errors for the new token
 formik.validateForm()
 }
 }, [tokenValidationKey, values.inputAmount, setFieldTouched, formik])

 // Calculate the numeric value of the input amount
 const numericInputAmount = useMemo(() => {
 if (!values.inputAmount) return 0
Expand DownExpand Up@@ -234,17 +252,22 @@ export const useTokenSwapForm = ({
 return errors.inputAmount
 }, [touched.inputAmount, errors.inputAmount, values.inputAmount])

 // Derive if current error is specifically an insufficient balance error
 // Derive insufficient balance directly from numeric values to avoid schema or message coupling
 const isInsufficientBalance = useMemo(() => {
 return (
 formik.errors.inputAmount ===
 messages.insufficientBalance(inputToken.symbol)
 )
 }, [formik.errors.inputAmount, inputToken.symbol])
 if (isBalanceLoading) return false
 if (values.inputAmount === '') return false
 return numericInputAmount > availableBalance
 }, [
 isBalanceLoading,
 values.inputAmount,
 numericInputAmount,
 availableBalance
 ])

 useEffect(() => {
 if (onTransactionDataChange) {
 const isValid = numericInputAmount > 0 && !errors.inputAmount
 const isValid =
 numericInputAmount > 0 && !errors.inputAmount && !isBalanceLoading

 onTransactionDataChange({
 inputAmount: numericInputAmount,
Expand All@@ -263,7 +286,8 @@ export const useTokenSwapForm = ({
 isExchangeRateLoading,
 onTransactionDataChange,
 isInsufficientBalance,
 currentExchangeRate
 currentExchangeRate,
 isBalanceLoading
 ])

 // Handle input changes
Expand Down

11 changes: 9 additions & 2 deletions
packages/web/src/components/buy-sell-modal/BuySellFlow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -322,8 +322,15 @@ export const BuySellFlow = (props: BuySellFlowProps) => {
 if (activeTab === 'sell' && !hasSufficientBalance) {
 return messages.insufficientAUDIOForSale
 }
 // Prioritize the specific validation error from the form
 if (hasAttemptedSubmit && transactionData?.error) {
 // Show validation errors immediately for sell and convert tabs (like insufficient balance)
 if (
 (activeTab === 'sell' || activeTab === 'convert') &&
 transactionData?.error
 ) {
 return transactionData.error
 }
 // For buy tab, only show validation errors after attempted submit
 if (activeTab === 'buy' && hasAttemptedSubmit && transactionData?.error) {
 return transactionData.error
 }
 // Fallback for empty input, though zod should handle it via transactionData.error
Expand Down

66 changes: 35 additions & 31 deletions
packages/web/src/components/buy-sell-modal/DropdownSection.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,40 +39,43 @@ type CustomSingleValueProps = {

const CustomSingleValue = (
 props: SingleValueProps<TokenOption> & CustomSingleValueProps
) => (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !== DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
) => {
 return (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 </Flex>
 ) : null}
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !==
 DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: just column
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 </Flex>
 </Flex>
 </Flex>
 </Flex>
</components.SingleValue>
)
 </components.SingleValue>
)
}

const CustomOption = (props: OptionProps<TokenOption>) => {
 const { spacing, cornerRadius, color } = useTheme()
Expand DownExpand Up@@ -180,6 +183,7 @@ export const DropdownSection = ({
 ph='m'
 borderRadius='s'
 css={{
 maxHeight: spacing.unit16,
 cursor: isClickable ? 'pointer' : 'default',
 '&:hover': isClickable
 ? {
Expand Down

3 changes: 2 additions & 1 deletion
packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -180,7 +180,8 @@ export const YourCoins = () => {
 userId: userIdString || ''
 })

 const coinPairs = useGroupCoinPairs(artistCoins)
 const { isMobile, isTablet } = useMedia()
 const coinPairs = useGroupCoinPairs(artistCoins, isMobile || isTablet)

 if (isLoadingCoins || !userIdString) {
 return <YourCoinsSkeleton />
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
Fix buy-sell modal error handling and UI improvements#12728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

faridsalau
merged 2 commits into

from

Aug 14, 2025
 Merged


Fix buy-sell modal error handling and UI improvements
#12728
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
cd793c6

Fix buy-sell modal error handling and UI improvements


faridsalau Aug 13, 2025
38857b8

Remove comment


faridsalau Aug 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 33 additions & 5 deletions
packages/common/src/store/ui/buy-sell/swapFormSchema.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
import { FixedDecimal } from '@audius/fixed-decimal'
import { z } from 'zod'

import { buySellMessages as messages } from '../../../messages'
Expand All@@ -9,7 +10,8 @@ export const createSwapFormSchema = (
 min: number = 0,
 max: number = Number.MAX_SAFE_INTEGER,
 balance: number | undefined = undefined,
 tokenSymbol: string = ''
 tokenSymbol: string = '',
 decimals: number = 8
) =>
 z.object({
 inputAmount: z
Expand All@@ -18,7 +20,13 @@ export const createSwapFormSchema = (
 (val) => {
 // Allow empty string during typing, but require it for final validation
 if (val === '') return false
 return !isNaN(parseFloat(val))
 try {
 // eslint-disable-next-line no-new
 new FixedDecimal(val, decimals)
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: instead of eslint disable, would _ = new FixedDecimal() work?
 return true
 } catch {
 return false
 }
 },
 {
 message: messages.emptyAmount
Expand All@@ -27,7 +35,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) >= min
 try {
 const amount = new FixedDecimal(val, decimals)
 const minAmount = new FixedDecimal(min, decimals)
 return amount.value >= minAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.minAmount(min, tokenSymbol)
Expand All@@ -36,7 +50,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) <= max
 try {
 const amount = new FixedDecimal(val, decimals)
 const maxAmount = new FixedDecimal(max, decimals)
 return amount.value <= maxAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.maxAmount(max, tokenSymbol)
Expand All@@ -45,7 +65,15 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return !balance || parseFloat(val) <= balance
 // Treat only null/undefined as "unknown balance"; do not bypass check for numeric 0
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty for comment
 if (balance == null || balance === undefined) return true
 try {
 const amount = new FixedDecimal(val, decimals)
 const balanceAmount = new FixedDecimal(balance, decimals)
 return amount.value <= balanceAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.insufficientBalance(tokenSymbol)
Expand Down

54 changes: 36 additions & 18 deletions
packages/common/src/store/ui/buy-sell/useGroupCoinPairs.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
import { useMemo } from 'react'

import { UserCoin } from '~/api'
import { useQueryContext, UserCoin } from '~/api'
import { useFeatureFlag } from '~/hooks'
import { FeatureFlags } from '~/services'

export type CoinPairItem = UserCoin | 'find-more'

/**
 * Groups coins into pairs for 2-column layout rendering.
 * Groups coins into pairs for responsive layout rendering.
 * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
 * based on the ARTIST_COINS feature flag.
 *
 * @param coins Array of user coins
 * @param singleColumn Whether to force single column layout (1 item per row)
 * @returns Array of coin pairs, where each pair contains 1-2 items
 */
export const useGroupCoinPairs = (coins?: UserCoin[]) => {
export const useGroupCoinPairs = (coins?: UserCoin[], singleColumn = false) => {
 const { env } = useQueryContext()
 const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
 FeatureFlags.ARTIST_COINS
 )
Expand All@@ -23,27 +25,43 @@ export const useGroupCoinPairs = (coins?: UserCoin[]) => {
 if (!coins) return []

 // Filter out USDC coins
 const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
 const filteredCoins = coins.filter((coin) => {
 if (!isArtistCoinsEnabled) return coin.mint === env.WAUDIO_MINT_ADDRESS
 return coin.ticker !== 'USDC' && coin.balance > 0
 })

 // Group coins into pairs for row rendering
 // Group coins for responsive layout
 const coinPairs: CoinPairItem[][] = []

 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 if (singleColumn) {
 // Single column layout - each coin gets its own row
 filteredCoins.forEach((coin) => {
 coinPairs.push([coin])
 })

 // Add FindMoreCoins in its own row if artist coins enabled
 if (isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 } else {
 // Two column layout - group coins into pairs
 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 }
 coinPairs.push(pair)
 }
 coinPairs.push(pair)
 }

 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 }

 return coinPairs
 }, [coins, isArtistCoinsEnabled])
 }, [coins, env.WAUDIO_MINT_ADDRESS, isArtistCoinsEnabled, singleColumn])
}

50 changes: 37 additions & 13 deletions
packages/common/src/store/ui/buy-sell/useTokenSwapForm.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
import { useCallback, useEffect, useMemo } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'

import { useFormik } from 'formik'
import { toFormikValidationSchema } from 'zod-formik-adapter'

import { buySellMessages as messages } from '~/messages'

import { useTokenExchangeRate, useTokenPrice } from '../../../api'

import { MIN_SWAP_AMOUNT_USD, MAX_SWAP_AMOUNT_USD } from './constants'
Expand DownExpand Up@@ -139,9 +137,15 @@ export const useTokenSwapForm = ({
 // Create validation schema
 const validationSchema = useMemo(() => {
 return toFormikValidationSchema(
 createSwapFormSchema(min, max, availableBalance, inputToken.symbol)
 createSwapFormSchema(
 min,
 max,
 availableBalance,
 inputToken.symbol,
 inputToken.decimals
 )
 )
 }, [min, max, availableBalance, inputToken.symbol])
 }, [min, max, availableBalance, inputToken.symbol, inputToken.decimals])

 // Initialize form with Formik
 const formik = useFormik<SwapFormValues>({
Expand All@@ -167,6 +171,20 @@ export const useTokenSwapForm = ({
 }
 }, [initialInputValue, values.inputAmount, setFieldValue])

 // Re-validate input when token or balance changes. Guard to avoid infinite loops.
 const lastValidationKeyRef = useRef<string | null>(null)
 // Only re-validate on actual token change to avoid recursive updates during balance polling
 const tokenValidationKey = inputToken.address
 useEffect(() => {
 if (!values.inputAmount || values.inputAmount === '') return
 if (lastValidationKeyRef.current !== tokenValidationKey) {
 lastValidationKeyRef.current = tokenValidationKey
 setFieldTouched('inputAmount', true, true)
 // Explicitly validate to refresh errors for the new token
 formik.validateForm()
 }
 }, [tokenValidationKey, values.inputAmount, setFieldTouched, formik])

 // Calculate the numeric value of the input amount
 const numericInputAmount = useMemo(() => {
 if (!values.inputAmount) return 0
Expand DownExpand Up@@ -234,17 +252,22 @@ export const useTokenSwapForm = ({
 return errors.inputAmount
 }, [touched.inputAmount, errors.inputAmount, values.inputAmount])

 // Derive if current error is specifically an insufficient balance error
 // Derive insufficient balance directly from numeric values to avoid schema or message coupling
 const isInsufficientBalance = useMemo(() => {
 return (
 formik.errors.inputAmount ===
 messages.insufficientBalance(inputToken.symbol)
 )
 }, [formik.errors.inputAmount, inputToken.symbol])
 if (isBalanceLoading) return false
 if (values.inputAmount === '') return false
 return numericInputAmount > availableBalance
 }, [
 isBalanceLoading,
 values.inputAmount,
 numericInputAmount,
 availableBalance
 ])

 useEffect(() => {
 if (onTransactionDataChange) {
 const isValid = numericInputAmount > 0 && !errors.inputAmount
 const isValid =
 numericInputAmount > 0 && !errors.inputAmount && !isBalanceLoading

 onTransactionDataChange({
 inputAmount: numericInputAmount,
Expand All@@ -263,7 +286,8 @@ export const useTokenSwapForm = ({
 isExchangeRateLoading,
 onTransactionDataChange,
 isInsufficientBalance,
 currentExchangeRate
 currentExchangeRate,
 isBalanceLoading
 ])

 // Handle input changes
Expand Down

11 changes: 9 additions & 2 deletions
packages/web/src/components/buy-sell-modal/BuySellFlow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -322,8 +322,15 @@ export const BuySellFlow = (props: BuySellFlowProps) => {
 if (activeTab === 'sell' && !hasSufficientBalance) {
 return messages.insufficientAUDIOForSale
 }
 // Prioritize the specific validation error from the form
 if (hasAttemptedSubmit && transactionData?.error) {
 // Show validation errors immediately for sell and convert tabs (like insufficient balance)
 if (
 (activeTab === 'sell' || activeTab === 'convert') &&
 transactionData?.error
 ) {
 return transactionData.error
 }
 // For buy tab, only show validation errors after attempted submit
 if (activeTab === 'buy' && hasAttemptedSubmit && transactionData?.error) {
 return transactionData.error
 }
 // Fallback for empty input, though zod should handle it via transactionData.error
Expand Down

66 changes: 35 additions & 31 deletions
packages/web/src/components/buy-sell-modal/DropdownSection.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,40 +39,43 @@ type CustomSingleValueProps = {

const CustomSingleValue = (
 props: SingleValueProps<TokenOption> & CustomSingleValueProps
) => (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !== DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
) => {
 return (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 </Flex>
 ) : null}
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !==
 DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: just column
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 </Flex>
 </Flex>
 </Flex>
 </Flex>
</components.SingleValue>
)
 </components.SingleValue>
)
}

const CustomOption = (props: OptionProps<TokenOption>) => {
 const { spacing, cornerRadius, color } = useTheme()
Expand DownExpand Up@@ -180,6 +183,7 @@ export const DropdownSection = ({
 ph='m'
 borderRadius='s'
 css={{
 maxHeight: spacing.unit16,
 cursor: isClickable ? 'pointer' : 'default',
 '&:hover': isClickable
 ? {
Expand Down

3 changes: 2 additions & 1 deletion
packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -180,7 +180,8 @@ export const YourCoins = () => {
 userId: userIdString || ''
 })

 const coinPairs = useGroupCoinPairs(artistCoins)
 const { isMobile, isTablet } = useMedia()
 const coinPairs = useGroupCoinPairs(artistCoins, isMobile || isTablet)

 if (isLoadingCoins || !userIdString) {
 return <YourCoinsSkeleton />
Expand Down

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
Fix buy-sell modal error handling and UI improvements#12728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

 Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and
privacy statement. We’ll occasionally send you account related emails.

Already on GitHub?
Sign in
to your account

 Merged

faridsalau
merged 2 commits into

from

Aug 14, 2025
 Merged


Fix buy-sell modal error handling and UI improvements
#12728
Show file tree
Hide file tree
 Changes from all commits
Commits

Show all changes


2 commits


Select commit
Hold shift + click to select a range
cd793c6

Fix buy-sell modal error handling and UI improvements


faridsalau Aug 13, 2025
38857b8

Remove comment


faridsalau Aug 13, 2025

File filter

Filter by extension
Filter by extension
Conversations

Failed to load comments. 
Loading
Jump to

Jump to file


Failed to load files. 
Loading
 Diff view

 Diff view


38 changes: 33 additions & 5 deletions
packages/common/src/store/ui/buy-sell/swapFormSchema.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
import { FixedDecimal } from '@audius/fixed-decimal'
import { z } from 'zod'

import { buySellMessages as messages } from '../../../messages'
Expand All@@ -9,7 +10,8 @@ export const createSwapFormSchema = (
 min: number = 0,
 max: number = Number.MAX_SAFE_INTEGER,
 balance: number | undefined = undefined,
 tokenSymbol: string = ''
 tokenSymbol: string = '',
 decimals: number = 8
) =>
 z.object({
 inputAmount: z
Expand All@@ -18,7 +20,13 @@ export const createSwapFormSchema = (
 (val) => {
 // Allow empty string during typing, but require it for final validation
 if (val === '') return false
 return !isNaN(parseFloat(val))
 try {
 // eslint-disable-next-line no-new
 new FixedDecimal(val, decimals)
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

super nit: instead of eslint disable, would _ = new FixedDecimal() work?
 return true
 } catch {
 return false
 }
 },
 {
 message: messages.emptyAmount
Expand All@@ -27,7 +35,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) >= min
 try {
 const amount = new FixedDecimal(val, decimals)
 const minAmount = new FixedDecimal(min, decimals)
 return amount.value >= minAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.minAmount(min, tokenSymbol)
Expand All@@ -36,7 +50,13 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return parseFloat(val) <= max
 try {
 const amount = new FixedDecimal(val, decimals)
 const maxAmount = new FixedDecimal(max, decimals)
 return amount.value <= maxAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.maxAmount(max, tokenSymbol)
Expand All@@ -45,7 +65,15 @@ export const createSwapFormSchema = (
 .refine(
 (val) => {
 if (val === '') return false
 return !balance || parseFloat(val) <= balance
 // Treat only null/undefined as "unknown balance"; do not bypass check for numeric 0
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ty for comment
 if (balance == null || balance === undefined) return true
 try {
 const amount = new FixedDecimal(val, decimals)
 const balanceAmount = new FixedDecimal(balance, decimals)
 return amount.value <= balanceAmount.value
 } catch {
 return false
 }
 },
 {
 message: messages.insufficientBalance(tokenSymbol)
Expand Down

54 changes: 36 additions & 18 deletions
packages/common/src/store/ui/buy-sell/useGroupCoinPairs.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,20 +1,22 @@
import { useMemo } from 'react'

import { UserCoin } from '~/api'
import { useQueryContext, UserCoin } from '~/api'
import { useFeatureFlag } from '~/hooks'
import { FeatureFlags } from '~/services'

export type CoinPairItem = UserCoin | 'find-more'

/**
 * Groups coins into pairs for 2-column layout rendering.
 * Groups coins into pairs for responsive layout rendering.
 * Filters out USDC coins and optionally pairs remaining coins with FindMoreCoins component
 * based on the ARTIST_COINS feature flag.
 *
 * @param coins Array of user coins
 * @param singleColumn Whether to force single column layout (1 item per row)
 * @returns Array of coin pairs, where each pair contains 1-2 items
 */
export const useGroupCoinPairs = (coins?: UserCoin[]) => {
export const useGroupCoinPairs = (coins?: UserCoin[], singleColumn = false) => {
 const { env } = useQueryContext()
 const { isEnabled: isArtistCoinsEnabled } = useFeatureFlag(
 FeatureFlags.ARTIST_COINS
 )
Expand All@@ -23,27 +25,43 @@ export const useGroupCoinPairs = (coins?: UserCoin[]) => {
 if (!coins) return []

 // Filter out USDC coins
 const filteredCoins = coins.filter((coin) => coin.ticker !== 'USDC')
 const filteredCoins = coins.filter((coin) => {
 if (!isArtistCoinsEnabled) return coin.mint === env.WAUDIO_MINT_ADDRESS
 return coin.ticker !== 'USDC' && coin.balance > 0
 })

 // Group coins into pairs for row rendering
 // Group coins for responsive layout
 const coinPairs: CoinPairItem[][] = []

 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 if (singleColumn) {
 // Single column layout - each coin gets its own row
 filteredCoins.forEach((coin) => {
 coinPairs.push([coin])
 })

 // Add FindMoreCoins in its own row if artist coins enabled
 if (isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 } else {
 // Two column layout - group coins into pairs
 for (let i = 0; i < filteredCoins.length; i += 2) {
 const pair: CoinPairItem[] = [filteredCoins[i]]
 if (i + 1 < filteredCoins.length) {
 pair.push(filteredCoins[i + 1])
 } else if (isArtistCoinsEnabled) {
 // If odd number of coins and artist coins enabled, pair the last one with FindMoreCoins
 pair.push('find-more')
 }
 coinPairs.push(pair)
 }
 coinPairs.push(pair)
 }

 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 // If even number of coins and artist coins enabled, FindMoreCoins gets its own row
 if (filteredCoins.length % 2 === 0 && isArtistCoinsEnabled) {
 coinPairs.push(['find-more'])
 }
 }

 return coinPairs
 }, [coins, isArtistCoinsEnabled])
 }, [coins, env.WAUDIO_MINT_ADDRESS, isArtistCoinsEnabled, singleColumn])
}

50 changes: 37 additions & 13 deletions
packages/common/src/store/ui/buy-sell/useTokenSwapForm.ts

View file


Open in desktop

Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
import { useCallback, useEffect, useMemo } from 'react'
import { useCallback, useEffect, useMemo, useRef } from 'react'

import { useFormik } from 'formik'
import { toFormikValidationSchema } from 'zod-formik-adapter'

import { buySellMessages as messages } from '~/messages'

import { useTokenExchangeRate, useTokenPrice } from '../../../api'

import { MIN_SWAP_AMOUNT_USD, MAX_SWAP_AMOUNT_USD } from './constants'
Expand DownExpand Up@@ -139,9 +137,15 @@ export const useTokenSwapForm = ({
 // Create validation schema
 const validationSchema = useMemo(() => {
 return toFormikValidationSchema(
 createSwapFormSchema(min, max, availableBalance, inputToken.symbol)
 createSwapFormSchema(
 min,
 max,
 availableBalance,
 inputToken.symbol,
 inputToken.decimals
 )
 )
 }, [min, max, availableBalance, inputToken.symbol])
 }, [min, max, availableBalance, inputToken.symbol, inputToken.decimals])

 // Initialize form with Formik
 const formik = useFormik<SwapFormValues>({
Expand All@@ -167,6 +171,20 @@ export const useTokenSwapForm = ({
 }
 }, [initialInputValue, values.inputAmount, setFieldValue])

 // Re-validate input when token or balance changes. Guard to avoid infinite loops.
 const lastValidationKeyRef = useRef<string | null>(null)
 // Only re-validate on actual token change to avoid recursive updates during balance polling
 const tokenValidationKey = inputToken.address
 useEffect(() => {
 if (!values.inputAmount || values.inputAmount === '') return
 if (lastValidationKeyRef.current !== tokenValidationKey) {
 lastValidationKeyRef.current = tokenValidationKey
 setFieldTouched('inputAmount', true, true)
 // Explicitly validate to refresh errors for the new token
 formik.validateForm()
 }
 }, [tokenValidationKey, values.inputAmount, setFieldTouched, formik])

 // Calculate the numeric value of the input amount
 const numericInputAmount = useMemo(() => {
 if (!values.inputAmount) return 0
Expand DownExpand Up@@ -234,17 +252,22 @@ export const useTokenSwapForm = ({
 return errors.inputAmount
 }, [touched.inputAmount, errors.inputAmount, values.inputAmount])

 // Derive if current error is specifically an insufficient balance error
 // Derive insufficient balance directly from numeric values to avoid schema or message coupling
 const isInsufficientBalance = useMemo(() => {
 return (
 formik.errors.inputAmount ===
 messages.insufficientBalance(inputToken.symbol)
 )
 }, [formik.errors.inputAmount, inputToken.symbol])
 if (isBalanceLoading) return false
 if (values.inputAmount === '') return false
 return numericInputAmount > availableBalance
 }, [
 isBalanceLoading,
 values.inputAmount,
 numericInputAmount,
 availableBalance
 ])

 useEffect(() => {
 if (onTransactionDataChange) {
 const isValid = numericInputAmount > 0 && !errors.inputAmount
 const isValid =
 numericInputAmount > 0 && !errors.inputAmount && !isBalanceLoading

 onTransactionDataChange({
 inputAmount: numericInputAmount,
Expand All@@ -263,7 +286,8 @@ export const useTokenSwapForm = ({
 isExchangeRateLoading,
 onTransactionDataChange,
 isInsufficientBalance,
 currentExchangeRate
 currentExchangeRate,
 isBalanceLoading
 ])

 // Handle input changes
Expand Down

11 changes: 9 additions & 2 deletions
packages/web/src/components/buy-sell-modal/BuySellFlow.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -322,8 +322,15 @@ export const BuySellFlow = (props: BuySellFlowProps) => {
 if (activeTab === 'sell' && !hasSufficientBalance) {
 return messages.insufficientAUDIOForSale
 }
 // Prioritize the specific validation error from the form
 if (hasAttemptedSubmit && transactionData?.error) {
 // Show validation errors immediately for sell and convert tabs (like insufficient balance)
 if (
 (activeTab === 'sell' || activeTab === 'convert') &&
 transactionData?.error
 ) {
 return transactionData.error
 }
 // For buy tab, only show validation errors after attempted submit
 if (activeTab === 'buy' && hasAttemptedSubmit && transactionData?.error) {
 return transactionData.error
 }
 // Fallback for empty input, though zod should handle it via transactionData.error
Expand Down

66 changes: 35 additions & 31 deletions
packages/web/src/components/buy-sell-modal/DropdownSection.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -39,40 +39,43 @@ type CustomSingleValueProps = {

const CustomSingleValue = (
 props: SingleValueProps<TokenOption> & CustomSingleValueProps
) => (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !== DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
) => {
 return (
 <components.SingleValue {...props}>
 <Flex gap='s' alignItems='center' justifyContent='space-between' w='100%'>
 <Flex gap='s' alignItems='center'>
 <TokenIcon tokenInfo={props.data.tokenInfo} size='2xl' hex />
 <Flex direction='column'>
 {props.shouldShowLargeTicker ? (
 <Flex alignSelf='flex-start'>
 <Text variant='heading' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 {!props.hasReceiveAmount ? (
 <Text variant='title' size='s' color='default'>
 {messages.stackedBalance(props.formattedAvailableBalance!)}
 </Text>
 </Flex>
 ) : null}
 ) : null}
 {props.hasReceiveAmount &&
 props.formattedReceiveAmount !==
 DEFAULT_TOKEN_AMOUNT_PLACEHOLDER ? (
 <Flex direction='column'>
@dharit-tandharit-tanAug 13, 2025

Copy link


Copy Markdown

Contributor
Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: just column
 <Text variant='heading' size='s'>
 {props.formattedReceiveAmount}
 </Text>
 <Text variant='title' size='s' color='subdued'>
 {messages.tokenTicker(props.symbol, !!props.isStablecoin)}
 </Text>
 </Flex>
 ) : null}
 </Flex>
 </Flex>
 </Flex>
 </Flex>
</components.SingleValue>
)
 </components.SingleValue>
)
}

const CustomOption = (props: OptionProps<TokenOption>) => {
 const { spacing, cornerRadius, color } = useTheme()
Expand DownExpand Up@@ -180,6 +183,7 @@ export const DropdownSection = ({
 ph='m'
 borderRadius='s'
 css={{
 maxHeight: spacing.unit16,
 cursor: isClickable ? 'pointer' : 'default',
 '&:hover': isClickable
 ? {
Expand Down

3 changes: 2 additions & 1 deletion
packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx

View file


Open in desktop

Original file line numberDiff line numberDiff line change
Expand Up@@ -180,7 +180,8 @@ export const YourCoins = () => {
 userId: userIdString || ''
 })

 const coinPairs = useGroupCoinPairs(artistCoins)
 const { isMobile, isTablet } = useMedia()
 const coinPairs = useGroupCoinPairs(artistCoins, isMobile || isTablet)

 if (isLoadingCoins || !userIdString) {
 return <YourCoinsSkeleton />
Expand Down