support tokens on send page (#47)

common/components/BalanceSidebar/TokenBalances.jsx

@@ -23,9 +23,7 @@ export default class TokenBalances extends React.Component {
     const { tokens } = this.props;
     return (
       <section className="token-balances">
-        <h5>
-          {translate('sidebar_TokenBal')}
-        </h5>
+        <h5>{translate('sidebar_TokenBal')}</h5>
         <table className="account-info">
           <tbody>
             {tokens
@@ -42,8 +40,8 @@ export default class TokenBalances extends React.Component {
           </tbody>
         </table>
         <a className="btn btn-default btn-sm" onClick={this.toggleShowAllTokens}>
-          {!this.state.showAllTokens ? 'Show All Tokens' : 'Hide Tokens'}{' '}
-        </a>
+          {!this.state.showAllTokens ? 'Show All Tokens' : 'Hide Tokens'}
+        </a>{' '}
         <a className="btn btn-default btn-sm" onClick={this.toggleShowCustomTokenForm}>
           <span>
             {translate('SEND_custom')}

common/containers/Tabs/SendTransaction/components/AmountField.jsx

@@ -6,6 +6,7 @@ import UnitDropdown from './UnitDropdown';
 type Props = {
   value: string,
   unit: string,
+  tokens: string[],
   onChange?: (value: string, unit: string) => void
 };
 
@@ -17,11 +18,12 @@ export default class AmountField extends React.Component {
     const isReadonly = !onChange;
     return (
       <div>
-        <label>{translate('SEND_amount')}</label>
+        <label>
+          {translate('SEND_amount')}
+        </label>
         <div className="input-group col-sm-11">
           <input
-            className={`form-control ${isFinite(Number(value)) &&
-              Number(value) > 0
+            className={`form-control ${isFinite(Number(value)) && Number(value) > 0
               ? 'is-valid'
               : 'is-invalid'}`}
             type="text"
@@ -32,7 +34,7 @@ export default class AmountField extends React.Component {
           />
           <UnitDropdown
             value={unit}
-            options={['ether']}
+            options={['ether'].concat(this.props.tokens)}
             onChange={isReadonly ? void 0 : this.onUnitChange}
           />
         </div>

common/containers/Tabs/SendTransaction/components/UnitDropdown.jsx

@@ -1,6 +1,28 @@
 // @flow
 import React from 'react';
 
+class Option extends React.Component {
+  props: {
+    value: string,
+    active: boolean,
+    onChange: (value: string) => void
+  };
+  render() {
+    const { value, active } = this.props;
+    return (
+      <li>
+        <a className={active ? 'active' : ''} onClick={this.onChange}>
+          {value}
+        </a>
+      </li>
+    );
+  }
+
+  onChange = () => {
+    this.props.onChange(this.props.value);
+  };
+}
+
 export default class UnitDropdown extends React.Component {
   props: {
     value: string,
@@ -25,21 +47,15 @@ export default class UnitDropdown extends React.Component {
           onClick={this.onToggleExpand}
         >
           <strong>
-            {value}<i className="caret" />
+            {value}
+            <i className="caret" />
           </strong>
         </a>
         {this.state.expanded &&
           !isReadonly &&
           <ul className="dropdown-menu dropdown-menu-right">
             {options.map(o =>
-              <li>
-                <a
-                  className={value === o ? 'active' : ''}
-                  onClick={this.props.onChange}
-                >
-                  {o}
-                </a>
-              </li>
+              <Option key={o} active={value === o} value={o} onChange={this.onChange} />
             )}
           </ul>}
       </div>
@@ -53,4 +69,11 @@ export default class UnitDropdown extends React.Component {
       };
     });
   };
+
+  onChange = (value: string) => {
+    this.setState({
+      expanded: false
+    });
+    this.props.onChange(value);
+  };
 }

common/containers/Tabs/SendTransaction/index.jsx

@@ -21,6 +21,8 @@ import BaseWallet from 'libs/wallet/base';
 import customMessages from './messages';
 import { donationAddressMap } from 'config/data';
 import Big from 'big.js';
+import type { TokenBalance } from 'selectors/wallet';
+import { getTokenBalances } from 'selectors/wallet';
 
 type State = {
   hasQueryString: boolean,
@@ -46,22 +48,25 @@ function getParam(query: { [string]: string }, key: string) {
 // TODO query string
 // TODO how to handle DATA?
 
+type Props = {
+  location: {
+    query: {
+      [string]: string
+    }
+  },
+  wallet: BaseWallet,
+  balance: Big,
+  tokenBalances: TokenBalance[]
+};
+
 export class SendTransaction extends React.Component {
-  props: {
-    location: {
-      query: {
-        [string]: string
-      }
-    },
-    wallet: BaseWallet,
-    balance: Big
-  };
+  props: Props;
   state: State = {
     hasQueryString: false,
     readOnly: false,
     // FIXME use correct defaults
     to: '',
-    value: '999.11',
+    value: '',
     unit: 'ether',
     gasLimit: '21000',
     data: '',
@@ -136,6 +141,10 @@ export class SendTransaction extends React.Component {
                   <AmountField
                     value={value}
                     unit={unit}
+                    tokens={this.props.tokenBalances
+                      .filter(token => !token.balance.eq(0))
+                      .map(token => token.symbol)
+                      .sort()}
                     onChange={readOnly ? void 0 : this.onAmountChange}
                   />
                   <GasField value={gasLimit} onChange={readOnly ? void 0 : this.onGasChange} />
@@ -251,9 +260,16 @@ export class SendTransaction extends React.Component {
   };
 
   onAmountChange = (value: string, unit: string) => {
-    // TODO: tokens
+    // TODO sub gas for eth
     if (value === 'everything') {
-      value = this.props.balance.toString();
+      if (unit === 'ether') {
+        value = this.props.balance.toString();
+      }
+      const token = this.props.tokenBalances.find(token => token.symbol === unit);
+      if (!token) {
+        return;
+      }
+      value = token.balance.toString();
     }
     this.setState({
       value,
@@ -265,7 +281,8 @@ export class SendTransaction extends React.Component {
 function mapStateToProps(state: AppState) {
   return {
     wallet: state.wallet.inst,
-    balance: state.wallet.balance
+    balance: state.wallet.balance,
+    tokenBalances: getTokenBalances(state)
   };
 }