1  import React from 'react';
 2  import { connect } from 'react-redux';
 3  
 4  import translate from 'translations';
 5  import { IWallet } from 'libs/wallet/IWallet';
 6  import { AppState } from 'features/reducers';
 7  import closeIcon from 'assets/images/close.svg';
 8  import WalletDecrypt, { DisabledWallets } from 'components/WalletDecrypt';
 9  import './UnlockHeader.scss';
10  
11  interface Props {
12    title?: string;
13    wallet: IWallet;
14    disabledWallets?: DisabledWallets;
15    showGenerateLink?: boolean;
16  }
17  
18  interface State {
19    isExpanded: boolean;
20  }
21  
22  export class UnlockHeader extends React.PureComponent<Props, State> {
23    public state = {
24      isExpanded: !this.props.wallet
25    };
26  
27    public componentDidUpdate(prevProps: Props) {
28      if (this.props.wallet !== prevProps.wallet) {
29        this.setState({ isExpanded: !this.props.wallet });
30      }
31    }
32  
33    public render() {
34      const { title, wallet, disabledWallets, showGenerateLink } = this.props;
35      const { isExpanded } = this.state;
36  
37      return (
38        <article className="UnlockHeader">
39          {title && <h1 className="UnlockHeader-title">{title}</h1>}
40          {wallet &&
41            !isExpanded && (
42              <button
43                className="UnlockHeader-open btn btn-default btn-smr"
44                onClick={this.toggleisExpanded}
45              >
46                <span>
47                  <span className="hidden-xs UnlockHeader-open-text">
48                    {translate('CHANGE_WALLET')}
49                  </span>
50                  <i className="fa fa-refresh" />
51                </span>
52              </button>
53            )}
54          {wallet &&
55            isExpanded && (
56              <button className="UnlockHeader-close" onClick={this.toggleisExpanded}>
57                <img src={closeIcon} alt="close" />
58              </button>
59            )}
60          <WalletDecrypt
61            hidden={!this.state.isExpanded}
62            disabledWallets={disabledWallets}
63            showGenerateLink={showGenerateLink}
64          />
65        </article>
66      );
67    }
68  
69    public toggleisExpanded = (_: React.FormEvent<HTMLButtonElement>) => {
70      this.setState(state => {
71        return { isExpanded: !state.isExpanded };
72      });
73    };
74  }
75  
76  function mapStateToProps(state: AppState) {
77    return {
78      wallet: state.wallet.inst
79    };
80  }
81  
82  export default connect(mapStateToProps)(UnlockHeader);