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,
diff --git a/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx b/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
index 27549b430db..a7b7a17e424 100644
--- a/packages/mobile/src/components/buy-sell/CryptoBalanceSection.tsx
+++ b/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 (
{/* Header */}
-
+
{title}
@@ -35,29 +35,21 @@ export const CryptoBalanceSection = ({
style={{ width: iconSize, height: iconSize }}
/>
-
-
-
- {amount}
+
+ {name && (
+
+ {name}
-
- {tokenInfo.symbol}
-
-
-
- {priceLabel && (
-
- {priceLabel}
+ )}
+
+
+
+ {amount}
+
+
+ {tokenInfo.symbol}
- )}
+
diff --git a/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx b/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx
index 48b5d2bedea..e98e1036575 100644
--- a/packages/mobile/src/components/buy-sell/SwapBalanceSection.tsx
+++ b/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 (
-
- )
+ return
}
return (
)
}
diff --git a/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx b/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx
index b13bcf8f9c1..7e859361b96 100644
--- a/packages/mobile/src/components/buy-sell/USDCBalanceSection.tsx
+++ b/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 (
{/* Header */}
-
-
+
{title}
-
{/* Amount */}
-
- {messages.amount(amount)}
-
+
+
+ {messages.amount(amount)}
+
+
+
)
}
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}
/>
+ {exchangeRate ? (
+
+
+ {messages.exchangeRateLabel}
+
+
+ {messages.exchangeRateValue(
+ payTokenInfo.symbol,
+ receiveTokenInfo.symbol,
+ exchangeRate
+ )}
+
+
+ ) : null}
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}
/>
+ {exchangeRate ? (
+
+
+ {messages.exchangeRateLabel}
+
+
+ {messages.exchangeRateValue(
+ payTokenInfo.symbol,
+ receiveTokenInfo.symbol,
+ exchangeRate
+ )}
+
+
+ ) : null}
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/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) => {
/>
+ {exchangeRate ? (
+
+
+ {messages.exchangeRateLabel}
+
+
+ {messages.exchangeRateValue(
+ payTokenInfo.symbol,
+ receiveTokenInfo.symbol,
+ exchangeRate
+ )}
+
+
+ ) : null}
+