merge v2-prototype

author: Fabio Berger <me@fabioberger.com> 2018-07-05 06:38:15 +0800
committer: Fabio Berger <me@fabioberger.com> 2018-07-05 06:38:15 +0800
commit: a0b9c7777b2171456a19aa6ddcf2a023b663a816 (patch)
tree: b9cf9fe6d0030bf0e2591d3facccf38ff2d622c6 /packages/website
parent: 5204e4c08da7d32012047ee6ca4d898b0c45a47d (diff)
parent: 5176d929fa6d3c6ce414448ea2441bd450f04e3c (diff)
download: dexon-0x-contracts-a0b9c7777b2171456a19aa6ddcf2a023b663a816.tar.gz
dexon-0x-contracts-a0b9c7777b2171456a19aa6ddcf2a023b663a816.tar.zst
dexon-0x-contracts-a0b9c7777b2171456a19aa6ddcf2a023b663a816.zip
35 files changed, 457 insertions, 360 deletions
diff --git a/packages/website/package.json b/packages/website/package.json
index c7b689356..a5768a60b 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -38,6 +38,7 @@
         "lodash": "^4.17.4",
         "material-ui": "^0.17.1",
         "moment": "2.21.0",
+        "numeral": "^2.0.6",
         "polished": "^1.9.2",
         "query-string": "^6.0.0",
         "react": "15.6.1",
@@ -57,8 +58,7 @@
         "styled-components": "^3.3.0",
         "thenby": "^1.2.3",
         "truffle-contract": "2.0.1",
-        "web3": "^0.20.0",
-        "web3-provider-engine": "^14.0.4",
+        "web3-provider-engine": "14.0.6",
         "whatwg-fetch": "^2.0.3",
         "xml-js": "^1.6.4"
     },
@@ -71,6 +71,7 @@
         "@types/lodash": "4.14.104",
         "@types/material-ui": "0.18.0",
         "@types/node": "^8.0.53",
+        "@types/numeral": "^0.0.22",
         "@types/query-string": "^5.1.0",
         "@types/react": "16.3.13",
         "@types/react-copy-to-clipboard": "^4.2.0",
diff --git a/packages/website/public/images/lock_icon.svg b/packages/website/public/images/lock_icon.svg
new file mode 100644
index 000000000..83e8191a1
--- /dev/null
+++ b/packages/website/public/images/lock_icon.svg
@@ -0,0 +1,3 @@
+<svg width="26" height="32" viewBox="0 0 26 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.47619 0C3.79509 0 1.60489 2.21216 1.60489 4.92014V6.33135C0.717479 6.33135 -3.60127e-08 7.05602 -3.60127e-08 7.95232V14.379C-3.60127e-08 15.2753 0.717479 16 1.60489 16H11.3475C12.2349 16 12.9524 15.2753 12.9524 14.379V7.95232C12.9524 7.05602 12.2349 6.33135 11.3475 6.33135V4.92014C11.3475 2.21216 9.1573 0 6.47619 0ZM9.6482 6.33135H3.30418V4.92014C3.30418 3.16567 4.72026 1.71633 6.47619 1.71633C8.23213 1.71633 9.6482 3.16567 9.6482 4.92014V6.33135Z" transform="scale(2)" fill="black"/>
+</svg>
diff --git a/packages/website/public/images/setup_account_icon.svg b/packages/website/public/images/setup_account_icon.svg
new file mode 100644
index 000000000..eaa5b2fd6
--- /dev/null
+++ b/packages/website/public/images/setup_account_icon.svg
@@ -0,0 +1,3 @@
+<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 9C16.5 13.1421 13.1421 16.5 9 16.5C4.85791 16.5 1.5 13.1421 1.5 9C1.5 4.85791 4.85791 1.5 9 1.5C13.1421 1.5 16.5 4.85791 16.5 9ZM18 9C18 13.9706 13.9707 18 9 18C4.0293 18 0 13.9706 0 9C0 4.02942 4.0293 0 9 0C13.9707 0 18 4.02942 18 9ZM9.21973 5.7196C9.5127 5.42664 9.9873 5.42664 10.2803 5.7196L13.0806 8.51953C13.373 8.8125 13.373 9.28735 13.0806 9.5802L10.2803 12.3802C9.9873 12.6731 9.5127 12.6731 9.21973 12.3802C8.92676 12.0873 8.92676 11.6124 9.21973 11.3196L10.7393 9.7998H4.75C4.33594 9.7998 4 9.46399 4 9.0498C4 8.63562 4.33594 8.2998 4.75 8.2998H10.7393L9.21973 6.78015C8.92676 6.4873 8.92676 6.01245 9.21973 5.7196Z" transform="scale(2)" fill="#3289F1"/>
+</svg>
diff --git a/packages/website/public/images/team/alexbrowne.png b/packages/website/public/images/team/alexbrowne.png
new file mode 100644
index 000000000..76a61913e
--- /dev/null
+++ b/packages/website/public/images/team/alexbrowne.png
diff --git a/packages/website/public/index.html b/packages/website/public/index.html
index 4c0985c71..060f2c3c2 100644
--- a/packages/website/public/index.html
+++ b/packages/website/public/index.html
@@ -70,7 +70,18 @@
         })(document, 'script', 'twitter-wjs');
     </script>
     <!-- End Twitter SDK -->
-
+    <!-- Hotjar Tracking Code for https://0xproject.com/ -->
+    <script>
+        (function (h, o, t, j, a, r) {
+            h.hj = h.hj || function () { (h.hj.q = h.hj.q || []).push(arguments) };
+            h._hjSettings = { hjid: 935597, hjsv: 6 };
+            a = o.getElementsByTagName('head')[0];
+            r = o.createElement('script'); r.async = 1;
+            r.src = t + h._hjSettings.hjid + j + h._hjSettings.hjsv;
+            a.appendChild(r);
+        })(window, document, 'https://static.hotjar.com/c/hotjar-', '.js?sv=');
+    </script>
+    <!-- End Hotjar Tracking Code -->
     <!-- Main -->
     <script type="text/javascript" crossorigin="anonymous" src="/bundle.js" charset="utf-8"></script>
 </body>
diff --git a/packages/website/ts/blockchain.ts b/packages/website/ts/blockchain.ts
index d18c34c32..cc2afa28a 100644
--- a/packages/website/ts/blockchain.ts
+++ b/packages/website/ts/blockchain.ts
@@ -12,10 +12,10 @@ import {
 import { isValidOrderHash, signOrderHashAsync } from '@0xproject/order-utils';
 import { EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import {
-    InjectedWeb3Subprovider,
     ledgerEthereumBrowserClientFactoryAsync,
     LedgerSubprovider,
     RedundantSubprovider,
+    SignerSubprovider,
     Subprovider,
 } from '@0xproject/subproviders';
 import {
@@ -46,6 +46,7 @@ import {
     Fill,
     InjectedProviderObservable,
     InjectedProviderUpdate,
+    InjectedWeb3,
     Order as PortalOrder,
     Providers,
     ProviderType,
@@ -59,7 +60,6 @@ import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { errorReporter } from 'ts/utils/error_reporter';
 import { utils } from 'ts/utils/utils';
-import Web3 = require('web3');
 import ProviderEngine = require('web3-provider-engine');
 import FilterSubprovider = require('web3-provider-engine/subproviders/filters');
 import RpcSubprovider = require('web3-provider-engine/subproviders/rpc');
@@ -73,6 +73,8 @@ const providerToName: { [provider: string]: string } = {
     [Providers.Metamask]: constants.PROVIDER_NAME_METAMASK,
     [Providers.Parity]: constants.PROVIDER_NAME_PARITY_SIGNER,
     [Providers.Mist]: constants.PROVIDER_NAME_MIST,
+    [Providers.Toshi]: constants.PROVIDER_NAME_TOSHI,
+    [Providers.Cipher]: constants.PROVIDER_NAME_CIPHER,
 };
 
 export class Blockchain {
@@ -95,8 +97,19 @@ export class Blockchain {
         }
         return providerNameIfExists;
     }
-    private static _getInjectedWeb3(): any {
-        return (window as any).web3;
+    private static _getInjectedWeb3(): InjectedWeb3 {
+        const injectedWeb3IfExists = (window as any).web3;
+        // Our core assumptions about the injected web3 object is that it has the following
+        // properties and methods.
+        if (
+            _.isUndefined(injectedWeb3IfExists) ||
+            _.isUndefined(injectedWeb3IfExists.version) ||
+            _.isUndefined(injectedWeb3IfExists.version.getNetwork) ||
+            _.isUndefined(injectedWeb3IfExists.currentProvider)
+        ) {
+            return undefined;
+        }
+        return injectedWeb3IfExists;
     }
     private static async _getInjectedWeb3ProviderNetworkIdIfExistsAsync(): Promise<number | undefined> {
         // Hack: We need to know the networkId the injectedWeb3 is connected to (if it is defined) in
@@ -117,7 +130,7 @@ export class Blockchain {
         return networkIdIfExists;
     }
     private static async _getProviderAsync(
-        injectedWeb3: Web3,
+        injectedWeb3: InjectedWeb3,
         networkIdIfExists: number,
         shouldUserLedgerProvider: boolean = false,
     ): Promise<[Provider, LedgerSubprovider | undefined]> {
@@ -151,7 +164,7 @@ export class Blockchain {
             // We catch all requests involving a users account and send it to the injectedWeb3
             // instance. All other requests go to the public hosted node.
             const provider = new ProviderEngine();
-            provider.addProvider(new InjectedWeb3Subprovider(injectedWeb3.currentProvider));
+            provider.addProvider(new SignerSubprovider(injectedWeb3.currentProvider));
             provider.addProvider(new FilterSubprovider());
             const rpcSubproviders = _.map(publicNodeUrlsIfExistsForNetworkId, publicNodeUrl => {
                 return new RpcSubprovider({
@@ -832,10 +845,10 @@ export class Blockchain {
         this._dispatcher.updateNetworkId(networkId);
         await this._rehydrateStoreWithContractEventsAsync();
     }
-    private _updateProviderName(injectedWeb3: Web3): void {
-        const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3);
+    private _updateProviderName(injectedWeb3IfExists: InjectedWeb3): void {
+        const doesInjectedWeb3Exist = !_.isUndefined(injectedWeb3IfExists);
         const providerName = doesInjectedWeb3Exist
-            ? Blockchain._getNameGivenProvider(injectedWeb3.currentProvider)
+            ? Blockchain._getNameGivenProvider(injectedWeb3IfExists.currentProvider)
             : constants.PROVIDER_NAME_PUBLIC;
         this._dispatcher.updateInjectedProviderName(providerName);
     }
diff --git a/packages/website/ts/blockchain_watcher.ts b/packages/website/ts/blockchain_watcher.ts
index df5f73fd1..4b23aa98a 100644
--- a/packages/website/ts/blockchain_watcher.ts
+++ b/packages/website/ts/blockchain_watcher.ts
@@ -10,6 +10,7 @@ export class BlockchainWatcher {
     private _watchBalanceIntervalId: NodeJS.Timer;
     private _prevUserEtherBalanceInWei?: BigNumber;
     private _prevUserAddressIfExists: string;
+    private _prevNodeVersionIfExists: string;
     constructor(dispatcher: Dispatcher, web3Wrapper: Web3Wrapper, shouldPollUserAddress: boolean) {
         this._dispatcher = dispatcher;
         this._shouldPollUserAddress = shouldPollUserAddress;
@@ -43,11 +44,9 @@ export class BlockchainWatcher {
         );
     }
     private async _updateBalanceAsync(): Promise<void> {
-        let prevNodeVersion: string;
-        // Check for node version changes
         const currentNodeVersion = await this._web3Wrapper.getNodeVersionAsync();
-        if (currentNodeVersion !== prevNodeVersion) {
-            prevNodeVersion = currentNodeVersion;
+        if (this._prevNodeVersionIfExists !== currentNodeVersion) {
+            this._prevNodeVersionIfExists = currentNodeVersion;
             this._dispatcher.updateNodeVersion(currentNodeVersion);
         }
 
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index 9ac78e80e..7b09cc92c 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -103,7 +103,6 @@ export class EthWethConversionDialog extends React.Component<
                                 shouldCheckAllowance={false}
                                 onChange={this._onValueChange.bind(this)}
                                 amount={this.state.value}
-                                onVisitBalancesPageClick={this.props.onCancelled}
                             />
                         ) : (
                             <EthAmountInput
@@ -112,7 +111,6 @@ export class EthWethConversionDialog extends React.Component<
                                 onChange={this._onValueChange.bind(this)}
                                 shouldCheckBalance={true}
                                 shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
-                                onVisitBalancesPageClick={this.props.onCancelled}
                             />
                         )}
                         <div className="pt1" style={{ fontSize: 12 }}>
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx
index 421f18b4f..8a98fdf69 100644
--- a/packages/website/ts/components/dialogs/send_dialog.tsx
+++ b/packages/website/ts/components/dialogs/send_dialog.tsx
@@ -80,7 +80,6 @@ export class SendDialog extends React.Component<SendDialogProps, SendDialogState
                     shouldCheckAllowance={false}
                     onChange={this._onValueChange.bind(this)}
                     amount={this.state.value}
-                    onVisitBalancesPageClick={this.props.onCancelled}
                     lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
                 />
             </div>
diff --git a/packages/website/ts/components/inputs/balance_bounded_input.tsx b/packages/website/ts/components/inputs/balance_bounded_input.tsx
index 968609030..f23beb436 100644
--- a/packages/website/ts/components/inputs/balance_bounded_input.tsx
+++ b/packages/website/ts/components/inputs/balance_bounded_input.tsx
@@ -3,9 +3,8 @@ import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
 import TextField from 'material-ui/TextField';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 import { RequiredLabel } from 'ts/components/ui/required_label';
-import { ValidatedBigNumberCallback, WebsitePaths } from 'ts/types';
+import { ValidatedBigNumberCallback } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 interface BalanceBoundedInputProps {
@@ -18,8 +17,6 @@ interface BalanceBoundedInputProps {
     shouldShowIncompleteErrs?: boolean;
     shouldCheckBalance: boolean;
     validate?: (amount: BigNumber) => React.ReactNode;
-    onVisitBalancesPageClick?: () => void;
-    shouldHideVisitBalancesLink?: boolean;
     isDisabled?: boolean;
     shouldShowErrs?: boolean;
     shouldShowUnderline?: boolean;
@@ -35,7 +32,6 @@ interface BalanceBoundedInputState {
 export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProps, BalanceBoundedInputState> {
     public static defaultProps: Partial<BalanceBoundedInputProps> = {
         shouldShowIncompleteErrs: false,
-        shouldHideVisitBalancesLink: false,
         isDisabled: false,
         shouldShowErrs: true,
         hintText: 'amount',
@@ -124,38 +120,11 @@ export class BalanceBoundedInput extends React.Component<BalanceBoundedInputProp
             return 'Cannot be zero';
         }
         if (this.props.shouldCheckBalance && amount.gt(balance)) {
-            return <span>Insufficient balance. {this._renderIncreaseBalanceLink()}</span>;
+            return <span>Insufficient balance.</span>;
         }
         const errMsg = _.isUndefined(this.props.validate) ? undefined : this.props.validate(amount);
         return errMsg;
     }
-    private _renderIncreaseBalanceLink(): React.ReactNode {
-        if (this.props.shouldHideVisitBalancesLink) {
-            return null;
-        }
-
-        const increaseBalanceText = 'Increase balance';
-        const linkStyle = {
-            cursor: 'pointer',
-            color: colors.darkestGrey,
-            textDecoration: 'underline',
-            display: 'inline',
-        };
-        if (_.isUndefined(this.props.onVisitBalancesPageClick)) {
-            return (
-                <Link to={`${WebsitePaths.Portal}/balances`} style={linkStyle}>
-                    {increaseBalanceText}
-                </Link>
-            );
-        } else {
-            return (
-                <div onClick={this.props.onVisitBalancesPageClick} style={linkStyle}>
-                    {increaseBalanceText}
-                </div>
-            );
-        }
-    }
-
     private _setAmountState(amount: string, balance: BigNumber, callback: () => void = _.noop): void {
         const errorMsg = this._validate(amount, balance);
         this.props.onErrorMsgChange(errorMsg);
diff --git a/packages/website/ts/components/inputs/eth_amount_input.tsx b/packages/website/ts/components/inputs/eth_amount_input.tsx
index 1f0f27410..552d4277a 100644
--- a/packages/website/ts/components/inputs/eth_amount_input.tsx
+++ b/packages/website/ts/components/inputs/eth_amount_input.tsx
@@ -14,9 +14,7 @@ interface EthAmountInputProps {
     onChange: ValidatedBigNumberCallback;
     onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
     shouldShowIncompleteErrs: boolean;
-    onVisitBalancesPageClick?: () => void;
     shouldCheckBalance: boolean;
-    shouldHideVisitBalancesLink?: boolean;
     shouldShowErrs?: boolean;
     shouldShowUnderline?: boolean;
     style?: React.CSSProperties;
@@ -46,8 +44,6 @@ export class EthAmountInput extends React.Component<EthAmountInputProps, EthAmou
                     onErrorMsgChange={this.props.onErrorMsgChange}
                     shouldCheckBalance={this.props.shouldCheckBalance}
                     shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
-                    onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
-                    shouldHideVisitBalancesLink={this.props.shouldHideVisitBalancesLink}
                     hintText={this.props.hintText}
                     shouldShowErrs={this.props.shouldShowErrs}
                     shouldShowUnderline={this.props.shouldShowUnderline}
diff --git a/packages/website/ts/components/inputs/token_amount_input.tsx b/packages/website/ts/components/inputs/token_amount_input.tsx
index a67120320..93ef516cf 100644
--- a/packages/website/ts/components/inputs/token_amount_input.tsx
+++ b/packages/website/ts/components/inputs/token_amount_input.tsx
@@ -21,7 +21,6 @@ interface TokenAmountInputProps {
     shouldCheckAllowance: boolean;
     onChange: ValidatedBigNumberCallback;
     onErrorMsgChange?: (errorMsg: React.ReactNode) => void;
-    onVisitBalancesPageClick?: () => void;
     lastForceTokenStateRefetch: number;
     shouldShowErrs?: boolean;
     shouldShowUnderline?: boolean;
@@ -88,7 +87,6 @@ export class TokenAmountInput extends React.Component<TokenAmountInputProps, Tok
                     validate={this._validate.bind(this)}
                     shouldCheckBalance={this.props.shouldCheckBalance}
                     shouldShowIncompleteErrs={this.props.shouldShowIncompleteErrs}
-                    onVisitBalancesPageClick={this.props.onVisitBalancesPageClick}
                     isDisabled={!this.state.isBalanceAndAllowanceLoaded}
                     hintText={this.props.hintText}
                     shouldShowErrs={this.props.shouldShowErrs}
diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index 48e8ab022..ba5b3d6ea 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -39,7 +39,7 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
     borderRadius,
 }) => (
     <Island borderRadius={borderRadius}>
-        <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
+        <Container paddingRight="30px" paddingLeft="30px" paddingTop="15px" paddingBottom="15px">
             <div className="flex flex-column">
                 <div className="flex justify-between">
                     <Title>{title}</Title>
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 1f4c6df82..c2b4a4ca7 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -6,13 +6,29 @@ import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboardi
 import { Animation } from 'ts/components/ui/animation';
 import { Container } from 'ts/components/ui/container';
 import { Overlay } from 'ts/components/ui/overlay';
+import { PointerDirection } from 'ts/components/ui/pointer';
 import { zIndex } from 'ts/style/z_index';
 
-export interface Step {
+export interface FixedPositionSettings {
+    type: 'fixed';
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    pointerDirection?: PointerDirection;
+}
+
+export interface TargetPositionSettings {
+    type: 'target';
     target: string;
+    placement: Placement;
+}
+
+export interface Step {
+    // Provide either a CSS selector, or fixed position settings. Only applies to desktop.
+    position: TargetPositionSettings | FixedPositionSettings;
     title?: string;
     content: React.ReactNode;
-    placement?: Placement;
     shouldHideBackButton?: boolean;
     shouldHideNextButton?: boolean;
     continueButtonDisplay?: ContinueButtonDisplay;
@@ -40,18 +56,30 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             return null;
         }
         let onboardingElement = null;
+        const currentStep = this._getCurrentStep();
         if (this.props.isMobile) {
-            onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
-        } else {
+            onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardingCard()}</Animation>;
+        } else if (currentStep.position.type === 'target') {
+            const { placement, target } = currentStep.position;
             onboardingElement = (
-                <Popper
-                    referenceElement={this._getElementForStep()}
-                    placement={this._getCurrentStep().placement}
-                    positionFixed={true}
-                >
+                <Popper referenceElement={document.querySelector(target)} placement={placement} positionFixed={true}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
             );
+        } else if (currentStep.position.type === 'fixed') {
+            const { top, right, bottom, left, pointerDirection } = currentStep.position;
+            onboardingElement = (
+                <Container
+                    position="fixed"
+                    zIndex={zIndex.aboveOverlay}
+                    top={top}
+                    right={right}
+                    bottom={bottom}
+                    left={left}
+                >
+                    {this._renderToolTip(pointerDirection)}
+                </Container>
+            );
         }
         if (this.props.disableOverlay) {
             return onboardingElement;
@@ -63,9 +91,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             </div>
         );
     }
-    private _getElementForStep(): Element {
-        return document.querySelector(this._getCurrentStep().target);
-    }
     private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
         const customStyles = { zIndex: zIndex.aboveOverlay };
         // On re-render, we want to re-center the popper.
@@ -76,7 +101,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             </div>
         );
     }
-    private _renderToolTip(): React.ReactNode {
+    private _renderToolTip(pointerDirection?: PointerDirection): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
@@ -94,12 +119,13 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     continueButtonDisplay={step.continueButtonDisplay}
                     continueButtonText={step.continueButtonText}
                     onContinueButtonClick={step.onContinueButtonClick}
+                    pointerDirection={pointerDirection}
                 />
             </Container>
         );
     }
 
-    private _renderOnboardignCard(): React.ReactNode {
+    private _renderOnboardingCard(): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 6bfa5c75f..b7c5a9f64 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -9,7 +9,12 @@ import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboardin
 import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step';
 import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step';
 import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step';
-import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
+import {
+    FixedPositionSettings,
+    OnboardingFlow,
+    Step,
+    TargetPositionSettings,
+} from 'ts/components/onboarding/onboarding_flow';
 import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowances_onboarding_step';
 import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step';
 import {
@@ -45,8 +50,6 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
     private _unlisten: () => void;
     public componentDidMount(): void {
         this._adjustStepIfShould();
-        // Wait until the step is adjusted to decide whether we should show onboarding.
-        setTimeout(this._autoStartOnboardingIfShould.bind(this), 1000);
         // If there is a route change, just close onboarding.
         this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false));
     }
@@ -61,6 +64,9 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 document.querySelector('.wallet').scrollIntoView();
             }
         }
+        if (!prevProps.blockchainIsLoaded && this.props.blockchainIsLoaded) {
+            this._autoStartOnboardingIfShould();
+        }
     }
     public render(): React.ReactNode {
         return (
@@ -76,56 +82,61 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         );
     }
     private _getSteps(): Step[] {
+        const nextToWalletPosition: TargetPositionSettings = {
+            type: 'target',
+            target: '.wallet',
+            placement: 'right',
+        };
+        const underMetamaskExtension: FixedPositionSettings = {
+            type: 'fixed',
+            top: '30px',
+            right: '10px',
+            pointerDirection: 'top',
+        };
         const steps: Step[] = [
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: '0x Ecosystem Setup',
                 content: <InstallWalletOnboardingStep />,
-                placement: 'right',
                 shouldHideBackButton: true,
                 shouldHideNextButton: true,
             },
             {
-                target: '.wallet',
+                position: underMetamaskExtension,
                 title: '0x Ecosystem Setup',
                 content: <UnlockWalletOnboardingStep />,
-                placement: 'right',
                 shouldHideBackButton: true,
                 shouldHideNextButton: true,
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: '0x Ecosystem Account Setup',
                 content: <IntroOnboardingStep />,
-                placement: 'right',
                 shouldHideBackButton: true,
                 continueButtonDisplay: 'enabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: 'Step 1: Add ETH',
                 content: (
                     <AddEthOnboardingStep userEthBalanceInWei={this.props.userEtherBalanceInWei || new BigNumber(0)} />
                 ),
-                placement: 'right',
                 continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: 'Step 2: Wrap ETH',
                 content: <WrapEthOnboardingStep1 />,
-                placement: 'right',
                 continueButtonDisplay: 'enabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: 'Step 2: Wrap ETH',
                 content: <WrapEthOnboardingStep2 />,
-                placement: 'right',
                 continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: 'Step 2: Wrap ETH',
                 content: (
                     <WrapEthOnboardingStep3
@@ -134,11 +145,10 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                         }
                     />
                 ),
-                placement: 'right',
                 continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: 'Step 3: Unlock Tokens',
                 content: (
                     <SetAllowancesOnboardingStep
@@ -147,14 +157,12 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                         doesUserHaveAllowancesForWethAndZrx={this._doesUserHaveAllowancesForWethAndZrx()}
                     />
                 ),
-                placement: 'right',
                 continueButtonDisplay: this._doesUserHaveAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: '🎉  The Ecosystem Awaits',
                 content: <CongratsOnboardingStep />,
-                placement: 'right',
                 continueButtonDisplay: 'enabled',
                 shouldHideNextButton: true,
                 continueButtonText: 'Enter the 0x Ecosystem',
@@ -221,7 +229,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
     }
     private _autoStartOnboardingIfShould(): void {
         if (
-            (this.props.stepIndex === 0 && !this.props.isRunning) ||
+            (this.props.stepIndex === 0 && !this.props.isRunning && this.props.blockchainIsLoaded) ||
             (!this.props.isRunning && !this.props.hasBeenClosed && this.props.blockchainIsLoaded)
         ) {
             const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
index 0039aa545..4ed7137d4 100644
--- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
@@ -10,7 +10,7 @@ export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOn
             <Container marginTop="15px" marginBottom="15px">
                 <img src="/images/metamask_icon.png" height="50px" width="50px" />
             </Container>
-            <Text center={true}>Unlock your metamask extension to get started.</Text>
+            <Text center={true}>Unlock your MetaMask extension to get started.</Text>
         </div>
     </div>
 );
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 9c0cb866d..8c3b5cfd7 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -1,7 +1,6 @@
 import { colors, constants as sharedConstants } from '@0xproject/react-shared';
 import { BigNumber } from '@0xproject/utils';
 import * as _ from 'lodash';
-import Help from 'material-ui/svg-icons/action/help';
 import * as React from 'react';
 import * as DocumentTitle from 'react-document-title';
 import { Link, Route, RouteComponentProps, Switch } from 'react-router-dom';
@@ -24,6 +23,7 @@ import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
 import { TradeHistory } from 'ts/components/trade_history/trade_history';
 import { Container } from 'ts/components/ui/container';
 import { FlashMessage } from 'ts/components/ui/flash_message';
+import { Image } from 'ts/components/ui/image';
 import { Text } from 'ts/components/ui/text';
 import { Wallet } from 'ts/components/wallet/wallet';
 import { GenerateOrderForm } from 'ts/containers/generate_order_form';
@@ -368,11 +368,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
         const shouldStartOnboarding = !isMobile || this.props.location.pathname === `${WebsitePaths.Portal}/account`;
         const startOnboarding = (
             <Container className="flex items-center center">
-                <Help style={{ width: '20px', height: '20px' }} color={colors.mediumBlue} />
-                <Container marginLeft="8px">
-                    <Text fontColor={colors.mediumBlue} fontSize="16px" onClick={this._startOnboarding.bind(this)}>
-                        Learn how to set up your account
-                    </Text>
+                <Text fontColor={colors.mediumBlue} fontSize="16px" onClick={this._startOnboarding.bind(this)}>
+                    Set up your account to start trading
+                </Text>
+                <Container marginLeft="8px" paddingTop="3px">
+                    <Image src="/images/setup_account_icon.svg" height="20px" width="20x" />
                 </Container>
             </Container>
         );
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 b26bf512b..02bc1b014 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -9,6 +9,7 @@ import { Container } from 'ts/components/ui/container';
 import { Image } from 'ts/components/ui/image';
 import { Island } from 'ts/components/ui/island';
 import { colors } from 'ts/style/colors';
+import { media } from 'ts/style/media';
 import { styled } from 'ts/style/theme';
 import { WebsiteBackendRelayerInfo } from 'ts/types';
 import { utils } from 'ts/utils/utils';
@@ -55,7 +56,7 @@ const styles: Styles = {
 };
 
 const FALLBACK_IMG_SRC = '/images/relayer_fallback.png';
-const FALLBACK_PRIMARY_COLOR = colors.grey200;
+const FALLBACK_PRIMARY_COLOR = colors.grey300;
 const NO_CONTENT_MESSAGE = '--';
 const RELAYER_ICON_HEIGHT = '110px';
 
@@ -111,6 +112,9 @@ const GridTile = styled(PlainGridTile)`
     &:hover {
         transform: translate(0px, -3px);
     }
+    ${media.small`
+        transform: none;
+    `};
 `;
 
 interface SectionProps {
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index 8743e4320..806eaeea5 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -1,23 +1,26 @@
 import { Styles } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
-import RaisedButton from 'material-ui/RaisedButton';
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
-import Lock from 'material-ui/svg-icons/action/lock';
 import * as React from 'react';
 
 import { Blockchain } from 'ts/blockchain';
-import { ProviderPicker } from 'ts/components/top_bar/provider_picker';
 import { AccountConnection } from 'ts/components/ui/account_connection';
 import { Container } from 'ts/components/ui/container';
 import { DropDown } from 'ts/components/ui/drop_down';
 import { Identicon } from 'ts/components/ui/identicon';
+import { Image } from 'ts/components/ui/image';
 import { Island } from 'ts/components/ui/island';
+import {
+    CopyAddressSimpleMenuItem,
+    DifferentWalletSimpleMenuItem,
+    GoToAccountManagementSimpleMenuItem,
+    SimpleMenu,
+} from 'ts/components/ui/simple_menu';
 import { Text } from 'ts/components/ui/text';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { AccountState, ProviderType } from 'ts/types';
-import { constants } from 'ts/utils/constants';
 import { utils } from 'ts/utils/utils';
 
 const ROOT_HEIGHT = 24;
@@ -44,11 +47,7 @@ const styles: Styles = {
 
 export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> {
     public render(): React.ReactNode {
-        const isExternallyInjectedProvider = utils.isExternallyInjected(
-            this.props.providerType,
-            this.props.injectedProviderName,
-        );
-        const hoverActiveNode = (
+        const activeNode = (
             <Island className="flex items-center py1 px2" style={styles.root}>
                 {this._renderIcon()}
                 <Container marginLeft="12px" marginRight="12px">
@@ -57,93 +56,34 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 {this._renderInjectedProvider()}
             </Island>
         );
-        const hasLedgerProvider = this.props.providerType === ProviderType.Ledger;
-        const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle';
         return (
             <div style={{ width: 'fit-content', height: 48, float: 'right' }}>
                 <DropDown
-                    hoverActiveNode={hoverActiveNode}
-                    popoverContent={this.renderPopoverContent(isExternallyInjectedProvider, hasLedgerProvider)}
-                    anchorOrigin={{ horizontal: horizontalPosition, vertical: 'bottom' }}
-                    targetOrigin={{ horizontal: horizontalPosition, vertical: 'top' }}
+                    activeNode={activeNode}
+                    popoverContent={this._renderPopoverContent()}
+                    anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
+                    targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
                     zDepth={1}
                 />
             </div>
         );
     }
-    public renderPopoverContent(hasInjectedProvider: boolean, hasLedgerProvider: boolean): React.ReactNode {
-        if (!this._isBlockchainReady()) {
-            return null;
-        } else if (hasInjectedProvider || hasLedgerProvider) {
-            return (
-                <ProviderPicker
-                    dispatcher={this.props.dispatcher}
-                    networkId={this.props.networkId}
-                    injectedProviderName={this.props.injectedProviderName}
-                    providerType={this.props.providerType}
-                    onToggleLedgerDialog={this.props.onToggleLedgerDialog}
-                    blockchain={this.props.blockchain}
-                />
-            );
-        } else {
-            // Nothing to connect to, show install/info popover
-            return (
-                <div className="px2" style={{ maxWidth: 420 }}>
-                    <div className="center h4 py2" style={{ color: colors.grey700 }}>
-                        Choose a wallet:
-                    </div>
-                    <div className="flex pb3">
-                        <div className="center px2">
-                            <div style={{ color: colors.darkGrey }}>Install a browser wallet</div>
-                            <div className="py2">
-                                <img src="/images/metamask_or_parity.png" width="135" />
-                            </div>
-                            <div>
-                                Use{' '}
-                                <a
-                                    href={constants.URL_METAMASK_CHROME_STORE}
-                                    target="_blank"
-                                    style={{ color: colors.lightBlueA700 }}
-                                >
-                                    Metamask
-                                </a>{' '}
-                                or{' '}
-                                <a
-                                    href={constants.URL_PARITY_CHROME_STORE}
-                                    target="_blank"
-                                    style={{ color: colors.lightBlueA700 }}
-                                >
-                                    Parity Signer
-                                </a>
-                            </div>
-                        </div>
-                        <div>
-                            <div
-                                className="pl1 ml1"
-                                style={{ borderLeft: `1px solid ${colors.grey300}`, height: 65 }}
-                            />
-                            <div className="py1">or</div>
-                            <div
-                                className="pl1 ml1"
-                                style={{ borderLeft: `1px solid ${colors.grey300}`, height: 68 }}
-                            />
-                        </div>
-                        <div className="px2 center">
-                            <div style={{ color: colors.darkGrey }}>Connect to a ledger hardware wallet</div>
-                            <div style={{ paddingTop: 21, paddingBottom: 29 }}>
-                                <img src="/images/ledger_icon.png" style={{ width: 80 }} />
-                            </div>
-                            <div>
-                                <RaisedButton
-                                    style={{ width: '100%' }}
-                                    label="Use Ledger"
-                                    onClick={this.props.onToggleLedgerDialog}
-                                />
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            );
+    private _renderPopoverContent(): React.ReactNode {
+        const accountState = this._getAccountState();
+        switch (accountState) {
+            case AccountState.Ready:
+                return (
+                    <SimpleMenu>
+                        <CopyAddressSimpleMenuItem userAddress={this.props.userAddress} />
+                        <DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} />
+                        <GoToAccountManagementSimpleMenuItem />
+                    </SimpleMenu>
+                );
+            case AccountState.Disconnected:
+            case AccountState.Locked:
+            case AccountState.Loading:
+            default:
+                return null;
         }
     }
     private _renderIcon(): React.ReactNode {
@@ -154,7 +94,7 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
             case AccountState.Loading:
                 return <CircularProgress size={ROOT_HEIGHT} thickness={2} />;
             case AccountState.Locked:
-                return <Lock color={colors.black} />;
+                return <Image src="/images/lock_icon.svg" height="20px" width="20px" />;
             case AccountState.Disconnected:
                 return <ActionAccountBalanceWallet color={colors.mediumBlue} />;
             default:
diff --git a/packages/website/ts/components/top_bar/provider_picker.tsx b/packages/website/ts/components/top_bar/provider_picker.tsx
deleted file mode 100644
index 7937f2e9d..000000000
--- a/packages/website/ts/components/top_bar/provider_picker.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { colors, constants as sharedConstants } from '@0xproject/react-shared';
-import { RadioButton, RadioButtonGroup } from 'material-ui/RadioButton';
-import * as React from 'react';
-import { Blockchain } from 'ts/blockchain';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { ProviderType } from 'ts/types';
-
-interface ProviderPickerProps {
-    networkId: number;
-    injectedProviderName: string;
-    providerType: ProviderType;
-    onToggleLedgerDialog: () => void;
-    dispatcher: Dispatcher;
-    blockchain: Blockchain;
-}
-
-interface ProviderPickerState {}
-
-export class ProviderPicker extends React.Component<ProviderPickerProps, ProviderPickerState> {
-    public render(): React.ReactNode {
-        const isLedgerSelected = this.props.providerType === ProviderType.Ledger;
-        const menuStyle = {
-            padding: 10,
-            paddingTop: 15,
-            paddingBottom: 15,
-        };
-        // Show dropdown with two options
-        return (
-            <div style={{ width: 225, overflow: 'hidden' }}>
-                <RadioButtonGroup name="provider" defaultSelected={this.props.providerType}>
-                    <RadioButton
-                        onClick={this._onProviderRadioChanged.bind(this, ProviderType.Injected)}
-                        style={{ ...menuStyle, backgroundColor: !isLedgerSelected && colors.grey50 }}
-                        value={ProviderType.Injected}
-                        label={this._renderLabel(this.props.injectedProviderName, !isLedgerSelected)}
-                    />
-                    <RadioButton
-                        onClick={this._onProviderRadioChanged.bind(this, ProviderType.Ledger)}
-                        style={{ ...menuStyle, backgroundColor: isLedgerSelected && colors.grey50 }}
-                        value={ProviderType.Ledger}
-                        label={this._renderLabel('Ledger Nano S', isLedgerSelected)}
-                    />
-                </RadioButtonGroup>
-            </div>
-        );
-    }
-    private _renderLabel(title: string, shouldShowNetwork: boolean): React.ReactNode {
-        const label = (
-            <div className="flex">
-                <div style={{ fontSize: 14 }}>{title}</div>
-                {shouldShowNetwork && this._renderNetwork()}
-            </div>
-        );
-        return label;
-    }
-    private _renderNetwork(): React.ReactNode {
-        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
-        return (
-            <div className="flex" style={{ marginTop: 1 }}>
-                <div className="relative" style={{ width: 14, paddingLeft: 14 }}>
-                    <img
-                        src={`/images/network_icons/${networkName.toLowerCase()}.png`}
-                        className="absolute"
-                        style={{ top: 6, width: 10 }}
-                    />
-                </div>
-                <div style={{ color: colors.lightGrey, fontSize: 11 }}>{networkName}</div>
-            </div>
-        );
-    }
-    private _onProviderRadioChanged(value: string): void {
-        if (value === ProviderType.Ledger) {
-            this.props.onToggleLedgerDialog();
-        } else {
-            // tslint:disable-next-line:no-floating-promises
-            this.props.blockchain.updateProviderToInjectedAsync();
-        }
-    }
-}
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index fac6c131f..778536663 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -199,7 +199,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
             cursor: 'pointer',
             paddingTop: 16,
         };
-        const hoverActiveNode = (
+        const activeNode = (
             <div className="flex relative" style={{ color: menuIconStyle.color }}>
                 <div style={{ paddingRight: 10 }}>{this.props.translate.get(Key.Developers, Deco.Cap)}</div>
                 <div className="absolute" style={{ paddingLeft: 3, right: 3, top: -2 }}>
@@ -224,7 +224,7 @@ export class TopBar extends React.Component<TopBarProps, TopBarState> {
                         <div className={menuClasses}>
                             <div className="flex justify-between">
                                 <DropDown
-                                    hoverActiveNode={hoverActiveNode}
+                                    activeNode={activeNode}
                                     popoverContent={popoverContent}
                                     anchorOrigin={{ horizontal: 'middle', vertical: 'bottom' }}
                                     targetOrigin={{ horizontal: 'middle', vertical: 'top' }}
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index fb718d731..edbf8814b 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -17,6 +17,7 @@ export interface ContainerProps {
     maxHeight?: StringOrNum;
     width?: StringOrNum;
     height?: StringOrNum;
+    minWidth?: StringOrNum;
     minHeight?: StringOrNum;
     isHidden?: boolean;
     className?: string;
diff --git a/packages/website/ts/components/ui/drop_down.tsx b/packages/website/ts/components/ui/drop_down.tsx
index 22cb942f8..4d5caef08 100644
--- a/packages/website/ts/components/ui/drop_down.tsx
+++ b/packages/website/ts/components/ui/drop_down.tsx
@@ -1,4 +1,4 @@
-import Popover, { PopoverAnimationVertical } from 'material-ui/Popover';
+import Popover from 'material-ui/Popover';
 import * as React from 'react';
 import { MaterialUIPosition } from 'ts/types';
 
@@ -7,13 +7,20 @@ const DEFAULT_STYLE = {
     fontSize: 14,
 };
 
-interface DropDownProps {
-    hoverActiveNode: React.ReactNode;
+export enum DropdownMouseEvent {
+    Hover = 'hover',
+    Click = 'click',
+}
+
+export interface DropDownProps {
+    activeNode: React.ReactNode;
     popoverContent: React.ReactNode;
     anchorOrigin: MaterialUIPosition;
     targetOrigin: MaterialUIPosition;
     style?: React.CSSProperties;
     zDepth?: number;
+    activateEvent?: DropdownMouseEvent;
+    closeEvent?: DropdownMouseEvent;
 }
 
 interface DropDownState {
@@ -25,6 +32,8 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
     public static defaultProps: Partial<DropDownProps> = {
         style: DEFAULT_STYLE,
         zDepth: 1,
+        activateEvent: DropdownMouseEvent.Hover,
+        closeEvent: DropdownMouseEvent.Hover,
     };
     private _isHovering: boolean;
     private _popoverCloseCheckIntervalId: number;
@@ -58,46 +67,61 @@ export class DropDown extends React.Component<DropDownProps, DropDownState> {
                 onMouseEnter={this._onHover.bind(this)}
                 onMouseLeave={this._onHoverOff.bind(this)}
             >
-                {this.props.hoverActiveNode}
+                <div onClick={this._onActiveNodeClick.bind(this)}>{this.props.activeNode}</div>
                 <Popover
                     open={this.state.isDropDownOpen}
                     anchorEl={this.state.anchorEl}
                     anchorOrigin={this.props.anchorOrigin}
                     targetOrigin={this.props.targetOrigin}
                     onRequestClose={this._closePopover.bind(this)}
-                    useLayerForClickAway={false}
-                    animation={PopoverAnimationVertical}
+                    useLayerForClickAway={this.props.closeEvent === DropdownMouseEvent.Click}
+                    animated={false}
                     zDepth={this.props.zDepth}
                 >
-                    <div onMouseEnter={this._onHover.bind(this)} onMouseLeave={this._onHoverOff.bind(this)}>
+                    <div
+                        onMouseEnter={this._onHover.bind(this)}
+                        onMouseLeave={this._onHoverOff.bind(this)}
+                        onClick={this._closePopover.bind(this)}
+                    >
                         {this.props.popoverContent}
                     </div>
                 </Popover>
             </div>
         );
     }
+    private _onActiveNodeClick(event: React.FormEvent<HTMLInputElement>): void {
+        if (this.props.activateEvent === DropdownMouseEvent.Click) {
+            this.setState({
+                isDropDownOpen: true,
+                anchorEl: event.currentTarget,
+            });
+        }
+    }
     private _onHover(event: React.FormEvent<HTMLInputElement>): void {
         this._isHovering = true;
-        this._checkIfShouldOpenPopover(event);
+        if (this.props.activateEvent === DropdownMouseEvent.Hover) {
+            this._checkIfShouldOpenPopover(event);
+        }
+    }
+    private _onHoverOff(): void {
+        this._isHovering = false;
     }
     private _checkIfShouldOpenPopover(event: React.FormEvent<HTMLInputElement>): void {
         if (this.state.isDropDownOpen) {
             return; // noop
         }
-
         this.setState({
             isDropDownOpen: true,
             anchorEl: event.currentTarget,
         });
     }
-    private _onHoverOff(): void {
-        this._isHovering = false;
-    }
     private _checkIfShouldClosePopover(): void {
-        if (!this.state.isDropDownOpen || this._isHovering) {
+        if (!this.state.isDropDownOpen) {
             return; // noop
         }
-        this._closePopover();
+        if (this.props.closeEvent === DropdownMouseEvent.Hover && !this._isHovering) {
+            this._closePopover();
+        }
     }
     private _closePopover(): void {
         this.setState({
diff --git a/packages/website/ts/components/ui/simple_menu.tsx b/packages/website/ts/components/ui/simple_menu.tsx
new file mode 100644
index 000000000..74b8ef6ae
--- /dev/null
+++ b/packages/website/ts/components/ui/simple_menu.tsx
@@ -0,0 +1,88 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import * as CopyToClipboard from 'react-copy-to-clipboard';
+import { Link } from 'react-router-dom';
+
+import { Container } from 'ts/components/ui/container';
+import { Text } from 'ts/components/ui/text';
+import { colors } from 'ts/style/colors';
+import { WebsitePaths } from 'ts/types';
+
+export interface SimpleMenuProps {
+    minWidth?: number | string;
+}
+
+export const SimpleMenu: React.StatelessComponent<SimpleMenuProps> = ({ children, minWidth }) => {
+    return (
+        <Container
+            marginLeft="16px"
+            marginRight="16px"
+            marginBottom="16px"
+            minWidth={minWidth}
+            className="flex flex-column"
+        >
+            {children}
+        </Container>
+    );
+};
+
+SimpleMenu.defaultProps = {
+    minWidth: '220px',
+};
+
+export interface SimpleMenuItemProps {
+    displayText: string;
+    onClick?: () => void;
+}
+export const SimpleMenuItem: React.StatelessComponent<SimpleMenuItemProps> = ({ displayText, onClick }) => {
+    // Falling back to _.noop for onclick retains the hovering effect
+    return (
+        <Container marginTop="16px" className="flex flex-column">
+            <Text
+                fontSize="14px"
+                fontColor={colors.darkGrey}
+                onClick={onClick || _.noop}
+                hoverColor={colors.mediumBlue}
+            >
+                {displayText}
+            </Text>
+        </Container>
+    );
+};
+
+export interface CopyAddressSimpleMenuItemProps {
+    userAddress: string;
+    onClick?: () => void;
+}
+export const CopyAddressSimpleMenuItem: React.StatelessComponent<CopyAddressSimpleMenuItemProps> = ({
+    userAddress,
+    onClick,
+}) => {
+    return (
+        <CopyToClipboard text={userAddress}>
+            <SimpleMenuItem displayText="Copy Address to Clipboard" onClick={onClick} />
+        </CopyToClipboard>
+    );
+};
+
+export interface GoToAccountManagementSimpleMenuItemProps {
+    onClick?: () => void;
+}
+export const GoToAccountManagementSimpleMenuItem: React.StatelessComponent<
+    GoToAccountManagementSimpleMenuItemProps
+> = ({ onClick }) => {
+    return (
+        <Link to={`${WebsitePaths.Portal}/account`} style={{ textDecoration: 'none' }}>
+            <SimpleMenuItem displayText="Manage Account..." onClick={onClick} />
+        </Link>
+    );
+};
+
+export interface DifferentWalletSimpleMenuItemProps {
+    onClick?: () => void;
+}
+export const DifferentWalletSimpleMenuItem: React.StatelessComponent<DifferentWalletSimpleMenuItemProps> = ({
+    onClick,
+}) => {
+    return <SimpleMenuItem displayText="Use a Different Wallet..." onClick={onClick} />;
+};
diff --git a/packages/website/ts/components/ui/text.tsx b/packages/website/ts/components/ui/text.tsx
index c1cb2ade4..315f72854 100644
--- a/packages/website/ts/components/ui/text.tsx
+++ b/packages/website/ts/components/ui/text.tsx
@@ -3,7 +3,7 @@ import { darken } from 'polished';
 import * as React from 'react';
 import { styled } from 'ts/style/theme';
 
-export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4';
+export type TextTag = 'p' | 'div' | 'span' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'i';
 
 export interface TextProps {
     className?: string;
@@ -17,6 +17,7 @@ export interface TextProps {
     fontWeight?: number | string;
     textDecorationLine?: string;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    hoverColor?: string;
 }
 
 const PlainText: React.StatelessComponent<TextProps> = ({ children, className, onClick, Tag }) => (
@@ -37,7 +38,7 @@ export const Text = styled(PlainText)`
     ${props => (props.onClick ? 'cursor: pointer' : '')};
     transition: color 0.5s ease;
     &:hover {
-        ${props => (props.onClick ? `color: ${darken(0.3, props.fontColor)}` : '')};
+        ${props => (props.onClick ? `color: ${props.hoverColor || darken(0.3, props.fontColor)}` : '')};
     }
 `;
 
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 1f1e3598a..1e0b9ec48 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -1,19 +1,25 @@
 import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import { BigNumber, errorUtils } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
 import * as React from 'react';
-import { Link } from 'react-router-dom';
 import firstBy = require('thenby');
 
 import { Blockchain } from 'ts/blockchain';
 import { AccountConnection } from 'ts/components/ui/account_connection';
 import { Container } from 'ts/components/ui/container';
+import { DropDown, DropdownMouseEvent } from 'ts/components/ui/drop_down';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Identicon } from 'ts/components/ui/identicon';
 import { Island } from 'ts/components/ui/island';
+import {
+    CopyAddressSimpleMenuItem,
+    DifferentWalletSimpleMenuItem,
+    GoToAccountManagementSimpleMenuItem,
+    SimpleMenu,
+    SimpleMenuItem,
+} from 'ts/components/ui/simple_menu';
 import { Text } from 'ts/components/ui/text';
 import { TokenIcon } from 'ts/components/ui/token_icon';
 import { BodyOverlay } from 'ts/components/wallet/body_overlay';
@@ -34,7 +40,6 @@ import {
     TokenByAddress,
     TokenState,
     TokenStateByAddress,
-    WebsitePaths,
 } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
 import { constants } from 'ts/utils/constants';
@@ -83,9 +88,7 @@ const ICON_DIMENSION = 28;
 const BODY_ITEM_KEY = 'BODY';
 const HEADER_ITEM_KEY = 'HEADER';
 const ETHER_ITEM_KEY = 'ETHER';
-const USD_DECIMAL_PLACES = 2;
 const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
-const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
 const PLACEHOLDER_COLOR = colors.grey300;
 const LOADING_ROWS_COUNT = 6;
 
@@ -189,6 +192,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
     }
     private _renderConnectedHeaderRows(): React.ReactElement<{}> {
+        const isMobile = this.props.screenWidth === ScreenWidths.Sm;
         const userAddress = this.props.userAddress;
         const accountState = this._getAccountState();
         const main = (
@@ -199,15 +203,49 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                 <AccountConnection accountState={accountState} injectedProviderName={this.props.injectedProviderName} />
             </div>
         );
+        const onClick = _.noop;
+        const accessory = (
+            <DropDown
+                activeNode={
+                    // this container gives the menu button more of a hover target for the drop down
+                    // it prevents accidentally closing the menu by moving off of the button
+                    <Container paddingLeft="100px" paddingRight="15px">
+                        <Text
+                            className="zmdi zmdi-more-horiz"
+                            Tag="i"
+                            fontSize="32px"
+                            fontFamily="Material-Design-Iconic-Font"
+                            fontColor={colors.darkGrey}
+                            onClick={onClick}
+                            hoverColor={colors.mediumBlue}
+                        />
+                    </Container>
+                }
+                popoverContent={
+                    <SimpleMenu minWidth="150px">
+                        <CopyAddressSimpleMenuItem userAddress={this.props.userAddress} />
+                        <DifferentWalletSimpleMenuItem onClick={this.props.onToggleLedgerDialog} />
+                        <SimpleMenuItem displayText="Add Tokens..." onClick={this.props.onAddToken} />
+                        <SimpleMenuItem displayText="Remove Tokens..." onClick={this.props.onRemoveToken} />
+                        <GoToAccountManagementSimpleMenuItem />
+                    </SimpleMenu>
+                }
+                anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
+                targetOrigin={{ horizontal: 'right', vertical: 'top' }}
+                zDepth={1}
+                activateEvent={DropdownMouseEvent.Click}
+                closeEvent={isMobile ? DropdownMouseEvent.Click : DropdownMouseEvent.Hover}
+            />
+        );
         return (
-            <Link key={HEADER_ITEM_KEY} to={ACCOUNT_PATH} style={{ textDecoration: 'none' }}>
-                <StandardIconRow
-                    icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
-                    main={main}
-                    minHeight="60px"
-                    backgroundColor={colors.white}
-                />
-            </Link>
+            <StandardIconRow
+                key={HEADER_ITEM_KEY}
+                icon={<Identicon address={userAddress} diameter={ICON_DIMENSION} />}
+                main={main}
+                accessory={accessory}
+                minHeight="60px"
+                backgroundColor={colors.white}
+            />
         );
     }
     private _renderBody(): React.ReactElement<{}> {
@@ -320,8 +358,24 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             this.state.wrappedEtherDirection === accessoryItemConfig.wrappedEtherDirection &&
             !_.isUndefined(this.props.userEtherBalanceInWei);
         const etherToken = this._getEthToken();
+        const wrapEtherItem = shouldShowWrapEtherItem ? (
+            <WrapEtherItem
+                userAddress={this.props.userAddress}
+                networkId={this.props.networkId}
+                blockchain={this.props.blockchain}
+                dispatcher={this.props.dispatcher}
+                userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+                direction={accessoryItemConfig.wrappedEtherDirection}
+                etherToken={etherToken}
+                lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+                onConversionSuccessful={this._closeWrappedEtherActionRow.bind(this)}
+                // tslint:disable:jsx-no-lambda
+                refetchEthTokenStateAsync={async () => this.props.refetchTokenStateAsync(etherToken.address)}
+            />
+        ) : null;
         return (
             <div id={key} key={key} className={`flex flex-column ${className || ''}`}>
+                {this.state.wrappedEtherDirection === Side.Receive && wrapEtherItem}
                 <StandardIconRow
                     icon={icon}
                     main={
@@ -331,23 +385,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                         </div>
                     }
                     accessory={this._renderAccessoryItems(accessoryItemConfig)}
-                    backgroundColor={shouldShowWrapEtherItem ? colors.walletFocusedItemBackground : undefined}
                 />
-                {shouldShowWrapEtherItem && (
-                    <WrapEtherItem
-                        userAddress={this.props.userAddress}
-                        networkId={this.props.networkId}
-                        blockchain={this.props.blockchain}
-                        dispatcher={this.props.dispatcher}
-                        userEtherBalanceInWei={this.props.userEtherBalanceInWei}
-                        direction={accessoryItemConfig.wrappedEtherDirection}
-                        etherToken={etherToken}
-                        lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
-                        onConversionSuccessful={this._closeWrappedEtherActionRow.bind(this)}
-                        // tslint:disable:jsx-no-lambda
-                        refetchEthTokenStateAsync={async () => this.props.refetchTokenStateAsync(etherToken.address)}
-                    />
-                )}
+                {this.state.wrappedEtherDirection === Side.Deposit && wrapEtherItem}
             </div>
         );
     }
@@ -411,19 +450,11 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         price?: BigNumber,
         isLoading: boolean = false,
     ): React.ReactNode {
-        let result;
-        if (!isLoading) {
-            if (_.isUndefined(price)) {
-                result = '--';
-            } else {
-                const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
-                const value = unitAmount.mul(price);
-                const formattedAmount = value.toFixed(USD_DECIMAL_PLACES);
-                result = `$${formattedAmount}`;
-            }
-        } else {
-            result = '$0.00';
-        }
+        const result = !isLoading
+            ? _.isUndefined(price)
+                ? '--'
+                : utils.getUsdValueFormattedAmount(amount, decimals, price)
+            : '$0.00';
         return (
             <PlaceHolder hideChildren={isLoading} fillColor={PLACEHOLDER_COLOR}>
                 <Text fontSize="14px" fontColor={colors.darkGrey} lineHeight="1em">
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index 851b35f90..2b4cf93fe 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -8,6 +8,7 @@ import * as React from 'react';
 import { Blockchain } from 'ts/blockchain';
 import { EthAmountInput } from 'ts/components/inputs/eth_amount_input';
 import { TokenAmountInput } from 'ts/components/inputs/token_amount_input';
+import { Container } from 'ts/components/ui/container';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { BlockchainCallErrs, Side, Token } from 'ts/types';
@@ -94,7 +95,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
         const topLabelText = isWrappingEth ? 'Convert ETH into WETH 1:1' : 'Convert WETH into ETH 1:1';
 
         return (
-            <div className="flex" style={{ backgroundColor: colors.walletFocusedItemBackground }}>
+            <Container className="flex" backgroundColor={colors.walletFocusedItemBackground} paddingTop="25px">
                 <div>{this._renderIsEthConversionHappeningSpinner()} </div>
                 <div className="flex flex-column">
                     <div style={styles.topLabel}>{topLabelText}</div>
@@ -142,7 +143,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
 
                     {this._renderErrorMsg()}
                 </div>
-            </div>
+            </Container>
         );
     }
     private _onValueChange(_isValid: boolean, amount?: BigNumber): void {
diff --git a/packages/website/ts/containers/subproviders_documentation.ts b/packages/website/ts/containers/subproviders_documentation.ts
index 6d4230e53..567f6a37e 100644
--- a/packages/website/ts/containers/subproviders_documentation.ts
+++ b/packages/website/ts/containers/subproviders_documentation.ts
@@ -25,6 +25,7 @@ const docSections = {
     emptyWalletSubprovider: 'emptyWalletSubprovider',
     fakeGasEstimateSubprovider: 'fakeGasEstimateSubprovider',
     injectedWeb3Subprovider: 'injectedWeb3Subprovider',
+    signerSubprovider: 'signerSubprovider',
     redundantRPCSubprovider: 'redundantRPCSubprovider',
     ganacheSubprovider: 'ganacheSubprovider',
     nonceTrackerSubprovider: 'nonceTrackerSubprovider',
@@ -50,6 +51,7 @@ const docsInfoConfig: DocsInfoConfig = {
         ['emptyWallet-subprovider']: [docSections.emptyWalletSubprovider],
         ['fakeGasEstimate-subprovider']: [docSections.fakeGasEstimateSubprovider],
         ['injectedWeb3-subprovider']: [docSections.injectedWeb3Subprovider],
+        ['signer-subprovider']: [docSections.signerSubprovider],
         ['redundantRPC-subprovider']: [docSections.redundantRPCSubprovider],
         ['ganache-subprovider']: [docSections.ganacheSubprovider],
         ['nonceTracker-subprovider']: [docSections.nonceTrackerSubprovider],
@@ -69,6 +71,7 @@ const docsInfoConfig: DocsInfoConfig = {
         [docSections.emptyWalletSubprovider]: ['"subproviders/src/subproviders/empty_wallet_subprovider"'],
         [docSections.fakeGasEstimateSubprovider]: ['"subproviders/src/subproviders/fake_gas_estimate_subprovider"'],
         [docSections.injectedWeb3Subprovider]: ['"subproviders/src/subproviders/injected_web3"'],
+        [docSections.signerSubprovider]: ['"subproviders/src/subproviders/signer"'],
         [docSections.redundantRPCSubprovider]: ['"subproviders/src/subproviders/redundant_rpc"'],
         [docSections.ganacheSubprovider]: ['"subproviders/src/subproviders/ganache"'],
         [docSections.nonceTrackerSubprovider]: ['"subproviders/src/subproviders/nonce_tracker"'],
diff --git a/packages/website/ts/pages/about/about.tsx b/packages/website/ts/pages/about/about.tsx
index 0259af36f..5bb5d06a9 100644
--- a/packages/website/ts/pages/about/about.tsx
+++ b/packages/website/ts/pages/about/about.tsx
@@ -165,16 +165,24 @@ const teamRow5: ProfileInfo[] = [
     },
 ];
 
-// const teamRow6: ProfileInfo[] = [
-//     {
-//         name: 'Chris Kalani',
-//         title: 'Director of Design',
-//         description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`,
-//         image: 'images/team/chris.png',
-//         linkedIn: 'https://www.linkedin.com/in/chriskalani/',
-//         github: 'https://github.com/chriskalani',
-//     },
-// ];
+const teamRow6: ProfileInfo[] = [
+    {
+        name: 'Alex Browne',
+        title: 'Engineer in Residence',
+        description: `Full-stack blockchain engineer. Previously at Plaid. Open source guru and footgun dismantler. Computer Science and Electrical Engineering at Duke.`,
+        image: 'images/team/alexbrowne.png',
+        linkedIn: 'https://www.linkedin.com/in/stephenalexbrowne/',
+        github: 'http://github.com/albrow',
+    },
+    // {
+    //     name: 'Chris Kalani',
+    //     title: 'Director of Design',
+    //     description: `Previously founded Wake (acquired by InVision). Early Facebook product designer.`,
+    //     image: 'images/team/chris.png',
+    //     linkedIn: 'https://www.linkedin.com/in/chriskalani/',
+    //     github: 'https://github.com/chriskalani',
+    // },
+];
 
 const advisors: ProfileInfo[] = [
     {
@@ -270,6 +278,7 @@ export class About extends React.Component<AboutProps, AboutState> {
                         <div className="clearfix">{this._renderProfiles(teamRow3)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow4)}</div>
                         <div className="clearfix">{this._renderProfiles(teamRow5)}</div>
+                        <div className="clearfix">{this._renderProfiles(teamRow6)}</div>
                     </div>
                     <div className="pt3 pb2">
                         <div
diff --git a/packages/website/ts/redux/store.ts b/packages/website/ts/redux/store.ts
index 0d0e6cea1..2672e3f61 100644
--- a/packages/website/ts/redux/store.ts
+++ b/packages/website/ts/redux/store.ts
@@ -13,9 +13,11 @@ export const store: ReduxStore<State> = createStore(
 );
 store.subscribe(
     _.throttle(() => {
+        const state = store.getState();
         // Persisted state
         stateStorage.saveState({
-            hasPortalOnboardingBeenClosed: store.getState().hasPortalOnboardingBeenClosed,
+            hasPortalOnboardingBeenClosed: state.hasPortalOnboardingBeenClosed,
+            isPortalOnboardingShowing: state.isPortalOnboardingShowing,
         });
     }, ONE_SECOND),
 );
diff --git a/packages/website/ts/style/media.ts b/packages/website/ts/style/media.ts
new file mode 100644
index 000000000..3c992eb9f
--- /dev/null
+++ b/packages/website/ts/style/media.ts
@@ -0,0 +1,14 @@
+import { css } from 'ts/style/theme';
+import { ScreenWidths } from 'ts/types';
+
+const generateMediaWrapper = (screenWidth: ScreenWidths) => (...args: any[]) => css`
+    @media (max-width: ${screenWidth}) {
+        ${css.apply(css, args)};
+    }
+`;
+
+export const media = {
+    small: generateMediaWrapper(ScreenWidths.Sm),
+    medium: generateMediaWrapper(ScreenWidths.Md),
+    large: generateMediaWrapper(ScreenWidths.Lg),
+};
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 498a0a5b8..d9b2ef618 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -1,5 +1,6 @@
 import { ECSignature } from '@0xproject/types';
 import { BigNumber } from '@0xproject/utils';
+import { Provider } from 'ethereum-types';
 import * as React from 'react';
 
 export enum Side {
@@ -215,10 +216,11 @@ export interface ContractEvent {
 }
 
 export type ValidatedBigNumberCallback = (isValid: boolean, amount?: BigNumber) => void;
+// Associated values are in `em` units
 export enum ScreenWidths {
-    Sm = 'SM',
-    Md = 'MD',
-    Lg = 'LG',
+    Sm = 40,
+    Md = 52,
+    Lg = 64,
 }
 
 export enum AlertTypes {
@@ -487,6 +489,8 @@ export enum Providers {
     Parity = 'PARITY',
     Metamask = 'METAMASK',
     Mist = 'MIST',
+    Toshi = 'TOSHI',
+    Cipher = 'CIPHER',
 }
 
 export interface InjectedProviderUpdate {
@@ -571,4 +575,16 @@ export enum AccountState {
     Loading = 'Loading',
     Locked = 'Locked',
 }
+
+export interface InjectedProvider extends Provider {
+    publicConfigStore?: InjectedProviderObservable;
+}
+
+// Minimal expected interface for an injected web3 object
+export interface InjectedWeb3 {
+    currentProvider: InjectedProvider;
+    version: {
+        getNetwork(cd: (err: Error, networkId: string) => void): void;
+    };
+}
 // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/utils/analytics.ts b/packages/website/ts/utils/analytics.ts
index 928e45bc3..f4bfa083f 100644
--- a/packages/website/ts/utils/analytics.ts
+++ b/packages/website/ts/utils/analytics.ts
@@ -1,8 +1,8 @@
 import * as _ from 'lodash';
 import * as ReactGA from 'react-ga';
+import { InjectedWeb3 } from 'ts/types';
 import { configs } from 'ts/utils/configs';
 import { utils } from 'ts/utils/utils';
-import * as Web3 from 'web3';
 
 export const analytics = {
     init(): void {
@@ -16,11 +16,12 @@ export const analytics = {
             value,
         });
     },
-    async logProviderAsync(web3IfExists: Web3): Promise<void> {
+    async logProviderAsync(web3IfExists: InjectedWeb3): Promise<void> {
         await utils.onPageLoadAsync();
-        const providerType = !_.isUndefined(web3IfExists)
-            ? utils.getProviderType(web3IfExists.currentProvider)
-            : 'NONE';
+        const providerType =
+            !_.isUndefined(web3IfExists) && !_.isUndefined(web3IfExists.currentProvider)
+                ? utils.getProviderType(web3IfExists.currentProvider)
+                : 'NONE';
         ReactGA.ga('set', 'dimension1', providerType);
     },
 };
diff --git a/packages/website/ts/utils/constants.ts b/packages/website/ts/utils/constants.ts
index d3a2aa107..0c4b88780 100644
--- a/packages/website/ts/utils/constants.ts
+++ b/packages/website/ts/utils/constants.ts
@@ -6,7 +6,7 @@ export const constants = {
     ETHER_TOKEN_SYMBOL: 'WETH',
     ZRX_TOKEN_SYMBOL: 'ZRX',
     ETHER_SYMBOL: 'ETH',
-    TOKEN_AMOUNT_DISPLAY_PRECISION: 5,
+    TOKEN_AMOUNT_DISPLAY_PRECISION: 4,
     GENESIS_ORDER_BLOCK_BY_NETWORK_ID: {
         1: 4145578,
         42: 3117574,
@@ -29,6 +29,8 @@ export const constants = {
     PROVIDER_NAME_METAMASK: 'MetaMask',
     PROVIDER_NAME_PARITY_SIGNER: 'Parity Signer',
     PROVIDER_NAME_MIST: 'Mist',
+    PROVIDER_NAME_CIPHER: 'Cipher Browser',
+    PROVIDER_NAME_TOSHI: 'Toshi',
     PROVIDER_NAME_GENERIC: 'Injected Web3',
     PROVIDER_NAME_PUBLIC: '0x Public',
     ROLLBAR_ACCESS_TOKEN: 'a6619002b51c4464928201e6ea94de65',
@@ -38,6 +40,7 @@ export const constants = {
     UNAVAILABLE_STATUS: 503,
     TAKER_FEE: new BigNumber(0),
     TESTNET_NAME: 'Kovan',
+    NUMERAL_USD_FORMAT: '$0,0.00',
     PROJECT_URL_ETHFINEX: 'https://www.ethfinex.com/',
     PROJECT_URL_AMADEUS: 'http://amadeusrelay.org',
     PROJECT_URL_DDEX: 'https://ddex.io',
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index 726e1815f..2cda41545 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -8,6 +8,8 @@ import * as bowser from 'bowser';
 import deepEqual = require('deep-equal');
 import * as _ from 'lodash';
 import * as moment from 'moment';
+import * as numeral from 'numeral';
+
 import {
     AccountState,
     BlockchainCallErrs,
@@ -27,9 +29,6 @@ import { configs } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import * as u2f from 'ts/vendor/u2f_api';
 
-const LG_MIN_EM = 64;
-const MD_MIN_EM = 52;
-
 const isDogfood = (): boolean => _.includes(window.location.href, configs.DOMAIN_DOGFOOD);
 
 export const utils = {
@@ -134,9 +133,9 @@ export const utils = {
 
         // This logic mirrors the CSS media queries in BassCSS for the `lg-`, `md-` and `sm-` CSS
         // class prefixes. Do not edit these.
-        if (widthInEm > LG_MIN_EM) {
+        if (widthInEm > ScreenWidths.Lg) {
             return ScreenWidths.Lg;
-        } else if (widthInEm > MD_MIN_EM) {
+        } else if (widthInEm > ScreenWidths.Md) {
             return ScreenWidths.Md;
         } else {
             return ScreenWidths.Sm;
@@ -324,6 +323,7 @@ export const utils = {
     getProviderType(provider: Provider): Providers | string {
         const constructorName = provider.constructor.name;
         let parsedProviderName = constructorName;
+        // https://ethereum.stackexchange.com/questions/24266/elegant-way-to-detect-current-provider-int-web3-js
         switch (constructorName) {
             case 'EthereumProvider':
                 parsedProviderName = Providers.Mist;
@@ -337,6 +337,10 @@ export const utils = {
             parsedProviderName = Providers.Parity;
         } else if ((provider as any).isMetaMask) {
             parsedProviderName = Providers.Metamask;
+        } else if (!_.isUndefined(_.get(window, 'SOFA'))) {
+            parsedProviderName = Providers.Toshi;
+        } else if (!_.isUndefined(_.get(window, '__CIPHER__'))) {
+            parsedProviderName = Providers.Cipher;
         }
         return parsedProviderName;
     },
@@ -380,10 +384,20 @@ export const utils = {
     },
     getFormattedAmount(amount: BigNumber, decimals: number, symbol: string): string {
         const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
-        const precision = Math.min(constants.TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces());
-        const formattedAmount = unitAmount.toFixed(precision);
+        // if the unit amount is less than 1, show the natural number of decimal places with a max of 4
+        // if the unit amount is greater than or equal to 1, show only 2 decimal places
+        const precision = unitAmount.lt(1)
+            ? Math.min(constants.TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces())
+            : 2;
+        const format = `0,0.${_.repeat('0', precision)}`;
+        const formattedAmount = numeral(unitAmount).format(format);
         return `${formattedAmount} ${symbol}`;
     },
+    getUsdValueFormattedAmount(amount: BigNumber, decimals: number, price: BigNumber): string {
+        const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
+        const value = unitAmount.mul(price);
+        return numeral(value).format(constants.NUMERAL_USD_FORMAT);
+    },
     openUrl(url: string): void {
         window.open(url, '_blank');
     },
author	Fabio Berger <me@fabioberger.com>	2018-07-05 06:38:15 +0800
committer	Fabio Berger <me@fabioberger.com>	2018-07-05 06:38:15 +0800
commit	a0b9c7777b2171456a19aa6ddcf2a023b663a816 (patch)
tree	b9cf9fe6d0030bf0e2591d3facccf38ff2d622c6 /packages/website
parent	5204e4c08da7d32012047ee6ca4d898b0c45a47d (diff)
parent	5176d929fa6d3c6ce414448ea2441bd450f04e3c (diff)
download	dexon-0x-contracts-a0b9c7777b2171456a19aa6ddcf2a023b663a816.tar.gz dexon-0x-contracts-a0b9c7777b2171456a19aa6ddcf2a023b663a816.tar.zst dexon-0x-contracts-a0b9c7777b2171456a19aa6ddcf2a023b663a816.zip