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

Support mobile friendly onboarding flows

Browse Source
This commit is contained in:
fragosti
2018-06-20 15:51:17 -07:00
parent 39ccb2df0b
commit 1e51af1d4b
9 changed files with 180 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
packages/website/ts/components/onboarding/onboarding_card.tsx Normal file
View File

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

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

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

73
packages/website/ts/components/onboarding/onboarding_tooltip.tsx
View File

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

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

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

20
packages/website/ts/components/portal/portal.tsx
View File

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

32
packages/website/ts/components/ui/animation.tsx Normal file
View File

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

1
packages/website/ts/components/ui/container.tsx
View File

@@ -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 }) => {

1
packages/website/ts/components/wallet/wallet.tsx
View File

@@ -86,7 +86,6 @@ interface AccessoryItemConfig {
const styles: Styles = {
root: {
width: '100%',
position: 'relative',
},
footerItemInnerDiv: {
paddingLeft: 24,

4
packages/website/ts/containers/portal_onboarding_flow.ts
View File

@@ -3,7 +3,7 @@ import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { Blockchain } from 'ts/blockchain';
import { ActionTypes, ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
import { ActionTypes, ProviderType, ScreenWidths, TokenByAddress, TokenStateByAddress } from 'ts/types';
import { PortalOnboardingFlow as PortalOnboardingFlowComponent } from 'ts/components/onboarding/portal_onboarding_flow';
import { State } from 'ts/redux/reducer';
@@ -25,6 +25,7 @@ interface ConnectedState {
blockchainIsLoaded: boolean;
userEtherBalanceInWei?: BigNumber;
tokenByAddress: TokenByAddress;
screenWidth: ScreenWidths;
}
interface ConnectedDispatch {
@@ -43,6 +44,7 @@ const mapStateToProps = (state: State, _ownProps: PortalOnboardingFlowProps): Co
userEtherBalanceInWei: state.userEtherBalanceInWei,
tokenByAddress: state.tokenByAddress,
hasBeenSeen: state.hasPortalOnboardingBeenSeen,
screenWidth: state.screenWidth,
});
const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({