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} +