Onboarding: implement add ETH step, and stub for add WETH step

3 files changed, 89 insertions, 32 deletions

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 524587358..4066babaf 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -2,7 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Placement, Popper, PopperChildrenProps } from 'react-popper';
 
-import { OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
+import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
 import { Container } from 'ts/components/ui/container';
 import { Overlay } from 'ts/components/ui/overlay';
 import { zIndex } from 'ts/utils/style';
@@ -13,6 +13,8 @@ export interface Step {
     content: React.ReactNode;
     placement?: Placement;
     hideBackButton?: boolean;
+    hideNextButton?: boolean;
+    continueButtonDisplay?: ContinueButtonDisplay;
 }
 
 export interface OnboardingFlowProps {
@@ -60,9 +62,11 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     content={step.content}
                     isLastStep={isLastStep}
                     hideBackButton={step.hideBackButton}
+                    hideNextButton={step.hideNextButton}
                     onClose={this.props.onClose}
                     onClickNext={this._goToNextStep.bind(this)}
                     onClickBack={this._goToPrevStep.bind(this)}
+                    continueButtonDisplay={step.continueButtonDisplay}
                 />
             </Container>
         );
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 41925a672..eb34a87f2 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -4,6 +4,8 @@ import { colors } from '@0xproject/react-shared';
 import { Container } from 'ts/components/ui/container';
 import { Island } from 'ts/components/ui/island';
 
+export type ContinueButtonDisplay = 'enabled' | 'disabled';
+
 export interface OnboardingTooltipProps {
     title?: string;
     content: React.ReactNode;
@@ -11,19 +13,44 @@ export interface OnboardingTooltipProps {
     onClose: () => void;
     onClickNext: () => void;
     onClickBack: () => void;
+    continueButtonDisplay?: ContinueButtonDisplay;
     hideBackButton?: boolean;
+    hideNextButton?: boolean;
+}
+
+// TODO: Make this more general button.
+export interface ContinueButtonProps {
+    display: ContinueButtonDisplay;
+    children?: string;
+    onClick: () => void;
 }
 
+export const ContinueButton: React.StatelessComponent<ContinueButtonProps> = (props: ContinueButtonProps) => {
+    const isDisabled = props.display === 'disabled';
+    return (
+        <button disabled={isDisabled} onClick={isDisabled ? undefined : props.onClick}>
+            {props.children}
+        </button>
+    );
+};
+
 export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => (
     <Island>
         <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
             <div className="flex flex-column">
                 {props.title}
                 {props.content}
+                {props.continueButtonDisplay && (
+                    <ContinueButton onClick={props.onClickNext} display={props.continueButtonDisplay}>
+                        Continue
+                    </ContinueButton>
+                )}
                 {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>}
-                <button onClick={props.onClickNext}>Skip</button>
+                {!props.hideNextButton && <button onClick={props.onClickNext}>Skip</button>}
                 <button onClick={props.onClose}>Close</button>
             </div>
         </Container>
     </Island>
 );
+
+OnboardingTooltip.displayName = 'OnboardingTooltip';
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 8bcb4c749..edaeb3736 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -1,49 +1,25 @@
 import * as _ from 'lodash';
 import * as React from 'react';
 
-import { black } from 'material-ui/styles/colors';
+import { BigNumber } from '@0xproject/utils';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
-import { ProviderType } from 'ts/types';
+import { ProviderType, TokenByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
 export interface PortalOnboardingFlowProps {
     stepIndex: number;
     isRunning: boolean;
     userAddress: string;
+    hasBeenSeen: boolean;
     providerType: ProviderType;
     injectedProviderName: string;
     blockchainIsLoaded: boolean;
-    hasBeenSeen: boolean;
+    userEthBalanceInWei: BigNumber;
+    tokenByAddress: TokenByAddress;
     updateIsRunning: (isRunning: boolean) => void;
     updateOnboardingStep: (stepIndex: number) => void;
 }
 
-const steps: Step[] = [
-    {
-        target: '.wallet',
-        content:
-            'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
-        placement: 'right',
-    },
-    {
-        target: '.wallet',
-        content: 'Unlock your metamask extension to begin',
-        placement: 'right',
-    },
-    {
-        target: '.wallet',
-        content:
-            'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
-        placement: 'right',
-        hideBackButton: true,
-    },
-    {
-        target: '.wallet',
-        content: 'Before you begin you will need to send some ETH to your metamask wallet',
-        placement: 'right',
-    },
-];
-
 export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
     public componentDidMount(): void {
         this._overrideOnboardingStateIfShould();
@@ -54,7 +30,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
     public render(): React.ReactNode {
         return (
             <OnboardingFlow
-                steps={steps}
+                steps={this._getSteps()}
                 stepIndex={this.props.stepIndex}
                 isRunning={this.props.isRunning}
                 onClose={this.props.updateIsRunning.bind(this, false)}
@@ -63,10 +39,60 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         );
     }
 
+    private _getSteps(): Step[] {
+        const steps: Step[] = [
+            {
+                target: '.wallet',
+                content:
+                    'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
+                placement: 'right',
+                hideBackButton: true,
+                hideNextButton: true,
+            },
+            {
+                target: '.wallet',
+                content: 'Unlock your metamask extension to begin',
+                placement: 'right',
+                hideBackButton: true,
+                hideNextButton: true,
+            },
+            {
+                target: '.wallet',
+                content:
+                    'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
+                placement: 'right',
+                hideBackButton: true,
+                continueButtonDisplay: 'enabled',
+            },
+            {
+                target: '.eth-row',
+                content: 'Before you begin you will need to send some ETH to your metamask wallet',
+                placement: 'right',
+                continueButtonDisplay: this._userHasEth() ? 'enabled' : 'disabled',
+            },
+            {
+                target: '.weth-row',
+                content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)',
+                placement: 'right',
+                continueButtonDisplay: this._userHasWeth() ? 'enabled' : 'disabled',
+            },
+        ];
+        return steps;
+    }
+
     private _isAddressAvailable(): boolean {
         return !_.isEmpty(this.props.userAddress);
     }
 
+    private _userHasEth(): boolean {
+        return this.props.userEthBalanceInWei > new BigNumber(0);
+    }
+
+    private _userHasWeth(): boolean {
+        // TODO: https://app.asana.com/0/681385331277907/690722374136933
+        return false;
+    }
+
     private _overrideOnboardingStateIfShould(): void {
         this._autoStartOnboardingIfShould();
         this._adjustStepIfShould();