Add next button

packages/typescript-typings/types/react-joyride/index.d.ts

@@ -62,6 +62,7 @@ declare module 'react-joyride' {
         steps?: Step[];
         beaconComponent?: React.ReactNode;
         disableOverlayClose?: boolean;
+        continuous?: boolean;
         run?: boolean;
         stepIndex?: number;
         callback?: (data: CallbackData) => void;
@@ -70,7 +71,7 @@ declare module 'react-joyride' {
     }
 
     export interface State {
-        action: string;
+        action: 'prev' | 'close' | 'next';
         controlled: boolean;
         index: number;
         lifecycle: string;

packages/website/ts/components/onboarding/onboarding_flow.tsx

@@ -31,6 +31,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         return (
             <Joyride
                 run={this.props.isRunning}
+                continuous={true}
                 debug={true}
                 steps={this.props.steps}
                 stepIndex={this.props.stepIndex}
@@ -48,7 +49,9 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             this.props.steps.length,
             blacklistedSteps,
         );
-        this.props.setOnboardingStep(newStepIndex);
+        if (newStepIndex !== nextIndex) {
+            this.props.setOnboardingStep(newStepIndex);
+        }
     }
 
     private _adjustedStepBasedOnBlacklist(
@@ -87,6 +90,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         switch (data.action) {
             case 'close':
                 this.props.onClose();
+                break;
         }
     }
 }

packages/website/ts/components/onboarding/portal_onboarding_flow.tsx

@@ -40,6 +40,12 @@ const steps: Step[] = [
         placement: 'right',
         disableBeacon: true,
     },
+    {
+        target: '.wallet',
+        content: 'Before you begin you will need to send some ETH to your metamask wallet',
+        placement: 'right',
+        disableBeacon: true,
+    },
 ];
 
 export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {