Merge branch 'development' into feature/sra-reporter

* development: (79 commits)
  remove from devDeps
  Remove date for now
  Add ethers typescript typings to 0x.js deps. The library works without this atm since another dep of 0x.js has it as a dep. But it's more robust to have it here.
  Add  missing instructions to add external types to tsconfig.json after installing the package
  Fix bugs in postpublish_utils.js
  Update @0xproject/utils in top-level package.json
  Changelog tweaks
  Publish
  Updated CHANGELOGS
  Fix typo
  Add PR number to changelog entry
  Add changelog update to subproviders package
  Add `numberOfAccounts` param to `LedgerSubprovider` method `getAccountsAsync` and add tests
  Remove unnecessary type assertion
  Fix comments
  Add comments
  Don't need any external packages for 0x connect docs yet
  Instead of adding `@0xproject/types` to tsconfig.json, let's only add it when calling TypeDoc
  Fix styling
  Make prettier ignore postpublish_utils
  ...

11 files changed, 100 insertions, 50 deletions

diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
index 23cfd96bd..5f177e97e 100644
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ b/packages/website/ts/pages/documentation/comment.tsx
@@ -15,7 +15,7 @@ const defaultProps = {
 export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
     return (
         <div className={`${props.className} comment`}>
-            <ReactMarkdown source={props.comment} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+            <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} />
         </div>
     );
 };
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 7eed78fc3..699bef7a8 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -29,11 +29,11 @@ import {
     TypescriptMethod,
 } from 'ts/types';
 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 TOP_BAR_HEIGHT = 60;
-const SCROLL_TOP_ID = 'docsScrollTop';
 
 const networkNameToColor: { [network: string]: string } = {
     [Networks.Kovan]: colors.purple,
@@ -76,7 +76,8 @@ const styles: Styles = {
 export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
     public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
-            this._scrollToHash();
+            const hash = this.props.location.hash.slice(1);
+            utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
         }
     }
     public render() {
@@ -115,8 +116,12 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                 className="relative col lg-col-9 md-col-9 sm-col-12 col-12"
                                 style={{ backgroundColor: colors.white }}
                             >
-                                <div id="documentation" style={styles.mainContainers} className="absolute px1">
-                                    <div id={SCROLL_TOP_ID} />
+                                <div
+                                    id={configs.SCROLL_CONTAINER_ID}
+                                    style={styles.mainContainers}
+                                    className="absolute px1"
+                                >
+                                    <div id={configs.SCROLL_TOP_ID} />
                                     {this._renderDocumentation()}
                                 </div>
                             </div>
@@ -325,17 +330,4 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
             />
         );
     }
-    private _scrollToHash(): void {
-        const hashWithPrefix = this.props.location.hash;
-        let hash = hashWithPrefix.slice(1);
-        if (_.isEmpty(hash)) {
-            hash = SCROLL_TOP_ID; // scroll to the top
-        }
-
-        scroller.scrollTo(hash, {
-            duration: 0,
-            offset: 0,
-            containerId: 'documentation',
-        });
-    }
 }
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index 0e53e38e7..e62c9ecbd 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -25,9 +25,10 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
     }
     public render() {
         const event = this.props.event;
+        const id = `${this.props.sectionName}-${event.name}`;
         return (
             <div
-                id={`${this.props.sectionName}-${event.name}`}
+                id={id}
                 className="pb2"
                 style={{ overflow: 'hidden', width: '100%' }}
                 onMouseOver={this._setAnchorVisibility.bind(this, true)}
@@ -36,7 +37,7 @@ export class EventDefinition extends React.Component<EventDefinitionProps, Event
                 <AnchorTitle
                     headerSize={HeaderSizes.H3}
                     title={`Event ${event.name}`}
-                    id={event.name}
+                    id={id}
                     shouldShowAnchor={this.state.shouldShowAnchor}
                 />
                 <div style={{ fontSize: 16 }}>
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index d46eec76c..02bf63258 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -113,7 +113,9 @@ export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDef
                         <code className="hljs">{codeSnippet}</code>
                     </pre>
                 </div>
-                {customType.comment && <Comment comment={customType.comment} className="py2" />}
+                <div style={{ maxWidth: 620 }}>
+                    {customType.comment && <Comment comment={customType.comment} className="py2" />}
+                </div>
             </div>
         );
     }
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
index 98ca3aee6..6dfb74554 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/website/ts/pages/shared/markdown_code_block.tsx
@@ -3,7 +3,7 @@ import * as React from 'react';
 import * as HighLight from 'react-highlight';
 
 interface MarkdownCodeBlockProps {
-    literal: string;
+    value: string;
     language: string;
 }
 
@@ -13,12 +13,12 @@ export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, M
     // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
     // to copy-paste code examples. We therefore noop re-renders on this component if it's props haven't changed.
     public shouldComponentUpdate(nextProps: MarkdownCodeBlockProps, nextState: MarkdownCodeBlockState) {
-        return nextProps.literal !== this.props.literal || nextProps.language !== this.props.language;
+        return nextProps.value !== this.props.value || nextProps.language !== this.props.language;
     }
     public render() {
         return (
             <span style={{ fontSize: 14 }}>
-                <HighLight className={this.props.language || 'javascript'}>{this.props.literal}</HighLight>
+                <HighLight className={this.props.language || 'javascript'}>{this.props.value}</HighLight>
             </span>
         );
     }
diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/website/ts/pages/shared/markdown_link_block.tsx
new file mode 100644
index 000000000..e4553c87f
--- /dev/null
+++ b/packages/website/ts/pages/shared/markdown_link_block.tsx
@@ -0,0 +1,46 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { configs } from 'ts/utils/configs';
+import { utils } from 'ts/utils/utils';
+
+interface MarkdownLinkBlockProps {
+    href: string;
+}
+
+interface MarkdownLinkBlockState {}
+
+export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> {
+    // Re-rendering a linkBlock causes it to remain unclickable.
+    // We therefore noop re-renders on this component if it's props haven't changed.
+    public shouldComponentUpdate(nextProps: MarkdownLinkBlockProps, nextState: MarkdownLinkBlockState) {
+        return nextProps.href !== this.props.href;
+    }
+    public render() {
+        const href = this.props.href;
+        const isLinkToSection = _.startsWith(href, '#');
+        // If protocol is http or https, we can open in a new tab, otherwise don't for security reasons
+        if (_.startsWith(href, 'http') || _.startsWith(href, 'https')) {
+            return (
+                <a href={href} target="_blank" rel="nofollow noreferrer noopener">
+                    {this.props.children}
+                </a>
+            );
+        } else if (isLinkToSection) {
+            return (
+                <a
+                    style={{ cursor: 'pointer', textDecoration: 'underline' }}
+                    onClick={this._onHashUrlClick.bind(this, href)}
+                >
+                    {this.props.children}
+                </a>
+            );
+        } else {
+            return <a href={href}>{this.props.children}</a>;
+        }
+    }
+    private _onHashUrlClick(href: string) {
+        const hash = href.split('#')[1];
+        utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
+        utils.setUrlHash(hash);
+    }
+}
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/website/ts/pages/shared/markdown_section.tsx
index 4d7d8b4ca..7253072d9 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/website/ts/pages/shared/markdown_section.tsx
@@ -5,6 +5,7 @@ import * as ReactMarkdown from 'react-markdown';
 import { Element as ScrollElement } from 'react-scroll';
 import { AnchorTitle } from 'ts/pages/shared/anchor_title';
 import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
+import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block';
 import { HeaderSizes } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
@@ -64,7 +65,14 @@ export class MarkdownSection extends React.Component<MarkdownSectionProps, Markd
                         </div>
                     </div>
                     <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
-                    <ReactMarkdown source={this.props.markdownContent} renderers={{ CodeBlock: MarkdownCodeBlock }} />
+                    <ReactMarkdown
+                        source={this.props.markdownContent}
+                        escapeHtml={false}
+                        renderers={{
+                            code: MarkdownCodeBlock,
+                            link: MarkdownLinkBlock,
+                        }}
+                    />
                 </ScrollElement>
             </div>
         );
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
index 1a08ca9f9..82a40eb7e 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
@@ -86,14 +86,14 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                         docs
                     </div>
                 </div>
-                <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 14, height: 17 }}>
+                <div className="pl1" style={{ color: colors.grey350, paddingBottom: 9, paddingLeft: 10, height: 17 }}>
                     |
                 </div>
                 <div className="flex">
                     <div>
-                        <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="24" />
+                        <img src={`/images/doc_icons/${titleToIcon[this.props.title]}`} width="22" />
                     </div>
-                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1 }}>
+                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
                         {this.props.title}
                     </div>
                 </div>
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx
index a5f5f52cf..52a1f30d9 100644
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ b/packages/website/ts/pages/shared/section_header.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Element as ScrollElement } from 'react-scroll';
 import { AnchorTitle } from 'ts/pages/shared/anchor_title';
 import { HeaderSizes } from 'ts/types';
+import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface SectionHeaderProps {
@@ -34,7 +35,19 @@ export class SectionHeader extends React.Component<SectionHeaderProps, SectionHe
                 <ScrollElement name={id}>
                     <AnchorTitle
                         headerSize={this.props.headerSize}
-                        title={<span style={{ textTransform: 'capitalize' }}>{sectionName}</span>}
+                        title={
+                            <span
+                                style={{
+                                    textTransform: 'uppercase',
+                                    color: colors.grey,
+                                    fontFamily: 'Roboto Mono',
+                                    fontWeight: 300,
+                                    fontSize: 27,
+                                }}
+                            >
+                                {sectionName}
+                            </span>
+                        }
                         id={id}
                         shouldShowAnchor={this.state.shouldShowAnchor}
                     />
diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx
index 3b331af9b..1b4dbb375 100644
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ b/packages/website/ts/pages/shared/version_drop_down.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
 import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
+import { utils } from 'ts/utils/utils';
 
 interface VersionDropDownProps {
     selectedVersion: string;
@@ -31,8 +32,6 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
         return items;
     }
     private _updateSelectedVersion(e: any, index: number, semver: string) {
-        const port = window.location.port;
-        const hasPort = !_.isUndefined(port);
         let path = window.location.pathname;
         const lastChar = path[path.length - 1];
         if (_.isFinite(_.parseInt(lastChar))) {
@@ -40,7 +39,7 @@ export class VersionDropDown extends React.Component<VersionDropDownProps, Versi
             pathSections.pop();
             path = pathSections.join('/');
         }
-        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}${path}`;
-        window.location.href = `${baseUrl}/${semver}${window.location.hash}`;
+        const baseUrl = utils.getCurrentBaseUrl();
+        window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
     }
 }
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 56c3be0fe..4bb6052a2 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -135,11 +135,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                                 }}
                             >
                                 <div
-                                    id="documentation"
+                                    id={configs.SCROLL_CONTAINER_ID}
                                     style={{ ...mainContainersStyle, overflow: 'auto' }}
                                     className="absolute"
                                 >
-                                    <div id="0xProtocolWiki" />
+                                    <div id={configs.SCROLL_TOP_ID} />
                                     <div id="wiki" style={{ paddingRight: 2 }}>
                                         {this._renderWikiArticles()}
                                     </div>
@@ -188,19 +188,6 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             </div>
         );
     }
-    private _scrollToHash(): void {
-        const hashWithPrefix = this.props.location.hash;
-        let hash = hashWithPrefix.slice(1);
-        if (_.isEmpty(hash)) {
-            hash = '0xProtocolWiki'; // scroll to the top
-        }
-
-        scroller.scrollTo(hash, {
-            duration: 0,
-            offset: 0,
-            containerId: 'documentation',
-        });
-    }
     private async _fetchArticlesBySectionAsync(): Promise<void> {
         const endpoint = `${configs.BACKEND_BASE_URL}${WebsitePaths.Wiki}`;
         const response = await fetch(endpoint);
@@ -224,8 +211,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                 {
                     articlesBySection,
                 },
-                () => {
-                    this._scrollToHash();
+                async () => {
+                    await utils.onPageLoadAsync();
+                    const hash = this.props.location.hash.slice(1);
+                    utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
                 },
             );
         }