Merge balance common

package.json

@@ -23,7 +23,6 @@
     "@walletconnect/browser": "^1.0.0-beta.18",
     "@walletconnect/qrcode-modal": "^1.0.0-beta.18",
     "axios": "^0.18.0",
-    "balance-common": "^0.6.1",
     "bignumber.js": "^7.0.1",
     "bowser": "^2.0.0-alpha.4",
     "ethereumjs-tx": "^1.3.4",

src/components/CopyToClipboard/index.js

@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { lang } from 'balance-common';
+import lang from '../../languages';
 import clipboardIcon from '../../assets/clipboard.png';
-import { toChecksumAddress } from 'balance-common';
+import { toChecksumAddress } from '../../handlers/web3';
 import { notificationShow } from '../../reducers/_notification';
 import {
   StyledCopyToClipboard,

src/components/DropdownAsset.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import selector from '../assets/selector-grey.svg';
-import { ellipseText } from 'balance-common';
+import { ellipseText } from '../helpers/utilities';
 import { fonts, colors, shadows, responsive, transitions } from '../styles';
 import AssetIcon from './AssetIcon';
 import ClickOutside from './ClickOutside';

src/components/Footer.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { lang } from 'balance-common';
+import lang from '../languages';
 import OpenSeaLogo from '../assets/opensea-logo.svg';
 import { fonts, responsive } from '../styles';
 

src/components/GasButton/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { lang } from 'balance-common';
+import lang from '../../languages';
 
 import { StyledGasButton } from './styles';
 

src/components/Input.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { keyframes } from 'styled-components';
-import { lang } from 'balance-common';
+import lang from '../languages';
 import { colors, fonts, shadows, responsive } from '../styles';
 
 const shimmer = keyframes`

src/components/SendComponentWithData.js

@@ -0,0 +1,322 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+import { get } from 'lodash';
+import lang from '../languages';
+import {
+  sendModalInit,
+  sendUpdateGasPrice,
+  sendTransaction,
+  sendClearFields,
+  sendUpdateRecipient,
+  sendUpdateNativeAmount,
+  sendUpdateAssetAmount,
+  sendUpdateSelected,
+  sendMaxBalance,
+  sendToggleConfirmationView,
+} from '../reducers/_send';
+import { notificationShow } from '../reducers/_notification';
+
+import { isValidAddress } from '../helpers/validators';
+import { convertAmountFromBigNumber, greaterThan } from '../helpers/bignumber';
+
+import { transactionData } from '../helpers/utilities';
+
+const reduxProps = ({ send, account }) => ({
+  fetching: send.fetching,
+  recipient: send.recipient,
+  nativeAmount: send.nativeAmount,
+  assetAmount: send.assetAmount,
+  isSufficientGas: send.isSufficientGas,
+  isSufficientBalance: send.isSufficientBalance,
+  txHash: send.txHash,
+  address: send.address,
+  selected: send.selected,
+  gasPrices: send.gasPrices,
+  gasPrice: send.gasPrice,
+  gasLimit: send.gasLimit,
+  gasPriceOption: send.gasPriceOption,
+  confirm: send.confirm,
+  accountInfo: account.accountInfo,
+  accountType: account.accountType,
+  network: account.network,
+  nativeCurrency: account.nativeCurrency,
+  prices: account.prices,
+});
+
+/**
+ * Create SendComponent connected to redux with actions for sending assets.
+ * @param  {Component}  SendComponent                     React component for sending.
+ * @param  {Object}     options
+ *         {Function}   options.sendTransactionCallback   Function to be run after sendTransaction redux action.
+ *         {String}     options.defaultAsset              Symbol for default asset to send.
+ * @return {Component}                                    SendComponent connected to redux.
+ */
+export const withSendComponentWithData = (SendComponent, options) => {
+  class SendComponentWithData extends Component {
+    static propTypes = {
+      sendModalInit: PropTypes.func.isRequired,
+      sendUpdateGasPrice: PropTypes.func.isRequired,
+      sendTransaction: PropTypes.func.isRequired,
+      sendClearFields: PropTypes.func.isRequired,
+      sendUpdateRecipient: PropTypes.func.isRequired,
+      sendUpdateNativeAmount: PropTypes.func.isRequired,
+      sendUpdateAssetAmount: PropTypes.func.isRequired,
+      sendUpdateSelected: PropTypes.func.isRequired,
+      sendMaxBalance: PropTypes.func.isRequired,
+      sendToggleConfirmationView: PropTypes.func.isRequired,
+      notificationShow: PropTypes.func.isRequired,
+      fetching: PropTypes.bool.isRequired,
+      recipient: PropTypes.string.isRequired,
+      nativeAmount: PropTypes.string.isRequired,
+      assetAmount: PropTypes.string.isRequired,
+      isSufficientGas: PropTypes.func.isRequired,
+      isSufficientBalance: PropTypes.func.isRequired,
+      txHash: PropTypes.string.isRequired,
+      selected: PropTypes.object.isRequired,
+      gasPrice: PropTypes.object.isRequired,
+      gasPrices: PropTypes.object.isRequired,
+      gasLimit: PropTypes.number.isRequired,
+      gasPriceOption: PropTypes.string.isRequired,
+      confirm: PropTypes.bool.isRequired,
+      accountInfo: PropTypes.object.isRequired,
+      accountType: PropTypes.string.isRequired,
+      network: PropTypes.string.isRequired,
+      nativeCurrency: PropTypes.string.isRequired,
+      prices: PropTypes.object.isRequired,
+    };
+
+    constructor(props) {
+      super(props);
+
+      this.state = {
+        isValidAddress: false,
+        showQRCodeReader: false,
+      };
+
+      this.defaultAsset = options.defaultAsset || 'ETH';
+      this.gasFormat = options.gasFormat || 'long';
+      this.sendTransactionCallback =
+        options.sendTransactionCallback || function noop() {};
+    }
+
+    componentDidMount() {
+      this.props.sendModalInit({
+        defaultAsset: this.defaultAsset,
+        gasFormat: this.gasFormat,
+      });
+    }
+
+    componentDidUpdate(prevProps) {
+      const {
+        assetAmount,
+        recipient,
+        selected,
+        sendUpdateGasPrice,
+      } = this.props;
+
+      if (recipient.length >= 42) {
+        if (selected.symbol !== prevProps.selected.symbol) {
+          sendUpdateGasPrice();
+        } else if (recipient !== prevProps.recipient) {
+          sendUpdateGasPrice();
+        } else if (assetAmount !== prevProps.assetAmount) {
+          sendUpdateGasPrice();
+        }
+      }
+
+      if (recipient !== prevProps.recipient) {
+        this.setState({ isValidAddress: isValidAddress(recipient) });
+      }
+    }
+
+    onAddressInputFocus = () => {
+      const { recipient } = this.props;
+
+      this.setState({ isValidAddress: isValidAddress(recipient) });
+    };
+
+    onAddressInputBlur = () => {
+      const { recipient } = this.props;
+
+      this.setState({ isValidAddress: isValidAddress(recipient) });
+    };
+
+    onGoBack = () => this.props.sendToggleConfirmationView(false);
+
+    onSendMaxBalance = () => this.props.sendMaxBalance();
+
+    onSendAnother = () => {
+      this.props.sendToggleConfirmationView(false);
+      this.props.sendClearFields();
+      this.props.sendModalInit({ defaultAsset: this.defaultAsset });
+    };
+
+    onSubmit = event => {
+      if (event && typeof event.preventDefault === 'function') {
+        event.preventDefault();
+      }
+
+      if (!this.props.gasPrice.txFee) {
+        this.props.notificationShow(
+          lang.t('notification.error.generic_error'),
+          true,
+        );
+
+        return;
+      }
+
+      if (!this.props.confirm) {
+        if (!isValidAddress(this.props.recipient)) {
+          this.props.notificationShow(
+            lang.t('notification.error.invalid_address'),
+            true,
+          );
+
+          return;
+        } else if (this.props.selected.symbol === 'ETH') {
+          const { requestedAmount, balance, amountWithFees } = transactionData(
+            this.props.accountInfo,
+            this.props.assetAmount,
+            this.props.gasPrice,
+          );
+
+          if (greaterThan(requestedAmount, balance)) {
+            this.props.notificationShow(
+              lang.t('notification.error.insufficient_balance'),
+              true,
+            );
+
+            return;
+          } else if (greaterThan(amountWithFees, balance)) {
+            this.props.notificationShow(
+              lang.t('notification.error.insufficient_for_fees'),
+              true,
+            );
+
+            return;
+          }
+        } else {
+          const { requestedAmount, balance, txFee } = transactionData(
+            this.props.accountInfo,
+            this.props.assetAmount,
+            this.props.gasPrice,
+          );
+
+          const tokenBalanceAmount = get(this.props, 'selected.balance.amount');
+          const tokenBalance = convertAmountFromBigNumber(tokenBalanceAmount);
+
+          if (greaterThan(requestedAmount, tokenBalance)) {
+            this.props.notificationShow(
+              lang.t('notification.error.insufficient_balance'),
+              true,
+            );
+
+            return;
+          } else if (greaterThan(txFee, balance)) {
+            this.props.notificationShow(
+              lang.t('notification.error.insufficient_for_fees'),
+              true,
+            );
+
+            return;
+          }
+        }
+
+        this.props.sendToggleConfirmationView(true);
+
+        return this.props.sendTransaction(
+          {
+            address: this.props.accountInfo.address,
+            recipient: this.props.recipient,
+            amount: this.props.assetAmount,
+            asset: this.props.selected,
+            gasPrice: this.props.gasPrice,
+            gasLimit: this.props.gasLimit,
+          },
+          this.sendTransactionCallback,
+        );
+      }
+    };
+
+    updateGasPrice = gasPrice => {
+      this.props.sendUpdateGasPrice(gasPrice);
+    };
+
+    onClose = () => {
+      this.props.sendClearFields();
+      // TODO: close function ?? (previously was to hit modal reducer)
+    };
+
+    updateGasPrice = gasPrice => {
+      this.props.sendUpdateGasPrice(gasPrice);
+    };
+
+    // QR Code Reader Handlers
+    toggleQRCodeReader = () =>
+      this.setState({ showQRCodeReader: !this.state.showQRCodeReader });
+
+    onQRCodeValidate = rawData => {
+      const data = rawData.match(/0x\w{40}/g)
+        ? rawData.match(/0x\w{40}/g)[0]
+        : null;
+      const result = data ? isValidAddress(data) : false;
+      const onError = () =>
+        this.props.notificationShow(
+          lang.t('notification.error.invalid_address_scanned'),
+          true,
+        );
+
+      return { data, result, onError };
+    };
+
+    onQRCodeScan = data => {
+      this.props.sendUpdateRecipient(data);
+      this.setState({ showQRCodeReader: false });
+    };
+
+    onQRCodeError = () => {
+      this.props.notificationShow(
+        lang.t('notification.error.failed_scanning_qr_code'),
+        true,
+      );
+    };
+
+    render() {
+      return (
+        <SendComponent
+          isValidAddress={this.state.isValidAddress}
+          onSendMaxBalance={this.onSendMaxBalance}
+          onAddressInputFocus={this.onAddressInputFocus}
+          onAddressInputBlur={this.onAddressInputBlur}
+          onClose={this.onClose}
+          onQRCodeValidate={this.onQRCodeValidate}
+          onQRCodeScan={this.onQRCodeScan}
+          onQRCodeError={this.onQRCodeError}
+          onSubmit={this.onSubmit}
+          showQRCodeReader={this.state.showQRCodeReader}
+          toggleQRCodeReader={this.toggleQRCodeReader}
+          updateGasPrice={this.updateGasPrice}
+          {...this.props}
+        />
+      );
+    }
+  }
+
+  return connect(
+    reduxProps,
+    {
+      sendModalInit,
+      sendUpdateGasPrice,
+      sendTransaction,
+      sendClearFields,
+      sendUpdateRecipient,
+      sendUpdateNativeAmount,
+      sendUpdateAssetAmount,
+      sendUpdateSelected,
+      sendMaxBalance,
+      sendToggleConfirmationView,
+      notificationShow,
+    },
+  )(SendComponentWithData);
+};

src/components/SubscribeForm.js

@@ -3,7 +3,8 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import jsonp from 'jsonp';
 import Button from './Button';
-import { isValidEmail, lang } from 'balance-common';
+import { isValidEmail } from '../helpers/validators';
+import lang from '../languages';
 import { fonts, colors, transitions } from '../styles';
 
 const SForm = styled.form`

src/components/TabMenu.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { lang } from 'balance-common';
+import lang from '../languages';
 import i18next from 'i18next';
 import Link from './Link';
 import Button from './Button';