diff options
Diffstat (limited to 'packages/website/ts/components/onboarding')
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> -); |