fix: price impact tostring (Uniswap#542)

* Revert "fix: remove USD value impact (Uniswap#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

* fix: remove custom tostring function

* fix: tests

* fix: use conedison for % formatting

* fix: tests

* fix: layout fixes for longer % strings

src/components/Swap/PriceImpactRow.test.tsx

@@ -10,12 +10,11 @@ describe('PriceImpactRow', () => {
         impact={{
           percent: new Percent(10, 100),
           warning: 'error',
-          toString: () => '10%',
         }}
       />
     )
     // verify that the percentage string is visible
-    expect(el.getByText('(10%)')).toBeTruthy()
+    expect(el.getByText('(10.00%)')).toBeTruthy()
     // verify the tooltip is visible
     const iconElement = el.container.querySelector('svg')
     expect(iconElement).toBeTruthy()
@@ -27,12 +26,11 @@ describe('PriceImpactRow', () => {
         impact={{
           percent: new Percent(1, 100),
           warning: 'warning',
-          toString: () => '1%',
         }}
       />
     )
     // verify that the percentage string is visible
-    expect(el.getByText('(1%)')).toBeTruthy()
+    expect(el.getByText('(1.00%)')).toBeTruthy()
     // verify the tooltip is visible
     const iconElement = el.container.querySelector('svg')
     expect(iconElement).toBeTruthy()
@@ -43,7 +41,6 @@ describe('PriceImpactRow', () => {
       <PriceImpactRow
         impact={{
           percent: new Percent(1, 10000),
-          toString: () => '0.01%',
         }}
       />
     )

src/components/Swap/PriceImpactRow.tsx

@@ -1,4 +1,5 @@
 import { Trans } from '@lingui/macro'
+import { formatPriceImpact } from '@uniswap/conedison/format'
 import Row from 'components/Row'
 import Tooltip, { SmallToolTipBody } from 'components/Tooltip'
 import { PriceImpact } from 'hooks/usePriceImpact'
@@ -17,7 +18,7 @@ export function PriceImpactRow({ impact, reverse }: PriceImpactProps) {
   return (
     <Row gap={0.25} flex align="center" flow={reverse ? 'row-reverse' : 'row wrap'}>
       <ThemedText.Body2 userSelect={false} color={impact.warning ?? 'hint'}>
-        ({impact.toString()})
+        ({formatPriceImpact(impact?.percent)})
       </ThemedText.Body2>
       {impact?.warning && (
         <Tooltip icon={AlertTriangle} iconProps={{ color: impact.warning }} data-testid="alert-tooltip">

src/components/Swap/Summary/Details.tsx

@@ -1,5 +1,5 @@
 import { t } from '@lingui/macro'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
+import { formatCurrencyAmount, formatPriceImpact, NumberType } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import Column from 'components/Column'
 import { useIsDialogPageCentered } from 'components/Dialog'
@@ -26,6 +26,7 @@ import { getEstimateMessage } from './Estimate'
 const Label = styled.span`
   color: ${({ theme }) => theme.secondary};
   margin-right: 0.5rem;
+  max-width: 75%;
 `
 const Value = styled.span<{ color?: Color }>`
   color: ${({ color, theme }) => color && theme[color]};
@@ -52,7 +53,7 @@ interface DetailProps {
 function Detail({ label, value, color }: DetailProps) {
   return (
     <ThemedText.Body2 userSelect>
-      <Row flex align="flex-start">
+      <Row flex align="flex-start" flow="no-wrap">
         <Label>{label}</Label>
         <DetailValue color={color}>{value}</DetailValue>
       </Row>
@@ -152,7 +153,7 @@ export default function Details({ trade, slippage, gasUseEstimateUSD, inputUSDC,
     }
 
     if (impact) {
-      details.push([t`Price impact`, impact?.percent ? impact?.toString() : '-', impact.warning])
+      details.push([t`Price impact`, impact?.percent ? formatPriceImpact(impact?.percent) : '-', impact.warning])
     }
 
     const { estimateMessage, descriptor, value } = getEstimateMessage(trade, slippage)

src/components/Swap/Summary/Summary.tsx

@@ -1,3 +1,4 @@
+import { formatPriceImpact } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { PriceImpact } from 'hooks/usePriceImpact'
 import { ArrowDown, ArrowRight } from 'icons'
@@ -56,7 +57,9 @@ export default function Summary({ input, output, inputUSDC, outputUSDC, impact,
       <TokenValue input={input} usdc={inputUSDC} open={open} />
       {open ? <ArrowRight /> : <ArrowDown />}
       <TokenValue input={output} usdc={outputUSDC} open={open}>
-        {impact && <ThemedText.Caption color={impact.warning}>({impact.toString()})</ThemedText.Caption>}
+        {impact && (
+          <ThemedText.Caption color={impact.warning}>({formatPriceImpact(impact?.percent)})</ThemedText.Caption>
+        )}
       </TokenValue>
     </>
   )

src/components/Swap/Summary/index.tsx

@@ -1,4 +1,5 @@
 import { t, Trans } from '@lingui/macro'
+import { formatPriceImpact } from '@uniswap/conedison/format'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import ActionButton, { Action, ActionButtonColor } from 'components/ActionButton'
 import Column from 'components/Column'
@@ -289,7 +290,8 @@ export function SummaryDialog(props: SummaryDialogProps) {
     <>
       {showSpeedbump && props.impact ? (
         <SpeedBumpDialog onAcknowledge={onAcknowledgeSpeedbump}>
-          {t`This transaction will result in a`} <PriceImpactText>{props.impact.toString()} </PriceImpactText>
+          {t`This transaction will result in a`}{' '}
+          <PriceImpactText>{formatPriceImpact(props.impact?.percent)} </PriceImpactText>
           {t`price impact on the market price of this pool. Do you wish to continue? `}
         </SpeedBumpDialog>
       ) : (

src/components/Swap/Toolbar/index.tsx

@@ -1,5 +1,5 @@
 import { t, Trans } from '@lingui/macro'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
+import { formatCurrencyAmount, formatPriceImpact, NumberType } from '@uniswap/conedison/format'
 import ActionButton from 'components/ActionButton'
 import Column from 'components/Column'
 import Expando from 'components/Expando'
@@ -119,7 +119,7 @@ function CaptionRow() {
       {
         color: impact?.warning,
         name: t`Price impact`,
-        value: impact?.percent ? impact?.toString() : '-',
+        value: impact?.percent ? formatPriceImpact(impact.percent) : '-',
         valueTooltip: impact?.warning
           ? {
               icon: AlertTriangle,
@@ -129,7 +129,7 @@ function CaptionRow() {
       },
       {
         // min/max output/input after slippage
-        name: <div style={{ marginRight: '0.25em' }}>{descriptor}</div>,
+        name: <div style={{ marginRight: '0.5em' }}>{descriptor}</div>,
         value,
       },
       {

src/hooks/usePriceImpact.test.tsx

@@ -1,3 +1,4 @@
+import { formatPriceImpact } from '@uniswap/conedison/format'
 import { CurrencyAmount, TradeType } from '@uniswap/sdk-core'
 import { InterfaceTrade } from 'state/routing/types'
 import { renderHook } from 'test'
@@ -16,7 +17,7 @@ describe('usePriceImpact', () => {
       tradeType: TradeType.EXACT_INPUT,
     })
     const { result } = renderHook(() => usePriceImpact(trade))
-    expect(result.current?.toString()).toEqual('-99.61%')
+    expect(formatPriceImpact(result.current?.percent)).toEqual('99.61%')
     expect(result.current?.warning).toEqual('error')
   })
 })

src/hooks/usePriceImpact.ts

@@ -9,7 +9,6 @@ import { useUSDCValue } from './useUSDCPrice'
 export interface PriceImpact {
   percent: Percent
   warning?: 'warning' | 'error'
-  toString(): string
 }
 
 export function usePriceImpact(trade?: InterfaceTrade): PriceImpact | undefined {
@@ -19,7 +18,6 @@ export function usePriceImpact(trade?: InterfaceTrade): PriceImpact | undefined
       ? {
           percent: marketPriceImpact,
           warning: getPriceImpactWarning(marketPriceImpact),
-          toString: () => toHumanReadablePercent(marketPriceImpact),
         }
       : undefined
   }, [trade])
@@ -35,17 +33,6 @@ export function useFiatValueChange(trade?: InterfaceTrade) {
     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
-  if (exactFloat < 0.005) {
-    return '0.00%'
-  }
-  const number = parseFloat(priceImpact.multiply(-1)?.toFixed(2))
-  return `${sign}${number}%`
-}

src/hooks/useSlippage.ts

@@ -1,12 +1,11 @@
+import { formatPriceImpact } from '@uniswap/conedison/format'
 import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import useAutoSlippageTolerance, { DEFAULT_AUTO_SLIPPAGE } from 'hooks/useAutoSlippageTolerance'
 import { useAtomValue } from 'jotai/utils'
 import { useMemo } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 import { slippageAtom } from 'state/swap/settings'
 
-import { toHumanReadablePercent } from './usePriceImpact'
-
 export function toPercent(maxSlippage: string | undefined): Percent | undefined {
   if (!maxSlippage) return undefined
   if (Number.isNaN(maxSlippage)) return undefined
@@ -54,5 +53,5 @@ export function getSlippageWarning(slippage?: Percent): 'warning' | 'error' | un
 }
 
 export function formatSlippage(slippage: Slippage): string {
-  return toHumanReadablePercent(slippage.allowed)
+  return formatPriceImpact(slippage.allowed)
 }