Merge pull request #264 from NoahZinsmeister/netlify

upgrade dependencies, fix lint errors

Merge pull request #264 from NoahZinsmeister/netlify
upgrade dependencies, fix lint errors
35d9254b · Noah Zinsmeister · GitHub · a06d9c3c · 9c93c1a9 · 35d9254b
Commit 35d9254b authored Apr 15, 2019 by Noah Zinsmeister Committed by GitHub Apr 15, 2019
21 changed files
--- a/README.md
+++ b/README.md
 # Uniswap Frontend
+[![Netlify Status](https://api.netlify.com/api/v1/badges/fa110555-b3c7-4eeb-b840-88a835009c62/deploy-status)](https://app.netlify.com/sites/uniswap/deploys)
 This an an open source interface for Uniswap - a protocol for decentralized exchange of Ethereum tokens.
 * Website: [uniswap.io/](https://uniswap.io/)

--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
    "classnames": "^2.2.6",
    "d3": "^4.13.0",
    "deep-equal": "^1.0.1",
+    "ethers": "^4.0.27",
    "fuse": "^0.4.0",
    "i18next": "^13.0.1",
    "i18next-browser-languagedetector": "^2.2.4",
@@ -16,16 +17,16 @@
    "node-sass": "^4.9.3",
    "npm": "^6.0.0",
    "prop-types": "^15.6.2",
-    "react": "^16.2.0",
+    "react": "^16.8.6",
    "react-cookies": "^0.1.0",
-    "react-dom": "^16.2.0",
+    "react-dom": "^16.8.6",
    "react-ga": "^2.5.3",
    "react-helmet": "^5.2.0",
    "react-i18next": "^8.4.0",
    "react-redux": "^5.0.7",
    "react-responsive": "^5.0.0",
    "react-router-dom": "^4.3.1",
-    "react-scripts": "2.0.4",
+    "react-scripts": "^2.1.8",
    "react-scroll-to-component": "^1.0.2",
    "react-select": "^1.2.1",
    "react-transition-group": "1.x",
@@ -33,7 +34,7 @@
    "redux-subscriber": "^1.1.0",
    "redux-thunk": "^2.2.0",
    "ua-parser-js": "^0.7.18",
-    "web3": "^1.0.0-beta.36"
+    "web3": "1.0.0-beta.52"
  },
  "scripts": {
    "start": "react-scripts start",

--- a/src/components/ContextualInfo/index.js
+++ b/src/components/ContextualInfo/index.js
@@ -65,12 +65,12 @@ class ContextualInfo extends Component {
        {!this.state.showDetails ? (
          <>
            <span>{openDetailsText}</span>
-            <img src={DropdownBlue} />
+            <img src={DropdownBlue} alt='dropdown' />
          </>
        ) : (
          <>
            <span>{closeDetailsText}</span>
-            <img src={DropupBlue} />
+            <img src={DropupBlue} alt='dropup' />
          </>
        )}
      </div>,

--- a/src/components/CurrencyInputPanel/index.js
+++ b/src/components/CurrencyInputPanel/index.js
@@ -230,7 +230,7 @@ class CurrencyInputPanel extends Component {
                  this.setState({ searchQuery: e.target.value });
                }}
              />
-              <img src={SearchIcon} className="token-modal__search-icon" />
+              <img src={SearchIcon} className="token-modal__search-icon" alt='search' />
            </div>
            <div className="token-modal__token-list">
              {this.renderTokenList()}

--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -88,7 +88,7 @@ class BlockingWarning extends Component {
    const correctNetworkId = process.env.REACT_APP_NETWORK_ID || 1;
    const correctNetwork = process.env.REACT_APP_NETWORK || 'Main Ethereum Network';
-    const wrongNetwork = networkId != correctNetworkId;
+    const wrongNetwork = networkId !== correctNetworkId;
    if (wrongNetwork && initialized) {
      content = [
@@ -114,14 +114,14 @@ class BlockingWarning extends Component {
            isMobile()
              ? (
                [
-                  <img src={CoinbaseWalletLogo} key="coinbase-wallet" onClick={() => window.open(getCoinbaseWalletLink(), '_blank')} />,
+                  <img alt='coinbase' src={CoinbaseWalletLogo} key="coinbase-wallet" onClick={() => window.open(getCoinbaseWalletLink(), '_blank')} />,
-                  <img src={TrustLogo} key="trust" onClick={() => window.open(getTrustLink(), '_blank')} />
+                  <img alt='trust' src={TrustLogo} key="trust" onClick={() => window.open(getTrustLink(), '_blank')} />
                ]
              )
              : (
                [
-                  <img src={MetamaskLogo} key="metamask" onClick={() => window.open(getMetamaskLink(), '_blank')} />,
+                  <img alt='metamask' src={MetamaskLogo} key="metamask" onClick={() => window.open(getMetamaskLink(), '_blank')} />,
-                  <img src={BraveLogo} key="brave" onClick={() => window.open(getBraveLink(), '_blank')} />
+                  <img alt='brave' src={BraveLogo} key="brave" onClick={() => window.open(getBraveLink(), '_blank')} />
                ]
              )
          }

--- a/src/components/NavigationTabs/index.js
+++ b/src/components/NavigationTabs/index.js
@@ -50,7 +50,7 @@ class NavigationTabs extends Component {
        {
          showBetaMessage && (
            <div className="beta-message" onClick={dismissBetaMessage}>
-              💀 {t("betaWarning")}
+              <span role='img' aria-label='warning'>💀</span> {t("betaWarning")}
            </div>
          )
        }

--- a/src/components/OversizedPanel/index.js
+++ b/src/components/OversizedPanel/index.js
 import React from 'react';
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
 import './oversized-panel.scss';

--- a/src/components/QrCode/index.js
+++ b/src/components/QrCode/index.js
@@ -21,10 +21,6 @@ class QrCode extends Component {
    stream: null,
  };
-  constructor(props) {
-    super(props);
-  }
  componentDidUpdate() {
    const { videoOpen, stream } = this.state;
@@ -102,12 +98,8 @@ class QrCode extends Component {
  }
  render() {
-    const {
-      onValueReceived,
-    } = this.props;
    return [
-      <img key="icon" src={QrCodeSVG} onClick={() => {
+      <img key="icon" src={QrCodeSVG} alt='code' onClick={() => {
        this.state.videoOpen ? this.closeVideo() : this.openVideo();
      }} />,
      this.renderQrReader()

--- a/src/components/Tab/index.js
+++ b/src/components/Tab/index.js
-import React, { Component } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';

--- a/src/components/TokenLogo/index.js
+++ b/src/components/TokenLogo/index.js
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import EthereumLogo from '../../assets/images/ethereum-logo.svg';
-import GenericTokenLogo from '../../assets/images/generic-token-logo.png';
 const RINKEBY_TOKEN_MAP = {
  '0xDA5B056Cfb861282B4b59d29c9B395bcC238D29B': '0x0d8775f648430679a709e98d2b0cb6250d2887ef',
@@ -45,11 +44,12 @@ export default class TokenLogo extends Component {
    }
    if (!path) {
-      return <div className={className} style={{ width: size, fontSize: size }}>🤔</div>
+      return <div className={className} style={{ width: size, fontSize: size }}><span role='img' aria-label='thinking'>🤔</span></div>
    }
    return (
      <img
+        alt='images'
        src={path}
        className={className}
        style={{

--- a/src/components/Web3Status/index.js
+++ b/src/components/Web3Status/index.js
@@ -2,10 +2,10 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import classnames from 'classnames';
-import Web3 from 'web3';
 import Jazzicon from 'jazzicon';
 import { CSSTransitionGroup } from "react-transition-group";
 import { withNamespaces } from 'react-i18next';
+import { ethers } from 'ethers'
 import './web3-status.scss';
 import Modal from '../Modal';
@@ -13,6 +13,8 @@ function getEtherscanLink(tx) {
  return `https://etherscan.io/tx/${tx}`;
 }
+console.log(ethers)
 class Web3Status extends Component {
  state = {
    isShowingModal: false,
@@ -93,7 +95,7 @@ class Web3Status extends Component {
              return;
            }
-            if (!address|| address.length < 42 || !Web3.utils.isHexStrict(address)) {
+            if (!address || address.length < 42 || !ethers.utils.isHexString(address)) {
              return;
            }
@@ -119,11 +121,11 @@ function getPendingText(pendingTransactions, pendingLabel) {
 }
 function getText(text, disconnectedText) {
-  if (!text || text.length < 42 || !Web3.utils.isHexStrict(text)) {
+  if (!text || text.length < 42 || !ethers.utils.isHexString(text)) {
    return disconnectedText;
  }
-  const address = Web3.utils.toChecksumAddress(text);
+  const address = ethers.utils.getAddress(text);
  return `${address.substring(0, 6)}...${address.substring(38)}`;
 }

--- a/src/ducks/web3connect.js
+++ b/src/ducks/web3connect.js
@@ -220,7 +220,7 @@ export const sync = () => async (dispatch, getState) => {
    watched,
    contracts,
    networkId,
-    transactions: { pending, confirmed },
+    transactions: { pending },
  } = getState().web3connect;
  // Sync Account

--- a/src/helpers/fuse/bitap/bitap_regex_search.js
+++ b/src/helpers/fuse/bitap/bitap_regex_search.js
-// eslint-disable-next-line no-unused-escape
+// eslint-disable-next-line no-useless-escape
 const SPECIAL_CHARS_REGEX = /[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g
 export default function (text, pattern, tokenSeparator = / +/g) {

--- a/src/libraries/qr-scanner.js
+++ b/src/libraries/qr-scanner.js
+/* eslint-disable */
 /*
 @asset(/libraries/qr-scanner/qr-scanner-worker.min.js) */
 'use strict';export default class QrScanner{constructor(video,onDecode,canvasSize=QrScanner.DEFAULT_CANVAS_SIZE){this.$video=video;this.$canvas=document.createElement("canvas");this._onDecode=onDecode;this._active=false;this.$canvas.width=canvasSize;this.$canvas.height=canvasSize;this._sourceRect={x:0,y:0,width:canvasSize,height:canvasSize};this.$video.addEventListener("canplay",()=>this._updateSourceRect());this.$video.addEventListener("play",()=>{this._updateSourceRect();this._scanFrame()},false);

--- a/src/pages/Pool/AddLiquidity.js
+++ b/src/pages/Pool/AddLiquidity.js
@@ -10,8 +10,6 @@ import NavigationTabs from '../../components/NavigationTabs';
 import { selectors, addPendingTx } from '../../ducks/web3connect';
 import PlusBlue from '../../assets/images/plus-blue.svg';
 import PlusGrey from '../../assets/images/plus-grey.svg';
-import DropdownBlue from "../../assets/images/dropdown-blue.svg";
-import DropupBlue from "../../assets/images/dropup-blue.svg";
 import { getBlockDeadline } from '../../helpers/web3-utils';
 import { retry } from '../../helpers/promise-utils';
 import ModeSelector from './ModeSelector';
@@ -56,7 +54,7 @@ class AddLiquidity extends Component {
    const { inputValue, outputValue, inputCurrency, outputCurrency, lastEditedField } = this.state;
    return isConnected !== nextProps.isConnected ||
-      t != nextProps.t ||
+      t !== nextProps.t ||
      account !== nextProps.account ||
      exchangeAddresses !== nextProps.exchangeAddresses ||
      web3 !== nextProps.web3 ||
@@ -455,7 +453,7 @@ class AddLiquidity extends Component {
      action: 'Open',
    });
-    const { value: tokenReserve, decimals, label } = selectors().getTokenBalance(outputCurrency, fromToken[outputCurrency]);
+    const { value: tokenReserve, label } = selectors().getTokenBalance(outputCurrency, fromToken[outputCurrency]);
    const { value: ethReserve } = selectors().getBalance(fromToken[outputCurrency]);
    const { decimals: poolTokenDecimals } = selectors().getBalance(account, fromToken[outputCurrency]);
@@ -473,8 +471,8 @@ class AddLiquidity extends Component {
    const SLIPPAGE = 0.025;
    const minOutput = BN(outputValue).multipliedBy(1 - SLIPPAGE);
    const maxOutput = BN(outputValue).multipliedBy(1 + SLIPPAGE);
-    const minPercentage = minOutput.dividedBy(minOutput.plus(tokenReserve)).multipliedBy(100);
+    // const minPercentage = minOutput.dividedBy(minOutput.plus(tokenReserve)).multipliedBy(100);
-    const maxPercentage = maxOutput.dividedBy(maxOutput.plus(tokenReserve)).multipliedBy(100);
+    // const maxPercentage = maxOutput.dividedBy(maxOutput.plus(tokenReserve)).multipliedBy(100);
    const liquidityMinted = BN(inputValue).multipliedBy(totalSupply.dividedBy(ethReserve));
    const adjTotalSupply = totalSupply.dividedBy(10 ** poolTokenDecimals);
@@ -524,7 +522,7 @@ class AddLiquidity extends Component {
            ? (
              <div className="pool__new-exchange-warning">
                <div className="pool__new-exchange-warning-text">
-                  🚰 {t("firstLiquidity")}
+                  <span role='img' aria-label='liquidity'>🚰</span> {t("firstLiquidity")}
                </div>
                <div className="pool__new-exchange-warning-text">
                  { t("initialExchangeRate", { label }) }
@@ -545,7 +543,7 @@ class AddLiquidity extends Component {
        />
        <OversizedPanel>
          <div className="swap__down-arrow-background">
-            <img className="swap__down-arrow" src={isValid ? PlusBlue : PlusGrey} />
+            <img className="swap__down-arrow" src={isValid ? PlusBlue : PlusGrey} alt='plus' />
          </div>
        </OversizedPanel>
        <CurrencyInputPanel
@@ -586,7 +584,7 @@ class AddLiquidity extends Component {
 export default connect(
  state => ({
-    isConnected: Boolean(state.web3connect.account) && state.web3connect.networkId == (process.env.REACT_APP_NETWORK_ID||1),
+    isConnected: Boolean(state.web3connect.account) && state.web3connect.networkId === (process.env.REACT_APP_NETWORK_ID||1),
    account: state.web3connect.account,
    balances: state.web3connect.balances,
    web3: state.web3connect.web3,

--- a/src/pages/Pool/CreateExchange.js
+++ b/src/pages/Pool/CreateExchange.js
@@ -222,7 +222,7 @@ class CreateExchange extends Component {
 export default withRouter(
  connect(
    state => ({
-      isConnected: Boolean(state.web3connect.account) && state.web3connect.networkId == (process.env.REACT_APP_NETWORK_ID||1),
+      isConnected: Boolean(state.web3connect.account) && state.web3connect.networkId === (process.env.REACT_APP_NETWORK_ID||1),
      account: state.web3connect.account,
      balances: state.web3connect.balances,
      web3: state.web3connect.web3,

--- a/src/pages/Pool/ModeSelector.js
+++ b/src/pages/Pool/ModeSelector.js
@@ -86,7 +86,7 @@ class ModeSelector extends Component {
          <span className="pool__liquidity-label">
            {this.props.title}
          </span>
-          <img src={Dropdown} />
+          <img src={Dropdown} alt='dropdown' />
        </div>
        {this.renderModal()}
      </OversizedPanel>

--- a/src/pages/Pool/RemoveLiquidity.js
+++ b/src/pages/Pool/RemoveLiquidity.js
@@ -198,7 +198,6 @@ class RemoveLiquidity extends Component {
    const {
      t,
      exchangeAddresses: { fromToken },
-      web3,
      selectors,
      account,
    } = this.props;
@@ -215,9 +214,9 @@ class RemoveLiquidity extends Component {
    });
    const SLIPPAGE = 0.025;
-    const { value: liquidityBalance, decimals } = getBalance(account, exchangeAddress);
+    const { decimals } = getBalance(account, exchangeAddress);
    const { value: ethReserve } = getBalance(exchangeAddress);
-    const { value: tokenReserve, label, decimals: reserveDecimals } = getBalance(exchangeAddress, tokenAddress);
+    const { value: tokenReserve, label } = getBalance(exchangeAddress, tokenAddress);
    const ethPer = ethReserve.dividedBy(totalSupply);
    const tokenPer = tokenReserve.dividedBy(totalSupply);
@@ -377,7 +376,7 @@ class RemoveLiquidity extends Component {
        />
        <OversizedPanel>
          <div className="swap__down-arrow-background">
-            <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
+            <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} alt='arrow' />
          </div>
        </OversizedPanel>
        { this.renderOutput() }
@@ -401,7 +400,7 @@ class RemoveLiquidity extends Component {
 export default connect(
  state => ({
-    isConnected: Boolean(state.web3connect.account) && state.web3connect.networkId == (process.env.REACT_APP_NETWORK_ID||1),
+    isConnected: Boolean(state.web3connect.account) && state.web3connect.networkId === (process.env.REACT_APP_NETWORK_ID||1),
    web3: state.web3connect.web3,
    balances: state.web3connect.balances,
    account: state.web3connect.account,

--- a/src/pages/Send/index.js
+++ b/src/pages/Send/index.js
@@ -11,8 +11,6 @@ import AddressInputPanel from '../../components/AddressInputPanel';
 import CurrencyInputPanel from '../../components/CurrencyInputPanel';
 import ContextualInfo from '../../components/ContextualInfo';
 import OversizedPanel from '../../components/OversizedPanel';
-import DropdownBlue from "../../assets/images/dropdown-blue.svg";
-import DropupBlue from "../../assets/images/dropup-blue.svg";
 import ArrowDownBlue from '../../assets/images/arrow-down-blue.svg';
 import ArrowDownGrey from '../../assets/images/arrow-down-grey.svg';
 import { getBlockDeadline } from '../../helpers/web3-utils';
@@ -586,7 +584,6 @@ class Send extends Component {
      outputValue,
      outputCurrency,
      recipient,
-      inputAmountB,
      lastEditedField,
    } = this.state;
    const { t, selectors, account } = this.props;
@@ -600,10 +597,10 @@ class Send extends Component {
    const TOKEN_ALLOWED_SLIPPAGE = 0.04;
    const type = getSendType(inputCurrency, outputCurrency);
-    const { label: inputLabel, decimals: inputDecimals } = selectors().getBalance(account, inputCurrency);
+    const { label: inputLabel } = selectors().getBalance(account, inputCurrency);
-    const { label: outputLabel, decimals: outputDecimals } = selectors().getBalance(account, outputCurrency);
+    const { label: outputLabel } = selectors().getBalance(account, outputCurrency);
-    const label = lastEditedField === INPUT ? outputLabel : inputLabel;
+    // const label = lastEditedField === INPUT ? outputLabel : inputLabel;
    let minOutput;
    let maxInput;
@@ -749,7 +746,7 @@ class Send extends Component {
          />
          <OversizedPanel>
            <div className="swap__down-arrow-background">
-              <img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
+              <img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" alt='arrow' src={isValid ? ArrowDownBlue : ArrowDownGrey} />
            </div>
          </OversizedPanel>
          <CurrencyInputPanel
@@ -766,7 +763,7 @@ class Send extends Component {
          />
          <OversizedPanel>
            <div className="swap__down-arrow-background">
-              <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
+              <img className="swap__down-arrow" src={isValid ? ArrowDownBlue : ArrowDownGrey} alt='arrow' />
            </div>
          </OversizedPanel>
          <AddressInputPanel
@@ -796,7 +793,7 @@ class Send extends Component {
 export default connect(
  state => ({
    balances: state.web3connect.balances,
-    isConnected: !!state.web3connect.account && state.web3connect.networkId == (process.env.REACT_APP_NETWORK_ID||1),
+    isConnected: !!state.web3connect.account && state.web3connect.networkId === (process.env.REACT_APP_NETWORK_ID||1),
    account: state.web3connect.account,
    web3: state.web3connect.web3,
    exchangeAddresses: state.addresses.exchangeAddresses,

--- a/src/pages/Swap/index.js
+++ b/src/pages/Swap/index.js
@@ -12,8 +12,6 @@ import NavigationTabs from '../../components/NavigationTabs';
 import CurrencyInputPanel from '../../components/CurrencyInputPanel';
 import ContextualInfo from '../../components/ContextualInfo';
 import OversizedPanel from '../../components/OversizedPanel';
-import DropdownBlue from "../../assets/images/dropdown-blue.svg";
-import DropupBlue from "../../assets/images/dropup-blue.svg";
 import ArrowDownBlue from '../../assets/images/arrow-down-blue.svg';
 import ArrowDownGrey from '../../assets/images/arrow-down-grey.svg';
 import { getBlockDeadline } from '../../helpers/web3-utils';
@@ -584,10 +582,10 @@ class Swap extends Component {
    const TOKEN_ALLOWED_SLIPPAGE = 0.04;
    const type = getSwapType(inputCurrency, outputCurrency);
-    const { label: inputLabel, decimals: inputDecimals } = selectors().getBalance(account, inputCurrency);
+    const { label: inputLabel } = selectors().getBalance(account, inputCurrency);
-    const { label: outputLabel, decimals: outputDecimals } = selectors().getBalance(account, outputCurrency);
+    const { label: outputLabel } = selectors().getBalance(account, outputCurrency);
-    const label = lastEditedField === INPUT ? outputLabel : inputLabel;
+    // const label = lastEditedField === INPUT ? outputLabel : inputLabel;
    let minOutput;
    let maxInput;
@@ -732,7 +730,7 @@ class Swap extends Component {
          />
          <OversizedPanel>
            <div className="swap__down-arrow-background">
-              <img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" src={isValid ? ArrowDownBlue : ArrowDownGrey} />
+              <img onClick={this.flipInputOutput} className="swap__down-arrow swap__down-arrow--clickable" alt='swap' src={isValid ? ArrowDownBlue : ArrowDownGrey} />
            </div>
          </OversizedPanel>
          <CurrencyInputPanel
@@ -769,7 +767,7 @@ class Swap extends Component {
 export default connect(
  state => ({
    balances: state.web3connect.balances,
-    isConnected: !!state.web3connect.account && state.web3connect.networkId == (process.env.REACT_APP_NETWORK_ID||1),
+    isConnected: !!state.web3connect.account && state.web3connect.networkId === (process.env.REACT_APP_NETWORK_ID||1),
    account: state.web3connect.account,
    web3: state.web3connect.web3,
    exchangeAddresses: state.addresses.exchangeAddresses,

--- a/yarn.lock
+++ b/yarn.lock