Break wrath ETH step into 2

3 files changed, 72 insertions, 70 deletions

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>
+);