Apply prettier config

8 files changed, 167 insertions, 240 deletions

diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 900d0e193..f555ca6b1 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -2,11 +2,11 @@ import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {BlockchainErrs} from 'ts/types';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
+import { Blockchain } from 'ts/blockchain';
+import { BlockchainErrs } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
 
 interface BlockchainErrDialogProps {
     blockchain: Blockchain;
@@ -32,14 +32,14 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
         return (
             <Dialog
                 title={this._getTitle(hasWalletAddress)}
-                titleStyle={{fontWeight: 100}}
+                titleStyle={{ fontWeight: 100 }}
                 actions={dialogActions}
                 open={this.props.isOpen}
-                contentStyle={{width: 400}}
+                contentStyle={{ width: 400 }}
                 onRequestClose={this.props.toggleDialogFn.bind(this.props.toggleDialogFn, false)}
                 autoScrollBodyContent={true}
             >
-                <div className="pt2" style={{color: colors.grey700}}>
+                <div className="pt2" style={{ color: colors.grey700 }}>
                     {this._renderExplanation(hasWalletAddress)}
                 </div>
             </Dialog>
@@ -70,54 +70,55 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
     private _renderDisconnectedFromNode() {
         return (
             <div>
-                You were disconnected from the backing Ethereum node.
-                {' '}If using <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
+                You were disconnected from the backing Ethereum node. If using{' '}
+                <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
                     Metamask
-                </a> or <a href={constants.URL_MIST_DOWNLOAD} target="_blank">Mist</a> try refreshing
-                {' '}the page. If using a locally hosted Ethereum node, make sure it's still running.
+                </a>{' '}
+                or{' '}
+                <a href={constants.URL_MIST_DOWNLOAD} target="_blank">
+                    Mist
+                </a>{' '}
+                try refreshing the page. If using a locally hosted Ethereum node, make sure it's still running.
             </div>
         );
     }
     private _renderUnexpectedErrorExplanation() {
-        return (
-            <div>
-                We encountered an unexpected error. Please try refreshing the page.
-            </div>
-        );
+        return <div>We encountered an unexpected error. Please try refreshing the page.</div>;
     }
     private _renderNoWalletFoundExplanation() {
         return (
             <div>
                 <div>
-                    We were unable to access an Ethereum wallet you control. In order to interact
-                    {' '}with the 0x portal dApp,
-                    we need a way to interact with one of your Ethereum wallets.
-                    {' '}There are two easy ways you can enable us to do that:
+                    We were unable to access an Ethereum wallet you control. In order to interact with the 0x portal
+                    dApp, we need a way to interact with one of your Ethereum wallets. There are two easy ways you can
+                    enable us to do that:
                 </div>
                 <h4>1. Metamask chrome extension</h4>
                 <div>
                     You can install the{' '}
                     <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
                         Metamask
-                    </a> Chrome extension Ethereum wallet. Once installed and set up, refresh this page.
+                    </a>{' '}
+                    Chrome extension Ethereum wallet. Once installed and set up, refresh this page.
                     <div className="pt1">
-                        <span className="bold">Note:</span>
-                        {' '}If you already have Metamask installed, make sure it is unlocked.
+                        <span className="bold">Note:</span> If you already have Metamask installed, make sure it is
+                        unlocked.
                     </div>
                 </div>
                 <h4>Parity Signer</h4>
                 <div>
-                    The <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">Parity Signer
-                    Chrome extension</a>{' '}lets you connect to a locally running Parity node.
-                    Make sure you have started your local Parity node with{' '}
-                    {configs.IS_MAINNET_ENABLED && '`parity ui` or'} `parity --chain kovan ui`{' '}
-                    in order to connect to {configs.IS_MAINNET_ENABLED ? 'mainnet or Kovan respectively.' : 'Kovan.'}
+                    The{' '}
+                    <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">
+                        Parity Signer Chrome extension
+                    </a>{' '}
+                    lets you connect to a locally running Parity node. Make sure you have started your local Parity node
+                    with {configs.IS_MAINNET_ENABLED && '`parity ui` or'} `parity --chain kovan ui` in order to connect
+                    to {configs.IS_MAINNET_ENABLED ? 'mainnet or Kovan respectively.' : 'Kovan.'}
                 </div>
                 <div className="pt2">
-                    <span className="bold">Note:</span>
-                    {' '}If you have done one of the above steps and are still seeing this message,
-                    {' '}we might still be unable to retrieve an Ethereum address by calling `web3.eth.accounts`.
-                    {' '}Make sure you have created at least one Ethereum address.
+                    <span className="bold">Note:</span> If you have done one of the above steps and are still seeing
+                    this message, we might still be unable to retrieve an Ethereum address by calling
+                    `web3.eth.accounts`. Make sure you have created at least one Ethereum address.
                 </div>
             </div>
         );
@@ -126,15 +127,12 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
         return (
             <div>
                 <div>
-                    The 0x smart contracts are not deployed on the Ethereum network you are
-                    {' '}currently connected to (network Id: {this.props.networkId}).
-                    {' '}In order to use the 0x portal dApp,
-                    {' '}please connect to the
-                    {' '}{constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET})
-                    {configs.IS_MAINNET_ENABLED ?
-                        ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).` :
-                        `.`
-                    }
+                    The 0x smart contracts are not deployed on the Ethereum network you are currently connected to
+                    (network Id: {this.props.networkId}). In order to use the 0x portal dApp, please connect to the{' '}
+                    {constants.TESTNET_NAME} testnet (network Id: {constants.NETWORK_ID_TESTNET})
+                    {configs.IS_MAINNET_ENABLED
+                        ? ` or ${constants.MAINNET_NAME} (network Id: ${constants.NETWORK_ID_MAINNET}).`
+                        : `.`}
                 </div>
                 <h4>Metamask</h4>
                 <div>
@@ -145,13 +143,14 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
                 </div>
                 <h4>Parity Signer</h4>
                 <div>
-                    If using the <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">Parity Signer
-                    Chrome extension</a>, make sure to start your local Parity node with{' '}
-                    {configs.IS_MAINNET_ENABLED ?
-                        '`parity ui` or `parity --chain Kovan ui` in order to connect to mainnet \
-                         or Kovan respectively.' :
-                         '`parity --chain kovan ui` in order to connect to Kovan.'
-                    }
+                    If using the{' '}
+                    <a href={constants.URL_PARITY_CHROME_STORE} target="_blank">
+                        Parity Signer Chrome extension
+                    </a>, make sure to start your local Parity node with{' '}
+                    {configs.IS_MAINNET_ENABLED
+                        ? '`parity ui` or `parity --chain Kovan ui` in order to connect to mainnet \
+                         or Kovan respectively.'
+                        : '`parity --chain kovan ui` in order to connect to Kovan.'}
                 </div>
             </div>
         );
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index d78cbdc29..ae4328976 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -2,10 +2,10 @@ import BigNumber from 'bignumber.js';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
-import {EthAmountInput} from 'ts/components/inputs/eth_amount_input';
-import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
-import {Side, Token, TokenState} from 'ts/types';
-import {colors} from 'ts/utils/colors';
+import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
+import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { Side, Token, TokenState } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 
 interface EthWethConversionDialogProps {
     direction: Side;
@@ -23,8 +23,10 @@ interface EthWethConversionDialogState {
     hasErrors: boolean;
 }
 
-export class EthWethConversionDialog extends
-    React.Component<EthWethConversionDialogProps, EthWethConversionDialogState> {
+export class EthWethConversionDialog extends React.Component<
+    EthWethConversionDialogProps,
+    EthWethConversionDialogState
+> {
     constructor() {
         super();
         this.state = {
@@ -34,25 +36,16 @@ export class EthWethConversionDialog extends
     }
     public render() {
         const convertDialogActions = [
-            <FlatButton
-                key="cancel"
-                label="Cancel"
-                onTouchTap={this._onCancel.bind(this)}
-            />,
-            <FlatButton
-                key="convert"
-                label="Convert"
-                primary={true}
-                onTouchTap={this._onConvertClick.bind(this)}
-            />,
+            <FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
+            <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />,
         ];
-        const title = this.props.direction === Side.Deposit ?  'Wrap ETH' : 'Unwrap WETH';
+        const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH';
         return (
             <Dialog
                 title={title}
-                titleStyle={{fontWeight: 100}}
+                titleStyle={{ fontWeight: 100 }}
                 actions={convertDialogActions}
-                contentStyle={{width: 448}}
+                contentStyle={{ width: 448 }}
                 open={this.props.isOpen}
             >
                 {this._renderConversionDialogBody()}
@@ -60,31 +53,24 @@ export class EthWethConversionDialog extends
         );
     }
     private _renderConversionDialogBody() {
-        const explanation = this.props.direction === Side.Deposit ?
-                            'Convert your Ether into a tokenized, tradable form.' :
-                            'Convert your Wrapped Ether back into it\'s native form.';
+        const explanation =
+            this.props.direction === Side.Deposit
+                ? 'Convert your Ether into a tokenized, tradable form.'
+                : "Convert your Wrapped Ether back into it's native form.";
         const isWrappedVersion = this.props.direction === Side.Receive;
         return (
             <div>
-                <div className="pb2">
-                    {explanation}
-                </div>
-                <div className="mx-auto" style={{maxWidth: 312}}>
+                <div className="pb2">{explanation}</div>
+                <div className="mx-auto" style={{ maxWidth: 312 }}>
                     <div className="flex">
                         {this._renderCurrency(isWrappedVersion)}
-                        <div style={{paddingTop: 68}}>
-                            <i
-                                style={{fontSize: 28, color: colors.darkBlue}}
-                                className="zmdi zmdi-arrow-right"
-                            />
+                        <div style={{ paddingTop: 68 }}>
+                            <i style={{ fontSize: 28, color: colors.darkBlue }} className="zmdi zmdi-arrow-right" />
                         </div>
                         {this._renderCurrency(!isWrappedVersion)}
                     </div>
-                    <div
-                        className="pt2 mx-auto"
-                        style={{width: 245}}
-                    >
-                        {this.props.direction === Side.Receive ?
+                    <div className="pt2 mx-auto" style={{ width: 245 }}>
+                        {this.props.direction === Side.Receive ? (
                             <TokenAmountInput
                                 token={this.props.token}
                                 tokenState={this.props.tokenState}
@@ -94,7 +80,8 @@ export class EthWethConversionDialog extends
                                 onChange={this._onValueChange.bind(this)}
                                 amount={this.state.value}
                                 onVisitBalancesPageClick={this.props.onCancelled}
-                            /> :
+                            />
+                        ) : (
                             <EthAmountInput
                                 balance={this.props.etherBalance}
                                 amount={this.state.value}
@@ -103,21 +90,22 @@ export class EthWethConversionDialog extends
                                 shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
                                 onVisitBalancesPageClick={this.props.onCancelled}
                             />
-                        }
-                        <div
-                            className="pt1"
-                            style={{fontSize: 12}}
-                        >
+                        )}
+                        <div className="pt1" style={{ fontSize: 12 }}>
                             <div className="left">1 ETH = 1 WETH</div>
-                            {this.props.direction === Side.Receive &&
+                            {this.props.direction === Side.Receive && (
                                 <div
                                     className="right"
                                     onClick={this._onMaxClick.bind(this)}
-                                    style={{color: colors.darkBlue, textDecoration: 'underline', cursor: 'pointer'}}
+                                    style={{
+                                        color: colors.darkBlue,
+                                        textDecoration: 'underline',
+                                        cursor: 'pointer',
+                                    }}
                                 >
                                     Max
                                 </div>
-                            }
+                            )}
                         </div>
                     </div>
                 </div>
@@ -130,16 +118,13 @@ export class EthWethConversionDialog extends
         const symbol = isWrappedVersion ? 'WETH' : 'ETH';
         return (
             <div className="mx-auto pt2">
-                <div
-                    className="center"
-                    style={{color: colors.darkBlue}}
-                >
+                <div className="center" style={{ color: colors.darkBlue }}>
                     {name}
                 </div>
                 <div className="center py2">
-                    <img src={iconUrl} style={{width: 60}} />
+                    <img src={iconUrl} style={{ width: 60 }} />
                 </div>
-                <div className="center" style={{fontSize: 12}}>
+                <div className="center" style={{ fontSize: 12 }}>
                     ({symbol})
                 </div>
             </div>
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index cc68ef2df..ae7117a70 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -2,24 +2,17 @@ import BigNumber from 'bignumber.js';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {
-    Table,
-    TableBody,
-    TableHeader,
-    TableHeaderColumn,
-    TableRow,
-    TableRowColumn,
-} from 'material-ui/Table';
+import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
-import {Blockchain} from 'ts/blockchain';
-import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {colors} from 'ts/utils/colors';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {utils} from 'ts/utils/utils';
+import { Blockchain } from 'ts/blockchain';
+import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { colors } from 'ts/utils/colors';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
 const VALID_ETHEREUM_DERIVATION_PATH_PREFIX = `44'/60'`;
 
@@ -59,32 +52,23 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
     }
     public render() {
         const dialogActions = [
-            <FlatButton
-                key="ledgerConnectCancel"
-                label="Cancel"
-                onTouchTap={this._onClose.bind(this)}
-            />,
+            <FlatButton key="ledgerConnectCancel" label="Cancel" onTouchTap={this._onClose.bind(this)} />,
         ];
-        const dialogTitle = this.state.stepIndex === LedgerSteps.CONNECT ?
-                            'Connect to your Ledger' :
-                            'Select desired address';
+        const dialogTitle =
+            this.state.stepIndex === LedgerSteps.CONNECT ? 'Connect to your Ledger' : 'Select desired address';
         return (
             <Dialog
                 title={dialogTitle}
-                titleStyle={{fontWeight: 100}}
+                titleStyle={{ fontWeight: 100 }}
                 actions={dialogActions}
                 open={this.props.isOpen}
                 onRequestClose={this._onClose.bind(this)}
                 autoScrollBodyContent={true}
-                bodyStyle={{paddingBottom: 0}}
+                bodyStyle={{ paddingBottom: 0 }}
             >
-                <div style={{color: colors.grey700, paddingTop: 1}}>
-                    {this.state.stepIndex === LedgerSteps.CONNECT &&
-                        this._renderConnectStep()
-                    }
-                    {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS &&
-                        this._renderSelectAddressStep()
-                    }
+                <div style={{ color: colors.grey700, paddingTop: 1 }}>
+                    {this.state.stepIndex === LedgerSteps.CONNECT && this._renderConnectStep()}
+                    {this.state.stepIndex === LedgerSteps.SELECT_ADDRESS && this._renderSelectAddressStep()}
                 </div>
             </Dialog>
         );
@@ -92,19 +76,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
     private _renderConnectStep() {
         return (
             <div>
-                <div className="h4 pt3">
-                    Follow these instructions before proceeding:
-                </div>
+                <div className="h4 pt3">Follow these instructions before proceeding:</div>
                 <ol>
-                    <li className="pb1">
-                        Connect your Ledger Nano S & Open the Ethereum application
-                    </li>
-                    <li className="pb1">
-                        Verify that Browser Support is enabled in Settings
-                    </li>
+                    <li className="pb1">Connect your Ledger Nano S & Open the Ethereum application</li>
+                    <li className="pb1">Verify that Browser Support is enabled in Settings</li>
                     <li className="pb1">
                         If no Browser Support is found in settings, verify that you have{' '}
-                        <a href="https://www.ledgerwallet.com/apps/manager" target="_blank">Firmware >1.2</a>
+                        <a href="https://www.ledgerwallet.com/apps/manager" target="_blank">
+                            Firmware >1.2
+                        </a>
                     </li>
                 </ol>
                 <div className="center pb3">
@@ -115,11 +95,11 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
                         labelComplete="Connected!"
                         onClickAsyncFn={this._onConnectLedgerClickAsync.bind(this, true)}
                     />
-                    {this.state.didConnectFail &&
-                        <div className="pt2 left-align" style={{color: colors.red200}}>
+                    {this.state.didConnectFail && (
+                        <div className="pt2 left-align" style={{ color: colors.red200 }}>
                             Failed to connect. Follow the instructions and try again.
                         </div>
-                    }
+                    )}
                 </div>
             </div>
         );
@@ -128,33 +108,28 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         return (
             <div>
                 <div>
-                    <Table
-                        bodyStyle={{height: 300}}
-                        onRowSelection={this._onAddressSelected.bind(this)}
-                    >
+                    <Table bodyStyle={{ height: 300 }} onRowSelection={this._onAddressSelected.bind(this)}>
                         <TableHeader displaySelectAll={false}>
                             <TableRow>
                                 <TableHeaderColumn colSpan={2}>Address</TableHeaderColumn>
                                 <TableHeaderColumn>Balance</TableHeaderColumn>
                             </TableRow>
                         </TableHeader>
-                        <TableBody>
-                            {this._renderAddressTableRows()}
-                        </TableBody>
+                        <TableBody>{this._renderAddressTableRows()}</TableBody>
                     </Table>
                 </div>
-                <div className="flex pt2" style={{height: 100}}>
-                    <div className="overflow-hidden" style={{width: 180}}>
+                <div className="flex pt2" style={{ height: 100 }}>
+                    <div className="overflow-hidden" style={{ width: 180 }}>
                         <TextField
                             floatingLabelFixed={true}
-                            floatingLabelStyle={{color: colors.grey}}
+                            floatingLabelStyle={{ color: colors.grey }}
                             floatingLabelText="Update path derivation (advanced)"
                             value={this.state.derivationPath}
                             errorText={this.state.derivationErrMsg}
                             onChange={this._onDerivationPathChanged.bind(this)}
                         />
                     </div>
-                    <div className="pl2" style={{paddingTop: 28}}>
+                    <div className="pl2" style={{ paddingTop: 28 }}>
                         <LifeCycleRaisedButton
                             labelReady="Update"
                             labelLoading="Updating..."
@@ -177,21 +152,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
             const isKovanNetwork = networkName === 'Kovan';
             const balanceString = `${balance.toString()} ${isKovanNetwork ? 'Kovan ' : ''}ETH`;
             return (
-                <TableRow key={userAddress} style={{height: 40}}>
+                <TableRow key={userAddress} style={{ height: 40 }}>
                     <TableRowColumn colSpan={2}>
-                        <div
-                            data-tip={true}
-                            data-for={addressTooltipId}
-                        >
+                        <div data-tip={true} data-for={addressTooltipId}>
                             {userAddress}
                         </div>
                         <ReactTooltip id={addressTooltipId}>{userAddress}</ReactTooltip>
                     </TableRowColumn>
                     <TableRowColumn>
-                        <div
-                            data-tip={true}
-                            data-for={balanceTooltipId}
-                        >
+                        <div data-tip={true} data-for={balanceTooltipId}>
                             {balanceString}
                         </div>
                         <ReactTooltip id={balanceTooltipId}>{balanceString}</ReactTooltip>
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index ffe55794f..3ecc454a0 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -1,7 +1,7 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
-import {colors} from 'ts/utils/colors';
+import { colors } from 'ts/utils/colors';
 
 interface PortalDisclaimerDialogProps {
     isOpen: boolean;
@@ -12,31 +12,23 @@ export function PortalDisclaimerDialog(props: PortalDisclaimerDialogProps) {
     return (
         <Dialog
             title="0x Portal Disclaimer"
-            titleStyle={{fontWeight: 100}}
-            actions={[
-                <FlatButton
-                    key="portalAgree"
-                    label="I Agree"
-                    onTouchTap={props.onToggleDialog}
-                />,
-            ]}
+            titleStyle={{ fontWeight: 100 }}
+            actions={[<FlatButton key="portalAgree" label="I Agree" onTouchTap={props.onToggleDialog} />]}
             open={props.isOpen}
             onRequestClose={props.onToggleDialog}
             autoScrollBodyContent={true}
             modal={true}
         >
-            <div className="pt2" style={{color: colors.grey700}}>
+            <div className="pt2" style={{ color: colors.grey700 }}>
                 <div>
-                    0x Portal is a free software-based tool intended to help users to
-                    buy and sell ERC20-compatible blockchain tokens through the 0x protocol
-                    on a purely peer-to-peer basis.  0x portal is not a regulated marketplace,
-                    exchange or intermediary of any kind, and therefore, you should only use
-                    0x portal to exchange tokens that are not securities, commodity interests,
-                    or any other form of regulated instrument. 0x has not attempted to screen
-                    or otherwise limit the tokens that you may enter in 0x Portal.  By clicking
-                    “I Agree” below, you understand that you are solely responsible for using 0x
-                    Portal and buying and selling tokens using 0x Portal in compliance with all
-                    applicable laws and regulations.
+                    0x Portal is a free software-based tool intended to help users to buy and sell ERC20-compatible
+                    blockchain tokens through the 0x protocol on a purely peer-to-peer basis. 0x portal is not a
+                    regulated marketplace, exchange or intermediary of any kind, and therefore, you should only use 0x
+                    portal to exchange tokens that are not securities, commodity interests, or any other form of
+                    regulated instrument. 0x has not attempted to screen or otherwise limit the tokens that you may
+                    enter in 0x Portal. By clicking “I Agree” below, you understand that you are solely responsible for
+                    using 0x Portal and buying and selling tokens using 0x Portal in compliance with all applicable laws
+                    and regulations.
                 </div>
             </div>
         </Dialog>
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx
index 9a85ea8b1..cd29b34e6 100644
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ b/packages/website/ts/components/dialogs/send_dialog.tsx
@@ -3,9 +3,9 @@ import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
-import {AddressInput} from 'ts/components/inputs/address_input';
-import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
-import {Token, TokenState} from 'ts/types';
+import { AddressInput } from 'ts/components/inputs/address_input';
+import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { Token, TokenState } from 'ts/types';
 
 interface SendDialogProps {
     onComplete: (recipient: string, value: BigNumber) => void;
@@ -33,11 +33,7 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
     }
     public render() {
         const transferDialogActions = [
-            <FlatButton
-                key="cancelTransfer"
-                label="Cancel"
-                onTouchTap={this._onCancel.bind(this)}
-            />,
+            <FlatButton key="cancelTransfer" label="Cancel" onTouchTap={this._onCancel.bind(this)} />,
             <FlatButton
                 key="sendTransfer"
                 disabled={this._hasErrors()}
@@ -49,7 +45,7 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
         return (
             <Dialog
                 title="I want to send"
-                titleStyle={{fontWeight: 100}}
+                titleStyle={{ fontWeight: 100 }}
                 actions={transferDialogActions}
                 open={this.props.isOpen}
             >
@@ -59,8 +55,8 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
     }
     private _renderSendDialogBody() {
         return (
-            <div className="mx-auto" style={{maxWidth: 300}}>
-                <div style={{height: 80}}>
+            <div className="mx-auto" style={{ maxWidth: 300 }}>
+                <div style={{ height: 80 }}>
                     <AddressInput
                         initialAddress={this.state.recipient}
                         updateAddress={this._onRecipientChange.bind(this)}
@@ -116,8 +112,6 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
         this.props.onCancelled();
     }
     private _hasErrors() {
-        return _.isUndefined(this.state.recipient) ||
-               _.isUndefined(this.state.value) ||
-               !this.state.isAmountValid;
+        return _.isUndefined(this.state.recipient) || _.isUndefined(this.state.value) || !this.state.isAmountValid;
     }
 }
diff --git a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
index 9e00b4110..3f29d46f8 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -2,11 +2,11 @@ import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {TrackTokenConfirmation} from 'ts/components/track_token_confirmation';
-import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage';
-import {Dispatcher} from 'ts/redux/dispatcher';
-import {Token, TokenByAddress} from 'ts/types';
+import { Blockchain } from 'ts/blockchain';
+import { TrackTokenConfirmation } from 'ts/components/track_token_confirmation';
+import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { Token, TokenByAddress } from 'ts/types';
 
 interface TrackTokenConfirmationDialogProps {
     tokens: Token[];
@@ -23,8 +23,10 @@ interface TrackTokenConfirmationDialogState {
     isAddingTokenToTracked: boolean;
 }
 
-export class TrackTokenConfirmationDialog extends
-    React.Component<TrackTokenConfirmationDialogProps, TrackTokenConfirmationDialogState> {
+export class TrackTokenConfirmationDialog extends React.Component<
+    TrackTokenConfirmationDialogProps,
+    TrackTokenConfirmationDialogState
+> {
     constructor(props: TrackTokenConfirmationDialogProps) {
         super(props);
         this.state = {
@@ -36,7 +38,7 @@ export class TrackTokenConfirmationDialog extends
         return (
             <Dialog
                 title="Tracking confirmation"
-                titleStyle={{fontWeight: 100}}
+                titleStyle={{ fontWeight: 100 }}
                 actions={[
                     <FlatButton
                         key="trackNo"
@@ -81,10 +83,9 @@ export class TrackTokenConfirmationDialog extends
             trackedTokenStorage.addTrackedTokenToUser(this.props.userAddress, this.props.networkId, newTokenEntry);
             this.props.dispatcher.updateTokenByAddress([newTokenEntry]);
 
-            const [
-                balance,
-                allowance,
-            ] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(token.address);
+            const [balance, allowance] = await this.props.blockchain.getCurrentUserTokenBalanceAndAllowanceAsync(
+                token.address,
+            );
             this.props.dispatcher.updateTokenStateByAddress({
                 [token.address]: {
                     balance,
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
index ff884a94e..098e3e26d 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -1,8 +1,8 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
-import {colors} from 'ts/utils/colors';
-import {constants} from 'ts/utils/constants';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
 
 interface U2fNotSupportedDialogProps {
     isOpen: boolean;
@@ -13,24 +13,16 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) {
     return (
         <Dialog
             title="U2F Not Supported"
-            titleStyle={{fontWeight: 100}}
-            actions={[
-                <FlatButton
-                    key="u2fNo"
-                    label="Ok"
-                    onTouchTap={props.onToggleDialog.bind(this)}
-                />,
-            ]}
+            titleStyle={{ fontWeight: 100 }}
+            actions={[<FlatButton key="u2fNo" label="Ok" onTouchTap={props.onToggleDialog.bind(this)} />]}
             open={props.isOpen}
             onRequestClose={props.onToggleDialog.bind(this)}
             autoScrollBodyContent={true}
         >
-            <div className="pt2" style={{color: colors.grey700}}>
+            <div className="pt2" style={{ color: colors.grey700 }}>
                 <div>
-                    It looks like your browser does not support U2F connections
-                    required for us to communicate with your hardware wallet.
-                    Please use a browser that supports U2F connections and try
-                    again.
+                    It looks like your browser does not support U2F connections required for us to communicate with your
+                    hardware wallet. Please use a browser that supports U2F connections and try again.
                 </div>
                 <div>
                     <ul>
@@ -41,7 +33,7 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) {
                             <a
                                 href={constants.URL_FIREFOX_U2F_ADDON}
                                 target="_blank"
-                                style={{textDecoration: 'underline'}}
+                                style={{ textDecoration: 'underline' }}
                             >
                                 this extension
                             </a>.
diff --git a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
index 3f485ce4f..9e91ff12d 100644
--- a/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
+++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
@@ -1,6 +1,6 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
+import { colors } from 'material-ui/styles';
 import * as React from 'react';
 
 interface WrappedEthSectionNoticeDialogProps {
@@ -12,25 +12,20 @@ export function WrappedEthSectionNoticeDialog(props: WrappedEthSectionNoticeDial
     return (
         <Dialog
             title="Dedicated Wrapped Ether Section"
-            titleStyle={{fontWeight: 100}}
+            titleStyle={{ fontWeight: 100 }}
             actions={[
-                <FlatButton
-                    key="acknowledgeWrapEthSection"
-                    label="Sounds good"
-                    onTouchTap={props.onToggleDialog}
-                />,
+                <FlatButton key="acknowledgeWrapEthSection" label="Sounds good" onTouchTap={props.onToggleDialog} />,
             ]}
             open={props.isOpen}
             onRequestClose={props.onToggleDialog}
             autoScrollBodyContent={true}
             modal={true}
         >
-            <div className="pt2" style={{color: colors.grey700}}>
+            <div className="pt2" style={{ color: colors.grey700 }}>
                 <div>
-                    We have recently updated the Wrapped Ether token (WETH) used by 0x Portal.
-                    Don't worry, unwrapping Ether tied to the old Wrapped Ether token can
-                    be done at any time by clicking on the "Wrap ETH" section in the menu
-                    to the left.
+                    We have recently updated the Wrapped Ether token (WETH) used by 0x Portal. Don't worry, unwrapping
+                    Ether tied to the old Wrapped Ether token can be done at any time by clicking on the "Wrap ETH"
+                    section in the menu to the left.
                 </div>
             </div>
         </Dialog>