diff --git a/src/components/swap/hooks/use-swap/formatters/index.test.ts b/src/components/swap/hooks/use-swap/formatters/index.test.ts index 3a208cf89..15e32f7e5 100644 --- a/src/components/swap/hooks/use-swap/formatters/index.test.ts +++ b/src/components/swap/hooks/use-swap/formatters/index.test.ts @@ -4,25 +4,25 @@ import { getFormattedTokenPrice, getFormattedTokenPrices } from './' describe('getFormattedTokenPrice()', () => { test('returns correct formatting', async () => { - const formattedPrice = getFormattedTokenPrice('ETH', 'USDC', 1500, 1) + const formattedPrice = getFormattedTokenPrice('ETH', 'USDC', 1500 / 1) const expectedResult = '1 ETH = 1500 USDC' expect(formattedPrice).toEqual(expectedResult) }) test('returns correct formatting for numbers lower 1', async () => { - const formattedPrice = getFormattedTokenPrice('ETH', 'USDC', 1, 234) - const expectedResult = '1 ETH = 0.004 USDC' + const formattedPrice = getFormattedTokenPrice('ETH', 'USDC', 1 / 234) + const expectedResult = '1 ETH = 0.0043 USDC' expect(formattedPrice).toEqual(expectedResult) }) }) describe('getFormattedTokenPrices()', () => { test('returns correct formatting', async () => { - const tokenPrices = getFormattedTokenPrices('ETH', 1500, 'USDC', 1) + const tokenPrices = getFormattedTokenPrices('ETH', 1, 1500, 'USDC', 1520, 1) const expectedResult: TradeDetailTokenPrices = { - inputTokenPrice: '1 ETH = 1500 USDC', + inputTokenPrice: '1 ETH = 1520 USDC', inputTokenPriceUsd: '($1500.00)', - outputTokenPrice: '1 USDC = 0.001 ETH', + outputTokenPrice: '1 USDC = 0.0007 ETH', outputTokenPriceUsd: '($1.00)', } expect(tokenPrices).toEqual(expectedResult) diff --git a/src/components/swap/hooks/use-swap/formatters/index.ts b/src/components/swap/hooks/use-swap/formatters/index.ts index 8c8a88161..8c5b84525 100644 --- a/src/components/swap/hooks/use-swap/formatters/index.ts +++ b/src/components/swap/hooks/use-swap/formatters/index.ts @@ -21,40 +21,39 @@ export function formattedBalance( export function getFormattedTokenPrice( tokenSymbol: string, comparingTokenSymbol: string, - tokenPrice: number, - comparingTokenPrice: number + tokenPrice: number ): string { - const percent = - comparingTokenPrice === 0 ? 0 : tokenPrice / comparingTokenPrice - const isFractional = percent % 1 !== 0 - const price = isFractional ? percent.toFixed(3) : percent + const isFractional = tokenPrice % 1 !== 0 + const price = isFractional ? tokenPrice.toFixed(4) : tokenPrice return `1 ${tokenSymbol} = ${price} ${comparingTokenSymbol}` } export function getFormattedTokenPrices( inputTokenSymbol: string, + inputTokenAmount: number, inputTokenUsd: number, outputTokenSymbol: string, + outputTokenAmount: number, outputTokenUsd: number ): TradeDetailTokenPrices { - const inputTokenPrice = getFormattedTokenPrice( + const inputTokenPrice = outputTokenAmount / inputTokenAmount + const outputTokenPrice = inputTokenAmount / outputTokenAmount + const inputTokenPriceFormatted = getFormattedTokenPrice( inputTokenSymbol, outputTokenSymbol, - inputTokenUsd, - outputTokenUsd + inputTokenPrice ) - const inputTokenPriceUsd = `($${inputTokenUsd.toFixed(2)})` - const outputTokenPrice = getFormattedTokenPrice( + const outputTokenPriceFormatted = getFormattedTokenPrice( outputTokenSymbol, inputTokenSymbol, - outputTokenUsd, - inputTokenUsd + outputTokenPrice ) + const inputTokenPriceUsd = `($${inputTokenUsd.toFixed(2)})` const outputTokenPriceUsd = `($${outputTokenUsd.toFixed(2)})` return { - inputTokenPrice, + inputTokenPrice: inputTokenPriceFormatted, inputTokenPriceUsd, - outputTokenPrice, + outputTokenPrice: outputTokenPriceFormatted, outputTokenPriceUsd, } } diff --git a/src/components/swap/hooks/use-swap/index.tsx b/src/components/swap/hooks/use-swap/index.tsx index 59bd0bff6..49f4bb573 100644 --- a/src/components/swap/hooks/use-swap/index.tsx +++ b/src/components/swap/hooks/use-swap/index.tsx @@ -19,6 +19,7 @@ import { import { getFormattedPriceImpact } from './formatters/price-impact' import { buildTradeDetails } from './trade-details-builder' import { useFormattedBalance } from './use-formatted-balance' +import { formatUnits } from 'viem' interface SwapData { contract: string | null @@ -170,11 +171,18 @@ export function useSwap( () => getFormattedTokenPrices( inputToken.symbol, + Number(inputTokenAmount), selectedQuote?.inputTokenPrice ?? 0, outputToken.symbol, + Number( + formatUnits( + BigInt(selectedQuote?.outputTokenAmount.toString() ?? '0'), + outputToken.decimals + ) + ), selectedQuote?.outputTokenPrice ?? 0 ), - [inputToken, outputToken, selectedQuote] + [inputToken, inputTokenAmount, outputToken, selectedQuote] ) // Trade data