Fix prettier

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 dd4131140..236bf9a00 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 da46db4f4..245784824 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 ddc434b51..5cc91994e 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 a66f92c8c..7f9747094 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 e473648d2..cb4ed7bd0 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 5a3d34fe6..36d7e6140 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 4cf9af64d..f14cb4e9c 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 63966d759..0a71b2c00 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 5df19b28c..3aceacb22 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,
+		});
+	}
 }