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

1 files changed, 99 insertions, 143 deletions

diff --git a/packages/website/ts/components/top_bar.tsx b/packages/website/ts/components/top_bar.tsx
index 4398fe667..11d3e7cc2 100644
--- a/packages/website/ts/components/top_bar.tsx
+++ b/packages/website/ts/components/top_bar.tsx
@@ -1,29 +1,18 @@
 import * as _ from 'lodash';
-import AppBar from 'material-ui/AppBar';
 import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
-import {colors} from 'material-ui/styles';
 import * as React from 'react';
-import {Link} from 'react-router-dom';
-import {HashLink} from 'react-router-hash-link';
-import {
-    animateScroll,
-    Link as ScrollLink,
-} from 'react-scroll';
+import { Link } from 'react-router-dom';
 import ReactTooltip = require('react-tooltip');
-import {PortalMenu} from 'ts/components/portal_menu';
-import {TopBarMenuItem} from 'ts/components/top_bar_menu_item';
-import {DropDownMenuItem} from 'ts/components/ui/drop_down_menu_item';
-import {Identicon} from 'ts/components/ui/identicon';
-import {DocsInfo} from 'ts/pages/documentation/docs_info';
-import {NestedSidebarMenu} from 'ts/pages/shared/nested_sidebar_menu';
-import {DocsMenu, MenuSubsectionsBySection, Styles, TypeDocNode, WebsitePaths} from 'ts/types';
-import {configs} from 'ts/utils/configs';
-import {constants} from 'ts/utils/constants';
-import {typeDocUtils} from 'ts/utils/typedoc_utils';
-
-const CUSTOM_DARK_GRAY = '#231F20';
-const SECTION_HEADER_COLOR = 'rgb(234, 234, 234)';
+import { PortalMenu } from 'ts/components/portal_menu';
+import { TopBarMenuItem } from 'ts/components/top_bar_menu_item';
+import { DropDownMenuItem } from 'ts/components/ui/drop_down_menu_item';
+import { Identicon } from 'ts/components/ui/identicon';
+import { DocsInfo } from 'ts/pages/documentation/docs_info';
+import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
+import { DocsMenu, MenuSubsectionsBySection, Styles, WebsitePaths } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+import { constants } from 'ts/utils/constants';
 
 interface TopBarProps {
     userAddress?: string;
@@ -52,16 +41,11 @@ const styles: Styles = {
         whiteSpace: 'nowrap',
         width: 70,
     },
-    addressPopover: {
-        backgroundColor: colors.blueGrey500,
-        color: 'white',
-        padding: 3,
-    },
     topBar: {
-        backgroundColor: 'white',
+        backgroundcolor: colors.white,
         height: 59,
         width: '100%',
-        position: 'fixed',
+        position: 'relative',
         top: 0,
         zIndex: 1100,
         paddingBottom: 1,
@@ -71,7 +55,7 @@ const styles: Styles = {
     },
     menuItem: {
         fontSize: 14,
-        color: CUSTOM_DARK_GRAY,
+        color: colors.darkestGrey,
         paddingTop: 6,
         paddingBottom: 6,
         marginTop: 17,
@@ -97,40 +81,28 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         const isFullWidthPage = this.props.shouldFullWidth;
         const parentClassNames = `flex mx-auto ${isFullWidthPage ? 'pl2' : 'max-width-4'}`;
         const developerSectionMenuItems = [
-            <Link
-                key="subMenuItem-zeroEx"
-                to={WebsitePaths.ZeroExJs}
-                className="text-decoration-none"
-            >
-                <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="0x.js" />
+            <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none">
+                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" />
             </Link>,
-            <Link
-                key="subMenuItem-smartContracts"
-                to={WebsitePaths.SmartContracts}
-                className="text-decoration-none"
-            >
-                <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="Smart Contracts" />
+            <Link key="subMenuItem-smartContracts" to={WebsitePaths.SmartContracts} className="text-decoration-none">
+                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Smart Contracts" />
             </Link>,
-            <Link
-                key="subMenuItem-0xconnect"
-                to={WebsitePaths.Connect}
-                className="text-decoration-none"
-            >
-                <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="0x Connect" />
+            <Link key="subMenuItem-0xconnect" to={WebsitePaths.Connect} className="text-decoration-none">
+                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x Connect" />
             </Link>,
             <a
                 key="subMenuItem-standard-relayer-api"
                 target="_blank"
                 className="text-decoration-none"
-                href={constants.STANDARD_RELAYER_API_GITHUB}
+                href={constants.URL_STANDARD_RELAYER_API_GITHUB}
             >
-                <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="Standard Relayer API" />
+                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Standard Relayer API" />
             </a>,
             <a
                 key="subMenuItem-github"
                 target="_blank"
                 className="text-decoration-none"
-                href={constants.GITHUB_URL}
+                href={constants.URL_GITHUB_ORG}
             >
                 <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="GitHub" />
             </a>,
@@ -140,10 +112,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 className="text-decoration-none"
                 href={`${WebsitePaths.Whitepaper}`}
             >
-                <MenuItem style={{fontSize: styles.menuItem.fontSize}} primaryText="Whitepaper" />
+                <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="Whitepaper" />
             </a>,
         ];
-        const bottomBorderStyle = this.shouldDisplayBottomBar() ? styles.bottomBar : {};
+        const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
         const fullWidthClasses = isFullWidthPage ? 'pr4' : '';
         const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
         const menuClasses = `col col-${isFullWidthPage ? '4' : '5'} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
@@ -154,19 +126,17 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             paddingTop: 16,
         };
         return (
-            <div style={{...styles.topBar, ...bottomBorderStyle, ...this.props.style}} className="pb1">
+            <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style }} className="pb1">
                 <div className={parentClassNames}>
-                    <div className="col col-2 sm-pl2 md-pl2 lg-pl0" style={{paddingTop: 15}}>
+                    <div className="col col-2 sm-pl2 md-pl2 lg-pl0" style={{ paddingTop: 15 }}>
                         <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
                             <img src={logoUrl} height="30" />
                         </Link>
                     </div>
                     <div className={`col col-${isFullWidthPage ? '8' : '9'} lg-hide md-hide`} />
                     <div className={`col col-${isFullWidthPage ? '6' : '5'} sm-hide xs-hide`} />
-                    {!this.isViewingPortal() &&
-                        <div
-                            className={menuClasses}
-                        >
+                    {!this._isViewingPortal() && (
+                        <div className={menuClasses}>
                             <div className="flex justify-between">
                                 <DropDownMenuItem
                                     title="Developers"
@@ -196,110 +166,97 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                 />
                             </div>
                         </div>
-                    }
-                    {this.props.blockchainIsLoaded && !_.isEmpty(this.props.userAddress) &&
-                        <div className="col col-5">
-                            {this.renderUser()}
-                        </div>
-                    }
-                    {!this.isViewingPortal() &&
-                        <div
-                            className={`col ${isFullWidthPage ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}
-                        >
-                            <div style={menuIconStyle}>
-                                <i
-                                    className="zmdi zmdi-menu"
-                                    onClick={this.onMenuButtonClick.bind(this)}
-                                />
-                            </div>
+                    )}
+                    {this.props.blockchainIsLoaded &&
+                        !_.isEmpty(this.props.userAddress) && (
+                            <div className="col col-5 sm-hide xs-hide">{this._renderUser()}</div>
+                        )}
+                    <div className={`col ${isFullWidthPage ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}>
+                        <div style={menuIconStyle}>
+                            <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} />
                         </div>
-                    }
+                    </div>
                 </div>
-                {this.renderDrawer()}
+                {this._renderDrawer()}
             </div>
         );
     }
-    private renderDrawer() {
+    private _renderDrawer() {
         return (
             <Drawer
                 open={this.state.isDrawerOpen}
                 docked={false}
                 openSecondary={true}
-                onRequestChange={this.onMenuButtonClick.bind(this)}
+                onRequestChange={this._onMenuButtonClick.bind(this)}
             >
-                {this.renderPortalMenu()}
-                {this.renderDocsMenu()}
-                {this.renderWiki()}
-                <div className="pl1 py1 mt3" style={{backgroundColor: SECTION_HEADER_COLOR}}>Website</div>
+                {this._renderPortalMenu()}
+                {this._renderDocsMenu()}
+                {this._renderWiki()}
+                <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}>
+                    Website
+                </div>
                 <Link to={WebsitePaths.Home} className="text-decoration-none">
                     <MenuItem className="py2">Home</MenuItem>
                 </Link>
                 <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
                     <MenuItem className="py2">Wiki</MenuItem>
                 </Link>
-                {!this.isViewing0xjsDocs() &&
+                {!this._isViewing0xjsDocs() && (
                     <Link to={WebsitePaths.ZeroExJs} className="text-decoration-none">
                         <MenuItem className="py2">0x.js Docs</MenuItem>
                     </Link>
-                }
-                {!this.isViewingConnectDocs() &&
+                )}
+                {!this._isViewingConnectDocs() && (
                     <Link to={WebsitePaths.Connect} className="text-decoration-none">
                         <MenuItem className="py2">0x Connect Docs</MenuItem>
                     </Link>
-                }
-                {!this.isViewingSmartContractsDocs() &&
+                )}
+                {!this._isViewingSmartContractsDocs() && (
                     <Link to={WebsitePaths.SmartContracts} className="text-decoration-none">
                         <MenuItem className="py2">Smart Contract Docs</MenuItem>
                     </Link>
-                }
-                {!this.isViewingPortal() &&
+                )}
+                {!this._isViewingPortal() && (
                     <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
                         <MenuItem className="py2">Portal DApp</MenuItem>
                     </Link>
-                }
-                <a
-                    className="text-decoration-none"
-                    target="_blank"
-                    href={`${WebsitePaths.Whitepaper}`}
-                >
+                )}
+                <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}>
                     <MenuItem className="py2">Whitepaper</MenuItem>
                 </a>
                 <Link to={`${WebsitePaths.About}`} className="text-decoration-none">
                     <MenuItem className="py2">About</MenuItem>
                 </Link>
-                <a
-                    className="text-decoration-none"
-                    target="_blank"
-                    href={constants.BLOG_URL}
-                >
+                <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
                     <MenuItem className="py2">Blog</MenuItem>
                 </a>
                 <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
-                    <MenuItem
-                        className="py2"
-                        onTouchTap={this.onMenuButtonClick.bind(this)}
-                    >
+                    <MenuItem className="py2" onTouchTap={this._onMenuButtonClick.bind(this)}>
                         FAQ
                     </MenuItem>
                 </Link>
             </Drawer>
         );
     }
-    private renderDocsMenu() {
-        if (!this.isViewing0xjsDocs() && !this.isViewingSmartContractsDocs() && !this.isViewingConnectDocs()
-            ||  _.isUndefined(this.props.menu)) {
-            return;
+    private _renderDocsMenu(): React.ReactNode {
+        if (
+            (!this._isViewing0xjsDocs() && !this._isViewingSmartContractsDocs() && !this._isViewingConnectDocs()) ||
+            _.isUndefined(this.props.menu)
+        ) {
+            return undefined;
         }
 
         const sectionTitle = `${this.props.docsInfo.displayName} Docs`;
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>{sectionTitle}</div>
+                <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
+                    {sectionTitle}
+                </div>
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menu}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
                     shouldDisplaySectionHeaders={false}
-                    onMenuItemClick={this.onMenuButtonClick.bind(this)}
+                    onMenuItemClick={this._onMenuButtonClick.bind(this)}
                     selectedVersion={this.props.docsVersion}
                     docPath={this.props.docsInfo.websitePath}
                     versions={this.props.availableDocVersions}
@@ -307,51 +264,45 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             </div>
         );
     }
-    private renderWiki() {
-        if (!this.isViewingWiki()) {
-            return;
+    private _renderWiki(): React.ReactNode {
+        if (!this._isViewingWiki()) {
+            return undefined;
         }
 
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>0x Protocol Wiki</div>
+                <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
+                    0x Protocol Wiki
+                </div>
                 <NestedSidebarMenu
                     topLevelMenu={this.props.menuSubsectionsBySection}
                     menuSubsectionsBySection={this.props.menuSubsectionsBySection}
                     shouldDisplaySectionHeaders={false}
-                    onMenuItemClick={this.onMenuButtonClick.bind(this)}
+                    onMenuItemClick={this._onMenuButtonClick.bind(this)}
                 />
             </div>
         );
     }
-    private renderPortalMenu() {
-        if (!this.isViewingPortal()) {
-            return;
+    private _renderPortalMenu(): React.ReactNode {
+        if (!this._isViewingPortal()) {
+            return undefined;
         }
 
         return (
             <div className="lg-hide md-hide">
-                <div className="pl1 py1" style={{backgroundColor: SECTION_HEADER_COLOR}}>Portal DApp</div>
-                <PortalMenu
-                    menuItemStyle={{color: 'black'}}
-                    onClick={this.onMenuButtonClick.bind(this)}
-                />
+                <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
+                    Portal DApp
+                </div>
+                <PortalMenu menuItemStyle={{ color: 'black' }} onClick={this._onMenuButtonClick.bind(this)} />
             </div>
         );
     }
-    private renderUser() {
+    private _renderUser() {
         const userAddress = this.props.userAddress;
         const identiconDiameter = 26;
         return (
-            <div
-                className="flex right lg-pr0 md-pr2 sm-pr2"
-                style={{paddingTop: 16}}
-            >
-                <div
-                    style={styles.address}
-                    data-tip={true}
-                    data-for="userAddressTooltip"
-                >
+            <div className="flex right lg-pr0 md-pr2 sm-pr2" style={{ paddingTop: 16 }}>
+                <div style={styles.address} data-tip={true} data-for="userAddressTooltip">
                     {!_.isEmpty(userAddress) ? userAddress : ''}
                 </div>
                 <ReactTooltip id="userAddressTooltip">{userAddress}</ReactTooltip>
@@ -361,31 +312,36 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             </div>
         );
     }
-    private onMenuButtonClick() {
+    private _onMenuButtonClick() {
         this.setState({
             isDrawerOpen: !this.state.isDrawerOpen,
         });
     }
-    private isViewingPortal() {
+    private _isViewingPortal() {
         return _.includes(this.props.location.pathname, WebsitePaths.Portal);
     }
-    private isViewingFAQ() {
+    private _isViewingFAQ() {
         return _.includes(this.props.location.pathname, WebsitePaths.FAQ);
     }
-    private isViewing0xjsDocs() {
+    private _isViewing0xjsDocs() {
         return _.includes(this.props.location.pathname, WebsitePaths.ZeroExJs);
     }
-    private isViewingConnectDocs() {
+    private _isViewingConnectDocs() {
         return _.includes(this.props.location.pathname, WebsitePaths.Connect);
     }
-    private isViewingSmartContractsDocs() {
+    private _isViewingSmartContractsDocs() {
         return _.includes(this.props.location.pathname, WebsitePaths.SmartContracts);
     }
-    private isViewingWiki() {
+    private _isViewingWiki() {
         return _.includes(this.props.location.pathname, WebsitePaths.Wiki);
     }
-    private shouldDisplayBottomBar() {
-        return this.isViewingWiki() || this.isViewing0xjsDocs() || this.isViewingFAQ() ||
-               this.isViewingSmartContractsDocs() || this.isViewingConnectDocs();
+    private _shouldDisplayBottomBar() {
+        return (
+            this._isViewingWiki() ||
+            this._isViewing0xjsDocs() ||
+            this._isViewingFAQ() ||
+            this._isViewingSmartContractsDocs() ||
+            this._isViewingConnectDocs()
+        );
     }
 }