Fix Logout Prompt (#725)

common/Root.tsx

@@ -12,6 +12,8 @@ import SignAndVerifyMessage from 'containers/Tabs/SignAndVerifyMessage';
 import BroadcastTx from 'containers/Tabs/BroadcastTx';
 import ErrorScreen from 'components/ErrorScreen';
 import PageNotFound from 'components/PageNotFound';
+import LogOutPrompt from 'components/LogOutPrompt';
+import { Aux } from 'components/ui';
 import { Store } from 'redux';
 import { AppState } from 'reducers';
 
@@ -60,16 +62,20 @@ export default class Root extends Component<Props, State> {
         <Route path="/sign-and-verify-message" component={SignAndVerifyMessage} />
         <Route path="/pushTx" component={BroadcastTx} />
         <Route component={PageNotFound} />
-        <LegacyRoutes />
       </Switch>
     );
+
+    const Router = process.env.BUILD_DOWNLOADABLE ? HashRouter : BrowserRouter;
+
     return (
       <Provider store={store} key={Math.random()}>
-        {process.env.BUILD_DOWNLOADABLE ? (
-          <HashRouter key={Math.random()}>{routes}</HashRouter>
-        ) : (
-          <BrowserRouter key={Math.random()}>{routes}</BrowserRouter>
-        )}
+        <Router key={Math.random()}>
+          <Aux>
+            {routes}
+            <LegacyRoutes />
+            <LogOutPrompt />
+          </Aux>
+        </Router>
       </Provider>
     );
   }

common/components/LogOutPrompt.tsx

@@ -1,11 +1,15 @@
 import React from 'react';
+import { connect } from 'react-redux';
 import { withRouter, RouteComponentProps } from 'react-router-dom';
 import Modal, { IButton } from 'components/ui/Modal';
+import { AppState } from 'reducers';
+import { resetWallet, TResetWallet } from 'actions/wallet';
 
 interface Props extends RouteComponentProps<{}> {
-  when: boolean;
-  onConfirm?: any;
-  onCancel?: any;
+  // State
+  wallet: AppState['wallet']['inst'];
+  // Actions
+  resetWallet: TResetWallet;
 }
 
 interface State {
@@ -13,20 +17,16 @@ interface State {
   openModal: boolean;
 }
 
-class NavigationPromptClass extends React.Component<Props, State> {
-  public unblock;
-
+class LogOutPromptClass extends React.Component<Props, State> {
   constructor(props) {
     super(props);
     this.state = {
       nextLocation: null,
       openModal: false
     };
-  }
 
-  public setupUnblock() {
-    this.unblock = this.props.history.block(nextLocation => {
-      if (this.props.when && nextLocation.pathname !== this.props.location.pathname) {
+    this.props.history.block(nextLocation => {
+      if (this.props.wallet && nextLocation.pathname !== this.props.location.pathname) {
         const isSubTab =
           nextLocation.pathname.split('/')[1] === this.props.location.pathname.split('/')[1];
         if (!isSubTab) {
@@ -40,36 +40,6 @@ class NavigationPromptClass extends React.Component<Props, State> {
     });
   }
 
-  public componentDidMount() {
-    this.setupUnblock();
-  }
-
-  public componentWillUnmount() {
-    this.unblock();
-  }
-
-  public onCancel = () => {
-    if (this.props.onCancel) {
-      this.props.onCancel();
-    }
-    this.setState({ nextLocation: null, openModal: false });
-  };
-
-  public onConfirm = () => {
-    if (this.props.onConfirm) {
-      this.props.onConfirm();
-    }
-    // Lock Wallet
-    this.navigateToNextLocation();
-  };
-
-  public navigateToNextLocation() {
-    this.unblock();
-    if (this.state.nextLocation) {
-      this.props.history.push(this.state.nextLocation.pathname);
-    }
-  }
-
   public render() {
     const buttons: IButton[] = [
       { text: 'Log Out', type: 'primary', onClick: this.onConfirm },
@@ -86,6 +56,32 @@ class NavigationPromptClass extends React.Component<Props, State> {
       </Modal>
     );
   }
+
+  private onCancel = () => {
+    this.setState({ nextLocation: null, openModal: false });
+  };
+
+  private onConfirm = () => {
+    const { nextLocation } = this.state;
+    this.props.resetWallet();
+    this.setState(
+      {
+        openModal: false,
+        nextLocation: null
+      },
+      () => {
+        if (nextLocation) {
+          this.props.history.push(nextLocation.pathname);
+        }
+      }
+    );
+  };
 }
 
-export const NavigationPrompt = withRouter<Props>(NavigationPromptClass);
+function mapStateToProps(state: AppState) {
+  return { wallet: state.wallet.inst };
+}
+
+export default connect(mapStateToProps, {
+  resetWallet
+})(withRouter<Props>(LogOutPromptClass));

common/components/WalletDecrypt/WalletDecrypt.tsx

@@ -28,7 +28,6 @@ import {
   TrezorDecrypt,
   ViewOnlyDecrypt,
   Web3Decrypt,
-  NavigationPrompt,
   WalletButton
 } from './components';
 import { AppState } from 'reducers';
@@ -307,13 +306,11 @@ export class WalletDecrypt extends Component<Props, State> {
   };
 
   public render() {
-    const { wallet, hidden } = this.props;
+    const { hidden } = this.props;
     const selectedWallet = this.getSelectedWallet();
     const decryptionComponent = this.getDecryptionComponent();
-    const unlocked = !!wallet;
     return (
       <div>
-        <NavigationPrompt when={unlocked} onConfirm={this.props.resetWallet} />
         {!hidden && (
           <article className="Tab-content-pane">
             <div className="WalletDecrypt">

common/components/WalletDecrypt/components/index.tsx

@@ -3,7 +3,6 @@ export * from './DigitalBitbox';
 export * from './Keystore';
 export * from './LedgerNano';
 export * from './Mnemonic';
-export * from './NavigationPrompt';
 export * from './PrivateKey';
 export * from './Trezor';
 export * from './ViewOnly';