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

Merge pull request #739 from 0xProject/feature/website/mobile-friendly-onboarding

Browse Source 
Add support for mobile-friendly onboarding flows
This commit is contained in:
Francesco Agosti
2018-06-21 13:16:13 -07:00
committed by GitHub
parent 8ab65fdde4 5edfec68cf
commit c740539f48
12 changed files with 267 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,84 @@
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;
borderRadius?: string;
}
export const OnboardingCard: React.StatelessComponent<OnboardingCardProps> = ({
title,
content,
continueButtonDisplay,
continueButtonText,
onClickNext,
onClickBack,
onClose,
shouldHideBackButton,
shouldHideNextButton,
borderRadius,
}) => (
<Island borderRadius={borderRadius}>
<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';

52
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 onboardingElement = null;
if (this.props.isMobile) {
onboardingElement = <Animation type="easeUpFromBottom">{this._renderOnboardignCard()}</Animation>;
} else {
onboardingElement = (
<Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
{this._renderPopperChildren.bind(this)}
</Popper>
</Overlay>
);
);
}
if (this.props.disableOverlay) {
return onboardingElement;
}
return <Overlay>{onboardingElement}</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,13 +62,12 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
</div>
);
}
private _renderToolTip(): React.ReactNode {
const { steps, stepIndex } = this.props;
const step = steps[stepIndex];
const isLastStep = steps.length - 1 === stepIndex;
return (
<Container marginLeft="30px">
<Container marginLeft="30px" maxWidth={350}>
<OnboardingTooltip
title={step.title}
content={step.content}
@@ -72,10 +84,31 @@ 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}
borderRadius="10px 10px 0px 0px"
/>
</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 +117,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
this.props.onClose();
}
}
private _goToPrevStep(): void {
const nextStep = this.props.stepIndex - 1;
if (nextStep >= 0) {

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

@@ -1,90 +1,25 @@
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,
}) => (
<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>
</Pointer>
);
export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = props => {
const { pointerDirection, className, ...cardProps } = props;
return (
<Pointer className={className} direction={pointerDirection}>
<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}
/>
);
}

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

@@ -10,7 +10,7 @@ export const UnlockWalletOnboardingStep: React.StatelessComponent<UnlockWalletOn
<Container marginTop="15px" marginBottom="15px">
<img src="/images/metamask_icon.png" height="50px" width="50px" />
</Container>
<Text>Unlock your metamask extension to begin.</Text>
<Text center={true}>Unlock your metamask extension to get started.</Text>
</div>
</div>
);

115
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>
);
}
@@ -340,62 +340,77 @@ 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>
<Wallet
style={this.props.isPortalOnboardingShowing ? { zIndex: zIndex.aboveOverlay } : undefined}
userAddress={this.props.userAddress}
networkId={this.props.networkId}
blockchain={this._blockchain}
blockchainIsLoaded={this.props.blockchainIsLoaded}
blockchainErr={this.props.blockchainErr}
dispatcher={this.props.dispatcher}
tokenByAddress={this.props.tokenByAddress}
trackedTokens={this._getCurrentTrackedTokens()}
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
injectedProviderName={this.props.injectedProviderName}
providerType={this.props.providerType}
screenWidth={this.props.screenWidth}
location={this.props.location}
trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
onAddToken={this._onAddToken.bind(this)}
onRemoveToken={this._onRemoveToken.bind(this)}
refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
/>
<Container marginTop="15px">
<Island>
<Container
marginTop="30px"
marginBottom="30px"
marginLeft="30px"
marginRight="30px"
className="flex justify-around items-center"
>
<ActionAccountBalanceWallet
style={{ width: '30px', height: '30px' }}
color={colors.orange}
/>
<Text
fontColor={colors.grey}
fontSize="16px"
center={true}
onClick={this._startOnboarding.bind(this)}
>
Learn how to set up your account
</Text>
</Container>
</Island>
{isMobile && <Container marginBottom="15px">{startOnboarding}</Container>}
<Container marginBottom={marginBottom}>
<Wallet
style={
!isMobile && this.props.isPortalOnboardingShowing
? { zIndex: zIndex.aboveOverlay, position: 'relative' }
: undefined
}
userAddress={this.props.userAddress}
networkId={this.props.networkId}
blockchain={this._blockchain}
blockchainIsLoaded={this.props.blockchainIsLoaded}
blockchainErr={this.props.blockchainErr}
dispatcher={this.props.dispatcher}
tokenByAddress={this.props.tokenByAddress}
trackedTokens={this._getCurrentTrackedTokens()}
userEtherBalanceInWei={this.props.userEtherBalanceInWei}
lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
injectedProviderName={this.props.injectedProviderName}
providerType={this.props.providerType}
screenWidth={this.props.screenWidth}
location={this.props.location}
trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
onAddToken={this._onAddToken.bind(this)}
onRemoveToken={this._onRemoveToken.bind(this)}
refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
/>
</Container>
{!isMobile && <Container marginTop="15px">{startOnboarding}</Container>}
</div>
);
}
private _renderStartOnboarding(): React.ReactNode {
return (
<Island>
<Container
marginTop="30px"
marginBottom="30px"
marginLeft="30px"
marginRight="30px"
className="flex justify-around items-center"
>
<ActionAccountBalanceWallet style={{ width: '30px', height: '30px' }} color={colors.orange} />
<Text
fontColor={colors.grey}
fontSize="16px"
center={true}
onClick={this._startOnboarding.bind(this)}
>
Learn how to set up your account
</Text>
</Container>
</Island>
);
}
private _startOnboarding(): void {
const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
analytics.logEvent('Portal', 'Onboarding Started - Manual', networkName, this.props.portalOnboardingStep);
this.props.dispatcher.updatePortalOnboardingShowing(true);
// On mobile, make sure the wallet is completely visible.
if (this.props.screenWidth === ScreenWidths.Sm) {
document.querySelector('.wallet').scrollIntoView();
}
}
private _renderWalletSection(): React.ReactNode {
return <Section header={<TextHeader labelText="Your Account" />} body={this._renderWallet()} />;

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

16
packages/website/ts/components/ui/button.tsx
View File

@@ -1,5 +1,5 @@
import { colors } from '@0xproject/react-shared';
import { darken, grayscale } from 'polished';
import { darken, saturate } from 'polished';
import * as React from 'react';
import { styled } from 'ts/style/theme';
@@ -17,7 +17,7 @@ export interface ButtonProps {
}
const PlainButton: React.StatelessComponent<ButtonProps> = ({ children, isDisabled, onClick, type, className }) => (
<button type={type} className={className} onClick={isDisabled ? undefined : onClick}>
<button type={type} className={className} onClick={isDisabled ? undefined : onClick} disabled={isDisabled}>
{children}
</button>
);
@@ -26,14 +26,15 @@ export const Button = styled(PlainButton)`
cursor: ${props => (props.isDisabled ? 'default' : 'pointer')};
font-size: ${props => props.fontSize};
color: ${props => props.fontColor};
transition: background-color 0.5s ease;
transition: background-color, opacity 0.5s ease;
padding: 0.8em 2.2em;
border-radius: 6px;
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25);
font-weight: 500;
outline: none;
font-family: ${props => props.fontFamily};
width: ${props => props.width};
background-color: ${props => (props.isDisabled ? grayscale(props.backgroundColor) : props.backgroundColor)};
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) : '')};
@@ -41,6 +42,13 @@ export const Button = styled(PlainButton)`
&:active {
background-color: ${props => (!props.isDisabled ? darken(0.2, props.backgroundColor) : '')};
}
&:disabled {
opacity: 0.5;
box-shadow: none;
}
&:focus {
background-color: ${props => saturate(0.2, props.backgroundColor)};
}
`;
Button.defaultProps = {

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

27
packages/website/ts/components/ui/island.tsx
View File

@@ -1,31 +1,28 @@
import * as React from 'react';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
export interface IslandProps {
style?: React.CSSProperties;
children?: React.ReactNode;
className?: string;
Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
borderRadius?: string;
}
const defaultStyle: React.CSSProperties = {
backgroundColor: colors.white,
borderBottomRightRadius: 10,
borderBottomLeftRadius: 10,
borderTopRightRadius: 10,
borderTopLeftRadius: 10,
boxShadow: `0px 3px 4px ${colors.walletBoxShadow}`,
overflow: 'hidden',
};
export const Island: React.StatelessComponent<IslandProps> = (props: IslandProps) => (
<props.Component style={{ ...defaultStyle, ...props.style }} className={props.className}>
{props.children}
</props.Component>
const PlainIsland: React.StatelessComponent<IslandProps> = ({ Component, style, className }) => (
<Component style={style} className={className} />
);
export const Island = styled(PlainIsland)`
background-color: ${colors.white};
border-radius: ${props => props.borderRadius};
box-shadow: 0px 4px 6px ${colors.walletBoxShadow};
overflow: hidden;
`;
Island.defaultProps = {
Component: 'div',
borderRadius: '10px',
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 => ({