From d0a3779091661cfa099ec84f12e5d944287d1e3f Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 14 Jun 2018 18:19:07 -0700 Subject: Add Pointer component --- .../components/onboarding/onboarding_tooltip.tsx | 35 ++++++++++++---------- 1 file changed, 19 insertions(+), 16 deletions(-) (limited to 'packages/website/ts/components/onboarding') diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 155c70c5f..9e0744dcb 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { Container } from 'ts/components/ui/container'; import { Island } from 'ts/components/ui/island'; +import { Pointer } from 'ts/components/ui/pointer'; export type ContinueButtonDisplay = 'enabled' | 'disabled'; @@ -34,22 +35,24 @@ export const ContinueButton: React.StatelessComponent = (pr }; export const OnboardingTooltip: React.StatelessComponent = (props: OnboardingTooltipProps) => ( - - -
- {props.title} - {props.content} - {props.continueButtonDisplay && ( - - Continue - - )} - {!props.hideBackButton && } - {!props.hideNextButton && } - -
- - + + + +
+ {props.title} + {props.content} + {props.continueButtonDisplay && ( + + Continue + + )} + {!props.hideBackButton && } + {!props.hideNextButton && } + +
+ + + ); OnboardingTooltip.displayName = 'OnboardingTooltip'; -- cgit From 54f79c2798c095344b003139144b77fc1024d8c3 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 13:17:02 -0700 Subject: Improve styles of onboarding tooltip --- .../ts/components/onboarding/onboarding_flow.tsx | 10 +-- .../components/onboarding/onboarding_tooltip.tsx | 87 ++++++++++++++-------- .../onboarding/portal_onboarding_flow.tsx | 20 +++-- 3 files changed, 77 insertions(+), 40 deletions(-) (limited to 'packages/website/ts/components/onboarding') diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 9879cd387..7a5a6e40f 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -10,8 +10,8 @@ export interface Step { title?: string; content: React.ReactNode; placement?: Placement; - hideBackButton?: boolean; - hideNextButton?: boolean; + shouldHideBackButton?: boolean; + shouldHideNextButton?: boolean; continueButtonDisplay?: ContinueButtonDisplay; } @@ -54,13 +54,13 @@ export class OnboardingFlow extends React.Component { const step = steps[stepIndex]; const isLastStep = steps.length - 1 === stepIndex; return ( - + void; onClickBack: () => void; continueButtonDisplay?: ContinueButtonDisplay; - hideBackButton?: boolean; - hideNextButton?: boolean; + shouldHideBackButton?: boolean; + shouldHideNextButton?: boolean; + pointerDirection?: PointerDirection; + className?: string; } -// TODO: Make this more general button. -export interface ContinueButtonProps { - display: ContinueButtonDisplay; - children?: string; - onClick: () => void; -} - -export const ContinueButton: React.StatelessComponent = (props: ContinueButtonProps) => { - const isDisabled = props.display === 'disabled'; - return ( - - ); -}; - -export const OnboardingTooltip: React.StatelessComponent = (props: OnboardingTooltipProps) => ( - +export const OnboardingTooltip: React.StatelessComponent = ({ + title, + content, + continueButtonDisplay, + onClickNext, + onClickBack, + onClose, + shouldHideBackButton, + shouldHideNextButton, + pointerDirection, + className, +}) => ( +
- {props.title} - {props.content} - {props.continueButtonDisplay && ( - +
+ {title} + + + Close + + +
+ + {content} + + {continueButtonDisplay && ( + )} - {!props.hideBackButton && } - {!props.hideNextButton && } - + + {!shouldHideBackButton && ( + + Back + + )} + {!shouldHideNextButton && ( + + Skip + + )} +
); +OnboardingTooltip.defaultProps = { + 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 index efb844cb5..3deefec3c 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -47,41 +47,47 @@ export class PortalOnboardingFlow extends React.Component Unlock your tokens for trading. You only need to do this once for each token. @@ -94,9 +100,11 @@ export class PortalOnboardingFlow extends React.Component Date: Fri, 15 Jun 2018 14:49:01 -0700 Subject: Make metamask part of the fow pretty --- .../onboarding/portal_onboarding_flow.tsx | 29 +++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/components/onboarding') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 3deefec3c..7e6ce6d02 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,9 +1,13 @@ +import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import { Blockchain } from 'ts/blockchain'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; @@ -48,8 +52,20 @@ export class PortalOnboardingFlow extends React.Component + + + + + Before you begin, you need to connect to a wallet. This will be used across all 0x relayers + and dApps. + + + ), placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -57,7 +73,14 @@ export class PortalOnboardingFlow extends React.Component + + + + Unlock your metamask extension to begin. + + ), placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, -- cgit From 5993125cc7d5129aead37a06663741d42ff0189e Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 15:17:20 -0700 Subject: Prettify account setup and add eth steps of onboarding --- .../onboarding/portal_onboarding_flow.tsx | 33 ++++++++++++++++++++-- 1 file changed, 30 insertions(+), 3 deletions(-) (limited to 'packages/website/ts/components/onboarding') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 7e6ce6d02..11f1becfe 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -88,8 +88,24 @@ export class PortalOnboardingFlow extends React.Component + + In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two + simple steps. + + +
+ + Wrap ETH +
+
+ + Unlock tokens +
+ + + ), placement: 'right', shouldHideBackButton: true, continueButtonDisplay: 'enabled', @@ -97,7 +113,18 @@ export class PortalOnboardingFlow extends React.Component + Before you begin you will need to send some ETH to your metamask wallet. + + + + + Click on the metamask + extension in your browser and click either BUY or DEPOSIT. + + + ), placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, -- cgit From 0cf99271328a0bee0730a33659fe30aa426c59da Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 18:02:33 -0700 Subject: Add all steps to their own file --- .../onboarding/add_eth_onboarding_step.tsx | 18 +++++ .../onboarding/install_wallet_onboarding_step.tsx | 18 +++++ .../onboarding/intro_onboarding_step.tsx | 23 ++++++ .../onboarding/portal_onboarding_flow.tsx | 91 +++++++--------------- .../onboarding/unlock_wallet_onboarding_step.tsx | 16 ++++ .../onboarding/wrap_eth_onboarding_step.tsx | 73 +++++++++++++++++ 6 files changed, 177 insertions(+), 62 deletions(-) create mode 100644 packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/intro_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx create mode 100644 packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx (limited to 'packages/website/ts/components/onboarding') diff --git a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx new file mode 100644 index 000000000..31ce99d31 --- /dev/null +++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface AddEthOnboardingStepProps {} + +export const AddEthOnboardingStep: React.StatelessComponent = () => ( +
+ Before you begin you will need to send some ETH to your metamask wallet. + + + + + Click on the metamask extension in your + browser and click either BUY or DEPOSIT. + +
+); diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx new file mode 100644 index 000000000..a54496186 --- /dev/null +++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx @@ -0,0 +1,18 @@ +import { colors } from '@0xproject/react-shared'; +import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface InstallWalletOnboardingStepProps {} + +export const InstallWalletOnboardingStep: React.StatelessComponent = () => ( +
+ + + + + Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps. + +
+); diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx new file mode 100644 index 000000000..548839218 --- /dev/null +++ b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface IntroOnboardingStepProps {} + +export const IntroOnboardingStep: React.StatelessComponent = () => ( +
+ + In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps. + + +
+ + Wrap ETH +
+
+ + Unlock tokens +
+ +
+); diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 11f1becfe..11ad88a1f 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,13 +1,14 @@ -import { colors } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; import { BigNumber } from '@0xproject/utils'; -import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet'; import { Blockchain } from 'ts/blockchain'; +import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboarding_step'; +import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; +import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; -import { Container } from 'ts/components/ui/container'; -import { Text } from 'ts/components/ui/text'; +import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step'; +import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { utils } from 'ts/utils/utils'; @@ -52,20 +53,7 @@ export class PortalOnboardingFlow extends React.Component - - - - - Before you begin, you need to connect to a wallet. This will be used across all 0x relayers - and dApps. - - - ), + content: , placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -73,14 +61,7 @@ export class PortalOnboardingFlow extends React.Component - - - - Unlock your metamask extension to begin. - - ), + content: , placement: 'right', shouldHideBackButton: true, shouldHideNextButton: true, @@ -88,24 +69,7 @@ export class PortalOnboardingFlow extends React.Component - - In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two - simple steps. - - -
- - Wrap ETH -
-
- - Unlock tokens -
- - - ), + content: , placement: 'right', shouldHideBackButton: true, continueButtonDisplay: 'enabled', @@ -113,27 +77,22 @@ export class PortalOnboardingFlow extends React.Component - Before you begin you will need to send some ETH to your metamask wallet. - - - - - Click on the metamask - extension in your browser and click either BUY or DEPOSIT. - - - ), + content: , placement: 'right', continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled', }, { target: '.weth-row', title: 'Step 1/2', - content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)', + content: ( + + ), placement: 'right', - continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled', + continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, }, { target: '.weth-row', @@ -165,13 +124,21 @@ export class PortalOnboardingFlow extends React.Component new BigNumber(0); } - private _userHasVisibleWeth(): boolean { + private _getWethBalance(): BigNumber { const ethToken = utils.getEthToken(this.props.tokenByAddress); if (!ethToken) { - return false; + return new BigNumber(0); } - const wethTokenState = this.props.trackedTokenStateByAddress[ethToken.address]; - return wethTokenState.balance > new BigNumber(0); + const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address]; + return ethTokenState.balance; + } + private _getFormattedWethBalance(): string { + const ethToken = utils.getEthToken(this.props.tokenByAddress); + const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address]; + return utils.getFormattedAmountFromToken(ethToken, ethTokenState); + } + private _userHasVisibleWeth(): boolean { + return this._getWethBalance() > new BigNumber(0); } private _userHasAllowancesForWethAndZrx(): boolean { const ethToken = utils.getEthToken(this.props.tokenByAddress); diff --git a/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx new file mode 100644 index 000000000..6e6a74a06 --- /dev/null +++ b/packages/website/ts/components/onboarding/unlock_wallet_onboarding_step.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { Text } from 'ts/components/ui/text'; + +export interface UnlockWalletOnboardingStepProps {} + +export const UnlockWalletOnboardingStep: React.StatelessComponent = () => ( +
+
+ + + + Unlock your metamask extension to begin. +
+
+); diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx new file mode 100644 index 000000000..b21b39341 --- /dev/null +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -0,0 +1,73 @@ +import { colors } from '@0xproject/react-shared'; +import * as React from 'react'; +import { Container } from 'ts/components/ui/container'; +import { IconButton } from 'ts/components/ui/icon_button'; +import { Text } from 'ts/components/ui/text'; + +export interface WrapEthOnboardingStepProps { + formattedEthBalanceIfExists?: string; +} + +export const WrapEthOnboardingStep: React.StatelessComponent = ({ + formattedEthBalanceIfExists, +}) => { + if (formattedEthBalanceIfExists) { + return ( +
+ Congrats you now have {formattedEthBalanceIfExists} in your wallet. + +
+ 1 ETH + +
+ + + + + +
+ 1 WETH + +
+ +
+ ); + } else { + return ( +
+ + You need to convert some of your ETH into tradeable Wrapped ETH (WETH). + + +
+ 1 ETH + +
+ + = + +
+ 1 WETH + +
+ + + Think of it like the coin version of a paper note. It has the same value, but some machines only + take coins. + + + Click + + + + to wrap your ETH. + +
+ ); + } +}; -- cgit From 433f830cf33f6383e83cca5e08b1f58bc18a0828 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 18:15:03 -0700 Subject: Finish set allowance step --- .../onboarding/portal_onboarding_flow.tsx | 10 ++++---- .../onboarding/set_allowances_onboarding_step.tsx | 27 ++++++++++++++++++++++ 2 files changed, 32 insertions(+), 5 deletions(-) create mode 100644 packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx (limited to 'packages/website/ts/components/onboarding') diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 11ad88a1f..ad2ada93b 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -7,6 +7,7 @@ import { AddEthOnboardingStep } from 'ts/components/onboarding/add_eth_onboardin import { InstallWalletOnboardingStep } from 'ts/components/onboarding/install_wallet_onboarding_step'; import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_step'; import { OnboardingFlow, Step } 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 { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; @@ -98,11 +99,10 @@ export class PortalOnboardingFlow extends React.Component - Unlock your tokens for trading. You only need to do this once for each token. -
ETH: {this._renderEthAllowanceToggle()}
-
ZRX: {this._renderZrxAllowanceToggle()}
- + ), placement: 'right', continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled', diff --git a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx new file mode 100644 index 000000000..1ff248c40 --- /dev/null +++ b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx @@ -0,0 +1,27 @@ +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; +} + +export const SetAllowancesOnboardingStep: React.StatelessComponent = ({ + ethAllowanceToggle, + zrxAllowanceToggle, +}) => ( +
+ Unlock your tokens for trading. You only need to do this once for each token. + +
+ Enable WETH + {ethAllowanceToggle} +
+
+ Enable ZRX + {zrxAllowanceToggle} +
+ +
+); -- cgit From 8a76fdc126c4e8d8b388d9e50bbc7fb8c7862186 Mon Sep 17 00:00:00 2001 From: fragosti Date: Fri, 15 Jun 2018 18:27:23 -0700 Subject: Finish last onboarding step --- .../ts/components/onboarding/congrats_onboarding_step.tsx | 15 +++++++++++++++ .../website/ts/components/onboarding/onboarding_flow.tsx | 2 ++ .../ts/components/onboarding/onboarding_tooltip.tsx | 5 ++++- .../ts/components/onboarding/portal_onboarding_flow.tsx | 4 +++- 4 files changed, 24 insertions(+), 2 deletions(-) create mode 100644 packages/website/ts/components/onboarding/congrats_onboarding_step.tsx (limited to 'packages/website/ts/components/onboarding') diff --git a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx new file mode 100644 index 000000000..3a8db8c36 --- /dev/null +++ b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx @@ -0,0 +1,15 @@ +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 = () => ( +
+ Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem. + + + + No need to log in. Each relayer automatically detects and connects to your metamask wallet. +
+); diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index 7a5a6e40f..34aeace82 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -13,6 +13,7 @@ export interface Step { shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; continueButtonDisplay?: ContinueButtonDisplay; + continueButtonText?: string; } export interface OnboardingFlowProps { @@ -65,6 +66,7 @@ export class OnboardingFlow extends React.Component { onClickNext={this._goToNextStep.bind(this)} onClickBack={this._goToPrevStep.bind(this)} continueButtonDisplay={step.continueButtonDisplay} + continueButtonText={step.continueButtonText} /> ); diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 0858ad326..45851b4de 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -21,6 +21,7 @@ export interface OnboardingTooltipProps { shouldHideBackButton?: boolean; shouldHideNextButton?: boolean; pointerDirection?: PointerDirection; + continueButtonText?: string; className?: string; } @@ -28,6 +29,7 @@ export const OnboardingTooltip: React.StatelessComponent title, content, continueButtonDisplay, + continueButtonText, onClickNext, onClickBack, onClose, @@ -59,7 +61,7 @@ export const OnboardingTooltip: React.StatelessComponent fontSize="15px" backgroundColor={colors.mediumBlue} > - Continue + {continueButtonText} )} @@ -82,6 +84,7 @@ export const OnboardingTooltip: React.StatelessComponent OnboardingTooltip.defaultProps = { pointerDirection: 'left', + continueButtonText: 'Continue', }; 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 ad2ada93b..4283022e2 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -4,6 +4,7 @@ import * as React from 'react'; import { BigNumber } from '@0xproject/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 { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; @@ -110,10 +111,11 @@ export class PortalOnboardingFlow extends React.Component, placement: 'right', continueButtonDisplay: 'enabled', shouldHideNextButton: true, + continueButtonText: 'Enter the 0x Ecosystem', }, ]; return steps; -- cgit