1  import React from 'react';
 2  
 3  import translate from 'translations';
 4  import { stripHexPrefix } from 'libs/formatters';
 5  import { PaperWallet } from 'components';
 6  
 7  interface Props {
 8    address: string;
 9    privateKey: string;
10  }
11  
12  interface State {
13    paperWalletImage: string;
14  }
15  
16  export default class PrintableWallet extends React.Component<Props, State> {
17    public state: State = {
18      paperWalletImage: ''
19    };
20  
21    private paperWallet: PaperWallet | null;
22  
23    public componentDidMount() {
24      setTimeout(() => {
25        if (!this.paperWallet) {
26          return this.componentDidMount();
27        }
28  
29        this.paperWallet.toPNG().then(png => this.setState({ paperWalletImage: png }));
30      }, 500);
31    }
32  
33    public render() {
34      const { address, privateKey } = this.props;
35      const { paperWalletImage } = this.state;
36      const pkey = stripHexPrefix(privateKey);
37      const disabled = paperWalletImage ? '' : 'disabled';
38  
39      return (
40        <div>
41          <PaperWallet address={address} privateKey={pkey} ref={c => (this.paperWallet = c)} />
42          <a
43            role="button"
44            href={paperWalletImage}
45            className={`btn btn-lg btn-primary btn-block ${disabled}`}
46            style={{ margin: '10px auto 0', maxWidth: '260px' }}
47            download={`paper-wallet-0x${address.substr(0, 6)}`}
48          >
49            {translate('X_SAVE_PAPER')}
50          </a>
51        </div>
52      );
53    }
54  }