Use same Link UI component for react-scroll links

2018-10-03 16:37:59 +01:00
parent ab855cdd1c
commit 437612f8b8
28 changed files with 212 additions and 136 deletions
--- a/packages/react-docs/src/components/documentation.tsx
+++ b/packages/react-docs/src/components/documentation.tsx
@@ -98,7 +98,10 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                marginLeft: 20,
            },
        };
-        const menuSubsectionsBySection = this.props.docsInfo.getMenuSubsectionsBySection(this.props.docAgnosticFormat);
+        const sectionNameToLinks = this.props.docsInfo.getSectionNameToLinks();
+        console.log('sectionNameToLinks', sectionNameToLinks);
+        const subsectionNameToLinks = this.props.docsInfo.getSubsectionNameToLinks(this.props.docAgnosticFormat);
+        console.log('subsectionNameToLinks', subsectionNameToLinks);
        return (
            <div>
                {_.isUndefined(this.props.docAgnosticFormat) ? (
@@ -128,8 +131,8 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                        selectedVersion={this.props.selectedVersion}
                                        versions={this.props.availableVersions}
                                        sidebarHeader={this.props.sidebarHeader}
-                                        topLevelMenu={this.props.docsInfo.menu}
-                                        menuSubsectionsBySection={menuSubsectionsBySection}
+                                        sectionNameToLinks={sectionNameToLinks}
+                                        subsectionNameToLinks={subsectionNameToLinks}
                                        onVersionSelected={this.props.onVersionSelected}
                                    />
                                </div>
--- a/packages/react-docs/src/docs_info.ts
+++ b/packages/react-docs/src/docs_info.ts
@@ -1,5 +1,5 @@
-import { MenuSubsectionsBySection } from '@0xproject/react-shared';
-import { DocAgnosticFormat, TypeDefinitionByName } from '@0xproject/types';
+import { ALink, LinkType, MenuSubsectionsBySection, utils as sharedUtils } from '@0xproject/react-shared';
+import { DocAgnosticFormat, ObjectMap, TypeDefinitionByName } from '@0xproject/types';
 import * as _ from 'lodash';

 import {
@@ -32,10 +32,10 @@ export class DocsInfo {
        this.sectionNameToMarkdownByVersion = config.sectionNameToMarkdownByVersion;
        this.contractsByVersionByNetworkId = config.contractsByVersionByNetworkId;
    }
-    public getMenuSubsectionsBySection(docAgnosticFormat?: DocAgnosticFormat): MenuSubsectionsBySection {
-        const menuSubsectionsBySection = {} as MenuSubsectionsBySection;
+    public getSubsectionNameToLinks(docAgnosticFormat?: DocAgnosticFormat): ObjectMap<ALink[]> {
+        const subsectionNameToLinks: ObjectMap<ALink[]> = {};
        if (_.isUndefined(docAgnosticFormat)) {
-            return menuSubsectionsBySection;
+            return subsectionNameToLinks;
        }

        const docSections = _.keys(this.sections);
@@ -56,7 +56,14 @@ export class DocsInfo {
            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;
+                const typeLinks = _.map(typeNames, typeName => {
+                    return {
+                        to: `${sectionName}-${typeName}`,
+                        title: typeName,
+                        type: LinkType.ReactScroll,
+                    };
+                });
+                subsectionNameToLinks[sectionName] = typeLinks;
            } else if (isExportedFunctionSection) {
                // Noop so that we don't have the method listed underneath itself.
            } else {
@@ -71,15 +78,20 @@ export class DocsInfo {
                const methodNames = _.map(methodsSortedByName, m => m.name);
                const sortedFunctionNames = _.sortBy(docSection.functions, 'name');
                const functionNames = _.map(sortedFunctionNames, m => m.name);
-                menuSubsectionsBySection[sectionName] = [
-                    ...eventNames,
-                    ...propertyNames,
-                    ...functionNames,
-                    ...methodNames,
-                ];
+                const names = [...eventNames, ...propertyNames, ...functionNames, ...methodNames];
+
+                const links = _.map(names, name => {
+                    return {
+                        to: `${sectionName}-${name}`,
+                        title: name,
+                        type: LinkType.ReactScroll,
+                    };
+                });
+
+                subsectionNameToLinks[sectionName] = links;
            }
        });
-        return menuSubsectionsBySection;
+        return subsectionNameToLinks;
    }
    public getTypeDefinitionsByName(docAgnosticFormat: DocAgnosticFormat): { [name: string]: TypeDefinitionByName } {
        if (_.isUndefined(this.sections.types)) {
@@ -90,4 +102,20 @@ export class DocsInfo {
        const typeDefinitionByName = _.keyBy(typeDocSection.types, 'name') as any;
        return typeDefinitionByName;
    }
+    public getSectionNameToLinks(): ObjectMap<ALink[]> {
+        const sectionNameToLinks: ObjectMap<ALink[]> = {};
+        _.each(this.menu, (linkTitles, sectionName) => {
+            sectionNameToLinks[sectionName] = [];
+            _.each(linkTitles, linkTitle => {
+                const to = sharedUtils.getIdFromName(linkTitle);
+                const links = sectionNameToLinks[sectionName];
+                links.push({
+                    title: linkTitle,
+                    to,
+                    type: LinkType.ReactScroll,
+                });
+            });
+        });
+        return sectionNameToLinks;
+    }
 }
--- a/packages/react-shared/package.json
+++ b/packages/react-shared/package.json
@@ -33,6 +33,7 @@
        "typescript": "3.0.1"
    },
    "dependencies": {
+        "@0xproject/types": "^1.1.2",
        "@material-ui/core": "^3.0.1",
        "@types/is-mobile": "0.3.0",
        "@types/lodash": "4.14.104",
@@ -40,6 +41,7 @@
        "@types/node": "*",
        "@types/react": "*",
        "@types/react-dom": "*",
+        "@types/react-router-dom": "^4.0.4",
        "@types/react-scroll": "1.5.3",
        "basscss": "^8.0.3",
        "change-case": "^3.0.2",
@@ -50,7 +52,8 @@
        "react-dom": "^16.4.2",
        "react-highlight": "0xproject/react-highlight#2f40a42e0a3f0ad126f9f42d505b97b603fc7162",
        "react-markdown": "^3.2.2",
-        "react-scroll": "0xproject/react-scroll#similar-to-pr-330"
+        "react-scroll": "0xproject/react-scroll#similar-to-pr-330",
+        "react-router-dom": "^4.1.1"
    },
    "publishConfig": {
        "access": "public"
--- a/packages/react-shared/src/components/link.tsx
+++ b/packages/react-shared/src/components/link.tsx
@@ -1,7 +1,10 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Link as ReactRounterLink } from 'react-router-dom';
-import { LinkType } from 'ts/types';
+import { Link as ScrollLink } from 'react-scroll';
+
+import { LinkType } from '../types';
+import { constants } from '../utils/constants';

 export interface LinkProps {
    to: string;
@@ -12,6 +15,7 @@ export interface LinkProps {
    onMouseOver?: (event: React.MouseEvent<HTMLElement>) => void;
    onMouseLeave?: (event: React.MouseEvent<HTMLElement>) => void;
    onMouseEnter?: (event: React.MouseEvent<HTMLElement>) => void;
+    containerId?: string;
 }

 /**
@@ -29,6 +33,7 @@ export const Link: React.StatelessComponent<LinkProps> = ({
    onMouseOver,
    onMouseLeave,
    onMouseEnter,
+    containerId,
 }) => {
    const styleWithDefault = {
        textDecoration: 'none',
@@ -65,7 +70,17 @@ export const Link: React.StatelessComponent<LinkProps> = ({
                </ReactRounterLink>
            );
        case LinkType.ReactScroll:
-            return <div>TODO</div>;
+            return (
+                <ScrollLink
+                    to={to}
+                    offset={0}
+                    hashSpy={true}
+                    duration={constants.DOCS_SCROLL_DURATION_MS}
+                    containerId={containerId}
+                >
+                    {children}
+                </ScrollLink>
+            );
        default:
            throw new Error(`Unrecognized LinkType: ${type}`);
    }
@@ -79,6 +94,7 @@ Link.defaultProps = {
    onMouseOver: _.noop.bind(_),
    onMouseLeave: _.noop.bind(_),
    onMouseEnter: _.noop.bind(_),
+    containerId: constants.DOCS_CONTAINER_ID,
 };

 Link.displayName = 'Link';
--- a/packages/react-shared/src/components/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/components/nested_sidebar_menu.tsx
@@ -1,18 +1,19 @@
+import { ObjectMap } from '@0xproject/types';
 import * as _ from 'lodash';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
-import { Link as ScrollLink } from 'react-scroll';

-import { MenuSubsectionsBySection, Styles } from '../types';
+import { ALink, LinkType, Styles } from '../types';
 import { colors } from '../utils/colors';
 import { constants } from '../utils/constants';
 import { utils } from '../utils/utils';

+import { Link } from './Link';
 import { VersionDropDown } from './version_drop_down';

 export interface NestedSidebarMenuProps {
-    topLevelMenu: { [topLevel: string]: string[] };
-    menuSubsectionsBySection?: MenuSubsectionsBySection;
+    sectionNameToLinks: ObjectMap<ALink[]>;
+    subsectionNameToLinks?: ObjectMap<ALink[]>;
    sidebarHeader?: React.ReactNode;
    shouldDisplaySectionHeaders?: boolean;
    onMenuItemClick?: () => void;
@@ -44,10 +45,10 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
        shouldDisplaySectionHeaders: true,
        onMenuItemClick: _.noop.bind(_),
        shouldReformatMenuItemNames: true,
-        menuSubsectionsBySection: {},
+        subsectionNameToLinks: {},
    };
    public render(): React.ReactNode {
-        const navigation = _.map(this.props.topLevelMenu, (menuItems: string[], sectionName: string) => {
+        const navigation = _.map(this.props.sectionNameToLinks, (links: ALink[], sectionName: string) => {
            const finalSectionName = utils.convertCamelCaseToSpaces(sectionName);
            if (this.props.shouldDisplaySectionHeaders) {
                // tslint:disable-next-line:no-unused-variable
@@ -56,11 +57,11 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                        <div style={{ fontWeight: 'bold', fontSize: 15, letterSpacing: 0.5 }} className="py1">
                            {finalSectionName.toUpperCase()}
                        </div>
-                        {this._renderMenuItems(menuItems)}
+                        {this._renderMenuItems(links)}
                    </div>
                );
            } else {
-                return <div key={`section-${sectionName}`}>{this._renderMenuItems(menuItems)}</div>;
+                return <div key={`section-${sectionName}`}>{this._renderMenuItems(links)}</div>;
            }
        });
        const maxWidthWithScrollbar = 307;
@@ -82,26 +83,18 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
            </div>
        );
    }
-    private _renderMenuItems(menuItemNames: string[]): React.ReactNode[] {
+    private _renderMenuItems(links: ALink[]): React.ReactNode[] {
        const menuItemStyles = this.props.shouldDisplaySectionHeaders
            ? styles.menuItemWithHeaders
            : styles.menuItemWithoutHeaders;
        const menuItemInnerDivStyles = this.props.shouldDisplaySectionHeaders ? styles.menuItemInnerDivWithHeaders : {};
-        const menuItems = _.map(menuItemNames, menuItemName => {
+        const menuItems = _.map(links, link => {
            const finalMenuItemName = this.props.shouldReformatMenuItemNames
-                ? utils.convertDashesToSpaces(menuItemName)
-                : menuItemName;
-            const id = utils.getIdFromName(menuItemName);
+                ? utils.convertDashesToSpaces(link.title)
+                : link.title;
            return (
-                <div key={menuItemName}>
-                    <ScrollLink
-                        key={`menuItem-${menuItemName}`}
-                        to={id}
-                        offset={0}
-                        hashSpy={true}
-                        duration={constants.DOCS_SCROLL_DURATION_MS}
-                        containerId={constants.DOCS_CONTAINER_ID}
-                    >
+                <div key={`menuItem-${finalMenuItemName}`}>
+                    <Link to={link.to} type={LinkType.ReactScroll} containerId={constants.DOCS_CONTAINER_ID}>
                        <MenuItem
                            style={menuItemStyles}
                            innerDivStyle={menuItemInnerDivStyles}
@@ -115,8 +108,8 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                                {finalMenuItemName}
                            </span>
                        </MenuItem>
-                    </ScrollLink>
-                    {this._renderMenuItemSubsections(menuItemName)}
+                    </Link>
+                    {this._renderMenuItemSubsections(link.title)}
                </div>
            );
        });
@@ -124,28 +117,21 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
    }
    private _renderMenuItemSubsections(menuItemName: string): React.ReactNode {
        if (
-            _.isUndefined(this.props.menuSubsectionsBySection) ||
-            _.isUndefined(this.props.menuSubsectionsBySection[menuItemName])
+            _.isUndefined(this.props.subsectionNameToLinks) ||
+            _.isUndefined(this.props.subsectionNameToLinks[menuItemName])
        ) {
            return null;
        }
-        return this._renderMenuSubsectionsBySection(menuItemName, this.props.menuSubsectionsBySection[menuItemName]);
+        return this._renderMenuSubsectionsBySection(menuItemName, this.props.subsectionNameToLinks[menuItemName]);
    }
-    private _renderMenuSubsectionsBySection(menuItemName: string, entityNames: string[]): React.ReactNode {
+    private _renderMenuSubsectionsBySection(menuItemName: string, links: ALink[]): 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);
+                {_.map(links, link => {
+                    const name = `${menuItemName}-${link.title}`;
                    return (
                        <li key={`menuSubsectionItem-${name}`}>
-                            <ScrollLink
-                                to={id}
-                                offset={0}
-                                hashSpy={true}
-                                duration={constants.DOCS_SCROLL_DURATION_MS}
-                                containerId={constants.DOCS_CONTAINER_ID}
-                            >
+                            <Link to={link.to} type={LinkType.ReactScroll} containerId={constants.DOCS_CONTAINER_ID}>
                                <MenuItem
                                    style={{ minHeight: 35 }}
                                    innerDivStyle={{
@@ -155,9 +141,9 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
                                    }}
                                    onClick={this._onMenuItemClick.bind(this)}
                                >
-                                    {entityName}
+                                    {link.title}
                                </MenuItem>
-                            </ScrollLink>
+                            </Link>
                        </li>
                    );
                })}
--- a/packages/react-shared/src/index.ts
+++ b/packages/react-shared/src/index.ts
@@ -4,8 +4,17 @@ export { MarkdownCodeBlock } from './components/markdown_code_block';
 export { MarkdownSection } from './components/markdown_section';
 export { NestedSidebarMenu } from './components/nested_sidebar_menu';
 export { SectionHeader } from './components/section_header';
+export { Link } from './components/link';

-export { HeaderSizes, Styles, MenuSubsectionsBySection, EtherscanLinkSuffixes, Networks } from './types';
+export {
+    HeaderSizes,
+    Styles,
+    MenuSubsectionsBySection,
+    EtherscanLinkSuffixes,
+    Networks,
+    LinkType,
+    ALink,
+} from './types';

 export { utils } from './utils/utils';
 export { constants } from './utils/constants';
--- a/packages/react-shared/src/types.ts
+++ b/packages/react-shared/src/types.ts
@@ -23,3 +23,16 @@ export enum Networks {
    Ropsten = 'Ropsten',
    Rinkeby = 'Rinkeby',
 }
+
+export enum LinkType {
+    External = 'EXTERNAL',
+    ReactScroll = 'REACT_SCROLL',
+    ReactRoute = 'REACT_ROUTE',
+}
+
+export interface ALink {
+    title: string;
+    to: string;
+    shouldOpenInNewTab?: boolean;
+    type?: LinkType;
+}
--- 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",
--- 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>
        );
--- 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 {
--- 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';
--- 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';

--- 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';
--- 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';

--- 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 {
--- 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';

--- 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';
--- 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)}
--- 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';

--- 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;
--- 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';
--- 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';
--- 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)}
--- 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';

--- 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';
--- 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({
--- 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
--- a/yarn.lock
+++ b/yarn.lock
@@ -676,6 +676,16 @@
    ethereum-types "^1.0.5"
    popper.js "1.14.3"

+"@0xproject/typescript-typings@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@0xproject/typescript-typings/-/typescript-typings-2.0.2.tgz#1812f64e341f1d24c09b8b5a951cbde0e5fff9c2"
+  dependencies:
+    "@types/bn.js" "^4.11.0"
+    "@types/react" "*"
+    bignumber.js "~4.1.0"
+    ethereum-types "^1.0.8"
+    popper.js "1.14.3"
+
 "@0xproject/utils@^0.7.3":
  version "0.7.3"
  resolved "https://registry.yarnpkg.com/@0xproject/utils/-/utils-0.7.3.tgz#ffa7c6da9bf0dd3e13694f185dcfc48a8981ff05"
@@ -690,6 +700,23 @@
    lodash "4.17.10"
    web3 "0.20.6"

+"@0xproject/utils@^1.0.4":
+  version "1.0.11"
+  resolved "https://registry.yarnpkg.com/@0xproject/utils/-/utils-1.0.11.tgz#5b53e7d9d4dbe68e219049218c9db04e97c37429"
+  dependencies:
+    "@0xproject/types" "^1.1.1"
+    "@0xproject/typescript-typings" "^2.0.2"
+    "@types/node" "*"
+    abortcontroller-polyfill "^1.1.9"
+    bignumber.js "~4.1.0"
+    detect-node "2.0.3"
+    ethereum-types "^1.0.8"
+    ethereumjs-util "^5.1.1"
+    ethers "3.0.22"
+    isomorphic-fetch "^2.2.1"
+    js-sha3 "^0.7.0"
+    lodash "^4.17.5"
+
 "@0xproject/web3-wrapper@^0.7.3":
  version "0.7.3"
  resolved "https://registry.yarnpkg.com/@0xproject/web3-wrapper/-/web3-wrapper-0.7.3.tgz#9bd50b034b92fd505b6766b6e225f014b6d08b08"