From 93a5b3f457c1211676296840c285759007a55500 Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 30 Jan 2018 13:21:01 +0100
Subject: Fix prettier

---
 packages/website/ts/components/ui/alert.tsx        |  30 +--
 packages/website/ts/components/ui/badge.tsx        |  84 ++++----
 packages/website/ts/components/ui/copy_icon.tsx    | 126 +++++------
 .../ts/components/ui/drop_down_menu_item.tsx       | 170 +++++++--------
 .../website/ts/components/ui/ethereum_address.tsx  |  38 ++--
 .../website/ts/components/ui/etherscan_icon.tsx    |  52 ++---
 .../website/ts/components/ui/fake_text_field.tsx   |  44 ++--
 .../website/ts/components/ui/flash_message.tsx     |  52 ++---
 packages/website/ts/components/ui/help_tooltip.tsx |  28 +--
 packages/website/ts/components/ui/identicon.tsx    |  72 +++----
 packages/website/ts/components/ui/input_label.tsx  |  28 +--
 .../ts/components/ui/lifecycle_raised_button.tsx   | 166 +++++++-------
 packages/website/ts/components/ui/loading.tsx      |  52 ++---
 packages/website/ts/components/ui/menu_item.tsx    |  78 +++----
 packages/website/ts/components/ui/party.tsx        | 240 ++++++++++-----------
 .../website/ts/components/ui/required_label.tsx    |  14 +-
 .../website/ts/components/ui/simple_loading.tsx    |  18 +-
 packages/website/ts/components/ui/swap_icon.tsx    |  60 +++---
 packages/website/ts/components/ui/token_icon.tsx   |  30 +--
 19 files changed, 691 insertions(+), 691 deletions(-)

(limited to 'packages/website/ts/components/ui')

diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index 54881b499..91ef8f76e 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -3,23 +3,23 @@ import { AlertTypes } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 
 interface AlertProps {
-    type: AlertTypes;
-    message: string | React.ReactNode;
+	type: AlertTypes;
+	message: string | React.ReactNode;
 }
 
 export function Alert(props: AlertProps) {
-    const isAlert = props.type === AlertTypes.ERROR;
-    const errMsgStyles = {
-        background: isAlert ? colors.red200 : colors.lightestGreen,
-        color: colors.white,
-        marginTop: 10,
-        padding: 4,
-        paddingLeft: 8,
-    };
+	const isAlert = props.type === AlertTypes.ERROR;
+	const errMsgStyles = {
+		background: isAlert ? colors.red200 : colors.lightestGreen,
+		color: colors.white,
+		marginTop: 10,
+		padding: 4,
+		paddingLeft: 8,
+	};
 
-    return (
-        <div className="rounded center" style={errMsgStyles}>
-            {props.message}
-        </div>
-    );
+	return (
+		<div className="rounded center" style={errMsgStyles}>
+			{props.message}
+		</div>
+	);
 }
diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx
index 7f7ea006e..1d2d81af6 100644
--- a/packages/website/ts/components/ui/badge.tsx
+++ b/packages/website/ts/components/ui/badge.tsx
@@ -3,55 +3,55 @@ import * as React from 'react';
 import { Styles } from 'ts/types';
 
 const styles: Styles = {
-    badge: {
-        width: 50,
-        fontSize: 11,
-        height: 10,
-        borderRadius: 5,
-        marginTop: 25,
-        lineHeight: 0.9,
-        fontFamily: 'Roboto Mono',
-        marginLeft: 3,
-        marginRight: 3,
-    },
+	badge: {
+		width: 50,
+		fontSize: 11,
+		height: 10,
+		borderRadius: 5,
+		marginTop: 25,
+		lineHeight: 0.9,
+		fontFamily: 'Roboto Mono',
+		marginLeft: 3,
+		marginRight: 3,
+	},
 };
 
 interface BadgeProps {
-    title: string;
-    backgroundColor: string;
+	title: string;
+	backgroundColor: string;
 }
 
 interface BadgeState {
-    isHovering: boolean;
+	isHovering: boolean;
 }
 
 export class Badge extends React.Component<BadgeProps, BadgeState> {
-    constructor(props: BadgeProps) {
-        super(props);
-        this.state = {
-            isHovering: false,
-        };
-    }
-    public render() {
-        const badgeStyle = {
-            ...styles.badge,
-            backgroundColor: this.props.backgroundColor,
-            opacity: this.state.isHovering ? 0.7 : 1,
-        };
-        return (
-            <div
-                className="p1 center"
-                style={badgeStyle}
-                onMouseOver={this._setHoverState.bind(this, true)}
-                onMouseOut={this._setHoverState.bind(this, false)}
-            >
-                {this.props.title}
-            </div>
-        );
-    }
-    private _setHoverState(isHovering: boolean) {
-        this.setState({
-            isHovering,
-        });
-    }
+	constructor(props: BadgeProps) {
+		super(props);
+		this.state = {
+			isHovering: false,
+		};
+	}
+	public render() {
+		const badgeStyle = {
+			...styles.badge,
+			backgroundColor: this.props.backgroundColor,
+			opacity: this.state.isHovering ? 0.7 : 1,
+		};
+		return (
+			<div
+				className="p1 center"
+				style={badgeStyle}
+				onMouseOver={this._setHoverState.bind(this, true)}
+				onMouseOut={this._setHoverState.bind(this, false)}
+			>
+				{this.props.title}
+			</div>
+		);
+	}
+	private _setHoverState(isHovering: boolean) {
+		this.setState({
+			isHovering,
+		});
+	}
 }
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index df55e0922..72ab77e1f 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -6,74 +6,74 @@ import ReactTooltip = require('react-tooltip');
 import { colors } from 'ts/utils/colors';
 
 interface CopyIconProps {
-    data: string;
-    callToAction?: string;
+	data: string;
+	callToAction?: string;
 }
 
 interface CopyIconState {
-    isHovering: boolean;
+	isHovering: boolean;
 }
 
 export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
-    private _copyTooltipTimeoutId: number;
-    private _copyable: HTMLInputElement;
-    constructor(props: CopyIconProps) {
-        super(props);
-        this.state = {
-            isHovering: false,
-        };
-    }
-    public componentDidUpdate() {
-        // Remove tooltip if hover away
-        if (!this.state.isHovering && this._copyTooltipTimeoutId) {
-            clearInterval(this._copyTooltipTimeoutId);
-            this._hideTooltip();
-        }
-    }
-    public render() {
-        return (
-            <div className="inline-block">
-                <CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}>
-                    <div
-                        className="inline flex"
-                        style={{ cursor: 'pointer', color: colors.amber600 }}
-                        ref={this._setRefToProperty.bind(this)}
-                        data-tip={true}
-                        data-for="copy"
-                        data-event="click"
-                        data-iscapture={true} // This let's the click event continue to propogate
-                        onMouseOver={this._setHoverState.bind(this, true)}
-                        onMouseOut={this._setHoverState.bind(this, false)}
-                    >
-                        <div>
-                            <i style={{ fontSize: 15 }} className="zmdi zmdi-copy" />
-                        </div>
-                        {this.props.callToAction && <div className="pl1">{this.props.callToAction}</div>}
-                    </div>
-                </CopyToClipboard>
-                <ReactTooltip id="copy">Copied!</ReactTooltip>
-            </div>
-        );
-    }
-    private _setRefToProperty(el: HTMLInputElement) {
-        this._copyable = el;
-    }
-    private _setHoverState(isHovering: boolean) {
-        this.setState({
-            isHovering,
-        });
-    }
-    private _onCopy() {
-        if (this._copyTooltipTimeoutId) {
-            clearInterval(this._copyTooltipTimeoutId);
-        }
+	private _copyTooltipTimeoutId: number;
+	private _copyable: HTMLInputElement;
+	constructor(props: CopyIconProps) {
+		super(props);
+		this.state = {
+			isHovering: false,
+		};
+	}
+	public componentDidUpdate() {
+		// Remove tooltip if hover away
+		if (!this.state.isHovering && this._copyTooltipTimeoutId) {
+			clearInterval(this._copyTooltipTimeoutId);
+			this._hideTooltip();
+		}
+	}
+	public render() {
+		return (
+			<div className="inline-block">
+				<CopyToClipboard text={this.props.data} onCopy={this._onCopy.bind(this)}>
+					<div
+						className="inline flex"
+						style={{ cursor: 'pointer', color: colors.amber600 }}
+						ref={this._setRefToProperty.bind(this)}
+						data-tip={true}
+						data-for="copy"
+						data-event="click"
+						data-iscapture={true} // This let's the click event continue to propogate
+						onMouseOver={this._setHoverState.bind(this, true)}
+						onMouseOut={this._setHoverState.bind(this, false)}
+					>
+						<div>
+							<i style={{ fontSize: 15 }} className="zmdi zmdi-copy" />
+						</div>
+						{this.props.callToAction && <div className="pl1">{this.props.callToAction}</div>}
+					</div>
+				</CopyToClipboard>
+				<ReactTooltip id="copy">Copied!</ReactTooltip>
+			</div>
+		);
+	}
+	private _setRefToProperty(el: HTMLInputElement) {
+		this._copyable = el;
+	}
+	private _setHoverState(isHovering: boolean) {
+		this.setState({
+			isHovering,
+		});
+	}
+	private _onCopy() {
+		if (this._copyTooltipTimeoutId) {
+			clearInterval(this._copyTooltipTimeoutId);
+		}
 
-        const tooltipLifespanMs = 1000;
-        this._copyTooltipTimeoutId = window.setTimeout(() => {
-            this._hideTooltip();
-        }, tooltipLifespanMs);
-    }
-    private _hideTooltip() {
-        ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable));
-    }
+		const tooltipLifespanMs = 1000;
+		this._copyTooltipTimeoutId = window.setTimeout(() => {
+			this._hideTooltip();
+		}, tooltipLifespanMs);
+	}
+	private _hideTooltip() {
+		ReactTooltip.hide(ReactDOM.findDOMNode(this._copyable));
+	}
 }
diff --git a/packages/website/ts/components/ui/drop_down_menu_item.tsx b/packages/website/ts/components/ui/drop_down_menu_item.tsx
index a578fb4f9..64f88f318 100644
--- a/packages/website/ts/components/ui/drop_down_menu_item.tsx
+++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx
@@ -6,99 +6,99 @@ import { colors } from 'ts/utils/colors';
 
 const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
 const DEFAULT_STYLE = {
-    fontSize: 14,
+	fontSize: 14,
 };
 
 interface DropDownMenuItemProps {
-    title: string;
-    subMenuItems: React.ReactNode[];
-    style?: React.CSSProperties;
-    menuItemStyle?: React.CSSProperties;
-    isNightVersion?: boolean;
+	title: string;
+	subMenuItems: React.ReactNode[];
+	style?: React.CSSProperties;
+	menuItemStyle?: React.CSSProperties;
+	isNightVersion?: boolean;
 }
 
 interface DropDownMenuItemState {
-    isDropDownOpen: boolean;
-    anchorEl?: HTMLInputElement;
+	isDropDownOpen: boolean;
+	anchorEl?: HTMLInputElement;
 }
 
 export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, DropDownMenuItemState> {
-    public static defaultProps: Partial<DropDownMenuItemProps> = {
-        style: DEFAULT_STYLE,
-        menuItemStyle: DEFAULT_STYLE,
-        isNightVersion: false,
-    };
-    private _isHovering: boolean;
-    private _popoverCloseCheckIntervalId: number;
-    constructor(props: DropDownMenuItemProps) {
-        super(props);
-        this.state = {
-            isDropDownOpen: false,
-        };
-    }
-    public componentDidMount() {
-        this._popoverCloseCheckIntervalId = window.setInterval(() => {
-            this._checkIfShouldClosePopover();
-        }, CHECK_CLOSE_POPOVER_INTERVAL_MS);
-    }
-    public componentWillUnmount() {
-        window.clearInterval(this._popoverCloseCheckIntervalId);
-    }
-    public render() {
-        const colorStyle = this.props.isNightVersion ? 'white' : this.props.style.color;
-        return (
-            <div
-                style={{ ...this.props.style, color: colorStyle }}
-                onMouseEnter={this._onHover.bind(this)}
-                onMouseLeave={this._onHoverOff.bind(this)}
-            >
-                <div className="flex relative">
-                    <div style={{ paddingRight: 10 }}>{this.props.title}</div>
-                    <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
-                        <i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} />
-                    </div>
-                </div>
-                <Popover
-                    open={this.state.isDropDownOpen}
-                    anchorEl={this.state.anchorEl}
-                    anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
-                    targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
-                    onRequestClose={this._closePopover.bind(this)}
-                    useLayerForClickAway={false}
-                >
-                    <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>
-                        <Menu style={{ color: colors.grey }}>{this.props.subMenuItems}</Menu>
-                    </div>
-                </Popover>
-            </div>
-        );
-    }
-    private _onHover(event: React.FormEvent<HTMLInputElement>) {
-        this._isHovering = true;
-        this._checkIfShouldOpenPopover(event);
-    }
-    private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) {
-        if (this.state.isDropDownOpen) {
-            return; // noop
-        }
+	public static defaultProps: Partial<DropDownMenuItemProps> = {
+		style: DEFAULT_STYLE,
+		menuItemStyle: DEFAULT_STYLE,
+		isNightVersion: false,
+	};
+	private _isHovering: boolean;
+	private _popoverCloseCheckIntervalId: number;
+	constructor(props: DropDownMenuItemProps) {
+		super(props);
+		this.state = {
+			isDropDownOpen: false,
+		};
+	}
+	public componentDidMount() {
+		this._popoverCloseCheckIntervalId = window.setInterval(() => {
+			this._checkIfShouldClosePopover();
+		}, CHECK_CLOSE_POPOVER_INTERVAL_MS);
+	}
+	public componentWillUnmount() {
+		window.clearInterval(this._popoverCloseCheckIntervalId);
+	}
+	public render() {
+		const colorStyle = this.props.isNightVersion ? 'white' : this.props.style.color;
+		return (
+			<div
+				style={{ ...this.props.style, color: colorStyle }}
+				onMouseEnter={this._onHover.bind(this)}
+				onMouseLeave={this._onHoverOff.bind(this)}
+			>
+				<div className="flex relative">
+					<div style={{ paddingRight: 10 }}>{this.props.title}</div>
+					<div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
+						<i className="zmdi zmdi-caret-right" style={{ fontSize: 22 }} />
+					</div>
+				</div>
+				<Popover
+					open={this.state.isDropDownOpen}
+					anchorEl={this.state.anchorEl}
+					anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+					targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
+					onRequestClose={this._closePopover.bind(this)}
+					useLayerForClickAway={false}
+				>
+					<div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>
+						<Menu style={{ color: colors.grey }}>{this.props.subMenuItems}</Menu>
+					</div>
+				</Popover>
+			</div>
+		);
+	}
+	private _onHover(event: React.FormEvent<HTMLInputElement>) {
+		this._isHovering = true;
+		this._checkIfShouldOpenPopover(event);
+	}
+	private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) {
+		if (this.state.isDropDownOpen) {
+			return; // noop
+		}
 
-        this.setState({
-            isDropDownOpen: true,
-            anchorEl: event.currentTarget,
-        });
-    }
-    private _onHoverOff(event: React.FormEvent<HTMLInputElement>) {
-        this._isHovering = false;
-    }
-    private _checkIfShouldClosePopover() {
-        if (!this.state.isDropDownOpen || this._isHovering) {
-            return; // noop
-        }
-        this._closePopover();
-    }
-    private _closePopover() {
-        this.setState({
-            isDropDownOpen: false,
-        });
-    }
+		this.setState({
+			isDropDownOpen: true,
+			anchorEl: event.currentTarget,
+		});
+	}
+	private _onHoverOff(event: React.FormEvent<HTMLInputElement>) {
+		this._isHovering = false;
+	}
+	private _checkIfShouldClosePopover() {
+		if (!this.state.isDropDownOpen || this._isHovering) {
+			return; // noop
+		}
+		this._closePopover();
+	}
+	private _closePopover() {
+		this.setState({
+			isDropDownOpen: false,
+		});
+	}
 }
diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx
index b75d97e39..ba51135be 100644
--- a/packages/website/ts/components/ui/ethereum_address.tsx
+++ b/packages/website/ts/components/ui/ethereum_address.tsx
@@ -5,26 +5,26 @@ import { EtherscanLinkSuffixes } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 interface EthereumAddressProps {
-    address: string;
-    networkId: number;
+	address: string;
+	networkId: number;
 }
 
 export const EthereumAddress = (props: EthereumAddressProps) => {
-    const tooltipId = `${props.address}-ethereum-address`;
-    const truncatedAddress = utils.getAddressBeginAndEnd(props.address);
-    return (
-        <div>
-            <div className="inline" style={{ fontSize: 13 }} data-tip={true} data-for={tooltipId}>
-                {truncatedAddress}
-            </div>
-            <div className="pl1 inline">
-                <EtherScanIcon
-                    addressOrTxHash={props.address}
-                    networkId={props.networkId}
-                    etherscanLinkSuffixes={EtherscanLinkSuffixes.Address}
-                />
-            </div>
-            <ReactTooltip id={tooltipId}>{props.address}</ReactTooltip>
-        </div>
-    );
+	const tooltipId = `${props.address}-ethereum-address`;
+	const truncatedAddress = utils.getAddressBeginAndEnd(props.address);
+	return (
+		<div>
+			<div className="inline" style={{ fontSize: 13 }} data-tip={true} data-for={tooltipId}>
+				{truncatedAddress}
+			</div>
+			<div className="pl1 inline">
+				<EtherScanIcon
+					addressOrTxHash={props.address}
+					networkId={props.networkId}
+					etherscanLinkSuffixes={EtherscanLinkSuffixes.Address}
+				/>
+			</div>
+			<ReactTooltip id={tooltipId}>{props.address}</ReactTooltip>
+		</div>
+	);
 };
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 3b17bd0fa..5b224c3e1 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -6,36 +6,36 @@ import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface EtherScanIconProps {
-    addressOrTxHash: string;
-    etherscanLinkSuffixes: EtherscanLinkSuffixes;
-    networkId: number;
+	addressOrTxHash: string;
+	etherscanLinkSuffixes: EtherscanLinkSuffixes;
+	networkId: number;
 }
 
 export const EtherScanIcon = (props: EtherScanIconProps) => {
-    const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
-        props.addressOrTxHash,
-        props.networkId,
-        EtherscanLinkSuffixes.Address,
-    );
-    const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`;
-    return (
-        <div className="inline">
-            {!_.isUndefined(etherscanLinkIfExists) ? (
-                <a href={etherscanLinkIfExists} target="_blank">
-                    {renderIcon()}
-                </a>
-            ) : (
-                <div className="inline" data-tip={true} data-for={transactionTooltipId}>
-                    {renderIcon()}
-                    <ReactTooltip id={transactionTooltipId}>
-                        Your network (id: {props.networkId}) is not supported by Etherscan
-                    </ReactTooltip>
-                </div>
-            )}
-        </div>
-    );
+	const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
+		props.addressOrTxHash,
+		props.networkId,
+		EtherscanLinkSuffixes.Address,
+	);
+	const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`;
+	return (
+		<div className="inline">
+			{!_.isUndefined(etherscanLinkIfExists) ? (
+				<a href={etherscanLinkIfExists} target="_blank">
+					{renderIcon()}
+				</a>
+			) : (
+				<div className="inline" data-tip={true} data-for={transactionTooltipId}>
+					{renderIcon()}
+					<ReactTooltip id={transactionTooltipId}>
+						Your network (id: {props.networkId}) is not supported by Etherscan
+					</ReactTooltip>
+				</div>
+			)}
+		</div>
+	);
 };
 
 function renderIcon() {
-    return <i style={{ color: colors.amber600 }} className="zmdi zmdi-open-in-new" />;
+	return <i style={{ color: colors.amber600 }} className="zmdi zmdi-open-in-new" />;
 }
diff --git a/packages/website/ts/components/ui/fake_text_field.tsx b/packages/website/ts/components/ui/fake_text_field.tsx
index f3d9410f6..6d321bb46 100644
--- a/packages/website/ts/components/ui/fake_text_field.tsx
+++ b/packages/website/ts/components/ui/fake_text_field.tsx
@@ -3,32 +3,32 @@ import { InputLabel } from 'ts/components/ui/input_label';
 import { Styles } from 'ts/types';
 
 const styles: Styles = {
-    hr: {
-        borderBottom: '1px solid rgb(224, 224, 224)',
-        borderLeft: 'none rgb(224, 224, 224)',
-        borderRight: 'none rgb(224, 224, 224)',
-        borderTop: 'none rgb(224, 224, 224)',
-        bottom: 6,
-        boxSizing: 'content-box',
-        margin: 0,
-        position: 'absolute',
-        width: '100%',
-    },
+	hr: {
+		borderBottom: '1px solid rgb(224, 224, 224)',
+		borderLeft: 'none rgb(224, 224, 224)',
+		borderRight: 'none rgb(224, 224, 224)',
+		borderTop: 'none rgb(224, 224, 224)',
+		bottom: 6,
+		boxSizing: 'content-box',
+		margin: 0,
+		position: 'absolute',
+		width: '100%',
+	},
 };
 
 interface FakeTextFieldProps {
-    label?: React.ReactNode | string;
-    children?: any;
+	label?: React.ReactNode | string;
+	children?: any;
 }
 
 export function FakeTextField(props: FakeTextFieldProps) {
-    return (
-        <div className="relative">
-            {props.label !== '' && <InputLabel text={props.label} />}
-            <div className="pb2" style={{ height: 23 }}>
-                {props.children}
-            </div>
-            <hr style={styles.hr} />
-        </div>
-    );
+	return (
+		<div className="relative">
+			{props.label !== '' && <InputLabel text={props.label} />}
+			<div className="pb2" style={{ height: 23 }}>
+				{props.children}
+			</div>
+			<hr style={styles.hr} />
+		</div>
+	);
 }
diff --git a/packages/website/ts/components/ui/flash_message.tsx b/packages/website/ts/components/ui/flash_message.tsx
index 2cb1fc764..57a66d21f 100644
--- a/packages/website/ts/components/ui/flash_message.tsx
+++ b/packages/website/ts/components/ui/flash_message.tsx
@@ -6,35 +6,35 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 const SHOW_DURATION_MS = 4000;
 
 interface FlashMessageProps {
-    dispatcher: Dispatcher;
-    flashMessage?: string | React.ReactNode;
-    showDurationMs?: number;
-    bodyStyle?: React.CSSProperties;
+	dispatcher: Dispatcher;
+	flashMessage?: string | React.ReactNode;
+	showDurationMs?: number;
+	bodyStyle?: React.CSSProperties;
 }
 
 interface FlashMessageState {}
 
 export class FlashMessage extends React.Component<FlashMessageProps, FlashMessageState> {
-    public static defaultProps: Partial<FlashMessageProps> = {
-        showDurationMs: SHOW_DURATION_MS,
-        bodyStyle: {},
-    };
-    public render() {
-        if (!_.isUndefined(this.props.flashMessage)) {
-            return (
-                <Snackbar
-                    open={true}
-                    message={this.props.flashMessage}
-                    autoHideDuration={this.props.showDurationMs}
-                    onRequestClose={this._onClose.bind(this)}
-                    bodyStyle={this.props.bodyStyle}
-                />
-            );
-        } else {
-            return null;
-        }
-    }
-    private _onClose() {
-        this.props.dispatcher.hideFlashMessage();
-    }
+	public static defaultProps: Partial<FlashMessageProps> = {
+		showDurationMs: SHOW_DURATION_MS,
+		bodyStyle: {},
+	};
+	public render() {
+		if (!_.isUndefined(this.props.flashMessage)) {
+			return (
+				<Snackbar
+					open={true}
+					message={this.props.flashMessage}
+					autoHideDuration={this.props.showDurationMs}
+					onRequestClose={this._onClose.bind(this)}
+					bodyStyle={this.props.bodyStyle}
+				/>
+			);
+		} else {
+			return null;
+		}
+	}
+	private _onClose() {
+		this.props.dispatcher.hideFlashMessage();
+	}
 }
diff --git a/packages/website/ts/components/ui/help_tooltip.tsx b/packages/website/ts/components/ui/help_tooltip.tsx
index d827eebb9..c946a70cb 100644
--- a/packages/website/ts/components/ui/help_tooltip.tsx
+++ b/packages/website/ts/components/ui/help_tooltip.tsx
@@ -2,21 +2,21 @@ import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 
 interface HelpTooltipProps {
-    style?: React.CSSProperties;
-    explanation: React.ReactNode;
+	style?: React.CSSProperties;
+	explanation: React.ReactNode;
 }
 
 export const HelpTooltip = (props: HelpTooltipProps) => {
-    return (
-        <div
-            style={{ ...props.style }}
-            className="inline-block"
-            data-tip={props.explanation}
-            data-for="helpTooltip"
-            data-multiline={true}
-        >
-            <i style={{ fontSize: 16 }} className="zmdi zmdi-help" />
-            <ReactTooltip id="helpTooltip" />
-        </div>
-    );
+	return (
+		<div
+			style={{ ...props.style }}
+			className="inline-block"
+			data-tip={props.explanation}
+			data-for="helpTooltip"
+			data-multiline={true}
+		>
+			<i style={{ fontSize: 16 }} className="zmdi zmdi-help" />
+			<ReactTooltip id="helpTooltip" />
+		</div>
+	);
 };
diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx
index bad6c2a78..bad7a657d 100644
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -4,45 +4,45 @@ import * as React from 'react';
 import { constants } from 'ts/utils/constants';
 
 interface IdenticonProps {
-    address: string;
-    diameter: number;
-    style?: React.CSSProperties;
+	address: string;
+	diameter: number;
+	style?: React.CSSProperties;
 }
 
 interface IdenticonState {}
 
 export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
-    public static defaultProps: Partial<IdenticonProps> = {
-        style: {},
-    };
-    public render() {
-        let address = this.props.address;
-        if (_.isEmpty(address)) {
-            address = constants.NULL_ADDRESS;
-        }
-        const diameter = this.props.diameter;
-        const icon = blockies({
-            seed: address.toLowerCase(),
-        });
-        return (
-            <div
-                className="circle mx-auto relative transitionFix"
-                style={{
-                    width: diameter,
-                    height: diameter,
-                    overflow: 'hidden',
-                    ...this.props.style,
-                }}
-            >
-                <img
-                    src={icon.toDataURL()}
-                    style={{
-                        width: diameter,
-                        height: diameter,
-                        imageRendering: 'pixelated',
-                    }}
-                />
-            </div>
-        );
-    }
+	public static defaultProps: Partial<IdenticonProps> = {
+		style: {},
+	};
+	public render() {
+		let address = this.props.address;
+		if (_.isEmpty(address)) {
+			address = constants.NULL_ADDRESS;
+		}
+		const diameter = this.props.diameter;
+		const icon = blockies({
+			seed: address.toLowerCase(),
+		});
+		return (
+			<div
+				className="circle mx-auto relative transitionFix"
+				style={{
+					width: diameter,
+					height: diameter,
+					overflow: 'hidden',
+					...this.props.style,
+				}}
+			>
+				<img
+					src={icon.toDataURL()}
+					style={{
+						width: diameter,
+						height: diameter,
+						imageRendering: 'pixelated',
+					}}
+				/>
+			</div>
+		);
+	}
 }
diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx
index e2009ad20..1cbda6692 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -2,24 +2,24 @@ import * as React from 'react';
 import { colors } from 'ts/utils/colors';
 
 export interface InputLabelProps {
-    text: string | Element | React.ReactNode;
+	text: string | Element | React.ReactNode;
 }
 
 const styles = {
-    label: {
-        color: colors.grey,
-        fontSize: 12,
-        pointerEvents: 'none',
-        textAlign: 'left',
-        transform: 'scale(0.75) translate(0px, -28px)',
-        transformOrigin: 'left top 0px',
-        transition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms',
-        userSelect: 'none',
-        width: 240,
-        zIndex: 1,
-    },
+	label: {
+		color: colors.grey,
+		fontSize: 12,
+		pointerEvents: 'none',
+		textAlign: 'left',
+		transform: 'scale(0.75) translate(0px, -28px)',
+		transformOrigin: 'left top 0px',
+		transition: 'all 450ms cubic-bezier(0.23, 1, 0.32, 1) 0ms',
+		userSelect: 'none',
+		width: 240,
+		zIndex: 1,
+	},
 };
 
 export const InputLabel = (props: InputLabelProps) => {
-    return <label style={styles.label}>{props.text}</label>;
+	return <label style={styles.label}>{props.text}</label>;
 };
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 8ff856a75..fd23912f1 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -7,97 +7,97 @@ import { utils } from 'ts/utils/utils';
 const COMPLETE_STATE_SHOW_LENGTH_MS = 2000;
 
 enum ButtonState {
-    READY,
-    LOADING,
-    COMPLETE,
+	READY,
+	LOADING,
+	COMPLETE,
 }
 
 interface LifeCycleRaisedButtonProps {
-    isHidden?: boolean;
-    isDisabled?: boolean;
-    isPrimary?: boolean;
-    labelReady: React.ReactNode | string;
-    labelLoading: React.ReactNode | string;
-    labelComplete: React.ReactNode | string;
-    onClickAsyncFn: () => Promise<boolean>;
-    backgroundColor?: string;
-    labelColor?: string;
+	isHidden?: boolean;
+	isDisabled?: boolean;
+	isPrimary?: boolean;
+	labelReady: React.ReactNode | string;
+	labelLoading: React.ReactNode | string;
+	labelComplete: React.ReactNode | string;
+	onClickAsyncFn: () => Promise<boolean>;
+	backgroundColor?: string;
+	labelColor?: string;
 }
 
 interface LifeCycleRaisedButtonState {
-    buttonState: ButtonState;
+	buttonState: ButtonState;
 }
 
 export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> {
-    public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
-        isDisabled: false,
-        backgroundColor: colors.white,
-        labelColor: colors.darkGrey,
-    };
-    private _buttonTimeoutId: number;
-    private _didUnmount: boolean;
-    constructor(props: LifeCycleRaisedButtonProps) {
-        super(props);
-        this.state = {
-            buttonState: ButtonState.READY,
-        };
-    }
-    public componentWillUnmount() {
-        clearTimeout(this._buttonTimeoutId);
-        this._didUnmount = true;
-    }
-    public render() {
-        if (this.props.isHidden) {
-            return <span />;
-        }
+	public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
+		isDisabled: false,
+		backgroundColor: colors.white,
+		labelColor: colors.darkGrey,
+	};
+	private _buttonTimeoutId: number;
+	private _didUnmount: boolean;
+	constructor(props: LifeCycleRaisedButtonProps) {
+		super(props);
+		this.state = {
+			buttonState: ButtonState.READY,
+		};
+	}
+	public componentWillUnmount() {
+		clearTimeout(this._buttonTimeoutId);
+		this._didUnmount = true;
+	}
+	public render() {
+		if (this.props.isHidden) {
+			return <span />;
+		}
 
-        let label;
-        switch (this.state.buttonState) {
-            case ButtonState.READY:
-                label = this.props.labelReady;
-                break;
-            case ButtonState.LOADING:
-                label = this.props.labelLoading;
-                break;
-            case ButtonState.COMPLETE:
-                label = this.props.labelComplete;
-                break;
-            default:
-                throw utils.spawnSwitchErr('ButtonState', this.state.buttonState);
-        }
-        return (
-            <RaisedButton
-                primary={this.props.isPrimary}
-                label={label}
-                style={{ width: '100%' }}
-                backgroundColor={this.props.backgroundColor}
-                labelColor={this.props.labelColor}
-                onTouchTap={this.onClickAsync.bind(this)}
-                disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY}
-            />
-        );
-    }
-    public async onClickAsync() {
-        this.setState({
-            buttonState: ButtonState.LOADING,
-        });
-        const didSucceed = await this.props.onClickAsyncFn();
-        if (this._didUnmount) {
-            return; // noop since unmount called before async callback returned.
-        }
-        if (didSucceed) {
-            this.setState({
-                buttonState: ButtonState.COMPLETE,
-            });
-            this._buttonTimeoutId = window.setTimeout(() => {
-                this.setState({
-                    buttonState: ButtonState.READY,
-                });
-            }, COMPLETE_STATE_SHOW_LENGTH_MS);
-        } else {
-            this.setState({
-                buttonState: ButtonState.READY,
-            });
-        }
-    }
+		let label;
+		switch (this.state.buttonState) {
+			case ButtonState.READY:
+				label = this.props.labelReady;
+				break;
+			case ButtonState.LOADING:
+				label = this.props.labelLoading;
+				break;
+			case ButtonState.COMPLETE:
+				label = this.props.labelComplete;
+				break;
+			default:
+				throw utils.spawnSwitchErr('ButtonState', this.state.buttonState);
+		}
+		return (
+			<RaisedButton
+				primary={this.props.isPrimary}
+				label={label}
+				style={{ width: '100%' }}
+				backgroundColor={this.props.backgroundColor}
+				labelColor={this.props.labelColor}
+				onTouchTap={this.onClickAsync.bind(this)}
+				disabled={this.props.isDisabled || this.state.buttonState !== ButtonState.READY}
+			/>
+		);
+	}
+	public async onClickAsync() {
+		this.setState({
+			buttonState: ButtonState.LOADING,
+		});
+		const didSucceed = await this.props.onClickAsyncFn();
+		if (this._didUnmount) {
+			return; // noop since unmount called before async callback returned.
+		}
+		if (didSucceed) {
+			this.setState({
+				buttonState: ButtonState.COMPLETE,
+			});
+			this._buttonTimeoutId = window.setTimeout(() => {
+				this.setState({
+					buttonState: ButtonState.READY,
+				});
+			}, COMPLETE_STATE_SHOW_LENGTH_MS);
+		} else {
+			this.setState({
+				buttonState: ButtonState.READY,
+			});
+		}
+	}
 }
diff --git a/packages/website/ts/components/ui/loading.tsx b/packages/website/ts/components/ui/loading.tsx
index aa319e9e9..e9bfe3316 100644
--- a/packages/website/ts/components/ui/loading.tsx
+++ b/packages/website/ts/components/ui/loading.tsx
@@ -10,30 +10,30 @@ interface LoadingProps {}
 interface LoadingState {}
 
 export class Loading extends React.Component<LoadingProps, LoadingState> {
-    public render() {
-        return (
-            <div className="pt4 sm-px2 sm-pt2 sm-m1" style={{ height: 500 }}>
-                <Paper className="mx-auto" style={{ maxWidth: 400 }}>
-                    {utils.isUserOnMobile() ? (
-                        <img className="p1" src="/gifs/0xAnimation.gif" width="96%" />
-                    ) : (
-                        <div style={{ pointerEvents: 'none' }}>
-                            <Video
-                                autoPlay={true}
-                                loop={true}
-                                muted={true}
-                                controls={[]}
-                                poster="/images/loading_poster.png"
-                            >
-                                <source src="/videos/0xAnimation.mp4" type="video/mp4" />
-                            </Video>
-                        </div>
-                    )}
-                    <div className="center pt2" style={{ paddingBottom: 11 }}>
-                        Connecting to the blockchain...
-                    </div>
-                </Paper>
-            </div>
-        );
-    }
+	public render() {
+		return (
+			<div className="pt4 sm-px2 sm-pt2 sm-m1" style={{ height: 500 }}>
+				<Paper className="mx-auto" style={{ maxWidth: 400 }}>
+					{utils.isUserOnMobile() ? (
+						<img className="p1" src="/gifs/0xAnimation.gif" width="96%" />
+					) : (
+						<div style={{ pointerEvents: 'none' }}>
+							<Video
+								autoPlay={true}
+								loop={true}
+								muted={true}
+								controls={[]}
+								poster="/images/loading_poster.png"
+							>
+								<source src="/videos/0xAnimation.mp4" type="video/mp4" />
+							</Video>
+						</div>
+					)}
+					<div className="center pt2" style={{ paddingBottom: 11 }}>
+						Connecting to the blockchain...
+					</div>
+				</Paper>
+			</div>
+		);
+	}
 }
diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/menu_item.tsx
index 3482f436c..956b5eae8 100644
--- a/packages/website/ts/components/ui/menu_item.tsx
+++ b/packages/website/ts/components/ui/menu_item.tsx
@@ -3,49 +3,49 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 
 interface MenuItemProps {
-    to: string;
-    style?: React.CSSProperties;
-    onClick?: () => void;
-    className?: string;
+	to: string;
+	style?: React.CSSProperties;
+	onClick?: () => void;
+	className?: string;
 }
 
 interface MenuItemState {
-    isHovering: boolean;
+	isHovering: boolean;
 }
 
 export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
-    public static defaultProps: Partial<MenuItemProps> = {
-        onClick: _.noop,
-        className: '',
-    };
-    public constructor(props: MenuItemProps) {
-        super(props);
-        this.state = {
-            isHovering: false,
-        };
-    }
-    public render() {
-        const menuItemStyles = {
-            cursor: 'pointer',
-            opacity: this.state.isHovering ? 0.5 : 1,
-        };
-        return (
-            <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}>
-                <div
-                    onClick={this.props.onClick.bind(this)}
-                    className={`mx-auto ${this.props.className}`}
-                    style={menuItemStyles}
-                    onMouseEnter={this._onToggleHover.bind(this, true)}
-                    onMouseLeave={this._onToggleHover.bind(this, false)}
-                >
-                    {this.props.children}
-                </div>
-            </Link>
-        );
-    }
-    private _onToggleHover(isHovering: boolean) {
-        this.setState({
-            isHovering,
-        });
-    }
+	public static defaultProps: Partial<MenuItemProps> = {
+		onClick: _.noop,
+		className: '',
+	};
+	public constructor(props: MenuItemProps) {
+		super(props);
+		this.state = {
+			isHovering: false,
+		};
+	}
+	public render() {
+		const menuItemStyles = {
+			cursor: 'pointer',
+			opacity: this.state.isHovering ? 0.5 : 1,
+		};
+		return (
+			<Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}>
+				<div
+					onClick={this.props.onClick.bind(this)}
+					className={`mx-auto ${this.props.className}`}
+					style={menuItemStyles}
+					onMouseEnter={this._onToggleHover.bind(this, true)}
+					onMouseLeave={this._onToggleHover.bind(this, false)}
+				>
+					{this.props.children}
+				</div>
+			</Link>
+		);
+	}
+	private _onToggleHover(isHovering: boolean) {
+		this.setState({
+			isHovering,
+		});
+	}
 }
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index ca2577b61..ef3c7b425 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -11,129 +11,129 @@ const IMAGE_DIMENSION = 100;
 const IDENTICON_DIAMETER = 95;
 
 interface PartyProps {
-    label: string;
-    address: string;
-    networkId: number;
-    alternativeImage?: string;
-    identiconDiameter?: number;
-    identiconStyle?: React.CSSProperties;
-    isInTokenRegistry?: boolean;
-    hasUniqueNameAndSymbol?: boolean;
+	label: string;
+	address: string;
+	networkId: number;
+	alternativeImage?: string;
+	identiconDiameter?: number;
+	identiconStyle?: React.CSSProperties;
+	isInTokenRegistry?: boolean;
+	hasUniqueNameAndSymbol?: boolean;
 }
 
 interface PartyState {}
 
 export class Party extends React.Component<PartyProps, PartyState> {
-    public static defaultProps: Partial<PartyProps> = {
-        identiconStyle: {},
-        identiconDiameter: IDENTICON_DIAMETER,
-    };
-    public render() {
-        const label = this.props.label;
-        const address = this.props.address;
-        const identiconDiameter = this.props.identiconDiameter;
-        const emptyIdenticonStyles = {
-            width: identiconDiameter,
-            height: identiconDiameter,
-            backgroundColor: 'lightgray',
-            marginTop: 13,
-            marginBottom: 10,
-        };
-        const tokenImageStyle = {
-            width: IMAGE_DIMENSION,
-            height: IMAGE_DIMENSION,
-        };
-        const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
-            this.props.address,
-            this.props.networkId,
-            EtherscanLinkSuffixes.Address,
-        );
-        const isRegistered = this.props.isInTokenRegistry;
-        const registeredTooltipId = `${this.props.address}-${isRegistered}-registeredTooltip`;
-        const uniqueNameAndSymbolTooltipId = `${this.props.address}-${isRegistered}-uniqueTooltip`;
-        return (
-            <div style={{ overflow: 'hidden' }}>
-                <div className="pb1 center">{label}</div>
-                {_.isEmpty(address) ? (
-                    <div className="circle mx-auto" style={emptyIdenticonStyles} />
-                ) : (
-                    <a href={etherscanLinkIfExists} target="_blank">
-                        {isRegistered && !_.isUndefined(this.props.alternativeImage) ? (
-                            <img style={tokenImageStyle} src={this.props.alternativeImage} />
-                        ) : (
-                            <div className="mx-auto" style={{ height: identiconDiameter, width: identiconDiameter }}>
-                                <Identicon
-                                    address={this.props.address}
-                                    diameter={identiconDiameter}
-                                    style={this.props.identiconStyle}
-                                />
-                            </div>
-                        )}
-                    </a>
-                )}
-                <div className="mx-auto center pt1">
-                    <div style={{ height: 25 }}>
-                        <EthereumAddress address={address} networkId={this.props.networkId} />
-                    </div>
-                    {!_.isUndefined(this.props.isInTokenRegistry) && (
-                        <div>
-                            <div
-                                data-tip={true}
-                                data-for={registeredTooltipId}
-                                className="mx-auto"
-                                style={{ fontSize: 13, width: 127 }}
-                            >
-                                <span
-                                    style={{
-                                        color: isRegistered ? colors.brightGreen : colors.red500,
-                                    }}
-                                >
-                                    <i
-                                        className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`}
-                                    />
-                                </span>{' '}
-                                <span>{isRegistered ? 'Registered' : 'Unregistered'} token</span>
-                                <ReactTooltip id={registeredTooltipId}>
-                                    {isRegistered ? (
-                                        <div>
-                                            This token address was found in the token registry<br />
-                                            smart contract and is therefore believed to be a<br />
-                                            legitimate token.
-                                        </div>
-                                    ) : (
-                                        <div>
-                                            This token is not included in the token registry<br />
-                                            smart contract. We cannot guarantee the legitimacy<br />
-                                            of this token. Make sure to verify its address on Etherscan.
-                                        </div>
-                                    )}
-                                </ReactTooltip>
-                            </div>
-                        </div>
-                    )}
-                    {!_.isUndefined(this.props.hasUniqueNameAndSymbol) &&
-                        !this.props.hasUniqueNameAndSymbol && (
-                            <div>
-                                <div
-                                    data-tip={true}
-                                    data-for={uniqueNameAndSymbolTooltipId}
-                                    className="mx-auto"
-                                    style={{ fontSize: 13, width: 127 }}
-                                >
-                                    <span style={{ color: colors.red500 }}>
-                                        <i className="zmdi zmdi-alert-octagon" />
-                                    </span>{' '}
-                                    <span>Suspicious token</span>
-                                    <ReactTooltip id={uniqueNameAndSymbolTooltipId}>
-                                        This token shares it's name, symbol or both with<br />
-                                        a token in the 0x Token Registry but it has a different<br />
-                                        smart contract address. This is most likely a scam token!
-                                    </ReactTooltip>
-                                </div>
-                            </div>
-                        )}
-                </div>
-            </div>
-        );
-    }
+	public static defaultProps: Partial<PartyProps> = {
+		identiconStyle: {},
+		identiconDiameter: IDENTICON_DIAMETER,
+	};
+	public render() {
+		const label = this.props.label;
+		const address = this.props.address;
+		const identiconDiameter = this.props.identiconDiameter;
+		const emptyIdenticonStyles = {
+			width: identiconDiameter,
+			height: identiconDiameter,
+			backgroundColor: 'lightgray',
+			marginTop: 13,
+			marginBottom: 10,
+		};
+		const tokenImageStyle = {
+			width: IMAGE_DIMENSION,
+			height: IMAGE_DIMENSION,
+		};
+		const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
+			this.props.address,
+			this.props.networkId,
+			EtherscanLinkSuffixes.Address,
+		);
+		const isRegistered = this.props.isInTokenRegistry;
+		const registeredTooltipId = `${this.props.address}-${isRegistered}-registeredTooltip`;
+		const uniqueNameAndSymbolTooltipId = `${this.props.address}-${isRegistered}-uniqueTooltip`;
+		return (
+			<div style={{ overflow: 'hidden' }}>
+				<div className="pb1 center">{label}</div>
+				{_.isEmpty(address) ? (
+					<div className="circle mx-auto" style={emptyIdenticonStyles} />
+				) : (
+					<a href={etherscanLinkIfExists} target="_blank">
+						{isRegistered && !_.isUndefined(this.props.alternativeImage) ? (
+							<img style={tokenImageStyle} src={this.props.alternativeImage} />
+						) : (
+							<div className="mx-auto" style={{ height: identiconDiameter, width: identiconDiameter }}>
+								<Identicon
+									address={this.props.address}
+									diameter={identiconDiameter}
+									style={this.props.identiconStyle}
+								/>
+							</div>
+						)}
+					</a>
+				)}
+				<div className="mx-auto center pt1">
+					<div style={{ height: 25 }}>
+						<EthereumAddress address={address} networkId={this.props.networkId} />
+					</div>
+					{!_.isUndefined(this.props.isInTokenRegistry) && (
+						<div>
+							<div
+								data-tip={true}
+								data-for={registeredTooltipId}
+								className="mx-auto"
+								style={{ fontSize: 13, width: 127 }}
+							>
+								<span
+									style={{
+										color: isRegistered ? colors.brightGreen : colors.red500,
+									}}
+								>
+									<i
+										className={`zmdi ${isRegistered ? 'zmdi-check-circle' : 'zmdi-alert-triangle'}`}
+									/>
+								</span>{' '}
+								<span>{isRegistered ? 'Registered' : 'Unregistered'} token</span>
+								<ReactTooltip id={registeredTooltipId}>
+									{isRegistered ? (
+										<div>
+											This token address was found in the token registry<br />
+											smart contract and is therefore believed to be a<br />
+											legitimate token.
+										</div>
+									) : (
+										<div>
+											This token is not included in the token registry<br />
+											smart contract. We cannot guarantee the legitimacy<br />
+											of this token. Make sure to verify its address on Etherscan.
+										</div>
+									)}
+								</ReactTooltip>
+							</div>
+						</div>
+					)}
+					{!_.isUndefined(this.props.hasUniqueNameAndSymbol) &&
+						!this.props.hasUniqueNameAndSymbol && (
+							<div>
+								<div
+									data-tip={true}
+									data-for={uniqueNameAndSymbolTooltipId}
+									className="mx-auto"
+									style={{ fontSize: 13, width: 127 }}
+								>
+									<span style={{ color: colors.red500 }}>
+										<i className="zmdi zmdi-alert-octagon" />
+									</span>{' '}
+									<span>Suspicious token</span>
+									<ReactTooltip id={uniqueNameAndSymbolTooltipId}>
+										This token shares it's name, symbol or both with<br />
+										a token in the 0x Token Registry but it has a different<br />
+										smart contract address. This is most likely a scam token!
+									</ReactTooltip>
+								</div>
+							</div>
+						)}
+				</div>
+			</div>
+		);
+	}
 }
diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx
index a5e7a22ce..638683427 100644
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -2,14 +2,14 @@ import * as React from 'react';
 import { colors } from 'ts/utils/colors';
 
 export interface RequiredLabelProps {
-    label: string | React.ReactNode;
+	label: string | React.ReactNode;
 }
 
 export const RequiredLabel = (props: RequiredLabelProps) => {
-    return (
-        <span>
-            {props.label}
-            <span style={{ color: colors.red600 }}>*</span>
-        </span>
-    );
+	return (
+		<span>
+			{props.label}
+			<span style={{ color: colors.red600 }}>*</span>
+		</span>
+	);
 };
diff --git a/packages/website/ts/components/ui/simple_loading.tsx b/packages/website/ts/components/ui/simple_loading.tsx
index 81744196d..9f1fd5a13 100644
--- a/packages/website/ts/components/ui/simple_loading.tsx
+++ b/packages/website/ts/components/ui/simple_loading.tsx
@@ -2,16 +2,16 @@ import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
 
 export interface SimpleLoadingProps {
-    message: string;
+	message: string;
 }
 
 export const SimpleLoading = (props: SimpleLoadingProps) => {
-    return (
-        <div className="mx-auto pt3" style={{ maxWidth: 400, height: 409 }}>
-            <div className="relative" style={{ top: '50%', transform: 'translateY(-50%)', height: 95 }}>
-                <CircularProgress />
-                <div className="pt3 pb3">{props.message}</div>
-            </div>
-        </div>
-    );
+	return (
+		<div className="mx-auto pt3" style={{ maxWidth: 400, height: 409 }}>
+			<div className="relative" style={{ top: '50%', transform: 'translateY(-50%)', height: 95 }}>
+				<CircularProgress />
+				<div className="pt3 pb3">{props.message}</div>
+			</div>
+		</div>
+	);
 };
diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx
index c41592287..99e3450de 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -3,40 +3,40 @@ import * as React from 'react';
 import { colors } from 'ts/utils/colors';
 
 interface SwapIconProps {
-    swapTokensFn: () => void;
+	swapTokensFn: () => void;
 }
 
 interface SwapIconState {
-    isHovering: boolean;
+	isHovering: boolean;
 }
 
 export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> {
-    public constructor(props: SwapIconProps) {
-        super(props);
-        this.state = {
-            isHovering: false,
-        };
-    }
-    public render() {
-        const swapStyles = {
-            color: this.state.isHovering ? colors.amber600 : colors.amber800,
-            fontSize: 50,
-        };
-        return (
-            <div
-                className="mx-auto pt4"
-                style={{ cursor: 'pointer', height: 50, width: 37.5 }}
-                onClick={this.props.swapTokensFn}
-                onMouseEnter={this._onToggleHover.bind(this, true)}
-                onMouseLeave={this._onToggleHover.bind(this, false)}
-            >
-                <i style={swapStyles} className="zmdi zmdi-swap" />
-            </div>
-        );
-    }
-    private _onToggleHover(isHovering: boolean) {
-        this.setState({
-            isHovering,
-        });
-    }
+	public constructor(props: SwapIconProps) {
+		super(props);
+		this.state = {
+			isHovering: false,
+		};
+	}
+	public render() {
+		const swapStyles = {
+			color: this.state.isHovering ? colors.amber600 : colors.amber800,
+			fontSize: 50,
+		};
+		return (
+			<div
+				className="mx-auto pt4"
+				style={{ cursor: 'pointer', height: 50, width: 37.5 }}
+				onClick={this.props.swapTokensFn}
+				onMouseEnter={this._onToggleHover.bind(this, true)}
+				onMouseLeave={this._onToggleHover.bind(this, false)}
+			>
+				<i style={swapStyles} className="zmdi zmdi-swap" />
+			</div>
+		);
+	}
+	private _onToggleHover(isHovering: boolean) {
+		this.setState({
+			isHovering,
+		});
+	}
 }
diff --git a/packages/website/ts/components/ui/token_icon.tsx b/packages/website/ts/components/ui/token_icon.tsx
index ff57a96de..a729821ce 100644
--- a/packages/website/ts/components/ui/token_icon.tsx
+++ b/packages/website/ts/components/ui/token_icon.tsx
@@ -4,24 +4,24 @@ import { Identicon } from 'ts/components/ui/identicon';
 import { Token } from 'ts/types';
 
 interface TokenIconProps {
-    token: Token;
-    diameter: number;
+	token: Token;
+	diameter: number;
 }
 
 interface TokenIconState {}
 
 export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> {
-    public render() {
-        const token = this.props.token;
-        const diameter = this.props.diameter;
-        return (
-            <div>
-                {token.isRegistered && !_.isUndefined(token.iconUrl) ? (
-                    <img style={{ width: diameter, height: diameter }} src={token.iconUrl} />
-                ) : (
-                    <Identicon address={token.address} diameter={diameter} />
-                )}
-            </div>
-        );
-    }
+	public render() {
+		const token = this.props.token;
+		const diameter = this.props.diameter;
+		return (
+			<div>
+				{token.isRegistered && !_.isUndefined(token.iconUrl) ? (
+					<img style={{ width: diameter, height: diameter }} src={token.iconUrl} />
+				) : (
+					<Identicon address={token.address} diameter={diameter} />
+				)}
+			</div>
+		);
+	}
 }
-- 
cgit v1.2.3