') + ')', '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('^' + ".*" + ', '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" + ', '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('^' + ".*" + ', '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); } })(); })(); Fix buy-sell modal error handling and UI improvements by faridsalau · Pull Request #12728 · AudiusProject/apps · GitHub
Skip to content

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

Merged
faridsalau merged 2 commits into
mainfrom
fs-ac-swap-updates
Aug 14, 2025
Merged

Fix buy-sell modal error handling and UI improvements#12728
faridsalau merged 2 commits into
mainfrom
fs-ac-swap-updates

Conversation

@faridsalau

@faridsalaufaridsalau commented Aug 13, 2025

Copy link
Copy Markdown
Contributor

Summary

This PR fixes two main issues in the buy-sell modal and includes several UI improvements:

🐛 Bug Fixes

1. Inconsistent insufficient funds error behavior

  • Issue: On sell tab, insufficient funds errors displayed immediately when entering amount > balance
  • Issue: On convert tab, errors only displayed after clicking "Continue"
  • Fix: Updated error display logic in BuySellFlow to show validation errors immediately for both sell and convert tabs, while preserving buy tab behavior (errors only after submit attempt)

2. Improved form validation with FixedDecimal precision

  • Enhanced swapFormSchema.ts to use FixedDecimal for all numeric validations
  • Prevents floating point precision errors in min/max/balance checks
  • Added proper decimal handling based on token decimals

✨ UI Improvements

3. Responsive layout for Your Coins

  • Updated useGroupCoinPairs to support single-column layout on mobile/tablet
  • Improved coin filtering logic with proper balance checks
  • Enhanced mobile experience in pay-and-earn page

4. Form validation enhancements

  • Added token validation on token changes to refresh errors for new tokens
  • Improved insufficient balance detection logic
  • Better handling of balance loading states

5. Minor UI fixes

  • Fixed dropdown section max height
  • Improved component formatting and structure

Files Changed

  • packages/common/src/store/ui/buy-sell/swapFormSchema.ts - Enhanced validation with FixedDecimal
  • packages/common/src/store/ui/buy-sell/useTokenSwapForm.ts - Improved validation logic
  • packages/common/src/store/ui/buy-sell/useGroupCoinPairs.ts - Added responsive layout support
  • packages/web/src/components/buy-sell-modal/BuySellFlow.tsx - Fixed error display consistency
  • packages/web/src/components/buy-sell-modal/DropdownSection.tsx - Minor UI fixes
  • packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx - Added mobile responsive layout

Testing

  • Sell tab shows insufficient balance errors immediately
  • Convert tab shows insufficient balance errors immediately
  • Buy tab preserves existing behavior (errors after continue click)
  • Form validation works correctly with decimal precision
  • Mobile layout displays properly in Your Coins section

🤖 Generated with Claude Code

Description

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide repro instructions & any configuration.

@faridsalau@claude
Fix buy-sell modal error handling and UI improvements
cd793c6
## Summary
This PR fixes two main issues in the buy-sell modal and includes several UI improvements:
### 🐛 Bug Fixes
**1. Inconsistent insufficient funds error behavior**
- **Issue**: On sell tab, insufficient funds errors displayed immediately when entering amount > balance
- **Issue**: On convert tab, errors only displayed after clicking "Continue"
- **Fix**: Updated error display logic in BuySellFlow to show validation errors immediately for both sell and convert tabs, while preserving buy tab behavior (errors only after submit attempt)
**2. Improved form validation with FixedDecimal precision**
- Enhanced `swapFormSchema.ts` to use `FixedDecimal` for all numeric validations
- Prevents floating point precision errors in min/max/balance checks
- Added proper decimal handling based on token decimals
### ✨ UI Improvements
**3. Responsive layout for Your Coins**
- Updated `useGroupCoinPairs` to support single-column layout on mobile/tablet
- Improved coin filtering logic with proper balance checks
- Enhanced mobile experience in pay-and-earn page
**4. Form validation enhancements**
- Added token validation on token changes to refresh errors for new tokens
- Improved insufficient balance detection logic
- Better handling of balance loading states
**5. Minor UI fixes**
- Fixed dropdown section max height
- Improved component formatting and structure
## Files Changed
- `packages/common/src/store/ui/buy-sell/swapFormSchema.ts` - Enhanced validation with FixedDecimal
- `packages/common/src/store/ui/buy-sell/useTokenSwapForm.ts` - Improved validation logic
- `packages/common/src/store/ui/buy-sell/useGroupCoinPairs.ts` - Added responsive layout support
- `packages/web/src/components/buy-sell-modal/BuySellFlow.tsx` - Fixed error display consistency
- `packages/web/src/components/buy-sell-modal/DropdownSection.tsx` - Minor UI fixes
- `packages/web/src/pages/pay-and-earn-page/components/YourCoins.tsx` - Added mobile responsive layout
## Testing
- [x] Sell tab shows insufficient balance errors immediately
- [x] Convert tab shows insufficient balance errors immediately
- [x] Buy tab preserves existing behavior (errors after continue click)
- [x] Form validation works correctly with decimal precision
- [x] Mobile layout displays properly in Your Coins section
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
@changeset-bot

changeset-botBot commented Aug 13, 2025

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: 38857b8

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

dharit-tan
dharit-tan reviewed Aug 13, 2025
View reviewed changes
Comment threadpackages/common/src/store/ui/buy-sell/swapFormSchema.ts
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?

dharit-tan
dharit-tan reviewed Aug 13, 2025
View reviewed changes
Comment threadpackages/common/src/store/ui/buy-sell/swapFormSchema.ts
(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

dharit-tan
dharit-tan reviewed Aug 13, 2025
View reviewed changes
Comment threadpackages/web/src/components/buy-sell-modal/DropdownSection.tsx
{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

@faridsalau
faridsalau merged commit b883712 into mainAug 14, 2025
9 of 11 checks passed
@faridsalau
faridsalau deleted the fs-ac-swap-updates branch August 14, 2025 17:04
audius-infra pushed a commit that referenced this pull request Aug 16, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.148
55deb3c
[c667cb7] Fix share profile drawer issue (#12751) JD Francis
[65212e8] Fix E2E tests by fixing remix notification (#12748) Marcus Pasell
[42bb9d1] Tweak your coins skeletons (#12756) JD Francis
[f20aa78] [PE-6664] Fix small screen coin page layout issues (#12754) JD Francis
[3d82588] Fix responsiveness on AUDIO page (#12755) Farid Salau
[1f9434e] Show correct image in user badge stack on AllCoinsPage (#12753) Farid Salau
[270363a] Invalidate 'userCoins' query after swap (#12752) Farid Salau
[11b6310] [PE-6668] Update add external wallets button to send to sign up if user is not signed in (#12750) KJ
[fdb8cc9] Small lint fix (#12749) JD Francis
[e4241dc] [PE-6657] Artist coin leaderboard card (#12734) JD Francis
[edac449] Update qr code colors (#12741) Dylan Jeffers
[02b5d48] [PE-6677] Fix user badge artist coins (#12745) Dylan Jeffers
[f631cf3] Fix coin options (#12743) Dylan Jeffers
[d0ad5ae] [PE-6667] Fix token balance swap issues (#12738) JD Francis
[5c2570c] Fix listening history (#12731) Randy Schott
[d42fb2e] [PE-6636] Add receive-tokens modal. (#12725) Dylan Jeffers
[5841688] Adjust remix contest timezone (#12722) Dylan Jeffers
[b883712] Fix buy-sell modal error handling and UI improvements (#12728) Farid Salau
[7f4cb6a] Remove original param for download (#12686) Ray Jacobson
[4f88de6] [PE-6638] Update coin leaderboard user list to handle long user names (#12730) KJ
[1fb49f5] [PE-6588] Add downloads available section to search/explore (#12723) Randy Schott
[19a745e] Revert "Speed up sdk build by only building for web and native (#12391)" (#12727) Dylan Jeffers
[ddfbaa5] [PE-6621] Connected wallets UI (#12697) JD Francis
[bb58d64] Clean up unnecessary amplitude events (#12684) JD Francis
[76fd651] [PE-6651, PE-6647, PE-6634, PE-6646] Artist Coin QA 2 (#12724) KJ
[b1aec05] [PE-6637, PE-6639] Artist Coin QA 1 (#12721) KJ
[e161b05] Speed up sdk build by only building for web and native (#12391) Dylan Jeffers
[5ba4590] [PE-6608] Fix persistence of recent searches on web (#12718) Randy Schott
[d4d4a39] Web Search/Explore QA fixes (#12717) Randy Schott
[d75ae2e] [PE-6643] Add unauth state for Wallet pages (#12714) Farid Salau
[31e7687] Update Asset Detail Pages to use proper data (#12713) Farid Salau
[b50ccef] Fix trending playlists playback on web (#12712) Randy Schott
[74e5991] [QA-2163] Delete collections with tan-query (#12700) Dylan Jeffers
[515f884] Fix left-align page container (#12711) Dylan Jeffers
[3554bb2] [PE-6656] Fix dupe playlist track uids (#12715) JD Francis
[39a3f54] Add support for oembeds (#12692) Marcus Pasell
[3ccbd99] Improve mobile profile refresh (#12699) Dylan Jeffers
[b186d9b] [PE-6541] Update UserBadges to display top token (#12710) KJ
[cd468d8] [QA-2202] Improve podcast support (#12698) Dylan Jeffers
[1b2f943] add best of section back to mobile if we aren't showing new explore content (#12708) Randy Schott
[6e8f43b] Fix skeletons for title/artist on track tiles (#12707) Randy Schott
[f626163] [PE-6605] Add dropdown menu to artist coins (#12705) Farid Salau
[36e2a6a] Revert mobile Artwork changes (#12706) Farid Salau
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dylanjeffersdylanjeffersAwaiting requested review from dylanjeffers
@Kyle-ShanksKyle-ShanksAwaiting requested review from Kyle-Shanks
1 more reviewer
@dharit-tandharit-tandharit-tan approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

size/L

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dharit-tan