Moved over all pages/shared components and dependencies to react-shared

21 files changed, 40 insertions, 478 deletions

diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 65dcdfa7b..7f1e0bf80 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
@@ -7,7 +7,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Profile } from 'ts/pages/about/profile';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProfileInfo } 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/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index 6d9d10272..4361da103 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -1,8 +1,7 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { ProfileInfo } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 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
index 5f177e97e..b8902679a 100644
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ b/packages/website/ts/pages/documentation/comment.tsx
@@ -1,7 +1,7 @@
+import { MarkdownCodeBlock } from '@0xproject/react-shared';
 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;
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 2c8f1c103..b3b58c0c8 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -1,3 +1,4 @@
+import { MenuSubsectionsBySection } from '@0xproject/react-shared';
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import * as React from 'react';
@@ -7,7 +8,7 @@ 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 { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { docUtils } from 'ts/utils/doc_utils';
diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts
index 31e151fe8..09fb7a2bc 100644
--- a/packages/website/ts/pages/documentation/docs_info.ts
+++ b/packages/website/ts/pages/documentation/docs_info.ts
@@ -1,3 +1,4 @@
+import { MenuSubsectionsBySection } from '@0xproject/react-shared';
 import compareVersions = require('compare-versions');
 import * as _ from 'lodash';
 import {
@@ -6,7 +7,6 @@ import {
     DocsInfoConfig,
     DocsMenu,
     DoxityDocObj,
-    MenuSubsectionsBySection,
     SectionsMap,
     SupportedDocJson,
     TypeDocNode,
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 88331d1a7..3229bbd93 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -1,4 +1,13 @@
-import { Styles } from '@0xproject/react-shared';
+import {
+    colors,
+    constants as sharedConstants,
+    MarkdownSection,
+    MenuSubsectionsBySection,
+    NestedSidebarMenu,
+    SectionHeader,
+    Styles,
+    utils as sharedUtils,
+} from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
@@ -11,16 +20,12 @@ 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,
@@ -28,8 +33,6 @@ import {
     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';
 
@@ -77,7 +80,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
     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);
+            sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
         }
     }
     public render() {
@@ -117,11 +120,11 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                 style={{ backgroundColor: colors.white }}
                             >
                                 <div
-                                    id={configs.SCROLL_CONTAINER_ID}
+                                    id={sharedConstants.SCROLL_CONTAINER_ID}
                                     style={styles.mainContainers}
                                     className="absolute px1"
                                 >
-                                    <div id={configs.SCROLL_TOP_ID} />
+                                    <div id={sharedConstants.SCROLL_TOP_ID} />
                                     {this._renderDocumentation()}
                                 </div>
                             </div>
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index aead27d78..06d8a3d79 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -1,10 +1,9 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
+import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared';
 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 { Event, EventArg } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 interface EventDefinitionProps {
     event: Event;
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index a1f0b38ab..a52ab55c3 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,4 +1,4 @@
-import { AnchorTitle, HeaderSizes, Styles } from '@0xproject/react-shared';
+import { AnchorTitle, colors, HeaderSizes, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Comment } from 'ts/pages/documentation/comment';
@@ -6,7 +6,6 @@ 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 { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { typeDocUtils } from 'ts/utils/typedoc_utils';
 
 interface MethodBlockProps {
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 31f80aba3..d39ad14c4 100644
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Source } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 interface SourceLinkProps {
     source: Source;
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 2fec4c95f..2c90a0567 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,4 +1,4 @@
-import { constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
@@ -6,7 +6,6 @@ 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';
 
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index dd83d120d..60f307c68 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -1,4 +1,4 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
+import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Comment } from 'ts/pages/documentation/comment';
@@ -9,7 +9,6 @@ import { Interface } from 'ts/pages/documentation/interface';
 import { MethodSignature } from 'ts/pages/documentation/method_signature';
 import { Type } from 'ts/pages/documentation/type';
 import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface TypeDefinitionProps {
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index 70d116622..1be3c3565 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
@@ -7,7 +7,6 @@ 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, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 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/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 b1f68c915..000000000
--- a/packages/website/ts/pages/shared/markdown_link_block.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { utils as sharedUtils } from '@0xproject/react-shared';
-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);
-        sharedUtils.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 d03b30f4b..000000000
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
-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 { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
-import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block';
-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 abbd34c98..000000000
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import { constants, Styles, utils as sharedUtils } from '@0xproject/react-shared';
-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 } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-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);
-        sharedUtils.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 3f661a1e5..000000000
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
-import * as React from 'react';
-import { Element as ScrollElement } from 'react-scroll';
-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 b22ce5826..f338ed9c2 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,4 +1,13 @@
-import { HeaderSizes, Styles } from '@0xproject/react-shared';
+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';
@@ -6,12 +15,8 @@ import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import { scroller } from 'react-scroll';
 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, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
@@ -136,11 +141,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>
@@ -215,7 +220,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);
                 },
             );
         }