diff options
Diffstat (limited to 'packages/website/ts')
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(); |