Types for react-router-dom, stop lazy loading each route (#735)

* Types for react-router-dom, stop lazy loading each route

* Couple small fixes to README.md

.env.local.example

-REACT_APP_CHAIN_ID="1"
-REACT_APP_NETWORK_URL=""
-REACT_APP_PORTIS_ID=""
-REACT_APP_FORTMATIC_KEY=""
\ No newline at end of file

README.md

@@ -4,7 +4,7 @@
 [![Tests](https://github.com/Uniswap/uniswap-frontend/workflows/Tests/badge.svg?branch=v2)](https://github.com/Uniswap/uniswap-frontend/actions?query=workflow%3ATests)
 [![Styled With Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://prettier.io/)
 
-This an an open source interface for Uniswap - a protocol for decentralized exchange of Ethereum tokens.
+This an open source interface for Uniswap - a protocol for decentralized exchange of Ethereum tokens.
 
 - Website: [uniswap.org](https://uniswap.org/)
 - Docs: [uniswap.org/docs/](https://uniswap.org/docs/)
@@ -32,7 +32,7 @@ yarn
 
 ### Configure Environment
 
-Rename `.env.local.example` to `.env.local` and fill in the appropriate variables.
+Copy `.env` to `.env.local` and change the appropriate variables.
 
 ### Run
 
@@ -40,10 +40,13 @@ Rename `.env.local.example` to `.env.local` and fill in the appropriate variable
 yarn start
 ```
 
-To run on a testnet, make a copy of `.env.local.example` named `.env.local`, change `REACT_APP_NETWORK_ID` to `"{yourNetworkId}"`, and change `REACT_APP_NETWORK_URL` to e.g. `"https://{yourNetwork}.infura.io/v3/{yourKey}"`.
+To run on a testnet, make a copy of `.env` named `.env.local`, change `REACT_APP_NETWORK_ID` to `"{yourNetworkId}"`, 
+and change `REACT_APP_NETWORK_URL` to e.g. `"https://{yourNetwork}.infura.io/v3/{yourKey}"`. 
 
-If deploying with Github Pages, be aware that there's some [tricky client-side routing behavior with `create-react-app`](https://create-react-app.dev/docs/deployment#notes-on-client-side-routing).
+If deploying with Github Pages, be aware that there's some
+[tricky client-side routing behavior with `create-react-app`](https://create-react-app.dev/docs/deployment#notes-on-client-side-routing).
 
 ## Contributions
 
-**Please open all pull requests against the `beta` branch.** CI checks will run against all PRs. To ensure that your changes will pass, run `yarn check:all` before pushing. If this command fails, you can try to automatically fix problems with `yarn fix:all`, or do it manually.
+**Please open all pull requests against the `v2` branch.** 
+CI checks will run against all PRs. 

package.json

@@ -55,6 +55,7 @@
     "@types/node": "^13.13.5",
     "@types/react": "^16.9.34",
     "@types/react-dom": "^16.9.7",
+    "@types/react-router-dom": "^5.0.0",
     "@types/styled-components": "^4.2.0",
     "cypress": "^4.5.0",
     "prettier": "^1.17.0",

src/components/CreatePool/index.tsx

@@ -45,7 +45,7 @@ function CreatePool({ history }) {
   }, [pair, pairExists, token0Address, token1Address])
 
   if (step === 2 && !pairExists) {
-    return <AddLiquidity token0={token0Address} token1={token1Address} step={true} />
+    return <AddLiquidity token0={token0Address} token1={token1Address} />
   } else
     return (
       <AutoColumn gap="20px">

src/components/ExchangePage/index.tsx

@@ -2,7 +2,7 @@ import React, { useState, useCallback, useEffect } from 'react'
 import { parseEther, parseUnits } from '@ethersproject/units'
 import { Fraction, JSBI, Percent, TokenAmount, TradeType, WETH } from '@uniswap/sdk'
 import { ArrowDown, ChevronDown, ChevronUp, Repeat } from 'react-feather'
-import { withRouter } from 'react-router-dom'
+import { withRouter,RouteComponentProps } from 'react-router-dom'
 import { BigNumber } from '@ethersproject/bignumber'
 import { Zero, MaxUint256 } from '@ethersproject/constants'
 import { Contract } from '@ethersproject/contracts'
@@ -23,7 +23,7 @@ import { useTokenContract, useWeb3React } from '../../hooks'
 import { useTradeExactIn, useTradeExactOut } from '../../hooks/Trades'
 import { Hover, theme, TYPE } from '../../theme'
 import { Link } from '../../theme/components'
-import { calculateGasMargin, getEtherscanLink, getProviderOrSigner, getRouterContract, isWETH } from '../../utils'
+import { calculateGasMargin, getEtherscanLink, getProviderOrSigner, getRouterContract, isWETH, QueryParams } from '../../utils'
 import Copy from '../AccountDetails/Copy'
 import AddressInputPanel from '../AddressInputPanel'
 import { ButtonError, ButtonLight, ButtonPrimary } from '../Button'
@@ -73,7 +73,12 @@ const DEFAULT_DEADLINE_FROM_NOW = 60 * 20
 const ALLOWED_SLIPPAGE_MEDIUM = 100
 const ALLOWED_SLIPPAGE_HIGH = 500
 
-function ExchangePage({ sendingInput = false, history, params }) {
+interface ExchangePageProps extends RouteComponentProps<{}> {
+  sendingInput: boolean
+  params: QueryParams
+}
+
+function ExchangePage({ sendingInput = false, history, params }: ExchangePageProps) {
   // text translation
   // const { t } = useTranslation()
   const { chainId, account, library } = useWeb3React()

src/pages/App.tsx

-import React, { Suspense, lazy } from 'react'
+import React, { Suspense } from 'react'
 import styled from 'styled-components'
 import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'
 
@@ -10,13 +10,13 @@ import Web3ReactManager from '../components/Web3ReactManager'
 import Popups from '../components/Popups'
 import { isAddress, getAllQueryParams } from '../utils'
 
-const Swap = lazy(() => import('./Swap'))
-const Send = lazy(() => import('./Send'))
-const Pool = lazy(() => import('./Pool'))
-const Add = lazy(() => import('./Pool/AddLiquidity'))
-const Remove = lazy(() => import('./Pool/RemoveLiquidity'))
-const Find = lazy(() => import('../components/PoolFinder'))
-const Create = lazy(() => import('../components/CreatePool'))
+import Swap from './Swap'
+import Send from './Send'
+import Pool from './Pool'
+import Add from './Pool/AddLiquidity'
+import Remove from './Pool/RemoveLiquidity'
+import Find from '../components/PoolFinder'
+import Create from '../components/CreatePool'
 
 const AppWrapper = styled.div`
   display: flex;
@@ -99,22 +99,21 @@ export default function App() {
         <BrowserRouter>
           <AppWrapper>
             <HeaderWrapper>
-              <Header />
+              <Header/>
             </HeaderWrapper>
             <BodyWrapper>
-              <Popups />
+              <Popups/>
               <Body>
                 <Web3ReactManager>
-                  <NavigationTabs />
+                  <NavigationTabs/>
                   {/* this Suspense is for route code-splitting */}
-                  <Suspense fallback={null}>
                   <Switch>
-                      <Route exact strict path="/" render={() => <Redirect to="/swap" />} />
-                      <Route exact strict path="/swap" component={() => <Swap params={params} />} />
-                      <Route exact strict path="/send" component={() => <Send params={params} />} />
-                      <Route exact strict path="/find" component={() => <Find params={params} />} />
-                      <Route exact strict path="/create" component={() => <Create params={params} />} />
-                      <Route exact strict path="/pool" component={() => <Pool params={params} />} />
+                    <Route exact strict path="/" render={() => <Redirect to="/swap"/>}/>
+                    <Route exact strict path="/swap" component={() => <Swap params={params}/>}/>
+                    <Route exact strict path="/send" component={() => <Send params={params}/>}/>
+                    <Route exact strict path="/find" component={() => <Find/>}/>
+                    <Route exact strict path="/create" component={() => <Create/>}/>
+                    <Route exact strict path="/pool" component={() => <Pool/>}/>
                     <Route
                       exact
                       strict
@@ -126,9 +125,9 @@ export default function App() {
                         const t1 =
                           tokens?.[1] === 'ETH' ? 'ETH' : isAddress(tokens?.[1]) ? isAddress(tokens[1]) : undefined
                         if (t0 && t1) {
-                            return <Add token0={t0} token1={t1} params={params} />
+                          return <Add token0={t0} token1={t1} />
                         } else {
-                            return <Redirect to="/pool" />
+                          return <Redirect to="/pool"/>
                         }
                       }}
                     />
@@ -143,20 +142,19 @@ export default function App() {
                         const t1 =
                           tokens?.[1] === 'ETH' ? 'ETH' : isAddress(tokens?.[1]) ? isAddress(tokens[1]) : undefined
                         if (t0 && t1) {
-                            return <Remove token0={t0} token1={t1} />
+                          return <Remove token0={t0} token1={t1}/>
                         } else {
-                            return <Redirect to="/pool" />
+                          return <Redirect to="/pool"/>
                         }
                       }}
                     />
-                      <Redirect to="/" />
+                    <Redirect to="/"/>
                   </Switch>
-                  </Suspense>
                 </Web3ReactManager>
               </Body>
               <Footer/>
             </BodyWrapper>
-            <StyledRed />
+            <StyledRed/>
           </AppWrapper>
         </BrowserRouter>
       </Suspense>

src/pages/Pool/AddLiquidity.tsx

 import React, { useReducer, useState, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
-import { withRouter } from 'react-router-dom'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
 import { parseUnits, parseEther } from '@ethersproject/units'
 import { MaxUint256, Zero } from '@ethersproject/constants'
 import { Contract } from '@ethersproject/contracts'
@@ -157,7 +157,12 @@ function reducer(
   }
 }
 
-function AddLiquidity({ token0, token1, step = false }) {
+interface AddLiquidityProps extends RouteComponentProps<{}> {
+  token0: string
+  token1: string
+}
+
+function AddLiquidity({ token0, token1 }: AddLiquidityProps) {
   const { account, chainId, library } = useWeb3React()
 
   // modal states

yarn.lock

@@ -2408,6 +2408,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/history@*":
+  version "4.7.5"
+  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"
+  integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==
+
 "@types/hoist-non-react-statics@*":
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f"
@@ -2522,6 +2527,23 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-router-dom@^5.0.0":
+  version "5.1.5"
+  resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.1.5.tgz#7c334a2ea785dbad2b2dcdd83d2cf3d9973da090"
+  integrity sha512-ArBM4B1g3BWLGbaGvwBGO75GNFbLDUthrDojV2vHLih/Tq8M+tgvY1DSwkuNrPSwdp/GUL93WSEpTZs8nVyJLw==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+    "@types/react-router" "*"
+
+"@types/react-router@*":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@types/react-router/-/react-router-5.1.7.tgz#e9d12ed7dcfc79187e4d36667745b69a5aa11556"
+  integrity sha512-2ouP76VQafKjtuc0ShpwUebhHwJo0G6rhahW9Pb8au3tQTjYXd2jta4wv6U2tGLR/I42yuG00+UXjNYY0dTzbg==
+  dependencies:
+    "@types/history" "*"
+    "@types/react" "*"
+
 "@types/react-transition-group@^4.2.0":
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.2.4.tgz#c7416225987ccdb719262766c1483da8f826838d"