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,6 +333,9 @@ function SearchModal({
       }
       const token0 = allTokens[pair.token0]
       const token1 = allTokens[pair.token1]
+      if (!token0 || !token1) {
+        return false // no token fetched yet
+      } else {
         const regexMatches = Object.keys(token0).map(field => {
           if (
             (field === 'address' && isAddress) ||
@@ -345,8 +349,8 @@ function SearchModal({
           }
           return false
         })
-
         return regexMatches.some(m => m)
+      }
     })
   }, [allPairs, allTokens, searchQuery, sortedPairList])
 
@@ -430,7 +434,9 @@ function SearchModal({
       } else {
         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 (
@@ -442,7 +448,7 @@ function SearchModal({
       //     </>
       //   )
       // }
-    else {
+     */
       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,12 +251,16 @@ function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
           newNonRelationalAmounts[Field.INPUT] = null
         }
       } else {
+        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)
     }