aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-28 09:21:51 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-28 09:21:51 +0800
commit4454cfa65dfb2f0928cddc8732a64010b0c5f0d8 (patch)
tree7bece7be80044428384dbc589d1ec8c776c0ce83
parent382839464f7d554bfc89176f669c4d72df6093f3 (diff)
downloaddexon-sol-tools-4454cfa65dfb2f0928cddc8732a64010b0c5f0d8.tar
dexon-sol-tools-4454cfa65dfb2f0928cddc8732a64010b0c5f0d8.tar.gz
dexon-sol-tools-4454cfa65dfb2f0928cddc8732a64010b0c5f0d8.tar.bz2
dexon-sol-tools-4454cfa65dfb2f0928cddc8732a64010b0c5f0d8.tar.lz
dexon-sol-tools-4454cfa65dfb2f0928cddc8732a64010b0c5f0d8.tar.xz
dexon-sol-tools-4454cfa65dfb2f0928cddc8732a64010b0c5f0d8.tar.zst
dexon-sol-tools-4454cfa65dfb2f0928cddc8732a64010b0c5f0d8.zip
Customize flow depending on what steps you've completed
-rw-r--r--packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx36
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx2
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx16
-rw-r--r--packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx9
4 files changed, 43 insertions, 20 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
index 1dd47773c..62d44885c 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -2,17 +2,27 @@ import * as React from 'react';
import { Container } from 'ts/components/ui/container';
import { Text } from 'ts/components/ui/text';
-export interface AddEthOnboardingStepProps {}
+export interface AddEthOnboardingStepProps {
+ hasEth: boolean;
+}
-export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStepProps> = () => (
- <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">
- <img src="/images/ether_alt.svg" height="50px" width="50px" />
- </Container>
- <Text className="xs-hide">
- Click on the <img 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>
-);
+export const AddEthOnboardingStep: React.StatelessComponent<AddEthOnboardingStepProps> = props =>
+ props.hasEth ? (
+ <div className="flex items-center flex-column">
+ <Text> Great! Looks like you already have ETH in your wallet.</Text>
+ <Container marginTop="15px" marginBottom="15px">
+ <img 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">
+ <img src="/images/ether_alt.svg" height="50px" width="50px" />
+ </Container>
+ <Text className="xs-hide">
+ Click on the <img 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/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index e3de7e098..e20e58eec 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -3,10 +3,10 @@ import { Placement, Popper, PopperChildrenProps } from 'react-popper';
import { OnboardingCard } from 'ts/components/onboarding/onboarding_card';
import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
-import { zIndex } from 'ts/style/z_index';
import { Animation } from 'ts/components/ui/animation';
import { Container } from 'ts/components/ui/container';
import { Overlay } from 'ts/components/ui/overlay';
+import { zIndex } from 'ts/style/z_index';
export interface Step {
target: string;
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 4dfc948a5..2102f39f9 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -96,7 +96,15 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
{
target: '.wallet',
title: 'Add ETH',
- content: <AddEthOnboardingStep />,
+ content: (
+ <AddEthOnboardingStep
+ hasEth={
+ !_.isUndefined(this.props.userEtherBalanceInWei)
+ ? this.props.userEtherBalanceInWei.gt(0)
+ : false
+ }
+ />
+ ),
placement: 'right',
continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
},
@@ -119,7 +127,9 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
title: 'Step 1: Wrap ETH',
content: (
<WrapEthOnboardingStep3
- formattedEthBalance={this._userHasVisibleWeth() ? this._getFormattedWethBalance() : '0 WETH'}
+ formattedWethBalanceIfExists={
+ this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
+ }
/>
),
placement: 'right',
@@ -127,7 +137,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
},
{
target: '.wallet',
- title: 'Step 2/2',
+ title: 'Step 2: Unlock Tokens',
content: (
<SetAllowancesOnboardingStep
zrxAllowanceToggle={this._renderZrxAllowanceToggle()}
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 8af5d8f07..68c13ad10 100644
--- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
@@ -51,14 +51,17 @@ export const WrapEthOnboardingStep2: React.StatelessComponent<WrapEthOnboardingS
);
export interface WrapEthOnboardingStep3Props {
- formattedEthBalance: string;
+ formattedWethBalanceIfExists?: string;
}
export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({
- formattedEthBalance,
+ formattedWethBalanceIfExists,
}) => (
<div className="flex items-center flex-column">
- <Text>You currently have {formattedEthBalance} in your wallet.</Text>
+ <Text>
+ You have {formattedWethBalanceIfExists || '0 WETH'} in your wallet.
+ {formattedWethBalanceIfExists && ' 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>