From 8c5dc7cecdb8766e68a1d70d007904eb62ac1c55 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 2 Jul 2018 15:52:59 -0700
Subject: Only auto-start onboarding if blockchain is loaded

---
 .../website/ts/components/onboarding/portal_onboarding_flow.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 6bfa5c75f..6d8007659 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -46,7 +46,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
     public componentDidMount(): void {
         this._adjustStepIfShould();
         // Wait until the step is adjusted to decide whether we should show onboarding.
-        setTimeout(this._autoStartOnboardingIfShould.bind(this), 1000);
+        // setTimeout(this._autoStartOnboardingIfShould.bind(this), 1000);
         // If there is a route change, just close onboarding.
         this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false));
     }
@@ -61,6 +61,9 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 document.querySelector('.wallet').scrollIntoView();
             }
         }
+        if (!prevProps.blockchainIsLoaded && this.props.blockchainIsLoaded) {
+            this._autoStartOnboardingIfShould();
+        }
     }
     public render(): React.ReactNode {
         return (
@@ -221,7 +224,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
     }
     private _autoStartOnboardingIfShould(): void {
         if (
-            (this.props.stepIndex === 0 && !this.props.isRunning) ||
+            (this.props.stepIndex === 0 && !this.props.isRunning && this.props.blockchainIsLoaded) ||
             (!this.props.isRunning && !this.props.hasBeenClosed && this.props.blockchainIsLoaded)
         ) {
             const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
-- 
cgit v1.2.3


From 73e81c62fb2e902cb7252410fe162e8f2ba2596b Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 2 Jul 2018 15:58:53 -0700
Subject: Remove max-width from onboarding card to support iPad

---
 packages/website/ts/components/onboarding/onboarding_card.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index 48e8ab022..ba5b3d6ea 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -39,7 +39,7 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
     borderRadius,
 }) => (
     <Island borderRadius={borderRadius}>
-        <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
+        <Container paddingRight="30px" paddingLeft="30px" paddingTop="15px" paddingBottom="15px">
             <div className="flex flex-column">
                 <div className="flex justify-between">
                     <Title>{title}</Title>
-- 
cgit v1.2.3


From a5231df6d9d8c9b89431df2e4674f46d307f6d80 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 2 Jul 2018 17:26:48 -0700
Subject: Add media query abstraction around ScreenWidths and stop relayer grid
 hover effect on mobile

---
 .../ts/components/onboarding/unlock_wallet_onboarding_step.tsx        | 2 +-
 packages/website/ts/components/relayer_index/relayer_grid_tile.tsx    | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
index 0039aa545..4ed7137d4 100644
--- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
@@ -10,7 +10,7 @@ export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOn
             <Container marginTop="15px" marginBottom="15px">
                 <img src="/images/metamask_icon.png" height="50px" width="50px" />
             </Container>
-            <Text center={true}>Unlock your metamask extension to get started.</Text>
+            <Text center={true}>Unlock your MetaMask extension to get started.</Text>
         </div>
     </div>
 );
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index b26bf512b..20594e5ca 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -9,6 +9,7 @@ import { Container } from 'ts/components/ui/container';
 import { Image } from 'ts/components/ui/image';
 import { Island } from 'ts/components/ui/island';
 import { colors } from 'ts/style/colors';
+import { media } from 'ts/style/media';
 import { styled } from 'ts/style/theme';
 import { WebsiteBackendRelayerInfo } from 'ts/types';
 import { utils } from 'ts/utils/utils';
@@ -111,6 +112,9 @@ const GridTile = styled(PlainGridTile)`
     &:hover {
         transform: translate(0px, -3px);
     }
+    ${media.small`
+        transform: none;
+    `};
 `;
 
 interface SectionProps {
-- 
cgit v1.2.3


From a31f7a5112e9a74a64dd4079a08c0c749e3ffaeb Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 2 Jul 2018 18:12:08 -0700
Subject: Implement fixed position onboarding option

---
 .../ts/components/onboarding/onboarding_flow.tsx   | 55 ++++++++++++++++------
 .../onboarding/portal_onboarding_flow.tsx          | 45 ++++++++++--------
 2 files changed, 67 insertions(+), 33 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 1f4c6df82..9abbc1c82 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,18 +1,35 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import { Placement, Popper, PopperChildrenProps } from 'react-popper';
 
 import { OnboardingCard } from 'ts/components/onboarding/onboarding_card';
+import { PointerDirection } from 'ts/components/ui/pointer';
 import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
 import { Animation } from 'ts/components/ui/animation';
 import { Container } from 'ts/components/ui/container';
 import { Overlay } from 'ts/components/ui/overlay';
 import { zIndex } from 'ts/style/z_index';
 
-export interface Step {
+export interface FixedPositionSettings {
+    type: 'fixed';
+    top?: string;
+    bottom?: string;
+    left?: string;
+    right?: string;
+    pointerDirection?: PointerDirection;
+}
+
+export interface TargetPositionSettings {
+    type: 'target';
     target: string;
+    placement: Placement;
+}
+
+export interface Step {
+    // Provide either a CSS selector, or fixed position settings. Only applies to desktop.
+    position: TargetPositionSettings | FixedPositionSettings;
     title?: string;
     content: React.ReactNode;
-    placement?: Placement;
     shouldHideBackButton?: boolean;
     shouldHideNextButton?: boolean;
     continueButtonDisplay?: ContinueButtonDisplay;
@@ -40,18 +57,30 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             return null;
         }
         let onboardingElement = null;
+        const currentStep = this._getCurrentStep();
         if (this.props.isMobile) {
-            onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
-        } else {
+            onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardingCard()}</Animation>;
+        } else if (currentStep.position.type === 'target') {
+            const { placement, target } = currentStep.position;
             onboardingElement = (
-                <Popper
-                    referenceElement={this._getElementForStep()}
-                    placement={this._getCurrentStep().placement}
-                    positionFixed={true}
-                >
+                <Popper referenceElement={document.querySelector(target)} placement={placement} positionFixed={true}>
                     {this._renderPopperChildren.bind(this)}
                 </Popper>
             );
+        } else if (currentStep.position.type === 'fixed') {
+            const { top, right, bottom, left, pointerDirection } = currentStep.position;
+            onboardingElement = (
+                <Container
+                    position="fixed"
+                    zIndex={zIndex.aboveOverlay}
+                    top={top}
+                    right={right}
+                    bottom={bottom}
+                    left={left}
+                >
+                    {this._renderToolTip(pointerDirection)}
+                </Container>
+            );
         }
         if (this.props.disableOverlay) {
             return onboardingElement;
@@ -63,9 +92,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             </div>
         );
     }
-    private _getElementForStep(): Element {
-        return document.querySelector(this._getCurrentStep().target);
-    }
     private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
         const customStyles = { zIndex: zIndex.aboveOverlay };
         // On re-render, we want to re-center the popper.
@@ -76,7 +102,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
             </div>
         );
     }
-    private _renderToolTip(): React.ReactNode {
+    private _renderToolTip(pointerDirection?: PointerDirection): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
@@ -94,12 +120,13 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     continueButtonDisplay={step.continueButtonDisplay}
                     continueButtonText={step.continueButtonText}
                     onContinueButtonClick={step.onContinueButtonClick}
+                    pointerDirection={pointerDirection}
                 />
             </Container>
         );
     }
 
-    private _renderOnboardignCard(): React.ReactNode {
+    private _renderOnboardingCard(): React.ReactNode {
         const { steps, stepIndex } = this.props;
         const step = steps[stepIndex];
         const isLastStep = steps.length - 1 === stepIndex;
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',
-- 
cgit v1.2.3


From f62044c1e3f35e0985724ebc1bac3a9b23dc2c2e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Mon, 2 Jul 2018 18:14:21 -0700
Subject: Add media file and remove stray comment

---
 packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 --
 1 file changed, 2 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 6d8007659..c8786da13 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -45,8 +45,6 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
     private _unlisten: () => void;
     public componentDidMount(): void {
         this._adjustStepIfShould();
-        // Wait until the step is adjusted to decide whether we should show onboarding.
-        // setTimeout(this._autoStartOnboardingIfShould.bind(this), 1000);
         // If there is a route change, just close onboarding.
         this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false));
     }
-- 
cgit v1.2.3


From c30b42434a8999356d7537e50c88ea96481e8c60 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 3 Jul 2018 11:31:40 -0700
Subject: Fix linting

---
 packages/website/ts/components/onboarding/onboarding_flow.tsx        | 3 +--
 packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 2 +-
 2 files changed, 2 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 9abbc1c82..c2b4a4ca7 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,13 +1,12 @@
-import * as _ from 'lodash';
 import * as React from 'react';
 import { Placement, Popper, PopperChildrenProps } from 'react-popper';
 
 import { OnboardingCard } from 'ts/components/onboarding/onboarding_card';
-import { PointerDirection } from 'ts/components/ui/pointer';
 import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
 import { Animation } from 'ts/components/ui/animation';
 import { Container } from 'ts/components/ui/container';
 import { Overlay } from 'ts/components/ui/overlay';
+import { PointerDirection } from 'ts/components/ui/pointer';
 import { zIndex } from 'ts/style/z_index';
 
 export interface FixedPositionSettings {
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 573196547..b7c5a9f64 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -10,10 +10,10 @@ import { CongratsOnboardingStep } from 'ts/components/onboarding/congrats_onboar
 import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step';
 import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step';
 import {
+    FixedPositionSettings,
     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';
-- 
cgit v1.2.3