Skip to content

[PE-6335] Address mobile wallet UI M2 QA finds - #12296

Merged
faridsalau merged 7 commits into
mainfrom
fs-m2-mobile-fixes
Jun 10, 2025
Merged

[PE-6335] Address mobile wallet UI M2 QA finds#12296
faridsalau merged 7 commits into
mainfrom
fs-m2-mobile-fixes

Conversation

@faridsalau

@faridsalaufaridsalau commented Jun 9, 2025

Copy link
Copy Markdown
Contributor

Description

This PR addresses several critical issues in the buy/sell flow and improves input validation and error handling throughout the token swap functionality.

Key Changes

Modal Structure & Tooltip Fix

  • Created BuySellModalScreen to wrap the buy/sell flow in a proper modal stack navigator
  • Added BottomSheetModalProvider to fix tooltip functionality in buy/sell screens
  • Moved buy/sell screens from tab navigation to modal navigation for better UX

Input Validation & Safety

  • Added maximum safe amount limits to prevent API errors and overflow issues
  • Implemented input sanitization to remove invalid characters while preserving user intent
  • Added safety checks for extremely large numbers in exchange rate calculations
  • Enhanced USDC value formatting with overflow protection

Tab State Management

  • Fixed input revalidation when switching between buy/sell tabs
  • Improved tab state persistence by keeping both screens mounted
  • Enhanced error display logic to show errors only for the active tab's input
  • Added separate input handlers for buy and sell tabs

UI/UX Improvements

  • Created reusable FixedFooter component for consistent bottom button placement
  • Updated BuySellFlow to use new footer pattern with sticky continue button
  • Improved error message display logic to prevent showing errors for empty inputs
  • Enhanced keyboard handling and safe area management

Technical Details

  • Added safety limits for exchange rate API calls (1 trillion token cap)
  • Implemented proper numeric input sanitization
  • Enhanced form validation with better error state management
  • Improved component structure for better maintainability

Testing

  • Tooltip functionality now works correctly in all buy/sell screens
  • Input validation prevents crashes from extremely large numbers
  • Tab switching preserves state and shows appropriate errors
  • Fixed footer buttons don't obscure content

How Has This Been Tested?

npm run ios:prod and play around with mobile buy sell flow

@changeset-bot

changeset-botBot commented Jun 9, 2025

Copy link
Copy Markdown

⚠️ No Changeset found

Latest commit: b827d7c

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

dylanjeffers
dylanjeffers approved these changes Jun 9, 2025
View reviewed changes
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
@@ -0,0 +1,89 @@
import type { ReactNode } from 'react'

@dylanjeffersdylanjeffersJun 9, 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.

I know we have quite a few implementations of this, could you spend a sec reviewing all the implementations and determining if they could be reused here or whether this should be the standard going forward?

Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/screens/app-screen/AppTabScreen.tsx
/>
<Stack.Screen name='ChangeEmail' component={ChangeEmailModalScreen} />
</Stack.Group>
<Stack.Group>

@dylanjeffersdylanjeffersJun 9, 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.

Interesting so we are going away from the stack group? What's main rationale here? State management?

Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellModalScreen.tsx
<BottomSheetModalProvider>
<Stack.Navigator screenOptions={screenOptions}>
<Stack.Screen
name='BuySell'

@dylanjeffersdylanjeffersJun 9, 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.

Oh jk just moved over here, excellent. Can you share this context with Reed because I think his flow may benefit from this too

Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellScreen.tsx
navigation.goBack()
}

const flowData = BuySellFlow({

@dylanjeffersdylanjeffersJun 9, 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.

Cool what's this pattern?

@faridsalaufaridsalauJun 10, 2025

Copy link
Copy Markdown
ContributorAuthor

Choose a reason for hiding this comment

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

needed it to properly render the fixed footer

@faridsalau
faridsalau merged commit e692901 into mainJun 10, 2025
@faridsalau
faridsalau deleted the fs-m2-mobile-fixes branch June 10, 2025 16:29
audius-infra pushed a commit that referenced this pull request Jun 14, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.139
12f3bac
[8d4f0ca] [PE-6389] Explore screen refactor and performance (#12321) Dylan Jeffers
[02381bf] Add avoidable keyboard to buy/sell flow (#12328) Farid Salau
[31c1d5f] [PE-6338] Fix confetti (#12316) JD Francis
[f7e0aa1] [QA-2093] Fix comment history alignment and add full width prop on user links (#12326) KJ
[5997b15] More withdraw UI cleanup (#12327) Reed
[2045aa1] Fix listening history not showing items (#12322) JD Francis
[4876c94] [QA-2122] Fix track stats alignment by removing margin (#12325) KJ
[cefd8cf] [QA-2138] Remove max-width on playlist tiles for mobile web (#12324) KJ
[cdbca04] Mobile withdraw flow validation updates (#12317) Reed
[cfd2741] Add a minimum and maximum value to Buy/Sell flow (#12323) Farid Salau
[9573612] Stop error message flash on sell tab of Buy/Sell (#12310) Farid Salau
[21c1649] [PE-6337] Fix mobile sign out not working (#12318) JD Francis
[2042bb5] QA fixes for mobile explore: reseting search params and scroll + more (#12320) Isaac Solo
[4f19567] Refactor mobile left nav drawer to improve performance (#12314) Dylan Jeffers
[5ed2795] [PE-6375] Add loading state for brief sign in state (#12319) JD Francis
[7f20217] Fix text-link navigation to push (#12308) Dylan Jeffers
[c698239] Standardize query-collection options, fix refresh (#12307) Dylan Jeffers
[3294109] Add collapsing explore header animation (#12312) Isaac Solo
[8113778] Fix mobile profiles not loading (#12315) JD Francis
[c9d8b65] [PE-6224] Refactor mobile lineup-tiles for simplicity and performance (#12313) Dylan Jeffers
[2825a43] Improve feature flag performance (#12311) Dylan Jeffers
[f487fe5] Mobiles keyboard-avoiding withdraw drawer (#12306) Reed
[04ea576] [PE-6379] Fix refetching collection by permalink (#12304) Dylan Jeffers
[cc5d877] Fix missing track in upload complete screen (#12305) Dylan Jeffers
[e20aa89] Update remixes query page param calculation to account for original track in lineup (#12303) KJ
[a11c528] Fix negative limit (#12181) Farid Salau
[a4f5567] [PE-6345|PE-6351] Dep all users cache & almost all of entity cache (#12300) JD Francis
[ffba4c7] Fix mobile upload stuck at 100% (#12301) Dylan Jeffers
[1e42882] [PE-6245PE-6246] Fix mobile/web drawer behavior (#12297) Dylan Jeffers
[385c930] Fix mobile web track artwork loading (#12299) Dylan Jeffers
[d7a1778] Add remix contest card + minor fixes to mobile explore (#12298) Isaac Solo
[e692901] [PE-6335] Address mobile wallet UI M2 QA finds (#12296) Farid Salau
[8fae645] [PE-6181] Mobile withdraw flow (#12290) Reed
[eb91d5d] Fix library loading (#12288) Dylan Jeffers
[438384e] Fix remix contest section initial tab (#12295) Dylan Jeffers
[df6c087] (account fix) Fix left nav not showing (#12292) JD Francis
[7d07905] [PE-6341] Fix remix contest track page displaying empty track lineup section (#12294) KJ
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@dharit-tandharit-tanAwaiting requested review from dharit-tan

Assignees

No one assigned

Labels

size/XL

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers
, '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" + '
[PE-6335] Address mobile wallet UI M2 QA finds by faridsalau · Pull Request #12296 · AudiusProject/apps · GitHub
Skip to content
[PE-6335] Address mobile wallet UI M2 QA finds - #12296
Merged
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Jun 10, 2025
Merged
[PE-6335] Address mobile wallet UI M2 QA finds#12296
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jun 9, 2025

Copy link


Copy Markdown

Contributor
Description
This PR addresses several critical issues in the buy/sell flow and improves input validation and error handling throughout the token swap functionality.
Key Changes
Modal Structure & Tooltip Fix
  • Created BuySellModalScreen to wrap the buy/sell flow in a proper modal stack navigator
  • Added BottomSheetModalProvider to fix tooltip functionality in buy/sell screens
  • Moved buy/sell screens from tab navigation to modal navigation for better UX
Input Validation & Safety
  • Added maximum safe amount limits to prevent API errors and overflow issues
  • Implemented input sanitization to remove invalid characters while preserving user intent
  • Added safety checks for extremely large numbers in exchange rate calculations
  • Enhanced USDC value formatting with overflow protection
Tab State Management
  • Fixed input revalidation when switching between buy/sell tabs
  • Improved tab state persistence by keeping both screens mounted
  • Enhanced error display logic to show errors only for the active tab's input
  • Added separate input handlers for buy and sell tabs
UI/UX Improvements
  • Created reusable FixedFooter component for consistent bottom button placement
  • Updated BuySellFlow to use new footer pattern with sticky continue button
  • Improved error message display logic to prevent showing errors for empty inputs
  • Enhanced keyboard handling and safe area management
Technical Details
  • Added safety limits for exchange rate API calls (1 trillion token cap)
  • Implemented proper numeric input sanitization
  • Enhanced form validation with better error state management
  • Improved component structure for better maintainability
Testing
  • Tooltip functionality now works correctly in all buy/sell screens
  • Input validation prevents crashes from extremely large numbers
  • Tab switching preserves state and shows appropriate errors
  • Fixed footer buttons don't obscure content
How Has This Been Tested?
npm run ios:prod and play around with mobile buy sell flow
@changeset-bot
changeset-botBot
commented
Jun 9, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: b827d7c
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
dylanjeffers
dylanjeffers
approved these changes
Jun 9, 2025
View reviewed changes
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
@@ -0,0 +1,89 @@
import type { ReactNode } from 'react'
@dylanjeffersdylanjeffersJun 9, 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.

I know we have quite a few implementations of this, could you spend a sec reviewing all the implementations and determining if they could be reused here or whether this should be the standard going forward?
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/screens/app-screen/AppTabScreen.tsx
 />
 <Stack.Screen name='ChangeEmail' component={ChangeEmailModalScreen} />
 </Stack.Group>
 <Stack.Group>
@dylanjeffersdylanjeffersJun 9, 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.

Interesting so we are going away from the stack group? What's main rationale here? State management?
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellModalScreen.tsx
 <BottomSheetModalProvider>
 <Stack.Navigator screenOptions={screenOptions}>
 <Stack.Screen
 name='BuySell'
@dylanjeffersdylanjeffersJun 9, 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.

Oh jk just moved over here, excellent. Can you share this context with Reed because I think his flow may benefit from this too
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellScreen.tsx
 navigation.goBack()
 }

 const flowData = BuySellFlow({
@dylanjeffersdylanjeffersJun 9, 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.

Cool what's this pattern?
@faridsalaufaridsalauJun 10, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

needed it to properly render the fixed footer
@faridsalau
faridsalau
merged commit e692901
into
mainJun 10, 2025
@faridsalau
faridsalau
deleted the

fs-m2-mobile-fixes

branch
June 10, 2025 16:29
audius-infra pushed a commit
that referenced
this pull request
Jun 14, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.139
12f3bac
[8d4f0ca] [PE-6389] Explore screen refactor and performance (#12321) Dylan Jeffers
[02381bf] Add avoidable keyboard to buy/sell flow (#12328) Farid Salau
[31c1d5f] [PE-6338] Fix confetti (#12316) JD Francis
[f7e0aa1] [QA-2093] Fix comment history alignment and add full width prop on user links (#12326) KJ
[5997b15] More withdraw UI cleanup (#12327) Reed
[2045aa1] Fix listening history not showing items (#12322) JD Francis
[4876c94] [QA-2122] Fix track stats alignment by removing margin (#12325) KJ
[cefd8cf] [QA-2138] Remove max-width on playlist tiles for mobile web (#12324) KJ
[cdbca04] Mobile withdraw flow validation updates (#12317) Reed
[cfd2741] Add a minimum and maximum value to Buy/Sell flow (#12323) Farid Salau
[9573612] Stop error message flash on sell tab of Buy/Sell (#12310) Farid Salau
[21c1649] [PE-6337] Fix mobile sign out not working (#12318) JD Francis
[2042bb5] QA fixes for mobile explore: reseting search params and scroll + more (#12320) Isaac Solo
[4f19567] Refactor mobile left nav drawer to improve performance (#12314) Dylan Jeffers
[5ed2795] [PE-6375] Add loading state for brief sign in state (#12319) JD Francis
[7f20217] Fix text-link navigation to push (#12308) Dylan Jeffers
[c698239] Standardize query-collection options, fix refresh (#12307) Dylan Jeffers
[3294109] Add collapsing explore header animation (#12312) Isaac Solo
[8113778] Fix mobile profiles not loading (#12315) JD Francis
[c9d8b65] [PE-6224] Refactor mobile lineup-tiles for simplicity and performance (#12313) Dylan Jeffers
[2825a43] Improve feature flag performance (#12311) Dylan Jeffers
[f487fe5] Mobiles keyboard-avoiding withdraw drawer (#12306) Reed
[04ea576] [PE-6379] Fix refetching collection by permalink (#12304) Dylan Jeffers
[cc5d877] Fix missing track in upload complete screen (#12305) Dylan Jeffers
[e20aa89] Update remixes query page param calculation to account for original track in lineup (#12303) KJ
[a11c528] Fix negative limit (#12181) Farid Salau
[a4f5567] [PE-6345|PE-6351] Dep all users cache & almost all of entity cache (#12300) JD Francis
[ffba4c7] Fix mobile upload stuck at 100% (#12301) Dylan Jeffers
[1e42882] [PE-6245PE-6246] Fix mobile/web drawer behavior (#12297) Dylan Jeffers
[385c930] Fix mobile web track artwork loading (#12299) Dylan Jeffers
[d7a1778] Add remix contest card + minor fixes to mobile explore (#12298) Isaac Solo
[e692901] [PE-6335] Address mobile wallet UI M2 QA finds (#12296) Farid Salau
[8fae645] [PE-6181] Mobile withdraw flow (#12290) Reed
[eb91d5d] Fix library loading (#12288) Dylan Jeffers
[438384e] Fix remix contest section initial tab (#12295) Dylan Jeffers
[df6c087] (account fix) Fix left nav not showing (#12292) JD Francis
[7d07905] [PE-6341] Fix remix contest track page displaying empty track lineup section (#12294) KJ
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@dharit-tandharit-tanAwaiting requested review from dharit-tan

Assignees


No one assigned


Labels

size/XL

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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('^' + ".*" + '
[PE-6335] Address mobile wallet UI M2 QA finds by faridsalau · Pull Request #12296 · AudiusProject/apps · GitHub
Skip to content
[PE-6335] Address mobile wallet UI M2 QA finds - #12296
Merged
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Jun 10, 2025
Merged
[PE-6335] Address mobile wallet UI M2 QA finds#12296
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jun 9, 2025

Copy link


Copy Markdown

Contributor
Description
This PR addresses several critical issues in the buy/sell flow and improves input validation and error handling throughout the token swap functionality.
Key Changes
Modal Structure & Tooltip Fix
  • Created BuySellModalScreen to wrap the buy/sell flow in a proper modal stack navigator
  • Added BottomSheetModalProvider to fix tooltip functionality in buy/sell screens
  • Moved buy/sell screens from tab navigation to modal navigation for better UX
Input Validation & Safety
  • Added maximum safe amount limits to prevent API errors and overflow issues
  • Implemented input sanitization to remove invalid characters while preserving user intent
  • Added safety checks for extremely large numbers in exchange rate calculations
  • Enhanced USDC value formatting with overflow protection
Tab State Management
  • Fixed input revalidation when switching between buy/sell tabs
  • Improved tab state persistence by keeping both screens mounted
  • Enhanced error display logic to show errors only for the active tab's input
  • Added separate input handlers for buy and sell tabs
UI/UX Improvements
  • Created reusable FixedFooter component for consistent bottom button placement
  • Updated BuySellFlow to use new footer pattern with sticky continue button
  • Improved error message display logic to prevent showing errors for empty inputs
  • Enhanced keyboard handling and safe area management
Technical Details
  • Added safety limits for exchange rate API calls (1 trillion token cap)
  • Implemented proper numeric input sanitization
  • Enhanced form validation with better error state management
  • Improved component structure for better maintainability
Testing
  • Tooltip functionality now works correctly in all buy/sell screens
  • Input validation prevents crashes from extremely large numbers
  • Tab switching preserves state and shows appropriate errors
  • Fixed footer buttons don't obscure content
How Has This Been Tested?
npm run ios:prod and play around with mobile buy sell flow
@changeset-bot
changeset-botBot
commented
Jun 9, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: b827d7c
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
dylanjeffers
dylanjeffers
approved these changes
Jun 9, 2025
View reviewed changes
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
@@ -0,0 +1,89 @@
import type { ReactNode } from 'react'
@dylanjeffersdylanjeffersJun 9, 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.

I know we have quite a few implementations of this, could you spend a sec reviewing all the implementations and determining if they could be reused here or whether this should be the standard going forward?
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/screens/app-screen/AppTabScreen.tsx
 />
 <Stack.Screen name='ChangeEmail' component={ChangeEmailModalScreen} />
 </Stack.Group>
 <Stack.Group>
@dylanjeffersdylanjeffersJun 9, 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.

Interesting so we are going away from the stack group? What's main rationale here? State management?
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellModalScreen.tsx
 <BottomSheetModalProvider>
 <Stack.Navigator screenOptions={screenOptions}>
 <Stack.Screen
 name='BuySell'
@dylanjeffersdylanjeffersJun 9, 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.

Oh jk just moved over here, excellent. Can you share this context with Reed because I think his flow may benefit from this too
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellScreen.tsx
 navigation.goBack()
 }

 const flowData = BuySellFlow({
@dylanjeffersdylanjeffersJun 9, 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.

Cool what's this pattern?
@faridsalaufaridsalauJun 10, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

needed it to properly render the fixed footer
@faridsalau
faridsalau
merged commit e692901
into
mainJun 10, 2025
@faridsalau
faridsalau
deleted the

fs-m2-mobile-fixes

branch
June 10, 2025 16:29
audius-infra pushed a commit
that referenced
this pull request
Jun 14, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.139
12f3bac
[8d4f0ca] [PE-6389] Explore screen refactor and performance (#12321) Dylan Jeffers
[02381bf] Add avoidable keyboard to buy/sell flow (#12328) Farid Salau
[31c1d5f] [PE-6338] Fix confetti (#12316) JD Francis
[f7e0aa1] [QA-2093] Fix comment history alignment and add full width prop on user links (#12326) KJ
[5997b15] More withdraw UI cleanup (#12327) Reed
[2045aa1] Fix listening history not showing items (#12322) JD Francis
[4876c94] [QA-2122] Fix track stats alignment by removing margin (#12325) KJ
[cefd8cf] [QA-2138] Remove max-width on playlist tiles for mobile web (#12324) KJ
[cdbca04] Mobile withdraw flow validation updates (#12317) Reed
[cfd2741] Add a minimum and maximum value to Buy/Sell flow (#12323) Farid Salau
[9573612] Stop error message flash on sell tab of Buy/Sell (#12310) Farid Salau
[21c1649] [PE-6337] Fix mobile sign out not working (#12318) JD Francis
[2042bb5] QA fixes for mobile explore: reseting search params and scroll + more (#12320) Isaac Solo
[4f19567] Refactor mobile left nav drawer to improve performance (#12314) Dylan Jeffers
[5ed2795] [PE-6375] Add loading state for brief sign in state (#12319) JD Francis
[7f20217] Fix text-link navigation to push (#12308) Dylan Jeffers
[c698239] Standardize query-collection options, fix refresh (#12307) Dylan Jeffers
[3294109] Add collapsing explore header animation (#12312) Isaac Solo
[8113778] Fix mobile profiles not loading (#12315) JD Francis
[c9d8b65] [PE-6224] Refactor mobile lineup-tiles for simplicity and performance (#12313) Dylan Jeffers
[2825a43] Improve feature flag performance (#12311) Dylan Jeffers
[f487fe5] Mobiles keyboard-avoiding withdraw drawer (#12306) Reed
[04ea576] [PE-6379] Fix refetching collection by permalink (#12304) Dylan Jeffers
[cc5d877] Fix missing track in upload complete screen (#12305) Dylan Jeffers
[e20aa89] Update remixes query page param calculation to account for original track in lineup (#12303) KJ
[a11c528] Fix negative limit (#12181) Farid Salau
[a4f5567] [PE-6345|PE-6351] Dep all users cache & almost all of entity cache (#12300) JD Francis
[ffba4c7] Fix mobile upload stuck at 100% (#12301) Dylan Jeffers
[1e42882] [PE-6245PE-6246] Fix mobile/web drawer behavior (#12297) Dylan Jeffers
[385c930] Fix mobile web track artwork loading (#12299) Dylan Jeffers
[d7a1778] Add remix contest card + minor fixes to mobile explore (#12298) Isaac Solo
[e692901] [PE-6335] Address mobile wallet UI M2 QA finds (#12296) Farid Salau
[8fae645] [PE-6181] Mobile withdraw flow (#12290) Reed
[eb91d5d] Fix library loading (#12288) Dylan Jeffers
[438384e] Fix remix contest section initial tab (#12295) Dylan Jeffers
[df6c087] (account fix) Fix left nav not showing (#12292) JD Francis
[7d07905] [PE-6341] Fix remix contest track page displaying empty track lineup section (#12294) KJ
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@dharit-tandharit-tanAwaiting requested review from dharit-tan

Assignees


No one assigned


Labels

size/XL

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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('^' + ".*" + '
[PE-6335] Address mobile wallet UI M2 QA finds by faridsalau · Pull Request #12296 · AudiusProject/apps · GitHub
Skip to content
[PE-6335] Address mobile wallet UI M2 QA finds - #12296
Merged
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Jun 10, 2025
Merged
[PE-6335] Address mobile wallet UI M2 QA finds#12296
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jun 9, 2025

Copy link


Copy Markdown

Contributor
Description
This PR addresses several critical issues in the buy/sell flow and improves input validation and error handling throughout the token swap functionality.
Key Changes
Modal Structure & Tooltip Fix
  • Created BuySellModalScreen to wrap the buy/sell flow in a proper modal stack navigator
  • Added BottomSheetModalProvider to fix tooltip functionality in buy/sell screens
  • Moved buy/sell screens from tab navigation to modal navigation for better UX
Input Validation & Safety
  • Added maximum safe amount limits to prevent API errors and overflow issues
  • Implemented input sanitization to remove invalid characters while preserving user intent
  • Added safety checks for extremely large numbers in exchange rate calculations
  • Enhanced USDC value formatting with overflow protection
Tab State Management
  • Fixed input revalidation when switching between buy/sell tabs
  • Improved tab state persistence by keeping both screens mounted
  • Enhanced error display logic to show errors only for the active tab's input
  • Added separate input handlers for buy and sell tabs
UI/UX Improvements
  • Created reusable FixedFooter component for consistent bottom button placement
  • Updated BuySellFlow to use new footer pattern with sticky continue button
  • Improved error message display logic to prevent showing errors for empty inputs
  • Enhanced keyboard handling and safe area management
Technical Details
  • Added safety limits for exchange rate API calls (1 trillion token cap)
  • Implemented proper numeric input sanitization
  • Enhanced form validation with better error state management
  • Improved component structure for better maintainability
Testing
  • Tooltip functionality now works correctly in all buy/sell screens
  • Input validation prevents crashes from extremely large numbers
  • Tab switching preserves state and shows appropriate errors
  • Fixed footer buttons don't obscure content
How Has This Been Tested?
npm run ios:prod and play around with mobile buy sell flow
@changeset-bot
changeset-botBot
commented
Jun 9, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: b827d7c
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
dylanjeffers
dylanjeffers
approved these changes
Jun 9, 2025
View reviewed changes
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
@@ -0,0 +1,89 @@
import type { ReactNode } from 'react'
@dylanjeffersdylanjeffersJun 9, 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.

I know we have quite a few implementations of this, could you spend a sec reviewing all the implementations and determining if they could be reused here or whether this should be the standard going forward?
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/screens/app-screen/AppTabScreen.tsx
 />
 <Stack.Screen name='ChangeEmail' component={ChangeEmailModalScreen} />
 </Stack.Group>
 <Stack.Group>
@dylanjeffersdylanjeffersJun 9, 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.

Interesting so we are going away from the stack group? What's main rationale here? State management?
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellModalScreen.tsx
 <BottomSheetModalProvider>
 <Stack.Navigator screenOptions={screenOptions}>
 <Stack.Screen
 name='BuySell'
@dylanjeffersdylanjeffersJun 9, 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.

Oh jk just moved over here, excellent. Can you share this context with Reed because I think his flow may benefit from this too
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellScreen.tsx
 navigation.goBack()
 }

 const flowData = BuySellFlow({
@dylanjeffersdylanjeffersJun 9, 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.

Cool what's this pattern?
@faridsalaufaridsalauJun 10, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

needed it to properly render the fixed footer
@faridsalau
faridsalau
merged commit e692901
into
mainJun 10, 2025
@faridsalau
faridsalau
deleted the

fs-m2-mobile-fixes

branch
June 10, 2025 16:29
audius-infra pushed a commit
that referenced
this pull request
Jun 14, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.139
12f3bac
[8d4f0ca] [PE-6389] Explore screen refactor and performance (#12321) Dylan Jeffers
[02381bf] Add avoidable keyboard to buy/sell flow (#12328) Farid Salau
[31c1d5f] [PE-6338] Fix confetti (#12316) JD Francis
[f7e0aa1] [QA-2093] Fix comment history alignment and add full width prop on user links (#12326) KJ
[5997b15] More withdraw UI cleanup (#12327) Reed
[2045aa1] Fix listening history not showing items (#12322) JD Francis
[4876c94] [QA-2122] Fix track stats alignment by removing margin (#12325) KJ
[cefd8cf] [QA-2138] Remove max-width on playlist tiles for mobile web (#12324) KJ
[cdbca04] Mobile withdraw flow validation updates (#12317) Reed
[cfd2741] Add a minimum and maximum value to Buy/Sell flow (#12323) Farid Salau
[9573612] Stop error message flash on sell tab of Buy/Sell (#12310) Farid Salau
[21c1649] [PE-6337] Fix mobile sign out not working (#12318) JD Francis
[2042bb5] QA fixes for mobile explore: reseting search params and scroll + more (#12320) Isaac Solo
[4f19567] Refactor mobile left nav drawer to improve performance (#12314) Dylan Jeffers
[5ed2795] [PE-6375] Add loading state for brief sign in state (#12319) JD Francis
[7f20217] Fix text-link navigation to push (#12308) Dylan Jeffers
[c698239] Standardize query-collection options, fix refresh (#12307) Dylan Jeffers
[3294109] Add collapsing explore header animation (#12312) Isaac Solo
[8113778] Fix mobile profiles not loading (#12315) JD Francis
[c9d8b65] [PE-6224] Refactor mobile lineup-tiles for simplicity and performance (#12313) Dylan Jeffers
[2825a43] Improve feature flag performance (#12311) Dylan Jeffers
[f487fe5] Mobiles keyboard-avoiding withdraw drawer (#12306) Reed
[04ea576] [PE-6379] Fix refetching collection by permalink (#12304) Dylan Jeffers
[cc5d877] Fix missing track in upload complete screen (#12305) Dylan Jeffers
[e20aa89] Update remixes query page param calculation to account for original track in lineup (#12303) KJ
[a11c528] Fix negative limit (#12181) Farid Salau
[a4f5567] [PE-6345|PE-6351] Dep all users cache & almost all of entity cache (#12300) JD Francis
[ffba4c7] Fix mobile upload stuck at 100% (#12301) Dylan Jeffers
[1e42882] [PE-6245PE-6246] Fix mobile/web drawer behavior (#12297) Dylan Jeffers
[385c930] Fix mobile web track artwork loading (#12299) Dylan Jeffers
[d7a1778] Add remix contest card + minor fixes to mobile explore (#12298) Isaac Solo
[e692901] [PE-6335] Address mobile wallet UI M2 QA finds (#12296) Farid Salau
[8fae645] [PE-6181] Mobile withdraw flow (#12290) Reed
[eb91d5d] Fix library loading (#12288) Dylan Jeffers
[438384e] Fix remix contest section initial tab (#12295) Dylan Jeffers
[df6c087] (account fix) Fix left nav not showing (#12292) JD Francis
[7d07905] [PE-6341] Fix remix contest track page displaying empty track lineup section (#12294) KJ
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@dharit-tandharit-tanAwaiting requested review from dharit-tan

Assignees


No one assigned


Labels

size/XL

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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" + '
[PE-6335] Address mobile wallet UI M2 QA finds by faridsalau · Pull Request #12296 · AudiusProject/apps · GitHub
Skip to content
[PE-6335] Address mobile wallet UI M2 QA finds - #12296
Merged
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Jun 10, 2025
Merged
[PE-6335] Address mobile wallet UI M2 QA finds#12296
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jun 9, 2025

Copy link


Copy Markdown

Contributor
Description
This PR addresses several critical issues in the buy/sell flow and improves input validation and error handling throughout the token swap functionality.
Key Changes
Modal Structure & Tooltip Fix
  • Created BuySellModalScreen to wrap the buy/sell flow in a proper modal stack navigator
  • Added BottomSheetModalProvider to fix tooltip functionality in buy/sell screens
  • Moved buy/sell screens from tab navigation to modal navigation for better UX
Input Validation & Safety
  • Added maximum safe amount limits to prevent API errors and overflow issues
  • Implemented input sanitization to remove invalid characters while preserving user intent
  • Added safety checks for extremely large numbers in exchange rate calculations
  • Enhanced USDC value formatting with overflow protection
Tab State Management
  • Fixed input revalidation when switching between buy/sell tabs
  • Improved tab state persistence by keeping both screens mounted
  • Enhanced error display logic to show errors only for the active tab's input
  • Added separate input handlers for buy and sell tabs
UI/UX Improvements
  • Created reusable FixedFooter component for consistent bottom button placement
  • Updated BuySellFlow to use new footer pattern with sticky continue button
  • Improved error message display logic to prevent showing errors for empty inputs
  • Enhanced keyboard handling and safe area management
Technical Details
  • Added safety limits for exchange rate API calls (1 trillion token cap)
  • Implemented proper numeric input sanitization
  • Enhanced form validation with better error state management
  • Improved component structure for better maintainability
Testing
  • Tooltip functionality now works correctly in all buy/sell screens
  • Input validation prevents crashes from extremely large numbers
  • Tab switching preserves state and shows appropriate errors
  • Fixed footer buttons don't obscure content
How Has This Been Tested?
npm run ios:prod and play around with mobile buy sell flow
@changeset-bot
changeset-botBot
commented
Jun 9, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: b827d7c
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
dylanjeffers
dylanjeffers
approved these changes
Jun 9, 2025
View reviewed changes
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
@@ -0,0 +1,89 @@
import type { ReactNode } from 'react'
@dylanjeffersdylanjeffersJun 9, 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.

I know we have quite a few implementations of this, could you spend a sec reviewing all the implementations and determining if they could be reused here or whether this should be the standard going forward?
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/screens/app-screen/AppTabScreen.tsx
 />
 <Stack.Screen name='ChangeEmail' component={ChangeEmailModalScreen} />
 </Stack.Group>
 <Stack.Group>
@dylanjeffersdylanjeffersJun 9, 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.

Interesting so we are going away from the stack group? What's main rationale here? State management?
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellModalScreen.tsx
 <BottomSheetModalProvider>
 <Stack.Navigator screenOptions={screenOptions}>
 <Stack.Screen
 name='BuySell'
@dylanjeffersdylanjeffersJun 9, 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.

Oh jk just moved over here, excellent. Can you share this context with Reed because I think his flow may benefit from this too
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellScreen.tsx
 navigation.goBack()
 }

 const flowData = BuySellFlow({
@dylanjeffersdylanjeffersJun 9, 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.

Cool what's this pattern?
@faridsalaufaridsalauJun 10, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

needed it to properly render the fixed footer
@faridsalau
faridsalau
merged commit e692901
into
mainJun 10, 2025
@faridsalau
faridsalau
deleted the

fs-m2-mobile-fixes

branch
June 10, 2025 16:29
audius-infra pushed a commit
that referenced
this pull request
Jun 14, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.139
12f3bac
[8d4f0ca] [PE-6389] Explore screen refactor and performance (#12321) Dylan Jeffers
[02381bf] Add avoidable keyboard to buy/sell flow (#12328) Farid Salau
[31c1d5f] [PE-6338] Fix confetti (#12316) JD Francis
[f7e0aa1] [QA-2093] Fix comment history alignment and add full width prop on user links (#12326) KJ
[5997b15] More withdraw UI cleanup (#12327) Reed
[2045aa1] Fix listening history not showing items (#12322) JD Francis
[4876c94] [QA-2122] Fix track stats alignment by removing margin (#12325) KJ
[cefd8cf] [QA-2138] Remove max-width on playlist tiles for mobile web (#12324) KJ
[cdbca04] Mobile withdraw flow validation updates (#12317) Reed
[cfd2741] Add a minimum and maximum value to Buy/Sell flow (#12323) Farid Salau
[9573612] Stop error message flash on sell tab of Buy/Sell (#12310) Farid Salau
[21c1649] [PE-6337] Fix mobile sign out not working (#12318) JD Francis
[2042bb5] QA fixes for mobile explore: reseting search params and scroll + more (#12320) Isaac Solo
[4f19567] Refactor mobile left nav drawer to improve performance (#12314) Dylan Jeffers
[5ed2795] [PE-6375] Add loading state for brief sign in state (#12319) JD Francis
[7f20217] Fix text-link navigation to push (#12308) Dylan Jeffers
[c698239] Standardize query-collection options, fix refresh (#12307) Dylan Jeffers
[3294109] Add collapsing explore header animation (#12312) Isaac Solo
[8113778] Fix mobile profiles not loading (#12315) JD Francis
[c9d8b65] [PE-6224] Refactor mobile lineup-tiles for simplicity and performance (#12313) Dylan Jeffers
[2825a43] Improve feature flag performance (#12311) Dylan Jeffers
[f487fe5] Mobiles keyboard-avoiding withdraw drawer (#12306) Reed
[04ea576] [PE-6379] Fix refetching collection by permalink (#12304) Dylan Jeffers
[cc5d877] Fix missing track in upload complete screen (#12305) Dylan Jeffers
[e20aa89] Update remixes query page param calculation to account for original track in lineup (#12303) KJ
[a11c528] Fix negative limit (#12181) Farid Salau
[a4f5567] [PE-6345|PE-6351] Dep all users cache & almost all of entity cache (#12300) JD Francis
[ffba4c7] Fix mobile upload stuck at 100% (#12301) Dylan Jeffers
[1e42882] [PE-6245PE-6246] Fix mobile/web drawer behavior (#12297) Dylan Jeffers
[385c930] Fix mobile web track artwork loading (#12299) Dylan Jeffers
[d7a1778] Add remix contest card + minor fixes to mobile explore (#12298) Isaac Solo
[e692901] [PE-6335] Address mobile wallet UI M2 QA finds (#12296) Farid Salau
[8fae645] [PE-6181] Mobile withdraw flow (#12290) Reed
[eb91d5d] Fix library loading (#12288) Dylan Jeffers
[438384e] Fix remix contest section initial tab (#12295) Dylan Jeffers
[df6c087] (account fix) Fix left nav not showing (#12292) JD Francis
[7d07905] [PE-6341] Fix remix contest track page displaying empty track lineup section (#12294) KJ
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@dharit-tandharit-tanAwaiting requested review from dharit-tan

Assignees


No one assigned


Labels

size/XL

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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('^' + ".*" + '
[PE-6335] Address mobile wallet UI M2 QA finds by faridsalau · Pull Request #12296 · AudiusProject/apps · GitHub
Skip to content
[PE-6335] Address mobile wallet UI M2 QA finds - #12296
Merged
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Jun 10, 2025
Merged
[PE-6335] Address mobile wallet UI M2 QA finds#12296
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jun 9, 2025

Copy link


Copy Markdown

Contributor
Description
This PR addresses several critical issues in the buy/sell flow and improves input validation and error handling throughout the token swap functionality.
Key Changes
Modal Structure & Tooltip Fix
  • Created BuySellModalScreen to wrap the buy/sell flow in a proper modal stack navigator
  • Added BottomSheetModalProvider to fix tooltip functionality in buy/sell screens
  • Moved buy/sell screens from tab navigation to modal navigation for better UX
Input Validation & Safety
  • Added maximum safe amount limits to prevent API errors and overflow issues
  • Implemented input sanitization to remove invalid characters while preserving user intent
  • Added safety checks for extremely large numbers in exchange rate calculations
  • Enhanced USDC value formatting with overflow protection
Tab State Management
  • Fixed input revalidation when switching between buy/sell tabs
  • Improved tab state persistence by keeping both screens mounted
  • Enhanced error display logic to show errors only for the active tab's input
  • Added separate input handlers for buy and sell tabs
UI/UX Improvements
  • Created reusable FixedFooter component for consistent bottom button placement
  • Updated BuySellFlow to use new footer pattern with sticky continue button
  • Improved error message display logic to prevent showing errors for empty inputs
  • Enhanced keyboard handling and safe area management
Technical Details
  • Added safety limits for exchange rate API calls (1 trillion token cap)
  • Implemented proper numeric input sanitization
  • Enhanced form validation with better error state management
  • Improved component structure for better maintainability
Testing
  • Tooltip functionality now works correctly in all buy/sell screens
  • Input validation prevents crashes from extremely large numbers
  • Tab switching preserves state and shows appropriate errors
  • Fixed footer buttons don't obscure content
How Has This Been Tested?
npm run ios:prod and play around with mobile buy sell flow
@changeset-bot
changeset-botBot
commented
Jun 9, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: b827d7c
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
dylanjeffers
dylanjeffers
approved these changes
Jun 9, 2025
View reviewed changes
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
@@ -0,0 +1,89 @@
import type { ReactNode } from 'react'
@dylanjeffersdylanjeffersJun 9, 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.

I know we have quite a few implementations of this, could you spend a sec reviewing all the implementations and determining if they could be reused here or whether this should be the standard going forward?
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/screens/app-screen/AppTabScreen.tsx
 />
 <Stack.Screen name='ChangeEmail' component={ChangeEmailModalScreen} />
 </Stack.Group>
 <Stack.Group>
@dylanjeffersdylanjeffersJun 9, 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.

Interesting so we are going away from the stack group? What's main rationale here? State management?
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellModalScreen.tsx
 <BottomSheetModalProvider>
 <Stack.Navigator screenOptions={screenOptions}>
 <Stack.Screen
 name='BuySell'
@dylanjeffersdylanjeffersJun 9, 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.

Oh jk just moved over here, excellent. Can you share this context with Reed because I think his flow may benefit from this too
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellScreen.tsx
 navigation.goBack()
 }

 const flowData = BuySellFlow({
@dylanjeffersdylanjeffersJun 9, 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.

Cool what's this pattern?
@faridsalaufaridsalauJun 10, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

needed it to properly render the fixed footer
@faridsalau
faridsalau
merged commit e692901
into
mainJun 10, 2025
@faridsalau
faridsalau
deleted the

fs-m2-mobile-fixes

branch
June 10, 2025 16:29
audius-infra pushed a commit
that referenced
this pull request
Jun 14, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.139
12f3bac
[8d4f0ca] [PE-6389] Explore screen refactor and performance (#12321) Dylan Jeffers
[02381bf] Add avoidable keyboard to buy/sell flow (#12328) Farid Salau
[31c1d5f] [PE-6338] Fix confetti (#12316) JD Francis
[f7e0aa1] [QA-2093] Fix comment history alignment and add full width prop on user links (#12326) KJ
[5997b15] More withdraw UI cleanup (#12327) Reed
[2045aa1] Fix listening history not showing items (#12322) JD Francis
[4876c94] [QA-2122] Fix track stats alignment by removing margin (#12325) KJ
[cefd8cf] [QA-2138] Remove max-width on playlist tiles for mobile web (#12324) KJ
[cdbca04] Mobile withdraw flow validation updates (#12317) Reed
[cfd2741] Add a minimum and maximum value to Buy/Sell flow (#12323) Farid Salau
[9573612] Stop error message flash on sell tab of Buy/Sell (#12310) Farid Salau
[21c1649] [PE-6337] Fix mobile sign out not working (#12318) JD Francis
[2042bb5] QA fixes for mobile explore: reseting search params and scroll + more (#12320) Isaac Solo
[4f19567] Refactor mobile left nav drawer to improve performance (#12314) Dylan Jeffers
[5ed2795] [PE-6375] Add loading state for brief sign in state (#12319) JD Francis
[7f20217] Fix text-link navigation to push (#12308) Dylan Jeffers
[c698239] Standardize query-collection options, fix refresh (#12307) Dylan Jeffers
[3294109] Add collapsing explore header animation (#12312) Isaac Solo
[8113778] Fix mobile profiles not loading (#12315) JD Francis
[c9d8b65] [PE-6224] Refactor mobile lineup-tiles for simplicity and performance (#12313) Dylan Jeffers
[2825a43] Improve feature flag performance (#12311) Dylan Jeffers
[f487fe5] Mobiles keyboard-avoiding withdraw drawer (#12306) Reed
[04ea576] [PE-6379] Fix refetching collection by permalink (#12304) Dylan Jeffers
[cc5d877] Fix missing track in upload complete screen (#12305) Dylan Jeffers
[e20aa89] Update remixes query page param calculation to account for original track in lineup (#12303) KJ
[a11c528] Fix negative limit (#12181) Farid Salau
[a4f5567] [PE-6345|PE-6351] Dep all users cache & almost all of entity cache (#12300) JD Francis
[ffba4c7] Fix mobile upload stuck at 100% (#12301) Dylan Jeffers
[1e42882] [PE-6245PE-6246] Fix mobile/web drawer behavior (#12297) Dylan Jeffers
[385c930] Fix mobile web track artwork loading (#12299) Dylan Jeffers
[d7a1778] Add remix contest card + minor fixes to mobile explore (#12298) Isaac Solo
[e692901] [PE-6335] Address mobile wallet UI M2 QA finds (#12296) Farid Salau
[8fae645] [PE-6181] Mobile withdraw flow (#12290) Reed
[eb91d5d] Fix library loading (#12288) Dylan Jeffers
[438384e] Fix remix contest section initial tab (#12295) Dylan Jeffers
[df6c087] (account fix) Fix left nav not showing (#12292) JD Francis
[7d07905] [PE-6341] Fix remix contest track page displaying empty track lineup section (#12294) KJ
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@dharit-tandharit-tanAwaiting requested review from dharit-tan

Assignees


No one assigned


Labels

size/XL

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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('^' + ".*" + '
[PE-6335] Address mobile wallet UI M2 QA finds by faridsalau · Pull Request #12296 · AudiusProject/apps · GitHub
Skip to content
[PE-6335] Address mobile wallet UI M2 QA finds - #12296
Merged
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Jun 10, 2025
Merged
[PE-6335] Address mobile wallet UI M2 QA finds#12296
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jun 9, 2025

Copy link


Copy Markdown

Contributor
Description
This PR addresses several critical issues in the buy/sell flow and improves input validation and error handling throughout the token swap functionality.
Key Changes
Modal Structure & Tooltip Fix
  • Created BuySellModalScreen to wrap the buy/sell flow in a proper modal stack navigator
  • Added BottomSheetModalProvider to fix tooltip functionality in buy/sell screens
  • Moved buy/sell screens from tab navigation to modal navigation for better UX
Input Validation & Safety
  • Added maximum safe amount limits to prevent API errors and overflow issues
  • Implemented input sanitization to remove invalid characters while preserving user intent
  • Added safety checks for extremely large numbers in exchange rate calculations
  • Enhanced USDC value formatting with overflow protection
Tab State Management
  • Fixed input revalidation when switching between buy/sell tabs
  • Improved tab state persistence by keeping both screens mounted
  • Enhanced error display logic to show errors only for the active tab's input
  • Added separate input handlers for buy and sell tabs
UI/UX Improvements
  • Created reusable FixedFooter component for consistent bottom button placement
  • Updated BuySellFlow to use new footer pattern with sticky continue button
  • Improved error message display logic to prevent showing errors for empty inputs
  • Enhanced keyboard handling and safe area management
Technical Details
  • Added safety limits for exchange rate API calls (1 trillion token cap)
  • Implemented proper numeric input sanitization
  • Enhanced form validation with better error state management
  • Improved component structure for better maintainability
Testing
  • Tooltip functionality now works correctly in all buy/sell screens
  • Input validation prevents crashes from extremely large numbers
  • Tab switching preserves state and shows appropriate errors
  • Fixed footer buttons don't obscure content
How Has This Been Tested?
npm run ios:prod and play around with mobile buy sell flow
@changeset-bot
changeset-botBot
commented
Jun 9, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: b827d7c
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
dylanjeffers
dylanjeffers
approved these changes
Jun 9, 2025
View reviewed changes
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
@@ -0,0 +1,89 @@
import type { ReactNode } from 'react'
@dylanjeffersdylanjeffersJun 9, 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.

I know we have quite a few implementations of this, could you spend a sec reviewing all the implementations and determining if they could be reused here or whether this should be the standard going forward?
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/screens/app-screen/AppTabScreen.tsx
 />
 <Stack.Screen name='ChangeEmail' component={ChangeEmailModalScreen} />
 </Stack.Group>
 <Stack.Group>
@dylanjeffersdylanjeffersJun 9, 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.

Interesting so we are going away from the stack group? What's main rationale here? State management?
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellModalScreen.tsx
 <BottomSheetModalProvider>
 <Stack.Navigator screenOptions={screenOptions}>
 <Stack.Screen
 name='BuySell'
@dylanjeffersdylanjeffersJun 9, 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.

Oh jk just moved over here, excellent. Can you share this context with Reed because I think his flow may benefit from this too
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellScreen.tsx
 navigation.goBack()
 }

 const flowData = BuySellFlow({
@dylanjeffersdylanjeffersJun 9, 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.

Cool what's this pattern?
@faridsalaufaridsalauJun 10, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

needed it to properly render the fixed footer
@faridsalau
faridsalau
merged commit e692901
into
mainJun 10, 2025
@faridsalau
faridsalau
deleted the

fs-m2-mobile-fixes

branch
June 10, 2025 16:29
audius-infra pushed a commit
that referenced
this pull request
Jun 14, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.139
12f3bac
[8d4f0ca] [PE-6389] Explore screen refactor and performance (#12321) Dylan Jeffers
[02381bf] Add avoidable keyboard to buy/sell flow (#12328) Farid Salau
[31c1d5f] [PE-6338] Fix confetti (#12316) JD Francis
[f7e0aa1] [QA-2093] Fix comment history alignment and add full width prop on user links (#12326) KJ
[5997b15] More withdraw UI cleanup (#12327) Reed
[2045aa1] Fix listening history not showing items (#12322) JD Francis
[4876c94] [QA-2122] Fix track stats alignment by removing margin (#12325) KJ
[cefd8cf] [QA-2138] Remove max-width on playlist tiles for mobile web (#12324) KJ
[cdbca04] Mobile withdraw flow validation updates (#12317) Reed
[cfd2741] Add a minimum and maximum value to Buy/Sell flow (#12323) Farid Salau
[9573612] Stop error message flash on sell tab of Buy/Sell (#12310) Farid Salau
[21c1649] [PE-6337] Fix mobile sign out not working (#12318) JD Francis
[2042bb5] QA fixes for mobile explore: reseting search params and scroll + more (#12320) Isaac Solo
[4f19567] Refactor mobile left nav drawer to improve performance (#12314) Dylan Jeffers
[5ed2795] [PE-6375] Add loading state for brief sign in state (#12319) JD Francis
[7f20217] Fix text-link navigation to push (#12308) Dylan Jeffers
[c698239] Standardize query-collection options, fix refresh (#12307) Dylan Jeffers
[3294109] Add collapsing explore header animation (#12312) Isaac Solo
[8113778] Fix mobile profiles not loading (#12315) JD Francis
[c9d8b65] [PE-6224] Refactor mobile lineup-tiles for simplicity and performance (#12313) Dylan Jeffers
[2825a43] Improve feature flag performance (#12311) Dylan Jeffers
[f487fe5] Mobiles keyboard-avoiding withdraw drawer (#12306) Reed
[04ea576] [PE-6379] Fix refetching collection by permalink (#12304) Dylan Jeffers
[cc5d877] Fix missing track in upload complete screen (#12305) Dylan Jeffers
[e20aa89] Update remixes query page param calculation to account for original track in lineup (#12303) KJ
[a11c528] Fix negative limit (#12181) Farid Salau
[a4f5567] [PE-6345|PE-6351] Dep all users cache & almost all of entity cache (#12300) JD Francis
[ffba4c7] Fix mobile upload stuck at 100% (#12301) Dylan Jeffers
[1e42882] [PE-6245PE-6246] Fix mobile/web drawer behavior (#12297) Dylan Jeffers
[385c930] Fix mobile web track artwork loading (#12299) Dylan Jeffers
[d7a1778] Add remix contest card + minor fixes to mobile explore (#12298) Isaac Solo
[e692901] [PE-6335] Address mobile wallet UI M2 QA finds (#12296) Farid Salau
[8fae645] [PE-6181] Mobile withdraw flow (#12290) Reed
[eb91d5d] Fix library loading (#12288) Dylan Jeffers
[438384e] Fix remix contest section initial tab (#12295) Dylan Jeffers
[df6c087] (account fix) Fix left nav not showing (#12292) JD Francis
[7d07905] [PE-6341] Fix remix contest track page displaying empty track lineup section (#12294) KJ
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@dharit-tandharit-tanAwaiting requested review from dharit-tan

Assignees


No one assigned


Labels

size/XL

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers

, '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); }
})();
})();
[PE-6335] Address mobile wallet UI M2 QA finds by faridsalau · Pull Request #12296 · AudiusProject/apps · GitHub
Skip to content
[PE-6335] Address mobile wallet UI M2 QA finds - #12296
Merged
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Jun 10, 2025
Merged
[PE-6335] Address mobile wallet UI M2 QA finds#12296
faridsalau merged 7 commits into
mainfrom 
fs-m2-mobile-fixes
Conversation
@faridsalau
@faridsalaufaridsalau
commented
Jun 9, 2025

Copy link


Copy Markdown

Contributor
Description
This PR addresses several critical issues in the buy/sell flow and improves input validation and error handling throughout the token swap functionality.
Key Changes
Modal Structure & Tooltip Fix
  • Created BuySellModalScreen to wrap the buy/sell flow in a proper modal stack navigator
  • Added BottomSheetModalProvider to fix tooltip functionality in buy/sell screens
  • Moved buy/sell screens from tab navigation to modal navigation for better UX
Input Validation & Safety
  • Added maximum safe amount limits to prevent API errors and overflow issues
  • Implemented input sanitization to remove invalid characters while preserving user intent
  • Added safety checks for extremely large numbers in exchange rate calculations
  • Enhanced USDC value formatting with overflow protection
Tab State Management
  • Fixed input revalidation when switching between buy/sell tabs
  • Improved tab state persistence by keeping both screens mounted
  • Enhanced error display logic to show errors only for the active tab's input
  • Added separate input handlers for buy and sell tabs
UI/UX Improvements
  • Created reusable FixedFooter component for consistent bottom button placement
  • Updated BuySellFlow to use new footer pattern with sticky continue button
  • Improved error message display logic to prevent showing errors for empty inputs
  • Enhanced keyboard handling and safe area management
Technical Details
  • Added safety limits for exchange rate API calls (1 trillion token cap)
  • Implemented proper numeric input sanitization
  • Enhanced form validation with better error state management
  • Improved component structure for better maintainability
Testing
  • Tooltip functionality now works correctly in all buy/sell screens
  • Input validation prevents crashes from extremely large numbers
  • Tab switching preserves state and shows appropriate errors
  • Fixed footer buttons don't obscure content
How Has This Been Tested?
npm run ios:prod and play around with mobile buy sell flow
@changeset-bot
changeset-botBot
commented
Jun 9, 2025

Copy link


Copy Markdown

⚠️ No Changeset found
Latest commit: b827d7c
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
dylanjeffers
dylanjeffers
approved these changes
Jun 9, 2025
View reviewed changes
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
@@ -0,0 +1,89 @@
import type { ReactNode } from 'react'
@dylanjeffersdylanjeffersJun 9, 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.

I know we have quite a few implementations of this, could you spend a sec reviewing all the implementations and determining if they could be reused here or whether this should be the standard going forward?
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/components/core/FixedFooter.tsx
Comment threadpackages/mobile/src/screens/app-screen/AppTabScreen.tsx
 />
 <Stack.Screen name='ChangeEmail' component={ChangeEmailModalScreen} />
 </Stack.Group>
 <Stack.Group>
@dylanjeffersdylanjeffersJun 9, 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.

Interesting so we are going away from the stack group? What's main rationale here? State management?
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellModalScreen.tsx
 <BottomSheetModalProvider>
 <Stack.Navigator screenOptions={screenOptions}>
 <Stack.Screen
 name='BuySell'
@dylanjeffersdylanjeffersJun 9, 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.

Oh jk just moved over here, excellent. Can you share this context with Reed because I think his flow may benefit from this too
Comment threadpackages/mobile/src/screens/buy-sell-screen/BuySellScreen.tsx
 navigation.goBack()
 }

 const flowData = BuySellFlow({
@dylanjeffersdylanjeffersJun 9, 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.

Cool what's this pattern?
@faridsalaufaridsalauJun 10, 2025

Copy link


Copy Markdown

ContributorAuthor
Choose a reason for hiding this comment

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

needed it to properly render the fixed footer
@faridsalau
faridsalau
merged commit e692901
into
mainJun 10, 2025
@faridsalau
faridsalau
deleted the

fs-m2-mobile-fixes

branch
June 10, 2025 16:29
audius-infra pushed a commit
that referenced
this pull request
Jun 14, 2025
audius-infra
Audius Client (Web and Mobile) v1.5.139
12f3bac
[8d4f0ca] [PE-6389] Explore screen refactor and performance (#12321) Dylan Jeffers
[02381bf] Add avoidable keyboard to buy/sell flow (#12328) Farid Salau
[31c1d5f] [PE-6338] Fix confetti (#12316) JD Francis
[f7e0aa1] [QA-2093] Fix comment history alignment and add full width prop on user links (#12326) KJ
[5997b15] More withdraw UI cleanup (#12327) Reed
[2045aa1] Fix listening history not showing items (#12322) JD Francis
[4876c94] [QA-2122] Fix track stats alignment by removing margin (#12325) KJ
[cefd8cf] [QA-2138] Remove max-width on playlist tiles for mobile web (#12324) KJ
[cdbca04] Mobile withdraw flow validation updates (#12317) Reed
[cfd2741] Add a minimum and maximum value to Buy/Sell flow (#12323) Farid Salau
[9573612] Stop error message flash on sell tab of Buy/Sell (#12310) Farid Salau
[21c1649] [PE-6337] Fix mobile sign out not working (#12318) JD Francis
[2042bb5] QA fixes for mobile explore: reseting search params and scroll + more (#12320) Isaac Solo
[4f19567] Refactor mobile left nav drawer to improve performance (#12314) Dylan Jeffers
[5ed2795] [PE-6375] Add loading state for brief sign in state (#12319) JD Francis
[7f20217] Fix text-link navigation to push (#12308) Dylan Jeffers
[c698239] Standardize query-collection options, fix refresh (#12307) Dylan Jeffers
[3294109] Add collapsing explore header animation (#12312) Isaac Solo
[8113778] Fix mobile profiles not loading (#12315) JD Francis
[c9d8b65] [PE-6224] Refactor mobile lineup-tiles for simplicity and performance (#12313) Dylan Jeffers
[2825a43] Improve feature flag performance (#12311) Dylan Jeffers
[f487fe5] Mobiles keyboard-avoiding withdraw drawer (#12306) Reed
[04ea576] [PE-6379] Fix refetching collection by permalink (#12304) Dylan Jeffers
[cc5d877] Fix missing track in upload complete screen (#12305) Dylan Jeffers
[e20aa89] Update remixes query page param calculation to account for original track in lineup (#12303) KJ
[a11c528] Fix negative limit (#12181) Farid Salau
[a4f5567] [PE-6345|PE-6351] Dep all users cache & almost all of entity cache (#12300) JD Francis
[ffba4c7] Fix mobile upload stuck at 100% (#12301) Dylan Jeffers
[1e42882] [PE-6245PE-6246] Fix mobile/web drawer behavior (#12297) Dylan Jeffers
[385c930] Fix mobile web track artwork loading (#12299) Dylan Jeffers
[d7a1778] Add remix contest card + minor fixes to mobile explore (#12298) Isaac Solo
[e692901] [PE-6335] Address mobile wallet UI M2 QA finds (#12296) Farid Salau
[8fae645] [PE-6181] Mobile withdraw flow (#12290) Reed
[eb91d5d] Fix library loading (#12288) Dylan Jeffers
[438384e] Fix remix contest section initial tab (#12295) Dylan Jeffers
[df6c087] (account fix) Fix left nav not showing (#12292) JD Francis
[7d07905] [PE-6341] Fix remix contest track page displaying empty track lineup section (#12294) KJ
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@dylanjeffersdylanjeffersdylanjeffers approved these changes
@dharit-tandharit-tanAwaiting requested review from dharit-tan

Assignees


No one assigned


Labels

size/XL

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

2 participants

@faridsalau@dylanjeffers