diff options
5 files changed, 18 insertions, 17 deletions
diff --git a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx index a54496186..a95c464af 100644 --- a/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx +++ b/packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx @@ -8,11 +8,12 @@ export interface InstallWalletOnboardingStepProps {} export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWalletOnboardingStepProps> = () => ( <div className="flex items-center flex-column"> - <Container marginTop="15px" marginBottom="15px"> - <ActionAccountBalanceWallet style={{ width: '30px', height: '30px' }} color={colors.orange} /> - </Container> <Text> Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps. </Text> + <Container marginTop="15px" marginBottom="15px"> + <ActionAccountBalanceWallet style={{ width: '50px', height: '50px' }} color={colors.orange} /> + </Container> + <Text>Please refresh the page once you've done this to continue!</Text> </div> ); diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 5db3a4919..3e9b0bd2c 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -28,7 +28,7 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> { stepIndex: number; isRunning: boolean; userAddress: string; - hasBeenSeen: boolean; + hasBeenClosed: boolean; providerType: ProviderType; injectedProviderName: string; blockchainIsLoaded: boolean; @@ -44,7 +44,8 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> { class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> { private _unlisten: () => void; public componentDidMount(): void { - this._overrideOnboardingStateIfShould(); + this._autoStartOnboardingIfShould(); + this._adjustStepIfShould(); // If there is a route change, just close onboarding. this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false)); } @@ -52,7 +53,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp this._unlisten(); } public componentDidUpdate(): void { - this._overrideOnboardingStateIfShould(); + this._adjustStepIfShould(); } public render(): React.ReactNode { return ( @@ -189,10 +190,6 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp } return false; } - private _overrideOnboardingStateIfShould(): void { - this._autoStartOnboardingIfShould(); - this._adjustStepIfShould(); - } private _adjustStepIfShould(): void { const stepIndex = this.props.stepIndex; if (this._isAddressAvailable()) { @@ -216,7 +213,10 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp } } private _autoStartOnboardingIfShould(): void { - if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) { + if ( + (this.props.stepIndex === 0 && !this.props.isRunning) || + (!this.props.isRunning && !this.props.hasBeenClosed && this.props.blockchainIsLoaded) + ) { const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId]; analytics.logEvent('Portal', 'Onboarding Started - Automatic', networkName, this.props.stepIndex); this.props.updateIsRunning(true); diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts index 12daad021..a813205b1 100644 --- a/packages/website/ts/containers/portal_onboarding_flow.ts +++ b/packages/website/ts/containers/portal_onboarding_flow.ts @@ -19,7 +19,7 @@ interface ConnectedState { stepIndex: number; isRunning: boolean; userAddress: string; - hasBeenSeen: boolean; + hasBeenClosed: boolean; providerType: ProviderType; injectedProviderName: string; blockchainIsLoaded: boolean; @@ -43,7 +43,7 @@ const mapStateToProps = (state: State, _ownProps: PortalOnboardingFlowProps): Co blockchainIsLoaded: state.blockchainIsLoaded, userEtherBalanceInWei: state.userEtherBalanceInWei, tokenByAddress: state.tokenByAddress, - hasBeenSeen: state.hasPortalOnboardingBeenSeen, + hasBeenClosed: state.hasPortalOnboardingBeenClosed, screenWidth: state.screenWidth, }); diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts index de95296b0..caddabcf0 100644 --- a/packages/website/ts/redux/reducer.ts +++ b/packages/website/ts/redux/reducer.ts @@ -42,7 +42,7 @@ export interface State { userEtherBalanceInWei?: BigNumber; portalOnboardingStep: number; isPortalOnboardingShowing: boolean; - hasPortalOnboardingBeenSeen: boolean; + hasPortalOnboardingBeenClosed: boolean; // Note: cache of supplied orderJSON in fill order step. Do not use for anything else. userSuppliedOrderCache: Order; @@ -85,7 +85,7 @@ export const INITIAL_STATE: State = { userSuppliedOrderCache: undefined, portalOnboardingStep: 0, isPortalOnboardingShowing: false, - hasPortalOnboardingBeenSeen: false, + hasPortalOnboardingBeenClosed: false, // Docs docsVersion: DEFAULT_DOCS_VERSION, availableDocVersions: [DEFAULT_DOCS_VERSION], @@ -311,7 +311,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State { return { ...state, isPortalOnboardingShowing, - hasPortalOnboardingBeenSeen: true, + hasPortalOnboardingBeenClosed: !isPortalOnboardingShowing ? true : state.hasPortalOnboardingBeenClosed, // always start onboarding from the beginning portalOnboardingStep: 0, }; diff --git a/packages/website/ts/redux/store.ts b/packages/website/ts/redux/store.ts index 203f068a1..0d0e6cea1 100644 --- a/packages/website/ts/redux/store.ts +++ b/packages/website/ts/redux/store.ts @@ -15,7 +15,7 @@ store.subscribe( _.throttle(() => { // Persisted state stateStorage.saveState({ - hasPortalOnboardingBeenSeen: store.getState().hasPortalOnboardingBeenSeen, + hasPortalOnboardingBeenClosed: store.getState().hasPortalOnboardingBeenClosed, }); }, ONE_SECOND), ); |