aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-21 06:51:17 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-21 06:51:17 +0800
commit1e51af1d4b68bad9363411167fd4eb959e7a32dd (patch)
tree51146dff346547c8348a549064cf2362bb1a80e3 /packages/website/ts/components
parent39ccb2df0b43d3915337259789c393e4603b964c (diff)
downloaddexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar
dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar.gz
dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar.bz2
dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar.lz
dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar.xz
dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.tar.zst
dexon-sol-tools-1e51af1d4b68bad9363411167fd4eb959e7a32dd.zip
Support mobile friendly onboarding flows
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_card.tsx82
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx49
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx73
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx5
-rw-r--r--packages/website/ts/components/portal/portal.tsx20
-rw-r--r--packages/website/ts/components/ui/animation.tsx32
-rw-r--r--packages/website/ts/components/ui/container.tsx1
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx1
8 files changed, 177 insertions, 86 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_card.tsx b/packages/website/ts/components/onboarding/onboarding_card.tsx
new file mode 100644
index 000000000..795a017e9
--- /dev/null
+++ b/packages/website/ts/components/onboarding/onboarding_card.tsx
@@ -0,0 +1,82 @@
+import { colors } from '@0xproject/react-shared';
+import * as React from 'react';
+
+import { Button } from 'ts/components/ui/button';
+import { Container } from 'ts/components/ui/container';
+import { IconButton } from 'ts/components/ui/icon_button';
+import { Island } from 'ts/components/ui/island';
+import { Text, Title } from 'ts/components/ui/text';
+
+export type ContinueButtonDisplay = 'enabled' | 'disabled';
+
+export interface OnboardingCardProps {
+ title?: string;
+ content: React.ReactNode;
+ isLastStep: boolean;
+ onClose: () => void;
+ onClickNext: () => void;
+ onClickBack: () => void;
+ continueButtonDisplay?: ContinueButtonDisplay;
+ shouldHideBackButton?: boolean;
+ shouldHideNextButton?: boolean;
+ continueButtonText?: string;
+}
+
+export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
+ title,
+ content,
+ continueButtonDisplay,
+ continueButtonText,
+ onClickNext,
+ onClickBack,
+ onClose,
+ shouldHideBackButton,
+ shouldHideNextButton,
+}) => (
+ <Island>
+ <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
+ <div className="flex flex-column">
+ <div className="flex justify-between">
+ <Title>{title}</Title>
+ <Container position="relative" bottom="20px" left="15px">
+ <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
+ Close
+ </IconButton>
+ </Container>
+ </div>
+ <Container marginBottom="15px">
+ <Text>{content}</Text>
+ </Container>
+ {continueButtonDisplay && (
+ <Button
+ isDisabled={continueButtonDisplay === 'disabled'}
+ onClick={onClickNext}
+ fontColor={colors.white}
+ fontSize="15px"
+ backgroundColor={colors.mediumBlue}
+ >
+ {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>
+ </div>
+ </Container>
+ </Island>
+);
+
+OnboardingCard.defaultProps = {
+ continueButtonText: 'Continue',
+};
+
+OnboardingCard.displayName = 'OnboardingCard';
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 34aeace82..7360d26ae 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,7 +1,9 @@
import * as React from 'react';
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 { Animation } from 'ts/components/ui/animation';
import { Container } from 'ts/components/ui/container';
import { Overlay } from 'ts/components/ui/overlay';
@@ -22,26 +24,37 @@ export interface OnboardingFlowProps {
isRunning: boolean;
onClose: () => void;
updateOnboardingStep: (stepIndex: number) => void;
+ disableOverlay?: boolean;
+ isMobile: boolean;
}
export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
+ public static defaultProps = {
+ disableOverlay: false,
+ isMobile: false,
+ };
public render(): React.ReactNode {
if (!this.props.isRunning) {
return null;
}
- return (
- <Overlay>
+ let onboardingEl = null;
+ if (this.props.isMobile) {
+ onboardingEl = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
+ } else {
+ onboardingEl = (
<Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
{this._renderPopperChildren.bind(this)}
</Popper>
- </Overlay>
- );
+ );
+ }
+ if (this.props.disableOverlay) {
+ return onboardingEl;
+ }
+ return <Overlay>{onboardingEl}</Overlay>;
}
-
private _getElementForStep(): Element {
return document.querySelector(this._getCurrentStep().target);
}
-
private _renderPopperChildren(props: PopperChildrenProps): React.ReactNode {
return (
<div ref={props.ref} style={props.style} data-placement={props.placement}>
@@ -49,7 +62,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
</div>
);
}
-
private _renderToolTip(): React.ReactNode {
const { steps, stepIndex } = this.props;
const step = steps[stepIndex];
@@ -72,10 +84,30 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
);
}
+ private _renderOnboardignCard(): React.ReactNode {
+ const { steps, stepIndex } = this.props;
+ const step = steps[stepIndex];
+ const isLastStep = steps.length - 1 === stepIndex;
+ return (
+ <Container position="relative" zIndex={1} maxWidth="100vw">
+ <OnboardingCard
+ title={step.title}
+ content={step.content}
+ isLastStep={isLastStep}
+ shouldHideBackButton={step.shouldHideBackButton}
+ shouldHideNextButton={step.shouldHideNextButton}
+ onClose={this.props.onClose}
+ onClickNext={this._goToNextStep.bind(this)}
+ onClickBack={this._goToPrevStep.bind(this)}
+ continueButtonDisplay={step.continueButtonDisplay}
+ continueButtonText={step.continueButtonText}
+ />
+ </Container>
+ );
+ }
private _getCurrentStep(): Step {
return this.props.steps[this.props.stepIndex];
}
-
private _goToNextStep(): void {
const nextStep = this.props.stepIndex + 1;
if (nextStep < this.props.steps.length) {
@@ -84,7 +116,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
this.props.onClose();
}
}
-
private _goToPrevStep(): void {
const nextStep = this.props.stepIndex - 1;
if (nextStep >= 0) {
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
index 45851b4de..74fc6f715 100644
--- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -1,90 +1,27 @@
-import { colors } from '@0xproject/react-shared';
import * as React from 'react';
-import { Button } from 'ts/components/ui/button';
-import { Container } from 'ts/components/ui/container';
-import { IconButton } from 'ts/components/ui/icon_button';
-import { Island } from 'ts/components/ui/island';
+import { OnboardingCard, OnboardingCardProps } from 'ts/components/onboarding/onboarding_card';
import { Pointer, PointerDirection } from 'ts/components/ui/pointer';
-import { Text, Title } from 'ts/components/ui/text';
export type ContinueButtonDisplay = 'enabled' | 'disabled';
-export interface OnboardingTooltipProps {
- title?: string;
- content: React.ReactNode;
- isLastStep: boolean;
- onClose: () => void;
- onClickNext: () => void;
- onClickBack: () => void;
- continueButtonDisplay?: ContinueButtonDisplay;
- shouldHideBackButton?: boolean;
- shouldHideNextButton?: boolean;
- pointerDirection?: PointerDirection;
- continueButtonText?: string;
+export interface OnboardingTooltipProps extends OnboardingCardProps {
className?: string;
+ pointerDirection?: PointerDirection;
}
export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = ({
- title,
- content,
- continueButtonDisplay,
- continueButtonText,
- onClickNext,
- onClickBack,
- onClose,
- shouldHideBackButton,
- shouldHideNextButton,
pointerDirection,
className,
+ ...cardProps,
}) => (
<Pointer className={className} direction={pointerDirection}>
- <Island>
- <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
- <div className="flex flex-column">
- <div className="flex justify-between">
- <Title>{title}</Title>
- <Container position="relative" bottom="20px" left="15px">
- <IconButton color={colors.grey} iconName="zmdi-close" onClick={onClose}>
- Close
- </IconButton>
- </Container>
- </div>
- <Container marginBottom="15px">
- <Text>{content}</Text>
- </Container>
- {continueButtonDisplay && (
- <Button
- isDisabled={continueButtonDisplay === 'disabled'}
- onClick={onClickNext}
- fontColor={colors.white}
- fontSize="15px"
- backgroundColor={colors.mediumBlue}
- >
- {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>
- </div>
- </Container>
- </Island>
+ <OnboardingCard {...cardProps} />
</Pointer>
);
OnboardingTooltip.defaultProps = {
pointerDirection: 'left',
- continueButtonText: 'Continue',
};
OnboardingTooltip.displayName = 'OnboardingTooltip';
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 7e40192f6..10d4af30e 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -14,7 +14,7 @@ import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowa
import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step';
import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step';
import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
-import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
import { analytics } from 'ts/utils/analytics';
import { utils } from 'ts/utils/utils';
@@ -34,6 +34,7 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
updateIsRunning: (isRunning: boolean) => void;
updateOnboardingStep: (stepIndex: number) => void;
refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
+ screenWidth: ScreenWidths;
}
class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
@@ -57,6 +58,8 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
isRunning={this.props.isRunning}
onClose={this._closeOnboarding.bind(this)}
updateOnboardingStep={this._updateOnboardingStep.bind(this)}
+ disableOverlay={this.props.screenWidth === ScreenWidths.Sm}
+ isMobile={this.props.screenWidth === ScreenWidths.Sm}
/>
);
}
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index b1860954c..11b3b43f4 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -246,11 +246,6 @@ export class Portal extends React.Component<PortalProps, PortalState> {
: TokenVisibility.TRACKED;
return (
<div style={styles.root}>
- <PortalOnboardingFlow
- blockchain={this._blockchain}
- trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
- refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
- />
<DocumentTitle title="0x Portal DApp" />
<TopBar
userAddress={this.props.userAddress}
@@ -307,6 +302,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
tokenVisibility={tokenVisibility}
/>
</div>
+ <PortalOnboardingFlow
+ blockchain={this._blockchain}
+ trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+ refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+ />
</div>
);
}
@@ -342,12 +342,18 @@ export class Portal extends React.Component<PortalProps, PortalState> {
private _renderWallet(): React.ReactNode {
const startOnboarding = this._renderStartOnboarding();
const isMobile = this.props.screenWidth === ScreenWidths.Sm;
+ // We need room to scroll down for mobile onboarding
+ const marginBottom = isMobile ? '200px' : '15px';
return (
<div>
{isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
- <Container marginBottom="15px">
+ <Container marginBottom={marginBottom}>
<Wallet
- style={this.props.isPortalOnboardingShowing ? { zIndex: zIndex.aboveOverlay } : undefined}
+ style={
+ !isMobile && this.props.isPortalOnboardingShowing
+ ? { zIndex: zIndex.aboveOverlay, position: 'relative' }
+ : undefined
+ }
userAddress={this.props.userAddress}
networkId={this.props.networkId}
blockchain={this._blockchain}
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
new file mode 100644
index 000000000..cbda2993d
--- /dev/null
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { keyframes, styled } from 'ts/style/theme';
+
+export type AnimationType = 'easeUpFromBottom';
+
+export interface AnimationProps {
+ type: AnimationType;
+}
+
+const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {...props} />;
+
+const appearFromBottomFrames = keyframes`
+ from {
+ position: absolute;
+ bottom: -500px;
+ }
+
+ to {
+ position: absolute;
+ bottom: 0px;
+ }
+`;
+
+const animations: { [K in AnimationType]: string } = {
+ easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`,
+};
+
+export const Animation = styled(PlainAnimation)`
+ animation: ${props => animations[props.type]};
+`;
+
+Animation.displayName = 'Animation';
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 1776345da..90aec0e7c 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -23,6 +23,7 @@ export interface ContainerProps {
left?: string;
right?: string;
bottom?: string;
+ zIndex?: number;
}
export const Container: React.StatelessComponent<ContainerProps> = ({ children, className, isHidden, ...style }) => {
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index ac2fe0d31..a1789c103 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -86,7 +86,6 @@ interface AccessoryItemConfig {
const styles: Styles = {
root: {
width: '100%',
- position: 'relative',
},
footerItemInnerDiv: {
paddingLeft: 24,