perf(Search modal): performance improvements (#829)

* Search modal performance improvements

* Move more code out of the search modal

* Add the question helper to the search

* Fix a couple lint errors

* Fix the tests, duplicate import text

* Hide the token info on small screens, flex the list

* Fix token sorting, have a link that focuses and shows a tooltip for the search input

* Remove reach tooltip css

* Fix pair balances in the search modal

* Get the arrow working

* Only clear the input when they re-open

* Better way to exclude props

* More small performance tweaks

cypress/integration/pool.test.ts

@@ -5,9 +5,9 @@ describe('Pool', () => {
     cy.get('#token-search-input').type('DAI')
   })
 
-  it.skip('can import a pool', () => {
+  it('can import a pool', () => {
     cy.get('#join-pool-button').click()
-    cy.get('#import-pool-link').click() // blocked by the grid element in the search box
+    cy.get('#import-pool-link').click({ force: true }) // blocked by the grid element in the search box
     cy.url().should('include', '/find')
   })
 })

cypress/integration/swap.test.ts

@@ -32,8 +32,10 @@ describe('Swap', () => {
 
   it('can swap ETH for DAI', () => {
     cy.get('#swap-currency-output .open-currency-select-button').click()
-    cy.get('.token-item-0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735').click()
-    cy.get('#swap-currency-input .token-amount-input').type('0.001')
+    cy.get('.token-item-0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735').should('be.visible')
+    cy.get('.token-item-0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735').click({ force: true })
+    cy.get('#swap-currency-input .token-amount-input').should('be.visible')
+    cy.get('#swap-currency-input .token-amount-input').type('0.001', { force: true })
     cy.get('#swap-currency-output .token-amount-input').should('not.equal', '')
     cy.get('#show-advanced').click()
     cy.get('#swap-button').click()

package.json

@@ -17,7 +17,6 @@
     "@mycrypto/eth-scan": "^2.1.0",
     "@popperjs/core": "^2.4.0",
     "@reach/dialog": "^0.2.8",
-    "@reach/tooltip": "^0.2.0",
     "@reduxjs/toolkit": "^1.3.5",
     "@types/jest": "^25.2.1",
     "@types/node": "^13.13.5",
@@ -26,6 +25,7 @@
     "@types/react-dom": "^16.9.7",
     "@types/react-redux": "^7.1.8",
     "@types/react-router-dom": "^5.0.0",
+    "@types/react-window": "^1.8.2",
     "@types/rebass": "^4.0.5",
     "@types/styled-components": "^4.2.0",
     "@types/testing-library__cypress": "^5.0.5",
@@ -70,6 +70,7 @@
     "react-scripts": "^3.4.1",
     "react-spring": "^8.0.27",
     "react-use-gesture": "^6.0.14",
+    "react-window": "^1.8.5",
     "rebass": "^4.0.7",
     "redux-localstorage-simple": "^2.2.0",
     "serve": "^11.3.0",

src/components/CurrencyInputPanel/index.tsx

 import { Pair, Token } from '@uniswap/sdk'
 import React, { useState, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
-import '@reach/tooltip/styles.css'
 import { darken } from 'polished'
 import { Field } from '../../state/swap/actions'
 import { useTokenBalanceTreatingWETHasETH } from '../../state/wallet/hooks'
-
 import TokenLogo from '../TokenLogo'
 import DoubleLogo from '../DoubleLogo'
 import SearchModal from '../SearchModal'

src/components/NavigationTabs/index.tsx

@@ -7,7 +7,7 @@ import { withRouter, NavLink, Link as HistoryLink, RouteComponentProps } from 'r
 import { CursorPointer } from '../../theme'
 import { ArrowLeft } from 'react-feather'
 import { RowBetween } from '../Row'
-import QuestionHelper from '../Question'
+import QuestionHelper from '../QuestionHelper'
 
 import { useBodyKeyDown } from '../../hooks'
 

src/components/Popover/index.tsx

+import { transparentize } from 'polished'
+import React, { useState } from 'react'
+import { createPortal } from 'react-dom'
+import { usePopper } from 'react-popper'
+import styled, { keyframes } from 'styled-components'
+
+const fadeIn = keyframes`
+  from {
+    opacity : 0;
+  }
+
+  to {
+    opacity : 1;
+  }
+`
+
+const fadeOut = keyframes`
+  from {
+    opacity : 1;
+  }
+
+  to {
+    opacity : 0;
+  }
+`
+
+const PopoverContainer = styled.div<{ show: boolean }>`
+  position: relative;
+  z-index: 9999;
+
+  visibility: ${props => (!props.show ? 'hidden' : 'visible')};
+  animation: ${props => (!props.show ? fadeOut : fadeIn)} 150ms linear;
+  transition: visibility 150ms linear;
+
+  background: ${({ theme }) => theme.bg2};
+  border: 1px solid ${({ theme }) => theme.bg3};
+  box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.9, theme.shadow1)};
+  color: ${({ theme }) => theme.text2};
+  border-radius: 8px;
+`
+
+const ReferenceElement = styled.div`
+  display: inline-block;
+`
+
+const Arrow = styled.div`
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  z-index: 9998;
+
+  ::before {
+    position: absolute;
+    width: 8px;
+    height: 8px;
+    z-index: 9998;
+
+    content: '';
+    border: 1px solid ${({ theme }) => theme.bg3};
+    transform: rotate(45deg);
+    background: ${({ theme }) => theme.bg2};
+  }
+
+  &.arrow-top {
+    bottom: -5px;
+    ::before {
+      border-top: none;
+      border-left: none;
+    }
+  }
+
+  &.arrow-bottom {
+    top: -5px;
+    ::before {
+      border-bottom: none;
+      border-right: none;
+    }
+  }
+
+  &.arrow-left {
+    right: -4px;
+
+    ::before {
+      border-bottom: none;
+      border-left: none;
+    }
+  }
+
+  &.arrow-right {
+    left: -4px;
+    ::before {
+      border-right: none;
+      border-top: none;
+    }
+  }
+`
+
+export interface PopoverProps {
+  content: React.ReactNode
+  showPopup: boolean
+  children: React.ReactNode
+}
+
+export default function Popover({ content, showPopup, children }: PopoverProps) {
+  const [referenceElement, setReferenceElement] = useState<HTMLDivElement>(null)
+  const [popperElement, setPopperElement] = useState<HTMLDivElement>(null)
+  const [arrowElement, setArrowElement] = useState<HTMLDivElement>(null)
+  const { styles, attributes } = usePopper(referenceElement, popperElement, {
+    placement: 'auto',
+    strategy: 'fixed',
+    modifiers: [
+      { name: 'offset', options: { offset: [8, 8] } },
+      { name: 'arrow', options: { element: arrowElement } }
+    ]
+  })
+
+  const portal = createPortal(
+    <PopoverContainer show={showPopup} ref={setPopperElement} style={styles.popper} {...attributes.popper}>
+      {content}
+      <Arrow
+        className={`arrow-${attributes.popper?.['data-popper-placement'] ?? ''}`}
+        ref={setArrowElement}
+        style={styles.arrow}
+        {...attributes.arrow}
+      />
+    </PopoverContainer>,
+    document.getElementById('popover-container')
+  )
+
+  return (
+    <>
+      <ReferenceElement ref={setReferenceElement}>{children}</ReferenceElement>
+      {portal}
+    </>
+  )
+}

src/components/Question/index.tsx

-import React, { useState } from 'react'
-import { createPortal } from 'react-dom'
-import styled, { keyframes } from 'styled-components'
-import { HelpCircle as Question } from 'react-feather'
-import { usePopper } from 'react-popper'
-
-const Wrapper = styled.div`
-  position: relative;
-`
-
-const QuestionWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-left: 0.4rem;
-  padding: 0.2rem;
-  border: none;
-  background: none;
-  outline: none;
-  cursor: default;
-  border-radius: 36px;
-  background-color: ${({ theme }) => theme.bg2};
-  color: ${({ theme }) => theme.text2};
-
-  :hover,
-  :focus {
-    opacity: 0.7;
-  }
-`
-const fadeIn = keyframes`
-  from {
-    opacity : 0;
-  }
-
-  to {
-    opacity : 1;
-  }
-`
-
-const Popup = styled.div`
-  width: 228px;
-  z-index: 9999;
-  padding: 0.6rem 1rem;
-  line-height: 150%;
-  background: ${({ theme }) => theme.bg1};
-  border: 1px solid ${({ theme }) => theme.bg3};
-
-  border-radius: 8px;
-
-  animation: ${fadeIn} 0.15s linear;
-
-  color: ${({ theme }) => theme.text2};
-  font-weight: 400;
-`
-
-export default function QuestionHelper({ text }: { text: string }) {
-  const [showPopup, setShowPopup] = useState<boolean>(false)
-  const [referenceElement, setReferenceElement] = useState(null)
-  const [popperElement, setPopperElement] = useState(null)
-  const { styles, attributes } = usePopper(referenceElement, popperElement, {
-    placement: 'auto',
-    strategy: 'fixed',
-    modifiers: [
-      {
-        name: 'offset',
-        options: {
-          offset: [6, 6]
-        }
-      }
-    ]
-  })
-
-  const portal = createPortal(
-    showPopup && (
-      <Popup ref={setPopperElement} style={styles.popper} {...attributes.popper}>
-        {text}
-      </Popup>
-    ),
-    document.getElementById('popover-container')
-  )
-
-  return (
-    <Wrapper>
-      <QuestionWrapper
-        onClick={() => {
-          setShowPopup(true)
-        }}
-        onMouseEnter={() => {
-          setShowPopup(true)
-        }}
-        onMouseLeave={() => {
-          setShowPopup(false)
-        }}
-        ref={setReferenceElement}
-      >
-        <Question size={16} />
-      </QuestionWrapper>
-      {portal}
-    </Wrapper>
-  )
-}

src/components/QuestionHelper/index.tsx

+import React, { useState } from 'react'
+import { HelpCircle as Question } from 'react-feather'
+import styled from 'styled-components'
+import Tooltip from '../Tooltip'
+
+const QuestionWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.2rem;
+  border: none;
+  background: none;
+  outline: none;
+  cursor: default;
+  border-radius: 36px;
+  background-color: ${({ theme }) => theme.bg2};
+  color: ${({ theme }) => theme.text2};
+
+  :hover,
+  :focus {
+    opacity: 0.7;
+  }
+`
+
+export default function QuestionHelper({ text }: { text: string }) {
+  const [showPopup, setShowPopup] = useState<boolean>(false)
+
+  return (
+    <span style={{ marginLeft: 4 }}>
+      <Tooltip text={text} showPopup={showPopup}>
+        <QuestionWrapper
+          onClick={() => {
+            setShowPopup(true)
+          }}
+          onMouseEnter={() => {
+            setShowPopup(true)
+          }}
+          onMouseLeave={() => {
+            setShowPopup(false)
+          }}
+        >
+          <Question size={16} />
+        </QuestionWrapper>
+      </Tooltip>
+    </span>
+  )
+}

src/components/SearchModal/CommonBases.tsx

+import React from 'react'
+import { Text } from 'rebass'
+import { COMMON_BASES } from '../../constants'
+import { AutoColumn } from '../Column'
+import QuestionHelper from '../QuestionHelper'
+import { AutoRow } from '../Row'
+import TokenLogo from '../TokenLogo'
+import { BaseWrapper } from './styleds'
+
+export default function CommonBases({
+  chainId,
+  onSelect,
+  selectedTokenAddress
+}: {
+  chainId: number
+  selectedTokenAddress: string
+  onSelect: (tokenAddress: string) => void
+}) {
+  return (
+    <AutoColumn gap="md">
+      <AutoRow>
+        <Text fontWeight={500} fontSize={16}>
+          Common Bases
+        </Text>
+        <QuestionHelper text="These tokens are commonly used in pairs." />
+      </AutoRow>
+      <AutoRow gap="10px">
+        {COMMON_BASES[chainId]?.map(token => {
+          return (
+            <BaseWrapper
+              gap="6px"
+              onClick={() => selectedTokenAddress !== token.address && onSelect(token.address)}
+              disable={selectedTokenAddress === token.address}
+              key={token.address}
+            >
+              <TokenLogo address={token.address} />
+              <Text fontWeight={500} fontSize={16}>
+                {token.symbol}
+              </Text>
+            </BaseWrapper>
+          )
+        })}
+      </AutoRow>
+    </AutoColumn>
+  )
+}

src/components/SearchModal/PairList.tsx

+import { JSBI, Pair, TokenAmount } from '@uniswap/sdk'
+import React from 'react'
+import { FixedSizeList } from 'react-window'
+import { Text } from 'rebass'
+import { ButtonPrimary } from '../Button'
+import DoubleTokenLogo from '../DoubleLogo'
+import { RowFixed } from '../Row'
+import { MenuItem, ModalInfo } from './styleds'
+
+export default function PairList({
+  pairs,
+  focusTokenAddress,
+  pairBalances,
+  onSelectPair,
+  onAddLiquidity = onSelectPair
+}: {
+  pairs: Pair[]
+  focusTokenAddress?: string
+  pairBalances: { [pairAddress: string]: TokenAmount }
+  onSelectPair: (pair: Pair) => void
+  onAddLiquidity: (pair: Pair) => void
+}) {
+  if (pairs.length === 0) {
+    return <ModalInfo>No Pools Found</ModalInfo>
+  }
+
+  return (
+    <FixedSizeList itemSize={54} height={500} itemCount={pairs.length} width="100%" style={{ flex: '1' }}>
+      {({ index, style }) => {
+        const pair = pairs[index]
+
+        // the focused token is shown first
+        const tokenA = focusTokenAddress === pair.token1.address ? pair.token1 : pair.token0
+        const tokenB = tokenA === pair.token0 ? pair.token1 : pair.token0
+
+        const pairAddress = pair.liquidityToken.address
+        const balance = pairBalances[pairAddress]?.toSignificant(6)
+        const zeroBalance = pairBalances[pairAddress]?.raw && JSBI.equal(pairBalances[pairAddress].raw, JSBI.BigInt(0))
+
+        const selectPair = () => onSelectPair(pair)
+        const addLiquidity = () => onAddLiquidity(pair)
+
+        return (
+          <MenuItem style={style} onClick={selectPair}>
+            <RowFixed>
+              <DoubleTokenLogo a0={tokenA.address} a1={tokenB.address} size={24} margin={true} />
+              <Text fontWeight={500} fontSize={16}>{`${tokenA.symbol}/${tokenB.symbol}`}</Text>
+            </RowFixed>
+
+            <ButtonPrimary padding={'6px 8px'} width={'fit-content'} borderRadius={'12px'} onClick={addLiquidity}>
+              {balance ? (zeroBalance ? 'Join' : 'Add Liquidity') : 'Join'}
+            </ButtonPrimary>
+          </MenuItem>
+        )
+      }}
+    </FixedSizeList>
+  )
+}

src/components/SearchModal/TokenSortButton.tsx → src/components/SearchModal/SortButton.tsx

 import React from 'react'
 import { Text } from 'rebass'
-import { FilterWrapper } from './styleds'
+import styled from 'styled-components'
+import { RowFixed } from '../Row'
 
-export function TokenSortButton({
+export const FilterWrapper = styled(RowFixed)`
+  padding: 8px;
+  background-color: ${({ selected, theme }) => selected && theme.bg2};
+  color: ${({ selected, theme }) => (selected ? theme.text1 : theme.text2)};
+  border-radius: 8px;
+  user-select: none;
+  & > * {
+    user-select: none;
+  }
+  :hover {
+    cursor: pointer;
+  }
+`
+
+export default function SortButton({
   title,
   toggleSortOrder,
-  invertSearchOrder
+  ascending
 }: {
   title: string
   toggleSortOrder: () => void
-  invertSearchOrder: boolean
+  ascending: boolean
 }) {
   return (
     <FilterWrapper onClick={toggleSortOrder}>
@@ -17,7 +32,7 @@ export function TokenSortButton({
         {title}
       </Text>
       <Text fontSize={14} fontWeight={500}>
-        {!invertSearchOrder ? '↓' : '↑'}
+        {ascending ? '↑' : '↓'}
       </Text>
     </FilterWrapper>
   )

src/components/SearchModal/TokenList.tsx

+import { ChainId, JSBI, Token, TokenAmount } from '@uniswap/sdk'
+import React, { useContext } from 'react'
+import { useTranslation } from 'react-i18next'
+import { FixedSizeList } from 'react-window'
+import { Text } from 'rebass'
+import { ThemeContext } from 'styled-components'
+import Circle from '../../assets/images/circle.svg'
+import { ALL_TOKENS } from '../../constants/tokens'
+import { useActiveWeb3React } from '../../hooks'
+import { Link as StyledLink, TYPE } from '../../theme'
+import { isAddress } from '../../utils'
+import { ButtonSecondary } from '../Button'
+import Column, { AutoColumn } from '../Column'
+import { RowFixed } from '../Row'
+import TokenLogo from '../TokenLogo'
+import { FadedSpan, GreySpan, MenuItem, SpinnerWrapper, ModalInfo } from './styleds'
+
+function isDefaultToken(tokenAddress: string, chainId?: number): boolean {
+  const address = isAddress(tokenAddress)
+  return Boolean(chainId && address && ALL_TOKENS[chainId as ChainId]?.[tokenAddress])
+}
+
+export default function TokenList({
+  tokens,
+  allTokenBalances,
+  selectedToken,
+  onTokenSelect,
+  otherToken,
+  showSendWithSwap,
+  onRemoveAddedToken,
+  otherSelectedText
+}: {
+  tokens: Token[]
+  selectedToken: string
+  allTokenBalances: { [tokenAddress: string]: TokenAmount }
+  onTokenSelect: (tokenAddress: string) => void
+  onRemoveAddedToken: (chainId: number, tokenAddress: string) => void
+  otherToken: string
+  showSendWithSwap?: boolean
+  otherSelectedText: string
+}) {
+  const { t } = useTranslation()
+  const { account, chainId } = useActiveWeb3React()
+  const theme = useContext(ThemeContext)
+
+  if (tokens.length === 0) {
+    return <ModalInfo>{t('noToken')}</ModalInfo>
+  }
+  return (
+    <FixedSizeList width="100%" height={500} itemCount={tokens.length} itemSize={50} style={{ flex: '1' }}>
+      {({ index, style }) => {
+        const { address, symbol } = tokens[index]
+
+        const customAdded = !isDefaultToken(address, chainId)
+        const balance = allTokenBalances[address]
+
+        const zeroBalance = balance && JSBI.equal(JSBI.BigInt(0), balance.raw)
+
+        return (
+          <MenuItem
+            style={style}
+            key={address}
+            className={`token-item-${address}`}
+            onClick={() => (selectedToken && selectedToken === address ? null : onTokenSelect(address))}
+            disabled={selectedToken && selectedToken === address}
+            selected={otherToken === address}
+          >
+            <RowFixed>
+              <TokenLogo address={address} size={'24px'} style={{ marginRight: '14px' }} />
+              <Column>
+                <Text fontWeight={500}>
+                  {symbol}
+                  {otherToken === address && <GreySpan> ({otherSelectedText})</GreySpan>}
+                </Text>
+                <FadedSpan>
+                  <TYPE.main fontWeight={500}>{customAdded && 'Added by user'}</TYPE.main>
+                  {customAdded && (
+                    <div
+                      onClick={event => {
+                        event.stopPropagation()
+                        onRemoveAddedToken(chainId, address)
+                      }}
+                    >
+                      <StyledLink style={{ marginLeft: '4px', fontWeight: 400 }}>(Remove)</StyledLink>
+                    </div>
+                  )}
+                </FadedSpan>
+              </Column>
+            </RowFixed>
+            <AutoColumn gap="4px" justify="end">
+              {balance ? (
+                <Text>
+                  {zeroBalance && showSendWithSwap ? (
+                    <ButtonSecondary padding={'4px 8px'}>
+                      <Text textAlign="center" fontWeight={500} fontSize={14} color={theme.primary1}>
+                        Send With Swap
+                      </Text>
+                    </ButtonSecondary>
+                  ) : balance ? (
+                    balance.toSignificant(6)
+                  ) : (
+                    '-'
+                  )}
+                </Text>
+              ) : account ? (
+                <SpinnerWrapper src={Circle} alt="loader" />
+              ) : (
+                '-'
+              )}
+            </AutoColumn>
+          </MenuItem>
+        )
+      }}
+    </FixedSizeList>
+  )
+}

src/components/SearchModal/filtering.ts

+import { isAddress } from '../../utils'
+import { Pair, Token } from '@uniswap/sdk'
+
+export function filterTokens(tokens: Token[], search: string): Token[] {
+  if (search.length === 0) return tokens
+
+  const searchingAddress = isAddress(search)
+
+  if (searchingAddress) {
+    return tokens.filter(token => token.address === searchingAddress)
+  }
+
+  const lowerSearchParts = searchingAddress ? [] : search.toLowerCase().split(/\s+/)
+
+  const matchesSearch = (s: string): boolean => {
+    const sParts = s.toLowerCase().split(/\s+/)
+
+    return lowerSearchParts.every(p => p.length === 0 || sParts.some(sp => sp.startsWith(p)))
+  }
+
+  return tokens.filter(token => {
+    const { symbol, name } = token
+
+    return matchesSearch(symbol) || matchesSearch(name)
+  })
+}
+
+export function filterPairs(pairs: Pair[], search: string): Pair[] {
+  if (search.trim().length === 0) return pairs
+
+  const addressSearch = isAddress(search)
+  if (addressSearch) {
+    return pairs.filter(p => {
+      return (
+        p.token0.address === addressSearch ||
+        p.token1.address === addressSearch ||
+        p.liquidityToken.address === addressSearch
+      )
+    })
+  }
+
+  const lowerSearch = search.toLowerCase()
+  return pairs.filter(pair => {
+    const pairExpressionA = `${pair.token0.symbol}/${pair.token1.symbol}`.toLowerCase()
+    if (pairExpressionA.startsWith(lowerSearch)) return true
+    const pairExpressionB = `${pair.token1.symbol}/${pair.token0.symbol}`.toLowerCase()
+    if (pairExpressionB.startsWith(lowerSearch)) return true
+    return filterTokens([pair.token0, pair.token1], search).length > 0
+  })
+}

src/components/SearchModal/sorting.ts

@@ -3,10 +3,21 @@ import { useMemo } from 'react'
 import { useActiveWeb3React } from '../../hooks'
 import { useAllTokenBalancesTreatingWETHasETH } from '../../state/wallet/hooks'
 
+// compare two token amounts with highest one coming first
+export function balanceComparator(balanceA?: TokenAmount, balanceB?: TokenAmount) {
+  if (balanceA && balanceB) {
+    return balanceA.greaterThan(balanceB) ? -1 : balanceA.equalTo(balanceB) ? 0 : 1
+  } else if (balanceA && balanceA.greaterThan('0')) {
+    return -1
+  } else if (balanceB && balanceB.greaterThan('0')) {
+    return 1
+  }
+  return 0
+}
+
 function getTokenComparator(
   weth: Token | undefined,
-  balances: { [tokenAddress: string]: TokenAmount },
-  invertSearchOrder: boolean
+  balances: { [tokenAddress: string]: TokenAmount }
 ): (tokenA: Token, tokenB: Token) => number {
   return function sortTokens(tokenA: Token, tokenB: Token): number {
     // -1 = a is first
@@ -22,11 +33,8 @@ function getTokenComparator(
     const balanceA = balances[tokenA.address]
     const balanceB = balances[tokenB.address]
 
-    if (balanceA?.greaterThan('0') && !balanceB?.greaterThan('0')) return !invertSearchOrder ? -1 : 1
-    if (!balanceA?.greaterThan('0') && balanceB?.greaterThan('0')) return !invertSearchOrder ? 1 : -1
-    if (balanceA?.greaterThan('0') && balanceB?.greaterThan('0')) {
-      return balanceA.greaterThan(balanceB) ? (!invertSearchOrder ? -1 : 1) : !invertSearchOrder ? 1 : -1
-    }
+    const balanceComp = balanceComparator(balanceA, balanceB)
+    if (balanceComp !== 0) return balanceComp
 
     // sort by symbol
     return tokenA.symbol.toLowerCase() < tokenB.symbol.toLowerCase() ? -1 : 1
@@ -37,5 +45,12 @@ export function useTokenComparator(inverted: boolean): (tokenA: Token, tokenB: T
   const { account, chainId } = useActiveWeb3React()
   const weth = WETH[chainId]
   const balances = useAllTokenBalancesTreatingWETHasETH()
-  return useMemo(() => getTokenComparator(weth, balances[account] ?? {}, inverted), [account, balances, inverted, weth])
+  const comparator = useMemo(() => getTokenComparator(weth, balances[account] ?? {}), [account, balances, weth])
+  return useMemo(() => {
+    if (inverted) {
+      return (tokenA: Token, tokenB: Token) => comparator(tokenA, tokenB) * -1
+    } else {
+      return comparator
+    }
+  }, [inverted, comparator])
 }

src/components/SearchModal/styleds.tsx

@@ -3,7 +3,7 @@ import { Spinner } from '../../theme'
 import { AutoColumn } from '../Column'
 import { AutoRow, RowBetween, RowFixed } from '../Row'
 
-export const TokenModalInfo = styled.div`
+export const ModalInfo = styled.div`
   ${({ theme }) => theme.flexRowNoWrap}
   align-items: center;
   padding: 1rem 1rem;
@@ -13,13 +13,6 @@ export const TokenModalInfo = styled.div`
   min-height: 200px;
 `
 
-export const ItemList = styled.div`
-  flex-grow: 1;
-  height: 254px;
-  overflow-y: scroll;
-  -webkit-overflow-scrolling: touch;
-`
-
 export const FadedSpan = styled(RowFixed)`
   color: ${({ theme }) => theme.primary1};
   font-size: 14px;
@@ -59,20 +52,6 @@ export const Input = styled.input`
   }
 `
 
-export const FilterWrapper = styled(RowFixed)`
-  padding: 8px;
-  background-color: ${({ selected, theme }) => selected && theme.bg2};
-  color: ${({ selected, theme }) => (selected ? theme.text1 : theme.text2)};
-  border-radius: 8px;
-  user-select: none;
-  & > * {
-    user-select: none;
-  }
-  :hover {
-    cursor: pointer;
-  }
-`
-
 export const PaddedColumn = styled(AutoColumn)`
   padding: 20px;
   padding-bottom: 12px;
@@ -106,3 +85,11 @@ export const BaseWrapper = styled(AutoRow)<{ disable?: boolean }>`
   background-color: ${({ theme, disable }) => disable && theme.bg3};
   opacity: ${({ disable }) => disable && '0.4'};
 `
+
+export const SearchInput = styled(Input)`
+  transition: border 100ms;
+  :focus {
+    border: 1px solid ${({ theme }) => theme.primary1};
+    outline: none;
+  }
+`

src/components/SlippageTabs/index.tsx

 import React, { useState, useEffect, useRef, useCallback, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 
-import QuestionHelper from '../Question'
+import QuestionHelper from '../QuestionHelper'
 import { Text } from 'rebass'
 import { TYPE } from '../../theme'
 import { AutoColumn } from '../Column'

src/components/TokenWarningCard/index.tsx

@@ -11,7 +11,7 @@ import { useTokenWarningDismissal } from '../../state/user/hooks'
 import { Link, TYPE } from '../../theme'
 import { getEtherscanLink } from '../../utils'
 import PropsOfExcluding from '../../utils/props-of-excluding'
-import QuestionHelper from '../Question'
+import QuestionHelper from '../QuestionHelper'
 import TokenLogo from '../TokenLogo'
 
 const Wrapper = styled.div<{ error: boolean }>`

src/components/Tooltip/index.tsx

+import React from 'react'
+import styled from 'styled-components'
+import Popover, { PopoverProps } from '../Popover'
+
+const TooltipContainer = styled.div`
+  width: 228px;
+  padding: 0.6rem 1rem;
+  line-height: 150%;
+  font-weight: 400;
+`
+
+interface TooltipProps extends Omit<PopoverProps, 'content'> {
+  text: string
+}
+
+export default function Tooltip({ text, ...rest }: TooltipProps) {
+  return <Popover content={<TooltipContainer>{text}</TooltipContainer>} {...rest} />
+}

src/components/swap/AdvancedSwapDetails.tsx

@@ -8,7 +8,7 @@ import { CursorPointer, TYPE } from '../../theme'
 import { computeSlippageAdjustedAmounts, computeTradePriceBreakdown } from '../../utils/prices'
 import { AutoColumn } from '../Column'
 import { SectionBreak } from './styleds'
-import QuestionHelper from '../Question'
+import QuestionHelper from '../QuestionHelper'
 import { RowBetween, RowFixed } from '../Row'
 import SlippageTabs, { SlippageTabsProps } from '../SlippageTabs'
 import FormattedPriceImpact from './FormattedPriceImpact'

src/components/swap/SwapModalFooter.tsx

@@ -8,7 +8,7 @@ import { TYPE } from '../../theme'
 import { formatExecutionPrice } from '../../utils/prices'
 import { ButtonError } from '../Button'
 import { AutoColumn } from '../Column'
-import QuestionHelper from '../Question'
+import QuestionHelper from '../QuestionHelper'
 import { AutoRow, RowBetween, RowFixed } from '../Row'
 import FormattedPriceImpact from './FormattedPriceImpact'
 import { StyledBalanceMaxMini } from './styleds'

src/pages/Pool/index.tsx

@@ -3,7 +3,7 @@ import styled, { ThemeContext } from 'styled-components'
 import { JSBI, Pair } from '@uniswap/sdk'
 import { RouteComponentProps } from 'react-router-dom'
 
-import Question from '../../components/Question'
+import Question from '../../components/QuestionHelper'
 import SearchModal from '../../components/SearchModal'
 import PositionCard from '../../components/PositionCard'
 import { useTokenBalances } from '../../state/wallet/hooks'

src/pages/Send/index.tsx

@@ -11,7 +11,7 @@ import Card, { BlueCard, GreyCard } from '../../components/Card'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
 import ConfirmationModal from '../../components/ConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
-import QuestionHelper from '../../components/Question'
+import QuestionHelper from '../../components/QuestionHelper'
 import { AutoRow, RowBetween, RowFixed } from '../../components/Row'
 import AdvancedSwapDetailsDropdown from '../../components/swap/AdvancedSwapDetailsDropdown'
 import confirmPriceImpactWithoutFee from '../../components/swap/confirmPriceImpactWithoutFee'

src/pages/Swap/index.tsx

@@ -10,7 +10,7 @@ import Card, { GreyCard } from '../../components/Card'
 import { AutoColumn } from '../../components/Column'
 import ConfirmationModal from '../../components/ConfirmationModal'
 import CurrencyInputPanel from '../../components/CurrencyInputPanel'
-import QuestionHelper from '../../components/Question'
+import QuestionHelper from '../../components/QuestionHelper'
 import { RowBetween, RowFixed } from '../../components/Row'
 import AdvancedSwapDetailsDropdown from '../../components/swap/AdvancedSwapDetailsDropdown'
 import confirmPriceImpactWithoutFee from '../../components/swap/confirmPriceImpactWithoutFee'

src/state/user/hooks.tsx

@@ -3,7 +3,7 @@ import { useActiveWeb3React } from '../../hooks'
 import { useCallback, useMemo } from 'react'
 import { shallowEqual, useDispatch, useSelector } from 'react-redux'
 import { useAllTokens } from '../../hooks/Tokens'
-import { getTokenDecimals, getTokenName, getTokenSymbol, isAddress } from '../../utils'
+import { getTokenInfoWithFallback, isAddress } from '../../utils'
 import { AppDispatch, AppState } from '../index'
 import {
   addSerializedPair,
@@ -69,11 +69,7 @@ export function useFetchTokenByAddress(): (address: string) => Promise<Token | n
       if (!library || !chainId) return null
       const validatedAddress = isAddress(address)
       if (!validatedAddress) return null
-      const [decimals, symbol, name] = await Promise.all([
-        getTokenDecimals(address, library).catch(() => null),
-        getTokenSymbol(address, library).catch(() => 'UNKNOWN'),
-        getTokenName(address, library).catch(() => 'Unknown')
-      ])
+      const { name, symbol, decimals } = await getTokenInfoWithFallback(validatedAddress, library)
 
       if (decimals === null) {
         return null

src/theme/components.tsx

@@ -60,15 +60,11 @@ const StyledLink = styled.a`
 
 export function Link({
   onClick,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  as,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ref,
   target = '_blank',
   href,
   rel = 'noopener noreferrer',
   ...rest
-}: HTMLProps<HTMLAnchorElement>) {
+}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref'>) {
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement>) => {
       onClick && onClick(event) // first call back into the original onClick

src/utils/index.ts

@@ -102,42 +102,49 @@ export function getExchangeContract(pairAddress: string, library: Web3Provider,
   return getContract(pairAddress, IUniswapV2PairABI, library, account)
 }
 
-// get token name
-export async function getTokenName(tokenAddress: string, library: Web3Provider) {
+// get token info and fall back to unknown if not available, except for the
+// decimals which falls back to null
+export async function getTokenInfoWithFallback(
+  tokenAddress: string,
+  library: Web3Provider
+): Promise<{ name: string; symbol: string; decimals: null | number }> {
   if (!isAddress(tokenAddress)) {
     throw Error(`Invalid 'tokenAddress' parameter '${tokenAddress}'.`)
   }
 
-  return getContract(tokenAddress, ERC20_ABI, library)
-    .name()
-    .catch(() =>
+  const token = getContract(tokenAddress, ERC20_ABI, library)
+
+  const namePromise: Promise<string> = token.name().catch(() =>
     getContract(tokenAddress, ERC20_BYTES32_ABI, library)
       .name()
       .then(parseBytes32String)
+      .catch((e: Error) => {
+        console.debug('Failed to get name for token address', e, tokenAddress)
+        return 'Unknown'
+      })
   )
-}
 
-// get token symbol
-export async function getTokenSymbol(tokenAddress: string, library: Web3Provider) {
-  if (!isAddress(tokenAddress)) {
-    throw Error(`Invalid 'tokenAddress' parameter '${tokenAddress}'.`)
-  }
-
-  return getContract(tokenAddress, ERC20_ABI, library)
-    .symbol()
-    .catch(() => {
+  const symbolPromise: Promise<string> = token.symbol().catch(() => {
     const contractBytes32 = getContract(tokenAddress, ERC20_BYTES32_ABI, library)
-      return contractBytes32.symbol().then(parseBytes32String)
+    return contractBytes32
+      .symbol()
+      .then(parseBytes32String)
+      .catch((e: Error) => {
+        console.debug('Failed to get symbol for token address', e, tokenAddress)
+        return 'UNKNOWN'
+      })
+  })
+  const decimalsPromise: Promise<number | null> = token.decimals().catch((e: Error) => {
+    console.debug('Failed to get decimals for token address', e, tokenAddress)
+    return null
   })
-}
-
-// get token decimals
-export async function getTokenDecimals(tokenAddress: string, library: Web3Provider) {
-  if (!isAddress(tokenAddress)) {
-    throw Error(`Invalid 'tokenAddress' parameter '${tokenAddress}'.`)
-  }
 
-  return getContract(tokenAddress, ERC20_ABI, library).decimals()
+  const [name, symbol, decimals]: [string, string, number | null] = (await Promise.all([
+    namePromise,
+    symbolPromise,
+    decimalsPromise
+  ])) as [string, string, number | null]
+  return { name, symbol, decimals }
 }
 
 export function escapeRegExp(string: string): string {

yarn.lock

@@ -2385,11 +2385,6 @@
     penpal "3.0.7"
     pocket-js-core "0.0.3"
 
-"@reach/auto-id@0.2.0":
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.2.0.tgz#97f9e48fe736aa5c6f4f32cf73c1f19d005f8550"
-  integrity sha512-lVK/svL2HuQdp7jgvlrLkFsUx50Az9chAhxpiPwBqcS83I2pVWvXp98FOcSCCJCV++l115QmzHhFd+ycw1zLBg==
-
 "@reach/component-component@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5"
@@ -2406,11 +2401,6 @@
     react-focus-lock "^1.17.7"
     react-remove-scroll "^1.0.2"
 
-"@reach/observe-rect@^1.0.3":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@reach/observe-rect/-/observe-rect-1.1.0.tgz#4e967a93852b6004c3895d9ed8d4e5b41895afde"
-  integrity sha512-kE+jvoj/OyJV24C03VvLt5zclb9ArJi04wWXMMFwQvdZjdHoBlN4g0ZQFjyy/ejPF1Z/dpUD5dhRdBiUmIGZTA==
-
 "@reach/portal@^0.2.1":
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/@reach/portal/-/portal-0.2.1.tgz#07720b999e0063a9e179c14dbdc60fd991cfc9fa"
@@ -2418,36 +2408,11 @@
   dependencies:
     "@reach/component-component" "^0.1.3"
 
-"@reach/rect@^0.2.1":
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/@reach/rect/-/rect-0.2.1.tgz#7343020174c90e2290b844d17c03fd9c78e6b601"
-  integrity sha512-aZ9RsNHDMQ3zETonikqu9/85iXxj+LPqZ9Gr9UAncj3AufYmGeWG3XG6b37B+7ORH+mkhVpLU2ZlIWxmOe9Cqg==
-  dependencies:
-    "@reach/component-component" "^0.1.3"
-    "@reach/observe-rect" "^1.0.3"
-
-"@reach/tooltip@^0.2.0":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@reach/tooltip/-/tooltip-0.2.2.tgz#a861ce38269b586597ab40417323b33d3d6dc927"
-  integrity sha512-afcfqH6EzDHmwTB6g1k0dSbkyT0s9KPIi5bX56nNuldsCIasImFFYDjRZLhFcuxjskwIsHAi06yC3GV6mtcRxw==
-  dependencies:
-    "@reach/auto-id" "0.2.0"
-    "@reach/portal" "^0.2.1"
-    "@reach/rect" "^0.2.1"
-    "@reach/utils" "^0.2.3"
-    "@reach/visually-hidden" "^0.1.4"
-    prop-types "^15.7.2"
-
 "@reach/utils@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.2.3.tgz#820f6a6af4301b4c5065cfc04bb89e6a3d1d723f"
   integrity sha512-zM9rA8jDchr05giMhL95dPeYkK67cBQnIhCVrOKKqgWGsv+2GE/HZqeptvU4zqs0BvIqsThwov+YxVNVh5csTQ==
 
-"@reach/visually-hidden@^0.1.4":
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz#0dc4ecedf523004337214187db70a46183bd945b"
-  integrity sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ==
-
 "@reduxjs/toolkit@^1.3.5":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.3.5.tgz#37c1ab6de9aa66f95bab25a8e9bd9d8ec3b7b80c"
@@ -2950,6 +2915,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-window@^1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.2.tgz#a5a6b2762ce73ffaab7911ee1397cf645f2459fe"
+  integrity sha512-gP1xam68Wc4ZTAee++zx6pTdDAH08rAkQrWm4B4F/y6hhmlT9Mgx2q8lTCXnrPHXsr15XjRN9+K2DLKcz44qEQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^16.9.34":
   version "16.9.34"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349"
@@ -11887,7 +11859,7 @@ memdown@~3.0.0:
     ltgt "~2.2.0"
     safe-buffer "~5.1.1"
 
-memoize-one@^5.0.0:
+"memoize-one@>=3.1.1 <6", memoize-one@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
   integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
@@ -14684,6 +14656,14 @@ react-use-gesture@^6.0.14:
   resolved "https://registry.yarnpkg.com/react-use-gesture/-/react-use-gesture-6.0.14.tgz#ab2d35ef72a5fb6060a6160eb12568c276f8a4b1"
   integrity sha512-d9cnZJ0DOFd3FIO76J776DyhtbODgbxGKu19lvc1aSNTnRV5EKr9V4Uda188l2Qh0Va3pqWGxEQlw72r2cmnFQ==
 
+react-window@^1.8.5:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.8.5.tgz#a56b39307e79979721021f5d06a67742ecca52d1"
+  integrity sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==
+  dependencies:
+    "@babel/runtime" "^7.0.0"
+    memoize-one ">=3.1.1 <6"
+
 react@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"