Customize flow depending on what steps you've completed

4 files changed, 43 insertions, 20 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 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>