aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx17
-rw-r--r--packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx12
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">