Merge branch 'development' into v2-prototype

25 files changed, 973 insertions, 333 deletions

diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/legacy_portal/legacy_portal.tsx
index b79f5e288..c45b20365 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/legacy_portal/legacy_portal.tsx
@@ -14,7 +14,7 @@ import { WrappedEthSectionNoticeDialog } from 'ts/components/dialogs/wrapped_eth
 import { EthWrappers } from 'ts/components/eth_wrappers';
 import { FillOrder } from 'ts/components/fill_order';
 import { Footer } from 'ts/components/footer';
-import { PortalMenu } from 'ts/components/portal_menu';
+import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu';
 import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
 import { TokenBalances } from 'ts/components/token_balances';
 import { TopBar } from 'ts/components/top_bar/top_bar';
@@ -43,9 +43,7 @@ import { utils } from 'ts/utils/utils';
 
 const THROTTLE_TIMEOUT = 100;
 
-export interface PortalPassedProps {}
-
-export interface PortalAllProps {
+export interface LegacyPortalProps {
     blockchainErr: BlockchainErrs;
     blockchainIsLoaded: boolean;
     dispatcher: Dispatcher;
@@ -67,7 +65,7 @@ export interface PortalAllProps {
     translate: Translate;
 }
 
-interface PortalAllState {
+interface LegacyPortalState {
     prevNetworkId: number;
     prevNodeVersion: string;
     prevUserAddress: string;
@@ -77,7 +75,7 @@ interface PortalAllState {
     isLedgerDialogOpen: boolean;
 }
 
-export class Portal extends React.Component<PortalAllProps, PortalAllState> {
+export class LegacyPortal extends React.Component<LegacyPortalProps, LegacyPortalState> {
     private _blockchain: Blockchain;
     private _sharedOrderIfExists: Order;
     private _throttledScreenWidthUpdate: () => void;
@@ -86,13 +84,13 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
         const hasAlreadyDismissedWethNotice = !_.isUndefined(didDismissWethNotice) && !_.isEmpty(didDismissWethNotice);
         return hasAlreadyDismissedWethNotice;
     }
-    constructor(props: PortalAllProps) {
+    constructor(props: LegacyPortalProps) {
         super(props);
         this._sharedOrderIfExists = this._getSharedOrderIfExists();
         this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
 
         const isViewingBalances = _.includes(props.location.pathname, `${WebsitePaths.Portal}/balances`);
-        const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
+        const hasAlreadyDismissedWethNotice = LegacyPortal.hasAlreadyDismissedWethNotice();
 
         const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER);
         const hasAcceptedDisclaimer =
@@ -123,7 +121,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
         // become disconnected from their backing Ethereum node, changes user accounts, etc...)
         this.props.dispatcher.resetState();
     }
-    public componentWillReceiveProps(nextProps: PortalAllProps) {
+    public componentWillReceiveProps(nextProps: LegacyPortalProps) {
         if (nextProps.networkId !== this.state.prevNetworkId) {
             // tslint:disable-next-line:no-floating-promises
             this._blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId);
@@ -145,7 +143,7 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
         }
         if (nextProps.location.pathname !== this.state.prevPathname) {
             const isViewingBalances = _.includes(nextProps.location.pathname, `${WebsitePaths.Portal}/balances`);
-            const hasAlreadyDismissedWethNotice = Portal.hasAlreadyDismissedWethNotice();
+            const hasAlreadyDismissedWethNotice = LegacyPortal.hasAlreadyDismissedWethNotice();
             this.setState({
                 prevPathname: nextProps.location.pathname,
                 isWethNoticeDialogOpen: !hasAlreadyDismissedWethNotice && isViewingBalances,
@@ -156,7 +154,6 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
         const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind(
             this.props.dispatcher,
         );
-        const isDevelopment = configs.ENVIRONMENT === Environments.DEVELOPMENT;
         const portalStyle: React.CSSProperties = {
             minHeight: '100vh',
             display: 'flex',
@@ -200,24 +197,12 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
                         ) : (
                             <div className="mx-auto flex">
                                 <div className="col col-2 pr2 pt1 sm-hide xs-hide" style={portalMenuContainerStyle}>
-                                    <PortalMenu menuItemStyle={{ color: colors.white }} />
+                                    <LegacyPortalMenu menuItemStyle={{ color: colors.white }} />
                                 </div>
                                 <div className="col col-12 lg-col-10 md-col-10 sm-col sm-col-12">
                                     <div className="py2" style={{ backgroundColor: colors.grey50 }}>
                                         {this.props.blockchainIsLoaded ? (
                                             <Switch>
-                                                {isDevelopment && (
-                                                    <Route
-                                                        path={`${WebsitePaths.Portal}/wallet`}
-                                                        render={this._renderWallet.bind(this)}
-                                                    />
-                                                )}
-                                                {isDevelopment && (
-                                                    <Route
-                                                        path={`${WebsitePaths.Portal}/relayers`}
-                                                        render={this._renderRelayers.bind(this)}
-                                                    />
-                                                )}
                                                 <Route
                                                     path={`${WebsitePaths.Portal}/weth`}
                                                     render={this._renderEthWrapper.bind(this)}
@@ -296,40 +281,6 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
             isLedgerDialogOpen: !this.state.isLedgerDialogOpen,
         });
     }
-    private _renderWallet() {
-        const allTokens = _.values(this.props.tokenByAddress);
-        const trackedTokens = _.filter(allTokens, t => t.isTracked);
-        return (
-            <div className="flex flex-center">
-                <div className="mx-auto">
-                    <Wallet
-                        userAddress={this.props.userAddress}
-                        networkId={this.props.networkId}
-                        blockchain={this._blockchain}
-                        blockchainIsLoaded={this.props.blockchainIsLoaded}
-                        blockchainErr={this.props.blockchainErr}
-                        dispatcher={this.props.dispatcher}
-                        tokenByAddress={this.props.tokenByAddress}
-                        trackedTokens={trackedTokens}
-                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                        injectedProviderName={this.props.injectedProviderName}
-                        providerType={this.props.providerType}
-                        onToggleLedgerDialog={this.onToggleLedgerDialog.bind(this)}
-                    />
-                </div>
-            </div>
-        );
-    }
-    private _renderRelayers() {
-        return (
-            <div className="flex flex-center">
-                <div className="mx-auto" style={{ width: 800 }}>
-                    <RelayerIndex networkId={this.props.networkId} />
-                </div>
-            </div>
-        );
-    }
     private _renderEthWrapper() {
         return (
             <EthWrappers
diff --git a/packages/website/ts/components/portal_menu.tsx b/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx
index 2b4d7eea2..94113f066 100644
--- a/packages/website/ts/components/portal_menu.tsx
+++ b/packages/website/ts/components/legacy_portal/legacy_portal_menu.tsx
@@ -4,15 +4,15 @@ import { MenuItem } from 'ts/components/ui/menu_item';
 import { Environments, WebsitePaths } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 
-export interface PortalMenuProps {
+export interface LegacyPortalMenuProps {
     menuItemStyle: React.CSSProperties;
     onClick?: () => void;
 }
 
-interface PortalMenuState {}
+interface LegacyPortalMenuState {}
 
-export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState> {
-    public static defaultProps: Partial<PortalMenuProps> = {
+export class LegacyPortalMenu extends React.Component<LegacyPortalMenuProps, LegacyPortalMenuState> {
+    public static defaultProps: Partial<LegacyPortalMenuProps> = {
         onClick: _.noop,
     };
     public render() {
@@ -58,26 +58,6 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState
                 >
                     {this._renderMenuItemWithIcon('Wrap ETH', 'zmdi-circle-o')}
                 </MenuItem>
-                {configs.ENVIRONMENT === Environments.DEVELOPMENT && (
-                    <div>
-                        <MenuItem
-                            style={this.props.menuItemStyle}
-                            className="py2"
-                            to={`${WebsitePaths.Portal}/wallet`}
-                            onClick={this.props.onClick.bind(this)}
-                        >
-                            {this._renderMenuItemWithIcon('Wallet', 'zmdi-balance-wallet')}
-                        </MenuItem>
-                        <MenuItem
-                            style={this.props.menuItemStyle}
-                            className="py2"
-                            to={`${WebsitePaths.Portal}/relayers`}
-                            onClick={this.props.onClick.bind(this)}
-                        >
-                            {this._renderMenuItemWithIcon('Relayers', 'zmdi-input-antenna')}
-                        </MenuItem>
-                    </div>
-                )}
             </div>
         );
     }
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
new file mode 100644
index 000000000..4cbc65ce4
--- /dev/null
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -0,0 +1,297 @@
+import { colors, Styles } from '@0xproject/react-shared';
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as DocumentTitle from 'react-document-title';
+
+import { Blockchain } from 'ts/blockchain';
+import { BlockchainErrDialog } from 'ts/components/dialogs/blockchain_err_dialog';
+import { LedgerConfigDialog } from 'ts/components/dialogs/ledger_config_dialog';
+import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_dialog';
+import { AssetPicker } from 'ts/components/generate_order/asset_picker';
+import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
+import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
+import { FlashMessage } from 'ts/components/ui/flash_message';
+import { Wallet } from 'ts/components/wallet/wallet';
+import { localStorage } from 'ts/local_storage/local_storage';
+import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, TokenByAddress, TokenVisibility } from 'ts/types';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+import { utils } from 'ts/utils/utils';
+
+export interface PortalProps {
+    blockchainErr: BlockchainErrs;
+    blockchainIsLoaded: boolean;
+    dispatcher: Dispatcher;
+    hashData: HashData;
+    injectedProviderName: string;
+    networkId: number;
+    nodeVersion: string;
+    orderFillAmount: BigNumber;
+    providerType: ProviderType;
+    screenWidth: ScreenWidths;
+    tokenByAddress: TokenByAddress;
+    userEtherBalanceInWei: BigNumber;
+    userAddress: string;
+    shouldBlockchainErrDialogBeOpen: boolean;
+    userSuppliedOrderCache: Order;
+    location: Location;
+    flashMessage?: string | React.ReactNode;
+    lastForceTokenStateRefetch: number;
+    translate: Translate;
+}
+
+interface PortalState {
+    prevNetworkId: number;
+    prevNodeVersion: string;
+    prevUserAddress: string;
+    prevPathname: string;
+    isDisclaimerDialogOpen: boolean;
+    isLedgerDialogOpen: boolean;
+    tokenManagementState: TokenManagementState;
+}
+
+enum TokenManagementState {
+    Add = 'Add',
+    Remove = 'Remove',
+    None = 'None',
+}
+
+const THROTTLE_TIMEOUT = 100;
+const TOP_BAR_HEIGHT = TopBar.heightForDisplayType(TopBarDisplayType.Expanded);
+
+const styles: Styles = {
+    root: {
+        width: '100%',
+        height: '100%',
+        backgroundColor: colors.lightestGrey,
+    },
+    body: {
+        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+    },
+    scrollContainer: {
+        height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
+        WebkitOverflowScrolling: 'touch',
+        overflow: 'auto',
+    },
+    title: {
+        fontWeight: 'bold',
+        fontSize: 20,
+    },
+};
+
+export class Portal extends React.Component<PortalProps, PortalState> {
+    private _blockchain: Blockchain;
+    private _throttledScreenWidthUpdate: () => void;
+    constructor(props: PortalProps) {
+        super(props);
+        this._throttledScreenWidthUpdate = _.throttle(this._updateScreenWidth.bind(this), THROTTLE_TIMEOUT);
+        const didAcceptPortalDisclaimer = localStorage.getItemIfExists(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER);
+        const hasAcceptedDisclaimer =
+            !_.isUndefined(didAcceptPortalDisclaimer) && !_.isEmpty(didAcceptPortalDisclaimer);
+        this.state = {
+            prevNetworkId: this.props.networkId,
+            prevNodeVersion: this.props.nodeVersion,
+            prevUserAddress: this.props.userAddress,
+            prevPathname: this.props.location.pathname,
+            isDisclaimerDialogOpen: !hasAcceptedDisclaimer,
+            tokenManagementState: TokenManagementState.None,
+            isLedgerDialogOpen: false,
+        };
+    }
+    public componentDidMount() {
+        window.addEventListener('resize', this._throttledScreenWidthUpdate);
+        window.scrollTo(0, 0);
+    }
+    public componentWillMount() {
+        this._blockchain = new Blockchain(this.props.dispatcher);
+    }
+    public componentWillUnmount() {
+        this._blockchain.destroy();
+        window.removeEventListener('resize', this._throttledScreenWidthUpdate);
+        // We re-set the entire redux state when the portal is unmounted so that when it is re-rendered
+        // the initialization process always occurs from the same base state. This helps avoid
+        // initialization inconsistencies (i.e While the portal was unrendered, the user might have
+        // become disconnected from their backing Ethereum node, changed user accounts, etc...)
+        this.props.dispatcher.resetState();
+    }
+    public componentWillReceiveProps(nextProps: PortalProps) {
+        if (nextProps.networkId !== this.state.prevNetworkId) {
+            // tslint:disable-next-line:no-floating-promises
+            this._blockchain.networkIdUpdatedFireAndForgetAsync(nextProps.networkId);
+            this.setState({
+                prevNetworkId: nextProps.networkId,
+            });
+        }
+        if (nextProps.userAddress !== this.state.prevUserAddress) {
+            const newUserAddress = _.isEmpty(nextProps.userAddress) ? undefined : nextProps.userAddress;
+            // tslint:disable-next-line:no-floating-promises
+            this._blockchain.userAddressUpdatedFireAndForgetAsync(newUserAddress);
+            this.setState({
+                prevUserAddress: nextProps.userAddress,
+            });
+        }
+        if (nextProps.nodeVersion !== this.state.prevNodeVersion) {
+            // tslint:disable-next-line:no-floating-promises
+            this._blockchain.nodeVersionUpdatedFireAndForgetAsync(nextProps.nodeVersion);
+        }
+        if (nextProps.location.pathname !== this.state.prevPathname) {
+            this.setState({
+                prevPathname: nextProps.location.pathname,
+            });
+        }
+    }
+    public render() {
+        const updateShouldBlockchainErrDialogBeOpen = this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen.bind(
+            this.props.dispatcher,
+        );
+        const allTokens = _.values(this.props.tokenByAddress);
+        const trackedTokens = _.filter(allTokens, t => t.isTracked);
+        const isAssetPickerDialogOpen = this.state.tokenManagementState !== TokenManagementState.None;
+        const tokenVisibility =
+            this.state.tokenManagementState === TokenManagementState.Add
+                ? TokenVisibility.UNTRACKED
+                : TokenVisibility.TRACKED;
+        return (
+            <div style={styles.root}>
+                <DocumentTitle title="0x Portal DApp" />
+                <TopBar
+                    userAddress={this.props.userAddress}
+                    networkId={this.props.networkId}
+                    injectedProviderName={this.props.injectedProviderName}
+                    onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
+                    dispatcher={this.props.dispatcher}
+                    providerType={this.props.providerType}
+                    blockchainIsLoaded={this.props.blockchainIsLoaded}
+                    location={this.props.location}
+                    blockchain={this._blockchain}
+                    translate={this.props.translate}
+                    displayType={TopBarDisplayType.Expanded}
+                    style={{ backgroundColor: colors.lightestGrey }}
+                />
+                <div id="portal" style={styles.body}>
+                    <div className="sm-flex flex-center">
+                        <div className="flex-last px3">
+                            <div className="py3" style={styles.title}>
+                                Your Account
+                            </div>
+                            <Wallet
+                                userAddress={this.props.userAddress}
+                                networkId={this.props.networkId}
+                                blockchain={this._blockchain}
+                                blockchainIsLoaded={this.props.blockchainIsLoaded}
+                                blockchainErr={this.props.blockchainErr}
+                                dispatcher={this.props.dispatcher}
+                                tokenByAddress={this.props.tokenByAddress}
+                                trackedTokens={trackedTokens}
+                                userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                                lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                                injectedProviderName={this.props.injectedProviderName}
+                                providerType={this.props.providerType}
+                                onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
+                                onAddToken={this._onAddToken.bind(this)}
+                                onRemoveToken={this._onRemoveToken.bind(this)}
+                            />
+                        </div>
+                        <div className="flex-auto px3" style={styles.scrollContainer}>
+                            <div className="py3" style={styles.title}>
+                                Explore 0x Ecosystem
+                            </div>
+                            <RelayerIndex networkId={this.props.networkId} />
+                        </div>
+                    </div>
+                    <BlockchainErrDialog
+                        blockchain={this._blockchain}
+                        blockchainErr={this.props.blockchainErr}
+                        isOpen={this.props.shouldBlockchainErrDialogBeOpen}
+                        userAddress={this.props.userAddress}
+                        toggleDialogFn={updateShouldBlockchainErrDialogBeOpen}
+                        networkId={this.props.networkId}
+                    />
+                    <PortalDisclaimerDialog
+                        isOpen={this.state.isDisclaimerDialogOpen}
+                        onToggleDialog={this._onPortalDisclaimerAccepted.bind(this)}
+                    />
+                    <FlashMessage dispatcher={this.props.dispatcher} flashMessage={this.props.flashMessage} />
+                    {this.props.blockchainIsLoaded && (
+                        <LedgerConfigDialog
+                            providerType={this.props.providerType}
+                            networkId={this.props.networkId}
+                            blockchain={this._blockchain}
+                            dispatcher={this.props.dispatcher}
+                            toggleDialogFn={this._onToggleLedgerDialog.bind(this)}
+                            isOpen={this.state.isLedgerDialogOpen}
+                        />
+                    )}
+                    <AssetPicker
+                        userAddress={this.props.userAddress}
+                        networkId={this.props.networkId}
+                        blockchain={this._blockchain}
+                        dispatcher={this.props.dispatcher}
+                        isOpen={isAssetPickerDialogOpen}
+                        currentTokenAddress={''}
+                        onTokenChosen={this._onTokenChosen.bind(this)}
+                        tokenByAddress={this.props.tokenByAddress}
+                        tokenVisibility={tokenVisibility}
+                    />
+                </div>
+            </div>
+        );
+    }
+    private _onTokenChosen(tokenAddress: string) {
+        if (_.isEmpty(tokenAddress)) {
+            this.setState({
+                tokenManagementState: TokenManagementState.None,
+            });
+            return;
+        }
+        const token = this.props.tokenByAddress[tokenAddress];
+        const isDefaultTrackedToken = _.includes(configs.DEFAULT_TRACKED_TOKEN_SYMBOLS, token.symbol);
+        if (this.state.tokenManagementState === TokenManagementState.Remove && !isDefaultTrackedToken) {
+            if (token.isRegistered) {
+                // Remove the token from tracked tokens
+                const newToken = {
+                    ...token,
+                    isTracked: false,
+                };
+                this.props.dispatcher.updateTokenByAddress([newToken]);
+            } else {
+                this.props.dispatcher.removeTokenToTokenByAddress(token);
+            }
+            trackedTokenStorage.removeTrackedToken(this.props.userAddress, this.props.networkId, tokenAddress);
+        } else if (isDefaultTrackedToken) {
+            this.props.dispatcher.showFlashMessage(`Cannot remove ${token.name} because it's a default token`);
+        }
+        this.setState({
+            tokenManagementState: TokenManagementState.None,
+        });
+    }
+    private _onToggleLedgerDialog() {
+        this.setState({
+            isLedgerDialogOpen: !this.state.isLedgerDialogOpen,
+        });
+    }
+    private _onAddToken() {
+        this.setState({
+            tokenManagementState: TokenManagementState.Add,
+        });
+    }
+    private _onRemoveToken() {
+        this.setState({
+            tokenManagementState: TokenManagementState.Remove,
+        });
+    }
+    private _onPortalDisclaimerAccepted() {
+        localStorage.setItem(constants.LOCAL_STORAGE_KEY_ACCEPT_DISCLAIMER, 'set');
+        this.setState({
+            isDisclaimerDialogOpen: false,
+        });
+    }
+    private _updateScreenWidth() {
+        const newScreenWidth = utils.getScreenWidth();
+        this.props.dispatcher.updateScreenWidth(newScreenWidth);
+    }
+}
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index 0c4b2841c..d88a59d15 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -12,38 +12,6 @@ export interface RelayerGridTileProps {
     networkId: number;
 }
 
-// TODO: Get top tokens and headerurl from remote
-const headerUrl = '/images/og_image.png';
-const topTokens = [
-    {
-        address: '0x1dad4783cf3fe3085c1426157ab175a6119a04ba',
-        decimals: 18,
-        iconUrl: '/images/token_icons/makerdao.png',
-        isRegistered: true,
-        isTracked: true,
-        name: 'Maker DAO',
-        symbol: 'MKR',
-    },
-    {
-        address: '0x323b5d4c32345ced77393b3530b1eed0f346429d',
-        decimals: 18,
-        iconUrl: '/images/token_icons/melon.png',
-        isRegistered: true,
-        isTracked: true,
-        name: 'Melon Token',
-        symbol: 'MLN',
-    },
-    {
-        address: '0xb18845c260f680d5b9d84649638813e342e4f8c9',
-        decimals: 18,
-        iconUrl: '/images/token_icons/augur.png',
-        isRegistered: true,
-        isTracked: true,
-        name: 'Augur Reputation Token',
-        symbol: 'REP',
-    },
-];
-
 const styles: Styles = {
     root: {
         backgroundColor: colors.white,
@@ -68,6 +36,9 @@ const styles: Styles = {
         borderBottomLeftRadius: 4,
         borderTopRightRadius: 4,
         borderTopLeftRadius: 4,
+        borderWidth: 1,
+        borderStyle: 'solid',
+        borderColor: colors.walletBorder,
     },
     body: {
         paddingLeft: 6,
@@ -91,11 +62,20 @@ const styles: Styles = {
     },
 };
 
+const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png';
+
 export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
+    const link = props.relayerInfo.appUrl || props.relayerInfo.url;
     return (
         <GridTile style={styles.root}>
             <div style={styles.innerDiv}>
-                <img src={headerUrl} style={styles.header} />
+                <a href={link} target="_blank" style={{ textDecoration: 'none' }}>
+                    <ImgWithFallback
+                        src={props.relayerInfo.headerImgUrl}
+                        fallbackSrc={FALLBACK_IMG_SRC}
+                        style={styles.header}
+                    />
+                </a>
                 <div style={styles.body}>
                     <div className="py1" style={styles.relayerNameLabel}>
                         {props.relayerInfo.name}
@@ -104,7 +84,7 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
                     <div className="py1" style={styles.subLabel}>
                         Daily Trade Volume
                     </div>
-                    <TopTokens tokens={topTokens} networkId={props.networkId} />
+                    <TopTokens tokens={props.relayerInfo.topTokens} networkId={props.networkId} />
                     <div className="py1" style={styles.subLabel}>
                         Top tokens
                     </div>
@@ -113,3 +93,32 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
         </GridTile>
     );
 };
+
+interface ImgWithFallbackProps {
+    src?: string;
+    fallbackSrc: string;
+    style: React.CSSProperties;
+}
+interface ImgWithFallbackState {
+    imageLoadFailed: boolean;
+}
+class ImgWithFallback extends React.Component<ImgWithFallbackProps, ImgWithFallbackState> {
+    constructor(props: ImgWithFallbackProps) {
+        super(props);
+        this.state = {
+            imageLoadFailed: false,
+        };
+    }
+    public render() {
+        if (this.state.imageLoadFailed || _.isUndefined(this.props.src)) {
+            return <img src={this.props.fallbackSrc} style={this.props.style} />;
+        } else {
+            return <img src={this.props.src} onError={this._onError.bind(this)} style={this.props.style} />;
+        }
+    }
+    private _onError() {
+        this.setState({
+            imageLoadFailed: true,
+        });
+    }
+}
diff --git a/packages/website/ts/components/relayer_index/relayer_index.tsx b/packages/website/ts/components/relayer_index/relayer_index.tsx
index 50760c32d..dffd0f83f 100644
--- a/packages/website/ts/components/relayer_index/relayer_index.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_index.tsx
@@ -1,5 +1,7 @@
 import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
+import CircularProgress from 'material-ui/CircularProgress';
+import FlatButton from 'material-ui/FlatButton';
 import { GridList } from 'material-ui/GridList';
 import * as React from 'react';
 
@@ -32,9 +34,9 @@ const styles: Styles = {
     },
 };
 
-const CELL_HEIGHT = 260;
+const CELL_HEIGHT = 290;
 const NUMBER_OF_COLUMNS = 4;
-const GRID_PADDING = 16;
+const GRID_PADDING = 20;
 
 export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerIndexState> {
     private _isUnmounted: boolean;
@@ -55,7 +57,24 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
     }
     public render() {
         const readyToRender = _.isUndefined(this.state.error) && !_.isUndefined(this.state.relayerInfos);
-        if (readyToRender) {
+        if (!readyToRender) {
+            return (
+                <div className="col col-12" style={{ ...styles.root, height: '100%' }}>
+                    <div
+                        className="relative sm-px2 sm-pt2 sm-m1"
+                        style={{ height: 122, top: '33%', transform: 'translateY(-50%)' }}
+                    >
+                        <div className="center pb2">
+                            {_.isUndefined(this.state.error) ? (
+                                <CircularProgress size={40} thickness={5} />
+                            ) : (
+                                <Retry onRetry={this._fetchRelayerInfosAsync.bind(this)} />
+                            )}
+                        </div>
+                    </div>
+                </div>
+            );
+        } else {
             return (
                 <div style={styles.root}>
                     <GridList
@@ -64,23 +83,22 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
                         padding={GRID_PADDING}
                         style={styles.gridList}
                     >
-                        {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo) => (
-                            <RelayerGridTile
-                                key={relayerInfo.id}
-                                relayerInfo={relayerInfo}
-                                networkId={this.props.networkId}
-                            />
+                        {this.state.relayerInfos.map((relayerInfo: WebsiteBackendRelayerInfo, index) => (
+                            <RelayerGridTile key={index} relayerInfo={relayerInfo} networkId={this.props.networkId} />
                         ))}
                     </GridList>
                 </div>
             );
-        } else {
-            // TODO: loading and error states with a scrolling container
-            return null;
         }
     }
     private async _fetchRelayerInfosAsync(): Promise<void> {
         try {
+            if (!this._isUnmounted) {
+                this.setState({
+                    relayerInfos: undefined,
+                    error: undefined,
+                });
+            }
             const relayerInfos = await backendClient.getRelayerInfosAsync();
             if (!this._isUnmounted) {
                 this.setState({
@@ -96,3 +114,31 @@ export class RelayerIndex extends React.Component<RelayerIndexProps, RelayerInde
         }
     }
 }
+
+interface RetryProps {
+    onRetry: () => void;
+}
+const Retry = (props: RetryProps) => (
+    <div className="clearfix center" style={{ color: colors.black }}>
+        <div className="mx-auto inline-block align-middle" style={{ lineHeight: '44px', textAlign: 'center' }}>
+            <div className="h2" style={{ fontFamily: 'Roboto Mono' }}>
+                Something went wrong.
+            </div>
+            <div className="py3">
+                <FlatButton
+                    label={'reload'}
+                    backgroundColor={colors.black}
+                    labelStyle={{
+                        fontSize: 18,
+                        fontFamily: 'Roboto Mono',
+                        fontWeight: 'lighter',
+                        color: colors.white,
+                        textTransform: 'lowercase',
+                    }}
+                    style={{ width: 280, height: 62, borderRadius: 5 }}
+                    onClick={props.onRetry}
+                />
+            </div>
+        </div>
+    </div>
+);
diff --git a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
index 233590b78..db4d3a211 100644
--- a/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_top_tokens.tsx
@@ -3,10 +3,10 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { TokenIcon } from 'ts/components/ui/token_icon';
-import { Token } from 'ts/types';
+import { WebsiteBackendTokenInfo } from 'ts/types';
 
 export interface TopTokensProps {
-    tokens: Token[];
+    tokens: WebsiteBackendTokenInfo[];
     networkId: number;
 }
 
@@ -23,17 +23,17 @@ const styles: Styles = {
 export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTokensProps) => {
     return (
         <div className="flex">
-            {_.map(props.tokens, (token: Token, index: number) => {
+            {_.map(props.tokens, (tokenInfo: WebsiteBackendTokenInfo, index: number) => {
                 const firstItemStyle = { ...styles.tokenLabel, ...styles.followingTokenLabel };
                 const style = index !== 0 ? firstItemStyle : styles.tokenLabel;
                 return (
                     <a
-                        key={token.address}
-                        href={tokenLinkFromToken(token, props.networkId)}
+                        key={tokenInfo.address}
+                        href={tokenLinkFromToken(tokenInfo, props.networkId)}
                         target="_blank"
                         style={style}
                     >
-                        {token.symbol}
+                        {tokenInfo.symbol}
                     </a>
                 );
             })}
@@ -41,6 +41,6 @@ export const TopTokens: React.StatelessComponent<TopTokensProps> = (props: TopTo
     );
 };
 
-function tokenLinkFromToken(token: Token, networkId: number) {
-    return sharedUtils.getEtherScanLinkIfExists(token.address, networkId, EtherscanLinkSuffixes.Address);
+function tokenLinkFromToken(tokenInfo: WebsiteBackendTokenInfo, networkId: number) {
+    return sharedUtils.getEtherScanLinkIfExists(tokenInfo.address, networkId, EtherscanLinkSuffixes.Address);
 }
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 79e7c3e2d..dc6ade841 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -1,4 +1,4 @@
-import { colors } from '@0xproject/react-shared';
+import { colors, Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import RaisedButton from 'material-ui/RaisedButton';
 import * as React from 'react';
@@ -11,9 +11,9 @@ import { ProviderType } from 'ts/types';
 import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
-const IDENTICON_DIAMETER = 32;
+const ROOT_HEIGHT = 24;
 
-interface ProviderDisplayProps {
+export interface ProviderDisplayProps {
     dispatcher: Dispatcher;
     userAddress: string;
     networkId: number;
@@ -25,6 +25,15 @@ interface ProviderDisplayProps {
 
 interface ProviderDisplayState {}
 
+const styles: Styles = {
+    root: {
+        height: ROOT_HEIGHT,
+        backgroundColor: colors.white,
+        borderRadius: ROOT_HEIGHT,
+        boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
+    },
+};
+
 export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> {
     public render() {
         const isAddressAvailable = !_.isEmpty(this.props.userAddress);
@@ -42,21 +51,20 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
             : 'Connect a wallet';
         const providerTitle =
             this.props.providerType === ProviderType.Injected ? injectedProviderName : 'Ledger Nano S';
+        const isProviderMetamask = providerTitle === constants.PROVIDER_NAME_METAMASK;
         const hoverActiveNode = (
-            <div className="flex right lg-pr0 md-pr2 sm-pr2" style={{ paddingTop: 16 }}>
+            <div className="flex right lg-pr0 md-pr2 sm-pr2 p1" style={styles.root}>
                 <div>
-                    <Identicon address={this.props.userAddress} diameter={IDENTICON_DIAMETER} />
-                </div>
-                <div style={{ marginLeft: 12, paddingTop: 1 }}>
-                    <div style={{ fontSize: 12, color: colors.amber800 }}>{providerTitle}</div>
-                    <div style={{ fontSize: 14 }}>{displayAddress}</div>
+                    <Identicon address={this.props.userAddress} diameter={ROOT_HEIGHT} />
                 </div>
-                <div
-                    style={{ borderLeft: `1px solid ${colors.grey300}`, marginLeft: 17, paddingTop: 1 }}
-                    className="px2"
-                >
-                    <i style={{ fontSize: 30, color: colors.grey300 }} className="zmdi zmdi zmdi-chevron-down" />
+                <div style={{ marginLeft: 12, paddingTop: 3 }}>
+                    <div style={{ fontSize: 16, color: colors.darkGrey }}>{displayAddress}</div>
                 </div>
+                {isProviderMetamask && (
+                    <div style={{ marginLeft: 16 }}>
+                        <img src="/images/metamask_icon.png" style={{ width: ROOT_HEIGHT, height: ROOT_HEIGHT }} />
+                    </div>
+                )}
             </div>
         );
         const hasInjectedProvider =
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 13351dcdc..5a1b50310 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -8,7 +8,7 @@ import * as React from 'react';
 import { Link } from 'react-router-dom';
 import ReactTooltip = require('react-tooltip');
 import { Blockchain } from 'ts/blockchain';
-import { PortalMenu } from 'ts/components/portal_menu';
+import { LegacyPortalMenu } from 'ts/components/legacy_portal/legacy_portal_menu';
 import { SidebarHeader } from 'ts/components/sidebar_header';
 import { ProviderDisplay } from 'ts/components/top_bar/provider_display';
 import { TopBarMenuItem } from 'ts/components/top_bar/top_bar_menu_item';
@@ -19,7 +19,12 @@ import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/ty
 import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
-interface TopBarProps {
+export enum TopBarDisplayType {
+    Default,
+    Expanded,
+}
+
+export interface TopBarProps {
     userAddress?: string;
     networkId?: number;
     injectedProviderName?: string;
@@ -34,7 +39,7 @@ interface TopBarProps {
     availableDocVersions?: string[];
     menu?: DocsMenu;
     menuSubsectionsBySection?: MenuSubsectionsBySection;
-    shouldFullWidth?: boolean;
+    displayType?: TopBarDisplayType;
     docsInfo?: DocsInfo;
     style?: React.CSSProperties;
     isNightVersion?: boolean;
@@ -47,17 +52,8 @@ interface TopBarState {
 }
 
 const styles: Styles = {
-    address: {
-        marginRight: 12,
-        overflow: 'hidden',
-        paddingTop: 4,
-        textOverflow: 'ellipsis',
-        whiteSpace: 'nowrap',
-        width: 70,
-    },
     topBar: {
-        backgroundcolor: colors.white,
-        height: 59,
+        backgroundColor: colors.white,
         width: '100%',
         position: 'relative',
         top: 0,
@@ -78,12 +74,19 @@ const styles: Styles = {
     },
 };
 
+const DEFAULT_HEIGHT = 59;
+const EXPANDED_HEIGHT = 75;
+
 export class TopBar extends React.Component<TopBarProps, TopBarState> {
     public static defaultProps: Partial<TopBarProps> = {
-        shouldFullWidth: false,
+        displayType: TopBarDisplayType.Default,
         style: {},
         isNightVersion: false,
     };
+    public static heightForDisplayType(displayType: TopBarDisplayType) {
+        const result = displayType === TopBarDisplayType.Expanded ? EXPANDED_HEIGHT : DEFAULT_HEIGHT;
+        return result + 1;
+    }
     constructor(props: TopBarProps) {
         super(props);
         this.state = {
@@ -92,8 +95,9 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
     }
     public render() {
         const isNightVersion = this.props.isNightVersion;
-        const isFullWidthPage = this.props.shouldFullWidth;
-        const parentClassNames = `flex mx-auto ${isFullWidthPage ? 'pl2' : 'max-width-4'}`;
+        const isExpandedDisplayType = this.props.displayType === TopBarDisplayType.Expanded;
+        const parentClassNames = `flex mx-auto ${isExpandedDisplayType ? 'pl3 py1' : 'max-width-4'}`;
+        const height = isExpandedDisplayType ? EXPANDED_HEIGHT : DEFAULT_HEIGHT;
         const developerSectionMenuItems = [
             <Link key="subMenuItem-zeroEx" to={WebsitePaths.ZeroExJs} className="text-decoration-none">
                 <MenuItem style={{ fontSize: styles.menuItem.fontSize }} primaryText="0x.js" />
@@ -139,10 +143,16 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                     primaryText={this.props.translate.get(Key.Web3Wrapper, Deco.CapWords)}
                 />
             </Link>,
-            <Link key="subMenuItem-deployer" to={WebsitePaths.Deployer} className="text-decoration-none">
+            <Link key="subMenuItem-order-utils" to={WebsitePaths.OrderUtils} className="text-decoration-none">
                 <MenuItem
                     style={{ fontSize: styles.menuItem.fontSize }}
-                    primaryText={this.props.translate.get(Key.Deployer, Deco.CapWords)}
+                    primaryText={this.props.translate.get(Key.OrderUtils, Deco.CapWords)}
+                />
+            </Link>,
+            <Link key="subMenuItem-sol-compiler" to={WebsitePaths.SolCompiler} className="text-decoration-none">
+                <MenuItem
+                    style={{ fontSize: styles.menuItem.fontSize }}
+                    primaryText={this.props.translate.get(Key.SolCompiler, Deco.CapWords)}
                 />
             </Link>,
             <Link key="subMenuItem-sol-cov" to={WebsitePaths.SolCov} className="text-decoration-none">
@@ -172,9 +182,11 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             </a>,
         ];
         const bottomBorderStyle = this._shouldDisplayBottomBar() ? styles.bottomBar : {};
-        const fullWidthClasses = isFullWidthPage ? 'pr4' : '';
+        const fullWidthClasses = isExpandedDisplayType ? 'pr4' : '';
         const logoUrl = isNightVersion ? '/images/protocol_logo_white.png' : '/images/protocol_logo_black.png';
-        const menuClasses = `col col-${isFullWidthPage ? '4' : '5'} ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
+        const menuClasses = `col col-${
+            isExpandedDisplayType ? '4' : '5'
+        } ${fullWidthClasses} lg-pr0 md-pr2 sm-hide xs-hide`;
         const menuIconStyle = {
             fontSize: 25,
             color: isNightVersion ? 'white' : 'black',
@@ -191,15 +203,15 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
         );
         const popoverContent = <Menu style={{ color: colors.darkGrey }}>{developerSectionMenuItems}</Menu>;
         return (
-            <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style }} className="pb1">
+            <div style={{ ...styles.topBar, ...bottomBorderStyle, ...this.props.style, ...{ height } }} className="pb1">
                 <div className={parentClassNames}>
-                    <div className="col col-2 sm-pl2 md-pl2 lg-pl0" style={{ paddingTop: 15 }}>
+                    <div className="col col-2 sm-pl1 md-pl2 lg-pl0" style={{ paddingTop: 15 }}>
                         <Link to={`${WebsitePaths.Home}`} className="text-decoration-none">
                             <img src={logoUrl} height="30" />
                         </Link>
                     </div>
-                    <div className={`col col-${isFullWidthPage ? '8' : '9'} lg-hide md-hide`} />
-                    <div className={`col col-${isFullWidthPage ? '6' : '5'} sm-hide xs-hide`} />
+                    <div className={`col col-${isExpandedDisplayType ? '8' : '9'} lg-hide md-hide`} />
+                    <div className={`col col-${isExpandedDisplayType ? '6' : '5'} sm-hide xs-hide`} />
                     {!this._isViewingPortal() && (
                         <div className={menuClasses}>
                             <div className="flex justify-between">
@@ -236,7 +248,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                                     path={`${WebsitePaths.Portal}`}
                                     isPrimary={true}
                                     style={styles.menuItem}
-                                    className={`${isFullWidthPage && 'md-hide'}`}
+                                    className={`${isExpandedDisplayType && 'md-hide'}`}
                                     isNightVersion={isNightVersion}
                                     isExternal={false}
                                 />
@@ -244,7 +256,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                         </div>
                     )}
                     {this.props.blockchainIsLoaded && (
-                        <div className="sm-hide xs-hide col col-5">
+                        <div className="sm-hide xs-hide col col-5" style={{ paddingTop: 8, marginRight: 36 }}>
                             <ProviderDisplay
                                 dispatcher={this.props.dispatcher}
                                 userAddress={this.props.userAddress}
@@ -256,7 +268,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                             />
                         </div>
                     )}
-                    <div className={`col ${isFullWidthPage ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}>
+                    <div className={`col ${isExpandedDisplayType ? 'col-2 pl2' : 'col-1'} md-hide lg-hide`}>
                         <div style={menuIconStyle}>
                             <i className="zmdi zmdi-menu" onClick={this._onMenuButtonClick.bind(this)} />
                         </div>
@@ -316,10 +328,10 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                             </MenuItem>
                         </Link>
                     )}
-                    {!this._isViewingDeployerDocs() && (
-                        <Link to={WebsitePaths.Deployer} className="text-decoration-none">
+                    {!this._isViewingSolCompilerDocs() && (
+                        <Link to={WebsitePaths.SolCompiler} className="text-decoration-none">
                             <MenuItem className="py2">
-                                {this.props.translate.get(Key.Deployer, Deco.Cap)}{' '}
+                                {this.props.translate.get(Key.SolCompiler, Deco.Cap)}{' '}
                                 {this.props.translate.get(Key.Docs, Deco.Cap)}
                             </MenuItem>
                         </Link>
@@ -378,7 +390,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             (!this._isViewing0xjsDocs() &&
                 !this._isViewingSmartContractsDocs() &&
                 !this._isViewingWeb3WrapperDocs() &&
-                !this._isViewingDeployerDocs() &&
+                !this._isViewingSolCompilerDocs() &&
                 !this._isViewingJsonSchemasDocs() &&
                 !this._isViewingSolCovDocs() &&
                 !this._isViewingSubprovidersDocs() &&
@@ -431,22 +443,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                 <div className="pl1 py1" style={{ backgroundColor: colors.lightGrey }}>
                     {this.props.translate.get(Key.PortalDApp, Deco.CapWords)}
                 </div>
-                <PortalMenu menuItemStyle={{ color: 'black' }} onClick={this._onMenuButtonClick.bind(this)} />
-            </div>
-        );
-    }
-    private _renderUser() {
-        const userAddress = this.props.userAddress;
-        const identiconDiameter = 26;
-        return (
-            <div className="flex right lg-pr0 md-pr2 sm-pr2" style={{ paddingTop: 16 }}>
-                <div style={styles.address} data-tip={true} data-for="userAddressTooltip">
-                    {!_.isEmpty(userAddress) ? userAddress : ''}
-                </div>
-                <ReactTooltip id="userAddressTooltip">{userAddress}</ReactTooltip>
-                <div>
-                    <Identicon address={userAddress} diameter={identiconDiameter} />
-                </div>
+                <LegacyPortalMenu menuItemStyle={{ color: 'black' }} onClick={this._onMenuButtonClick.bind(this)} />
             </div>
         );
     }
@@ -479,8 +476,8 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             _.includes(this.props.location.pathname, WebsiteLegacyPaths.Web3Wrapper)
         );
     }
-    private _isViewingDeployerDocs() {
-        return _.includes(this.props.location.pathname, WebsitePaths.Deployer);
+    private _isViewingSolCompilerDocs() {
+        return _.includes(this.props.location.pathname, WebsitePaths.SolCompiler);
     }
     private _isViewingJsonSchemasDocs() {
         return _.includes(this.props.location.pathname, WebsitePaths.JSONSchemas);
@@ -501,11 +498,12 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             this._isViewingFAQ() ||
             this._isViewingSmartContractsDocs() ||
             this._isViewingWeb3WrapperDocs() ||
-            this._isViewingDeployerDocs() ||
+            this._isViewingSolCompilerDocs() ||
             this._isViewingJsonSchemasDocs() ||
             this._isViewingSolCovDocs() ||
             this._isViewingSubprovidersDocs() ||
-            this._isViewingConnectDocs()
+            this._isViewingConnectDocs() ||
+            this._isViewingPortal()
         );
     }
 } // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/ui/input_label.tsx b/packages/website/ts/components/ui/input_label.tsx
index 2506db423..8eda45a5d 100644
--- a/packages/website/ts/components/ui/input_label.tsx
+++ b/packages/website/ts/components/ui/input_label.tsx
@@ -17,7 +17,7 @@ const styles: Styles = {
         userSelect: 'none',
         width: 240,
         zIndex: 1,
-    },
+    } as React.CSSProperties,
 };
 
 export const InputLabel = (props: InputLabelProps) => {
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index d1ae38550..079c0e3b3 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -9,8 +9,11 @@ import {
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import FlatButton from 'material-ui/FlatButton';
+import FloatingActionButton from 'material-ui/FloatingActionButton';
 import { List, ListItem } from 'material-ui/List';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
+import ContentAdd from 'material-ui/svg-icons/content/add';
+import ContentRemove from 'material-ui/svg-icons/content/remove';
 import NavigationArrowDownward from 'material-ui/svg-icons/navigation/arrow-downward';
 import NavigationArrowUpward from 'material-ui/svg-icons/navigation/arrow-upward';
 import Close from 'material-ui/svg-icons/navigation/close';
@@ -55,11 +58,14 @@ export interface WalletProps {
     injectedProviderName: string;
     providerType: ProviderType;
     onToggleLedgerDialog: () => void;
+    onAddToken: () => void;
+    onRemoveToken: () => void;
 }
 
 interface WalletState {
     trackedTokenStateByAddress: TokenStateByAddress;
     wrappedEtherDirection?: Side;
+    isHoveringSidebar: boolean;
 }
 
 interface AllowanceToggleConfig {
@@ -94,6 +100,9 @@ const styles: Styles = {
     },
     footerItemInnerDiv: {
         paddingLeft: 24,
+        borderTopColor: colors.walletBorder,
+        borderTopStyle: 'solid',
+        borderWidth: 1,
     },
     borderedItem: {
         borderBottomColor: colors.walletBorder,
@@ -114,7 +123,17 @@ const styles: Styles = {
         paddingTop: 8,
         paddingBottom: 8,
     },
-    accessoryItemsContainer: { width: 150, right: 8 },
+    accessoryItemsContainer: {
+        width: 150,
+        right: 8,
+    },
+    bodyInnerDiv: {
+        padding: 0,
+        // TODO: make this completely responsive
+        maxHeight: 475,
+        overflow: 'auto',
+        WebkitOverflowScrolling: 'touch',
+    },
 };
 
 const ETHER_ICON_PATH = '/images/ether.png';
@@ -123,6 +142,7 @@ const ZRX_TOKEN_SYMBOL = 'ZRX';
 const ETHER_SYMBOL = 'ETH';
 const ICON_DIMENSION = 24;
 const TOKEN_AMOUNT_DISPLAY_PRECISION = 3;
+const BODY_ITEM_KEY = 'BODY';
 const HEADER_ITEM_KEY = 'HEADER';
 const FOOTER_ITEM_KEY = 'FOOTER';
 const DISCONNECTED_ITEM_KEY = 'DISCONNECTED';
@@ -139,6 +159,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         this.state = {
             trackedTokenStateByAddress: initialTrackedTokenStateByAddress,
             wrappedEtherDirection: undefined,
+            isHoveringSidebar: false,
         };
     }
     public componentWillMount() {
@@ -184,12 +205,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         return (
             <List style={styles.list}>
                 {isAddressAvailable
-                    ? _.concat(
-                          this._renderConnectedHeaderRows(),
-                          this._renderEthRows(),
-                          this._renderTokenRows(),
-                          this._renderFooterRows(),
-                      )
+                    ? _.concat(this._renderConnectedHeaderRows(), this._renderBody(), this._renderFooterRows())
                     : _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows())}
             </List>
         );
@@ -230,9 +246,61 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             />
         );
     }
+    private _renderBody() {
+        const bodyStyle: React.CSSProperties = {
+            ...styles.bodyInnerDiv,
+            overflow: this.state.isHoveringSidebar ? 'auto' : 'hidden',
+        };
+        return (
+            <ListItem
+                key={BODY_ITEM_KEY}
+                innerDivStyle={bodyStyle}
+                onMouseEnter={this._onSidebarHover.bind(this)}
+                onMouseLeave={this._onSidebarHoverOff.bind(this)}
+            >
+                {this._renderEthRows()}
+                {this._renderTokenRows()}
+            </ListItem>
+        );
+    }
+    private _onSidebarHover(event: React.FormEvent<HTMLInputElement>) {
+        this.setState({
+            isHoveringSidebar: true,
+        });
+    }
+    private _onSidebarHoverOff() {
+        this.setState({
+            isHoveringSidebar: false,
+        });
+    }
     private _renderFooterRows() {
-        const primaryText = '+ other tokens';
-        return <ListItem key={FOOTER_ITEM_KEY} primaryText={primaryText} innerDivStyle={styles.footerItemInnerDiv} />;
+        return (
+            <ListItem
+                key={FOOTER_ITEM_KEY}
+                primaryText={
+                    <div className="flex">
+                        <FloatingActionButton mini={true} zDepth={0} onClick={this.props.onAddToken}>
+                            <ContentAdd />
+                        </FloatingActionButton>
+                        <FloatingActionButton mini={true} zDepth={0} className="px1" onClick={this.props.onRemoveToken}>
+                            <ContentRemove />
+                        </FloatingActionButton>
+                        <div
+                            style={{
+                                paddingLeft: 10,
+                                position: 'relative',
+                                top: '50%',
+                                transform: 'translateY(33%)',
+                            }}
+                        >
+                            add/remove tokens
+                        </div>
+                    </div>
+                }
+                disabled={true}
+                innerDivStyle={styles.footerItemInnerDiv}
+            />
+        );
     }
     private _renderEthRows() {
         const primaryText = this._renderAmount(
@@ -293,7 +361,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
         return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
     }
-    private _renderTokenRow(token: Token) {
+    private _renderTokenRow(token: Token, index: number) {
         const tokenState = this.state.trackedTokenStateByAddress[token.address];
         const tokenLink = sharedUtils.getEtherScanLinkIfExists(
             token.address,
@@ -310,12 +378,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 tokenState,
             },
         };
+        // if this is the last item in the list, do not render the border, it is rendered by the footer
+        const borderedStyle = index !== this.props.trackedTokens.length - 1 ? styles.borderedItem : {};
         const shouldShowWrapEtherItem =
             !_.isUndefined(this.state.wrappedEtherDirection) &&
             this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection;
         const style = shouldShowWrapEtherItem
             ? { ...walletItemStyles.focusedItem, ...styles.paddedItem }
-            : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
+            : { ...styles.tokenItem, ...borderedStyle, ...styles.paddedItem };
         const etherToken = this._getEthToken();
         return (
             <div key={token.address}>
@@ -461,16 +531,16 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             );
             balanceAndAllowanceTupleByAddress[tokenAddress] = balanceAndAllowanceTuple;
         }
-        const pricesByAddress = await this._getPricesByAddressAsync(tokenAddresses);
+        const priceByAddress = await this._getPriceByAddressAsync(tokenAddresses);
         const trackedTokenStateByAddress = _.reduce(
             tokenAddresses,
             (acc, address) => {
                 const [balance, allowance] = balanceAndAllowanceTupleByAddress[address];
-                const price = pricesByAddress[address];
+                const priceIfExists = _.get(priceByAddress, address);
                 acc[address] = {
                     balance,
                     allowance,
-                    price,
+                    price: priceIfExists,
                     isLoaded: true,
                 };
                 return acc;
@@ -487,16 +557,29 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
     private async _refetchTokenStateAsync(tokenAddress: string) {
         await this._fetchBalancesAndAllowancesAsync([tokenAddress]);
     }
-    private async _getPricesByAddressAsync(tokenAddresses: string[]): Promise<ItemByAddress<BigNumber>> {
+    private async _getPriceByAddressAsync(tokenAddresses: string[]): Promise<ItemByAddress<BigNumber>> {
         if (_.isEmpty(tokenAddresses)) {
             return {};
         }
+        // for each input token address, search for the corresponding symbol in this.props.tokenByAddress, if it exists
+        // create a mapping from existing symbols -> address
+        const tokenAddressBySymbol: { [symbol: string]: string } = {};
+        _.each(tokenAddresses, address => {
+            const tokenIfExists = _.get(this.props.tokenByAddress, address);
+            if (!_.isUndefined(tokenIfExists)) {
+                const symbol = tokenIfExists.symbol;
+                tokenAddressBySymbol[symbol] = address;
+            }
+        });
+        const tokenSymbols = _.keys(tokenAddressBySymbol);
         try {
-            const websiteBackendPriceInfos = await backendClient.getPriceInfosAsync(tokenAddresses);
-            const addresses = _.map(websiteBackendPriceInfos, info => info.address);
-            const prices = _.map(websiteBackendPriceInfos, info => new BigNumber(info.price));
-            const pricesByAddress = _.zipObject(addresses, prices);
-            return pricesByAddress;
+            const priceBySymbol = await backendClient.getPriceInfoAsync(tokenSymbols);
+            const priceByAddress = _.mapKeys(priceBySymbol, (value, symbol) => _.get(tokenAddressBySymbol, symbol));
+            const result = _.mapValues(priceByAddress, price => {
+                const priceBigNumber = new BigNumber(price);
+                return priceBigNumber;
+            });
+            return result;
         } catch (err) {
             return {};
         }
diff --git a/packages/website/ts/containers/legacy_portal.ts b/packages/website/ts/containers/legacy_portal.ts
new file mode 100644
index 000000000..3b1172a44
--- /dev/null
+++ b/packages/website/ts/containers/legacy_portal.ts
@@ -0,0 +1,92 @@
+import { BigNumber } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import {
+    LegacyPortal as LegacyPortalComponent,
+    LegacyPortalProps as LegacyPortalComponentProps,
+} from 'ts/components/legacy_portal/legacy_portal';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, Side, TokenByAddress } from 'ts/types';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+interface ConnectedState {
+    blockchainErr: BlockchainErrs;
+    blockchainIsLoaded: boolean;
+    hashData: HashData;
+    injectedProviderName: string;
+    networkId: number;
+    nodeVersion: string;
+    orderFillAmount: BigNumber;
+    providerType: ProviderType;
+    tokenByAddress: TokenByAddress;
+    lastForceTokenStateRefetch: number;
+    userEtherBalanceInWei: BigNumber;
+    screenWidth: ScreenWidths;
+    shouldBlockchainErrDialogBeOpen: boolean;
+    userAddress: string;
+    userSuppliedOrderCache: Order;
+    flashMessage?: string | React.ReactNode;
+    translate: Translate;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, ownProps: LegacyPortalComponentProps): ConnectedState => {
+    const receiveAssetToken = state.sideToAssetToken[Side.Receive];
+    const depositAssetToken = state.sideToAssetToken[Side.Deposit];
+    const receiveAddress = !_.isUndefined(receiveAssetToken.address)
+        ? receiveAssetToken.address
+        : constants.NULL_ADDRESS;
+    const depositAddress = !_.isUndefined(depositAssetToken.address)
+        ? depositAssetToken.address
+        : constants.NULL_ADDRESS;
+    const receiveAmount = !_.isUndefined(receiveAssetToken.amount) ? receiveAssetToken.amount : new BigNumber(0);
+    const depositAmount = !_.isUndefined(depositAssetToken.amount) ? depositAssetToken.amount : new BigNumber(0);
+    const hashData = {
+        depositAmount,
+        depositTokenContractAddr: depositAddress,
+        feeRecipientAddress: constants.NULL_ADDRESS,
+        makerFee: constants.MAKER_FEE,
+        orderExpiryTimestamp: state.orderExpiryTimestamp,
+        orderMakerAddress: state.userAddress,
+        orderTakerAddress: state.orderTakerAddress !== '' ? state.orderTakerAddress : constants.NULL_ADDRESS,
+        receiveAmount,
+        receiveTokenContractAddr: receiveAddress,
+        takerFee: constants.TAKER_FEE,
+        orderSalt: state.orderSalt,
+    };
+    return {
+        blockchainErr: state.blockchainErr,
+        blockchainIsLoaded: state.blockchainIsLoaded,
+        hashData,
+        injectedProviderName: state.injectedProviderName,
+        networkId: state.networkId,
+        nodeVersion: state.nodeVersion,
+        orderFillAmount: state.orderFillAmount,
+        providerType: state.providerType,
+        screenWidth: state.screenWidth,
+        shouldBlockchainErrDialogBeOpen: state.shouldBlockchainErrDialogBeOpen,
+        tokenByAddress: state.tokenByAddress,
+        lastForceTokenStateRefetch: state.lastForceTokenStateRefetch,
+        userAddress: state.userAddress,
+        userEtherBalanceInWei: state.userEtherBalanceInWei,
+        userSuppliedOrderCache: state.userSuppliedOrderCache,
+        flashMessage: state.flashMessage,
+        translate: state.translate,
+    };
+};
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const LegacyPortal: React.ComponentClass<LegacyPortalComponentProps> = connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(LegacyPortalComponent);
diff --git a/packages/website/ts/containers/order_utils_documentation.ts b/packages/website/ts/containers/order_utils_documentation.ts
new file mode 100644
index 000000000..64aa7300f
--- /dev/null
+++ b/packages/website/ts/containers/order_utils_documentation.ts
@@ -0,0 +1,99 @@
+import { constants as docConstants, DocsInfo, DocsInfoConfig, SupportedDocJson } from '@0xproject/react-docs';
+import * as _ from 'lodash';
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { DocPage as DocPageComponent, DocPageProps } from 'ts/pages/documentation/doc_page';
+import { Dispatcher } from 'ts/redux/dispatcher';
+import { State } from 'ts/redux/reducer';
+import { DocPackages, Environments, WebsitePaths } from 'ts/types';
+import { configs } from 'ts/utils/configs';
+import { constants } from 'ts/utils/constants';
+import { Translate } from 'ts/utils/translate';
+
+/* tslint:disable:no-var-requires */
+const IntroMarkdown = require('md/docs/order_utils/introduction');
+const InstallationMarkdown = require('md/docs/order_utils/installation');
+/* tslint:enable:no-var-requires */
+
+const docSections = {
+    introduction: 'introduction',
+    installation: 'installation',
+    usage: 'usage',
+    types: 'types',
+};
+
+const docsInfoConfig: DocsInfoConfig = {
+    id: DocPackages.OrderUtils,
+    type: SupportedDocJson.TypeDoc,
+    displayName: 'Order utils',
+    packageUrl: 'https://github.com/0xProject/0x-monorepo',
+    menu: {
+        introduction: [docSections.introduction],
+        install: [docSections.installation],
+        usage: [docSections.usage],
+        types: [docSections.types],
+    },
+    sectionNameToMarkdown: {
+        [docSections.introduction]: IntroMarkdown,
+        [docSections.installation]: InstallationMarkdown,
+    },
+    sectionNameToModulePath: {
+        [docSections.usage]: [
+            '"order-utils/src/order_hash"',
+            '"order-utils/src/signature_utils"',
+            '"order-utils/src/order_factory"',
+            '"order-utils/src/salt"',
+            '"order-utils/src/assert"',
+            '"order-utils/src/constants"',
+        ],
+        [docSections.types]: ['"order-utils/src/types"', '"types/src/index"'],
+    },
+    menuSubsectionToVersionWhenIntroduced: {},
+    sections: docSections,
+    visibleConstructors: [],
+    typeConfigs: {
+        // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is
+        // currently no way to extract the re-exported types from index.ts via TypeDoc :(
+        publicTypes: [
+            'OrderError',
+            'Order',
+            'SignedOrder',
+            'ECSignature',
+            'Provider',
+            'JSONRPCRequestPayload',
+            'JSONRPCResponsePayload',
+            'JSONRPCErrorCallback',
+        ],
+        typeNameToExternalLink: {
+            BigNumber: constants.URL_BIGNUMBERJS_GITHUB,
+        },
+    },
+};
+const docsInfo = new DocsInfo(docsInfoConfig);
+
+interface ConnectedState {
+    docsVersion: string;
+    availableDocVersions: string[];
+    docsInfo: DocsInfo;
+    translate: Translate;
+}
+
+interface ConnectedDispatch {
+    dispatcher: Dispatcher;
+}
+
+const mapStateToProps = (state: State, ownProps: DocPageProps): ConnectedState => ({
+    docsVersion: state.docsVersion,
+    availableDocVersions: state.availableDocVersions,
+    translate: state.translate,
+    docsInfo,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
+
+export const Documentation: React.ComponentClass<DocPageProps> = connect(mapStateToProps, mapDispatchToProps)(
+    DocPageComponent,
+);
diff --git a/packages/website/ts/containers/portal.ts b/packages/website/ts/containers/portal.ts
index 725564ead..3f0feb6e9 100644
--- a/packages/website/ts/containers/portal.ts
+++ b/packages/website/ts/containers/portal.ts
@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { Portal as PortalComponent, PortalAllProps as PortalComponentAllProps } from 'ts/components/portal';
+import { Portal as PortalComponent, PortalProps as PortalComponentProps } from 'ts/components/portal/portal';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { State } from 'ts/redux/reducer';
 import { BlockchainErrs, HashData, Order, ProviderType, ScreenWidths, Side, TokenByAddress } from 'ts/types';
@@ -34,7 +34,7 @@ interface ConnectedDispatch {
     dispatcher: Dispatcher;
 }
 
-const mapStateToProps = (state: State, ownProps: PortalComponentAllProps): ConnectedState => {
+const mapStateToProps = (state: State, ownProps: PortalComponentProps): ConnectedState => {
     const receiveAssetToken = state.sideToAssetToken[Side.Receive];
     const depositAssetToken = state.sideToAssetToken[Side.Deposit];
     const receiveAddress = !_.isUndefined(receiveAssetToken.address)
@@ -83,6 +83,6 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
     dispatcher: new Dispatcher(dispatch),
 });
 
-export const Portal: React.ComponentClass<PortalComponentAllProps> = connect(mapStateToProps, mapDispatchToProps)(
+export const Portal: React.ComponentClass<PortalComponentProps> = connect(mapStateToProps, mapDispatchToProps)(
     PortalComponent,
 );
diff --git a/packages/website/ts/containers/deployer_documentation.ts b/packages/website/ts/containers/sol_compiler_documentation.ts
index e20cc195b..2f6486146 100644
--- a/packages/website/ts/containers/deployer_documentation.ts
+++ b/packages/website/ts/containers/sol_compiler_documentation.ts
@@ -12,9 +12,9 @@ import { constants } from 'ts/utils/constants';
 import { Translate } from 'ts/utils/translate';
 
 /* tslint:disable:no-var-requires */
-const IntroMarkdown = require('md/docs/deployer/introduction');
-const InstallationMarkdown = require('md/docs/deployer/installation');
-const UsageMarkdown = require('md/docs/deployer/usage');
+const IntroMarkdown = require('md/docs/sol-compiler/introduction');
+const InstallationMarkdown = require('md/docs/sol-compiler/installation');
+const UsageMarkdown = require('md/docs/sol-compiler/usage');
 /* tslint:enable:no-var-requires */
 
 const docSections = {
@@ -22,21 +22,19 @@ const docSections = {
     installation: 'installation',
     usage: 'usage',
     compiler: 'compiler',
-    deployer: 'deployer',
     types: docConstants.TYPES_SECTION_NAME,
 };
 
 const docsInfoConfig: DocsInfoConfig = {
-    id: DocPackages.Deployer,
+    id: DocPackages.SolCompiler,
     type: SupportedDocJson.TypeDoc,
-    displayName: 'Deployer',
+    displayName: 'Solidity Compiler',
     packageUrl: 'https://github.com/0xProject/0x-monorepo',
     menu: {
         introduction: [docSections.introduction],
         install: [docSections.installation],
         usage: [docSections.usage],
         compiler: [docSections.compiler],
-        deployer: [docSections.deployer],
         types: [docSections.types],
     },
     sectionNameToMarkdown: {
@@ -45,32 +43,18 @@ const docsInfoConfig: DocsInfoConfig = {
         [docSections.usage]: UsageMarkdown,
     },
     sectionNameToModulePath: {
-        [docSections.compiler]: ['"deployer/src/compiler"'],
-        [docSections.deployer]: ['"deployer/src/deployer"'],
-        [docSections.types]: ['"deployer/src/utils/types"', '"types/src/index"'],
+        [docSections.compiler]: ['"sol-compiler/src/compiler"'],
+        [docSections.types]: ['"sol-compiler/src/utils/types"', '"types/src/index"'],
     },
     menuSubsectionToVersionWhenIntroduced: {},
     sections: docSections,
-    visibleConstructors: [docSections.compiler, docSections.deployer],
+    visibleConstructors: [docSections.compiler],
     typeConfigs: {
         // Note: This needs to be kept in sync with the types exported in index.ts. Unfortunately there is
         // currently no way to extract the re-exported types from index.ts via TypeDoc :(
-        publicTypes: [
-            'CompilerOptions',
-            'DeployerOptions',
-            'BaseDeployerOptions',
-            'UrlDeployerOptions',
-            'ProviderDeployerOptions',
-            'TxData',
-        ],
-        typeNameToExternalLink: {
-            Web3: constants.URL_WEB3_DOCS,
-            BigNumber: constants.URL_BIGNUMBERJS_GITHUB,
-            ContractInstance: 'https://github.com/0xProject/web3-typescript-typings/blob/f5bcb96/index.d.ts#L98',
-        },
-        typeNameToPrefix: {
-            ContractInstance: 'Web3',
-        },
+        publicTypes: ['CompilerOptions'],
+        typeNameToExternalLink: {},
+        typeNameToPrefix: {},
     },
 };
 const docsInfo = new DocsInfo(docsInfoConfig);
diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts
index a14d06a3f..2178baea8 100644
--- a/packages/website/ts/containers/subproviders_documentation.ts
+++ b/packages/website/ts/containers/subproviders_documentation.ts
@@ -74,7 +74,7 @@ const docsInfoConfig: DocsInfoConfig = {
         [docSections.redundantRPCSubprovider]: ['"subproviders/src/subproviders/redundant_rpc"'],
         [docSections.ganacheSubprovider]: ['"subproviders/src/subproviders/ganache"'],
         [docSections.nonceTrackerSubprovider]: ['"subproviders/src/subproviders/nonce_tracker"'],
-        [docSections.types]: ['"deployer/src/utils/types"', '"types/src/index"', '"subproviders/src/types"'],
+        [docSections.types]: ['"sol-compiler/src/utils/types"', '"types/src/index"', '"subproviders/src/types"'],
     },
     menuSubsectionToVersionWhenIntroduced: {},
     sections: docSections,
diff --git a/packages/website/ts/containers/zero_ex_js_documentation.ts b/packages/website/ts/containers/zero_ex_js_documentation.ts
index 40853cb9e..f68e2335f 100644
--- a/packages/website/ts/containers/zero_ex_js_documentation.ts
+++ b/packages/website/ts/containers/zero_ex_js_documentation.ts
@@ -68,32 +68,38 @@ const docsInfoConfig: DocsInfoConfig = {
         [zeroExJsDocSections.exchange]: [
             '"0x.js/src/contract_wrappers/exchange_wrapper"',
             '"src/contract_wrappers/exchange_wrapper"',
+            '"contract-wrappers/src/contract_wrappers/exchange_wrapper"',
         ],
         [zeroExJsDocSections.tokenRegistry]: [
             '"0x.js/src/contract_wrappers/token_registry_wrapper"',
             '"src/contract_wrappers/token_registry_wrapper"',
+            '"contract-wrappers/src/contract_wrappers/token_registry_wrapper"',
         ],
         [zeroExJsDocSections.token]: [
             '"0x.js/src/contract_wrappers/token_wrapper"',
             '"src/contract_wrappers/token_wrapper"',
+            '"contract-wrappers/src/contract_wrappers/token_wrapper"',
         ],
         [zeroExJsDocSections.etherToken]: [
             '"0x.js/src/contract_wrappers/ether_token_wrapper"',
             '"src/contract_wrappers/ether_token_wrapper"',
+            '"contract-wrappers/src/contract_wrappers/ether_token_wrapper"',
         ],
         [zeroExJsDocSections.proxy]: [
             '"0x.js/src/contract_wrappers/proxy_wrapper"',
             '"0x.js/src/contract_wrappers/token_transfer_proxy_wrapper"',
-            '"src/contract_wrappers/token_transfer_proxy_wrapper"',
+            '"contract-wrappers/src/contract_wrappers/token_transfer_proxy_wrapper"',
         ],
         [zeroExJsDocSections.orderWatcher]: [
             '"0x.js/src/order_watcher/order_state_watcher"',
             '"src/order_watcher/order_state_watcher"',
+            '"order-watcher/src/order_watcher/order_watcher"',
         ],
         [zeroExJsDocSections.types]: [
             '"0x.js/src/types"',
             '"src/types"',
             '"types/src/index"',
+            '"contract-wrappers/src/types"',
             '"0x.js/src/contract_wrappers/generated/ether_token"',
             '"0x.js/src/contract_wrappers/generated/token"',
             '"0x.js/src/contract_wrappers/generated/exchange"',
@@ -114,7 +120,7 @@ const docsInfoConfig: DocsInfoConfig = {
             'Order',
             'SignedOrder',
             'ECSignature',
-            'ZeroExError',
+            'ContractWrappersError',
             'EventCallback',
             'EventCallbackAsync',
             'EventCallbackSync',
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 6b347145f..49bcdeaac 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -34,9 +34,14 @@ import 'less/all.less';
 // cause we only want to import the module when the user navigates to the page.
 // At the same time webpack statically parses for System.import() to determine bundle chunk split points
 // so each lazy import needs it's own `System.import()` declaration.
-const LazyPortal = createLazyComponent('Portal', async () =>
-    System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'),
-);
+const LazyPortal =
+    utils.isDevelopment() || utils.isStaging()
+        ? createLazyComponent('Portal', async () =>
+              System.import<any>(/* webpackChunkName: "portal" */ 'ts/containers/portal'),
+          )
+        : createLazyComponent('LegacyPortal', async () =>
+              System.import<any>(/* webpackChunkName: "legacyPortal" */ 'ts/containers/legacy_portal'),
+          );
 const LazyZeroExJSDocumentation = createLazyComponent('Documentation', async () =>
     System.import<any>(/* webpackChunkName: "zeroExDocs" */ 'ts/containers/zero_ex_js_documentation'),
 );
@@ -49,8 +54,8 @@ const LazyConnectDocumentation = createLazyComponent('Documentation', async () =
 const LazyWeb3WrapperDocumentation = createLazyComponent('Documentation', async () =>
     System.import<any>(/* webpackChunkName: "web3WrapperDocs" */ 'ts/containers/web3_wrapper_documentation'),
 );
-const LazyDeployerDocumentation = createLazyComponent('Documentation', async () =>
-    System.import<any>(/* webpackChunkName: "deployerDocs" */ 'ts/containers/deployer_documentation'),
+const LazySolCompilerDocumentation = createLazyComponent('Documentation', async () =>
+    System.import<any>(/* webpackChunkName: "solCompilerDocs" */ 'ts/containers/sol_compiler_documentation'),
 );
 const LazyJSONSchemasDocumentation = createLazyComponent('Documentation', async () =>
     System.import<any>(/* webpackChunkName: "jsonSchemasDocs" */ 'ts/containers/json_schemas_documentation'),
@@ -61,6 +66,9 @@ const LazySolCovDocumentation = createLazyComponent('Documentation', async () =>
 const LazySubprovidersDocumentation = createLazyComponent('Documentation', async () =>
     System.import<any>(/* webpackChunkName: "subproviderDocs" */ 'ts/containers/subproviders_documentation'),
 );
+const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async () =>
+    System.import<any>(/* webpackChunkName: "orderUtilsDocs" */ 'ts/containers/order_utils_documentation'),
+);
 
 analytics.init();
 // tslint:disable-next-line:no-floating-promises
@@ -83,7 +91,10 @@ render(
                             <Route path={WebsitePaths.Wiki} component={Wiki as any} />
                             <Route path={`${WebsitePaths.ZeroExJs}/:version?`} component={LazyZeroExJSDocumentation} />
                             <Route path={`${WebsitePaths.Connect}/:version?`} component={LazyConnectDocumentation} />
-                            <Route path={`${WebsitePaths.Deployer}/:version?`} component={LazyDeployerDocumentation} />
+                            <Route
+                                path={`${WebsitePaths.SolCompiler}/:version?`}
+                                component={LazySolCompilerDocumentation}
+                            />
                             <Route path={`${WebsitePaths.SolCov}/:version?`} component={LazySolCovDocumentation} />
                             <Route
                                 path={`${WebsitePaths.JSONSchemas}/:version?`}
@@ -94,6 +105,10 @@ render(
                                 component={LazySubprovidersDocumentation}
                             />
                             <Route
+                                path={`${WebsitePaths.OrderUtils}/:version?`}
+                                component={LazyOrderUtilsDocumentation}
+                            />
+                            <Route
                                 path={`${WebsitePaths.Web3Wrapper}/:version?`}
                                 component={LazyWeb3WrapperDocumentation}
                             />
@@ -111,6 +126,10 @@ render(
                                 path={`${WebsiteLegacyPaths.Web3Wrapper}/:version?`}
                                 component={LazyWeb3WrapperDocumentation}
                             />
+                            <Route
+                                path={`${WebsiteLegacyPaths.Deployer}/:version?`}
+                                component={LazySolCompilerDocumentation}
+                            />
 
                             <Route component={NotFound as any} />
                         </Switch>
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 97be59526..d78cca703 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -113,7 +113,7 @@ const teamRow4: ProfileInfo[] = [
     {
         name: 'Blake Henderson',
         title: 'Operations Associate',
-        description: `Operations and Analytics. Previously analytics at LinkedIn. Economics at UC San Diego. `,
+        description: `Operations and Analytics. Previously analytics at LinkedIn. Economics at UC San Diego.`,
         image: '/images/team/blake.jpg',
         linkedIn: 'https://www.linkedin.com/in/blakerhenderson/',
         github: '',
@@ -130,6 +130,27 @@ const teamRow4: ProfileInfo[] = [
     },
 ];
 
+const teamRow5: ProfileInfo[] = [
+    {
+        name: 'Greg Hysen',
+        title: 'Blockchain Engineer',
+        description: `Smart contract R&D. Previously lead distributed systems engineer at Hivemapper. Computer Science at University of Waterloo.`,
+        image: '/images/team/greg.jpeg',
+        linkedIn: 'https://www.linkedin.com/in/gregory-hysen-71741463/',
+        github: 'https://github.com/hysz',
+        medium: '',
+    },
+    {
+        name: 'Remco Bloemen',
+        title: 'Technical Fellow',
+        description: `Previously cofounder at Neufund and Coblue. Part III at Cambridge. PhD dropout at Twente Business School.`,
+        image: '/images/team/remco.jpeg',
+        linkedIn: 'https://www.linkedin.com/in/remcobloemen/',
+        github: 'http://github.com/recmo',
+        medium: '',
+    },
+];
+
 const advisors: ProfileInfo[] = [
     {
         name: 'Fred Ehrsam',
@@ -223,6 +244,7 @@ export class About extends React.Component<AboutProps, AboutState> {
                         <div className="clearfix">{this._renderProfiles(teamRow2)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow3)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow4)}</div>
+                        <div className="clearfix">{this._renderProfiles(teamRow5)}</div>
                     </div>
                     <div className="pt3 pb2">
                         <div
diff --git a/packages/website/ts/pages/documentation/doc_page.tsx b/packages/website/ts/pages/documentation/doc_page.tsx
index aca20447b..be8ae02f4 100644
--- a/packages/website/ts/pages/documentation/doc_page.tsx
+++ b/packages/website/ts/pages/documentation/doc_page.tsx
@@ -30,10 +30,11 @@ const docIdToSubpackageName: { [id: string]: string } = {
     [DocPackages.Connect]: 'connect',
     [DocPackages.SmartContracts]: 'contracts',
     [DocPackages.Web3Wrapper]: 'web3-wrapper',
-    [DocPackages.Deployer]: 'deployer',
+    [DocPackages.SolCompiler]: 'sol-compiler',
     [DocPackages.JSONSchemas]: 'json-schemas',
     [DocPackages.SolCov]: 'sol-cov',
     [DocPackages.Subproviders]: 'subproviders',
+    [DocPackages.OrderUtils]: 'order-utils',
 };
 
 export interface DocPageProps {
diff --git a/packages/website/ts/pages/landing/landing.tsx b/packages/website/ts/pages/landing/landing.tsx
index f961220fd..a63c24fb7 100644
--- a/packages/website/ts/pages/landing/landing.tsx
+++ b/packages/website/ts/pages/landing/landing.tsx
@@ -37,6 +37,8 @@ interface Project {
 }
 
 const THROTTLE_TIMEOUT = 100;
+const WHATS_NEW_TITLE = '18 ideas for 0x relayers in 2018';
+const WHATS_NEW_URL = 'https://blog.0xproject.com/18-ideas-for-0x-relayers-in-2018-80a1498b955f';
 
 const relayersAndDappProjects: Project[] = [
     {
@@ -233,6 +235,7 @@ export class Landing extends React.Component<LandingProps, LandingState> {
         return (
             <div className="clearfix py4" style={{ backgroundColor: colors.heroGrey }}>
                 <div className="mx-auto max-width-4 clearfix">
+                    {this._renderWhatsNew()}
                     <div className="lg-pt4 md-pt4 sm-pt2 lg-pb4 md-pb4 lg-my4 md-my4 sm-mt2 sm-mb4 clearfix">
                         <div className="col lg-col-5 md-col-5 col-12 sm-center">
                             <img src="/images/landing/hero_chip_image.png" height={isSmallScreen ? 300 : 395} />
@@ -302,6 +305,28 @@ export class Landing extends React.Component<LandingProps, LandingState> {
             </div>
         );
     }
+    private _renderWhatsNew() {
+        return (
+            <div className="sm-center sm-px1">
+                <a href={WHATS_NEW_URL} target="_blank" className="inline-block text-decoration-none">
+                    <div className="flex sm-pl0 md-pl2 lg-pl0" style={{ fontFamily: 'Roboto Mono', fontWeight: 600 }}>
+                        <div
+                            className="mr1 px1"
+                            style={{
+                                backgroundColor: colors.lightTurquois,
+                                borderRadius: 3,
+                                color: colors.heroGrey,
+                                height: 23,
+                            }}
+                        >
+                            New
+                        </div>
+                        <div style={{ color: colors.darkGrey }}>{WHATS_NEW_TITLE}</div>
+                    </div>
+                </a>
+            </div>
+        );
+    }
     private _renderProjects(projects: Project[], title: string, backgroundColor: string, isTitleCenter: boolean) {
         const isSmallScreen = this.state.screenWidth === ScreenWidths.Sm;
         const projectList = _.map(projects, (project: Project, i: number) => {
diff --git a/packages/website/ts/pages/wiki/wiki.tsx b/packages/website/ts/pages/wiki/wiki.tsx
index 7ed2b750d..edca5834d 100644
--- a/packages/website/ts/pages/wiki/wiki.tsx
+++ b/packages/website/ts/pages/wiki/wiki.tsx
@@ -47,7 +47,7 @@ const styles: Styles = {
         left: 0,
         bottom: 0,
         right: 0,
-        overflowZ: 'hidden',
+        overflow: 'hidden',
         height: `calc(100vh - ${TOP_BAR_HEIGHT}px)`,
         WebkitOverflowScrolling: 'touch',
     },
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 2544e6735..58929a0c6 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -344,6 +344,7 @@ export enum Docs {
 export enum WebsiteLegacyPaths {
     ZeroExJs = '/docs/0xjs',
     Web3Wrapper = '/docs/web3_wrapper',
+    Deployer = '/docs/deployer',
 }
 
 export enum WebsitePaths {
@@ -357,10 +358,11 @@ export enum WebsitePaths {
     SmartContracts = '/docs/contracts',
     Connect = '/docs/connect',
     Web3Wrapper = '/docs/web3-wrapper',
-    Deployer = '/docs/deployer',
+    SolCompiler = '/docs/sol-compiler',
     JSONSchemas = '/docs/json-schemas',
     SolCov = '/docs/sol-cov',
     Subproviders = '/docs/subproviders',
+    OrderUtils = '/docs/order-utils',
     Jobs = '/jobs',
 }
 
@@ -369,10 +371,11 @@ export enum DocPackages {
     ZeroExJs = 'ZERO_EX_JS',
     SmartContracts = 'SMART_CONTRACTS',
     Web3Wrapper = 'WEB3_WRAPPER',
-    Deployer = 'DEPLOYER',
+    SolCompiler = 'SOL_COMPILER',
     JSONSchemas = 'JSON_SCHEMAS',
     SolCov = 'SOL_COV',
     Subproviders = 'SUBPROVIDERS',
+    OrderUtils = 'ORDER_UTILS',
 }
 
 export enum Key {
@@ -421,7 +424,7 @@ export enum Key {
     About = 'ABOUT',
     Careers = 'CAREERS',
     Contact = 'CONTACT',
-    Deployer = 'DEPLOYER',
+    SolCompiler = 'SOL_COMPILER',
     JsonSchemas = 'JSON_SCHEMAS',
     SolCov = 'SOL_COV',
     Subproviders = 'SUBPROVIDERS',
@@ -431,6 +434,7 @@ export enum Key {
     Whitepaper = 'WHITEPAPER',
     Wiki = 'WIKI',
     Web3Wrapper = 'WEB3_WRAPPER',
+    OrderUtils = 'ORDER_UTILS',
     And = 'AND',
     Faq = 'FAQ',
     SmartContracts = 'SMART_CONTRACTS',
@@ -500,17 +504,24 @@ export interface TokenState {
     price?: BigNumber;
 }
 
-// TODO: Add topTokens and headerUrl properties once available from backend
 export interface WebsiteBackendRelayerInfo {
-    id: string;
     name: string;
     dailyTxnVolume: string;
     url: string;
+    appUrl?: string;
+    headerImgUrl?: string;
+    topTokens: WebsiteBackendTokenInfo[];
 }
 
 export interface WebsiteBackendPriceInfo {
-    price: string;
+    [symbol: string]: string;
+}
+
+export interface WebsiteBackendTokenInfo {
     address: string;
+    decimals: number;
+    name: string;
+    symbol: string;
 }
 
 export interface WebsiteBackendGasInfo {
diff --git a/packages/website/ts/utils/backend_client.ts b/packages/website/ts/utils/backend_client.ts
index fdbb3e03a..63e06fda7 100644
--- a/packages/website/ts/utils/backend_client.ts
+++ b/packages/website/ts/utils/backend_client.ts
@@ -1,16 +1,8 @@
-import { BigNumber, logUtils } from '@0xproject/utils';
 import * as _ from 'lodash';
-import * as queryString from 'query-string';
 
-import {
-    ArticlesBySection,
-    ItemByAddress,
-    WebsiteBackendGasInfo,
-    WebsiteBackendPriceInfo,
-    WebsiteBackendRelayerInfo,
-} from 'ts/types';
+import { ArticlesBySection, WebsiteBackendGasInfo, WebsiteBackendPriceInfo, WebsiteBackendRelayerInfo } from 'ts/types';
 import { configs } from 'ts/utils/configs';
-import { errorReporter } from 'ts/utils/error_reporter';
+import { fetchUtils } from 'ts/utils/fetch_utils';
 
 const ETH_GAS_STATION_ENDPOINT = '/eth_gas_station';
 const PRICES_ENDPOINT = '/prices';
@@ -19,52 +11,26 @@ const WIKI_ENDPOINT = '/wiki';
 
 export const backendClient = {
     async getGasInfoAsync(): Promise<WebsiteBackendGasInfo> {
-        const result = await requestAsync(ETH_GAS_STATION_ENDPOINT);
+        const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, ETH_GAS_STATION_ENDPOINT);
         return result;
     },
-    async getPriceInfosAsync(tokenAddresses: string[]): Promise<WebsiteBackendPriceInfo[]> {
-        if (_.isEmpty(tokenAddresses)) {
-            return [];
+    async getPriceInfoAsync(tokenSymbols: string[]): Promise<WebsiteBackendPriceInfo> {
+        if (_.isEmpty(tokenSymbols)) {
+            return {};
         }
-        const joinedTokenAddresses = tokenAddresses.join(',');
+        const joinedTokenSymbols = tokenSymbols.join(',');
         const queryParams = {
-            tokens: joinedTokenAddresses,
+            tokens: joinedTokenSymbols,
         };
-        const result = await requestAsync(PRICES_ENDPOINT, queryParams);
+        const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, PRICES_ENDPOINT, queryParams);
         return result;
     },
     async getRelayerInfosAsync(): Promise<WebsiteBackendRelayerInfo[]> {
-        const result = await requestAsync(RELAYERS_ENDPOINT);
+        const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, RELAYERS_ENDPOINT);
         return result;
     },
     async getWikiArticlesBySectionAsync(): Promise<ArticlesBySection> {
-        const result = await requestAsync(WIKI_ENDPOINT);
+        const result = await fetchUtils.requestAsync(configs.BACKEND_BASE_URL, WIKI_ENDPOINT);
         return result;
     },
 };
-
-async function requestAsync(endpoint: string, queryParams?: object): Promise<any> {
-    const query = queryStringFromQueryParams(queryParams);
-    const url = `${configs.BACKEND_BASE_URL}${endpoint}${query}`;
-    const response = await fetch(url);
-    if (response.status !== 200) {
-        const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`;
-        logUtils.log(errorText);
-        const error = Error(errorText);
-        // tslint:disable-next-line:no-floating-promises
-        errorReporter.reportAsync(error);
-        throw error;
-    }
-    const result = await response.json();
-    return result;
-}
-
-function queryStringFromQueryParams(queryParams?: object): string {
-    // if params are undefined or empty, return an empty string
-    if (_.isUndefined(queryParams) || _.isEmpty(queryParams)) {
-        return '';
-    }
-    // stringify the formatted object
-    const stringifiedParams = queryString.stringify(queryParams);
-    return `?${stringifiedParams}`;
-}
diff --git a/packages/website/ts/utils/fetch_utils.ts b/packages/website/ts/utils/fetch_utils.ts
new file mode 100644
index 000000000..d2e902db5
--- /dev/null
+++ b/packages/website/ts/utils/fetch_utils.ts
@@ -0,0 +1,33 @@
+import { logUtils } from '@0xproject/utils';
+import * as _ from 'lodash';
+import * as queryString from 'query-string';
+
+import { errorReporter } from 'ts/utils/error_reporter';
+
+export const fetchUtils = {
+    async requestAsync(baseUrl: string, path: string, queryParams?: object): Promise<any> {
+        const query = queryStringFromQueryParams(queryParams);
+        const url = `${baseUrl}${path}${query}`;
+        const response = await fetch(url);
+        if (response.status !== 200) {
+            const errorText = `Error requesting url: ${url}, ${response.status}: ${response.statusText}`;
+            logUtils.log(errorText);
+            const error = Error(errorText);
+            // tslint:disable-next-line:no-floating-promises
+            errorReporter.reportAsync(error);
+            throw error;
+        }
+        const result = await response.json();
+        return result;
+    },
+};
+
+function queryStringFromQueryParams(queryParams?: object): string {
+    // if params are undefined or empty, return an empty string
+    if (_.isUndefined(queryParams) || _.isEmpty(queryParams)) {
+        return '';
+    }
+    // stringify the formatted object
+    const stringifiedParams = queryString.stringify(queryParams);
+    return `?${stringifiedParams}`;
+}
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 53d60b3ce..472870f31 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -1,11 +1,22 @@
-import { ECSignature, ExchangeContractErrs, ZeroEx, ZeroExError } from '0x.js';
+import { ContractWrappersError, ECSignature, ExchangeContractErrs, ZeroEx } from '0x.js';
+import { OrderError } from '@0xproject/order-utils';
 import { constants as sharedConstants, EtherscanLinkSuffixes, Networks } from '@0xproject/react-shared';
 import { Provider } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
 import deepEqual = require('deep-equal');
 import * as _ from 'lodash';
 import * as moment from 'moment';
-import { Environments, Order, Providers, ScreenWidths, Side, SideToAssetToken, Token, TokenByAddress } from 'ts/types';
+import {
+    BlockchainCallErrs,
+    Environments,
+    Order,
+    Providers,
+    ScreenWidths,
+    Side,
+    SideToAssetToken,
+    Token,
+    TokenByAddress,
+} from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import * as u2f from 'ts/vendor/u2f_api';
@@ -192,21 +203,20 @@ export const utils = {
         const isUniqueSymbol = _.isUndefined(tokenWithSameSymbolIfExists);
         return isUniqueName && isUniqueSymbol;
     },
-    zeroExErrToHumanReadableErrMsg(error: ZeroExError | ExchangeContractErrs, takerAddress: string): string {
-        const ZeroExErrorToHumanReadableError: { [error: string]: string } = {
-            [ZeroExError.ExchangeContractDoesNotExist]: 'Exchange contract does not exist',
-            [ZeroExError.EtherTokenContractDoesNotExist]: 'EtherToken contract does not exist',
-            [ZeroExError.TokenTransferProxyContractDoesNotExist]: 'TokenTransferProxy contract does not exist',
-            [ZeroExError.TokenRegistryContractDoesNotExist]: 'TokenRegistry contract does not exist',
-            [ZeroExError.TokenContractDoesNotExist]: 'Token contract does not exist',
-            [ZeroExError.ZRXContractDoesNotExist]: 'ZRX contract does not exist',
-            [ZeroExError.UnhandledError]: 'Unhandled error occured',
-            [ZeroExError.UserHasNoAssociatedAddress]: 'User has no addresses available',
-            [ZeroExError.InvalidSignature]: 'Order signature is not valid',
-            [ZeroExError.ContractNotDeployedOnNetwork]: 'Contract is not deployed on the detected network',
-            [ZeroExError.InvalidJump]: 'Invalid jump occured while executing the transaction',
-            [ZeroExError.OutOfGas]: 'Transaction ran out of gas',
-            [ZeroExError.NoNetworkId]: 'No network id detected',
+    zeroExErrToHumanReadableErrMsg(error: ContractWrappersError | ExchangeContractErrs, takerAddress: string): string {
+        const ContractWrappersErrorToHumanReadableError: { [error: string]: string } = {
+            [ContractWrappersError.ExchangeContractDoesNotExist]: 'Exchange contract does not exist',
+            [ContractWrappersError.EtherTokenContractDoesNotExist]: 'EtherToken contract does not exist',
+            [ContractWrappersError.TokenTransferProxyContractDoesNotExist]:
+                'TokenTransferProxy contract does not exist',
+            [ContractWrappersError.TokenRegistryContractDoesNotExist]: 'TokenRegistry contract does not exist',
+            [ContractWrappersError.TokenContractDoesNotExist]: 'Token contract does not exist',
+            [ContractWrappersError.ZRXContractDoesNotExist]: 'ZRX contract does not exist',
+            [BlockchainCallErrs.UserHasNoAssociatedAddresses]: 'User has no addresses available',
+            [OrderError.InvalidSignature]: 'Order signature is not valid',
+            [ContractWrappersError.ContractNotDeployedOnNetwork]: 'Contract is not deployed on the detected network',
+            [ContractWrappersError.InvalidJump]: 'Invalid jump occured while executing the transaction',
+            [ContractWrappersError.OutOfGas]: 'Transaction ran out of gas',
         };
         const exchangeContractErrorToHumanReadableError: {
             [error: string]: string;
@@ -239,7 +249,7 @@ export const utils = {
             [ExchangeContractErrs.InsufficientRemainingFillAmount]: 'Insufficient remaining fill amount',
         };
         const humanReadableErrorMsg =
-            exchangeContractErrorToHumanReadableError[error] || ZeroExErrorToHumanReadableError[error];
+            exchangeContractErrorToHumanReadableError[error] || ContractWrappersErrorToHumanReadableError[error];
         return humanReadableErrorMsg;
     },
     isParityNode(nodeVersion: string): boolean {