1  import React from 'react';
 2  import translate from 'translations';
 3  import { Modal, NewTabLink } from 'components/ui';
 4  import { isLegacyUser, isBetaUser } from 'utils/localStorage';
 5  import Logo from 'assets/images/logo-mycrypto-transparent.svg';
 6  import './WelcomeModal.scss';
 7  
 8  const LS_KEY = 'acknowledged-welcome';
 9  
10  interface State {
11    isOpen: boolean;
12  }
13  
14  export default class WelcomeModal extends React.PureComponent<{}, State> {
15    public state: State = {
16      isOpen: false
17    };
18  
19    public componentDidMount() {
20      if (isLegacyUser() && !localStorage.getItem(LS_KEY)) {
21        this.setState({ isOpen: true });
22      }
23    }
24  
25    public render() {
26      return (
27        <Modal isOpen={this.state.isOpen} handleClose={this.close} maxWidth={660}>
28          <div className="WelcomeModal">
29            <img className="WelcomeModal-logo" src={Logo} />
30            {isBetaUser() && (
31              <p className="WelcomeModal-beta alert alert-success">
32                💖 {translate('WELCOME_MODAL_BETA')} 🚀
33              </p>
34            )}
35            <p>{translate('WELCOME_MODAL_INTRO')}</p>
36            <ul>
37              <li>{translate('WELCOME_MODAL_FEATURE_1')}</li>
38              <li>{translate('WELCOME_MODAL_FEATURE_2')}</li>
39              <li>{translate('WELCOME_MODAL_FEATURE_3')}</li>
40              <li>{translate('WELCOME_MODAL_FEATURE_4')}</li>
41              <li>
42                <NewTabLink href="https://download.mycrypto.com/">
43                  {translate('WELCOME_MODAL_FEATURE_5')}
44                </NewTabLink>
45              </li>
46              <li>{translate('WELCOME_MODAL_FEATURE_MORE')}</li>
47            </ul>
48            <p>{translate('WELCOME_MODAL_LINKS')}</p>
49  
50            <button className="WelcomeModal-continue btn btn-lg btn-primary" onClick={this.close}>
51              {translate('WELCOME_MODAL_CONTINUE')}
52            </button>
53          </div>
54        </Modal>
55      );
56    }
57  
58    private close = () => {
59      this.setState({ isOpen: false });
60      localStorage.setItem(LS_KEY, 'true');
61    };
62  }