fix(add liquidity): fix the mint hooks to return a price as well as return the dependent amount in the input currency (#1011)

src/pages/AddLiquidity/index.tsx

@@ -311,7 +311,7 @@ export default function AddLiquidity({
             }}
             attemptingTxn={attemptingTxn}
             hash={txHash}
-            topContent={() => modalHeader()}
+            topContent={modalHeader}
             bottomContent={modalBottom}
             pendingText={pendingText}
             title={noLiquidity ? 'You are creating a pool' : 'You will receive'}

src/state/mint/hooks.ts

@@ -1,4 +1,4 @@
-import { Currency, CurrencyAmount, JSBI, Pair, Percent, Price, TokenAmount } from '@uniswap/sdk'
+import { Currency, CurrencyAmount, ETHER, JSBI, Pair, Percent, Price, TokenAmount } from '@uniswap/sdk'
 import { useCallback, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { PairState, usePair } from '../../data/Reserves'
@@ -65,17 +65,24 @@ export function useDerivedMintInfo(
   }
 
   // amounts
-  const independentAmount = tryParseAmount(typedValue, currencies[independentField])
-  const dependentAmount = useMemo(() => {
-    if (noLiquidity && otherTypedValue && currencies[dependentField]) {
-      return tryParseAmount(otherTypedValue, currencies[dependentField])
+  const independentAmount: CurrencyAmount | undefined = tryParseAmount(typedValue, currencies[independentField])
+  const dependentAmount: CurrencyAmount | undefined = useMemo(() => {
+    if (noLiquidity) {
+      if (otherTypedValue && currencies[dependentField]) {
+        return tryParseAmount(otherTypedValue, currencies[dependentField])
+      }
+      return
     } else if (independentAmount) {
+      // we wrap the currencies just to get the price in terms of the other token
       const wrappedIndependentAmount = wrappedCurrencyAmount(independentAmount, chainId)
       const [tokenA, tokenB] = [wrappedCurrency(currencyA, chainId), wrappedCurrency(currencyB, chainId)]
       if (tokenA && tokenB && wrappedIndependentAmount && pair) {
-        return dependentField === Field.CURRENCY_B
-          ? pair.priceOf(tokenA).quote(wrappedIndependentAmount)
-          : pair.priceOf(tokenB).quote(wrappedIndependentAmount)
+        const dependentCurrency = dependentField === Field.CURRENCY_B ? currencyB : currencyA
+        const dependentTokenAmount =
+          dependentField === Field.CURRENCY_B
+            ? pair.priceOf(tokenA).quote(wrappedIndependentAmount)
+            : pair.priceOf(tokenB).quote(wrappedIndependentAmount)
+        return dependentCurrency === ETHER ? CurrencyAmount.ether(dependentTokenAmount.raw) : dependentTokenAmount
       }
       return
     } else {
@@ -89,12 +96,11 @@ export function useDerivedMintInfo(
 
   const price = useMemo(() => {
     const { [Field.CURRENCY_A]: currencyAAmount, [Field.CURRENCY_B]: currencyBAmount } = parsedAmounts
-    if (noLiquidity && currencyAAmount && currencyBAmount) {
+    if (currencyAAmount && currencyBAmount) {
       return new Price(currencyAAmount.currency, currencyBAmount.currency, currencyAAmount.raw, currencyBAmount.raw)
-    } else {
-      return
     }
-  }, [noLiquidity, parsedAmounts])
+    return
+  }, [parsedAmounts])
 
   // liquidity minted
   const totalSupply = useTotalSupply(pair?.liquidityToken)

src/utils/uriToHttp.test.ts

@@ -0,0 +1,28 @@
+import uriToHttp from './uriToHttp'
+
+describe('uriToHttp', () => {
+  it('returns .eth.link for ens names', () => {
+    expect(uriToHttp('t2crtokens.eth')).toEqual(['https://t2crtokens.eth.link'])
+  })
+  it('returns https first for http', () => {
+    expect(uriToHttp('http://test.com')).toEqual(['https://test.com', 'http://test.com'])
+  })
+  it('returns https for https', () => {
+    expect(uriToHttp('https://test.com')).toEqual(['https://test.com'])
+  })
+  it('returns ipfs gateways for ipfs:// urls', () => {
+    expect(uriToHttp('ipfs://QmV8AfDE8GFSGQvt3vck8EwAzsPuNTmtP8VcQJE3qxRPaZ')).toEqual([
+      'https://cloudflare-ipfs.com/ipfs/QmV8AfDE8GFSGQvt3vck8EwAzsPuNTmtP8VcQJE3qxRPaZ/',
+      'https://ipfs.io/ipfs/QmV8AfDE8GFSGQvt3vck8EwAzsPuNTmtP8VcQJE3qxRPaZ/'
+    ])
+  })
+  it('returns ipns gateways for ipns:// urls', () => {
+    expect(uriToHttp('ipns://app.uniswap.org')).toEqual([
+      'https://cloudflare-ipfs.com/ipns/app.uniswap.org/',
+      'https://ipfs.io/ipns/app.uniswap.org/'
+    ])
+  })
+  it('returns empty array for invalid scheme', () => {
+    expect(uriToHttp('blah:test')).toEqual([])
+  })
+})

src/utils/uriToHttp.ts

@@ -10,20 +10,18 @@ export default function uriToHttp(uri: string): string[] {
     } else if (parsed.protocol === 'https:') {
       return [uri]
     } else if (parsed.protocol === 'ipfs:') {
-      const hash = parsed.pathname.substring(2)
-      return [`https://cloudflare-ipfs.com/ipfs/${hash}/`, `https://ipfs.infura.io/ipfs/${hash}/`]
+      const hash = parsed.href.match(/^ipfs:(\/\/)?(.*)$/)?.[2]
+      return [`https://cloudflare-ipfs.com/ipfs/${hash}/`, `https://ipfs.io/ipfs/${hash}/`]
     } else if (parsed.protocol === 'ipns:') {
-      const name = parsed.pathname.substring(2)
-      return [`https://cloudflare-ipfs.com/ipns/${name}/`, `https://ipfs.infura.io/ipns/${name}/`]
+      const name = parsed.href.match(/^ipns:(\/\/)?(.*)$/)?.[2]
+      return [`https://cloudflare-ipfs.com/ipns/${name}/`, `https://ipfs.io/ipns/${name}/`]
     } else {
-      console.error('Unrecognized protocol', parsed)
       return []
     }
   } catch (error) {
     if (uri.toLowerCase().endsWith('.eth')) {
       return [`https://${uri.toLowerCase()}.link`]
     }
-    console.error('Failed to parse URI', error)
     return []
   }
 }