From c07412a992284b2f3045be1c620ea2e0a351139a Mon Sep 17 00:00:00 2001
From: Fabio Berger <me@fabioberger.com>
Date: Tue, 2 Oct 2018 20:10:59 +0100
Subject: Use new Link UI component everywhere, and add complementary ALink
 type

---
 .../documentation/docs_content_top_bar.tsx         | 11 +--
 .../ts/components/documentation/docs_logo.tsx      |  2 +-
 .../components/documentation/tutorial_button.tsx   |  5 +-
 .../components/dropdowns/developers_drop_down.tsx  | 98 +++++++++++-----------
 packages/website/ts/components/fill_order.tsx      |  2 +-
 packages/website/ts/components/footer.tsx          | 95 +++++++++------------
 .../ts/components/inputs/token_amount_input.tsx    |  4 +-
 .../website/ts/components/portal/back_button.tsx   |  4 +-
 .../website/ts/components/portal/drawer_menu.tsx   |  2 +-
 packages/website/ts/components/portal/menu.tsx     |  6 +-
 packages/website/ts/components/portal/portal.tsx   |  9 +-
 packages/website/ts/components/top_bar/top_bar.tsx | 46 +++++-----
 .../ts/components/top_bar/top_bar_menu_item.tsx    | 22 ++---
 .../website/ts/components/ui/custom_menu_item.tsx  | 51 +++++++++++
 packages/website/ts/components/ui/link.tsx         | 43 ++++++----
 packages/website/ts/components/ui/menu_item.tsx    | 51 -----------
 packages/website/ts/components/ui/simple_menu.tsx  |  4 +-
 17 files changed, 214 insertions(+), 241 deletions(-)
 create mode 100644 packages/website/ts/components/ui/custom_menu_item.tsx
 delete mode 100644 packages/website/ts/components/ui/menu_item.tsx

(limited to 'packages/website/ts/components')

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 b5f51e1aa..7edb51587 100644
--- a/packages/website/ts/components/documentation/docs_content_top_bar.tsx
+++ b/packages/website/ts/components/documentation/docs_content_top_bar.tsx
@@ -1,19 +1,19 @@
-import { DocsMenu } from '@0xproject/react-docs';
 import { colors, 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 { Deco, Key, WebsitePaths } from 'ts/types';
+import { ALink, Deco, Key, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
 export interface DocsContentTopBarProps {
     location: Location;
     translate: Translate;
-    menu?: DocsMenu;
+    sectionNameToLinks?: ObjectMap<ALink[]>;
 }
 
 interface DocsContentTopBarState {
@@ -146,12 +146,13 @@ export class DocsContentTopBar extends React.Component<DocsContentTopBarProps, D
                 onRequestChange={this._onMenuButtonClick.bind(this)}
             >
                 <div className="clearfix pl1">
-                    <NestedSidebarMenu
+                    TODO
+                    {/* <NestedSidebarMenu
                         topLevelMenu={this.props.menu}
                         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 570a81bca..9bd742749 100644
--- a/packages/website/ts/components/documentation/docs_logo.tsx
+++ b/packages/website/ts/components/documentation/docs_logo.tsx
@@ -10,7 +10,7 @@ export interface DocsLogoProps {
 export const DocsLogo: React.StatelessComponent<DocsLogoProps> = props => {
     return (
         <div style={props.containerStyle}>
-            <Link to={`${WebsitePaths.Docs}`} className="text-decoration-none">
+            <Link to={WebsitePaths.Docs}>
                 <img src="/images/docs_logo.svg" height={props.height} />
             </Link>
         </div>
diff --git a/packages/website/ts/components/documentation/tutorial_button.tsx b/packages/website/ts/components/documentation/tutorial_button.tsx
index 094bc3d92..7ed9c6e4e 100644
--- a/packages/website/ts/components/documentation/tutorial_button.tsx
+++ b/packages/website/ts/components/documentation/tutorial_button.tsx
@@ -25,8 +25,7 @@ export class TutorialButton extends React.Component<TutorialButtonProps, Tutoria
     public render(): React.ReactNode {
         return (
             <Link
-                to={this.props.tutorialInfo.location}
-                className="text-decoration-none"
+                to={this.props.tutorialInfo.link.to}
                 onMouseEnter={this._onHover.bind(this)}
                 onMouseOver={this._onHover.bind(this)}
                 onMouseLeave={this._onHoverOff.bind(this)}
@@ -46,7 +45,7 @@ export class TutorialButton extends React.Component<TutorialButtonProps, Tutoria
                     </div>
                     <div className="lg-pl2 md-pl2 sm-pl3 col col-10">
                         <Text Tag="div" fontSize="18" fontColor={colors.lightLinkBlue} fontWeight="bold">
-                            {this.props.translate.get(this.props.tutorialInfo.title as Key, Deco.Cap)}
+                            {this.props.translate.get(this.props.tutorialInfo.link.title as Key, Deco.Cap)}
                         </Text>
                         <Text Tag="div" fontColor={colors.grey750} fontSize="16">
                             {this.props.translate.get(this.props.tutorialInfo.description as Key, Deco.Cap)}
diff --git a/packages/website/ts/components/dropdowns/developers_drop_down.tsx b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
index 88522b665..675357f41 100644
--- a/packages/website/ts/components/dropdowns/developers_drop_down.tsx
+++ b/packages/website/ts/components/dropdowns/developers_drop_down.tsx
@@ -1,61 +1,68 @@
 import { colors } from '@0xproject/react-shared';
-import { ObjectMap } from '@0xproject/types';
 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 { Deco, Key, WebsitePaths } from 'ts/types';
+import { ALink, Deco, Key, LinkType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
-interface LinkInfo {
-    link: string;
-    shouldOpenInNewTab?: boolean;
-}
-
-const gettingStartedKeyToLinkInfo1: ObjectMap<LinkInfo> = {
-    [Key.BuildARelayer]: {
-        link: `${WebsitePaths.Wiki}#Build-A-Relayer`,
+const gettingStartedKeyToLinkInfo1: ALink[] = [
+    {
+        title: Key.BuildARelayer,
+        to: `${WebsitePaths.Wiki}#Build-A-Relayer`,
     },
-    [Key.OrderBasics]: {
-        link: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
+    {
+        title: Key.OrderBasics,
+        to: `${WebsitePaths.Wiki}#Create,-Validate,-Fill-Order`,
     },
-};
-const gettingStartedKeyToLinkInfo2: ObjectMap<LinkInfo> = {
-    [Key.DevelopOnEthereum]: {
-        link: `${WebsitePaths.Wiki}#Ethereum-Development`,
+];
+const gettingStartedKeyToLinkInfo2: ALink[] = [
+    {
+        title: Key.DevelopOnEthereum,
+        to: `${WebsitePaths.Wiki}#Ethereum-Development`,
     },
-    [Key.UseSharedLiquidity]: {
-        link: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
+    {
+        title: Key.UseSharedLiquidity,
+        to: `${WebsitePaths.Wiki}#Find,-Submit,-Fill-Order-From-Relayer`,
     },
-};
-const popularDocsToLinkInfos: ObjectMap<LinkInfo> = {
-    [Key.ZeroExJs]: {
-        link: WebsitePaths.ZeroExJs,
+];
+const popularDocsToLinkInfos: ALink[] = [
+    {
+        title: Key.ZeroExJs,
+        to: WebsitePaths.ZeroExJs,
     },
-    [Key.Connect]: {
-        link: WebsitePaths.Connect,
+    {
+        title: Key.Connect,
+        to: WebsitePaths.Connect,
     },
-    [Key.SmartContract]: {
-        link: WebsitePaths.SmartContracts,
+    {
+        title: Key.SmartContract,
+        to: WebsitePaths.SmartContracts,
     },
-};
-const usefulLinksToLinkInfo: ObjectMap<LinkInfo> = {
-    [Key.Github]: {
-        link: constants.URL_GITHUB_ORG,
+];
+const usefulLinksToLinkInfo: ALink[] = [
+    {
+        title: Key.Github,
+        to: constants.URL_GITHUB_ORG,
+        type: LinkType.External,
         shouldOpenInNewTab: true,
     },
-    [Key.Whitepaper]: {
-        link: WebsitePaths.Whitepaper,
+    {
+        title: Key.Whitepaper,
+        to: WebsitePaths.Whitepaper,
+        type: LinkType.External,
         shouldOpenInNewTab: true,
     },
-    [Key.Sandbox]: {
-        link: constants.URL_SANDBOX,
+    {
+        title: Key.Sandbox,
+        to: constants.URL_SANDBOX,
+        type: LinkType.External,
         shouldOpenInNewTab: true,
     },
-};
+];
 
 interface DevelopersDropDownProps {
     translate: Translate;
@@ -123,7 +130,6 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
                 >
                     <Link
                         to={WebsitePaths.Docs}
-                        className="text-decoration-none"
                         style={{
                             color: colors.lightBlueA700,
                             fontWeight: 'bold',
@@ -152,31 +158,25 @@ export class DevelopersDropDown extends React.Component<DevelopersDropDownProps,
             </div>
         );
     }
-    private _renderLinkSection(keyToLinkInfo: ObjectMap<LinkInfo>): React.ReactNode {
+    private _renderLinkSection(links: ALink[]): React.ReactNode {
         const linkStyle: React.CSSProperties = {
             color: colors.lightBlueA700,
             fontFamily: 'Roboto, Roboto Mono',
         };
-        const numLinks = _.size(keyToLinkInfo);
+        const numLinks = links.length;
         let i = 0;
-        const links = _.map(keyToLinkInfo, (linkInfo: LinkInfo, key: string) => {
+        const renderLinks = _.map(links, (link: ALink) => {
             i++;
             const isLast = i === numLinks;
-            const linkText = this.props.translate.get(key as Key, Deco.Cap);
+            const linkText = this.props.translate.get(link.title as Key, Deco.Cap);
             return (
-                <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${key}`}>
-                    <Link
-                        to={linkInfo.link}
-                        isExternal={!!linkInfo.shouldOpenInNewTab}
-                        shouldOpenInNewTab={linkInfo.shouldOpenInNewTab}
-                        className="text-decoration-none"
-                        style={linkStyle}
-                    >
+                <div className={`pr1 pt1 ${!isLast && 'pb1'}`} key={`dev-dropdown-link-${link.title}`}>
+                    <Link to={link.to} type={link.type} shouldOpenInNewTab={link.shouldOpenInNewTab} style={linkStyle}>
                         {linkText}
                     </Link>
                 </div>
             );
         });
-        return <div>{links}</div>;
+        return <div>{renderLinks}</div>;
     }
 }
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 3c3155349..ec1d698f3 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -8,7 +8,6 @@ import { Card, CardHeader, CardText } from 'material-ui/Card';
 import Divider from 'material-ui/Divider';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 import { Blockchain } from 'ts/blockchain';
 import { TrackTokenConfirmationDialog } from 'ts/components/dialogs/track_token_confirmation_dialog';
 import { FillOrderJSON } from 'ts/components/fill_order_json';
@@ -17,6 +16,7 @@ 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 6dcb5a0e9..bec3c17f7 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,24 +1,16 @@
 import { colors } 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 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
+
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, Key, Language, WebsitePaths } from 'ts/types';
+import { ALink, Deco, Key, Language, LinkType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
-interface MenuItemsBySection {
-    [sectionName: string]: FooterMenuItem[];
-}
-
-interface FooterMenuItem {
-    title: string;
-    path?: string;
-    isExternal?: boolean;
-}
-
 const ICON_DIMENSION = 16;
 
 const linkStyle = {
@@ -51,76 +43,74 @@ export class Footer extends React.Component<FooterProps, FooterState> {
         };
     }
     public render(): React.ReactNode {
-        const menuItemsBySection: MenuItemsBySection = {
+        const sectionNameToLinks: ObjectMap<ALink[]> = {
             [Key.Documentation]: [
                 {
                     title: '0x.js',
-                    path: WebsitePaths.ZeroExJs,
+                    to: WebsitePaths.ZeroExJs,
                 },
                 {
                     title: this.props.translate.get(Key.SmartContracts, Deco.Cap),
-                    path: WebsitePaths.SmartContracts,
+                    to: WebsitePaths.SmartContracts,
                 },
                 {
                     title: this.props.translate.get(Key.Connect, Deco.Cap),
-                    path: WebsitePaths.Connect,
+                    to: WebsitePaths.Connect,
                 },
                 {
                     title: this.props.translate.get(Key.Whitepaper, Deco.Cap),
-                    path: WebsitePaths.Whitepaper,
-                    isExternal: true,
+                    to: WebsitePaths.Whitepaper,
+                    type: LinkType.External,
                 },
                 {
                     title: this.props.translate.get(Key.Wiki, Deco.Cap),
-                    path: WebsitePaths.Wiki,
+                    to: WebsitePaths.Wiki,
                 },
                 {
                     title: this.props.translate.get(Key.Faq, Deco.Cap),
-                    path: WebsitePaths.FAQ,
+                    to: WebsitePaths.FAQ,
                 },
             ],
             [Key.Community]: [
                 {
                     title: this.props.translate.get(Key.RocketChat, Deco.Cap),
-                    isExternal: true,
-                    path: constants.URL_ZEROEX_CHAT,
+                    type: LinkType.External,
+                    to: constants.URL_ZEROEX_CHAT,
                 },
                 {
                     title: this.props.translate.get(Key.Blog, Deco.Cap),
-                    isExternal: true,
-                    path: constants.URL_BLOG,
+                    type: LinkType.External,
+                    to: constants.URL_BLOG,
                 },
                 {
                     title: 'Twitter',
-                    isExternal: true,
-                    path: constants.URL_TWITTER,
+                    type: LinkType.External,
+                    to: constants.URL_TWITTER,
                 },
                 {
                     title: 'Reddit',
-                    isExternal: true,
-                    path: constants.URL_REDDIT,
+                    type: LinkType.External,
+                    to: constants.URL_REDDIT,
                 },
                 {
                     title: this.props.translate.get(Key.Forum, Deco.Cap),
-                    isExternal: true,
-                    path: constants.URL_DISCOURSE_FORUM,
+                    type: LinkType.External,
+                    to: constants.URL_DISCOURSE_FORUM,
                 },
             ],
             [Key.Organization]: [
                 {
                     title: this.props.translate.get(Key.About, Deco.Cap),
-                    isExternal: false,
-                    path: WebsitePaths.About,
+                    to: WebsitePaths.About,
                 },
                 {
                     title: this.props.translate.get(Key.Careers, Deco.Cap),
-                    isExternal: false,
-                    path: WebsitePaths.Careers,
+                    to: WebsitePaths.Careers,
                 },
                 {
                     title: this.props.translate.get(Key.Contact, Deco.Cap),
-                    isExternal: true,
-                    path: 'mailto:team@0xproject.com',
+                    type: LinkType.External,
+                    to: 'mailto:team@0xproject.com',
                 },
             ],
         };
@@ -160,19 +150,19 @@ export class Footer extends React.Component<FooterProps, FooterState> {
                         <div className="col lg-col-4 md-col-4 col-12">
                             <div className="lg-right md-right sm-center">
                                 {this._renderHeader(Key.Documentation)}
-                                {_.map(menuItemsBySection[Key.Documentation], this._renderMenuItem.bind(this))}
+                                {_.map(sectionNameToLinks[Key.Documentation], this._renderMenuItem.bind(this))}
                             </div>
                         </div>
                         <div className="col lg-col-4 md-col-4 col-12 lg-pr2 md-pr2">
                             <div className="lg-right md-right sm-center">
                                 {this._renderHeader(Key.Community)}
-                                {_.map(menuItemsBySection[Key.Community], this._renderMenuItem.bind(this))}
+                                {_.map(sectionNameToLinks[Key.Community], this._renderMenuItem.bind(this))}
                             </div>
                         </div>
                         <div className="col lg-col-4 md-col-4 col-12">
                             <div className="lg-right md-right sm-center">
                                 {this._renderHeader(Key.Organization)}
-                                {_.map(menuItemsBySection[Key.Organization], this._renderMenuItem.bind(this))}
+                                {_.map(sectionNameToLinks[Key.Organization], this._renderMenuItem.bind(this))}
                             </div>
                         </div>
                     </div>
@@ -187,7 +177,7 @@ export class Footer extends React.Component<FooterProps, FooterState> {
             </div>
         );
     }
-    private _renderMenuItem(item: FooterMenuItem): React.ReactNode {
+    private _renderMenuItem(link: ALink): React.ReactNode {
         const titleToIcon: { [title: string]: string } = {
             [this.props.translate.get(Key.RocketChat, Deco.Cap)]: 'rocketchat.png',
             [this.props.translate.get(Key.Blog, Deco.Cap)]: 'medium.png',
@@ -195,30 +185,21 @@ export class Footer extends React.Component<FooterProps, FooterState> {
             Reddit: 'reddit.png',
             [this.props.translate.get(Key.Forum, Deco.Cap)]: 'discourse.png',
         };
-        const iconIfExists = titleToIcon[item.title];
+        const iconIfExists = titleToIcon[link.title];
         return (
-            <div key={item.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
-                {item.isExternal ? (
-                    <a className="text-decoration-none" style={linkStyle} target="_blank" href={item.path}>
+            <div key={link.title} className="sm-center" style={{ fontSize: 13, paddingTop: 25 }}>
+                <Link to={link.to} type={link.type} style={linkStyle} className="text-decoration-none">
+                    <div>
                         {!_.isUndefined(iconIfExists) ? (
                             <div className="inline-block">
                                 <div className="pr1 table-cell">{this._renderIcon(iconIfExists)}</div>
-                                <div className="table-cell">{item.title}</div>
+                                <div className="table-cell">{link.title}</div>
                             </div>
                         ) : (
-                            item.title
+                            link.title
                         )}
-                    </a>
-                ) : (
-                    <Link to={item.path} style={linkStyle} className="text-decoration-none">
-                        <div>
-                            {!_.isUndefined(iconIfExists) && (
-                                <div className="pr1">{this._renderIcon(iconIfExists)}</div>
-                            )}
-                            {item.title}
-                        </div>
-                    </Link>
-                )}
+                    </div>
+                </Link>
             </div>
         );
     }
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index db093fb68..adf96f9ee 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -3,9 +3,9 @@ import { BigNumber } from '@0xproject/utils';
 import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 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 {
@@ -112,7 +112,7 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     Insufficient allowance.{' '}
                     <Link
                         to={`${WebsitePaths.Portal}/account`}
-                        style={{ cursor: 'pointer', color: colors.darkestGrey }}
+                        style={{ cursor: 'pointer', color: colors.darkestGrey, textDecoration: 'underline' }}
                     >
                         Set allowance
                     </Link>
diff --git a/packages/website/ts/components/portal/back_button.tsx b/packages/website/ts/components/portal/back_button.tsx
index ca35abc2b..bdbcef343 100644
--- a/packages/website/ts/components/portal/back_button.tsx
+++ b/packages/website/ts/components/portal/back_button.tsx
@@ -1,6 +1,6 @@
 import { Styles } from '@0xproject/react-shared';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
 
 import { Island } from 'ts/components/ui/island';
 import { colors } from 'ts/style/colors';
@@ -27,7 +27,7 @@ const styles: Styles = {
 export const BackButton = (props: BackButtonProps) => {
     return (
         <div style={{ height: 65, paddingTop: 25 }}>
-            <Link to={props.to} style={{ textDecoration: 'none' }}>
+            <Link to={props.to}>
                 <Island className="flex right" style={styles.backButton}>
                     <div style={{ marginLeft: 12 }}>
                         <i style={styles.backButtonIcon} className={`zmdi zmdi-arrow-left`} />
diff --git a/packages/website/ts/components/portal/drawer_menu.tsx b/packages/website/ts/components/portal/drawer_menu.tsx
index a6707e86c..3a8c69a70 100644
--- a/packages/website/ts/components/portal/drawer_menu.tsx
+++ b/packages/website/ts/components/portal/drawer_menu.tsx
@@ -39,7 +39,7 @@ export interface DrawerMenuProps {
 }
 export const DrawerMenu = (props: DrawerMenuProps) => {
     const relayerItemEntry = {
-        to: `${WebsitePaths.Portal}`,
+        to: WebsitePaths.Portal,
         labelText: 'Relayer ecosystem',
         iconName: 'zmdi-portable-wifi',
     };
diff --git a/packages/website/ts/components/portal/menu.tsx b/packages/website/ts/components/portal/menu.tsx
index 39dab77f5..a3352529c 100644
--- a/packages/website/ts/components/portal/menu.tsx
+++ b/packages/website/ts/components/portal/menu.tsx
@@ -1,7 +1,7 @@
 import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { MenuItem } from 'ts/components/ui/menu_item';
+import { CustomMenuItem } from 'ts/components/ui/custom_menu_item';
 import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
 
@@ -67,14 +67,14 @@ export const Menu: React.StatelessComponent<MenuProps> = (props: MenuProps) => {
             {_.map(props.menuItemEntries, entry => {
                 const isSelected = entry.to === props.selectedPath;
                 return (
-                    <MenuItem key={entry.to} to={entry.to}>
+                    <CustomMenuItem key={entry.to} to={entry.to}>
                         <MenuItemLabel
                             title={entry.labelText}
                             iconName={entry.iconName}
                             selected={isSelected}
                             theme={props.theme}
                         />
-                    </MenuItem>
+                    </CustomMenuItem>
                 );
             })}
         </div>
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index b42954f60..a9ccf9e11 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -3,7 +3,8 @@ import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
-import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom';
+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';
@@ -317,7 +318,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         };
         return (
             <Section
-                header={<BackButton to={`${WebsitePaths.Portal}`} labelText="back to Relayers" />}
+                header={<BackButton to={WebsitePaths.Portal} labelText="back to Relayers" />}
                 body={<Menu selectedPath={routeComponentProps.location.pathname} theme={menuTheme} />}
             />
         );
@@ -389,9 +390,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             </Container>
         );
         return !shouldStartOnboarding ? (
-            <Link to={{ pathname: `${WebsitePaths.Portal}/account` }} style={{ textDecoration: 'none' }}>
-                {startOnboarding}
-            </Link>
+            <Link to={`${WebsitePaths.Portal}/account`}>{startOnboarding}</Link>
         ) : (
             startOnboarding
         );
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index c2d753e31..3da2307e0 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -10,15 +10,15 @@ import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 import { Blockchain } from 'ts/blockchain';
 import { DevelopersDropDown } from 'ts/components/dropdowns/developers_drop_down';
 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, ProviderType, WebsitePaths } from 'ts/types';
+import { Deco, Key, LinkType, ProviderType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
@@ -151,7 +151,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     paddingLeft={this.props.paddingLeft}
                     paddingRight={this.props.paddingRight}
                 >
-                    <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
+                    <Link to={WebsitePaths.Home}>
                         <img src={logoUrl} height="30" />
                     </Link>
                     <div className="flex-auto" />
@@ -165,40 +165,36 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.Wiki, Deco.Cap)}
-                                    path={`${WebsitePaths.Wiki}`}
+                                    path={WebsitePaths.Wiki}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
-                                    isExternal={false}
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.Blog, Deco.Cap)}
                                     path={constants.URL_BLOG}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
-                                    isExternal={true}
+                                    linkType={LinkType.External}
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.About, Deco.Cap)}
-                                    path={`${WebsitePaths.About}`}
+                                    path={WebsitePaths.About}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
-                                    isExternal={false}
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.Careers, Deco.Cap)}
-                                    path={`${WebsitePaths.Careers}`}
+                                    path={WebsitePaths.Careers}
                                     style={styles.menuItem}
                                     isNightVersion={isNightVersion}
-                                    isExternal={false}
                                 />
                                 <TopBarMenuItem
                                     title={this.props.translate.get(Key.TradeCallToAction, Deco.Cap)}
-                                    path={`${WebsitePaths.Portal}`}
+                                    path={WebsitePaths.Portal}
                                     isPrimary={true}
                                     style={styles.menuItem}
                                     className={`${isExpandedDisplayType && 'md-hide'}`}
                                     isNightVersion={isNightVersion}
-                                    isExternal={false}
                                 />
                             </div>
                         </div>
@@ -260,20 +256,16 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     <div className="pl1 py1 mt3" style={{ backgroundColor: colors.lightGrey }}>
                         {this.props.translate.get(Key.Website, Deco.Cap)}
                     </div>
-                    <Link to={WebsitePaths.Home} className="text-decoration-none">
+                    <Link to={WebsitePaths.Home}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Home, Deco.Cap)}</MenuItem>
                     </Link>
-                    <Link to={`${WebsitePaths.Wiki}`} className="text-decoration-none">
+                    <Link to={WebsitePaths.Wiki}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Wiki, Deco.Cap)}</MenuItem>
                     </Link>
                     {_.map(DOC_WEBSITE_PATHS_TO_KEY, (key, websitePath) => {
                         if (!this._doesUrlInclude(websitePath)) {
                             return (
-                                <Link
-                                    key={`drawer-menu-item-${websitePath}`}
-                                    to={websitePath}
-                                    className="text-decoration-none"
-                                >
+                                <Link key={`drawer-menu-item-${websitePath}`} to={websitePath}>
                                     <MenuItem className="py2">
                                         {this.props.translate.get(key, Deco.Cap)}{' '}
                                         {this.props.translate.get(Key.Docs, Deco.Cap)}
@@ -284,25 +276,25 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                         return null;
                     })}
                     {!this._isViewingPortal() && (
-                        <Link to={`${WebsitePaths.Portal}`} className="text-decoration-none">
+                        <Link to={WebsitePaths.Portal}>
                             <MenuItem className="py2">
                                 {this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
                             </MenuItem>
                         </Link>
                     )}
-                    <a className="text-decoration-none" target="_blank" href={`${WebsitePaths.Whitepaper}`}>
+                    <Link to={WebsitePaths.Whitepaper} type={LinkType.External} shouldOpenInNewTab={true}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Whitepaper, Deco.Cap)}</MenuItem>
-                    </a>
-                    <Link to={`${WebsitePaths.About}`} className="text-decoration-none">
+                    </Link>
+                    <Link to={WebsitePaths.About}>
                         <MenuItem className="py2">{this.props.translate.get(Key.About, Deco.Cap)}</MenuItem>
                     </Link>
-                    <Link to={`${WebsitePaths.Careers}`} className="text-decoration-none">
+                    <Link to={WebsitePaths.Careers}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Careers, Deco.Cap)}</MenuItem>
                     </Link>
-                    <a className="text-decoration-none" target="_blank" href={constants.URL_BLOG}>
+                    <Link to={constants.URL_BLOG} type={LinkType.External} shouldOpenInNewTab={true}>
                         <MenuItem className="py2">{this.props.translate.get(Key.Blog, Deco.Cap)}</MenuItem>
-                    </a>
-                    <Link to={`${WebsitePaths.FAQ}`} className="text-decoration-none">
+                    </Link>
+                    <Link to={WebsitePaths.FAQ}>
                         <MenuItem className="py2" onClick={this._onMenuButtonClick.bind(this)}>
                             {this.props.translate.get(Key.Faq, Deco.Cap)}
                         </MenuItem>
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 25fab2868..89fd9e8a8 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,7 +1,8 @@
 import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
+import { LinkType } from 'ts/types';
 
 import { CallToAction } from 'ts/components/ui/button';
 
@@ -13,7 +14,7 @@ interface TopBarMenuItemProps {
     title: string;
     path?: string;
     isPrimary?: boolean;
-    isExternal: boolean;
+    linkType: LinkType;
     style?: React.CSSProperties;
     className?: string;
     isNightVersion?: boolean;
@@ -38,20 +39,9 @@ export class TopBarMenuItem extends React.Component<TopBarMenuItemProps, TopBarM
         );
         return (
             <div className={`center ${this.props.className}`} style={{ ...this.props.style, color: menuItemColor }}>
-                {this.props.isExternal ? (
-                    <a
-                        className="text-decoration-none"
-                        style={{ color: linkColor }}
-                        target="_blank"
-                        href={this.props.path}
-                    >
-                        {itemContent}
-                    </a>
-                ) : (
-                    <Link to={this.props.path} className="text-decoration-none" style={{ color: linkColor }}>
-                        {itemContent}
-                    </Link>
-                )}
+                <Link to={this.props.path} type={this.props.linkType} style={{ color: linkColor }}>
+                    {itemContent}
+                </Link>
             </div>
         );
     }
diff --git a/packages/website/ts/components/ui/custom_menu_item.tsx b/packages/website/ts/components/ui/custom_menu_item.tsx
new file mode 100644
index 000000000..c51095709
--- /dev/null
+++ b/packages/website/ts/components/ui/custom_menu_item.tsx
@@ -0,0 +1,51 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import { Link } from 'ts/components/ui/link';
+
+interface CustomMenuItemProps {
+    to: string;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+    className?: string;
+}
+
+interface CustomMenuItemState {
+    isHovering: boolean;
+}
+
+export class CustomMenuItem extends React.Component<CustomMenuItemProps, CustomMenuItemState> {
+    public static defaultProps: Partial<CustomMenuItemProps> = {
+        onClick: _.noop.bind(_),
+        className: '',
+    };
+    public constructor(props: CustomMenuItemProps) {
+        super(props);
+        this.state = {
+            isHovering: false,
+        };
+    }
+    public render(): React.ReactNode {
+        const menuItemStyles = {
+            cursor: 'pointer',
+            opacity: this.state.isHovering ? 0.5 : 1,
+        };
+        return (
+            <Link to={this.props.to} style={this.props.style}>
+                <div
+                    onClick={this.props.onClick.bind(this)}
+                    className={`mx-auto ${this.props.className}`}
+                    style={menuItemStyles}
+                    onMouseEnter={this._onToggleHover.bind(this, true)}
+                    onMouseLeave={this._onToggleHover.bind(this, false)}
+                >
+                    {this.props.children}
+                </div>
+            </Link>
+        );
+    }
+    private _onToggleHover(isHovering: boolean): void {
+        this.setState({
+            isHovering,
+        });
+    }
+}
diff --git a/packages/website/ts/components/ui/link.tsx b/packages/website/ts/components/ui/link.tsx
index f7bca370b..ae62aad0c 100644
--- a/packages/website/ts/components/ui/link.tsx
+++ b/packages/website/ts/components/ui/link.tsx
@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { Link as ReactRounterLink } from 'react-router-dom';
+import { LinkType } from 'ts/types';
 
 export interface LinkProps {
     to: string;
-    isExternal?: boolean;
+    type?: LinkType;
     shouldOpenInNewTab?: boolean;
     style?: React.CSSProperties;
     className?: string;
@@ -17,29 +18,39 @@ export interface LinkProps {
 export const Link: React.StatelessComponent<LinkProps> = ({
     style,
     className,
-    isExternal,
+    type,
     to,
     shouldOpenInNewTab,
     children,
 }) => {
-    if (isExternal) {
-        return (
-            <a target={shouldOpenInNewTab && '_blank'} className={className} style={style} href={to}>
-                {children}
-            </a>
-        );
-    } else {
-        return (
-            <ReactRounterLink to={to} className={className} style={style}>
-                {children}
-            </ReactRounterLink>
-        );
+    const styleWithDefault = {
+        textDecoration: 'none',
+        ...style,
+    };
+
+    switch (type) {
+        case LinkType.External:
+            return (
+                <a target={shouldOpenInNewTab && '_blank'} className={className} style={styleWithDefault} href={to}>
+                    {children}
+                </a>
+            );
+        case LinkType.ReactRoute:
+            return (
+                <ReactRounterLink to={to} className={className} style={styleWithDefault}>
+                    {children}
+                </ReactRounterLink>
+            );
+        case LinkType.ReactScroll:
+            return <div>TODO</div>;
+        default:
+            throw new Error(`Unrecognized LinkType: ${type}`);
     }
 };
 
 Link.defaultProps = {
-    isExternal: false,
-    shouldOpenInNewTab: false,
+    type: LinkType.ReactRoute,
+    shouldOpenInNewTab: true,
     style: {},
     className: '',
 };
diff --git a/packages/website/ts/components/ui/menu_item.tsx b/packages/website/ts/components/ui/menu_item.tsx
deleted file mode 100644
index 0cb4b387c..000000000
--- a/packages/website/ts/components/ui/menu_item.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { Link } from 'react-router-dom';
-
-interface MenuItemProps {
-    to: string;
-    style?: React.CSSProperties;
-    onClick?: () => void;
-    className?: string;
-}
-
-interface MenuItemState {
-    isHovering: boolean;
-}
-
-export class MenuItem extends React.Component<MenuItemProps, MenuItemState> {
-    public static defaultProps: Partial<MenuItemProps> = {
-        onClick: _.noop.bind(_),
-        className: '',
-    };
-    public constructor(props: MenuItemProps) {
-        super(props);
-        this.state = {
-            isHovering: false,
-        };
-    }
-    public render(): React.ReactNode {
-        const menuItemStyles = {
-            cursor: 'pointer',
-            opacity: this.state.isHovering ? 0.5 : 1,
-        };
-        return (
-            <Link to={this.props.to} style={{ textDecoration: 'none', ...this.props.style }}>
-                <div
-                    onClick={this.props.onClick.bind(this)}
-                    className={`mx-auto ${this.props.className}`}
-                    style={menuItemStyles}
-                    onMouseEnter={this._onToggleHover.bind(this, true)}
-                    onMouseLeave={this._onToggleHover.bind(this, false)}
-                >
-                    {this.props.children}
-                </div>
-            </Link>
-        );
-    }
-    private _onToggleHover(isHovering: boolean): void {
-        this.setState({
-            isHovering,
-        });
-    }
-}
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
index 8a9349c6d..767da3675 100644
--- a/packages/website/ts/components/ui/simple_menu.tsx
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -1,7 +1,7 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
-import { Link } from 'react-router-dom';
+import { Link } from 'ts/components/ui/link';
 
 import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
@@ -72,7 +72,7 @@ export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<
     GoToAccountManagementSimpleMenuItemProps
 > = ({ onClick }) => {
     return (
-        <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+        <Link to={`${WebsitePaths.Portal}/account`}>
             <SimpleMenuItem displayText="Manage Account..." onClick={onClick} />
         </Link>
     );
-- 
cgit