Refactor CurrencyInputPanel

src/components/CurrencyInputPanel/index.js

@@ -3,10 +3,7 @@ import { drizzleConnect } from 'drizzle-react'
 import PropTypes from 'prop-types';
 import { CSSTransitionGroup } from "react-transition-group";
 import classnames from 'classnames';
-import {BigNumber as BN} from 'bignumber.js';
 import Fuse from '../../helpers/fuse';
-import { updateField } from '../../ducks/swap';
-import { INSUFFICIENT_BALANCE } from '../../constants/currencyInputErrorTypes';
 import Modal from '../Modal';
 import TokenLogo from '../TokenLogo';
 import SearchIcon from '../../assets/images/magnifying-glass.svg';
@@ -35,29 +32,24 @@ class CurrencyInputPanel extends Component {
   static propTypes = {
     title: PropTypes.string,
     description: PropTypes.string,
+    extraText: PropTypes.string,
     value: PropTypes.string,
-    initialized: PropTypes.bool,
     onCurrencySelected: PropTypes.func,
     onValueChange: PropTypes.func,
+    tokenAddresses: PropTypes.shape({
+      address: PropTypes.array.isRequired,
+    }).isRequired,
     exchangeAddresses: PropTypes.shape({
       fromToken: PropTypes.object.isRequired,
     }).isRequired,
-    errors: PropTypes.arrayOf(PropTypes.string),
-    addError: PropTypes.func,
-    removeError: PropTypes.func,
-    showSubButton: PropTypes.bool,
-    subButtonContent: PropTypes.node,
-    onSubButtonClick: PropTypes.func,
-    shouldValidateBalance: PropTypes.bool,
+    selectedTokens: PropTypes.array.isRequired,
+    errorMessage: PropTypes.string,
   };
 
   static defaultProps = {
+    selectedTokens: [],
     onCurrencySelected() {},
-    onSubButtonClick() {},
     onValueChange() {},
-    addError() {},
-    removeError() {},
-    errors: [],
   };
 
   static contextTypes = {
@@ -70,67 +62,6 @@ class CurrencyInputPanel extends Component {
     selectedTokenAddress: '',
   };
 
-  getTokenData(address) {
-    const {
-      initialized,
-      contracts,
-      account,
-    } = this.props;
-    const { drizzle } = this.context;
-    const { web3 } = drizzle;
-
-    if (!initialized || !web3) {
-      return;
-    }
-
-    const balanceKey = drizzle.contracts[address].methods.balanceOf.cacheCall(account);
-    const decimalsKey = drizzle.contracts[address].methods.decimals.cacheCall();
-    const token = contracts[address];
-
-    const balance = token.balanceOf[balanceKey];
-    const decimals = token.decimals[decimalsKey];
-
-    if (!balance || !decimals) {
-      return;
-    }
-
-
-    return {
-      balance: balance.value,
-      decimals: decimals.value,
-    };
-  }
-
-  getBalance() {
-    const {
-      balance,
-      initialized,
-    } = this.props;
-    const { selectedTokenAddress } = this.state;
-    const { drizzle } = this.context;
-    const { web3 } = drizzle;
-
-    if (!selectedTokenAddress || !initialized || !web3 || !balance) {
-      return null;
-    }
-
-    if (selectedTokenAddress === 'ETH') {
-      return BN(web3.utils.fromWei(balance, 'ether')).toFixed(2);
-    }
-
-    const tokenData = this.getTokenData(selectedTokenAddress);
-
-    if (!tokenData) {
-      return null;
-    }
-
-    const tokenBalance = BN(tokenData.balance);
-    const denomination = Math.pow(10, tokenData.decimals);
-    const adjustedBalance = tokenBalance.dividedBy(denomination);
-
-    return adjustedBalance.toFixed(2);
-  }
-
   createTokenList = () => {
     let tokens = this.props.tokenAddresses.addresses;
     let tokenList = [ { value: 'ETH', label: 'ETH', address: 'ETH' } ];
@@ -147,20 +78,6 @@ class CurrencyInputPanel extends Component {
     return tokenList;
   };
 
-  validate = (balance) => {
-    const { value, addError, removeError, errors, shouldValidateBalance } = this.props;
-    const hasInsufficientBalance = errors.indexOf(INSUFFICIENT_BALANCE) > -1;
-    const balanceIsLess = BN(value).isGreaterThan(BN(balance));
-
-    if (shouldValidateBalance) {
-      if (balanceIsLess && !hasInsufficientBalance) {
-        addError(INSUFFICIENT_BALANCE);
-      } else if (!balanceIsLess && hasInsufficientBalance) {
-        removeError(INSUFFICIENT_BALANCE);
-      }
-    }
-  };
-
   onTokenSelect = (address) => {
     this.setState({
       selectedTokenAddress: address || 'ETH',
@@ -177,7 +94,6 @@ class CurrencyInputPanel extends Component {
 
       // Add Token Contract
       if (!this.props.contracts[address]) {
-        // console.log(`Adding Token Contract - ${address}`);
         const tokenConfig = {
           contractName: address,
           web3Contract: new web3.eth.Contract(ERC20_ABI, address),
@@ -193,7 +109,6 @@ class CurrencyInputPanel extends Component {
       }
 
       if (!this.props.contracts[exchangeAddress]) {
-        // console.log(`Adding Exchange Contract - ${exchangeAddress}`);
         const exchangeConfig = {
           contractName: exchangeAddress,
           web3Contract: new web3.eth.Contract(EXCHANGE_ABI, exchangeAddress),
@@ -204,14 +119,6 @@ class CurrencyInputPanel extends Component {
     }
   };
 
-  renderBalance(balance) {
-    if (balance === null) {
-      return null;
-    }
-
-    return `Balance: ${balance}`;
-  }
-
   renderTokenList() {
     const tokens = this.createTokenList();
     const { searchQuery } = this.state;
@@ -284,61 +191,45 @@ class CurrencyInputPanel extends Component {
     const {
       title,
       description,
-      errors,
-      showSubButton,
-      subButtonContent,
-      onSubButtonClick,
+      extraText,
+      errorMessage,
+      value,
+      onValueChange,
     } = this.props;
 
     const { selectedTokenAddress } = this.state;
-    const balance = this.getBalance();
-    this.validate(balance);
-    const hasInsufficientBalance = errors.indexOf(INSUFFICIENT_BALANCE) > -1;
 
     return (
       <div className="currency-input-panel">
-        <div className={
-          classnames('currency-input-panel__container',
-            { 'currency-input-panel__container--error': hasInsufficientBalance }
-          )
-        }>
+        <div className={classnames('currency-input-panel__container', {
+          'currency-input-panel__container--error': errorMessage,
+        })}>
           <div className="currency-input-panel__label-row">
             <div className="currency-input-panel__label-container">
               <span className="currency-input-panel__label">{title}</span>
               <span className="currency-input-panel__label-description">{description}</span>
             </div>
-            <span className={
-              classnames('currency-input-panel__extra-text',
-                { 'currency-input-panel__extra-text--error': hasInsufficientBalance }
-              )
-            }>
-              {this.renderBalance(balance)}
+            <span className={classnames('currency-input-panel__extra-text', {
+              'currency-input-panel__extra-text--error': errorMessage,
+            })}>
+              {extraText}
             </span>
           </div>
           <div className="currency-input-panel__input-row">
             <input
               type="number"
-              className={
-                classnames('currency-input-panel__input',
-                  { 'currency-input-panel__input--error': hasInsufficientBalance }
-                )
-              }
+              className={classnames('currency-input-panel__input',{
+                'currency-input-panel__input--error': errorMessage,
+              })}
               placeholder="0.0"
-              onChange={e => this.props.onValueChange(e.target.value)}
-              value={this.props.value}
+              onChange={e => onValueChange(e.target.value)}
+              value={value}
             />
-            {
-              showSubButton
-              ? (
-                <button
-                  onClick={onSubButtonClick}
-                  className={classnames("currency-input-panel__sub-currency-select")}
-                >
-                  { subButtonContent }
-                </button>
-              )
-              : null
-            }
+            {/*<button*/}
+              {/*className='currency-input-panel__sub-currency-select'*/}
+            {/*>*/}
+              {/*Unlock*/}
+            {/*</button>*/}
             <button
               className={classnames("currency-input-panel__currency-select", {
                 'currency-input-panel__currency-select--selected': selectedTokenAddress,
@@ -355,7 +246,7 @@ class CurrencyInputPanel extends Component {
                   )
                   : null
               }
-              { TOKEN_ADDRESS_TO_LABEL[selectedTokenAddress]|| 'Select a token' }
+              { TOKEN_ADDRESS_TO_LABEL[selectedTokenAddress] || 'Select a token' }
               <span className="currency-input-panel__dropdown-icon" />
             </button>
           </div>
@@ -368,23 +259,9 @@ class CurrencyInputPanel extends Component {
 
 export default drizzleConnect(
   CurrencyInputPanel,
-  state => {
-    const {
-      drizzleStatus: { initialized },
-      accounts,
-      accountBalances,
-    } = state;
-
-    return {
-      tokenAddresses: state.addresses.tokenAddresses,
-      exchangeAddresses: state.addresses.exchangeAddresses,
-      initialized,
-      balance: accountBalances[accounts[0]] || null,
-      account: accounts[0],
-      contracts: state.contracts,
-    };
-  },
-  dispatch => ({
-    updateField: (name, value) => dispatch(updateField({ name, value })),
+  state => ({
+    exchangeAddresses: state.addresses.exchangeAddresses,
+    tokenAddresses: state.addresses.tokenAddresses,
+    contracts: state.contracts,
   }),
 );

src/helpers/approval-utils.js

@@ -49,11 +49,10 @@ export const approveExchange = async opts => {
 
   const decimals = await getDecimals({ address: currency, drizzleCtx, contractStore });
   const approvals = BN(10 ** decimals).multipliedBy(BN(10 ** 8)).toFixed(0);
-  return drizzleCtx.contracts[currency].methods.approve.cacheSend(
-    inputExchange,
-    web3.utils.toHex(approvals),
-    { from: account }
-  );
+  return drizzleCtx.contracts[currency].methods
+    .approve(inputExchange, web3.utils.toHex(approvals))
+    .send({ from: account })
+    // .then((e, d) => console.log(e, d));
 };
 
 export const getApprovalTxStatus = opts => {

src/pages/Pool/AddLiquidity.js

+import React, { Component } from 'react';
+import { drizzleConnect } from 'drizzle-react';
+import PropTypes from 'prop-types';
+import classnames from "classnames";
+import CurrencyInputPanel from '../../components/CurrencyInputPanel';
+import OversizedPanel from '../../components/OversizedPanel';
+import ArrowDown from '../../assets/images/arrow-down-blue.svg';
+import ModeSelector from './ModeSelector';
+import "./pool.scss";
+
+class AddLiquidity extends Component {
+  static propTypes = {
+    currentAddress: PropTypes.string,
+    isConnected: PropTypes.bool.isRequired,
+  };
+
+  render() {
+    return (
+      <div
+        className={classnames('swap__content', {
+          'swap--inactive': !this.props.isConnected,
+        })}
+      >
+        <ModeSelector />
+        <CurrencyInputPanel
+          title="Deposit"
+          extraText="Balance: 0.03141"
+        />
+        <OversizedPanel>
+          <div className="swap__down-arrow-background">
+            <img className="swap__down-arrow" src={ArrowDown} />
+          </div>
+        </OversizedPanel>
+        <CurrencyInputPanel
+          title="Deposit"
+          description="(estimated)"
+          extraText="Balance: 0.0"
+        />
+        <OversizedPanel hideBottom>
+          <div className="pool__summary-panel">
+            <div className="pool__exchange-rate-wrapper">
+              <span className="pool__exchange-rate">Exchange Rate</span>
+              <span>1 ETH = 1283.878 BAT</span>
+            </div>
+            <div className="pool__exchange-rate-wrapper">
+              <span className="swap__exchange-rate">Current Pool Size</span>
+              <span>321 ETH / 321,000 BAT</span>
+            </div>
+          </div>
+        </OversizedPanel>
+        <div className="swap__summary-wrapper">
+          <div>You are adding between {b`212000.00 - 216000.00 BAT`} + {b`166.683543 ETH`} into the liquidity pool.</div>
+          <div className="pool__last-summary-text">You will receive between {b`66%`} and {b`67%`} of the BAT/ETH pool tokens.</div>
+        </div>
+        <div className="pool__cta-container">
+          <button
+            className={classnames('pool__cta-btn', {
+              'swap--inactive': !this.props.isConnected,
+              'pool__cta-btn--inactive': !this.props.isValid,
+            })}
+            disabled={!this.props.isValid}
+            onClick={this.onSwap}
+          >
+            Swap
+          </button>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default drizzleConnect(
+  AddLiquidity,
+  (state, ownProps) => ({
+    currentAddress: state.accounts[0],
+    isConnected: !!(state.drizzleStatus.initialized && state.accounts[0]),
+  }),
+)
+
+function b(text) {
+  return <span className="swap__highlight-text">{text}</span>
+}

src/pages/Pool/ModeSelector.js

+import React, { Component } from 'react';
+import { drizzleConnect } from 'drizzle-react';
+import OversizedPanel from "../../components/OversizedPanel";
+import Dropdown from "../../assets/images/dropdown.svg";
+import Modal from "../../components/Modal";
+import {CSSTransitionGroup} from "react-transition-group";
+
+class ModeSelector extends Component {
+  state = {
+    isShowingModal: false,
+  };
+
+  renderModal() {
+    if (!this.state.isShowingModal) {
+      return;
+    }
+
+    return (
+      <Modal onClose={() => this.setState({ isShowingModal: false })}>
+        <CSSTransitionGroup
+          transitionName="pool-modal"
+          transitionAppear={true}
+          transitionLeave={true}
+          transitionAppearTimeout={200}
+          transitionLeaveTimeout={200}
+          transitionEnterTimeout={200}
+        >
+          <div className="pool-modal">
+            <div
+              className="pool-modal__item"
+              onClick={() => this.setState({ isShowingModal: false })}
+            >
+              Add Liquidity
+            </div>
+            <div
+              className="pool-modal__item"
+              onClick={() => this.setState({ isShowingModal: false })}
+            >
+              Remove Liquidity
+            </div>
+          </div>
+        </CSSTransitionGroup>
+      </Modal>
+    );
+  }
+
+  render() {
+    return (
+      <OversizedPanel hideTop>
+        <div
+          className="pool__liquidity-container"
+          onClick={() => this.setState({ isShowingModal: true })}
+        >
+          <span className="pool__liquidity-label">Add Liquidity</span>
+          <img src={Dropdown} />
+        </div>
+        {this.renderModal()}
+      </OversizedPanel>
+    )
+  }
+}
+
+export default drizzleConnect(ModeSelector);

src/pages/Pool/index.js

 import React, { Component } from 'react';
-import { drizzleConnect } from 'drizzle-react';
-import { withRouter } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import classnames from "classnames";
+import { withRouter } from 'react-router-dom';
+import { drizzleConnect } from 'drizzle-react';
 import Header from '../../components/Header';
-import CurrencyInputPanel from '../../components/CurrencyInputPanel';
-import OversizedPanel from '../../components/OversizedPanel';
-import ArrowDown from '../../assets/images/arrow-down-blue.svg';
-import Dropdown from '../../assets/images/dropdown.svg';
-
+import AddLiquidity from './AddLiquidity';
 import "./pool.scss";
 
-function b(text) {
-  return <span className="swap__highlight-text">{text}</span>
-}
+const ADD_LIQUIDITY = 'Add Liquidity';
+const REMOVE_LIQUIDITY = 'Remove Liquidity';
 
 class Pool extends Component {
   static propTypes = {
@@ -24,59 +18,23 @@ class Pool extends Component {
     isConnected: PropTypes.bool.isRequired,
   };
 
+  state = {
+    selectedMode: ADD_LIQUIDITY,
+  };
+
+  renderContent() {
+    switch (this.state.selectedMode) {
+      case ADD_LIQUIDITY:
+      default:
+        return <AddLiquidity />
+    }
+  }
+
   render() {
     return (
       <div className="pool">
         <Header />
-        <div
-          className={classnames('swap__content', {
-            'swap--inactive': !this.props.isConnected,
-          })}
-        >
-          <OversizedPanel hideTop>
-            <div className="pool__liquidity-container">
-              <span className="pool__liquidity-label">Add Liquidity</span>
-              <img src={Dropdown} />
-            </div>
-          </OversizedPanel>
-          <CurrencyInputPanel
-            title="Input"
-            extraText="Balance: 0.03141"
-          />
-          <OversizedPanel>
-            <div className="swap__down-arrow-background">
-              <img className="swap__down-arrow" src={ArrowDown} />
-            </div>
-          </OversizedPanel>
-          <CurrencyInputPanel
-            title="Output"
-            description="(estimated)"
-            extraText="Balance: 0.0"
-          />
-          <OversizedPanel hideBottom>
-            <div className="pool__summary-panel">
-              <div className="pool__exchange-rate-wrapper">
-                <span className="pool__exchange-rate">Exchange Rate</span>
-                <span>1 ETH = 1283.878 BAT</span>
-              </div>
-              <div className="pool__exchange-rate-wrapper">
-                <span className="swap__exchange-rate">Current Pool Size</span>
-                <span>321 ETH / 321,000 BAT</span>
-              </div>
-            </div>
-          </OversizedPanel>
-          <div className="swap__summary-wrapper">
-            <div>You are adding between {b`212000.00 - 216000.00 BAT`} + {b`166.683543 ETH`} into the liquidity pool.</div>
-            <div className="pool__last-summary-text">You will receive between {b`66%`} and {b`67%`} of the BAT/ETH pool tokens.</div>
-          </div>
-        </div>
-        <button
-          className={classnames('swap__cta-btn', {
-            'swap--inactive': !this.props.isConnected,
-          })}
-        >
-          Add Liquidity
-        </button>
+        { this.renderContent() }
       </div>
     );
   }

src/pages/Pool/pool.scss

@@ -8,8 +8,10 @@
   &__liquidity-container {
     @extend %row-nowrap;
     align-items: center;
-    padding: 1rem;
     font-size: .75rem;
+    padding: .625rem 1rem;
+    font-size: .75rem;
+    color: $dove-gray;
 
     img {
       height: .75rem;
@@ -43,4 +45,55 @@
     width: 0;
     color: $chalice-gray;
   }
+
+  &__cta-container {
+    display: flex;
+  }
+
+  &__cta-btn {
+    @extend %primary-button;
+    margin: 2rem auto 0;
+
+    &--inactive {
+      background: $mercury-gray;
+    }
+  }
+}
+
+.pool-modal {
+  background-color: $white;
+  position: relative;
+  bottom: 7.875rem;
+  width: 100%;
+  height: 7.875rem;
+  z-index: 2000;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  transition: 250ms ease-in-out;
+  padding: 1rem 0 .5rem;
+
+  &__item {
+    padding: 1rem;
+    font-size: 1rem;
+
+    &:hover {
+      background-color: $concrete-gray;
+
+      .token-modal__token-label {
+        color: $black;
+      }
+    }
+
+    &:active {
+      background-color: darken($concrete-gray, 1);
+    }
+  }
+}
+
+.pool-modal-appear {
+  bottom: 0;
+}
+
+.pool-modal-appear.modal-container-appear-active {
+  bottom: 0;
 }