fix: price % format fix (#244)

* standardize percentage formatting in widget

* style(lint): lint action with ESLint

* fix

* delete

Co-authored-by: Lint Action <lint-action@uniswap.org>

src/components/Swap/Output.tsx

@@ -13,7 +13,6 @@ import { Field } from 'state/swap'
 import styled from 'styled-components/macro'
 import { DynamicThemeProvider, ThemedText } from 'theme'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
-import { formatPercentage } from 'utils/formatPercentage'
 
 import Column from '../Column'
 import Row from '../Row'
@@ -93,9 +92,7 @@ export default function Output({ disabled, focused, children }: PropsWithChildre
             <Row>
               <USDC gap={0.5} isLoading={isRouteLoading}>
                 {outputUSDC && `$${formatCurrencyAmount(outputUSDC, 6, 'en', 2)} `}
-                {impact && (
-                  <ThemedText.Body2 color={impact.warning}>({formatPercentage(impact.percent)})</ThemedText.Body2>
-                )}
+                {impact && <ThemedText.Body2 color={impact.warning}>({impact.toString()})</ThemedText.Body2>}
               </USDC>
               {balance && (
                 <Balance color={focused ? 'secondary' : 'hint'}>

src/components/Swap/Summary/Details.tsx

@@ -12,7 +12,6 @@ import styled from 'styled-components/macro'
 import { Color, ThemedText } from 'theme'
 import { currencyId } from 'utils/currencyId'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
-import { formatPercentage } from 'utils/formatPercentage'
 import { computeRealizedLPFeeAmount } from 'utils/prices'
 import { isExactInput } from 'utils/tradeType'
 
@@ -66,7 +65,7 @@ export default function Details({ trade, slippage, impact }: DetailsProps) {
     }
 
     if (impact) {
-      rows.push([t`Price impact`, formatPercentage(impact.percent), impact.warning])
+      rows.push([t`Price impact`, impact.toString(), impact.warning])
     }
 
     if (lpFeeAmount) {

src/components/Swap/Summary/Summary.tsx

@@ -6,7 +6,6 @@ import { PropsWithChildren } from 'react'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
 import { formatCurrencyAmount } from 'utils/formatCurrencyAmount'
-import { formatPercentage } from 'utils/formatPercentage'
 
 import Column from '../../Column'
 import Row from '../../Row'
@@ -59,7 +58,7 @@ 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}>({formatPercentage(impact.percent)})</ThemedText.Caption>}
+        {impact && <ThemedText.Caption color={impact.warning}>({impact.toString()})</ThemedText.Caption>}
       </TokenValue>
     </>
   )

src/components/Swap/Toolbar/Caption.tsx

@@ -10,7 +10,6 @@ import { ReactNode, useCallback } from 'react'
 import { InterfaceTrade } from 'state/routing/types'
 import styled from 'styled-components/macro'
 import { ThemedText } from 'theme'
-import { formatPercentage } from 'utils/formatPercentage'
 
 import Price from '../Price'
 import RoutingDiagram from '../RoutingDiagram'
@@ -113,8 +112,7 @@ export function Trade({
           {impact?.warning && (
             <>
               <ThemedText.Caption>
-                The output amount is estimated at {formatPercentage(impact.percent)} less than the input amount due to
-                impact
+                The output amount is estimated at {impact.toString()} less than the input amount due to impact
               </ThemedText.Caption>
               <Rule />
             </>

src/hooks/usePriceImpact.ts

@@ -36,6 +36,10 @@ export function usePriceImpact(
 
 export function toHumanReadablePercent(priceImpact: Percent): string {
   const sign = priceImpact.lessThan(0) ? '+' : ''
-  const number = parseFloat(priceImpact.multiply(-1)?.toSignificant(3))
+  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}%`
 }