Merge pull request #438 from 0xProject/extractDocs

Extract Docs Template To Separate Package

27 files changed, 56 insertions, 1878 deletions

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index b99dc34ab..7f1e0bf80 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,3 +1,4 @@
+import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
@@ -5,8 +6,7 @@ import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Profile } from 'ts/pages/about/profile';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { ProfileInfo, Styles } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { ProfileInfo } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index 18b4e0d5a..4361da103 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -1,7 +1,7 @@
+import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { ProfileInfo, Styles } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { ProfileInfo } from 'ts/types';
 
 const IMAGE_DIMENSION = 149;
 const styles: Styles = {
diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
deleted file mode 100644
index 5f177e97e..000000000
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as ReactMarkdown from 'react-markdown';
-import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
-
-interface CommentProps {
-    comment: string;
-    className?: string;
-}
-
-const defaultProps = {
-    className: '',
-};
-
-export const Comment: React.SFC<CommentProps> = (props: CommentProps) => {
-    return (
-        <div className={`${props.className} comment`}>
-            <ReactMarkdown source={props.comment} renderers={{ code: MarkdownCodeBlock }} />
-        </div>
-    );
-};
-
-Comment.defaultProps = defaultProps;
diff --git a/packages/website/ts/pages/documentation/custom_enum.tsx b/packages/website/ts/pages/documentation/custom_enum.tsx
deleted file mode 100644
index 8d50a2f52..000000000
--- a/packages/website/ts/pages/documentation/custom_enum.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { CustomType } from 'ts/types';
-import { utils } from 'ts/utils/utils';
-
-const STRING_ENUM_CODE_PREFIX = ' strEnum(';
-
-interface CustomEnumProps {
-    type: CustomType;
-}
-
-// This component renders custom string enums that was a work-around for versions of
-// TypeScript <2.4.0 that did not support them natively. We keep it around to support
-// older versions of 0x.js <0.9.0
-export function CustomEnum(props: CustomEnumProps) {
-    const type = props.type;
-    if (!_.startsWith(type.defaultValue, STRING_ENUM_CODE_PREFIX)) {
-        utils.consoleLog('We do not yet support `Variable` types that are not strEnums');
-        return null;
-    }
-    // Remove the prefix and postfix, leaving only the strEnum values without quotes.
-    const enumValues = type.defaultValue.slice(10, -3).replace(/'/g, '');
-    return (
-        <span>
-            {`{`}
-            {'\t'}
-            {enumValues}
-            <br />
-            {`}`}
-        </span>
-    );
-}
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 098df5bfd..1281219c6 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -1,17 +1,19 @@
+import { DocAgnosticFormat, DocsInfo, Documentation, DoxityDocObj } from '@0xproject/react-docs';
+import { MenuSubsectionsBySection } from '@0xproject/react-shared';
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import semverSort = require('semver-sort');
+import { SidebarHeader } from 'ts/components/sidebar_header';
 import { TopBar } from 'ts/components/top_bar/top_bar';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Documentation } from 'ts/pages/documentation/documentation';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments, MenuSubsectionsBySection } from 'ts/types';
+import { DocPackages, Environments } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { docUtils } from 'ts/utils/doc_utils';
 import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
 
 const ZERO_EX_JS_VERSION_MISSING_TOPLEVEL_PATH = '0.32.4';
 
@@ -79,15 +81,17 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
                     menuSubsectionsBySection={menuSubsectionsBySection}
                     docsInfo={this.props.docsInfo}
                     translate={this.props.translate}
+                    onVersionSelected={this._onVersionSelected.bind(this)}
                 />
                 <Documentation
-                    location={this.props.location}
-                    docsVersion={this.props.docsVersion}
-                    availableDocVersions={this.props.availableDocVersions}
+                    selectedVersion={this.props.docsVersion}
+                    availableVersions={this.props.availableDocVersions}
                     docsInfo={this.props.docsInfo}
                     docAgnosticFormat={this.state.docAgnosticFormat}
-                    menuSubsectionsBySection={menuSubsectionsBySection}
+                    sidebarHeader={<SidebarHeader title={this.props.docsInfo.displayName} />}
                     sourceUrl={sourceUrl}
+                    topBarHeight={60}
+                    onVersionSelected={this._onVersionSelected.bind(this)}
                 />
             </div>
         );
@@ -112,7 +116,7 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
 
         const versionFileNameToFetch = versionToFileName[versionToFetch];
         const versionDocObj = await docUtils.getJSONDocFileAsync(versionFileNameToFetch, docsJsonRoot);
-        const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj as DoxityDocObj);
+        const docAgnosticFormat = this.props.docsInfo.convertToDocAgnosticFormat(versionDocObj);
 
         if (!this._isUnmounted) {
             this.setState({
@@ -140,4 +144,15 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
         const sourceUrl = `${url}/blob/${tagPrefix}%40${this.props.docsVersion}/packages${pkg}`;
         return sourceUrl;
     }
+    private _onVersionSelected(semver: string) {
+        let path = window.location.pathname;
+        const lastChar = path[path.length - 1];
+        if (_.isFinite(_.parseInt(lastChar))) {
+            const pathSections = path.split('/');
+            pathSections.pop();
+            path = pathSections.join('/');
+        }
+        const baseUrl = utils.getCurrentBaseUrl();
+        window.location.href = `${baseUrl}${path}/${semver}${window.location.hash}`;
+    }
 }
diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts
deleted file mode 100644
index 31e151fe8..000000000
--- a/packages/website/ts/pages/documentation/docs_info.ts
+++ /dev/null
@@ -1,119 +0,0 @@
-import compareVersions = require('compare-versions');
-import * as _ from 'lodash';
-import {
-    ContractsByVersionByNetworkId,
-    DocAgnosticFormat,
-    DocsInfoConfig,
-    DocsMenu,
-    DoxityDocObj,
-    MenuSubsectionsBySection,
-    SectionsMap,
-    SupportedDocJson,
-    TypeDocNode,
-} from 'ts/types';
-import { doxityUtils } from 'ts/utils/doxity_utils';
-import { typeDocUtils } from 'ts/utils/typedoc_utils';
-
-export class DocsInfo {
-    public id: string;
-    public type: SupportedDocJson;
-    public displayName: string;
-    public packageUrl: string;
-    public menu: DocsMenu;
-    public sections: SectionsMap;
-    public sectionNameToMarkdown: { [sectionName: string]: string };
-    public contractsByVersionByNetworkId?: ContractsByVersionByNetworkId;
-    private _docsInfo: DocsInfoConfig;
-    constructor(config: DocsInfoConfig) {
-        this.id = config.id;
-        this.type = config.type;
-        this.displayName = config.displayName;
-        this.packageUrl = config.packageUrl;
-        this.sections = config.sections;
-        this.sectionNameToMarkdown = config.sectionNameToMarkdown;
-        this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId;
-        this._docsInfo = config;
-    }
-    public isPublicType(typeName: string): boolean {
-        if (_.isUndefined(this._docsInfo.publicTypes)) {
-            return false;
-        }
-        const isPublic = _.includes(this._docsInfo.publicTypes, typeName);
-        return isPublic;
-    }
-    public getModulePathsIfExists(sectionName: string): string[] {
-        const modulePathsIfExists = this._docsInfo.sectionNameToModulePath[sectionName];
-        return modulePathsIfExists;
-    }
-    public getMenu(selectedVersion?: string): { [section: string]: string[] } {
-        if (_.isUndefined(selectedVersion) || _.isUndefined(this._docsInfo.menuSubsectionToVersionWhenIntroduced)) {
-            return this._docsInfo.menu;
-        }
-
-        const finalMenu = _.cloneDeep(this._docsInfo.menu);
-        if (_.isUndefined(finalMenu.contracts)) {
-            return finalMenu;
-        }
-
-        // TODO: refactor to include more sections then simply the `contracts` section
-        finalMenu.contracts = _.filter(finalMenu.contracts, (contractName: string) => {
-            const versionIntroducedIfExists = this._docsInfo.menuSubsectionToVersionWhenIntroduced[contractName];
-            if (!_.isUndefined(versionIntroducedIfExists)) {
-                const existsInSelectedVersion = compareVersions(selectedVersion, versionIntroducedIfExists) >= 0;
-                return existsInSelectedVersion;
-            } else {
-                return true;
-            }
-        });
-        return finalMenu;
-    }
-    public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection {
-        const menuSubsectionsBySection = {} as MenuSubsectionsBySection;
-        if (_.isUndefined(docAgnosticFormat)) {
-            return menuSubsectionsBySection;
-        }
-
-        const docSections = _.keys(this.sections);
-        _.each(docSections, sectionName => {
-            const docSection = docAgnosticFormat[sectionName];
-            if (_.isUndefined(docSection)) {
-                return; // no-op
-            }
-
-            if (!_.isUndefined(this.sections.types) && sectionName === this.sections.types) {
-                const sortedTypesNames = _.sortBy(docSection.types, 'name');
-                const typeNames = _.map(sortedTypesNames, t => t.name);
-                menuSubsectionsBySection[sectionName] = typeNames;
-            } else {
-                let eventNames: string[] = [];
-                if (!_.isUndefined(docSection.events)) {
-                    const sortedEventNames = _.sortBy(docSection.events, 'name');
-                    eventNames = _.map(sortedEventNames, m => m.name);
-                }
-                const sortedMethodNames = _.sortBy(docSection.methods, 'name');
-                const methodNames = _.map(sortedMethodNames, m => m.name);
-                menuSubsectionsBySection[sectionName] = [...methodNames, ...eventNames];
-            }
-        });
-        return menuSubsectionsBySection;
-    }
-    public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat) {
-        if (_.isUndefined(this.sections.types)) {
-            return {};
-        }
-
-        const typeDocSection = docAgnosticFormat[this.sections.types];
-        const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name');
-        return typeDefinitionByName;
-    }
-    public isVisibleConstructor(sectionName: string): boolean {
-        return _.includes(this._docsInfo.visibleConstructors, sectionName);
-    }
-    public convertToDocAgnosticFormat(docObj: DoxityDocObj | TypeDocNode): DocAgnosticFormat {
-        if (this.type === SupportedDocJson.Doxity) {
-            return doxityUtils.convertToDocAgnosticFormat(docObj as DoxityDocObj);
-        } else {
-            return typeDocUtils.convertToDocAgnosticFormat(docObj as TypeDocNode, this);
-        }
-    }
-}
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
deleted file mode 100644
index 699bef7a8..000000000
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ /dev/null
@@ -1,333 +0,0 @@
-import * as _ from 'lodash';
-import CircularProgress from 'material-ui/CircularProgress';
-import * as React from 'react';
-import { scroller } from 'react-scroll';
-import { Badge } from 'ts/components/ui/badge';
-import { Comment } from 'ts/pages/documentation/comment';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { EventDefinition } from 'ts/pages/documentation/event_definition';
-import { MethodBlock } from 'ts/pages/documentation/method_block';
-import { SourceLink } from 'ts/pages/documentation/source_link';
-import { Type } from 'ts/pages/documentation/type';
-import { TypeDefinition } from 'ts/pages/documentation/type_definition';
-import { MarkdownSection } from 'ts/pages/shared/markdown_section';
-import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
-import { SectionHeader } from 'ts/pages/shared/section_header';
-import {
-    AddressByContractName,
-    DocAgnosticFormat,
-    DoxityDocObj,
-    EtherscanLinkSuffixes,
-    Event,
-    MenuSubsectionsBySection,
-    Networks,
-    Property,
-    SolidityMethod,
-    Styles,
-    SupportedDocJson,
-    TypeDefinitionByName,
-    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 networkNameToColor: { [network: string]: string } = {
-    [Networks.Kovan]: colors.purple,
-    [Networks.Ropsten]: colors.red,
-    [Networks.Mainnet]: colors.turquois,
-    [Networks.Rinkeby]: colors.darkYellow,
-};
-
-export interface DocumentationProps {
-    location: Location;
-    docsVersion: string;
-    availableDocVersions: string[];
-    docsInfo: DocsInfo;
-    docAgnosticFormat?: DocAgnosticFormat;
-    menuSubsectionsBySection: MenuSubsectionsBySection;
-    sourceUrl: string;
-}
-
-interface DocumentationState {}
-
-const styles: Styles = {
-    mainContainers: {
-        position: 'absolute',
-        top: 1,
-        left: 0,
-        bottom: 0,
-        right: 0,
-        overflowZ: 'hidden',
-        overflowY: 'scroll',
-        minHeight: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-        WebkitOverflowScrolling: 'touch',
-    },
-    menuContainer: {
-        borderColor: colors.grey300,
-        maxWidth: 330,
-        marginLeft: 20,
-    },
-};
-
-export class Documentation extends React.Component<DocumentationProps, DocumentationState> {
-    public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
-        if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
-            const hash = this.props.location.hash.slice(1);
-            utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
-        }
-    }
-    public render() {
-        return (
-            <div>
-                {_.isUndefined(this.props.docAgnosticFormat) ? (
-                    this._renderLoading()
-                ) : (
-                    <div style={{ width: '100%', height: '100%', backgroundColor: colors.gray40 }}>
-                        <div
-                            className="mx-auto max-width-4 flex"
-                            style={{ color: colors.grey800, height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
-                        >
-                            <div
-                                className="relative sm-hide xs-hide"
-                                style={{ width: '36%', height: `calc(100vh - ${TOP_BAR_HEIGHT}px)` }}
-                            >
-                                <div
-                                    className="border-right absolute"
-                                    style={{
-                                        ...styles.menuContainer,
-                                        ...styles.mainContainers,
-                                        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
-                                    }}
-                                >
-                                    <NestedSidebarMenu
-                                        selectedVersion={this.props.docsVersion}
-                                        versions={this.props.availableDocVersions}
-                                        title={this.props.docsInfo.displayName}
-                                        topLevelMenu={this.props.docsInfo.getMenu(this.props.docsVersion)}
-                                        menuSubsectionsBySection={this.props.menuSubsectionsBySection}
-                                    />
-                                </div>
-                            </div>
-                            <div
-                                className="relative col lg-col-9 md-col-9 sm-col-12 col-12"
-                                style={{ backgroundColor: colors.white }}
-                            >
-                                <div
-                                    id={configs.SCROLL_CONTAINER_ID}
-                                    style={styles.mainContainers}
-                                    className="absolute px1"
-                                >
-                                    <div id={configs.SCROLL_TOP_ID} />
-                                    {this._renderDocumentation()}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                )}
-            </div>
-        );
-    }
-    private _renderLoading() {
-        return (
-            <div className="col col-12" style={styles.mainContainers}>
-                <div
-                    className="relative sm-px2 sm-pt2 sm-m1"
-                    style={{ height: 122, top: '50%', transform: 'translateY(-50%)' }}
-                >
-                    <div className="center pb2">
-                        <CircularProgress size={40} thickness={5} />
-                    </div>
-                    <div className="center pt2" style={{ paddingBottom: 11 }}>
-                        Loading documentation...
-                    </div>
-                </div>
-            </div>
-        );
-    }
-    private _renderDocumentation(): React.ReactNode {
-        const subMenus = _.values(this.props.docsInfo.getMenu());
-        const orderedSectionNames = _.flatten(subMenus);
-
-        const typeDefinitionByName = this.props.docsInfo.getTypeDefinitionsByName(this.props.docAgnosticFormat);
-        const renderedSections = _.map(orderedSectionNames, this._renderSection.bind(this, typeDefinitionByName));
-
-        return renderedSections;
-    }
-    private _renderSection(typeDefinitionByName: TypeDefinitionByName, sectionName: string): React.ReactNode {
-        const markdownFileIfExists = this.props.docsInfo.sectionNameToMarkdown[sectionName];
-        if (!_.isUndefined(markdownFileIfExists)) {
-            return (
-                <MarkdownSection
-                    key={`markdown-section-${sectionName}`}
-                    sectionName={sectionName}
-                    markdownContent={markdownFileIfExists}
-                />
-            );
-        }
-
-        const docSection = this.props.docAgnosticFormat[sectionName];
-        if (_.isUndefined(docSection)) {
-            return null;
-        }
-
-        const sortedTypes = _.sortBy(docSection.types, 'name');
-        const typeDefs = _.map(sortedTypes, customType => {
-            return (
-                <TypeDefinition
-                    sectionName={sectionName}
-                    key={`type-${customType.name}`}
-                    customType={customType}
-                    docsInfo={this.props.docsInfo}
-                />
-            );
-        });
-
-        const sortedProperties = _.sortBy(docSection.properties, 'name');
-        const propertyDefs = _.map(sortedProperties, this._renderProperty.bind(this, sectionName));
-
-        const sortedMethods = _.sortBy(docSection.methods, 'name');
-        const methodDefs = _.map(sortedMethods, method => {
-            const isConstructor = false;
-            return this._renderMethodBlocks(method, sectionName, isConstructor, typeDefinitionByName);
-        });
-
-        const sortedEvents = _.sortBy(docSection.events, 'name');
-        const eventDefs = _.map(sortedEvents, (event: Event, i: number) => {
-            return (
-                <EventDefinition
-                    key={`event-${event.name}-${i}`}
-                    event={event}
-                    sectionName={sectionName}
-                    docsInfo={this.props.docsInfo}
-                />
-            );
-        });
-        return (
-            <div key={`section-${sectionName}`} className="py2 pr3 md-pl2 sm-pl3">
-                <div className="flex pb2">
-                    <div style={{ marginRight: 7 }}>
-                        <SectionHeader sectionName={sectionName} />
-                    </div>
-                    {this._renderNetworkBadgesIfExists(sectionName)}
-                </div>
-                {docSection.comment && <Comment comment={docSection.comment} />}
-                {docSection.constructors.length > 0 &&
-                    this.props.docsInfo.isVisibleConstructor(sectionName) && (
-                        <div>
-                            <h2 className="thin">Constructor</h2>
-                            {this._renderConstructors(docSection.constructors, sectionName, typeDefinitionByName)}
-                        </div>
-                    )}
-                {docSection.properties.length > 0 && (
-                    <div>
-                        <h2 className="thin">Properties</h2>
-                        <div>{propertyDefs}</div>
-                    </div>
-                )}
-                {docSection.methods.length > 0 && (
-                    <div>
-                        <h2 className="thin">Methods</h2>
-                        <div>{methodDefs}</div>
-                    </div>
-                )}
-                {!_.isUndefined(docSection.events) &&
-                    docSection.events.length > 0 && (
-                        <div>
-                            <h2 className="thin">Events</h2>
-                            <div>{eventDefs}</div>
-                        </div>
-                    )}
-                {!_.isUndefined(typeDefs) &&
-                    typeDefs.length > 0 && (
-                        <div>
-                            <div>{typeDefs}</div>
-                        </div>
-                    )}
-            </div>
-        );
-    }
-    private _renderNetworkBadgesIfExists(sectionName: string) {
-        if (this.props.docsInfo.type !== SupportedDocJson.Doxity) {
-            return null;
-        }
-
-        const networkToAddressByContractName = this.props.docsInfo.contractsByVersionByNetworkId[
-            this.props.docsVersion
-        ];
-        const badges = _.map(
-            networkToAddressByContractName,
-            (addressByContractName: AddressByContractName, networkName: string) => {
-                const contractAddress = addressByContractName[sectionName];
-                if (_.isUndefined(contractAddress)) {
-                    return null;
-                }
-                const linkIfExists = utils.getEtherScanLinkIfExists(
-                    contractAddress,
-                    constants.NETWORK_ID_BY_NAME[networkName],
-                    EtherscanLinkSuffixes.Address,
-                );
-                return (
-                    <a
-                        key={`badge-${networkName}-${sectionName}`}
-                        href={linkIfExists}
-                        target="_blank"
-                        style={{ color: colors.white, textDecoration: 'none' }}
-                    >
-                        <Badge title={networkName} backgroundColor={networkNameToColor[networkName]} />
-                    </a>
-                );
-            },
-        );
-        return badges;
-    }
-    private _renderConstructors(
-        constructors: SolidityMethod[] | TypescriptMethod[],
-        sectionName: string,
-        typeDefinitionByName: TypeDefinitionByName,
-    ): React.ReactNode {
-        const constructorDefs = _.map(constructors, constructor => {
-            return this._renderMethodBlocks(constructor, sectionName, constructor.isConstructor, typeDefinitionByName);
-        });
-        return <div>{constructorDefs}</div>;
-    }
-    private _renderProperty(sectionName: string, property: Property): React.ReactNode {
-        return (
-            <div key={`property-${property.name}-${property.type.name}`} className="pb3">
-                <code className="hljs">
-                    {property.name}:
-                    <Type type={property.type} sectionName={sectionName} docsInfo={this.props.docsInfo} />
-                </code>
-                {property.source && (
-                    <SourceLink
-                        version={this.props.docsVersion}
-                        source={property.source}
-                        sourceUrl={this.props.sourceUrl}
-                    />
-                )}
-                {property.comment && <Comment comment={property.comment} className="py2" />}
-            </div>
-        );
-    }
-    private _renderMethodBlocks(
-        method: SolidityMethod | TypescriptMethod,
-        sectionName: string,
-        isConstructor: boolean,
-        typeDefinitionByName: TypeDefinitionByName,
-    ): React.ReactNode {
-        return (
-            <MethodBlock
-                key={`method-${method.name}-${sectionName}`}
-                sectionName={sectionName}
-                method={method}
-                typeDefinitionByName={typeDefinitionByName}
-                libraryVersion={this.props.docsVersion}
-                docsInfo={this.props.docsInfo}
-                sourceUrl={this.props.sourceUrl}
-            />
-        );
-    }
-}
diff --git a/packages/website/ts/pages/documentation/enum.tsx b/packages/website/ts/pages/documentation/enum.tsx
deleted file mode 100644
index 7dfdee771..000000000
--- a/packages/website/ts/pages/documentation/enum.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { EnumValue } from 'ts/types';
-
-interface EnumProps {
-    values: EnumValue[];
-}
-
-export function Enum(props: EnumProps) {
-    const values = _.map(props.values, (value, i) => {
-        const defaultValueIfAny = !_.isUndefined(value.defaultValue) ? ` = ${value.defaultValue}` : '';
-        return `\n\t${value.name}${defaultValueIfAny},`;
-    });
-    return (
-        <span>
-            {`{`}
-            {values}
-            <br />
-            {`}`}
-        </span>
-    );
-}
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
deleted file mode 100644
index e62c9ecbd..000000000
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Type } from 'ts/pages/documentation/type';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { Event, EventArg, HeaderSizes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-
-interface EventDefinitionProps {
-    event: Event;
-    sectionName: string;
-    docsInfo: DocsInfo;
-}
-
-interface EventDefinitionState {
-    shouldShowAnchor: boolean;
-}
-
-export class EventDefinition extends React.Component<EventDefinitionProps, EventDefinitionState> {
-    constructor(props: EventDefinitionProps) {
-        super(props);
-        this.state = {
-            shouldShowAnchor: false,
-        };
-    }
-    public render() {
-        const event = this.props.event;
-        const id = `${this.props.sectionName}-${event.name}`;
-        return (
-            <div
-                id={id}
-                className="pb2"
-                style={{ overflow: 'hidden', width: '100%' }}
-                onMouseOver={this._setAnchorVisibility.bind(this, true)}
-                onMouseOut={this._setAnchorVisibility.bind(this, false)}
-            >
-                <AnchorTitle
-                    headerSize={HeaderSizes.H3}
-                    title={`Event ${event.name}`}
-                    id={id}
-                    shouldShowAnchor={this.state.shouldShowAnchor}
-                />
-                <div style={{ fontSize: 16 }}>
-                    <pre>
-                        <code className="hljs">{this._renderEventCode()}</code>
-                    </pre>
-                </div>
-            </div>
-        );
-    }
-    private _renderEventCode() {
-        const indexed = <span style={{ color: colors.green }}> indexed</span>;
-        const eventArgs = _.map(this.props.event.eventArgs, (eventArg: EventArg) => {
-            const type = (
-                <Type type={eventArg.type} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
-            );
-            return (
-                <span key={`eventArg-${eventArg.name}`}>
-                    {eventArg.name}
-                    {eventArg.isIndexed ? indexed : ''}: {type},
-                </span>
-            );
-        });
-        const argList = _.reduce(eventArgs, (prev: React.ReactNode, curr: React.ReactNode) => {
-            return [prev, '\n\t', curr];
-        });
-        return (
-            <span>
-                {`{`}
-                <br />
-                {'\t'}
-                {argList}
-                <br />
-                {`}`}
-            </span>
-        );
-    }
-    private _setAnchorVisibility(shouldShowAnchor: boolean) {
-        this.setState({
-            shouldShowAnchor,
-        });
-    }
-}
diff --git a/packages/website/ts/pages/documentation/interface.tsx b/packages/website/ts/pages/documentation/interface.tsx
deleted file mode 100644
index 16a772125..000000000
--- a/packages/website/ts/pages/documentation/interface.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { MethodSignature } from 'ts/pages/documentation/method_signature';
-import { Type } from 'ts/pages/documentation/type';
-import { CustomType, TypeDocTypes } from 'ts/types';
-
-interface InterfaceProps {
-    type: CustomType;
-    sectionName: string;
-    docsInfo: DocsInfo;
-}
-
-export function Interface(props: InterfaceProps) {
-    const type = props.type;
-    const properties = _.map(type.children, property => {
-        return (
-            <span key={`property-${property.name}-${property.type}-${type.name}`}>
-                {property.name}:{' '}
-                {property.type.typeDocType !== TypeDocTypes.Reflection ? (
-                    <Type type={property.type} sectionName={props.sectionName} docsInfo={props.docsInfo} />
-                ) : (
-                    <MethodSignature
-                        method={property.type.method}
-                        sectionName={props.sectionName}
-                        shouldHideMethodName={true}
-                        shouldUseArrowSyntax={true}
-                        docsInfo={props.docsInfo}
-                    />
-                )},
-            </span>
-        );
-    });
-    const hasIndexSignature = !_.isUndefined(type.indexSignature);
-    if (hasIndexSignature) {
-        const is = type.indexSignature;
-        const param = (
-            <span key={`indexSigParams-${is.keyName}-${is.keyType}-${type.name}`}>
-                {is.keyName}: <Type type={is.keyType} sectionName={props.sectionName} docsInfo={props.docsInfo} />
-            </span>
-        );
-        properties.push(
-            <span key={`indexSignature-${type.name}-${is.keyType.name}`}>
-                [{param}]: {is.valueName},
-            </span>,
-        );
-    }
-    const propertyList = _.reduce(properties, (prev: React.ReactNode, curr: React.ReactNode) => {
-        return [prev, '\n\t', curr];
-    });
-    return (
-        <span>
-            {`{`}
-            <br />
-            {'\t'}
-            {propertyList}
-            <br />
-            {`}`}
-        </span>
-    );
-}
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
deleted file mode 100644
index d2c96bf8c..000000000
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Comment } from 'ts/pages/documentation/comment';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { MethodSignature } from 'ts/pages/documentation/method_signature';
-import { SourceLink } from 'ts/pages/documentation/source_link';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { HeaderSizes, Parameter, SolidityMethod, Styles, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { typeDocUtils } from 'ts/utils/typedoc_utils';
-
-interface MethodBlockProps {
-    method: SolidityMethod | TypescriptMethod;
-    sectionName: string;
-    libraryVersion: string;
-    typeDefinitionByName: TypeDefinitionByName;
-    docsInfo: DocsInfo;
-    sourceUrl: string;
-}
-
-interface MethodBlockState {
-    shouldShowAnchor: boolean;
-}
-
-const styles: Styles = {
-    chip: {
-        fontSize: 13,
-        backgroundColor: colors.lightBlueA700,
-        color: colors.white,
-        height: 11,
-        borderRadius: 14,
-        lineHeight: 0.9,
-    },
-};
-
-export class MethodBlock extends React.Component<MethodBlockProps, MethodBlockState> {
-    constructor(props: MethodBlockProps) {
-        super(props);
-        this.state = {
-            shouldShowAnchor: false,
-        };
-    }
-    public render() {
-        const method = this.props.method;
-        if (typeDocUtils.isPrivateOrProtectedProperty(method.name)) {
-            return null;
-        }
-
-        return (
-            <div
-                id={`${this.props.sectionName}-${method.name}`}
-                style={{ overflow: 'hidden', width: '100%' }}
-                className="pb4"
-                onMouseOver={this._setAnchorVisibility.bind(this, true)}
-                onMouseOut={this._setAnchorVisibility.bind(this, false)}
-            >
-                {!method.isConstructor && (
-                    <div className="flex pb2 pt2">
-                        {(method as TypescriptMethod).isStatic && this._renderChip('Static')}
-                        {(method as SolidityMethod).isConstant && this._renderChip('Constant')}
-                        {(method as SolidityMethod).isPayable && this._renderChip('Payable')}
-                        <div style={{ lineHeight: 1.3 }}>
-                            <AnchorTitle
-                                headerSize={HeaderSizes.H3}
-                                title={method.name}
-                                id={`${this.props.sectionName}-${method.name}`}
-                                shouldShowAnchor={this.state.shouldShowAnchor}
-                            />
-                        </div>
-                    </div>
-                )}
-                <code className="hljs">
-                    <MethodSignature
-                        method={method}
-                        sectionName={this.props.sectionName}
-                        typeDefinitionByName={this.props.typeDefinitionByName}
-                        docsInfo={this.props.docsInfo}
-                    />
-                </code>
-                {(method as TypescriptMethod).source && (
-                    <SourceLink
-                        version={this.props.libraryVersion}
-                        source={(method as TypescriptMethod).source}
-                        sourceUrl={this.props.sourceUrl}
-                    />
-                )}
-                {method.comment && <Comment comment={method.comment} className="py2" />}
-                {method.parameters &&
-                    !_.isEmpty(method.parameters) && (
-                        <div>
-                            <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}>
-                                ARGUMENTS
-                            </h4>
-                            {this._renderParameterDescriptions(method.parameters)}
-                        </div>
-                    )}
-                {method.returnComment && (
-                    <div className="pt1 comment">
-                        <h4 className="pb1 thin" style={{ borderBottom: '1px solid #e1e8ed' }}>
-                            RETURNS
-                        </h4>
-                        <Comment comment={method.returnComment} />
-                    </div>
-                )}
-            </div>
-        );
-    }
-    private _renderChip(text: string) {
-        return (
-            <div className="p1 mr1" style={styles.chip}>
-                {text}
-            </div>
-        );
-    }
-    private _renderParameterDescriptions(parameters: Parameter[]) {
-        const descriptions = _.map(parameters, parameter => {
-            const isOptional = parameter.isOptional;
-            return (
-                <div
-                    key={`param-description-${parameter.name}`}
-                    className="flex pb1 mb2"
-                    style={{ borderBottom: '1px solid #f0f4f7' }}
-                >
-                    <div className="pl2 col lg-col-4 md-col-4 sm-col-12 col-12">
-                        <div
-                            className="bold"
-                            style={{ overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis' }}
-                        >
-                            {parameter.name}
-                        </div>
-                        <div className="pt1" style={{ color: colors.grey, fontSize: 14 }}>
-                            {isOptional && 'optional'}
-                        </div>
-                    </div>
-                    <div className="col lg-col-8 md-col-8 sm-col-12 col-12" style={{ paddingLeft: 5 }}>
-                        {parameter.comment && <Comment comment={parameter.comment} />}
-                    </div>
-                </div>
-            );
-        });
-        return descriptions;
-    }
-    private _setAnchorVisibility(shouldShowAnchor: boolean) {
-        this.setState({
-            shouldShowAnchor,
-        });
-    }
-}
diff --git a/packages/website/ts/pages/documentation/method_signature.tsx b/packages/website/ts/pages/documentation/method_signature.tsx
deleted file mode 100644
index 22294e428..000000000
--- a/packages/website/ts/pages/documentation/method_signature.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Type } from 'ts/pages/documentation/type';
-import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-
-interface MethodSignatureProps {
-    method: TypescriptMethod | SolidityMethod;
-    sectionName: string;
-    shouldHideMethodName?: boolean;
-    shouldUseArrowSyntax?: boolean;
-    typeDefinitionByName?: TypeDefinitionByName;
-    docsInfo: DocsInfo;
-}
-
-const defaultProps = {
-    shouldHideMethodName: false,
-    shouldUseArrowSyntax: false,
-};
-
-export const MethodSignature: React.SFC<MethodSignatureProps> = (props: MethodSignatureProps) => {
-    const sectionName = constants.TYPES_SECTION_NAME;
-    const parameters = renderParameters(props.method, props.docsInfo, sectionName, props.typeDefinitionByName);
-    const paramStringArray: any[] = [];
-    // HACK: For now we don't put params on newlines if there are less then 2 of them.
-    // Ideally we would check the character length of the resulting method signature and
-    // if it exceeds the available space, put params on their own lines.
-    const hasMoreThenTwoParams = parameters.length > 2;
-    _.each(parameters, (param: React.ReactNode, i: number) => {
-        const finalParam = hasMoreThenTwoParams ? (
-            <span className="pl2" key={`param-${i}`}>
-                {param}
-            </span>
-        ) : (
-            param
-        );
-        paramStringArray.push(finalParam);
-        const comma = hasMoreThenTwoParams ? (
-            <span key={`param-comma-${i}`}>
-                , <br />
-            </span>
-        ) : (
-            ', '
-        );
-        paramStringArray.push(comma);
-    });
-    if (!hasMoreThenTwoParams) {
-        paramStringArray.pop();
-    }
-    const methodName = props.shouldHideMethodName ? '' : props.method.name;
-    const typeParameterIfExists = _.isUndefined((props.method as TypescriptMethod).typeParameter)
-        ? undefined
-        : renderTypeParameter(props.method, props.docsInfo, sectionName, props.typeDefinitionByName);
-    return (
-        <span style={{ fontSize: 15 }}>
-            {props.method.callPath}
-            {methodName}
-            {typeParameterIfExists}({hasMoreThenTwoParams && <br />}
-            {paramStringArray})
-            {props.method.returnType && (
-                <span>
-                    {props.shouldUseArrowSyntax ? ' => ' : ': '}{' '}
-                    <Type
-                        type={props.method.returnType}
-                        sectionName={sectionName}
-                        typeDefinitionByName={props.typeDefinitionByName}
-                        docsInfo={props.docsInfo}
-                    />
-                </span>
-            )}
-        </span>
-    );
-};
-
-MethodSignature.defaultProps = defaultProps;
-
-function renderParameters(
-    method: TypescriptMethod | SolidityMethod,
-    docsInfo: DocsInfo,
-    sectionName: string,
-    typeDefinitionByName?: TypeDefinitionByName,
-) {
-    const parameters = method.parameters;
-    const params = _.map(parameters, (p: Parameter) => {
-        const isOptional = p.isOptional;
-        const type = (
-            <Type
-                type={p.type}
-                sectionName={sectionName}
-                typeDefinitionByName={typeDefinitionByName}
-                docsInfo={docsInfo}
-            />
-        );
-        return (
-            <span key={`param-${p.type}-${p.name}`}>
-                {p.name}
-                {isOptional && '?'}: {type}
-            </span>
-        );
-    });
-    return params;
-}
-
-function renderTypeParameter(
-    method: TypescriptMethod,
-    docsInfo: DocsInfo,
-    sectionName: string,
-    typeDefinitionByName?: TypeDefinitionByName,
-) {
-    const typeParameter = method.typeParameter;
-    const typeParam = (
-        <span>
-            {`<${typeParameter.name} extends `}
-            <Type
-                type={typeParameter.type}
-                sectionName={sectionName}
-                typeDefinitionByName={typeDefinitionByName}
-                docsInfo={docsInfo}
-            />
-            {`>`}
-        </span>
-    );
-    return typeParam;
-}
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
deleted file mode 100644
index 31f80aba3..000000000
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Source } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-
-interface SourceLinkProps {
-    source: Source;
-    sourceUrl: string;
-    version: string;
-}
-
-export function SourceLink(props: SourceLinkProps) {
-    const src = props.source;
-    const sourceCodeUrl = `${props.sourceUrl}/${src.fileName}#L${src.line}`;
-    return (
-        <div className="pt2" style={{ fontSize: 14 }}>
-            <a href={sourceCodeUrl} target="_blank" className="underline" style={{ color: colors.grey }}>
-                Source
-            </a>
-        </div>
-    );
-}
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
deleted file mode 100644
index b306fa053..000000000
--- a/packages/website/ts/pages/documentation/type.tsx
+++ /dev/null
@@ -1,229 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Link as ScrollLink } from 'react-scroll';
-import * as ReactTooltip from 'react-tooltip';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { TypeDefinition } from 'ts/pages/documentation/type_definition';
-import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-// Some types reference other libraries. For these types, we want to link the user to the relevant documentation.
-const typeToUrl: { [typeName: string]: string } = {
-    Web3: constants.URL_WEB3_DOCS,
-    Provider: constants.URL_WEB3_PROVIDER_DOCS,
-    BigNumber: constants.URL_BIGNUMBERJS_GITHUB,
-    DecodedLogEntryEvent: constants.URL_WEB3_DECODED_LOG_ENTRY_EVENT,
-    LogEntryEvent: constants.URL_WEB3_LOG_ENTRY_EVENT,
-};
-
-const typePrefix: { [typeName: string]: string } = {
-    Provider: 'Web3',
-    DecodedLogEntryEvent: 'Web3',
-    LogEntryEvent: 'Web3',
-};
-
-const typeToSection: { [typeName: string]: string } = {
-    ExchangeWrapper: 'exchange',
-    TokenWrapper: 'token',
-    TokenRegistryWrapper: 'tokenRegistry',
-    EtherTokenWrapper: 'etherToken',
-    ProxyWrapper: 'proxy',
-    TokenTransferProxyWrapper: 'proxy',
-    OrderStateWatcher: 'orderWatcher',
-};
-
-interface TypeProps {
-    type: TypeDef;
-    docsInfo: DocsInfo;
-    sectionName: string;
-    typeDefinitionByName?: TypeDefinitionByName;
-}
-
-// The return type needs to be `any` here so that we can recursively define <Type /> components within
-// <Type /> components (e.g when rendering the union type).
-export function Type(props: TypeProps): any {
-    const type = props.type;
-    const isReference = type.typeDocType === TypeDocTypes.Reference;
-    const isArray = type.typeDocType === TypeDocTypes.Array;
-    let typeNameColor = 'inherit';
-    let typeName: string | React.ReactNode;
-    let typeArgs: React.ReactNode[] = [];
-    switch (type.typeDocType) {
-        case TypeDocTypes.Intrinsic:
-        case TypeDocTypes.Unknown:
-            typeName = type.name;
-            typeNameColor = colors.orange;
-            break;
-
-        case TypeDocTypes.Reference:
-            typeName = type.name;
-            typeArgs = _.map(type.typeArguments, (arg: TypeDef) => {
-                if (arg.typeDocType === TypeDocTypes.Array) {
-                    const key = `type-${arg.elementType.name}-${arg.elementType.typeDocType}`;
-                    return (
-                        <span>
-                            <Type
-                                key={key}
-                                type={arg.elementType}
-                                sectionName={props.sectionName}
-                                typeDefinitionByName={props.typeDefinitionByName}
-                                docsInfo={props.docsInfo}
-                            />[]
-                        </span>
-                    );
-                } else {
-                    const subType = (
-                        <Type
-                            key={`type-${arg.name}-${arg.value}-${arg.typeDocType}`}
-                            type={arg}
-                            sectionName={props.sectionName}
-                            typeDefinitionByName={props.typeDefinitionByName}
-                            docsInfo={props.docsInfo}
-                        />
-                    );
-                    return subType;
-                }
-            });
-            break;
-
-        case TypeDocTypes.StringLiteral:
-            typeName = `'${type.value}'`;
-            typeNameColor = colors.green;
-            break;
-
-        case TypeDocTypes.Array:
-            typeName = type.elementType.name;
-            break;
-
-        case TypeDocTypes.Union:
-            const unionTypes = _.map(type.types, t => {
-                return (
-                    <Type
-                        key={`type-${t.name}-${t.value}-${t.typeDocType}`}
-                        type={t}
-                        sectionName={props.sectionName}
-                        typeDefinitionByName={props.typeDefinitionByName}
-                        docsInfo={props.docsInfo}
-                    />
-                );
-            });
-            typeName = _.reduce(unionTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
-                return [prev, '|', curr];
-            });
-            break;
-
-        case TypeDocTypes.TypeParameter:
-            typeName = type.name;
-            break;
-
-        case TypeDocTypes.Intersection:
-            const intersectionsTypes = _.map(type.types, t => {
-                return (
-                    <Type
-                        key={`type-${t.name}-${t.value}-${t.typeDocType}`}
-                        type={t}
-                        sectionName={props.sectionName}
-                        typeDefinitionByName={props.typeDefinitionByName}
-                        docsInfo={props.docsInfo}
-                    />
-                );
-            });
-            typeName = _.reduce(intersectionsTypes, (prev: React.ReactNode, curr: React.ReactNode) => {
-                return [prev, '&', curr];
-            });
-            break;
-
-        default:
-            throw utils.spawnSwitchErr('type.typeDocType', type.typeDocType);
-    }
-    // HACK: Normalize BigNumber to simply BigNumber. For some reason the type
-    // name is unpredictably one or the other.
-    if (typeName === 'BigNumber') {
-        typeName = 'BigNumber';
-    }
-    const commaSeparatedTypeArgs = _.reduce(typeArgs, (prev: React.ReactNode, curr: React.ReactNode) => {
-        return [prev, ', ', curr];
-    });
-
-    const typeNameUrlIfExists = typeToUrl[typeName as string];
-    const typePrefixIfExists = typePrefix[typeName as string];
-    const sectionNameIfExists = typeToSection[typeName as string];
-    if (!_.isUndefined(typeNameUrlIfExists)) {
-        typeName = (
-            <a
-                href={typeNameUrlIfExists}
-                target="_blank"
-                className="text-decoration-none"
-                style={{ color: colors.lightBlueA700 }}
-            >
-                {!_.isUndefined(typePrefixIfExists) ? `${typePrefixIfExists}.` : ''}
-                {typeName}
-            </a>
-        );
-    } else if (
-        (isReference || isArray) &&
-        (props.docsInfo.isPublicType(typeName as string) || !_.isUndefined(sectionNameIfExists))
-    ) {
-        const id = Math.random().toString();
-        const typeDefinitionAnchorId = _.isUndefined(sectionNameIfExists)
-            ? `${props.sectionName}-${typeName}`
-            : sectionNameIfExists;
-        let typeDefinition;
-        if (props.typeDefinitionByName) {
-            typeDefinition = props.typeDefinitionByName[typeName as string];
-        }
-        typeName = (
-            <ScrollLink
-                to={typeDefinitionAnchorId}
-                offset={0}
-                duration={constants.DOCS_SCROLL_DURATION_MS}
-                containerId={constants.DOCS_CONTAINER_ID}
-            >
-                {_.isUndefined(typeDefinition) || utils.isUserOnMobile() ? (
-                    <span
-                        onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
-                        style={{ color: colors.lightBlueA700, cursor: 'pointer' }}
-                    >
-                        {typeName}
-                    </span>
-                ) : (
-                    <span
-                        data-tip={true}
-                        data-for={id}
-                        onClick={utils.setUrlHash.bind(null, typeDefinitionAnchorId)}
-                        style={{
-                            color: colors.lightBlueA700,
-                            cursor: 'pointer',
-                            display: 'inline-block',
-                        }}
-                    >
-                        {typeName}
-                        <ReactTooltip type="light" effect="solid" id={id} className="typeTooltip">
-                            <TypeDefinition
-                                sectionName={props.sectionName}
-                                customType={typeDefinition}
-                                shouldAddId={false}
-                                docsInfo={props.docsInfo}
-                            />
-                        </ReactTooltip>
-                    </span>
-                )}
-            </ScrollLink>
-        );
-    }
-    return (
-        <span>
-            <span style={{ color: typeNameColor }}>{typeName}</span>
-            {isArray && '[]'}
-            {!_.isEmpty(typeArgs) && (
-                <span>
-                    {'<'}
-                    {commaSeparatedTypeArgs}
-                    {'>'}
-                </span>
-            )}
-        </span>
-    );
-}
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
deleted file mode 100644
index 02bf63258..000000000
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Comment } from 'ts/pages/documentation/comment';
-import { CustomEnum } from 'ts/pages/documentation/custom_enum';
-import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { Enum } from 'ts/pages/documentation/enum';
-import { Interface } from 'ts/pages/documentation/interface';
-import { MethodSignature } from 'ts/pages/documentation/method_signature';
-import { Type } from 'ts/pages/documentation/type';
-import { AnchorTitle } from 'ts/pages/shared/anchor_title';
-import { CustomType, CustomTypeChild, HeaderSizes, KindString, TypeDocTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { utils } from 'ts/utils/utils';
-
-interface TypeDefinitionProps {
-    sectionName: string;
-    customType: CustomType;
-    shouldAddId?: boolean;
-    docsInfo: DocsInfo;
-}
-
-interface TypeDefinitionState {
-    shouldShowAnchor: boolean;
-}
-
-export class TypeDefinition extends React.Component<TypeDefinitionProps, TypeDefinitionState> {
-    public static defaultProps: Partial<TypeDefinitionProps> = {
-        shouldAddId: true,
-    };
-    constructor(props: TypeDefinitionProps) {
-        super(props);
-        this.state = {
-            shouldShowAnchor: false,
-        };
-    }
-    public render() {
-        const customType = this.props.customType;
-        if (!this.props.docsInfo.isPublicType(customType.name)) {
-            return null; // no-op
-        }
-
-        let typePrefix: string;
-        let codeSnippet: React.ReactNode;
-        switch (customType.kindString) {
-            case KindString.Interface:
-                typePrefix = 'Interface';
-                codeSnippet = (
-                    <Interface type={customType} sectionName={this.props.sectionName} docsInfo={this.props.docsInfo} />
-                );
-                break;
-
-            case KindString.Variable:
-                typePrefix = 'Enum';
-                codeSnippet = <CustomEnum type={customType} />;
-                break;
-
-            case KindString.Enumeration:
-                typePrefix = 'Enum';
-                const enumValues = _.map(customType.children, (c: CustomTypeChild) => {
-                    return {
-                        name: c.name,
-                        defaultValue: c.defaultValue,
-                    };
-                });
-                codeSnippet = <Enum values={enumValues} />;
-                break;
-
-            case KindString.TypeAlias:
-                typePrefix = 'Type Alias';
-                codeSnippet = (
-                    <span>
-                        <span style={{ color: colors.lightPurple }}>type</span> {customType.name} ={' '}
-                        {customType.type.typeDocType !== TypeDocTypes.Reflection ? (
-                            <Type
-                                type={customType.type}
-                                sectionName={this.props.sectionName}
-                                docsInfo={this.props.docsInfo}
-                            />
-                        ) : (
-                            <MethodSignature
-                                method={customType.type.method}
-                                sectionName={this.props.sectionName}
-                                shouldHideMethodName={true}
-                                shouldUseArrowSyntax={true}
-                                docsInfo={this.props.docsInfo}
-                            />
-                        )}
-                    </span>
-                );
-                break;
-
-            default:
-                throw utils.spawnSwitchErr('type.kindString', customType.kindString);
-        }
-
-        const typeDefinitionAnchorId = `${this.props.sectionName}-${customType.name}`;
-        return (
-            <div
-                id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
-                className="pb2"
-                style={{ overflow: 'hidden', width: '100%' }}
-                onMouseOver={this._setAnchorVisibility.bind(this, true)}
-                onMouseOut={this._setAnchorVisibility.bind(this, false)}
-            >
-                <AnchorTitle
-                    headerSize={HeaderSizes.H3}
-                    title={`${typePrefix} ${customType.name}`}
-                    id={this.props.shouldAddId ? typeDefinitionAnchorId : ''}
-                    shouldShowAnchor={this.state.shouldShowAnchor}
-                />
-                <div style={{ fontSize: 16 }}>
-                    <pre>
-                        <code className="hljs">{codeSnippet}</code>
-                    </pre>
-                </div>
-                <div style={{ maxWidth: 620 }}>
-                    {customType.comment && <Comment comment={customType.comment} className="py2" />}
-                </div>
-            </div>
-        );
-    }
-    private _setAnchorVisibility(shouldShowAnchor: boolean) {
-        this.setState({
-            shouldShowAnchor,
-        });
-    }
-}
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index 34175abdc..1be3c3565 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,3 +1,4 @@
+import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
@@ -5,8 +6,7 @@ import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Question } from 'ts/pages/faq/question';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { FAQQuestion, FAQSection, Styles, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { FAQQuestion, FAQSection, WebsitePaths } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 988c04bc9..240dae910 100644
--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import { Card, CardHeader, CardText } from 'material-ui/Card';
 import * as React from 'react';
-import { colors } from 'ts/utils/colors';
 
 export interface QuestionProps {
     prompt: string;
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 044f0b41f..6699e4e6f 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
@@ -7,7 +8,6 @@ import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/pages/not_found.tsx b/packages/website/ts/pages/not_found.tsx
index ad37f6242..ff25a35e9 100644
--- a/packages/website/ts/pages/not_found.tsx
+++ b/packages/website/ts/pages/not_found.tsx
@@ -1,9 +1,9 @@
+import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Styles } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 
 export interface NotFoundProps {
diff --git a/packages/website/ts/pages/shared/anchor_title.tsx b/packages/website/ts/pages/shared/anchor_title.tsx
deleted file mode 100644
index 0270618a0..000000000
--- a/packages/website/ts/pages/shared/anchor_title.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import * as React from 'react';
-import { Link as ScrollLink } from 'react-scroll';
-import { HeaderSizes, Styles } from 'ts/types';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-const headerSizeToScrollOffset: { [headerSize: string]: number } = {
-    h2: -20,
-    h3: 0,
-};
-
-interface AnchorTitleProps {
-    title: string | React.ReactNode;
-    id: string;
-    headerSize: HeaderSizes;
-    shouldShowAnchor: boolean;
-}
-
-interface AnchorTitleState {
-    isHovering: boolean;
-}
-
-const styles: Styles = {
-    anchor: {
-        fontSize: 20,
-        transform: 'rotate(45deg)',
-        cursor: 'pointer',
-    },
-    headers: {
-        WebkitMarginStart: 0,
-        WebkitMarginEnd: 0,
-        fontWeight: 'bold',
-        display: 'block',
-    },
-    h1: {
-        fontSize: '1.8em',
-    },
-    h2: {
-        fontSize: '1.5em',
-        fontWeight: 400,
-    },
-    h3: {
-        fontSize: '1.17em',
-    },
-};
-
-export class AnchorTitle extends React.Component<AnchorTitleProps, AnchorTitleState> {
-    constructor(props: AnchorTitleProps) {
-        super(props);
-        this.state = {
-            isHovering: false,
-        };
-    }
-    public render() {
-        let opacity = 0;
-        if (this.props.shouldShowAnchor) {
-            opacity = this.state.isHovering ? 0.6 : 1;
-        }
-        return (
-            <div className="relative flex" style={{ ...styles[this.props.headerSize], ...styles.headers }}>
-                <div className="inline-block" style={{ paddingRight: 4 }}>
-                    {this.props.title}
-                </div>
-                <ScrollLink
-                    to={this.props.id}
-                    offset={headerSizeToScrollOffset[this.props.headerSize]}
-                    duration={constants.DOCS_SCROLL_DURATION_MS}
-                    containerId={constants.DOCS_CONTAINER_ID}
-                >
-                    <i
-                        className="zmdi zmdi-link"
-                        onClick={utils.setUrlHash.bind(utils, this.props.id)}
-                        style={{ ...styles.anchor, opacity }}
-                        onMouseOver={this._setHoverState.bind(this, true)}
-                        onMouseOut={this._setHoverState.bind(this, false)}
-                    />
-                </ScrollLink>
-            </div>
-        );
-    }
-    private _setHoverState(isHovering: boolean) {
-        this.setState({
-            isHovering,
-        });
-    }
-}
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/website/ts/pages/shared/markdown_code_block.tsx
deleted file mode 100644
index 6dfb74554..000000000
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import * as HighLight from 'react-highlight';
-
-interface MarkdownCodeBlockProps {
-    value: string;
-    language: string;
-}
-
-interface MarkdownCodeBlockState {}
-
-export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, MarkdownCodeBlockState> {
-    // 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.value !== this.props.value || nextProps.language !== this.props.language;
-    }
-    public render() {
-        return (
-            <span style={{ fontSize: 14 }}>
-                <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
deleted file mode 100644
index e4553c87f..000000000
--- a/packages/website/ts/pages/shared/markdown_link_block.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-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
deleted file mode 100644
index 7253072d9..000000000
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as _ from 'lodash';
-import RaisedButton from 'material-ui/RaisedButton';
-import * as React from 'react';
-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';
-
-interface MarkdownSectionProps {
-    sectionName: string;
-    markdownContent: string;
-    headerSize?: HeaderSizes;
-    githubLink?: string;
-}
-
-interface MarkdownSectionState {
-    shouldShowAnchor: boolean;
-}
-
-export class MarkdownSection extends React.Component<MarkdownSectionProps, MarkdownSectionState> {
-    public static defaultProps: Partial<MarkdownSectionProps> = {
-        headerSize: HeaderSizes.H3,
-    };
-    constructor(props: MarkdownSectionProps) {
-        super(props);
-        this.state = {
-            shouldShowAnchor: false,
-        };
-    }
-    public render() {
-        const sectionName = this.props.sectionName;
-        const id = utils.getIdFromName(sectionName);
-        return (
-            <div
-                className="md-px1 sm-px2 overflow-hidden"
-                onMouseOver={this._setAnchorVisibility.bind(this, true)}
-                onMouseOut={this._setAnchorVisibility.bind(this, false)}
-            >
-                <ScrollElement name={id}>
-                    <div className="clearfix pt3">
-                        <div className="col lg-col-8 md-col-8 sm-col-12">
-                            <span style={{ textTransform: 'capitalize', color: colors.grey700 }}>
-                                <AnchorTitle
-                                    headerSize={this.props.headerSize}
-                                    title={sectionName}
-                                    id={id}
-                                    shouldShowAnchor={this.state.shouldShowAnchor}
-                                />
-                            </span>
-                        </div>
-                        <div className="col col-4 sm-hide xs-hide right-align pr3" style={{ height: 28 }}>
-                            {!_.isUndefined(this.props.githubLink) && (
-                                <a
-                                    href={this.props.githubLink}
-                                    target="_blank"
-                                    style={{ color: colors.linkBlue, textDecoration: 'none', lineHeight: 2.1 }}
-                                >
-                                    Edit on Github
-                                </a>
-                            )}
-                        </div>
-                    </div>
-                    <hr style={{ border: `1px solid ${colors.lightestGrey}` }} />
-                    <ReactMarkdown
-                        source={this.props.markdownContent}
-                        escapeHtml={false}
-                        renderers={{
-                            code: MarkdownCodeBlock,
-                            link: MarkdownLinkBlock,
-                        }}
-                    />
-                </ScrollElement>
-            </div>
-        );
-    }
-    private _setAnchorVisibility(shouldShowAnchor: boolean) {
-        this.setState({
-            shouldShowAnchor,
-        });
-    }
-}
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
deleted file mode 100644
index 82a40eb7e..000000000
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import * as _ from 'lodash';
-import MenuItem from 'material-ui/MenuItem';
-import * as React from 'react';
-import { Link as ScrollLink } from 'react-scroll';
-import { VersionDropDown } from 'ts/pages/shared/version_drop_down';
-import { MenuSubsectionsBySection, Styles } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { constants } from 'ts/utils/constants';
-import { utils } from 'ts/utils/utils';
-
-interface NestedSidebarMenuProps {
-    topLevelMenu: { [topLevel: string]: string[] };
-    menuSubsectionsBySection: MenuSubsectionsBySection;
-    title: string;
-    shouldDisplaySectionHeaders?: boolean;
-    onMenuItemClick?: () => void;
-    selectedVersion?: string;
-    versions?: string[];
-}
-
-interface NestedSidebarMenuState {}
-
-const styles: Styles = {
-    menuItemWithHeaders: {
-        minHeight: 0,
-    },
-    menuItemWithoutHeaders: {
-        minHeight: 48,
-    },
-    menuItemInnerDivWithHeaders: {
-        color: colors.grey800,
-        fontSize: 14,
-        lineHeight: 2,
-        padding: 0,
-    },
-};
-
-const titleToIcon: { [title: string]: string } = {
-    '0x.js': 'zeroExJs.png',
-    '0x Connect': 'connect.png',
-    '0x Smart Contracts': 'contracts.png',
-    Wiki: 'wiki.png',
-};
-
-export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, NestedSidebarMenuState> {
-    public static defaultProps: Partial<NestedSidebarMenuProps> = {
-        shouldDisplaySectionHeaders: true,
-        onMenuItemClick: _.noop,
-    };
-    public render() {
-        const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => {
-            const finalSectionName = sectionName.replace(/-/g, ' ');
-            if (this.props.shouldDisplaySectionHeaders) {
-                const id = utils.getIdFromName(sectionName);
-                return (
-                    <div key={`section-${sectionName}`} className="py1" style={{ color: colors.grey800 }}>
-                        <div style={{ fontWeight: 'bold', fontSize: 15 }} className="py1">
-                            {finalSectionName.toUpperCase()}
-                        </div>
-                        {this._renderMenuItems(menuItems)}
-                    </div>
-                );
-            } else {
-                return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
-            }
-        });
-        return (
-            <div>
-                {this._renderEmblem()}
-                {!_.isUndefined(this.props.versions) &&
-                    !_.isUndefined(this.props.selectedVersion) && (
-                        <VersionDropDown selectedVersion={this.props.selectedVersion} versions={this.props.versions} />
-                    )}
-                <div className="pl1">{navigation}</div>
-            </div>
-        );
-    }
-    private _renderEmblem() {
-        return (
-            <div className="pt2 md-px1 sm-px2" style={{ color: colors.black, paddingBottom: 18 }}>
-                <div className="flex" style={{ fontSize: 25 }}>
-                    <div className="robotoMono" style={{ fontWeight: 'bold' }}>
-                        0x
-                    </div>
-                    <div className="pl2" style={{ lineHeight: 1.4, fontWeight: 300 }}>
-                        docs
-                    </div>
-                </div>
-                <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="22" />
-                    </div>
-                    <div className="pl1" style={{ fontWeight: 600, fontSize: 20, lineHeight: 1.2 }}>
-                        {this.props.title}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-    private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] {
-        const menuItemStyles = this.props.shouldDisplaySectionHeaders
-            ? styles.menuItemWithHeaders
-            : styles.menuItemWithoutHeaders;
-        const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
-        const menuItems = _.map(menuItemNames, menuItemName => {
-            const id = utils.getIdFromName(menuItemName);
-            return (
-                <div key={menuItemName}>
-                    <ScrollLink
-                        key={`menuItem-${menuItemName}`}
-                        to={id}
-                        offset={-10}
-                        duration={constants.DOCS_SCROLL_DURATION_MS}
-                        containerId={constants.DOCS_CONTAINER_ID}
-                    >
-                        <MenuItem
-                            onTouchTap={this._onMenuItemClick.bind(this, menuItemName)}
-                            style={menuItemStyles}
-                            innerDivStyle={menuItemInnerDivStyles}
-                        >
-                            <span style={{ textTransform: 'capitalize' }}>{menuItemName}</span>
-                        </MenuItem>
-                    </ScrollLink>
-                    {this._renderMenuItemSubsections(menuItemName)}
-                </div>
-            );
-        });
-        return menuItems;
-    }
-    private _renderMenuItemSubsections(menuItemName: string): React.ReactNode {
-        if (_.isUndefined(this.props.menuSubsectionsBySection[menuItemName])) {
-            return null;
-        }
-        return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]);
-    }
-    private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode {
-        return (
-            <ul style={{ margin: 0, listStyleType: 'none', paddingLeft: 0 }} key={menuItemName}>
-                {_.map(entityNames, entityName => {
-                    const name = `${menuItemName}-${entityName}`;
-                    const id = utils.getIdFromName(name);
-                    return (
-                        <li key={`menuItem-${entityName}`}>
-                            <ScrollLink
-                                to={id}
-                                offset={0}
-                                duration={constants.DOCS_SCROLL_DURATION_MS}
-                                containerId={constants.DOCS_CONTAINER_ID}
-                                onTouchTap={this._onMenuItemClick.bind(this, name)}
-                            >
-                                <MenuItem
-                                    onTouchTap={this._onMenuItemClick.bind(this, name)}
-                                    style={{ minHeight: 35 }}
-                                    innerDivStyle={{
-                                        paddingLeft: 16,
-                                        fontSize: 14,
-                                        lineHeight: '35px',
-                                    }}
-                                >
-                                    {entityName}
-                                </MenuItem>
-                            </ScrollLink>
-                        </li>
-                    );
-                })}
-            </ul>
-        );
-    }
-    private _onMenuItemClick(name: string): void {
-        const id = utils.getIdFromName(name);
-        utils.setUrlHash(id);
-        this.props.onMenuItemClick();
-    }
-}
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/website/ts/pages/shared/section_header.tsx
deleted file mode 100644
index 52a1f30d9..000000000
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-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 {
-    sectionName: string;
-    headerSize?: HeaderSizes;
-}
-
-interface SectionHeaderState {
-    shouldShowAnchor: boolean;
-}
-
-export class SectionHeader extends React.Component<SectionHeaderProps, SectionHeaderState> {
-    public static defaultProps: Partial<SectionHeaderProps> = {
-        headerSize: HeaderSizes.H2,
-    };
-    constructor(props: SectionHeaderProps) {
-        super(props);
-        this.state = {
-            shouldShowAnchor: false,
-        };
-    }
-    public render() {
-        const sectionName = this.props.sectionName.replace(/-/g, ' ');
-        const id = utils.getIdFromName(sectionName);
-        return (
-            <div
-                onMouseOver={this._setAnchorVisibility.bind(this, true)}
-                onMouseOut={this._setAnchorVisibility.bind(this, false)}
-            >
-                <ScrollElement name={id}>
-                    <AnchorTitle
-                        headerSize={this.props.headerSize}
-                        title={
-                            <span
-                                style={{
-                                    textTransform: 'uppercase',
-                                    color: colors.grey,
-                                    fontFamily: 'Roboto Mono',
-                                    fontWeight: 300,
-                                    fontSize: 27,
-                                }}
-                            >
-                                {sectionName}
-                            </span>
-                        }
-                        id={id}
-                        shouldShowAnchor={this.state.shouldShowAnchor}
-                    />
-                </ScrollElement>
-            </div>
-        );
-    }
-    private _setAnchorVisibility(shouldShowAnchor: boolean) {
-        this.setState({
-            shouldShowAnchor,
-        });
-    }
-}
diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/website/ts/pages/shared/version_drop_down.tsx
deleted file mode 100644
index 1b4dbb375..000000000
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-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;
-    versions: string[];
-}
-
-interface VersionDropDownState {}
-
-export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
-    public render() {
-        return (
-            <div className="mx-auto" style={{ width: 120 }}>
-                <DropDownMenu
-                    maxHeight={300}
-                    value={this.props.selectedVersion}
-                    onChange={this._updateSelectedVersion.bind(this)}
-                >
-                    {this._renderDropDownItems()}
-                </DropDownMenu>
-            </div>
-        );
-    }
-    private _renderDropDownItems() {
-        const items = _.map(this.props.versions, version => {
-            return <MenuItem key={version} value={version} primaryText={`v${version}`} />;
-        });
-        return items;
-    }
-    private _updateSelectedVersion(e: any, index: number, semver: string) {
-        let path = window.location.pathname;
-        const lastChar = path[path.length - 1];
-        if (_.isFinite(_.parseInt(lastChar))) {
-            const pathSections = path.split('/');
-            pathSections.pop();
-            path = pathSections.join('/');
-        }
-        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 4bb6052a2..f6cff51e4 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,16 +1,23 @@
+import {
+    colors,
+    constants as sharedConstants,
+    HeaderSizes,
+    MarkdownSection,
+    NestedSidebarMenu,
+    SectionHeader,
+    Styles,
+    utils as sharedUtils,
+} from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import { scroller } from 'react-scroll';
+import { SidebarHeader } from 'ts/components/sidebar_header';
 import { TopBar } from 'ts/components/top_bar/top_bar';
-import { MarkdownSection } from 'ts/pages/shared/markdown_section';
-import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
-import { SectionHeader } from 'ts/pages/shared/section_header';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Article, ArticlesBySection, HeaderSizes, Styles, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { Article, ArticlesBySection, WebsitePaths } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
@@ -60,6 +67,9 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             isHoveringSidebar: false,
         };
     }
+    public componentDidMount() {
+        window.addEventListener('hashchange', this._onHashChanged.bind(this), false);
+    }
     public componentWillMount() {
         // tslint:disable-next-line:no-floating-promises
         this._fetchArticlesBySectionAsync();
@@ -67,6 +77,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
     public componentWillUnmount() {
         this._isUnmounted = true;
         clearTimeout(this._wikiBackoffTimeoutId);
+        window.removeEventListener('hashchange', this._onHashChanged.bind(this), false);
     }
     public render() {
         const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
@@ -122,7 +133,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                                     <NestedSidebarMenu
                                         topLevelMenu={menuSubsectionsBySection}
                                         menuSubsectionsBySection={menuSubsectionsBySection}
-                                        title="Wiki"
+                                        sidebarHeader={<SidebarHeader title="Wiki" />}
                                     />
                                 </div>
                             </div>
@@ -135,11 +146,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                                 }}
                             >
                                 <div
-                                    id={configs.SCROLL_CONTAINER_ID}
+                                    id={sharedConstants.SCROLL_CONTAINER_ID}
                                     style={{ ...mainContainersStyle, overflow: 'auto' }}
                                     className="absolute"
                                 >
-                                    <div id={configs.SCROLL_TOP_ID} />
+                                    <div id={sharedConstants.SCROLL_TOP_ID} />
                                     <div id="wiki" style={{ paddingRight: 2 }}>
                                         {this._renderWikiArticles()}
                                     </div>
@@ -214,7 +225,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                 async () => {
                     await utils.onPageLoadAsync();
                     const hash = this.props.location.hash.slice(1);
-                    utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
+                    sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
                 },
             );
         }
@@ -239,4 +250,8 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             isHoveringSidebar: false,
         });
     }
+    private _onHashChanged(event: any) {
+        const hash = window.location.hash.slice(1);
+        sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
+    }
 }