From b49148ec54886b11042e42eed9ad4e8793840775 Mon Sep 17 00:00:00 2001 From: fragosti Date: Thu, 24 May 2018 10:11:56 -0700 Subject: Implement metamask installation flow --- .../ts/components/onboarding/onboarding_flow.tsx | 7 +++ .../onboarding/portal_onboarding_flow.tsx | 60 ++++++++++++++++++---- .../ts/components/top_bar/provider_display.tsx | 9 ++-- .../components/wallet/wallet_disconnected_item.tsx | 4 +- .../ts/containers/portal_onboarding_flow.ts | 10 +++- packages/website/ts/utils/utils.ts | 4 ++ 6 files changed, 75 insertions(+), 19 deletions(-) (limited to 'packages/website') 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 { + private _joyrideRef: React.RefObject; + constructor(props: OnboardingFlowProps) { + super(props); + this._joyrideRef = React.createRef(); + } + public render(): React.ReactNode { return ( 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 { public render(): React.ReactNode { return ( ); } + + 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 { 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 ); - 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 (
= ( props: WalletDisconnectedItemProps, ) => { - const isExternallyInjectedProvider = - props.providerType === ProviderType.Injected && props.injectedProviderName !== '0x Public'; + const isExternallyInjectedProvider = utils.isExternallyInjected(props.providerType, props.injectedProviderName); return (
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): 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(); -- cgit v1.2.3