aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-05-25 01:11:56 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-05-26 03:03:18 +0800
commitb49148ec54886b11042e42eed9ad4e8793840775 (patch)
treea5ee61ed5ac86de14a60fef9c00e9550b78b0474 /packages/website
parentc7f5e77b3fe7c1805202a5b1e1e1ce1e9d31a6b0 (diff)
downloaddexon-sol-tools-b49148ec54886b11042e42eed9ad4e8793840775.tar
dexon-sol-tools-b49148ec54886b11042e42eed9ad4e8793840775.tar.gz
dexon-sol-tools-b49148ec54886b11042e42eed9ad4e8793840775.tar.bz2
dexon-sol-tools-b49148ec54886b11042e42eed9ad4e8793840775.tar.lz
dexon-sol-tools-b49148ec54886b11042e42eed9ad4e8793840775.tar.xz
dexon-sol-tools-b49148ec54886b11042e42eed9ad4e8793840775.tar.zst
dexon-sol-tools-b49148ec54886b11042e42eed9ad4e8793840775.zip
Implement metamask installation flow
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx7
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx60
-rw-r--r--packages/website/ts/components/top_bar/provider_display.tsx9
-rw-r--r--packages/website/ts/components/wallet/wallet_disconnected_item.tsx4
-rw-r--r--packages/website/ts/containers/portal_onboarding_flow.ts10
-rw-r--r--packages/website/ts/utils/utils.ts4
6 files changed, 75 insertions, 19 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 621d14260..22fc71481 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -17,9 +17,16 @@ const joyrideStyleOptions: StyleOptions = {
// Wrapper around Joyride with defaults and styles set
export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
+ private _joyrideRef: React.RefObject<Joyride>;
+ constructor(props: OnboardingFlowProps) {
+ super(props);
+ this._joyrideRef = React.createRef();
+ }
+
public render(): React.ReactNode {
return (
<Joyride
+ ref={this._joyrideRef}
run={this.props.isRunning}
debug={true}
steps={this.props.steps}
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 11684aaee..7abfdabda 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -1,32 +1,72 @@
+import * as _ from 'lodash';
import * as React from 'react';
import { Step } from 'react-joyride';
import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
+import { ProviderType } from 'ts/types';
+import { utils } from 'ts/utils/utils';
export interface PortalOnboardingFlowProps {
stepIndex: number;
isRunning: boolean;
onClose: () => void;
+ userAddress: string;
+ providerType: ProviderType;
+ injectedProviderName: string;
+ blockchainIsLoaded: boolean;
+ setOnboardingStep: (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 render(): React.ReactNode {
return (
<OnboardingFlow
- steps={steps}
+ steps={this._getSteps()}
stepIndex={this.props.stepIndex}
isRunning={this.props.isRunning}
onClose={this.props.onClose}
/>
);
}
+
+ private _isAddressAvailable(): boolean {
+ return !_.isEmpty(this.props.userAddress);
+ }
+
+ private _getSteps(): Step[] {
+ const allSteps: 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',
+ disableBeacon: true,
+ },
+ {
+ target: '.wallet',
+ content: 'Unlock your metamask extension to begin',
+ placement: 'right',
+ disableBeacon: 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',
+ disableBeacon: true,
+ },
+ ];
+ const [noMetamaskStep, lockedMetamaskStep, ...restOfSteps] = allSteps;
+ if (this._isAddressAvailable()) {
+ return restOfSteps;
+ }
+ const isExternallyInjected = utils.isExternallyInjected(
+ this.props.providerType,
+ this.props.injectedProviderName,
+ );
+ if (isExternallyInjected) {
+ return [lockedMetamaskStep, ...restOfSteps];
+ }
+ return allSteps;
+ }
}
diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx
index fc516882a..4dc37f231 100644
--- a/packages/website/ts/components/top_bar/provider_display.tsx
+++ b/packages/website/ts/components/top_bar/provider_display.tsx
@@ -39,8 +39,7 @@ 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 +68,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/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">
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index 3cd4e8510..3ce91b7b3 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -1,7 +1,7 @@
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
-import { ActionTypes } from 'ts/types';
+import { ActionTypes, ProviderType } from 'ts/types';
import { PortalOnboardingFlow as PortalOnboardingFlowComponent } from 'ts/components/onboarding/portal_onboarding_flow';
import { State } from 'ts/redux/reducer';
@@ -11,6 +11,10 @@ interface PortalOnboardingFlowProps {}
interface ConnectedState {
stepIndex: number;
isRunning: boolean;
+ userAddress: string;
+ providerType: ProviderType;
+ injectedProviderName: string;
+ blockchainIsLoaded: boolean;
}
interface ConnectedDispatch {
@@ -20,6 +24,10 @@ interface ConnectedDispatch {
const mapStateToProps = (state: State): ConnectedState => ({
stepIndex: state.portalOnboardingStep,
isRunning: state.isPortalOnboardingShowing,
+ userAddress: state.userAddress,
+ providerType: state.providerType,
+ injectedProviderName: state.injectedProviderName,
+ blockchainIsLoaded: state.blockchainIsLoaded,
});
const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
diff --git a/packages/website/ts/utils/utils.ts b/packages/website/ts/utils/utils.ts
index e79a873e0..1d4f7eb5c 100644
--- a/packages/website/ts/utils/utils.ts
+++ b/packages/website/ts/utils/utils.ts
@@ -13,6 +13,7 @@ import {
Providers,
ScreenWidths,
Side,
+ ProviderType,
SideToAssetToken,
Token,
TokenByAddress,
@@ -313,6 +314,9 @@ export const utils = {
isStaging(): boolean {
return _.includes(window.location.href, configs.DOMAIN_STAGING);
},
+ isExternallyInjected(providerType: ProviderType, injectedProviderName: string): boolean {
+ return providerType === ProviderType.Injected && injectedProviderName !== constants.PROVIDER_NAME_PUBLIC;
+ },
isDogfood,
shouldShowPortalV2(): boolean {
return this.isDevelopment() || this.isStaging() || this.isDogfood();