From c5085d83649c1e7fdee6594866b69ae230a1cfe8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 13:36:38 -0700
Subject: Scroll to wallet when onboarding automatically starts as well

---
 packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 10d4af30e..86c4f771c 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -169,7 +169,6 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         this._autoStartOnboardingIfShould();
         this._adjustStepIfShould();
     }
-
     private _adjustStepIfShould(): void {
         const stepIndex = this.props.stepIndex;
         if (this._isAddressAvailable()) {
@@ -197,6 +196,10 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
             analytics.logEvent('Portal', 'Onboarding Started - Automatic', networkName, this.props.stepIndex);
             this.props.updateIsRunning(true);
+            // On mobile, make sure the wallet is completely visible.
+            if (utils.isMobile(this.props.screenWidth)) {
+                document.querySelector('.wallet').scrollIntoView();
+            }
         }
     }
     private _updateOnboardingStep(stepIndex: number): void {
-- 
cgit 


From ffdc7d13a9ee1f621f885d8f4f375998944b30de Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 13:40:52 -0700
Subject: Make onboarding bounce around less

---
 .../ts/components/onboarding/portal_onboarding_flow.tsx      |  6 +++---
 packages/website/ts/components/wallet/wallet.tsx             | 12 ++----------
 2 files changed, 5 insertions(+), 13 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 86c4f771c..a19439e34 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -90,14 +90,14 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 continueButtonDisplay: 'enabled',
             },
             {
-                target: '.eth-row',
+                target: '.wallet',
                 title: 'Add ETH',
                 content: <AddEthOnboardingStep />,
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
             },
             {
-                target: '.weth-row',
+                target: '.wallet',
                 title: 'Step 1/2',
                 content: (
                     <WrapEthOnboardingStep
@@ -110,7 +110,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
             },
             {
-                target: '.weth-row',
+                target: '.wallet',
                 title: 'Step 2/2',
                 content: (
                     <SetAllowancesOnboardingStep
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index dc48d6619..5dde0f4e7 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -311,7 +311,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, false, 'eth-row');
+        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, false);
     }
     private _renderTokenRows(): React.ReactNode {
         const trackedTokens = this.props.trackedTokens;
@@ -351,15 +351,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         };
         const key = token.address;
         const isLastRow = index === this.props.trackedTokens.length - 1;
-        return this._renderBalanceRow(
-            key,
-            icon,
-            primaryText,
-            secondaryText,
-            accessoryItemConfig,
-            isLastRow,
-            isWeth ? 'weth-row' : undefined,
-        );
+        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, isLastRow);
     }
     private _renderBalanceRow(
         key: string,
-- 
cgit 


From 3c68d9c29794f25c5dd23791073a43a744450346 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 13:51:37 -0700
Subject: Fix skip button position on first step

---
 .../ts/components/onboarding/onboarding_card.tsx   | 26 +++++++++++++---------
 1 file changed, 15 insertions(+), 11 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index bc83b8034..eff66f488 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -60,17 +60,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>
-- 
cgit 


From aad0804a1e14d935f7db8b061b1f2ec52b81cbef Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 14:33:04 -0700
Subject: Break wrath ETH step into 2

---
 .../ts/components/onboarding/onboarding_flow.tsx   |   2 +-
 .../onboarding/portal_onboarding_flow.tsx          |  19 ++--
 .../onboarding/wrap_eth_onboarding_step.tsx        | 121 ++++++++++-----------
 3 files changed, 72 insertions(+), 70 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index ec8d96191..8d5952b5a 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -71,7 +71,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}
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index a19439e34..7cec965b0 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -12,7 +12,7 @@ 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 } 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';
@@ -98,16 +98,21 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             },
             {
                 target: '.wallet',
-                title: 'Step 1/2',
+                title: 'Step 1: Wrap ETH',
+                content: <WrapEthOnboardingStep1 />,
+                placement: 'right',
+                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
+            },
+            {
+                target: '.wallet',
+                title: 'Step 1: Wrap ETH',
                 content: (
-                    <WrapEthOnboardingStep
-                        formattedEthBalanceIfExists={
-                            this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
-                        }
+                    <WrapEthOnboardingStep2
+                        formattedEthBalance={this._userHasVisibleWeth() ? this._getFormattedWethBalance() : '0 WETH'}
                     />
                 ),
                 placement: 'right',
-                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
+                continueButtonDisplay: 'enabled',
             },
             {
                 target: '.wallet',
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..700330db2 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,67 @@ 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>
+        <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 WrapEthOnboardingStep2Props {
+    formattedEthBalance: 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 WrapEthOnboardingStep2: React.StatelessComponent<WrapEthOnboardingStep2Props> = ({
+    formattedEthBalance,
+}) => (
+    <div className="flex items-center flex-column">
+        <Text>You currently have {formattedEthBalance} 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>
-        );
-    } 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>
+);
-- 
cgit 


From 36836eb942dbdcf64dd211b36523f3b98af2e6cb Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 14:45:01 -0700
Subject: Fix z index issue with wrap buttons and onboarding cards

---
 packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx | 2 +-
 packages/website/ts/components/wallet/wrap_ether_item.tsx             | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts')

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..b11cd4ef5 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -6,7 +6,7 @@ export interface AddEthOnboardingStepProps {}
 
 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>
+        <Text> Before you begin you will need to send some ETH to your wallet.</Text>
         <Container marginTop="15px" marginBottom="15px">
             <img src="/images/ether_alt.svg" height="50px" width="50px" />
         </Container>
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index d6135ce4d..92aaf1ea9 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -173,6 +173,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}
-- 
cgit 


From 47a267c3fa3498793568da79ebfc9b40c3d7129d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 15:14:21 -0700
Subject: Clicking overlay closes onboarding

---
 .../ts/components/onboarding/add_eth_onboarding_step.tsx      |  2 +-
 .../ts/components/onboarding/congrats_onboarding_step.tsx     |  2 +-
 packages/website/ts/components/onboarding/onboarding_flow.tsx | 11 +++++++++--
 packages/website/ts/components/ui/overlay.tsx                 |  3 +--
 4 files changed, 12 insertions(+), 6 deletions(-)

(limited to 'packages/website/ts')

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 b11cd4ef5..1dd47773c 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -10,7 +10,7 @@ export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStep
         <Container marginTop="15px" marginBottom="15px">
             <img src="/images/ether_alt.svg" height="50px" width="50px" />
         </Container>
-        <Text>
+        <Text className="xs-hide">
             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>
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/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 8d5952b5a..20ae17e18 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -3,6 +3,7 @@ import { Placement, Popper, PopperChildrenProps } from 'react-popper';
 
 import { OnboardingCard } from 'ts/components/onboarding/onboarding_card';
 import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
+import { zIndex } from 'ts/style/z_index';
 import { Animation } from 'ts/components/ui/animation';
 import { Container } from 'ts/components/ui/container';
 import { Overlay } from 'ts/components/ui/overlay';
@@ -54,14 +55,20 @@ 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 };
         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>
         );
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>
-- 
cgit 


From 26a9fe912703ef09ca9328ce19847406572386ac Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 16:21:50 -0700
Subject: Fix width issue with onboarding card on mobile

---
 packages/website/ts/components/onboarding/onboarding_flow.tsx | 2 +-
 packages/website/ts/components/ui/animation.tsx               | 2 ++
 2 files changed, 3 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 20ae17e18..e3de7e098 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -100,7 +100,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}
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index 136f3d005..b90437721 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -14,12 +14,14 @@ const appearFromBottomFrames = keyframes`
         position: fixed;
         bottom: -500px;
         left: 0px;
+        right: 0px;
     }
 
     to {
         position: fixed;
         bottom: 0px;
         left: 0px;
+        right: 0px;
     }
 `;
 
-- 
cgit 


From cce55857950fc20344c9c93b3047a547039fb406 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 16:28:54 -0700
Subject: Fix animation when coming from bottom

---
 packages/website/ts/components/ui/animation.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index b90437721..943e3bf28 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -25,12 +25,18 @@ const appearFromBottomFrames = keyframes`
     }
 `;
 
+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';
-- 
cgit 


From 382839464f7d554bfc89176f669c4d72df6093f3 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 17:00:07 -0700
Subject: Break wrapping ETH into a 3rd step

---
 .../ts/components/onboarding/portal_onboarding_flow.tsx | 17 ++++++++++++++---
 .../components/onboarding/wrap_eth_onboarding_step.tsx  | 12 ++++++++++--
 2 files changed, 24 insertions(+), 5 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 7cec965b0..4dfc948a5 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 { WrapEthOnboardingStep1, WrapEthOnboardingStep2 } 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';
@@ -101,18 +105,25 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 title: 'Step 1: Wrap ETH',
                 content: <WrapEthOnboardingStep1 />,
                 placement: 'right',
+                continueButtonDisplay: 'enabled',
+            },
+            {
+                target: '.wallet',
+                title: 'Step 1: Wrap ETH',
+                content: <WrapEthOnboardingStep2 />,
+                placement: 'right',
                 continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
             },
             {
                 target: '.wallet',
                 title: 'Step 1: Wrap ETH',
                 content: (
-                    <WrapEthOnboardingStep2
+                    <WrapEthOnboardingStep3
                         formattedEthBalance={this._userHasVisibleWeth() ? this._getFormattedWethBalance() : '0 WETH'}
                     />
                 ),
                 placement: 'right',
-                continueButtonDisplay: 'enabled',
+                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
             },
             {
                 target: '.wallet',
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 700330db2..8af5d8f07 100644
--- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
@@ -27,6 +27,14 @@ export const WrapEthOnboardingStep1: React.StatelessComponent<WrapEthOnboardingS
         <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">
@@ -42,11 +50,11 @@ export const WrapEthOnboardingStep1: React.StatelessComponent<WrapEthOnboardingS
     </div>
 );
 
-export interface WrapEthOnboardingStep2Props {
+export interface WrapEthOnboardingStep3Props {
     formattedEthBalance: string;
 }
 
-export const WrapEthOnboardingStep2: React.StatelessComponent<WrapEthOnboardingStep2Props> = ({
+export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({
     formattedEthBalance,
 }) => (
     <div className="flex items-center flex-column">
-- 
cgit 


From 4454cfa65dfb2f0928cddc8732a64010b0c5f0d8 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 18:21:51 -0700
Subject: Customize flow depending on what steps you've completed

---
 .../onboarding/add_eth_onboarding_step.tsx         | 36 ++++++++++++++--------
 .../ts/components/onboarding/onboarding_flow.tsx   |  2 +-
 .../onboarding/portal_onboarding_flow.tsx          | 16 ++++++++--
 .../onboarding/wrap_eth_onboarding_step.tsx        |  9 ++++--
 4 files changed, 43 insertions(+), 20 deletions(-)

(limited to 'packages/website/ts')

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 1dd47773c..62d44885c 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -2,17 +2,27 @@ import * as React from 'react';
 import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
 
-export interface AddEthOnboardingStepProps {}
+export interface AddEthOnboardingStepProps {
+    hasEth: boolean;
+}
 
-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 wallet.</Text>
-        <Container marginTop="15px" marginBottom="15px">
-            <img src="/images/ether_alt.svg" height="50px" width="50px" />
-        </Container>
-        <Text className="xs-hide">
-            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.hasEth ? (
+        <div className="flex items-center flex-column">
+            <Text> Great! Looks like you already have ETH in your wallet.</Text>
+            <Container marginTop="15px" marginBottom="15px">
+                <img 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">
+                <img src="/images/ether_alt.svg" height="50px" width="50px" />
+            </Container>
+            <Text className="xs-hide">
+                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>
+    );
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index e3de7e098..e20e58eec 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -3,10 +3,10 @@ import { Placement, Popper, PopperChildrenProps } from 'react-popper';
 
 import { OnboardingCard } from 'ts/components/onboarding/onboarding_card';
 import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
-import { zIndex } from 'ts/style/z_index';
 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;
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 4dfc948a5..2102f39f9 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -96,7 +96,15 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             {
                 target: '.wallet',
                 title: 'Add ETH',
-                content: <AddEthOnboardingStep />,
+                content: (
+                    <AddEthOnboardingStep
+                        hasEth={
+                            !_.isUndefined(this.props.userEtherBalanceInWei)
+                                ? this.props.userEtherBalanceInWei.gt(0)
+                                : false
+                        }
+                    />
+                ),
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
             },
@@ -119,7 +127,9 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 title: 'Step 1: Wrap ETH',
                 content: (
                     <WrapEthOnboardingStep3
-                        formattedEthBalance={this._userHasVisibleWeth() ? this._getFormattedWethBalance() : '0 WETH'}
+                        formattedWethBalanceIfExists={
+                            this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
+                        }
                     />
                 ),
                 placement: 'right',
@@ -127,7 +137,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             },
             {
                 target: '.wallet',
-                title: 'Step 2/2',
+                title: 'Step 2: Unlock Tokens',
                 content: (
                     <SetAllowancesOnboardingStep
                         zrxAllowanceToggle={this._renderZrxAllowanceToggle()}
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 8af5d8f07..68c13ad10 100644
--- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
@@ -51,14 +51,17 @@ export const WrapEthOnboardingStep2: React.StatelessComponent<WrapEthOnboardingS
 );
 
 export interface WrapEthOnboardingStep3Props {
-    formattedEthBalance: string;
+    formattedWethBalanceIfExists?: string;
 }
 
 export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({
-    formattedEthBalance,
+    formattedWethBalanceIfExists,
 }) => (
     <div className="flex items-center flex-column">
-        <Text>You currently have {formattedEthBalance} in your wallet.</Text>
+        <Text>
+            You have {formattedWethBalanceIfExists || '0 WETH'} 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>
-- 
cgit 


From 3dfde15133fb9f623d1500bf710ecff834bc98b7 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 18:56:14 -0700
Subject: Always restart onboarding from 0 and other small improvements

---
 .../website/ts/components/onboarding/portal_onboarding_flow.tsx     | 6 +++---
 packages/website/ts/redux/reducer.ts                                | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 2102f39f9..0b7599aaf 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -120,7 +120,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 title: 'Step 1: Wrap ETH',
                 content: <WrapEthOnboardingStep2 />,
                 placement: 'right',
-                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
+                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
             {
                 target: '.wallet',
@@ -133,7 +133,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                     />
                 ),
                 placement: 'right',
-                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
+                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
             {
                 target: '.wallet',
@@ -149,7 +149,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             },
             {
                 target: '.wallet',
-                title: '🎉 Congrats! The ecosystem awaits.',
+                title: '🎉  The Ecosystem Awaits.',
                 content: <CongratsOnboardingStep />,
                 placement: 'right',
                 continueButtonDisplay: 'enabled',
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index ed6a4868e..de95296b0 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -312,6 +312,8 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
                 ...state,
                 isPortalOnboardingShowing,
                 hasPortalOnboardingBeenSeen: true,
+                // always start onboarding from the beginning
+                portalOnboardingStep: 0,
             };
         }
 
-- 
cgit 


From e481404a149913beb4bd7c24a3535488caf62bcb Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 19:07:53 -0700
Subject: Remove period in title from last step

---
 packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 0b7599aaf..40172677b 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -149,7 +149,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             },
             {
                 target: '.wallet',
-                title: '🎉  The Ecosystem Awaits.',
+                title: '🎉  The Ecosystem Awaits',
                 content: <CongratsOnboardingStep />,
                 placement: 'right',
                 continueButtonDisplay: 'enabled',
-- 
cgit 


From cd169869428f80c2bb89dbd282783b105472a4a1 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 19:21:09 -0700
Subject: Bring you directly to relayers page once you finish onboarding

---
 packages/website/ts/components/onboarding/onboarding_card.tsx      | 5 ++++-
 packages/website/ts/components/onboarding/onboarding_flow.tsx      | 3 +++
 .../website/ts/components/onboarding/portal_onboarding_flow.tsx    | 7 +++++++
 3 files changed, 14 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index eff66f488..2d49a1d20 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -6,6 +6,7 @@ import { Container } from 'ts/components/ui/container';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Island } from 'ts/components/ui/island';
 import { Text, Title } from 'ts/components/ui/text';
+import * as _ from 'lodash';
 
 export type ContinueButtonDisplay = 'enabled' | 'disabled';
 
@@ -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}
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index e20e58eec..834634909 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -17,6 +17,7 @@ export interface Step {
     shouldHideNextButton?: boolean;
     continueButtonDisplay?: ContinueButtonDisplay;
     continueButtonText?: string;
+    onContinueButtonClick?: () => void;
 }
 
 export interface OnboardingFlowProps {
@@ -90,6 +91,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     onClickBack={this._goToPrevStep.bind(this)}
                     continueButtonDisplay={step.continueButtonDisplay}
                     continueButtonText={step.continueButtonText}
+                    onContinueButtonClick={step.onContinueButtonClick}
                 />
             </Container>
         );
@@ -112,6 +114,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 40172677b..13eb444cd 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -155,6 +155,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 continueButtonDisplay: 'enabled',
                 shouldHideNextButton: true,
                 continueButtonText: 'Enter the 0x Ecosystem',
+                onContinueButtonClick: this._handleFinalStepContinueClick.bind(this),
             },
         ];
         return steps;
@@ -262,6 +263,12 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             />
         );
     }
+    private _handleFinalStepContinueClick(): void {
+        if (utils.isMobile(this.props.screenWidth)) {
+            this.props.history.push('/portal');
+        }
+        this._closeOnboarding();
+    }
 }
 
 export const PortalOnboardingFlow = withRouter(PlainPortalOnboardingFlow);
-- 
cgit 


From c20549e88d710cb5b3577fae468545aa2d531370 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 27 Jun 2018 19:23:51 -0700
Subject: Scroll to top when going to relayers page from onboarding

---
 packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 1 +
 1 file changed, 1 insertion(+)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 13eb444cd..6486bafcb 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -265,6 +265,7 @@ 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();
-- 
cgit 


From 512980d9bd33290582411baf381f95ee2ff3c22d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 28 Jun 2018 17:25:58 -0700
Subject: Change onboarding flow to communicate 3 steps

---
 .../website/ts/components/onboarding/intro_onboarding_step.tsx |  6 +++++-
 .../ts/components/onboarding/portal_onboarding_flow.tsx        | 10 +++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
index 548839218..b50484047 100644
--- a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
@@ -7,9 +7,13 @@ 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/ether.png" height="50px" width="50px" />
+                <Text> Add ETH </Text>
+            </div>
             <div className="flex flex-column items-center">
                 <img src="/images/eth_token.svg" height="50px" width="50x" />
                 <Text> Wrap ETH </Text>
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 1850a0966..d2beeadfa 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -95,7 +95,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             },
             {
                 target: '.wallet',
-                title: 'Add ETH',
+                title: 'Step 1: Add ETH',
                 content: (
                     <AddEthOnboardingStep
                         hasEth={
@@ -110,21 +110,21 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             },
             {
                 target: '.wallet',
-                title: 'Step 1: Wrap ETH',
+                title: 'Step 2: Wrap ETH',
                 content: <WrapEthOnboardingStep1 />,
                 placement: 'right',
                 continueButtonDisplay: 'enabled',
             },
             {
                 target: '.wallet',
-                title: 'Step 1: Wrap ETH',
+                title: 'Step 2: Wrap ETH',
                 content: <WrapEthOnboardingStep2 />,
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
             {
                 target: '.wallet',
-                title: 'Step 1: Wrap ETH',
+                title: 'Step 2: Wrap ETH',
                 content: (
                     <WrapEthOnboardingStep3
                         formattedWethBalanceIfExists={
@@ -137,7 +137,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             },
             {
                 target: '.wallet',
-                title: 'Step 2: Unlock Tokens',
+                title: 'Step 3: Unlock Tokens',
                 content: (
                     <SetAllowancesOnboardingStep
                         zrxAllowanceToggle={this._renderZrxAllowanceToggle()}
-- 
cgit 


From 467e9abf5fcda8be231e36f985964bf6d42b383e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 28 Jun 2018 17:34:29 -0700
Subject: Show eth balance in add eth balance onboarding step

---
 .../components/onboarding/add_eth_onboarding_step.tsx   | 17 ++++++++++++++---
 .../ts/components/onboarding/onboarding_card.tsx        |  2 +-
 .../ts/components/onboarding/portal_onboarding_flow.tsx |  8 +-------
 3 files changed, 16 insertions(+), 11 deletions(-)

(limited to 'packages/website/ts')

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 62d44885c..7250ef971 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -1,15 +1,26 @@
+import { BigNumber } from '@0xproject/utils';
 import * as React from 'react';
 import { Container } from 'ts/components/ui/container';
 import { Text } from 'ts/components/ui/text';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
 export interface AddEthOnboardingStepProps {
-    hasEth: boolean;
+    userEthBalanceInWei: BigNumber;
 }
 
 export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStepProps> = props =>
-    props.hasEth ? (
+    props.userEthBalanceInWei.gt(0) ? (
         <div className="flex items-center flex-column">
-            <Text> Great! Looks like you already have ETH in your wallet.</Text>
+            <Text>
+                Great! Looks like you already have{' '}
+                {utils.getFormattedAmount(
+                    props.userEthBalanceInWei,
+                    constants.DECIMAL_PLACES_ETH,
+                    constants.ETHER_SYMBOL,
+                )}{' '}
+                in your wallet.
+            </Text>
             <Container marginTop="15px" marginBottom="15px">
                 <img src="/images/ether_alt.svg" height="50px" width="50px" />
             </Container>
diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index 2d49a1d20..48e8ab022 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -1,12 +1,12 @@
 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';
 import { Island } from 'ts/components/ui/island';
 import { Text, Title } from 'ts/components/ui/text';
-import * as _ from 'lodash';
 
 export type ContinueButtonDisplay = 'enabled' | 'disabled';
 
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index d2beeadfa..0eb7cd8af 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -97,13 +97,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 target: '.wallet',
                 title: 'Step 1: Add ETH',
                 content: (
-                    <AddEthOnboardingStep
-                        hasEth={
-                            !_.isUndefined(this.props.userEtherBalanceInWei)
-                                ? this.props.userEtherBalanceInWei.gt(0)
-                                : false
-                        }
-                    />
+                    <AddEthOnboardingStep userEthBalanceInWei={this.props.userEtherBalanceInWei || new BigNumber(0)} />
                 ),
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
-- 
cgit 


From 0142e7fa8f3c28737c6352945c1f1b72c5f7339d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 28 Jun 2018 17:37:22 -0700
Subject: Fix button hover and active hover state

---
 packages/website/ts/components/ui/button.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts')

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) : '')};
-- 
cgit 


From 9ada8e4ddf621bb747ba1f35bfd62ac22db40d30 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 28 Jun 2018 17:51:39 -0700
Subject: Re-center react-popper on every step

---
 .../ts/components/onboarding/onboarding_flow.tsx       |  2 ++
 packages/website/ts/components/wallet/wallet.tsx       | 18 ++----------------
 2 files changed, 4 insertions(+), 16 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 834634909..1f4c6df82 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -68,6 +68,8 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
     }
     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, ...customStyles }} data-placement={props.placement}>
                 {this._renderToolTip()}
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index e1a2d4ce7..5dde0f4e7 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -156,20 +156,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             isHoveringSidebar: false,
         };
     }
-    public componentDidUpdate(prevProps: WalletProps): void {
-        const currentTrackedTokens = this.props.trackedTokens;
-        const differentTrackedTokens = _.difference(currentTrackedTokens, prevProps.trackedTokens);
-        const firstDifferentTrackedToken = _.head(differentTrackedTokens);
-        // check if there is only one different token, and if that token is a member of the current tracked tokens
-        // this means that the token was added, not removed
-        if (
-            !_.isUndefined(firstDifferentTrackedToken) &&
-            _.size(differentTrackedTokens) === 1 &&
-            _.includes(currentTrackedTokens, firstDifferentTrackedToken)
-        ) {
-            document.getElementById(firstDifferentTrackedToken.address).scrollIntoView();
-        }
-    }
     public render(): React.ReactNode {
         const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError;
         return (
@@ -332,7 +318,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const trackedTokensStartingWithEtherToken = trackedTokens.sort(
             firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL)
                 .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL)
-                .thenBy('trackedTimestamp'),
+                .thenBy('address'),
         );
         return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
     }
@@ -389,7 +375,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const style = { ...styles.tokenItem, ...additionalStyle };
         const etherToken = this._getEthToken();
         return (
-            <div id={key} key={key} className={`flex flex-column ${className || ''}`}>
+            <div key={key} className={`flex flex-column ${className || ''}`}>
                 <StandardIconRow
                     icon={icon}
                     main={
-- 
cgit 


From 67777c586ddc138ab74b78d41c58551a772d7c9e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 28 Jun 2018 18:00:10 -0700
Subject: Customize allowance setting onboarding step if you have your
 allowances set

---
 packages/website/ts/components/onboarding/portal_onboarding_flow.tsx   | 1 +
 .../ts/components/onboarding/set_allowances_onboarding_step.tsx        | 3 +++
 2 files changed, 4 insertions(+)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 0eb7cd8af..5db3a4919 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -136,6 +136,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                     <SetAllowancesOnboardingStep
                         zrxAllowanceToggle={this._renderZrxAllowanceToggle()}
                         ethAllowanceToggle={this._renderEthAllowanceToggle()}
+                        userHasAllowancesForWethAndZrx={this._userHasAllowancesForWethAndZrx()}
                     />
                 ),
                 placement: 'right',
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..c86cf3bba 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;
+    userHasAllowancesForWethAndZrx: boolean;
 }
 
 export const SetAllowancesOnboardingStep: React.StatelessComponent<SetAllowancesOnboardingStepProps> = ({
     ethAllowanceToggle,
     zrxAllowanceToggle,
+    userHasAllowancesForWethAndZrx,
 }) => (
     <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>
+        {userHasAllowancesForWethAndZrx && <Text>Perfect! Both your ZRX and WETH tokens are unlocked.</Text>}
     </div>
 );
-- 
cgit 


From e71862676c298a65fe30abe7d24054871c6a5484 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 28 Jun 2018 18:02:32 -0700
Subject: Bold all balances in onboarding

---
 .../ts/components/onboarding/add_eth_onboarding_step.tsx     | 12 +++++++-----
 .../ts/components/onboarding/wrap_eth_onboarding_step.tsx    |  2 +-
 2 files changed, 8 insertions(+), 6 deletions(-)

(limited to 'packages/website/ts')

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 7250ef971..f2af551a5 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -14,11 +14,13 @@ export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStep
         <div className="flex items-center flex-column">
             <Text>
                 Great! Looks like you already have{' '}
-                {utils.getFormattedAmount(
-                    props.userEthBalanceInWei,
-                    constants.DECIMAL_PLACES_ETH,
-                    constants.ETHER_SYMBOL,
-                )}{' '}
+                <b>
+                    {utils.getFormattedAmount(
+                        props.userEthBalanceInWei,
+                        constants.DECIMAL_PLACES_ETH,
+                        constants.ETHER_SYMBOL,
+                    )}{' '}
+                </b>
                 in your wallet.
             </Text>
             <Container marginTop="15px" marginBottom="15px">
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 68c13ad10..4d336c80f 100644
--- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
@@ -59,7 +59,7 @@ export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingS
 }) => (
     <div className="flex items-center flex-column">
         <Text>
-            You have {formattedWethBalanceIfExists || '0 WETH'} in your wallet.
+            You have <b>{formattedWethBalanceIfExists || '0 WETH'}</b> in your wallet.
             {formattedWethBalanceIfExists && ' Great!'}
         </Text>
         <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
-- 
cgit 


From 36cadaae46eb17261c6dd0ee82cd8cefb3806082 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 29 Jun 2018 11:08:48 -0700
Subject: Use Image component where relevant and add back tracked token
 timestamp logic

---
 .../components/onboarding/add_eth_onboarding_step.tsx  |  7 ++++---
 .../ts/components/onboarding/intro_onboarding_step.tsx |  7 ++++---
 packages/website/ts/components/wallet/wallet.tsx       | 18 ++++++++++++++++--
 3 files changed, 24 insertions(+), 8 deletions(-)

(limited to 'packages/website/ts')

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 f2af551a5..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,6 +1,7 @@
 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';
@@ -24,17 +25,17 @@ export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStep
                 in your wallet.
             </Text>
             <Container marginTop="15px" marginBottom="15px">
-                <img src="/images/ether_alt.svg" height="50px" width="50px" />
+                <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">
-                <img src="/images/ether_alt.svg" height="50px" width="50px" />
+                <Image src="/images/ether_alt.svg" height="50px" width="50px" />
             </Container>
             <Text className="xs-hide">
-                Click on the <img src="/images/metamask_icon.png" height="20px" width="20px" /> metamask extension in
+                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/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
index b50484047..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 {}
@@ -11,15 +12,15 @@ export const IntroOnboardingStep: React.StatelessComponent<IntroOnboardingStepPr
         </Text>
         <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
             <div className="flex flex-column items-center">
-                <img src="/images/ether.png" height="50px" width="50px" />
+                <Image src="/images/ether.png" height="50px" width="50px" />
                 <Text> Add ETH </Text>
             </div>
             <div className="flex flex-column items-center">
-                <img src="/images/eth_token.svg" height="50px" width="50x" />
+                <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/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 5dde0f4e7..e1a2d4ce7 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -156,6 +156,20 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             isHoveringSidebar: false,
         };
     }
+    public componentDidUpdate(prevProps: WalletProps): void {
+        const currentTrackedTokens = this.props.trackedTokens;
+        const differentTrackedTokens = _.difference(currentTrackedTokens, prevProps.trackedTokens);
+        const firstDifferentTrackedToken = _.head(differentTrackedTokens);
+        // check if there is only one different token, and if that token is a member of the current tracked tokens
+        // this means that the token was added, not removed
+        if (
+            !_.isUndefined(firstDifferentTrackedToken) &&
+            _.size(differentTrackedTokens) === 1 &&
+            _.includes(currentTrackedTokens, firstDifferentTrackedToken)
+        ) {
+            document.getElementById(firstDifferentTrackedToken.address).scrollIntoView();
+        }
+    }
     public render(): React.ReactNode {
         const isBlockchainLoaded = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError;
         return (
@@ -318,7 +332,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const trackedTokensStartingWithEtherToken = trackedTokens.sort(
             firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL)
                 .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL)
-                .thenBy('address'),
+                .thenBy('trackedTimestamp'),
         );
         return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
     }
@@ -375,7 +389,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const style = { ...styles.tokenItem, ...additionalStyle };
         const etherToken = this._getEthToken();
         return (
-            <div key={key} className={`flex flex-column ${className || ''}`}>
+            <div id={key} key={key} className={`flex flex-column ${className || ''}`}>
                 <StandardIconRow
                     icon={icon}
                     main={
-- 
cgit 


From fc40efb761514b9e22e77f61d161d267b5f4c3c0 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 29 Jun 2018 11:47:12 -0700
Subject: Allow you to continue the onboarding flow once youve installed
 metamask and refreshed the page

---
 .../onboarding/install_wallet_onboarding_step.tsx        |  7 ++++---
 .../ts/components/onboarding/portal_onboarding_flow.tsx  | 16 ++++++++--------
 packages/website/ts/containers/portal_onboarding_flow.ts |  4 ++--
 packages/website/ts/redux/reducer.ts                     |  6 +++---
 packages/website/ts/redux/store.ts                       |  2 +-
 5 files changed, 18 insertions(+), 17 deletions(-)

(limited to 'packages/website/ts')

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/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 5db3a4919..3e9b0bd2c 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -28,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;
@@ -44,7 +44,8 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
 class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
     private _unlisten: () => void;
     public componentDidMount(): void {
-        this._overrideOnboardingStateIfShould();
+        this._autoStartOnboardingIfShould();
+        this._adjustStepIfShould();
         // If there is a route change, just close onboarding.
         this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false));
     }
@@ -52,7 +53,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         this._unlisten();
     }
     public componentDidUpdate(): void {
-        this._overrideOnboardingStateIfShould();
+        this._adjustStepIfShould();
     }
     public render(): React.ReactNode {
         return (
@@ -189,10 +190,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()) {
@@ -216,7 +213,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);
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 de95296b0..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,7 @@ 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),
 );
-- 
cgit 


From 5207dfdc0e1abf97381e7c710ea8713bef23f830 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 29 Jun 2018 11:50:24 -0700
Subject: Rename userHasAllowances bool to follow proper convention

---
 .../website/ts/components/onboarding/portal_onboarding_flow.tsx     | 6 +++---
 .../ts/components/onboarding/set_allowances_onboarding_step.tsx     | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 3e9b0bd2c..6ef8fced1 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -137,11 +137,11 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                     <SetAllowancesOnboardingStep
                         zrxAllowanceToggle={this._renderZrxAllowanceToggle()}
                         ethAllowanceToggle={this._renderEthAllowanceToggle()}
-                        userHasAllowancesForWethAndZrx={this._userHasAllowancesForWethAndZrx()}
+                        doesUserHaveAllowancesForWethAndZrx={this._doesUserHaveAllowancesForWethAndZrx()}
                     />
                 ),
                 placement: 'right',
-                continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
+                continueButtonDisplay: this._doesUserHaveAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
             },
             {
                 target: '.wallet',
@@ -178,7 +178,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) {
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 c86cf3bba..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,13 +5,13 @@ import { Text } from 'ts/components/ui/text';
 export interface SetAllowancesOnboardingStepProps {
     zrxAllowanceToggle: React.ReactNode;
     ethAllowanceToggle: React.ReactNode;
-    userHasAllowancesForWethAndZrx: boolean;
+    doesUserHaveAllowancesForWethAndZrx: boolean;
 }
 
 export const SetAllowancesOnboardingStep: React.StatelessComponent<SetAllowancesOnboardingStepProps> = ({
     ethAllowanceToggle,
     zrxAllowanceToggle,
-    userHasAllowancesForWethAndZrx,
+    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>
@@ -25,6 +25,6 @@ export const SetAllowancesOnboardingStep: React.StatelessComponent<SetAllowances
                 <Container marginTop="10px">{zrxAllowanceToggle}</Container>
             </div>
         </Container>
-        {userHasAllowancesForWethAndZrx && <Text>Perfect! Both your ZRX and WETH tokens are unlocked.</Text>}
+        {doesUserHaveAllowancesForWethAndZrx && <Text>Perfect! Both your ZRX and WETH tokens are unlocked.</Text>}
     </div>
 );
-- 
cgit 


From 0dbe883c3b79b88375ba15b3b8c74c5c72ec684d Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 29 Jun 2018 13:24:31 -0700
Subject: Fix onboarding always starting

---
 packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 6ef8fced1..52a045573 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -44,8 +44,9 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
 class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
     private _unlisten: () => void;
     public componentDidMount(): void {
-        this._autoStartOnboardingIfShould();
         this._adjustStepIfShould();
+        // Wait until the step is adjusted to decide whether we should show onboarding.
+        setTimeout(this._autoStartOnboardingIfShould.bind(this), 250);
         // If there is a route change, just close onboarding.
         this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false));
     }
-- 
cgit 


From c473a0444c429da280425b0913221fe4e4aaeb15 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 29 Jun 2018 13:30:43 -0700
Subject: Bump automatic show onborading delay by 1000ms

---
 packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index f5a36b1c6..ae331a8db 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -46,7 +46,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
     public componentDidMount(): void {
         this._adjustStepIfShould();
         // Wait until the step is adjusted to decide whether we should show onboarding.
-        setTimeout(this._autoStartOnboardingIfShould.bind(this), 250);
+        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));
     }
-- 
cgit 


From 9d81e069dcce24d484c02ae9ca6ec861b6146358 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 29 Jun 2018 14:04:41 -0700
Subject: Remove extra call to scrollIntoView for wallet in onboarding

---
 packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 4 ----
 1 file changed, 4 deletions(-)

(limited to 'packages/website/ts')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index ae331a8db..6bfa5c75f 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -227,10 +227,6 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
             const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
             analytics.logEvent('Portal', 'Onboarding Started - Automatic', networkName, this.props.stepIndex);
             this.props.updateIsRunning(true);
-            // On mobile, make sure the wallet is completely visible.
-            if (utils.isMobile(this.props.screenWidth)) {
-                document.querySelector('.wallet').scrollIntoView();
-            }
         }
     }
     private _updateOnboardingStep(stepIndex: number): void {
-- 
cgit 


From 8ffce78827bc64f222128dfdd0dc4a45db402f3a Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Fri, 29 Jun 2018 16:47:58 -0700
Subject: Remove state variable from Link component in Portal

---
 packages/website/ts/components/portal/portal.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

(limited to 'packages/website/ts')

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>
         ) : (
-- 
cgit