aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorFrancesco Agosti <francesco.agosti93@gmail.com>2018-05-25 04:02:45 +0800
committerGitHub <noreply@github.com>2018-05-25 04:02:45 +0800
commitb39aa5d359df8ed92a8d576b5532490dc5b19ba1 (patch)
treed8baa9253782d0ce5a333534cc49fef45f6f9f83
parentde1ff52de3c9953dfb60283c8025b73d6e417029 (diff)
parentf8f8bd95ca8ef94b583766d3d8c9d9ac71f04938 (diff)
downloaddexon-sol-tools-b39aa5d359df8ed92a8d576b5532490dc5b19ba1.tar
dexon-sol-tools-b39aa5d359df8ed92a8d576b5532490dc5b19ba1.tar.gz
dexon-sol-tools-b39aa5d359df8ed92a8d576b5532490dc5b19ba1.tar.bz2
dexon-sol-tools-b39aa5d359df8ed92a8d576b5532490dc5b19ba1.tar.lz
dexon-sol-tools-b39aa5d359df8ed92a8d576b5532490dc5b19ba1.tar.xz
dexon-sol-tools-b39aa5d359df8ed92a8d576b5532490dc5b19ba1.tar.zst
dexon-sol-tools-b39aa5d359df8ed92a8d576b5532490dc5b19ba1.zip
Merge pull request #607 from 0xProject/feature/website/onboarding-setup
Set up structure for onboarding flow along with basic step 0
-rw-r--r--packages/typescript-typings/CHANGELOG.json8
-rw-r--r--packages/typescript-typings/types/react-joyride/index.d.ts86
-rw-r--r--packages/website/package.json10
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx39
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx32
-rw-r--r--packages/website/ts/components/portal/portal.tsx50
-rw-r--r--packages/website/ts/components/relayer_index/relayer_grid_tile.tsx12
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx3
-rw-r--r--packages/website/ts/components/ui/container.tsx16
-rw-r--r--packages/website/ts/components/ui/island.tsx33
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx12
-rw-r--r--packages/website/ts/containers/portal_onboarding_flow.ts37
-rw-r--r--packages/website/ts/redux/dispatcher.ts7
-rw-r--r--packages/website/ts/redux/reducer.ts21
-rw-r--r--packages/website/ts/types.ts8
-rw-r--r--packages/website/ts/utils/style.ts4
-rw-r--r--yarn.lock83
17 files changed, 420 insertions, 41 deletions
diff --git a/packages/typescript-typings/CHANGELOG.json b/packages/typescript-typings/CHANGELOG.json
index 2e2998bb3..77a5ffad2 100644
--- a/packages/typescript-typings/CHANGELOG.json
+++ b/packages/typescript-typings/CHANGELOG.json
@@ -1,5 +1,13 @@
[
{
+ "version": "0.4.0",
+ "changes": [
+ {
+ "note": "Add types for `react-joyride`"
+ }
+ ]
+ },
+ {
"timestamp": 1527009133,
"version": "0.3.2",
"changes": [
diff --git a/packages/typescript-typings/types/react-joyride/index.d.ts b/packages/typescript-typings/types/react-joyride/index.d.ts
new file mode 100644
index 000000000..f126e4c86
--- /dev/null
+++ b/packages/typescript-typings/types/react-joyride/index.d.ts
@@ -0,0 +1,86 @@
+// Type definitions for react-joyride 2.0.0-11
+// Project: https://github.com/gilbarbara/react-joyride
+
+declare module 'react-joyride' {
+ import * as React from 'react';
+ export interface StyleOptions {
+ arrowColor?: string;
+ backgroundColor?: string;
+ primaryColor?: string;
+ textColor?: string;
+ overlayColor?: string;
+ spotlightShadow?: string;
+ beaconSize?: number;
+ zIndex?: number;
+ }
+
+ export type Placement =
+ | 'top'
+ | 'top-left'
+ | 'top-right'
+ | 'bottom'
+ | 'bottom-left'
+ | 'bottom-right'
+ | 'right'
+ | 'left';
+
+ export interface Step {
+ title?: string;
+ content: React.ReactNode;
+ target: string;
+ placement?: Placement;
+ type?: 'click' | 'hover';
+ isFixed?: boolean;
+ allowClicksThruHole?: boolean;
+ disableBeacon?: boolean;
+ style?: StyleOptions;
+ [prop: string]: any;
+ }
+
+ export interface StyleOptionsProp {
+ options: StyleOptions;
+ }
+
+ interface CallbackMetadata {
+ type:
+ | 'tour:start'
+ | 'step:before'
+ | 'beacon'
+ | 'tooltip'
+ | 'close'
+ | 'step:after'
+ | 'tour:end'
+ | 'tour:status'
+ | 'error:target_not_found'
+ | 'error';
+ step: number;
+ }
+
+ export type CallbackData = CallbackMetadata & State;
+
+ export interface Props {
+ steps?: Step[];
+ beaconComponent?: React.ReactNode;
+ disableOverlayClose?: boolean;
+ run?: boolean;
+ stepIndex?: number;
+ callback?: (data: CallbackData) => void;
+ debug?: boolean;
+ styles?: StyleOptionsProp;
+ }
+
+ export interface State {
+ action: string;
+ controlled: boolean;
+ index: number;
+ lifecycle: string;
+ size: 0;
+ status: string;
+ }
+
+ export default class Joyride extends React.Component<Props, State> {
+ constructor(props: Props);
+
+ static defaultProps: Props;
+ }
+}
diff --git a/packages/website/package.json b/packages/website/package.json
index cd0bfaf5e..efe61c4b6 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -11,9 +11,12 @@
"clean": "shx rm -f public/bundle*",
"lint": "tslint --project . 'ts/**/*.ts' 'ts/**/*.tsx'",
"watch": "webpack-dev-server --content-base public --https",
- "deploy_dogfood": "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
- "deploy_staging": "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
- "deploy_live": "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers"
+ "deploy_dogfood":
+ "npm run build; aws s3 sync ./public/. s3://dogfood.0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
+ "deploy_staging":
+ "npm run build; aws s3 sync ./public/. s3://staging-0xproject --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers",
+ "deploy_live":
+ "npm run build; aws s3 sync ./public/. s3://0xproject.com --profile 0xproject --region us-east-1 --grants read=uri=http://acs.amazonaws.com/groups/global/AllUsers"
},
"author": "Fabio Berger",
"license": "Apache-2.0",
@@ -42,6 +45,7 @@
"react-document-title": "^2.0.3",
"react-dom": "15.6.1",
"react-ga": "^2.4.1",
+ "react-joyride": "^2.0.0-11",
"react-redux": "^5.0.3",
"react-router-dom": "^4.1.1",
"react-scroll": "^1.5.2",
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
new file mode 100644
index 000000000..621d14260
--- /dev/null
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -0,0 +1,39 @@
+import * as _ from 'lodash';
+import * as React from 'react';
+import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride';
+
+import { zIndex } from 'ts/utils/style';
+
+export interface OnboardingFlowProps {
+ steps: Step[];
+ stepIndex: number;
+ isRunning: boolean;
+ onClose: () => void;
+}
+
+const joyrideStyleOptions: StyleOptions = {
+ zIndex: zIndex.overlay,
+};
+
+// Wrapper around Joyride with defaults and styles set
+export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
+ public render(): React.ReactNode {
+ return (
+ <Joyride
+ run={this.props.isRunning}
+ debug={true}
+ steps={this.props.steps}
+ stepIndex={this.props.stepIndex}
+ styles={{ options: joyrideStyleOptions }}
+ callback={this._handleChange.bind(this)}
+ />
+ );
+ }
+
+ private _handleChange(data: CallbackData): void {
+ switch (data.action) {
+ case 'close':
+ this.props.onClose();
+ }
+ }
+}
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
new file mode 100644
index 000000000..11684aaee
--- /dev/null
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { Step } from 'react-joyride';
+
+import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
+
+export interface PortalOnboardingFlowProps {
+ stepIndex: number;
+ isRunning: boolean;
+ onClose: () => void;
+}
+
+const steps: Step[] = [
+ {
+ target: '.wallet',
+ content: 'You are onboarding right now!',
+ placement: 'right',
+ disableBeacon: true,
+ },
+];
+
+export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
+ public render(): React.ReactNode {
+ return (
+ <OnboardingFlow
+ steps={steps}
+ stepIndex={this.props.stepIndex}
+ isRunning={this.props.isRunning}
+ onClose={this.props.onClose}
+ />
+ );
+ }
+}
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 1bd318c28..a03731ec0 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -20,9 +20,12 @@ import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
import { TokenBalances } from 'ts/components/token_balances';
import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
import { TradeHistory } from 'ts/components/trade_history/trade_history';
+import { Container } from 'ts/components/ui/container';
import { FlashMessage } from 'ts/components/ui/flash_message';
+import { Island } from 'ts/components/ui/island';
import { Wallet } from 'ts/components/wallet/wallet';
import { GenerateOrderForm } from 'ts/containers/generate_order_form';
+import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow';
import { localStorage } from 'ts/local_storage/local_storage';
import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
import { FullscreenMessage } from 'ts/pages/fullscreen_message';
@@ -183,6 +186,7 @@ export class Portal extends React.Component<PortalProps, PortalState> {
: TokenVisibility.TRACKED;
return (
<div style={styles.root}>
+ <PortalOnboardingFlow />
<DocumentTitle title="0x Portal DApp" />
<TopBar
userAddress={this.props.userAddress}
@@ -278,25 +282,37 @@ export class Portal extends React.Component<PortalProps, PortalState> {
const allTokens = _.values(this.props.tokenByAddress);
const trackedTokens = _.filter(allTokens, t => t.isTracked);
return (
- <Wallet
- 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={trackedTokens}
- userEtherBalanceInWei={this.props.userEtherBalanceInWei}
- lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
- injectedProviderName={this.props.injectedProviderName}
- providerType={this.props.providerType}
- onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
- onAddToken={this._onAddToken.bind(this)}
- onRemoveToken={this._onRemoveToken.bind(this)}
- />
+ <div>
+ <Wallet
+ 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={trackedTokens}
+ userEtherBalanceInWei={this.props.userEtherBalanceInWei}
+ lastForceTokenStateRefetch={this.props.lastForceTokenStateRefetch}
+ injectedProviderName={this.props.injectedProviderName}
+ providerType={this.props.providerType}
+ onToggleLedgerDialog={this._onToggleLedgerDialog.bind(this)}
+ onAddToken={this._onAddToken.bind(this)}
+ onRemoveToken={this._onRemoveToken.bind(this)}
+ />
+ <Container marginTop="15px">
+ <Island>
+ {/** TODO: Implement real styles. */}
+ <p onClick={this._startOnboarding.bind(this)}>Start onboarding flow.</p>
+ </Island>
+ </Container>
+ </div>
);
}
+
+ private _startOnboarding(): void {
+ this.props.dispatcher.updatePortalOnboardingShowing(true);
+ }
private _renderWalletSection(): React.ReactNode {
return <Section header={<TextHeader labelText="Your Account" />} body={this._renderWallet()} />;
}
diff --git a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
index dc9eeb29d..23c2f0b56 100644
--- a/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
+++ b/packages/website/ts/components/relayer_index/relayer_grid_tile.tsx
@@ -4,6 +4,7 @@ import { GridTile } from 'material-ui/GridList';
import * as React from 'react';
import { TopTokens } from 'ts/components/relayer_index/relayer_top_tokens';
+import { Island } from 'ts/components/ui/island';
import { TokenIcon } from 'ts/components/ui/token_icon';
import { Token, WebsiteBackendRelayerInfo } from 'ts/types';
import { colors } from 'ts/utils/colors';
@@ -15,13 +16,6 @@ export interface RelayerGridTileProps {
const styles: Styles = {
root: {
- backgroundColor: colors.white,
- borderBottomRightRadius: 10,
- borderBottomLeftRadius: 10,
- borderTopRightRadius: 10,
- borderTopLeftRadius: 10,
- boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
- overflow: 'hidden',
boxSizing: 'border-box',
},
innerDiv: {
@@ -68,7 +62,7 @@ const FALLBACK_IMG_SRC = '/images/landing/hero_chip_image.png';
export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (props: RelayerGridTileProps) => {
const link = props.relayerInfo.appUrl || props.relayerInfo.url;
return (
- <GridTile style={styles.root}>
+ <Island style={styles.root} Component={GridTile}>
<div style={styles.innerDiv}>
<a href={link} target="_blank" style={{ textDecoration: 'none' }}>
<ImgWithFallback
@@ -91,7 +85,7 @@ export const RelayerGridTile: React.StatelessComponent<RelayerGridTileProps> = (
</div>
</div>
</div>
- </GridTile>
+ </Island>
);
};
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index f2d0c6177..db8e3cb82 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/packages/website/ts/components/top_bar/top_bar.tsx
@@ -18,6 +18,7 @@ import { Identicon } from 'ts/components/ui/identicon';
import { Dispatcher } from 'ts/redux/dispatcher';
import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
+import { zIndex } from 'ts/utils/style';
import { Translate } from 'ts/utils/translate';
import { utils } from 'ts/utils/utils';
@@ -59,7 +60,7 @@ const styles: Styles = {
width: '100%',
position: 'relative',
top: 0,
- zIndex: 1100,
+ zIndex: zIndex.topBar,
paddingBottom: 1,
},
bottomBar: {
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
new file mode 100644
index 000000000..07868608c
--- /dev/null
+++ b/packages/website/ts/components/ui/container.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+
+export interface ContainerProps {
+ marginTop?: string | number;
+ marginBottom?: string | number;
+ marginRight?: string | number;
+ marginLeft?: string | number;
+ children?: React.ReactNode;
+}
+
+export const Container: React.StatelessComponent<ContainerProps> = (props: ContainerProps) => {
+ const { children, ...style } = props;
+ return <div style={style}>{children}</div>;
+};
+
+Container.displayName = 'Container';
diff --git a/packages/website/ts/components/ui/island.tsx b/packages/website/ts/components/ui/island.tsx
new file mode 100644
index 000000000..f5480c9c9
--- /dev/null
+++ b/packages/website/ts/components/ui/island.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Styleable } from 'ts/types';
+import { colors } from 'ts/utils/colors';
+
+export interface IslandProps {
+ style?: React.CSSProperties;
+ children?: React.ReactNode;
+ className?: string;
+ Component?: string | React.ComponentClass<any> | React.StatelessComponent<any>;
+}
+
+const defaultStyle: React.CSSProperties = {
+ backgroundColor: colors.white,
+ borderBottomRightRadius: 10,
+ borderBottomLeftRadius: 10,
+ borderTopRightRadius: 10,
+ borderTopLeftRadius: 10,
+ boxShadow: `0px 4px 6px ${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>
+);
+
+Island.defaultProps = {
+ Component: 'div',
+ style: {},
+};
+
+Island.displayName = 'Island';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index d0354580d..39e591bac 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -25,6 +25,7 @@ import { Blockchain } from 'ts/blockchain';
import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
import { IconButton } from 'ts/components/ui/icon_button';
import { Identicon } from 'ts/components/ui/identicon';
+import { Island } from 'ts/components/ui/island';
import { TokenIcon } from 'ts/components/ui/token_icon';
import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item';
import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
@@ -84,13 +85,6 @@ interface AccessoryItemConfig {
const styles: Styles = {
root: {
width: '100%',
- backgroundColor: colors.white,
- borderBottomRightRadius: 10,
- borderBottomLeftRadius: 10,
- borderTopRightRadius: 10,
- borderTopLeftRadius: 10,
- boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
- overflow: 'hidden',
},
headerItemInnerDiv: {
paddingLeft: 65,
@@ -198,11 +192,11 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const isReadyToRender = this.props.blockchainIsLoaded && this.props.blockchainErr === BlockchainErrs.NoError;
const isAddressAvailable = !_.isEmpty(this.props.userAddress);
return (
- <div className="flex flex-column" style={styles.root}>
+ <Island className="flex flex-column wallet" style={styles.root}>
{isReadyToRender && isAddressAvailable
? _.concat(this._renderConnectedHeaderRows(), this._renderBody(), this._renderFooterRows())
: _.concat(this._renderDisconnectedHeaderRows(), this._renderDisconnectedRows())}
- </div>
+ </Island>
);
}
private _renderDisconnectedHeaderRows(): React.ReactElement<{}> {
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
new file mode 100644
index 000000000..3cd4e8510
--- /dev/null
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { connect } from 'react-redux';
+import { Dispatch } from 'redux';
+import { ActionTypes } from 'ts/types';
+
+import { PortalOnboardingFlow as PortalOnboardingFlowComponent } from 'ts/components/onboarding/portal_onboarding_flow';
+import { State } from 'ts/redux/reducer';
+
+interface PortalOnboardingFlowProps {}
+
+interface ConnectedState {
+ stepIndex: number;
+ isRunning: boolean;
+}
+
+interface ConnectedDispatch {
+ onClose: () => void;
+}
+
+const mapStateToProps = (state: State): ConnectedState => ({
+ stepIndex: state.portalOnboardingStep,
+ isRunning: state.isPortalOnboardingShowing,
+});
+
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+ onClose: (): void => {
+ dispatch({
+ type: ActionTypes.UpdatePortalOnboardingShowing,
+ data: false,
+ });
+ },
+});
+
+export const PortalOnboardingFlow: React.ComponentClass<PortalOnboardingFlowProps> = connect(
+ mapStateToProps,
+ mapDispatchToProps,
+)(PortalOnboardingFlowComponent);
diff --git a/packages/website/ts/redux/dispatcher.ts b/packages/website/ts/redux/dispatcher.ts
index 340b80d49..0b4cc3938 100644
--- a/packages/website/ts/redux/dispatcher.ts
+++ b/packages/website/ts/redux/dispatcher.ts
@@ -174,6 +174,13 @@ export class Dispatcher {
});
}
+ public updatePortalOnboardingShowing(isShowing: boolean): void {
+ this._dispatch({
+ data: isShowing,
+ type: ActionTypes.UpdatePortalOnboardingShowing,
+ });
+ }
+
// Docs
public updateCurrentDocsVersion(version: string): void {
this._dispatch({
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index fba6afa5d..e61345c87 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -40,6 +40,8 @@ export interface State {
lastForceTokenStateRefetch: number;
userAddress: string;
userEtherBalanceInWei: BigNumber;
+ portalOnboardingStep: number;
+ isPortalOnboardingShowing: boolean;
// Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
userSuppliedOrderCache: Order;
@@ -80,7 +82,8 @@ const INITIAL_STATE: State = {
userAddress: '',
userEtherBalanceInWei: new BigNumber(0),
userSuppliedOrderCache: undefined,
-
+ portalOnboardingStep: 0,
+ isPortalOnboardingShowing: false,
// Docs
docsVersion: DEFAULT_DOCS_VERSION,
availableDocVersions: [DEFAULT_DOCS_VERSION],
@@ -293,6 +296,22 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
};
}
+ case ActionTypes.UpdatePortalOnboardingStep: {
+ const portalOnboardingStep = action.data;
+ return {
+ ...state,
+ portalOnboardingStep,
+ };
+ }
+
+ case ActionTypes.UpdatePortalOnboardingShowing: {
+ const isPortalOnboardingShowing = action.data;
+ return {
+ ...state,
+ isPortalOnboardingShowing,
+ };
+ }
+
// Docs
case ActionTypes.UpdateLibraryVersion: {
return {
diff --git a/packages/website/ts/types.ts b/packages/website/ts/types.ts
index 294a58f64..aca3edae8 100644
--- a/packages/website/ts/types.ts
+++ b/packages/website/ts/types.ts
@@ -1,6 +1,7 @@
import { ECSignature } from '@0xproject/types';
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
+import * as React from 'react';
export enum Side {
Receive = 'RECEIVE',
@@ -21,6 +22,11 @@ export interface TokenByAddress {
[address: string]: Token;
}
+export interface Styleable {
+ style: React.CSSProperties;
+ children: React.ReactNode;
+}
+
export interface AssetToken {
address?: string;
amount?: BigNumber;
@@ -125,6 +131,8 @@ export enum ActionTypes {
UpdateUserSuppliedOrderCache = 'UPDATE_USER_SUPPLIED_ORDER_CACHE',
UpdateOrderFillAmount = 'UPDATE_ORDER_FILL_AMOUNT',
UpdateShouldBlockchainErrDialogBeOpen = 'UPDATE_SHOULD_BLOCKCHAIN_ERR_DIALOG_BE_OPEN',
+ UpdatePortalOnboardingStep = 'UPDATE_ONBOARDING_STEP',
+ UpdatePortalOnboardingShowing = 'UPDATE_PORTAL_ONBOARDING_SHOWING',
// Docs
UpdateLibraryVersion = 'UPDATE_LIBRARY_VERSION',
diff --git a/packages/website/ts/utils/style.ts b/packages/website/ts/utils/style.ts
new file mode 100644
index 000000000..51b6e4eb6
--- /dev/null
+++ b/packages/website/ts/utils/style.ts
@@ -0,0 +1,4 @@
+export const zIndex = {
+ topBar: 1100,
+ overlay: 1101,
+};
diff --git a/yarn.lock b/yarn.lock
index b6ac4d18b..52d6983d6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3218,6 +3218,14 @@ dedent@^0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.7.0.tgz#2495ddbaf6eb874abb0e1be9df22d2e5a544326c"
+deep-diff@^0.3.8:
+ version "0.3.8"
+ resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-0.3.8.tgz#c01de63efb0eec9798801d40c7e0dae25b582c84"
+
+deep-diff@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/deep-diff/-/deep-diff-1.0.0.tgz#0dd55f9412f22a07b2edbfbb11bb4633be6be40b"
+
deep-eql@^0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-0.1.3.tgz#ef558acab8de25206cd713906d74e56930eb69f2"
@@ -3250,6 +3258,10 @@ deep-is@~0.1.3:
version "0.1.3"
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
+deepmerge@^2.1.0:
+ version "2.1.0"
+ resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.1.0.tgz#511a54fff405fc346f0240bb270a3e9533a31102"
+
default-require-extensions@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/default-require-extensions/-/default-require-extensions-1.0.0.tgz#f37ea15d3e13ffd9b437d33e1a75b5fb97874cb8"
@@ -4163,7 +4175,7 @@ execa@^0.8.0:
signal-exit "^3.0.0"
strip-eof "^1.0.0"
-exenv@^1.2.1:
+exenv@^1.2.1, exenv@^1.2.2:
version "1.2.2"
resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
@@ -6001,6 +6013,10 @@ is-installed-globally@^0.1.0:
global-dirs "^0.1.0"
is-path-inside "^1.0.0"
+is-lite@^0.2.0:
+ version "0.2.0"
+ resolved "https://registry.yarnpkg.com/is-lite/-/is-lite-0.2.0.tgz#1532415467f1fd49aa693ba013a8669575df7cf3"
+
is-mobile@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/is-mobile/-/is-mobile-0.2.2.tgz#0e2e006d99ed2c2155b761df80f2a3619ae2ad9f"
@@ -7716,6 +7732,10 @@ neo-async@^2.5.0:
version "2.5.1"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.5.1.tgz#acb909e327b1e87ec9ef15f41b8a269512ad41ee"
+nested-property@0.0.7, nested-property@^0.0.7:
+ version "0.0.7"
+ resolved "https://registry.yarnpkg.com/nested-property/-/nested-property-0.0.7.tgz#ff222f233ca8793c6828b4117091bea597130f4f"
+
newman@^3.9.3:
version "3.9.3"
resolved "https://registry.yarnpkg.com/newman/-/newman-3.9.3.tgz#939356026942474ba15482bd37a15c60bb200ca0"
@@ -8564,6 +8584,10 @@ plur@^2.1.2:
dependencies:
irregular-plurals "^1.0.0"
+popper.js@^1.14.3:
+ version "1.14.3"
+ resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
+
portfinder@^1.0.9:
version "1.0.13"
resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.13.tgz#bb32ecd87c27104ae6ee44b5a3ccbf0ebb1aede9"
@@ -9266,6 +9290,12 @@ quick-lru@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
+rafl@~1.2.1:
+ version "1.2.2"
+ resolved "https://registry.yarnpkg.com/rafl/-/rafl-1.2.2.tgz#fe930f758211020d47e38815f5196a8be4150740"
+ dependencies:
+ global "~4.3.0"
+
randomatic@^1.1.3:
version "1.1.7"
resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.7.tgz#c7abe9cc8b87c0baa876b19fde83fd464797e38c"
@@ -9372,6 +9402,16 @@ react-event-listener@^0.4.5:
prop-types "^15.5.4"
warning "^3.0.0"
+react-floater@^0.5.4:
+ version "0.5.4"
+ resolved "https://registry.yarnpkg.com/react-floater/-/react-floater-0.5.4.tgz#411a57fd8631e96466e035ee6c91f1f118c8782a"
+ dependencies:
+ deepmerge "^2.1.0"
+ exenv "^1.2.2"
+ is-lite "^0.2.0"
+ popper.js "^1.14.3"
+ react-proptype-conditional-require "^1.0.4"
+
react-ga@^2.4.1:
version "2.4.1"
resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.4.1.tgz#dfbd5f028ed39a07067f7a8bf57dc0d240000767"
@@ -9388,6 +9428,22 @@ react-highlight@0xproject/react-highlight:
react "^15.5.4"
react-dom "^15.5.4"
+react-joyride@^2.0.0-11:
+ version "2.0.0-11"
+ resolved "https://registry.yarnpkg.com/react-joyride/-/react-joyride-2.0.0-11.tgz#5cbf4f86b83dfbf9242e7d19482a0fd7cc69ad52"
+ dependencies:
+ deep-diff "^1.0.0"
+ deepmerge "^2.1.0"
+ exenv "^1.2.2"
+ is-lite "^0.2.0"
+ nested-property "^0.0.7"
+ react-floater "^0.5.4"
+ react-proptype-conditional-require "^1.0.4"
+ scroll "^2.0.3"
+ scroll-doc "^0.2.1"
+ scrollparent "^2.0.1"
+ tree-changes "^0.3.2"
+
react-markdown@^3.2.2:
version "3.3.0"
resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-3.3.0.tgz#a87cdd822aa9302d6add9687961dd1a82a45d02e"
@@ -9398,6 +9454,10 @@ react-markdown@^3.2.2:
unist-util-visit "^1.3.0"
xtend "^4.0.1"
+react-proptype-conditional-require@^1.0.4:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/react-proptype-conditional-require/-/react-proptype-conditional-require-1.0.4.tgz#69c2d5741e6df5e08f230f36bbc2944ee1222555"
+
react-redux@^5.0.3:
version "5.0.7"
resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.7.tgz#0dc1076d9afb4670f993ffaef44b8f8c1155a4c8"
@@ -10087,6 +10147,20 @@ scoped-regex@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/scoped-regex/-/scoped-regex-1.0.0.tgz#a346bb1acd4207ae70bd7c0c7ca9e566b6baddb8"
+scroll-doc@^0.2.1:
+ version "0.2.1"
+ resolved "https://registry.yarnpkg.com/scroll-doc/-/scroll-doc-0.2.1.tgz#168f9e9ac598743dd682c992839b44a38ce4dd91"
+
+scroll@^2.0.3:
+ version "2.0.3"
+ resolved "https://registry.yarnpkg.com/scroll/-/scroll-2.0.3.tgz#0951b785544205fd17753bc3d294738ba16fc2ab"
+ dependencies:
+ rafl "~1.2.1"
+
+scrollparent@^2.0.1:
+ version "2.0.1"
+ resolved "https://registry.yarnpkg.com/scrollparent/-/scrollparent-2.0.1.tgz#715d5b9cc57760fb22bdccc3befb5bfe06b1a317"
+
scrypt-js@2.0.3:
version "2.0.3"
resolved "https://registry.yarnpkg.com/scrypt-js/-/scrypt-js-2.0.3.tgz#bb0040be03043da9a012a2cea9fc9f852cfc87d4"
@@ -11389,6 +11463,13 @@ traverse-chain@~0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/traverse-chain/-/traverse-chain-0.1.0.tgz#61dbc2d53b69ff6091a12a168fd7d433107e40f1"
+tree-changes@^0.3.2:
+ version "0.3.2"
+ resolved "https://registry.yarnpkg.com/tree-changes/-/tree-changes-0.3.2.tgz#ad7d3b499155bd6176f2c9c6a472d8155df0a9ce"
+ dependencies:
+ deep-diff "^0.3.8"
+ nested-property "0.0.7"
+
treeify@^1.0.1:
version "1.1.0"
resolved "https://registry.yarnpkg.com/treeify/-/treeify-1.1.0.tgz#4e31c6a463accd0943879f30667c4fdaff411bb8"