Fix onboarding closing on unlock metamask step on click outside

2 files changed, 8 insertions, 2 deletions

diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index c2b4a4ca7..46dc897bd 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -44,12 +44,14 @@ export interface OnboardingFlowProps {
     updateOnboardingStep: (stepIndex: number) => void;
     disableOverlay?: boolean;
     isMobile: boolean;
+    disableCloseOnClickOutside?: boolean;
 }
 
 export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
     public static defaultProps = {
         disableOverlay: false,
         isMobile: false,
+        disableCloseOnClickOutside: false,
     };
     public render(): React.ReactNode {
         if (!this.props.isRunning) {
@@ -86,7 +88,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         }
         return (
             <div>
-                <Overlay onClick={this.props.onClose} />
+                <Overlay onClick={this.props.disableCloseOnClickOutside ? undefined : this.props.onClose} />
                 {onboardingElement}
             </div>
         );
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 1c2c92fd1..fcfed82fa 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -23,7 +23,7 @@ import {
     WrapEthOnboardingStep3,
 } from 'ts/components/onboarding/wrap_eth_onboarding_step';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
-import { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { BrowserType, ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { analytics } from 'ts/utils/analytics';
 import { utils } from 'ts/utils/utils';
 
@@ -77,6 +77,10 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
                 updateOnboardingStep={this._updateOnboardingStep.bind(this)}
                 disableOverlay={this.props.screenWidth === ScreenWidths.Sm}
                 isMobile={this.props.screenWidth === ScreenWidths.Sm}
+                // This is necessary to ensure onboarding stays open once the user unlocks metamask and clicks away
+                disableCloseOnClickOutside={
+                    utils.getBrowserType() === BrowserType.Firefox && this.props.stepIndex === 1
+                }
             />
         );
     }