show percentage difference in price on swap

src/components/CurrencyInputPanel/index.tsx

 import { Pair } from '@uniswap/v2-sdk'
-import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
-import React, { useState, useCallback } from 'react'
+import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
+import React, { useState, useCallback, useMemo } from 'react'
 import styled from 'styled-components'
 import { darken } from 'polished'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
+import { warningSeverity } from '../../utils/prices'
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
 import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
@@ -158,6 +159,7 @@ interface CurrencyInputPanelProps {
   hideInput?: boolean
   otherCurrency?: Currency | null
   fiatValue?: CurrencyAmount
+  priceImpact?: Percent
   id: string
   showCommonBases?: boolean
   customBalanceText?: string
@@ -176,6 +178,7 @@ export default function CurrencyInputPanel({
   showCommonBases,
   customBalanceText,
   fiatValue,
+  priceImpact,
   hideBalance = false,
   pair = null, // used for double token logo
   hideInput = false,
@@ -193,6 +196,15 @@ export default function CurrencyInputPanel({
     setModalOpen(false)
   }, [setModalOpen])
 
+  const priceImpactColor = useMemo(() => {
+    if (!priceImpact) return undefined
+    if (priceImpact.lessThan('0')) return theme.green1
+    const severity = warningSeverity(priceImpact)
+    if (severity < 1) return undefined
+    if (severity < 2) return theme.yellow1
+    return theme.red1
+  }, [priceImpact, theme.green1, theme.red1, theme.yellow1])
+
   return (
     <InputPanel id={id} hideInput={hideInput} {...rest}>
       {locked && (
@@ -287,6 +299,9 @@ export default function CurrencyInputPanel({
 
               <TYPE.body fontSize={14} color={fiatValue ? theme.text2 : theme.text4}>
                 {fiatValue ? '~' : ''}${fiatValue ? Number(fiatValue?.toSignificant(6)).toLocaleString('en') : '-'}
+                {priceImpact ? (
+                  <span style={{ color: priceImpactColor }}> ({priceImpact.multiply(-1).toSignificant(3)}%)</span>
+                ) : null}
               </TYPE.body>
             </RowBetween>
           </FiatRow>

src/pages/Swap/index.tsx

-import { CurrencyAmount, Token } from '@uniswap/sdk-core'
+import { CurrencyAmount, currencyEquals, Percent, Token } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
 import { AdvancedSwapDetails } from 'components/swap/AdvancedSwapDetails'
@@ -48,7 +48,7 @@ import { useExpertModeManager, useUserSingleHopOnly, useUserSlippageTolerance }
 import { LinkStyledButton, TYPE } from '../../theme'
 import { getTradeVersion } from '../../utils/getTradeVersion'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
-import { computeTradePriceBreakdown, warningSeverity } from '../../utils/prices'
+import { warningSeverity } from '../../utils/prices'
 import AppBody from '../AppBody'
 
 import { Link } from 'react-router-dom'
@@ -56,6 +56,17 @@ import { isTradeBetter } from '../../utils/isTradeBetter'
 import BetterTradeLink from '../../components/swap/BetterTradeLink'
 import SwapHeader from '../../components/swap/SwapHeader'
 
+const ONE_HUNDRED_PERCENT = new Percent(100, 100)
+function computeFiatValuePriceImpact(
+  fiatValueInput: CurrencyAmount | undefined | null,
+  fiatValueOutput: CurrencyAmount | undefined | null
+): Percent | undefined {
+  if (!fiatValueOutput || !fiatValueInput) return undefined
+  if (!currencyEquals(fiatValueInput.currency, fiatValueOutput.currency)) return undefined
+  if (JSBI.equal(fiatValueInput.raw, JSBI.BigInt(0))) return undefined
+  return ONE_HUNDRED_PERCENT.subtract(fiatValueOutput.divide(fiatValueInput)).multiply(100)
+}
+
 export default function Swap({ history }: RouteComponentProps) {
   const loadedUrlParams = useDefaultsFromURLSearch()
 
@@ -135,6 +146,7 @@ export default function Swap({ history }: RouteComponentProps) {
 
   const fiatValueInput = useUSDCValue(parsedAmounts[Field.INPUT])
   const fiatValueOutput = useUSDCValue(parsedAmounts[Field.OUTPUT])
+  const priceImpact = computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput)
 
   const { onSwitchTokens, onCurrencySelection, onUserInput, onChangeRecipient } = useSwapActionHandlers()
   const isValid = !swapInputError
@@ -220,8 +232,6 @@ export default function Swap({ history }: RouteComponentProps) {
     signatureData
   )
 
-  const { priceImpactWithoutFee: priceImpact } = computeTradePriceBreakdown(trade)
-
   const [singleHopOnly] = useUserSingleHopOnly()
 
   const handleSwap = useCallback(() => {
@@ -377,6 +387,7 @@ export default function Swap({ history }: RouteComponentProps) {
                 showMaxButton={false}
                 hideBalance={false}
                 fiatValue={fiatValueOutput ?? undefined}
+                priceImpact={priceImpact}
                 currency={currencies[Field.OUTPUT]}
                 onCurrencySelect={handleOutputSelect}
                 otherCurrency={currencies[Field.INPUT]}

src/utils/prices.ts

@@ -92,11 +92,12 @@ const IMPACT_TIERS = [
   ALLOWED_PRICE_IMPACT_LOW,
 ]
 
-export function warningSeverity(priceImpact: Percent | undefined): 0 | 1 | 2 | 3 | 4 {
+type WarningSeverity = 0 | 1 | 2 | 3 | 4
+export function warningSeverity(priceImpact: Percent | undefined): WarningSeverity {
   if (!priceImpact) return 4
-  let impact = IMPACT_TIERS.length
+  let impact: WarningSeverity = IMPACT_TIERS.length as WarningSeverity
   for (const impactLevel of IMPACT_TIERS) {
-    if (impactLevel.lessThan(priceImpact)) return impact as 0 | 1 | 2 | 3 | 4
+    if (impactLevel.lessThan(priceImpact)) return impact
     impact--
   }
   return 0