diff --git a/common/components/BalanceSidebar/TokenBalances.jsx b/common/components/BalanceSidebar/TokenBalances.jsx index 47943c55..0b6e1026 100644 --- a/common/components/BalanceSidebar/TokenBalances.jsx +++ b/common/components/BalanceSidebar/TokenBalances.jsx @@ -23,9 +23,7 @@ export default class TokenBalances extends React.Component { const { tokens } = this.props; return (
-
- {translate('sidebar_TokenBal')} -
+
{translate('sidebar_TokenBal')}
{tokens @@ -42,8 +40,8 @@ export default class TokenBalances extends React.Component {
- {!this.state.showAllTokens ? 'Show All Tokens' : 'Hide Tokens'}{' '} - + {!this.state.showAllTokens ? 'Show All Tokens' : 'Hide Tokens'} + {' '} {translate('SEND_custom')} diff --git a/common/containers/Tabs/SendTransaction/components/AmountField.jsx b/common/containers/Tabs/SendTransaction/components/AmountField.jsx index b6091432..0f372b15 100644 --- a/common/containers/Tabs/SendTransaction/components/AmountField.jsx +++ b/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 (
- +
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 { />
diff --git a/common/containers/Tabs/SendTransaction/components/UnitDropdown.jsx b/common/containers/Tabs/SendTransaction/components/UnitDropdown.jsx index 0f20632a..bbdd0cc8 100644 --- a/common/containers/Tabs/SendTransaction/components/UnitDropdown.jsx +++ b/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 ( +
  • + + {value} + +
  • + ); + } + + 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} > - {value} + {value} + {this.state.expanded && !isReadonly && }
    @@ -53,4 +69,11 @@ export default class UnitDropdown extends React.Component { }; }); }; + + onChange = (value: string) => { + this.setState({ + expanded: false + }); + this.props.onChange(value); + }; } diff --git a/common/containers/Tabs/SendTransaction/index.jsx b/common/containers/Tabs/SendTransaction/index.jsx index f23ad108..da156054 100644 --- a/common/containers/Tabs/SendTransaction/index.jsx +++ b/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 { !token.balance.eq(0)) + .map(token => token.symbol) + .sort()} onChange={readOnly ? void 0 : this.onAmountChange} /> @@ -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) }; }