aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-06-30 02:47:12 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-06-30 02:47:12 +0800
commitfc40efb761514b9e22e77f61d161d267b5f4c3c0 (patch)
tree72c791a334dcc8638d82eec681f99b7dc4a0b27a /packages/website
parent36cadaae46eb17261c6dd0ee82cd8cefb3806082 (diff)
downloaddexon-0x-contracts-fc40efb761514b9e22e77f61d161d267b5f4c3c0.tar.gz
dexon-0x-contracts-fc40efb761514b9e22e77f61d161d267b5f4c3c0.tar.zst
dexon-0x-contracts-fc40efb761514b9e22e77f61d161d267b5f4c3c0.zip
Allow you to continue the onboarding flow once youve installed metamask and refreshed the page
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/onboarding/install_wallet_onboarding_step.tsx7
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx16
-rw-r--r--packages/website/ts/containers/portal_onboarding_flow.ts4
-rw-r--r--packages/website/ts/redux/reducer.ts6
-rw-r--r--packages/website/ts/redux/store.ts2
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),
);