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

9 files changed, 159 insertions, 191 deletions

diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index 8b03b8d12..dd4131140 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,10 +1,9 @@
-import {isAddress} from 'ethereum-address';
+import { addressUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {RequiredLabel} from 'ts/components/ui/required_label';
+import { RequiredLabel } from 'ts/components/ui/required_label';
+import { colors } from 'ts/utils/colors';
 
 interface AddressInputProps {
     disabled?: boolean;
@@ -31,16 +30,14 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu
         };
     }
     public componentWillReceiveProps(nextProps: AddressInputProps) {
-        if (nextProps.shouldShowIncompleteErrs && this.props.isRequired &&
-            this.state.address === '') {
-                this.setState({
-                    errMsg: 'Address is required',
-                });
+        if (nextProps.shouldShowIncompleteErrs && this.props.isRequired && this.state.address === '') {
+            this.setState({
+                errMsg: 'Address is required',
+            });
         }
     }
     public render() {
-        const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> :
-                      this.props.label;
+        const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label;
         const labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block';
         const hintText = this.props.hintText ? this.props.hintText : '';
         return (
@@ -51,18 +48,18 @@ export class AddressInput extends React.Component<AddressInputProps, AddressInpu
                     fullWidth={true}
                     hintText={hintText}
                     floatingLabelFixed={true}
-                    floatingLabelStyle={{color: colors.grey500, display: labelDisplay}}
+                    floatingLabelStyle={{ color: colors.grey, display: labelDisplay }}
                     floatingLabelText={label}
                     errorText={this.state.errMsg}
                     value={this.state.address}
-                    onChange={this.onOrderTakerAddressUpdated.bind(this)}
+                    onChange={this._onOrderTakerAddressUpdated.bind(this)}
                 />
             </div>
         );
     }
-    private onOrderTakerAddressUpdated(e: any) {
+    private _onOrderTakerAddressUpdated(e: any) {
         const address = e.target.value.toLowerCase();
-        const isValidAddress = isAddress(address) || address === '';
+        const isValidAddress = addressUtils.isAddress(address) || address === '';
         const errMsg = isValidAddress ? '' : 'Invalid ethereum address';
         this.setState({
             address,
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index 4c15ed4a0..da46db4f4 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -1,12 +1,12 @@
-import BigNumber from 'bignumber.js';
+import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Toggle from 'material-ui/Toggle';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {BalanceErrs, Token, TokenState} from 'ts/types';
-import {errorReporter} from 'ts/utils/error_reporter';
-import {utils} from 'ts/utils/utils';
+import { Blockchain } from 'ts/blockchain';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { BalanceErrs, Token, TokenState } from 'ts/types';
+import { errorReporter } from 'ts/utils/error_reporter';
+import { utils } from 'ts/utils/utils';
 
 const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
 
@@ -46,22 +46,21 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
                 <div>
                     <Toggle
                         disabled={this.state.isSpinnerVisible}
-                        toggled={this.isAllowanceSet()}
-                        onToggle={this.onToggleAllowanceAsync.bind(this, this.props.token)}
+                        toggled={this._isAllowanceSet()}
+                        onToggle={this._onToggleAllowanceAsync.bind(this)}
                     />
                 </div>
-                {this.state.isSpinnerVisible &&
-                    <div className="pl1" style={{paddingTop: 3}}>
+                {this.state.isSpinnerVisible && (
+                    <div className="pl1" style={{ paddingTop: 3 }}>
                         <i className="zmdi zmdi-spinner zmdi-hc-spin" />
                     </div>
-                }
+                )}
             </div>
         );
     }
-    private async onToggleAllowanceAsync() {
+    private async _onToggleAllowanceAsync(): Promise<void> {
         if (this.props.userAddress === '') {
             this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
-            return false;
         }
 
         this.setState({
@@ -69,7 +68,7 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
         });
 
         let newAllowanceAmountInBaseUnits = new BigNumber(0);
-        if (!this.isAllowanceSet()) {
+        if (!this._isAllowanceSet()) {
             newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
         }
         try {
@@ -78,17 +77,17 @@ export class AllowanceToggle extends React.Component<AllowanceToggleProps, Allow
             this.setState({
                 isSpinnerVisible: false,
             });
-            const errMsg = '' + err;
+            const errMsg = `${err}`;
             if (_.includes(errMsg, 'User denied transaction')) {
-                return false;
+                return;
             }
             utils.consoleLog(`Unexpected error encountered: ${err}`);
             utils.consoleLog(err.stack);
-            await errorReporter.reportAsync(err);
             this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
+            await errorReporter.reportAsync(err);
         }
     }
-    private isAllowanceSet() {
+    private _isAllowanceSet() {
         return !this.props.tokenState.allowance.eq(0);
     }
 }
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 7ddefc3b9..ddc434b51 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -1,12 +1,12 @@
-import BigNumber from 'bignumber.js';
+import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {RequiredLabel} from 'ts/components/ui/required_label';
-import {InputErrMsg, ValidatedBigNumberCallback, WebsitePaths} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { Link } from 'react-router-dom';
+import { RequiredLabel } from 'ts/components/ui/required_label';
+import { InputErrMsg, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
 
 interface BalanceBoundedInputProps {
     label?: string;
@@ -25,8 +25,7 @@ interface BalanceBoundedInputState {
     amountString: string;
 }
 
-export class BalanceBoundedInput extends
-    React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> {
+export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> {
     public static defaultProps: Partial<BalanceBoundedInputProps> = {
         shouldShowIncompleteErrs: false,
         shouldHideVisitBalancesLink: false,
@@ -35,7 +34,7 @@ export class BalanceBoundedInput extends
         super(props);
         const amountString = this.props.amount ? this.props.amount.toString() : '';
         this.state = {
-            errMsg: this.validate(amountString, props.balance),
+            errMsg: this._validate(amountString, props.balance),
             amountString,
         };
     }
@@ -57,14 +56,14 @@ export class BalanceBoundedInput extends
             if (shouldResetState) {
                 const amountString = nextProps.amount.toString();
                 this.setState({
-                    errMsg: this.validate(amountString, nextProps.balance),
+                    errMsg: this._validate(amountString, nextProps.balance),
                     amountString,
                 });
             }
         } else if (isCurrentAmountNumeric) {
             const amountString = '';
             this.setState({
-                errMsg: this.validate(amountString, nextProps.balance),
+                errMsg: this._validate(amountString, nextProps.balance),
                 amountString,
             });
         }
@@ -74,39 +73,42 @@ export class BalanceBoundedInput extends
         if (this.props.shouldShowIncompleteErrs && this.state.amountString === '') {
             errorText = 'This field is required';
         }
-        let label: React.ReactNode|string = '';
+        let label: React.ReactNode | string = '';
         if (!_.isUndefined(this.props.label)) {
-            label = <RequiredLabel label={this.props.label}/>;
+            label = <RequiredLabel label={this.props.label} />;
         }
         return (
             <TextField
                 fullWidth={true}
                 floatingLabelText={label}
                 floatingLabelFixed={true}
-                floatingLabelStyle={{color: colors.grey500, width: 206}}
+                floatingLabelStyle={{ color: colors.grey, width: 206 }}
                 errorText={errorText}
                 value={this.state.amountString}
-                hintText={<span style={{textTransform: 'capitalize'}}>amount</span>}
-                onChange={this.onValueChange.bind(this)}
-                underlineStyle={{width: 'calc(100% + 50px)'}}
+                hintText={<span style={{ textTransform: 'capitalize' }}>amount</span>}
+                onChange={this._onValueChange.bind(this)}
+                underlineStyle={{ width: 'calc(100% + 50px)' }}
             />
         );
     }
-    private onValueChange(e: any, amountString: string) {
-        const errMsg = this.validate(amountString, this.props.balance);
-        this.setState({
-            amountString,
-            errMsg,
-        }, () => {
-            const isValid = _.isUndefined(errMsg);
-            if (utils.isNumeric(amountString)) {
-                this.props.onChange(isValid, new BigNumber(amountString));
-            } else {
-                this.props.onChange(isValid);
-            }
-        });
+    private _onValueChange(e: any, amountString: string) {
+        const errMsg = this._validate(amountString, this.props.balance);
+        this.setState(
+            {
+                amountString,
+                errMsg,
+            },
+            () => {
+                const isValid = _.isUndefined(errMsg);
+                if (utils.isNumeric(amountString)) {
+                    this.props.onChange(isValid, new BigNumber(amountString));
+                } else {
+                    this.props.onChange(isValid);
+                }
+            },
+        );
     }
-    private validate(amountString: string, balance: BigNumber): InputErrMsg {
+    private _validate(amountString: string, balance: BigNumber): InputErrMsg {
         if (!utils.isNumeric(amountString)) {
             return amountString !== '' ? 'Must be a number' : '';
         }
@@ -115,17 +117,12 @@ export class BalanceBoundedInput extends
             return 'Cannot be zero';
         }
         if (this.props.shouldCheckBalance && amount.gt(balance)) {
-            return (
-                <span>
-                    Insufficient balance.{' '}
-                    {this.renderIncreaseBalanceLink()}
-                </span>
-            );
+            return <span>Insufficient balance. {this._renderIncreaseBalanceLink()}</span>;
         }
         const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount);
         return errMsg;
     }
-    private renderIncreaseBalanceLink() {
+    private _renderIncreaseBalanceLink() {
         if (this.props.shouldHideVisitBalancesLink) {
             return null;
         }
@@ -133,25 +130,19 @@ export class BalanceBoundedInput extends
         const increaseBalanceText = 'Increase balance';
         const linkStyle = {
             cursor: 'pointer',
-            color: colors.grey900,
+            color: colors.darkestGrey,
             textDecoration: 'underline',
             display: 'inline',
         };
         if (_.isUndefined(this.props.onVisitBalancesPageClick)) {
             return (
-                <Link
-                    to={`${WebsitePaths.Portal}/balances`}
-                    style={linkStyle}
-                >
+                <Link to={`${WebsitePaths.Portal}/balances`} style={linkStyle}>
                     {increaseBalanceText}
                 </Link>
             );
         } else {
             return (
-                <div
-                    onClick={this.props.onVisitBalancesPageClick}
-                    style={linkStyle}
-                >
+                <div onClick={this.props.onVisitBalancesPageClick} style={linkStyle}>
                     {increaseBalanceText}
                 </div>
             );
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index 5c5e23eef..a66f92c8c 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -1,10 +1,10 @@
-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 * as React from 'react';
-import {BalanceBoundedInput} from 'ts/components/inputs/balance_bounded_input';
-import {ValidatedBigNumberCallback} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
+import { ValidatedBigNumberCallback } from 'ts/types';
+import { constants } from 'ts/utils/constants';
 
 interface EthAmountInputProps {
     label?: string;
@@ -21,31 +21,29 @@ interface EthAmountInputState {}
 
 export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> {
     public render() {
-        const amount = this.props.amount ?
-            ZeroEx.toUnitAmount(this.props.amount, constants.ETH_DECIMAL_PLACES) :
-            undefined;
+        const amount = this.props.amount
+            ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH)
+            : undefined;
         return (
-            <div className="flex overflow-hidden" style={{height: 63}}>
+            <div className="flex overflow-hidden" style={{ height: 63 }}>
                 <BalanceBoundedInput
                     label={this.props.label}
                     balance={this.props.balance}
                     amount={amount}
-                    onChange={this.onChange.bind(this)}
+                    onChange={this._onChange.bind(this)}
                     shouldCheckBalance={this.props.shouldCheckBalance}
                     shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
                     onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
                     shouldHideVisitBalancesLink={this.props.shouldHideVisitBalancesLink}
                 />
-                <div style={{paddingTop: _.isUndefined(this.props.label) ? 15 : 40}}>
-                    ETH
-                </div>
+                <div style={{ paddingTop: _.isUndefined(this.props.label) ? 15 : 40 }}>ETH</div>
             </div>
         );
     }
-    private onChange(isValid: boolean, amount?: BigNumber) {
-        const baseUnitAmountIfExists = _.isUndefined(amount) ?
-            undefined :
-            ZeroEx.toBaseUnitAmount(amount, constants.ETH_DECIMAL_PLACES);
+    private _onChange(isValid: boolean, amount?: BigNumber) {
+        const baseUnitAmountIfExists = _.isUndefined(amount)
+            ? undefined
+            : ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
         this.props.onChange(isValid, baseUnitAmountIfExists);
     }
 }
diff --git a/packages/website/ts/components/inputs/expiration_input.tsx b/packages/website/ts/components/inputs/expiration_input.tsx
index d3d3d258d..e473648d2 100644
--- a/packages/website/ts/components/inputs/expiration_input.tsx
+++ b/packages/website/ts/components/inputs/expiration_input.tsx
@@ -1,10 +1,10 @@
-import BigNumber from 'bignumber.js';
+import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import DatePicker from 'material-ui/DatePicker';
 import TimePicker from 'material-ui/TimePicker';
 import * as moment from 'moment';
 import * as React from 'react';
-import {utils} from 'ts/utils/utils';
+import { utils } from 'ts/utils/utils';
 
 interface ExpirationInputProps {
     orderExpiryTimestamp: BigNumber;
@@ -17,11 +17,11 @@ interface ExpirationInputState {
 }
 
 export class ExpirationInput extends React.Component<ExpirationInputProps, ExpirationInputState> {
-    private earliestPickableMoment: moment.Moment;
+    private _earliestPickableMoment: moment.Moment;
     constructor(props: ExpirationInputProps) {
         super(props);
         // Set the earliest pickable date to today at 00:00, so users can only pick the current or later dates
-        this.earliestPickableMoment = moment().startOf('day');
+        this._earliestPickableMoment = moment().startOf('day');
         const expirationMoment = utils.convertToMomentFromUnixTimestamp(props.orderExpiryTimestamp);
         const initialOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
         const didUserSetExpiry = !initialOrderExpiryTimestamp.eq(props.orderExpiryTimestamp);
@@ -42,13 +42,10 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
                         mode="landscape"
                         autoOk={true}
                         value={date}
-                        onChange={this.onDateChanged.bind(this)}
-                        shouldDisableDate={this.shouldDisableDate.bind(this)}
+                        onChange={this._onDateChanged.bind(this)}
+                        shouldDisableDate={this._shouldDisableDate.bind(this)}
                     />
-                    <div
-                        className="absolute"
-                        style={{fontSize: 20, right: 40, top: 13, pointerEvents: 'none'}}
-                    >
+                    <div className="absolute" style={{ fontSize: 20, right: 40, top: 13, pointerEvents: 'none' }}>
                         <i className="zmdi zmdi-calendar" />
                     </div>
                 </div>
@@ -58,29 +55,24 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
                         hintText="Time"
                         autoOk={true}
                         value={time}
-                        onChange={this.onTimeChanged.bind(this)}
+                        onChange={this._onTimeChanged.bind(this)}
                     />
-                    <div
-                        className="absolute"
-                        style={{fontSize: 20, right: 9, top: 13, pointerEvents: 'none'}}
-                    >
+                    <div className="absolute" style={{ fontSize: 20, right: 9, top: 13, pointerEvents: 'none' }}>
                         <i className="zmdi zmdi-time" />
                     </div>
                 </div>
-                <div
-                    onClick={this.clearDates.bind(this)}
-                    className="col col-1 pt2"
-                    style={{textAlign: 'right'}}
-                >
-                    <i style={{fontSize: 16, cursor: 'pointer'}} className="zmdi zmdi-close" />
+                <div onClick={this._clearDates.bind(this)} className="col col-1 pt2" style={{ textAlign: 'right' }}>
+                    <i style={{ fontSize: 16, cursor: 'pointer' }} className="zmdi zmdi-close" />
                 </div>
             </div>
         );
     }
-    private shouldDisableDate(date: Date): boolean {
-        return moment(date).startOf('day').isBefore(this.earliestPickableMoment);
+    private _shouldDisableDate(date: Date): boolean {
+        return moment(date)
+            .startOf('day')
+            .isBefore(this._earliestPickableMoment);
     }
-    private clearDates() {
+    private _clearDates() {
         this.setState({
             dateMoment: undefined,
             timeMoment: undefined,
@@ -88,7 +80,7 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
         const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec();
         this.props.updateOrderExpiry(defaultDateTime);
     }
-    private onDateChanged(e: any, date: Date) {
+    private _onDateChanged(e: any, date: Date) {
         const dateMoment = moment(date);
         this.setState({
             dateMoment,
@@ -96,12 +88,12 @@ export class ExpirationInput extends React.Component<ExpirationInputProps, Expir
         const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment);
         this.props.updateOrderExpiry(timestamp);
     }
-    private onTimeChanged(e: any, time: Date) {
+    private _onTimeChanged(e: any, time: Date) {
         const timeMoment = moment(time);
         this.setState({
             timeMoment,
         });
-        const dateMoment =  _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment;
+        const dateMoment = _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment;
         const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, timeMoment);
         this.props.updateOrderExpiry(timestamp);
     }
diff --git a/packages/website/ts/components/inputs/hash_input.tsx b/packages/website/ts/components/inputs/hash_input.tsx
index 25e7b5009..5a3d34fe6 100644
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -1,11 +1,11 @@
-import {Order, ZeroEx} from '0x.js';
+import { Order, ZeroEx } from '0x.js';
 import * as _ from 'lodash';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
-import {Blockchain} from 'ts/blockchain';
-import {FakeTextField} from 'ts/components/ui/fake_text_field';
-import {HashData, Styles} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { Blockchain } from 'ts/blockchain';
+import { FakeTextField } from 'ts/components/ui/fake_text_field';
+import { HashData, Styles } from 'ts/types';
+import { constants } from 'ts/utils/constants';
 
 const styles: Styles = {
     textField: {
@@ -27,15 +27,11 @@ interface HashInputState {}
 
 export class HashInput extends React.Component<HashInputProps, HashInputState> {
     public render() {
-        const msgHashHex = this.props.blockchainIsLoaded ? this.generateMessageHashHex() : '';
+        const msgHashHex = this.props.blockchainIsLoaded ? this._generateMessageHashHex() : '';
         return (
             <div>
                 <FakeTextField label={this.props.label}>
-                    <div
-                        style={styles.textField}
-                        data-tip={true}
-                        data-for="hashTooltip"
-                    >
+                    <div style={styles.textField} data-tip={true} data-for="hashTooltip">
                         {msgHashHex}
                     </div>
                 </FakeTextField>
@@ -43,7 +39,7 @@ export class HashInput extends React.Component<HashInputProps, HashInputState> {
             </div>
         );
     }
-    private generateMessageHashHex() {
+    private _generateMessageHashHex() {
         const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists();
         const hashData = this.props.hashData;
         const order: Order = {
diff --git a/packages/website/ts/components/inputs/identicon_address_input.tsx b/packages/website/ts/components/inputs/identicon_address_input.tsx
index 692a092d9..4cf9af64d 100644
--- a/packages/website/ts/components/inputs/identicon_address_input.tsx
+++ b/packages/website/ts/components/inputs/identicon_address_input.tsx
@@ -1,11 +1,9 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {AddressInput} from 'ts/components/inputs/address_input';
-import {Identicon} from 'ts/components/ui/identicon';
-import {InputLabel} from 'ts/components/ui/input_label';
-import {RequiredLabel} from 'ts/components/ui/required_label';
+import { AddressInput } from 'ts/components/inputs/address_input';
+import { Identicon } from 'ts/components/ui/identicon';
+import { InputLabel } from 'ts/components/ui/input_label';
+import { RequiredLabel } from 'ts/components/ui/required_label';
 
 interface IdenticonAddressInputProps {
     initialAddress: string;
@@ -26,28 +24,27 @@ export class IdenticonAddressInput extends React.Component<IdenticonAddressInput
         };
     }
     public render() {
-        const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> :
-                      this.props.label;
+        const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label;
         return (
-            <div className="relative" style={{width: '100%'}}>
+            <div className="relative" style={{ width: '100%' }}>
                 <InputLabel text={label} />
                 <div className="flex">
-                    <div className="col col-1 pb1 pr1" style={{paddingTop: 13}}>
+                    <div className="col col-1 pb1 pr1" style={{ paddingTop: 13 }}>
                         <Identicon address={this.state.address} diameter={26} />
                     </div>
-                    <div className="col col-11 pb1 pl1" style={{height: 65}}>
+                    <div className="col col-11 pb1 pl1" style={{ height: 65 }}>
                         <AddressInput
                             hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..."
                             shouldHideLabel={true}
                             initialAddress={this.props.initialAddress}
-                            updateAddress={this.updateAddress.bind(this)}
+                            updateAddress={this._updateAddress.bind(this)}
                         />
                     </div>
                 </div>
             </div>
         );
     }
-    private updateAddress(address?: string): void {
+    private _updateAddress(address?: string): void {
         this.setState({
             address,
         });
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;
         }
     }
 }
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index 8daa84650..5df19b28c 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,13 +1,13 @@
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {AssetPicker} from 'ts/components/generate_order/asset_picker';
-import {InputLabel} from 'ts/components/ui/input_label';
-import {TokenIcon} from 'ts/components/ui/token_icon';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {AssetToken, BlockchainErrs, Side, Token, TokenByAddress, TokenState} from 'ts/types';
+import { Blockchain } from 'ts/blockchain';
+import { AssetPicker } from 'ts/components/generate_order/asset_picker';
+import { InputLabel } from 'ts/components/ui/input_label';
+import { TokenIcon } from 'ts/components/ui/token_icon';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { AssetToken, BlockchainErrs, Side, Token, TokenByAddress } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 const TOKEN_ICON_DIMENSION = 80;
 
@@ -51,18 +51,15 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
                 </div>
                 <Paper
                     zDepth={1}
-                    style={{cursor: 'pointer'}}
-                    onMouseEnter={this.onToggleHover.bind(this, true)}
-                    onMouseLeave={this.onToggleHover.bind(this, false)}
-                    onClick={this.onAssetClicked.bind(this)}
+                    style={{ cursor: 'pointer' }}
+                    onMouseEnter={this._onToggleHover.bind(this, true)}
+                    onMouseLeave={this._onToggleHover.bind(this, false)}
+                    onClick={this._onAssetClicked.bind(this)}
                 >
-                    <div
-                        className="mx-auto pt2"
-                        style={{width: TOKEN_ICON_DIMENSION, ...iconStyles}}
-                    >
+                    <div className="mx-auto pt2" style={{ width: TOKEN_ICON_DIMENSION, ...iconStyles }}>
                         <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
                     </div>
-                    <div className="py1 center" style={{color: colors.grey500}}>
+                    <div className="py1 center" style={{ color: colors.grey }}>
                         {token.name}
                     </div>
                 </Paper>
@@ -73,13 +70,13 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
                     dispatcher={this.props.dispatcher}
                     isOpen={this.state.isPickerOpen}
                     currentTokenAddress={this.props.assetToken.address}
-                    onTokenChosen={this.onTokenChosen.bind(this)}
+                    onTokenChosen={this._onTokenChosen.bind(this)}
                     tokenByAddress={this.props.tokenByAddress}
                 />
             </div>
         );
     }
-    private onTokenChosen(tokenAddress: string) {
+    private _onTokenChosen(tokenAddress: string) {
         const assetToken: AssetToken = {
             address: tokenAddress,
             amount: this.props.assetToken.amount,
@@ -89,13 +86,13 @@ export class TokenInput extends React.Component<TokenInputProps, TokenInputState
             isPickerOpen: false,
         });
     }
-    private onToggleHover(isHoveringIcon: boolean) {
+    private _onToggleHover(isHoveringIcon: boolean) {
         this.setState({
             isHoveringIcon,
         });
     }
-    private onAssetClicked() {
-        if (this.props.blockchainErr !== '') {
+    private _onAssetClicked() {
+        if (this.props.blockchainErr !== BlockchainErrs.NoError) {
             this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
             return;
         }