Implement fixed position onboarding option

1 files changed, 26 insertions, 19 deletions

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 6d8007659..f83736aae 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -9,7 +9,12 @@ import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboardin
 import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboarding_step';
 import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step';
 import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step';
-import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
+import {
+    OnboardingFlow,
+    Step,
+    TargetPositionSettings,
+    FixedPositionSettings,
+} 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 {
@@ -79,56 +84,61 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         );
     }
     private _getSteps(): Step[] {
+        const nextToWalletPosition: TargetPositionSettings = {
+            type: 'target',
+            target: '.wallet',
+            placement: 'right',
+        };
+        const underMetamaskExtension: FixedPositionSettings = {
+            type: 'fixed',
+            top: '30px',
+            right: '10px',
+            pointerDirection: 'top',
+        };
         const steps: Step[] = [
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: '0x Ecosystem Setup',
                 content: <InstallWalletOnboardingStep />,
-                placement: 'right',
                 shouldHideBackButton: true,
                 shouldHideNextButton: true,
             },
             {
-                target: '.wallet',
+                position: underMetamaskExtension,
                 title: '0x Ecosystem Setup',
                 content: <UnlockWalletOnboardingStep />,
-                placement: 'right',
                 shouldHideBackButton: true,
                 shouldHideNextButton: true,
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: '0x Ecosystem Account Setup',
                 content: <IntroOnboardingStep />,
-                placement: 'right',
                 shouldHideBackButton: true,
                 continueButtonDisplay: 'enabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: 'Step 1: Add ETH',
                 content: (
                     <AddEthOnboardingStep userEthBalanceInWei={this.props.userEtherBalanceInWei || new BigNumber(0)} />
                 ),
-                placement: 'right',
                 continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: 'Step 2: Wrap ETH',
                 content: <WrapEthOnboardingStep1 />,
-                placement: 'right',
                 continueButtonDisplay: 'enabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: 'Step 2: Wrap ETH',
                 content: <WrapEthOnboardingStep2 />,
-                placement: 'right',
                 continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: 'Step 2: Wrap ETH',
                 content: (
                     <WrapEthOnboardingStep3
@@ -137,11 +147,10 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                         }
                     />
                 ),
-                placement: 'right',
                 continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: 'Step 3: Unlock Tokens',
                 content: (
                     <SetAllowancesOnboardingStep
@@ -150,14 +159,12 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                         doesUserHaveAllowancesForWethAndZrx={this._doesUserHaveAllowancesForWethAndZrx()}
                     />
                 ),
-                placement: 'right',
                 continueButtonDisplay: this._doesUserHaveAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
             },
             {
-                target: '.wallet',
+                position: nextToWalletPosition,
                 title: '🎉  The Ecosystem Awaits',
                 content: <CongratsOnboardingStep />,
-                placement: 'right',
                 continueButtonDisplay: 'enabled',
                 shouldHideNextButton: true,
                 continueButtonText: 'Enter the 0x Ecosystem',