Merge branch 'development' into feature/portal-ledger-support

* development: (437 commits)
  Publish
  Update yarn.lock
  Update the CHANGELOG
  Fix the bug making it impossible to specify the custom ZRX address
  Fix fill/cancel order by looking for NoError instead of empty blockchainErr given the BlockchainErrs type refactor
  Add a comment about a yarn bug
  Add our mainnet and kovan nodes as backups for Portal requests
  Fix bug hiding the user info from topBar
  Add dev-utils package to top level README
  Prettier newline
  Prettier
  Allow Token symbols to be alphanumeric
  Update CHANGELOG, rebase on development
  Should not -> cannot
  Reject negative amounts in isValidBaseUnitAmount
  Re-add changelog for 0x.js
  Fix prettier
  Update yarn.lock
  Move tests to a separate folder
  Change file layout
  ...

# Conflicts:
#	packages/website/README.md

20 files changed, 229 insertions, 350 deletions

diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index 71d2388f2..54881b499 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -1,19 +1,17 @@
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
-import {AlertTypes} from 'ts/types';
-
-const CUSTOM_GREEN = 'rgb(137, 199, 116)';
+import { AlertTypes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 interface AlertProps {
     type: AlertTypes;
-    message: string|React.ReactNode;
+    message: string | React.ReactNode;
 }
 
 export function Alert(props: AlertProps) {
     const isAlert = props.type === AlertTypes.ERROR;
     const errMsgStyles = {
-        background: isAlert ? colors.red200 : CUSTOM_GREEN,
-        color: 'white',
+        background: isAlert ? colors.red200 : colors.lightestGreen,
+        color: colors.white,
         marginTop: 10,
         padding: 4,
         paddingLeft: 8,
diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx
index 15d5ea227..7f7ea006e 100644
--- a/packages/website/ts/components/ui/badge.tsx
+++ b/packages/website/ts/components/ui/badge.tsx
@@ -1,7 +1,6 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
-import {Styles} from 'ts/types';
+import { Styles } from 'ts/types';
 
 const styles: Styles = {
     badge: {
@@ -43,14 +42,14 @@ export class Badge extends React.Component<BadgeProps, BadgeState> {
             <div
                 className="p1 center"
                 style={badgeStyle}
-                onMouseOver={this.setHoverState.bind(this, true)}
-                onMouseOut={this.setHoverState.bind(this, false)}
+                onMouseOver={this._setHoverState.bind(this, true)}
+                onMouseOut={this._setHoverState.bind(this, false)}
             >
                 {this.props.title}
             </div>
         );
     }
-    private setHoverState(isHovering: boolean) {
+    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 5f8e6a060..df55e0922 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,9 +1,9 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import * as ReactDOM from 'react-dom';
 import ReactTooltip = require('react-tooltip');
+import { colors } from 'ts/utils/colors';
 
 interface CopyIconProps {
     data: string;
@@ -15,8 +15,8 @@ interface CopyIconState {
 }
 
 export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
-    private copyTooltipTimeoutId: number;
-    private copyable: HTMLInputElement;
+    private _copyTooltipTimeoutId: number;
+    private _copyable: HTMLInputElement;
     constructor(props: CopyIconProps) {
         super(props);
         this.state = {
@@ -25,57 +25,55 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
     }
     public componentDidUpdate() {
         // Remove tooltip if hover away
-        if (!this.state.isHovering && this.copyTooltipTimeoutId) {
-            clearInterval(this.copyTooltipTimeoutId);
-            this.hideTooltip();
+        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>
-                            }
+                <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>
-                    </CopyToClipboard>
+                        {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 _setRefToProperty(el: HTMLInputElement) {
+        this._copyable = el;
     }
-    private setHoverState(isHovering: boolean) {
+    private _setHoverState(isHovering: boolean) {
         this.setState({
             isHovering,
         });
     }
-    private onCopy() {
-        if (this.copyTooltipTimeoutId) {
-            clearInterval(this.copyTooltipTimeoutId);
+    private _onCopy() {
+        if (this._copyTooltipTimeoutId) {
+            clearInterval(this._copyTooltipTimeoutId);
         }
 
         const tooltipLifespanMs = 1000;
-        this.copyTooltipTimeoutId = window.setTimeout(() => {
-            this.hideTooltip();
+        this._copyTooltipTimeoutId = window.setTimeout(() => {
+            this._hideTooltip();
         }, tooltipLifespanMs);
     }
-    private hideTooltip() {
-        ReactTooltip.hide(ReactDOM.findDOMNode(this.copyable));
+    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 05b88f7ce..a578fb4f9 100644
--- a/packages/website/ts/components/ui/drop_down_menu_item.tsx
+++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx
@@ -1,16 +1,10 @@
 import * as _ from 'lodash';
 import Menu from 'material-ui/Menu';
-import MenuItem from 'material-ui/MenuItem';
 import Popover from 'material-ui/Popover';
 import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {
-    Link as ScrollLink,
-} from 'react-scroll';
-import {Styles, WebsitePaths} from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
-const CUSTOM_LIGHT_GRAY = '#848484';
 const DEFAULT_STYLE = {
     fontSize: 14,
 };
@@ -34,8 +28,8 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
         menuItemStyle: DEFAULT_STYLE,
         isNightVersion: false,
     };
-    private isHovering: boolean;
-    private popoverCloseCheckIntervalId: number;
+    private _isHovering: boolean;
+    private _popoverCloseCheckIntervalId: number;
     constructor(props: DropDownMenuItemProps) {
         super(props);
         this.state = {
@@ -43,73 +37,66 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
         };
     }
     public componentDidMount() {
-        this.popoverCloseCheckIntervalId = window.setInterval(() => {
-            this.checkIfShouldClosePopover();
+        this._popoverCloseCheckIntervalId = window.setInterval(() => {
+            this._checkIfShouldClosePopover();
         }, CHECK_CLOSE_POPOVER_INTERVAL_MS);
     }
     public componentWillUnmount() {
-        window.clearInterval(this.popoverCloseCheckIntervalId);
+        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)}
+                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 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)}
+                    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: CUSTOM_LIGHT_GRAY}}>
-                            {this.props.subMenuItems}
-                        </Menu>
+                    <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 _onHover(event: React.FormEvent<HTMLInputElement>) {
+        this._isHovering = true;
+        this._checkIfShouldOpenPopover(event);
     }
-    private checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) {
+    private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>) {
         if (this.state.isDropDownOpen) {
             return; // noop
         }
 
         this.setState({
-          isDropDownOpen: true,
-          anchorEl: event.currentTarget,
+            isDropDownOpen: true,
+            anchorEl: event.currentTarget,
         });
     }
-    private onHoverOff(event: React.FormEvent<HTMLInputElement>) {
-        this.isHovering = false;
+    private _onHoverOff(event: React.FormEvent<HTMLInputElement>) {
+        this._isHovering = false;
     }
-    private checkIfShouldClosePopover() {
-        if (!this.state.isDropDownOpen || this.isHovering) {
+    private _checkIfShouldClosePopover() {
+        if (!this.state.isDropDownOpen || this._isHovering) {
             return; // noop
         }
-        this.closePopover();
+        this._closePopover();
     }
-    private 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 b3bc0bc59..b75d97e39 100644
--- a/packages/website/ts/components/ui/ethereum_address.tsx
+++ b/packages/website/ts/components/ui/ethereum_address.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
-import {EtherScanIcon} from 'ts/components/ui/etherscan_icon';
-import {EtherscanLinkSuffixes} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { EtherScanIcon } from 'ts/components/ui/etherscan_icon';
+import { EtherscanLinkSuffixes } from 'ts/types';
+import { utils } from 'ts/utils/utils';
 
 interface EthereumAddressProps {
     address: string;
@@ -14,19 +14,14 @@ export const EthereumAddress = (props: EthereumAddressProps) => {
     const truncatedAddress = utils.getAddressBeginAndEnd(props.address);
     return (
         <div>
-            <div
-                className="inline"
-                style={{fontSize: 13}}
-                data-tip={true}
-                data-for={tooltipId}
-            >
+            <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}
+                    etherscanLinkSuffixes={EtherscanLinkSuffixes.Address}
                 />
             </div>
             <ReactTooltip id={tooltipId}>{props.address}</ReactTooltip>
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 9b4d172f1..3b17bd0fa 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -1,9 +1,9 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
-import {EtherscanLinkSuffixes} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { EtherscanLinkSuffixes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
 
 interface EtherScanIconProps {
     addressOrTxHash: string;
@@ -13,38 +13,29 @@ interface EtherScanIconProps {
 
 export const EtherScanIcon = (props: EtherScanIconProps) => {
     const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
-        props.addressOrTxHash, props.networkId, EtherscanLinkSuffixes.address,
+        props.addressOrTxHash,
+        props.networkId,
+        EtherscanLinkSuffixes.Address,
     );
     const transactionTooltipId = `${props.addressOrTxHash}-etherscan-icon-tooltip`;
     return (
         <div className="inline">
-            {!_.isUndefined(etherscanLinkIfExists) ?
-                <a
-                    href={etherscanLinkIfExists}
-                    target="_blank"
-                >
+            {!_.isUndefined(etherscanLinkIfExists) ? (
+                <a href={etherscanLinkIfExists} target="_blank">
                     {renderIcon()}
-                </a> :
-                <div
-                    className="inline"
-                    data-tip={true}
-                    data-for={transactionTooltipId}
-                >
+                </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 90bc47f01..f3d9410f6 100644
--- a/packages/website/ts/components/ui/fake_text_field.tsx
+++ b/packages/website/ts/components/ui/fake_text_field.tsx
@@ -1,7 +1,6 @@
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
-import {InputLabel} from 'ts/components/ui/input_label';
-import {Styles} from 'ts/types';
+import { InputLabel } from 'ts/components/ui/input_label';
+import { Styles } from 'ts/types';
 
 const styles: Styles = {
     hr: {
@@ -26,7 +25,7 @@ export function FakeTextField(props: FakeTextFieldProps) {
     return (
         <div className="relative">
             {props.label !== '' && <InputLabel text={props.label} />}
-            <div className="pb2" style={{height: 23}}>
+            <div className="pb2" style={{ height: 23 }}>
                 {props.children}
             </div>
             <hr style={styles.hr} />
diff --git a/packages/website/ts/components/ui/flash_message.tsx b/packages/website/ts/components/ui/flash_message.tsx
index ab4edbbb0..2cb1fc764 100644
--- a/packages/website/ts/components/ui/flash_message.tsx
+++ b/packages/website/ts/components/ui/flash_message.tsx
@@ -1,13 +1,13 @@
 import * as _ from 'lodash';
 import Snackbar from 'material-ui/Snackbar';
 import * as React from 'react';
-import {Dispatcher} from 'ts/redux/dispatcher';
+import { Dispatcher } from 'ts/redux/dispatcher';
 
 const SHOW_DURATION_MS = 4000;
 
 interface FlashMessageProps {
     dispatcher: Dispatcher;
-    flashMessage?: string|React.ReactNode;
+    flashMessage?: string | React.ReactNode;
     showDurationMs?: number;
     bodyStyle?: React.CSSProperties;
 }
@@ -26,7 +26,7 @@ export class FlashMessage extends React.Component<FlashMessageProps, FlashMessag
                     open={true}
                     message={this.props.flashMessage}
                     autoHideDuration={this.props.showDurationMs}
-                    onRequestClose={this.onClose.bind(this)}
+                    onRequestClose={this._onClose.bind(this)}
                     bodyStyle={this.props.bodyStyle}
                 />
             );
@@ -34,7 +34,7 @@ export class FlashMessage extends React.Component<FlashMessageProps, FlashMessag
             return null;
         }
     }
-    private onClose() {
+    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 003b795ef..d827eebb9 100644
--- a/packages/website/ts/components/ui/help_tooltip.tsx
+++ b/packages/website/ts/components/ui/help_tooltip.tsx
@@ -9,13 +9,13 @@ interface HelpTooltipProps {
 export const HelpTooltip = (props: HelpTooltipProps) => {
     return (
         <div
-            style={{...props.style}}
+            style={{ ...props.style }}
             className="inline-block"
             data-tip={props.explanation}
             data-for="helpTooltip"
             data-multiline={true}
         >
-            <i style={{fontSize: 16}} className="zmdi zmdi-help" />
+            <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 a741ae43b..bad6c2a78 100644
--- a/packages/website/ts/components/ui/identicon.tsx
+++ b/packages/website/ts/components/ui/identicon.tsx
@@ -1,7 +1,7 @@
 import blockies = require('blockies');
 import * as _ from 'lodash';
 import * as React from 'react';
-import {constants} from 'ts/utils/constants';
+import { constants } from 'ts/utils/constants';
 
 interface IdenticonProps {
     address: string;
@@ -27,9 +27,21 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> {
         return (
             <div
                 className="circle mx-auto relative transitionFix"
-                style={{width: diameter, height: diameter, overflow: 'hidden', ...this.props.style}}
+                style={{
+                    width: diameter,
+                    height: diameter,
+                    overflow: 'hidden',
+                    ...this.props.style,
+                }}
             >
-                <img src={icon.toDataURL()} style={{width: diameter, height: diameter, imageRendering: 'pixelated'}}/>
+                <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 852097519..e2009ad20 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -1,5 +1,5 @@
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
+import { colors } from 'ts/utils/colors';
 
 export interface InputLabelProps {
     text: string | Element | React.ReactNode;
@@ -7,7 +7,7 @@ export interface InputLabelProps {
 
 const styles = {
     label: {
-        color: colors.grey500,
+        color: colors.grey,
         fontSize: 12,
         pointerEvents: 'none',
         textAlign: 'left',
@@ -21,7 +21,5 @@ const styles = {
 };
 
 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/labeled_switcher.tsx b/packages/website/ts/components/ui/labeled_switcher.tsx
deleted file mode 100644
index 80a8fbe94..000000000
--- a/packages/website/ts/components/ui/labeled_switcher.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
-import * as React from 'react';
-
-const CUSTOM_BLUE = '#63A6F1';
-
-interface LabeledSwitcherProps {
-    labelLeft: string;
-    labelRight: string;
-    isLeftInitiallySelected: boolean;
-    onLeftLabelClickAsync: () => Promise<boolean>;
-    onRightLabelClickAsync: () => Promise<boolean>;
-}
-
-interface LabeledSwitcherState {
-    isLeftSelected: boolean;
-}
-
-export class LabeledSwitcher extends React.Component<LabeledSwitcherProps, LabeledSwitcherState> {
-    constructor(props: LabeledSwitcherProps) {
-        super(props);
-        this.state = {
-            isLeftSelected: props.isLeftInitiallySelected,
-        };
-    }
-    public render() {
-        const isLeft = true;
-        return (
-            <div
-                className="rounded clearfix"
-            >
-                {this.renderLabel(this.props.labelLeft, isLeft, this.state.isLeftSelected)}
-                {this.renderLabel(this.props.labelRight, !isLeft, !this.state.isLeftSelected)}
-            </div>
-        );
-    }
-    private renderLabel(title: string, isLeft: boolean, isSelected: boolean) {
-        const borderStyle = `2px solid ${isSelected ? '#4F8BCF' : '#DADADA'}`;
-        const style = {
-            cursor: 'pointer',
-            backgroundColor: isSelected ? CUSTOM_BLUE : colors.grey200,
-            color: isSelected ? 'white' : '#A5A5A5',
-            boxShadow: isSelected ? `inset 0px 0px 4px #4083CE` : 'inset 0px 0px 4px #F7F6F6',
-            borderTop: borderStyle,
-            borderBottom: borderStyle,
-            [isLeft ? 'borderLeft' : 'borderRight']: borderStyle,
-            paddingTop: 12,
-            paddingBottom: 12,
-        };
-        return (
-            <div
-                className={`col col-6 center p1 ${isLeft ? 'rounded-left' : 'rounded-right'}`}
-                style={style}
-                onClick={this.onLabelClickAsync.bind(this, isLeft)}
-            >
-                {title}
-            </div>
-        );
-    }
-    private async onLabelClickAsync(isLeft: boolean): Promise<void> {
-        this.setState({
-            isLeftSelected: isLeft,
-        });
-        const didSucceed = isLeft ?
-                           await this.props.onLeftLabelClickAsync() :
-                           await this.props.onRightLabelClickAsync();
-        if (!didSucceed) {
-            this.setState({
-                isLeftSelected: !isLeft,
-            });
-        }
-    }
-}
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index cba94ca8c..8ff856a75 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -1,25 +1,24 @@
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {Token} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { colors } from 'ts/utils/colors';
+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;
+    labelReady: React.ReactNode | string;
+    labelLoading: React.ReactNode | string;
+    labelComplete: React.ReactNode | string;
     onClickAsyncFn: () => Promise<boolean>;
     backgroundColor?: string;
     labelColor?: string;
@@ -29,15 +28,14 @@ interface LifeCycleRaisedButtonState {
     buttonState: ButtonState;
 }
 
-export class LifeCycleRaisedButton extends
-    React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> {
+export class LifeCycleRaisedButton extends React.Component<LifeCycleRaisedButtonProps, LifeCycleRaisedButtonState> {
     public static defaultProps: Partial<LifeCycleRaisedButtonProps> = {
         isDisabled: false,
-        backgroundColor: 'white',
-        labelColor: 'rgb(97, 97, 97)',
+        backgroundColor: colors.white,
+        labelColor: colors.darkGrey,
     };
-    private buttonTimeoutId: number;
-    private didUnmount: boolean;
+    private _buttonTimeoutId: number;
+    private _didUnmount: boolean;
     constructor(props: LifeCycleRaisedButtonProps) {
         super(props);
         this.state = {
@@ -45,8 +43,8 @@ export class LifeCycleRaisedButton extends
         };
     }
     public componentWillUnmount() {
-        clearTimeout(this.buttonTimeoutId);
-        this.didUnmount = true;
+        clearTimeout(this._buttonTimeoutId);
+        this._didUnmount = true;
     }
     public render() {
         if (this.props.isHidden) {
@@ -71,7 +69,7 @@ export class LifeCycleRaisedButton extends
             <RaisedButton
                 primary={this.props.isPrimary}
                 label={label}
-                style={{width: '100%'}}
+                style={{ width: '100%' }}
                 backgroundColor={this.props.backgroundColor}
                 labelColor={this.props.labelColor}
                 onTouchTap={this.onClickAsync.bind(this)}
@@ -84,14 +82,14 @@ export class LifeCycleRaisedButton extends
             buttonState: ButtonState.LOADING,
         });
         const didSucceed = await this.props.onClickAsyncFn();
-        if (this.didUnmount) {
+        if (this._didUnmount) {
             return; // noop since unmount called before async callback returned.
         }
         if (didSucceed) {
             this.setState({
                 buttonState: ButtonState.COMPLETE,
             });
-            this.buttonTimeoutId = window.setTimeout(() => {
+            this._buttonTimeoutId = window.setTimeout(() => {
                 this.setState({
                     buttonState: ButtonState.READY,
                 });
diff --git a/packages/website/ts/components/ui/loading.tsx b/packages/website/ts/components/ui/loading.tsx
index 83636b5ff..aa319e9e9 100644
--- a/packages/website/ts/components/ui/loading.tsx
+++ b/packages/website/ts/components/ui/loading.tsx
@@ -1,9 +1,9 @@
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
 import * as React from 'react';
-import {DefaultPlayer as Video} from 'react-html5video';
+import { DefaultPlayer as Video } from 'react-html5video';
 import 'react-html5video/dist/styles.css';
-import {utils} from 'ts/utils/utils';
+import { utils } from 'ts/utils/utils';
 
 interface LoadingProps {}
 
@@ -12,11 +12,12 @@ 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'}}>
+            <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}
@@ -27,8 +28,10 @@ export class Loading extends React.Component<LoadingProps, LoadingState> {
                                 <source src="/videos/0xAnimation.mp4" type="video/mp4" />
                             </Video>
                         </div>
-                    }
-                    <div className="center pt2" style={{paddingBottom: 11}}>Connecting to the blockchain...</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 862f28457..3482f436c 100644
--- a/packages/website/ts/components/ui/menu_item.tsx
+++ b/packages/website/ts/components/ui/menu_item.tsx
@@ -1,9 +1,6 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {Styles} from 'ts/types';
-import {constants} from 'ts/utils/constants';
+import { Link } from 'react-router-dom';
 
 interface MenuItemProps {
     to: string;
@@ -33,20 +30,20 @@ export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
             opacity: this.state.isHovering ? 0.5 : 1,
         };
         return (
-            <Link to={this.props.to} style={{textDecoration: 'none', ...this.props.style}}>
+            <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)}
+                    onMouseEnter={this._onToggleHover.bind(this, true)}
+                    onMouseLeave={this._onToggleHover.bind(this, false)}
                 >
                     {this.props.children}
                 </div>
             </Link>
         );
     }
-    private onToggleHover(isHovering: boolean) {
+    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 5bafa6071..ca2577b61 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -1,16 +1,14 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
-import {EthereumAddress} from 'ts/components/ui/ethereum_address';
-import {Identicon} from 'ts/components/ui/identicon';
-import {EtherscanLinkSuffixes} from 'ts/types';
-import {utils} from 'ts/utils/utils';
+import { EthereumAddress } from 'ts/components/ui/ethereum_address';
+import { Identicon } from 'ts/components/ui/identicon';
+import { EtherscanLinkSuffixes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { utils } from 'ts/utils/utils';
 
-const MIN_ADDRESS_WIDTH = 60;
 const IMAGE_DIMENSION = 100;
 const IDENTICON_DIAMETER = 95;
-const CHECK_MARK_GREEN = 'rgb(0, 195, 62)';
 
 interface PartyProps {
     label: string;
@@ -33,10 +31,7 @@ export class Party extends React.Component<PartyProps, PartyState> {
     public render() {
         const label = this.props.label;
         const address = this.props.address;
-        const tooltipId = `${label}-${address}-tooltip`;
         const identiconDiameter = this.props.identiconDiameter;
-        const addressWidth = identiconDiameter > MIN_ADDRESS_WIDTH ?
-                             identiconDiameter : MIN_ADDRESS_WIDTH;
         const emptyIdenticonStyles = {
             width: identiconDiameter,
             height: identiconDiameter,
@@ -49,100 +44,94 @@ export class Party extends React.Component<PartyProps, PartyState> {
             height: IMAGE_DIMENSION,
         };
         const etherscanLinkIfExists = utils.getEtherScanLinkIfExists(
-            this.props.address, this.props.networkId, EtherscanLinkSuffixes.address,
+            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 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}}>
+                {_.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) &&
+                    {!_.isUndefined(this.props.isInTokenRegistry) && (
                         <div>
                             <div
                                 data-tip={true}
                                 data-for={registeredTooltipId}
                                 className="mx-auto"
-                                style={{fontSize: 13, width: 127}}
+                                style={{ fontSize: 13, width: 127 }}
                             >
-                                <span style={{color: isRegistered ? CHECK_MARK_GREEN : colors.red500}}>
+                                <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 ?
+                                    {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>
+                                    ) : (
                                         <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>
+                    )}
+                    {!_.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>
             </div>
         );
diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx
index db69d7278..a5e7a22ce 100644
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -1,15 +1,15 @@
-import {colors} from 'material-ui/styles';
 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 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 d55d7851d..81744196d 100644
--- a/packages/website/ts/components/ui/simple_loading.tsx
+++ b/packages/website/ts/components/ui/simple_loading.tsx
@@ -1,5 +1,4 @@
 import CircularProgress from 'material-ui/CircularProgress';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
 
 export interface SimpleLoadingProps {
@@ -8,15 +7,10 @@ export interface SimpleLoadingProps {
 
 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}}
-            >
+        <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 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 2e6ae89bb..c41592287 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,7 +1,6 @@
 import * as _ from 'lodash';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
-import {constants} from 'ts/utils/constants';
+import { colors } from 'ts/utils/colors';
 
 interface SwapIconProps {
     swapTokensFn: () => void;
@@ -26,19 +25,16 @@ export class SwapIcon extends React.Component<SwapIconProps, SwapIconState> {
         return (
             <div
                 className="mx-auto pt4"
-                style={{cursor: 'pointer', height: 50, width: 37.5}}
+                style={{ cursor: 'pointer', height: 50, width: 37.5 }}
                 onClick={this.props.swapTokensFn}
-                onMouseEnter={this.onToggleHover.bind(this, true)}
-                onMouseLeave={this.onToggleHover.bind(this, false)}
+                onMouseEnter={this._onToggleHover.bind(this, true)}
+                onMouseLeave={this._onToggleHover.bind(this, false)}
             >
-                <i
-                    style={swapStyles}
-                    className="zmdi zmdi-swap"
-                />
+                <i style={swapStyles} className="zmdi zmdi-swap" />
             </div>
         );
     }
-    private onToggleHover(isHovering: boolean) {
+    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 d3a7c9a8c..ff57a96de 100644
--- a/packages/website/ts/components/ui/token_icon.tsx
+++ b/packages/website/ts/components/ui/token_icon.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Identicon} from 'ts/components/ui/identicon';
-import {Token} from 'ts/types';
+import { Identicon } from 'ts/components/ui/identicon';
+import { Token } from 'ts/types';
 
 interface TokenIconProps {
     token: Token;
@@ -16,13 +16,11 @@ export class TokenIcon extends React.Component<TokenIconProps, TokenIconState> {
         const diameter = this.props.diameter;
         return (
             <div>
-                {(token.isRegistered && !_.isUndefined(token.iconUrl)) ?
-                    <img
-                        style={{width: diameter, height: diameter}}
-                        src={token.iconUrl}
-                    /> :
+                {token.isRegistered && !_.isUndefined(token.iconUrl) ? (
+                    <img style={{ width: diameter, height: diameter }} src={token.iconUrl} />
+                ) : (
                     <Identicon address={token.address} diameter={diameter} />
-                }
+                )}
             </div>
         );
     }