Add config file specifically in prettier command and fix files

9 files changed, 594 insertions, 594 deletions

diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index 236bf9a00..dd4131140 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -6,66 +6,66 @@ import { RequiredLabel } from 'ts/components/ui/required_label';
 import { colors } from 'ts/utils/colors';
 
 interface AddressInputProps {
-	disabled?: boolean;
-	initialAddress: string;
-	isRequired?: boolean;
-	hintText?: string;
-	shouldHideLabel?: boolean;
-	label?: string;
-	shouldShowIncompleteErrs?: boolean;
-	updateAddress: (address?: string) => void;
+    disabled?: boolean;
+    initialAddress: string;
+    isRequired?: boolean;
+    hintText?: string;
+    shouldHideLabel?: boolean;
+    label?: string;
+    shouldShowIncompleteErrs?: boolean;
+    updateAddress: (address?: string) => void;
 }
 
 interface AddressInputState {
-	address: string;
-	errMsg: string;
+    address: string;
+    errMsg: string;
 }
 
 export class AddressInput extends React.Component<AddressInputProps, AddressInputState> {
-	constructor(props: AddressInputProps) {
-		super(props);
-		this.state = {
-			address: this.props.initialAddress,
-			errMsg: '',
-		};
-	}
-	public componentWillReceiveProps(nextProps: AddressInputProps) {
-		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 labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block';
-		const hintText = this.props.hintText ? this.props.hintText : '';
-		return (
-			<div className="overflow-hidden">
-				<TextField
-					id={`address-field-${this.props.label}`}
-					disabled={_.isUndefined(this.props.disabled) ? false : this.props.disabled}
-					fullWidth={true}
-					hintText={hintText}
-					floatingLabelFixed={true}
-					floatingLabelStyle={{ color: colors.grey, display: labelDisplay }}
-					floatingLabelText={label}
-					errorText={this.state.errMsg}
-					value={this.state.address}
-					onChange={this._onOrderTakerAddressUpdated.bind(this)}
-				/>
-			</div>
-		);
-	}
-	private _onOrderTakerAddressUpdated(e: any) {
-		const address = e.target.value.toLowerCase();
-		const isValidAddress = addressUtils.isAddress(address) || address === '';
-		const errMsg = isValidAddress ? '' : 'Invalid ethereum address';
-		this.setState({
-			address,
-			errMsg,
-		});
-		const addressIfValid = isValidAddress ? address : undefined;
-		this.props.updateAddress(addressIfValid);
-	}
+    constructor(props: AddressInputProps) {
+        super(props);
+        this.state = {
+            address: this.props.initialAddress,
+            errMsg: '',
+        };
+    }
+    public componentWillReceiveProps(nextProps: AddressInputProps) {
+        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 labelDisplay = this.props.shouldHideLabel ? 'hidden' : 'block';
+        const hintText = this.props.hintText ? this.props.hintText : '';
+        return (
+            <div className="overflow-hidden">
+                <TextField
+                    id={`address-field-${this.props.label}`}
+                    disabled={_.isUndefined(this.props.disabled) ? false : this.props.disabled}
+                    fullWidth={true}
+                    hintText={hintText}
+                    floatingLabelFixed={true}
+                    floatingLabelStyle={{ color: colors.grey, display: labelDisplay }}
+                    floatingLabelText={label}
+                    errorText={this.state.errMsg}
+                    value={this.state.address}
+                    onChange={this._onOrderTakerAddressUpdated.bind(this)}
+                />
+            </div>
+        );
+    }
+    private _onOrderTakerAddressUpdated(e: any) {
+        const address = e.target.value.toLowerCase();
+        const isValidAddress = addressUtils.isAddress(address) || address === '';
+        const errMsg = isValidAddress ? '' : 'Invalid ethereum address';
+        this.setState({
+            address,
+            errMsg,
+        });
+        const addressIfValid = isValidAddress ? address : undefined;
+        this.props.updateAddress(addressIfValid);
+    }
 }
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index 245784824..da46db4f4 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -11,83 +11,83 @@ import { utils } from 'ts/utils/utils';
 const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
 
 interface AllowanceToggleProps {
-	blockchain: Blockchain;
-	dispatcher: Dispatcher;
-	onErrorOccurred: (errType: BalanceErrs) => void;
-	token: Token;
-	tokenState: TokenState;
-	userAddress: string;
+    blockchain: Blockchain;
+    dispatcher: Dispatcher;
+    onErrorOccurred: (errType: BalanceErrs) => void;
+    token: Token;
+    tokenState: TokenState;
+    userAddress: string;
 }
 
 interface AllowanceToggleState {
-	isSpinnerVisible: boolean;
-	prevAllowance: BigNumber;
+    isSpinnerVisible: boolean;
+    prevAllowance: BigNumber;
 }
 
 export class AllowanceToggle extends React.Component<AllowanceToggleProps, AllowanceToggleState> {
-	constructor(props: AllowanceToggleProps) {
-		super(props);
-		this.state = {
-			isSpinnerVisible: false,
-			prevAllowance: props.tokenState.allowance,
-		};
-	}
-	public componentWillReceiveProps(nextProps: AllowanceToggleProps) {
-		if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) {
-			this.setState({
-				isSpinnerVisible: false,
-				prevAllowance: nextProps.tokenState.allowance,
-			});
-		}
-	}
-	public render() {
-		return (
-			<div className="flex">
-				<div>
-					<Toggle
-						disabled={this.state.isSpinnerVisible}
-						toggled={this._isAllowanceSet()}
-						onToggle={this._onToggleAllowanceAsync.bind(this)}
-					/>
-				</div>
-				{this.state.isSpinnerVisible && (
-					<div className="pl1" style={{ paddingTop: 3 }}>
-						<i className="zmdi zmdi-spinner zmdi-hc-spin" />
-					</div>
-				)}
-			</div>
-		);
-	}
-	private async _onToggleAllowanceAsync(): Promise<void> {
-		if (this.props.userAddress === '') {
-			this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
-		}
+    constructor(props: AllowanceToggleProps) {
+        super(props);
+        this.state = {
+            isSpinnerVisible: false,
+            prevAllowance: props.tokenState.allowance,
+        };
+    }
+    public componentWillReceiveProps(nextProps: AllowanceToggleProps) {
+        if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) {
+            this.setState({
+                isSpinnerVisible: false,
+                prevAllowance: nextProps.tokenState.allowance,
+            });
+        }
+    }
+    public render() {
+        return (
+            <div className="flex">
+                <div>
+                    <Toggle
+                        disabled={this.state.isSpinnerVisible}
+                        toggled={this._isAllowanceSet()}
+                        onToggle={this._onToggleAllowanceAsync.bind(this)}
+                    />
+                </div>
+                {this.state.isSpinnerVisible && (
+                    <div className="pl1" style={{ paddingTop: 3 }}>
+                        <i className="zmdi zmdi-spinner zmdi-hc-spin" />
+                    </div>
+                )}
+            </div>
+        );
+    }
+    private async _onToggleAllowanceAsync(): Promise<void> {
+        if (this.props.userAddress === '') {
+            this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+        }
 
-		this.setState({
-			isSpinnerVisible: true,
-		});
+        this.setState({
+            isSpinnerVisible: true,
+        });
 
-		let newAllowanceAmountInBaseUnits = new BigNumber(0);
-		if (!this._isAllowanceSet()) {
-			newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
-		}
-		try {
-			await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
-		} catch (err) {
-			this.setState({
-				isSpinnerVisible: false,
-			});
-			const errMsg = `${err}`;
-			if (_.includes(errMsg, 'User denied transaction')) {
-				return;
-			}
-			utils.consoleLog(`Unexpected error encountered: ${err}`);
-			utils.consoleLog(err.stack);
-			this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
-			await errorReporter.reportAsync(err);
-		}
-	}
-	private _isAllowanceSet() {
-		return !this.props.tokenState.allowance.eq(0);
-	}
+        let newAllowanceAmountInBaseUnits = new BigNumber(0);
+        if (!this._isAllowanceSet()) {
+            newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
+        }
+        try {
+            await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
+        } catch (err) {
+            this.setState({
+                isSpinnerVisible: false,
+            });
+            const errMsg = `${err}`;
+            if (_.includes(errMsg, 'User denied transaction')) {
+                return;
+            }
+            utils.consoleLog(`Unexpected error encountered: ${err}`);
+            utils.consoleLog(err.stack);
+            this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
+            await errorReporter.reportAsync(err);
+        }
+    }
+    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 5cc91994e..ddc434b51 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -9,143 +9,143 @@ import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface BalanceBoundedInputProps {
-	label?: string;
-	balance: BigNumber;
-	amount?: BigNumber;
-	onChange: ValidatedBigNumberCallback;
-	shouldShowIncompleteErrs?: boolean;
-	shouldCheckBalance: boolean;
-	validate?: (amount: BigNumber) => InputErrMsg;
-	onVisitBalancesPageClick?: () => void;
-	shouldHideVisitBalancesLink?: boolean;
+    label?: string;
+    balance: BigNumber;
+    amount?: BigNumber;
+    onChange: ValidatedBigNumberCallback;
+    shouldShowIncompleteErrs?: boolean;
+    shouldCheckBalance: boolean;
+    validate?: (amount: BigNumber) => InputErrMsg;
+    onVisitBalancesPageClick?: () => void;
+    shouldHideVisitBalancesLink?: boolean;
 }
 
 interface BalanceBoundedInputState {
-	errMsg: InputErrMsg;
-	amountString: string;
+    errMsg: InputErrMsg;
+    amountString: string;
 }
 
 export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> {
-	public static defaultProps: Partial<BalanceBoundedInputProps> = {
-		shouldShowIncompleteErrs: false,
-		shouldHideVisitBalancesLink: false,
-	};
-	constructor(props: BalanceBoundedInputProps) {
-		super(props);
-		const amountString = this.props.amount ? this.props.amount.toString() : '';
-		this.state = {
-			errMsg: this._validate(amountString, props.balance),
-			amountString,
-		};
-	}
-	public componentWillReceiveProps(nextProps: BalanceBoundedInputProps) {
-		if (nextProps === this.props) {
-			return;
-		}
-		const isCurrentAmountNumeric = utils.isNumeric(this.state.amountString);
-		if (!_.isUndefined(nextProps.amount)) {
-			let shouldResetState = false;
-			if (!isCurrentAmountNumeric) {
-				shouldResetState = true;
-			} else {
-				const currentAmount = new BigNumber(this.state.amountString);
-				if (!currentAmount.eq(nextProps.amount) || !nextProps.balance.eq(this.props.balance)) {
-					shouldResetState = true;
-				}
-			}
-			if (shouldResetState) {
-				const amountString = nextProps.amount.toString();
-				this.setState({
-					errMsg: this._validate(amountString, nextProps.balance),
-					amountString,
-				});
-			}
-		} else if (isCurrentAmountNumeric) {
-			const amountString = '';
-			this.setState({
-				errMsg: this._validate(amountString, nextProps.balance),
-				amountString,
-			});
-		}
-	}
-	public render() {
-		let errorText = this.state.errMsg;
-		if (this.props.shouldShowIncompleteErrs && this.state.amountString === '') {
-			errorText = 'This field is required';
-		}
-		let label: React.ReactNode | string = '';
-		if (!_.isUndefined(this.props.label)) {
-			label = <RequiredLabel label={this.props.label} />;
-		}
-		return (
-			<TextField
-				fullWidth={true}
-				floatingLabelText={label}
-				floatingLabelFixed={true}
-				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)' }}
-			/>
-		);
-	}
-	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 {
-		if (!utils.isNumeric(amountString)) {
-			return amountString !== '' ? 'Must be a number' : '';
-		}
-		const amount = new BigNumber(amountString);
-		if (amount.eq(0)) {
-			return 'Cannot be zero';
-		}
-		if (this.props.shouldCheckBalance && amount.gt(balance)) {
-			return <span>Insufficient balance. {this._renderIncreaseBalanceLink()}</span>;
-		}
-		const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount);
-		return errMsg;
-	}
-	private _renderIncreaseBalanceLink() {
-		if (this.props.shouldHideVisitBalancesLink) {
-			return null;
-		}
+    public static defaultProps: Partial<BalanceBoundedInputProps> = {
+        shouldShowIncompleteErrs: false,
+        shouldHideVisitBalancesLink: false,
+    };
+    constructor(props: BalanceBoundedInputProps) {
+        super(props);
+        const amountString = this.props.amount ? this.props.amount.toString() : '';
+        this.state = {
+            errMsg: this._validate(amountString, props.balance),
+            amountString,
+        };
+    }
+    public componentWillReceiveProps(nextProps: BalanceBoundedInputProps) {
+        if (nextProps === this.props) {
+            return;
+        }
+        const isCurrentAmountNumeric = utils.isNumeric(this.state.amountString);
+        if (!_.isUndefined(nextProps.amount)) {
+            let shouldResetState = false;
+            if (!isCurrentAmountNumeric) {
+                shouldResetState = true;
+            } else {
+                const currentAmount = new BigNumber(this.state.amountString);
+                if (!currentAmount.eq(nextProps.amount) || !nextProps.balance.eq(this.props.balance)) {
+                    shouldResetState = true;
+                }
+            }
+            if (shouldResetState) {
+                const amountString = nextProps.amount.toString();
+                this.setState({
+                    errMsg: this._validate(amountString, nextProps.balance),
+                    amountString,
+                });
+            }
+        } else if (isCurrentAmountNumeric) {
+            const amountString = '';
+            this.setState({
+                errMsg: this._validate(amountString, nextProps.balance),
+                amountString,
+            });
+        }
+    }
+    public render() {
+        let errorText = this.state.errMsg;
+        if (this.props.shouldShowIncompleteErrs && this.state.amountString === '') {
+            errorText = 'This field is required';
+        }
+        let label: React.ReactNode | string = '';
+        if (!_.isUndefined(this.props.label)) {
+            label = <RequiredLabel label={this.props.label} />;
+        }
+        return (
+            <TextField
+                fullWidth={true}
+                floatingLabelText={label}
+                floatingLabelFixed={true}
+                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)' }}
+            />
+        );
+    }
+    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 {
+        if (!utils.isNumeric(amountString)) {
+            return amountString !== '' ? 'Must be a number' : '';
+        }
+        const amount = new BigNumber(amountString);
+        if (amount.eq(0)) {
+            return 'Cannot be zero';
+        }
+        if (this.props.shouldCheckBalance && amount.gt(balance)) {
+            return <span>Insufficient balance. {this._renderIncreaseBalanceLink()}</span>;
+        }
+        const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount);
+        return errMsg;
+    }
+    private _renderIncreaseBalanceLink() {
+        if (this.props.shouldHideVisitBalancesLink) {
+            return null;
+        }
 
-		const increaseBalanceText = 'Increase balance';
-		const linkStyle = {
-			cursor: 'pointer',
-			color: colors.darkestGrey,
-			textDecoration: 'underline',
-			display: 'inline',
-		};
-		if (_.isUndefined(this.props.onVisitBalancesPageClick)) {
-			return (
-				<Link to={`${WebsitePaths.Portal}/balances`} style={linkStyle}>
-					{increaseBalanceText}
-				</Link>
-			);
-		} else {
-			return (
-				<div onClick={this.props.onVisitBalancesPageClick} style={linkStyle}>
-					{increaseBalanceText}
-				</div>
-			);
-		}
-	}
+        const increaseBalanceText = 'Increase balance';
+        const linkStyle = {
+            cursor: 'pointer',
+            color: colors.darkestGrey,
+            textDecoration: 'underline',
+            display: 'inline',
+        };
+        if (_.isUndefined(this.props.onVisitBalancesPageClick)) {
+            return (
+                <Link to={`${WebsitePaths.Portal}/balances`} style={linkStyle}>
+                    {increaseBalanceText}
+                </Link>
+            );
+        } else {
+            return (
+                <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 7f9747094..a66f92c8c 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -7,43 +7,43 @@ import { ValidatedBigNumberCallback } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 
 interface EthAmountInputProps {
-	label?: string;
-	balance: BigNumber;
-	amount?: BigNumber;
-	onChange: ValidatedBigNumberCallback;
-	shouldShowIncompleteErrs: boolean;
-	onVisitBalancesPageClick?: () => void;
-	shouldCheckBalance: boolean;
-	shouldHideVisitBalancesLink?: boolean;
+    label?: string;
+    balance: BigNumber;
+    amount?: BigNumber;
+    onChange: ValidatedBigNumberCallback;
+    shouldShowIncompleteErrs: boolean;
+    onVisitBalancesPageClick?: () => void;
+    shouldCheckBalance: boolean;
+    shouldHideVisitBalancesLink?: boolean;
 }
 
 interface EthAmountInputState {}
 
 export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmountInputState> {
-	public render() {
-		const amount = this.props.amount
-			? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH)
-			: undefined;
-		return (
-			<div className="flex overflow-hidden" style={{ height: 63 }}>
-				<BalanceBoundedInput
-					label={this.props.label}
-					balance={this.props.balance}
-					amount={amount}
-					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>
-		);
-	}
-	private _onChange(isValid: boolean, amount?: BigNumber) {
-		const baseUnitAmountIfExists = _.isUndefined(amount)
-			? undefined
-			: ZeroEx.toBaseUnitAmount(amount, constants.DECIMAL_PLACES_ETH);
-		this.props.onChange(isValid, baseUnitAmountIfExists);
-	}
+    public render() {
+        const amount = this.props.amount
+            ? ZeroEx.toUnitAmount(this.props.amount, constants.DECIMAL_PLACES_ETH)
+            : undefined;
+        return (
+            <div className="flex overflow-hidden" style={{ height: 63 }}>
+                <BalanceBoundedInput
+                    label={this.props.label}
+                    balance={this.props.balance}
+                    amount={amount}
+                    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>
+        );
+    }
+    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 cb4ed7bd0..e473648d2 100644
--- a/packages/website/ts/components/inputs/expiration_input.tsx
+++ b/packages/website/ts/components/inputs/expiration_input.tsx
@@ -7,94 +7,94 @@ import * as React from 'react';
 import { utils } from 'ts/utils/utils';
 
 interface ExpirationInputProps {
-	orderExpiryTimestamp: BigNumber;
-	updateOrderExpiry: (unixTimestampSec: BigNumber) => void;
+    orderExpiryTimestamp: BigNumber;
+    updateOrderExpiry: (unixTimestampSec: BigNumber) => void;
 }
 
 interface ExpirationInputState {
-	dateMoment: moment.Moment;
-	timeMoment: moment.Moment;
+    dateMoment: moment.Moment;
+    timeMoment: moment.Moment;
 }
 
 export class ExpirationInput extends React.Component<ExpirationInputProps, ExpirationInputState> {
-	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');
-		const expirationMoment = utils.convertToMomentFromUnixTimestamp(props.orderExpiryTimestamp);
-		const initialOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
-		const didUserSetExpiry = !initialOrderExpiryTimestamp.eq(props.orderExpiryTimestamp);
-		this.state = {
-			dateMoment: didUserSetExpiry ? expirationMoment : undefined,
-			timeMoment: didUserSetExpiry ? expirationMoment : undefined,
-		};
-	}
-	public render() {
-		const date = this.state.dateMoment ? this.state.dateMoment.toDate() : undefined;
-		const time = this.state.timeMoment ? this.state.timeMoment.toDate() : undefined;
-		return (
-			<div className="clearfix">
-				<div className="col col-6 overflow-hidden pr3 flex relative">
-					<DatePicker
-						className="overflow-hidden"
-						hintText="Date"
-						mode="landscape"
-						autoOk={true}
-						value={date}
-						onChange={this._onDateChanged.bind(this)}
-						shouldDisableDate={this._shouldDisableDate.bind(this)}
-					/>
-					<div className="absolute" style={{ fontSize: 20, right: 40, top: 13, pointerEvents: 'none' }}>
-						<i className="zmdi zmdi-calendar" />
-					</div>
-				</div>
-				<div className="col col-5 overflow-hidden flex relative">
-					<TimePicker
-						className="overflow-hidden"
-						hintText="Time"
-						autoOk={true}
-						value={time}
-						onChange={this._onTimeChanged.bind(this)}
-					/>
-					<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>
-			</div>
-		);
-	}
-	private _shouldDisableDate(date: Date): boolean {
-		return moment(date)
-			.startOf('day')
-			.isBefore(this._earliestPickableMoment);
-	}
-	private _clearDates() {
-		this.setState({
-			dateMoment: undefined,
-			timeMoment: undefined,
-		});
-		const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec();
-		this.props.updateOrderExpiry(defaultDateTime);
-	}
-	private _onDateChanged(e: any, date: Date) {
-		const dateMoment = moment(date);
-		this.setState({
-			dateMoment,
-		});
-		const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment);
-		this.props.updateOrderExpiry(timestamp);
-	}
-	private _onTimeChanged(e: any, time: Date) {
-		const timeMoment = moment(time);
-		this.setState({
-			timeMoment,
-		});
-		const dateMoment = _.isUndefined(this.state.dateMoment) ? moment() : this.state.dateMoment;
-		const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, timeMoment);
-		this.props.updateOrderExpiry(timestamp);
-	}
+    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');
+        const expirationMoment = utils.convertToMomentFromUnixTimestamp(props.orderExpiryTimestamp);
+        const initialOrderExpiryTimestamp = utils.initialOrderExpiryUnixTimestampSec();
+        const didUserSetExpiry = !initialOrderExpiryTimestamp.eq(props.orderExpiryTimestamp);
+        this.state = {
+            dateMoment: didUserSetExpiry ? expirationMoment : undefined,
+            timeMoment: didUserSetExpiry ? expirationMoment : undefined,
+        };
+    }
+    public render() {
+        const date = this.state.dateMoment ? this.state.dateMoment.toDate() : undefined;
+        const time = this.state.timeMoment ? this.state.timeMoment.toDate() : undefined;
+        return (
+            <div className="clearfix">
+                <div className="col col-6 overflow-hidden pr3 flex relative">
+                    <DatePicker
+                        className="overflow-hidden"
+                        hintText="Date"
+                        mode="landscape"
+                        autoOk={true}
+                        value={date}
+                        onChange={this._onDateChanged.bind(this)}
+                        shouldDisableDate={this._shouldDisableDate.bind(this)}
+                    />
+                    <div className="absolute" style={{ fontSize: 20, right: 40, top: 13, pointerEvents: 'none' }}>
+                        <i className="zmdi zmdi-calendar" />
+                    </div>
+                </div>
+                <div className="col col-5 overflow-hidden flex relative">
+                    <TimePicker
+                        className="overflow-hidden"
+                        hintText="Time"
+                        autoOk={true}
+                        value={time}
+                        onChange={this._onTimeChanged.bind(this)}
+                    />
+                    <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>
+            </div>
+        );
+    }
+    private _shouldDisableDate(date: Date): boolean {
+        return moment(date)
+            .startOf('day')
+            .isBefore(this._earliestPickableMoment);
+    }
+    private _clearDates() {
+        this.setState({
+            dateMoment: undefined,
+            timeMoment: undefined,
+        });
+        const defaultDateTime = utils.initialOrderExpiryUnixTimestampSec();
+        this.props.updateOrderExpiry(defaultDateTime);
+    }
+    private _onDateChanged(e: any, date: Date) {
+        const dateMoment = moment(date);
+        this.setState({
+            dateMoment,
+        });
+        const timestamp = utils.convertToUnixTimestampSeconds(dateMoment, this.state.timeMoment);
+        this.props.updateOrderExpiry(timestamp);
+    }
+    private _onTimeChanged(e: any, time: Date) {
+        const timeMoment = moment(time);
+        this.setState({
+            timeMoment,
+        });
+        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 36d7e6140..5a3d34fe6 100644
--- a/packages/website/ts/components/inputs/hash_input.tsx
+++ b/packages/website/ts/components/inputs/hash_input.tsx
@@ -8,55 +8,55 @@ import { HashData, Styles } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 
 const styles: Styles = {
-	textField: {
-		overflow: 'hidden',
-		paddingTop: 8,
-		textOverflow: 'ellipsis',
-		whiteSpace: 'nowrap',
-	},
+    textField: {
+        overflow: 'hidden',
+        paddingTop: 8,
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+    },
 };
 
 interface HashInputProps {
-	blockchain: Blockchain;
-	blockchainIsLoaded: boolean;
-	hashData: HashData;
-	label: string;
+    blockchain: Blockchain;
+    blockchainIsLoaded: boolean;
+    hashData: HashData;
+    label: string;
 }
 
 interface HashInputState {}
 
 export class HashInput extends React.Component<HashInputProps, HashInputState> {
-	public render() {
-		const msgHashHex = this.props.blockchainIsLoaded ? this._generateMessageHashHex() : '';
-		return (
-			<div>
-				<FakeTextField label={this.props.label}>
-					<div style={styles.textField} data-tip={true} data-for="hashTooltip">
-						{msgHashHex}
-					</div>
-				</FakeTextField>
-				<ReactTooltip id="hashTooltip">{msgHashHex}</ReactTooltip>
-			</div>
-		);
-	}
-	private _generateMessageHashHex() {
-		const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists();
-		const hashData = this.props.hashData;
-		const order: Order = {
-			exchangeContractAddress,
-			expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
-			feeRecipient: hashData.feeRecipientAddress,
-			maker: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress,
-			makerFee: hashData.makerFee,
-			makerTokenAddress: hashData.depositTokenContractAddr,
-			makerTokenAmount: hashData.depositAmount,
-			salt: hashData.orderSalt,
-			taker: hashData.orderTakerAddress,
-			takerFee: hashData.takerFee,
-			takerTokenAddress: hashData.receiveTokenContractAddr,
-			takerTokenAmount: hashData.receiveAmount,
-		};
-		const orderHash = ZeroEx.getOrderHashHex(order);
-		return orderHash;
-	}
+    public render() {
+        const msgHashHex = this.props.blockchainIsLoaded ? this._generateMessageHashHex() : '';
+        return (
+            <div>
+                <FakeTextField label={this.props.label}>
+                    <div style={styles.textField} data-tip={true} data-for="hashTooltip">
+                        {msgHashHex}
+                    </div>
+                </FakeTextField>
+                <ReactTooltip id="hashTooltip">{msgHashHex}</ReactTooltip>
+            </div>
+        );
+    }
+    private _generateMessageHashHex() {
+        const exchangeContractAddress = this.props.blockchain.getExchangeContractAddressIfExists();
+        const hashData = this.props.hashData;
+        const order: Order = {
+            exchangeContractAddress,
+            expirationUnixTimestampSec: hashData.orderExpiryTimestamp,
+            feeRecipient: hashData.feeRecipientAddress,
+            maker: _.isEmpty(hashData.orderMakerAddress) ? constants.NULL_ADDRESS : hashData.orderMakerAddress,
+            makerFee: hashData.makerFee,
+            makerTokenAddress: hashData.depositTokenContractAddr,
+            makerTokenAmount: hashData.depositAmount,
+            salt: hashData.orderSalt,
+            taker: hashData.orderTakerAddress,
+            takerFee: hashData.takerFee,
+            takerTokenAddress: hashData.receiveTokenContractAddr,
+            takerTokenAmount: hashData.receiveAmount,
+        };
+        const orderHash = ZeroEx.getOrderHashHex(order);
+        return orderHash;
+    }
 }
diff --git a/packages/website/ts/components/inputs/identicon_address_input.tsx b/packages/website/ts/components/inputs/identicon_address_input.tsx
index f14cb4e9c..4cf9af64d 100644
--- a/packages/website/ts/components/inputs/identicon_address_input.tsx
+++ b/packages/website/ts/components/inputs/identicon_address_input.tsx
@@ -6,48 +6,48 @@ import { InputLabel } from 'ts/components/ui/input_label';
 import { RequiredLabel } from 'ts/components/ui/required_label';
 
 interface IdenticonAddressInputProps {
-	initialAddress: string;
-	isRequired?: boolean;
-	label: string;
-	updateOrderAddress: (address?: string) => void;
+    initialAddress: string;
+    isRequired?: boolean;
+    label: string;
+    updateOrderAddress: (address?: string) => void;
 }
 
 interface IdenticonAddressInputState {
-	address: string;
+    address: string;
 }
 
 export class IdenticonAddressInput extends React.Component<IdenticonAddressInputProps, IdenticonAddressInputState> {
-	constructor(props: IdenticonAddressInputProps) {
-		super(props);
-		this.state = {
-			address: props.initialAddress,
-		};
-	}
-	public render() {
-		const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label;
-		return (
-			<div className="relative" style={{ width: '100%' }}>
-				<InputLabel text={label} />
-				<div className="flex">
-					<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 }}>
-						<AddressInput
-							hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..."
-							shouldHideLabel={true}
-							initialAddress={this.props.initialAddress}
-							updateAddress={this._updateAddress.bind(this)}
-						/>
-					</div>
-				</div>
-			</div>
-		);
-	}
-	private _updateAddress(address?: string): void {
-		this.setState({
-			address,
-		});
-		this.props.updateOrderAddress(address);
-	}
+    constructor(props: IdenticonAddressInputProps) {
+        super(props);
+        this.state = {
+            address: props.initialAddress,
+        };
+    }
+    public render() {
+        const label = this.props.isRequired ? <RequiredLabel label={this.props.label} /> : this.props.label;
+        return (
+            <div className="relative" style={{ width: '100%' }}>
+                <InputLabel text={label} />
+                <div className="flex">
+                    <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 }}>
+                        <AddressInput
+                            hintText="e.g 0x75bE4F78AA3699B3A348c84bDB2a96c3Db..."
+                            shouldHideLabel={true}
+                            initialAddress={this.props.initialAddress}
+                            updateAddress={this._updateAddress.bind(this)}
+                        />
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    private _updateAddress(address?: string): void {
+        this.setState({
+            address,
+        });
+        this.props.updateOrderAddress(address);
+    }
 }
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 0a71b2c00..63966d759 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -8,63 +8,63 @@ import { InputErrMsg, Token, TokenState, ValidatedBigNumberCallback, WebsitePath
 import { colors } from 'ts/utils/colors';
 
 interface TokenAmountInputProps {
-	token: Token;
-	tokenState: TokenState;
-	label?: string;
-	amount?: BigNumber;
-	shouldShowIncompleteErrs: boolean;
-	shouldCheckBalance: boolean;
-	shouldCheckAllowance: boolean;
-	onChange: ValidatedBigNumberCallback;
-	onVisitBalancesPageClick?: () => void;
+    token: Token;
+    tokenState: TokenState;
+    label?: string;
+    amount?: BigNumber;
+    shouldShowIncompleteErrs: boolean;
+    shouldCheckBalance: boolean;
+    shouldCheckAllowance: boolean;
+    onChange: ValidatedBigNumberCallback;
+    onVisitBalancesPageClick?: () => void;
 }
 
 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 hasLabel = !_.isUndefined(this.props.label);
-		return (
-			<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)}
-					shouldCheckBalance={this.props.shouldCheckBalance}
-					shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
-					onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
-				/>
-				<div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
-			</div>
-		);
-	}
-	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 {
-		if (this.props.shouldCheckAllowance && amount.gt(this.props.tokenState.allowance)) {
-			return (
-				<span>
-					Insufficient allowance.{' '}
-					<Link
-						to={`${WebsitePaths.Portal}/balances`}
-						style={{ cursor: 'pointer', color: colors.darkestGrey }}
-					>
-						Set allowance
-					</Link>
-				</span>
-			);
-		} else {
-			return undefined;
-		}
-	}
+    public render() {
+        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: 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)}
+                    shouldCheckBalance={this.props.shouldCheckBalance}
+                    shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
+                    onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
+                />
+                <div style={{ paddingTop: hasLabel ? 39 : 14 }}>{this.props.token.symbol}</div>
+            </div>
+        );
+    }
+    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 {
+        if (this.props.shouldCheckAllowance && amount.gt(this.props.tokenState.allowance)) {
+            return (
+                <span>
+                    Insufficient allowance.{' '}
+                    <Link
+                        to={`${WebsitePaths.Portal}/balances`}
+                        style={{ cursor: 'pointer', color: colors.darkestGrey }}
+                    >
+                        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 3aceacb22..5df19b28c 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -12,93 +12,93 @@ import { colors } from 'ts/utils/colors';
 const TOKEN_ICON_DIMENSION = 80;
 
 interface TokenInputProps {
-	blockchain: Blockchain;
-	blockchainErr: BlockchainErrs;
-	dispatcher: Dispatcher;
-	label: string;
-	side: Side;
-	networkId: number;
-	assetToken: AssetToken;
-	updateChosenAssetToken: (side: Side, token: AssetToken) => void;
-	tokenByAddress: TokenByAddress;
-	userAddress: string;
+    blockchain: Blockchain;
+    blockchainErr: BlockchainErrs;
+    dispatcher: Dispatcher;
+    label: string;
+    side: Side;
+    networkId: number;
+    assetToken: AssetToken;
+    updateChosenAssetToken: (side: Side, token: AssetToken) => void;
+    tokenByAddress: TokenByAddress;
+    userAddress: string;
 }
 
 interface TokenInputState {
-	isHoveringIcon: boolean;
-	isPickerOpen: boolean;
-	trackCandidateTokenIfExists?: Token;
+    isHoveringIcon: boolean;
+    isPickerOpen: boolean;
+    trackCandidateTokenIfExists?: Token;
 }
 
 export class TokenInput extends React.Component<TokenInputProps, TokenInputState> {
-	constructor(props: TokenInputProps) {
-		super(props);
-		this.state = {
-			isHoveringIcon: false,
-			isPickerOpen: false,
-		};
-	}
-	public render() {
-		const token = this.props.tokenByAddress[this.props.assetToken.address];
-		const iconStyles = {
-			cursor: 'pointer',
-			opacity: this.state.isHoveringIcon ? 0.5 : 1,
-		};
-		return (
-			<div className="relative">
-				<div className="pb1">
-					<InputLabel text={this.props.label} />
-				</div>
-				<Paper
-					zDepth={1}
-					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 }}>
-						<TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
-					</div>
-					<div className="py1 center" style={{ color: colors.grey }}>
-						{token.name}
-					</div>
-				</Paper>
-				<AssetPicker
-					userAddress={this.props.userAddress}
-					networkId={this.props.networkId}
-					blockchain={this.props.blockchain}
-					dispatcher={this.props.dispatcher}
-					isOpen={this.state.isPickerOpen}
-					currentTokenAddress={this.props.assetToken.address}
-					onTokenChosen={this._onTokenChosen.bind(this)}
-					tokenByAddress={this.props.tokenByAddress}
-				/>
-			</div>
-		);
-	}
-	private _onTokenChosen(tokenAddress: string) {
-		const assetToken: AssetToken = {
-			address: tokenAddress,
-			amount: this.props.assetToken.amount,
-		};
-		this.props.updateChosenAssetToken(this.props.side, assetToken);
-		this.setState({
-			isPickerOpen: false,
-		});
-	}
-	private _onToggleHover(isHoveringIcon: boolean) {
-		this.setState({
-			isHoveringIcon,
-		});
-	}
-	private _onAssetClicked() {
-		if (this.props.blockchainErr !== BlockchainErrs.NoError) {
-			this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
-			return;
-		}
+    constructor(props: TokenInputProps) {
+        super(props);
+        this.state = {
+            isHoveringIcon: false,
+            isPickerOpen: false,
+        };
+    }
+    public render() {
+        const token = this.props.tokenByAddress[this.props.assetToken.address];
+        const iconStyles = {
+            cursor: 'pointer',
+            opacity: this.state.isHoveringIcon ? 0.5 : 1,
+        };
+        return (
+            <div className="relative">
+                <div className="pb1">
+                    <InputLabel text={this.props.label} />
+                </div>
+                <Paper
+                    zDepth={1}
+                    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 }}>
+                        <TokenIcon token={token} diameter={TOKEN_ICON_DIMENSION} />
+                    </div>
+                    <div className="py1 center" style={{ color: colors.grey }}>
+                        {token.name}
+                    </div>
+                </Paper>
+                <AssetPicker
+                    userAddress={this.props.userAddress}
+                    networkId={this.props.networkId}
+                    blockchain={this.props.blockchain}
+                    dispatcher={this.props.dispatcher}
+                    isOpen={this.state.isPickerOpen}
+                    currentTokenAddress={this.props.assetToken.address}
+                    onTokenChosen={this._onTokenChosen.bind(this)}
+                    tokenByAddress={this.props.tokenByAddress}
+                />
+            </div>
+        );
+    }
+    private _onTokenChosen(tokenAddress: string) {
+        const assetToken: AssetToken = {
+            address: tokenAddress,
+            amount: this.props.assetToken.amount,
+        };
+        this.props.updateChosenAssetToken(this.props.side, assetToken);
+        this.setState({
+            isPickerOpen: false,
+        });
+    }
+    private _onToggleHover(isHoveringIcon: boolean) {
+        this.setState({
+            isHoveringIcon,
+        });
+    }
+    private _onAssetClicked() {
+        if (this.props.blockchainErr !== BlockchainErrs.NoError) {
+            this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+            return;
+        }
 
-		this.setState({
-			isPickerOpen: true,
-		});
-	}
+        this.setState({
+            isPickerOpen: true,
+        });
+    }
 }