fix: v2 liquidity divide by zero (#6921)

src/pages/AddLiquidityV2/PoolPriceBar.test.tsx

@@ -0,0 +1,31 @@
+import { Price, WETH9 } from '@uniswap/sdk-core'
+import { USDC_MAINNET } from 'constants/tokens'
+import { Field } from 'state/mint/actions'
+import { render, screen } from 'test-utils/render'
+
+import { PoolPriceBar } from './PoolPriceBar'
+
+const currencies = {
+  [Field.CURRENCY_A]: WETH9[1],
+  [Field.CURRENCY_B]: USDC_MAINNET,
+}
+
+const price = new Price(currencies[Field.CURRENCY_A], currencies[Field.CURRENCY_B], 1234, 1)
+
+describe('pool price bar', () => {
+  it('correctly renders the correct pool prices', () => {
+    render(<PoolPriceBar currencies={currencies} price={price} noLiquidity={false} poolTokenPercentage={undefined} />)
+
+    expect(screen.getByTestId('currency-b-price').textContent).toBe('810373000')
+    expect(screen.getByTestId('currency-a-price').textContent).toBe('0.000000001234')
+  })
+
+  it('handles undefined price', () => {
+    render(
+      <PoolPriceBar currencies={currencies} price={undefined} noLiquidity={false} poolTokenPercentage={undefined} />
+    )
+
+    expect(screen.getByTestId('currency-b-price').textContent).toBe('-')
+    expect(screen.getByTestId('currency-a-price').textContent).toBe('-')
+  })
+})

src/pages/AddLiquidityV2/PoolPriceBar.tsx

@@ -21,16 +21,21 @@ export function PoolPriceBar({
   price?: Price<Currency, Currency>
 }) {
   const theme = useTheme()
-  const canInvertPrice = Boolean(
-    price && price.baseCurrency && price.quoteCurrency && !price.baseCurrency.equals(price.quoteCurrency)
-  )
-  const invertedPrice = canInvertPrice ? price?.invert()?.toSignificant(6) : undefined
+
+  let invertedPrice: string | undefined
+  try {
+    invertedPrice = price?.invert()?.toSignificant(6)
+  } catch (error) {
+    invertedPrice = undefined
+  }
 
   return (
     <AutoColumn gap="md">
       <AutoRow justify="space-around" gap="4px">
         <AutoColumn justify="center">
-          <ThemedText.DeprecatedBlack>{price?.toSignificant(6) ?? '-'}</ThemedText.DeprecatedBlack>
+          <ThemedText.DeprecatedBlack data-testid="currency-b-price">
+            {price?.toSignificant(6) ?? '-'}
+          </ThemedText.DeprecatedBlack>
           <Text fontWeight={500} fontSize={14} color={theme.textSecondary} pt={1}>
             <Trans>
               {currencies[Field.CURRENCY_B]?.symbol} per {currencies[Field.CURRENCY_A]?.symbol}
@@ -38,7 +43,7 @@ export function PoolPriceBar({
           </Text>
         </AutoColumn>
         <AutoColumn justify="center">
-          <ThemedText.DeprecatedBlack>{invertedPrice ?? '-'}</ThemedText.DeprecatedBlack>
+          <ThemedText.DeprecatedBlack data-testid="currency-a-price">{invertedPrice ?? '-'}</ThemedText.DeprecatedBlack>
           <Text fontWeight={500} fontSize={14} color={theme.textSecondary} pt={1}>
             <Trans>
               {currencies[Field.CURRENCY_A]?.symbol} per {currencies[Field.CURRENCY_B]?.symbol}