Change onboarding flow to communicate 3 steps

2 files changed, 10 insertions, 6 deletions

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,10 +7,14 @@ 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>
             </div>
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()}