bug fixes (#727)

src/components/CreatePool/index.tsx

@@ -5,7 +5,7 @@ import { Token, JSBI, WETH } from '@uniswap/sdk'
 import Row, { AutoRow } from '../Row'
 import TokenLogo from '../TokenLogo'
 import SearchModal from '../SearchModal'
-import AddLiquidity from '../../pages/Supply/AddLiquidity'
+import AddLiquidity from '../../pages/Pool/AddLiquidity'
 import { Text } from 'rebass'
 import { Plus } from 'react-feather'
 import { TYPE, Link } from '../../theme'

src/components/ExchangePage/index.tsx

@@ -1115,7 +1115,7 @@ function ExchangePage({ sendingInput = false, history, params }) {
                 <TYPE.black fontSize={14} fontWeight={400}>
                   Liquidity Provider Fee
                 </TYPE.black>
-                <QuestionHelper text="A portion of each trade (0.03%) goes to liquidity providers to incentivize liquidity on the protocol." />
+                <QuestionHelper text="A portion of each trade (0.3%) goes to liquidity providers to incentivize liquidity on the protocol." />
               </RowFixed>
               <TYPE.black fontSize={14}>
                 {feeTimesInputFormatted

src/components/Header/index.js

 import React from 'react'
 import styled from 'styled-components'
+import { withRouter } from 'react-router-dom'
 
 import Row from '../Row'
 import Menu from '../Menu'
@@ -104,7 +105,7 @@ const Alpha = styled(GreyCard)`
   font-weight: 600;
 `
 
-const UniIcon = styled(Link)`
+const UniIcon = styled.div`
   transition: transform 0.3s ease;
   :hover {
     transform: rotate(-5deg);
@@ -130,7 +131,7 @@ const MigrateBanner = styled(AutoColumn)`
   `};
 `
 
-export default function Header() {
+function Header({ history }) {
   const { account, chainId } = useWeb3React()
 
   const userEthBalance = useAddressBalance(account, WETH[chainId])
@@ -152,14 +153,12 @@ export default function Header() {
       <RowBetween padding="1rem">
         <HeaderElement>
           <Title>
-            <UniIcon id="link" href="/">
+            <UniIcon onClick={() => history.push('/')}>
               <img src={Logo} alt="logo" />
             </UniIcon>
             {!isMobile && (
-              <TitleText>
-                <Link id="link" href="/">
-                  <img style={{ marginLeft: '4px', marginTop: '4px' }} src={Wordmark} alt="logo" />
-                </Link>
+              <TitleText onClick={() => history.push('/')}>
+                <img style={{ marginLeft: '4px', marginTop: '4px' }} src={Wordmark} alt="logo" />
               </TitleText>
             )}
           </Title>
@@ -187,6 +186,7 @@ export default function Header() {
         </HeaderElement>
       </RowBetween>
     </HeaderFrame>
-    // </AutoColumn>
   )
 }
+
+export default withRouter(Header)

src/components/SearchModal/index.js

@@ -592,7 +592,7 @@ function SearchModal({
                   <QuestionHelper text="These tokens are commonly used in pairs." />
                 </AutoRow>
                 <AutoRow gap="10px">
-                  {COMMON_BASES[chainId].map(token => {
+                  {COMMON_BASES[chainId]?.map(token => {
                     return (
                       <BaseWrapper
                         gap="6px"

src/constants/index.ts

@@ -5,10 +5,13 @@ export const ROUTER_ADDRESS = '0xf164fC0Ec4E93095b804a4795bBe1e041497b92a'
 
 export const COMMON_BASES = {
   1: [WETH[ChainId.MAINNET]],
+  3: [WETH[ChainId.ROPSTEN]],
   4: [
     WETH[ChainId.RINKEBY],
     new Token(ChainId.RINKEBY, '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735', 18, 'DAI', 'Dai Stablecoin')
-  ]
+  ],
+  5: [WETH[ChainId.GÖRLI]],
+  42: [WETH[ChainId.KOVAN]]
 }
 
 export const SUPPORTED_THEMES = {

src/pages/App.js

@@ -12,9 +12,9 @@ import { isAddress, getAllQueryParams } from '../utils'
 
 const Swap = lazy(() => import('./Swap'))
 const Send = lazy(() => import('./Send'))
-const Pool = lazy(() => import('./Supply'))
-const Add = lazy(() => import('./Supply/AddLiquidity'))
-const Remove = lazy(() => import('./Supply/RemoveLiquidity'))
+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'))
 
@@ -97,15 +97,15 @@ export default function App() {
   return (
     <>
       <Suspense fallback={null}>
-        <AppWrapper>
-          <HeaderWrapper>
-            <Header />
-          </HeaderWrapper>
-          <BodyWrapper>
-            <Popups />
-            <Body>
-              <Web3ReactManager>
-                <BrowserRouter>
+        <BrowserRouter>
+          <AppWrapper>
+            <HeaderWrapper>
+              <Header />
+            </HeaderWrapper>
+            <BodyWrapper>
+              <Popups />
+              <Body>
+                <Web3ReactManager>
                   <NavigationTabs />
                   {/* this Suspense is for route code-splitting */}
                   <Suspense fallback={null}>
@@ -153,13 +153,13 @@ export default function App() {
                       <Redirect to="/" />
                     </Switch>
                   </Suspense>
-                </BrowserRouter>
-              </Web3ReactManager>
-            </Body>
-            <Footer></Footer>
-          </BodyWrapper>
-          <StyledRed />
-        </AppWrapper>
+                </Web3ReactManager>
+              </Body>
+              <Footer></Footer>
+            </BodyWrapper>
+            <StyledRed />
+          </AppWrapper>
+        </BrowserRouter>
       </Suspense>
     </>
   )

src/pages/Supply/AddLiquidity.tsx → src/pages/Pool/AddLiquidity.tsx

@@ -210,14 +210,23 @@ function AddLiquidity({ token0, token1, step = false }) {
     [Field.INPUT]: null,
     [Field.OUTPUT]: null
   })
+
   useEffect(() => {
-    if (typedValue !== '' && typedValue !== '.' && tokens[independentField] && noLiquidity) {
+    if (typedValue !== '.' && tokens[independentField] && noLiquidity) {
       const newNonRelationalAmounts = nonrelationalAmounts
-      const typedValueParsed = parseUnits(typedValue, tokens[independentField].decimals).toString()
-      if (independentField === Field.OUTPUT) {
-        newNonRelationalAmounts[Field.OUTPUT] = new TokenAmount(tokens[independentField], typedValueParsed)
+      if (typedValue === '') {
+        if (independentField === Field.OUTPUT) {
+          newNonRelationalAmounts[Field.OUTPUT] = null
+        } else {
+          newNonRelationalAmounts[Field.INPUT] = null
+        }
       } else {
-        newNonRelationalAmounts[Field.INPUT] = new TokenAmount(tokens[independentField], typedValueParsed)
+        const typedValueParsed = parseUnits(typedValue, tokens[independentField].decimals).toString()
+        if (independentField === Field.OUTPUT) {
+          newNonRelationalAmounts[Field.OUTPUT] = new TokenAmount(tokens[independentField], typedValueParsed)
+        } else {
+          newNonRelationalAmounts[Field.INPUT] = new TokenAmount(tokens[independentField], typedValueParsed)
+        }
       }
       setNonrelationalAmounts(newNonRelationalAmounts)
     }
@@ -255,15 +264,20 @@ function AddLiquidity({ token0, token1, step = false }) {
   }
 
   // used for displaying approximate starting price in UI
+
   const derivedPrice =
     parsedAmounts[Field.INPUT] &&
     parsedAmounts[Field.OUTPUT] &&
-    new Price(
-      parsedAmounts[Field.INPUT].token,
-      parsedAmounts[Field.OUTPUT].token,
-      parsedAmounts[Field.INPUT].raw,
-      parsedAmounts[Field.OUTPUT].raw
-    )
+    nonrelationalAmounts[Field.INPUT] &&
+    nonrelationalAmounts[Field.OUTPUT] &&
+    typedValue !== ''
+      ? new Price(
+          parsedAmounts[Field.INPUT].token,
+          parsedAmounts[Field.OUTPUT].token,
+          parsedAmounts[Field.INPUT].raw,
+          parsedAmounts[Field.OUTPUT].raw
+        )
+      : null
 
   // check for estimated liquidity minted
   const liquidityMinted: TokenAmount =
@@ -603,12 +617,41 @@ function AddLiquidity({ token0, token1, step = false }) {
       </>
     )
   }
+
+  const displayPriceInput = noLiquidity
+    ? parsedAmounts[0] &&
+      parsedAmounts[1] &&
+      derivedPrice &&
+      JSBI.greaterThan(parsedAmounts[0].raw, JSBI.BigInt(0)) &&
+      JSBI.greaterThan(parsedAmounts[1].raw, JSBI.BigInt(0))
+      ? derivedPrice?.toSignificant(6)
+      : '-'
+    : pair && route && tokens[Field.INPUT]
+    ? route?.input.equals(tokens[Field.INPUT])
+      ? route.midPrice.toSignificant(6)
+      : route.midPrice.invert().toSignificant(6)
+    : '-'
+
+  const displayPriceOutput = noLiquidity
+    ? parsedAmounts[0] &&
+      parsedAmounts[1] &&
+      derivedPrice &&
+      JSBI.greaterThan(parsedAmounts[0].raw, JSBI.BigInt(0)) &&
+      JSBI.greaterThan(parsedAmounts[1].raw, JSBI.BigInt(0))
+      ? derivedPrice?.invert().toSignificant(6)
+      : '-'
+    : pair && route && tokens[Field.OUTPUT]
+    ? route?.input.equals(tokens[Field.OUTPUT])
+      ? route.midPrice.toSignificant(6)
+      : route.midPrice.invert().toSignificant(6)
+    : '-'
+
   const PriceBar = () => {
     return (
       <AutoRow justify="space-between">
         <AutoColumn justify="center">
           <Text fontWeight={500} fontSize={16} color="#000000">
-            {pair ? `${route.midPrice.toSignificant(6)} ` : '-'}
+            {displayPriceInput}
           </Text>
           <Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
             {tokens[Field.OUTPUT]?.symbol} per {tokens[Field.INPUT]?.symbol}
@@ -616,7 +659,7 @@ function AddLiquidity({ token0, token1, step = false }) {
         </AutoColumn>
         <AutoColumn justify="center">
           <Text fontWeight={500} fontSize={16} color="#000000">
-            {pair ? `${route.midPrice.invert().toSignificant(6)} ` : '-'}
+            {displayPriceOutput}
           </Text>
           <Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
             {tokens[Field.INPUT]?.symbol} per {tokens[Field.OUTPUT]?.symbol}
@@ -624,7 +667,7 @@ function AddLiquidity({ token0, token1, step = false }) {
         </AutoColumn>
         <AutoColumn justify="center">
           <Text fontWeight={500} fontSize={16} color="#000000">
-            {poolTokenPercentage ? poolTokenPercentage?.toFixed(2) : '0.0'}
+            {noLiquidity && derivedPrice ? '100' : poolTokenPercentage ? poolTokenPercentage?.toFixed(2) : '0.0'}
             {'%'}
           </Text>
           <Text fontWeight={500} fontSize={14} color="#888D9B" pt={1}>
@@ -712,7 +755,7 @@ function AddLiquidity({ token0, token1, step = false }) {
         {showOutputApprove ? (
           <ButtonLight
             onClick={() => {
-              approveAmount(Field.OUTPUT)
+              !pendingApprovalOutput && approveAmount(Field.OUTPUT)
             }}
           >
             {pendingApprovalOutput ? (
@@ -724,7 +767,7 @@ function AddLiquidity({ token0, token1, step = false }) {
         ) : showInputApprove ? (
           <ButtonLight
             onClick={() => {
-              approveAmount(Field.INPUT)
+              !pendingApprovalInput && approveAmount(Field.INPUT)
             }}
           >
             {pendingApprovalInput ? (