revert: "fix: remove USD value impact" (#525)

* Revert "fix: remove USD value impact (#457)"

This reverts commit d51888a.

* fix: use USD value change in output field

* feat: improvements to slippage

* fix: add testg

* fix: string consistency

* fix: use correct formatting

* fix: rename prop

Author: just-toby

src/components/Swap/Input.tsx

@@ -85,15 +85,15 @@ interface FieldWrapperProps {
   field: Field
   maxAmount?: string
   approved?: boolean
-  impact?: PriceImpact
+  fiatValueChange?: PriceImpact
   subheader: string
 }
 
 export function FieldWrapper({
   field,
   maxAmount,
   approved,
-  impact,
+  fiatValueChange,
   className,
   subheader,
 }: FieldWrapperProps & { className?: string }) {
@@ -164,7 +164,7 @@ export function FieldWrapper({
           <Row>
             <USDC isLoading={isRouteLoading}>
               {usdc && `${formatCurrencyAmount(usdc, NumberType.FiatTokenQuantity)}`}
-              <PriceImpactRow impact={impact} />
+              <PriceImpactRow impact={fiatValueChange} />
             </USDC>
             {balance && (
               <Row gap={0.5}>

src/components/Swap/Output.tsx

@@ -28,8 +28,7 @@ const OutputWrapper = styled(FieldWrapper)<{ hasColor?: boolean | null; isWide:
 `
 
 export default function Output() {
-  const { impact } = useSwapInfo()
-
+  const { fiatValueChange } = useSwapInfo()
   const [currency] = useSwapCurrency(Field.OUTPUT)
   const overrideColor = useAtomValue(colorAtom)
   const dynamicColor = useCurrencyColor(currency)
@@ -43,7 +42,7 @@ export default function Output() {
       <OutputWrapper
         isWide={isWideWidget}
         field={Field.OUTPUT}
-        impact={impact}
+        fiatValueChange={fiatValueChange}
         hasColor={hasColor}
         subheader={t`You receive`}
       />

src/components/Swap/Settings/MaxSlippageSelect.tsx

@@ -2,6 +2,7 @@ import { Trans } from '@lingui/macro'
 import Expando, { IconPrefix } from 'components/Expando'
 import Popover from 'components/Popover'
 import { useTooltip } from 'components/Tooltip'
+import { useSwapInfo } from 'hooks/swap'
 import { getSlippageWarning, toPercent } from 'hooks/useSlippage'
 import { Expando as ExpandoIcon } from 'icons'
 import { AlertTriangle, Check, Icon, LargeIcon, XOctagon } from 'icons'
@@ -144,6 +145,8 @@ export default function MaxSlippageSelect() {
     [setSlippage]
   )
 
+  const { slippage: allowedSlippage } = useSwapInfo()
+
   const [open, setOpen] = useState(false)
   return (
     <Column gap={0.75}>
@@ -190,7 +193,7 @@ export default function MaxSlippageSelect() {
                 size={Math.max(maxSlippageInput.length, 4)}
                 value={maxSlippageInput}
                 onChange={(input) => processInput(input)}
-                placeholder={'0.10'}
+                placeholder={allowedSlippage.allowed.toFixed(2)}
                 ref={input}
                 data-testid="input-slippage"
                 maxLength={10}

src/components/Swap/Summary/Details.tsx

@@ -156,7 +156,7 @@ export default function Details({ trade, slippage, gasUseEstimateUSD, inputUSDC,
       details.push([t`Price impact`, impact?.percent ? impact?.toString() : '-', impact.warning])
     }
 
-    const { estimateMessage, descriptor, value } = getEstimateMessage(trade, slippage, impact)
+    const { estimateMessage, descriptor, value } = getEstimateMessage(trade, slippage)
     details.push([descriptor, value])
 
     return { details, estimateMessage }

src/components/Swap/Summary/Estimate.tsx

@@ -1,7 +1,6 @@
 import { t, Trans } from '@lingui/macro'
 import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
-import { PriceImpact } from 'hooks/usePriceImpact'
-import { Slippage } from 'hooks/useSlippage'
+import { formatSlippage, Slippage } from 'hooks/useSlippage'
 import { ReactNode, useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 import styled from 'styled-components/macro'
@@ -20,22 +19,25 @@ interface EstimateProps {
 }
 
 export default function SwapInputOutputEstimate({ trade, slippage }: EstimateProps) {
-  const { estimateMessage } = useMemo(
-    () => getEstimateMessage(trade, slippage, undefined /* priceImpact */),
-    [slippage, trade]
-  )
+  const { estimateMessage } = useMemo(() => getEstimateMessage(trade, slippage), [slippage, trade])
   return <StyledEstimate color="secondary">{estimateMessage}</StyledEstimate>
 }
 
 export function getEstimateMessage(
-  trade: InterfaceTrade,
-  slippage: Slippage,
-  priceImpact: PriceImpact | undefined
+  trade: InterfaceTrade | undefined,
+  slippage: Slippage
 ): {
   estimateMessage: string
   descriptor: ReactNode
   value: string
 } {
+  if (!trade) {
+    return {
+      estimateMessage: '',
+      descriptor: '',
+      value: '-',
+    }
+  }
   const { inputAmount, outputAmount } = trade
   const inputCurrency = inputAmount.currency
   const outputCurrency = outputAmount.currency
@@ -49,10 +51,10 @@ export function getEstimateMessage(
       descriptor: (
         <ThemedText.Body2>
           <Trans>Minimum output after slippage</Trans>
-          {priceImpact && (
+          {slippage && (
             <ThemedText.Body2 $inline color={slippage?.warning ?? 'secondary'}>
               {' '}
-              ({priceImpact?.toString()})
+              ({formatSlippage(slippage)})
             </ThemedText.Body2>
           )}
         </ThemedText.Body2>
@@ -68,10 +70,10 @@ export function getEstimateMessage(
       descriptor: (
         <ThemedText.Body2>
           <Trans>Maximum input after slippage</Trans>
-          {priceImpact && (
+          {slippage && (
             <ThemedText.Body2 $inline color={slippage?.warning ?? 'secondary'}>
               {' '}
-              ({priceImpact?.toString()})
+              ({formatSlippage(slippage)})
             </ThemedText.Body2>
           )}
         </ThemedText.Body2>

src/components/Swap/TokenInput.tsx

@@ -18,10 +18,8 @@ const TokenInputRow = styled(Row)`
 
 const ValueInput = styled(DecimalInput)`
   color: ${({ theme }) => theme.primary};
-  height: 1.5rem;
-  margin: -0.25rem 0;
 
-  ${loadingTransitionCss};
+  ${loadingTransitionCss}
 `
 
 const TokenInputColumn = styled(Column)`

src/components/Swap/Toolbar/index.tsx

@@ -10,10 +10,9 @@ import { memo, ReactNode, useCallback, useContext, useMemo } from 'react'
 import { TradeState } from 'state/routing/types'
 import { Field } from 'state/swap'
 import styled from 'styled-components/macro'
-import { ThemedText } from 'theme'
 
 import Row from '../../Row'
-import SwapInputOutputEstimate from '../Summary/Estimate'
+import SwapInputOutputEstimate, { getEstimateMessage } from '../Summary/Estimate'
 import SwapActionButton from '../SwapActionButton'
 import * as Caption from './Caption'
 import { Context as ToolbarContext, Provider as ToolbarContextProvider } from './ToolbarContext'
@@ -111,6 +110,7 @@ function CaptionRow() {
 
   const tradeSummaryRows: SummaryRowProps[] = useMemo(() => {
     const currencySymbol = trade?.outputAmount?.currency.symbol ?? ''
+    const { descriptor, value } = getEstimateMessage(trade, slippage)
     const rows: SummaryRowProps[] = [
       {
         name: t`Network fee`,
@@ -128,16 +128,9 @@ function CaptionRow() {
           : undefined,
       },
       {
-        name: (
-          <ThemedText.Body2 marginRight="0.25rem">
-            <Trans>Minimum output after slippage </Trans>
-            <ThemedText.Body2 $inline color={impact?.warning ?? 'secondary'}>
-              {' '}
-              ({impact?.toString()})
-            </ThemedText.Body2>
-          </ThemedText.Body2>
-        ),
-        value: trade ? `${formatCurrencyAmount(trade?.minimumAmountOut(slippage.allowed))} ${currencySymbol}` : '-',
+        // min/max output/input after slippage
+        name: <div style={{ marginRight: '0.25em' }}>{descriptor}</div>,
+        value,
       },
       {
         name: t`Expected output`,

src/components/Swap/index.tsx

@@ -48,21 +48,21 @@ export default function Swap(props: SwapProps) {
 
   return (
     <>
-      <Header title={<Trans>Swap</Trans>}>
-        <Wallet disabled={props.hideConnectionUI} />
-        <Settings />
-      </Header>
-      <div ref={setWrapper}>
-        <PopoverBoundaryProvider value={wrapper}>
-          <SwapInfoProvider>
+      <SwapInfoProvider>
+        <Header title={<Trans>Swap</Trans>}>
+          <Wallet disabled={props.hideConnectionUI} />
+          <Settings />
+        </Header>
+        <div ref={setWrapper}>
+          <PopoverBoundaryProvider value={wrapper}>
             <Input />
             <ReverseButton />
             <Output />
             <Toolbar />
             {useBrandedFooter() && <BrandedFooter />}
-          </SwapInfoProvider>
-        </PopoverBoundaryProvider>
-      </div>
+          </PopoverBoundaryProvider>
+        </div>
+      </SwapInfoProvider>
       {displayTx && (
         <Dialog color="dialog">
           <StatusDialog tx={displayTx} onClose={() => setDisplayTxHash()} />

src/hooks/swap/useSwapInfo.tsx

@@ -6,7 +6,7 @@ import { useRouterTrade } from 'hooks/routing/useRouterTrade'
 import { useCurrencyBalances } from 'hooks/useCurrencyBalance'
 import useOnSupportedNetwork from 'hooks/useOnSupportedNetwork'
 import usePermit2Allowance, { Allowance, AllowanceState } from 'hooks/usePermit2Allowance'
-import { PriceImpact, usePriceImpact } from 'hooks/usePriceImpact'
+import { PriceImpact, useFiatValueChange, usePriceImpact } from 'hooks/usePriceImpact'
 import useSlippage, { DEFAULT_SLIPPAGE, Slippage } from 'hooks/useSlippage'
 import { usePermit2 as usePermit2Enabled } from 'hooks/useSyncFlags'
 import useUSDCPrice, { useUSDCValue } from 'hooks/useUSDCPrice'
@@ -50,6 +50,7 @@ interface SwapInfo {
   allowance: Allowance
   slippage: Slippage
   impact?: PriceImpact
+  fiatValueChange?: PriceImpact
 }
 
 /** Returns the best computed swap (trade/wrap). */
@@ -105,6 +106,7 @@ function useComputeSwapInfo(): SwapInfo {
   // Wait until the trade is valid to avoid displaying incorrect intermediate values.
   const slippage = useSlippage(trade)
   const impact = usePriceImpact(trade.trade)
+  const fiatValueChange = useFiatValueChange(trade.trade)
 
   const permit2Enabled = usePermit2Enabled()
   const maximumAmountIn = useMemo(() => {
@@ -137,6 +139,7 @@ function useComputeSwapInfo(): SwapInfo {
       allowance,
       slippage,
       impact,
+      fiatValueChange,
     }
   }, [
     allowance,
@@ -148,6 +151,7 @@ function useComputeSwapInfo(): SwapInfo {
     currencyIn,
     currencyOut,
     error,
+    fiatValueChange,
     impact,
     slippage,
     trade,

src/hooks/useAllCurrencyCombinations.ts

@@ -1,8 +1,11 @@
 import { Percent } from '@uniswap/sdk-core'
 import { useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
+import { computeFiatValuePriceImpact } from 'utils/computeFiatValuePriceImpact'
 import { computeRealizedPriceImpact, getPriceImpactWarning } from 'utils/prices'
 
+import { useUSDCValue } from './useUSDCPrice'
+
 export interface PriceImpact {
   percent: Percent
   warning?: 'warning' | 'error'
@@ -22,6 +25,21 @@ export function usePriceImpact(trade?: InterfaceTrade): PriceImpact | undefined
   }, [trade])
 }
 
+export function useFiatValueChange(trade?: InterfaceTrade) {
+  const [inputUSDCValue, outputUSDCValue] = [useUSDCValue(trade?.inputAmount), useUSDCValue(trade?.outputAmount)]
+  return useMemo(() => {
+    const fiatPriceImpact = computeFiatValuePriceImpact(inputUSDCValue, outputUSDCValue)
+    if (!fiatPriceImpact) {
+      return undefined
+    }
+    return {
+      percent: fiatPriceImpact,
+      warning: getPriceImpactWarning(fiatPriceImpact),
+      toString: () => toHumanReadablePercent(fiatPriceImpact),
+    }
+  }, [inputUSDCValue, outputUSDCValue])
+}
+
 export function toHumanReadablePercent(priceImpact: Percent): string {
   const sign = priceImpact.lessThan(0) ? '+' : ''
   const exactFloat = (Number(priceImpact.numerator) / Number(priceImpact.denominator)) * 100