fix: add price impact back (#6581)

* feat: add price impact back

* chore: update tes tname

* chore: update snapshot for price impact

* fix

* fix

* update snapshot after rebase

* update snapshot

src/components/swap/AdvancedSwapDetails.tsx

@@ -7,6 +7,7 @@ import { LoadingRows } from 'components/Loader/styled'
 import { SUPPORTED_GAS_ESTIMATE_CHAIN_IDS } from 'constants/chains'
 import useNativeCurrency from 'lib/hooks/useNativeCurrency'
 import { InterfaceTrade } from 'state/routing/types'
+import formatPriceImpact from 'utils/formatPriceImpact'
 
 import { Separator, ThemedText } from '../../theme'
 import Column from '../Column'
@@ -64,6 +65,16 @@ export function AdvancedSwapDetails({ trade, allowedSlippage, syncing = false }:
           </TextWithLoadingPlaceholder>
         </RowBetween>
       )}
+      <RowBetween>
+        <MouseoverTooltip text={<Trans>The impact your trade has on the market price of this pool.</Trans>}>
+          <ThemedText.BodySmall color="textSecondary">
+            <Trans>Price Impact</Trans>
+          </ThemedText.BodySmall>
+        </MouseoverTooltip>
+        <TextWithLoadingPlaceholder syncing={syncing} width={50}>
+          <ThemedText.BodySmall>{formatPriceImpact(trade.priceImpact)}</ThemedText.BodySmall>
+        </TextWithLoadingPlaceholder>
+      </RowBetween>
       <RowBetween>
         <RowFixed>
           <MouseoverTooltip

src/components/swap/PriceImpactWarning.tsx

@@ -3,6 +3,7 @@ import { Percent } from '@uniswap/sdk-core'
 import { OutlineCard } from 'components/Card'
 import styled, { useTheme } from 'styled-components/macro'
 import { opacify } from 'theme/utils'
+import formatPriceImpact from 'utils/formatPriceImpact'
 
 import { ThemedText } from '../../theme'
 import { AutoColumn } from '../Column'
@@ -18,8 +19,6 @@ interface PriceImpactWarningProps {
   priceImpact: Percent
 }
 
-const formatPriceImpact = (priceImpact: Percent) => `${priceImpact.multiply(-1).toFixed(2)}%`
-
 export default function PriceImpactWarning({ priceImpact }: PriceImpactWarningProps) {
   const theme = useTheme()
 

src/components/swap/__snapshots__/AdvancedSwapDetails.test.tsx.snap

@@ -98,6 +98,26 @@ exports[`AdvancedSwapDetails.tsx matches base snapshot 1`] = `
         ~$1.00
       </div>
     </div>
+    <div
+      class="c2 c3 c4"
+    >
+      <div
+        class="c5"
+      >
+        <div>
+          <div
+            class="c6 css-zhpkf8"
+          >
+            Price Impact
+          </div>
+        </div>
+      </div>
+      <div
+        class="c7 css-zhpkf8"
+      >
+        105566.37%
+      </div>
+    </div>
     <div
       class="c2 c3 c4"
     >

src/components/swap/__snapshots__/SwapDetailsDropdown.test.tsx.snap

@@ -269,6 +269,26 @@ exports[`SwapDetailsDropdown.tsx renders a trade 1`] = `
                 ~$1.00
               </div>
             </div>
+            <div
+              class="c2 c3 c4"
+            >
+              <div
+                class="c10"
+              >
+                <div>
+                  <div
+                    class="c12 css-zhpkf8"
+                  >
+                    Price Impact
+                  </div>
+                </div>
+              </div>
+              <div
+                class="c9 css-zhpkf8"
+              >
+                105566.37%
+              </div>
+            </div>
             <div
               class="c2 c3 c4"
             >

src/utils/formatPriceImpact.test.ts

+import { Percent } from '@uniswap/sdk-core'
+
+import formatPriceImpact from './formatPriceImpact'
+
+describe('formatPriceImpact', () => {
+  it('formats price impact', () => {
+    expect(formatPriceImpact(new Percent(5, 10_000))).toEqual('-0.05%')
+  })
+  // While there's theoretically no such thing as "positive price impact", this can show up
+  // due to a bug in routing-api, so it's still tested for
+  it('formats price impact when given a negative value', () => {
+    expect(formatPriceImpact(new Percent(-5, 10_000))).toEqual('0.05%')
+  })
+})

src/utils/formatPriceImpact.ts

+import { Percent } from '@uniswap/sdk-core'
+
+export default function formatPriceImpact(priceImpact: Percent) {
+  return `${priceImpact.multiply(-1).toFixed(2)}%`
+}