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

69 files changed, 169 insertions, 150 deletions

diff --git a/packages/react-shared/package.json b/packages/react-shared/package.json
index e1cc2ad8b..e96659e47 100644
--- a/packages/react-shared/package.json
+++ b/packages/react-shared/package.json
@@ -7,6 +7,7 @@
   "scripts": {
     "lint": "tslint --project . 'src/ts/**/*.ts' 'src/ts/**/*.tsx'",
     "build": "tsc",
+    "build:watch": "tsc -w",
     "clean": "shx rm -rf lib"
   },
   "author": "Fabio Berger",
@@ -29,6 +30,7 @@
     "react-dom": "15.6.1",
     "lodash": "^4.17.4",
     "react-scroll": "^1.5.2",
-    "react-tap-event-plugin": "^2.0.1"
+    "react-tap-event-plugin": "^2.0.1",
+    "react-highlight": "0xproject/react-highlight"
   }
 }
diff --git a/packages/react-shared/src/ts/components/anchor_title.tsx b/packages/react-shared/src/ts/components/anchor_title.tsx
index aa839cac9..f44354097 100644
--- a/packages/react-shared/src/ts/components/anchor_title.tsx
+++ b/packages/react-shared/src/ts/components/anchor_title.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
 
-import { constants } from '../constants';
 import { HeaderSizes, Styles } from '../types';
-import { utils } from '../utils';
+import { constants } from '../utils/constants';
+import { utils } from '../utils/utils';
 
 const headerSizeToScrollOffset: { [headerSize: string]: number } = {
     h2: -20,
diff --git a/packages/website/ts/pages/shared/markdown_code_block.tsx b/packages/react-shared/src/ts/components/markdown_code_block.tsx
index 6dfb74554..2070bb8e1 100644
--- a/packages/website/ts/pages/shared/markdown_code_block.tsx
+++ b/packages/react-shared/src/ts/components/markdown_code_block.tsx
@@ -2,12 +2,12 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import * as HighLight from 'react-highlight';
 
-interface MarkdownCodeBlockProps {
+export interface MarkdownCodeBlockProps {
     value: string;
     language: string;
 }
 
-interface MarkdownCodeBlockState {}
+export interface MarkdownCodeBlockState {}
 
 export class MarkdownCodeBlock extends React.Component<MarkdownCodeBlockProps, MarkdownCodeBlockState> {
     // Re-rendering a codeblock causes any use selection to become de-selected. This is annoying when trying
diff --git a/packages/website/ts/pages/shared/markdown_link_block.tsx b/packages/react-shared/src/ts/components/markdown_link_block.tsx
index b1f68c915..8f5862249 100644
--- a/packages/website/ts/pages/shared/markdown_link_block.tsx
+++ b/packages/react-shared/src/ts/components/markdown_link_block.tsx
@@ -1,14 +1,14 @@
-import { utils as sharedUtils } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { configs } from 'ts/utils/configs';
-import { utils } from 'ts/utils/utils';
 
-interface MarkdownLinkBlockProps {
+import { constants } from '../utils/constants';
+import { utils } from '../utils/utils';
+
+export interface MarkdownLinkBlockProps {
     href: string;
 }
 
-interface MarkdownLinkBlockState {}
+export interface MarkdownLinkBlockState {}
 
 export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, MarkdownLinkBlockState> {
     // Re-rendering a linkBlock causes it to remain unclickable.
@@ -41,7 +41,7 @@ export class MarkdownLinkBlock extends React.Component<MarkdownLinkBlockProps, M
     }
     private _onHashUrlClick(href: string) {
         const hash = href.split('#')[1];
-        utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
-        sharedUtils.setUrlHash(hash);
+        utils.scrollToHash(hash, constants.SCROLL_CONTAINER_ID);
+        utils.setUrlHash(hash);
     }
 }
diff --git a/packages/website/ts/pages/shared/markdown_section.tsx b/packages/react-shared/src/ts/components/markdown_section.tsx
index d03b30f4b..682b6ef8f 100644
--- a/packages/website/ts/pages/shared/markdown_section.tsx
+++ b/packages/react-shared/src/ts/components/markdown_section.tsx
@@ -1,22 +1,25 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
 import * as ReactMarkdown from 'react-markdown';
 import { Element as ScrollElement } from 'react-scroll';
-import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
-import { MarkdownLinkBlock } from 'ts/pages/shared/markdown_link_block';
-import { colors } from 'ts/utils/colors';
-import { utils } from 'ts/utils/utils';
 
-interface MarkdownSectionProps {
+import { HeaderSizes } from '../types';
+import { colors } from '../utils/colors';
+import { utils } from '../utils/utils';
+
+import { AnchorTitle } from './anchor_title';
+import { MarkdownCodeBlock } from './markdown_code_block';
+import { MarkdownLinkBlock } from './markdown_link_block';
+
+export interface MarkdownSectionProps {
     sectionName: string;
     markdownContent: string;
     headerSize?: HeaderSizes;
     githubLink?: string;
 }
 
-interface MarkdownSectionState {
+export interface MarkdownSectionState {
     shouldShowAnchor: boolean;
 }
 
diff --git a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx
index abbd34c98..2506124af 100644
--- a/packages/website/ts/pages/shared/nested_sidebar_menu.tsx
+++ b/packages/react-shared/src/ts/components/nested_sidebar_menu.tsx
@@ -1,14 +1,16 @@
-import { constants, Styles, utils as sharedUtils } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
-import { VersionDropDown } from 'ts/pages/shared/version_drop_down';
-import { MenuSubsectionsBySection } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { utils } from 'ts/utils/utils';
 
-interface NestedSidebarMenuProps {
+import { MenuSubsectionsBySection, Styles } from '../types';
+import { colors } from '../utils/colors';
+import { constants } from '../utils/constants';
+import { utils } from '../utils/utils';
+
+import { VersionDropDown } from './version_drop_down';
+
+export interface NestedSidebarMenuProps {
     topLevelMenu: { [topLevel: string]: string[] };
     menuSubsectionsBySection: MenuSubsectionsBySection;
     title: string;
@@ -18,7 +20,7 @@ interface NestedSidebarMenuProps {
     versions?: string[];
 }
 
-interface NestedSidebarMenuState {}
+export interface NestedSidebarMenuState {}
 
 const styles: Styles = {
     menuItemWithHeaders: {
@@ -171,7 +173,7 @@ export class NestedSidebarMenu extends React.Component<NestedSidebarMenuProps, N
     }
     private _onMenuItemClick(name: string): void {
         const id = utils.getIdFromName(name);
-        sharedUtils.setUrlHash(id);
+        utils.setUrlHash(id);
         this.props.onMenuItemClick();
     }
 }
diff --git a/packages/website/ts/pages/shared/section_header.tsx b/packages/react-shared/src/ts/components/section_header.tsx
index 3f661a1e5..90fabf9ff 100644
--- a/packages/website/ts/pages/shared/section_header.tsx
+++ b/packages/react-shared/src/ts/components/section_header.tsx
@@ -1,15 +1,18 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
 import * as React from 'react';
 import { Element as ScrollElement } from 'react-scroll';
-import { colors } from 'ts/utils/colors';
-import { utils } from 'ts/utils/utils';
 
-interface SectionHeaderProps {
+import { HeaderSizes } from '../types';
+import { colors } from '../utils/colors';
+import { utils } from '../utils/utils';
+
+import { AnchorTitle } from './anchor_title';
+
+export interface SectionHeaderProps {
     sectionName: string;
     headerSize?: HeaderSizes;
 }
 
-interface SectionHeaderState {
+export interface SectionHeaderState {
     shouldShowAnchor: boolean;
 }
 
diff --git a/packages/website/ts/pages/shared/version_drop_down.tsx b/packages/react-shared/src/ts/components/version_drop_down.tsx
index 1b4dbb375..86fe43507 100644
--- a/packages/website/ts/pages/shared/version_drop_down.tsx
+++ b/packages/react-shared/src/ts/components/version_drop_down.tsx
@@ -2,14 +2,15 @@ import * as _ from 'lodash';
 import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
 import * as React from 'react';
-import { utils } from 'ts/utils/utils';
 
-interface VersionDropDownProps {
+import { utils } from '../utils/utils';
+
+export interface VersionDropDownProps {
     selectedVersion: string;
     versions: string[];
 }
 
-interface VersionDropDownState {}
+export interface VersionDropDownState {}
 
 export class VersionDropDown extends React.Component<VersionDropDownProps, VersionDropDownState> {
     public render() {
diff --git a/packages/react-shared/src/ts/globals.d.ts b/packages/react-shared/src/ts/globals.d.ts
index e69de29bb..875721533 100644
--- a/packages/react-shared/src/ts/globals.d.ts
+++ b/packages/react-shared/src/ts/globals.d.ts
@@ -0,0 +1 @@
+declare module 'react-highlight';
diff --git a/packages/react-shared/src/ts/index.ts b/packages/react-shared/src/ts/index.ts
index d33638e62..dde77b7b9 100644
--- a/packages/react-shared/src/ts/index.ts
+++ b/packages/react-shared/src/ts/index.ts
@@ -1,6 +1,12 @@
 export { AnchorTitle } from './components/anchor_title';
+export { MarkdownLinkBlock } from './components/markdown_link_block';
+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 { HeaderSizes, Styles } from './types';
+export { HeaderSizes, Styles, MenuSubsectionsBySection } from './types';
 
-export { utils } from './utils';
-export { constants } from './constants';
+export { utils } from './utils/utils';
+export { constants } from './utils/constants';
+export { colors } from './utils/colors';
diff --git a/packages/react-shared/src/ts/types.ts b/packages/react-shared/src/ts/types.ts
index e4fe7bff9..f9d561d1a 100644
--- a/packages/react-shared/src/ts/types.ts
+++ b/packages/react-shared/src/ts/types.ts
@@ -7,3 +7,7 @@ export enum HeaderSizes {
     H2 = 'h2',
     H3 = 'h3',
 }
+
+export interface MenuSubsectionsBySection {
+    [section: string]: string[];
+}
diff --git a/packages/react-shared/src/ts/utils.ts b/packages/react-shared/src/ts/utils.ts
deleted file mode 100644
index 822b67496..000000000
--- a/packages/react-shared/src/ts/utils.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const utils = {
-    setUrlHash(anchorId: string) {
-        window.location.hash = anchorId;
-    },
-};
diff --git a/packages/website/ts/utils/colors.ts b/packages/react-shared/src/ts/utils/colors.ts
index 2eead95c7..2eead95c7 100644
--- a/packages/website/ts/utils/colors.ts
+++ b/packages/react-shared/src/ts/utils/colors.ts
diff --git a/packages/react-shared/src/ts/constants.ts b/packages/react-shared/src/ts/utils/constants.ts
index 20d0c6e92..79d1d9ca3 100644
--- a/packages/react-shared/src/ts/constants.ts
+++ b/packages/react-shared/src/ts/utils/constants.ts
@@ -1,4 +1,6 @@
 export const constants = {
     DOCS_SCROLL_DURATION_MS: 0,
     DOCS_CONTAINER_ID: 'documentation',
+    SCROLL_CONTAINER_ID: 'documentation',
+    SCROLL_TOP_ID: 'pageScrollTop',
 };
diff --git a/packages/react-shared/src/ts/utils/utils.ts b/packages/react-shared/src/ts/utils/utils.ts
new file mode 100644
index 000000000..7498342b6
--- /dev/null
+++ b/packages/react-shared/src/ts/utils/utils.ts
@@ -0,0 +1,32 @@
+import * as _ from 'lodash';
+import { scroller } from 'react-scroll';
+
+import { constants } from './constants';
+
+export const utils = {
+    setUrlHash(anchorId: string) {
+        window.location.hash = anchorId;
+    },
+    scrollToHash(hash: string, containerId: string): void {
+        let finalHash = hash;
+        if (_.isEmpty(hash)) {
+            finalHash = constants.SCROLL_TOP_ID; // scroll to the top
+        }
+
+        scroller.scrollTo(finalHash, {
+            duration: 0,
+            offset: 0,
+            containerId,
+        });
+    },
+    getIdFromName(name: string) {
+        const id = name.replace(/ /g, '-');
+        return id;
+    },
+    getCurrentBaseUrl() {
+        const port = window.location.port;
+        const hasPort = !_.isUndefined(port);
+        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
+        return baseUrl;
+    },
+};
diff --git a/packages/website/package.json b/packages/website/package.json
index e6790abbc..74bc2f8a6 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -44,7 +44,6 @@
         "react-document-title": "^2.0.3",
         "react-dom": "15.6.1",
         "react-ga": "^2.4.1",
-        "react-highlight": "0xproject/react-highlight",
         "react-html5video": "^2.1.0",
         "react-inlinesvg": "^0.5.5",
         "react-markdown": "^3.2.2",
diff --git a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
index 278e2bbf5..7353a8767 100644
--- a/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
+++ b/packages/website/ts/components/dialogs/blockchain_err_dialog.tsx
@@ -1,10 +1,10 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
 import { BlockchainErrs, Networks } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index acd4a7110..5c61f0d57 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
@@ -6,7 +7,6 @@ import { Blockchain } from 'ts/blockchain';
 import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
 import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
 import { Side, Token } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 interface EthWethConversionDialogProps {
     blockchain: Blockchain;
diff --git a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
index bc5f05241..5836fec0e 100644
--- a/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
+++ b/packages/website/ts/components/dialogs/ledger_config_dialog.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
@@ -11,7 +12,6 @@ import { NetworkDropDown } from 'ts/components/dropdowns/network_drop_down';
 import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProviderType } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
index 3ecc454a0..b31667121 100644
--- a/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
+++ b/packages/website/ts/components/dialogs/portal_disclaimer_dialog.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
-import { colors } from 'ts/utils/colors';
 
 interface PortalDisclaimerDialogProps {
     isOpen: boolean;
diff --git a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
index 098e3e26d..6ac9cf917 100644
--- a/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
+++ b/packages/website/ts/components/dialogs/u2f_not_supported_dialog.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 
 interface U2fNotSupportedDialogProps {
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
index c2cdf6751..698b30815 100644
--- a/packages/website/ts/components/eth_wrappers.tsx
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -1,4 +1,5 @@
 import { ZeroEx } from '0x.js';
+import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Divider from 'material-ui/Divider';
@@ -17,7 +18,6 @@ import {
     TokenByAddress,
     TokenState,
 } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 51e44134c..d7eecbcd3 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -1,4 +1,5 @@
 import { Order as ZeroExOrder, ZeroEx } from '0x.js';
+import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as accounting from 'accounting';
 import * as _ from 'lodash';
@@ -21,7 +22,6 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
 import { validator } from 'ts/schemas/validator';
 import { AlertTypes, BlockchainErrs, Order, Token, TokenByAddress, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/components/fill_warning_dialog.tsx b/packages/website/ts/components/fill_warning_dialog.tsx
index 165d21b34..d3215a6c1 100644
--- a/packages/website/ts/components/fill_warning_dialog.tsx
+++ b/packages/website/ts/components/fill_warning_dialog.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
 import Dialog from 'material-ui/Dialog';
 import FlatButton from 'material-ui/FlatButton';
 import * as React from 'react';
-import { colors } from 'ts/utils/colors';
 
 interface FillWarningDialogProps {
     isOpen: boolean;
diff --git a/packages/website/ts/components/flash_messages/token_send_completed.tsx b/packages/website/ts/components/flash_messages/token_send_completed.tsx
index 18f371624..a3b056758 100644
--- a/packages/website/ts/components/flash_messages/token_send_completed.tsx
+++ b/packages/website/ts/components/flash_messages/token_send_completed.tsx
@@ -1,9 +1,9 @@
 import { ZeroEx } from '0x.js';
+import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Token } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface TokenSendCompletedProps {
diff --git a/packages/website/ts/components/flash_messages/transaction_submitted.tsx b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
index 862e382dd..188f1f9a6 100644
--- a/packages/website/ts/components/flash_messages/transaction_submitted.tsx
+++ b/packages/website/ts/components/flash_messages/transaction_submitted.tsx
@@ -1,6 +1,6 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { colors } from 'ts/utils/colors';
 
 interface TransactionSubmittedProps {
     etherScanLinkIfExists?: string;
diff --git a/packages/website/ts/components/footer.tsx b/packages/website/ts/components/footer.tsx
index 810460cac..957ed2044 100644
--- a/packages/website/ts/components/footer.tsx
+++ b/packages/website/ts/components/footer.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import DropDownMenu from 'material-ui/DropDownMenu';
 import MenuItem from 'material-ui/MenuItem';
@@ -5,7 +6,6 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, Language, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
diff --git a/packages/website/ts/components/generate_order/generate_order_form.tsx b/packages/website/ts/components/generate_order/generate_order_form.tsx
index a3f222784..e14991993 100644
--- a/packages/website/ts/components/generate_order/generate_order_form.tsx
+++ b/packages/website/ts/components/generate_order/generate_order_form.tsx
@@ -1,4 +1,5 @@
 import { ECSignature, Order, ZeroEx } from '0x.js';
+import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Dialog from 'material-ui/Dialog';
@@ -20,7 +21,6 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
 import { validator } from 'ts/schemas/validator';
 import { AlertTypes, BlockchainErrs, HashData, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/components/generate_order/new_token_form.tsx b/packages/website/ts/components/generate_order/new_token_form.tsx
index f76830a49..e7f3b93c6 100644
--- a/packages/website/ts/components/generate_order/new_token_form.tsx
+++ b/packages/website/ts/components/generate_order/new_token_form.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
@@ -7,7 +8,6 @@ import { Alert } from 'ts/components/ui/alert';
 import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
 import { RequiredLabel } from 'ts/components/ui/required_label';
 import { AlertTypes, Token, TokenByAddress } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 interface NewTokenFormProps {
     blockchain: Blockchain;
diff --git a/packages/website/ts/components/inputs/address_input.tsx b/packages/website/ts/components/inputs/address_input.tsx
index dd4131140..7ca4af968 100644
--- a/packages/website/ts/components/inputs/address_input.tsx
+++ b/packages/website/ts/components/inputs/address_input.tsx
@@ -1,9 +1,9 @@
+import { colors } from '@0xproject/react-shared';
 import { addressUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
 import { RequiredLabel } from 'ts/components/ui/required_label';
-import { colors } from 'ts/utils/colors';
 
 interface AddressInputProps {
     disabled?: boolean;
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 3bbc7a5f6..253b01871 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import TextField from 'material-ui/TextField';
@@ -5,7 +6,6 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import { RequiredLabel } from 'ts/components/ui/required_label';
 import { InputErrMsg, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface BalanceBoundedInputProps {
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index 2b167d875..53248c065 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -1,4 +1,5 @@
 import { ZeroEx } from '0x.js';
+import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import * as React from 'react';
@@ -6,7 +7,6 @@ import { Link } from 'react-router-dom';
 import { Blockchain } from 'ts/blockchain';
 import { BalanceBoundedInput } from 'ts/components/inputs/balance_bounded_input';
 import { InputErrMsg, Token, ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 interface TokenAmountInputProps {
     userAddress: string;
diff --git a/packages/website/ts/components/inputs/token_input.tsx b/packages/website/ts/components/inputs/token_input.tsx
index 5df19b28c..545e9a095 100644
--- a/packages/website/ts/components/inputs/token_input.tsx
+++ b/packages/website/ts/components/inputs/token_input.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
 import * as React from 'react';
@@ -7,7 +8,6 @@ import { InputLabel } from 'ts/components/ui/input_label';
 import { TokenIcon } from 'ts/components/ui/token_icon';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { AssetToken, BlockchainErrs, Side, Token, TokenByAddress } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 const TOKEN_ICON_DIMENSION = 80;
 
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 4871997ac..d71e821c6 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
@@ -24,7 +25,6 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import { portalOrderSchema } from 'ts/schemas/portal_order_schema';
 import { validator } from 'ts/schemas/validator';
 import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index e321b247b..9065ba2d8 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -1,5 +1,5 @@
 import { ZeroEx } from '0x.js';
-import { Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import DharmaLoanFrame from 'dharma-loan-frame';
 import * as _ from 'lodash';
@@ -34,7 +34,6 @@ import {
     TokenByAddress,
     TokenVisibility,
 } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 39e7f2a8c..89c506d0e 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
@@ -7,7 +8,6 @@ import { DropDown } from 'ts/components/ui/drop_down';
 import { Identicon } from 'ts/components/ui/identicon';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProviderType } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx
index be7e57d6f..6373d4900 100644
--- a/packages/website/ts/components/top_bar/provider_picker.tsx
+++ b/packages/website/ts/components/top_bar/provider_picker.tsx
@@ -1,10 +1,10 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
 import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProviderType } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 
 interface ProviderPickerProps {
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index df6110de3..58b699b77 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors, MenuSubsectionsBySection, NestedSidebarMenu, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import Drawer from 'material-ui/Drawer';
 import Menu from 'material-ui/Menu';
@@ -13,10 +13,8 @@ import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
 import { DropDown } from 'ts/components/ui/drop_down';
 import { Identicon } from 'ts/components/ui/identicon';
 import { DocsInfo } from 'ts/pages/documentation/docs_info';
-import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { Deco, DocsMenu, Key, MenuSubsectionsBySection, ProviderType, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
+import { Deco, DocsMenu, Key, ProviderType, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
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 e70381456..c0e674b17 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,7 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
-import { colors } from 'ts/utils/colors';
 
 const DEFAULT_STYLE = {
     color: colors.darkestGrey,
diff --git a/packages/website/ts/components/track_token_confirmation.tsx b/packages/website/ts/components/track_token_confirmation.tsx
index 76971aefa..8c5ba7e6f 100644
--- a/packages/website/ts/components/track_token_confirmation.tsx
+++ b/packages/website/ts/components/track_token_confirmation.tsx
@@ -1,8 +1,8 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Party } from 'ts/components/ui/party';
 import { Token, TokenByAddress } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface TrackTokenConfirmationProps {
diff --git a/packages/website/ts/components/trade_history/trade_history_item.tsx b/packages/website/ts/components/trade_history/trade_history_item.tsx
index 7e42e64e6..3bab29691 100644
--- a/packages/website/ts/components/trade_history/trade_history_item.tsx
+++ b/packages/website/ts/components/trade_history/trade_history_item.tsx
@@ -1,4 +1,5 @@
 import { ZeroEx } from '0x.js';
+import { colors } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import Paper from 'material-ui/Paper';
@@ -8,7 +9,6 @@ import * as ReactTooltip from 'react-tooltip';
 import { EtherScanIcon } from 'ts/components/ui/etherscan_icon';
 import { Party } from 'ts/components/ui/party';
 import { EtherscanLinkSuffixes, Fill, Token, TokenByAddress } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 const PRECISION = 5;
 const IDENTICON_DIAMETER = 40;
diff --git a/packages/website/ts/components/ui/alert.tsx b/packages/website/ts/components/ui/alert.tsx
index 54881b499..f81939255 100644
--- a/packages/website/ts/components/ui/alert.tsx
+++ b/packages/website/ts/components/ui/alert.tsx
@@ -1,6 +1,6 @@
+import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 import { AlertTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 interface AlertProps {
     type: AlertTypes;
diff --git a/packages/website/ts/components/ui/copy_icon.tsx b/packages/website/ts/components/ui/copy_icon.tsx
index df55e0922..d58e50815 100644
--- a/packages/website/ts/components/ui/copy_icon.tsx
+++ b/packages/website/ts/components/ui/copy_icon.tsx
@@ -1,9 +1,9 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 import * as ReactDOM from 'react-dom';
 import ReactTooltip = require('react-tooltip');
-import { colors } from 'ts/utils/colors';
 
 interface CopyIconProps {
     data: string;
diff --git a/packages/website/ts/components/ui/etherscan_icon.tsx b/packages/website/ts/components/ui/etherscan_icon.tsx
index 3b17bd0fa..e7fc51070 100644
--- a/packages/website/ts/components/ui/etherscan_icon.tsx
+++ b/packages/website/ts/components/ui/etherscan_icon.tsx
@@ -1,8 +1,8 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import { EtherscanLinkSuffixes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface EtherScanIconProps {
diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx
index e2009ad20..6a3f26155 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -1,5 +1,5 @@
+import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
-import { colors } from 'ts/utils/colors';
 
 export interface InputLabelProps {
     text: string | Element | React.ReactNode;
diff --git a/packages/website/ts/components/ui/lifecycle_raised_button.tsx b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
index 8ff856a75..c85e11884 100644
--- a/packages/website/ts/components/ui/lifecycle_raised_button.tsx
+++ b/packages/website/ts/components/ui/lifecycle_raised_button.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
-import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 const COMPLETE_STATE_SHOW_LENGTH_MS = 2000;
diff --git a/packages/website/ts/components/ui/party.tsx b/packages/website/ts/components/ui/party.tsx
index ca2577b61..e120523fd 100644
--- a/packages/website/ts/components/ui/party.tsx
+++ b/packages/website/ts/components/ui/party.tsx
@@ -1,10 +1,10 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import ReactTooltip = require('react-tooltip');
 import { EthereumAddress } from 'ts/components/ui/ethereum_address';
 import { Identicon } from 'ts/components/ui/identicon';
 import { EtherscanLinkSuffixes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 const IMAGE_DIMENSION = 100;
diff --git a/packages/website/ts/components/ui/required_label.tsx b/packages/website/ts/components/ui/required_label.tsx
index a5e7a22ce..0f96586ec 100644
--- a/packages/website/ts/components/ui/required_label.tsx
+++ b/packages/website/ts/components/ui/required_label.tsx
@@ -1,5 +1,5 @@
+import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
-import { colors } from 'ts/utils/colors';
 
 export interface RequiredLabelProps {
     label: string | React.ReactNode;
diff --git a/packages/website/ts/components/ui/swap_icon.tsx b/packages/website/ts/components/ui/swap_icon.tsx
index c41592287..e465a8074 100644
--- a/packages/website/ts/components/ui/swap_icon.tsx
+++ b/packages/website/ts/components/ui/swap_icon.tsx
@@ -1,6 +1,6 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
-import { colors } from 'ts/utils/colors';
 
 interface SwapIconProps {
     swapTokensFn: () => void;
diff --git a/packages/website/ts/globals.d.ts b/packages/website/ts/globals.d.ts
index 19237db14..d43ab0f58 100644
--- a/packages/website/ts/globals.d.ts
+++ b/packages/website/ts/globals.d.ts
@@ -7,7 +7,6 @@ declare module 'whatwg-fetch';
 declare module 'react-html5video';
 declare module 'web3-provider-engine/subproviders/filters';
 declare module 'thenby';
-declare module 'react-highlight';
 declare module 'react-recaptcha';
 declare module 'react-document-title';
 declare module 'ethereumjs-tx';
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 65dcdfa7b..7f1e0bf80 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
@@ -7,7 +7,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Profile } from 'ts/pages/about/profile';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProfileInfo } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/pages/about/profile.tsx b/packages/website/ts/pages/about/profile.tsx
index 6d9d10272..4361da103 100644
--- a/packages/website/ts/pages/about/profile.tsx
+++ b/packages/website/ts/pages/about/profile.tsx
@@ -1,8 +1,7 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { ProfileInfo } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 const IMAGE_DIMENSION = 149;
 const styles: Styles = {
diff --git a/packages/website/ts/pages/documentation/comment.tsx b/packages/website/ts/pages/documentation/comment.tsx
index 5f177e97e..b8902679a 100644
--- a/packages/website/ts/pages/documentation/comment.tsx
+++ b/packages/website/ts/pages/documentation/comment.tsx
@@ -1,7 +1,7 @@
+import { MarkdownCodeBlock } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as ReactMarkdown from 'react-markdown';
-import { MarkdownCodeBlock } from 'ts/pages/shared/markdown_code_block';
 
 interface CommentProps {
     comment: string;
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index 2c8f1c103..b3b58c0c8 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -1,3 +1,4 @@
+import { MenuSubsectionsBySection } from '@0xproject/react-shared';
 import findVersions = require('find-versions');
 import * as _ from 'lodash';
 import * as React from 'react';
@@ -7,7 +8,7 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
 import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { Documentation } from 'ts/pages/documentation/documentation';
 import { Dispatcher } from 'ts/redux/dispatcher';
-import { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments, MenuSubsectionsBySection } from 'ts/types';
+import { DocAgnosticFormat, DocPackages, DoxityDocObj, Environments } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { docUtils } from 'ts/utils/doc_utils';
diff --git a/packages/website/ts/pages/documentation/docs_info.ts b/packages/website/ts/pages/documentation/docs_info.ts
index 31e151fe8..09fb7a2bc 100644
--- a/packages/website/ts/pages/documentation/docs_info.ts
+++ b/packages/website/ts/pages/documentation/docs_info.ts
@@ -1,3 +1,4 @@
+import { MenuSubsectionsBySection } from '@0xproject/react-shared';
 import compareVersions = require('compare-versions');
 import * as _ from 'lodash';
 import {
@@ -6,7 +7,6 @@ import {
     DocsInfoConfig,
     DocsMenu,
     DoxityDocObj,
-    MenuSubsectionsBySection,
     SectionsMap,
     SupportedDocJson,
     TypeDocNode,
diff --git a/packages/website/ts/pages/documentation/documentation.tsx b/packages/website/ts/pages/documentation/documentation.tsx
index 88331d1a7..3229bbd93 100644
--- a/packages/website/ts/pages/documentation/documentation.tsx
+++ b/packages/website/ts/pages/documentation/documentation.tsx
@@ -1,4 +1,13 @@
-import { Styles } from '@0xproject/react-shared';
+import {
+    colors,
+    constants as sharedConstants,
+    MarkdownSection,
+    MenuSubsectionsBySection,
+    NestedSidebarMenu,
+    SectionHeader,
+    Styles,
+    utils as sharedUtils,
+} from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
@@ -11,16 +20,12 @@ import { MethodBlock } from 'ts/pages/documentation/method_block';
 import { SourceLink } from 'ts/pages/documentation/source_link';
 import { Type } from 'ts/pages/documentation/type';
 import { TypeDefinition } from 'ts/pages/documentation/type_definition';
-import { MarkdownSection } from 'ts/pages/shared/markdown_section';
-import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
-import { SectionHeader } from 'ts/pages/shared/section_header';
 import {
     AddressByContractName,
     DocAgnosticFormat,
     DoxityDocObj,
     EtherscanLinkSuffixes,
     Event,
-    MenuSubsectionsBySection,
     Networks,
     Property,
     SolidityMethod,
@@ -28,8 +33,6 @@ import {
     TypeDefinitionByName,
     TypescriptMethod,
 } from 'ts/types';
-import { colors } from 'ts/utils/colors';
-import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
@@ -77,7 +80,7 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
     public componentDidUpdate(prevProps: DocumentationProps, prevState: DocumentationState) {
         if (!_.isEqual(prevProps.docAgnosticFormat, this.props.docAgnosticFormat)) {
             const hash = this.props.location.hash.slice(1);
-            utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
+            sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
         }
     }
     public render() {
@@ -117,11 +120,11 @@ export class Documentation extends React.Component<DocumentationProps, Documenta
                                 style={{ backgroundColor: colors.white }}
                             >
                                 <div
-                                    id={configs.SCROLL_CONTAINER_ID}
+                                    id={sharedConstants.SCROLL_CONTAINER_ID}
                                     style={styles.mainContainers}
                                     className="absolute px1"
                                 >
-                                    <div id={configs.SCROLL_TOP_ID} />
+                                    <div id={sharedConstants.SCROLL_TOP_ID} />
                                     {this._renderDocumentation()}
                                 </div>
                             </div>
diff --git a/packages/website/ts/pages/documentation/event_definition.tsx b/packages/website/ts/pages/documentation/event_definition.tsx
index aead27d78..06d8a3d79 100644
--- a/packages/website/ts/pages/documentation/event_definition.tsx
+++ b/packages/website/ts/pages/documentation/event_definition.tsx
@@ -1,10 +1,9 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
+import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { Type } from 'ts/pages/documentation/type';
 import { Event, EventArg } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 interface EventDefinitionProps {
     event: Event;
diff --git a/packages/website/ts/pages/documentation/method_block.tsx b/packages/website/ts/pages/documentation/method_block.tsx
index a1f0b38ab..a52ab55c3 100644
--- a/packages/website/ts/pages/documentation/method_block.tsx
+++ b/packages/website/ts/pages/documentation/method_block.tsx
@@ -1,4 +1,4 @@
-import { AnchorTitle, HeaderSizes, Styles } from '@0xproject/react-shared';
+import { AnchorTitle, colors, HeaderSizes, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Comment } from 'ts/pages/documentation/comment';
@@ -6,7 +6,6 @@ import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { MethodSignature } from 'ts/pages/documentation/method_signature';
 import { SourceLink } from 'ts/pages/documentation/source_link';
 import { Parameter, SolidityMethod, TypeDefinitionByName, TypescriptMethod } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { typeDocUtils } from 'ts/utils/typedoc_utils';
 
 interface MethodBlockProps {
diff --git a/packages/website/ts/pages/documentation/source_link.tsx b/packages/website/ts/pages/documentation/source_link.tsx
index 31f80aba3..d39ad14c4 100644
--- a/packages/website/ts/pages/documentation/source_link.tsx
+++ b/packages/website/ts/pages/documentation/source_link.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Source } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 
 interface SourceLinkProps {
     source: Source;
diff --git a/packages/website/ts/pages/documentation/type.tsx b/packages/website/ts/pages/documentation/type.tsx
index 2fec4c95f..2c90a0567 100644
--- a/packages/website/ts/pages/documentation/type.tsx
+++ b/packages/website/ts/pages/documentation/type.tsx
@@ -1,4 +1,4 @@
-import { constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared';
+import { colors, constants as sharedConstants, utils as sharedUtils } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Link as ScrollLink } from 'react-scroll';
@@ -6,7 +6,6 @@ import * as ReactTooltip from 'react-tooltip';
 import { DocsInfo } from 'ts/pages/documentation/docs_info';
 import { TypeDefinition } from 'ts/pages/documentation/type_definition';
 import { Type as TypeDef, TypeDefinitionByName, TypeDocTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
diff --git a/packages/website/ts/pages/documentation/type_definition.tsx b/packages/website/ts/pages/documentation/type_definition.tsx
index dd83d120d..60f307c68 100644
--- a/packages/website/ts/pages/documentation/type_definition.tsx
+++ b/packages/website/ts/pages/documentation/type_definition.tsx
@@ -1,4 +1,4 @@
-import { AnchorTitle, HeaderSizes } from '@0xproject/react-shared';
+import { AnchorTitle, colors, HeaderSizes } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import { Comment } from 'ts/pages/documentation/comment';
@@ -9,7 +9,6 @@ import { Interface } from 'ts/pages/documentation/interface';
 import { MethodSignature } from 'ts/pages/documentation/method_signature';
 import { Type } from 'ts/pages/documentation/type';
 import { CustomType, CustomTypeChild, KindString, TypeDocTypes } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { utils } from 'ts/utils/utils';
 
 interface TypeDefinitionProps {
diff --git a/packages/website/ts/pages/faq/faq.tsx b/packages/website/ts/pages/faq/faq.tsx
index 70d116622..1be3c3565 100644
--- a/packages/website/ts/pages/faq/faq.tsx
+++ b/packages/website/ts/pages/faq/faq.tsx
@@ -1,4 +1,4 @@
-import { Styles } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
@@ -7,7 +7,6 @@ import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Question } from 'ts/pages/faq/question';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { FAQQuestion, FAQSection, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
diff --git a/packages/website/ts/pages/faq/question.tsx b/packages/website/ts/pages/faq/question.tsx
index 988c04bc9..240dae910 100644
--- a/packages/website/ts/pages/faq/question.tsx
+++ b/packages/website/ts/pages/faq/question.tsx
@@ -1,7 +1,7 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import { Card, CardHeader, CardText } from 'material-ui/Card';
 import * as React from 'react';
-import { colors } from 'ts/utils/colors';
 
 export interface QuestionProps {
     prompt: string;
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index 044f0b41f..6699e4e6f 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -1,3 +1,4 @@
+import { colors } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
@@ -7,7 +8,6 @@ import { Footer } from 'ts/components/footer';
 import { TopBar } from 'ts/components/top_bar/top_bar';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, Language, ScreenWidths, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index b22ce5826..f338ed9c2 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -1,4 +1,13 @@
-import { HeaderSizes, Styles } from '@0xproject/react-shared';
+import {
+    colors,
+    constants as sharedConstants,
+    HeaderSizes,
+    MarkdownSection,
+    NestedSidebarMenu,
+    SectionHeader,
+    Styles,
+    utils as sharedUtils,
+} from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import RaisedButton from 'material-ui/RaisedButton';
@@ -6,12 +15,8 @@ import * as React from 'react';
 import DocumentTitle = require('react-document-title');
 import { scroller } from 'react-scroll';
 import { TopBar } from 'ts/components/top_bar/top_bar';
-import { MarkdownSection } from 'ts/pages/shared/markdown_section';
-import { NestedSidebarMenu } from 'ts/pages/shared/nested_sidebar_menu';
-import { SectionHeader } from 'ts/pages/shared/section_header';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Article, ArticlesBySection, WebsitePaths } from 'ts/types';
-import { colors } from 'ts/utils/colors';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
@@ -136,11 +141,11 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                                 }}
                             >
                                 <div
-                                    id={configs.SCROLL_CONTAINER_ID}
+                                    id={sharedConstants.SCROLL_CONTAINER_ID}
                                     style={{ ...mainContainersStyle, overflow: 'auto' }}
                                     className="absolute"
                                 >
-                                    <div id={configs.SCROLL_TOP_ID} />
+                                    <div id={sharedConstants.SCROLL_TOP_ID} />
                                     <div id="wiki" style={{ paddingRight: 2 }}>
                                         {this._renderWikiArticles()}
                                     </div>
@@ -215,7 +220,7 @@ export class Wiki extends React.Component<WikiProps, WikiState> {
                 async () => {
                     await utils.onPageLoadAsync();
                     const hash = this.props.location.hash.slice(1);
-                    utils.scrollToHash(hash, configs.SCROLL_CONTAINER_ID);
+                    sharedUtils.scrollToHash(hash, sharedConstants.SCROLL_CONTAINER_ID);
                 },
             );
         }
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index c1b23ce1e..3b0866d70 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -447,10 +447,6 @@ export interface S3FileObject {
     };
 }
 
-export interface MenuSubsectionsBySection {
-    [section: string]: string[];
-}
-
 export enum ProviderType {
     Injected = 'INJECTED',
     Ledger = 'LEDGER',
diff --git a/packages/website/ts/utils/configs.ts b/packages/website/ts/utils/configs.ts
index 388fc8530..7e9ba69de 100644
--- a/packages/website/ts/utils/configs.ts
+++ b/packages/website/ts/utils/configs.ts
@@ -94,8 +94,6 @@ export const configs = {
         [3]: [`https://ropsten.infura.io/${INFURA_API_KEY}`],
         [4]: [`https://rinkeby.infura.io/${INFURA_API_KEY}`],
     } as PublicNodeUrlsByNetworkId,
-    SCROLL_CONTAINER_ID: 'documentation',
-    SCROLL_TOP_ID: 'pageScrollTop',
     SHOULD_DEPRECATE_OLD_WETH_TOKEN: true,
     SYMBOLS_OF_MINTABLE_KOVAN_TOKENS: ['MKR', 'MLN', 'GNT', 'DGD', 'REP'],
     SYMBOLS_OF_MINTABLE_RINKEBY_ROPSTEN_TOKENS: [
diff --git a/packages/website/ts/utils/mui_theme.ts b/packages/website/ts/utils/mui_theme.ts
index 32891baca..41bc2844b 100644
--- a/packages/website/ts/utils/mui_theme.ts
+++ b/packages/website/ts/utils/mui_theme.ts
@@ -1,5 +1,5 @@
+import { colors } from '@0xproject/react-shared';
 import { getMuiTheme } from 'material-ui/styles';
-import { colors } from 'ts/utils/colors';
 
 export const muiTheme = getMuiTheme({
     appBar: {
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index a1e11c85a..872b44eeb 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -4,7 +4,6 @@ import deepEqual = require('deep-equal');
 import isMobile = require('is-mobile');
 import * as _ from 'lodash';
 import * as moment from 'moment';
-import { scroller } from 'react-scroll';
 import {
     EtherscanLinkSuffixes,
     Networks,
@@ -199,10 +198,6 @@ export const utils = {
                 return 'production';
         }
     },
-    getIdFromName(name: string) {
-        const id = name.replace(/ /g, '-');
-        return id;
-    },
     getAddressBeginAndEnd(address: string): string {
         const truncatedAddress = `${address.substring(0, 6)}...${address.substr(-4)}`; // 0x3d5a...b287
         return truncatedAddress;
@@ -288,24 +283,6 @@ export const utils = {
         );
         return isTestNetwork;
     },
-    getCurrentBaseUrl() {
-        const port = window.location.port;
-        const hasPort = !_.isUndefined(port);
-        const baseUrl = `https://${window.location.hostname}${hasPort ? `:${port}` : ''}`;
-        return baseUrl;
-    },
-    scrollToHash(hash: string, containerId: string): void {
-        let finalHash = hash;
-        if (_.isEmpty(hash)) {
-            finalHash = configs.SCROLL_TOP_ID; // scroll to the top
-        }
-
-        scroller.scrollTo(finalHash, {
-            duration: 0,
-            offset: 0,
-            containerId,
-        });
-    },
     async onPageLoadAsync(): Promise<void> {
         if (document.readyState === 'complete') {
             return; // Already loaded