From 8ddbf02a809f8663f105ccb4254d68725d1280e1 Mon Sep 17 00:00:00 2001
From: Farid Salau <faridsalau@gmail.com>
Date: Wed, 1 Oct 2025 09:41:15 -0500
Subject: [PATCH 1/6] Update balance sections

---
 .../buy-sell/CryptoBalanceSection.tsx         | 51 +++++++++++--------
 .../buy-sell/SwapBalanceSection.tsx           |  1 +
 .../buy-sell-modal/CryptoBalanceSection.tsx   | 34 +++++++------
 .../buy-sell-modal/SwapBalanceSection.tsx     |  1 +
 .../buy-sell-modal/USDCBalanceSection.tsx     | 27 ++++------
 .../ReceiveTokensModal.tsx                    |  6 ++-
 .../SendTokensConfirmation.tsx                |  1 +
 .../send-tokens-modal/SendTokensFailure.tsx   |  1 +
 .../send-tokens-modal/SendTokensInput.tsx     |  6 ++-
 .../send-tokens-modal/SendTokensSuccess.tsx   |  1 +
 10 files changed, 73 insertions(+), 56 deletions(-)

diff --git a/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx b/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
index 27549b430db..7d1db81497a 100644
--- a/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
+++ b/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
@@ -6,6 +6,7 @@ import { Flex, Text, useTheme, HexagonalIcon } from '@audius/harmony-native'
 type CryptoBalanceSectionProps = {
   title: string
   tokenInfo: TokenInfo
+  name?: string
   amount: string
   priceLabel?: string
 }
@@ -13,6 +14,7 @@ type CryptoBalanceSectionProps = {
 export const CryptoBalanceSection = ({
   title,
   tokenInfo,
+  name,
   amount,
   priceLabel
 }: CryptoBalanceSectionProps) => {
@@ -35,29 +37,36 @@ export const CryptoBalanceSection = ({
             style={{ width: iconSize, height: iconSize }}
           />
         </HexagonalIcon>
-        <Flex>
-          <Flex row gap='xs' alignItems='center'>
-            <Text variant='heading' size='l'>
-              {amount}
+        <Flex gap='xs'>
+          {name && (
+            <Text variant='heading' size='s'>
+              {name}
             </Text>
-            <Text variant='heading' size='m' color='subdued'>
-              {tokenInfo.symbol}
-            </Text>
-          </Flex>
-          <Flex row gap='xs'>
-            {priceLabel && (
-              <Text
-                variant='heading'
-                size='s'
-                color='subdued'
-                style={{
-                  lineHeight: spacing.unit7,
-                  transform: [{ translateY: -spacing.unitHalf }]
-                }}
-              >
-                {priceLabel}
+          )}
+          <Flex>
+            <Flex row gap='xs' alignItems='center'>
+              <Text variant='title' size='l'>
+                {amount}
+              </Text>
+              <Text variant='title' size='l' color='subdued'>
+                {tokenInfo.symbol}
               </Text>
-            )}
+            </Flex>
+            <Flex row gap='xs'>
+              {priceLabel && (
+                <Text
+                  variant='heading'
+                  size='s'
+                  color='subdued'
+                  style={{
+                    lineHeight: spacing.unit7,
+                    transform: [{ translateY: -spacing.unitHalf }]
+                  }}
+                >
+                  {priceLabel}
+                </Text>
+              )}
+            </Flex>
           </Flex>
         </Flex>
       </Flex>
diff --git a/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx b/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx
index 48b5d2bedea..610b72bf9ee 100644
--- a/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx
+++ b/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx
@@ -21,6 +21,7 @@ export const SwapBalanceSection = (props: SwapBalanceSectionProps) => {
     <CryptoBalanceSection
       title={title}
       tokenInfo={tokenInfo}
+      name={tokenInfo.name}
       amount={amount}
       priceLabel={priceLabel}
     />
diff --git a/packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx b/packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx
index 397c27e3102..4080b159929 100644
--- a/packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx
+++ b/packages/web/src/components/buy-sell-modal/CryptoBalanceSection.tsx
@@ -10,6 +10,7 @@ const messages = {
 type CryptoBalanceSectionProps = {
   title?: string
   tokenInfo: TokenInfo
+  name?: string
   amount: string
   priceLabel?: string
 }
@@ -17,6 +18,7 @@ type CryptoBalanceSectionProps = {
 export const CryptoBalanceSection = ({
   title,
   tokenInfo,
+  name,
   amount,
   priceLabel
 }: CryptoBalanceSectionProps) => {
@@ -24,33 +26,35 @@ export const CryptoBalanceSection = ({
     <Flex direction='column' gap='l'>
       {title ? (
         <Flex alignItems='center' gap='m'>
-          <Text variant='heading' size='s' color='subdued'>
+          <Text variant='title' size='l'>
             {title}
           </Text>
           <Divider css={{ flexGrow: 1 }} />
         </Flex>
       ) : null}
-      <Flex alignItems='center' gap='s' data-testid='token-icon'>
+      <Flex alignItems='center' gap='s'>
         <TokenIcon
           logoURI={tokenInfo.logoURI}
           icon={tokenInfo.icon}
-          w='unit16'
-          h='unit16'
+          w='4xl'
+          h='4xl'
           hex
         />
-        <Flex direction='column'>
-          <Text variant='heading' size='l'>
-            {amount}
-          </Text>
-          <Flex gap='xs'>
-            <Text variant='heading' size='s' color='subdued'>
-              {messages.symbol(tokenInfo.symbol)}
+        <Flex direction='column' gap='xs'>
+          {name ? (
+            <Text variant='heading' size='s'>
+              {name}
             </Text>
-            {priceLabel ? (
-              <Text variant='heading' size='s' color='subdued'>
-                {priceLabel}
+          ) : null}
+          <Flex direction='column'>
+            <Flex gap='xs' alignItems='center'>
+              <Text variant='title' size='l'>
+                {amount}
+              </Text>
+              <Text variant='title' size='l' color='subdued'>
+                {messages.symbol(tokenInfo.symbol)}
               </Text>
-            ) : null}
+            </Flex>
           </Flex>
         </Flex>
       </Flex>
diff --git a/packages/web/src/components/buy-sell-modal/SwapBalanceSection.tsx b/packages/web/src/components/buy-sell-modal/SwapBalanceSection.tsx
index 99e74b0d2ca..d7bd929b306 100644
--- a/packages/web/src/components/buy-sell-modal/SwapBalanceSection.tsx
+++ b/packages/web/src/components/buy-sell-modal/SwapBalanceSection.tsx
@@ -31,6 +31,7 @@ export const SwapBalanceSection = (props: SwapBalanceSectionProps) => {
     <CryptoBalanceSection
       title={title}
       tokenInfo={tokenInfo}
+      name={tokenInfo.name}
       amount={amount}
       priceLabel={priceLabel}
     />
diff --git a/packages/web/src/components/buy-sell-modal/USDCBalanceSection.tsx b/packages/web/src/components/buy-sell-modal/USDCBalanceSection.tsx
index 404604530fc..0dc9402a04e 100644
--- a/packages/web/src/components/buy-sell-modal/USDCBalanceSection.tsx
+++ b/packages/web/src/components/buy-sell-modal/USDCBalanceSection.tsx
@@ -1,9 +1,7 @@
 import { TokenInfo } from '@audius/common/store'
-import { Divider, Flex, Text, IconLogoCircleUSDC } from '@audius/harmony'
+import { Divider, Flex, Text } from '@audius/harmony'
 import { TooltipPlacement } from 'antd/lib/tooltip'
 
-import { env } from 'services/env'
-
 import { TooltipInfoIcon } from './TooltipInfoIcon'
 
 const messages = {
@@ -20,31 +18,24 @@ type USDCBalanceSectionProps = {
 
 export const USDCBalanceSection = ({
   title,
-  tokenInfo,
   amount,
   tooltipPlacement,
   hideTooltip
 }: USDCBalanceSectionProps) => {
-  const isUsdc = tokenInfo.address === env.USDC_MINT_ADDRESS
   return (
     <Flex direction='column' gap='l'>
-      <Flex alignItems='center' gap='s'>
-        <Flex h='l' w='l' alignItems='center' justifyContent='center'>
-          {isUsdc ? (
-            <IconLogoCircleUSDC size='s' />
-          ) : tokenInfo.icon ? (
-            <tokenInfo.icon size='s' />
-          ) : null}
-        </Flex>
-        <Text variant='heading' size='s' color='subdued'>
+      <Flex alignItems='center' gap='m'>
+        <Text variant='title' size='l'>
           {title}
         </Text>
-        {!hideTooltip ? <TooltipInfoIcon placement={tooltipPlacement} /> : null}
         <Divider css={{ flexGrow: 1 }} />
       </Flex>
-      <Text variant='heading' size='xl'>
-        {messages.amount(amount)}
-      </Text>
+      <Flex gap='xs'>
+        <Text variant='heading' size='l'>
+          {messages.amount(amount)}
+        </Text>
+        {!hideTooltip ? <TooltipInfoIcon placement={tooltipPlacement} /> : null}
+      </Flex>
     </Flex>
   )
 }
diff --git a/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx b/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx
index 833af585824..7986bb04a88 100644
--- a/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx
+++ b/packages/web/src/components/receive-tokens-modal/ReceiveTokensModal.tsx
@@ -105,7 +105,11 @@ export const ReceiveTokensModal = () => {
     >
       <Flex direction='column' gap='xl' p='xl' h='100%'>
         {tokenInfo && balance ? (
-          <CryptoBalanceSection tokenInfo={tokenInfo} amount={balance} />
+          <CryptoBalanceSection
+            tokenInfo={tokenInfo}
+            name={tokenInfo.name}
+            amount={balance}
+          />
         ) : null}
 
         <Divider orientation='horizontal' color='default' />
diff --git a/packages/web/src/components/send-tokens-modal/SendTokensConfirmation.tsx b/packages/web/src/components/send-tokens-modal/SendTokensConfirmation.tsx
index eeb4d225084..451ae32af73 100644
--- a/packages/web/src/components/send-tokens-modal/SendTokensConfirmation.tsx
+++ b/packages/web/src/components/send-tokens-modal/SendTokensConfirmation.tsx
@@ -92,6 +92,7 @@ const SendTokensConfirmation = ({
       {/* Token Balance Section */}
       <CryptoBalanceSection
         tokenInfo={tokenInfo}
+        name={tokenInfo.name}
         amount={tokenBalance?.balanceLocaleString ?? ''}
       />
 
diff --git a/packages/web/src/components/send-tokens-modal/SendTokensFailure.tsx b/packages/web/src/components/send-tokens-modal/SendTokensFailure.tsx
index 1793110d24f..e468c03be4f 100644
--- a/packages/web/src/components/send-tokens-modal/SendTokensFailure.tsx
+++ b/packages/web/src/components/send-tokens-modal/SendTokensFailure.tsx
@@ -92,6 +92,7 @@ const SendTokensFailure = ({
       {/* Token Balance Section */}
       <CryptoBalanceSection
         tokenInfo={tokenInfo}
+        name={tokenInfo.name}
         amount={formatBalance(currentBalance)}
       />
 
diff --git a/packages/web/src/components/send-tokens-modal/SendTokensInput.tsx b/packages/web/src/components/send-tokens-modal/SendTokensInput.tsx
index 4c51f435dbd..79bde7b2e92 100644
--- a/packages/web/src/components/send-tokens-modal/SendTokensInput.tsx
+++ b/packages/web/src/components/send-tokens-modal/SendTokensInput.tsx
@@ -164,7 +164,11 @@ const SendTokensInput = ({
   return (
     <Flex direction='column' gap='xl' p='xl'>
       {/* Token Balance Section */}
-      <CryptoBalanceSection tokenInfo={tokenInfo} amount={formattedBalance} />
+      <CryptoBalanceSection
+        tokenInfo={tokenInfo}
+        name={tokenInfo.name}
+        amount={formattedBalance}
+      />
 
       <Divider orientation='horizontal' color='default' />
 
diff --git a/packages/web/src/components/send-tokens-modal/SendTokensSuccess.tsx b/packages/web/src/components/send-tokens-modal/SendTokensSuccess.tsx
index 817aea521ce..2d0c8bc992c 100644
--- a/packages/web/src/components/send-tokens-modal/SendTokensSuccess.tsx
+++ b/packages/web/src/components/send-tokens-modal/SendTokensSuccess.tsx
@@ -89,6 +89,7 @@ const SendTokensSuccess = ({
       {/* Token Balance Section */}
       <CryptoBalanceSection
         tokenInfo={tokenInfo}
+        name={tokenInfo.name}
         amount={formatBalance(currentBalance)}
       />
 

From 481b5caa66c923eeac79defba95ce55122b0d891 Mon Sep 17 00:00:00 2001
From: Farid Salau <faridsalau@gmail.com>
Date: Wed, 1 Oct 2025 09:47:29 -0500
Subject: [PATCH 2/6] Update mobile

---
 .../buy-sell/CryptoBalanceSection.tsx         | 21 +++----------------
 .../buy-sell/USDCBalanceSection.tsx           | 15 ++++++-------
 2 files changed, 11 insertions(+), 25 deletions(-)

diff --git a/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx b/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
index 7d1db81497a..5f3e6fdc9f5 100644
--- a/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
+++ b/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
@@ -1,7 +1,7 @@
 import { type TokenInfo } from '@audius/common/store'
 import { Image } from 'react-native'
 
-import { Flex, Text, useTheme, HexagonalIcon } from '@audius/harmony-native'
+import { Flex, HexagonalIcon, Text, useTheme } from '@audius/harmony-native'
 
 type CryptoBalanceSectionProps = {
   title: string
@@ -19,13 +19,13 @@ export const CryptoBalanceSection = ({
   priceLabel
 }: CryptoBalanceSectionProps) => {
   const { logoURI } = tokenInfo
-  const { iconSizes, spacing } = useTheme()
+  const { iconSizes } = useTheme()
   const iconSize = iconSizes['4xl']
 
   return (
     <Flex gap='m'>
       {/* Header */}
-      <Text variant='heading' size='s' color='subdued'>
+      <Text variant='title' size='l'>
         {title}
       </Text>
 
@@ -52,21 +52,6 @@ export const CryptoBalanceSection = ({
                 {tokenInfo.symbol}
               </Text>
             </Flex>
-            <Flex row gap='xs'>
-              {priceLabel && (
-                <Text
-                  variant='heading'
-                  size='s'
-                  color='subdued'
-                  style={{
-                    lineHeight: spacing.unit7,
-                    transform: [{ translateY: -spacing.unitHalf }]
-                  }}
-                >
-                  {priceLabel}
-                </Text>
-              )}
-            </Flex>
           </Flex>
         </Flex>
       </Flex>
diff --git a/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx b/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx
index b13bcf8f9c1..9bc90ca3cc2 100644
--- a/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx
+++ b/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 import type { TokenInfo } from '@audius/common/store'
 
-import { Flex, IconTokenUSDC, Text } from '@audius/harmony-native'
+import { Flex, Text } from '@audius/harmony-native'
 
 import { TooltipInfoIcon } from './TooltipInfoIcon'
 
@@ -25,17 +25,18 @@ export const USDCBalanceSection = ({
     <Flex direction='column' gap='m'>
       {/* Header */}
       <Flex direction='row' alignItems='center' gap='s'>
-        <IconTokenUSDC size='l' />
-        <Text variant='heading' size='s' color='subdued'>
+        <Text variant='title' size='l'>
           {title}
         </Text>
-        <TooltipInfoIcon />
       </Flex>
 
       {/* Amount */}
-      <Text variant='heading' size='xl'>
-        {messages.amount(amount)}
-      </Text>
+      <Flex row gap='xs'>
+        <Text variant='heading' size='l'>
+          {messages.amount(amount)}
+        </Text>
+        <TooltipInfoIcon />
+      </Flex>
     </Flex>
   )
 }

From 1c3167ac391be3228a393207cc61776a859ad49d Mon Sep 17 00:00:00 2001
From: Farid Salau <faridsalau@gmail.com>
Date: Wed, 1 Oct 2025 10:01:24 -0500
Subject: [PATCH 3/6] Add exchange rate

---
 .../buy-sell/CryptoBalanceSection.tsx         |  4 +--
 .../buy-sell/SwapBalanceSection.tsx           |  8 ++----
 .../buy-sell/USDCBalanceSection.tsx           |  4 ---
 .../buy-sell-screen/ConfirmSwapScreen.tsx     | 22 +++++++++------
 .../TransactionResultScreen.tsx               | 27 ++++++++++---------
 .../buy-sell-modal/ConfirmSwapScreen.tsx      | 15 +++++++++++
 .../TransactionSuccessScreen.tsx              | 17 ++++++++++++
 .../buy-sell-modal/USDCBalanceSection.tsx     |  2 --
 .../components/LaunchpadBuyModal.tsx          |  1 +
 9 files changed, 65 insertions(+), 35 deletions(-)

diff --git a/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx b/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
index 5f3e6fdc9f5..a7b7a17e424 100644
--- a/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
+++ b/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
@@ -8,15 +8,13 @@ type CryptoBalanceSectionProps = {
   tokenInfo: TokenInfo
   name?: string
   amount: string
-  priceLabel?: string
 }
 
 export const CryptoBalanceSection = ({
   title,
   tokenInfo,
   name,
-  amount,
-  priceLabel
+  amount
 }: CryptoBalanceSectionProps) => {
   const { logoURI } = tokenInfo
   const { iconSizes } = useTheme()
diff --git a/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx b/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx
index 610b72bf9ee..e98e1036575 100644
--- a/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx
+++ b/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx
@@ -7,15 +7,12 @@ type SwapBalanceSectionProps = {
   title: string
   tokenInfo: TokenInfo
   amount: string
-  priceLabel?: string
 }
 
 export const SwapBalanceSection = (props: SwapBalanceSectionProps) => {
-  const { title, tokenInfo, amount, priceLabel } = props
+  const { title, tokenInfo, amount } = props
   if (tokenInfo.symbol === 'USDC') {
-    return (
-      <USDCBalanceSection title={title} tokenInfo={tokenInfo} amount={amount} />
-    )
+    return <USDCBalanceSection title={title} amount={amount} />
   }
   return (
     <CryptoBalanceSection
@@ -23,7 +20,6 @@ export const SwapBalanceSection = (props: SwapBalanceSectionProps) => {
       tokenInfo={tokenInfo}
       name={tokenInfo.name}
       amount={amount}
-      priceLabel={priceLabel}
     />
   )
 }
diff --git a/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx b/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx
index 9bc90ca3cc2..7e859361b96 100644
--- a/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx
+++ b/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx
@@ -1,7 +1,5 @@
 import React from 'react'
 
-import type { TokenInfo } from '@audius/common/store'
-
 import { Flex, Text } from '@audius/harmony-native'
 
 import { TooltipInfoIcon } from './TooltipInfoIcon'
@@ -12,13 +10,11 @@ const messages = {
 
 type USDCBalanceSectionProps = {
   title: string
-  tokenInfo: TokenInfo
   amount: string
 }
 
 export const USDCBalanceSection = ({
   title,
-  tokenInfo,
   amount
 }: USDCBalanceSectionProps) => {
   return (
diff --git a/packages/mobile/src/screens/buy-sell-screen/ConfirmSwapScreen.tsx b/packages/mobile/src/screens/buy-sell-screen/ConfirmSwapScreen.tsx
index 83e2177c816..fb040e0ec55 100644
--- a/packages/mobile/src/screens/buy-sell-screen/ConfirmSwapScreen.tsx
+++ b/packages/mobile/src/screens/buy-sell-screen/ConfirmSwapScreen.tsx
@@ -99,8 +99,6 @@ export const ConfirmSwapScreen = ({ route }: ConfirmSwapScreenProps) => {
       receiveTokenInfo,
       payAmount,
       receiveAmount,
-      pricePerBaseToken,
-      baseTokenSymbol,
       exchangeRate = null
     },
     activeTab,
@@ -246,11 +244,6 @@ export const ConfirmSwapScreen = ({ route }: ConfirmSwapScreenProps) => {
     decimals: receiveTokenInfo.decimals
   })
 
-  const isReceivingBaseToken = receiveTokenInfo.symbol === baseTokenSymbol
-  const priceLabel = isReceivingBaseToken
-    ? messages.priceEach(pricePerBaseToken)
-    : undefined
-
   const handleBack = () => {
     navigation.goBack()
   }
@@ -312,9 +305,22 @@ export const ConfirmSwapScreen = ({ route }: ConfirmSwapScreenProps) => {
                 title={messages.youReceive}
                 tokenInfo={receiveTokenInfo}
                 amount={formattedReceiveAmount}
-                priceLabel={priceLabel}
               />
             </Flex>
+            {exchangeRate ? (
+              <Flex row gap='xs' alignItems='center' pt='s'>
+                <Text variant='body' size='s' color='subdued'>
+                  {messages.exchangeRateLabel}
+                </Text>
+                <Text variant='body' size='s' color='default'>
+                  {messages.exchangeRateValue(
+                    payTokenInfo.symbol,
+                    receiveTokenInfo.symbol,
+                    exchangeRate
+                  )}
+                </Text>
+              </Flex>
+            ) : null}
           </Flex>
         </FixedFooterContent>
 
diff --git a/packages/mobile/src/screens/buy-sell-screen/TransactionResultScreen.tsx b/packages/mobile/src/screens/buy-sell-screen/TransactionResultScreen.tsx
index cf90c39c2cf..80afaaa6c00 100644
--- a/packages/mobile/src/screens/buy-sell-screen/TransactionResultScreen.tsx
+++ b/packages/mobile/src/screens/buy-sell-screen/TransactionResultScreen.tsx
@@ -74,17 +74,7 @@ export const TransactionResultScreen = ({
   }
 
   if (result.status === 'success' && successData) {
-    const {
-      payTokenInfo,
-      receiveTokenInfo,
-      pricePerBaseToken,
-      baseTokenSymbol
-    } = successData
-
-    const isReceivingBaseToken = receiveTokenInfo.symbol === baseTokenSymbol
-    const priceLabel = isReceivingBaseToken
-      ? messages.priceEach(pricePerBaseToken)
-      : undefined
+    const { payTokenInfo, receiveTokenInfo, exchangeRate } = successData
 
     if (!formattedPayAmount || !formattedReceiveAmount) return null
 
@@ -115,9 +105,22 @@ export const TransactionResultScreen = ({
                   title={messages.youReceived}
                   tokenInfo={receiveTokenInfo}
                   amount={formattedReceiveAmount}
-                  priceLabel={priceLabel}
                 />
               </Flex>
+              {exchangeRate ? (
+                <Flex row gap='xs' alignItems='center' pt='s'>
+                  <Text variant='body' size='s' color='subdued'>
+                    {messages.exchangeRateLabel}
+                  </Text>
+                  <Text variant='body' size='s' color='default'>
+                    {messages.exchangeRateValue(
+                      payTokenInfo.symbol,
+                      receiveTokenInfo.symbol,
+                      exchangeRate
+                    )}
+                  </Text>
+                </Flex>
+              ) : null}
             </Flex>
           </FixedFooterContent>
 
diff --git a/packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx b/packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx
index 61db0a576c2..13f01e6fb55 100644
--- a/packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx
+++ b/packages/web/src/components/buy-sell-modal/ConfirmSwapScreen.tsx
@@ -115,6 +115,21 @@ export const ConfirmSwapScreen = (props: ConfirmSwapScreenProps) => {
         />
       </Flex>
 
+      {exchangeRate ? (
+        <Flex gap='xs' alignItems='center' mt='l'>
+          <Text variant='body' size='s' color='subdued'>
+            {messages.exchangeRateLabel}
+          </Text>
+          <Text variant='body' size='s' color='default'>
+            {messages.exchangeRateValue(
+              payTokenInfo.symbol,
+              receiveTokenInfo.symbol,
+              exchangeRate
+            )}
+          </Text>
+        </Flex>
+      ) : null}
+
       <Flex gap='s' mt='xl'>
         <Button variant='secondary' fullWidth onClick={onBack}>
           {messages.back}
diff --git a/packages/web/src/components/buy-sell-modal/TransactionSuccessScreen.tsx b/packages/web/src/components/buy-sell-modal/TransactionSuccessScreen.tsx
index 3dd694ee801..e3ae2f4adc0 100644
--- a/packages/web/src/components/buy-sell-modal/TransactionSuccessScreen.tsx
+++ b/packages/web/src/components/buy-sell-modal/TransactionSuccessScreen.tsx
@@ -20,6 +20,7 @@ type TransactionSuccessScreenProps = {
   receiveAmount: number
   pricePerBaseToken?: number
   baseTokenSymbol: string
+  exchangeRate?: number | null
   onDone: () => void
   hideUSDCTooltip?: boolean
 }
@@ -34,6 +35,7 @@ export const TransactionSuccessScreen = (
     receiveAmount,
     pricePerBaseToken,
     baseTokenSymbol,
+    exchangeRate,
     onDone,
     hideUSDCTooltip
   } = props
@@ -84,6 +86,21 @@ export const TransactionSuccessScreen = (
         />
       </Flex>
 
+      {exchangeRate ? (
+        <Flex gap='xs' alignItems='center' mt='l'>
+          <Text variant='body' size='s' color='subdued'>
+            {messages.exchangeRateLabel}
+          </Text>
+          <Text variant='body' size='s' color='default'>
+            {messages.exchangeRateValue(
+              payTokenInfo.symbol,
+              receiveTokenInfo.symbol,
+              exchangeRate
+            )}
+          </Text>
+        </Flex>
+      ) : null}
+
       <Flex>
         <Button variant='primary' fullWidth onClick={onDone}>
           {messages.done}
diff --git a/packages/web/src/components/buy-sell-modal/USDCBalanceSection.tsx b/packages/web/src/components/buy-sell-modal/USDCBalanceSection.tsx
index 0dc9402a04e..9b1d5132f6e 100644
--- a/packages/web/src/components/buy-sell-modal/USDCBalanceSection.tsx
+++ b/packages/web/src/components/buy-sell-modal/USDCBalanceSection.tsx
@@ -1,4 +1,3 @@
-import { TokenInfo } from '@audius/common/store'
 import { Divider, Flex, Text } from '@audius/harmony'
 import { TooltipPlacement } from 'antd/lib/tooltip'
 
@@ -10,7 +9,6 @@ const messages = {
 
 type USDCBalanceSectionProps = {
   title: string
-  tokenInfo: TokenInfo
   amount: string
   tooltipPlacement?: TooltipPlacement
   hideTooltip?: boolean
diff --git a/packages/web/src/pages/artist-coins-launchpad-page/components/LaunchpadBuyModal.tsx b/packages/web/src/pages/artist-coins-launchpad-page/components/LaunchpadBuyModal.tsx
index 0a5e2f6a053..08a45dc7015 100644
--- a/packages/web/src/pages/artist-coins-launchpad-page/components/LaunchpadBuyModal.tsx
+++ b/packages/web/src/pages/artist-coins-launchpad-page/components/LaunchpadBuyModal.tsx
@@ -326,6 +326,7 @@ const SuccessStep = ({ onClose }: { onClose: () => void }) => {
           baseTokenSymbol={values.selectedInputToken.symbol}
           payAmount={Number(values.inputAmount)}
           receiveAmount={Number(values.outputAmount)}
+          exchangeRate={null}
           hideUSDCTooltip
           onDone={onClose}
         />

From 6cefa7a54199e54822415713d744855cd8694e2e Mon Sep 17 00:00:00 2001
From: Farid Salau <faridsalau@gmail.com>
Date: Wed, 1 Oct 2025 10:40:03 -0500
Subject: [PATCH 4/6] Fix lint

---
 .../web/src/components/buy-sell-modal/SwapBalanceSection.tsx     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web/src/components/buy-sell-modal/SwapBalanceSection.tsx b/packages/web/src/components/buy-sell-modal/SwapBalanceSection.tsx
index d7bd929b306..181b86f9322 100644
--- a/packages/web/src/components/buy-sell-modal/SwapBalanceSection.tsx
+++ b/packages/web/src/components/buy-sell-modal/SwapBalanceSection.tsx
@@ -20,7 +20,6 @@ export const SwapBalanceSection = (props: SwapBalanceSectionProps) => {
     return (
       <USDCBalanceSection
         title={title}
-        tokenInfo={tokenInfo}
         amount={amount}
         hideTooltip={hideUSDCTooltip}
         tooltipPlacement='right'

From 0d89102e228b92dbd904ea34b71eb16feaae51cd Mon Sep 17 00:00:00 2001
From: Farid Salau <faridsalau@gmail.com>
Date: Wed, 1 Oct 2025 10:48:10 -0500
Subject: [PATCH 5/6] Avoid using parseFloat

---
 .../screens/buy-sell-screen/components/BuyScreen.tsx   | 10 ++++------
 .../buy-sell-screen/components/ConvertScreen.tsx       | 10 ++++------
 packages/web/src/components/buy-sell-modal/BuyTab.tsx  | 10 ++++------
 .../web/src/components/buy-sell-modal/ConvertTab.tsx   | 10 ++++------
 packages/web/src/components/buy-sell-modal/SellTab.tsx | 10 ++++------
 5 files changed, 20 insertions(+), 30 deletions(-)

diff --git a/packages/mobile/src/screens/buy-sell-screen/components/BuyScreen.tsx b/packages/mobile/src/screens/buy-sell-screen/components/BuyScreen.tsx
index 7a166da5bde..3b9d4d2ae6b 100644
--- a/packages/mobile/src/screens/buy-sell-screen/components/BuyScreen.tsx
+++ b/packages/mobile/src/screens/buy-sell-screen/components/BuyScreen.tsx
@@ -79,12 +79,10 @@ export const BuyScreen = ({
   const { data: tokenPriceData, isPending: isTokenPriceLoading } =
     useArtistCoin(tokenPair?.baseToken?.address)
 
-  const tokenPrice = tokenPriceData?.price?.toString() ?? null
-
   const decimalPlaces = useMemo(() => {
-    if (!tokenPrice) return 2
-    return getCurrencyDecimalPlaces(parseFloat(tokenPrice))
-  }, [tokenPrice])
+    if (!tokenPriceData?.price) return 2
+    return getCurrencyDecimalPlaces(tokenPriceData.price)
+  }, [tokenPriceData?.price])
 
   const {
     inputAmount,
@@ -147,7 +145,7 @@ export const BuyScreen = ({
             onAmountChange={handleOutputAmountChange}
             availableBalance={0}
             exchangeRate={currentExchangeRate}
-            tokenPrice={tokenPrice}
+            tokenPrice={tokenPriceData?.price.toString() ?? null}
             isTokenPriceLoading={isTokenPriceLoading}
             tokenPriceDecimalPlaces={decimalPlaces}
             availableTokens={artistCoins}
diff --git a/packages/mobile/src/screens/buy-sell-screen/components/ConvertScreen.tsx b/packages/mobile/src/screens/buy-sell-screen/components/ConvertScreen.tsx
index e88a103adf1..0bcd6872a23 100644
--- a/packages/mobile/src/screens/buy-sell-screen/components/ConvertScreen.tsx
+++ b/packages/mobile/src/screens/buy-sell-screen/components/ConvertScreen.tsx
@@ -100,12 +100,10 @@ export const ConvertScreen = ({
   const { data: tokenPriceData, isPending: isTokenPriceLoading } =
     useArtistCoin(selectedOutputToken?.address ?? '')
 
-  const tokenPrice = tokenPriceData?.price?.toString() ?? null
-
   const decimalPlaces = useMemo(() => {
-    if (!tokenPrice) return 2
-    return getCurrencyDecimalPlaces(parseFloat(tokenPrice))
-  }, [tokenPrice])
+    if (!tokenPriceData?.price) return 2
+    return getCurrencyDecimalPlaces(tokenPriceData.price)
+  }, [tokenPriceData?.price])
 
   const {
     inputAmount,
@@ -234,7 +232,7 @@ export const ConvertScreen = ({
             onAmountChange={handleOutputAmountChange}
             availableBalance={0}
             exchangeRate={currentExchangeRate}
-            tokenPrice={tokenPrice}
+            tokenPrice={tokenPriceData?.price.toString() ?? null}
             isTokenPriceLoading={isTokenPriceLoading}
             tokenPriceDecimalPlaces={decimalPlaces}
             availableTokens={filteredAvailableOutputTokens}
diff --git a/packages/web/src/components/buy-sell-modal/BuyTab.tsx b/packages/web/src/components/buy-sell-modal/BuyTab.tsx
index f763bcaa50e..3fef452d69e 100644
--- a/packages/web/src/components/buy-sell-modal/BuyTab.tsx
+++ b/packages/web/src/components/buy-sell-modal/BuyTab.tsx
@@ -44,12 +44,10 @@ export const BuyTab = ({
   const { data: tokenPriceData, isPending: isTokenPriceLoading } =
     useArtistCoin(selectedOutputToken.address)
 
-  const tokenPrice = tokenPriceData?.price?.toString() ?? null
-
   const decimalPlaces = useMemo(() => {
-    if (!tokenPrice) return 2
-    return getCurrencyDecimalPlaces(parseFloat(tokenPrice))
-  }, [tokenPrice])
+    if (!tokenPriceData?.price) return 2
+    return getCurrencyDecimalPlaces(tokenPriceData.price)
+  }, [tokenPriceData?.price])
 
   const {
     inputAmount,
@@ -117,7 +115,7 @@ export const BuyTab = ({
             onAmountChange={handleOutputAmountChange}
             availableBalance={0}
             exchangeRate={currentExchangeRate}
-            tokenPrice={tokenPrice}
+            tokenPrice={tokenPriceData?.price.toString() ?? null}
             isTokenPriceLoading={isTokenPriceLoading}
             tokenPriceDecimalPlaces={decimalPlaces}
             availableTokens={artistCoins}
diff --git a/packages/web/src/components/buy-sell-modal/ConvertTab.tsx b/packages/web/src/components/buy-sell-modal/ConvertTab.tsx
index ce9fc9b19c9..b8ec7dba0f2 100644
--- a/packages/web/src/components/buy-sell-modal/ConvertTab.tsx
+++ b/packages/web/src/components/buy-sell-modal/ConvertTab.tsx
@@ -47,12 +47,10 @@ export const ConvertTab = ({
   const { data: tokenPriceData, isPending: isTokenPriceLoading } =
     useArtistCoin(selectedOutputToken.address)
 
-  const tokenPrice = tokenPriceData?.price?.toString() ?? null
-
   const decimalPlaces = useMemo(() => {
-    if (!tokenPrice) return 2
-    return getCurrencyDecimalPlaces(parseFloat(tokenPrice))
-  }, [tokenPrice])
+    if (!tokenPriceData?.price) return 2
+    return getCurrencyDecimalPlaces(tokenPriceData.price)
+  }, [tokenPriceData?.price])
 
   const {
     inputAmount,
@@ -204,7 +202,7 @@ export const ConvertTab = ({
             onAmountChange={handleOutputAmountChange}
             availableBalance={0}
             exchangeRate={currentExchangeRate}
-            tokenPrice={tokenPrice}
+            tokenPrice={tokenPriceData?.price.toString() ?? null}
             isTokenPriceLoading={isTokenPriceLoading}
             tokenPriceDecimalPlaces={decimalPlaces}
             availableTokens={filteredAvailableOutputTokens}
diff --git a/packages/web/src/components/buy-sell-modal/SellTab.tsx b/packages/web/src/components/buy-sell-modal/SellTab.tsx
index 1ba03a5c76c..4f57c79ceda 100644
--- a/packages/web/src/components/buy-sell-modal/SellTab.tsx
+++ b/packages/web/src/components/buy-sell-modal/SellTab.tsx
@@ -36,12 +36,10 @@ export const SellTab = ({
   const { data: tokenPriceData, isPending: isTokenPriceLoading } =
     useArtistCoin(selectedInputToken.address)
 
-  const tokenPrice = tokenPriceData?.price?.toString() ?? null
-
   const decimalPlaces = useMemo(() => {
-    if (!tokenPrice) return 2
-    return getCurrencyDecimalPlaces(parseFloat(tokenPrice))
-  }, [tokenPrice])
+    if (!tokenPriceData?.price) return 2
+    return getCurrencyDecimalPlaces(tokenPriceData.price)
+  }, [tokenPriceData?.price])
 
   const {
     inputAmount,
@@ -105,7 +103,7 @@ export const SellTab = ({
             onAmountChange={handleOutputAmountChange}
             availableBalance={0}
             exchangeRate={currentExchangeRate}
-            tokenPrice={tokenPrice}
+            tokenPrice={tokenPriceData?.price.toString() ?? null}
             isTokenPriceLoading={isTokenPriceLoading}
             tokenPriceDecimalPlaces={decimalPlaces}
             hideTokenDisplay={true} // Hide token display completely in sell tab output

From be3871a26326c1c9accfa64a8b705ffb0a7d330f Mon Sep 17 00:00:00 2001
From: Farid Salau <faridsalau@gmail.com>
Date: Wed, 1 Oct 2025 10:56:44 -0500
Subject: [PATCH 6/6] Format rate

---
 packages/common/src/messages/buySell.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/packages/common/src/messages/buySell.ts b/packages/common/src/messages/buySell.ts
index f653452928c..0baacabf825 100644
--- a/packages/common/src/messages/buySell.ts
+++ b/packages/common/src/messages/buySell.ts
@@ -1,6 +1,7 @@
 import { USDC } from '@audius/fixed-decimal'
 
 import { formatTokenPrice } from '../api/tan-query/jupiter/utils'
+import { getCurrencyDecimalPlaces } from '../utils/decimal'
 
 export const buySellMessages = {
   title: 'BUY / SELL',
@@ -72,7 +73,14 @@ export const buySellMessages = {
     inputSymbol: string,
     outputSymbol: string,
     rate: number
-  ) => `1 ${inputSymbol} ≈ ${rate} ${outputSymbol}`,
+  ) => {
+    const decimalPlaces = getCurrencyDecimalPlaces(rate)
+    const formattedRate = new Intl.NumberFormat('en-US', {
+      minimumFractionDigits: 2,
+      maximumFractionDigits: decimalPlaces
+    }).format(rate)
+    return `1 ${inputSymbol} ≈ ${formattedRate} ${outputSymbol}`
+  },
   formattedAvailableBalance: (
     formattedBalance: string,
     _symbol: string,