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

8 files changed, 316 insertions, 313 deletions

diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 963bd4388..f555ca6b1 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -1,12 +1,12 @@
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
-import {Blockchain} from 'ts/blockchain';
-import {BlockchainErrs} from 'ts/types';
-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;
@@ -31,127 +31,126 @@ export class BlockchainErrDialog extends React.Component<BlockchainErrDialogProp
         const hasWalletAddress = this.props.userAddress !== '';
         return (
             <Dialog
-                title={this.getTitle(hasWalletAddress)}
-                titleStyle={{fontWeight: 100}}
+                title={this._getTitle(hasWalletAddress)}
+                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}}>
-                    {this.renderExplanation(hasWalletAddress)}
+                <div className="pt2" style={{ color: colors.grey700 }}>
+                    {this._renderExplanation(hasWalletAddress)}
                 </div>
             </Dialog>
         );
     }
-    private getTitle(hasWalletAddress: boolean) {
-        if (this.props.blockchainErr === BlockchainErrs.A_CONTRACT_NOT_DEPLOYED_ON_NETWORK) {
+    private _getTitle(hasWalletAddress: boolean) {
+        if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
             return '0x smart contracts not found';
         } else if (!hasWalletAddress) {
             return 'Enable wallet communication';
-        } else if (this.props.blockchainErr === BlockchainErrs.DISCONNECTED_FROM_ETHEREUM_NODE) {
+        } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
             return 'Disconnected from Ethereum network';
         } else {
             return 'Unexpected error';
         }
     }
-    private renderExplanation(hasWalletAddress: boolean) {
-        if (this.props.blockchainErr === BlockchainErrs.A_CONTRACT_NOT_DEPLOYED_ON_NETWORK) {
-            return this.renderContractsNotDeployedExplanation();
+    private _renderExplanation(hasWalletAddress: boolean) {
+        if (this.props.blockchainErr === BlockchainErrs.AContractNotDeployedOnNetwork) {
+            return this._renderContractsNotDeployedExplanation();
         } else if (!hasWalletAddress) {
-            return this.renderNoWalletFoundExplanation();
-        } else if (this.props.blockchainErr === BlockchainErrs.DISCONNECTED_FROM_ETHEREUM_NODE) {
-            return this.renderDisconnectedFromNode();
+            return this._renderNoWalletFoundExplanation();
+        } else if (this.props.blockchainErr === BlockchainErrs.DisconnectedFromEthereumNode) {
+            return this._renderDisconnectedFromNode();
         } else {
-            return this.renderUnexpectedErrorExplanation();
+            return this._renderUnexpectedErrorExplanation();
         }
     }
-    private renderDisconnectedFromNode() {
+    private _renderDisconnectedFromNode() {
         return (
             <div>
-                You were disconnected from the backing Ethereum node.
-                {' '}If using <a href={constants.METAMASK_CHROME_STORE_URL} 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.MIST_DOWNLOAD_URL} 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>
-        );
+    private _renderUnexpectedErrorExplanation() {
+        return <div>We encountered an unexpected error. Please try refreshing the page.</div>;
     }
-    private renderNoWalletFoundExplanation() {
+    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.METAMASK_CHROME_STORE_URL} target="_blank">
+                    <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.PARITY_CHROME_STORE_URL} 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.isMainnetEnabled && '`parity ui` or'} `parity --chain kovan ui`{' '}
-                    in order to connect to {configs.isMainnetEnabled ? '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>
         );
     }
-    private renderContractsNotDeployedExplanation() {
+    private _renderContractsNotDeployedExplanation() {
         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.TESTNET_NETWORK_ID})
-                    {configs.isMainnetEnabled ?
-                        ` or ${constants.MAINNET_NAME} (network Id: ${constants.MAINNET_NETWORK_ID}).` :
-                        `.`
-                    }
+                    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>
                     If you are using{' '}
-                    <a href={constants.METAMASK_CHROME_STORE_URL} target="_blank">
+                    <a href={constants.URL_METAMASK_CHROME_STORE} target="_blank">
                         Metamask
                     </a>, you can switch networks in the top left corner of the extension popover.
                 </div>
                 <h4>Parity Signer</h4>
                 <div>
-                    If using the <a href={constants.PARITY_CHROME_STORE_URL} target="_blank">Parity Signer
-                    Chrome extension</a>, make sure to start your local Parity node with{' '}
-                    {configs.isMainnetEnabled ?
-                        '`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 aba5b9faf..661cc1d8c 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -1,14 +1,14 @@
-import BigNumber from 'bignumber.js';
+import { BigNumber } from '@0xproject/utils';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import RadioButton from 'material-ui/RadioButton';
-import RadioButtonGroup from 'material-ui/RadioButton/RadioButtonGroup';
 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 { 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;
     onComplete: (direction: Side, value: BigNumber) => void;
     onCancelled: () => void;
     isOpen: boolean;
@@ -19,105 +19,129 @@ interface EthWethConversionDialogProps {
 
 interface EthWethConversionDialogState {
     value?: BigNumber;
-    direction: Side;
     shouldShowIncompleteErrs: boolean;
     hasErrors: boolean;
 }
 
-export class EthWethConversionDialog extends
-    React.Component<EthWethConversionDialogProps, EthWethConversionDialogState> {
+export class EthWethConversionDialog extends React.Component<
+    EthWethConversionDialogProps,
+    EthWethConversionDialogState
+> {
     constructor() {
         super();
         this.state = {
-            direction: Side.deposit,
             shouldShowIncompleteErrs: false,
-            hasErrors: true,
+            hasErrors: false,
         };
     }
     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';
         return (
             <Dialog
-                title="I want to convert"
-                titleStyle={{fontWeight: 100}}
+                title={title}
+                titleStyle={{ fontWeight: 100 }}
                 actions={convertDialogActions}
+                contentStyle={{ width: 448 }}
                 open={this.props.isOpen}
             >
-                {this.renderConversionDialogBody()}
+                {this._renderConversionDialogBody()}
             </Dialog>
         );
     }
-    private renderConversionDialogBody() {
+    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 isWrappedVersion = this.props.direction === Side.Receive;
+        return (
+            <div>
+                <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>
+                        {this._renderCurrency(!isWrappedVersion)}
+                    </div>
+                    <div className="pt2 mx-auto" style={{ width: 245 }}>
+                        {this.props.direction === Side.Receive ? (
+                            <TokenAmountInput
+                                token={this.props.token}
+                                tokenState={this.props.tokenState}
+                                shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+                                shouldCheckBalance={true}
+                                shouldCheckAllowance={false}
+                                onChange={this._onValueChange.bind(this)}
+                                amount={this.state.value}
+                                onVisitBalancesPageClick={this.props.onCancelled}
+                            />
+                        ) : (
+                            <EthAmountInput
+                                balance={this.props.etherBalance}
+                                amount={this.state.value}
+                                onChange={this._onValueChange.bind(this)}
+                                shouldCheckBalance={true}
+                                shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+                                onVisitBalancesPageClick={this.props.onCancelled}
+                            />
+                        )}
+                        <div className="pt1" style={{ fontSize: 12 }}>
+                            <div className="left">1 ETH = 1 WETH</div>
+                            {this.props.direction === Side.Receive && (
+                                <div
+                                    className="right"
+                                    onClick={this._onMaxClick.bind(this)}
+                                    style={{
+                                        color: colors.darkBlue,
+                                        textDecoration: 'underline',
+                                        cursor: 'pointer',
+                                    }}
+                                >
+                                    Max
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+    private _renderCurrency(isWrappedVersion: boolean) {
+        const name = isWrappedVersion ? 'Wrapped Ether' : 'Ether';
+        const iconUrl = isWrappedVersion ? '/images/token_icons/ether_erc20.png' : '/images/ether.png';
+        const symbol = isWrappedVersion ? 'WETH' : 'ETH';
         return (
-            <div className="mx-auto" style={{maxWidth: 300}}>
-                <RadioButtonGroup
-                    className="pb1"
-                    defaultSelected={this.state.direction}
-                    name="conversionDirection"
-                    onChange={this.onConversionDirectionChange.bind(this)}
-                >
-                    <RadioButton
-                        className="pb1"
-                        value={Side.deposit}
-                        label="Ether -> Ether Tokens"
-                    />
-                    <RadioButton
-                        value={Side.receive}
-                        label="Ether Tokens -> Ether"
-                    />
-                </RadioButtonGroup>
-                {this.state.direction === Side.receive ?
-                    <TokenAmountInput
-                        label="Amount to convert"
-                        token={this.props.token}
-                        tokenState={this.props.tokenState}
-                        shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
-                        shouldCheckBalance={true}
-                        shouldCheckAllowance={false}
-                        onChange={this.onValueChange.bind(this)}
-                        amount={this.state.value}
-                        onVisitBalancesPageClick={this.props.onCancelled}
-                    /> :
-                    <EthAmountInput
-                        label="Amount to convert"
-                        balance={this.props.etherBalance}
-                        amount={this.state.value}
-                        onChange={this.onValueChange.bind(this)}
-                        shouldCheckBalance={true}
-                        shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
-                        onVisitBalancesPageClick={this.props.onCancelled}
-                    />
-                }
+            <div className="mx-auto pt2">
+                <div className="center" style={{ color: colors.darkBlue }}>
+                    {name}
+                </div>
+                <div className="center py2">
+                    <img src={iconUrl} style={{ width: 60 }} />
+                </div>
+                <div className="center" style={{ fontSize: 12 }}>
+                    ({symbol})
+                </div>
             </div>
         );
     }
-    private onConversionDirectionChange(e: any, direction: Side) {
+    private _onMaxClick() {
         this.setState({
-            value: undefined,
-            shouldShowIncompleteErrs: false,
-            direction,
-            hasErrors: true,
+            value: this.props.tokenState.balance,
         });
     }
-    private onValueChange(isValid: boolean, amount?: BigNumber) {
+    private _onValueChange(isValid: boolean, amount?: BigNumber) {
         this.setState({
             value: amount,
             hasErrors: !isValid,
         });
     }
-    private onConvertClick() {
+    private _onConvertClick() {
         if (this.state.hasErrors) {
             this.setState({
                 shouldShowIncompleteErrs: true,
@@ -127,10 +151,10 @@ export class EthWethConversionDialog extends
             this.setState({
                 value: undefined,
             });
-            this.props.onComplete(this.state.direction, value);
+            this.props.onComplete(this.props.direction, value);
         }
     }
-    private onCancel() {
+    private _onCancel() {
         this.setState({
             value: undefined,
         });
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index d3c95a011..60db93c52 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -1,24 +1,18 @@
-import BigNumber from 'bignumber.js';
+import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
-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 {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'`;
 
@@ -52,58 +46,45 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
             stepIndex: LedgerSteps.CONNECT,
             userAddresses: [],
             addressBalances: [],
-            derivationPath: constants.DEFAULT_DERIVATION_PATH,
+            derivationPath: configs.DEFAULT_DERIVATION_PATH,
             derivationErrMsg: '',
         };
     }
     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)}
+                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>
         );
     }
-    private renderConnectStep() {
+    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">
@@ -112,85 +93,74 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
                         labelReady="Connect to Ledger"
                         labelLoading="Connecting..."
                         labelComplete="Connected!"
-                        onClickAsyncFn={this.onConnectLedgerClickAsync.bind(this, true)}
+                        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>
         );
     }
-    private renderSelectAddressStep() {
+    private _renderSelectAddressStep() {
         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.grey500}}
+                            floatingLabelStyle={{ color: colors.grey }}
                             floatingLabelText="Update path derivation (advanced)"
                             value={this.state.derivationPath}
                             errorText={this.state.derivationErrMsg}
-                            onChange={this.onDerivationPathChanged.bind(this)}
+                            onChange={this._onDerivationPathChanged.bind(this)}
                         />
                     </div>
-                    <div className="pl2" style={{paddingTop: 28}}>
+                    <div className="pl2" style={{ paddingTop: 28 }}>
                         <LifeCycleRaisedButton
                             labelReady="Update"
                             labelLoading="Updating..."
                             labelComplete="Updated!"
-                            onClickAsyncFn={this.onFetchAddressesForDerivationPathAsync.bind(this, true)}
+                            onClickAsyncFn={this._onFetchAddressesForDerivationPathAsync.bind(this)}
                         />
                     </div>
                 </div>
             </div>
         );
     }
-    private renderAddressTableRows() {
+    private _renderAddressTableRows() {
         const rows = _.map(this.state.userAddresses, (userAddress: string, i: number) => {
             const balance = this.state.addressBalances[i];
             const addressTooltipId = `address-${userAddress}`;
             const balanceTooltipId = `balance-${userAddress}`;
-            const networkName = constants.networkNameById[this.props.networkId];
+            const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
             // We specifically prefix kovan ETH.
             // TODO: We should probably add prefixes for all networks
             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>
@@ -200,14 +170,14 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         });
         return rows;
     }
-    private onClose() {
+    private _onClose() {
         this.setState({
             didConnectFail: false,
         });
         const isOpen = false;
         this.props.toggleDialogFn(isOpen);
     }
-    private onAddressSelected(selectedRowIndexes: number[]) {
+    private _onAddressSelected(selectedRowIndexes: number[]) {
         const selectedRowIndex = selectedRowIndexes[0];
         this.props.blockchain.updateLedgerDerivationIndex(selectedRowIndex);
         const selectedAddress = this.state.userAddresses[selectedRowIndex];
@@ -221,13 +191,15 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         const isOpen = false;
         this.props.toggleDialogFn(isOpen);
     }
-    private async onFetchAddressesForDerivationPathAsync() {
+    private async _onFetchAddressesForDerivationPathAsync(): Promise<boolean> {
         const currentlySetPath = this.props.blockchain.getLedgerDerivationPathIfExists();
+        let didSucceed;
         if (currentlySetPath === this.state.derivationPath) {
-            return;
+            didSucceed = true;
+            return didSucceed;
         }
         this.props.blockchain.updateLedgerDerivationPathIfExists(this.state.derivationPath);
-        const didSucceed = await this.fetchAddressesAndBalancesAsync();
+        didSucceed = await this._fetchAddressesAndBalancesAsync();
         if (!didSucceed) {
             this.setState({
                 derivationErrMsg: 'Failed to connect to Ledger.',
@@ -235,11 +207,11 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         }
         return didSucceed;
     }
-    private async fetchAddressesAndBalancesAsync() {
+    private async _fetchAddressesAndBalancesAsync() {
         let userAddresses: string[];
         const addressBalances: BigNumber[] = [];
         try {
-            userAddresses = await this.getUserAddressesAsync();
+            userAddresses = await this._getUserAddressesAsync();
             for (const address of userAddresses) {
                 const balance = await this.props.blockchain.getBalanceInEthAsync(address);
                 addressBalances.push(balance);
@@ -257,7 +229,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         });
         return true;
     }
-    private onDerivationPathChanged(e: any, derivationPath: string) {
+    private _onDerivationPathChanged(e: any, derivationPath: string) {
         let derivationErrMsg = '';
         if (!_.startsWith(derivationPath, VALID_ETHEREUM_DERIVATION_PATH_PREFIX)) {
             derivationErrMsg = 'Must be valid Ethereum path.';
@@ -268,8 +240,8 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
             derivationErrMsg,
         });
     }
-    private async onConnectLedgerClickAsync() {
-        const didSucceed = await this.fetchAddressesAndBalancesAsync();
+    private async _onConnectLedgerClickAsync() {
+        const didSucceed = await this._fetchAddressesAndBalancesAsync();
         if (didSucceed) {
             this.setState({
                 stepIndex: LedgerSteps.SELECT_ADDRESS,
@@ -277,7 +249,7 @@ export class LedgerConfigDialog extends React.Component<LedgerConfigDialogProps,
         }
         return didSucceed;
     }
-    private async getUserAddressesAsync(): Promise<string[]> {
+    private async _getUserAddressesAsync(): Promise<string[]> {
         let userAddresses: string[];
         userAddresses = await this.props.blockchain.getUserAccountsAsync();
 
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index 1d90624ee..3ecc454a0 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -1,8 +1,7 @@
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
-import {constants} from 'ts/utils/constants';
+import { colors } from 'ts/utils/colors';
 
 interface PortalDisclaimerDialogProps {
     isOpen: boolean;
@@ -13,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.bind(this)}
-                />,
-            ]}
+            titleStyle={{ fontWeight: 100 }}
+            actions={[<FlatButton key="portalAgree" label="I Agree" onTouchTap={props.onToggleDialog} />]}
             open={props.isOpen}
-            onRequestClose={props.onToggleDialog.bind(this)}
+            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 31afc3386..b3dbce598 100644
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ b/packages/website/ts/components/dialogs/send_dialog.tsx
@@ -1,14 +1,11 @@
-import BigNumber from 'bignumber.js';
+import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import RadioButton from 'material-ui/RadioButton';
-import RadioButtonGroup from 'material-ui/RadioButton/RadioButtonGroup';
 import * as React from 'react';
-import {AddressInput} from 'ts/components/inputs/address_input';
-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 { 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;
@@ -36,37 +33,33 @@ 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()}
+                disabled={this._hasErrors()}
                 label="Send"
                 primary={true}
-                onTouchTap={this.onSendClick.bind(this)}
+                onTouchTap={this._onSendClick.bind(this)}
             />,
         ];
         return (
             <Dialog
                 title="I want to send"
-                titleStyle={{fontWeight: 100}}
+                titleStyle={{ fontWeight: 100 }}
                 actions={transferDialogActions}
                 open={this.props.isOpen}
             >
-                {this.renderSendDialogBody()}
+                {this._renderSendDialogBody()}
             </Dialog>
         );
     }
-    private renderSendDialogBody() {
+    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)}
+                        updateAddress={this._onRecipientChange.bind(this)}
                         isRequired={true}
                         label={'Recipient address'}
                         hintText={'Address'}
@@ -79,27 +72,27 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
                     shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
                     shouldCheckBalance={true}
                     shouldCheckAllowance={false}
-                    onChange={this.onValueChange.bind(this)}
+                    onChange={this._onValueChange.bind(this)}
                     amount={this.state.value}
                     onVisitBalancesPageClick={this.props.onCancelled}
                 />
             </div>
         );
     }
-    private onRecipientChange(recipient?: string) {
+    private _onRecipientChange(recipient?: string) {
         this.setState({
             shouldShowIncompleteErrs: false,
             recipient,
         });
     }
-    private onValueChange(isValid: boolean, amount?: BigNumber) {
+    private _onValueChange(isValid: boolean, amount?: BigNumber) {
         this.setState({
             isAmountValid: isValid,
             value: amount,
         });
     }
-    private onSendClick() {
-        if (this.hasErrors()) {
+    private _onSendClick() {
+        if (this._hasErrors()) {
             this.setState({
                 shouldShowIncompleteErrs: true,
             });
@@ -112,15 +105,13 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
             this.props.onComplete(this.state.recipient, value);
         }
     }
-    private onCancel() {
+    private _onCancel() {
         this.setState({
             value: undefined,
         });
         this.props.onCancelled();
     }
-    private hasErrors() {
-        return _.isUndefined(this.state.recipient) ||
-               _.isUndefined(this.state.value) ||
-               !this.state.isAmountValid;
+    private _hasErrors() {
+        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 70c7d1ab6..3f29d46f8 100644
--- a/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
+++ b/packages/website/ts/components/dialogs/track_token_confirmation_dialog.tsx
@@ -1,14 +1,12 @@
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
-import {colors} from 'material-ui/styles';
 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 {constants} from 'ts/utils/constants';
+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[];
@@ -25,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 = {
@@ -38,17 +38,17 @@ export class TrackTokenConfirmationDialog extends
         return (
             <Dialog
                 title="Tracking confirmation"
-                titleStyle={{fontWeight: 100}}
+                titleStyle={{ fontWeight: 100 }}
                 actions={[
                     <FlatButton
                         key="trackNo"
                         label="No"
-                        onTouchTap={this.onTrackConfirmationRespondedAsync.bind(this, false)}
+                        onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, false)}
                     />,
                     <FlatButton
                         key="trackYes"
                         label="Yes"
-                        onTouchTap={this.onTrackConfirmationRespondedAsync.bind(this, true)}
+                        onTouchTap={this._onTrackConfirmationRespondedAsync.bind(this, true)}
                     />,
                 ]}
                 open={this.props.isOpen}
@@ -66,7 +66,7 @@ export class TrackTokenConfirmationDialog extends
             </Dialog>
         );
     }
-    private async onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) {
+    private async _onTrackConfirmationRespondedAsync(didUserAcceptTracking: boolean) {
         if (!didUserAcceptTracking) {
             this.props.onToggleDialog(didUserAcceptTracking);
             return;
@@ -75,16 +75,17 @@ export class TrackTokenConfirmationDialog extends
             isAddingTokenToTracked: true,
         });
         for (const token of this.props.tokens) {
-            const newTokenEntry = _.assign({}, token);
+            const newTokenEntry = {
+                ...token,
+            };
 
             newTokenEntry.isTracked = true;
             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 09c32c997..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 {colors} from 'material-ui/styles';
 import * as React from 'react';
-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>
@@ -39,9 +31,9 @@ export function U2fNotSupportedDialog(props: U2fNotSupportedDialogProps) {
                         <li>
                             Firefox with{' '}
                             <a
-                                href={constants.FIREFOX_U2F_ADDON}
+                                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
new file mode 100644
index 000000000..9e91ff12d
--- /dev/null
+++ b/packages/website/ts/components/dialogs/wrapped_eth_section_notice_dialog.tsx
@@ -0,0 +1,33 @@
+import Dialog from 'material-ui/Dialog';
+import FlatButton from 'material-ui/FlatButton';
+import { colors } from 'material-ui/styles';
+import * as React from 'react';
+
+interface WrappedEthSectionNoticeDialogProps {
+    isOpen: boolean;
+    onToggleDialog: () => void;
+}
+
+export function WrappedEthSectionNoticeDialog(props: WrappedEthSectionNoticeDialogProps) {
+    return (
+        <Dialog
+            title="Dedicated Wrapped Ether Section"
+            titleStyle={{ fontWeight: 100 }}
+            actions={[
+                <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>
+                    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>
+    );
+}