Implement metamask installation flow

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

@@ -17,9 +17,16 @@ const joyrideStyleOptions: StyleOptions = {
 
 // Wrapper around Joyride with defaults and styles set
 export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
+    private _joyrideRef: React.RefObject<Joyride>;
+    constructor(props: OnboardingFlowProps) {
+        super(props);
+        this._joyrideRef = React.createRef();
+    }
+
     public render(): React.ReactNode {
         return (
             <Joyride
+                ref={this._joyrideRef}
                 run={this.props.isRunning}
                 debug={true}
                 steps={this.props.steps}

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

@@ -1,32 +1,72 @@
+import * as _ from 'lodash';
 import * as React from 'react';
 import { Step } from 'react-joyride';
 
 import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
+import { ProviderType } from 'ts/types';
+import { utils } from 'ts/utils/utils';
 
 export interface PortalOnboardingFlowProps {
     stepIndex: number;
     isRunning: boolean;
     onClose: () => void;
+    userAddress: string;
+    providerType: ProviderType;
+    injectedProviderName: string;
+    blockchainIsLoaded: boolean;
+    setOnboardingStep: (stepIndex: number) => void;
 }
 
-const steps: Step[] = [
-    {
-        target: '.wallet',
-        content: 'You are onboarding right now!',
-        placement: 'right',
-        disableBeacon: true,
-    },
-];
-
 export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
     public render(): React.ReactNode {
         return (
             <OnboardingFlow
-                steps={steps}
+                steps={this._getSteps()}
                 stepIndex={this.props.stepIndex}
                 isRunning={this.props.isRunning}
                 onClose={this.props.onClose}
             />
         );
     }
+
+    private _isAddressAvailable(): boolean {
+        return !_.isEmpty(this.props.userAddress);
+    }
+
+    private _getSteps(): Step[] {
+        const allSteps: 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',
+                disableBeacon: true,
+            },
+            {
+                target: '.wallet',
+                content: 'Unlock your metamask extension to begin',
+                placement: 'right',
+                disableBeacon: 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',
+                disableBeacon: true,
+            },
+        ];
+        const [noMetamaskStep, lockedMetamaskStep, ...restOfSteps] = allSteps;
+        if (this._isAddressAvailable()) {
+            return restOfSteps;
+        }
+        const isExternallyInjected = utils.isExternallyInjected(
+            this.props.providerType,
+            this.props.injectedProviderName,
+        );
+        if (isExternallyInjected) {
+            return [lockedMetamaskStep, ...restOfSteps];
+        }
+        return allSteps;
+    }
 }

packages/website/ts/components/top_bar/provider_display.tsx

@@ -39,8 +39,7 @@ const styles: Styles = {
 export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> {
     public render(): React.ReactNode {
         const isAddressAvailable = !_.isEmpty(this.props.userAddress);
-        const isExternallyInjectedProvider =
-            this.props.providerType === ProviderType.Injected && this.props.injectedProviderName !== '0x Public';
+        const isExternallyInjectedProvider = utils.isExternallyInjected(this.props.providerType, this.props.injectedProviderName);
         const displayAddress = isAddressAvailable
             ? utils.getAddressBeginAndEnd(this.props.userAddress)
             : isExternallyInjectedProvider
@@ -69,15 +68,13 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
                 )}
             </div>
         );
-        const hasInjectedProvider =
-            this.props.injectedProviderName !== '0x Public' && this.props.providerType === ProviderType.Injected;
         const hasLedgerProvider = this.props.providerType === ProviderType.Ledger;
-        const horizontalPosition = hasInjectedProvider || hasLedgerProvider ? 'left' : 'middle';
+        const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle';
         return (
             <div style={{ width: 'fit-content', height: 48, float: 'right' }}>
                 <DropDown
                     hoverActiveNode={hoverActiveNode}
-                    popoverContent={this.renderPopoverContent(hasInjectedProvider, hasLedgerProvider)}
+                    popoverContent={this.renderPopoverContent(isExternallyInjectedProvider, hasLedgerProvider)}
                     anchorOrigin={{ horizontal: horizontalPosition, vertical: 'bottom' }}
                     targetOrigin={{ horizontal: horizontalPosition, vertical: 'top' }}
                     zDepth={1}

packages/website/ts/components/wallet/wallet_disconnected_item.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { ProviderType } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
 
 export interface WalletDisconnectedItemProps {
     providerType: ProviderType;
@@ -38,8 +39,7 @@ const BUTTON_BOTTOM_PADDING = 80;
 export const WalletDisconnectedItem: React.StatelessComponent<WalletDisconnectedItemProps> = (
     props: WalletDisconnectedItemProps,
 ) => {
-    const isExternallyInjectedProvider =
-        props.providerType === ProviderType.Injected && props.injectedProviderName !== '0x Public';
+    const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName);
     return (
         <div className="flex flex-center">
             <div className="mx-auto">

packages/website/ts/containers/portal_onboarding_flow.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
-import { ActionTypes } from 'ts/types';
+import { ActionTypes, ProviderType } from 'ts/types';
 
 import { PortalOnboardingFlow as PortalOnboardingFlowComponent } from 'ts/components/onboarding/portal_onboarding_flow';
 import { State } from 'ts/redux/reducer';
@@ -11,6 +11,10 @@ interface PortalOnboardingFlowProps {}
 interface ConnectedState {
     stepIndex: number;
     isRunning: boolean;
+    userAddress: string;
+    providerType: ProviderType;
+    injectedProviderName: string;
+    blockchainIsLoaded: boolean;
 }
 
 interface ConnectedDispatch {
@@ -20,6 +24,10 @@ interface ConnectedDispatch {
 const mapStateToProps = (state: State): ConnectedState => ({
     stepIndex: state.portalOnboardingStep,
     isRunning: state.isPortalOnboardingShowing,
+    userAddress: state.userAddress,
+    providerType: state.providerType,
+    injectedProviderName: state.injectedProviderName,
+    blockchainIsLoaded: state.blockchainIsLoaded,
 });
 
 const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({

packages/website/ts/utils/utils.ts

@@ -13,6 +13,7 @@ import {
     Providers,
     ScreenWidths,
     Side,
+    ProviderType,
     SideToAssetToken,
     Token,
     TokenByAddress,
@@ -313,6 +314,9 @@ export const utils = {
     isStaging(): boolean {
         return _.includes(window.location.href, configs.DOMAIN_STAGING);
     },
+    isExternallyInjected(providerType: ProviderType, injectedProviderName: string): boolean {
+        return providerType === ProviderType.Injected && injectedProviderName !== constants.PROVIDER_NAME_PUBLIC;
+    },
     isDogfood,
     shouldShowPortalV2(): boolean {
         return this.isDevelopment() || this.isStaging() || this.isDogfood();