ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

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

* Couple small fixes to README.md
This commit is contained in:
Moody Salem 2020-05-08 12:05:52 -04:00 committed by GitHub
parent 28b24036c6
commit 86fa969d6b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 102 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.local.example
View File

@ -1,4 +0,0 @@
REACT_APP_CHAIN_ID="1"
REACT_APP_NETWORK_URL=""
REACT_APP_PORTIS_ID=""
REACT_APP_FORTMATIC_KEY=""

13
README.md
View File

@ -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.

1
package.json
View File

@ -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",

2
src/components/CreatePool/index.tsx
View File

@ -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">

11
src/components/ExchangePage/index.tsx
View File

@ -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()

112
src/pages/App.tsx
View File

@ -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() {
<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={'/add/:tokens'}
component={({ match }) => {
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 <Add token0={t0} token1={t1} params={params} />
} else {
return <Redirect to="/pool" />
}
}}
/>
<Route
exact
strict
path={'/remove/:tokens'}
component={({ match }) => {
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 <Remove token0={t0} token1={t1} />
} else {
return <Redirect to="/pool" />
}
}}
/>
<Redirect to="/" />
</Switch>
</Suspense>
<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/>}/>
<Route exact strict path="/create" component={() => <Create/>}/>
<Route exact strict path="/pool" component={() => <Pool/>}/>
<Route
exact
strict
path={'/add/:tokens'}
component={({ match }) => {
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 <Add token0={t0} token1={t1} />
} else {
return <Redirect to="/pool"/>
}
}}
/>
<Route
exact
strict
path={'/remove/:tokens'}
component={({ match }) => {
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 <Remove token0={t0} token1={t1}/>
} else {
return <Redirect to="/pool"/>
}
}}
/>
<Redirect to="/"/>
</Switch>
</Web3ReactManager>
</Body>
<Footer/>
</BodyWrapper>
<StyledRed />
<StyledRed/>
</AppWrapper>
</BrowserRouter>
</Suspense>

9
src/pages/Pool/AddLiquidity.tsx
View File

@ -1,6 +1,6 @@
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

22
yarn.lock
View File

@ -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"