aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFrancesco Agosti <francesco.agosti93@gmail.com>2018-05-31 02:49:04 +0800
committerGitHub <noreply@github.com>2018-05-31 02:49:04 +0800
commite18d61b31a22519cd7d85ecffa62925ef7adc63d (patch)
tree166746953c94bdfd62cca909553f30d96d682bd8 /packages/website/ts/components
parentb20e40dd6fd9964876a0006efe8b879a9a1d2118 (diff)
parent61cd1ae5259c03e3ae1d1711d585e2222d8cfc34 (diff)
downloaddexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar
dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar.gz
dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar.bz2
dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar.lz
dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar.xz
dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.tar.zst
dexon-sol-tools-e18d61b31a22519cd7d85ecffa62925ef7adc63d.zip
Merge pull request #635 from 0xProject/feature/website/custom-onboarding-tooltip
Remove react-joyride and some more refactoring
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx93
-rw-r--r--packages/website/ts/components/onboarding/onboarding_tooltip.tsx56
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx119
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx13
-rw-r--r--packages/website/ts/components/ui/container.tsx15
-rw-r--r--packages/website/ts/components/ui/overlay.tsx34
-rw-r--r--packages/website/ts/components/wallet/wallet.tsx33
-rw-r--r--packages/website/ts/components/wallet/wallet_disconnected_item.tsx4
8 files changed, 310 insertions, 57 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 621d14260..4066babaf 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -1,39 +1,96 @@
import * as _ from 'lodash';
import * as React from 'react';
-import Joyride, { CallbackData, Step, StyleOptions } from 'react-joyride';
+import { Placement, Popper, PopperChildrenProps } from 'react-popper';
+import { ContinueButtonDisplay, OnboardingTooltip } from 'ts/components/onboarding/onboarding_tooltip';
+import { Container } from 'ts/components/ui/container';
+import { Overlay } from 'ts/components/ui/overlay';
import { zIndex } from 'ts/utils/style';
+export interface Step {
+ target: string;
+ title?: string;
+ content: React.ReactNode;
+ placement?: Placement;
+ hideBackButton?: boolean;
+ hideNextButton?: boolean;
+ continueButtonDisplay?: ContinueButtonDisplay;
+}
+
export interface OnboardingFlowProps {
steps: Step[];
stepIndex: number;
isRunning: boolean;
onClose: () => void;
+ updateOnboardingStep: (stepIndex: number) => 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 {
+ if (!this.props.isRunning) {
+ return null;
+ }
+ return (
+ <Overlay>
+ <Popper referenceElement={this._getElementForStep()} placement={this._getCurrentStep().placement}>
+ {this._renderPopperChildren.bind(this)}
+ </Popper>
+ </Overlay>
+ );
+ }
+
+ private _getElementForStep(): Element {
+ return document.querySelector(this._getCurrentStep().target);
+ }
+
+ private _renderPopperChildren(props: PopperChildrenProps): 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)}
- />
+ <div ref={props.ref} style={props.style} data-placement={props.placement}>
+ {this._renderToolTip()}
+ </div>
);
}
- private _handleChange(data: CallbackData): void {
- switch (data.action) {
- case 'close':
- this.props.onClose();
+ private _renderToolTip(): React.ReactNode {
+ const { steps, stepIndex } = this.props;
+ const step = steps[stepIndex];
+ const isLastStep = steps.length - 1 === stepIndex;
+ return (
+ <Container marginLeft="15px">
+ <OnboardingTooltip
+ title={step.title}
+ content={step.content}
+ isLastStep={isLastStep}
+ hideBackButton={step.hideBackButton}
+ hideNextButton={step.hideNextButton}
+ onClose={this.props.onClose}
+ onClickNext={this._goToNextStep.bind(this)}
+ onClickBack={this._goToPrevStep.bind(this)}
+ continueButtonDisplay={step.continueButtonDisplay}
+ />
+ </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) {
+ this.props.updateOnboardingStep(nextStep);
+ } else {
+ this.props.onClose();
+ }
+ }
+
+ private _goToPrevStep(): void {
+ const nextStep = this.props.stepIndex - 1;
+ if (nextStep >= 0) {
+ this.props.updateOnboardingStep(nextStep);
+ } else {
+ this.props.onClose();
}
}
}
diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
new file mode 100644
index 000000000..eb34a87f2
--- /dev/null
+++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+import { colors } from '@0xproject/react-shared';
+import { Container } from 'ts/components/ui/container';
+import { Island } from 'ts/components/ui/island';
+
+export type ContinueButtonDisplay = 'enabled' | 'disabled';
+
+export interface OnboardingTooltipProps {
+ title?: string;
+ content: React.ReactNode;
+ isLastStep: boolean;
+ onClose: () => void;
+ onClickNext: () => void;
+ onClickBack: () => void;
+ continueButtonDisplay?: ContinueButtonDisplay;
+ hideBackButton?: boolean;
+ hideNextButton?: boolean;
+}
+
+// TODO: Make this more general button.
+export interface ContinueButtonProps {
+ display: ContinueButtonDisplay;
+ children?: string;
+ onClick: () => void;
+}
+
+export const ContinueButton: React.StatelessComponent<ContinueButtonProps> = (props: ContinueButtonProps) => {
+ const isDisabled = props.display === 'disabled';
+ return (
+ <button disabled={isDisabled} onClick={isDisabled ? undefined : props.onClick}>
+ {props.children}
+ </button>
+ );
+};
+
+export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => (
+ <Island>
+ <Container paddingRight="30px" paddingLeft="30px" maxWidth={350} paddingTop="15px" paddingBottom="15px">
+ <div className="flex flex-column">
+ {props.title}
+ {props.content}
+ {props.continueButtonDisplay && (
+ <ContinueButton onClick={props.onClickNext} display={props.continueButtonDisplay}>
+ Continue
+ </ContinueButton>
+ )}
+ {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>}
+ {!props.hideNextButton && <button onClick={props.onClickNext}>Skip</button>}
+ <button onClick={props.onClose}>Close</button>
+ </div>
+ </Container>
+ </Island>
+);
+
+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 11684aaee..edaeb3736 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -1,32 +1,123 @@
+import * as _ from 'lodash';
import * as React from 'react';
-import { Step } from 'react-joyride';
-import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
+import { BigNumber } from '@0xproject/utils';
+import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
+import { ProviderType, TokenByAddress } from 'ts/types';
+import { utils } from 'ts/utils/utils';
export interface PortalOnboardingFlowProps {
stepIndex: number;
isRunning: boolean;
- onClose: () => void;
+ userAddress: string;
+ hasBeenSeen: boolean;
+ providerType: ProviderType;
+ injectedProviderName: string;
+ blockchainIsLoaded: boolean;
+ userEthBalanceInWei: BigNumber;
+ tokenByAddress: TokenByAddress;
+ updateIsRunning: (isRunning: boolean) => void;
+ updateOnboardingStep: (stepIndex: number) => void;
}
-const steps: Step[] = [
- {
- target: '.wallet',
- content: 'You are onboarding right now!',
- placement: 'right',
- disableBeacon: true,
- },
-];
-
export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
+ public componentDidMount(): void {
+ this._overrideOnboardingStateIfShould();
+ }
+ public componentDidUpdate(): void {
+ this._overrideOnboardingStateIfShould();
+ }
public render(): React.ReactNode {
return (
<OnboardingFlow
- steps={steps}
+ steps={this._getSteps()}
stepIndex={this.props.stepIndex}
isRunning={this.props.isRunning}
- onClose={this.props.onClose}
+ onClose={this.props.updateIsRunning.bind(this, false)}
+ updateOnboardingStep={this.props.updateOnboardingStep}
/>
);
}
+
+ private _getSteps(): Step[] {
+ const steps: Step[] = [
+ {
+ target: '.wallet',
+ content:
+ 'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
+ placement: 'right',
+ hideBackButton: true,
+ hideNextButton: true,
+ },
+ {
+ target: '.wallet',
+ content: 'Unlock your metamask extension to begin',
+ placement: 'right',
+ hideBackButton: true,
+ hideNextButton: true,
+ },
+ {
+ target: '.wallet',
+ content:
+ 'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
+ placement: 'right',
+ hideBackButton: true,
+ continueButtonDisplay: 'enabled',
+ },
+ {
+ target: '.eth-row',
+ content: 'Before you begin you will need to send some ETH to your metamask wallet',
+ placement: 'right',
+ continueButtonDisplay: this._userHasEth() ? 'enabled' : 'disabled',
+ },
+ {
+ target: '.weth-row',
+ content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)',
+ placement: 'right',
+ continueButtonDisplay: this._userHasWeth() ? 'enabled' : 'disabled',
+ },
+ ];
+ return steps;
+ }
+
+ private _isAddressAvailable(): boolean {
+ return !_.isEmpty(this.props.userAddress);
+ }
+
+ private _userHasEth(): boolean {
+ return this.props.userEthBalanceInWei > new BigNumber(0);
+ }
+
+ private _userHasWeth(): boolean {
+ // TODO: https://app.asana.com/0/681385331277907/690722374136933
+ return false;
+ }
+
+ private _overrideOnboardingStateIfShould(): void {
+ this._autoStartOnboardingIfShould();
+ this._adjustStepIfShould();
+ }
+
+ private _adjustStepIfShould(): void {
+ if (this._isAddressAvailable()) {
+ if (this.props.stepIndex < 2) {
+ this.props.updateOnboardingStep(2);
+ }
+ return;
+ }
+ const isExternallyInjected = utils.isExternallyInjected(
+ this.props.providerType,
+ this.props.injectedProviderName,
+ );
+ if (isExternallyInjected) {
+ this.props.updateOnboardingStep(1);
+ return;
+ }
+ this.props.updateOnboardingStep(0);
+ }
+ private _autoStartOnboardingIfShould(): void {
+ if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
+ this.props.updateIsRunning(true);
+ }
+ }
}
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index fc516882a..679ec07dc 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -11,6 +11,7 @@ import { Dispatcher } from 'ts/redux/dispatcher';
import { ProviderType } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
+import { zIndex } from 'ts/utils/style';
import { utils } from 'ts/utils/utils';
const ROOT_HEIGHT = 24;
@@ -39,8 +40,10 @@ const styles: Styles = {
export class ProviderDisplay extends React.Component<ProviderDisplayProps, ProviderDisplayState> {
public render(): React.ReactNode {
const isAddressAvailable = !_.isEmpty(this.props.userAddress);
- const isExternallyInjectedProvider =
- this.props.providerType === ProviderType.Injected && this.props.injectedProviderName !== '0x Public';
+ const isExternallyInjectedProvider = utils.isExternallyInjected(
+ this.props.providerType,
+ this.props.injectedProviderName,
+ );
const displayAddress = isAddressAvailable
? utils.getAddressBeginAndEnd(this.props.userAddress)
: isExternallyInjectedProvider
@@ -69,15 +72,13 @@ export class ProviderDisplay extends React.Component<ProviderDisplayProps, Provi
)}
</div>
);
- const hasInjectedProvider =
- this.props.injectedProviderName !== '0x Public' && this.props.providerType === ProviderType.Injected;
const hasLedgerProvider = this.props.providerType === ProviderType.Ledger;
- const horizontalPosition = hasInjectedProvider || hasLedgerProvider ? 'left' : 'middle';
+ const horizontalPosition = isExternallyInjectedProvider || hasLedgerProvider ? 'left' : 'middle';
return (
<div style={{ width: 'fit-content', height: 48, float: 'right' }}>
<DropDown
hoverActiveNode={hoverActiveNode}
- popoverContent={this.renderPopoverContent(hasInjectedProvider, hasLedgerProvider)}
+ popoverContent={this.renderPopoverContent(isExternallyInjectedProvider, hasLedgerProvider)}
anchorOrigin={{ horizontal: horizontalPosition, vertical: 'bottom' }}
targetOrigin={{ horizontal: horizontalPosition, vertical: 'top' }}
zDepth={1}
diff --git a/packages/website/ts/components/ui/container.tsx b/packages/website/ts/components/ui/container.tsx
index 07868608c..d577447b0 100644
--- a/packages/website/ts/components/ui/container.tsx
+++ b/packages/website/ts/components/ui/container.tsx
@@ -1,10 +1,17 @@
import * as React from 'react';
+type StringOrNum = string | number;
+
export interface ContainerProps {
- marginTop?: string | number;
- marginBottom?: string | number;
- marginRight?: string | number;
- marginLeft?: string | number;
+ marginTop?: StringOrNum;
+ marginBottom?: StringOrNum;
+ marginRight?: StringOrNum;
+ marginLeft?: StringOrNum;
+ paddingTop?: StringOrNum;
+ paddingBottom?: StringOrNum;
+ paddingRight?: StringOrNum;
+ paddingLeft?: StringOrNum;
+ maxWidth?: StringOrNum;
children?: React.ReactNode;
}
diff --git a/packages/website/ts/components/ui/overlay.tsx b/packages/website/ts/components/ui/overlay.tsx
new file mode 100644
index 000000000..bb2ed8e59
--- /dev/null
+++ b/packages/website/ts/components/ui/overlay.tsx
@@ -0,0 +1,34 @@
+import { colors } from '@0xproject/react-shared';
+import * as _ from 'lodash';
+import * as React from 'react';
+
+import { zIndex } from 'ts/utils/style';
+
+export interface OverlayProps {
+ children?: React.ReactNode;
+ style?: React.CSSProperties;
+ onClick?: () => void;
+}
+
+const style: React.CSSProperties = {
+ position: 'fixed',
+ top: 0,
+ right: 0,
+ bottom: 0,
+ left: 0,
+ zIndex: zIndex.overlay,
+ backgroundColor: 'rgba(0, 0, 0, 0.6)',
+};
+
+export const Overlay: React.StatelessComponent = (props: OverlayProps) => (
+ <div style={{ ...style, ...props.style }} onClick={props.onClick}>
+ {props.children}
+ </div>
+);
+
+Overlay.defaultProps = {
+ style: {},
+ onClick: _.noop,
+};
+
+Overlay.displayName = 'Overlay';
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 10ee31619..30d1285f4 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -46,6 +46,7 @@ import {
import { backendClient } from 'ts/utils/backend_client';
import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
+import { zIndex } from 'ts/utils/style';
import { utils } from 'ts/utils/utils';
import { styles as walletItemStyles } from 'ts/utils/wallet_item_styles';
@@ -88,6 +89,8 @@ interface AccessoryItemConfig {
const styles: Styles = {
root: {
width: '100%',
+ zIndex: zIndex.aboveOverlay,
+ position: 'relative',
},
headerItemInnerDiv: {
paddingLeft: 65,
@@ -129,9 +132,6 @@ const styles: Styles = {
};
const ETHER_ICON_PATH = '/images/ether.png';
-const ETHER_TOKEN_SYMBOL = 'WETH';
-const ZRX_TOKEN_SYMBOL = 'ZRX';
-const ETHER_SYMBOL = 'ETH';
const ICON_DIMENSION = 24;
const TOKEN_AMOUNT_DISPLAY_PRECISION = 3;
const BODY_ITEM_KEY = 'BODY';
@@ -322,7 +322,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const primaryText = this._renderAmount(
this.props.userEtherBalanceInWei,
constants.DECIMAL_PLACES_ETH,
- ETHER_SYMBOL,
+ constants.ETHER_SYMBOL,
);
const etherToken = this._getEthToken();
const etherPrice = this.state.trackedTokenStateByAddress[etherToken.address].price;
@@ -341,13 +341,13 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
? { ...walletItemStyles.focusedItem, ...styles.paddedItem }
: { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const key = ETHER_ITEM_KEY;
- return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig);
+ return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig, 'eth-row');
}
private _renderTokenRows(): React.ReactNode {
const trackedTokens = this.props.trackedTokens;
const trackedTokensStartingWithEtherToken = trackedTokens.sort(
- firstBy((t: Token) => t.symbol !== ETHER_TOKEN_SYMBOL)
- .thenBy((t: Token) => t.symbol !== ZRX_TOKEN_SYMBOL)
+ firstBy((t: Token) => t.symbol !== constants.ETHER_TOKEN_SYMBOL)
+ .thenBy((t: Token) => t.symbol !== constants.ZRX_TOKEN_SYMBOL)
.thenBy('address'),
);
return _.map(trackedTokensStartingWithEtherToken, this._renderTokenRow.bind(this));
@@ -362,7 +362,8 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
const icon = <TokenIcon token={token} diameter={ICON_DIMENSION} link={tokenLink} />;
const primaryText = this._renderAmount(tokenState.balance, token.decimals, token.symbol);
const secondaryText = this._renderValue(tokenState.balance, token.decimals, tokenState.price);
- const wrappedEtherDirection = token.symbol === ETHER_TOKEN_SYMBOL ? Side.Receive : undefined;
+ const isWeth = token.symbol === constants.ETHER_TOKEN_SYMBOL;
+ const wrappedEtherDirection = isWeth ? Side.Receive : undefined;
const accessoryItemConfig: AccessoryItemConfig = {
wrappedEtherDirection,
allowanceToggleConfig: {
@@ -371,7 +372,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
},
};
const key = token.address;
- return this._renderBalanceRow(key, icon, primaryText, secondaryText, accessoryItemConfig);
+ return this._renderBalanceRow(
+ key,
+ icon,
+ primaryText,
+ secondaryText,
+ accessoryItemConfig,
+ isWeth ? 'weth-row' : undefined,
+ );
}
private _renderBalanceRow(
key: string,
@@ -379,6 +387,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
primaryText: React.ReactNode,
secondaryText: React.ReactNode,
accessoryItemConfig: AccessoryItemConfig,
+ className?: string,
): React.ReactNode {
const shouldShowWrapEtherItem =
!_.isUndefined(this.state.wrappedEtherDirection) &&
@@ -388,7 +397,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
: { ...styles.tokenItem, ...styles.borderedItem, ...styles.paddedItem };
const etherToken = this._getEthToken();
return (
- <div key={key} className="flex flex-column">
+ <div key={key} className={`flex flex-column ${className || ''}`}>
<div className="flex items-center" style={style}>
<div className="px2">{icon}</div>
<div className="flex-none pr2 pt2 pb2">
@@ -578,8 +587,6 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
});
}
private _getEthToken(): Token {
- const tokens = _.values(this.props.tokenByAddress);
- const etherToken = _.find(tokens, { symbol: ETHER_TOKEN_SYMBOL });
- return etherToken;
+ return utils.getEthToken(this.props.tokenByAddress);
}
} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
index d334f1748..39a62e1fb 100644
--- a/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
+++ b/packages/website/ts/components/wallet/wallet_disconnected_item.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
import { ProviderType } from 'ts/types';
import { colors } from 'ts/utils/colors';
import { constants } from 'ts/utils/constants';
+import { utils } from 'ts/utils/utils';
export interface WalletDisconnectedItemProps {
providerType: ProviderType;
@@ -38,8 +39,7 @@ const BUTTON_BOTTOM_PADDING = 80;
export const WalletDisconnectedItem: React.StatelessComponent<WalletDisconnectedItemProps> = (
props: WalletDisconnectedItemProps,
) => {
- const isExternallyInjectedProvider =
- props.providerType === ProviderType.Injected && props.injectedProviderName !== '0x Public';
+ const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName);
return (
<div className="flex flex-center">
<div className="mx-auto">