Bug fixes, UI tweaks (#738)

* linking bug fixes, search UI tweaks

* search style tweaks

* organize imports

src/components/NavigationTabs/index.tsx

@@ -106,7 +106,7 @@ function NavigationTabs({ location: { pathname }, history }: RouteComponentProps
       {adding || removing ? (
         <Tabs>
           <RowBetween style={{ padding: '1rem 1rem 0 1rem' }}>
-            <Hover onClick={() => history.goBack()}>
+            <Hover onClick={() => history.push('/pool')}>
               <ArrowLink />
             </Hover>
             <ActiveText>{adding ? 'Add' : 'Remove'} Liquidity</ActiveText>

src/components/PoolFinder/index.tsx

@@ -181,7 +181,7 @@ function PoolFinder({ history }: RouteComponentProps) {
             </AutoColumn>
           </LightCard>
         ) : (
-          <LightCard bg="rgba(255, 255, 255, 0.6)" padding={'45px'}>
+          <LightCard padding={'45px'}>
             <Text color="#C3C5CB" textAlign="center">
               Select a token pair to find your liquidity.
             </Text>

src/components/SearchModal/index.tsx

@@ -8,6 +8,7 @@ import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { COMMON_BASES } from '../../constants'
 import { Link as StyledLink } from '../../theme/components'
 
+import Card from '../../components/Card'
 import Modal from '../Modal'
 import Circle from '../../assets/images/circle.svg'
 import TokenLogo from '../TokenLogo'
@@ -18,7 +19,6 @@ import { Hover } from '../../theme'
 import { ArrowLeft, X } from 'react-feather'
 import { CloseIcon } from '../../theme/components'
 import { ColumnCenter } from '../Column'
-import Card from '../../components/Card'
 import { ButtonPrimary } from '../../components/Button'
 import { Spinner, TYPE } from '../../theme'
 import { RowBetween, RowFixed, AutoRow } from '../Row'
@@ -39,11 +39,12 @@ const TokenModalInfo = styled.div`
   margin: 0.25rem 0.5rem;
   justify-content: center;
   user-select: none;
+  min-height: 200px;
 `
 
-const TokenList = styled.div`
+const ItemList = styled.div`
   flex-grow: 1;
-  height: 100%;
+  height: 240px;
   overflow-y: scroll;
   -webkit-overflow-scrolling: touch;
 `
@@ -332,21 +333,24 @@ function SearchModal({
       }
       const token0 = allTokens[pair.token0]
       const token1 = allTokens[pair.token1]
-      const regexMatches = Object.keys(token0).map(field => {
-        if (
-          (field === 'address' && isAddress) ||
-          (field === 'name' && !isAddress) ||
-          (field === 'symbol' && !isAddress)
-        ) {
-          return (
-            token0[field].match(new RegExp(escapeStringRegexp(searchQuery), 'i')) ||
-            token1[field].match(new RegExp(escapeStringRegexp(searchQuery), 'i'))
-          )
-        }
-        return false
-      })
-
-      return regexMatches.some(m => m)
+      if (!token0 || !token1) {
+        return false // no token fetched yet
+      } else {
+        const regexMatches = Object.keys(token0).map(field => {
+          if (
+            (field === 'address' && isAddress) ||
+            (field === 'name' && !isAddress) ||
+            (field === 'symbol' && !isAddress)
+          ) {
+            return (
+              token0[field].match(new RegExp(escapeStringRegexp(searchQuery), 'i')) ||
+              token1[field].match(new RegExp(escapeStringRegexp(searchQuery), 'i'))
+            )
+          }
+          return false
+        })
+        return regexMatches.some(m => m)
+      }
     })
   }, [allPairs, allTokens, searchQuery, sortedPairList])
 
@@ -430,19 +434,21 @@ function SearchModal({
       } else {
         return <TokenModalInfo>{t('noToken')}</TokenModalInfo>
       }
-    }
-    // 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>
-    //     </>
-    //   )
-    // }
-    else {
+    } 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 (b?.address === WETH[chainId]?.address) {
@@ -635,7 +641,7 @@ function SearchModal({
           </PaddedColumn>
         )}
         {!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />}
-        {!showTokenImport && <TokenList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</TokenList>}
+        {!showTokenImport && <ItemList>{filterType === 'tokens' ? renderTokenList() : renderPairsList()}</ItemList>}
         {!showTokenImport && <div style={{ width: '100%', height: '1px', backgroundColor: theme.bg2 }} />}
         {!showTokenImport && (
           <Card>

src/pages/Pool/AddLiquidity.tsx

@@ -30,6 +30,8 @@ import { useTransactionAdder, usePendingApproval } from '../../contexts/Transact
 import { ROUTER_ADDRESS } from '../../constants'
 import { getRouterContract, calculateGasMargin, isWETH } from '../../utils'
 import { BigNumber } from '@ethersproject/bignumber'
+import { useLocalStorageTokens } from '../../contexts/LocalStorage'
+import { useAllTokens } from '../../contexts/Tokens'
 
 // denominated in bips
 const ALLOWED_SLIPPAGE = 50
@@ -182,6 +184,30 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
     [Field.OUTPUT]: useToken(fieldData[Field.OUTPUT].address)
   }
 
+  // ensure input + output tokens are added to localstorage
+  const [, { fetchTokenByAddress, addToken }] = useLocalStorageTokens()
+  const allTokens = useAllTokens()
+  const inputTokenAddress = fieldData[Field.INPUT].address
+  useEffect(() => {
+    if (inputTokenAddress && !Object.keys(allTokens).some(tokenAddress => tokenAddress === inputTokenAddress)) {
+      fetchTokenByAddress(inputTokenAddress).then(token => {
+        if (token !== null) {
+          addToken(token)
+        }
+      })
+    }
+  }, [inputTokenAddress, allTokens, fetchTokenByAddress, addToken])
+  const outputTokenAddress = fieldData[Field.OUTPUT].address
+  useEffect(() => {
+    if (outputTokenAddress && !Object.keys(allTokens).some(tokenAddress => tokenAddress === outputTokenAddress)) {
+      fetchTokenByAddress(outputTokenAddress).then(token => {
+        if (token !== null) {
+          addToken(token)
+        }
+      })
+    }
+  }, [outputTokenAddress, allTokens, fetchTokenByAddress, addToken])
+
   // token contracts for approvals and direct sends
   const tokenContractInput: Contract = useTokenContract(tokens[Field.INPUT]?.address)
   const tokenContractOutput: Contract = useTokenContract(tokens[Field.OUTPUT]?.address)
@@ -225,11 +251,15 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
           newNonRelationalAmounts[Field.INPUT] = null
         }
       } else {
-        const typedValueParsed = parseUnits(typedValue, tokens[independentField].decimals).toString()
-        if (independentField === Field.OUTPUT) {
-          newNonRelationalAmounts[Field.OUTPUT] = new TokenAmount(tokens[independentField], typedValueParsed)
-        } else {
-          newNonRelationalAmounts[Field.INPUT] = new TokenAmount(tokens[independentField], typedValueParsed)
+        try {
+          const typedValueParsed = parseUnits(typedValue, tokens[independentField].decimals).toString()
+          if (independentField === Field.OUTPUT) {
+            newNonRelationalAmounts[Field.OUTPUT] = new TokenAmount(tokens[independentField], typedValueParsed)
+          } else {
+            newNonRelationalAmounts[Field.INPUT] = new TokenAmount(tokens[independentField], typedValueParsed)
+          }
+        } catch (error) {
+          console.log(error)
         }
       }
       setNonrelationalAmounts(newNonRelationalAmounts)