update formatted single token prices

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)

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

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