diff options
author | Fabio Berger <me@fabioberger.com> | 2018-01-25 23:42:58 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2018-01-25 23:42:58 +0800 |
commit | 71d68f975cd7bc089f0cbef4e5888a73eab4ee42 (patch) | |
tree | 9482602fc23d2baec3fff1fb97750ad45adc6eca /packages/website/ts/components/inputs/token_amount_input.tsx | |
parent | ec3d8a034fe763d8255935985b1fb97aff6c177b (diff) | |
parent | f58f0ddb67555c3f0c7252ea3e003824984c48ad (diff) | |
download | dexon-sol-tools-71d68f975cd7bc089f0cbef4e5888a73eab4ee42.tar dexon-sol-tools-71d68f975cd7bc089f0cbef4e5888a73eab4ee42.tar.gz dexon-sol-tools-71d68f975cd7bc089f0cbef4e5888a73eab4ee42.tar.bz2 dexon-sol-tools-71d68f975cd7bc089f0cbef4e5888a73eab4ee42.tar.lz dexon-sol-tools-71d68f975cd7bc089f0cbef4e5888a73eab4ee42.tar.xz dexon-sol-tools-71d68f975cd7bc089f0cbef4e5888a73eab4ee42.tar.zst dexon-sol-tools-71d68f975cd7bc089f0cbef4e5888a73eab4ee42.zip |
Merge branch 'development' into feature/portal-ledger-support
* development: (437 commits)
Publish
Update yarn.lock
Update the CHANGELOG
Fix the bug making it impossible to specify the custom ZRX address
Fix fill/cancel order by looking for NoError instead of empty blockchainErr given the BlockchainErrs type refactor
Add a comment about a yarn bug
Add our mainnet and kovan nodes as backups for Portal requests
Fix bug hiding the user info from topBar
Add dev-utils package to top level README
Prettier newline
Prettier
Allow Token symbols to be alphanumeric
Update CHANGELOG, rebase on development
Should not -> cannot
Reject negative amounts in isValidBaseUnitAmount
Re-add changelog for 0x.js
Fix prettier
Update yarn.lock
Move tests to a separate folder
Change file layout
...
# Conflicts:
# packages/website/README.md
Diffstat (limited to 'packages/website/ts/components/inputs/token_amount_input.tsx')
-rw-r--r-- | packages/website/ts/components/inputs/token_amount_input.tsx | 43 |
1 files changed, 22 insertions, 21 deletions
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx index f39341a4f..63966d759 100644 --- a/packages/website/ts/components/inputs/token_amount_input.tsx +++ b/packages/website/ts/components/inputs/token_amount_input.tsx @@ -1,16 +1,16 @@ -import {ZeroEx} from '0x.js'; -import BigNumber from 'bignumber.js'; +import { ZeroEx } from '0x.js'; +import { BigNumber } from '@0xproject/utils'; import * as _ from 'lodash'; -import {colors} from 'material-ui/styles'; import * as React from 'react'; -import {Link} from 'react-router-dom'; -import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input'; -import {InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types'; +import { Link } from 'react-router-dom'; +import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input'; +import { InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types'; +import { colors } from 'ts/utils/colors'; interface TokenAmountInputProps { - label: string; token: Token; tokenState: TokenState; + label?: string; amount?: BigNumber; shouldShowIncompleteErrs: boolean; shouldCheckBalance: boolean; @@ -19,51 +19,52 @@ interface TokenAmountInputProps { onVisitBalancesPageClick?: () => void; } -interface TokenAmountInputState {} +interface TokenAmountInputState {} export class TokenAmountInput extends React.Component<TokenAmountInputProps, TokenAmountInputState> { public render() { - const amount = this.props.amount ? - ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals) : - undefined; + const amount = this.props.amount + ? ZeroEx.toUnitAmount(this.props.amount, this.props.token.decimals) + : undefined; + const hasLabel = !_.isUndefined(this.props.label); return ( - <div className="flex overflow-hidden" style={{height: 84}}> + <div className="flex overflow-hidden" style={{ height: hasLabel ? 84 : 62 }}> <BalanceBoundedInput label={this.props.label} amount={amount} balance={ZeroEx.toUnitAmount(this.props.tokenState.balance, this.props.token.decimals)} - onChange={this.onChange.bind(this)} - validate={this.validate.bind(this)} + onChange={this._onChange.bind(this)} + validate={this._validate.bind(this)} shouldCheckBalance={this.props.shouldCheckBalance} shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs} onVisitBalancesPageClick={this.props.onVisitBalancesPageClick} /> - <div style={{paddingTop: 39}}> - {this.props.token.symbol} - </div> + <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div> </div> ); } - private onChange(isValid: boolean, amount?: BigNumber) { + private _onChange(isValid: boolean, amount?: BigNumber) { let baseUnitAmount; if (!_.isUndefined(amount)) { baseUnitAmount = ZeroEx.toBaseUnitAmount(amount, this.props.token.decimals); } this.props.onChange(isValid, baseUnitAmount); } - private validate(amount: BigNumber): InputErrMsg { + private _validate(amount: BigNumber): InputErrMsg { if (this.props.shouldCheckAllowance && amount.gt(this.props.tokenState.allowance)) { return ( <span> Insufficient allowance.{' '} <Link to={`${WebsitePaths.Portal}/balances`} - style={{cursor: 'pointer', color: colors.grey900}} + style={{ cursor: 'pointer', color: colors.darkestGrey }} > - Set allowance + Set allowance </Link> </span> ); + } else { + return undefined; } } } |