diff options
| -rw-r--r-- | packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 17 | ||||
| -rw-r--r-- | packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx | 12 |
2 files changed, 24 insertions, 5 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 7cec965b0..4dfc948a5 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -12,7 +12,11 @@ import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_s 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 { WrapEthOnboardingStep1, WrapEthOnboardingStep2 } from 'ts/components/onboarding/wrap_eth_onboarding_step'; +import { + WrapEthOnboardingStep1, + WrapEthOnboardingStep2, + WrapEthOnboardingStep3, +} from 'ts/components/onboarding/wrap_eth_onboarding_step'; import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle'; import { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types'; import { analytics } from 'ts/utils/analytics'; @@ -101,18 +105,25 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp title: 'Step 1: Wrap ETH', content: <WrapEthOnboardingStep1 />, placement: 'right', + continueButtonDisplay: 'enabled', + }, + { + target: '.wallet', + title: 'Step 1: Wrap ETH', + content: <WrapEthOnboardingStep2 />, + placement: 'right', continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, }, { target: '.wallet', title: 'Step 1: Wrap ETH', content: ( - <WrapEthOnboardingStep2 + <WrapEthOnboardingStep3 formattedEthBalance={this._userHasVisibleWeth() ? this._getFormattedWethBalance() : '0 WETH'} /> ), placement: 'right', - continueButtonDisplay: 'enabled', + continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined, }, { target: '.wallet', diff --git a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx index 700330db2..8af5d8f07 100644 --- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx @@ -27,6 +27,14 @@ export const WrapEthOnboardingStep1: React.StatelessComponent<WrapEthOnboardingS <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"> @@ -42,11 +50,11 @@ export const WrapEthOnboardingStep1: React.StatelessComponent<WrapEthOnboardingS </div> ); -export interface WrapEthOnboardingStep2Props { +export interface WrapEthOnboardingStep3Props { formattedEthBalance: string; } -export const WrapEthOnboardingStep2: React.StatelessComponent<WrapEthOnboardingStep2Props> = ({ +export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({ formattedEthBalance, }) => ( <div className="flex items-center flex-column"> |