fix: removing and adding liquidity when the price of the pool is at the min/max price

fixes https://github.com/Uniswap/uniswap-interface/issues/1641

.env

@@ -1,5 +1,4 @@
-REACT_APP_CHAIN_ID="1"
-REACT_APP_NETWORK_URL="https://mainnet.infura.io/v3/4bf032f2d38a4ed6bb975b80d6340847"
+REACT_APP_INFURA_KEY="4bf032f2d38a4ed6bb975b80d6340847"
 REACT_APP_WALLETCONNECT_BRIDGE_URL="https://uniswap.bridge.walletconnect.org"
 # Because we use storybook which has its own babel-loader dependency @ 8.2.2, where react-scripts uses 8.1.0
 SKIP_PREFLIGHT_CHECK=true

.env.production

@@ -1,5 +1,4 @@
-REACT_APP_CHAIN_ID="1"
-REACT_APP_NETWORK_URL="https://mainnet.infura.io/v3/099fc58e0de9451d80b18d7c74caa7c1"
+REACT_APP_INFURA_KEY="099fc58e0de9451d80b18d7c74caa7c1"
 REACT_APP_PORTIS_ID="c0e2bf01-4b08-4fd5-ac7b-8e26b58cd236"
 REACT_APP_FORTMATIC_KEY="pk_live_F937DF033A1666BF"
 REACT_APP_GOOGLE_ANALYTICS_ID="UA-128182339-4"

.github/workflows/check-pr-title.yaml

@@ -0,0 +1,17 @@
+name: "Check PR Title"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+
+jobs:
+  check-pr-title:
+    name: Check PR Title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/action-semantic-pull-request@v3.4.0
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -19,7 +19,7 @@ jobs:
 
       - name: Bump version and push tag
         id: github_tag_action
-        uses: mathieudutour/github-tag-action@v4.5
+        uses: mathieudutour/github-tag-action@331898d5052eedac9b15fec867b5ba66ebf9b692
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           release_branches: .*
@@ -94,19 +94,13 @@ jobs:
             The latest release is always accessible via our alias to the Cloudflare IPFS gateway at [app.uniswap.org](https://app.uniswap.org).
 
             You can also access the Uniswap Interface directly from an IPFS gateway.
-            The Uniswap interface uses [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to store your settings.
-            **Beware** that other sites you access via the _same_ IPFS gateway can read and modify your settings on the Uniswap interface without your permission.
-            You can avoid this issue by using a subdomain IPFS gateway, or our alias to the latest release at [app.uniswap.org](https://app.uniswap.org).
-            The preferred URLs below are safe to use to access this specific release.
+            **BEWARE**: The Uniswap interface uses [`localStorage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to remember your settings, such as which tokens you have imported.
+            **You should always use an IPFS gateway that enforces origin separation**, or our alias to the latest release at [app.uniswap.org](https://app.uniswap.org).
+            Your Uniswap settings are never remembered across different URLs.
 
-            Preferred URLs:
+            IPFS gateways:
             - https://${{ steps.convert_cidv0.outputs.cidv1 }}.ipfs.dweb.link/
             - https://${{ steps.convert_cidv0.outputs.cidv1 }}.ipfs.cf-ipfs.com/
             - [ipfs://${{ steps.upload.outputs.hash }}/](ipfs://${{ steps.upload.outputs.hash }}/)
 
-            Other IPFS gateways:
-            - https://cloudflare-ipfs.com/ipfs/${{ steps.upload.outputs.hash }}/
-            - https://ipfs.infura.io/ipfs/${{ steps.upload.outputs.hash }}/
-            - https://ipfs.io/ipfs/${{ steps.upload.outputs.hash }}/
-
             ${{ needs.bump_version.outputs.changelog }}

.storybook/preview.tsx

@@ -4,7 +4,7 @@ import { createWeb3ReactRoot, Web3ReactProvider } from '@web3-react/core'
 import React from 'react'
 import { Provider as StoreProvider } from 'react-redux'
 import { ThemeProvider as SCThemeProvider } from 'styled-components'
-import { NetworkContextName } from '../src/constants'
+import { NetworkContextName } from '../src/constants/misc'
 import store from '../src/state'
 import { FixedGlobalStyle, theme, ThemedGlobalStyle } from '../src/theme'
 import getLibrary from '../src/utils/getLibrary'

README.md

@@ -27,7 +27,7 @@ or visit [app.uniswap.org](https://app.uniswap.org).
 ### Install Dependencies
 
 ```bash
-yarn
+yarn install
 ```
 
 ### Run
@@ -36,26 +36,22 @@ yarn
 yarn start
 ```
 
-### Configuring the environment (optional)
-
-To have the interface default to a different network when a wallet is not connected:
-
-1. Make a copy of `.env` named `.env.local`
-2. Change `REACT_APP_NETWORK_ID` to `"{YOUR_NETWORK_ID}"`
-3. Change `REACT_APP_NETWORK_URL` to e.g. `"https://{YOUR_NETWORK_ID}.infura.io/v3/{YOUR_INFURA_KEY}"`
-
-Note that the interface only works on testnets where both
-[Uniswap V2](https://uniswap.org/docs/v2/smart-contracts/factory/) and
-[multicall](https://github.com/makerdao/multicall) are deployed.
-The interface will not work on other networks.
-
 ## Contributions
 
 **Please open all pull requests against the `main` branch.**
 CI checks will run against all PRs.
 
-## Accessing Uniswap Interface V1
+## Accessing Uniswap V2
 
-The Uniswap Interface supports swapping against, and migrating or removing liquidity from Uniswap V1. However,
-if you would like to use Uniswap V1, the Uniswap V1 interface for mainnet and testnets is accessible via IPFS gateways
+The Uniswap Interface supports swapping, adding liquidity, removing liquidity and migrating liquidity for 
+Uniswap protocol V2.
+
+- Swap on Uniswap V2: https://app.uniswap.org/#/swap?use=v2
+- View V2 liquidity: https://app.uniswap.org/#/pool/v2
+- Add V2 liquidity: https://app.uniswap.org/#/add/v2
+- Migrate V2 liquidity to V3: https://app.uniswap.org/#/migrate/v2
+
+## Accessing Uniswap V1
+ 
+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-interface/releases/tag/v1.0.0).

babel-plugin-macros.config.js

@@ -0,0 +1,8 @@
+const isDev = process.env.NODE_ENV !== 'production'
+
+module.exports = {
+  styledComponents: {
+    fileName: isDev,
+    displayName: isDev,
+  },
+}

package.json

@@ -51,13 +51,13 @@
     "@uniswap/v2-sdk": "^3.0.0-alpha.0",
     "@uniswap/v3-core": "1.0.0",
     "@uniswap/v3-periphery": "1.0.0",
-    "@uniswap/v3-sdk": "^3.0.0-alpha.1",
+    "@uniswap/v3-sdk": "^3.0.0-alpha.6",
     "@web3-react/core": "^6.0.9",
     "@web3-react/fortmatic-connector": "^6.0.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/portis-connector": "^6.0.9",
-    "@web3-react/walletconnect-connector": "^6.1.1",
-    "@web3-react/walletlink-connector": "^6.0.9",
+    "@web3-react/walletconnect-connector": "^6.2.0",
+    "@web3-react/walletlink-connector": "^6.2.0",
     "ajv": "^6.12.3",
     "cids": "^1.0.0",
     "copy-to-clipboard": "^3.2.0",
@@ -116,10 +116,13 @@
     "workbox-routing": "^6.1.0",
     "workbox-strategies": "^6.1.0"
   },
+  "resolutions": {
+    "@walletconnect/web3-provider": "1.4.2-rc.2"
+  },
   "scripts": {
     "compile-contract-types": "yarn compile-external-abi-types && yarn compile-v3-contract-types",
-    "compile-external-abi-types": "npx typechain --target ethers-v5 --out-dir src/abis/types './src/abis/**/*.json'",
-    "compile-v3-contract-types": "npx typechain --target ethers-v5 --out-dir src/types/v3 './node_modules/@uniswap/?(v3-core|v3-periphery)/artifacts/contracts/**/*.json'",
+    "compile-external-abi-types": "typechain --target ethers-v5 --out-dir src/abis/types './src/abis/**/*.json'",
+    "compile-v3-contract-types": "typechain --target ethers-v5 --out-dir src/types/v3 './node_modules/@uniswap/?(v3-core|v3-periphery)/artifacts/contracts/**/*.json'",
     "build": "yarn compile-contract-types && react-scripts build",
     "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'",
     "postinstall": "yarn compile-contract-types",

src/abis/migrator.json

@@ -1,55 +0,0 @@
-[
-  {
-    "inputs": [
-      {
-        "internalType": "address",
-        "name": "_factoryV1",
-        "type": "address"
-      },
-      {
-        "internalType": "address",
-        "name": "_router",
-        "type": "address"
-      }
-    ],
-    "stateMutability": "nonpayable",
-    "type": "constructor"
-  },
-  {
-    "inputs": [
-      {
-        "internalType": "address",
-        "name": "token",
-        "type": "address"
-      },
-      {
-        "internalType": "uint256",
-        "name": "amountTokenMin",
-        "type": "uint256"
-      },
-      {
-        "internalType": "uint256",
-        "name": "amountETHMin",
-        "type": "uint256"
-      },
-      {
-        "internalType": "address",
-        "name": "to",
-        "type": "address"
-      },
-      {
-        "internalType": "uint256",
-        "name": "deadline",
-        "type": "uint256"
-      }
-    ],
-    "name": "migrate",
-    "outputs": [],
-    "stateMutability": "nonpayable",
-    "type": "function"
-  },
-  {
-    "stateMutability": "payable",
-    "type": "receive"
-  }
-]

src/abis/staking-rewards.ts

@@ -1,6 +0,0 @@
-import { Interface } from '@ethersproject/abi'
-import { abi as STAKING_REWARDS_ABI } from '@uniswap/liquidity-staker/build/StakingRewards.json'
-
-const STAKING_REWARDS_INTERFACE = new Interface(STAKING_REWARDS_ABI)
-
-export { STAKING_REWARDS_INTERFACE }

src/components/AccountDetails/Copy.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import useCopyClipboard from '../../hooks/useCopyClipboard'
 
 import { LinkStyledButton } from '../../theme'

src/components/AccountDetails/Transaction.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { CheckCircle, Triangle } from 'react-feather'
 
-import { useActiveWeb3React } from '../../hooks'
-import { getEtherscanLink } from '../../utils'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { ExternalLink } from '../../theme'
 import { useAllTransactions } from '../../state/transactions/hooks'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { RowFixed } from '../Row'
 import Loader from '../Loader'
 
@@ -49,7 +49,11 @@ export default function Transaction({ hash }: { hash: string }) {
 
   return (
     <TransactionWrapper>
-      <TransactionState href={getEtherscanLink(chainId, hash, 'transaction')} pending={pending} success={success}>
+      <TransactionState
+        href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
+        pending={pending}
+        success={success}
+      >
         <RowFixed>
           <TransactionStatusText>{summary ?? hash} ↗</TransactionStatusText>
         </RowFixed>

src/components/AccountDetails/index.tsx

@@ -1,17 +1,17 @@
 import React, { useCallback, useContext } from 'react'
 import { useDispatch } from 'react-redux'
 import styled, { ThemeContext } from 'styled-components'
-import { useActiveWeb3React } from '../../hooks'
+import { SUPPORTED_WALLETS } from '../../constants/wallet'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { AppDispatch } from '../../state'
 import { clearAllTransactions } from '../../state/transactions/actions'
 import { shortenAddress } from '../../utils'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { AutoRow } from '../Row'
 import Copy from './Copy'
 import Transaction from './Transaction'
 
-import { SUPPORTED_WALLETS } from '../../constants'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { getEtherscanLink } from '../../utils'
 import { injected, walletconnect, walletlink, fortmatic, portis } from '../../connectors'
 import CoinbaseWalletIcon from '../../assets/images/coinbaseWalletIcon.svg'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
@@ -354,7 +354,7 @@ export default function AccountDetails({
                           <AddressLink
                             hasENS={!!ENSName}
                             isENS={true}
-                            href={chainId && getEtherscanLink(chainId, ENSName, 'address')}
+                            href={chainId && getExplorerLink(chainId, ENSName, ExplorerDataType.ADDRESS)}
                           >
                             <LinkIcon size={16} />
                             <span style={{ marginLeft: '4px' }}>View on Etherscan</span>
@@ -376,7 +376,7 @@ export default function AccountDetails({
                           <AddressLink
                             hasENS={!!ENSName}
                             isENS={false}
-                            href={getEtherscanLink(chainId, account, 'address')}
+                            href={getExplorerLink(chainId, account, ExplorerDataType.ADDRESS)}
                           >
                             <LinkIcon size={16} />
                             <span style={{ marginLeft: '4px' }}>View on Etherscan</span>

src/components/AddressInputPanel/index.tsx

@@ -1,11 +1,11 @@
 import React, { useContext, useCallback } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import useENS from '../../hooks/useENS'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { ExternalLink, TYPE } from '../../theme'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'
-import { getEtherscanLink } from '../../utils'
 
 const InputPanel = styled.div`
   ${({ theme }) => theme.flexColumnNoWrap}
@@ -102,7 +102,10 @@ export default function AddressInputPanel({
                 Recipient
               </TYPE.black>
               {address && chainId && (
-                <ExternalLink href={getEtherscanLink(chainId, name ?? address, 'address')} style={{ fontSize: '14px' }}>
+                <ExternalLink
+                  href={getExplorerLink(chainId, name ?? address, ExplorerDataType.ADDRESS)}
+                  style={{ fontSize: '14px' }}
+                >
                   (View on Etherscan)
                 </ExternalLink>
               )}

src/components/Badge/RangeBadge.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
 import Badge, { BadgeVariant } from 'components/Badge'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { MouseoverTooltip } from '../../components/Tooltip'
 import { useTranslation } from 'react-i18next'

src/components/Blocklist/index.tsx

@@ -1,6 +1,14 @@
 import React, { ReactNode, useMemo } from 'react'
-import { BLOCKED_ADDRESSES } from '../../constants'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
+
+// SDN OFAC addresses
+const BLOCKED_ADDRESSES: string[] = [
+  '0x7F367cC41522cE07553e823bf3be79A889DEbe1B',
+  '0xd882cFc20F52f2599D84b8e8D58C7FB62cfE344b',
+  '0x901bb9583b24D97e995513C6778dc6888AB6870e',
+  '0xA7e5d5A720f06526557c513402f2e6B5fA20b008',
+  '0x8576aCC5C05D6Ce88f4e49bf65BdF0C62F91353C',
+]
 
 export default function Blocklist({ children }: { children: ReactNode }) {
   const { account } = useActiveWeb3React()

src/components/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import { Story } from '@storybook/react/types-6-0'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import React from 'react'
 import {
   ButtonConfirmed,

src/components/Button/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { darken } from 'polished'
 
 import { RowBetween } from '../Row'

src/components/Card/index.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Box } from 'rebass/styled-components'
 
 const Card = styled(Box)<{ width?: string; padding?: string; border?: string; borderRadius?: string }>`

src/components/Column/index.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const Column = styled.div`
   display: flex;

src/components/CurrencyInputPanel/index.tsx

@@ -1,7 +1,7 @@
 import { Pair } from '@uniswap/v2-sdk'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
 import React, { useState, useCallback } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { darken } from 'polished'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
 import CurrencySearchModal from '../SearchModal/CurrencySearchModal'
@@ -12,7 +12,7 @@ import { RowBetween, RowFixed } from '../Row'
 import { TYPE } from '../../theme'
 import { Input as NumericalInput } from '../NumericalInput'
 import { ReactComponent as DropDown } from '../../assets/images/dropdown.svg'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useTranslation } from 'react-i18next'
 import useTheme from '../../hooks/useTheme'
 import { Lock } from 'react-feather'

src/components/CurrencyLogo/index.tsx

@@ -1,6 +1,6 @@
 import { ChainId, Currency } from '@uniswap/sdk-core'
 import React, { useMemo } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import EthereumLogo from '../../assets/images/ethereum-logo.png'
 import useHttpLocations from '../../hooks/useHttpLocations'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'

src/components/DoubleLogo/DoubleCurrencyLogo.stories.tsx

@@ -1,6 +1,6 @@
 import { Story } from '@storybook/react/types-6-0'
 import React from 'react'
-import { DAI, WBTC } from '../../constants'
+import { DAI, WBTC } from '../../constants/tokens'
 import Component, { DoubleCurrencyLogoProps } from './index'
 
 export default {

src/components/DoubleLogo/index.tsx

@@ -1,6 +1,6 @@
 import { Currency } from '@uniswap/sdk-core'
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import CurrencyLogo from '../CurrencyLogo'
 
 const Wrapper = styled.div<{ margin: boolean; sizeraw: number }>`

src/components/ErrorBoundary/index.tsx

@@ -2,7 +2,7 @@ import React, { ErrorInfo } from 'react'
 import store, { AppState } from '../../state'
 import { ExternalLink, ThemedBackground, TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import ReactGA from 'react-ga'
 import { getUserAgent } from '../../utils/getUserAgent'
 import { AutoRow } from '../Row'

src/components/FeeSelector/index.tsx

@@ -6,7 +6,7 @@ import { DynamicSection } from 'pages/AddLiquidity/styled'
 import { TYPE } from 'theme'
 import { RowBetween } from 'components/Row'
 import { ButtonRadioChecked } from 'components/Button'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const ResponsiveText = styled(TYPE.label)`
   ${({ theme }) => theme.mediaWidth.upToSmall`

src/components/Header/Polling.tsx

@@ -1,10 +1,10 @@
-import React, { useState, useEffect } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled, { keyframes } from 'styled-components'
-import { TYPE, ExternalLink } from '../../theme'
+import { useActiveWeb3React } from '../../hooks/web3'
 
 import { useBlockNumber } from '../../state/application/hooks'
-import { getEtherscanLink } from '../../utils'
-import { useActiveWeb3React } from '../../hooks'
+import { ExternalLink, TYPE } from '../../theme'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 
 const StyledPolling = styled.div`
   position: fixed;
@@ -91,7 +91,9 @@ export default function Polling() {
   )
 
   return (
-    <ExternalLink href={chainId && blockNumber ? getEtherscanLink(chainId, blockNumber.toString(), 'block') : ''}>
+    <ExternalLink
+      href={chainId && blockNumber ? getExplorerLink(chainId, blockNumber.toString(), ExplorerDataType.BLOCK) : ''}
+    >
       <StyledPolling onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
         <StyledPollingNumber breathe={isMounting} hovering={isHover}>
           {blockNumber}

src/components/Header/URLWarning.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { AlertTriangle, X } from 'react-feather'
 import { useURLWarningToggle, useURLWarningVisible } from '../../state/user/hooks'

src/components/Header/UniBalanceContent.tsx

@@ -1,11 +1,11 @@
 import { ChainId, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import React, { useMemo } from 'react'
 import { X } from 'react-feather'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import tokenLogo from '../../assets/images/token-logo.png'
-import { UNI } from '../../constants'
+import { UNI } from '../../constants/tokens'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useMerkleDistributorContract } from '../../hooks/useContract'
 import useCurrentBlockTimestamp from '../../hooks/useCurrentBlockTimestamp'
 import { useTotalUniEarned } from '../../state/stake/hooks'

src/components/Header/index.tsx

@@ -6,12 +6,12 @@ import { NavLink } from 'react-router-dom'
 import { darken } from 'polished'
 import { useTranslation } from 'react-i18next'
 import { Moon, Sun } from 'react-feather'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import Logo from '../../assets/svg/logo.svg'
 import LogoDark from '../../assets/svg/logo_white.svg'
 
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useDarkModeManager } from '../../state/user/hooks'
 import { useETHBalances } from '../../state/wallet/hooks'
 import { CardNoise } from '../earn/styled'

src/components/HoverInlineText/index.tsx

@@ -1,6 +1,6 @@
 import Tooltip from 'components/Tooltip'
 import React, { useState } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const TextWrapper = styled.span<{ margin: boolean; link?: boolean; fontSize?: string; adjustSize?: boolean }>`
   cursor: auto;

src/components/Identicon/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react'
 
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import Jazzicon from 'jazzicon'
 
 const StyledIdenticonContainer = styled.div`

src/components/LineChart/LineChart.stories.tsx

@@ -1,7 +1,7 @@
 import { Story } from '@storybook/react/types-6-0'
 import React from 'react'
 // import Row, { RowFixed } from 'components/Row'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Component, { LineChartProps } from './'
 import { dummyData } from './data'
 // import { AutoColumn } from 'components/Column'

src/components/LineChart/index.tsx

@@ -3,7 +3,7 @@ import { createChart, IChartApi } from 'lightweight-charts'
 import { darken } from 'polished'
 import { RowBetween } from 'components/Row'
 import Card from '../Card'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import useTheme from 'hooks/useTheme'
 
 const Wrapper = styled(Card)`

src/components/ListLogo/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import useHttpLocations from '../../hooks/useHttpLocations'
 
 import Logo from '../Logo'

src/components/Menu/Menu.stories.tsx

@@ -1,6 +1,6 @@
 import { Story } from '@storybook/react/types-6-0'
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Component from './index'
 
 const Wrapper = styled.div`

src/components/Menu/index.tsx

@@ -3,7 +3,7 @@ import { BookOpen, Code, Info, MessageCircle, PieChart } from 'react-feather'
 import { Link } from 'react-router-dom'
 import styled, { css } from 'styled-components'
 import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useToggleModal } from '../../state/application/hooks'

src/components/ModalViews/index.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 
 import { AutoColumn, ColumnCenter } from '../Column'
 import styled, { ThemeContext } from 'styled-components'
@@ -8,7 +9,6 @@ import { TYPE, CloseIcon, CustomLightSpinner } from '../../theme'
 import { ArrowUpCircle } from 'react-feather'
 
 import Circle from '../../assets/images/blue-loader.svg'
-import { getEtherscanLink } from '../../utils'
 import { ExternalLink } from '../../theme/components'
 
 const ConfirmOrLoadingWrapper = styled.div`
@@ -62,7 +62,10 @@ export function SubmittedView({
       <AutoColumn gap="100px" justify={'center'}>
         {children}
         {chainId && hash && (
-          <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')} style={{ marginLeft: '4px' }}>
+          <ExternalLink
+            href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
+            style={{ marginLeft: '4px' }}
+          >
             <TYPE.subHeader>View transaction on Etherscan</TYPE.subHeader>
           </ExternalLink>
         )}

src/components/NavigationTabs/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { darken } from 'polished'
 import { useTranslation } from 'react-i18next'
 import { NavLink, Link as HistoryLink } from 'react-router-dom'

src/components/NumericalInput/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { escapeRegExp } from '../../utils'
 
 const StyledInput = styled.input<{ error?: boolean; fontSize?: string; align?: string }>`

src/components/Popover/index.tsx

@@ -2,7 +2,7 @@ import { Placement } from '@popperjs/core'
 import { transparentize } from 'polished'
 import React, { useCallback, useState } from 'react'
 import { usePopper } from 'react-popper'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import useInterval from '../../hooks/useInterval'
 import Portal from '@reach/portal'
 

src/components/Popups/ClaimPopup.tsx

@@ -4,7 +4,7 @@ import { X } from 'react-feather'
 import styled, { keyframes } from 'styled-components'
 import tokenLogo from '../../assets/images/token-logo.png'
 import { ButtonPrimary } from '../../components/Button'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { ApplicationModal } from '../../state/application/actions'
 import {
   useModalOpen,

src/components/Popups/ListUpdatePopup.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useMemo } from 'react'
 import ReactGA from 'react-ga'
 import { useDispatch } from 'react-redux'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { AppDispatch } from '../../state'
 import { useRemovePopup } from '../../state/application/hooks'
 import { acceptListUpdate } from '../../state/lists/actions'

src/components/Popups/TransactionPopup.tsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'
 import styled, { ThemeContext } from 'styled-components'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { TYPE } from '../../theme'
 import { ExternalLink } from '../../theme/components'
-import { getEtherscanLink } from '../../utils'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { AutoColumn } from '../Column'
 import { AutoRow } from '../Row'
 
@@ -33,7 +33,9 @@ export default function TransactionPopup({
       <AutoColumn gap="8px">
         <TYPE.body fontWeight={500}>{summary ?? 'Hash: ' + hash.slice(0, 8) + '...' + hash.slice(58, 65)}</TYPE.body>
         {chainId && (
-          <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>View on Etherscan</ExternalLink>
+          <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
+            View on Etherscan
+          </ExternalLink>
         )}
       </AutoColumn>
     </RowNoFlex>

src/components/Popups/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useActivePopups } from '../../state/application/hooks'
 import { AutoColumn } from '../Column'
 import PopupItem from './PopupItem'

src/components/PositionCard/Sushi.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Token } from '@uniswap/sdk-core'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 import { unwrappedToken } from '../../utils/wrappedCurrency'
 import { ButtonEmpty } from '../Button'

src/components/PositionCard/V2.tsx

@@ -5,10 +5,10 @@ import { Pair } from '@uniswap/v2-sdk'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
 
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { currencyId } from '../../utils/currencyId'
 import { unwrappedToken } from '../../utils/wrappedCurrency'
@@ -24,7 +24,7 @@ import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import { RowBetween, RowFixed, AutoRow } from '../Row'
 import { Dots } from '../swap/styleds'
-import { BIG_INT_ZERO } from '../../constants'
+import { BIG_INT_ZERO } from '../../constants/misc'
 import { FixedHeightRow } from '.'
 
 const StyledPositionCard = styled(LightCard)<{ bgColor: any }>`

src/components/PositionCard/index.tsx

@@ -6,10 +6,10 @@ import React, { useState } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
 
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useTokenBalance } from '../../state/wallet/hooks'
 import { ExternalLink, TYPE } from '../../theme'
 import { currencyId } from '../../utils/currencyId'
@@ -26,7 +26,7 @@ import CurrencyLogo from '../CurrencyLogo'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import { RowBetween, RowFixed, AutoRow } from '../Row'
 import { Dots } from '../swap/styleds'
-import { BIG_INT_ZERO } from '../../constants'
+import { BIG_INT_ZERO } from '../../constants/misc'
 
 export const FixedHeightRow = styled(RowBetween)`
   height: 24px;

src/components/PositionList/index.tsx

@@ -1,7 +1,7 @@
 import PositionListItem from 'components/PositionListItem'
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { MEDIA_WIDTHS } from 'theme'
 import { PositionDetails } from 'types/position'
 

src/components/PositionListItem/index.tsx

@@ -5,17 +5,17 @@ import DoubleCurrencyLogo from 'components/DoubleLogo'
 import { usePool } from 'hooks/usePools'
 import { useToken } from 'hooks/Tokens'
 import { Link } from 'react-router-dom'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { HideSmall, MEDIA_WIDTHS, SmallOnly } from 'theme'
 import { PositionDetails } from 'types/position'
 import { WETH9, Price, Token, Percent } from '@uniswap/sdk-core'
 import { formatPrice } from 'utils/formatTokenAmount'
 import Loader from 'components/Loader'
 import { unwrappedToken } from 'utils/wrappedCurrency'
-import { DAI, USDC, USDT, WBTC } from '../../constants'
 import RangeBadge from 'components/Badge/RangeBadge'
 import { RowFixed } from 'components/Row'
 import HoverInlineText from 'components/HoverInlineText'
+import { DAI, USDC, USDT, WBTC } from '../../constants/tokens'
 
 const Row = styled(Link)`
   align-items: center;

src/components/ProgressSteps/index.tsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { AutoColumn } from '../Column'
 import { ThemeContext } from 'styled-components'
 import { TYPE } from '../../theme'

src/components/QuestionHelper/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Tooltip from '../Tooltip'
 
 const QuestionWrapper = styled.div`

src/components/RangeSelector/index.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { Currency, Price, Token } from '@uniswap/sdk-core'
 import StepCounter from 'components/InputStepCounter/InputStepCounter'
 import { RowBetween } from 'components/Row'
-import { useActiveWeb3React } from 'hooks'
+import { useActiveWeb3React } from 'hooks/web3'
 import { wrappedCurrency } from 'utils/wrappedCurrency'
 
 // currencyA is the base token

src/components/RateToggle/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Currency } from '@uniswap/sdk-core'
 import { ToggleElement, ToggleWrapper } from 'components/Toggle/MultiToggle'
-import { useActiveWeb3React } from 'hooks'
+import { useActiveWeb3React } from 'hooks/web3'
 import { wrappedCurrency } from 'utils/wrappedCurrency'
 
 // the order of displayed base currencies from left to right is always in sort order

src/components/Row/index.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Box } from 'rebass/styled-components'
 
 const Row = styled(Box)<{

src/components/SearchModal/CommonBases.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Text } from 'rebass'
 import { ChainId, Currency, currencyEquals, Token, ETHER } from '@uniswap/sdk-core'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
-import { SUGGESTED_BASES } from '../../constants'
+import { SUGGESTED_BASES } from '../../constants/routing'
 import { AutoColumn } from '../Column'
 import QuestionHelper from '../QuestionHelper'
 import { AutoRow } from '../Row'

src/components/SearchModal/CurrencyList.tsx

@@ -2,8 +2,8 @@ import { Currency, CurrencyAmount, currencyEquals, Token } from '@uniswap/sdk-co
 import React, { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
-import styled from 'styled-components'
-import { useActiveWeb3React } from '../../hooks'
+import styled from 'styled-components/macro'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useCombinedActiveList } from '../../state/lists/hooks'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
 import { useCurrencyBalance } from '../../state/wallet/hooks'

src/components/SearchModal/CurrencySearch.tsx

@@ -4,7 +4,7 @@ import ReactGA from 'react-ga'
 import { useTranslation } from 'react-i18next'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { useAllTokens, useToken, useIsUserAddedToken, useSearchInactiveTokenLists } from '../../hooks/Tokens'
 import { CloseIcon, TYPE, ButtonText, IconWrapper } from '../../theme'
 import { isAddress } from '../../utils'
@@ -16,7 +16,7 @@ import { filterTokens, useSortedTokensByQuery } from './filtering'
 import { useTokenComparator } from './sorting'
 import { PaddedColumn, SearchInput, Separator } from './styleds'
 import AutoSizer from 'react-virtualized-auto-sizer'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import useToggle from 'hooks/useToggle'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import useTheme from 'hooks/useTheme'

src/components/SearchModal/ImportList.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import ReactGA from 'react-ga'
 import { TYPE, CloseIcon } from 'theme'
 import Card from 'components/Card'

src/components/SearchModal/ImportRow.tsx

@@ -7,7 +7,7 @@ import { TYPE } from 'theme'
 import ListLogo from 'components/ListLogo'
 import useTheme from 'hooks/useTheme'
 import { ButtonPrimary } from 'components/Button'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useIsUserAddedToken, useIsTokenActive } from 'hooks/Tokens'
 import { CheckCircle } from 'react-feather'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'

src/components/SearchModal/ImportToken.tsx

@@ -1,7 +1,7 @@
 import { TokenList } from '@uniswap/token-lists/dist/types'
 import React from 'react'
 import { Token, Currency } from '@uniswap/sdk-core'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { TYPE, CloseIcon } from 'theme'
 import Card from 'components/Card'
 import { AutoColumn } from 'components/Column'
@@ -13,10 +13,10 @@ import useTheme from 'hooks/useTheme'
 import { ButtonPrimary } from 'components/Button'
 import { SectionBreak } from 'components/swap/styleds'
 import { useAddUserToken } from 'state/user/hooks'
-import { getEtherscanLink } from 'utils'
-import { useActiveWeb3React } from 'hooks'
+import { useActiveWeb3React } from 'hooks/web3'
 import { ExternalLink } from '../../theme/components'
 import ListLogo from 'components/ListLogo'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { PaddedColumn } from './styleds'
 
 const Wrapper = styled.div`
@@ -93,7 +93,7 @@ export function ImportToken({ tokens, list, onBack, onDismiss, handleCurrencySel
                   </TYPE.darkGray>
                 </AutoColumn>
                 {chainId && (
-                  <ExternalLink href={getEtherscanLink(chainId, token.address, 'address')}>
+                  <ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
                     <AddressText fontSize={12}>{token.address}</AddressText>
                   </ExternalLink>
                 )}

src/components/SearchModal/Manage.tsx

@@ -4,7 +4,7 @@ import { RowBetween } from 'components/Row'
 import { ArrowLeft } from 'react-feather'
 import { Text } from 'rebass'
 import { CloseIcon } from 'theme'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Token } from '@uniswap/sdk-core'
 import { ManageLists } from './ManageLists'
 import ManageTokens from './ManageTokens'

src/components/SearchModal/ManageLists.tsx

@@ -3,7 +3,7 @@ import { Settings, CheckCircle } from 'react-feather'
 import ReactGA from 'react-ga'
 import { usePopper } from 'react-popper'
 import { useDispatch, useSelector } from 'react-redux'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useFetchListCallback } from '../../hooks/useFetchListCallback'
 import { useOnClickOutside } from '../../hooks/useOnClickOutside'
 import { TokenList } from '@uniswap/token-lists'

src/components/SearchModal/ManageTokens.tsx

@@ -1,15 +1,16 @@
 import React, { useRef, RefObject, useCallback, useState, useMemo } from 'react'
 import Column from 'components/Column'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { PaddedColumn, Separator, SearchInput } from './styleds'
 import Row, { RowBetween, RowFixed } from 'components/Row'
 import { TYPE, ExternalLinkIcon, TrashIcon, ButtonText, ExternalLink } from 'theme'
 import { useToken } from 'hooks/Tokens'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useUserAddedTokens, useRemoveUserAddedToken } from 'state/user/hooks'
 import { Token } from '@uniswap/sdk-core'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { getEtherscanLink, isAddress } from 'utils'
-import { useActiveWeb3React } from 'hooks'
+import { isAddress } from 'utils'
+import { useActiveWeb3React } from 'hooks/web3'
 import Card from 'components/Card'
 import ImportRow from './ImportRow'
 import useTheme from '../../hooks/useTheme'
@@ -20,7 +21,7 @@ const Wrapper = styled.div`
   width: 100%;
   height: calc(100% - 60px);
   position: relative;
-  padding-bottom: 60px;
+  padding-bottom: 80px;
 `
 
 const Footer = styled.div`
@@ -78,7 +79,7 @@ export default function ManageTokens({
         <RowBetween key={token.address} width="100%">
           <RowFixed>
             <CurrencyLogo currency={token} size={'20px'} />
-            <ExternalLink href={getEtherscanLink(chainId, token.address, 'address')}>
+            <ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
               <TYPE.main ml={'10px'} fontWeight={600}>
                 {token.symbol}
               </TYPE.main>
@@ -86,7 +87,7 @@ export default function ManageTokens({
           </RowFixed>
           <RowFixed>
             <TrashIcon onClick={() => removeToken(chainId, token.address)} />
-            <ExternalLinkIcon href={getEtherscanLink(chainId, token.address, 'address')} />
+            <ExternalLinkIcon href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)} />
           </RowFixed>
         </RowBetween>
       ))
@@ -95,7 +96,7 @@ export default function ManageTokens({
 
   return (
     <Wrapper>
-      <Column style={{ width: '100%', flex: '1 1' }}>
+      <Column style={{ width: '100%', height: '100%', flex: '1 1' }}>
         <PaddedColumn gap="14px">
           <Row>
             <SearchInput
@@ -121,7 +122,7 @@ export default function ManageTokens({
           )}
         </PaddedColumn>
         <Separator />
-        <PaddedColumn gap="lg">
+        <PaddedColumn gap="lg" style={{ overflow: 'auto', marginBottom: '10px' }}>
           <RowBetween>
             <TYPE.main fontWeight={600}>
               {userAddedTokens?.length} Custom {userAddedTokens.length === 1 ? 'Token' : 'Tokens'}

src/components/SearchModal/SortButton.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { RowFixed } from '../Row'
 
 export const FilterWrapper = styled(RowFixed)`

src/components/SearchModal/styleds.tsx

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { AutoColumn } from '../Column'
 import { RowBetween, RowFixed } from '../Row'
 

src/components/Slider/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const StyledRangeInput = styled.input<{ size: number }>`
   -webkit-appearance: none; /* Hides the slider so that custom slider can be made */

src/components/ThemeColorPalette/index.tsx

@@ -1,6 +1,6 @@
 import { readableColor } from 'polished'
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { colors } from 'theme'
 
 const Swatch = styled.div`

src/components/Toggle/ListToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { TYPE } from '../../theme'
 
 const Wrapper = styled.button<{ isActive?: boolean; activeElement?: boolean }>`

src/components/Toggle/MultiToggle.stories.tsx

@@ -1,5 +1,5 @@
 import { Story } from '@storybook/react/types-6-0'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import React, { useState } from 'react'
 import MultiToggle from './MultiToggle'
 

src/components/Toggle/MultiToggle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 export const ToggleWrapper = styled.button<{ width?: string }>`
   display: flex;

src/components/Toggle/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 
 const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
   padding: 0.25rem 0.5rem;

src/components/Tooltip/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Popover, { PopoverProps } from '../Popover'
 
 const TooltipContainer = styled.div`

src/components/TransactionConfirmationModal/index.tsx

@@ -1,6 +1,7 @@
 import { ChainId, Currency } from '@uniswap/sdk-core'
 import React, { useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
+import { getExplorerLink, ExplorerDataType } from '../../utils/getExplorerLink'
 import Modal from '../Modal'
 import { ExternalLink } from '../../theme'
 import { Text } from 'rebass'
@@ -11,8 +12,7 @@ import { ButtonPrimary, ButtonLight } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'
 import Circle from '../../assets/images/blue-loader.svg'
 import MetaMaskLogo from '../../assets/images/metamask.png'
-import { getEtherscanLink } from '../../utils'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import useAddTokenToMetamask from 'hooks/useAddTokenToMetamask'
 
 const Wrapper = styled.div`
@@ -113,7 +113,7 @@ export function TransactionSubmittedContent({
             Transaction Submitted
           </Text>
           {chainId && hash && (
-            <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')}>
+            <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}>
               <Text fontWeight={500} fontSize={14} color={theme.primary1}>
                 View on Etherscan
               </Text>
@@ -184,7 +184,12 @@ export function TransactionErrorContent({ message, onDismiss }: { message: strin
         </RowBetween>
         <AutoColumn style={{ marginTop: 20, padding: '2rem 0' }} gap="24px" justify="center">
           <AlertTriangle color={theme.red1} style={{ strokeWidth: 1.5 }} size={64} />
-          <Text fontWeight={500} fontSize={16} color={theme.red1} style={{ textAlign: 'center', width: '85%' }}>
+          <Text
+            fontWeight={500}
+            fontSize={16}
+            color={theme.red1}
+            style={{ textAlign: 'center', width: '85%', wordBreak: 'break-word' }}
+          >
             {message}
           </Text>
         </AutoColumn>

src/components/TransactionSettings/index.tsx

@@ -6,7 +6,7 @@ import QuestionHelper from '../QuestionHelper'
 import { TYPE } from '../../theme'
 import { AutoColumn } from '../Column'
 import { RowBetween, RowFixed } from '../Row'
-import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/index'
+import { DEFAULT_DEADLINE_FROM_NOW } from 'constants/misc'
 import { darken } from 'polished'
 import { useSetUserSlippageTolerance, useUserSlippageTolerance, useUserTransactionTTL } from 'state/user/hooks'
 

src/components/WalletModal/Option.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { ExternalLink } from '../../theme'
 
 const InfoCard = styled.button<{ active?: boolean }>`

src/components/WalletModal/PendingView.tsx

@@ -1,8 +1,8 @@
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
+import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import Option from './Option'
-import { SUPPORTED_WALLETS } from '../../constants'
 import { injected } from '../../connectors'
 import { darken } from 'polished'
 import Loader from '../Loader'

src/components/WalletModal/index.tsx

@@ -5,12 +5,12 @@ import { AutoRow } from 'components/Row'
 import React, { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactGA from 'react-ga'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import MetamaskIcon from '../../assets/images/metamask.png'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
 import { fortmatic, injected, portis } from '../../connectors'
 import { OVERLAY_READY } from '../../connectors/Fortmatic'
-import { SUPPORTED_WALLETS } from '../../constants'
+import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import usePrevious from '../../hooks/usePrevious'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useWalletModalToggle } from '../../state/application/hooks'

src/components/Web3ReactManager/index.tsx

@@ -1,11 +1,11 @@
 import React, { useState, useEffect } from 'react'
 import { useWeb3React } from '@web3-react/core'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useTranslation } from 'react-i18next'
 
 import { network } from '../../connectors'
-import { useEagerConnect, useInactiveListener } from '../../hooks'
-import { NetworkContextName } from '../../constants'
+import { useEagerConnect, useInactiveListener } from '../../hooks/web3'
+import { NetworkContextName } from '../../constants/misc'
 import Loader from '../Loader'
 
 const MessageWrapper = styled.div`

src/components/Web3Status/index.tsx

@@ -10,7 +10,7 @@ import FortmaticIcon from '../../assets/images/fortmaticIcon.png'
 import PortisIcon from '../../assets/images/portisIcon.png'
 import WalletConnectIcon from '../../assets/images/walletConnectIcon.svg'
 import { fortmatic, injected, portis, walletconnect, walletlink } from '../../connectors'
-import { NetworkContextName } from '../../constants'
+import { NetworkContextName } from '../../constants/misc'
 import useENSName from '../../hooks/useENSName'
 import { useHasSocks } from '../../hooks/useSocksBalance'
 import { useWalletModalToggle } from '../../state/application/hooks'

src/components/claim/AddressClaimModal.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from 'react'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import Modal from '../Modal'
 import { AutoColumn, ColumnCenter } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { DataCard, CardSection, Break } from '../earn/styled'
 import { RowBetween } from '../Row'
 import { TYPE, ExternalLink, CloseIcon, CustomLightSpinner, UniTokenAnimated } from '../../theme'
@@ -12,13 +13,13 @@ import Circle from '../../assets/images/blue-loader.svg'
 import { Text } from 'rebass'
 import AddressInputPanel from '../AddressInputPanel'
 import useENS from '../../hooks/useENS'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { isAddress } from 'ethers/lib/utils'
 import Confetti from '../Confetti'
 import { CardNoise, CardBGImage, CardBGImageSmaller } from '../earn/styled'
 import { useIsTransactionPending } from '../../state/transactions/hooks'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import { getEtherscanLink, shortenAddress } from '../../utils'
+import { shortenAddress } from '../../utils'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;
@@ -181,7 +182,7 @@ export default function AddressClaimModal({ isOpen, onDismiss }: { isOpen: boole
               <TYPE.subHeader color="black">Confirm this transaction in your wallet</TYPE.subHeader>
             )}
             {attempting && hash && !claimConfirmed && chainId && hash && (
-              <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')} style={{ zIndex: 99 }}>
+              <ExternalLink href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)} style={{ zIndex: 99 }}>
                 View transaction on Etherscan
               </ExternalLink>
             )}

src/components/claim/ClaimModal.tsx

@@ -3,16 +3,16 @@ import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { isAddress } from 'ethers/lib/utils'
 import React, { useEffect, useState } from 'react'
 import { Text } from 'rebass'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import Circle from '../../assets/images/blue-loader.svg'
 import tokenLogo from '../../assets/images/token-logo.png'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { ApplicationModal } from '../../state/application/actions'
 import { useModalOpen, useToggleSelfClaimModal } from '../../state/application/hooks'
 import { useClaimCallback, useUserClaimData, useUserUnclaimedAmount } from '../../state/claim/hooks'
 import { useUserHasSubmittedClaim } from '../../state/transactions/hooks'
 import { CloseIcon, CustomLightSpinner, ExternalLink, TYPE, UniTokenAnimated } from '../../theme'
-import { getEtherscanLink } from '../../utils'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { ButtonPrimary } from '../Button'
 import { AutoColumn, ColumnCenter } from '../Column'
 import Confetti from '../Confetti'
@@ -196,7 +196,10 @@ export default function ClaimModal() {
               <TYPE.subHeader color="black">Confirm this transaction in your wallet</TYPE.subHeader>
             )}
             {attempting && claimSubmitted && !claimConfirmed && chainId && claimTxn?.hash && (
-              <ExternalLink href={getEtherscanLink(chainId, claimTxn?.hash, 'transaction')} style={{ zIndex: 99 }}>
+              <ExternalLink
+                href={getExplorerLink(chainId, claimTxn?.hash, ExplorerDataType.TRANSACTION)}
+                style={{ zIndex: 99 }}
+              >
                 View transaction on Etherscan
               </ExternalLink>
             )}

src/components/earn/ClaimRewardModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { RowBetween } from '../Row'
 import { TYPE, CloseIcon } from '../../theme'
 import { ButtonError } from '../Button'
@@ -10,7 +10,7 @@ import { useStakingContract } from '../../hooks/useContract'
 import { SubmittedView, LoadingView } from '../ModalViews'
 import { TransactionResponse } from '@ethersproject/providers'
 import { useTransactionAdder } from '../../state/transactions/hooks'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;

src/components/earn/PoolCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { TYPE, StyledInternalLink } from '../../theme'
 import DoubleCurrencyLogo from '../DoubleLogo'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
@@ -15,7 +15,7 @@ import { unwrappedToken } from '../../utils/wrappedCurrency'
 import { useTotalSupply } from '../../hooks/useTotalSupply'
 import { useV2Pair } from '../../hooks/useV2Pairs'
 import useUSDCPrice from '../../hooks/useUSDCPrice'
-import { BIG_INT_SECONDS_IN_WEEK } from '../../constants'
+import { BIG_INT_SECONDS_IN_WEEK } from '../../constants/misc'
 
 const StatContainer = styled.div`
   display: flex;

src/components/earn/StakingModal.tsx

@@ -1,10 +1,10 @@
 import React, { useState, useCallback } from 'react'
-import { V2_ROUTER_ADDRESS } from '../../constants'
+import { V2_ROUTER_ADDRESS } from '../../constants/addresses'
 import { useV2LiquidityTokenPermit } from '../../hooks/useERC20Permit'
 import useTransactionDeadline from '../../hooks/useTransactionDeadline'
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { RowBetween } from '../Row'
 import { TYPE, CloseIcon } from '../../theme'
 import { ButtonConfirmed, ButtonError } from '../Button'
@@ -12,7 +12,7 @@ import ProgressCircles from '../ProgressSteps'
 import CurrencyInputPanel from '../CurrencyInputPanel'
 import { Pair } from '@uniswap/v2-sdk'
 import { Token, CurrencyAmount } from '@uniswap/sdk-core'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import { maxAmountSpend } from '../../utils/maxAmountSpend'
 import { usePairContract, useStakingContract } from '../../hooks/useContract'
 import { useApproveCallback, ApprovalState } from '../../hooks/useApproveCallback'
@@ -83,7 +83,10 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
 
   // approval data for stake
   const deadline = useTransactionDeadline()
-  const { signatureData, gatherPermitSignature } = useV2LiquidityTokenPermit(parsedAmountWrapped, V2_ROUTER_ADDRESS)
+  const { signatureData, gatherPermitSignature } = useV2LiquidityTokenPermit(
+    parsedAmountWrapped,
+    chainId && V2_ROUTER_ADDRESS[chainId]
+  )
   const [approval, approveCallback] = useApproveCallback(parsedAmount, stakingInfo.stakingRewardAddress)
 
   const stakingContract = useStakingContract(stakingInfo.stakingRewardAddress)

src/components/earn/UnstakingModal.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { RowBetween } from '../Row'
 import { TYPE, CloseIcon } from '../../theme'
 import { ButtonError } from '../Button'
@@ -11,7 +11,7 @@ import { SubmittedView, LoadingView } from '../ModalViews'
 import { TransactionResponse } from '@ethersproject/providers'
 import { useTransactionAdder } from '../../state/transactions/hooks'
 import FormattedCurrencyAmount from '../FormattedCurrencyAmount'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 
 const ContentWrapper = styled(AutoColumn)`
   width: 100%;

src/components/earn/styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { AutoColumn } from '../Column'
 
 import uImage from '../../assets/images/big_unicorn.png'

src/components/swap/AdvancedSwapDetails.tsx

@@ -1,11 +1,10 @@
 import { Percent, Currency, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
-import React, { useContext } from 'react'
+import React, { useContext, useMemo } from 'react'
 import { ThemeContext } from 'styled-components'
 import { TYPE } from '../../theme'
-import { computePriceImpactWithMaximumSlippage } from '../../utils/computePriceImpactWithMaximumSlippage'
-import { computeRealizedLPFeeAmount } from '../../utils/prices'
+import { computeRealizedLPFeePercent } from '../../utils/prices'
 import { AutoColumn } from '../Column'
 import { RowBetween, RowFixed } from '../Row'
 import FormattedPriceImpact from './FormattedPriceImpact'
@@ -19,7 +18,14 @@ export interface AdvancedSwapDetailsProps {
 export function AdvancedSwapDetails({ trade, allowedSlippage }: AdvancedSwapDetailsProps) {
   const theme = useContext(ThemeContext)
 
-  const realizedLPFee = computeRealizedLPFeeAmount(trade)
+  const { realizedLPFee, priceImpact } = useMemo(() => {
+    if (!trade) return { realizedLPFee: undefined, priceImpact: undefined }
+
+    const realizedLpFeePercent = computeRealizedLPFeePercent(trade)
+    const realizedLPFee = trade.inputAmount.multiply(realizedLpFeePercent)
+    const priceImpact = trade.priceImpact.subtract(realizedLpFeePercent)
+    return { priceImpact, realizedLPFee }
+  }, [trade])
 
   return !trade ? null : (
     <AutoColumn gap="8px">
@@ -30,7 +36,7 @@ export function AdvancedSwapDetails({ trade, allowedSlippage }: AdvancedSwapDeta
           </TYPE.black>
         </RowFixed>
         <TYPE.black textAlign="right" fontSize={12} color={theme.text1}>
-          {realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${trade.inputAmount.currency.symbol}` : '-'}
+          {realizedLPFee ? `${realizedLPFee.toSignificant(4)} ${realizedLPFee.currency.symbol}` : '-'}
         </TYPE.black>
       </RowBetween>
 
@@ -48,11 +54,24 @@ export function AdvancedSwapDetails({ trade, allowedSlippage }: AdvancedSwapDeta
       <RowBetween>
         <RowFixed>
           <TYPE.black fontSize={12} fontWeight={400} color={theme.text2}>
-            Execution price vs. spot price
+            Price Impact
           </TYPE.black>
         </RowFixed>
         <TYPE.black textAlign="right" fontSize={12} color={theme.text1}>
-          <FormattedPriceImpact priceImpact={computePriceImpactWithMaximumSlippage(trade, allowedSlippage)} />
+          <FormattedPriceImpact priceImpact={priceImpact} />
+        </TYPE.black>
+      </RowBetween>
+
+      <RowBetween>
+        <RowFixed>
+          <TYPE.black fontSize={12} fontWeight={400} color={theme.text2}>
+            {trade.tradeType === TradeType.EXACT_INPUT ? 'Minimum received' : 'Maximum sent'}
+          </TYPE.black>
+        </RowFixed>
+        <TYPE.black textAlign="right" fontSize={12} color={theme.text1}>
+          {trade.tradeType === TradeType.EXACT_INPUT
+            ? `${trade.minimumAmountOut(allowedSlippage).toSignificant(6)} ${trade.outputAmount.currency.symbol}`
+            : `${trade.maximumAmountIn(allowedSlippage).toSignificant(6)} ${trade.inputAmount.currency.symbol}`}
         </TYPE.black>
       </RowBetween>
 

src/components/swap/AdvancedSwapDetailsDropdown.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { useLastTruthy } from '../../hooks/useLast'
 import { AdvancedSwapDetails, AdvancedSwapDetailsProps } from './AdvancedSwapDetails'
 

src/components/swap/BetterTradeLink.tsx

@@ -7,7 +7,7 @@ import useParsedQueryString from '../../hooks/useParsedQueryString'
 import { DEFAULT_VERSION, Version } from '../../hooks/useToggledVersion'
 import { HideSmall, TYPE, SmallOnly } from '../../theme'
 import { ButtonPrimary } from '../Button'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { Zap } from 'react-feather'
 
 const ResponsiveButton = styled(ButtonPrimary)`

src/components/swap/ConfirmSwapModal.tsx

@@ -90,9 +90,9 @@ export default function ConfirmSwapModal({
   }, [onConfirm, showAcceptChanges, swapErrorMessage, trade])
 
   // text to show while loading
-  const pendingText = `Swapping ${trade?.maximumAmountIn(allowedSlippage)?.toSignificant(6)} ${
+  const pendingText = `Swapping ${trade?.inputAmount?.toSignificant(6)} ${
     trade?.inputAmount?.currency?.symbol
-  } for ${trade?.minimumAmountOut(allowedSlippage)?.toSignificant(6)} ${trade?.outputAmount?.currency?.symbol}`
+  } for ${trade?.outputAmount?.toSignificant(6)} ${trade?.outputAmount?.currency?.symbol}`
 
   const confirmationContent = useCallback(
     () =>

src/components/swap/SwapHeader.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import SettingsTab from '../Settings'
 import { Percent } from '@uniswap/sdk-core'
 

src/components/swap/SwapModalHeader.tsx

@@ -31,12 +31,10 @@ export const ArrowWrapper = styled.div`
   margin-top: -18px;
   margin-bottom: -18px;
   left: calc(50% - 16px);
-  /* transform: rotate(90deg); */
   display: flex;
   justify-content: center;
   align-items: center;
   background-color: ${({ theme }) => theme.bg1};
-  /* border: 4px solid ${({ theme }) => theme.bg0}; */
   z-index: 2;
 `
 
@@ -53,15 +51,12 @@ export default function SwapModalHeader({
   showAcceptChanges: boolean
   onAcceptChanges: () => void
 }) {
-  const maximumAmountIn = trade.maximumAmountIn(allowedSlippage)
-  const minimumAmountOut = trade.minimumAmountOut(allowedSlippage)
-
   const theme = useContext(ThemeContext)
 
   const [showInverted, setShowInverted] = useState<boolean>(false)
 
-  const fiatValueInput = useUSDCValue(maximumAmountIn)
-  const fiatValueOutput = useUSDCValue(minimumAmountOut)
+  const fiatValueInput = useUSDCValue(trade.inputAmount)
+  const fiatValueOutput = useUSDCValue(trade.outputAmount)
 
   return (
     <AutoColumn gap={'4px'} style={{ marginTop: '1rem' }}>
@@ -86,7 +81,7 @@ export default function SwapModalHeader({
                 fontWeight={500}
                 color={showAcceptChanges && trade.tradeType === TradeType.EXACT_OUTPUT ? theme.primary1 : ''}
               >
-                {maximumAmountIn.toSignificant(6)}
+                {trade.inputAmount.toSignificant(6)}
               </TruncatedText>
             </RowFixed>
           </RowBetween>
@@ -117,7 +112,7 @@ export default function SwapModalHeader({
             </RowFixed>
             <RowFixed gap={'0px'}>
               <TruncatedText fontSize={24} fontWeight={500}>
-                {minimumAmountOut.toSignificant(6)}
+                {trade.outputAmount.toSignificant(6)}
               </TruncatedText>
             </RowFixed>
           </RowBetween>
@@ -127,11 +122,7 @@ export default function SwapModalHeader({
         <TYPE.body color={theme.text2} fontWeight={500} fontSize={14}>
           {'Price:'}
         </TYPE.body>
-        <TradePrice
-          price={trade.worstExecutionPrice(allowedSlippage)}
-          showInverted={showInverted}
-          setShowInverted={setShowInverted}
-        />
+        <TradePrice price={trade.executionPrice} showInverted={showInverted} setShowInverted={setShowInverted} />
       </RowBetween>
 
       <LightCard style={{ padding: '.75rem', marginTop: '0.5rem' }}>
@@ -155,12 +146,12 @@ export default function SwapModalHeader({
         </SwapShowAcceptChanges>
       ) : null}
 
-      {/* <AutoColumn justify="flex-start" gap="sm" style={{ padding: '.75rem 1rem' }}>
+      <AutoColumn justify="flex-start" gap="sm" style={{ padding: '.75rem 1rem' }}>
         {trade.tradeType === TradeType.EXACT_INPUT ? (
           <TYPE.italic fontWeight={400} textAlign="left" style={{ width: '100%' }}>
             {`Output is estimated. You will receive at least `}
             <b>
-              {minimumAmountOut.toSignificant(6)} {trade.outputAmount.currency.symbol}
+              {trade.minimumAmountOut(allowedSlippage).toSignificant(6)} {trade.outputAmount.currency.symbol}
             </b>
             {' or the transaction will revert.'}
           </TYPE.italic>
@@ -168,12 +159,12 @@ export default function SwapModalHeader({
           <TYPE.italic fontWeight={400} textAlign="left" style={{ width: '100%' }}>
             {`Input is estimated. You will sell at most `}
             <b>
-              {maximumAmountIn.toSignificant(6)} {trade.inputAmount.currency.symbol}
+              {trade.maximumAmountIn(allowedSlippage).toSignificant(6)} {trade.inputAmount.currency.symbol}
             </b>
             {' or the transaction will revert.'}
           </TYPE.italic>
         )}
-      </AutoColumn> */}
+      </AutoColumn>
       {recipient !== null ? (
         <AutoColumn justify="flex-start" gap="sm" style={{ padding: '12px 0 0 0px' }}>
           <TYPE.main>

src/components/swap/UnsupportedCurrencyFooter.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { TYPE, CloseIcon, ExternalLink } from 'theme'
 import { ButtonEmpty } from 'components/Button'
 import Modal from 'components/Modal'
@@ -7,11 +7,11 @@ import Card, { OutlineCard } from 'components/Card'
 import { RowBetween, AutoRow } from 'components/Row'
 import { AutoColumn } from 'components/Column'
 import CurrencyLogo from 'components/CurrencyLogo'
-import { useActiveWeb3React } from 'hooks'
-import { getEtherscanLink } from 'utils'
+import { useActiveWeb3React } from 'hooks/web3'
 import { Currency, Token } from '@uniswap/sdk-core'
 import { wrappedCurrency } from 'utils/wrappedCurrency'
 import { useUnsupportedTokens } from '../../hooks/Tokens'
+import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 
 const DetailsFooter = styled.div<{ show: boolean }>`
   padding-top: calc(16px + 2rem);
@@ -78,7 +78,7 @@ export default function UnsupportedCurrencyFooter({
                         <TYPE.body fontWeight={500}>{token.symbol}</TYPE.body>
                       </AutoRow>
                       {chainId && (
-                        <ExternalLink href={getEtherscanLink(chainId, token.address, 'address')}>
+                        <ExternalLink href={getExplorerLink(chainId, token.address, ExplorerDataType.ADDRESS)}>
                           <AddressText>{token.address}</AddressText>
                         </ExternalLink>
                       )}

src/components/swap/confirmPriceImpactWithoutFee.ts

@@ -1,5 +1,5 @@
 import { Percent } from '@uniswap/sdk-core'
-import { ALLOWED_PRICE_IMPACT_HIGH, PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN } from '../../constants'
+import { ALLOWED_PRICE_IMPACT_HIGH, PRICE_IMPACT_WITHOUT_FEE_CONFIRM_MIN } from '../../constants/misc'
 
 /**
  * Given the price impact, get user confirmation.

src/components/swap/styleds.tsx

@@ -171,7 +171,7 @@ export function SwapCallbackError({ error }: { error: string }) {
       <SwapCallbackErrorInnerAlertTriangle>
         <AlertTriangle size={24} />
       </SwapCallbackErrorInnerAlertTriangle>
-      <p>{error}</p>
+      <p style={{ wordBreak: 'break-word' }}>{error}</p>
     </SwapCallbackErrorInner>
   )
 }

src/components/vote/DelegateModal.tsx

@@ -1,19 +1,19 @@
 import React, { useState } from 'react'
+import { UNI } from '../../constants/tokens'
 
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
-import styled from 'styled-components'
+import styled from 'styled-components/macro'
 import { RowBetween } from '../Row'
 import { TYPE } from '../../theme'
 import { X } from 'react-feather'
 import { ButtonPrimary } from '../Button'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
 import AddressInputPanel from '../AddressInputPanel'
 import { isAddress } from 'ethers/lib/utils'
 import useENS from '../../hooks/useENS'
 import { useDelegateCallback } from '../../state/governance/hooks'
 import { useTokenBalance } from '../../state/wallet/hooks'
-import { UNI } from '../../constants'
 import { LoadingView, SubmittedView } from '../ModalViews'
 import { formatTokenAmount } from 'utils/formatTokenAmount'
 

src/components/vote/VoteModal.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useContext } from 'react'
-import { useActiveWeb3React } from '../../hooks'
+import { useActiveWeb3React } from '../../hooks/web3'
+import { getExplorerLink, ExplorerDataType } from '../../utils/getExplorerLink'
 
 import Modal from '../Modal'
 import { AutoColumn, ColumnCenter } from '../Column'
@@ -10,7 +11,6 @@ import { X, ArrowUpCircle } from 'react-feather'
 import { ButtonPrimary } from '../Button'
 import Circle from '../../assets/images/blue-loader.svg'
 import { useVoteCallback, useUserVotes } from '../../state/governance/hooks'
-import { getEtherscanLink } from '../../utils'
 import { ExternalLink } from '../../theme/components'
 import { formatTokenAmount } from 'utils/formatTokenAmount'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
@@ -133,7 +133,10 @@ export default function VoteModal({ isOpen, onDismiss, proposalId, support }: Vo
               <TYPE.largeHeader>Transaction Submitted</TYPE.largeHeader>
             </AutoColumn>
             {chainId && (
-              <ExternalLink href={getEtherscanLink(chainId, hash, 'transaction')} style={{ marginLeft: '4px' }}>
+              <ExternalLink
+                href={getExplorerLink(chainId, hash, ExplorerDataType.TRANSACTION)}
+                style={{ marginLeft: '4px' }}
+              >
                 <TYPE.subHeader>View transaction on Etherscan</TYPE.subHeader>
               </ExternalLink>
             )}

src/connectors/index.ts

@@ -1,40 +1,53 @@
+import { ChainId } from '@uniswap/sdk-core'
 import { Web3Provider } from '@ethersproject/providers'
 import { InjectedConnector } from '@web3-react/injected-connector'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { WalletLinkConnector } from '@web3-react/walletlink-connector'
 import { PortisConnector } from '@web3-react/portis-connector'
+import getLibrary from '../utils/getLibrary'
 
 import { FortmaticConnector } from './Fortmatic'
 import { NetworkConnector } from './NetworkConnector'
 import UNISWAP_LOGO_URL from '../assets/svg/logo.svg'
 
-const NETWORK_URL = process.env.REACT_APP_NETWORK_URL
+const INFURA_KEY = process.env.REACT_APP_INFURA_KEY
 const FORMATIC_KEY = process.env.REACT_APP_FORTMATIC_KEY
 const PORTIS_ID = process.env.REACT_APP_PORTIS_ID
 const WALLETCONNECT_BRIDGE_URL = process.env.REACT_APP_WALLETCONNECT_BRIDGE_URL
 
-export const NETWORK_CHAIN_ID: number = parseInt(process.env.REACT_APP_CHAIN_ID ?? '1')
-
-if (typeof NETWORK_URL === 'undefined') {
-  throw new Error(`REACT_APP_NETWORK_URL must be a defined environment variable`)
+if (typeof INFURA_KEY === 'undefined') {
+  throw new Error(`REACT_APP_INFURA_KEY must be a defined environment variable`)
 }
 
+const NETWORK_URLS: {
+  [chainId in ChainId]: string
+} = {
+  [ChainId.MAINNET]: `https://mainnet.infura.io/v3/${INFURA_KEY}`,
+  [ChainId.RINKEBY]: `https://rinkeby.infura.io/v3/${INFURA_KEY}`,
+  [ChainId.ROPSTEN]: `https://ropsten.infura.io/v3/${INFURA_KEY}`,
+  [ChainId.GÖRLI]: `https://goerli.infura.io/v3/${INFURA_KEY}`,
+  [ChainId.KOVAN]: `https://kovan.infura.io/v3/${INFURA_KEY}`,
+}
+
+const SUPPORTED_CHAIN_IDS = [ChainId.MAINNET, ChainId.RINKEBY, ChainId.ROPSTEN, ChainId.KOVAN, ChainId.GÖRLI]
+
 export const network = new NetworkConnector({
-  urls: { [NETWORK_CHAIN_ID]: NETWORK_URL },
+  urls: NETWORK_URLS,
+  defaultChainId: ChainId.MAINNET,
 })
 
 let networkLibrary: Web3Provider | undefined
 export function getNetworkLibrary(): Web3Provider {
-  return (networkLibrary = networkLibrary ?? new Web3Provider(network.provider as any))
+  return (networkLibrary = networkLibrary ?? getLibrary(network.provider))
 }
 
 export const injected = new InjectedConnector({
-  supportedChainIds: [1, 3, 4, 5, 42],
+  supportedChainIds: SUPPORTED_CHAIN_IDS,
 })
 
-// mainnet only
 export const walletconnect = new WalletConnectConnector({
-  rpc: { 1: NETWORK_URL },
+  supportedChainIds: SUPPORTED_CHAIN_IDS,
+  infuraId: INFURA_KEY, // obviously a hack
   bridge: WALLETCONNECT_BRIDGE_URL,
   qrcode: true,
   pollingInterval: 15000,
@@ -54,7 +67,7 @@ export const portis = new PortisConnector({
 
 // mainnet only
 export const walletlink = new WalletLinkConnector({
-  url: NETWORK_URL,
+  url: NETWORK_URLS[ChainId.MAINNET],
   appName: 'Uniswap',
   appLogoUrl: UNISWAP_LOGO_URL,
 })

src/constants/addresses.ts

@@ -0,0 +1,32 @@
+import { ChainId } from '@uniswap/sdk-core'
+import { FACTORY_ADDRESS as V3_FACTORY_ADDRESS } from '@uniswap/v3-sdk'
+import { constructSameAddressMap } from '../utils/constructSameAddressMap'
+
+export const UNI_ADDRESS = constructSameAddressMap('0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
+export const MULTICALL2_ADDRESSES = constructSameAddressMap('0x5BA1e12693Dc8F9c48aAD8770482f4739bEeD696')
+export const V2_ROUTER_ADDRESS = constructSameAddressMap('0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D')
+export const GOVERNANCE_ADDRESS = constructSameAddressMap('0x5e4be8Bc9637f0EAA1A755019e06A68ce081D58F')
+export const TIMELOCK_ADDRESS = constructSameAddressMap('0x1a9C8182C09F50C8318d769245beA52c32BE35BC')
+export const MERKLE_DISTRIBUTOR_ADDRESS: { [chainId in ChainId]?: string } = {
+  [ChainId.MAINNET]: '0x090D4613473dEE047c3f2706764f49E0821D256e',
+}
+export const ARGENT_WALLET_DETECTOR_ADDRESS: { [chainId in ChainId]?: string } = {
+  [ChainId.MAINNET]: '0xeca4B0bDBf7c55E9b7925919d03CbF8Dc82537E8',
+}
+export const V3_CORE_FACTORY_ADDRESSES = constructSameAddressMap(V3_FACTORY_ADDRESS)
+export const QUOTER_ADDRESSES = constructSameAddressMap('0xb27308f9F90D607463bb33eA1BeBb41C27CE5AB6')
+export const TICK_LENS_ADDRESSES = constructSameAddressMap('0xbfd8137f7d1516D3ea5cA83523914859ec47F573')
+export const NONFUNGIBLE_POSITION_MANAGER_ADDRESSES = constructSameAddressMap(
+  '0xC36442b4a4522E871399CD717aBDD847Ab11FE88'
+)
+export const ENS_REGISTRAR_ADDRESSES = {
+  [ChainId.MAINNET]: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e',
+  [ChainId.GÖRLI]: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e',
+  [ChainId.RINKEBY]: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e',
+  [ChainId.ROPSTEN]: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e',
+}
+export const SOCKS_CONTROLLER_ADDRESSES = {
+  [ChainId.MAINNET]: '0x65770b5283117639760beA3F867b69b3697a91dd',
+}
+export const SWAP_ROUTER_ADDRESSES = constructSameAddressMap('0xE592427A0AEce92De3Edee1F18E0157C05861564')
+export const V3_MIGRATOR_ADDRESSES = constructSameAddressMap('0xA5644E29708357803b5A882D272c41cC0dF92B34')