Use same Link UI component for react-scroll links

21 files changed, 67 insertions, 160 deletions

diff --git a/packages/website/package.json b/packages/website/package.json
index ab8835248..37e75e84e 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -52,7 +52,6 @@
         "react-helmet": "^5.2.0",
         "react-popper": "^1.0.0-beta.6",
         "react-redux": "^5.0.3",
-        "react-router-dom": "^4.1.1",
         "react-scroll": "0xproject/react-scroll#similar-to-pr-330",
         "react-tooltip": "^3.2.7",
         "react-typist": "^2.0.4",
@@ -81,7 +80,6 @@
         "@types/react-dom": "^16.0.7",
         "@types/react-helmet": "^5.0.6",
         "@types/react-redux": "^4.4.37",
-        "@types/react-router-dom": "^4.0.4",
         "@types/react-scroll": "1.5.3",
         "@types/react-tap-event-plugin": "0.0.30",
         "@types/redux": "^3.6.0",
diff --git a/packages/website/ts/components/documentation/docs_content_top_bar.tsx b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
index 7edb51587..d3735f2be 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -1,12 +1,11 @@
-import { colors, NestedSidebarMenu } from '@0xproject/react-shared';
+import { ALink, colors, Link, NestedSidebarMenu } from '@0xproject/react-shared';
 import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import * as React from 'react';
 import { DocsLogo } from 'ts/components/documentation/docs_logo';
 import { Container } from 'ts/components/ui/container';
-import { Link } from 'ts/components/ui/link';
-import { ALink, Deco, Key, WebsitePaths } from 'ts/types';
+import { Deco, Key, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
@@ -147,12 +146,12 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
             >
                 <div className="clearfix pl1">
                     TODO
-                    {/* <NestedSidebarMenu
-                        topLevelMenu={this.props.menu}
+                    <NestedSidebarMenu
+                        sectionNameToLinks={this.props.sectionNameToLinks}
                         shouldDisplaySectionHeaders={true}
                         shouldReformatMenuItemNames={false}
                         onMenuItemClick={this._onMenuButtonClick.bind(this)}
-                    /> */}
+                    />
                 </div>
             </Drawer>
         );
diff --git a/packages/website/ts/components/documentation/docs_logo.tsx b/packages/website/ts/components/documentation/docs_logo.tsx
index c16499158..6f3c3c6e8 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -1,5 +1,5 @@
+import { Link } from '@0xproject/react-shared';
 import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
 import { WebsitePaths } from 'ts/types';
 
 export interface DocsLogoProps {
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
index 42aa37bc7..a0d99e175 100644
--- a/packages/website/ts/components/documentation/tutorial_button.tsx
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -1,7 +1,6 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
 import { Text } from 'ts/components/ui/text';
 import { Deco, Key, TutorialInfo } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index af0ae825c..4167b3d23 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -1,11 +1,10 @@
-import { colors } from '@0xproject/react-shared';
+import { ALink, colors, Link, LinkType } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
-import { Link } from 'ts/components/ui/link';
 import { Text } from 'ts/components/ui/text';
-import { ALink, Deco, Key, LinkType, WebsitePaths } from 'ts/types';
+import { Deco, Key, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index ec1d698f3..99939ce43 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,5 +1,5 @@
 import { assetDataUtils, orderHashUtils } from '@0xproject/order-utils';
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
 import { BigNumber, logUtils } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as accounting from 'accounting';
@@ -16,7 +16,6 @@ import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
 import { Alert } from 'ts/components/ui/alert';
 import { EthereumAddress } from 'ts/components/ui/ethereum_address';
 import { Identicon } from 'ts/components/ui/identicon';
-import { Link } from 'ts/components/ui/link';
 import { VisualOrder } from 'ts/components/visual_order';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index bec3c17f7..02770c073 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,13 +1,12 @@
-import { colors } from '@0xproject/react-shared';
+import { ALink, colors, Link, LinkType } from '@0xproject/react-shared';
 import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
 
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { ALink, Deco, Key, Language, LinkType, WebsitePaths } from 'ts/types';
+import { Deco, Key, Language, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index adf96f9ee..562f670e2 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,11 +1,10 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
 import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
-import { Link } from 'ts/components/ui/link';
 import { Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
 
 interface TokenAmountInputProps {
diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx
index bdbcef343..64a332e07 100644
--- a/packages/website/ts/components/portal/back_button.tsx
+++ b/packages/website/ts/components/portal/back_button.tsx
@@ -1,7 +1,5 @@
-import { Styles } from '@0xproject/react-shared';
+import { Link, Styles } from '@0xproject/react-shared';
 import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
-
 import { Island } from 'ts/components/ui/island';
 import { colors } from 'ts/style/colors';
 
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index a9ccf9e11..b8cd45661 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,10 +1,9 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import { Route, RouteComponentProps, Switch } from 'react-router-dom';
-import { Link } from 'ts/components/ui/link';
 
 import { Blockchain } from 'ts/blockchain';
 import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 3da2307e0..e25c0a0f7 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -1,11 +1,14 @@
-import { DocsInfo, DocsMenu } from '@0xproject/react-docs';
+import { DocsInfo } from '@0xproject/react-docs';
 import {
+    ALink,
     colors,
     constants as sharedConstants,
-    MenuSubsectionsBySection,
+    Link,
+    LinkType,
     NestedSidebarMenu,
     Styles,
 } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
@@ -16,9 +19,8 @@ import { DrawerMenu } from 'ts/components/portal/drawer_menu';
 import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
 import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
 import { Container } from 'ts/components/ui/container';
-import { Link } from 'ts/components/ui/link';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, LinkType, ProviderType, WebsitePaths } from 'ts/types';
+import { Deco, Key, ProviderType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
@@ -40,8 +42,8 @@ export interface TopBarProps {
     translate: Translate;
     docsVersion?: string;
     availableDocVersions?: string[];
-    menu?: DocsMenu;
-    menuSubsectionsBySection?: MenuSubsectionsBySection;
+    sectionNameToLinks?: ObjectMap<ALink[]>;
+    subsectionNameToLinks?: ObjectMap<ALink[]>;
     displayType?: TopBarDisplayType;
     docsInfo?: DocsInfo;
     style?: React.CSSProperties;
@@ -311,14 +313,14 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         // because the sidebar renders `react-scroll` links which depend on the scroll container already
         // being rendered.
         const documentationContainer = document.getElementById(sharedConstants.SCROLL_CONTAINER_ID);
-        if (!isViewingDocsPage || _.isUndefined(this.props.menu) || _.isNull(documentationContainer)) {
+        if (!isViewingDocsPage || _.isUndefined(this.props.sectionNameToLinks) || _.isNull(documentationContainer)) {
             return undefined;
         }
         return (
             <div className="lg-hide md-hide">
                 <NestedSidebarMenu
-                    topLevelMenu={this.props.menu}
-                    menuSubsectionsBySection={this.props.menuSubsectionsBySection}
+                    sectionNameToLinks={this.props.sectionNameToLinks}
+                    subsectionNameToLinks={this.props.subsectionNameToLinks}
                     sidebarHeader={this.props.sidebarHeader}
                     shouldDisplaySectionHeaders={false}
                     onMenuItemClick={this._onMenuButtonClick.bind(this)}
@@ -337,8 +339,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         return (
             <div className="lg-hide md-hide">
                 <NestedSidebarMenu
-                    topLevelMenu={this.props.menuSubsectionsBySection}
-                    menuSubsectionsBySection={this.props.menuSubsectionsBySection}
+                    sectionNameToLinks={this.props.sectionNameToLinks}
+                    subsectionNameToLinks={this.props.subsectionNameToLinks}
                     sidebarHeader={this.props.sidebarHeader}
                     shouldDisplaySectionHeaders={false}
                     onMenuItemClick={this._onMenuButtonClick.bind(this)}
diff --git a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
index 89fd9e8a8..d5ee96850 100644
--- a/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
+++ b/packages/website/ts/components/top_bar/top_bar_menu_item.tsx
@@ -1,8 +1,6 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link, LinkType } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
-import { LinkType } from 'ts/types';
 
 import { CallToAction } from 'ts/components/ui/button';
 
diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
index c51095709..11f61b336 100644
--- a/packages/website/ts/components/ui/custom_menu_item.tsx
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -1,6 +1,6 @@
+import { Link } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'ts/components/ui/link';
 
 interface CustomMenuItemProps {
     to: string;
diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx
deleted file mode 100644
index ad98efa6c..000000000
--- a/packages/website/ts/components/ui/link.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Link as ReactRounterLink } from 'react-router-dom';
-import { LinkType } from 'ts/types';
-
-export interface LinkProps {
-    to: string;
-    type?: LinkType;
-    shouldOpenInNewTab?: boolean;
-    style?: React.CSSProperties;
-    className?: string;
-    onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
-    onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
-    onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
-}
-
-/**
- * A generic link component which let's the developer render internal & external links, and their associated
- * behaviors with a single link component. Many times we want a menu including both internal & external links
- * and this abstracts away the differences of rendering both types of links.
- */
-export const Link: React.StatelessComponent<LinkProps> = ({
-    style,
-    className,
-    type,
-    to,
-    shouldOpenInNewTab,
-    children,
-    onMouseOver,
-    onMouseLeave,
-    onMouseEnter,
-}) => {
-    const styleWithDefault = {
-        textDecoration: 'none',
-        ...style,
-    };
-
-    switch (type) {
-        case LinkType.External:
-            return (
-                <a
-                    target={shouldOpenInNewTab ? '_blank' : ''}
-                    className={className}
-                    style={styleWithDefault}
-                    href={to}
-                    onMouseOver={onMouseOver}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                >
-                    {children}
-                </a>
-            );
-        case LinkType.ReactRoute:
-            return (
-                <ReactRounterLink
-                    to={to}
-                    className={className}
-                    style={styleWithDefault}
-                    target={shouldOpenInNewTab ? '_blank' : ''}
-                    onMouseOver={onMouseOver}
-                    onMouseEnter={onMouseEnter}
-                    onMouseLeave={onMouseLeave}
-                >
-                    {children}
-                </ReactRounterLink>
-            );
-        case LinkType.ReactScroll:
-            return <div>TODO</div>;
-        default:
-            throw new Error(`Unrecognized LinkType: ${type}`);
-    }
-};
-
-Link.defaultProps = {
-    type: LinkType.ReactRoute,
-    shouldOpenInNewTab: false,
-    style: {},
-    className: '',
-    onMouseOver: _.noop.bind(_),
-    onMouseLeave: _.noop.bind(_),
-    onMouseEnter: _.noop.bind(_),
-};
-
-Link.displayName = 'Link';
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 767da3675..bdaf0701e 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,7 +1,7 @@
+import { Link } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'ts/components/ui/link';
 
 import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index ba1b423b9..efdf631b2 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,10 +1,9 @@
-import { colors, Styles } from '@0xproject/react-shared';
+import { colors, Link, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
-import { Link } from 'ts/components/ui/link';
 import { Profile } from 'ts/pages/about/profile';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProfileInfo, WebsitePaths } from 'ts/types';
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 6f029b6a2..9092a5cde 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -79,9 +79,9 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
         this._isUnmounted = true;
     }
     public render(): React.ReactNode {
-        const menuSubsectionsBySection = _.isUndefined(this.state.docAgnosticFormat)
+        const subsectionNameToLinks = _.isUndefined(this.state.docAgnosticFormat)
             ? {}
-            : this.props.docsInfo.getMenuSubsectionsBySection(this.state.docAgnosticFormat);
+            : this.props.docsInfo.getSubsectionNameToLinks(this.state.docAgnosticFormat);
         const sourceUrl = this._getSourceUrl();
         const iconFileName = idToIcon[this.props.docsInfo.id] || DEFAULT_ICON;
         const iconUrl = `/images/doc_icons/${iconFileName}`;
@@ -93,8 +93,8 @@ export class DocPage extends React.Component<DocPageProps, DocPageState> {
                     location={this.props.location}
                     docsVersion={this.props.docsVersion}
                     availableDocVersions={this.props.availableDocVersions}
-                    menu={this.props.docsInfo.menu}
-                    menuSubsectionsBySection={menuSubsectionsBySection}
+                    sectionNameToLinks={this.props.docsInfo.getSectionNameToLinks()}
+                    subsectionNameToLinks={subsectionNameToLinks}
                     docsInfo={this.props.docsInfo}
                     translate={this.props.translate}
                     onVersionSelected={this._onVersionSelected.bind(this)}
diff --git a/packages/website/ts/pages/documentation/home.tsx b/packages/website/ts/pages/documentation/home.tsx
index 52a486c2d..72e507a7b 100644
--- a/packages/website/ts/pages/documentation/home.tsx
+++ b/packages/website/ts/pages/documentation/home.tsx
@@ -1,4 +1,12 @@
-import { colors, constants as sharedConstants, MarkdownLinkBlock, utils as sharedUtils } from '@0xproject/react-shared';
+import {
+    ALink,
+    colors,
+    constants as sharedConstants,
+    Link,
+    LinkType,
+    MarkdownLinkBlock,
+    utils as sharedUtils,
+} from '@0xproject/react-shared';
 import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 import MenuItem from 'material-ui/MenuItem';
@@ -10,10 +18,9 @@ import { DocsContentTopBar } from 'ts/components/documentation/docs_content_top_
 import { DocsLogo } from 'ts/components/documentation/docs_logo';
 import { TutorialButton } from 'ts/components/documentation/tutorial_button';
 import { Container } from 'ts/components/ui/container';
-import { Link } from 'ts/components/ui/link';
 import { Text } from 'ts/components/ui/text';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { ALink, Deco, Key, LinkType, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types';
+import { Deco, Key, ScreenWidths, TutorialInfo, WebsitePaths } from 'ts/types';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
 
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index b4462407f..c819cd8a1 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Link } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import DocumentTitle = require('react-document-title');
@@ -8,7 +8,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
 import { CallToAction } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { Image } from 'ts/components/ui/image';
-import { Link } from 'ts/components/ui/link';
 import { Text } from 'ts/components/ui/text';
 import { TypedText } from 'ts/components/ui/typed_text';
 import { Dispatcher } from 'ts/redux/dispatcher';
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 55f532b11..3d8b8ef52 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,12 +1,15 @@
 import {
+    ALink,
     colors,
     constants as sharedConstants,
     HeaderSizes,
+    LinkType,
     MarkdownSection,
     NestedSidebarMenu,
     Styles,
     utils as sharedUtils,
 } from '@0xproject/react-shared';
+import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import RaisedButton from 'material-ui/RaisedButton';
@@ -78,9 +81,10 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
         window.removeEventListener('hashchange', this._onHashChanged.bind(this), false);
     }
     public render(): React.ReactNode {
-        const menuSubsectionsBySection = _.isUndefined(this.state.articlesBySection)
+        const sectionNameToLinks = _.isUndefined(this.state.articlesBySection)
             ? {}
-            : this._getMenuSubsectionsBySection(this.state.articlesBySection);
+            : this._getSectionNameToLinks(this.state.articlesBySection);
+        console.log('sectionNameToLinks', sectionNameToLinks);
         const mainContainersStyle: React.CSSProperties = {
             ...styles.mainContainers,
             overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
@@ -92,7 +96,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                 <TopBar
                     blockchainIsLoaded={false}
                     location={this.props.location}
-                    menuSubsectionsBySection={menuSubsectionsBySection}
+                    sectionNameToLinks={sectionNameToLinks}
                     translate={this.props.translate}
                     sidebarHeader={sidebarHeader}
                 />
@@ -131,8 +135,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                                     onMouseLeave={this._onSidebarHoverOff.bind(this)}
                                 >
                                     <NestedSidebarMenu
-                                        topLevelMenu={menuSubsectionsBySection}
-                                        menuSubsectionsBySection={menuSubsectionsBySection}
+                                        sectionNameToLinks={sectionNameToLinks}
                                         sidebarHeader={sidebarHeader}
                                     />
                                 </div>
@@ -223,15 +226,21 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
             }
         }
     }
-    private _getMenuSubsectionsBySection(articlesBySection: ArticlesBySection): { [section: string]: string[] } {
+    private _getSectionNameToLinks(articlesBySection: ArticlesBySection): ObjectMap<ALink[]> {
         const sectionNames = _.keys(articlesBySection);
-        const menuSubsectionsBySection: { [section: string]: string[] } = {};
+        const sectionNameToLinks: ObjectMap<ALink[]> = {};
         for (const sectionName of sectionNames) {
             const articles = articlesBySection[sectionName];
-            const articleNames = _.map(articles, article => article.title);
-            menuSubsectionsBySection[sectionName] = articleNames;
+            const articleLinks = _.map(articles, article => {
+                return {
+                    to: sharedUtils.getIdFromName(article.title),
+                    title: article.title,
+                    type: LinkType.ReactScroll,
+                };
+            });
+            sectionNameToLinks[sectionName] = articleLinks;
         }
-        return menuSubsectionsBySection;
+        return sectionNameToLinks;
     }
     private _onSidebarHover(_event: React.FormEvent<HTMLInputElement>): void {
         this.setState({
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 7c79b271f..a3d248a9d 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -1,3 +1,4 @@
+import { ALink } from '@0xproject/react-shared';
 import { ObjectMap, SignedOrder } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import { Provider } from 'ethereum-types';
@@ -618,22 +619,9 @@ export interface InjectedWeb3 {
     };
 }
 
-export interface ALink {
-    title: string;
-    to: string;
-    shouldOpenInNewTab?: boolean;
-    type?: LinkType;
-}
-
 export interface TutorialInfo {
     iconUrl: string;
     description: string;
     link: ALink;
 }
-
-export enum LinkType {
-    External = 'EXTERNAL',
-    ReactScroll = 'REACT_SCROLL',
-    ReactRoute = 'REACT_ROUTE',
-}
 // tslint:disable:max-file-line-count