Add non-native conversion to buy/sell modal by faridsalau · Pull Request #12536 · AudiusProject/apps

faridsalau · 2025-07-15T10:55:40Z

Description

This PR introduces a convert flow to the buy-sell modal that enables swapping between non-native assets (e.g., AUDIO ↔) in addition to the existing buy/sell functionality.

Key Changes

Convert Flow Features

New convert tab for swapping between any supported token pairs
Exchange rate display with proper styling (subdued "Rate" label, default value text)
Vertical layout for crypto amounts (balance on top, ticker on bottom)
Transaction icon for "You Receive" section (vs arrow rotate for buy/sell)
No help center hint (buy/sell tabs only)

Technical Details

Centralized token balance fetching for both AUDIO and SPL tokens
Consistent loading states and error handling across all tabs
Proper exchange rate calculation and display
Enhanced type definitions with interface segregation principle

How Has This Been Tested?

Verified convert flow UI (exchange rates, layout, icons)
Tested token selection filtering and balance management
Confirmed help center hint only shows on buy/sell tabs
Validated shared hook functionality and type safety improvements

changeset-bot · 2025-07-15T10:55:45Z

⚠️ No Changeset found

Latest commit: a728d48

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

- Created shared useTokenBalanceManager hook to eliminate code duplication between ConvertTab and SellTab - Added getTokenMintName function to properly handle token symbol mapping without type casting - Broke down SwapTabProps into smaller, focused interfaces for better maintainability - Updated type definitions to use interface composition pattern 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>

dylanjeffers

slay

dylanjeffers · 2025-07-17T02:41:02Z

@@ -47,22 +46,18 @@ export const getTokenBalanceQueryKey = (
 */
 export const useTokenBalance = ({
  token,


just checking we dont need this method for arbitrary users?

not sure i understand

So we dropped the incoming userid so just confirming we don't need it for any user?

oh yea we will in the future but removing it is chill for now, was causing problems. i'll re-add when SDK stuff is in for the API changes

dylanjeffers · 2025-07-17T02:48:41Z

  </Flex>
 )

+// Legacy props interface for backward compatibility


just wondering about backwards compat... can we just migrate everything to new stuff?

dylanjeffers · 2025-07-17T02:49:58Z

  onInputTokenChange,
-  onOutputTokenChange
+  onOutputTokenChange,
+  showExchangeRate = false


this is chill, but do we want a "type" prop so this thing knows if it's a buy/sell/swap? itll make that comment below "show for covert" to make a bit more sense?

dylanjeffers · 2025-07-17T02:50:53Z

+          cursor: isClickable ? 'pointer' : 'default',
+          '&:hover': isClickable
+            ? {
+                backgroundColor: 'var(--harmony-n-50)'


let's try to use useTheme colors when possible

dylanjeffers · 2025-07-17T02:55:52Z

+  outputToken: TokenInfo
+): TokenBalanceManager => {
+  // Fetch AUDIO balance for current user
+  const { accountBalance } = useAudioBalance({ includeConnectedWallets: false })


can we update useAudioBalance to give back status? makes the status variables below easier to compute

gonna nuke this hook later on so just not gonna update for now. will be deprecated due to the new indexing APIs

dylanjeffers · 2025-07-17T02:56:44Z

+
+  // Determine loading state for input token
+  const isInputBalanceLoading = useMemo(() => {
+    if (inputToken.symbol === 'AUDIO') {


def a bit confusing with using he "useAudioBalance" for input/output if it happens to be it, can we not have useTokenBalance cover AUDIO?

yea making more generic in follow up PR

dylanjeffers · 2025-07-17T02:57:21Z

+    if (inputToken.symbol === 'AUDIO') {
+      return isNullOrUndefined(accountBalance)
+    } else {
+      return inputTokenBalanceStatus === Status.LOADING


ideally useTokenBalance returns "isLoading" or "isPending" which we can use here instead?

same as above

cursor

Bug: Token Balance Hook Refactor Breaks User-Specific Displays

The useTokenBalance hook was refactored to remove the userId parameter, causing it to exclusively fetch token balances for the current user. This breaks components like UserBadges and ArtistCoinHoverCard, which are designed to display token balances for specific users via a userId prop. Consequently, these components now incorrectly show the current user's balance, leading to inaccurate or missing token information when viewing other users' profiles.

packages/common/src/api/tan-query/wallets/useTokenBalance.ts#L46-L61

https://github.com/AudiusProject/audius-protocol/blob/a728d48c276041bacb5508ccfc4b38a14bfb7f19/packages/common/src/api/tan-query/wallets/useTokenBalance.ts#L46-L61

packages/mobile/src/components/user-badges/UserBadges.tsx#L26-L29

https://github.com/AudiusProject/audius-protocol/blob/a728d48c276041bacb5508ccfc4b38a14bfb7f19/packages/mobile/src/components/user-badges/UserBadges.tsx#L26-L29

packages/web/src/components/hover-card/ArtistCoinHoverCard.tsx#L49-L52

https://github.com/AudiusProject/audius-protocol/blob/a728d48c276041bacb5508ccfc4b38a14bfb7f19/packages/web/src/components/hover-card/ArtistCoinHoverCard.tsx#L49-L52

packages/web/src/components/user-badges/UserBadges.tsx#L83-L86

https://github.com/AudiusProject/audius-protocol/blob/a728d48c276041bacb5508ccfc4b38a14bfb7f19/packages/web/src/components/user-badges/UserBadges.tsx#L83-L86

Fix in Cursor • Fix in Web

Was this report helpful? Give feedback by reacting with 👍 or 👎

[280d9db] Add track tile carousel skeleton and fix width (#12565) Isaac Solo [5dd5f50] Search/explore mobile web pass (#12562) Isaac Solo [b49cb22] [PE-6505] Update in-app notif navigation for comments to highlight comment (#12554) KJ [cad4bfc] [PE-6509] Add web coin leaderboard modal (#12556) Dylan Jeffers [308a773] Fix setting USDC payout wallet (#12563) Marcus Pasell [3c174c1] [PE-6539] Fix artist coin badge showing when 0 balance (#12560) Reed [0d0c089] [PE-6530] Conditionally show chat message artist coin header (#12559) Reed [179b457] Update eth rpc urls (#12552) KJ [bd3f3cf] Fix mobile image fallback logic (#12549) Ray Jacobson [1a752dd] Speed up mobile app warm start by another ~75% (#12555) JD Francis [a96174d] [QA-2220] Fix mobile user-links with badge-v2 (#12557) Dylan Jeffers [e9c0c3d] Add msw for coin endpoints (#12551) Dylan Jeffers [3dcf5d3] Fix styling for chat message unfurls (#12550) KJ [b343ac0] Add asset detail pages (#12430) Farid Salau [5d6c245] Add non-native conversion to buy/sell modal (#12536) Farid Salau [4c09e50] [PE-6537] Add comment_id to notification action data (#12548) Dylan Jeffers [013f7f5] [PE-6524] Add scroll to comment section on comment link (#12545) KJ [69f3ca0] [PE-6519] Send artist coin holder blast UI (#12538) Reed [cfd654e] Fix misc mobile tile layout issues (#12542) JD Francis [bee3f90] [PE-6516] YourCoins supports BONK on web (#12528) Reed [2e51d03] [QA-2218] Fix artist popover badge (#12543) Ray Jacobson [cabbd73] [PE-2215] Adjust share button size (#12533) Dylan Jeffers [99238c5] Add feature flag to search explore milestone and optimize search fetches (#12541) Isaac Solo [6f3a511] [PE-6502, PE-6504] Add comment highlighting for mobile (#12540) KJ [ba3fcd0] [QA-2212] Improve bottom bar haptics (#12535) Dylan Jeffers [3f1758e] [QA-2223] Fix ActionDrawer text color in dark mode (#12537) KJ [a018dd1] Mobile web search explore fixes (#12534) Isaac Solo [b3474b2] Improve mobile app refocus rerenders (#12532) JD Francis [72c05be] Mobile web top right menu (#12521) Reed [6c45c92] [PE-6515] Border for hex token icons (#12526) Reed [2a762b4] Clicking on token badges shows hover card too (#12527) Reed [d07fbb0] [PE-6420] Improve useCurrentAccount local-storage perf (#12524) Dylan Jeffers [fd8574f] Add examples to @packages/fixed-decimal (#12531) Ray Jacobson [e34f4bf] Aggregate AUDIO amount for X shares (#12530) Dylan Jeffers [81b1709] Fix incorrect comment display (#12529) KJ [d74a7bf] Fix TOKEN_ACCOUNT_NOT_FOUND events (#12523) Dylan Jeffers [0467b88] [PE-6500] Add timezone to remix contest details (#12515) Dylan Jeffers [df4e489] Add feeling lucky, recently played, active discussions explore sections (#12498) Isaac Solo [923f09a] useTokenBalance with fake amounts (#12525) Reed [28adbeb] feat: Add comprehensive BONK token support with multi-token swap func… (#12502) Farid Salau

faridsalau added 3 commits July 14, 2025 05:31

Add dropdown for coin swap

624b3ed

Merge branch 'main' into fs-add-dropdown

4175534

Add convert

1d1f653

pull-request-size Bot added the size/XL label Jul 15, 2025

faridsalau marked this pull request as ready for review July 15, 2025 11:16

faridsalau requested review from dharit-tan and dylanjeffers July 15, 2025 11:17

faridsalau changed the title ~~Fs add dropdown~~ Add non-native conversion to buy/sell modal Jul 15, 2025

This comment was marked as outdated.

Sign in to view

faridsalau added 3 commits July 15, 2025 11:37

Merge branch 'main' into fs-add-dropdown

eded45a

Merge branch 'main' into fs-add-dropdown

b12f0fd

Merge branch 'main' into fs-add-dropdown

0c79e9b

This comment was marked as outdated.

Sign in to view

dylanjeffers approved these changes Jul 17, 2025

View reviewed changes

faridsalau added 2 commits July 17, 2025 09:50

Merge branch 'main' into fs-add-dropdown

9808d80

Remove commentclear

21096f2

This comment was marked as outdated.

Sign in to view

Fix web errors and add feature flag

a78d53f

This comment was marked as outdated.

Sign in to view

Fix mobile errors

a728d48

cursor Bot reviewed Jul 17, 2025

View reviewed changes

faridsalau enabled auto-merge (squash) July 17, 2025 15:48

faridsalau disabled auto-merge July 17, 2025 17:25

faridsalau merged commit 5d6c245 into main Jul 17, 2025
9 of 11 checks passed

faridsalau deleted the fs-add-dropdown branch July 17, 2025 17:25

Uh oh!

Conversation

faridsalau commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Key Changes

Convert Flow Features

Technical Details

How Has This Been Tested?

Uh oh!

changeset-bot Bot commented Jul 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

dylanjeffers left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

This comment was marked as outdated.

Uh oh!

This comment was marked as outdated.

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Bug: Token Balance Hook Refactor Breaks User-Specific Displays

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

faridsalau commented Jul 15, 2025 •

edited

Loading

changeset-bot Bot commented Jul 15, 2025 •

edited

Loading