Merge pull request #787 from 0xProject/feature/website/portal-onboarding-polish

Portal v2 onboarding polish 

18 files changed, 232 insertions, 143 deletions

diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
index 31ce99d31..bccdc0c18 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -1,18 +1,42 @@
+import { BigNumber } from '@0xproject/utils';
 import * as React from 'react';
 import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
 import { Text } from 'ts/components/ui/text';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
-export interface AddEthOnboardingStepProps {}
+export interface AddEthOnboardingStepProps {
+    userEthBalanceInWei: BigNumber;
+}
 
-export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStepProps> = () => (
-    <div className="flex items-center flex-column">
-        <Text> Before you begin you will need to send some ETH to your metamask wallet.</Text>
-        <Container marginTop="15px" marginBottom="15px">
-            <img src="/images/ether_alt.svg" height="50px" width="50px" />
-        </Container>
-        <Text>
-            Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask extension in your
-            browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
-        </Text>
-    </div>
-);
+export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStepProps> = props =>
+    props.userEthBalanceInWei.gt(0) ? (
+        <div className="flex items-center flex-column">
+            <Text>
+                Great! Looks like you already have{' '}
+                <b>
+                    {utils.getFormattedAmount(
+                        props.userEthBalanceInWei,
+                        constants.DECIMAL_PLACES_ETH,
+                        constants.ETHER_SYMBOL,
+                    )}{' '}
+                </b>
+                in your wallet.
+            </Text>
+            <Container marginTop="15px" marginBottom="15px">
+                <Image src="/images/ether_alt.svg" height="50px" width="50px" />
+            </Container>
+        </div>
+    ) : (
+        <div className="flex items-center flex-column">
+            <Text> Before you begin you will need to send some ETH to your wallet.</Text>
+            <Container marginTop="15px" marginBottom="15px">
+                <Image src="/images/ether_alt.svg" height="50px" width="50px" />
+            </Container>
+            <Text className="xs-hide">
+                Click on the <Image src="/images/metamask_icon.png" height="20px" width="20px" /> MetaMask extension in
+                your browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
+            </Text>
+        </div>
+    );
diff --git a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx
index 3a8db8c36..8100fd2c0 100644
--- a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx
@@ -10,6 +10,6 @@ export const CongratsOnboardingStep: React.StatelessComponent<CongratsOnboarding
         <Container marginTop="25px" marginBottom="15px" className="flex justify-center">
             <img src="/images/zrx_ecosystem.svg" height="150px" />
         </Container>
-        <Text>No need to log in. Each relayer automatically detects and connects to your metamask wallet.</Text>
+        <Text>No need to log in. Each relayer automatically detects and connects to your wallet.</Text>
     </div>
 );
diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
index a54496186..a95c464af 100644
--- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
@@ -8,11 +8,12 @@ export interface InstallWalletOnboardingStepProps {}
 
 export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWalletOnboardingStepProps> = () => (
     <div className="flex items-center flex-column">
-        <Container marginTop="15px" marginBottom="15px">
-            <ActionAccountBalanceWallet style={{ width: '30px', height: '30px' }} color={colors.orange} />
-        </Container>
         <Text>
             Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps.
         </Text>
+        <Container marginTop="15px" marginBottom="15px">
+            <ActionAccountBalanceWallet style={{ width: '50px', height: '50px' }} color={colors.orange} />
+        </Container>
+        <Text>Please refresh the page once you've done this to continue!</Text>
     </div>
 );
diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
index 548839218..3a27b6854 100644
--- a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
 import { Text } from 'ts/components/ui/text';
 
 export interface IntroOnboardingStepProps {}
@@ -7,15 +8,19 @@ export interface IntroOnboardingStepProps {}
 export const IntroOnboardingStep: React.StatelessComponent<IntroOnboardingStepProps> = () => (
     <div className="flex items-center flex-column">
         <Text>
-            In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps.
+            In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete three simple steps.
         </Text>
         <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
             <div className="flex flex-column items-center">
-                <img src="/images/eth_token.svg" height="50px" width="50x" />
+                <Image src="/images/ether.png" height="50px" width="50px" />
+                <Text> Add ETH </Text>
+            </div>
+            <div className="flex flex-column items-center">
+                <Image src="/images/eth_token.svg" height="50px" width="50x" />
                 <Text> Wrap ETH </Text>
             </div>
             <div className="flex flex-column items-center">
-                <img src="/images/fake_toggle.svg" height="50px" width="50px" />
+                <Image src="/images/fake_toggle.svg" height="50px" width="50px" />
                 <Text> Unlock tokens </Text>
             </div>
         </Container>
diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index bc83b8034..48e8ab022 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -1,6 +1,7 @@
 import { colors } from '@0xproject/react-shared';
 import * as React from 'react';
 
+import * as _ from 'lodash';
 import { Button } from 'ts/components/ui/button';
 import { Container } from 'ts/components/ui/container';
 import { IconButton } from 'ts/components/ui/icon_button';
@@ -16,6 +17,7 @@ export interface OnboardingCardProps {
     onClose: () => void;
     onClickNext: () => void;
     onClickBack: () => void;
+    onContinueButtonClick?: () => void;
     continueButtonDisplay?: ContinueButtonDisplay;
     shouldHideBackButton?: boolean;
     shouldHideNextButton?: boolean;
@@ -28,6 +30,7 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
     content,
     continueButtonDisplay,
     continueButtonText,
+    onContinueButtonClick,
     onClickNext,
     onClickBack,
     onClose,
@@ -52,7 +55,7 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
                 {continueButtonDisplay && (
                     <Button
                         isDisabled={continueButtonDisplay === 'disabled'}
-                        onClick={onClickNext}
+                        onClick={!_.isUndefined(onContinueButtonClick) ? onContinueButtonClick : onClickNext}
                         fontColor={colors.white}
                         fontSize="15px"
                         backgroundColor={colors.mediumBlue}
@@ -60,17 +63,21 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
                         {continueButtonText}
                     </Button>
                 )}
-                <Container className="flex justify-between" marginTop="15px">
-                    {!shouldHideBackButton && (
-                        <Text fontColor={colors.grey} onClick={onClickBack}>
-                            Back
-                        </Text>
-                    )}
-                    {!shouldHideNextButton && (
-                        <Text fontColor={colors.grey} onClick={onClickNext}>
-                            Skip
-                        </Text>
-                    )}
+                <Container className="clearfix" marginTop="15px">
+                    <div className="left">
+                        {!shouldHideBackButton && (
+                            <Text fontColor={colors.grey} onClick={onClickBack}>
+                                Back
+                            </Text>
+                        )}
+                    </div>
+                    <div className="right">
+                        {!shouldHideNextButton && (
+                            <Text fontColor={colors.grey} onClick={onClickNext}>
+                                Skip
+                            </Text>
+                        )}
+                    </div>
                 </Container>
             </div>
         </Container>
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index ec8d96191..1f4c6df82 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -6,6 +6,7 @@ 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 { zIndex } from 'ts/style/z_index';
 
 export interface Step {
     target: string;
@@ -16,6 +17,7 @@ export interface Step {
     shouldHideNextButton?: boolean;
     continueButtonDisplay?: ContinueButtonDisplay;
     continueButtonText?: string;
+    onContinueButtonClick?: () => void;
 }
 
 export interface OnboardingFlowProps {
@@ -54,14 +56,22 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         if (this.props.disableOverlay) {
             return onboardingElement;
         }
-        return <Overlay>{onboardingElement}</Overlay>;
+        return (
+            <div>
+                <Overlay onClick={this.props.onClose} />
+                {onboardingElement}
+            </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.
+        props.scheduleUpdate();
         return (
-            <div ref={props.ref} style={props.style} data-placement={props.placement}>
+            <div ref={props.ref} style={{ ...props.style, ...customStyles }} data-placement={props.placement}>
                 {this._renderToolTip()}
             </div>
         );
@@ -71,7 +81,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
         return (
-            <Container marginLeft="30px" maxWidth={350}>
+            <Container marginLeft="30px" width="400px">
                 <OnboardingTooltip
                     title={step.title}
                     content={step.content}
@@ -83,6 +93,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     onClickBack={this._goToPrevStep.bind(this)}
                     continueButtonDisplay={step.continueButtonDisplay}
                     continueButtonText={step.continueButtonText}
+                    onContinueButtonClick={step.onContinueButtonClick}
                 />
             </Container>
         );
@@ -93,7 +104,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
         return (
-            <Container position="relative" zIndex={1} maxWidth="100vw">
+            <Container position="relative" zIndex={1}>
                 <OnboardingCard
                     title={step.title}
                     content={step.content}
@@ -105,6 +116,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     onClickBack={this._goToPrevStep.bind(this)}
                     continueButtonDisplay={step.continueButtonDisplay}
                     continueButtonText={step.continueButtonText}
+                    onContinueButtonClick={step.onContinueButtonClick}
                     borderRadius="10px 10px 0px 0px"
                 />
             </Container>
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index ccc8d9e86..6bfa5c75f 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -12,7 +12,11 @@ import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_s
 import { OnboardingFlow, Step } 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 { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step';
+import {
+    WrapEthOnboardingStep1,
+    WrapEthOnboardingStep2,
+    WrapEthOnboardingStep3,
+} from 'ts/components/onboarding/wrap_eth_onboarding_step';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
@@ -24,7 +28,7 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
     stepIndex: number;
     isRunning: boolean;
     userAddress: string;
-    hasBeenSeen: boolean;
+    hasBeenClosed: boolean;
     providerType: ProviderType;
     injectedProviderName: string;
     blockchainIsLoaded: boolean;
@@ -40,7 +44,9 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
 class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
     private _unlisten: () => void;
     public componentDidMount(): void {
-        this._overrideOnboardingStateIfShould();
+        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));
     }
@@ -48,7 +54,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         this._unlisten();
     }
     public componentDidUpdate(prevProps: PortalOnboardingFlowProps): void {
-        this._overrideOnboardingStateIfShould();
+        this._adjustStepIfShould();
         if (!prevProps.isRunning && this.props.isRunning) {
             // On mobile, make sure the wallet is completely visible.
             if (this.props.screenWidth === ScreenWidths.Sm) {
@@ -96,45 +102,63 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 continueButtonDisplay: 'enabled',
             },
             {
-                target: '.eth-row',
-                title: 'Add ETH',
-                content: <AddEthOnboardingStep />,
+                target: '.wallet',
+                title: 'Step 1: Add ETH',
+                content: (
+                    <AddEthOnboardingStep userEthBalanceInWei={this.props.userEtherBalanceInWei || new BigNumber(0)} />
+                ),
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
             },
             {
-                target: '.weth-row',
-                title: 'Step 1/2',
+                target: '.wallet',
+                title: 'Step 2: Wrap ETH',
+                content: <WrapEthOnboardingStep1 />,
+                placement: 'right',
+                continueButtonDisplay: 'enabled',
+            },
+            {
+                target: '.wallet',
+                title: 'Step 2: Wrap ETH',
+                content: <WrapEthOnboardingStep2 />,
+                placement: 'right',
+                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
+            },
+            {
+                target: '.wallet',
+                title: 'Step 2: Wrap ETH',
                 content: (
-                    <WrapEthOnboardingStep
-                        formattedEthBalanceIfExists={
+                    <WrapEthOnboardingStep3
+                        formattedWethBalanceIfExists={
                             this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
                         }
                     />
                 ),
                 placement: 'right',
-                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
+                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
             {
-                target: '.weth-row',
-                title: 'Step 2/2',
+                target: '.wallet',
+                title: 'Step 3: Unlock Tokens',
                 content: (
                     <SetAllowancesOnboardingStep
                         zrxAllowanceToggle={this._renderZrxAllowanceToggle()}
                         ethAllowanceToggle={this._renderEthAllowanceToggle()}
+                        doesUserHaveAllowancesForWethAndZrx={this._doesUserHaveAllowancesForWethAndZrx()}
                     />
                 ),
                 placement: 'right',
-                continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
+                continueButtonDisplay: this._doesUserHaveAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
             },
             {
                 target: '.wallet',
-                title: '🎉 Congrats! The ecosystem awaits.',
+                title: '🎉  The Ecosystem Awaits',
                 content: <CongratsOnboardingStep />,
                 placement: 'right',
                 continueButtonDisplay: 'enabled',
                 shouldHideNextButton: true,
                 continueButtonText: 'Enter the 0x Ecosystem',
+                onContinueButtonClick: this._handleFinalStepContinueClick.bind(this),
             },
         ];
         return steps;
@@ -161,7 +185,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
     private _userHasVisibleWeth(): boolean {
         return this._getWethBalance() > new BigNumber(0);
     }
-    private _userHasAllowancesForWethAndZrx(): boolean {
+    private _doesUserHaveAllowancesForWethAndZrx(): boolean {
         const ethToken = utils.getEthToken(this.props.tokenByAddress);
         const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
         if (ethToken && zrxToken) {
@@ -173,11 +197,6 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         }
         return false;
     }
-    private _overrideOnboardingStateIfShould(): void {
-        this._autoStartOnboardingIfShould();
-        this._adjustStepIfShould();
-    }
-
     private _adjustStepIfShould(): void {
         const stepIndex = this.props.stepIndex;
         if (this._isAddressAvailable()) {
@@ -201,7 +220,10 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         }
     }
     private _autoStartOnboardingIfShould(): void {
-        if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
+        if (
+            (this.props.stepIndex === 0 && !this.props.isRunning) ||
+            (!this.props.isRunning && !this.props.hasBeenClosed && this.props.blockchainIsLoaded)
+        ) {
             const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
             analytics.logEvent('Portal', 'Onboarding Started - Automatic', networkName, this.props.stepIndex);
             this.props.updateIsRunning(true);
@@ -244,6 +266,13 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             />
         );
     }
+    private _handleFinalStepContinueClick(): void {
+        if (utils.isMobile(this.props.screenWidth)) {
+            window.scrollTo(0, 0);
+            this.props.history.push('/portal');
+        }
+        this._closeOnboarding();
+    }
 }
 
 export const PortalOnboardingFlow = withRouter(PlainPortalOnboardingFlow);
diff --git a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx
index 1ff248c40..5ddfe38d7 100644
--- a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx
@@ -5,11 +5,13 @@ import { Text } from 'ts/components/ui/text';
 export interface SetAllowancesOnboardingStepProps {
     zrxAllowanceToggle: React.ReactNode;
     ethAllowanceToggle: React.ReactNode;
+    doesUserHaveAllowancesForWethAndZrx: boolean;
 }
 
 export const SetAllowancesOnboardingStep: React.StatelessComponent<SetAllowancesOnboardingStepProps> = ({
     ethAllowanceToggle,
     zrxAllowanceToggle,
+    doesUserHaveAllowancesForWethAndZrx,
 }) => (
     <div className="flex items-center flex-column">
         <Text>Unlock your tokens for trading. You only need to do this once for each token.</Text>
@@ -23,5 +25,6 @@ export const SetAllowancesOnboardingStep: React.StatelessComponent<SetAllowances
                 <Container marginTop="10px">{zrxAllowanceToggle}</Container>
             </div>
         </Container>
+        {doesUserHaveAllowancesForWethAndZrx && <Text>Perfect! Both your ZRX and WETH tokens are unlocked.</Text>}
     </div>
 );
diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
index b21b39341..4d336c80f 100644
--- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
@@ -4,70 +4,78 @@ import { Container } from 'ts/components/ui/container';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Text } from 'ts/components/ui/text';
 
-export interface WrapEthOnboardingStepProps {
-    formattedEthBalanceIfExists?: string;
+export interface WrapEthOnboardingStep1Props {}
+
+export const WrapEthOnboardingStep1: React.StatelessComponent<WrapEthOnboardingStep1Props> = () => (
+    <div className="flex items-center flex-column">
+        <Text>
+            You need to convert some of your ETH into tradeable <b>Wrapped ETH (WETH)</b>.
+        </Text>
+        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
+            <div className="flex flex-column items-center">
+                <Text fontWeight={700}> 1 ETH </Text>
+                <img src="/images/eth_dollar.svg" height="75px" width="75x" />
+            </div>
+            <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
+                <Text fontSize="36px">=</Text>
+            </Container>
+            <div className="flex flex-column items-center">
+                <Text fontWeight={700}> 1 WETH </Text>
+                <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
+            </div>
+        </Container>
+        <Text>
+            Think of it like the coin version of a paper note. It has the same value, but some machines only take coins.
+        </Text>
+    </div>
+);
+
+export interface WrapEthOnboardingStep2Props {}
+
+export const WrapEthOnboardingStep2: React.StatelessComponent<WrapEthOnboardingStep2Props> = () => (
+    <div className="flex items-center flex-column">
+        <Text>Wrapping your ETH is a reversable transaction, so don't worry about losing your ETH.</Text>
+        <Text>
+            Click
+            <Container display="inline-block" marginLeft="10px" marginRight="10px">
+                <IconButton
+                    iconName="zmdi-long-arrow-down"
+                    color={colors.mediumBlue}
+                    labelText="wrap"
+                    display="inline-flex"
+                />
+            </Container>
+            to wrap your ETH.
+        </Text>
+    </div>
+);
+
+export interface WrapEthOnboardingStep3Props {
+    formattedWethBalanceIfExists?: string;
 }
 
-export const WrapEthOnboardingStep: React.StatelessComponent<WrapEthOnboardingStepProps> = ({
-    formattedEthBalanceIfExists,
-}) => {
-    if (formattedEthBalanceIfExists) {
-        return (
-            <div className="flex items-center flex-column">
-                <Text>Congrats you now have {formattedEthBalanceIfExists} in your wallet.</Text>
-                <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
-                    <div className="flex flex-column items-center">
-                        <Text fontWeight={700}> 1 ETH </Text>
-                        <img src="/images/eth_dollar.svg" height="75px" width="75x" />
-                    </div>
-                    <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
-                        <Text fontSize="25px">
-                            <i className="zmdi zmdi-long-arrow-right" />
-                        </Text>
-                    </Container>
-                    <div className="flex flex-column items-center">
-                        <Text fontWeight={700}> 1 WETH </Text>
-                        <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
-                    </div>
-                </Container>
+export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({
+    formattedWethBalanceIfExists,
+}) => (
+    <div className="flex items-center flex-column">
+        <Text>
+            You have <b>{formattedWethBalanceIfExists || '0 WETH'}</b> in your wallet.
+            {formattedWethBalanceIfExists && ' Great!'}
+        </Text>
+        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
+            <div className="flex flex-column items-center">
+                <Text fontWeight={700}> 1 ETH </Text>
+                <img src="/images/eth_dollar.svg" height="75px" width="75x" />
             </div>
-        );
-    } else {
-        return (
-            <div className="flex items-center flex-column">
-                <Text>
-                    You need to convert some of your ETH into tradeable <b>Wrapped ETH (WETH)</b>.
-                </Text>
-                <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
-                    <div className="flex flex-column items-center">
-                        <Text fontWeight={700}> 1 ETH </Text>
-                        <img src="/images/eth_dollar.svg" height="75px" width="75x" />
-                    </div>
-                    <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
-                        <Text fontSize="36px">=</Text>
-                    </Container>
-                    <div className="flex flex-column items-center">
-                        <Text fontWeight={700}> 1 WETH </Text>
-                        <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
-                    </div>
-                </Container>
-                <Text>
-                    Think of it like the coin version of a paper note. It has the same value, but some machines only
-                    take coins.
-                </Text>
-                <Text>
-                    Click
-                    <Container display="inline-block" marginLeft="10px" marginRight="10px">
-                        <IconButton
-                            iconName="zmdi-long-arrow-down"
-                            color={colors.mediumBlue}
-                            labelText="wrap"
-                            display="inline-flex"
-                        />
-                    </Container>
-                    to wrap your ETH.
+            <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
+                <Text fontSize="25px">
+                    <i className="zmdi zmdi-long-arrow-right" />
                 </Text>
+            </Container>
+            <div className="flex flex-column items-center">
+                <Text fontWeight={700}> 1 WETH </Text>
+                <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
             </div>
-        );
-    }
-};
+        </Container>
+    </div>
+);
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 8a86a7c8d..9c0cb866d 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -377,10 +377,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
             </Container>
         );
         return !shouldStartOnboarding ? (
-            <Link
-                to={{ pathname: `${WebsitePaths.Portal}/account`, state: { startOnboarding: true } }}
-                style={{ textDecoration: 'none' }}
-            >
+            <Link to={{ pathname: `${WebsitePaths.Portal}/account` }} style={{ textDecoration: 'none' }}>
                 {startOnboarding}
             </Link>
         ) : (
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index 136f3d005..943e3bf28 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -14,21 +14,29 @@ const appearFromBottomFrames = keyframes`
         position: fixed;
         bottom: -500px;
         left: 0px;
+        right: 0px;
     }
 
     to {
         position: fixed;
         bottom: 0px;
         left: 0px;
+        right: 0px;
     }
 `;
 
+const stylesForAnimation: { [K in AnimationType]: string } = {
+    // Needed for safari
+    easeUpFromBottom: `position: fixed`,
+};
+
 const animations: { [K in AnimationType]: string } = {
     easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`,
 };
 
 export const Animation = styled(PlainAnimation)`
     animation: ${props => animations[props.type]};
+    ${props => stylesForAnimation[props.type]};
 `;
 
 Animation.displayName = 'Animation';
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 02fa47480..1489a74a6 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -37,7 +37,7 @@ export const Button = styled(PlainButton)`
     background-color: ${props => props.backgroundColor};
     border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
     &:hover {
-        background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
+        background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')} !important;
     }
     &:active {
         background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
index 8b126a6d5..da26317de 100644
--- a/packages/website/ts/components/ui/overlay.tsx
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { zIndex } from 'ts/style/z_index';
 
 export interface OverlayProps {
-    children?: React.ReactNode;
     style?: React.CSSProperties;
     onClick?: () => void;
 }
@@ -19,7 +18,7 @@ const style: React.CSSProperties = {
     backgroundColor: 'rgba(0, 0, 0, 0.6)',
 };
 
-export const Overlay: React.StatelessComponent = (props: OverlayProps) => (
+export const Overlay: React.StatelessComponent<OverlayProps> = props => (
     <div style={{ ...style, ...props.style }} onClick={props.onClick}>
         {props.children}
     </div>
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index ad6faff8d..1f1e3598a 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -266,7 +266,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             wrappedEtherDirection: Side.Deposit,
         };
         const key = ETHER_ITEM_KEY;
-        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row');
+        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig);
     }
     private _renderTokenRows(): React.ReactNode {
         const trackedTokens = this.props.trackedTokens;
@@ -305,14 +305,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             },
         };
         const key = token.address;
-        return this._renderBalanceRow(
-            key,
-            icon,
-            primaryText,
-            secondaryText,
-            accessoryItemConfig,
-            isWeth ? 'weth-row' : undefined,
-        );
+        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig);
     }
     private _renderBalanceRow(
         key: string,
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index f6d1a9a35..851b35f90 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -172,6 +172,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
                 <FlatButton
                     backgroundColor={colors.wrapEtherConfirmationButton}
                     label={labelText}
+                    style={{ zIndex: 0 }}
                     labelStyle={styles.wrapEtherConfirmationButtonLabel}
                     onClick={this._wrapEtherConfirmationActionAsync.bind(this)}
                     disabled={this.state.isEthConversionHappening}
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index 12daad021..a813205b1 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -19,7 +19,7 @@ interface ConnectedState {
     stepIndex: number;
     isRunning: boolean;
     userAddress: string;
-    hasBeenSeen: boolean;
+    hasBeenClosed: boolean;
     providerType: ProviderType;
     injectedProviderName: string;
     blockchainIsLoaded: boolean;
@@ -43,7 +43,7 @@ const mapStateToProps = (state: State, _ownProps: PortalOnboardingFlowProps): Co
     blockchainIsLoaded: state.blockchainIsLoaded,
     userEtherBalanceInWei: state.userEtherBalanceInWei,
     tokenByAddress: state.tokenByAddress,
-    hasBeenSeen: state.hasPortalOnboardingBeenSeen,
+    hasBeenClosed: state.hasPortalOnboardingBeenClosed,
     screenWidth: state.screenWidth,
 });
 
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index ed6a4868e..caddabcf0 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -42,7 +42,7 @@ export interface State {
     userEtherBalanceInWei?: BigNumber;
     portalOnboardingStep: number;
     isPortalOnboardingShowing: boolean;
-    hasPortalOnboardingBeenSeen: boolean;
+    hasPortalOnboardingBeenClosed: boolean;
     // Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
     userSuppliedOrderCache: Order;
 
@@ -85,7 +85,7 @@ export const INITIAL_STATE: State = {
     userSuppliedOrderCache: undefined,
     portalOnboardingStep: 0,
     isPortalOnboardingShowing: false,
-    hasPortalOnboardingBeenSeen: false,
+    hasPortalOnboardingBeenClosed: false,
     // Docs
     docsVersion: DEFAULT_DOCS_VERSION,
     availableDocVersions: [DEFAULT_DOCS_VERSION],
@@ -311,7 +311,9 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
             return {
                 ...state,
                 isPortalOnboardingShowing,
-                hasPortalOnboardingBeenSeen: true,
+                hasPortalOnboardingBeenClosed: !isPortalOnboardingShowing ? true : state.hasPortalOnboardingBeenClosed,
+                // always start onboarding from the beginning
+                portalOnboardingStep: 0,
             };
         }
 
diff --git a/packages/website/ts/redux/store.ts b/packages/website/ts/redux/store.ts
index 203f068a1..0d0e6cea1 100644
--- a/packages/website/ts/redux/store.ts
+++ b/packages/website/ts/redux/store.ts
@@ -15,7 +15,7 @@ store.subscribe(
     _.throttle(() => {
         // Persisted state
         stateStorage.saveState({
-            hasPortalOnboardingBeenSeen: store.getState().hasPortalOnboardingBeenSeen,
+            hasPortalOnboardingBeenClosed: store.getState().hasPortalOnboardingBeenClosed,
         });
     }, ONE_SECOND),
 );