Update message for testnet, bug fixes (#663)

public/locales/en.json

@@ -21,6 +21,7 @@
   "searchOrPaste": "Search Token Name, Symbol, or Address",
   "searchOrPasteMobile": "Name, Symbol, or Address",
   "noExchange": "No Exchange Found",
+  "noToken": "No Token Found",
   "exchangeRate": "Exchange Rate",
   "unknownError": "Oops! An unknown error occurred. Please refresh the page, or visit from another browser or device.",
   "enterValueCont": "Enter a {{ missingCurrencyValue }} value to continue.",

src/components/AddressInputPanel/index.js

@@ -78,6 +78,7 @@ export default function AddressInputPanel({ initialInput = '', onChange, onError
   useEffect(() => {
     onChange({ address: data.address, name: data.name })
   }, [onChange, data.address, data.name])
+
   useEffect(() => {
     onError(error)
   }, [onError, error])
@@ -85,7 +86,6 @@ export default function AddressInputPanel({ initialInput = '', onChange, onError
   // run parser on debounced input
   useEffect(() => {
     let stale = false
-
     if (isAddress(debouncedInput)) {
       try {
         library
@@ -135,6 +135,8 @@ export default function AddressInputPanel({ initialInput = '', onChange, onError
         } catch {
           setError(true)
         }
+      } else if (debouncedInput === '') {
+        setError(true)
       }
     }
 
@@ -144,6 +146,10 @@ export default function AddressInputPanel({ initialInput = '', onChange, onError
   }, [debouncedInput, library, onChange, onError])
 
   function onInput(event) {
+    if (event.target.value === '') {
+      setData({ address: undefined, name: undefined })
+    }
+
     if (data.address !== undefined || data.name !== undefined) {
       setData({ address: undefined, name: undefined })
     }
@@ -152,6 +158,7 @@ export default function AddressInputPanel({ initialInput = '', onChange, onError
     }
     const input = event.target.value
     const checksummedInput = isAddress(input)
+
     setInput(checksummedInput || input)
   }
 

src/components/CurrencyInputPanel/index.js

@@ -130,7 +130,7 @@ const ClickableText = styled.div`
 `
 
 const StyledBalanceMax = styled.button`
-  height: 30px;
+  height: 35px;
   background-color: ${({ theme }) => theme.zumthorBlue};
   border: 1px solid ${({ theme }) => theme.zumthorBlue};
   border-radius: 0.5rem;

src/components/ExchangePage/index.tsx

 import React, { useState, useReducer, useCallback, useEffect } from 'react'
 import styled from 'styled-components'
 import { ethers } from 'ethers'
+import { withRouter } from 'react-router-dom'
 import { parseUnits, parseEther } from '@ethersproject/units'
 import { WETH, TradeType, Route, Exchange, Trade, TokenAmount, JSBI, Percent } from '@uniswap/sdk'
 
@@ -218,7 +219,7 @@ const DEFAULT_DEADLINE_FROM_NOW = 60 * 15
 const ALLOWED_SLIPPAGE_MEDIUM = 100
 const ALLOWED_SLIPPAGE_HIGH = 500
 
-export default function ExchangePage({ sendingInput = false }) {
+function ExchangePage({ sendingInput = false, history }) {
   const { chainId, account, library } = useWeb3React()
   const routerAddress: string = ROUTER_ADDRESSES[chainId]
 
@@ -849,6 +850,8 @@ export default function ExchangePage({ sendingInput = false }) {
   function _onRecipient(result) {
     if (result.address) {
       setRecipient(result.address)
+    } else {
+      setRecipient('')
     }
   }
 
@@ -975,7 +978,7 @@ export default function ExchangePage({ sendingInput = false }) {
           <AutoColumn gap="10px">
             <AddressInputPanel
               onChange={_onRecipient}
-              onError={error => {
+              onError={(error: boolean) => {
                 if (error) {
                   setRecipientError('Inavlid Recipient')
                 } else {
@@ -989,7 +992,14 @@ export default function ExchangePage({ sendingInput = false }) {
         {emptyReserves ? (
           <RowBetween style={{ margin: '10px 0' }}>
             <TYPE.main>No exchange for this pair.</TYPE.main>
-            <TYPE.blue> Create one now</TYPE.blue>
+            <Link
+              onClick={() => {
+                history.push('/add/' + tokens[Field.INPUT]?.address + '-' + tokens[Field.OUTPUT]?.address)
+              }}
+            >
+              {' '}
+              Create one now
+            </Link>
           </RowBetween>
         ) : (
           <ButtonError
@@ -1041,3 +1051,5 @@ export default function ExchangePage({ sendingInput = false }) {
     </Wrapper>
   )
 }
+
+export default withRouter(ExchangePage)

src/components/SearchModal/index.js

@@ -328,7 +328,7 @@ function SearchModal({
     if (isAddress(searchQuery) && tokenAddress === ethers.constants.AddressZero) {
       return (
         <>
-          <TokenModalInfo>{t('noExchange')}</TokenModalInfo>
+          <TokenModalInfo>{t('noToken')}</TokenModalInfo>
           <TokenModalInfo>
             <Link to={`/create-exchange/${searchQuery}`}>{t('createExchange')}</Link>
           </TokenModalInfo>
@@ -336,7 +336,7 @@ function SearchModal({
       )
     }
     if (!filteredTokenList.length) {
-      return <TokenModalInfo>{t('noExchange')}</TokenModalInfo>
+      return <TokenModalInfo>{t('noToken')}</TokenModalInfo>
     }
 
     return filteredTokenList.map(({ address, symbol, balance }) => {

src/components/WalletModal/index.js

@@ -280,7 +280,7 @@ export default function WalletModal({ pendingTransactions, confirmedTransactions
           <HeaderRow>{error instanceof UnsupportedChainIdError ? 'Wrong Network' : 'Error connecting'}</HeaderRow>
           <ContentWrapper>
             {error instanceof UnsupportedChainIdError ? (
-              <h5>Please connect to the main Ethereum network.</h5>
+              <h5>Please connect to the appropriate Ethereum network.</h5>
             ) : (
               'Error connecting. Try refreshing the page.'
             )}

src/connectors/index.js

@@ -18,7 +18,7 @@ export const network = new NetworkConnector({
 })
 
 export const injected = new InjectedConnector({
-  supportedChainIds: [Number(process.env.REACT_APP_CHAIN_ID), 4]
+  supportedChainIds: [3, 4, 5, 42]
 })
 
 // mainnet only

src/constants/index.ts

@@ -2,16 +2,18 @@ import { injected, walletconnect, walletlink, fortmatic, portis } from '../conne
 
 export const FACTORY_ADDRESSES = {
   1: '',
-  3: '',
+  3: '0xe2f197885abe8ec7c866cFf76605FD06d4576218',
   4: '0xe2f197885abe8ec7c866cFf76605FD06d4576218',
-  42: ''
+  5: '0xe2f197885abe8ec7c866cFf76605FD06d4576218',
+  42: '0xe2f197885abe8ec7c866cFf76605FD06d4576218'
 }
 
 export const ROUTER_ADDRESSES = {
   1: '',
-  3: '',
+  3: '0xcDbE04934d89e97a24BCc07c3562DC8CF17d8167',
   4: '0xcDbE04934d89e97a24BCc07c3562DC8CF17d8167',
-  42: ''
+  5: '0xcDbE04934d89e97a24BCc07c3562DC8CF17d8167',
+  42: '0xcDbE04934d89e97a24BCc07c3562DC8CF17d8167'
 }
 
 export const SUPPORTED_THEMES = {

src/contexts/Exchanges.tsx

 import React, { createContext, useContext, useReducer, useMemo, useCallback, useEffect, useState } from 'react'
-
 import { useAddressBalance } from './Balances'
 import { useWeb3React, useExchangeContract } from '../hooks'
-
 import { INITIAL_TOKENS_CONTEXT } from './Tokens'
 import { ChainId, WETH, Token, TokenAmount, Exchange, JSBI } from '@uniswap/sdk'
 
@@ -171,9 +169,7 @@ export function useTotalSupply(exchange: Exchange) {
             })
           }
         })
-        .catch(e => {
-          console.log(e)
-        })
+        .catch(() => {})
     /**
      * @todo
      * fix this

src/contexts/Tokens.tsx

@@ -6,9 +6,22 @@ import { isAddress, getTokenName, getTokenSymbol, getTokenDecimals, safeAccess }
 const UPDATE = 'UPDATE'
 
 export const ALL_TOKENS = [
+  // Rinkeby Tokens
   WETH[ChainId.RINKEBY],
   new Token(ChainId.RINKEBY, '0xc7AD46e0b8a400Bb3C915120d284AafbA8fc4735', 18, 'DAI', 'Dai Stablecoin'),
-  new Token(ChainId.RINKEBY, '0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44', 18, 'IANV2', 'IAn V2 /Coin')
+  new Token(ChainId.RINKEBY, '0x8ab15C890E5C03B5F240f2D146e3DF54bEf3Df44', 18, 'IANV2', 'IAn V2 /Coin'),
+
+  //Kovan Tokens
+  WETH[ChainId.KOVAN],
+  new Token(ChainId.KOVAN, '0x4F96Fe3b7A6Cf9725f59d353F723c1bDb64CA6Aa', 18, 'DAI', 'Dai Stablecoin'),
+
+  //Ropsten Tokens
+  WETH[ChainId.ROPSTEN],
+  new Token(ChainId.ROPSTEN, '0xaD6D458402F60fD3Bd25163575031ACDce07538D', 18, 'DAI', 'Dai Stablecoin'),
+
+  //Goerli Tokens
+  WETH[ChainId.GÖRLI],
+  new Token(ChainId.GÖRLI, '0xaD6D458402F60fD3Bd25163575031ACDce07538D', 18, 'DAI', 'Dai Stablecoin')
 ]
 
 // only meant to be used in exchanges.ts!

src/pages/App.js

@@ -43,11 +43,13 @@ const BetaMessage = styled.div`
   border-radius: 1rem;
   font-size: 0.75rem;
   line-height: 1rem;
-  text-align: left;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   color: ${({ theme }) => theme.wisteriaPurple};
+  min-width: 380px;
+  text-align: center;
+  justify-content: center;
 `
 
 const BodyWrapper = styled.div`
@@ -58,6 +60,7 @@ const BodyWrapper = styled.div`
   align-items: center;
   flex: 1;
   overflow: auto;
+  padding-top: 40px;
 `
 
 const Body = styled.div`
@@ -87,6 +90,13 @@ export default function App() {
               <BetaMessage>Incorrect network. This site is intended to be used on Ethereum testnets only.</BetaMessage>
             )}
 
+            {(chainId === 3 || chainId === 4 || chainId === 5 || chainId === 42) && (
+              <BetaMessage>
+                Connected to{' '}
+                {chainId === 3 ? 'Ropsten ' : chainId === 4 ? 'Rinkeby' : chainId === 5 ? 'Goerli' : 'Kovan'} testnet.
+              </BetaMessage>
+            )}
+
             <Body>
               <Web3ReactManager>
                 <BrowserRouter>

src/pages/Supply/AddLiquidity.tsx

@@ -238,7 +238,11 @@ export default function AddLiquidity({ token0, token1 }) {
 
   // check for estimated liquidity minted
   const liquidityMinted: TokenAmount =
-    !!exchange && !!parsedAmounts[Field.INPUT] && !!parsedAmounts[Field.OUTPUT]
+    !!exchange &&
+    !!parsedAmounts[Field.INPUT] &&
+    !!parsedAmounts[Field.OUTPUT] &&
+    !JSBI.equal(parsedAmounts[Field.INPUT].raw, JSBI.BigInt(0)) &&
+    !JSBI.equal(parsedAmounts[Field.OUTPUT].raw, JSBI.BigInt(0))
       ? exchange.getLiquidityMinted(
           totalSupply ? totalSupply : new TokenAmount(exchange?.liquidityToken, JSBI.BigInt(0)),
           parsedAmounts[Field.INPUT],
@@ -314,7 +318,6 @@ export default function AddLiquidity({ token0, token1 }) {
   const [outputError, setOutputError] = useState('')
   const [isValid, setIsValid] = useState(false)
 
-  // update errors live
   useEffect(() => {
     // reset errors
     setGeneralError(null)
@@ -322,6 +325,16 @@ export default function AddLiquidity({ token0, token1 }) {
     setOutputError(null)
     setIsValid(true)
 
+    if (noLiquidity && parsedAmounts[Field.INPUT] && JSBI.equal(parsedAmounts[Field.INPUT].raw, JSBI.BigInt(0))) {
+      setGeneralError('Enter an amount')
+      setIsValid(false)
+    }
+
+    if (noLiquidity && parsedAmounts[Field.OUTPUT] && JSBI.equal(parsedAmounts[Field.OUTPUT].raw, JSBI.BigInt(0))) {
+      setGeneralError('Enter an amount')
+      setIsValid(false)
+    }
+
     if (!parsedAmounts[Field.INPUT]) {
       setGeneralError('Enter an amount')
       setIsValid(false)
@@ -354,7 +367,7 @@ export default function AddLiquidity({ token0, token1 }) {
       setOutputError('Insufficient balance.')
       setIsValid(false)
     }
-  }, [parsedAmounts, showInputUnlock, showOutputUnlock, userBalances])
+  }, [noLiquidity, parsedAmounts, showInputUnlock, showOutputUnlock, userBalances])
 
   // state for txn
   const addTransaction = useTransactionAdder()
@@ -602,14 +615,16 @@ export default function AddLiquidity({ token0, token1 }) {
             {generalError ? generalError : inputError ? inputError : outputError ? outputError : 'Supply'}
           </Text>
         </ButtonPrimary>
-        <FixedBottom>
-          <PositionCard
-            exchangeAddress={exchange?.liquidityToken?.address}
-            token0={tokens[Field.INPUT]}
-            token1={tokens[Field.OUTPUT]}
-            minimal={true}
-          />
-        </FixedBottom>
+        {!noLiquidity && (
+          <FixedBottom>
+            <PositionCard
+              exchangeAddress={exchange?.liquidityToken?.address}
+              token0={tokens[Field.INPUT]}
+              token1={tokens[Field.OUTPUT]}
+              minimal={true}
+            />
+          </FixedBottom>
+        )}
       </AutoColumn>
     </Wrapper>
   )

src/pages/Supply/index.js

@@ -98,7 +98,7 @@ function Supply({ history }) {
                 Earn fees with pooled market making.
               </Text>
               <Text fontSize="12px">
-                <Link>Provide liquidity </Link>to earn .03% spread fees for providing market depth.
+                <Link>Provide liquidity </Link>to earn .3% spread fees for providing market depth.
               </Text>
               <Link>
                 <Row>