[PE-7018] Update confirmation and success screens to match designs

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,

packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx

@@ -1,29 +1,29 @@
 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
   tokenInfo: TokenInfo
+  name?: string
   amount: string
-  priceLabel?: string
 }
 
 export const CryptoBalanceSection = ({
   title,
   tokenInfo,
-  amount,
-  priceLabel
+  name,
+  amount
 }: 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>
 
@@ -35,29 +35,21 @@ 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>
         </Flex>
       </Flex>

packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx

@@ -7,22 +7,19 @@ 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
       title={title}
       tokenInfo={tokenInfo}
+      name={tokenInfo.name}
       amount={amount}
-      priceLabel={priceLabel}
     />
   )
 }

packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx

@@ -1,8 +1,6 @@
 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'
 
@@ -12,30 +10,29 @@ const messages = {
 
 type USDCBalanceSectionProps = {
   title: string
-  tokenInfo: TokenInfo
   amount: string
 }
 
 export const USDCBalanceSection = ({
   title,
-  tokenInfo,
   amount
 }: USDCBalanceSectionProps) => {
   return (
     <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>
   )
 }

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>
 

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>
 

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}

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}

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}

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}

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}