Merge pull request #635 from 0xProject/feature/website/custom-onboarding-tooltip

Remove react-joyride and some more refactoring

8 files changed, 310 insertions, 57 deletions

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 621d14260..4066babaf 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,39 +1,96 @@
 import * as _ from 'lodash';
 import * as React from 'react';
-import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride';
+import { Placement, Popper, PopperChildrenProps } from 'react-popper';
 
+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';
 
+export interface Step {
+    target: string;
+    title?: string;
+    content: React.ReactNode;
+    placement?: Placement;
+    hideBackButton?: boolean;
+    hideNextButton?: boolean;
+    continueButtonDisplay?: ContinueButtonDisplay;
+}
+
 export interface OnboardingFlowProps {
     steps: Step[];
     stepIndex: number;
     isRunning: boolean;
     onClose: () => void;
+    updateOnboardingStep: (stepIndex: number) => void;
 }
 
-const joyrideStyleOptions: StyleOptions = {
-    zIndex: zIndex.overlay,
-};
-
-// Wrapper around Joyride with defaults and styles set
 export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
     public render(): React.ReactNode {
+        if (!this.props.isRunning) {
+            return null;
+        }
+        return (
+            <Overlay>
+                <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
+                    {this._renderPopperChildren.bind(this)}
+                </Popper>
+            </Overlay>
+        );
+    }
+
+    private _getElementForStep(): Element {
+        return document.querySelector(this._getCurrentStep().target);
+    }
+
+    private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
         return (
-            <Joyride
-                run={this.props.isRunning}
-                debug={true}
-                steps={this.props.steps}
-                stepIndex={this.props.stepIndex}
-                styles={{ options: joyrideStyleOptions }}
-                callback={this._handleChange.bind(this)}
-            />
+            <div ref={props.ref} style={props.style} data-placement={props.placement}>
+                {this._renderToolTip()}
+            </div>
         );
     }
 
-    private _handleChange(data: CallbackData): void {
-        switch (data.action) {
-            case 'close':
-                this.props.onClose();
+    private _renderToolTip(): React.ReactNode {
+        const { steps, stepIndex } = this.props;
+        const step = steps[stepIndex];
+        const isLastStep = steps.length - 1 === stepIndex;
+        return (
+            <Container marginLeft="15px">
+                <OnboardingTooltip
+                    title={step.title}
+                    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>
+        );
+    }
+
+    private _getCurrentStep(): Step {
+        return this.props.steps[this.props.stepIndex];
+    }
+
+    private _goToNextStep(): void {
+        const nextStep = this.props.stepIndex + 1;
+        if (nextStep < this.props.steps.length) {
+            this.props.updateOnboardingStep(nextStep);
+        } else {
+            this.props.onClose();
+        }
+    }
+
+    private _goToPrevStep(): void {
+        const nextStep = this.props.stepIndex - 1;
+        if (nextStep >= 0) {
+            this.props.updateOnboardingStep(nextStep);
+        } else {
+            this.props.onClose();
         }
     }
 }
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
new file mode 100644
index 000000000..eb34a87f2
--- /dev/null
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+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;
+    isLastStep: boolean;
+    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>}
+                {!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 11684aaee..edaeb3736 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -1,32 +1,123 @@
+import * as _ from 'lodash';
 import * as React from 'react';
-import { Step } from 'react-joyride';
 
-import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
+import { BigNumber } from '@0xproject/utils';
+import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
+import { ProviderType, TokenByAddress } from 'ts/types';
+import { utils } from 'ts/utils/utils';
 
 export interface PortalOnboardingFlowProps {
     stepIndex: number;
     isRunning: boolean;
-    onClose: () => void;
+    userAddress: string;
+    hasBeenSeen: boolean;
+    providerType: ProviderType;
+    injectedProviderName: string;
+    blockchainIsLoaded: boolean;
+    userEthBalanceInWei: BigNumber;
+    tokenByAddress: TokenByAddress;
+    updateIsRunning: (isRunning: boolean) => void;
+    updateOnboardingStep: (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 componentDidMount(): void {
+        this._overrideOnboardingStateIfShould();
+    }
+    public componentDidUpdate(): void {
+        this._overrideOnboardingStateIfShould();
+    }
     public render(): React.ReactNode {
         return (
             <OnboardingFlow
-                steps={steps}
+                steps={this._getSteps()}
                 stepIndex={this.props.stepIndex}
                 isRunning={this.props.isRunning}
-                onClose={this.props.onClose}
+                onClose={this.props.updateIsRunning.bind(this, false)}
+                updateOnboardingStep={this.props.updateOnboardingStep}
             />
         );
     }
+
+    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();
+    }
+
+    private _adjustStepIfShould(): void {
+        if (this._isAddressAvailable()) {
+            if (this.props.stepIndex < 2) {
+                this.props.updateOnboardingStep(2);
+            }
+            return;
+        }
+        const isExternallyInjected = utils.isExternallyInjected(
+            this.props.providerType,
+            this.props.injectedProviderName,
+        );
+        if (isExternallyInjected) {
+            this.props.updateOnboardingStep(1);
+            return;
+        }
+        this.props.updateOnboardingStep(0);
+    }
+    private _autoStartOnboardingIfShould(): void {
+        if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
+            this.props.updateIsRunning(true);
+        }
+    }
 }
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index fc516882a..679ec07dc 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -11,6 +11,7 @@ import { Dispatcher } from 'ts/redux/dispatcher';
 import { ProviderType } from 'ts/types';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
+import { zIndex } from 'ts/utils/style';
 import { utils } from 'ts/utils/utils';
 
 const ROOT_HEIGHT = 24;
@@ -39,8 +40,10 @@ 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 +72,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}
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 07868608c..d577447b0 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -1,10 +1,17 @@
 import * as React from 'react';
 
+type StringOrNum = string | number;
+
 export interface ContainerProps {
-    marginTop?: string | number;
-    marginBottom?: string | number;
-    marginRight?: string | number;
-    marginLeft?: string | number;
+    marginTop?: StringOrNum;
+    marginBottom?: StringOrNum;
+    marginRight?: StringOrNum;
+    marginLeft?: StringOrNum;
+    paddingTop?: StringOrNum;
+    paddingBottom?: StringOrNum;
+    paddingRight?: StringOrNum;
+    paddingLeft?: StringOrNum;
+    maxWidth?: StringOrNum;
     children?: React.ReactNode;
 }
 
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
new file mode 100644
index 000000000..bb2ed8e59
--- /dev/null
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -0,0 +1,34 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { zIndex } from 'ts/utils/style';
+
+export interface OverlayProps {
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    onClick?: () => void;
+}
+
+const style: React.CSSProperties = {
+    position: 'fixed',
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    zIndex: zIndex.overlay,
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+};
+
+export const Overlay: React.StatelessComponent = (props: OverlayProps) => (
+    <div style={{ ...style, ...props.style }} onClick={props.onClick}>
+        {props.children}
+    </div>
+);
+
+Overlay.defaultProps = {
+    style: {},
+    onClick: _.noop,
+};
+
+Overlay.displayName = 'Overlay';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 10ee31619..30d1285f4 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -46,6 +46,7 @@ import {
 import { backendClient } from 'ts/utils/backend_client';
 import { colors } from 'ts/utils/colors';
 import { constants } from 'ts/utils/constants';
+import { zIndex } from 'ts/utils/style';
 import { utils } from 'ts/utils/utils';
 import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
 
@@ -88,6 +89,8 @@ interface AccessoryItemConfig {
 const styles: Styles = {
     root: {
         width: '100%',
+        zIndex: zIndex.aboveOverlay,
+        position: 'relative',
     },
     headerItemInnerDiv: {
         paddingLeft: 65,
@@ -129,9 +132,6 @@ const styles: Styles = {
 };
 
 const ETHER_ICON_PATH = '/images/ether.png';
-const ETHER_TOKEN_SYMBOL = 'WETH';
-const ZRX_TOKEN_SYMBOL = 'ZRX';
-const ETHER_SYMBOL = 'ETH';
 const ICON_DIMENSION = 24;
 const TOKEN_AMOUNT_DISPLAY_PRECISION = 3;
 const BODY_ITEM_KEY = 'BODY';
@@ -322,7 +322,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const primaryText = this._renderAmount(
             this.props.userEtherBalanceInWei,
             constants.DECIMAL_PLACES_ETH,
-            ETHER_SYMBOL,
+            constants.ETHER_SYMBOL,
         );
         const etherToken = this._getEthToken();
         const etherPrice = this.state.trackedTokenStateByAddress[etherToken.address].price;
@@ -341,13 +341,13 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             ? { ...walletItemStyles.focusedItem, ...styles.paddedItem }
             : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
         const key = ETHER_ITEM_KEY;
-        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig);
+        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row');
     }
     private _renderTokenRows(): React.ReactNode {
         const trackedTokens = this.props.trackedTokens;
         const trackedTokensStartingWithEtherToken = trackedTokens.sort(
-            firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL)
-                .thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL)
+            firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL)
+                .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL)
                 .thenBy('address'),
         );
         return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
@@ -362,7 +362,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         const icon = <TokenIcon token={token} diameter={ICON_DIMENSION} link={tokenLink} />;
         const primaryText = this._renderAmount(tokenState.balance, token.decimals, token.symbol);
         const secondaryText = this._renderValue(tokenState.balance, token.decimals, tokenState.price);
-        const wrappedEtherDirection = token.symbol === ETHER_TOKEN_SYMBOL ? Side.Receive : undefined;
+        const isWeth = token.symbol === constants.ETHER_TOKEN_SYMBOL;
+        const wrappedEtherDirection = isWeth ? Side.Receive : undefined;
         const accessoryItemConfig: AccessoryItemConfig = {
             wrappedEtherDirection,
             allowanceToggleConfig: {
@@ -371,7 +372,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             },
         };
         const key = token.address;
-        return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig);
+        return this._renderBalanceRow(
+            key,
+            icon,
+            primaryText,
+            secondaryText,
+            accessoryItemConfig,
+            isWeth ? 'weth-row' : undefined,
+        );
     }
     private _renderBalanceRow(
         key: string,
@@ -379,6 +387,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         primaryText: React.ReactNode,
         secondaryText: React.ReactNode,
         accessoryItemConfig: AccessoryItemConfig,
+        className?: string,
     ): React.ReactNode {
         const shouldShowWrapEtherItem =
             !_.isUndefined(this.state.wrappedEtherDirection) &&
@@ -388,7 +397,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
             : { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
         const etherToken = this._getEthToken();
         return (
-            <div key={key} className="flex flex-column">
+            <div key={key} className={`flex flex-column ${className || ''}`}>
                 <div className="flex items-center" style={style}>
                     <div className="px2">{icon}</div>
                     <div className="flex-none pr2 pt2 pb2">
@@ -578,8 +587,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         });
     }
     private _getEthToken(): Token {
-        const tokens = _.values(this.props.tokenByAddress);
-        const etherToken = _.find(tokens, { symbol: ETHER_TOKEN_SYMBOL });
-        return etherToken;
+        return utils.getEthToken(this.props.tokenByAddress);
     }
 } // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
index d334f1748..39a62e1fb 100644
--- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
+++ b/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">