1  import React from 'react';
 2  import html2canvas from 'html2canvas';
 3  import { addHexPrefix, toChecksumAddress } from 'ethereumjs-util';
 4  
 5  import notesBg from 'assets/images/notes-bg.png';
 6  import sidebarImg from 'assets/images/print-sidebar.png';
 7  import { Identicon, QRCode } from 'components/ui';
 8  import './index.scss';
 9  
10  interface Props {
11    address: string;
12    privateKey: string;
13  }
14  
15  export default class PaperWallet extends React.Component<Props, {}> {
16    private container: HTMLElement | null;
17  
18    public render() {
19      const { privateKey } = this.props;
20      const address = toChecksumAddress(addHexPrefix(this.props.address));
21  
22      return (
23        <div className="PaperWallet" ref={el => (this.container = el)}>
24          <img src={sidebarImg} className="PaperWallet-sidebar" alt="MyCrypto Logo" />
25  
26          <div className="PaperWallet-block">
27            <div className="PaperWallet-block-box">
28              <QRCode data={address} />
29            </div>
30            <p className="PaperWallet-block-text">YOUR ADDRESS</p>
31          </div>
32  
33          <div className="PaperWallet-block">
34            <img src={notesBg} className="PaperWallet-block-box is-shaded" aria-hidden={true} />
35            <p className="PaperWallet-block-text">AMOUNT / NOTES</p>
36          </div>
37  
38          <div className="PaperWallet-block">
39            <div className="PaperWallet-block-box">
40              <QRCode data={privateKey} />
41            </div>
42            <p className="PaperWallet-block-text">YOUR PRIVATE KEY</p>
43          </div>
44  
45          <div className="PaperWallet-info">
46            <p className="PaperWallet-info-text">
47              <strong className="PaperWallet-info-text-label">Your Address:</strong>
48              <br />
49              {address}
50            </p>
51            <p className="PaperWallet-info-text">
52              <strong className="PaperWallet-info-text-label">Your Private Key:</strong>
53              <br />
54              {privateKey}
55            </p>
56          </div>
57  
58          <div className="PaperWallet-identicon">
59            <div className="PaperWallet-identicon-left">
60              <Identicon address={address} size={'42px'} />
61            </div>
62            <p className="PaperWallet-identicon-text">
63              Always look for this icon when sending to this wallet
64            </p>
65          </div>
66        </div>
67      );
68    }
69  
70    public toPNG = async () => {
71      if (!this.container) {
72        return '';
73      }
74      const canvas = await html2canvas(this.container);
75      return canvas.toDataURL('image/png');
76    };
77  }