Deploy @dexon-foundation/0x.jsstable

11 files changed, 0 insertions, 861 deletions

diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
deleted file mode 100644
index 1d21e5a85..000000000
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { BigNumber } from '@0x/utils';
-import * as React from 'react';
-import { Balance } from 'ts/components/ui/balance';
-import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
-import { Text } from 'ts/components/ui/text';
-import { constants } from 'ts/utils/constants';
-
-export interface AddEthOnboardingStepProps {
-    userEthBalanceInWei: BigNumber;
-}
-
-export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStepProps> = props =>
-    props.userEthBalanceInWei.gt(0) ? (
-        <div className="flex items-center flex-column">
-            <Text>
-                Great! Looks like you already have{' '}
-                <Balance
-                    amount={props.userEthBalanceInWei}
-                    decimals={constants.DECIMAL_PLACES_ETH}
-                    symbol={constants.ETHER_SYMBOL}
-                />{' '}
-                in your wallet.
-            </Text>
-            <Container marginTop="15px" marginBottom="15px">
-                <Image src="/images/ether_alt.svg" height="50px" width="50px" />
-            </Container>
-        </div>
-    ) : (
-        <div className="flex items-center flex-column">
-            <Text> Before you begin you will need to send some ETH to your wallet.</Text>
-            <Container marginTop="15px" marginBottom="15px">
-                <Image src="/images/ether_alt.svg" height="50px" width="50px" />
-            </Container>
-            <Text className="xs-hide">
-                Click on the <Image src="/images/metamask_icon.png" height="20px" width="20px" /> MetaMask extension in
-                your browser and click either <b>BUY</b> or <b>DEPOSIT</b>.
-            </Text>
-        </div>
-    );
diff --git a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx
deleted file mode 100644
index 8100fd2c0..000000000
--- a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react';
-import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
-
-export interface CongratsOnboardingStepProps {}
-
-export const CongratsOnboardingStep: React.StatelessComponent<CongratsOnboardingStepProps> = () => (
-    <div className="flex items-center flex-column">
-        <Text>Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.</Text>
-        <Container marginTop="25px" marginBottom="15px" className="flex justify-center">
-            <img src="/images/zrx_ecosystem.svg" height="150px" />
-        </Container>
-        <Text>No need to log in. Each relayer automatically detects and connects to your wallet.</Text>
-    </div>
-);
diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
deleted file mode 100644
index 173ba9a97..000000000
--- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { colors } from '@0x/react-shared';
-import * as React from 'react';
-import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
-import { Text } from 'ts/components/ui/text';
-import { utils } from 'ts/utils/utils';
-
-export interface InstallWalletOnboardingStepProps {}
-
-export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWalletOnboardingStepProps> = () => {
-    const [downloadLink, isOnMobile] = utils.getBestWalletDownloadLinkAndIsMobile();
-    const followupText = isOnMobile
-        ? `Please revisit this site in your mobile dApp browser to continue!`
-        : `Please refresh the page once you've done this to continue!`;
-    const downloadText = isOnMobile ? 'Get Coinbase Wallet' : 'Get the MetaMask extension';
-    return (
-        <div className="flex items-center flex-column">
-            <Text>First, you need to connect to a wallet. This will be used across all 0x relayers and dApps.</Text>
-            <Container className="flex items-center" marginTop="15px" marginBottom="15px">
-                <Image
-                    height="50px"
-                    width="50px"
-                    borderRadius="22%"
-                    src={isOnMobile ? '/images/coinbase_wallet_logo.png' : '/images/metamask_icon.png'}
-                />
-                <Container marginLeft="10px">
-                    <a href={downloadLink} target="_blank">
-                        <Text
-                            fontWeight={700}
-                            fontSize="18px"
-                            fontColor={colors.mediumBlue}
-                            textDecorationLine="underline"
-                        >
-                            {downloadText}
-                        </Text>
-                    </a>
-                </Container>
-            </Container>
-            <Text>{followupText}</Text>
-        </div>
-    );
-};
diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
deleted file mode 100644
index f9ced7315..000000000
--- a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { Container } from 'ts/components/ui/container';
-import { Image } from 'ts/components/ui/image';
-import { Text } from 'ts/components/ui/text';
-
-export interface IntroOnboardingStepProps {}
-
-export const IntroOnboardingStep: React.StatelessComponent<IntroOnboardingStepProps> = () => (
-    <div className="flex items-center flex-column">
-        <Text>
-            In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete three simple steps.
-        </Text>
-        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
-            <div className="flex flex-column items-center">
-                <Image src="/images/ether.png" height="50px" width="50px" />
-                <Text> Add ETH </Text>
-            </div>
-            <div className="flex flex-column items-center">
-                <Image src="/images/eth_token.svg" height="50px" width="50x" />
-                <Text> Wrap ETH </Text>
-            </div>
-            <div className="flex flex-column items-center">
-                <Container marginBottom="9px">
-                    <Image src="/images/lock_icon.svg" height="35px" width="35x" />
-                </Container>
-                <Text> Unlock tokens </Text>
-            </div>
-        </Container>
-    </div>
-);
diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
deleted file mode 100644
index 384bf7154..000000000
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-import { colors } from '@0x/react-shared';
-import * as React from 'react';
-
-import * as _ from 'lodash';
-import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
-import { IconButton } from 'ts/components/ui/icon_button';
-import { Island } from 'ts/components/ui/island';
-import { Text, Title } from 'ts/components/ui/text';
-
-export type ContinueButtonDisplay = 'enabled' | 'disabled';
-
-export interface OnboardingCardProps {
-    title?: string;
-    shouldCenterTitle?: boolean;
-    content: React.ReactNode;
-    isLastStep: boolean;
-    onClose: () => void;
-    onClickNext: () => void;
-    onClickBack: () => void;
-    onContinueButtonClick?: () => void;
-    continueButtonDisplay?: ContinueButtonDisplay;
-    shouldHideBackButton?: boolean;
-    shouldHideNextButton?: boolean;
-    continueButtonText?: string;
-    borderRadius?: string;
-    // Used for super-custom content.
-    shouldRemoveExtraSpacing?: boolean;
-}
-
-export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
-    title,
-    shouldCenterTitle,
-    content,
-    continueButtonDisplay,
-    continueButtonText,
-    onContinueButtonClick,
-    onClickNext,
-    onClickBack,
-    onClose,
-    shouldHideBackButton,
-    shouldHideNextButton,
-    borderRadius,
-    shouldRemoveExtraSpacing,
-}) => {
-    const padding = shouldRemoveExtraSpacing
-        ? {}
-        : {
-              paddingRight: '30px',
-              paddingLeft: '30px',
-              paddingTop: '15px',
-              paddingBottom: '15px',
-          };
-    const closeIconPositioning = shouldRemoveExtraSpacing
-        ? { right: '15px', bottom: '3px' }
-        : { bottom: '20px', left: '15px' };
-    return (
-        <Island borderRadius={borderRadius}>
-            <Container {...padding}>
-                <div className="flex flex-column">
-                    <Container className="flex justify-between">
-                        <Container width="100%">
-                            <Title center={shouldCenterTitle}>{title}</Title>
-                        </Container>
-                        <Container position="relative" {...closeIconPositioning}>
-                            <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
-                                Close
-                            </IconButton>
-                        </Container>
-                    </Container>
-                    <Container marginBottom={shouldRemoveExtraSpacing ? undefined : '15px'}>
-                        <Text>{content}</Text>
-                    </Container>
-                    {continueButtonDisplay && (
-                        <Button
-                            isDisabled={continueButtonDisplay === 'disabled'}
-                            onClick={!_.isUndefined(onContinueButtonClick) ? onContinueButtonClick : onClickNext}
-                            fontColor={colors.white}
-                            fontSize="15px"
-                            backgroundColor={colors.mediumBlue}
-                        >
-                            {continueButtonText}
-                        </Button>
-                    )}
-                    {!(shouldHideBackButton && shouldHideNextButton) && (
-                        <Container className="clearfix" marginTop="15px">
-                            <div className="left">
-                                {!shouldHideBackButton && (
-                                    <Text fontColor={colors.grey} onClick={onClickBack}>
-                                        Back
-                                    </Text>
-                                )}
-                            </div>
-                            <div className="right">
-                                {!shouldHideNextButton && (
-                                    <Text fontColor={colors.grey} onClick={onClickNext}>
-                                        Skip
-                                    </Text>
-                                )}
-                            </div>
-                        </Container>
-                    )}
-                </div>
-            </Container>
-        </Island>
-    );
-};
-
-OnboardingCard.defaultProps = {
-    continueButtonText: 'Continue',
-    shouldCenterTitle: false,
-    shouldRemoveExtraSpacing: false,
-};
-
-OnboardingCard.displayName = 'OnboardingCard';
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
deleted file mode 100644
index ec1b5bc42..000000000
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-import * as React from 'react';
-import { Placement, Popper, PopperChildrenProps } from 'react-popper';
-
-import { OnboardingCard } from 'ts/components/onboarding/onboarding_card';
-import {
-    ContinueButtonDisplay,
-    OnboardingTooltip,
-    TooltipPointerDisplay,
-} from 'ts/components/onboarding/onboarding_tooltip';
-import { Container } from 'ts/components/ui/container';
-import { EaseUpFromBottomAnimation } from 'ts/components/ui/ease_up_from_bottom_animation';
-import { Overlay } from 'ts/components/ui/overlay';
-import { zIndex } from 'ts/style/z_index';
-
-export interface FixedPositionSettings {
-    type: 'fixed';
-    top?: string;
-    bottom?: string;
-    left?: string;
-    right?: string;
-    tooltipPointerDisplay?: TooltipPointerDisplay;
-}
-
-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;
-    shouldCenterTitle?: boolean;
-    content: React.ReactNode;
-    shouldHideBackButton?: boolean;
-    shouldHideNextButton?: boolean;
-    continueButtonDisplay?: ContinueButtonDisplay;
-    continueButtonText?: string;
-    onContinueButtonClick?: () => void;
-    // Only used for very custom steps.
-    shouldRemoveExtraSpacing?: boolean;
-}
-
-export interface OnboardingFlowProps {
-    steps: Step[];
-    stepIndex: number;
-    isRunning: boolean;
-    onClose: () => void;
-    updateOnboardingStep: (stepIndex: number) => void;
-    disableOverlay?: boolean;
-    isMobile: boolean;
-    disableCloseOnClickOutside?: boolean;
-}
-
-export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
-    public static defaultProps = {
-        disableOverlay: false,
-        isMobile: false,
-        disableCloseOnClickOutside: false,
-    };
-    public render(): React.ReactNode {
-        if (!this.props.isRunning) {
-            return null;
-        }
-        let onboardingElement = null;
-        const currentStep = this._getCurrentStep();
-        if (this.props.isMobile) {
-            onboardingElement = <EaseUpFromBottomAnimation>{this._renderOnboardingCard()}</EaseUpFromBottomAnimation>;
-        } else if (currentStep.position.type === 'target') {
-            const { placement, target } = currentStep.position;
-            onboardingElement = (
-                <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, tooltipPointerDisplay } = currentStep.position;
-            onboardingElement = (
-                <Container
-                    position="fixed"
-                    zIndex={zIndex.aboveOverlay}
-                    top={top}
-                    right={right}
-                    bottom={bottom}
-                    left={left}
-                >
-                    {this._renderToolTip(tooltipPointerDisplay)}
-                </Container>
-            );
-        }
-        if (this.props.disableOverlay) {
-            return onboardingElement;
-        }
-        return (
-            <div>
-                <Overlay onClick={this.props.disableCloseOnClickOutside ? undefined : this.props.onClose} />
-                {onboardingElement}
-            </div>
-        );
-    }
-    private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
-        const customStyles = { zIndex: zIndex.aboveOverlay };
-        // On re-render, we want to re-center the popper.
-        props.scheduleUpdate();
-        return (
-            <div ref={props.ref} style={{ ...props.style, ...customStyles }} data-placement={props.placement}>
-                {this._renderToolTip()}
-            </div>
-        );
-    }
-    private _renderToolTip(tooltipPointerDisplay?: TooltipPointerDisplay): React.ReactNode {
-        const { steps, stepIndex } = this.props;
-        const step = steps[stepIndex];
-        const isLastStep = steps.length - 1 === stepIndex;
-        return (
-            <Container marginLeft="30px" width="400px">
-                <OnboardingTooltip
-                    title={step.title}
-                    shouldCenterTitle={step.shouldCenterTitle}
-                    content={step.content}
-                    isLastStep={isLastStep}
-                    shouldHideBackButton={step.shouldHideBackButton}
-                    shouldHideNextButton={step.shouldHideNextButton}
-                    onClose={this.props.onClose}
-                    onClickNext={this._goToNextStep.bind(this)}
-                    onClickBack={this._goToPrevStep.bind(this)}
-                    continueButtonDisplay={step.continueButtonDisplay}
-                    continueButtonText={step.continueButtonText}
-                    onContinueButtonClick={step.onContinueButtonClick}
-                    pointerDisplay={tooltipPointerDisplay}
-                    shouldRemoveExtraSpacing={step.shouldRemoveExtraSpacing}
-                />
-            </Container>
-        );
-    }
-
-    private _renderOnboardingCard(): React.ReactNode {
-        const { steps, stepIndex } = this.props;
-        const step = steps[stepIndex];
-        const isLastStep = steps.length - 1 === stepIndex;
-        return (
-            <Container position="relative" zIndex={1}>
-                <OnboardingCard
-                    title={step.title}
-                    shouldCenterTitle={step.shouldCenterTitle}
-                    content={step.content}
-                    isLastStep={isLastStep}
-                    shouldHideBackButton={step.shouldHideBackButton}
-                    shouldHideNextButton={step.shouldHideNextButton}
-                    onClose={this.props.onClose}
-                    onClickNext={this._goToNextStep.bind(this)}
-                    onClickBack={this._goToPrevStep.bind(this)}
-                    continueButtonDisplay={step.continueButtonDisplay}
-                    continueButtonText={step.continueButtonText}
-                    onContinueButtonClick={step.onContinueButtonClick}
-                    borderRadius="10px 10px 0px 0px"
-                    shouldRemoveExtraSpacing={step.shouldRemoveExtraSpacing}
-                />
-            </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
deleted file mode 100644
index ff5f0bab6..000000000
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-
-import { OnboardingCard, OnboardingCardProps } from 'ts/components/onboarding/onboarding_card';
-import { Pointer, PointerDirection } from 'ts/components/ui/pointer';
-
-export type ContinueButtonDisplay = 'enabled' | 'disabled';
-export type TooltipPointerDisplay = PointerDirection | 'none';
-
-export interface OnboardingTooltipProps extends OnboardingCardProps {
-    className?: string;
-    pointerDisplay?: TooltipPointerDisplay;
-}
-
-export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = props => {
-    const { pointerDisplay, className, ...cardProps } = props;
-    const card = <OnboardingCard {...cardProps} />;
-    if (pointerDisplay === 'none') {
-        return card;
-    }
-    return (
-        <Pointer className={className} direction={pointerDisplay}>
-            <OnboardingCard {...cardProps} />
-        </Pointer>
-    );
-};
-OnboardingTooltip.defaultProps = {
-    pointerDisplay: PointerDirection.Left,
-};
-
-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
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);
diff --git a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx
deleted file mode 100644
index 5ddfe38d7..000000000
--- a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react';
-import { Container } from 'ts/components/ui/container';
-import { Text } from 'ts/components/ui/text';
-
-export interface SetAllowancesOnboardingStepProps {
-    zrxAllowanceToggle: React.ReactNode;
-    ethAllowanceToggle: React.ReactNode;
-    doesUserHaveAllowancesForWethAndZrx: boolean;
-}
-
-export const SetAllowancesOnboardingStep: React.StatelessComponent<SetAllowancesOnboardingStepProps> = ({
-    ethAllowanceToggle,
-    zrxAllowanceToggle,
-    doesUserHaveAllowancesForWethAndZrx,
-}) => (
-    <div className="flex items-center flex-column">
-        <Text>Unlock your tokens for trading. You only need to do this once for each token.</Text>
-        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
-            <div className="flex flex-column items-center">
-                <Text fontWeight={700}> Enable WETH </Text>
-                <Container marginTop="10px">{ethAllowanceToggle}</Container>
-            </div>
-            <div className="flex flex-column items-center">
-                <Text fontWeight={700}> Enable ZRX </Text>
-                <Container marginTop="10px">{zrxAllowanceToggle}</Container>
-            </div>
-        </Container>
-        {doesUserHaveAllowancesForWethAndZrx && <Text>Perfect! Both your ZRX and WETH tokens are unlocked.</Text>}
-    </div>
-);
diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
deleted file mode 100644
index 358141520..000000000
--- a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { Image } from 'ts/components/ui/image';
-
-export interface UnlockWalletOnboardingStepProps {}
-
-export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOnboardingStepProps> = () => (
-    <Image src="/images/unlock-mm.png" />
-);
diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
deleted file mode 100644
index 37eef867b..000000000
--- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { colors } from '@0x/react-shared';
-import { BigNumber } from '@0x/utils';
-import * as React from 'react';
-import { Balance } from 'ts/components/ui/balance';
-import { Container } from 'ts/components/ui/container';
-import { IconButton } from 'ts/components/ui/icon_button';
-import { Text } from 'ts/components/ui/text';
-import { constants } from 'ts/utils/constants';
-
-export interface WrapEthOnboardingStep1Props {}
-
-export const WrapEthOnboardingStep1: React.StatelessComponent<WrapEthOnboardingStep1Props> = () => (
-    <div className="flex items-center flex-column">
-        <Text>
-            You need to convert some of your ETH into tradeable <b>Wrapped ETH (WETH)</b>.
-        </Text>
-        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
-            <div className="flex flex-column items-center">
-                <Text fontWeight={700}> 1 ETH </Text>
-                <img src="/images/eth_dollar.svg" height="75px" width="75x" />
-            </div>
-            <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
-                <Text fontSize="36px">=</Text>
-            </Container>
-            <div className="flex flex-column items-center">
-                <Text fontWeight={700}> 1 WETH </Text>
-                <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
-            </div>
-        </Container>
-        <Text>
-            Think of it like the coin version of a paper note. It has the same value, but some machines only take coins.
-        </Text>
-    </div>
-);
-
-export interface WrapEthOnboardingStep2Props {}
-
-export const WrapEthOnboardingStep2: React.StatelessComponent<WrapEthOnboardingStep2Props> = () => (
-    <div className="flex items-center flex-column">
-        <Text>Wrapping your ETH is a reversable transaction, so don't worry about losing your ETH.</Text>
-        <Text>
-            Click
-            <Container display="inline-block" marginLeft="10px" marginRight="10px">
-                <IconButton
-                    iconName="zmdi-long-arrow-down"
-                    color={colors.mediumBlue}
-                    labelText="wrap"
-                    display="inline-flex"
-                />
-            </Container>
-            to wrap your ETH.
-        </Text>
-    </div>
-);
-
-export interface WrapEthOnboardingStep3Props {
-    wethAmount: BigNumber;
-}
-
-export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({ wethAmount }) => (
-    <div className="flex items-center flex-column">
-        <Text>
-            You have{' '}
-            <Balance
-                amount={wethAmount}
-                decimals={constants.DECIMAL_PLACES_ETH}
-                symbol={constants.ETHER_TOKEN_SYMBOL}
-            />{' '}
-            in your wallet.
-            {wethAmount.gt(0) && ' Great!'}
-        </Text>
-        <Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-center">
-            <div className="flex flex-column items-center">
-                <Text fontWeight={700}> 1 ETH </Text>
-                <img src="/images/eth_dollar.svg" height="75px" width="75x" />
-            </div>
-            <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
-                <Text fontSize="25px">
-                    <i className="zmdi zmdi-long-arrow-right" />
-                </Text>
-            </Container>
-            <div className="flex flex-column items-center">
-                <Text fontWeight={700}> 1 WETH </Text>
-                <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
-            </div>
-        </Container>
-    </div>
-);