crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Customize flow depending on what steps you've completed

Browse Source
This commit is contained in:
fragosti
2018-06-27 18:21:51 -07:00
parent 382839464f
commit 4454cfa65d
4 changed files with 43 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
View File

@@ -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>
);

2
packages/website/ts/components/onboarding/onboarding_flow.tsx
View File

@@ -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;

16
packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
View File

@@ -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()}

9
packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
View File

@@ -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>