1 files changed, 0 insertions, 281 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
deleted file mode 100644
index 6adcec0b1..000000000
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import * as _ from 'lodash';
-import * as React from 'react';
-import { RouteComponentProps, withRouter } from 'react-router';
-
-import { BigNumber } from '@0x/utils';
-import { Blockchain } from 'ts/blockchain';
-import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step';
-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 {
-    FixedPositionSettings,
-    OnboardingFlow,
-    Step,
-    TargetPositionSettings,
-} 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 {
-    WrapEthOnboardingStep1,
-    WrapEthOnboardingStep2,
-    WrapEthOnboardingStep3,
-} from 'ts/components/onboarding/wrap_eth_onboarding_step';
-import { AllowanceStateToggle } from 'ts/containers/inputs/allowance_state_toggle';
-import { BrowserType, ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
-import { analytics } from 'ts/utils/analytics';
-import { utils } from 'ts/utils/utils';
-
-export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
-    networkId: number;
-    blockchain: Blockchain;
-    stepIndex: number;
-    isRunning: boolean;
-    userAddress: string;
-    hasBeenClosed: boolean;
-    providerType: ProviderType;
-    injectedProviderName: string;
-    blockchainIsLoaded: boolean;
-    userEtherBalanceInWei?: BigNumber;
-    tokenByAddress: TokenByAddress;
-    trackedTokenStateByAddress: TokenStateByAddress;
-    updateIsRunning: (isRunning: boolean) => void;
-    updateOnboardingStep: (stepIndex: number) => void;
-    refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
-    screenWidth: ScreenWidths;
-}
-
-class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
-    private _unlisten: () => void;
-    public componentDidMount(): void {
-        this._adjustStepIfShould();
-        // If there is a route change, just close onboarding.
-        this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false));
-    }
-    public componentWillUnmount(): void {
-        this._unlisten();
-    }
-    public componentDidUpdate(prevProps: PortalOnboardingFlowProps): void {
-        // Any one of steps 0-3 could be the starting step, and we only want to reset the scroll on the starting step.
-        if (this.props.isRunning && utils.isMobileWidth(this.props.screenWidth) && this.props.stepIndex < 3) {
-            // On mobile, make sure the wallet is completely visible.
-            document.querySelector('.wallet').scrollIntoView();
-        }
-        this._adjustStepIfShould();
-        if (!prevProps.blockchainIsLoaded && this.props.blockchainIsLoaded) {
-            this._autoStartOnboardingIfShould();
-        }
-    }
-    public render(): React.ReactNode {
-        const browserType = utils.getBrowserType();
-        return (
-            <OnboardingFlow
-                steps={this._getSteps()}
-                stepIndex={this.props.stepIndex}
-                isRunning={this.props.isRunning}
-                onClose={this._closeOnboarding.bind(this)}
-                updateOnboardingStep={this._updateOnboardingStep.bind(this)}
-                disableOverlay={this.props.screenWidth === ScreenWidths.Sm}
-                isMobile={this.props.screenWidth === ScreenWidths.Sm}
-                // This is necessary to ensure onboarding stays open once the user unlocks metamask and clicks away
-                disableCloseOnClickOutside={browserType === BrowserType.Firefox || browserType === BrowserType.Opera}
-            />
-        );
-    }
-    private _getSteps(): Step[] {
-        const nextToWalletPosition: TargetPositionSettings = {
-            type: 'target',
-            target: '.wallet',
-            placement: 'right',
-        };
-        const underMetamaskExtension: FixedPositionSettings = {
-            type: 'fixed',
-            top: '10px',
-            right: '10px',
-            tooltipPointerDisplay: 'none',
-        };
-        const steps: Step[] = [
-            {
-                position: nextToWalletPosition,
-                title: '0x Ecosystem Setup',
-                content: <InstallWalletOnboardingStep />,
-                shouldHideBackButton: true,
-                shouldHideNextButton: true,
-            },
-            {
-                position: underMetamaskExtension,
-                title: 'Please Unlock Metamask...',
-                content: <UnlockWalletOnboardingStep />,
-                shouldHideBackButton: true,
-                shouldHideNextButton: true,
-                shouldCenterTitle: true,
-                shouldRemoveExtraSpacing: true,
-            },
-            {
-                position: nextToWalletPosition,
-                title: '0x Ecosystem Account Setup',
-                content: <IntroOnboardingStep />,
-                shouldHideBackButton: true,
-                continueButtonDisplay: 'enabled',
-            },
-            {
-                position: nextToWalletPosition,
-                title: 'Step 1: Add ETH',
-                content: (
-                    <AddEthOnboardingStep userEthBalanceInWei={this.props.userEtherBalanceInWei || new BigNumber(0)} />
-                ),
-                continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
-            },
-            {
-                position: nextToWalletPosition,
-                title: 'Step 2: Wrap ETH',
-                content: <WrapEthOnboardingStep1 />,
-                continueButtonDisplay: 'enabled',
-            },
-            {
-                position: nextToWalletPosition,
-                title: 'Step 2: Wrap ETH',
-                content: <WrapEthOnboardingStep2 />,
-                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
-            },
-            {
-                position: nextToWalletPosition,
-                title: 'Step 2: Wrap ETH',
-                content: <WrapEthOnboardingStep3 wethAmount={this._getWethBalance()} />,
-                continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
-            },
-            {
-                position: nextToWalletPosition,
-                title: 'Step 3: Unlock Tokens',
-                content: (
-                    <SetAllowancesOnboardingStep
-                        zrxAllowanceToggle={this._renderZrxAllowanceStateToggle()}
-                        ethAllowanceToggle={this._renderEthAllowanceStateToggle()}
-                        doesUserHaveAllowancesForWethAndZrx={this._doesUserHaveAllowancesForWethAndZrx()}
-                    />
-                ),
-                continueButtonDisplay: this._doesUserHaveAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
-            },
-            {
-                position: nextToWalletPosition,
-                title: '🎉  The Ecosystem Awaits',
-                content: <CongratsOnboardingStep />,
-                continueButtonDisplay: 'enabled',
-                shouldHideNextButton: true,
-                continueButtonText: 'Enter the 0x Ecosystem',
-                onContinueButtonClick: this._handleFinalStepContinueClick.bind(this),
-            },
-        ];
-        return steps;
-    }
-    private _isAddressAvailable(): boolean {
-        return !_.isEmpty(this.props.userAddress);
-    }
-    private _userHasVisibleEth(): boolean {
-        return this.props.userEtherBalanceInWei > new BigNumber(0);
-    }
-    private _getWethBalance(): BigNumber {
-        const ethToken = utils.getEthToken(this.props.tokenByAddress);
-        if (!ethToken) {
-            return new BigNumber(0);
-        }
-        const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
-        return ethTokenState.balance;
-    }
-    private _userHasVisibleWeth(): boolean {
-        return this._getWethBalance() > new BigNumber(0);
-    }
-    private _doesUserHaveAllowancesForWethAndZrx(): boolean {
-        const ethToken = utils.getEthToken(this.props.tokenByAddress);
-        const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
-        if (ethToken && zrxToken) {
-            const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
-            const zrxTokenState = this.props.trackedTokenStateByAddress[zrxToken.address];
-            if (ethTokenState && zrxTokenState) {
-                return ethTokenState.allowance.gt(0) && zrxTokenState.allowance.gt(0);
-            }
-        }
-        return false;
-    }
-    private _adjustStepIfShould(): void {
-        const stepIndex = this.props.stepIndex;
-        if (this._isAddressAvailable()) {
-            if (stepIndex < 2) {
-                this.props.updateOnboardingStep(2);
-            }
-            return;
-        }
-        const isExternallyInjected = utils.isExternallyInjected(
-            this.props.providerType,
-            this.props.injectedProviderName,
-        );
-        if (isExternallyInjected) {
-            if (stepIndex !== 1) {
-                this.props.updateOnboardingStep(1);
-            }
-            return;
-        }
-        if (stepIndex !== 0) {
-            this.props.updateOnboardingStep(0);
-        }
-    }
-    private _autoStartOnboardingIfShould(): void {
-        if (
-            (this.props.stepIndex === 0 && !this.props.isRunning && this.props.blockchainIsLoaded) ||
-            (!this.props.isRunning && !this.props.hasBeenClosed && this.props.blockchainIsLoaded)
-        ) {
-            analytics.track('Onboarding Started', {
-                reason: 'automatic',
-                stepIndex: this.props.stepIndex,
-            });
-            this.props.updateIsRunning(true);
-        }
-    }
-    private _updateOnboardingStep(stepIndex: number): void {
-        this.props.updateOnboardingStep(stepIndex);
-        analytics.track('Update Onboarding Step', {
-            stepIndex,
-        });
-    }
-    private _closeOnboarding(): void {
-        this.props.updateIsRunning(false);
-        analytics.track('Onboarding Closed', {
-            stepIndex: this.props.stepIndex,
-        });
-    }
-    private _renderZrxAllowanceStateToggle(): React.ReactNode {
-        const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
-        return this._renderAllowanceStateToggle(zrxToken);
-    }
-    private _renderEthAllowanceStateToggle(): React.ReactNode {
-        const ethToken = utils.getEthToken(this.props.tokenByAddress);
-        return this._renderAllowanceStateToggle(ethToken);
-    }
-    private _renderAllowanceStateToggle(token: Token): React.ReactNode {
-        if (!token) {
-            return null;
-        }
-        const tokenStateIfExists = this.props.trackedTokenStateByAddress[token.address];
-        if (_.isUndefined(tokenStateIfExists)) {
-            return null;
-        }
-        return (
-            <AllowanceStateToggle
-                token={token}
-                tokenState={tokenStateIfExists}
-                blockchain={this.props.blockchain}
-                // tslint:disable-next-line:jsx-no-lambda
-                refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(token.address)}
-            />
-        );
-    }
-    private _handleFinalStepContinueClick(): void {
-        if (utils.isMobileWidth(this.props.screenWidth)) {
-            window.scrollTo(0, 0);
-            this.props.history.push('/portal');
-        }
-        this._closeOnboarding();
-    }
-}
-
-export const PortalOnboardingFlow = withRouter(PlainPortalOnboardingFlow);