Merge pull request #291 from 0xProject/feature/prettier

Use prettier

19 files changed, 173 insertions, 200 deletions

diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index bc65d0f0f..54881b499 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import {AlertTypes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+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) {
diff --git a/packages/website/ts/components/ui/badge.tsx b/packages/website/ts/components/ui/badge.tsx
index fae51860e..7f7ea006e 100644
--- a/packages/website/ts/components/ui/badge.tsx
+++ b/packages/website/ts/components/ui/badge.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Styles} from 'ts/types';
+import { Styles } from 'ts/types';
 
 const styles: Styles = {
     badge: {
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index 754f5d456..df55e0922 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -3,7 +3,7 @@ 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';
+import { colors } from 'ts/utils/colors';
 
 interface CopyIconProps {
     data: string;
@@ -33,26 +33,24 @@ export class CopyIcon extends React.Component<CopyIconProps, CopyIconState> {
     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>
         );
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 ee26e004e..a578fb4f9 100644
--- a/packages/website/ts/components/ui/drop_down_menu_item.tsx
+++ b/packages/website/ts/components/ui/drop_down_menu_item.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import Menu from 'material-ui/Menu';
 import Popover from 'material-ui/Popover';
 import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
 
 const CHECK_CLOSE_POPOVER_INTERVAL_MS = 300;
 const DEFAULT_STYLE = {
@@ -48,33 +48,26 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
         const colorStyle = this.props.isNightVersion ? 'white' : this.props.style.color;
         return (
             <div
-                style={{...this.props.style, color: colorStyle}}
+                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'}}
+                    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 onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>
+                        <Menu style={{ color: colors.grey }}>{this.props.subMenuItems}</Menu>
                     </div>
                 </Popover>
             </div>
@@ -90,8 +83,8 @@ export class DropDownMenuItem extends React.Component<DropDownMenuItemProps, Dro
         }
 
         this.setState({
-          isDropDownOpen: true,
-          anchorEl: event.currentTarget,
+            isDropDownOpen: true,
+            anchorEl: event.currentTarget,
         });
     }
     private _onHoverOff(event: React.FormEvent<HTMLInputElement>) {
diff --git a/packages/website/ts/components/ui/ethereum_address.tsx b/packages/website/ts/components/ui/ethereum_address.tsx
index d56840689..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,12 +14,7 @@ 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">
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 111d5d478..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 * as React from 'react';
 import ReactTooltip = require('react-tooltip');
-import {EtherscanLinkSuffixes} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-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 8ee4349a2..f3d9410f6 100644
--- a/packages/website/ts/components/ui/fake_text_field.tsx
+++ b/packages/website/ts/components/ui/fake_text_field.tsx
@@ -1,6 +1,6 @@
 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: {
@@ -25,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 c0c00463e..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;
 }
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 bfa1da280..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 * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
 
 export interface InputLabelProps {
     text: string | Element | React.ReactNode;
@@ -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/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 852975ef6..8ff856a75 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -1,24 +1,24 @@
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
-import {colors} from 'ts/utils/colors';
-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;
@@ -28,8 +28,7 @@ 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: colors.white,
@@ -70,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)}
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 3ec993476..3482f436c 100644
--- a/packages/website/ts/components/ui/menu_item.tsx
+++ b/packages/website/ts/components/ui/menu_item.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 interface MenuItemProps {
     to: string;
@@ -30,7 +30,7 @@ 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}`}
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index 918d42a3b..ca2577b61 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -1,11 +1,11 @@
 import * as _ from 'lodash';
 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 {colors} from 'ts/utils/colors';
-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 IMAGE_DIMENSION = 100;
 const IDENTICON_DIAMETER = 95;
@@ -44,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 ? colors.brightGreen : 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 979b06d66..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 * as React from 'react';
-import {colors} from 'ts/utils/colors';
+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 fa548f996..81744196d 100644
--- a/packages/website/ts/components/ui/simple_loading.tsx
+++ b/packages/website/ts/components/ui/simple_loading.tsx
@@ -7,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 2adefbda3..c41592287 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,6 +1,6 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
 
 interface SwapIconProps {
     swapTokensFn: () => void;
@@ -25,15 +25,12 @@ 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)}
             >
-                <i
-                    style={swapStyles}
-                    className="zmdi zmdi-swap"
-                />
+                <i style={swapStyles} className="zmdi zmdi-swap" />
             </div>
         );
     }
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>
         );
     }