memoize common bases (#853)

* memoize common bases

* improve memoization

README.md

@@ -50,3 +50,8 @@ The frontend will not work on other networks.
 
 **Please open all pull requests against the `v2` branch.** 
 CI checks will run against all PRs. 
+
+## Accessing Uniswap V1 interface
+
+The Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways linked 
+from the [v1.0.0 release](https://github.com/Uniswap/uniswap-frontend/releases/tag/v1.0.0).

package.json

@@ -13,7 +13,6 @@
     "@ethersproject/strings": "^5.0.0-beta.136",
     "@ethersproject/units": "^5.0.0-beta.132",
     "@ethersproject/wallet": "^5.0.0-beta.141",
-    "@material-ui/core": "^4.9.5",
     "@popperjs/core": "^2.4.0",
     "@reach/dialog": "^0.10.3",
     "@reach/portal": "^0.10.3",
@@ -38,7 +37,6 @@
     "@web3-react/core": "^6.0.9",
     "@web3-react/fortmatic-connector": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",
-    "@web3-react/network-connector": "^6.0.9",
     "@web3-react/portis-connector": "^6.0.9",
     "@web3-react/walletconnect-connector": "^6.0.9",
     "@web3-react/walletlink-connector": "^6.0.9",
@@ -50,7 +48,6 @@
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^4.0.0",
-    "history": "^4.9.0",
     "i18next": "^15.0.9",
     "i18next-browser-languagedetector": "^3.0.1",
     "i18next-xhr-backend": "^2.0.1",

src/assets/images/ethereum-logo.svg

@@ -1,9 +0,0 @@
-<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-<rect width="20" height="20" fill="url(#pattern0)"/>
-<defs>
-<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
-<use xlink:href="#image0" transform="scale(0.0078125)"/>
-</pattern>
-<image id="image0" width="128" height="128" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAAAXNSR0IArs4c6QAADd9JREFUeNrtXdtzE+cV38kweWpm+tI8JZP8EZ0pL+UhferkfyAzFqEpadq0hbRNUlsYQ2ycBEgCgQQIgVxMbC6BAHbEJZg7dW4OpeCWwDTNDOyuLFuybMsXfT2/tWVkWavd1e5K58g6M9+Q8cTS+ju//b5z/R1Nq0F5Ppr46cpm8xcroubyFU3m+oYmY39Do97d0KRfoH/76d/b9K9JP89Yy/pv62f9s/9PN34Hv4vPwGfhM7W68JNVUfWTp9fqv440Ge2RRqOXFHiPFKhCWfTZ+A58F74T313XQIUlGlUP0lv5RCRqtkQa9YukjMnQFO6w8N3WM9Cz4JnwbHUNhSQrovGlkSZ9K216vFoKdwGIOJ4Rz1rXWADyTDTxeCSqv0wbe5Or0kuA4SaeHX9DXZMepSFq/Jw28FBDo5GVpviFy8hafwv9TXXNOh3zzfov6Qjtka90u1NB78HfWNd0gUTWmr+yLPgaVfwCIMCToL+5/sZH44+Qa9W5WBRfxK3sxB4sRlduSSRqrKYjMbVolX//WkhhL7Ani+O4j+rL6Ai8ttgVX+RauIa9qfG3Xm+tDcs+RI+B9qjmToNVLfFHKWJ2vq5gt6eBfr5mbIPIWuNJK9lSV6zXZWLvJB/5D1AApK1+5PsOIrVhL8UlbMiy7agrMKArgfZSTKKpoc14iHLpMUkb/OZHQ6pxa5x5zID2lPaWefIm9TC5M32SlP/MOl0Zg1PqWG9aUY6fu6vY99yG1M94GnsticfozhqQdryeOJ9W09NZ9cU/Rq2TQIBdMIC9ZvfmS1T+39+Kq6mp7BwATl8dVX/caIoAAfaczZ0v7djPrYE7EwqSAwDW/u6UlMhhX9VtAlim0gy+3Np9KKlykg8ArPXvDApJJhmxqnkHlp8v1NV77hVDJUembQHQfSFtGYeCXMTKxwlmgjwy/erevlGVL4UAwHqna1hS+VlbFcK7MiN8698dVNls1hEAWC+8bsqJGFYqbIzEjtTY/oqorn64O6kKxQ4AB0+NIF8vJncA3YSf0hWc1YOFX0zsAIDVvichKosYaip5Jp8vU/l/ftVUY+NZzwCIXRpVz24wBOUN9NbQKnkkZ/a+vD6u7KQUALDeP5KUVlSyLISjX24Z16Z9Q6qUOAEA6+U344KuAuNaoFcBoWqNVOX/pllXOiV7/ALg6NkR9XRUVC3BmsBKtyVX70JxTuIGAFhvfDgkKDagpwIpKyPLskuq8l98I64mJ7OBAeD0lVH1fJshySvo8t2xI7mS5vr3GeVG3AIA6+MTKVF74KsDSXK7FkK5bsULALCatw9KMgh7y27UlKp8+O1DqenQAIAiEhiXYiKg5TSkSu7SxV3tRbwCAGt7p6Rkkd7jze2jXnapysfxDIWGDQCs1a+ZcvbGCz/BDDmDyEZLdefHCeVVygXAgZicZBF06rK+L/G41JDvh8eSqhwpFwBYbbsTYkLEruhqwGsjUfko5hwdm644AGKX0mrVehmxAejWTdh3QCIArvSPqXLFDwCwdh9OSrkGbjqFfZdKVP6rlLP3I34BgPXiFhnJopIUduC4k6b8ldTNc9ecrDoAjpwZsSqOBBjKW+0bOhmTMNqtw6dHlF8JAgBYSDsLuAbiRUvJQXUqTfl/3WyqiYksGwCcogDU71sNAdeA+UQR699skQaA7/6dUUFIUADAgivK3xswW4qlfS9KUv62/cMqKAkSAFjRbbyTRdD1/FJvoj2vJuu217WqxVCDw1NsAXD8XNoyThnbAZPzqO7BfS/p7f/8YloFKUEDAGtrB2+DEDrPj/23S1F+07a452RPNQBwhlrNUYrO+BRoF1n4ceuHiUCVjzax67cy6pOeVOAg6Pw8xdgOyCsUCXXMSoAL9flBSYbcR/QKwHWDsta+PahadyXU3qNJq54gKBBs2MnUICSdW8rHMCQJyod/PTI67VvxQ8lpdfGbsQVKBgByC/wAOw8Mqx6yNfwCAPbKb1t47qk1CAsTsSQA4MLXY74U/6M+qc5SW/gZG0XlAyC31lFxyVtkzKG03A8Idh7kWT0E3dP9bz7FXfk4msuVgTsZetud3+RiAMhfm/YlrDu9XBAgaskwIrgc+f8NrN0VSrDg7fUiE9QL8PUNut8vuz/CnQCQWxupAOSDz5IWoZQXACBnwa16CLrXZocqsgVAVyzlWvGgfbn07ZirN75cAMzZCUQ0sYuO9pgHO+G195lVD5HuWVf/riGGjvGMs89/15hUvV/a3+9hACC3mncMqm1kJxxzYSecujxq8ROxqhbmnAP45sZ4ScX/578ZdSYgl61cAOSvzWQnHIiVthP2HU3yygk0YF4uU/7eYjJJxI7f3oT/ng40aBMEAHKr/b2ElRW0sxMY8RL3a7NDk9nx95qJ+ckexACufDcWaJAmLADk1gayE3YfGlYnL80HKxteYtK9xpHwCdm0nNyLT6lzX83E1sNQfJgAmIsnUGBp+/4hdbz3PhCY8BKb2uz4dHb8vbf/NxG60isFgDmDkQJLW4hj4OCpFA9eYtI9OwAcOzcyF5+v5KoEAObZCXvIaPxgiAEAmF0BSKGCzq3WAfA3KiNn0GFssjQCc02ex3rTNQcAXHG/40I7N2sE9nMOA2+hYxIBFOkAQJ0g7nxm4WDLDbwggd17z6dJsQAA5zDLcTSke5wA3XL6AOIWf68UALxEJFVcawFmVze7ZJBT2hRH6Cs7E6rnAt9IICJ9bhpE/lBtxjErGcQsHbyRwqiXKaPnxL6BaCF6A05f5QOAKC14MU73fO5KA41dVesBmsz1aAlbzu1ogvWPmj3k0J1cJRhWHx1PVR0AuJ5WNjuWYltkk4hzcIgEWgUhHEvCYP3nqn+RE8Cb7vQ7OHaPfjFScQDArXvWBUEE3FqEuPFdqHHg4A1YJWFci0L/sokYP8bvF4HeuJ2xegKcBkKg6OLk5fABALfODWsorrL8knPQz3NpILWKQjmXhReSPaKBA/kBpw3EG7mLsnBhAQCFKk7E0Whfe/fAwmdYt2OQiwt4T0RjCEq4CyVNqWHc+06EDPC/u2KpwAAAo81pmhieCYwlsUsLvRSMqmPZGMK5NQxvkh6fsi31dlNnhzp/sHuWCwDYF25KuWAPgCnEjm5+JSN20XmtYdybQ3FsIkVsJ6gAdoofYPNhedsVlNi5dX9qd3brYAugAsiWZfwqvwlk85pDJbSHoya/lIAWHlY2TgynDiPU5TkBAEaoU4s3XFR0ATvFIl7fy6saeEF7uASCCLyFbujf0fq1y0Unzks0AubTvON6LnxLP3cCERbKvbpdRCM7GNLLLyCIkEIRg+M4lXbXH/g9VRS1OMwABqgQeUT/HlxMN6FZXDUHTrqLNyBczXHiWFGKGCkkUYikeWn9Rk8hgOMUVnbyKJDDf++wt4wko+pfZ5IoSTRxqA/wIpgXCHewHNoW+Pub93mvSeBKJ29LEyeJKBIWfbERsE4Cd9JLDB5eQDlVSchhcJ0wZksUKY0qFj53uRyB/yRGkFJzAJHR6yizLhGJHqcrhy1V7GxQ6KYUEMCd88MLhJxBfn0eijd2dA77yiqilV0sWbREuviv/jXuizgCXgVoYXLegB/lc+r7K5suXtrACIRo/XIGBsEShiCUU55AxMAIiSNjQNrghzpuMdDFux4ZI3Vo1Gdn01UDAJM+v9LLy9AoiWPjVkTL5xD0AwDkKLgPjvI8Nk7q4MgXCqqIwgYAcv4i6OHLGRwpdXSsl5GxfgHAprrHbeHHYhke7ZVTsBwAoORMwl74Gh49Wy/YKQ0ASOfei0+FBgBUH6+UMDuYdKf5FQodPkJGREoaCHA8T05lAwcAij/WCBgZC51Bd1oQEokaqyVeBU5VROUAgB3Xn23Uz1itBSWUPlxCxsQ1aQCwqohuZQIDwMcnUjL+btIVdKYFKRRHXiZxpjAyc2AQ9QsAq7pHxIhYIwtdaWEIfXCrxKsAJBN+AYD0s4yjX2/VwpKZq0A/LxEEpaqInADw9idCXD7STeBHf6Gsaok/ypFb0E8VUSkAHDrFt7qnkPAJutEqIZG1xpMS7QFUAWWKVBHZAQCnRtW5/Nze+6QTrZJC6cU2iVfB3iJVRHYAABOJDG/HaNMqLXTXPEC+ZodEEGBYlBMA9h5JSvH3O6ALrRqC8mLimYlJA0BhFVEhAPhX98xx/MRsS7wrJQ1txkMUeOiTBoK2vCqiQgCA7kVAsKcPe69xkGeiqYfJEBmQBgK0bBcCAJ1HAoy+Aey5xkkiLYnHpIEgV0WUA4CE6h7sMfZa4yhApbTrAH37YBxBdQ+neT52xz67N7+YTSDNMEQfH1i8uBt8bO58N96BVBeRsav3oCZJrDiBFSySFzFkFeGjPayanx9c2Fhe7oBDbL/i4d0wE0hSs4jVyupVLLFTwSthyUw9Qf1KcCjmaA09pVvVK4GqVSSWl1WijCu0Sh6OpwGhfY3EauMwqnexFzX91pcsOW/UuxbxXd8VWOm26GuBulcktqH5adfy3bFTkycCNTFK60r22qVbdqPmYhL0ss+QVNSCx2AFcw557s+vywxdzQxnkbxUs5W1o2d3TctSF0eDcSk47jiTWeLZ8IyOVGx18ZdoAtUp+G5BelxNlnN8t/UM9Cx4JnEJm5oIMxPtObjvMQDB8iTCHH9Dn21Z8PRd+M4FlOt14SEYhoSJWJFG8ylrLiINSIQFPkuJ3z87MNvE+HRrWf9t/ax/5lQhTwS/Q7+Lz8BnzQ1YqjH5P29N0rBVv2N5AAAAAElFTkSuQmCC"/>
-</defs>
-</svg>

src/components/AccountDetails/Copy.tsx

@@ -2,10 +2,10 @@ import React from 'react'
 import styled from 'styled-components'
 import useCopyClipboard from '../../hooks/useCopyClipboard'
 
-import { Link } from '../../theme'
+import { LinkStyledButton } from '../../theme'
 import { CheckCircle, Copy } from 'react-feather'
 
-const CopyIcon = styled(Link)`
+const CopyIcon = styled(LinkStyledButton)`
   color: ${({ theme }) => theme.text4};
   flex-shrink: 0;
   display: flex;

src/components/AccountDetails/Transaction.tsx

@@ -4,7 +4,7 @@ import { Check, Triangle } from 'react-feather'
 
 import { useActiveWeb3React } from '../../hooks'
 import { getEtherscanLink } from '../../utils'
-import { Link, Spinner } from '../../theme'
+import { ExternalLink, Spinner } from '../../theme'
 import Circle from '../../assets/images/circle.svg'
 
 import { transparentize } from 'polished'
@@ -18,7 +18,7 @@ const TransactionStatusText = styled.div`
   margin-right: 0.5rem;
 `
 
-const TransactionState = styled(Link)<{ pending: boolean; success?: boolean }>`
+const TransactionState = styled(ExternalLink)<{ pending: boolean; success?: boolean }>`
   display: flex;
   justify-content: space-between;
   text-decoration: none !important;

src/components/AccountDetails/index.tsx

@@ -21,7 +21,7 @@ import Identicon from '../Identicon'
 
 import { ButtonEmpty } from '../Button'
 
-import { Link, TYPE } from '../../theme'
+import { ExternalLink, LinkStyledButton, TYPE } from '../../theme'
 
 const HeaderRow = styled.div`
   ${({ theme }) => theme.flexRowNoWrap};
@@ -160,7 +160,7 @@ const ConnectButtonRow = styled.div`
   margin: 10px 0;
 `
 
-const StyledLink = styled(Link)<{ hasENS: boolean; isENS: boolean }>`
+const AddressLink = styled(ExternalLink)<{ hasENS: boolean; isENS: boolean }>`
   color: ${({ hasENS, isENS, theme }) => (hasENS ? (isENS ? theme.primary1 : theme.text3) : theme.primary1)};
 `
 
@@ -357,17 +357,21 @@ export default function AccountDetails({
                 {ENSName ? (
                   <>
                     <AccountControl hasENS={!!ENSName} isENS={false}>
-                      <StyledLink hasENS={!!ENSName} isENS={true} href={getEtherscanLink(chainId, ENSName, 'address')}>
+                      <AddressLink hasENS={!!ENSName} isENS={true} href={getEtherscanLink(chainId, ENSName, 'address')}>
                         View on Etherscan ↗
-                      </StyledLink>
+                      </AddressLink>
                     </AccountControl>
                   </>
                 ) : (
                   <>
                     <AccountControl hasENS={!!ENSName} isENS={false}>
-                      <StyledLink hasENS={!!ENSName} isENS={false} href={getEtherscanLink(chainId, account, 'address')}>
+                      <AddressLink
+                        hasENS={!!ENSName}
+                        isENS={false}
+                        href={getEtherscanLink(chainId, account, 'address')}
+                      >
                         View on Etherscan ↗
-                      </StyledLink>
+                      </AddressLink>
                     </AccountControl>
                   </>
                 )}
@@ -395,7 +399,7 @@ export default function AccountDetails({
         <LowerSection>
           <AutoRow style={{ justifyContent: 'space-between' }}>
             <TYPE.body>Recent Transactions</TYPE.body>
-            <Link onClick={clearAllTransactionsCallback}>(clear all)</Link>
+            <LinkStyledButton onClick={clearAllTransactionsCallback}>(clear all)</LinkStyledButton>
           </AutoRow>
           {renderTransactions(pendingTransactions)}
           {renderTransactions(confirmedTransactions)}

src/components/AddressInputPanel/index.tsx

@@ -4,7 +4,7 @@ import useDebounce from '../../hooks/useDebounce'
 
 import { isAddress } from '../../utils'
 import { useActiveWeb3React } from '../../hooks'
-import { Link, TYPE } from '../../theme'
+import { ExternalLink, TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'
 import { getEtherscanLink } from '../../utils'
@@ -160,12 +160,12 @@ export default function AddressInputPanel({
                 Recipient
               </TYPE.black>
               {data.address && (
-                <Link
+                <ExternalLink
                   href={getEtherscanLink(chainId, data.name || data.address, 'address')}
                   style={{ fontSize: '14px' }}
                 >
                   (View on Etherscan)
-                </Link>
+                </ExternalLink>
               )}
             </RowBetween>
             <Input

src/components/ConfirmationModal/index.tsx

@@ -1,10 +1,8 @@
-import React, { useCallback, useContext } from 'react'
+import React, { useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
-import { RouteComponentProps, withRouter } from 'react-router-dom'
-
 import Modal from '../Modal'
 import Loader from '../Loader'
-import { Link } from '../../theme'
+import { ExternalLink } from '../../theme'
 import { Text } from 'rebass'
 import { CloseIcon } from '../../theme/components'
 import { RowBetween } from '../Row'
@@ -32,7 +30,7 @@ const ConfirmedIcon = styled(ColumnCenter)`
   padding: 60px 0;
 `
 
-interface ConfirmationModalProps extends RouteComponentProps<{}> {
+interface ConfirmationModalProps {
   isOpen: boolean
   onDismiss: () => void
   hash: string
@@ -44,8 +42,7 @@ interface ConfirmationModalProps extends RouteComponentProps<{}> {
   title?: string
 }
 
-function ConfirmationModal({
-  history,
+export default function ConfirmationModal({
   isOpen,
   onDismiss,
   hash,
@@ -59,13 +56,6 @@ function ConfirmationModal({
   const { chainId } = useActiveWeb3React()
   const theme = useContext(ThemeContext)
 
-  const dismissAndReturn = useCallback(() => {
-    if (history.location.pathname.match('/add') || history.location.pathname.match('/remove')) {
-      history.push('/pool')
-    }
-    onDismiss()
-  }, [onDismiss, history])
-
   return (
     <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={90}>
       {!attemptingTxn ? (
@@ -106,12 +96,12 @@ function ConfirmationModal({
               </AutoColumn>
               {!pendingConfirmation && (
                 <>
-                  <Link href={getEtherscanLink(chainId, hash, 'transaction')}>
+                  <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>
                     <Text fontWeight={500} fontSize={14} color={theme.primary1}>
                       View on Etherscan
                     </Text>
-                  </Link>
-                  <ButtonPrimary onClick={dismissAndReturn} style={{ margin: '20px 0 0 0' }}>
+                  </ExternalLink>
+                  <ButtonPrimary onClick={onDismiss} style={{ margin: '20px 0 0 0' }}>
                     <Text fontWeight={500} fontSize={20}>
                       Close
                     </Text>
@@ -131,5 +121,3 @@ function ConfirmationModal({
     </Modal>
   )
 }
-
-export default withRouter(ConfirmationModal)

src/components/Header/index.tsx

@@ -8,7 +8,7 @@ import Row from '../Row'
 import Menu from '../Menu'
 import Web3Status from '../Web3Status'
 
-import { Link } from '../../theme'
+import { ExternalLink } from '../../theme'
 import { Text } from 'rebass'
 import { WETH, ChainId } from '@uniswap/sdk'
 import { isMobile } from 'react-device-detect'
@@ -159,13 +159,13 @@ export default function Header() {
     <HeaderFrame>
       <MigrateBanner>
         Uniswap V2 is live! Read the&nbsp;
-        <Link href="https://uniswap.org/blog/launch-uniswap-v2/">
+        <ExternalLink href="https://uniswap.org/blog/launch-uniswap-v2/">
           <b>blog post ↗</b>
-        </Link>
+        </ExternalLink>
         &nbsp;or&nbsp;
-        <Link href="https://migrate.uniswap.exchange/">
+        <ExternalLink href="https://migrate.uniswap.exchange/">
           <b>migrate your liquidity ↗</b>
-        </Link>
+        </ExternalLink>
         .
       </MigrateBanner>
       <RowBetween padding="1rem">

src/components/Menu/index.tsx

@@ -4,7 +4,7 @@ import styled from 'styled-components'
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
 import useToggle from '../../hooks/useToggle'
 
-import { Link } from '../../theme'
+import { ExternalLink } from '../../theme'
 
 const StyledMenuIcon = styled(MenuIcon)`
   path {
@@ -63,7 +63,7 @@ const MenuFlyout = styled.span`
   z-index: 100;
 `
 
-const MenuItem = styled(Link)`
+const MenuItem = styled(ExternalLink)`
   flex: 1;
   padding: 0.5rem 0.5rem;
   color: ${({ theme }) => theme.text2};

src/components/Popups/index.tsx

@@ -1,11 +1,12 @@
-import React, { useContext } from 'react'
+import { ChainId, Pair, Token } from '@uniswap/sdk'
+import React, { useContext, useMemo } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import { useMediaLayout } from 'use-media'
 
 import { X } from 'react-feather'
 import { PopupContent } from '../../state/application/actions'
 import { useActivePopups, useRemovePopup } from '../../state/application/hooks'
-import { Link } from '../../theme'
+import { ExternalLink } from '../../theme'
 import { AutoColumn } from '../Column'
 import DoubleTokenLogo from '../DoubleLogo'
 import Row from '../Row'
@@ -71,6 +72,40 @@ const Popup = styled.div`
   `}
 `
 
+function PoolPopup({
+  token0,
+  token1
+}: {
+  token0: { address?: string; symbol?: string }
+  token1: { address?: string; symbol?: string }
+}) {
+  const pairAddress: string | null = useMemo(() => {
+    if (!token0 || !token1) return null
+    // just mock it out
+    return Pair.getAddress(
+      new Token(ChainId.MAINNET, token0.address, 18),
+      new Token(ChainId.MAINNET, token1.address, 18)
+    )
+  }, [token0, token1])
+
+  return (
+    <AutoColumn gap={'10px'}>
+      <Text fontSize={20} fontWeight={500}>
+        Pool Imported
+      </Text>
+      <Row>
+        <DoubleTokenLogo a0={token0?.address ?? ''} a1={token1?.address ?? ''} margin={true} />
+        <Text fontSize={16} fontWeight={500}>
+          UNI {token0?.symbol} / {token1?.symbol}
+        </Text>
+      </Row>
+      {pairAddress ? (
+        <ExternalLink href={`https://uniswap.info/pair/${pairAddress}`}>View on Uniswap Info.</ExternalLink>
+      ) : null}
+    </AutoColumn>
+  )
+}
+
 function PopupItem({ content, popKey }: { content: PopupContent; popKey: string }) {
   if ('txn' in content) {
     const {
@@ -81,24 +116,12 @@ function PopupItem({ content, popKey }: { content: PopupContent; popKey: string
     const {
       poolAdded: { token0, token1 }
     } = content
-    return (
-      <AutoColumn gap={'10px'}>
-        <Text fontSize={20} fontWeight={500}>
-          Pool Imported
-        </Text>
-        <Row>
-          <DoubleTokenLogo a0={token0?.address ?? ''} a1={token1?.address ?? ''} margin={true} />
-          <Text fontSize={16} fontWeight={500}>
-            UNI {token0?.symbol} / {token1?.symbol}
-          </Text>
-        </Row>
-        <Link>View on Uniswap Info.</Link>
-      </AutoColumn>
-    )
+
+    return <PoolPopup token0={token0} token1={token1} />
   }
 }
 
-export default function App() {
+export default function Popups() {
   const theme = useContext(ThemeContext)
   // get all popups
   const activePopups = useActivePopups()

src/components/PositionCard/index.tsx

@@ -12,7 +12,7 @@ import Card, { GreyCard } from '../Card'
 import TokenLogo from '../TokenLogo'
 import DoubleLogo from '../DoubleLogo'
 import { Text } from 'rebass'
-import { Link } from '../../theme/components'
+import { ExternalLink } from '../../theme/components'
 import { AutoColumn } from '../Column'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { ButtonSecondary } from '../Button'
@@ -204,7 +204,9 @@ function PositionCard({ pair, history, border, minimal = false }: PositionCardPr
               )}
 
               <AutoRow justify="center" marginTop={'10px'}>
-                <Link href={`https://uniswap.info/pair/${pair?.liquidityToken.address}`}>View pool information ↗</Link>
+                <ExternalLink href={`https://uniswap.info/pair/${pair?.liquidityToken.address}`}>
+                  View pool information ↗
+                </ExternalLink>
               </AutoRow>
               <RowBetween marginTop="10px">
                 <ButtonSecondary

src/components/SearchModal/CommonBases.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { Text } from 'rebass'
-import { COMMON_BASES } from '../../constants'
+import { Token } from '@uniswap/sdk'
+
+import { SUGGESTED_BASES } from '../../constants'
 import { AutoColumn } from '../Column'
 import QuestionHelper from '../QuestionHelper'
 import { AutoRow } from '../Row'
@@ -25,7 +27,7 @@ export default function CommonBases({
         <QuestionHelper text="These tokens are commonly used in pairs." />
       </AutoRow>
       <AutoRow gap="10px">
-        {COMMON_BASES[chainId]?.map(token => {
+        {(SUGGESTED_BASES[chainId] ?? []).map((token: Token) => {
           return (
             <BaseWrapper
               gap="6px"

src/components/SearchModal/TokenList.tsx

@@ -7,7 +7,7 @@ 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 { LinkStyledButton, TYPE } from '../../theme'
 import { isAddress } from '../../utils'
 import { ButtonSecondary } from '../Button'
 import Column, { AutoColumn } from '../Column'
@@ -87,7 +87,7 @@ export default function TokenList({
                         onRemoveAddedToken(chainId, address)
                       }}
                     >
-                      <StyledLink style={{ marginLeft: '4px', fontWeight: 400 }}>(Remove)</StyledLink>
+                      <LinkStyledButton style={{ marginLeft: '4px', fontWeight: 400 }}>(Remove)</LinkStyledButton>
                     </div>
                   )}
                 </FadedSpan>

src/components/SearchModal/index.tsx

@@ -10,7 +10,7 @@ import { useActiveWeb3React } from '../../hooks'
 import { useAllTokens, useTokenByAddressAndAutomaticallyAdd } from '../../hooks/Tokens'
 import { useAllDummyPairs, useRemoveUserAddedToken } from '../../state/user/hooks'
 import { useAllTokenBalancesTreatingWETHasETH, useTokenBalances } from '../../state/wallet/hooks'
-import { CloseIcon, Link as StyledLink } from '../../theme/components'
+import { CloseIcon, LinkStyledButton, StyledInternalLink } from '../../theme/components'
 import { isAddress } from '../../utils'
 import Column from '../Column'
 import Modal from '../Modal'
@@ -20,7 +20,7 @@ import Tooltip from '../Tooltip'
 import CommonBases from './CommonBases'
 import { filterPairs, filterTokens } from './filtering'
 import PairList from './PairList'
-import { balanceComparator, useTokenComparator } from './sorting'
+import { useTokenComparator, pairComparator } from './sorting'
 import { PaddedColumn, SearchInput } from './styleds'
 import TokenList from './TokenList'
 import SortButton from './SortButton'
@@ -105,11 +105,9 @@ function SearchModal({
   const sortedPairList = useMemo(() => {
     if (isTokenView) return []
     return allPairs.sort((a, b): number => {
-      // sort by balance
       const balanceA = allPairBalances[a.liquidityToken.address]
       const balanceB = allPairBalances[b.liquidityToken.address]
-
-      return balanceComparator(balanceA, balanceB)
+      return pairComparator(a, b, balanceA, balanceB)
     })
   }, [isTokenView, allPairs, allPairBalances])
 
@@ -206,19 +204,13 @@ function SearchModal({
           <AutoRow justify={'center'}>
             <div>
               {isTokenView ? (
-                <Text fontWeight={500} color={theme.text2} fontSize={14}>
-                  <StyledLink onClick={openTooltip}>Having trouble finding a token?</StyledLink>
-                </Text>
+                <LinkStyledButton style={{ fontWeight: 500, color: theme.text2, fontSize: 16 }} onClick={openTooltip}>
+                  Having trouble finding a token?
+                </LinkStyledButton>
               ) : (
                 <Text fontWeight={500}>
                   {!isMobile && "Don't see a pool? "}
-                  <StyledLink
-                    onClick={() => {
-                      history.push('/find')
-                    }}
-                  >
-                    {!isMobile ? 'Import it.' : 'Import pool.'}
-                  </StyledLink>
+                  <StyledInternalLink to="/find">{!isMobile ? 'Import it.' : 'Import pool.'}</StyledInternalLink>
                 </Text>
               )}
             </div>

src/components/SearchModal/sorting.ts

@@ -1,10 +1,11 @@
-import { Token, TokenAmount, WETH } from '@uniswap/sdk'
+import { Token, TokenAmount, WETH, Pair } from '@uniswap/sdk'
 import { useMemo } from 'react'
 import { useActiveWeb3React } from '../../hooks'
 import { useAllTokenBalancesTreatingWETHasETH } from '../../state/wallet/hooks'
+import { DUMMY_PAIRS_TO_PIN } from '../../constants'
 
 // compare two token amounts with highest one coming first
-export function balanceComparator(balanceA?: TokenAmount, balanceB?: TokenAmount) {
+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')) {
@@ -15,6 +16,26 @@ export function balanceComparator(balanceA?: TokenAmount, balanceB?: TokenAmount
   return 0
 }
 
+// compare two pairs, favoring "pinned" pairs, and falling back to balances
+export function pairComparator(pairA: Pair, pairB: Pair, balanceA?: TokenAmount, balanceB?: TokenAmount) {
+  const aShouldBePinned =
+    DUMMY_PAIRS_TO_PIN[pairA?.token0?.chainId]?.some(
+      dummyPairToPin => dummyPairToPin.liquidityToken.address === pairA?.liquidityToken?.address
+    ) ?? false
+  const bShouldBePinned =
+    DUMMY_PAIRS_TO_PIN[pairB?.token0?.chainId]?.some(
+      dummyPairToPin => dummyPairToPin.liquidityToken.address === pairB?.liquidityToken?.address
+    ) ?? false
+
+  if (aShouldBePinned && !bShouldBePinned) {
+    return -1
+  } else if (!aShouldBePinned && bShouldBePinned) {
+    return 1
+  } else {
+    return balanceComparator(balanceA, balanceB)
+  }
+}
+
 function getTokenComparator(
   weth: Token | undefined,
   balances: { [tokenAddress: string]: TokenAmount }

src/components/Slider/index.tsx

@@ -1,52 +1,103 @@
-import React from 'react'
-import Slider from '@material-ui/core/Slider'
-import { withStyles } from '@material-ui/core/styles'
+import React, { useCallback } from 'react'
+import styled from 'styled-components'
 
-const StyledSlider = withStyles({
-  root: {
-    width: '90%',
-    color: '#565A69',
-    height: 4,
-    marginLeft: '15px',
-    marginRight: '15px',
-    padding: '15px 0'
-  },
-  thumb: {
-    height: 28,
-    width: 28,
-    backgroundColor: '#565A69',
-    marginTop: -14,
-    marginLeft: -14,
-    '&:focus,&:hover,&$active': {
-      boxShadow:
-        '0px 0px 1px rgba(0, 0, 0, 0.04), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), 0px 24px 32px rgba(0, 0, 0, 0.04)',
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {}
-    }
-  },
-  active: {},
-  track: {
-    height: 4
-  },
-  rail: {
-    height: 2,
-    opacity: 0.5,
-    backgroundColor: '#C3C5CB'
-  },
-  mark: {
-    backgroundColor: '#C3C5CB',
-    height: 12,
-    width: 2,
-    marginTop: -4
-  },
-  markActive: {
-    opacity: 1,
-    backgroundColor: 'currentColor',
-    height: 12,
-    width: 2,
-    marginTop: -4
+const StyledRangeInput = styled.input<{ value: number }>`
+  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
+  width: 100%; /* Specific width is required for Firefox. */
+  background: transparent; /* Otherwise white in Chrome */
+  cursor: pointer;
+
+  &:focus {
+    outline: none;
   }
-})(Slider)
+
+  &::-moz-focus-outer {
+    border: 0;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    height: 28px;
+    width: 28px;
+    background-color: #565a69;
+    border-radius: 100%;
+    border: none;
+    transform: translateY(-50%);
+    color: ${({ theme }) => theme.bg1};
+
+    &:hover,
+    &:focus {
+      box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06),
+        0px 24px 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  &::-moz-range-thumb {
+    height: 28px;
+    width: 28px;
+    background-color: #565a69;
+    border-radius: 100%;
+    border: none;
+    color: ${({ theme }) => theme.bg1};
+
+    &:hover,
+    &:focus {
+      box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06),
+        0px 24px 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  &::-ms-thumb {
+    height: 28px;
+    width: 28px;
+    background-color: #565a69;
+    border-radius: 100%;
+    color: ${({ theme }) => theme.bg1};
+
+    &:hover,
+    &:focus {
+      box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.1), 0px 4px 8px rgba(0, 0, 0, 0.08), 0px 16px 24px rgba(0, 0, 0, 0.06),
+        0px 24px 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: linear-gradient(
+      90deg,
+      ${({ theme }) => theme.bg5},
+      ${({ theme }) => theme.bg5} ${({ value }) => value}%,
+      ${({ theme }) => theme.bg3} ${({ value }) => value}%,
+      ${({ theme }) => theme.bg3}
+    );
+    height: 2px;
+  }
+
+  &::-moz-range-track {
+    background: linear-gradient(
+      90deg,
+      ${({ theme }) => theme.bg5},
+      ${({ theme }) => theme.bg5} ${({ value }) => value}%,
+      ${({ theme }) => theme.bg3} ${({ value }) => value}%,
+      ${({ theme }) => theme.bg3}
+    );
+    height: 2px;
+  }
+
+  &::-ms-track {
+    width: 100%;
+    border-color: transparent;
+    color: transparent;
+
+    background: ${({ theme }) => theme.bg5};
+    height: 2px;
+  }
+  &::-ms-fill-lower {
+    background: ${({ theme }) => theme.bg5};
+  }
+  &::-ms-fill-upper {
+    background: ${({ theme }) => theme.bg3};
+  }
+`
 
 interface InputSliderProps {
   value: number
@@ -54,8 +105,23 @@ interface InputSliderProps {
 }
 
 export default function InputSlider({ value, onChange }: InputSliderProps) {
-  function wrappedOnChange(_, value) {
-    onChange(value)
-  }
-  return <StyledSlider value={value} onChange={wrappedOnChange} aria-labelledby="input-slider" step={1} />
+  const changeCallback = useCallback(
+    e => {
+      onChange(e.target.value)
+    },
+    [onChange]
+  )
+
+  return (
+    <StyledRangeInput
+      type="range"
+      value={value}
+      style={{ width: '90%', marginLeft: 15, marginRight: 15, padding: '15px 0' }}
+      onChange={changeCallback}
+      aria-labelledby="input-slider"
+      step={1}
+      min={0}
+      max={100}
+    />
+  )
 }

src/components/TokenLogo/index.tsx

@@ -4,7 +4,7 @@ import { isAddress } from '../../utils'
 import { useActiveWeb3React } from '../../hooks'
 import { WETH } from '@uniswap/sdk'
 
-import { ReactComponent as EthereumLogo } from '../../assets/images/ethereum-logo.svg'
+import EthereumLogo from '../../assets/images/ethereum-logo.png'
 
 const TOKEN_ICON_API = address =>
   `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${address}/logo.png`
@@ -28,7 +28,7 @@ const Emoji = styled.span<{ size?: string }>`
   margin-bottom: -4px;
 `
 
-const StyledEthereumLogo = styled(EthereumLogo)<{ size: string }>`
+const StyledEthereumLogo = styled.img<{ size: string }>`
   width: ${({ size }) => size};
   height: ${({ size }) => size};
   box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.075);
@@ -55,7 +55,7 @@ export default function TokenLogo({
   let path = ''
   // hard code to show ETH instead of WETH in UI
   if (address === WETH[chainId].address) {
-    return <StyledEthereumLogo size={size} {...rest} />
+    return <StyledEthereumLogo src={EthereumLogo} size={size} {...rest} />
   } else if (!error && !BAD_IMAGES[address] && isAddress(address)) {
     path = TOKEN_ICON_API(address)
   } else {

src/components/TokenWarningCard/index.tsx

@@ -8,7 +8,7 @@ import { useActiveWeb3React } from '../../hooks'
 import { useAllTokens } from '../../hooks/Tokens'
 import { Field } from '../../state/swap/actions'
 import { useTokenWarningDismissal } from '../../state/user/hooks'
-import { Link, TYPE } from '../../theme'
+import { ExternalLink, TYPE } from '../../theme'
 import { getEtherscanLink } from '../../utils'
 import PropsOfExcluding from '../../utils/props-of-excluding'
 import QuestionHelper from '../QuestionHelper'
@@ -111,9 +111,9 @@ export default function TokenWarningCard({ token, ...rest }: TokenWarningCardPro
             ? `${token.name} (${token.symbol})`
             : token.name || token.symbol}
         </div>
-        <Link style={{ fontWeight: 400 }} href={getEtherscanLink(chainId, token.address, 'address')}>
+        <ExternalLink style={{ fontWeight: 400 }} href={getEtherscanLink(chainId, token.address, 'address')}>
           (View on Etherscan)
-        </Link>
+        </ExternalLink>
       </Row>
       <Row>
         <TYPE.italic>Verify this is the correct token before making any transactions.</TYPE.italic>

src/components/TxnPopup/index.tsx

@@ -8,7 +8,7 @@ import useInterval from '../../hooks/useInterval'
 import { useRemovePopup } from '../../state/application/hooks'
 import { TYPE } from '../../theme'
 
-import { Link } from '../../theme/components'
+import { ExternalLink } from '../../theme/components'
 import { getEtherscanLink } from '../../utils'
 import { AutoColumn } from '../Column'
 import { AutoRow } from '../Row'
@@ -62,7 +62,7 @@ export default function TxnPopup({
         <TYPE.body fontWeight={500}>
           {summary ? summary : 'Hash: ' + hash.slice(0, 8) + '...' + hash.slice(58, 65)}
         </TYPE.body>
-        <Link href={getEtherscanLink(chainId, hash, 'transaction')}>View on Etherscan</Link>
+        <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>View on Etherscan</ExternalLink>
       </AutoColumn>
       <Fader count={count} />
     </AutoRow>

src/components/WalletModal/Option.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
-import { Link } from '../../theme'
+import { ExternalLink } from '../../theme'
 
 const InfoCard = styled.button<{ active?: boolean }>`
   background-color: ${({ theme, active }) => (active ? theme.bg3 : theme.bg2)};
@@ -134,7 +134,7 @@ export default function Option({
     </OptionCardClickable>
   )
   if (link) {
-    return <Link href={link}>{content}</Link>
+    return <ExternalLink href={link}>{content}</ExternalLink>
   }
 
   return content

src/components/WalletModal/index.tsx

@@ -12,7 +12,7 @@ import AccountDetails from '../AccountDetails'
 import PendingView from './PendingView'
 import Option from './Option'
 import { SUPPORTED_WALLETS } from '../../constants'
-import { Link } from '../../theme'
+import { ExternalLink } from '../../theme'
 import MetamaskIcon from '../../assets/images/metamask.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { injected, walletconnect, fortmatic, portis } from '../../connectors'
@@ -358,9 +358,9 @@ export default function WalletModal({
           {walletView !== WALLET_VIEWS.PENDING && (
             <Blurb>
               <span>New to Ethereum? &nbsp;</span>{' '}
-              <Link href="https://ethereum.org/use/#3-what-is-a-wallet-and-which-one-should-i-use">
+              <ExternalLink href="https://ethereum.org/use/#3-what-is-a-wallet-and-which-one-should-i-use">
                 Learn more about wallets
-              </Link>
+              </ExternalLink>
             </Blurb>
           )}
         </ContentWrapper>

src/components/Web3ReactManager/index.tsx

@@ -45,20 +45,6 @@ export default function Web3ReactManager({ children }) {
     }
   }, [triedEager, networkActive, networkError, activateNetwork, active])
 
-  // 'pause' the network connector if we're ever connected to an account and it's active
-  useEffect(() => {
-    if (active && networkActive) {
-      network.pause()
-    }
-  }, [active, networkActive])
-
-  // 'resume' the network connector if we're ever not connected to an account and it's active
-  useEffect(() => {
-    if (!active && networkActive) {
-      network.resume()
-    }
-  }, [active, networkActive])
-
   // when there's no account connected, react to logins (broadly speaking) on the injected provider, if it exists
   useInactiveListener(!triedEager)
 

src/components/swap/TransferModalHeader.tsx

@@ -2,7 +2,7 @@ import { TokenAmount } from '@uniswap/sdk'
 import React from 'react'
 import { Text } from 'rebass'
 import { useActiveWeb3React } from '../../hooks'
-import { Link, TYPE } from '../../theme'
+import { ExternalLink, TYPE } from '../../theme'
 import { getEtherscanLink } from '../../utils'
 import Copy from '../AccountDetails/Copy'
 import { AutoColumn } from '../Column'
@@ -32,21 +32,21 @@ export function TransferModalHeader({
         <AutoColumn gap="lg">
           <TYPE.blue fontSize={36}>{ENSName}</TYPE.blue>
           <AutoRow gap="10px">
-            <Link href={getEtherscanLink(chainId, ENSName, 'address')}>
+            <ExternalLink href={getEtherscanLink(chainId, ENSName, 'address')}>
               <TYPE.blue fontSize={18}>
                 {recipient?.slice(0, 8)}...{recipient?.slice(34, 42)}↗
               </TYPE.blue>
-            </Link>
+            </ExternalLink>
             <Copy toCopy={recipient} />
           </AutoRow>
         </AutoColumn>
       ) : (
         <AutoRow gap="10px">
-          <Link href={getEtherscanLink(chainId, recipient, 'address')}>
+          <ExternalLink href={getEtherscanLink(chainId, recipient, 'address')}>
             <TYPE.blue fontSize={36}>
               {recipient?.slice(0, 6)}...{recipient?.slice(36, 42)}↗
             </TYPE.blue>
-          </Link>
+          </ExternalLink>
           <Copy toCopy={recipient} />
         </AutoRow>
       )}

src/components/swap/V1TradeLink.tsx

@@ -2,7 +2,7 @@ import React, { useContext } from 'react'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
 
-import { Link } from '../../theme'
+import { ExternalLink } from '../../theme'
 import { YellowCard } from '../Card'
 import { AutoColumn } from '../Column'
 
@@ -12,10 +12,10 @@ export default function V1TradeLink({ v1TradeLinkIfBetter }: { v1TradeLinkIfBett
     <YellowCard style={{ marginTop: '12px', padding: '8px 4px' }}>
       <AutoColumn gap="sm" justify="center" style={{ alignItems: 'center', textAlign: 'center' }}>
         <Text lineHeight="145.23%;" fontSize={14} fontWeight={400} color={theme.text1}>
-          There is a better price for this trade on
-          <Link href={v1TradeLinkIfBetter}>
-            <b> Uniswap V1 ↗</b>
-          </Link>
+          There is a better price for this trade on{' '}
+          <ExternalLink href={v1TradeLinkIfBetter}>
+            <b>Uniswap V1 ↗</b>
+          </ExternalLink>
         </Text>
       </AutoColumn>
     </YellowCard>

src/connectors/Fortmatic.ts

@@ -1,12 +1,15 @@
+import { ChainId } from '@uniswap/sdk'
 import { FortmaticConnector as FortmaticConnectorCore } from '@web3-react/fortmatic-connector'
 
 export const OVERLAY_READY = 'OVERLAY_READY'
 
-const chainIdToNetwork = {
-  1: 'mainnet',
-  3: 'ropsten',
-  4: 'rinkeby',
-  42: 'kovan'
+type FormaticSupportedChains = Extract<ChainId, ChainId.MAINNET | ChainId.ROPSTEN | ChainId.RINKEBY | ChainId.KOVAN>
+
+const CHAIN_ID_NETWORK_ARGUMENT: { readonly [chainId in FormaticSupportedChains]: string | undefined } = {
+  [ChainId.MAINNET]: undefined,
+  [ChainId.ROPSTEN]: 'ropsten',
+  [ChainId.RINKEBY]: 'rinkeby',
+  [ChainId.KOVAN]: 'kovan'
 }
 
 export class FortmaticConnector extends FortmaticConnectorCore {
@@ -14,7 +17,11 @@ export class FortmaticConnector extends FortmaticConnectorCore {
     if (!this.fortmatic) {
       const { default: Fortmatic } = await import('fortmatic')
       const { apiKey, chainId } = this as any
-      this.fortmatic = new Fortmatic(apiKey, chainId === 1 || chainId === 4 ? undefined : chainIdToNetwork[chainId])
+      if (chainId in CHAIN_ID_NETWORK_ARGUMENT) {
+        this.fortmatic = new Fortmatic(apiKey, CHAIN_ID_NETWORK_ARGUMENT[chainId as FormaticSupportedChains])
+      } else {
+        throw new Error(`Unsupported network ID: ${chainId}`)
+      }
     }
 
     const provider = this.fortmatic.getProvider()
@@ -29,7 +36,10 @@ export class FortmaticConnector extends FortmaticConnectorCore {
       }, 200)
     })
 
-    const [account] = await Promise.all([provider.enable().then(accounts => accounts[0]), pollForOverlayReady])
+    const [account] = await Promise.all([
+      provider.enable().then((accounts: string[]) => accounts[0]),
+      pollForOverlayReady
+    ])
 
     return { provider: this.fortmatic.getProvider(), chainId: (this as any).chainId, account }
   }

src/connectors/Network.ts

@@ -1,15 +0,0 @@
-import { NetworkConnector as NetworkConnectorCore } from '@web3-react/network-connector'
-
-export class NetworkConnector extends NetworkConnectorCore {
-  pause() {
-    if ((this as any).active) {
-      ;(this as any).providers[(this as any).currentChainId].stop()
-    }
-  }
-
-  resume() {
-    if ((this as any).active) {
-      ;(this as any).providers[(this as any).currentChainId].start()
-    }
-  }
-}

src/connectors/NetworkConnector.ts

@@ -0,0 +1,105 @@
+import { ConnectorUpdate } from '@web3-react/types'
+import { AbstractConnector } from '@web3-react/abstract-connector'
+import invariant from 'tiny-invariant'
+
+interface NetworkConnectorArguments {
+  urls: { [chainId: number]: string }
+  defaultChainId?: number
+}
+
+// taken from ethers.js, compatible interface with web3 provider
+type AsyncSendable = {
+  isMetaMask?: boolean
+  host?: string
+  path?: string
+  sendAsync?: (request: any, callback: (error: any, response: any) => void) => void
+  send?: (request: any, callback: (error: any, response: any) => void) => void
+}
+
+class RequestError extends Error {
+  constructor(message: string, public code: number, public data?: unknown) {
+    super(message)
+  }
+}
+
+class MiniRpcProvider implements AsyncSendable {
+  public readonly isMetaMask: false = false
+  public readonly chainId: number
+  public readonly url: string
+  public readonly host: string
+  public readonly path: string
+
+  constructor(chainId: number, url: string) {
+    this.chainId = chainId
+    this.url = url
+    const parsed = new URL(url)
+    this.host = parsed.host
+    this.path = parsed.pathname
+  }
+
+  public readonly sendAsync = (
+    request: { jsonrpc: '2.0'; id: number | string | null; method: string; params?: unknown[] | object },
+    callback: (error: any, response: any) => void
+  ): void => {
+    this.request(request.method, request.params)
+      .then(result => callback(null, { jsonrpc: '2.0', id: request.id, result }))
+      .catch(error => callback(error, null))
+  }
+
+  public readonly request = async (method: string, params?: unknown[] | object): Promise<unknown> => {
+    const response = await fetch(this.url, {
+      method: 'POST',
+      body: JSON.stringify({
+        jsonrpc: '2.0',
+        id: 1,
+        method,
+        params
+      })
+    })
+    if (!response.ok) throw new RequestError(`${response.status}: ${response.statusText}`, -32000)
+    const body = await response.json()
+    if ('error' in body) {
+      throw new RequestError(body?.error?.message, body?.error?.code, body?.error?.data)
+    } else if ('result' in body) {
+      return body.result
+    } else {
+      throw new RequestError(`Received unexpected JSON-RPC response to ${method} request.`, -32000, body)
+    }
+  }
+}
+
+export class NetworkConnector extends AbstractConnector {
+  private readonly providers: { [chainId: number]: MiniRpcProvider }
+  private currentChainId: number
+
+  constructor({ urls, defaultChainId }: NetworkConnectorArguments) {
+    invariant(defaultChainId || Object.keys(urls).length === 1, 'defaultChainId is a required argument with >1 url')
+    super({ supportedChainIds: Object.keys(urls).map((k): number => Number(k)) })
+
+    this.currentChainId = defaultChainId || Number(Object.keys(urls)[0])
+    this.providers = Object.keys(urls).reduce<{ [chainId: number]: MiniRpcProvider }>((accumulator, chainId) => {
+      accumulator[Number(chainId)] = new MiniRpcProvider(Number(chainId), urls[Number(chainId)])
+      return accumulator
+    }, {})
+  }
+
+  public async activate(): Promise<ConnectorUpdate> {
+    return { provider: this.providers[this.currentChainId], chainId: this.currentChainId, account: null }
+  }
+
+  public async getProvider(): Promise<MiniRpcProvider> {
+    return this.providers[this.currentChainId]
+  }
+
+  public async getChainId(): Promise<number> {
+    return this.currentChainId
+  }
+
+  public async getAccount(): Promise<null> {
+    return null
+  }
+
+  public deactivate() {
+    return
+  }
+}

src/connectors/fortmatic.d.ts

@@ -0,0 +1 @@
+declare module 'formatic'

src/connectors/index.ts

@@ -3,15 +3,20 @@ import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { WalletLinkConnector } from '@web3-react/walletlink-connector'
 import { PortisConnector } from '@web3-react/portis-connector'
 
-import { NetworkConnector } from './Network'
 import { FortmaticConnector } from './Fortmatic'
+import { NetworkConnector } from './NetworkConnector'
 
 const POLLING_INTERVAL = 10000
 const NETWORK_URL = process.env.REACT_APP_NETWORK_URL
+const FORMATIC_KEY = process.env.REACT_APP_FORTMATIC_KEY
+const PORTIS_ID = process.env.REACT_APP_PORTIS_ID
+
+if (typeof NETWORK_URL === 'undefined') {
+  throw new Error(`REACT_APP_NETWORK_URL must be a defined environment variable`)
+}
 
 export const network = new NetworkConnector({
-  urls: { [Number(process.env.REACT_APP_CHAIN_ID)]: NETWORK_URL },
-  pollingInterval: POLLING_INTERVAL * 3
+  urls: { [Number(process.env.REACT_APP_CHAIN_ID)]: NETWORK_URL }
 })
 
 export const injected = new InjectedConnector({
@@ -28,13 +33,13 @@ export const walletconnect = new WalletConnectConnector({
 
 // mainnet only
 export const fortmatic = new FortmaticConnector({
-  apiKey: process.env.REACT_APP_FORTMATIC_KEY,
+  apiKey: FORMATIC_KEY ?? '',
   chainId: 1
 })
 
 // mainnet only
 export const portis = new PortisConnector({
-  dAppId: process.env.REACT_APP_PORTIS_ID,
+  dAppId: PORTIS_ID ?? '',
   networks: [1]
 })
 

src/connectors/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.strict.json",
+  "include": ["**/*"]
+}

src/constants/index.ts

@@ -1,26 +1,63 @@
-import { ChainId, Token, WETH, JSBI, Percent } from '@uniswap/sdk'
-import { fortmatic, injected, portis, walletconnect, walletlink } from '../connectors'
+import { ChainId, JSBI, Percent, Token, WETH, Pair, TokenAmount } from '@uniswap/sdk'
 
-export const V1_FACTORY_ADDRESS = '0xc0a47dFe034B400B47bDaD5FecDa2621de6c4d95'
+import { fortmatic, injected, portis, walletconnect, walletlink } from '../connectors'
 
 export const ROUTER_ADDRESS = '0xf164fC0Ec4E93095b804a4795bBe1e041497b92a'
 
-// used for display in the default list when adding liquidity
-export const COMMON_BASES = {
+// used to construct intermediary pairs for trading
+export const BASES_TO_CHECK_TRADES_AGAINST: { readonly [chainId in ChainId]: Token[] } = {
   [ChainId.MAINNET]: [
     WETH[ChainId.MAINNET],
     new Token(ChainId.MAINNET, '0x6B175474E89094C44Da98b954EedeAC495271d0F', 18, 'DAI', 'Dai Stablecoin'),
     new Token(ChainId.MAINNET, '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', 6, 'USDC', 'USD//C')
   ],
   [ChainId.ROPSTEN]: [WETH[ChainId.ROPSTEN]],
-  [ChainId.RINKEBY]: [
-    WETH[ChainId.RINKEBY],
-    new Token(ChainId.RINKEBY, '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735', 18, 'DAI', 'Dai Stablecoin')
-  ],
+  [ChainId.RINKEBY]: [WETH[ChainId.RINKEBY]],
   [ChainId.GÖRLI]: [WETH[ChainId.GÖRLI]],
   [ChainId.KOVAN]: [WETH[ChainId.KOVAN]]
 }
 
+// used for display in the default list when adding liquidity
+export const SUGGESTED_BASES = BASES_TO_CHECK_TRADES_AGAINST
+
+// used to construct the list of all pairs we consider by default in the frontend
+export const BASES_TO_TRACK_LIQUIDITY_FOR = BASES_TO_CHECK_TRADES_AGAINST
+
+export const DUMMY_PAIRS_TO_PIN: { readonly [chainId in ChainId]?: Pair[] } = {
+  [ChainId.MAINNET]: [
+    new Pair(
+      new TokenAmount(
+        new Token(ChainId.MAINNET, '0x5d3a536E4D6DbD6114cc1Ead35777bAB948E3643', 8, 'cDAI', 'Compound Dai'),
+        '0'
+      ),
+      new TokenAmount(
+        new Token(ChainId.MAINNET, '0x39AA39c021dfbaE8faC545936693aC917d5E7563', 8, 'cUSDC', 'Compound USD Coin'),
+        '0'
+      )
+    ),
+    new Pair(
+      new TokenAmount(
+        new Token(ChainId.MAINNET, '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', 6, 'USDC', 'USD//C'),
+        '0'
+      ),
+      new TokenAmount(
+        new Token(ChainId.MAINNET, '0xdAC17F958D2ee523a2206206994597C13D831ec7', 6, 'USDT', 'Tether USD'),
+        '0'
+      )
+    ),
+    new Pair(
+      new TokenAmount(
+        new Token(ChainId.MAINNET, '0x6B175474E89094C44Da98b954EedeAC495271d0F', 18, 'DAI', 'Dai Stablecoin'),
+        '0'
+      ),
+      new TokenAmount(
+        new Token(ChainId.MAINNET, '0xdAC17F958D2ee523a2206206994597C13D831ec7', 6, 'USDT', 'Tether USD'),
+        '0'
+      )
+    )
+  ]
+}
+
 const MAINNET_WALLETS = {
   INJECTED: {
     connector: injected,

src/constants/tokens/mainnet.ts

@@ -7,6 +7,7 @@ export default [
   new Token(ChainId.MAINNET, '0xD46bA6D942050d489DBd938a2C909A5d5039A161', 9, 'AMPL', 'Ampleforth'),
   new Token(ChainId.MAINNET, '0xcD62b1C403fa761BAadFC74C525ce2B51780b184', 18, 'ANJ', 'Aragon Network Juror'),
   new Token(ChainId.MAINNET, '0x960b236A07cf122663c4303350609A66A7B288C0', 18, 'ANT', 'Aragon Network Token'),
+  new Token(ChainId.MAINNET, '0x27054b13b1B798B345b591a4d22e6562d47eA75a', 4, 'AST', 'AirSwap Token'),
   new Token(ChainId.MAINNET, '0xBA11D00c5f74255f56a5E366F4F77f5A186d7f55', 18, 'BAND', 'BandToken'),
   new Token(ChainId.MAINNET, '0x0D8775F648430679A709E98d2b0Cb6250d2887EF', 18, 'BAT', 'Basic Attention Token'),
   new Token(ChainId.MAINNET, '0x107c4504cd79C5d2696Ea0030a8dD4e92601B82e', 18, 'BLT', 'Bloom Token'),
@@ -15,6 +16,7 @@ export default [
   new Token(ChainId.MAINNET, '0x4F9254C83EB525f9FCf346490bbb3ed28a81C667', 18, 'CELR', 'CelerToken'),
   new Token(ChainId.MAINNET, '0xF5DCe57282A584D2746FaF1593d3121Fcac444dC', 8, 'cSAI', 'Compound Dai'),
   new Token(ChainId.MAINNET, '0x5d3a536E4D6DbD6114cc1Ead35777bAB948E3643', 8, 'cDAI', 'Compound Dai'),
+  new Token(ChainId.MAINNET, '0x39AA39c021dfbaE8faC545936693aC917d5E7563', 8, 'cUSDC', 'Compound USD Coin'),
   new Token(ChainId.MAINNET, '0xaaAEBE6Fe48E54f431b0C390CfaF0b017d09D42d', 4, 'CEL', 'Celsius'),
   new Token(ChainId.MAINNET, '0x06AF07097C9Eeb7fD685c692751D5C66dB49c215', 18, 'CHAI', 'Chai'),
   new Token(ChainId.MAINNET, '0x89d24A6b4CcB1B6fAA2625fE562bDD9a23260359', 18, 'SAI', 'Dai Stablecoin v1.0 (SAI)'),
@@ -30,6 +32,7 @@ export default [
     'Decentralized Insurance Protocol'
   ),
   new Token(ChainId.MAINNET, '0xC0F9bD5Fa5698B6505F643900FFA515Ea5dF54A9', 18, 'DONUT', 'Donut'),
+  new Token(ChainId.MAINNET, '0x86FADb80d8D2cff3C3680819E4da99C10232Ba0F', 18, 'EBASE', 'EURBASE Stablecoin'),
   new Token(ChainId.MAINNET, '0xF629cBd94d3791C9250152BD8dfBDF380E2a3B9c', 18, 'ENJ', 'Enjin Coin'),
   new Token(ChainId.MAINNET, '0x06f65b8CfCb13a9FE37d836fE9708dA38Ecb29B2', 18, 'FAME', 'SAINT FAME: Genesis Shirt'),
   new Token(ChainId.MAINNET, '0x4946Fcea7C692606e8908002e55A582af44AC121', 18, 'FOAM', 'FOAM Token'),
@@ -90,6 +93,7 @@ export default [
   new Token(ChainId.MAINNET, '0x42d6622deCe394b54999Fbd73D108123806f6a18', 18, 'SPANK', 'SPANK'),
   new Token(ChainId.MAINNET, '0xB64ef51C888972c908CFacf59B47C1AfBC0Ab8aC', 8, 'STORJ', 'StorjToken'),
   new Token(ChainId.MAINNET, '0x57Ab1ec28D129707052df4dF418D58a2D46d5f51', 18, 'sUSD', 'Synth sUSD'),
+  new Token(ChainId.MAINNET, '0x261EfCdD24CeA98652B9700800a13DfBca4103fF', 18, 'sXAU', 'Synth sXAU'),
   new Token(ChainId.MAINNET, '0x8CE9137d39326AD0cD6491fb5CC0CbA0e089b6A9', 18, 'SXP', 'Swipe'),
   new Token(ChainId.MAINNET, '0x00006100F7090010005F1bd7aE6122c3C2CF0090', 18, 'TAUD', 'TrueAUD'),
   new Token(ChainId.MAINNET, '0x00000100F2A2bd000715001920eB70D229700085', 18, 'TCAD', 'TrueCAD'),

src/constants/v1/index.ts

@@ -0,0 +1,9 @@
+import { Interface } from '@ethersproject/abi'
+import V1_EXCHANGE_ABI from './v1_exchange.json'
+import V1_FACTORY_ABI from './v1_factory.json'
+
+const V1_FACTORY_ADDRESS = '0xc0a47dFe034B400B47bDaD5FecDa2621de6c4d95'
+const V1_FACTORY_INTERFACE = new Interface(V1_FACTORY_ABI)
+const V1_EXCHANGE_INTERFACE = new Interface(V1_EXCHANGE_ABI)
+
+export { V1_FACTORY_ADDRESS, V1_FACTORY_INTERFACE, V1_FACTORY_ABI, V1_EXCHANGE_INTERFACE, V1_EXCHANGE_ABI }

src/constants/v1/v1_exchange.json

@@ -0,0 +1,971 @@
+[
+  {
+    "name": "TokenPurchase",
+    "inputs": [
+      {
+        "type": "address",
+        "name": "buyer",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "eth_sold",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "tokens_bought",
+        "indexed": true
+      }
+    ],
+    "anonymous": false,
+    "type": "event"
+  },
+  {
+    "name": "EthPurchase",
+    "inputs": [
+      {
+        "type": "address",
+        "name": "buyer",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "tokens_sold",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "eth_bought",
+        "indexed": true
+      }
+    ],
+    "anonymous": false,
+    "type": "event"
+  },
+  {
+    "name": "AddLiquidity",
+    "inputs": [
+      {
+        "type": "address",
+        "name": "provider",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "eth_amount",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "token_amount",
+        "indexed": true
+      }
+    ],
+    "anonymous": false,
+    "type": "event"
+  },
+  {
+    "name": "RemoveLiquidity",
+    "inputs": [
+      {
+        "type": "address",
+        "name": "provider",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "eth_amount",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "token_amount",
+        "indexed": true
+      }
+    ],
+    "anonymous": false,
+    "type": "event"
+  },
+  {
+    "name": "Transfer",
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_from",
+        "indexed": true
+      },
+      {
+        "type": "address",
+        "name": "_to",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "_value",
+        "indexed": false
+      }
+    ],
+    "anonymous": false,
+    "type": "event"
+  },
+  {
+    "name": "Approval",
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_owner",
+        "indexed": true
+      },
+      {
+        "type": "address",
+        "name": "_spender",
+        "indexed": true
+      },
+      {
+        "type": "uint256",
+        "name": "_value",
+        "indexed": false
+      }
+    ],
+    "anonymous": false,
+    "type": "event"
+  },
+  {
+    "name": "setup",
+    "outputs": [],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "token_addr"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "addLiquidity",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "min_liquidity"
+      },
+      {
+        "type": "uint256",
+        "name": "max_tokens"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      }
+    ],
+    "constant": false,
+    "payable": true,
+    "type": "function"
+  },
+  {
+    "name": "removeLiquidity",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "outA"
+      },
+      {
+        "type": "uint256",
+        "name": "outB"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "amount"
+      },
+      {
+        "type": "uint256",
+        "name": "min_eth"
+      },
+      {
+        "type": "uint256",
+        "name": "min_tokens"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "__default__",
+    "outputs": [],
+    "inputs": [],
+    "constant": false,
+    "payable": true,
+    "type": "function"
+  },
+  {
+    "name": "ethToTokenSwapInput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "min_tokens"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      }
+    ],
+    "constant": false,
+    "payable": true,
+    "type": "function"
+  },
+  {
+    "name": "ethToTokenTransferInput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "min_tokens"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "recipient"
+      }
+    ],
+    "constant": false,
+    "payable": true,
+    "type": "function"
+  },
+  {
+    "name": "ethToTokenSwapOutput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      }
+    ],
+    "constant": false,
+    "payable": true,
+    "type": "function"
+  },
+  {
+    "name": "ethToTokenTransferOutput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "recipient"
+      }
+    ],
+    "constant": false,
+    "payable": true,
+    "type": "function"
+  },
+  {
+    "name": "tokenToEthSwapInput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "min_eth"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToEthTransferInput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "min_eth"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "recipient"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToEthSwapOutput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "eth_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "max_tokens"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToEthTransferOutput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "eth_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "max_tokens"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "recipient"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToTokenSwapInput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "min_tokens_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "min_eth_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "token_addr"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToTokenTransferInput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "min_tokens_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "min_eth_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "recipient"
+      },
+      {
+        "type": "address",
+        "name": "token_addr"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToTokenSwapOutput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "max_tokens_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "max_eth_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "token_addr"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToTokenTransferOutput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "max_tokens_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "max_eth_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "recipient"
+      },
+      {
+        "type": "address",
+        "name": "token_addr"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToExchangeSwapInput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "min_tokens_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "min_eth_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "exchange_addr"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToExchangeTransferInput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "min_tokens_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "min_eth_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "recipient"
+      },
+      {
+        "type": "address",
+        "name": "exchange_addr"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToExchangeSwapOutput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "max_tokens_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "max_eth_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "exchange_addr"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenToExchangeTransferOutput",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_bought"
+      },
+      {
+        "type": "uint256",
+        "name": "max_tokens_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "max_eth_sold"
+      },
+      {
+        "type": "uint256",
+        "name": "deadline"
+      },
+      {
+        "type": "address",
+        "name": "recipient"
+      },
+      {
+        "type": "address",
+        "name": "exchange_addr"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "getEthToTokenInputPrice",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "eth_sold"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "getEthToTokenOutputPrice",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_bought"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "getTokenToEthInputPrice",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "tokens_sold"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "getTokenToEthOutputPrice",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "uint256",
+        "name": "eth_bought"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "tokenAddress",
+    "outputs": [
+      {
+        "type": "address",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "factoryAddress",
+    "outputs": [
+      {
+        "type": "address",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "balanceOf",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_owner"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "transfer",
+    "outputs": [
+      {
+        "type": "bool",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_to"
+      },
+      {
+        "type": "uint256",
+        "name": "_value"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "transferFrom",
+    "outputs": [
+      {
+        "type": "bool",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_from"
+      },
+      {
+        "type": "address",
+        "name": "_to"
+      },
+      {
+        "type": "uint256",
+        "name": "_value"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "approve",
+    "outputs": [
+      {
+        "type": "bool",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_spender"
+      },
+      {
+        "type": "uint256",
+        "name": "_value"
+      }
+    ],
+    "constant": false,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "allowance",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [
+      {
+        "type": "address",
+        "name": "_owner"
+      },
+      {
+        "type": "address",
+        "name": "_spender"
+      }
+    ],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "name",
+    "outputs": [
+      {
+        "type": "bytes32",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "symbol",
+    "outputs": [
+      {
+        "type": "bytes32",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "decimals",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  },
+  {
+    "name": "totalSupply",
+    "outputs": [
+      {
+        "type": "uint256",
+        "name": "out"
+      }
+    ],
+    "inputs": [],
+    "constant": true,
+    "payable": false,
+    "type": "function"
+  }
+]

src/constants/v1/v1_factory.json

@@ -14,8 +14,7 @@
     "inputs": [{ "type": "address", "name": "template" }],
     "constant": false,
     "payable": false,
-    "type": "function",
-    "gas": 35725
+    "type": "function"
   },
   {
     "name": "createExchange",
@@ -23,8 +22,7 @@
     "inputs": [{ "type": "address", "name": "token" }],
     "constant": false,
     "payable": false,
-    "type": "function",
-    "gas": 187911
+    "type": "function"
   },
   {
     "name": "getExchange",
@@ -32,8 +30,7 @@
     "inputs": [{ "type": "address", "name": "token" }],
     "constant": true,
     "payable": false,
-    "type": "function",
-    "gas": 715
+    "type": "function"
   },
   {
     "name": "getToken",
@@ -41,8 +38,7 @@
     "inputs": [{ "type": "address", "name": "exchange" }],
     "constant": true,
     "payable": false,
-    "type": "function",
-    "gas": 745
+    "type": "function"
   },
   {
     "name": "getTokenWithId",
@@ -50,8 +46,7 @@
     "inputs": [{ "type": "uint256", "name": "token_id" }],
     "constant": true,
     "payable": false,
-    "type": "function",
-    "gas": 736
+    "type": "function"
   },
   {
     "name": "exchangeTemplate",
@@ -59,8 +54,7 @@
     "inputs": [],
     "constant": true,
     "payable": false,
-    "type": "function",
-    "gas": 633
+    "type": "function"
   },
   {
     "name": "tokenCount",
@@ -68,7 +62,6 @@
     "inputs": [],
     "constant": true,
     "payable": false,
-    "type": "function",
-    "gas": 663
+    "type": "function"
   }
 ]

src/data/Allowances.ts

@@ -8,7 +8,7 @@ export function useTokenAllowance(token?: Token, owner?: string, spender?: strin
   const contract = useTokenContract(token?.address, false)
 
   const inputs = useMemo(() => [owner, spender], [owner, spender])
-  const allowance = useSingleCallResult(contract, 'allowance', inputs)
+  const allowance = useSingleCallResult(contract, 'allowance', inputs).result
 
   return useMemo(() => (token && allowance ? new TokenAmount(token, allowance.toString()) : undefined), [
     token,

src/data/Reserves.ts

@@ -1,8 +1,10 @@
 import { Token, TokenAmount, Pair } from '@uniswap/sdk'
 import { useMemo } from 'react'
+import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
+import { Interface } from '@ethersproject/abi'
 
 import { usePairContract } from '../hooks/useContract'
-import { useSingleCallResult } from '../state/multicall/hooks'
+import { useSingleCallResult, useMultipleContractSingleData } from '../state/multicall/hooks'
 
 /*
  * if loading, return undefined
@@ -12,13 +14,40 @@ import { useSingleCallResult } from '../state/multicall/hooks'
 export function usePair(tokenA?: Token, tokenB?: Token): undefined | Pair | null {
   const pairAddress = tokenA && tokenB && !tokenA.equals(tokenB) ? Pair.getAddress(tokenA, tokenB) : undefined
   const contract = usePairContract(pairAddress, false)
-  const reserves = useSingleCallResult(contract, 'getReserves')
+  const { result: reserves, loading } = useSingleCallResult(contract, 'getReserves')
 
   return useMemo(() => {
-    if (!pairAddress || !contract || !tokenA || !tokenB) return undefined
+    if (loading || !tokenA || !tokenB) return undefined
     if (!reserves) return null
     const { reserve0, reserve1 } = reserves
     const [token0, token1] = tokenA.sortsBefore(tokenB) ? [tokenA, tokenB] : [tokenB, tokenA]
     return new Pair(new TokenAmount(token0, reserve0.toString()), new TokenAmount(token1, reserve1.toString()))
-  }, [contract, pairAddress, reserves, tokenA, tokenB])
+  }, [loading, reserves, tokenA, tokenB])
+}
+
+const PAIR_INTERFACE = new Interface(IUniswapV2PairABI)
+export function usePairs(tokens: [Token | undefined, Token | undefined][]): (undefined | Pair | null)[] {
+  const pairAddresses = useMemo(
+    () =>
+      tokens.map(([tokenA, tokenB]) => {
+        return tokenA && tokenB && !tokenA.equals(tokenB) ? Pair.getAddress(tokenA, tokenB) : undefined
+      }),
+    [tokens]
+  )
+
+  const results = useMultipleContractSingleData(pairAddresses, PAIR_INTERFACE, 'getReserves')
+
+  return useMemo(() => {
+    return results.map((result, i) => {
+      const { result: reserves, loading } = result
+      const tokenA = tokens[i][0]
+      const tokenB = tokens[i][1]
+
+      if (loading || !tokenA || !tokenB) return undefined
+      if (!reserves) return null
+      const { reserve0, reserve1 } = reserves
+      const [token0, token1] = tokenA.sortsBefore(tokenB) ? [tokenA, tokenB] : [tokenB, tokenA]
+      return new Pair(new TokenAmount(token0, reserve0.toString()), new TokenAmount(token1, reserve1.toString()))
+    })
+  }, [results, tokens])
 }

src/data/TotalSupply.ts

@@ -8,7 +8,7 @@ import { useSingleCallResult } from '../state/multicall/hooks'
 export function useTotalSupply(token?: Token): TokenAmount | undefined {
   const contract = useTokenContract(token?.address, false)
 
-  const totalSupply: BigNumber = useSingleCallResult(contract, 'totalSupply')?.[0]
+  const totalSupply: BigNumber = useSingleCallResult(contract, 'totalSupply')?.result?.[0]
 
   return token && totalSupply ? new TokenAmount(token, totalSupply.toString()) : undefined
 }

src/data/V1.ts

@@ -1,18 +1,23 @@
-import { ChainId, Pair, Percent, Route, Token, TokenAmount, Trade, TradeType, WETH } from '@uniswap/sdk'
+import { ChainId, JSBI, Pair, Percent, Route, Token, TokenAmount, Trade, TradeType, WETH } from '@uniswap/sdk'
 import { useMemo } from 'react'
 import { useActiveWeb3React } from '../hooks'
+import { useAllTokens } from '../hooks/Tokens'
 import { useV1FactoryContract } from '../hooks/useContract'
-import { useSingleCallResult } from '../state/multicall/hooks'
-import { useETHBalances, useTokenBalance } from '../state/wallet/hooks'
+import { NEVER_RELOAD, useSingleCallResult, useSingleContractMultipleData } from '../state/multicall/hooks'
+import { useETHBalances, useTokenBalance, useTokenBalances } from '../state/wallet/hooks'
 
 function useV1PairAddress(tokenAddress?: string): string | undefined {
   const contract = useV1FactoryContract()
 
   const inputs = useMemo(() => [tokenAddress], [tokenAddress])
-  return useSingleCallResult(contract, 'getExchange', inputs)?.[0]
+  return useSingleCallResult(contract, 'getExchange', inputs)?.result?.[0]
 }
 
-function useMockV1Pair(token?: Token) {
+class MockV1Pair extends Pair {
+  readonly isV1: true = true
+}
+
+function useMockV1Pair(token?: Token): MockV1Pair | undefined {
   const isWETH = token?.equals(WETH[token?.chainId])
 
   // will only return an address on mainnet, and not for WETH
@@ -21,10 +26,57 @@ function useMockV1Pair(token?: Token) {
   const ETHBalance = useETHBalances([v1PairAddress])[v1PairAddress ?? '']
 
   return tokenBalance && ETHBalance && token
-    ? new Pair(tokenBalance, new TokenAmount(WETH[token.chainId], ETHBalance.toString()))
+    ? new MockV1Pair(tokenBalance, new TokenAmount(WETH[token.chainId], ETHBalance.toString()))
     : undefined
 }
 
+// returns ALL v1 exchange addresses
+export function useAllV1ExchangeAddresses(): string[] {
+  const factory = useV1FactoryContract()
+  const exchangeCount = useSingleCallResult(factory, 'tokenCount')?.result
+
+  const parsedCount = parseInt(exchangeCount?.toString() ?? '0')
+
+  const indices = useMemo(() => [...Array(parsedCount).keys()].map(ix => [ix]), [parsedCount])
+  const data = useSingleContractMultipleData(factory, 'getTokenWithId', indices, NEVER_RELOAD)
+
+  return useMemo(() => data?.map(({ result }) => result?.[0])?.filter(x => x) ?? [], [data])
+}
+
+// returns all v1 exchange addresses in the user's token list
+export function useAllTokenV1ExchangeAddresses(): string[] {
+  const allTokens = useAllTokens()
+  const factory = useV1FactoryContract()
+  const args = useMemo(() => Object.keys(allTokens).map(tokenAddress => [tokenAddress]), [allTokens])
+
+  const data = useSingleContractMultipleData(factory, 'getExchange', args, NEVER_RELOAD)
+
+  return useMemo(() => data?.map(({ result }) => result?.[0])?.filter(x => x) ?? [], [data])
+}
+
+// returns whether any of the tokens in the user's token list have liquidity on v1
+export function useUserProbablyHasV1Liquidity(): boolean | undefined {
+  const exchangeAddresses = useAllTokenV1ExchangeAddresses()
+
+  const { account, chainId } = useActiveWeb3React()
+
+  const fakeTokens = useMemo(
+    () => (chainId ? exchangeAddresses.map(address => new Token(chainId, address, 18, 'UNI-V1')) : []),
+    [chainId, exchangeAddresses]
+  )
+
+  const balances = useTokenBalances(account ?? undefined, fakeTokens)
+
+  return useMemo(
+    () =>
+      Object.keys(balances).some(tokenAddress => {
+        const b = balances[tokenAddress]?.raw
+        return b && JSBI.greaterThan(b, JSBI.BigInt(0))
+      }),
+    [balances]
+  )
+}
+
 export function useV1TradeLinkIfBetter(
   isExactIn?: boolean,
   input?: Token,

src/hooks/Trades.ts

@@ -1,47 +1,44 @@
 import { useMemo } from 'react'
-import { WETH, Token, TokenAmount, Trade, ChainId, Pair } from '@uniswap/sdk'
-import { useActiveWeb3React } from './index'
-import { usePair } from '../data/Reserves'
+import { Token, TokenAmount, Trade, ChainId, Pair } from '@uniswap/sdk'
+import flatMap from 'lodash.flatmap'
+
+import { useActiveWeb3React } from './index'
+import { usePairs } from '../data/Reserves'
+
+import { BASES_TO_CHECK_TRADES_AGAINST } from '../constants'
 
-const DAI = new Token(ChainId.MAINNET, '0x6B175474E89094C44Da98b954EedeAC495271d0F', 18, 'DAI', 'Dai Stablecoin')
-const USDC = new Token(ChainId.MAINNET, '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', 6, 'USDC', 'USD//C')
 function useAllCommonPairs(tokenA?: Token, tokenB?: Token): Pair[] {
   const { chainId } = useActiveWeb3React()
 
-  // check for direct pair between tokens
-  const pairBetween = usePair(tokenA, tokenB)
+  const bases = useMemo(() => BASES_TO_CHECK_TRADES_AGAINST[chainId as ChainId] ?? [], [chainId])
 
-  // get token<->WETH pairs
-  const aToETH = usePair(tokenA, WETH[chainId as ChainId])
-  const bToETH = usePair(tokenB, WETH[chainId as ChainId])
-
-  // get token<->DAI pairs
-  const aToDAI = usePair(tokenA, chainId === ChainId.MAINNET ? DAI : undefined)
-  const bToDAI = usePair(tokenB, chainId === ChainId.MAINNET ? DAI : undefined)
-
-  // get token<->USDC pairs
-  const aToUSDC = usePair(tokenA, chainId === ChainId.MAINNET ? USDC : undefined)
-  const bToUSDC = usePair(tokenB, chainId === ChainId.MAINNET ? USDC : undefined)
-
-  // get connecting pairs
-  const DAIToETH = usePair(chainId === ChainId.MAINNET ? DAI : undefined, WETH[chainId as ChainId])
-  const USDCToETH = usePair(chainId === ChainId.MAINNET ? USDC : undefined, WETH[chainId as ChainId])
-  const DAIToUSDC = usePair(
-    chainId === ChainId.MAINNET ? DAI : undefined,
-    chainId === ChainId.MAINNET ? USDC : undefined
+  const allPairCombinations: [Token | undefined, Token | undefined][] = useMemo(
+    () => [
+      // the direct pair
+      [tokenA, tokenB],
+      // token A against all bases
+      ...bases.map((base): [Token | undefined, Token | undefined] => [tokenA, base]),
+      // token B against all bases
+      ...bases.map((base): [Token | undefined, Token | undefined] => [tokenB, base]),
+      // each base against all bases
+      ...flatMap(bases, (base): [Token, Token][] => bases.map(otherBase => [base, otherBase]))
+    ],
+    [tokenA, tokenB, bases]
   )
 
+  const allPairs = usePairs(allPairCombinations)
+
   // only pass along valid pairs, non-duplicated pairs
   return useMemo(
     () =>
-      [pairBetween, aToETH, bToETH, aToDAI, bToDAI, aToUSDC, bToUSDC, DAIToETH, USDCToETH, DAIToUSDC]
+      allPairs
         // filter out invalid pairs
         .filter((p): p is Pair => !!p)
         // filter out duplicated pairs
         .filter(
           (p, i, pairs) => i === pairs.findIndex(pair => pair?.liquidityToken.address === p.liquidityToken.address)
         ),
-    [pairBetween, aToETH, bToETH, aToDAI, bToDAI, aToUSDC, bToUSDC, DAIToETH, USDCToETH, DAIToUSDC]
+    [allPairs]
   )
 }
 

src/hooks/useContract.ts

@@ -2,9 +2,8 @@ import { Contract } from '@ethersproject/contracts'
 import { ChainId } from '@uniswap/sdk'
 import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
 import { useMemo } from 'react'
-import { V1_FACTORY_ADDRESS } from '../constants'
 import ERC20_ABI from '../constants/abis/erc20.json'
-import IUniswapV1Factory from '../constants/abis/v1_factory.json'
+import { V1_EXCHANGE_ABI, V1_FACTORY_ABI, V1_FACTORY_ADDRESS } from '../constants/v1'
 import { MULTICALL_ABI, MULTICALL_NETWORKS } from '../constants/multicall'
 import { getContract } from '../utils'
 import { useActiveWeb3React } from './index'
@@ -25,7 +24,12 @@ function useContract(address?: string, ABI?: any, withSignerIfPossible = true):
 }
 
 export function useV1FactoryContract(): Contract | null {
-  return useContract(V1_FACTORY_ADDRESS, IUniswapV1Factory, false)
+  const { chainId } = useActiveWeb3React()
+  return useContract(chainId === 1 ? V1_FACTORY_ADDRESS : undefined, V1_FACTORY_ABI, false)
+}
+
+export function useV1ExchangeContract(address: string): Contract | null {
+  return useContract(address, V1_EXCHANGE_ABI, false)
 }
 
 export function useTokenContract(tokenAddress?: string, withSignerIfPossible = true): Contract | null {

src/pages/AddLiquidity/index.tsx

@@ -36,7 +36,7 @@ import { useApproveCallback, ApprovalState } from '../../hooks/useApproveCallbac
 import { useWalletModalToggle } from '../../state/application/hooks'
 import AdvancedSwapDetailsDropdown from '../../components/swap/AdvancedSwapDetailsDropdown'
 
-export default function AddLiquidity({ match: { params } }: RouteComponentProps<{ tokens: string }>) {
+export default function AddLiquidity({ match: { params }, history }: RouteComponentProps<{ tokens: string }>) {
   useDefaultsFromURLMatchParams(params)
 
   const { account, chainId, library } = useActiveWeb3React()
@@ -311,6 +311,10 @@ export default function AddLiquidity({ match: { params } }: RouteComponentProps<
           <ConfirmationModal
             isOpen={showConfirm}
             onDismiss={() => {
+              if (attemptingTxn) {
+                history.push('/pool')
+                return
+              }
               setPendingConfirmation(true)
               setAttemptingTxn(false)
               setShowConfirm(false)

src/pages/App.tsx

@@ -21,7 +21,6 @@ const AppWrapper = styled.div`
   flex-flow: column;
   align-items: flex-start;
   overflow-x: hidden;
-  height: 100vh;
 `
 
 const HeaderWrapper = styled.div`
@@ -50,7 +49,7 @@ const BodyWrapper = styled.div`
 
 const BackgroundGradient = styled.div`
   width: 100%;
-  height: 200vh;
+  height: 100vh;
   background: ${({ theme }) => `radial-gradient(50% 50% at 50% 50%, ${theme.primary1} 0%, ${theme.bg1} 100%)`};
   position: absolute;
   top: 0px;
@@ -109,7 +108,6 @@ export default function App() {
           <BackgroundGradient />
         </AppWrapper>
       </Router>
-      <div id="popover-container" />
     </Suspense>
   )
 }

src/pages/CreatePool/index.tsx

@@ -8,7 +8,7 @@ import TokenLogo from '../../components/TokenLogo'
 import SearchModal from '../../components/SearchModal'
 import { Text } from 'rebass'
 import { Plus } from 'react-feather'
-import { TYPE, Link } from '../../theme'
+import { TYPE, StyledInternalLink } from '../../theme'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
 import { ButtonPrimary, ButtonDropwdown, ButtonDropwdownLight } from '../../components/Button'
 
@@ -27,7 +27,7 @@ enum STEP {
   SHOW_CREATE_PAGE = 'SHOW_CREATE_PAGE' // show create page
 }
 
-export default function CreatePool({ history, location }: RouteComponentProps) {
+export default function CreatePool({ location }: RouteComponentProps) {
   const { chainId } = useActiveWeb3React()
   const [showSearch, setShowSearch] = useState<boolean>(false)
   const [activeField, setActiveField] = useState<number>(Fields.TOKEN0)
@@ -116,8 +116,8 @@ export default function CreatePool({ history, location }: RouteComponentProps) {
           {pair ? ( // pair already exists - prompt to add liquidity to existing pool
             <AutoRow padding="10px" justify="center">
               <TYPE.body textAlign="center">
-                Pool already exists!
-                <Link onClick={() => history.push('/add/' + token0Address + '-' + token1Address)}> Join the pool.</Link>
+                Pool already exists!{' '}
+                <StyledInternalLink to={`/add/${token0Address}-${token1Address}`}>Join the pool.</StyledInternalLink>
               </TYPE.body>
             </AutoRow>
           ) : (

src/pages/MigrateV1/index.tsx

@@ -0,0 +1,40 @@
+import { JSBI, Token } from '@uniswap/sdk'
+import React, { useMemo } from 'react'
+import { RouteComponentProps } from 'react-router'
+import { useAllV1ExchangeAddresses } from '../../data/V1'
+import { useActiveWeb3React } from '../../hooks'
+import { useTokenBalances } from '../../state/wallet/hooks'
+
+const PLACEHOLDER_ACCOUNT = (
+  <div>
+    <h1>You must connect a wallet to use this tool.</h1>
+  </div>
+)
+
+/**
+ * Page component for migrating liquidity from V1
+ */
+export default function MigrateV1({}: RouteComponentProps) {
+  const { account, chainId } = useActiveWeb3React()
+  const v1ExchangeAddresses = useAllV1ExchangeAddresses()
+
+  const v1ExchangeTokens: Token[] = useMemo(() => {
+    return v1ExchangeAddresses.map(exchangeAddress => new Token(chainId, exchangeAddress, 18))
+  }, [chainId, v1ExchangeAddresses])
+
+  const tokenBalances = useTokenBalances(account, v1ExchangeTokens)
+
+  const unmigratedExchangeAddresses = useMemo(
+    () =>
+      Object.keys(tokenBalances).filter(tokenAddress =>
+        tokenBalances[tokenAddress] ? JSBI.greaterThan(tokenBalances[tokenAddress]?.raw, JSBI.BigInt(0)) : false
+      ),
+    [tokenBalances]
+  )
+
+  if (!account) {
+    return PLACEHOLDER_ACCOUNT
+  }
+
+  return <div>{unmigratedExchangeAddresses?.join('\n')}</div>
+}

src/pages/Pool/index.tsx

@@ -6,8 +6,9 @@ import { RouteComponentProps } from 'react-router-dom'
 import Question from '../../components/QuestionHelper'
 import SearchModal from '../../components/SearchModal'
 import PositionCard from '../../components/PositionCard'
+import { useUserProbablyHasV1Liquidity } from '../../data/V1'
 import { useTokenBalances } from '../../state/wallet/hooks'
-import { Link, TYPE } from '../../theme'
+import { LinkStyledButton, StyledInternalLink, TYPE } from '../../theme'
 import { Text } from 'rebass'
 import { LightCard } from '../../components/Card'
 import { RowBetween } from '../../components/Row'
@@ -58,6 +59,8 @@ export default function Pool({ history }: RouteComponentProps) {
       return <PositionCardWrapper key={i} dummyPair={pair} />
     })
 
+  const hasV1Liquidity = useUserProbablyHasV1Liquidity()
+
   return (
     <AppBody>
       <AutoColumn gap="lg" justify="center">
@@ -92,15 +95,16 @@ export default function Pool({ history }: RouteComponentProps) {
             )}
             {filteredExchangeList}
             <Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
-              {filteredExchangeList?.length !== 0 ? `Don't see a pool you joined? ` : 'Already joined a pool? '}{' '}
-              <Link
-                id="import-pool-link"
-                onClick={() => {
-                  history.push('/find')
-                }}
-              >
-                Import it.
-              </Link>
+              {!hasV1Liquidity ? (
+                <>
+                  {filteredExchangeList?.length !== 0 ? `Don't see a pool you joined? ` : 'Already joined a pool? '}{' '}
+                  <StyledInternalLink id="import-pool-link" to="/find">
+                    Import it.
+                  </StyledInternalLink>
+                </>
+              ) : (
+                <LinkStyledButton id="migrate-v1-liquidity-link">Migrate your V1 liquidity.</LinkStyledButton>
+              )}
             </Text>
           </AutoColumn>
           <FixedBottom>

src/pages/PoolFinder/index.tsx

@@ -15,7 +15,7 @@ import { useActiveWeb3React } from '../../hooks'
 import { useToken } from '../../hooks/Tokens'
 import { usePairAdder } from '../../state/user/hooks'
 import { useTokenBalanceTreatingWETHasETH } from '../../state/wallet/hooks'
-import { Link } from '../../theme'
+import { StyledInternalLink } from '../../theme'
 import AppBody from '../AppBody'
 
 enum Fields {
@@ -119,13 +119,9 @@ export default function PoolFinder({ history }: RouteComponentProps) {
             <LightCard padding="45px 10px">
               <AutoColumn gap="sm" justify="center">
                 <Text textAlign="center">Pool found, you don’t have liquidity on this pair yet.</Text>
-                <Link
-                  onClick={() => {
-                    history.push('/add/' + token0Address + '-' + token1Address)
-                  }}
-                >
+                <StyledInternalLink to={`/add/${token0Address}-${token1Address}`}>
                   <Text textAlign="center">Add liquidity to this pair instead.</Text>
-                </Link>
+                </StyledInternalLink>
               </AutoColumn>
             </LightCard>
           )
@@ -133,13 +129,7 @@ export default function PoolFinder({ history }: RouteComponentProps) {
           <LightCard padding="45px">
             <AutoColumn gap="sm" justify="center">
               <Text color="">No pool found.</Text>
-              <Link
-                onClick={() => {
-                  history.push('/add/' + token0Address + '-' + token1Address)
-                }}
-              >
-                Create pool?
-              </Link>
+              <StyledInternalLink to={`/add/${token0Address}-${token1Address}`}>Create pool?</StyledInternalLink>
             </AutoColumn>
           </LightCard>
         ) : (

src/pages/RemoveLiquidity/index.tsx

@@ -1,7 +1,7 @@
 import { splitSignature } from '@ethersproject/bytes'
 import { Contract } from '@ethersproject/contracts'
 import { Percent, WETH } from '@uniswap/sdk'
-import React, { useContext, useState } from 'react'
+import React, { useCallback, useContext, useState } from 'react'
 import { ArrowDown, Plus } from 'react-feather'
 import ReactGA from 'react-ga'
 import { RouteComponentProps } from 'react-router'
@@ -35,7 +35,7 @@ import AdvancedSwapDetailsDropdown from '../../components/swap/AdvancedSwapDetai
 import { Field } from '../../state/burn/actions'
 import { useWalletModalToggle } from '../../state/application/hooks'
 
-export default function RemoveLiquidity({ match: { params } }: RouteComponentProps<{ tokens: string }>) {
+export default function RemoveLiquidity({ match: { params }, history }: RouteComponentProps<{ tokens: string }>) {
   useDefaultsFromURLMatchParams(params)
 
   const { account, chainId, library } = useActiveWeb3React()
@@ -384,6 +384,13 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
     tokens[Field.TOKEN_A]?.symbol
   } and ${parsedAmounts[Field.TOKEN_B]?.toSignificant(6)} ${tokens[Field.TOKEN_B]?.symbol}`
 
+  const liquidityPercentChangeCallback = useCallback(
+    (value: number) => {
+      onUserInput(Field.LIQUIDITY_PERCENT, value.toString())
+    },
+    [onUserInput]
+  )
+
   return (
     <>
       <AppBody>
@@ -391,6 +398,10 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
           <ConfirmationModal
             isOpen={showConfirm}
             onDismiss={() => {
+              if (attemptingTxn) {
+                history.push('/pool')
+                return
+              }
               resetModalState()
               setShowConfirm(false)
               setShowAdvanced(false)
@@ -426,9 +437,7 @@ export default function RemoveLiquidity({ match: { params } }: RouteComponentPro
                   <>
                     <Slider
                       value={Number.parseInt(parsedAmounts[Field.LIQUIDITY_PERCENT].toFixed(0))}
-                      onChange={value => {
-                        onUserInput(Field.LIQUIDITY_PERCENT, value.toString())
-                      }}
+                      onChange={liquidityPercentChangeCallback}
                     />
                     <RowBetween>
                       <MaxButton onClick={() => onUserInput(Field.LIQUIDITY_PERCENT, '25')} width="20%">

src/state/application/updater.ts

@@ -1,6 +1,5 @@
-import { useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import { useActiveWeb3React } from '../../hooks'
-import useDebounce from '../../hooks/useDebounce'
 import useIsWindowVisible from '../../hooks/useIsWindowVisible'
 import { updateBlockNumber } from './actions'
 import { useDispatch } from 'react-redux'
@@ -10,41 +9,46 @@ export default function Updater() {
   const dispatch = useDispatch()
 
   const windowVisible = useIsWindowVisible()
-  const [maxBlockNumber, setMaxBlockNumber] = useState<number | null>(null)
-  // because blocks arrive in bunches with longer polling periods, we just want
-  // to process the latest one.
-  const debouncedMaxBlockNumber = useDebounce<number | null>(maxBlockNumber, 100)
 
-  // update block number
-  useEffect(() => {
-    if (!library || !chainId) return
+  const [state, setState] = useState<{ chainId: number | undefined; blockNumber: number | null }>({
+    chainId,
+    blockNumber: null
+  })
 
-    const blockListener = (blockNumber: number) => {
-      setMaxBlockNumber(maxBlockNumber => {
-        if (typeof maxBlockNumber !== 'number') return blockNumber
-        return Math.max(maxBlockNumber, blockNumber)
+  const blockNumberCallback = useCallback(
+    (blockNumber: number) => {
+      setState(state => {
+        if (chainId === state.chainId) {
+          if (typeof state.blockNumber !== 'number') return { chainId, blockNumber }
+          return { chainId, blockNumber: Math.max(blockNumber, state.blockNumber) }
+        }
+        return state
       })
-    }
+    },
+    [chainId, setState]
+  )
 
-    setMaxBlockNumber(null)
+  // attach/detach listeners
+  useEffect(() => {
+    if (!library || !chainId || !windowVisible) return
+
+    setState({ chainId, blockNumber: null })
 
     library
       .getBlockNumber()
-      .then(blockNumber => dispatch(updateBlockNumber({ chainId, blockNumber })))
-      .catch(error => console.error(`Failed to get block number for chainId ${chainId}`, error))
+      .then(blockNumberCallback)
+      .catch(error => console.error(`Failed to get block number for chainId: ${chainId}`, error))
 
-    library.on('block', blockListener)
+    library.on('block', blockNumberCallback)
     return () => {
-      library.removeListener('block', blockListener)
+      library.removeListener('block', blockNumberCallback)
     }
-  }, [dispatch, chainId, library])
+  }, [dispatch, chainId, library, blockNumberCallback, windowVisible])
 
   useEffect(() => {
-    if (!chainId || !debouncedMaxBlockNumber) return
-    if (windowVisible) {
-      dispatch(updateBlockNumber({ chainId, blockNumber: debouncedMaxBlockNumber }))
-    }
-  }, [chainId, debouncedMaxBlockNumber, windowVisible, dispatch])
+    if (!state.chainId || !state.blockNumber || !windowVisible) return
+    dispatch(updateBlockNumber({ chainId: state.chainId, blockNumber: state.blockNumber }))
+  }, [windowVisible, dispatch, state.blockNumber, state.chainId])
 
   return null
 }

src/state/multicall/actions.ts

@@ -30,8 +30,25 @@ export function parseCallKey(callKey: string): Call {
   }
 }
 
-export const addMulticallListeners = createAction<{ chainId: number; calls: Call[] }>('addMulticallListeners')
-export const removeMulticallListeners = createAction<{ chainId: number; calls: Call[] }>('removeMulticallListeners')
+export interface ListenerOptions {
+  // how often this data should be fetched, by default 1
+  readonly blocksPerFetch?: number
+}
+
+export const addMulticallListeners = createAction<{ chainId: number; calls: Call[]; options?: ListenerOptions }>(
+  'addMulticallListeners'
+)
+export const removeMulticallListeners = createAction<{ chainId: number; calls: Call[]; options?: ListenerOptions }>(
+  'removeMulticallListeners'
+)
+export const fetchingMulticallResults = createAction<{ chainId: number; calls: Call[]; fetchingBlockNumber: number }>(
+  'fetchingMulticallResults'
+)
+export const errorFetchingMulticallResults = createAction<{
+  chainId: number
+  calls: Call[]
+  fetchingBlockNumber: number
+}>('errorFetchingMulticallResults')
 export const updateMulticallResults = createAction<{
   chainId: number
   blockNumber: number

src/state/multicall/hooks.ts

@@ -1,12 +1,19 @@
-import { Interface } from '@ethersproject/abi'
+import { Interface, FunctionFragment } from '@ethersproject/abi'
 import { BigNumber } from '@ethersproject/bignumber'
 import { Contract } from '@ethersproject/contracts'
 import { useEffect, useMemo } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useActiveWeb3React } from '../../hooks'
-import useDebounce from '../../hooks/useDebounce'
+import { useBlockNumber } from '../application/hooks'
 import { AppDispatch, AppState } from '../index'
-import { addMulticallListeners, Call, removeMulticallListeners, parseCallKey, toCallKey } from './actions'
+import {
+  addMulticallListeners,
+  Call,
+  removeMulticallListeners,
+  parseCallKey,
+  toCallKey,
+  ListenerOptions
+} from './actions'
 
 export interface Result extends ReadonlyArray<any> {
   readonly [key: string]: any
@@ -27,8 +34,21 @@ function isValidMethodArgs(x: unknown): x is MethodArgs | undefined {
   )
 }
 
+interface CallResult {
+  readonly valid: boolean
+  readonly data: string | undefined
+  readonly blockNumber: number | undefined
+}
+
+const INVALID_RESULT: CallResult = { valid: false, blockNumber: undefined, data: undefined }
+
+// use this options object
+export const NEVER_RELOAD: ListenerOptions = {
+  blocksPerFetch: Infinity
+}
+
 // the lowest level call for subscribing to contract data
-function useCallsData(calls: (Call | undefined)[]): (string | undefined)[] {
+function useCallsData(calls: (Call | undefined)[], options?: ListenerOptions): CallResult[] {
   const { chainId } = useActiveWeb3React()
   const callResults = useSelector<AppState, AppState['multicall']['callResults']>(state => state.multicall.callResults)
   const dispatch = useDispatch<AppDispatch>()
@@ -44,17 +64,16 @@ function useCallsData(calls: (Call | undefined)[]): (string | undefined)[] {
     [calls]
   )
 
-  const debouncedSerializedCallKeys = useDebounce(serializedCallKeys, 20)
-
   // update listeners when there is an actual change that persists for at least 100ms
   useEffect(() => {
-    const callKeys: string[] = JSON.parse(debouncedSerializedCallKeys)
+    const callKeys: string[] = JSON.parse(serializedCallKeys)
     if (!chainId || callKeys.length === 0) return
     const calls = callKeys.map(key => parseCallKey(key))
     dispatch(
       addMulticallListeners({
         chainId,
-        calls
+        calls,
+        options
       })
     )
 
@@ -62,31 +81,72 @@ function useCallsData(calls: (Call | undefined)[]): (string | undefined)[] {
       dispatch(
         removeMulticallListeners({
           chainId,
-          calls
+          calls,
+          options
         })
       )
     }
-  }, [chainId, dispatch, debouncedSerializedCallKeys])
+  }, [chainId, dispatch, options, serializedCallKeys])
 
-  return useMemo(() => {
-    return calls.map<string | undefined>(call => {
-      if (!chainId || !call) return undefined
+  return useMemo(
+    () =>
+      calls.map<CallResult>(call => {
+        if (!chainId || !call) return INVALID_RESULT
 
-      const result = callResults[chainId]?.[toCallKey(call)]
-      if (!result || !result.data || result.data === '0x') {
-        return undefined
-      }
+        const result = callResults[chainId]?.[toCallKey(call)]
+        let data
+        if (result?.data && result?.data !== '0x') {
+          data = result.data
+        }
 
-      return result.data
-    })
-  }, [callResults, calls, chainId])
+        return { valid: true, data, blockNumber: result?.blockNumber }
+      }),
+    [callResults, calls, chainId]
+  )
+}
+
+interface CallState {
+  readonly valid: boolean
+  // the result, or undefined if loading or errored/no data
+  readonly result: Result | undefined
+  // true if the result has never been fetched
+  readonly loading: boolean
+  // true if the result is not for the latest block
+  readonly syncing: boolean
+  // true if the call was made and is synced, but the return data is invalid
+  readonly error: boolean
+}
+
+const INVALID_CALL_STATE: CallState = { valid: false, result: undefined, loading: false, syncing: false, error: false }
+const LOADING_CALL_STATE: CallState = { valid: true, result: undefined, loading: true, syncing: true, error: false }
+
+function toCallState(
+  result: CallResult | undefined,
+  contractInterface: Interface | undefined,
+  fragment: FunctionFragment | undefined,
+  latestBlockNumber: number | undefined
+): CallState {
+  if (!result) return INVALID_CALL_STATE
+  const { valid, data, blockNumber } = result
+  if (!valid) return INVALID_CALL_STATE
+  if (valid && !blockNumber) return LOADING_CALL_STATE
+  if (!contractInterface || !fragment || !latestBlockNumber) return LOADING_CALL_STATE
+  const success = data && data.length > 2
+  return {
+    valid: true,
+    loading: false,
+    syncing: (blockNumber ?? 0) < latestBlockNumber,
+    result: success && data ? contractInterface.decodeFunctionResult(fragment, data) : undefined,
+    error: !success
+  }
 }
 
 export function useSingleContractMultipleData(
   contract: Contract | null | undefined,
   methodName: string,
-  callInputs: OptionalMethodInputs[]
-): (Result | undefined)[] {
+  callInputs: OptionalMethodInputs[],
+  options?: ListenerOptions
+): CallState[] {
   const fragment = useMemo(() => contract?.interface?.getFunction(methodName), [contract, methodName])
 
   const calls = useMemo(
@@ -102,20 +162,22 @@ export function useSingleContractMultipleData(
     [callInputs, contract, fragment]
   )
 
-  const data = useCallsData(calls)
+  const results = useCallsData(calls, options)
+
+  const latestBlockNumber = useBlockNumber()
 
   return useMemo(() => {
-    if (!fragment || !contract) return []
-    return data.map(data => (data ? contract.interface.decodeFunctionResult(fragment, data) : undefined))
-  }, [contract, data, fragment])
+    return results.map(result => toCallState(result, contract?.interface, fragment, latestBlockNumber))
+  }, [fragment, contract, results, latestBlockNumber])
 }
 
 export function useMultipleContractSingleData(
   addresses: (string | undefined)[],
   contractInterface: Interface,
   methodName: string,
-  callInputs?: OptionalMethodInputs
-): (Result | undefined)[] {
+  callInputs?: OptionalMethodInputs,
+  options?: ListenerOptions
+): CallState[] {
   const fragment = useMemo(() => contractInterface.getFunction(methodName), [contractInterface, methodName])
   const callData: string | undefined = useMemo(
     () =>
@@ -140,19 +202,21 @@ export function useMultipleContractSingleData(
     [addresses, callData, fragment]
   )
 
-  const data = useCallsData(calls)
+  const results = useCallsData(calls, options)
+
+  const latestBlockNumber = useBlockNumber()
 
   return useMemo(() => {
-    if (!fragment) return []
-    return data.map(data => (data ? contractInterface.decodeFunctionResult(fragment, data) : undefined))
-  }, [contractInterface, data, fragment])
+    return results.map(result => toCallState(result, contractInterface, fragment, latestBlockNumber))
+  }, [fragment, results, contractInterface, latestBlockNumber])
 }
 
 export function useSingleCallResult(
   contract: Contract | null | undefined,
   methodName: string,
-  inputs?: OptionalMethodInputs
-): Result | undefined {
+  inputs?: OptionalMethodInputs,
+  options?: ListenerOptions
+): CallState {
   const fragment = useMemo(() => contract?.interface?.getFunction(methodName), [contract, methodName])
 
   const calls = useMemo<Call[]>(() => {
@@ -166,9 +230,10 @@ export function useSingleCallResult(
       : []
   }, [contract, fragment, inputs])
 
-  const data = useCallsData(calls)[0]
+  const result = useCallsData(calls, options)[0]
+  const latestBlockNumber = useBlockNumber()
+
   return useMemo(() => {
-    if (!contract || !fragment || !data) return undefined
-    return contract.interface.decodeFunctionResult(fragment, data)
-  }, [data, fragment, contract])
+    return toCallState(result, contract?.interface, fragment, latestBlockNumber)
+  }, [result, contract, fragment, latestBlockNumber])
 }

src/state/multicall/reducer.test.ts

@@ -0,0 +1,167 @@
+import { addMulticallListeners, removeMulticallListeners, updateMulticallResults } from './actions'
+import reducer, { MulticallState } from './reducer'
+import { Store, createStore } from '@reduxjs/toolkit'
+
+describe('multicall reducer', () => {
+  let store: Store<MulticallState>
+  beforeEach(() => {
+    store = createStore(reducer)
+  })
+
+  it('has correct initial state', () => {
+    expect(store.getState().callResults).toEqual({})
+    expect(store.getState().callListeners).toEqual(undefined)
+  })
+
+  describe('addMulticallListeners', () => {
+    it('adds listeners', () => {
+      store.dispatch(
+        addMulticallListeners({
+          chainId: 1,
+          calls: [
+            {
+              address: '0x',
+              callData: '0x'
+            }
+          ]
+        })
+      )
+      expect(store.getState()).toEqual({
+        callListeners: {
+          [1]: {
+            '0x-0x': {
+              [1]: 1
+            }
+          }
+        },
+        callResults: {}
+      })
+    })
+  })
+
+  describe('removeMulticallListeners', () => {
+    it('noop', () => {
+      store.dispatch(
+        removeMulticallListeners({
+          calls: [
+            {
+              address: '0x',
+              callData: '0x'
+            }
+          ],
+          chainId: 1
+        })
+      )
+      expect(store.getState()).toEqual({ callResults: {}, callListeners: {} })
+    })
+    it('removes listeners', () => {
+      store.dispatch(
+        addMulticallListeners({
+          chainId: 1,
+          calls: [
+            {
+              address: '0x',
+              callData: '0x'
+            }
+          ]
+        })
+      )
+      store.dispatch(
+        removeMulticallListeners({
+          calls: [
+            {
+              address: '0x',
+              callData: '0x'
+            }
+          ],
+          chainId: 1
+        })
+      )
+      expect(store.getState()).toEqual({ callResults: {}, callListeners: { [1]: { '0x-0x': {} } } })
+    })
+  })
+
+  describe('updateMulticallResults', () => {
+    it('updates data if not present', () => {
+      store.dispatch(
+        updateMulticallResults({
+          chainId: 1,
+          blockNumber: 1,
+          results: {
+            abc: '0x'
+          }
+        })
+      )
+      expect(store.getState()).toEqual({
+        callResults: {
+          [1]: {
+            abc: {
+              blockNumber: 1,
+              data: '0x'
+            }
+          }
+        }
+      })
+    })
+    it('updates old data', () => {
+      store.dispatch(
+        updateMulticallResults({
+          chainId: 1,
+          blockNumber: 1,
+          results: {
+            abc: '0x'
+          }
+        })
+      )
+      store.dispatch(
+        updateMulticallResults({
+          chainId: 1,
+          blockNumber: 2,
+          results: {
+            abc: '0x2'
+          }
+        })
+      )
+      expect(store.getState()).toEqual({
+        callResults: {
+          [1]: {
+            abc: {
+              blockNumber: 2,
+              data: '0x2'
+            }
+          }
+        }
+      })
+    })
+    it('ignores late updates', () => {
+      store.dispatch(
+        updateMulticallResults({
+          chainId: 1,
+          blockNumber: 2,
+          results: {
+            abc: '0x2'
+          }
+        })
+      )
+      store.dispatch(
+        updateMulticallResults({
+          chainId: 1,
+          blockNumber: 1,
+          results: {
+            abc: '0x1'
+          }
+        })
+      )
+      expect(store.getState()).toEqual({
+        callResults: {
+          [1]: {
+            abc: {
+              blockNumber: 2,
+              data: '0x2'
+            }
+          }
+        }
+      })
+    })
+  })
+})

src/state/multicall/reducer.ts

@@ -1,53 +1,103 @@
 import { createReducer } from '@reduxjs/toolkit'
-import { addMulticallListeners, removeMulticallListeners, toCallKey, updateMulticallResults } from './actions'
+import {
+  addMulticallListeners,
+  errorFetchingMulticallResults,
+  fetchingMulticallResults,
+  removeMulticallListeners,
+  toCallKey,
+  updateMulticallResults
+} from './actions'
 
-interface MulticallState {
-  callListeners: {
+export interface MulticallState {
+  callListeners?: {
+    // on a per-chain basis
     [chainId: number]: {
-      [callKey: string]: number
+      // stores for each call key the listeners' preferences
+      [callKey: string]: {
+        // stores how many listeners there are per each blocks per fetch preference
+        [blocksPerFetch: number]: number
+      }
     }
   }
 
   callResults: {
     [chainId: number]: {
       [callKey: string]: {
-        data: string | null
-        blockNumber: number
+        data?: string | null
+        blockNumber?: number
+        fetchingBlockNumber?: number
       }
     }
   }
 }
 
 const initialState: MulticallState = {
-  callListeners: {},
   callResults: {}
 }
 
 export default createReducer(initialState, builder =>
   builder
-    .addCase(addMulticallListeners, (state, { payload: { calls, chainId } }) => {
-      state.callListeners[chainId] = state.callListeners[chainId] ?? {}
+    .addCase(addMulticallListeners, (state, { payload: { calls, chainId, options: { blocksPerFetch = 1 } = {} } }) => {
+      const listeners: MulticallState['callListeners'] = state.callListeners
+        ? state.callListeners
+        : (state.callListeners = {})
+      listeners[chainId] = listeners[chainId] ?? {}
       calls.forEach(call => {
         const callKey = toCallKey(call)
-        state.callListeners[chainId][callKey] = (state.callListeners[chainId][callKey] ?? 0) + 1
+        listeners[chainId][callKey] = listeners[chainId][callKey] ?? {}
+        listeners[chainId][callKey][blocksPerFetch] = (listeners[chainId][callKey][blocksPerFetch] ?? 0) + 1
       })
     })
-    .addCase(removeMulticallListeners, (state, { payload: { chainId, calls } }) => {
-      if (!state.callListeners[chainId]) return
+    .addCase(
+      removeMulticallListeners,
+      (state, { payload: { chainId, calls, options: { blocksPerFetch = 1 } = {} } }) => {
+        const listeners: MulticallState['callListeners'] = state.callListeners
+          ? state.callListeners
+          : (state.callListeners = {})
+
+        if (!listeners[chainId]) return
+        calls.forEach(call => {
+          const callKey = toCallKey(call)
+          if (!listeners[chainId][callKey]) return
+          if (!listeners[chainId][callKey][blocksPerFetch]) return
+
+          if (listeners[chainId][callKey][blocksPerFetch] === 1) {
+            delete listeners[chainId][callKey][blocksPerFetch]
+          } else {
+            listeners[chainId][callKey][blocksPerFetch]--
+          }
+        })
+      }
+    )
+    .addCase(fetchingMulticallResults, (state, { payload: { chainId, fetchingBlockNumber, calls } }) => {
+      state.callResults[chainId] = state.callResults[chainId] ?? {}
       calls.forEach(call => {
         const callKey = toCallKey(call)
-        if (state.callListeners[chainId][callKey] === 1) {
-          delete state.callListeners[chainId][callKey]
+        const current = state.callResults[chainId][callKey]
+        if (!current) {
+          state.callResults[chainId][callKey] = {
+            fetchingBlockNumber
+          }
         } else {
-          state.callListeners[chainId][callKey]--
+          if (current.fetchingBlockNumber ?? 0 >= fetchingBlockNumber) return
+          state.callResults[chainId][callKey].fetchingBlockNumber = fetchingBlockNumber
         }
       })
     })
+    .addCase(errorFetchingMulticallResults, (state, { payload: { fetchingBlockNumber, chainId, calls } }) => {
+      state.callResults[chainId] = state.callResults[chainId] ?? {}
+      calls.forEach(call => {
+        const callKey = toCallKey(call)
+        const current = state.callResults[chainId][callKey]
+        if (current && current.fetchingBlockNumber !== fetchingBlockNumber) return
+        delete current.fetchingBlockNumber
+      })
+    })
     .addCase(updateMulticallResults, (state, { payload: { chainId, results, blockNumber } }) => {
       state.callResults[chainId] = state.callResults[chainId] ?? {}
       Object.keys(results).forEach(callKey => {
         const current = state.callResults[chainId][callKey]
-        if (current && current.blockNumber > blockNumber) return
+        if ((current?.blockNumber ?? 0) > blockNumber) return
         state.callResults[chainId][callKey] = {
           data: results[callKey],
           blockNumber

src/state/multicall/updater.test.ts

@@ -0,0 +1,168 @@
+import { activeListeningKeys, outdatedListeningKeys } from './updater'
+
+describe('multicall updater', () => {
+  describe('#activeListeningKeys', () => {
+    it('ignores 0, returns call key to block age key', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                4: 2, // 2 listeners care about 4 block old data
+                1: 0 // 0 listeners care about 1 block old data
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 4
+      })
+    })
+    it('applies min', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                4: 2, // 2 listeners care about 4 block old data
+                3: 1, // 1 listener cares about 3 block old data
+                1: 0 // 0 listeners care about 1 block old data
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 3
+      })
+    })
+    it('works for infinity', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                4: 2, // 2 listeners care about 4 block old data
+                1: 0 // 0 listeners care about 1 block old data
+              },
+              ['def']: {
+                Infinity: 2
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 4,
+        def: Infinity
+      })
+    })
+    it('multiple keys', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                4: 2, // 2 listeners care about 4 block old data
+                1: 0 // 0 listeners care about 1 block old data
+              },
+              ['def']: {
+                2: 1,
+                5: 2
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 4,
+        def: 2
+      })
+    })
+    it('ignores negative numbers', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                4: 2,
+                1: -1,
+                [-3]: 4
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 4
+      })
+    })
+    it('applies min to infinity', () => {
+      expect(
+        activeListeningKeys(
+          {
+            [1]: {
+              ['abc']: {
+                Infinity: 2, // 2 listeners care about any data
+                4: 2, // 2 listeners care about 4 block old data
+                1: 0 // 0 listeners care about 1 block old data
+              }
+            }
+          },
+          1
+        )
+      ).toEqual({
+        abc: 4
+      })
+    })
+  })
+
+  describe('#outdatedListeningKeys', () => {
+    it('returns empty if missing block number or chain id', () => {
+      expect(outdatedListeningKeys({}, { abc: 2 }, undefined, undefined)).toEqual([])
+      expect(outdatedListeningKeys({}, { abc: 2 }, 1, undefined)).toEqual([])
+      expect(outdatedListeningKeys({}, { abc: 2 }, undefined, 1)).toEqual([])
+    })
+    it('returns everything for no results', () => {
+      expect(outdatedListeningKeys({}, { abc: 2, def: 3 }, 1, 1)).toEqual(['abc', 'def'])
+    })
+    it('returns only outdated keys', () => {
+      expect(
+        outdatedListeningKeys({ [1]: { abc: { data: '0x', blockNumber: 2 } } }, { abc: 1, def: 1 }, 1, 2)
+      ).toEqual(['def'])
+    })
+    it('returns only keys not being fetched', () => {
+      expect(
+        outdatedListeningKeys(
+          {
+            [1]: { abc: { data: '0x', blockNumber: 2 }, def: { fetchingBlockNumber: 2 } }
+          },
+          { abc: 1, def: 1 },
+          1,
+          2
+        )
+      ).toEqual([])
+    })
+    it('returns keys being fetched for old blocks', () => {
+      expect(
+        outdatedListeningKeys(
+          { [1]: { abc: { data: '0x', blockNumber: 2 }, def: { fetchingBlockNumber: 1 } } },
+          { abc: 1, def: 1 },
+          1,
+          2
+        )
+      ).toEqual(['def'])
+    })
+    it('respects blocks per fetch', () => {
+      expect(
+        outdatedListeningKeys(
+          { [1]: { abc: { data: '0x', blockNumber: 2 }, def: { data: '0x', fetchingBlockNumber: 1 } } },
+          { abc: 2, def: 2 },
+          1,
+          3
+        )
+      ).toEqual(['def'])
+    })
+  })
+})

src/state/multicall/updater.tsx

@@ -7,48 +7,118 @@ import useDebounce from '../../hooks/useDebounce'
 import chunkArray from '../../utils/chunkArray'
 import { useBlockNumber } from '../application/hooks'
 import { AppDispatch, AppState } from '../index'
-import { parseCallKey, updateMulticallResults } from './actions'
+import {
+  errorFetchingMulticallResults,
+  fetchingMulticallResults,
+  parseCallKey,
+  updateMulticallResults
+} from './actions'
 
 // chunk calls so we do not exceed the gas limit
-const CALL_CHUNK_SIZE = 250
+const CALL_CHUNK_SIZE = 500
+
+/**
+ * From the current all listeners state, return each call key mapped to the
+ * minimum number of blocks per fetch. This is how often each key must be fetched.
+ * @param allListeners the all listeners state
+ * @param chainId the current chain id
+ */
+export function activeListeningKeys(
+  allListeners: AppState['multicall']['callListeners'],
+  chainId?: number
+): { [callKey: string]: number } {
+  if (!allListeners || !chainId) return {}
+  const listeners = allListeners[chainId]
+  if (!listeners) return {}
+
+  return Object.keys(listeners).reduce<{ [callKey: string]: number }>((memo, callKey) => {
+    const keyListeners = listeners[callKey]
+
+    memo[callKey] = Object.keys(keyListeners)
+      .filter(key => {
+        const blocksPerFetch = parseInt(key)
+        if (blocksPerFetch <= 0) return false
+        return keyListeners[blocksPerFetch] > 0
+      })
+      .reduce((previousMin, current) => {
+        return Math.min(previousMin, parseInt(current))
+      }, Infinity)
+    return memo
+  }, {})
+}
+
+/**
+ * Return the keys that need to be refetched
+ * @param callResults current call result state
+ * @param listeningKeys each call key mapped to how old the data can be in blocks
+ * @param chainId the current chain id
+ * @param latestBlockNumber the latest block number
+ */
+export function outdatedListeningKeys(
+  callResults: AppState['multicall']['callResults'],
+  listeningKeys: { [callKey: string]: number },
+  chainId: number | undefined,
+  latestBlockNumber: number | undefined
+): string[] {
+  if (!chainId || !latestBlockNumber) return []
+  const results = callResults[chainId]
+  // no results at all, load everything
+  if (!results) return Object.keys(listeningKeys)
+
+  return Object.keys(listeningKeys).filter(callKey => {
+    const blocksPerFetch = listeningKeys[callKey]
+
+    const data = callResults[chainId][callKey]
+    // no data, must fetch
+    if (!data) return true
+
+    const minDataBlockNumber = latestBlockNumber - (blocksPerFetch - 1)
+
+    // already fetching it for a recent enough block, don't refetch it
+    if (data.fetchingBlockNumber && data.fetchingBlockNumber >= minDataBlockNumber) return false
+
+    // if data is newer than minDataBlockNumber, don't fetch it
+    return !(data.blockNumber && data.blockNumber >= minDataBlockNumber)
+  })
+}
 
 export default function Updater() {
   const dispatch = useDispatch<AppDispatch>()
   const state = useSelector<AppState, AppState['multicall']>(state => state.multicall)
+  // wait for listeners to settle before triggering updates
+  const debouncedListeners = useDebounce(state.callListeners, 100)
   const latestBlockNumber = useBlockNumber()
   const { chainId } = useActiveWeb3React()
   const multicallContract = useMulticallContract()
 
-  const listeningKeys = useMemo(() => {
-    if (!chainId || !state.callListeners[chainId]) return []
-    return Object.keys(state.callListeners[chainId]).filter(callKey => state.callListeners[chainId][callKey] > 0)
-  }, [state.callListeners, chainId])
-
-  const debouncedResults = useDebounce(state.callResults, 20)
-  const debouncedListeningKeys = useDebounce(listeningKeys, 20)
+  const listeningKeys: { [callKey: string]: number } = useMemo(() => {
+    return activeListeningKeys(debouncedListeners, chainId)
+  }, [debouncedListeners, chainId])
 
   const unserializedOutdatedCallKeys = useMemo(() => {
-    if (!chainId || !debouncedResults[chainId]) return debouncedListeningKeys
-    if (!latestBlockNumber) return []
-
-    return debouncedListeningKeys.filter(key => {
-      const data = debouncedResults[chainId][key]
-      return !data || data.blockNumber < latestBlockNumber
-    })
-  }, [chainId, debouncedResults, debouncedListeningKeys, latestBlockNumber])
+    return outdatedListeningKeys(state.callResults, listeningKeys, chainId, latestBlockNumber)
+  }, [chainId, state.callResults, listeningKeys, latestBlockNumber])
 
   const serializedOutdatedCallKeys = useMemo(() => JSON.stringify(unserializedOutdatedCallKeys.sort()), [
     unserializedOutdatedCallKeys
   ])
 
   useEffect(() => {
+    if (!latestBlockNumber || !chainId || !multicallContract) return
+
     const outdatedCallKeys: string[] = JSON.parse(serializedOutdatedCallKeys)
-    if (!multicallContract || !chainId || outdatedCallKeys.length === 0) return
+    if (outdatedCallKeys.length === 0) return
     const calls = outdatedCallKeys.map(key => parseCallKey(key))
 
     const chunkedCalls = chunkArray(calls, CALL_CHUNK_SIZE)
 
-    console.debug('Firing off chunked calls', chunkedCalls)
+    dispatch(
+      fetchingMulticallResults({
+        calls,
+        chainId,
+        fetchingBlockNumber: latestBlockNumber
+      })
+    )
 
     chunkedCalls.forEach((chunk, index) =>
       multicallContract
@@ -73,9 +143,16 @@ export default function Updater() {
         })
         .catch((error: any) => {
           console.error('Failed to fetch multicall chunk', chunk, chainId, error)
+          dispatch(
+            errorFetchingMulticallResults({
+              calls: chunk,
+              chainId,
+              fetchingBlockNumber: latestBlockNumber
+            })
+          )
         })
     )
-  }, [chainId, multicallContract, dispatch, serializedOutdatedCallKeys])
+  }, [chainId, multicallContract, dispatch, serializedOutdatedCallKeys, latestBlockNumber])
 
   return null
 }

src/state/user/hooks.tsx

@@ -1,7 +1,9 @@
-import { ChainId, JSBI, Pair, Token, TokenAmount, WETH } from '@uniswap/sdk'
-import { useActiveWeb3React } from '../../hooks'
+import { ChainId, JSBI, Pair, Token, TokenAmount } from '@uniswap/sdk'
+import flatMap from 'lodash.flatmap'
 import { useCallback, useMemo } from 'react'
 import { shallowEqual, useDispatch, useSelector } from 'react-redux'
+
+import { useActiveWeb3React } from '../../hooks'
 import { useAllTokens } from '../../hooks/Tokens'
 import { getTokenInfoWithFallback, isAddress } from '../../utils'
 import { AppDispatch, AppState } from '../index'
@@ -14,7 +16,7 @@ import {
   SerializedToken,
   updateUserDarkMode
 } from './actions'
-import flatMap from 'lodash.flatmap'
+import { BASES_TO_TRACK_LIQUIDITY_FOR, DUMMY_PAIRS_TO_PIN } from '../../constants'
 
 function serializeToken(token: Token): SerializedToken {
   return {
@@ -154,16 +156,14 @@ export function useTokenWarningDismissal(chainId?: number, token?: Token): [bool
   }, [chainId, token, dismissalState, dispatch])
 }
 
-const bases = [
-  ...Object.values(WETH),
-  new Token(ChainId.MAINNET, '0x6B175474E89094C44Da98b954EedeAC495271d0F', 18, 'DAI', 'Dai Stablecoin'),
-  new Token(ChainId.MAINNET, '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', 6, 'USDC', 'USD//C')
-]
-
 export function useAllDummyPairs(): Pair[] {
   const { chainId } = useActiveWeb3React()
   const tokens = useAllTokens()
 
+  // pinned pairs
+  const pinnedPairs = useMemo(() => DUMMY_PAIRS_TO_PIN[chainId as ChainId] ?? [], [chainId])
+
+  // pairs for every token against every base
   const generatedPairs: Pair[] = useMemo(
     () =>
       flatMap(
@@ -173,9 +173,8 @@ export function useAllDummyPairs(): Pair[] {
         token => {
           // for each token on the current chain,
           return (
-            bases
-              // loop through all the bases valid for the current chain,
-              .filter(base => base.chainId === chainId)
+            // loop though all bases on the current chain
+            (BASES_TO_TRACK_LIQUIDITY_FOR[chainId as ChainId] ?? [])
               // to construct pairs of the given token with each base
               .map(base => {
                 if (base.equals(token)) {
@@ -191,8 +190,8 @@ export function useAllDummyPairs(): Pair[] {
     [tokens, chainId]
   )
 
+  // pairs saved by users
   const savedSerializedPairs = useSelector<AppState, AppState['user']['pairs']>(({ user: { pairs } }) => pairs)
-
   const userPairs = useMemo(
     () =>
       Object.values<SerializedPair>(savedSerializedPairs[chainId ?? -1] ?? {}).map(
@@ -208,7 +207,8 @@ export function useAllDummyPairs(): Pair[] {
   return useMemo(() => {
     const cache: { [pairKey: string]: boolean } = {}
     return (
-      generatedPairs
+      pinnedPairs
+        .concat(generatedPairs)
         .concat(userPairs)
         // filter out duplicate pairs
         .filter(pair => {
@@ -219,5 +219,5 @@ export function useAllDummyPairs(): Pair[] {
           return (cache[pairKey] = true)
         })
     )
-  }, [generatedPairs, userPairs])
+  }, [pinnedPairs, generatedPairs, userPairs])
 }

src/state/wallet/hooks.ts

@@ -33,7 +33,7 @@ export function useETHBalances(uncheckedAddresses?: (string | undefined)[]): { [
   return useMemo(
     () =>
       addresses.reduce<{ [address: string]: JSBI | undefined }>((memo, address, i) => {
-        const value = results?.[i]?.[0]
+        const value = results?.[i]?.result?.[0]
         if (value) memo[address] = JSBI.BigInt(value.toString())
         return memo
       }, {}),
@@ -61,7 +61,7 @@ export function useTokenBalances(
     () =>
       address && validatedTokens.length > 0
         ? validatedTokens.reduce<{ [tokenAddress: string]: TokenAmount | undefined }>((memo, token, i) => {
-            const value = balances?.[i]?.[0]
+            const value = balances?.[i]?.result?.[0]
             const amount = value ? JSBI.BigInt(value.toString()) : undefined
             if (amount) {
               memo[token.address] = new TokenAmount(token, amount)

src/theme/components.tsx

@@ -1,5 +1,6 @@
 import React, { HTMLProps, useCallback } from 'react'
 import ReactGA from 'react-ga'
+import { Link } from 'react-router-dom'
 import styled, { keyframes } from 'styled-components'
 import { darken } from 'polished'
 import { X } from 'react-feather'
@@ -38,6 +39,51 @@ export const CloseIcon = styled(X)<{ onClick: () => void }>`
   cursor: pointer;
 `
 
+// A button that triggers some onClick result, but looks like a link.
+export const LinkStyledButton = styled.button`
+  border: none;
+  text-decoration: none;
+  background: none;
+
+  cursor: pointer;
+  color: ${({ theme }) => theme.primary1};
+  font-weight: 500;
+
+  :hover {
+    text-decoration: underline;
+  }
+
+  :focus {
+    outline: none;
+    text-decoration: underline;
+  }
+
+  :active {
+    text-decoration: none;
+  }
+`
+
+// An internal link from the react-router-dom library that is correctly styled
+export const StyledInternalLink = styled(Link)`
+  text-decoration: none;
+  cursor: pointer;
+  color: ${({ theme }) => theme.primary1};
+  font-weight: 500;
+
+  :hover {
+    text-decoration: underline;
+  }
+
+  :focus {
+    outline: none;
+    text-decoration: underline;
+  }
+
+  :active {
+    text-decoration: none;
+  }
+`
+
 const StyledLink = styled.a`
   text-decoration: none;
   cursor: pointer;
@@ -58,20 +104,19 @@ const StyledLink = styled.a`
   }
 `
 
-export function Link({
-  onClick,
+/**
+ * Outbound link that handles firing google analytics events
+ */
+export function ExternalLink({
   target = '_blank',
   href,
   rel = 'noopener noreferrer',
   ...rest
-}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref'>) {
+}: Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'ref' | 'onClick'> & { href: string }) {
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLAnchorElement>) => {
-      onClick && onClick(event) // first call back into the original onClick
-      if (!href) return
-
-      // don't prevent default, don't redirect
-      if (target === '_blank') {
+      // don't prevent default, don't redirect if it's a new tab
+      if (target === '_blank' || event.ctrlKey || event.metaKey) {
         ReactGA.outboundLink({ label: href }, () => {
           console.debug('Fired outbound link event', href)
         })
@@ -83,7 +128,7 @@ export function Link({
         })
       }
     },
-    [href, onClick, target]
+    [href, target]
   )
   return <StyledLink target={target} rel={rel} href={href} onClick={handleClick} {...rest} />
 }

src/theme/index.tsx

@@ -177,21 +177,12 @@ html,
 body {
   margin: 0;
   padding: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;    
 }
 
 * {
   box-sizing: border-box;
 }
 
-body > div {
-  height: 100%;
-  overflow: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
 html {
   font-size: 16px;
   font-variant: none;