aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
authorFrancesco Agosti <francesco.agosti93@gmail.com>2018-06-30 08:40:43 +0800
committerGitHub <noreply@github.com>2018-06-30 08:40:43 +0800
commit42b7b0dab907f1ce2caf6a2ea415a247ba31245f (patch)
treef59b3d961a338442816e25e24c0c49ead6eab45a /packages/website/ts
parent78b513c52addc16062419236c24f01bcfe191f3f (diff)
parent8ffce78827bc64f222128dfdd0dc4a45db402f3a (diff)
downloaddexon-sol-tools-42b7b0dab907f1ce2caf6a2ea415a247ba31245f.tar
dexon-sol-tools-42b7b0dab907f1ce2caf6a2ea415a247ba31245f.tar.gz
dexon-sol-tools-42b7b0dab907f1ce2caf6a2ea415a247ba31245f.tar.bz2
dexon-sol-tools-42b7b0dab907f1ce2caf6a2ea415a247ba31245f.tar.lz
dexon-sol-tools-42b7b0dab907f1ce2caf6a2ea415a247ba31245f.tar.xz
dexon-sol-tools-42b7b0dab907f1ce2caf6a2ea415a247ba31245f.tar.zst
dexon-sol-tools-42b7b0dab907f1ce2caf6a2ea415a247ba31245f.zip
Merge pull request #787 from 0xProject/feature/website/portal-onboarding-polish
Portal v2 onboarding polish
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx50
-rw-r--r--packages/website/ts/components/onboarding/congrats_onboarding_step.tsx2
-rw-r--r--packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx7
-rw-r--r--packages/website/ts/components/onboarding/intro_onboarding_step.tsx11
-rw-r--r--packages/website/ts/components/onboarding/onboarding_card.tsx31
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx20
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx75
-rw-r--r--packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx3
-rw-r--r--packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx132
-rw-r--r--packages/website/ts/components/portal/portal.tsx5
-rw-r--r--packages/website/ts/components/ui/animation.tsx8
-rw-r--r--packages/website/ts/components/ui/button.tsx2
-rw-r--r--packages/website/ts/components/ui/overlay.tsx3
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx11
-rw-r--r--packages/website/ts/components/wallet/wrap_ether_item.tsx1
-rw-r--r--packages/website/ts/containers/portal_onboarding_flow.ts4
-rw-r--r--packages/website/ts/redux/reducer.ts8
-rw-r--r--packages/website/ts/redux/store.ts2
18 files changed, 232 insertions, 143 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 31ce99d31..bccdc0c18 100644
--- a/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/add_eth_onboarding_step.tsx
@@ -1,18 +1,42 @@
+import { BigNumber } from '@0xproject/utils';
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
+import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
-export interface AddEthOnboardingStepProps {}
+export interface AddEthOnboardingStepProps {
+ userEthBalanceInWei: BigNumber;
+}
-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 metamask wallet.</Text>
- <Container marginTop="15px" marginBottom="15px">
- <img src="/images/ether_alt.svg" height="50px" width="50px" />
- </Container>
- <Text>
- 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.userEthBalanceInWei.gt(0) ? (
+ <div className="flex items-center flex-column">
+ <Text>
+ Great! Looks like you already have{' '}
+ <b>
+ {utils.getFormattedAmount(
+ props.userEthBalanceInWei,
+ constants.DECIMAL_PLACES_ETH,
+ constants.ETHER_SYMBOL,
+ )}{' '}
+ </b>
+ in your wallet.
+ </Text>
+ <Container marginTop="15px" marginBottom="15px">
+ <Image 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">
+ <Image src="/images/ether_alt.svg" height="50px" width="50px" />
+ </Container>
+ <Text className="xs-hide">
+ Click on the <Image 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/congrats_onboarding_step.tsx b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx
index 3a8db8c36..8100fd2c0 100644
--- a/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/congrats_onboarding_step.tsx
@@ -10,6 +10,6 @@ export const CongratsOnboardingStep: React.StatelessComponent<CongratsOnboarding
<Container marginTop="25px" marginBottom="15px" className="flex justify-center">
<img src="/images/zrx_ecosystem.svg" height="150px" />
</Container>
- <Text>No need to log in. Each relayer automatically detects and connects to your metamask wallet.</Text>
+ <Text>No need to log in. Each relayer automatically detects and connects to your wallet.</Text>
</div>
);
diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
index a54496186..a95c464af 100644
--- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx
@@ -8,11 +8,12 @@ export interface InstallWalletOnboardingStepProps {}
export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWalletOnboardingStepProps> = () => (
<div className="flex items-center flex-column">
- <Container marginTop="15px" marginBottom="15px">
- <ActionAccountBalanceWallet style={{ width: '30px', height: '30px' }} color={colors.orange} />
- </Container>
<Text>
Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps.
</Text>
+ <Container marginTop="15px" marginBottom="15px">
+ <ActionAccountBalanceWallet style={{ width: '50px', height: '50px' }} color={colors.orange} />
+ </Container>
+ <Text>Please refresh the page once you've done this to continue!</Text>
</div>
);
diff --git a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
index 548839218..3a27b6854 100644
--- a/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/intro_onboarding_step.tsx
@@ -1,5 +1,6 @@
import * as React from 'react';
import { Container } from 'ts/components/ui/container';
+import { Image } from 'ts/components/ui/image';
import { Text } from 'ts/components/ui/text';
export interface IntroOnboardingStepProps {}
@@ -7,15 +8,19 @@ export interface IntroOnboardingStepProps {}
export const IntroOnboardingStep: React.StatelessComponent<IntroOnboardingStepProps> = () => (
<div className="flex items-center flex-column">
<Text>
- In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps.
+ In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete three simple steps.
</Text>
<Container width="100%" marginTop="25px" marginBottom="15px" className="flex justify-around">
<div className="flex flex-column items-center">
- <img src="/images/eth_token.svg" height="50px" width="50x" />
+ <Image src="/images/ether.png" height="50px" width="50px" />
+ <Text> Add ETH </Text>
+ </div>
+ <div className="flex flex-column items-center">
+ <Image src="/images/eth_token.svg" height="50px" width="50x" />
<Text> Wrap ETH </Text>
</div>
<div className="flex flex-column items-center">
- <img src="/images/fake_toggle.svg" height="50px" width="50px" />
+ <Image src="/images/fake_toggle.svg" height="50px" width="50px" />
<Text> Unlock tokens </Text>
</div>
</Container>
diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
index bc83b8034..48e8ab022 100644
--- a/packages/website/ts/components/onboarding/onboarding_card.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -1,6 +1,7 @@
import { colors } from '@0xproject/react-shared';
import * as React from 'react';
+import * as _ from 'lodash';
import { Button } from 'ts/components/ui/button';
import { Container } from 'ts/components/ui/container';
import { IconButton } from 'ts/components/ui/icon_button';
@@ -16,6 +17,7 @@ export interface OnboardingCardProps {
onClose: () => void;
onClickNext: () => void;
onClickBack: () => void;
+ onContinueButtonClick?: () => void;
continueButtonDisplay?: ContinueButtonDisplay;
shouldHideBackButton?: boolean;
shouldHideNextButton?: boolean;
@@ -28,6 +30,7 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
content,
continueButtonDisplay,
continueButtonText,
+ onContinueButtonClick,
onClickNext,
onClickBack,
onClose,
@@ -52,7 +55,7 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
{continueButtonDisplay && (
<Button
isDisabled={continueButtonDisplay === 'disabled'}
- onClick={onClickNext}
+ onClick={!_.isUndefined(onContinueButtonClick) ? onContinueButtonClick : onClickNext}
fontColor={colors.white}
fontSize="15px"
backgroundColor={colors.mediumBlue}
@@ -60,17 +63,21 @@ export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
{continueButtonText}
</Button>
)}
- <Container className="flex justify-between" marginTop="15px">
- {!shouldHideBackButton && (
- <Text fontColor={colors.grey} onClick={onClickBack}>
- Back
- </Text>
- )}
- {!shouldHideNextButton && (
- <Text fontColor={colors.grey} onClick={onClickNext}>
- Skip
- </Text>
- )}
+ <Container className="clearfix" marginTop="15px">
+ <div className="left">
+ {!shouldHideBackButton && (
+ <Text fontColor={colors.grey} onClick={onClickBack}>
+ Back
+ </Text>
+ )}
+ </div>
+ <div className="right">
+ {!shouldHideNextButton && (
+ <Text fontColor={colors.grey} onClick={onClickNext}>
+ Skip
+ </Text>
+ )}
+ </div>
</Container>
</div>
</Container>
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index ec8d96191..1f4c6df82 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -6,6 +6,7 @@ import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboardi
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,6 +17,7 @@ export interface Step {
shouldHideNextButton?: boolean;
continueButtonDisplay?: ContinueButtonDisplay;
continueButtonText?: string;
+ onContinueButtonClick?: () => void;
}
export interface OnboardingFlowProps {
@@ -54,14 +56,22 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
if (this.props.disableOverlay) {
return onboardingElement;
}
- return <Overlay>{onboardingElement}</Overlay>;
+ return (
+ <div>
+ <Overlay onClick={this.props.onClose} />
+ {onboardingElement}
+ </div>
+ );
}
private _getElementForStep(): Element {
return document.querySelector(this._getCurrentStep().target);
}
private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
+ const customStyles = { zIndex: zIndex.aboveOverlay };
+ // On re-render, we want to re-center the popper.
+ props.scheduleUpdate();
return (
- <div ref={props.ref} style={props.style} data-placement={props.placement}>
+ <div ref={props.ref} style={{ ...props.style, ...customStyles }} data-placement={props.placement}>
{this._renderToolTip()}
</div>
);
@@ -71,7 +81,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
const step = steps[stepIndex];
const isLastStep = steps.length - 1 === stepIndex;
return (
- <Container marginLeft="30px" maxWidth={350}>
+ <Container marginLeft="30px" width="400px">
<OnboardingTooltip
title={step.title}
content={step.content}
@@ -83,6 +93,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
onClickBack={this._goToPrevStep.bind(this)}
continueButtonDisplay={step.continueButtonDisplay}
continueButtonText={step.continueButtonText}
+ onContinueButtonClick={step.onContinueButtonClick}
/>
</Container>
);
@@ -93,7 +104,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
const step = steps[stepIndex];
const isLastStep = steps.length - 1 === stepIndex;
return (
- <Container position="relative" zIndex={1} maxWidth="100vw">
+ <Container position="relative" zIndex={1}>
<OnboardingCard
title={step.title}
content={step.content}
@@ -105,6 +116,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
onClickBack={this._goToPrevStep.bind(this)}
continueButtonDisplay={step.continueButtonDisplay}
continueButtonText={step.continueButtonText}
+ onContinueButtonClick={step.onContinueButtonClick}
borderRadius="10px 10px 0px 0px"
/>
</Container>
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index ccc8d9e86..6bfa5c75f 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 { WrapEthOnboardingStep } 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';
@@ -24,7 +28,7 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
stepIndex: number;
isRunning: boolean;
userAddress: string;
- hasBeenSeen: boolean;
+ hasBeenClosed: boolean;
providerType: ProviderType;
injectedProviderName: string;
blockchainIsLoaded: boolean;
@@ -40,7 +44,9 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
private _unlisten: () => void;
public componentDidMount(): void {
- this._overrideOnboardingStateIfShould();
+ this._adjustStepIfShould();
+ // Wait until the step is adjusted to decide whether we should show onboarding.
+ setTimeout(this._autoStartOnboardingIfShould.bind(this), 1000);
// If there is a route change, just close onboarding.
this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false));
}
@@ -48,7 +54,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
this._unlisten();
}
public componentDidUpdate(prevProps: PortalOnboardingFlowProps): void {
- this._overrideOnboardingStateIfShould();
+ this._adjustStepIfShould();
if (!prevProps.isRunning && this.props.isRunning) {
// On mobile, make sure the wallet is completely visible.
if (this.props.screenWidth === ScreenWidths.Sm) {
@@ -96,45 +102,63 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
continueButtonDisplay: 'enabled',
},
{
- target: '.eth-row',
- title: 'Add ETH',
- content: <AddEthOnboardingStep />,
+ target: '.wallet',
+ title: 'Step 1: Add ETH',
+ content: (
+ <AddEthOnboardingStep userEthBalanceInWei={this.props.userEtherBalanceInWei || new BigNumber(0)} />
+ ),
placement: 'right',
continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
},
{
- target: '.weth-row',
- title: 'Step 1/2',
+ target: '.wallet',
+ title: 'Step 2: Wrap ETH',
+ content: <WrapEthOnboardingStep1 />,
+ placement: 'right',
+ continueButtonDisplay: 'enabled',
+ },
+ {
+ target: '.wallet',
+ title: 'Step 2: Wrap ETH',
+ content: <WrapEthOnboardingStep2 />,
+ placement: 'right',
+ continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
+ },
+ {
+ target: '.wallet',
+ title: 'Step 2: Wrap ETH',
content: (
- <WrapEthOnboardingStep
- formattedEthBalanceIfExists={
+ <WrapEthOnboardingStep3
+ formattedWethBalanceIfExists={
this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
}
/>
),
placement: 'right',
- continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
+ continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
},
{
- target: '.weth-row',
- title: 'Step 2/2',
+ target: '.wallet',
+ title: 'Step 3: Unlock Tokens',
content: (
<SetAllowancesOnboardingStep
zrxAllowanceToggle={this._renderZrxAllowanceToggle()}
ethAllowanceToggle={this._renderEthAllowanceToggle()}
+ doesUserHaveAllowancesForWethAndZrx={this._doesUserHaveAllowancesForWethAndZrx()}
/>
),
placement: 'right',
- continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
+ continueButtonDisplay: this._doesUserHaveAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
},
{
target: '.wallet',
- title: '🎉 Congrats! The ecosystem awaits.',
+ title: '🎉 The Ecosystem Awaits',
content: <CongratsOnboardingStep />,
placement: 'right',
continueButtonDisplay: 'enabled',
shouldHideNextButton: true,
continueButtonText: 'Enter the 0x Ecosystem',
+ onContinueButtonClick: this._handleFinalStepContinueClick.bind(this),
},
];
return steps;
@@ -161,7 +185,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
private _userHasVisibleWeth(): boolean {
return this._getWethBalance() > new BigNumber(0);
}
- private _userHasAllowancesForWethAndZrx(): boolean {
+ private _doesUserHaveAllowancesForWethAndZrx(): boolean {
const ethToken = utils.getEthToken(this.props.tokenByAddress);
const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
if (ethToken && zrxToken) {
@@ -173,11 +197,6 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
}
return false;
}
- private _overrideOnboardingStateIfShould(): void {
- this._autoStartOnboardingIfShould();
- this._adjustStepIfShould();
- }
-
private _adjustStepIfShould(): void {
const stepIndex = this.props.stepIndex;
if (this._isAddressAvailable()) {
@@ -201,7 +220,10 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
}
}
private _autoStartOnboardingIfShould(): void {
- if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
+ if (
+ (this.props.stepIndex === 0 && !this.props.isRunning) ||
+ (!this.props.isRunning && !this.props.hasBeenClosed && this.props.blockchainIsLoaded)
+ ) {
const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
analytics.logEvent('Portal', 'Onboarding Started - Automatic', networkName, this.props.stepIndex);
this.props.updateIsRunning(true);
@@ -244,6 +266,13 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
/>
);
}
+ private _handleFinalStepContinueClick(): void {
+ if (utils.isMobile(this.props.screenWidth)) {
+ window.scrollTo(0, 0);
+ this.props.history.push('/portal');
+ }
+ this._closeOnboarding();
+ }
}
export const PortalOnboardingFlow = withRouter(PlainPortalOnboardingFlow);
diff --git a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx
index 1ff248c40..5ddfe38d7 100644
--- a/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/set_allowances_onboarding_step.tsx
@@ -5,11 +5,13 @@ import { Text } from 'ts/components/ui/text';
export interface SetAllowancesOnboardingStepProps {
zrxAllowanceToggle: React.ReactNode;
ethAllowanceToggle: React.ReactNode;
+ doesUserHaveAllowancesForWethAndZrx: boolean;
}
export const SetAllowancesOnboardingStep: React.StatelessComponent<SetAllowancesOnboardingStepProps> = ({
ethAllowanceToggle,
zrxAllowanceToggle,
+ doesUserHaveAllowancesForWethAndZrx,
}) => (
<div className="flex items-center flex-column">
<Text>Unlock your tokens for trading. You only need to do this once for each token.</Text>
@@ -23,5 +25,6 @@ export const SetAllowancesOnboardingStep: React.StatelessComponent<SetAllowances
<Container marginTop="10px">{zrxAllowanceToggle}</Container>
</div>
</Container>
+ {doesUserHaveAllowancesForWethAndZrx && <Text>Perfect! Both your ZRX and WETH tokens are unlocked.</Text>}
</div>
);
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 b21b39341..4d336c80f 100644
--- a/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
+++ b/packages/website/ts/components/onboarding/wrap_eth_onboarding_step.tsx
@@ -4,70 +4,78 @@ 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 interface WrapEthOnboardingStep1Props {}
+
+export const WrapEthOnboardingStep1: React.StatelessComponent<WrapEthOnboardingStep1Props> = () => (
+ <div className="flex items-center flex-column">
+ <Text>
+ You need to convert some of your ETH into tradeable <b>Wrapped ETH (WETH)</b>.
+ </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>
+ <img src="/images/eth_dollar.svg" height="75px" width="75x" />
+ </div>
+ <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
+ <Text fontSize="36px">=</Text>
+ </Container>
+ <div className="flex flex-column items-center">
+ <Text fontWeight={700}> 1 WETH </Text>
+ <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
+ </div>
+ </Container>
+ <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">
+ <IconButton
+ iconName="zmdi-long-arrow-down"
+ color={colors.mediumBlue}
+ labelText="wrap"
+ display="inline-flex"
+ />
+ </Container>
+ to wrap your ETH.
+ </Text>
+ </div>
+);
+
+export interface WrapEthOnboardingStep3Props {
+ formattedWethBalanceIfExists?: string;
}
-export const WrapEthOnboardingStep: React.StatelessComponent<WrapEthOnboardingStepProps> = ({
- formattedEthBalanceIfExists,
-}) => {
- if (formattedEthBalanceIfExists) {
- return (
- <div className="flex items-center flex-column">
- <Text>Congrats you now have {formattedEthBalanceIfExists} in your wallet.</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>
- <img src="/images/eth_dollar.svg" height="75px" width="75x" />
- </div>
- <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
- <Text fontSize="25px">
- <i className="zmdi zmdi-long-arrow-right" />
- </Text>
- </Container>
- <div className="flex flex-column items-center">
- <Text fontWeight={700}> 1 WETH </Text>
- <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
- </div>
- </Container>
+export const WrapEthOnboardingStep3: React.StatelessComponent<WrapEthOnboardingStep3Props> = ({
+ formattedWethBalanceIfExists,
+}) => (
+ <div className="flex items-center flex-column">
+ <Text>
+ You have <b>{formattedWethBalanceIfExists || '0 WETH'}</b> 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>
+ <img src="/images/eth_dollar.svg" height="75px" width="75x" />
</div>
- );
- } else {
- return (
- <div className="flex items-center flex-column">
- <Text>
- You need to convert some of your ETH into tradeable <b>Wrapped ETH (WETH)</b>.
- </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>
- <img src="/images/eth_dollar.svg" height="75px" width="75x" />
- </div>
- <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
- <Text fontSize="36px">=</Text>
- </Container>
- <div className="flex flex-column items-center">
- <Text fontWeight={700}> 1 WETH </Text>
- <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
- </div>
- </Container>
- <Text>
- Think of it like the coin version of a paper note. It has the same value, but some machines only
- take coins.
- </Text>
- <Text>
- Click
- <Container display="inline-block" marginLeft="10px" marginRight="10px">
- <IconButton
- iconName="zmdi-long-arrow-down"
- color={colors.mediumBlue}
- labelText="wrap"
- display="inline-flex"
- />
- </Container>
- to wrap your ETH.
+ <Container marginRight="25px" marginLeft="25px" position="relative" top="20px">
+ <Text fontSize="25px">
+ <i className="zmdi zmdi-long-arrow-right" />
</Text>
+ </Container>
+ <div className="flex flex-column items-center">
+ <Text fontWeight={700}> 1 WETH </Text>
+ <img src="/images/eth_token_erc20.svg" height="75px" width="75px" />
</div>
- );
- }
-};
+ </Container>
+ </div>
+);
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 8a86a7c8d..9c0cb866d 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -377,10 +377,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
</Container>
);
return !shouldStartOnboarding ? (
- <Link
- to={{ pathname: `${WebsitePaths.Portal}/account`, state: { startOnboarding: true } }}
- style={{ textDecoration: 'none' }}
- >
+ <Link to={{ pathname: `${WebsitePaths.Portal}/account` }} style={{ textDecoration: 'none' }}>
{startOnboarding}
</Link>
) : (
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index 136f3d005..943e3bf28 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -14,21 +14,29 @@ const appearFromBottomFrames = keyframes`
position: fixed;
bottom: -500px;
left: 0px;
+ right: 0px;
}
to {
position: fixed;
bottom: 0px;
left: 0px;
+ right: 0px;
}
`;
+const stylesForAnimation: { [K in AnimationType]: string } = {
+ // Needed for safari
+ easeUpFromBottom: `position: fixed`,
+};
+
const animations: { [K in AnimationType]: string } = {
easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`,
};
export const Animation = styled(PlainAnimation)`
animation: ${props => animations[props.type]};
+ ${props => stylesForAnimation[props.type]};
`;
Animation.displayName = 'Animation';
diff --git a/packages/website/ts/components/ui/button.tsx b/packages/website/ts/components/ui/button.tsx
index 02fa47480..1489a74a6 100644
--- a/packages/website/ts/components/ui/button.tsx
+++ b/packages/website/ts/components/ui/button.tsx
@@ -37,7 +37,7 @@ export const Button = styled(PlainButton)`
background-color: ${props => props.backgroundColor};
border: ${props => (props.borderColor ? `1px solid ${props.borderColor}` : 'none')};
&:hover {
- background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')};
+ background-color: ${props => (!props.isDisabled ? darken(0.1, props.backgroundColor) : '')} !important;
}
&:active {
background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
index 8b126a6d5..da26317de 100644
--- a/packages/website/ts/components/ui/overlay.tsx
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
import { zIndex } from 'ts/style/z_index';
export interface OverlayProps {
- children?: React.ReactNode;
style?: React.CSSProperties;
onClick?: () => void;
}
@@ -19,7 +18,7 @@ const style: React.CSSProperties = {
backgroundColor: 'rgba(0, 0, 0, 0.6)',
};
-export const Overlay: React.StatelessComponent = (props: OverlayProps) => (
+export const Overlay: React.StatelessComponent<OverlayProps> = props => (
<div style={{ ...style, ...props.style }} onClick={props.onClick}>
{props.children}
</div>
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index ad6faff8d..1f1e3598a 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -266,7 +266,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
wrappedEtherDirection: Side.Deposit,
};
const key = ETHER_ITEM_KEY;
- return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row');
+ return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig);
}
private _renderTokenRows(): React.ReactNode {
const trackedTokens = this.props.trackedTokens;
@@ -305,14 +305,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
},
};
const key = token.address;
- return this._renderBalanceRow(
- key,
- icon,
- primaryText,
- secondaryText,
- accessoryItemConfig,
- isWeth ? 'weth-row' : undefined,
- );
+ return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig);
}
private _renderBalanceRow(
key: string,
diff --git a/packages/website/ts/components/wallet/wrap_ether_item.tsx b/packages/website/ts/components/wallet/wrap_ether_item.tsx
index f6d1a9a35..851b35f90 100644
--- a/packages/website/ts/components/wallet/wrap_ether_item.tsx
+++ b/packages/website/ts/components/wallet/wrap_ether_item.tsx
@@ -172,6 +172,7 @@ export class WrapEtherItem extends React.Component<WrapEtherItemProps, WrapEther
<FlatButton
backgroundColor={colors.wrapEtherConfirmationButton}
label={labelText}
+ style={{ zIndex: 0 }}
labelStyle={styles.wrapEtherConfirmationButtonLabel}
onClick={this._wrapEtherConfirmationActionAsync.bind(this)}
disabled={this.state.isEthConversionHappening}
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index 12daad021..a813205b1 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -19,7 +19,7 @@ interface ConnectedState {
stepIndex: number;
isRunning: boolean;
userAddress: string;
- hasBeenSeen: boolean;
+ hasBeenClosed: boolean;
providerType: ProviderType;
injectedProviderName: string;
blockchainIsLoaded: boolean;
@@ -43,7 +43,7 @@ const mapStateToProps = (state: State, _ownProps: PortalOnboardingFlowProps): Co
blockchainIsLoaded: state.blockchainIsLoaded,
userEtherBalanceInWei: state.userEtherBalanceInWei,
tokenByAddress: state.tokenByAddress,
- hasBeenSeen: state.hasPortalOnboardingBeenSeen,
+ hasBeenClosed: state.hasPortalOnboardingBeenClosed,
screenWidth: state.screenWidth,
});
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index ed6a4868e..caddabcf0 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -42,7 +42,7 @@ export interface State {
userEtherBalanceInWei?: BigNumber;
portalOnboardingStep: number;
isPortalOnboardingShowing: boolean;
- hasPortalOnboardingBeenSeen: boolean;
+ hasPortalOnboardingBeenClosed: boolean;
// Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
userSuppliedOrderCache: Order;
@@ -85,7 +85,7 @@ export const INITIAL_STATE: State = {
userSuppliedOrderCache: undefined,
portalOnboardingStep: 0,
isPortalOnboardingShowing: false,
- hasPortalOnboardingBeenSeen: false,
+ hasPortalOnboardingBeenClosed: false,
// Docs
docsVersion: DEFAULT_DOCS_VERSION,
availableDocVersions: [DEFAULT_DOCS_VERSION],
@@ -311,7 +311,9 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
return {
...state,
isPortalOnboardingShowing,
- hasPortalOnboardingBeenSeen: true,
+ hasPortalOnboardingBeenClosed: !isPortalOnboardingShowing ? true : state.hasPortalOnboardingBeenClosed,
+ // always start onboarding from the beginning
+ portalOnboardingStep: 0,
};
}
diff --git a/packages/website/ts/redux/store.ts b/packages/website/ts/redux/store.ts
index 203f068a1..0d0e6cea1 100644
--- a/packages/website/ts/redux/store.ts
+++ b/packages/website/ts/redux/store.ts
@@ -15,7 +15,7 @@ store.subscribe(
_.throttle(() => {
// Persisted state
stateStorage.saveState({
- hasPortalOnboardingBeenSeen: store.getState().hasPortalOnboardingBeenSeen,
+ hasPortalOnboardingBeenClosed: store.getState().hasPortalOnboardingBeenClosed,
});
}, ONE_SECOND),
);