From 86fa969d6b7729576a35f51a628b474afc39004c Mon Sep 17 00:00:00 2001 From: Moody Salem Date: Fri, 8 May 2020 12:05:52 -0400 Subject: [PATCH] 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 | 4 - README.md | 13 +-- package.json | 1 + src/components/CreatePool/index.tsx | 2 +- src/components/ExchangePage/index.tsx | 11 ++- src/pages/App.tsx | 112 +++++++++++++------------- src/pages/Pool/AddLiquidity.tsx | 9 ++- yarn.lock | 22 +++++ 8 files changed, 102 insertions(+), 72 deletions(-) delete mode 100644 .env.local.example diff --git a/.env.local.example b/.env.local.example deleted file mode 100644 index c1d77bea00..0000000000 --- a/.env.local.example +++ /dev/null @@ -1,4 +0,0 @@ -REACT_APP_CHAIN_ID="1" -REACT_APP_NETWORK_URL="" -REACT_APP_PORTIS_ID="" -REACT_APP_FORTMATIC_KEY="" \ No newline at end of file diff --git a/README.md b/README.md index 116e312253..2faee41bea 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index 2dfc128d2b..dcc4644bcd 100644 --- a/package.json +++ b/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", diff --git a/src/components/CreatePool/index.tsx b/src/components/CreatePool/index.tsx index c24baa440d..e226a7740a 100644 --- a/src/components/CreatePool/index.tsx +++ b/src/components/CreatePool/index.tsx @@ -45,7 +45,7 @@ function CreatePool({ history }) { }, [pair, pairExists, token0Address, token1Address]) if (step === 2 && !pairExists) { - return + return } else return ( diff --git a/src/components/ExchangePage/index.tsx b/src/components/ExchangePage/index.tsx index 610bde59d5..524b28bc66 100644 --- a/src/components/ExchangePage/index.tsx +++ b/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() diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 5fac45fcfb..29b3615191 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -1,4 +1,4 @@ -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,64 +99,62 @@ export default function App() { -
+
- + - + {/* this Suspense is for route code-splitting */} - - - } /> - } /> - } /> - } /> - } /> - } /> - { - const tokens = match.params.tokens.split('-') - const t0 = - tokens?.[0] === 'ETH' ? 'ETH' : isAddress(tokens?.[0]) ? isAddress(tokens[0]) : undefined - const t1 = - tokens?.[1] === 'ETH' ? 'ETH' : isAddress(tokens?.[1]) ? isAddress(tokens[1]) : undefined - if (t0 && t1) { - return - } else { - return - } - }} - /> - { - const tokens = match.params.tokens.split('-') - const t0 = - tokens?.[0] === 'ETH' ? 'ETH' : isAddress(tokens?.[0]) ? isAddress(tokens[0]) : undefined - const t1 = - tokens?.[1] === 'ETH' ? 'ETH' : isAddress(tokens?.[1]) ? isAddress(tokens[1]) : undefined - if (t0 && t1) { - return - } else { - return - } - }} - /> - - - + + }/> + }/> + }/> + }/> + }/> + }/> + { + const tokens = match.params.tokens.split('-') + const t0 = + tokens?.[0] === 'ETH' ? 'ETH' : isAddress(tokens?.[0]) ? isAddress(tokens[0]) : undefined + const t1 = + tokens?.[1] === 'ETH' ? 'ETH' : isAddress(tokens?.[1]) ? isAddress(tokens[1]) : undefined + if (t0 && t1) { + return + } else { + return + } + }} + /> + { + const tokens = match.params.tokens.split('-') + const t0 = + tokens?.[0] === 'ETH' ? 'ETH' : isAddress(tokens?.[0]) ? isAddress(tokens[0]) : undefined + const t1 = + tokens?.[1] === 'ETH' ? 'ETH' : isAddress(tokens?.[1]) ? isAddress(tokens[1]) : undefined + if (t0 && t1) { + return + } else { + return + } + }} + /> + +