Changes to useReserves, escapreRegex moved to utils, code cleanup (#762)

* bug fixes on non-existent vs no reserves, fix scanning on pair search, small ui tweaks

* remove unused vars

* remove mainnet in injected connector

* code cleanup for pr

* update pair value check

package.json

@@ -28,7 +28,6 @@
     "@web3-react/walletlink-connector": "^6.0.9",
     "copy-to-clipboard": "^3.2.0",
     "cross-env": "^7.0.2",
-    "escape-string-regexp": "^2.0.0",
     "history": "^4.9.0",
     "i18next": "^15.0.9",
     "i18next-browser-languagedetector": "^3.0.1",

src/components/AddressInputPanel/index.tsx

 import React, { useState, useEffect, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 
-// import QR from '../../assets/svg/QR.svg'
 import { isAddress } from '../../utils'
 import { useWeb3React, useDebounce } from '../../hooks'
 import { Link, TYPE } from '../../theme'
@@ -64,16 +63,6 @@ const Input = styled.input<{ error?: boolean }>`
   }
 `
 
-// const QRWrapper = styled.div`
-//   display: flex;
-//   align-items: center;
-//   justify-content: center;
-//   border: 1px solid ${({ theme }) => theme.bg3};
-//   background: #fbfbfb;
-//   padding: 4px;
-//   border-radius: 8px;
-// `
-
 export default function AddressInputPanel({
   initialInput = '',
   onChange,
@@ -190,7 +179,7 @@ export default function AddressInputPanel({
               <TYPE.black color={theme.text2} fontWeight={500} fontSize={14}>
                 Recipient
               </TYPE.black>
-              {(data.name || data.address) && (
+              {data.address && (
                 <Link
                   href={getEtherscanLink(chainId, data.name || data.address, 'address')}
                   style={{ fontSize: '14px' }}
@@ -210,9 +199,6 @@ export default function AddressInputPanel({
               onChange={onInput}
               value={input}
             />
-            {/* <QRWrapper>
-              <img src={QR} alt="" />
-            </QRWrapper> */}
           </AutoColumn>
         </InputContainer>
       </ContainerRow>

src/components/CreatePool/index.tsx

 import React, { useState, useEffect } from 'react'
-import { withRouter } from 'react-router-dom'
-import { Token, JSBI, WETH } from '@uniswap/sdk'
+import { withRouter, RouteComponentProps } from 'react-router-dom'
+import { Token, WETH } from '@uniswap/sdk'
 
 import Row, { AutoRow } from '../Row'
 import TokenLogo from '../TokenLogo'
@@ -21,7 +21,13 @@ const Fields = {
   TOKEN1: 1
 }
 
-function CreatePool({ history }) {
+const STEP = {
+  SELECT_TOKENS: 'SELECT_TOKENS', // choose input and output tokens
+  READY_TO_CREATE: 'READY_TO_CREATE', // enable 'create' button
+  SHOW_CREATE_PAGE: 'SHOW_CREATE_PAGE' // show create page
+}
+
+function CreatePool({ history }: RouteComponentProps<{}>) {
   const { chainId } = useWeb3React()
   const [showSearch, setShowSearch] = useState<boolean>(false)
   const [activeField, setActiveField] = useState<number>(Fields.TOKEN0)
@@ -32,21 +38,22 @@ function CreatePool({ history }) {
   const token0: Token = useToken(token0Address)
   const token1: Token = useToken(token1Address)
 
-  const [step, setStep] = useState<number>(1)
+  const [step, setStep] = useState<string>(STEP.SELECT_TOKENS)
 
   const pair = usePair(token0, token1)
-  const pairExists = // used to detect new exchange
-    pair && JSBI.notEqual(pair.reserve0.raw, JSBI.BigInt(0)) && JSBI.notEqual(pair.reserve1.raw, JSBI.BigInt(0))
 
+  // if both tokens selected but pair doesnt exist, enable button to create pair
   useEffect(() => {
-    if (token0Address && token1Address && pair && !pairExists) {
-      setStep(2)
+    if (token0Address && token1Address && pair === null) {
+      setStep(STEP.READY_TO_CREATE)
     }
-  }, [pair, pairExists, token0Address, token1Address])
+  }, [pair, token0Address, token1Address])
 
-  if (step === 2 && !pairExists) {
+  // if theyve clicked create, show add liquidity page
+  if (step === STEP.SHOW_CREATE_PAGE) {
     return <AddLiquidity token0={token0Address} token1={token1Address} />
-  } else
+  }
+
   return (
     <AutoColumn gap="20px">
       <AutoColumn gap="24px">
@@ -86,7 +93,7 @@ function CreatePool({ history }) {
               setShowSearch(true)
               setActiveField(Fields.TOKEN1)
             }}
-              disabled={step !== 1}
+            disabled={step !== STEP.SELECT_TOKENS}
           >
             <Text fontSize={20}>Select second token</Text>
           </ButtonDropwdown>
@@ -105,7 +112,7 @@ function CreatePool({ history }) {
             </Row>
           </ButtonDropwdownLight>
         )}
-          {pairExists ? (
+        {pair ? ( // pair already exists - prompt to add liquidity to existing pool
           <AutoRow padding="10px" justify="center">
             <TYPE.body textAlign="center">
               Pool already exists!
@@ -113,7 +120,7 @@ function CreatePool({ history }) {
             </TYPE.body>
           </AutoRow>
         ) : (
-            <ButtonPrimary disabled={step !== 2}>
+          <ButtonPrimary disabled={step !== STEP.READY_TO_CREATE} onClick={() => setStep(STEP.SHOW_CREATE_PAGE)}>
             <Text fontWeight={500} fontSize={20}>
               Create Pool
             </Text>

src/components/Footer/index.tsx

@@ -23,7 +23,7 @@ export default function Footer() {
 
   return (
     <FooterFrame>
-      <form action="https://forms.gle/DaLuqvJsVhVaAM3J9">
+      <form action="https://forms.gle/DaLuqvJsVhVaAM3J9" target="_blank">
         <ButtonSecondary
           style={{
             padding: ' 8px 12px',

src/components/NumericalInput/index.tsx

 import React from 'react'
 import styled from 'styled-components'
+import { escapeRegExp } from '../../utils'
 
 const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`
   color: ${({ error, theme }) => error && theme.red1};
@@ -41,10 +42,6 @@ const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: s
 
 const inputRegex = RegExp(`^\\d*(?:\\\\.)?\\d*$`) // match escaped "." characters via in a non-capturing group
 
-function escapeRegExp(string: string): string {
-  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // $& means the whole matched string
-}
-
 export const Input = React.memo(function InnerInput({
   value,
   onUserInput,

src/components/PoolFinder/index.tsx

@@ -46,7 +46,8 @@ function PoolFinder({ history }: RouteComponentProps) {
   const position: TokenAmount = useAddressBalance(account, pair?.liquidityToken)
 
   const newPair: boolean =
-    !!pair && JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) && JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0))
+    pair === null ||
+    (!!pair && JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) && JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0)))
   const allowImport: boolean = position && JSBI.greaterThan(position.raw, JSBI.BigInt(0))
 
   return (

src/components/SearchModal/index.tsx

 import React, { useState, useRef, useMemo, useEffect, useContext } from 'react'
 import '@reach/tooltip/styles.css'
 import styled, { ThemeContext } from 'styled-components'
-import escapeStringRegex from 'escape-string-regexp'
 import { JSBI, Token, WETH } from '@uniswap/sdk'
 import { isMobile } from 'react-device-detect'
 import { RouteComponentProps, withRouter } from 'react-router-dom'
@@ -22,7 +21,7 @@ import { ButtonPrimary, ButtonSecondary } from '../../components/Button'
 import { Spinner, TYPE } from '../../theme'
 import { RowBetween, RowFixed, AutoRow } from '../Row'
 
-import { isAddress } from '../../utils'
+import { isAddress, escapeRegExp } from '../../utils'
 import { useWeb3React } from '../../hooks'
 import {
   useAllDummyPairs,
@@ -191,6 +190,16 @@ function SearchModal({
   // if the current input is an address, and we don't have the token in context, try to fetch it
   const token = useToken(searchQuery)
   const [temporaryToken, setTemporaryToken] = useState<Token | null>()
+
+  // filters for ordering
+  const [activeFilter, setActiveFilter] = useState(FILTERS.BALANCES)
+
+  // toggle specific token import view
+  const [showTokenImport, setShowTokenImport] = useState(false)
+
+  // used to help scanning on results, put token found from input on left
+  const [identifiedToken, setIdentifiedToken] = useState<Token | null>()
+
   useEffect(() => {
     const address = isAddress(searchQuery)
     if (address && !token) {
@@ -207,10 +216,6 @@ function SearchModal({
     }
   }, [searchQuery, token, fetchTokenByAddress])
 
-  const [activeFilter, setActiveFilter] = useState(FILTERS.BALANCES)
-
-  const [showTokenImport, setShowTokenImport] = useState(false)
-
   // reset view on close
   useEffect(() => {
     if (!isOpen) {
@@ -272,13 +277,13 @@ function SearchModal({
             include &&
             inputIsAddress &&
             typeof tokenEntry[tokenEntryKey] === 'string' &&
-            !!tokenEntry[tokenEntryKey].match(new RegExp(escapeStringRegex(searchQuery), 'i'))
+            !!tokenEntry[tokenEntryKey].match(new RegExp(escapeRegExp(searchQuery), 'i'))
           )
         }
         return (
           include &&
           typeof tokenEntry[tokenEntryKey] === 'string' &&
-          !!tokenEntry[tokenEntryKey].match(new RegExp(escapeStringRegex(searchQuery), 'i'))
+          !!tokenEntry[tokenEntryKey].match(new RegExp(escapeRegExp(searchQuery), 'i'))
         )
       })
       return regexMatches.some(m => m)
@@ -293,7 +298,6 @@ function SearchModal({
 
   // manage focus on modal show
   const inputRef = useRef()
-
   function onInput(event) {
     const input = event.target.value
     const checksummedInput = isAddress(input)
@@ -305,9 +309,6 @@ function SearchModal({
     onDismiss()
   }
 
-  // sort tokens
-  const escapeStringRegexp = string => string
-
   const sortedPairList = useMemo(() => {
     return allPairs.sort((a, b): number => {
       // sort by balance
@@ -342,9 +343,15 @@ function SearchModal({
             (field === 'name' && !isAddress) ||
             (field === 'symbol' && !isAddress)
           ) {
+            if (token0[field].match(new RegExp(escapeRegExp(searchQuery), 'i'))) {
+              setIdentifiedToken(token0)
+            }
+            if (token1[field].match(new RegExp(escapeRegExp(searchQuery), 'i'))) {
+              setIdentifiedToken(token1)
+            }
             return (
-              token0[field].match(new RegExp(escapeStringRegexp(searchQuery), 'i')) ||
-              token1[field].match(new RegExp(escapeStringRegexp(searchQuery), 'i'))
+              token0[field].match(new RegExp(escapeRegExp(searchQuery), 'i')) ||
+              token1[field].match(new RegExp(escapeRegExp(searchQuery), 'i'))
             )
           }
           return false
@@ -366,8 +373,9 @@ function SearchModal({
     return (
       filteredPairList &&
       filteredPairList.map((pair, i) => {
-        const token0 = pair.token0
-        const token1 = pair.token1
+        // reset ordering to help scan search results
+        const token0 = identifiedToken ? (identifiedToken.equals(pair.token0) ? pair.token0 : pair.token1) : pair.token0
+        const token1 = identifiedToken ? (identifiedToken.equals(pair.token0) ? pair.token1 : pair.token0) : pair.token1
         const pairAddress = pair.liquidityToken.address
         const balance = allBalances?.[account]?.[pairAddress]?.toSignificant(6)
         const zeroBalance =
@@ -434,20 +442,6 @@ function SearchModal({
         return <TokenModalInfo>{t('noToken')}</TokenModalInfo>
       }
     } else {
-      /**
-       * @TODO
-      // TODO is this the right place to link to create exchange?
-      // else if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) {
-      //   return (
-      //     <>
-      //       <TokenModalInfo>{t('noToken')}</TokenModalInfo>
-      //       <TokenModalInfo>
-      //         <Link to={`/create-exchange/${searchQuery}`}>{t('createExchange')}</Link>
-      //       </TokenModalInfo>
-      //     </>
-      //   )
-      // }
-     */
       return filteredTokenList
         .sort((a, b) => {
           if (a.address === WETH[chainId].address) {

src/components/WalletModal/WalletConnectData.tsx

 import React from 'react'
 import styled from 'styled-components'
 import QRCode from 'qrcode.react'
-import { useDarkModeManager } from '../../state/user/hooks'
 
 const QRCodeWrapper = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap};
@@ -17,12 +16,5 @@ interface WalletConnectDataProps {
 }
 
 export default function WalletConnectData({ uri = '', size }: WalletConnectDataProps) {
-  const [isDark] = useDarkModeManager()
-  return (
-    <QRCodeWrapper>
-      {uri && (
-        <QRCode size={size} value={uri} bgColor={isDark ? '#333639' : 'white'} fgColor={isDark ? 'white' : 'black'} />
-      )}
-    </QRCodeWrapper>
-  )
+  return <QRCodeWrapper>{uri && <QRCode size={size} value={uri} />}</QRCodeWrapper>
 }

src/data/Reserves.ts

@@ -15,9 +15,16 @@ function getReserves(contract: Contract, token0: Token, token1: Token): () => Pr
           return new Pair(new TokenAmount(token0, reserve0.toString()), new TokenAmount(token1, reserve1.toString()))
         }
       )
+      .catch(() => {
+        return null
+      })
 }
 
-// undefined while loading, null if no liquidity, pair otherwise
+/*
+ * if loading, return undefined
+ * if no pair created yet, return null
+ * if pair already created (even if 0 reserves), return pair
+ */
 export function usePair(tokenA?: Token, tokenB?: Token): undefined | Pair | null {
   const bothDefined = !!tokenA && !!tokenB
   const invalid = bothDefined && tokenA.equals(tokenB)

src/pages/Pool/AddLiquidity.tsx

@@ -221,7 +221,8 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
   const route: Route = pair ? new Route([pair], tokens[independentField]) : undefined
   const totalSupply: TokenAmount = useTotalSupply(pair?.liquidityToken)
   const noLiquidity = // used to detect new exchange
-    !!pair && JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) && JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0))
+    pair === null ||
+    (!!pair && JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) && JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0)))
 
   // get user-pecific and token-specific lookup data
   const userBalances: { [field: number]: TokenAmount } = {

src/utils/index.ts

@@ -218,3 +218,7 @@ export async function getTokenBalance(tokenAddress, address, library) {
 
   return getContract(tokenAddress, ERC20_ABI, library).balanceOf(address)
 }
+
+export function escapeRegExp(string: string): string {
+  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // $& means the whole matched string
+}