fix: "revert feat: Use ETH based pricing instead of USDC based pricing for...

fix: "revert feat: Use ETH based pricing instead of USDC based pricing for quote USD values (#6132) (#6150)

* Revert "feat: Use ETH based pricing instead of USDC based pricing for quote USD values (#6132)"

This reverts commit a8864614.

* revert isLoading api

* fix lint errors

* fix loading state

src/components/CurrencyInputPanel/FiatValue.tsx

 import { Trans } from '@lingui/macro'
 // eslint-disable-next-line no-restricted-imports
 import { t } from '@lingui/macro'
-import { formatNumber, formatPriceImpact, NumberType } from '@uniswap/conedison/format'
-import { Percent } from '@uniswap/sdk-core'
+import { formatCurrencyAmount, formatPriceImpact, NumberType } from '@uniswap/conedison/format'
+import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import { LoadingBubble } from 'components/Tokens/loading'
 import { MouseoverTooltip } from 'components/Tooltip'
-import { useMemo } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import styled, { useTheme } from 'styled-components/macro'
 
 import { ThemedText } from '../../theme'
@@ -20,9 +20,11 @@ const FiatLoadingBubble = styled(LoadingBubble)`
 export function FiatValue({
   fiatValue,
   priceImpact,
+  isLoading = false,
 }: {
-  fiatValue?: { data?: number; isLoading: boolean }
+  fiatValue: CurrencyAmount<Currency> | null | undefined
   priceImpact?: Percent
+  isLoading?: boolean
 }) {
   const theme = useTheme()
   const priceImpactColor = useMemo(() => {
@@ -33,14 +35,27 @@ export function FiatValue({
     if (severity < 3) return theme.deprecated_yellow1
     return theme.accentFailure
   }, [priceImpact, theme.accentSuccess, theme.accentFailure, theme.textTertiary, theme.deprecated_yellow1])
+  const [showLoadingPlaceholder, setShowLoadingPlaceholder] = useState(false)
+  useEffect(() => {
+    const stale = false
+    let timeoutId = 0
+    if (isLoading && !fiatValue) {
+      timeoutId = setTimeout(() => {
+        if (!stale) setShowLoadingPlaceholder(true)
+      }, 200) as unknown as number
+    } else {
+      setShowLoadingPlaceholder(false)
+    }
+    return () => clearTimeout(timeoutId)
+  }, [isLoading, fiatValue])
 
   return (
     <ThemedText.DeprecatedBody fontSize={14} color={theme.textSecondary}>
-      {fiatValue?.isLoading ? (
+      {showLoadingPlaceholder ? (
         <FiatLoadingBubble />
       ) : (
         <div>
-          {fiatValue?.data ? formatNumber(fiatValue.data, NumberType.FiatTokenPrice) : undefined}
+          {fiatValue ? <>{formatCurrencyAmount(fiatValue, NumberType.FiatTokenPrice)}</> : undefined}
           {priceImpact && (
             <span style={{ color: priceImpactColor }}>
               {' '}

src/components/CurrencyInputPanel/SwapCurrencyInputPanel.tsx

 import { Trans } from '@lingui/macro'
 import { TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
-import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
 import { AutoColumn } from 'components/Column'
@@ -195,7 +195,7 @@ interface SwapCurrencyInputPanelProps {
   pair?: Pair | null
   hideInput?: boolean
   otherCurrency?: Currency | null
-  fiatValue: { data?: number; isLoading: boolean }
+  fiatValue: CurrencyAmount<Token> | null
   priceImpact?: Percent
   id: string
   showCommonBases?: boolean

src/components/CurrencyInputPanel/index.tsx

 import { Trans } from '@lingui/macro'
 import { TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
-import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { useWeb3React } from '@web3-react/core'
 import { AutoColumn } from 'components/Column'
@@ -182,7 +182,7 @@ interface CurrencyInputPanelProps {
   pair?: Pair | null
   hideInput?: boolean
   otherCurrency?: Currency | null
-  fiatValue?: { data?: number; isLoading: boolean }
+  fiatValue?: CurrencyAmount<Token> | null
   priceImpact?: Percent
   id: string
   showCommonBases?: boolean

src/components/Widget/transactions.ts

@@ -108,7 +108,7 @@ export function useSyncWidgetTransactions() {
           ...formatSwapSignedAnalyticsEventProperties({
             trade,
             // TODO: add once Widgets adds fiat values to callback
-            fiatValues: { amountIn: undefined, amountOut: undefined },
+            fiatValues: { amountIn: null, amountOut: null },
             txHash: transaction.receipt?.transactionHash ?? '',
           }),
           ...trace,

src/components/swap/ConfirmSwapModal.tsx

@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Trace } from '@uniswap/analytics'
 import { InterfaceModalName } from '@uniswap/analytics-events'
 import { Trade } from '@uniswap/router-sdk'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
 import { ReactNode, useCallback, useMemo, useState } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 import { tradeMeaningfullyDiffers } from 'utils/tradeMeaningFullyDiffer'
@@ -42,8 +42,8 @@ export default function ConfirmSwapModal({
   swapErrorMessage: ReactNode | undefined
   onDismiss: () => void
   swapQuoteReceivedDate: Date | undefined
-  fiatValueInput: { data?: number; isLoading: boolean }
-  fiatValueOutput: { data?: number; isLoading: boolean }
+  fiatValueInput: CurrencyAmount<Token> | null
+  fiatValueOutput: CurrencyAmount<Token> | null
 }) {
   // shouldLogModalCloseEvent lets the child SwapModalHeader component know when modal has been closed
   // and an event triggered by modal closing should be logged.

src/components/swap/SwapModalFooter.tsx

 import { Trans } from '@lingui/macro'
 import { TraceEvent } from '@uniswap/analytics'
 import { BrowserEvent, InterfaceElementName, SwapEventName } from '@uniswap/analytics-events'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, Token, TradeType } from '@uniswap/sdk-core'
 import useTransactionDeadline from 'hooks/useTransactionDeadline'
 import {
   formatPercentInBasisPointsNumber,
@@ -31,8 +31,8 @@ interface AnalyticsEventProps {
   isAutoRouterApi: boolean
   swapQuoteReceivedDate: Date | undefined
   routes: RoutingDiagramEntry[]
-  fiatValueInput?: number
-  fiatValueOutput?: number
+  fiatValueInput?: CurrencyAmount<Token> | null
+  fiatValueOutput?: CurrencyAmount<Token> | null
 }
 
 const formatRoutesEventProperties = (routes: RoutingDiagramEntry[]) => {
@@ -83,8 +83,8 @@ const formatAnalyticsEventProperties = ({
   token_out_symbol: trade.outputAmount.currency.symbol,
   token_in_amount: formatToDecimal(trade.inputAmount, trade.inputAmount.currency.decimals),
   token_out_amount: formatToDecimal(trade.outputAmount, trade.outputAmount.currency.decimals),
-  token_in_amount_usd: fiatValueInput,
-  token_out_amount_usd: fiatValueOutput,
+  token_in_amount_usd: fiatValueInput ? parseFloat(fiatValueInput.toFixed(2)) : undefined,
+  token_out_amount_usd: fiatValueOutput ? parseFloat(fiatValueOutput.toFixed(2)) : undefined,
   price_impact_basis_points: formatPercentInBasisPointsNumber(computeRealizedPriceImpact(trade)),
   allowed_slippage_basis_points: formatPercentInBasisPointsNumber(allowedSlippage),
   is_auto_router_api: isAutoRouterApi,
@@ -118,8 +118,8 @@ export default function SwapModalFooter({
   swapErrorMessage: ReactNode | undefined
   disabledConfirm: boolean
   swapQuoteReceivedDate: Date | undefined
-  fiatValueInput: { data?: number; isLoading: boolean }
-  fiatValueOutput: { data?: number; isLoading: boolean }
+  fiatValueInput: CurrencyAmount<Token> | null
+  fiatValueOutput: CurrencyAmount<Token> | null
 }) {
   const transactionDeadlineSecondsSinceEpoch = useTransactionDeadline()?.toNumber() // in seconds since epoch
   const isAutoSlippage = useUserSlippageTolerance()[0] === 'auto'
@@ -142,8 +142,8 @@ export default function SwapModalFooter({
             isAutoRouterApi: !clientSideRouter,
             swapQuoteReceivedDate,
             routes,
-            fiatValueInput: fiatValueInput.data,
-            fiatValueOutput: fiatValueOutput.data,
+            fiatValueInput,
+            fiatValueOutput,
           })}
         >
           <ButtonError

src/components/swap/SwapModalHeader.tsx

@@ -2,7 +2,6 @@ import { Trans } from '@lingui/macro'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
 import { SwapEventName, SwapPriceUpdateUserResponse } from '@uniswap/analytics-events'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
-import { useUSDPrice } from 'hooks/useUSDPrice'
 import { getPriceUpdateBasisPoints } from 'lib/utils/analytics'
 import { useEffect, useState } from 'react'
 import { AlertTriangle, ArrowDown } from 'react-feather'
@@ -10,6 +9,7 @@ import { Text } from 'rebass'
 import { InterfaceTrade } from 'state/routing/types'
 import styled, { useTheme } from 'styled-components/macro'
 
+import { useStablecoinValue } from '../../hooks/useStablecoinPrice'
 import { ThemedText } from '../../theme'
 import { isAddress, shortenAddress } from '../../utils'
 import { computeFiatValuePriceImpact } from '../../utils/computeFiatValuePriceImpact'
@@ -78,8 +78,8 @@ export default function SwapModalHeader({
   const [lastExecutionPrice, setLastExecutionPrice] = useState(trade.executionPrice)
   const [priceUpdate, setPriceUpdate] = useState<number | undefined>()
 
-  const fiatValueInput = useUSDPrice(trade.inputAmount)
-  const fiatValueOutput = useUSDPrice(trade.outputAmount)
+  const fiatValueInput = useStablecoinValue(trade.inputAmount)
+  const fiatValueOutput = useStablecoinValue(trade.outputAmount)
 
   useEffect(() => {
     if (!trade.executionPrice.equalTo(lastExecutionPrice)) {
@@ -145,7 +145,7 @@ export default function SwapModalHeader({
             <ThemedText.DeprecatedBody fontSize={14} color={theme.textTertiary}>
               <FiatValue
                 fiatValue={fiatValueOutput}
-                priceImpact={computeFiatValuePriceImpact(fiatValueInput.data, fiatValueOutput.data)}
+                priceImpact={computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput)}
               />
             </ThemedText.DeprecatedBody>
           </RowBetween>

src/components/swap/TradePrice.tsx

 import { Trans } from '@lingui/macro'
-import { formatNumber, NumberType } from '@uniswap/conedison/format'
 import { Currency, Price } from '@uniswap/sdk-core'
-import { useUSDPrice } from 'hooks/useUSDPrice'
-import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
+import useStablecoinPrice from 'hooks/useStablecoinPrice'
 import { useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
-import { formatTransactionAmount, priceToPreciseFloat } from 'utils/formatNumbers'
+import { formatDollar, formatTransactionAmount, priceToPreciseFloat } from 'utils/formatNumbers'
 
 interface TradePriceProps {
   price: Price<Currency, Currency>
@@ -32,8 +30,7 @@ const StyledPriceContainer = styled.button`
 export default function TradePrice({ price }: TradePriceProps) {
   const [showInverted, setShowInverted] = useState<boolean>(false)
 
-  const { baseCurrency, quoteCurrency } = price
-  const { data: usdPrice } = useUSDPrice(tryParseCurrencyAmount('1', showInverted ? baseCurrency : quoteCurrency))
+  const usdcPrice = useStablecoinPrice(showInverted ? price.baseCurrency : price.quoteCurrency)
 
   let formattedPrice: string
   try {
@@ -59,9 +56,9 @@ export default function TradePrice({ price }: TradePriceProps) {
       title={text}
     >
       <ThemedText.BodySmall>{text}</ThemedText.BodySmall>{' '}
-      {usdPrice && (
+      {usdcPrice && (
         <ThemedText.DeprecatedDarkGray>
-          <Trans>({formatNumber(usdPrice, NumberType.FiatTokenPrice)})</Trans>
+          <Trans>({formatDollar({ num: priceToPreciseFloat(usdcPrice), isPrice: true })})</Trans>
         </ThemedText.DeprecatedDarkGray>
       )}
     </StyledPriceContainer>

src/graphql/data/TokenSpotPrice.ts

-import gql from 'graphql-tag'
-
-gql`
-  query TokenSpotPrice($chain: Chain!, $address: String) {
-    token(chain: $chain, address: $address) {
-      id
-      address
-      chain
-      name
-      symbol
-      project {
-        id
-        markets(currencies: [USD]) {
-          id
-          price {
-            id
-            value
-          }
-        }
-      }
-    }
-  }
-`

src/graphql/data/util.tsx

@@ -73,18 +73,6 @@ export function chainIdToBackendName(chainId: number | undefined) {
     : CHAIN_ID_TO_BACKEND_NAME[SupportedChainId.MAINNET]
 }
 
-const GQL_CHAINS: number[] = [
-  SupportedChainId.MAINNET,
-  SupportedChainId.OPTIMISM,
-  SupportedChainId.POLYGON,
-  SupportedChainId.ARBITRUM_ONE,
-  SupportedChainId.CELO,
-]
-
-export function isGqlSupportedChain(chainId: number | undefined): chainId is SupportedChainId {
-  return !!chainId && GQL_CHAINS.includes(chainId)
-}
-
 const URL_CHAIN_PARAM_TO_BACKEND: { [key: string]: Chain } = {
   ethereum: Chain.Ethereum,
   polygon: Chain.Polygon,

src/hooks/useSwapCallback.tsx

 import { Trade } from '@uniswap/router-sdk'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { PermitSignature } from 'hooks/usePermitAllowance'
 import { useMemo } from 'react'
 
@@ -13,7 +13,7 @@ import { useUniversalRouterSwapCallback } from './useUniversalRouter'
 // and the user has approved the slippage adjusted input amount for the trade
 export function useSwapCallback(
   trade: Trade<Currency, Currency, TradeType> | undefined, // trade to execute, required
-  fiatValues: { amountIn: number | undefined; amountOut: number | undefined }, // usd values for amount in and out, logged for analytics
+  fiatValues: { amountIn: CurrencyAmount<Currency> | null; amountOut: CurrencyAmount<Currency> | null }, // usd values for amount in and out, logged for analytics
   allowedSlippage: Percent, // in bips
   permitSignature: PermitSignature | undefined
 ): { callback: null | (() => Promise<string>) } {

src/hooks/useUSDPrice.ts

-import { NetworkStatus } from '@apollo/client'
-import { Currency, CurrencyAmount, Price, SupportedChainId, TradeType } from '@uniswap/sdk-core'
-import { nativeOnChain } from 'constants/tokens'
-import { Chain, useTokenSpotPriceQuery } from 'graphql/data/__generated__/types-and-hooks'
-import { chainIdToBackendName, isGqlSupportedChain, PollingInterval } from 'graphql/data/util'
-import { RouterPreference } from 'state/routing/slice'
-import { TradeState } from 'state/routing/types'
-import { useRoutingAPITrade } from 'state/routing/useRoutingAPITrade'
-import { getNativeTokenDBAddress } from 'utils/nativeTokens'
-
-import useStablecoinPrice from './useStablecoinPrice'
-
-// ETH amounts used when calculating spot price for a given currency.
-// The amount is large enough to filter low liquidity pairs.
-const ETH_AMOUNT_OUT: { [chainId: number]: CurrencyAmount<Currency> } = {
-  [SupportedChainId.MAINNET]: CurrencyAmount.fromRawAmount(nativeOnChain(SupportedChainId.MAINNET), 100e18),
-  [SupportedChainId.ARBITRUM_ONE]: CurrencyAmount.fromRawAmount(nativeOnChain(SupportedChainId.ARBITRUM_ONE), 10e18),
-  [SupportedChainId.OPTIMISM]: CurrencyAmount.fromRawAmount(nativeOnChain(SupportedChainId.OPTIMISM), 10e18),
-  [SupportedChainId.POLYGON]: CurrencyAmount.fromRawAmount(nativeOnChain(SupportedChainId.POLYGON), 10_000e18),
-  [SupportedChainId.CELO]: CurrencyAmount.fromRawAmount(nativeOnChain(SupportedChainId.CELO), 10e18),
-}
-
-function useETHValue(currencyAmount?: CurrencyAmount<Currency>): {
-  data: CurrencyAmount<Currency> | undefined
-  isLoading: boolean
-} {
-  const chainId = currencyAmount?.currency?.chainId
-  const amountOut = isGqlSupportedChain(chainId) ? ETH_AMOUNT_OUT[chainId] : undefined
-  const { trade, state } = useRoutingAPITrade(
-    TradeType.EXACT_OUTPUT,
-    amountOut,
-    currencyAmount?.currency,
-    RouterPreference.PRICE
-  )
-
-  // Get ETH value of ETH or WETH
-  if (chainId && currencyAmount && currencyAmount.currency.wrapped.equals(nativeOnChain(chainId).wrapped)) {
-    return {
-      data: new Price(currencyAmount.currency, currencyAmount.currency, '1', '1').quote(currencyAmount),
-      isLoading: false,
-    }
-  }
-
-  if (!trade || !currencyAmount?.currency || !isGqlSupportedChain(chainId)) {
-    return { data: undefined, isLoading: state === TradeState.LOADING || state === TradeState.SYNCING }
-  }
-
-  const { numerator, denominator } = trade.routes[0].midPrice
-  const price = new Price(currencyAmount?.currency, nativeOnChain(chainId), denominator, numerator)
-  return { data: price.quote(currencyAmount), isLoading: false }
-}
-
-export function useUSDPrice(currencyAmount?: CurrencyAmount<Currency>): {
-  data: number | undefined
-  isLoading: boolean
-} {
-  const chain = currencyAmount?.currency.chainId ? chainIdToBackendName(currencyAmount?.currency.chainId) : undefined
-  const currency = currencyAmount?.currency
-  const { data: ethValue, isLoading: isEthValueLoading } = useETHValue(currencyAmount)
-
-  const { data, networkStatus } = useTokenSpotPriceQuery({
-    variables: { chain: chain ?? Chain.Ethereum, address: getNativeTokenDBAddress(chain ?? Chain.Ethereum) },
-    skip: !chain || !isGqlSupportedChain(currency?.chainId),
-    pollInterval: PollingInterval.Normal,
-    notifyOnNetworkStatusChange: true,
-  })
-
-  // Use USDC price for chains not supported by backend yet
-  const stablecoinPrice = useStablecoinPrice(!isGqlSupportedChain(currency?.chainId) ? currency : undefined)
-  if (!isGqlSupportedChain(currency?.chainId) && currencyAmount && stablecoinPrice) {
-    return { data: parseFloat(stablecoinPrice.quote(currencyAmount).toSignificant()), isLoading: false }
-  }
-
-  const isFirstLoad = networkStatus === NetworkStatus.loading
-
-  // Otherwise, get the price of the token in ETH, and then multiple by the price of ETH
-  const ethUSDPrice = data?.token?.project?.markets?.[0]?.price?.value
-  if (!ethUSDPrice || !ethValue) return { data: undefined, isLoading: isEthValueLoading || isFirstLoad }
-
-  return { data: parseFloat(ethValue.toExact()) * ethUSDPrice, isLoading: false }
-}

src/hooks/useUniversalRouter.ts

@@ -4,7 +4,7 @@ import { t } from '@lingui/macro'
 import { sendAnalyticsEvent } from '@uniswap/analytics'
 import { SwapEventName } from '@uniswap/analytics-events'
 import { Trade } from '@uniswap/router-sdk'
-import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent, TradeType } from '@uniswap/sdk-core'
 import { SwapRouter, UNIVERSAL_ROUTER_ADDRESS } from '@uniswap/universal-router-sdk'
 import { FeeOptions, toHex } from '@uniswap/v3-sdk'
 import { useWeb3React } from '@web3-react/core'
@@ -27,7 +27,7 @@ interface SwapOptions {
 
 export function useUniversalRouterSwapCallback(
   trade: Trade<Currency, Currency, TradeType> | undefined,
-  fiatValues: { amountIn: number | undefined; amountOut: number | undefined },
+  fiatValues: { amountIn: CurrencyAmount<Currency> | null; amountOut: CurrencyAmount<Currency> | null },
   options: SwapOptions
 ) {
   const { account, chainId, provider } = useWeb3React()

src/lib/utils/analytics.ts

@@ -40,7 +40,7 @@ export const formatSwapSignedAnalyticsEventProperties = ({
   txHash,
 }: {
   trade: InterfaceTrade<Currency, Currency, TradeType> | Trade<Currency, Currency, TradeType>
-  fiatValues: { amountIn: number | undefined; amountOut: number | undefined }
+  fiatValues: { amountIn: CurrencyAmount<Currency> | null; amountOut: CurrencyAmount<Currency> | null }
   txHash: string
 }) => ({
   transaction_hash: txHash,
@@ -50,8 +50,8 @@ export const formatSwapSignedAnalyticsEventProperties = ({
   token_out_symbol: trade.outputAmount.currency.symbol,
   token_in_amount: formatToDecimal(trade.inputAmount, trade.inputAmount.currency.decimals),
   token_out_amount: formatToDecimal(trade.outputAmount, trade.outputAmount.currency.decimals),
-  token_in_amount_usd: fiatValues.amountIn,
-  token_out_amount_usd: fiatValues.amountOut,
+  token_in_amount_usd: fiatValues.amountIn ? parseFloat(fiatValues.amountIn.toFixed(2)) : undefined,
+  token_out_amount_usd: fiatValues.amountOut ? parseFloat(fiatValues.amountOut.toFixed(2)) : undefined,
   price_impact_basis_points: formatPercentInBasisPointsNumber(computeRealizedPriceImpact(trade)),
   chain_id:
     trade.inputAmount.currency.chainId === trade.outputAmount.currency.chainId

src/pages/AddLiquidity/index.tsx

@@ -9,7 +9,7 @@ import { useWeb3React } from '@web3-react/core'
 import { sendEvent } from 'components/analytics'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import usePrevious from 'hooks/usePrevious'
-import { useCallback, useEffect, useMemo, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { Text } from 'rebass'
@@ -532,22 +532,6 @@ export default function AddLiquidity() {
       </AutoColumn>
     )
 
-  const usdcValueCurrencyA = usdcValues[Field.CURRENCY_A]
-  const usdcValueCurrencyB = usdcValues[Field.CURRENCY_B]
-  const currencyAFiat = useMemo(
-    () => ({
-      data: usdcValueCurrencyA ? parseFloat(usdcValueCurrencyA.toSignificant()) : undefined,
-      isLoading: false,
-    }),
-    [usdcValueCurrencyA]
-  )
-  const currencyBFiat = useMemo(
-    () => ({
-      data: usdcValueCurrencyB ? parseFloat(usdcValueCurrencyB.toSignificant()) : undefined,
-      isLoading: false,
-    }),
-    [usdcValueCurrencyB]
-  )
   return (
     <>
       <ScrollablePage>
@@ -698,7 +682,7 @@ export default function AddLiquidity() {
                       showMaxButton={!atMaxAmounts[Field.CURRENCY_A]}
                       currency={currencies[Field.CURRENCY_A] ?? null}
                       id="add-liquidity-input-tokena"
-                      fiatValue={currencyAFiat}
+                      fiatValue={usdcValues[Field.CURRENCY_A]}
                       showCommonBases
                       locked={depositADisabled}
                     />
@@ -710,7 +694,7 @@ export default function AddLiquidity() {
                         onFieldBInput(maxAmounts[Field.CURRENCY_B]?.toExact() ?? '')
                       }}
                       showMaxButton={!atMaxAmounts[Field.CURRENCY_B]}
-                      fiatValue={currencyBFiat}
+                      fiatValue={usdcValues[Field.CURRENCY_B]}
                       currency={currencies[Field.CURRENCY_B] ?? null}
                       id="add-liquidity-input-tokenb"
                       showCommonBases

src/pages/Swap/index.tsx

@@ -25,7 +25,6 @@ import { useSwapWidgetEnabled } from 'featureFlags/flags/swapWidget'
 import useENSAddress from 'hooks/useENSAddress'
 import usePermit2Allowance, { AllowanceState } from 'hooks/usePermit2Allowance'
 import { useSwapCallback } from 'hooks/useSwapCallback'
-import { useUSDPrice } from 'hooks/useUSDPrice'
 import JSBI from 'jsbi'
 import { formatSwapQuoteReceivedEventProperties } from 'lib/utils/analytics'
 import { useCallback, useEffect, useMemo, useState } from 'react'
@@ -55,6 +54,7 @@ import { SwitchLocaleLink } from '../../components/SwitchLocaleLink'
 import { TOKEN_SHORTHANDS } from '../../constants/tokens'
 import { useAllTokens, useCurrency } from '../../hooks/Tokens'
 import { useIsSwapUnsupported } from '../../hooks/useIsSwapUnsupported'
+import { useStablecoinValue } from '../../hooks/useStablecoinPrice'
 import useWrapCallback, { WrapErrorText, WrapType } from '../../hooks/useWrapCallback'
 import { Field } from '../../state/swap/actions'
 import {
@@ -230,21 +230,19 @@ export default function Swap({ className }: { className?: string }) {
           },
     [independentField, parsedAmount, showWrap, trade]
   )
-  const fiatValueInput = useUSDPrice(parsedAmounts[Field.INPUT])
-  const fiatValueOutput = useUSDPrice(parsedAmounts[Field.OUTPUT])
+  const fiatValueInput = useStablecoinValue(parsedAmounts[Field.INPUT])
+  const fiatValueOutput = useStablecoinValue(parsedAmounts[Field.OUTPUT])
 
   const [routeNotFound, routeIsLoading, routeIsSyncing] = useMemo(
     () => [!trade?.swaps, TradeState.LOADING === tradeState, TradeState.SYNCING === tradeState],
     [trade, tradeState]
   )
 
-  const fiatValueTradeInput = useUSDPrice(trade?.inputAmount)
-  const fiatValueTradeOutput = useUSDPrice(trade?.outputAmount)
+  const fiatValueTradeInput = useStablecoinValue(trade?.inputAmount)
+  const fiatValueTradeOutput = useStablecoinValue(trade?.outputAmount)
   const stablecoinPriceImpact = useMemo(
     () =>
-      routeIsSyncing || !trade
-        ? undefined
-        : computeFiatValuePriceImpact(fiatValueTradeInput.data, fiatValueTradeOutput.data),
+      routeIsSyncing || !trade ? undefined : computeFiatValuePriceImpact(fiatValueTradeInput, fiatValueTradeOutput),
     [fiatValueTradeInput, fiatValueTradeOutput, routeIsSyncing, trade]
   )
 
@@ -336,7 +334,7 @@ export default function Swap({ className }: { className?: string }) {
   )
   const showMaxButton = Boolean(maxInputAmount?.greaterThan(0) && !parsedAmounts[Field.INPUT]?.equalTo(maxInputAmount))
   const swapFiatValues = useMemo(() => {
-    return { amountIn: fiatValueTradeInput.data, amountOut: fiatValueTradeOutput.data }
+    return { amountIn: fiatValueTradeInput, amountOut: fiatValueTradeOutput }
   }, [fiatValueTradeInput, fiatValueTradeOutput])
 
   // the callback to execute the swap

src/state/routing/useRoutingAPITrade.ts

@@ -62,7 +62,7 @@ export function useRoutingAPITrade<TTradeType extends TradeType>(
   const isSyncing = currentData !== data
 
   return useMemo(() => {
-    if (!currencyIn || !currencyOut || currencyIn.equals(currencyOut)) {
+    if (!currencyIn || !currencyOut) {
       return {
         state: TradeState.INVALID,
         trade: undefined,

src/utils/computeFiatValuePriceImpact.tsx

-import { Percent } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
+import JSBI from 'jsbi'
+
+import { ONE_HUNDRED_PERCENT } from '../constants/misc'
 
-const PRECISION = 10000
 export function computeFiatValuePriceImpact(
-  fiatValueInput: number | undefined | null,
-  fiatValueOutput: number | undefined | null
+  fiatValueInput: CurrencyAmount<Currency> | undefined | null,
+  fiatValueOutput: CurrencyAmount<Currency> | undefined | null
 ): Percent | undefined {
   if (!fiatValueOutput || !fiatValueInput) return undefined
-  if (fiatValueInput === 0) return undefined
-
-  const ratio = 1 - fiatValueOutput / fiatValueInput
-  const numerator = Math.floor(ratio * PRECISION)
-  return new Percent(numerator, PRECISION)
+  if (!fiatValueInput.currency.equals(fiatValueOutput.currency)) return undefined
+  if (JSBI.equal(fiatValueInput.quotient, JSBI.BigInt(0))) return undefined
+  const pct = ONE_HUNDRED_PERCENT.subtract(fiatValueOutput.divide(fiatValueInput))
+  return new Percent(pct.numerator, pct.denominator)
 }