chore(i18n): synchronize translations from crowdin [skip ci]

fix: run graphql:codegen on yarn build (#1933 )
* run graphql codegen on build * yarn.lock * remove ms.macro
2021-07-01 10:04:56 +00:00 · 2021-06-29 17:22:41 -07:00 · 2021-06-29 16:27:12 -07:00 · 2021-06-29 12:03:47 -07:00 · 2021-06-29 09:04:42 +00:00 · 2021-06-29 08:04:53 +00:00
195 changed files with 7447 additions and 672 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -27,6 +27,7 @@
    "@typescript-eslint/no-explicit-any": "off",
    "@typescript-eslint/ban-ts-comment": "off",
    "@typescript-eslint/ban-ts-ignore": "off",
-    "@typescript-eslint/explicit-module-boundary-types": "off"
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react/react-in-jsx-scope": "off"
  }
 }
--- a/.github/workflows/integration-tests.yaml
+++ b/.github/workflows/integration-tests.yaml
@@ -46,5 +46,6 @@ jobs:
      - run: yarn integration-test
        env:
          CYPRESS_INTEGRATION_TEST_PRIVATE_KEY: ${{ secrets.CYPRESS_INTEGRATION_TEST_PRIVATE_KEY }}
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}


--- a/.gitignore
+++ b/.gitignore
@@ -7,6 +7,7 @@
 /src/locales/**/*.ts
 /src/locales/**/*.json
 /src/locales/**/en-US.po
+/src/state/data/generated.ts

 # dependencies
 /node_modules
@@ -39,4 +40,4 @@ package-lock.json

 cypress/videos
 cypress/screenshots
-cypress/fixtures/example.json
+cypress/fixtures/example.json
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1 @@
+/src/state/data/generated.ts
--- a/README.md
+++ b/README.md
@@ -28,7 +28,7 @@ or visit [app.uniswap.org](https://app.uniswap.org).

 ## Contributions

-See [CONTRIBUTING](./CONTRIBUTING.md).
+For steps on local deployment, development, and code contribution, please see [CONTRIBUTING](./CONTRIBUTING.md).

 ## Accessing Uniswap V2

--- a/codegen.yml
+++ b/codegen.yml
@@ -0,0 +1,10 @@
+schema: 'https://api.thegraph.com/subgraphs/name/uniswap/uniswap-v3'
+documents: 'src/**/!(*.d).{ts,tsx}'
+generates:
+  ./src/state/data/generated.ts:
+    plugins:
+      - typescript
+      - typescript-operations
+      - typescript-rtk-query:
+          importBaseApiFrom: './slice'
+          exportHooks: true
--- a/cypress.json
+++ b/cypress.json
@@ -1,4 +1,5 @@
 {
+  "projectId": "yp82ef",
  "baseUrl": "http://localhost:3000",
  "pluginsFile": false,
  "fixturesFolder": false,
--- a/cypress/integration/landing.test.ts
+++ b/cypress/integration/landing.test.ts
@@ -4,6 +4,7 @@ describe('Landing Page', () => {
  beforeEach(() => cy.visit('/'))
  it('loads swap page', () => {
    cy.get('#swap-page')
+    cy.screenshot()
  })

  it('redirects to url /swap', () => {
--- a/package.json
+++ b/package.json
@@ -5,6 +5,10 @@
  "private": true,
  "devDependencies": {
    "@ethersproject/experimental": "^5.2.0",
+    "@graphql-codegen/cli": "1.21.5",
+    "@graphql-codegen/typescript": "1.22.3",
+    "@graphql-codegen/typescript-operations": "^1.18.2",
+    "@graphql-codegen/typescript-rtk-query": "^1.1.1",
    "@lingui/cli": "^3.9.0",
    "@lingui/loader": "^3.9.0",
    "@lingui/macro": "^3.9.0",
@@ -14,7 +18,8 @@
    "@reach/dialog": "^0.10.3",
    "@reach/portal": "^0.10.3",
    "@react-hook/window-scroll": "^1.3.0",
-    "@reduxjs/toolkit": "^1.3.5",
+    "@reduxjs/toolkit": "^1.6.0",
+    "@rtk-query/graphql-request-base-query": "^1.0.3",
    "@typechain/ethers-v5": "^7.0.0",
    "@types/jest": "^25.2.1",
    "@types/lingui__core": "^2.7.1",
@@ -66,6 +71,8 @@
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^4.0.0",
    "ethers": "^5.2.0",
+    "graphql": "^15.5.0",
+    "graphql-request": "^3.4.0",
    "inter-ui": "^3.13.1",
    "lightweight-charts": "^3.3.0",
    "lodash.flatmap": "^4.5.0",
@@ -92,6 +99,7 @@
    "react-virtualized-auto-sizer": "^1.0.2",
    "react-window": "^1.8.5",
    "rebass": "^4.0.7",
+    "redux-devtools-extension": "^2.13.9",
    "redux-localstorage-simple": "^2.3.1",
    "serve": "^11.3.2",
    "start-server-and-test": "^1.11.0",
@@ -115,13 +123,15 @@
    "compile-contract-types": "yarn compile-external-abi-types && yarn compile-v3-contract-types",
    "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 && yarn i18n:extract && yarn i18n:compile && react-scripts build",
+    "build": "yarn compile-contract-types && yarn graphql:generate && yarn i18n:extract && yarn i18n:compile && react-scripts build",
    "i18n:extract": "lingui extract --locale en-US",
    "i18n:compile": "lingui compile",
-    "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run'",
+    "integration-test": "start-server-and-test 'serve build -l 3000' http://localhost:3000 'cypress run --record'",
+    "graphql:generate": "graphql-codegen --config codegen.yml",
    "postinstall": "yarn compile-contract-types",
    "start": "yarn compile-contract-types && react-scripts start",
-    "test": "react-scripts test --env=jsdom"
+    "test": "react-scripts test --env=jsdom",
+    "prestart": "yarn graphql:generate && touch src/locales/en-US.po"
  },
  "eslintConfig": {
    "extends": "react-app",
--- a/public/index.html
+++ b/public/index.html
@@ -63,7 +63,6 @@
            pointer-events: none;
            width: 200vw;
            height: 200vh;
-            mix-blend-mode: color;
            background: radial-gradient(50% 50% at 50% 50%, #fc077d10 0%, rgba(255, 255, 255, 0) 100%);
            transform: translate(-50vw, -100vh);
            z-index: -1;
--- a/src/assets/svg/arbitrum_logo.svg
+++ b/src/assets/svg/arbitrum_logo.svg
@@ -0,0 +1,181 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 470.287 514.251" enable-background="new 0 0 470.287 514.251" xml:space="preserve">
+<g id="Background">
+</g>
+<g id="Logos_and_symbols">
+	<g id="SYMBOL_VER_3">
+	</g>
+	<g id="SYMBOL_VER_3_3_">
+	</g>
+	<g id="SYMBOL_VER_4">
+	</g>
+	<g id="SYMBOL_VER_4_1_">
+		<g id="SYMBOL_VER_4_3_">
+		</g>
+	</g>
+	<g id="SYMBOL_VER_5_1_">
+	</g>
+	<g id="off_2_1_">
+	</g>
+	<g id="VER_3_1_">
+		<g id="SYMBOL_VER_2_1_">
+		</g>
+	</g>
+	<g id="VER_3">
+		<g id="SYMBOL_VER_2">
+		</g>
+	</g>
+	<g id="off_2">
+	</g>
+	<g id="SYMBOL_VER_5">
+	</g>
+	<g id="SYMBOL_VER_1">
+	</g>
+	<g id="SYMBOL_VER_1_1_">
+	</g>
+	<g id="SYMBOL_VER_1-1_3_">
+	</g>
+	<g id="SYMBOL_VER_1-1_2_">
+	</g>
+	<g id="SYMBOL_VER_1-1">
+	</g>
+	<g id="SYMBOL_VER_1-1_1_">
+		<g id="_x31_-3">
+		</g>
+		<g id="Symbol_-_Original_14_">
+			<path fill="#2D374B" d="M291.134,237.469l35.654-60.5l96.103,149.684l0.046,28.727l-0.313-197.672
+				c-0.228-4.832-2.794-9.252-6.887-11.859L242.715,46.324c-4.045-1.99-9.18-1.967-13.22,0.063c-0.546,0.272-1.06,0.57-1.548,0.895
+				l-0.604,0.379L59.399,144.983l-0.651,0.296c-0.838,0.385-1.686,0.875-2.48,1.444c-3.185,2.283-5.299,5.66-5.983,9.448
+				c-0.103,0.574-0.179,1.158-0.214,1.749l0.264,161.083l89.515-138.745c11.271-18.397,35.825-24.323,58.62-24.001l26.753,0.706
+				L67.588,409.765l18.582,10.697L245.692,157.22l70.51-0.256L157.091,426.849l66.306,38.138l7.922,4.556
+				c3.351,1.362,7.302,1.431,10.681,0.21l175.453-101.678l-33.544,19.438L291.134,237.469z M304.736,433.395l-66.969-105.108
+				l40.881-69.371l87.952,138.628L304.736,433.395z"/>
+			<polygon fill="#28A0F0" points="237.768,328.286 304.736,433.395 366.601,397.543 278.648,258.915 			"/>
+			<path fill="#28A0F0" d="M422.937,355.379l-0.046-28.727l-96.103-149.684l-35.654,60.5l92.774,150.043l33.544-19.438
+				c3.29-2.673,5.281-6.594,5.49-10.825L422.937,355.379z"/>
+			<path fill="#FFFFFF" d="M20.219,382.469l47.369,27.296l157.634-252.801l-26.753-0.706c-22.795-0.322-47.35,5.604-58.62,24.001
+				L50.334,319.004l-30.115,46.271V382.469z"/>
+			<polygon fill="#FFFFFF" points="316.202,156.964 245.692,157.22 86.17,420.462 141.928,452.565 157.091,426.849 			"/>
+			<path fill="#96BEDC" d="M452.65,156.601c-0.59-14.746-8.574-28.245-21.08-36.104L256.28,19.692
+				c-12.371-6.229-27.825-6.237-40.218-0.004c-1.465,0.739-170.465,98.752-170.465,98.752c-2.339,1.122-4.592,2.458-6.711,3.975
+				c-11.164,8.001-17.969,20.435-18.668,34.095v208.765l30.115-46.271L50.07,157.921c0.035-0.589,0.109-1.169,0.214-1.741
+				c0.681-3.79,2.797-7.171,5.983-9.456c0.795-0.569,172.682-100.064,173.228-100.337c4.04-2.029,9.175-2.053,13.22-0.063
+				l173.022,99.523c4.093,2.607,6.659,7.027,6.887,11.859v199.542c-0.209,4.231-1.882,8.152-5.172,10.825l-33.544,19.438
+				l-17.308,10.031l-61.864,35.852l-62.737,36.357c-3.379,1.221-7.33,1.152-10.681-0.21l-74.228-42.693l-15.163,25.717
+				l66.706,38.406c2.206,1.255,4.171,2.367,5.784,3.272c2.497,1.4,4.199,2.337,4.8,2.629c4.741,2.303,11.563,3.643,17.71,3.643
+				c5.636,0,11.132-1.035,16.332-3.072l182.225-105.531c10.459-8.104,16.612-20.325,17.166-33.564V156.601z"/>
+		</g>
+		<g id="Symbol_-_Original_13_">
+		</g>
+		<g id="Symbol_-_Original_6_">
+		</g>
+		<g id="Symbol_-_Original_4_">
+		</g>
+		<g id="One_color_version_-_White_3_">
+			<g id="Symbol_-_Original_15_">
+			</g>
+		</g>
+		<g id="One_color_version_-_White">
+			<g id="Symbol_-_Original">
+			</g>
+		</g>
+		<g id="Symbol_-_Monochromatic_3_">
+			<g id="_x33__7_">
+			</g>
+		</g>
+		<g id="Symbol_-_Monochromatic">
+			<g id="_x33__3_">
+			</g>
+		</g>
+		<g id="_x33__2_">
+		</g>
+		<g id="_x33__1_">
+		</g>
+		<g id="_x33_">
+		</g>
+		<g id="Symbol_-_Original_10_">
+		</g>
+		<g id="Symbol_-_Original_1_">
+		</g>
+		<g id="Symbol_-_Original_2_">
+		</g>
+		<g id="_x34__1_">
+		</g>
+		<g id="Symbol_-_Monochromatic_2_">
+			<g id="_x33__6_">
+			</g>
+		</g>
+		<g id="One_color_version_-_White_2_">
+			<g id="Symbol_-_Original_11_">
+			</g>
+		</g>
+		<g id="Symbol_-_Original_5_">
+			<g id="Symbol_-_Original_12_">
+			</g>
+		</g>
+		<g id="One_color_version_-_White_1_">
+			<g id="Symbol_-_Original_9_">
+			</g>
+		</g>
+	</g>
+	<g id="SYMBOL_VER_1_2_">
+		<g id="SYMBOL_VER_2_4_">
+		</g>
+		<g id="SYMBOL_VER_2-1-1_1_">
+		</g>
+		<g id="SYMBOL_VER_2-2-1_1_">
+		</g>
+		<g id="SYMBOL_VER_2-3-1_4_">
+		</g>
+		<g id="New_Symbol_1_">
+			<g id="SYMBOL_VER_2-3-1_3_">
+			</g>
+		</g>
+		<g id="New_Symbol">
+			<g id="SYMBOL_VER_2-3-1_1_">
+			</g>
+		</g>
+	</g>
+	<g id="SYMBOL_VER_2_2_">
+	</g>
+	<g id="SYMBOL_VER_4_2_">
+	</g>
+	<g id="SYMBOL_VER_3_2_">
+	</g>
+	<g id="SYMBOL_VER_3_1_">
+	</g>
+	<g id="SYMBOL_VER_1-1-1_1_">
+	</g>
+	<g id="SYMBOL_VER_1-1-1">
+	</g>
+	<g id="SYMBOL_VER_1-1-1_2_2_">
+	</g>
+	<g id="SYMBOL_VER_1-1-1_2">
+	</g>
+	<g id="SYMBOL_VER_1-1-1_2_1_">
+	</g>
+	<g id="Symbol_-_Original_7_">
+	</g>
+	<g id="Symbol_-_Original_8_">
+	</g>
+	<g id="SYMBOL_VER_2-1-1">
+	</g>
+	<g id="SYMBOL_VER_2-2-1">
+	</g>
+	<g id="SYMBOL_VER_2-3-1">
+	</g>
+	<g id="SYMBOL_VER_5-1_1_">
+	</g>
+	<g id="SYMBOL_VER_5-1">
+	</g>
+	<g id="SYMBOL_VER_5-2_1_">
+	</g>
+	<g id="SYMBOL_VER_5-2">
+	</g>
+	<g id="Symbol_-_Monochromatic_1_">
+		<g id="_x33__4_">
+		</g>
+	</g>
+</g>
+</svg>
--- a/src/assets/svg/arbitrum_mask.svg
+++ b/src/assets/svg/arbitrum_mask.svg
--- a/src/components/AccountDetails/Transaction.tsx
+++ b/src/components/AccountDetails/Transaction.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components/macro'
 import { CheckCircle, Triangle } from 'react-feather'

--- a/src/components/AccountDetails/index.tsx
+++ b/src/components/AccountDetails/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext } from 'react'
+import { useCallback, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import { useActiveWeb3React } from '../../hooks/web3'
--- a/src/components/AddressInputPanel/index.tsx
+++ b/src/components/AddressInputPanel/index.tsx
@@ -1,4 +1,5 @@
-import React, { useContext, useCallback } from 'react'
+import { t, Trans } from '@lingui/macro'
+import { useContext, useCallback, ReactNode } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import useENS from '../../hooks/useENS'
 import { useActiveWeb3React } from '../../hooks/web3'
@@ -40,7 +41,7 @@ const Input = styled.input<{ error?: boolean }>`
  width: 0;
  background-color: ${({ theme }) => theme.bg1};
  transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
-  color: ${({ error, theme }) => (error ? theme.red1 : theme.primary1)};
+  color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
@@ -67,10 +68,16 @@ const Input = styled.input<{ error?: boolean }>`

 export default function AddressInputPanel({
  id,
+  className = 'recipient-address-input',
+  label,
+  placeholder,
  value,
  onChange,
 }: {
  id?: string
+  className?: string
+  label?: ReactNode
+  placeholder?: string
  // the typed string value
  value: string
  // triggers whenever the typed value changes
@@ -99,25 +106,25 @@ export default function AddressInputPanel({
          <AutoColumn gap="md">
            <RowBetween>
              <TYPE.black color={theme.text2} fontWeight={500} fontSize={14}>
-                Recipient
+                {label ?? <Trans>Recipient</Trans>}
              </TYPE.black>
              {address && chainId && (
                <ExternalLink
                  href={getExplorerLink(chainId, name ?? address, ExplorerDataType.ADDRESS)}
                  style={{ fontSize: '14px' }}
                >
-                  (View on Explorer)
+                  <Trans>(View on Explorer)</Trans>
                </ExternalLink>
              )}
            </RowBetween>
            <Input
-              className="recipient-address-input"
+              className={className}
              type="text"
              autoComplete="off"
              autoCorrect="off"
              autoCapitalize="off"
              spellCheck="false"
-              placeholder="Wallet Address or ENS name"
+              placeholder={placeholder ?? t`Wallet Address or ENS name`}
              error={error}
              pattern="^(0x[a-fA-F0-9]{40})$"
              onChange={handleInput}
--- a/src/components/Badge/RangeBadge.tsx
+++ b/src/components/Badge/RangeBadge.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import Badge, { BadgeVariant } from 'components/Badge'
 import styled from 'styled-components/macro'

--- a/src/components/Blocklist/index.tsx
+++ b/src/components/Blocklist/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useMemo } from 'react'
+import { ReactNode, useMemo } from 'react'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { Trans } from '@lingui/macro'

--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components/macro'
 import { darken } from 'polished'

--- a/src/components/Confetti/index.tsx
+++ b/src/components/Confetti/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import ReactConfetti from 'react-confetti'
 import { useWindowSize } from '../../hooks/useWindowSize'

--- a/src/components/CurrencyInputPanel/FiatValue.tsx
+++ b/src/components/CurrencyInputPanel/FiatValue.tsx
@@ -1,5 +1,5 @@
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import useTheme from '../../hooks/useTheme'
 import { TYPE } from '../../theme'
 import { warningSeverity } from '../../utils/prices'
--- a/src/components/CurrencyInputPanel/index.tsx
+++ b/src/components/CurrencyInputPanel/index.tsx
@@ -1,6 +1,6 @@
 import { Pair } from '@uniswap/v2-sdk'
 import { Currency, CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
-import React, { useState, useCallback, ReactNode } from 'react'
+import { useState, useCallback, ReactNode } from 'react'
 import styled from 'styled-components/macro'
 import { darken } from 'polished'
 import { useCurrencyBalance } from '../../state/wallet/hooks'
@@ -160,6 +160,8 @@ interface CurrencyInputPanelProps {
  priceImpact?: Percent
  id: string
  showCommonBases?: boolean
+  showCurrencyAmount?: boolean
+  disableNonToken?: boolean
  renderBalance?: (amount: CurrencyAmount<Currency>) => ReactNode
  locked?: boolean
 }
@@ -174,6 +176,8 @@ export default function CurrencyInputPanel({
  otherCurrency,
  id,
  showCommonBases,
+  showCurrencyAmount,
+  disableNonToken,
  renderBalance,
  fiatValue,
  priceImpact,
@@ -298,6 +302,8 @@ export default function CurrencyInputPanel({
          selectedCurrency={currency}
          otherSelectedCurrency={otherCurrency}
          showCommonBases={showCommonBases}
+          showCurrencyAmount={showCurrencyAmount}
+          disableNonToken={disableNonToken}
        />
      )}
    </InputPanel>
--- a/src/components/CurrencyLogo/index.tsx
+++ b/src/components/CurrencyLogo/index.tsx
@@ -7,7 +7,7 @@ import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
 import Logo from '../Logo'

 export const getTokenLogoURL = (address: string) =>
-  `https://raw.githubusercontent.com/trustwallet/assets/master/blockchains/ethereum/assets/${address}/logo.png`
+  `https://raw.githubusercontent.com/uniswap/assets/master/blockchains/ethereum/assets/${address}/logo.png`

 const StyledEthereumLogo = styled.img<{ size: string }>`
  width: ${({ size }) => size};
--- a/src/components/DoubleLogo/index.tsx
+++ b/src/components/DoubleLogo/index.tsx
@@ -1,5 +1,4 @@
 import { Currency } from '@uniswap/sdk-core'
-import React from 'react'
 import styled from 'styled-components/macro'
 import CurrencyLogo from '../CurrencyLogo'

--- a/src/components/FeeSelector/index.tsx
+++ b/src/components/FeeSelector/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { FeeAmount } from '@uniswap/v3-sdk'
 import { Trans } from '@lingui/macro'
 import { AutoColumn } from 'components/Column'
--- a/src/components/FormattedCurrencyAmount/index.tsx
+++ b/src/components/FormattedCurrencyAmount/index.tsx
@@ -1,5 +1,4 @@
 import JSBI from 'jsbi'
-import React from 'react'
 import { Currency, CurrencyAmount, Fraction } from '@uniswap/sdk-core'

 const CURRENCY_AMOUNT_MIN = new Fraction(JSBI.BigInt(1), JSBI.BigInt(1000000))
--- a/src/components/Header/NetworkCard.tsx
+++ b/src/components/Header/NetworkCard.tsx
@@ -0,0 +1,219 @@
+import { Trans } from '@lingui/macro'
+import arbitrumLogoUrl from 'assets/svg/arbitrum_logo.svg'
+import { YellowCard } from 'components/Card'
+import { useOnClickOutside } from 'hooks/useOnClickOutside'
+import { useActiveWeb3React } from 'hooks/web3'
+import { transparentize } from 'polished'
+import React, { useEffect, useRef, useState } from 'react'
+import { ArrowDownCircle } from 'react-feather'
+import { ApplicationModal } from 'state/application/actions'
+import { useModalOpen, useToggleModal } from 'state/application/hooks'
+import styled, { css } from 'styled-components'
+import { ExternalLink } from 'theme'
+import { switchToNetwork } from 'utils/switchToNetwork'
+import { NETWORK_LABELS, SupportedChainId } from '../../constants/chains'
+
+const BaseWrapper = css`
+  position: relative;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    margin-left: 12px;
+  `};
+  ${({ theme }) => theme.mediaWidth.upToSmall`
+    margin: 0 0.5rem 0 0;
+    width: initial;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    flex-shrink: 1;
+  `};
+`
+const ArbitrumWrapper = styled.div`
+  ${BaseWrapper}
+`
+const BaseMenuItem = css`
+  align-items: center;
+  background-color: ${({ theme }) => transparentize(0.9, theme.primary1)};
+  border-radius: 12px;
+  color: ${({ theme }) => theme.text2};
+  cursor: pointer;
+  display: flex;
+  flex: 1;
+  flex-direction: row;
+  font-size: 14px;
+  font-weight: 400;
+  justify-content: space-between;
+  padding: 12px;
+  :hover {
+    color: ${({ theme }) => theme.text1};
+    text-decoration: none;
+  }
+`
+const DisabledMenuItem = styled.div`
+  ${BaseMenuItem}
+  align-items: center;
+  background-color: ${({ theme }) => theme.bg2};
+  cursor: auto;
+  display: flex;
+  font-size: 10px;
+  font-style: italic;
+  justify-content: center;
+  :hover,
+  :active,
+  :focus {
+    color: ${({ theme }) => theme.text2};
+  }
+`
+const FallbackWrapper = styled(YellowCard)`
+  ${BaseWrapper}
+  border-radius: 12px;
+  padding: 8px 12px;
+`
+const Icon = styled.img`
+  width: 17px;
+`
+const L1Tag = styled.div`
+  color: #c4d9f8;
+  opacity: 40%;
+`
+const L2Tag = styled.div`
+  background-color: ${({ theme }) => theme.primary1};
+  border-radius: 6px;
+  color: white;
+  font-size: 12px;
+  font-weight: 600;
+  padding: 2px 6px;
+`
+const MenuFlyout = styled.span`
+  background-color: ${({ theme }) => theme.bg2};
+  box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 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.01);
+  border-radius: 20px;
+  padding: 8px;
+  display: flex;
+  flex-direction: column;
+  font-size: 1rem;
+  position: absolute;
+  left: 0rem;
+  top: 3rem;
+  z-index: 100;
+  width: 237px;
+  ${({ theme }) => theme.mediaWidth.upToMedium`
+    top: -14.25rem;
+  `};
+  > {
+    padding: 12px;
+  }
+  > :not(:first-child) {
+    margin-top: 4px;
+  }
+  > :not(:last-child) {
+    margin-bottom: 4px;
+  }
+`
+const LinkOutCircle = styled(ArrowDownCircle)`
+  transform: rotate(230deg);
+  width: 20px;
+  height: 20px;
+`
+const MenuItem = styled(ExternalLink)`
+  ${BaseMenuItem}
+`
+const ButtonMenuItem = styled.button`
+  ${BaseMenuItem}
+  border: none;
+  outline: none;
+  box-shadow: none;
+`
+const NetworkInfo = styled.button`
+  align-items: center;
+  background-color: ${({ theme }) => theme.bg2};
+  border-radius: 8px;
+  border: none;
+  color: ${({ theme }) => theme.text1};
+  display: flex;
+  flex-direction: row;
+  font-weight: 500;
+  height: 100%;
+  justify-content: space-between;
+  margin: 0;
+  padding: 8px;
+  width: 172px;
+
+  :hover,
+  :focus {
+    cursor: pointer;
+    outline: none;
+    background-color: ${({ theme }) => theme.bg3};
+  }
+`
+export default function NetworkCard() {
+  const { chainId, library } = useActiveWeb3React()
+  const node = useRef<HTMLDivElement>(null)
+  const open = useModalOpen(ApplicationModal.ARBITRUM_OPTIONS)
+  const toggle = useToggleModal(ApplicationModal.ARBITRUM_OPTIONS)
+  useOnClickOutside(node, open ? toggle : undefined)
+
+  const [implements3085, setImplements3085] = useState(false)
+  useEffect(() => {
+    // metamask is currently the only known implementer of this EIP
+    // here we proceed w/ a noop feature check to ensure the user's version of metamask supports network switching
+    // if not, we hide the UI
+    if (!library?.provider?.request || !chainId || !library?.provider?.isMetaMask) {
+      return
+    }
+    switchToNetwork({ library, chainId })
+      .then((x) => x ?? setImplements3085(true))
+      .catch(() => setImplements3085(false))
+  }, [library, chainId])
+
+  if (!chainId || chainId === SupportedChainId.MAINNET || !NETWORK_LABELS[chainId] || !library) {
+    return null
+  }
+
+  if (chainId === SupportedChainId.ARBITRUM_ONE) {
+    return (
+      <ArbitrumWrapper ref={node}>
+        <NetworkInfo onClick={toggle}>
+          <Icon src={arbitrumLogoUrl} />
+          <span>Arbitrum</span>
+          <L2Tag>L2 Alpha</L2Tag>
+        </NetworkInfo>
+        {open && (
+          <MenuFlyout>
+            <MenuItem href="https://bridge.arbitrum.io/">
+              <div>
+                <Trans>Arbitrum Token Bridge</Trans>
+              </div>
+              <LinkOutCircle />
+            </MenuItem>
+            <MenuItem href="https://explorer.arbitrum.io/">
+              <div>
+                <Trans>Arbitrum Explorer</Trans>
+              </div>
+              <LinkOutCircle />
+            </MenuItem>
+            <MenuItem href="https://offchainlabs.com/">
+              <div>
+                <Trans>Learn more</Trans>
+              </div>
+              <LinkOutCircle />
+            </MenuItem>
+            {implements3085 ? (
+              <ButtonMenuItem onClick={() => switchToNetwork({ library, chainId: SupportedChainId.MAINNET })}>
+                <div>
+                  <Trans>Switch to Ethereum</Trans>
+                </div>
+                <L1Tag>L1</L1Tag>
+              </ButtonMenuItem>
+            ) : (
+              <DisabledMenuItem>
+                <Trans>Change your network to go back to L1</Trans>
+              </DisabledMenuItem>
+            )}
+          </MenuFlyout>
+        )}
+      </ArbitrumWrapper>
+    )
+  }
+
+  return <FallbackWrapper title={NETWORK_LABELS[chainId]}>{NETWORK_LABELS[chainId]}</FallbackWrapper>
+}
--- a/src/components/Header/Polling.tsx
+++ b/src/components/Header/Polling.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import styled, { keyframes } from 'styled-components'
 import { useActiveWeb3React } from '../../hooks/web3'

--- a/src/components/Header/URLWarning.tsx
+++ b/src/components/Header/URLWarning.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components/macro'

 import { AlertTriangle, X } from 'react-feather'
--- a/src/components/Header/UniBalanceContent.tsx
+++ b/src/components/Header/UniBalanceContent.tsx
@@ -1,5 +1,5 @@
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { X } from 'react-feather'
 import styled from 'styled-components/macro'
 import tokenLogo from '../../assets/images/token-logo.png'
--- a/src/components/Header/index.tsx
+++ b/src/components/Header/index.tsx
@@ -1,7 +1,7 @@
 import { Trans } from '@lingui/macro'
 import useScrollPosition from '@react-hook/window-scroll'
 import { darken } from 'polished'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Moon, Sun } from 'react-feather'
 import { NavLink } from 'react-router-dom'
 import { Text } from 'rebass'
@@ -13,10 +13,8 @@ import { useETHBalances } from 'state/wallet/hooks'
 import styled from 'styled-components/macro'
 import Logo from '../../assets/svg/logo.svg'
 import LogoDark from '../../assets/svg/logo_white.svg'
-import { NETWORK_LABELS, SupportedChainId } from '../../constants/chains'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { ExternalLink, TYPE } from '../../theme'
-import { YellowCard } from '../Card'
 import ClaimModal from '../claim/ClaimModal'
 import { CardNoise } from '../earn/styled'
 import Menu from '../Menu'
@@ -24,6 +22,7 @@ import Modal from '../Modal'
 import Row, { RowFixed } from '../Row'
 import { Dots } from '../swap/styleds'
 import Web3Status from '../Web3Status'
+import NetworkCard from './NetworkCard'
 import UniBalanceContent from './UniBalanceContent'

 const HeaderFrame = styled.div<{ showBackground: boolean }>`
@@ -166,19 +165,6 @@ const HideSmall = styled.span`
  `};
 `

-const NetworkCard = styled(YellowCard)`
-  border-radius: 12px;
-  padding: 8px 12px;
-  ${({ theme }) => theme.mediaWidth.upToSmall`
-    margin: 0;
-    margin-right: 0.5rem;
-    width: initial;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex-shrink: 1;
-  `};
-`
-
 const BalanceText = styled(Text)`
  ${({ theme }) => theme.mediaWidth.upToExtraSmall`
    display: none;
@@ -299,7 +285,7 @@ export const StyledMenuButton = styled.button`
 `

 export default function Header() {
-  const { account, chainId } = useActiveWeb3React()
+  const { account } = useActiveWeb3React()

  const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
  // const [isDark] = useDarkModeManager()
@@ -357,9 +343,7 @@ export default function Header() {
      <HeaderControls>
        <HeaderElement>
          <HideSmall>
-            {chainId && chainId !== SupportedChainId.MAINNET && NETWORK_LABELS[chainId] && (
-              <NetworkCard title={NETWORK_LABELS[chainId]}>{NETWORK_LABELS[chainId]}</NetworkCard>
-            )}
+            <NetworkCard />
          </HideSmall>
          {availableClaim && !showClaimPopup && (
            <UNIWrapper onClick={toggleClaimModal}>
--- a/src/components/HoverInlineText/index.tsx
+++ b/src/components/HoverInlineText/index.tsx
@@ -1,5 +1,5 @@
 import Tooltip from 'components/Tooltip'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import styled from 'styled-components/macro'

 const TextWrapper = styled.span<{ margin: boolean; link?: boolean; fontSize?: string; adjustSize?: boolean }>`
--- a/src/components/Identicon/index.tsx
+++ b/src/components/Identicon/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'

 import styled from 'styled-components/macro'

--- a/src/components/InputStepCounter/InputStepCounter.tsx
+++ b/src/components/InputStepCounter/InputStepCounter.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useEffect, ReactNode } from 'react'
+import { useState, useCallback, useEffect, ReactNode } from 'react'
 import { LightCard } from 'components/Card'
 import { RowBetween } from 'components/Row'
 import { Input as NumericalInput } from '../NumericalInput'
--- a/src/components/Loader/index.tsx
+++ b/src/components/Loader/index.tsx
@@ -1,5 +1,3 @@
-import React from 'react'
-
 import styled, { keyframes } from 'styled-components'

 const rotate = keyframes`
--- a/src/components/Logo/index.tsx
+++ b/src/components/Logo/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Slash } from 'react-feather'
 import { ImageProps } from 'rebass'
 import useTheme from '../../hooks/useTheme'
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -30,7 +30,7 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
 )).attrs({
  'aria-label': 'dialog',
 })`
-  overflow-y: ${({ mobile }) => (mobile ? 'scroll' : 'hidden')};
+  overflow-y: auto;

  &[data-reach-dialog-content] {
    margin: 0 0 2rem 0;
@@ -39,7 +39,7 @@ const StyledDialogContent = styled(({ minHeight, maxHeight, mobile, isOpen, ...r
    box-shadow: 0 4px 8px 0 ${({ theme }) => transparentize(0.95, theme.shadow1)};
    padding: 0px;
    width: 50vw;
-    overflow-y: ${({ mobile }) => (mobile ? 'scroll' : 'hidden')};
+    overflow-y: auto;
    overflow-x: hidden;

    align-self: ${({ mobile }) => (mobile ? 'flex-end' : 'center')};
--- a/src/components/ModalViews/index.tsx
+++ b/src/components/ModalViews/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'

--- a/src/components/NavigationTabs/index.tsx
+++ b/src/components/NavigationTabs/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components/macro'
 import { darken } from 'polished'
 import { Trans } from '@lingui/macro'
@@ -6,7 +5,7 @@ import { NavLink, Link as HistoryLink, useLocation } from 'react-router-dom'
 import { Percent } from '@uniswap/sdk-core'

 import { ArrowLeft } from 'react-feather'
-import { RowBetween } from '../Row'
+import Row, { RowBetween } from '../Row'
 import SettingsTab from '../Settings'

 import { useAppDispatch } from 'state/hooks'
@@ -137,3 +136,16 @@ export function AddRemoveTabs({
    </Tabs>
  )
 }
+
+export function CreateProposalTabs() {
+  return (
+    <Tabs>
+      <Row style={{ padding: '1rem 1rem 0 1rem' }}>
+        <HistoryLink to="/vote">
+          <StyledArrowLeft />
+        </HistoryLink>
+        <ActiveText style={{ marginLeft: 'auto', marginRight: 'auto' }}>Create Proposal</ActiveText>
+      </Row>
+    </Tabs>
+  )
+}
--- a/src/components/Popups/ClaimPopup.tsx
+++ b/src/components/Popups/ClaimPopup.tsx
@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
-import React, { useCallback, useEffect } from 'react'
+import { useCallback, useEffect } from 'react'
 import ReactGA from 'react-ga'
 import { Heart, X } from 'react-feather'
 import styled, { keyframes } from 'styled-components'
--- a/src/components/Popups/PopupItem.tsx
+++ b/src/components/Popups/PopupItem.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useContext, useEffect } from 'react'
+import { useCallback, useContext, useEffect } from 'react'
 import { X } from 'react-feather'
 import { useSpring } from 'react-spring/web'
 import styled, { ThemeContext } from 'styled-components'
--- a/src/components/Popups/TransactionPopup.tsx
+++ b/src/components/Popups/TransactionPopup.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import { AlertCircle, CheckCircle } from 'react-feather'
 import styled, { ThemeContext } from 'styled-components'
 import { useActiveWeb3React } from '../../hooks/web3'
--- a/src/components/Popups/index.tsx
+++ b/src/components/Popups/index.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components/macro'
 import { useActivePopups } from '../../state/application/hooks'
 import { AutoColumn } from '../Column'
--- a/src/components/PositionCard/Sushi.tsx
+++ b/src/components/PositionCard/Sushi.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Token } from '@uniswap/sdk-core'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
--- a/src/components/PositionCard/V2.tsx
+++ b/src/components/PositionCard/V2.tsx
@@ -1,5 +1,5 @@
 import JSBI from 'jsbi'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Percent, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { ChevronDown, ChevronUp } from 'react-feather'
--- a/src/components/PositionCard/index.tsx
+++ b/src/components/PositionCard/index.tsx
@@ -2,7 +2,7 @@ import JSBI from 'jsbi'
 import { Percent, CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { Pair } from '@uniswap/v2-sdk'
 import { darken } from 'polished'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { Link } from 'react-router-dom'
 import { Text } from 'rebass'
--- a/src/components/PositionListItem/index.tsx
+++ b/src/components/PositionListItem/index.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Position } from '@uniswap/v3-sdk'
 import Badge from 'components/Badge'
 import DoubleCurrencyLogo from 'components/DoubleLogo'
--- a/src/components/PositionPreview/index.tsx
+++ b/src/components/PositionPreview/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback, useContext, ReactNode } from 'react'
+import { useState, useCallback, useContext, ReactNode } from 'react'
 import { Position } from '@uniswap/v3-sdk'
 import { LightCard } from 'components/Card'
 import { AutoColumn } from 'components/Column'
--- a/src/components/ProgressSteps/index.tsx
+++ b/src/components/ProgressSteps/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
 import styled from 'styled-components/macro'
 import { AutoColumn } from '../Column'
 import { ThemeContext } from 'styled-components'
--- a/src/components/QuestionHelper/index.tsx
+++ b/src/components/QuestionHelper/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useState } from 'react'
+import { ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
 import Tooltip from '../Tooltip'

--- a/src/components/RangeSelector/index.tsx
+++ b/src/components/RangeSelector/index.tsx
@@ -1,5 +1,4 @@
 import { Trans } from '@lingui/macro'
-import React from 'react'
 import { Currency, Price, Token } from '@uniswap/sdk-core'
 import StepCounter from 'components/InputStepCounter/InputStepCounter'
 import { RowBetween } from 'components/Row'
--- a/src/components/RateToggle/index.tsx
+++ b/src/components/RateToggle/index.tsx
@@ -1,5 +1,4 @@
 import { Trans } from '@lingui/macro'
-import React from 'react'
 import { Currency } from '@uniswap/sdk-core'
 import { ToggleElement, ToggleWrapper } from 'components/Toggle/MultiToggle'

--- a/src/components/SearchModal/CommonBases.tsx
+++ b/src/components/SearchModal/CommonBases.tsx
@@ -1,5 +1,4 @@
 import { Trans } from '@lingui/macro'
-import React from 'react'
 import { Text } from 'rebass'
 import { Currency } from '@uniswap/sdk-core'
 import styled from 'styled-components/macro'
--- a/src/components/SearchModal/CurrencyList.tsx
+++ b/src/components/SearchModal/CurrencyList.tsx
@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { Currency, CurrencyAmount, Token } from '@uniswap/sdk-core'
-import React, { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
+import { CSSProperties, MutableRefObject, useCallback, useMemo } from 'react'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
@@ -104,12 +104,14 @@ function CurrencyRow({
  isSelected,
  otherSelected,
  style,
+  showCurrencyAmount,
 }: {
  currency: Currency
  onSelect: () => void
  isSelected: boolean
  otherSelected: boolean
  style: CSSProperties
+  showCurrencyAmount?: boolean
 }) {
  const { account } = useActiveWeb3React()
  const key = currencyKey(currency)
@@ -141,9 +143,11 @@ function CurrencyRow({
        </TYPE.darkGray>
      </Column>
      <TokenTags currency={currency} />
-      <RowFixed style={{ justifySelf: 'flex-end' }}>
-        {balance ? <Balance balance={balance} /> : account ? <Loader /> : null}
-      </RowFixed>
+      {showCurrencyAmount && (
+        <RowFixed style={{ justifySelf: 'flex-end' }}>
+          {balance ? <Balance balance={balance} /> : account ? <Loader /> : null}
+        </RowFixed>
+      )}
    </MenuItem>
  )
 }
@@ -189,6 +193,7 @@ export default function CurrencyList({
  fixedListRef,
  showImportView,
  setImportToken,
+  showCurrencyAmount,
 }: {
  height: number
  currencies: Currency[]
@@ -199,6 +204,7 @@ export default function CurrencyList({
  fixedListRef?: MutableRefObject<FixedSizeList | undefined>
  showImportView: () => void
  setImportToken: (token: Token) => void
+  showCurrencyAmount?: boolean
 }) {
  const itemData: (Currency | BreakLine)[] = useMemo(() => {
    if (otherListTokens && otherListTokens?.length > 0) {
@@ -237,13 +243,22 @@ export default function CurrencyList({
            isSelected={isSelected}
            onSelect={handleSelect}
            otherSelected={otherSelected}
+            showCurrencyAmount={showCurrencyAmount}
          />
        )
      } else {
        return null
      }
    },
-    [currencies.length, onCurrencySelect, otherCurrency, selectedCurrency, setImportToken, showImportView]
+    [
+      currencies.length,
+      onCurrencySelect,
+      otherCurrency,
+      selectedCurrency,
+      setImportToken,
+      showImportView,
+      showCurrencyAmount,
+    ]
  )

  const itemKey = useCallback((index: number, data: typeof itemData) => {
--- a/src/components/SearchModal/CurrencySearch.tsx
+++ b/src/components/SearchModal/CurrencySearch.tsx
@@ -1,5 +1,5 @@
 import { Currency, Token } from '@uniswap/sdk-core'
-import React, { KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { KeyboardEvent, RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import ReactGA from 'react-ga'
 import { t, Trans } from '@lingui/macro'
 import { FixedSizeList } from 'react-window'
@@ -48,6 +48,8 @@ interface CurrencySearchProps {
  onCurrencySelect: (currency: Currency) => void
  otherSelectedCurrency?: Currency | null
  showCommonBases?: boolean
+  showCurrencyAmount?: boolean
+  disableNonToken?: boolean
  showManageView: () => void
  showImportView: () => void
  setImportToken: (token: Token) => void
@@ -58,6 +60,8 @@ export function CurrencySearch({
  onCurrencySelect,
  otherSelectedCurrency,
  showCommonBases,
+  showCurrencyAmount,
+  disableNonToken,
  onDismiss,
  isOpen,
  showManageView,
@@ -203,7 +207,7 @@ export function CurrencySearch({
            {({ height }) => (
              <CurrencyList
                height={height}
-                currencies={filteredSortedTokensWithETH}
+                currencies={disableNonToken ? filteredSortedTokens : filteredSortedTokensWithETH}
                otherListTokens={filteredInactiveTokens}
                onCurrencySelect={handleCurrencySelect}
                otherCurrency={otherSelectedCurrency}
@@ -211,6 +215,7 @@ export function CurrencySearch({
                fixedListRef={fixedList}
                showImportView={showImportView}
                setImportToken={setImportToken}
+                showCurrencyAmount={showCurrencyAmount}
              />
            )}
          </AutoSizer>
--- a/src/components/SearchModal/CurrencySearchModal.tsx
+++ b/src/components/SearchModal/CurrencySearchModal.tsx
@@ -1,5 +1,5 @@
 import { Currency, Token } from '@uniswap/sdk-core'
-import React, { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import useLast from '../../hooks/useLast'
 import { WrappedTokenInfo } from '../../state/lists/wrappedTokenInfo'
 import Modal from '../Modal'
@@ -17,6 +17,8 @@ interface CurrencySearchModalProps {
  onCurrencySelect: (currency: Currency) => void
  otherSelectedCurrency?: Currency | null
  showCommonBases?: boolean
+  showCurrencyAmount?: boolean
+  disableNonToken?: boolean
 }

 export enum CurrencyModalView {
@@ -33,6 +35,8 @@ export default function CurrencySearchModal({
  selectedCurrency,
  otherSelectedCurrency,
  showCommonBases = false,
+  showCurrencyAmount = true,
+  disableNonToken = false,
 }: CurrencySearchModalProps) {
  const [modalView, setModalView] = useState<CurrencyModalView>(CurrencyModalView.manage)
  const lastOpen = useLast(isOpen)
@@ -74,6 +78,8 @@ export default function CurrencySearchModal({
          selectedCurrency={selectedCurrency}
          otherSelectedCurrency={otherSelectedCurrency}
          showCommonBases={showCommonBases}
+          showCurrencyAmount={showCurrencyAmount}
+          disableNonToken={disableNonToken}
          showImportView={() => setModalView(CurrencyModalView.importToken)}
          setImportToken={setImportToken}
          showManageView={() => setModalView(CurrencyModalView.manage)}
--- a/src/components/SearchModal/ImportList.tsx
+++ b/src/components/SearchModal/ImportList.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import { useState, useCallback } from 'react'
 import styled from 'styled-components/macro'
 import ReactGA from 'react-ga'
 import { TYPE, CloseIcon } from 'theme'
--- a/src/components/SearchModal/ImportRow.tsx
+++ b/src/components/SearchModal/ImportRow.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from 'react'
+import { CSSProperties } from 'react'
 import { Token } from '@uniswap/sdk-core'
 import { AutoRow, RowFixed } from 'components/Row'
 import { AutoColumn } from 'components/Column'
--- a/src/components/SearchModal/ImportToken.tsx
+++ b/src/components/SearchModal/ImportToken.tsx
@@ -1,5 +1,4 @@
 import { TokenList } from '@uniswap/token-lists/dist/types'
-import React from 'react'
 import { Token, Currency } from '@uniswap/sdk-core'
 import styled from 'styled-components/macro'
 import { TYPE, CloseIcon } from 'theme'
--- a/src/components/SearchModal/Manage.tsx
+++ b/src/components/SearchModal/Manage.tsx
@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { PaddedColumn, Separator } from './styleds'
 import { RowBetween } from 'components/Row'
 import { ArrowLeft } from 'react-feather'
--- a/src/components/SearchModal/ManageLists.tsx
+++ b/src/components/SearchModal/ManageLists.tsx
@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo, useRef, useState, useEffect } from 'react'
+import { memo, useCallback, useMemo, useRef, useState, useEffect } from 'react'
 import { Settings, CheckCircle } from 'react-feather'
 import ReactGA from 'react-ga'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
--- a/src/components/SearchModal/ManageTokens.tsx
+++ b/src/components/SearchModal/ManageTokens.tsx
@@ -1,4 +1,4 @@
-import React, { useRef, RefObject, useCallback, useState, useMemo } from 'react'
+import { useRef, RefObject, useCallback, useState, useMemo } from 'react'
 import Column from 'components/Column'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import { PaddedColumn, Separator, SearchInput } from './styleds'
--- a/src/components/SearchModal/SortButton.tsx
+++ b/src/components/SearchModal/SortButton.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import { RowFixed } from '../Row'
--- a/src/components/Settings/index.tsx
+++ b/src/components/Settings/index.tsx
@@ -1,5 +1,5 @@
 import { t, Trans } from '@lingui/macro'
-import React, { useContext, useRef, useState } from 'react'
+import { useContext, useRef, useState } from 'react'
 import { Settings, X } from 'react-feather'
 import ReactGA from 'react-ga'
 import { Text } from 'rebass'
--- a/src/components/Slider/index.tsx
+++ b/src/components/Slider/index.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import styled from 'styled-components/macro'

 const StyledRangeInput = styled.input<{ size: number }>`
--- a/src/components/SwitchLocaleLink/index.tsx
+++ b/src/components/SwitchLocaleLink/index.tsx
@@ -1,5 +1,5 @@
 import { Trans } from '@lingui/macro'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import ReactGA from 'react-ga'
 import { useLocation } from 'react-router'
 import styled from 'styled-components/macro'
--- a/src/components/TextInput/index.tsx
+++ b/src/components/TextInput/index.tsx
@@ -0,0 +1,146 @@
+import React, { memo, useCallback, useRef } from 'react'
+import styled from 'styled-components'
+
+const Input = styled.input<{ error?: boolean; fontSize?: string }>`
+  font-size: ${({ fontSize }) => fontSize || '1.25rem'};
+  outline: none;
+  border: none;
+  flex: 1 1 auto;
+  width: 0;
+  background-color: ${({ theme }) => theme.bg1};
+  transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
+  color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  width: 100%;
+  padding: 0px;
+  -webkit-appearance: textfield;
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  ::placeholder {
+    color: ${({ theme }) => theme.text4};
+  }
+`
+
+const TextAreaInput = styled.textarea<{ error?: boolean; fontSize?: string }>`
+  font-size: ${({ fontSize }) => fontSize || '1.25rem'};
+  outline: none;
+  border: none;
+  flex: 1 1 auto;
+  width: 0;
+  resize: none;
+  background-color: ${({ theme }) => theme.bg1};
+  transition: color 300ms ${({ error }) => (error ? 'step-end' : 'step-start')};
+  color: ${({ error, theme }) => (error ? theme.red1 : theme.text1)};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: 500;
+  width: 100%;
+  line-height: 1.2;
+  padding: 0px;
+  -webkit-appearance: textfield;
+
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+
+  ::-webkit-outer-spin-button,
+  ::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+
+  ::placeholder {
+    color: ${({ theme }) => theme.text4};
+  }
+`
+
+export const TextInput = ({
+  className,
+  value,
+  onUserInput,
+  placeholder,
+  fontSize,
+}: {
+  className?: string
+  value: string
+  onUserInput: (value: string) => void
+  placeholder: string
+  fontSize: string
+}) => {
+  const handleInput = useCallback(
+    (event) => {
+      onUserInput(event.target.value)
+    },
+    [onUserInput]
+  )
+
+  return (
+    <div className={className}>
+      <Input
+        type="text"
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck="false"
+        placeholder={placeholder || ''}
+        onChange={handleInput}
+        value={value}
+        fontSize={fontSize}
+      />
+    </div>
+  )
+}
+
+export const ResizingTextArea = memo(
+  ({
+    className,
+    value,
+    onUserInput,
+    placeholder,
+    fontSize,
+  }: {
+    className?: string
+    value: string
+    onUserInput: (value: string) => void
+    placeholder: string
+    fontSize: string
+  }) => {
+    const inputRef = useRef<HTMLTextAreaElement>(document.createElement('textarea'))
+
+    const handleInput = useCallback(
+      (event) => {
+        inputRef.current.style.height = 'auto'
+        inputRef.current.style.height = inputRef.current.scrollHeight + 'px'
+        onUserInput(event.target.value)
+      },
+      [onUserInput]
+    )
+
+    return (
+      <TextAreaInput
+        style={{ height: 'auto', minHeight: '500px' }}
+        className={className}
+        autoComplete="off"
+        autoCorrect="off"
+        autoCapitalize="off"
+        spellCheck="false"
+        placeholder={placeholder || ''}
+        onChange={handleInput}
+        value={value}
+        fontSize={fontSize}
+        ref={inputRef}
+      />
+    )
+  }
+)
+
+ResizingTextArea.displayName = 'ResizingTextArea'
--- a/src/components/ThemeColorPalette/index.tsx
+++ b/src/components/ThemeColorPalette/index.tsx
@@ -1,5 +1,4 @@
 import { readableColor } from 'polished'
-import React from 'react'
 import styled from 'styled-components/macro'
 import { colors } from 'theme'

--- a/src/components/Toggle/ListToggle.tsx
+++ b/src/components/Toggle/ListToggle.tsx
@@ -1,5 +1,4 @@
 import { Trans } from '@lingui/macro'
-import React from 'react'
 import styled from 'styled-components/macro'
 import { TYPE } from '../../theme'

--- a/src/components/Toggle/index.tsx
+++ b/src/components/Toggle/index.tsx
@@ -1,6 +1,6 @@
 import { Trans } from '@lingui/macro'
 import { darken } from 'polished'
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import styled from 'styled-components/macro'

 const ToggleElement = styled.span<{ isActive?: boolean; isOnSwitch?: boolean }>`
--- a/src/components/TokenWarningModal/index.tsx
+++ b/src/components/TokenWarningModal/index.tsx
@@ -1,5 +1,4 @@
 import { Token } from '@uniswap/sdk-core'
-import React from 'react'
 import Modal from '../Modal'
 import { ImportToken } from 'components/SearchModal/ImportToken'

--- a/src/components/Tooltip/index.tsx
+++ b/src/components/Tooltip/index.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useState } from 'react'
+import { ReactNode, useCallback, useState } from 'react'
 import styled from 'styled-components/macro'
 import Popover, { PopoverProps } from '../Popover'

--- a/src/components/TransactionConfirmationModal/index.tsx
+++ b/src/components/TransactionConfirmationModal/index.tsx
@@ -1,5 +1,5 @@
 import { Currency } from '@uniswap/sdk-core'
-import React, { ReactNode, useContext } from 'react'
+import { ReactNode, useContext } from 'react'
 import styled, { ThemeContext } from 'styled-components'
 import { getExplorerLink, ExplorerDataType } from '../../utils/getExplorerLink'
 import Modal from '../Modal'
--- a/src/components/TransactionSettings/index.tsx
+++ b/src/components/TransactionSettings/index.tsx
@@ -1,5 +1,5 @@
 import { t, Trans } from '@lingui/macro'
-import React, { useState, useContext } from 'react'
+import { useState, useContext } from 'react'
 import { Percent } from '@uniswap/sdk-core'
 import styled, { ThemeContext } from 'styled-components'

--- a/src/components/WalletModal/PendingView.tsx
+++ b/src/components/WalletModal/PendingView.tsx
@@ -1,5 +1,4 @@
 import { AbstractConnector } from '@web3-react/abstract-connector'
-import React from 'react'
 import styled from 'styled-components/macro'
 import { SUPPORTED_WALLETS } from '../../constants/wallet'
 import Option from './Option'
--- a/src/components/WalletModal/index.tsx
+++ b/src/components/WalletModal/index.tsx
@@ -2,7 +2,7 @@ import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { WalletConnectConnector } from '@web3-react/walletconnect-connector'
 import { AutoRow } from 'components/Row'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import ReactGA from 'react-ga'
 import styled from 'styled-components/macro'
--- a/src/components/Web3ReactManager/index.tsx
+++ b/src/components/Web3ReactManager/index.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import { useState, useEffect } from 'react'
 import { useWeb3React } from '@web3-react/core'
 import styled from 'styled-components/macro'
 import { Trans } from '@lingui/macro'
--- a/src/components/Web3Status/index.tsx
+++ b/src/components/Web3Status/index.tsx
@@ -1,7 +1,7 @@
 import { AbstractConnector } from '@web3-react/abstract-connector'
 import { UnsupportedChainIdError, useWeb3React } from '@web3-react/core'
 import { darken, lighten } from 'polished'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { Activity } from 'react-feather'
 import { t, Trans } from '@lingui/macro'
 import styled, { css } from 'styled-components'
--- a/src/components/claim/AddressClaimModal.tsx
+++ b/src/components/claim/AddressClaimModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { ExplorerDataType, getExplorerLink } from '../../utils/getExplorerLink'
 import Modal from '../Modal'
 import { AutoColumn, ColumnCenter } from '../Column'
--- a/src/components/claim/ClaimModal.tsx
+++ b/src/components/claim/ClaimModal.tsx
@@ -1,7 +1,7 @@
 import JSBI from 'jsbi'
 import { CurrencyAmount, Token } from '@uniswap/sdk-core'
 import { isAddress } from 'ethers/lib/utils'
-import React, { useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { Text } from 'rebass'
 import styled from 'styled-components/macro'
 import Circle from '../../assets/images/blue-loader.svg'
--- a/src/components/earn/ClaimRewardModal.tsx
+++ b/src/components/earn/ClaimRewardModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
 import styled from 'styled-components/macro'
--- a/src/components/earn/PoolCard.tsx
+++ b/src/components/earn/PoolCard.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { AutoColumn } from '../Column'
 import { RowBetween } from '../Row'
 import styled from 'styled-components/macro'
--- a/src/components/earn/StakingModal.tsx
+++ b/src/components/earn/StakingModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react'
+import { useState, useCallback } from 'react'
 import { useV2LiquidityTokenPermit } from '../../hooks/useERC20Permit'
 import useTransactionDeadline from '../../hooks/useTransactionDeadline'
 import { formatCurrencyAmount } from '../../utils/formatCurrencyAmount'
--- a/src/components/earn/UnstakingModal.tsx
+++ b/src/components/earn/UnstakingModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import Modal from '../Modal'
 import { AutoColumn } from '../Column'
 import styled from 'styled-components/macro'
--- a/src/components/swap/AdvancedSwapDetails.tsx
+++ b/src/components/swap/AdvancedSwapDetails.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 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, useMemo } from 'react'
+import { useContext, useMemo } from 'react'
 import { ThemeContext } from 'styled-components'
 import { TYPE } from '../../theme'
 import { computeRealizedLPFeePercent } from '../../utils/prices'
--- a/src/components/swap/AdvancedSwapDetailsDropdown.tsx
+++ b/src/components/swap/AdvancedSwapDetailsDropdown.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import styled from 'styled-components/macro'
 import { useLastTruthy } from '../../hooks/useLast'
 import { AdvancedSwapDetails, AdvancedSwapDetailsProps } from './AdvancedSwapDetails'
--- a/src/components/swap/BetterTradeLink.tsx
+++ b/src/components/swap/BetterTradeLink.tsx
@@ -1,5 +1,5 @@
 import { stringify } from 'qs'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 import { useLocation } from 'react-router'
 import { Link } from 'react-router-dom'

--- a/src/components/swap/ConfirmSwapModal.tsx
+++ b/src/components/swap/ConfirmSwapModal.tsx
@@ -2,7 +2,7 @@ import { Trans } from '@lingui/macro'
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
-import React, { ReactNode, useCallback, useMemo } from 'react'
+import { ReactNode, useCallback, useMemo } from 'react'
 import TransactionConfirmationModal, {
  ConfirmationModalContent,
  TransactionErrorContent,
--- a/src/components/swap/FormattedPriceImpact.tsx
+++ b/src/components/swap/FormattedPriceImpact.tsx
@@ -1,5 +1,4 @@
 import { Percent } from '@uniswap/sdk-core'
-import React from 'react'
 import { warningSeverity } from '../../utils/prices'
 import { ErrorText, ErrorPill } from './styleds'

--- a/src/components/swap/SwapHeader.tsx
+++ b/src/components/swap/SwapHeader.tsx
@@ -1,5 +1,4 @@
 import { Trans } from '@lingui/macro'
-import React from 'react'
 import styled from 'styled-components/macro'
 import SettingsTab from '../Settings'
 import { Percent } from '@uniswap/sdk-core'
--- a/src/components/swap/SwapModalFooter.tsx
+++ b/src/components/swap/SwapModalFooter.tsx
@@ -3,7 +3,7 @@ import { Currency, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'

-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import { Text } from 'rebass'
 import { ButtonError } from '../Button'
 import { AutoRow } from '../Row'
--- a/src/components/swap/SwapModalHeader.tsx
+++ b/src/components/swap/SwapModalHeader.tsx
@@ -1,7 +1,7 @@
 import { Currency, Percent, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade } from '@uniswap/v3-sdk'
-import React, { useContext, useState } from 'react'
+import { useContext, useState } from 'react'
 import { ArrowDown, AlertTriangle } from 'react-feather'
 import { Text } from 'rebass'
 import styled, { ThemeContext } from 'styled-components'
--- a/src/components/swap/SwapNetworkAlert.tsx
+++ b/src/components/swap/SwapNetworkAlert.tsx
@@ -0,0 +1,115 @@
+import { Trans } from '@lingui/macro'
+import arbitrumMaskUrl from 'assets/svg/arbitrum_mask.svg'
+import { SupportedChainId } from 'constants/chains'
+import { useActiveWeb3React } from 'hooks/web3'
+import React, { useCallback, useState } from 'react'
+import { ArrowDownCircle, X } from 'react-feather'
+import { useArbitrumAlphaAlert } from 'state/user/hooks'
+import { useETHBalances } from 'state/wallet/hooks'
+import styled from 'styled-components'
+
+const CloseIcon = styled(X)`
+  cursor: pointer;
+  position: absolute;
+  top: 1em;
+  right: 1em;
+`
+const Wrapper = styled.div`
+  border-radius: 20px;
+  background: radial-gradient(285.11% 8200.45% at 29.05% 48.94%, rgba(40, 160, 240, 0.1) 0%, rgba(219, 255, 0, 0) 100%),
+    radial-gradient(76.02% 75.41% at 1.84% 0%, rgba(150, 190, 220, 0.3) 0%, rgba(33, 114, 229, 0.3) 100%);
+  display: flex;
+  flex-direction: column;
+  max-width: 480px;
+  min-height: 212px;
+  overflow: hidden;
+  position: relative;
+  width: 100%;
+
+  :before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-image: url(${arbitrumMaskUrl});
+    background-repeat: no-repeat;
+    transform: rotate(15deg), scale(1);
+  }
+`
+const ArbitrumTextStyles = styled.span`
+  font-style: italic;
+  font-weight: 900;
+  color: #f3de1e;
+  background: linear-gradient(to right, #f3de1e, #ffffff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+`
+const Header = styled.h3`
+  margin: 0;
+  padding: 20px 20px 0;
+`
+const Body = styled.p`
+  line-height: 143%;
+  margin: 16px 20px 31px;
+`
+const LinkOutCircle = styled(ArrowDownCircle)`
+  transform: rotate(230deg);
+  width: 20px;
+  height: 20px;
+`
+const LinkOutToBridge = styled.a`
+  align-items: center;
+  background-color: black;
+  border-radius: 16px;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  margin: 0 18px 18px 18px;
+  padding: 14px 24px;
+  text-decoration: none;
+  width: auto;
+  :hover,
+  :focus,
+  :active {
+    background-color: black;
+  }
+`
+export function SwapNetworkAlert() {
+  const { account, chainId } = useActiveWeb3React()
+  const [arbitrumAlphaAcknowledged, setArbitrumAlphaAcknowledged] = useArbitrumAlphaAlert()
+  const [locallyDismissed, setLocallyDimissed] = useState(false)
+  const userEthBalance = useETHBalances(account ? [account] : [])?.[account ?? '']
+
+  const dismiss = useCallback(() => {
+    if (userEthBalance?.greaterThan(0)) {
+      setArbitrumAlphaAcknowledged(true)
+    } else {
+      setLocallyDimissed(true)
+    }
+  }, [setArbitrumAlphaAcknowledged, userEthBalance])
+  if (chainId !== SupportedChainId.ARBITRUM_ONE || arbitrumAlphaAcknowledged || locallyDismissed) {
+    return null
+  }
+  return (
+    <Wrapper>
+      <CloseIcon onClick={dismiss} />
+      <Header>
+        <Trans>
+          Uniswap on <ArbitrumTextStyles>Arbitrum</ArbitrumTextStyles>
+        </Trans>
+      </Header>
+      <Body>
+        <Trans>
+          This is an alpha release of Uniswap on the Arbitrum network. You must bridge L1 assets to the network to swap
+          them.
+        </Trans>
+      </Body>
+      <LinkOutToBridge href="https://bridge.arbitrum.io/" target="_blank" rel="noopener noreferrer">
+        <Trans>Deposit to Arbitrum</Trans>
+        <LinkOutCircle />
+      </LinkOutToBridge>
+    </Wrapper>
+  )
+}
--- a/src/components/swap/SwapRoute.tsx
+++ b/src/components/swap/SwapRoute.tsx
@@ -1,7 +1,7 @@
 import { Currency, TradeType } from '@uniswap/sdk-core'
 import { Trade as V2Trade } from '@uniswap/v2-sdk'
 import { Trade as V3Trade, FeeAmount } from '@uniswap/v3-sdk'
-import React, { Fragment, memo, useContext } from 'react'
+import { Fragment, memo, useContext } from 'react'
 import { ChevronRight } from 'react-feather'
 import { Flex } from 'rebass'
 import { ThemeContext } from 'styled-components'
--- a/src/components/swap/TradePrice.tsx
+++ b/src/components/swap/TradePrice.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import { useCallback } from 'react'
 import { Price, Currency } from '@uniswap/sdk-core'
 import { useContext } from 'react'
 import { Text } from 'rebass'
--- a/src/components/swap/UnsupportedCurrencyFooter.tsx
+++ b/src/components/swap/UnsupportedCurrencyFooter.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import styled from 'styled-components/macro'
 import { TYPE, CloseIcon, ExternalLink } from 'theme'
 import { ButtonEmpty } from 'components/Button'
--- a/src/components/swap/styleds.tsx
+++ b/src/components/swap/styleds.tsx
@@ -1,5 +1,5 @@
 import { transparentize } from 'polished'
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 import { Link } from 'react-router-dom'

 import { AlertTriangle } from 'react-feather'
--- a/src/components/vote/DelegateModal.tsx
+++ b/src/components/vote/DelegateModal.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useState } from 'react'
+import { ReactNode, useState } from 'react'
 import { UNI } from '../../constants/tokens'

 import Modal from '../Modal'
--- a/src/components/vote/VoteModal.tsx
+++ b/src/components/vote/VoteModal.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useContext } from 'react'
+import { useState, useContext } from 'react'
 import { useActiveWeb3React } from '../../hooks/web3'
 import { getExplorerLink, ExplorerDataType } from '../../utils/getExplorerLink'

--- a/src/connectors/index.ts
+++ b/src/connectors/index.ts
@@ -27,8 +27,8 @@ const NETWORK_URLS: {
  [SupportedChainId.ROPSTEN]: `https://ropsten.infura.io/v3/${INFURA_KEY}`,
  [SupportedChainId.GOERLI]: `https://goerli.infura.io/v3/${INFURA_KEY}`,
  [SupportedChainId.KOVAN]: `https://kovan.infura.io/v3/${INFURA_KEY}`,
-  [SupportedChainId.ARBITRUM_KOVAN]: `https://kovan5.arbitrum.io/rpc`,
  [SupportedChainId.ARBITRUM_ONE]: `https://arb1.arbitrum.io/rpc`,
+  [SupportedChainId.ARBITRUM_RINKEBY]: `https://rinkeby.arbitrum.io/rpc`,
 }

 const SUPPORTED_CHAIN_IDS: SupportedChainId[] = [
@@ -37,8 +37,8 @@ const SUPPORTED_CHAIN_IDS: SupportedChainId[] = [
  SupportedChainId.GOERLI,
  SupportedChainId.RINKEBY,
  SupportedChainId.ROPSTEN,
-  SupportedChainId.ARBITRUM_KOVAN,
  SupportedChainId.ARBITRUM_ONE,
+  SupportedChainId.ARBITRUM_RINKEBY,
 ]

 export const network = new NetworkConnector({
--- a/src/constants/addresses.ts
+++ b/src/constants/addresses.ts
@@ -5,17 +5,14 @@ import { SupportedChainId } from './chains'

 type AddressMap = { [chainId: number]: string }

-export const UNI_ADDRESS: AddressMap = constructSameAddressMap('0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984', false)
+export const UNI_ADDRESS: AddressMap = constructSameAddressMap('0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984')
 export const MULTICALL2_ADDRESSES: AddressMap = {
-  ...constructSameAddressMap('0x5BA1e12693Dc8F9c48aAD8770482f4739bEeD696', false),
-  [SupportedChainId.ARBITRUM_KOVAN]: '0xc80e33a6f02cf08557a0ca3d94d1474d73f64bc1',
+  ...constructSameAddressMap('0x5BA1e12693Dc8F9c48aAD8770482f4739bEeD696'),
  [SupportedChainId.ARBITRUM_ONE]: '0x021CeAC7e681dBCE9b5039d2535ED97590eB395c',
+  [SupportedChainId.ARBITRUM_RINKEBY]: '0x334f67349c1cB3A8fF1268c3eC43FF1D3De246C6',
 }
-export const V2_FACTORY_ADDRESSES: AddressMap = constructSameAddressMap(V2_FACTORY_ADDRESS, false)
-export const V2_ROUTER_ADDRESS: AddressMap = constructSameAddressMap(
-  '0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D',
-  false
-)
+export const V2_FACTORY_ADDRESSES: AddressMap = constructSameAddressMap(V2_FACTORY_ADDRESS)
+export const V2_ROUTER_ADDRESS: AddressMap = constructSameAddressMap('0x7a250d5630B4cF539739dF2C5dAcb4c659F2488D')

 // most current governance contract address should always be the 0 index
 // only support governance on mainnet
@@ -27,9 +24,7 @@ export const GOVERNANCE_ADDRESSES: AddressMap[] = [
    [SupportedChainId.MAINNET]: '0x5e4be8Bc9637f0EAA1A755019e06A68ce081D58F',
  },
 ]
-export const TIMELOCK_ADDRESS: AddressMap = {
-  [SupportedChainId.MAINNET]: '0x1a9C8182C09F50C8318d769245beA52c32BE35BC',
-}
+export const TIMELOCK_ADDRESS: AddressMap = constructSameAddressMap('0x1a9C8182C09F50C8318d769245beA52c32BE35BC')

 export const MERKLE_DISTRIBUTOR_ADDRESS: AddressMap = {
  [SupportedChainId.MAINNET]: '0x090D4613473dEE047c3f2706764f49E0821D256e',
@@ -37,18 +32,18 @@ export const MERKLE_DISTRIBUTOR_ADDRESS: AddressMap = {
 export const ARGENT_WALLET_DETECTOR_ADDRESS: AddressMap = {
  [SupportedChainId.MAINNET]: '0xeca4B0bDBf7c55E9b7925919d03CbF8Dc82537E8',
 }
-export const V3_CORE_FACTORY_ADDRESSES: AddressMap = {
-  ...constructSameAddressMap(V3_FACTORY_ADDRESS, true),
-  [SupportedChainId.ARBITRUM_KOVAN]: '0xf594DEF7751440197879149f46E98b334E6DF1fa',
-}
-export const QUOTER_ADDRESSES: AddressMap = {
-  ...constructSameAddressMap('0xb27308f9F90D607463bb33eA1BeBb41C27CE5AB6', true),
-  [SupportedChainId.ARBITRUM_KOVAN]: '0xAC06b88FA9adB7584A659b190F37F085352cB783',
-}
-export const NONFUNGIBLE_POSITION_MANAGER_ADDRESSES: AddressMap = {
-  ...constructSameAddressMap('0xC36442b4a4522E871399CD717aBDD847Ab11FE88', true),
-  [SupportedChainId.ARBITRUM_KOVAN]: '0x9E1498aE1F508E86462e8A0F213CF385A6622464',
-}
+export const V3_CORE_FACTORY_ADDRESSES: AddressMap = constructSameAddressMap(V3_FACTORY_ADDRESS, [
+  SupportedChainId.ARBITRUM_ONE,
+  SupportedChainId.ARBITRUM_RINKEBY,
+])
+export const QUOTER_ADDRESSES: AddressMap = constructSameAddressMap('0xb27308f9F90D607463bb33eA1BeBb41C27CE5AB6', [
+  SupportedChainId.ARBITRUM_ONE,
+  SupportedChainId.ARBITRUM_RINKEBY,
+])
+export const NONFUNGIBLE_POSITION_MANAGER_ADDRESSES: AddressMap = constructSameAddressMap(
+  '0xC36442b4a4522E871399CD717aBDD847Ab11FE88',
+  [SupportedChainId.ARBITRUM_ONE, SupportedChainId.ARBITRUM_RINKEBY]
+)
 export const ENS_REGISTRAR_ADDRESSES: AddressMap = {
  [SupportedChainId.MAINNET]: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e',
  [SupportedChainId.ROPSTEN]: '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e',
@@ -58,11 +53,11 @@ export const ENS_REGISTRAR_ADDRESSES: AddressMap = {
 export const SOCKS_CONTROLLER_ADDRESSES: AddressMap = {
  [SupportedChainId.MAINNET]: '0x65770b5283117639760beA3F867b69b3697a91dd',
 }
-export const SWAP_ROUTER_ADDRESSES: AddressMap = {
-  ...constructSameAddressMap('0xE592427A0AEce92De3Edee1F18E0157C05861564', true),
-  [SupportedChainId.ARBITRUM_KOVAN]: '0x6ae2DE23F2BE35B3921ba15DA52e4b173667dCb9',
-}
-export const V3_MIGRATOR_ADDRESSES: AddressMap = constructSameAddressMap(
-  '0xA5644E29708357803b5A882D272c41cC0dF92B34',
-  true
-)
+export const SWAP_ROUTER_ADDRESSES: AddressMap = constructSameAddressMap('0xE592427A0AEce92De3Edee1F18E0157C05861564', [
+  SupportedChainId.ARBITRUM_ONE,
+  SupportedChainId.ARBITRUM_RINKEBY,
+])
+export const V3_MIGRATOR_ADDRESSES: AddressMap = constructSameAddressMap('0xA5644E29708357803b5A882D272c41cC0dF92B34', [
+  SupportedChainId.ARBITRUM_ONE,
+  SupportedChainId.ARBITRUM_RINKEBY,
+])
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Crowdin Bot	361e0ca8d7	chore(i18n): synchronize translations from crowdin [skip ci]	2021-07-01 10:04:56 +00:00
Justin Domingue	cc0a757ddd	fix: run graphql:codegen on yarn build (#1933 ) * run graphql codegen on build * yarn.lock * remove ms.macro	2021-06-29 17:22:41 -07:00
Justin Domingue	31632d3c5b	ignore state/data/generated.ts	2021-06-29 16:27:12 -07:00
Justin Domingue	9cfbec4b8b	generated graphql schema and en-US.po on start (#1930 )	2021-06-29 12:03:47 -07:00
Crowdin Bot	b5ac5d882f	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-29 09:04:42 +00:00
Crowdin Bot	130606cab4	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-29 08:04:53 +00:00
Moody Salem	fa56919a06	fix(theme): always show the gradient background color	2021-06-28 19:47:22 -05:00
Moody Salem	633f65676e	fix(theme): fix the missing background radial gradient fixes https://github.com/Uniswap/uniswap-interface/issues/1925	2021-06-28 19:35:41 -05:00
Moody Salem	9bccb7ae3a	fix(multicall): better use the block number returned from calls, and cancel all calls when a new block comes in	2021-06-28 19:26:47 -05:00
Moody Salem	8a2e4123c6	chore(yarn): update yarn.lock	2021-06-28 18:57:10 -05:00
Moody Salem	e93ddbedfa	chore(ci): take a screenshot in the cypress test for an example	2021-06-28 18:55:42 -05:00
Justin Domingue	1667b56a04	feat(thegraph): auto-generate graphql types (#1926 ) * auto-generate graphql types * remove introspection * generated .ts and add to prettierignore * updated graph url	2021-06-28 16:43:24 -07:00
Justin Domingue	6e995d6c09	feat(pools): integrate with The Graph using RTK Query (#1924 ) * integrate with the graph * Update src/state/data/slice.ts Co-authored-by: Noah Zinsmeister <noahwz@gmail.com> Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>	2021-06-28 15:12:58 -07:00
Moody Salem	f096112716	fix: improve how we use blocks per fetch in the memoization of the listeners (#1920 ) fixes https://github.com/Uniswap/uniswap-interface/issues/1877	2021-06-28 16:39:19 -05:00
Jordan Frankfurt	50c7d36164	replace trustwallet assets repo w/ our fork (#1922 )	2021-06-28 16:35:31 -04:00
Moody Salem	8a7f1d51ce	chore(ci): record integration tests	2021-06-28 15:12:24 -05:00
Crowdin Bot	8f59f501cc	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-28 16:04:43 +00:00
Jordan Frankfurt	197947835b	remove unneeded log (#1917 )	2021-06-27 22:23:46 -04:00
Crowdin Bot	94081b29a3	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-27 05:04:39 +00:00
Moody Salem	69183ed8c2	fix: translate claim modal inputs	2021-06-26 23:58:25 -05:00
Crowdin Bot	05e741b6c9	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-27 00:08:49 +00:00
Jordan Frankfurt	dfe550c43b	add arbitrum-specific L2 designs (#1912 )	2021-06-26 19:54:30 -04:00
Crowdin Bot	65dfb40e44	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-25 15:04:42 +00:00
Moody Salem	25f5ed9983	fix: scrollbars showing up in modal with mouse connected, use auto instead of scroll	2021-06-25 10:00:25 -05:00
Yuta Sugimura	9b1ef415c6	refactor: remove unneeded react import (#1801 ) * Add rules * Remove React import * remove React import	2021-06-25 09:52:49 -05:00
Crowdin Bot	70f481430a	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-25 07:04:27 +00:00
Justin Domingue	942211eb00	fix: typos in modal css (#1911 ) * allow modal scrolling on dekstop * removed quote and fixed typo	2021-06-24 13:33:11 -07:00
Justin Domingue	6589c41800	allow modal scrolling on dekstop (#1910 )	2021-06-24 10:04:07 -07:00
Moody Salem	14bac770b6	fix(arbitrum): explorer links and better anonymization of GA events	2021-06-24 11:38:08 -05:00
Crowdin Bot	c9dbe2f0ac	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-24 10:04:51 +00:00
Crowdin Bot	775cf57c30	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-24 09:04:32 +00:00
Moody Salem	f4935e9264	fix(arbitrum): miscellaneous arbitrum network changes - adds the arbitrum rinkeby testnet deployment - compute usdc prices on arbitrum one	2021-06-23 20:58:03 -05:00
Crowdin Bot	6b3914b7b9	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-23 08:05:03 +00:00
Crowdin Bot	41efb6f617	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-23 06:05:18 +00:00
Crowdin Bot	52df5f14cf	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-22 23:04:56 +00:00
Noah Zinsmeister	b48a7c529f	fix: proposal sorting	2021-06-22 18:47:12 -04:00
Moody Salem	2eca50be93	chore: remove defunct arbitrum kovan testnet	2021-06-22 17:23:40 -05:00
Moody Salem	be2ce18bfa	fix: change polling interval per network (#1898 )	2021-06-22 17:21:01 -05:00
yj	fe13b29e5e	Update README.md (#1897 ) Simple signposting, for issue #1896	2021-06-22 15:03:45 -07:00
Crowdin Bot	02aac08489	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-22 21:05:04 +00:00
Crowdin Bot	8f29980b94	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-22 20:05:13 +00:00
Scott Moses Sunarto	bb542ef0fb	feat: Add proposal creation interface (#1799 ) * Make address input panel more generalized * Add TextInput component * Allow adjusting AppBody maxwidth * Add create proposal layout page * Fix style consistency * create proposal ui goes brrr * various fixes * minor tweaks and bug fixes * merge conflict clean up + bug fix * i18n * always show create proposal button * adjust proposal title top margin and show ButtonError styling * use button disable instead of button error when form is not filled * revert mistaken css change * default params for address input panel * Refactor & fixes - Add missing i18n - Refactor how some styled-components is done - ButtonError is now disabled when proposal is true in create proposal interface - Edit copywriting - Minor styling adjustments * Fixed create proposal padding on medium screen * refactor * refactor pt. 2 * single column styling * change AddressInputPanel font color * Design adjustments * change route for create proposal * Add autonomous proposal CTA * cta text edit * Add link to docs for custom action * small cleanup * work with latest governor Co-authored-by: Noah Zinsmeister <noahwz@gmail.com>	2021-06-22 15:51:32 -04:00
Crowdin Bot	c2fe17615f	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-22 13:12:10 +00:00
Crowdin Bot	a4cab75d09	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-22 08:04:47 +00:00
Crowdin Bot	882457cfef	chore(i18n): synchronize translations from crowdin [skip ci]	2021-06-21 16:05:32 +00:00
Justin Domingue	9a1bb5dbfb	Add missing semicolon in English source	2021-06-21 08:10:00 -07:00