1  import React from 'react';
 2  import { withRouter, RouteComponentProps } from 'react-router-dom';
 3  import { connect } from 'react-redux';
 4  
 5  import translate, { translateRaw } from 'translations';
 6  import { AppState } from 'features/reducers';
 7  import { TWeb3UnsetNode, web3UnsetNode } from 'features/config';
 8  import { walletActions } from 'features/wallet';
 9  import Modal, { IButton } from 'components/ui/Modal';
10  
11  interface DispatchProps {
12    web3UnsetNode: TWeb3UnsetNode;
13    resetWallet: walletActions.TResetWallet;
14  }
15  
16  interface StateProps {
17    wallet: AppState['wallet']['inst'];
18  }
19  
20  type Props = DispatchProps & StateProps & RouteComponentProps<{}>;
21  
22  interface State {
23    nextLocation: RouteComponentProps<{}>['location'] | null;
24    openModal: boolean;
25  }
26  
27  class LogOutPromptClass extends React.Component<Props, State> {
28    constructor(props: Props) {
29      super(props);
30      this.state = {
31        nextLocation: null,
32        openModal: false
33      };
34  
35      this.props.history.block(nextLocation => {
36        if (this.props.wallet && nextLocation.pathname !== this.props.location.pathname) {
37          const isSubTab =
38            nextLocation.pathname.split('/')[1] === this.props.location.pathname.split('/')[1];
39          if (!isSubTab) {
40            this.setState({
41              openModal: true,
42              nextLocation
43            });
44            return false;
45          }
46        }
47      });
48    }
49  
50    public render() {
51      const buttons: IButton[] = [
52        { text: translate('ACTION_7'), type: 'primary', onClick: this.onConfirm },
53        { text: translate('ACTION_2'), type: 'default', onClick: this.onCancel }
54      ];
55      return (
56        <Modal
57          title={translateRaw('WALLET_LOGOUT_MODAL_TITLE')}
58          isOpen={this.state.openModal}
59          handleClose={this.onCancel}
60          buttons={buttons}
61        >
62          <p>{translate('WALLET_LOGOUT_MODAL_DESC')}</p>
63        </Modal>
64      );
65    }
66  
67    private onCancel = () => {
68      this.setState({ nextLocation: null, openModal: false });
69    };
70  
71    private onConfirm = () => {
72      const { nextLocation: next } = this.state;
73      this.props.resetWallet();
74      this.setState(
75        {
76          openModal: false,
77          nextLocation: null
78        },
79        () => {
80          if (next) {
81            this.props.history.push(`${next.pathname}${next.search}${next.hash}`);
82            this.props.web3UnsetNode();
83          }
84        }
85      );
86    };
87  }
88  
89  function mapStateToProps(state: AppState) {
90    return { wallet: state.wallet.inst };
91  }
92  
93  export default connect(mapStateToProps, {
94    resetWallet: walletActions.resetWallet,
95    web3UnsetNode
96  })(withRouter<Props>(LogOutPromptClass));