161 lines
3.6 KiB
JavaScript
161 lines
3.6 KiB
JavaScript
// @flow
|
|
import React from 'react';
|
|
import { QRCode, Identicon } from 'components/ui';
|
|
import type PrivKeyWallet from 'libs/wallet/privkey';
|
|
|
|
import ethLogo from 'assets/images/logo-ethereum-1.png';
|
|
import sidebarImg from 'assets/images/print-sidebar.png';
|
|
import notesBg from 'assets/images/notes-bg.png';
|
|
|
|
const walletWidth = 680;
|
|
const walletHeight = 280;
|
|
|
|
const styles = {
|
|
container: {
|
|
position: 'relative',
|
|
margin: '0 auto',
|
|
width: `${walletWidth}px`,
|
|
height: `${walletHeight}px`,
|
|
border: '1px solid #163151',
|
|
userSelect: 'none',
|
|
cursor: 'default'
|
|
},
|
|
|
|
// Images
|
|
sidebar: {
|
|
float: 'left',
|
|
height: '100%',
|
|
width: 'auto'
|
|
},
|
|
ethLogo: {
|
|
position: 'absolute',
|
|
left: '86px',
|
|
height: '100%',
|
|
width: 'auto',
|
|
zIndex: '-1'
|
|
},
|
|
|
|
// Blocks / QR Codes
|
|
block: {
|
|
position: 'relative',
|
|
float: 'left',
|
|
width: '27.5%',
|
|
padding: '20px'
|
|
},
|
|
blockText: {
|
|
position: 'absolute',
|
|
top: '50%',
|
|
left: '100%',
|
|
width: '100%',
|
|
margin: 0,
|
|
transform: 'translate(-50%, -50%) rotate(-90deg)',
|
|
fontSize: '13px',
|
|
fontWeight: '600',
|
|
color: '#0b7290',
|
|
textAlign: 'center',
|
|
textTransform: 'uppercase',
|
|
letterSpacing: '1px'
|
|
},
|
|
// Address / private key info
|
|
infoContainer: {
|
|
float: 'left',
|
|
width: '85%',
|
|
padding: '0 20px'
|
|
},
|
|
infoText: {
|
|
margin: '0 0 8px',
|
|
textAlign: 'left',
|
|
fontSize: '14px',
|
|
fontFamily: 'Menlo, Monaco, Consolas, "Courier New", monospace',
|
|
fontWeight: 300
|
|
},
|
|
infoLabel: {
|
|
fontWeight: 600
|
|
},
|
|
identiconContainer: {
|
|
position: 'absolute',
|
|
right: '15px',
|
|
bottom: '45px'
|
|
},
|
|
identiconText: {
|
|
float: 'left',
|
|
width: '130px',
|
|
padding: '0 5px',
|
|
margin: '12px 0 0',
|
|
fontSize: '9px',
|
|
textAlign: 'center'
|
|
},
|
|
box: {
|
|
width: 150,
|
|
height: 150
|
|
}
|
|
};
|
|
|
|
type Props = {
|
|
wallet: PrivKeyWallet
|
|
};
|
|
|
|
export default class PaperWallet extends React.Component {
|
|
props: Props;
|
|
state = { address: '' };
|
|
|
|
componentDidMount() {
|
|
if (!this.props.wallet) return;
|
|
this.props.wallet.getAddress().then(addr => {
|
|
this.setState({ address: addr });
|
|
});
|
|
}
|
|
|
|
render() {
|
|
const privateKey = this.props.wallet.getPrivateKey();
|
|
|
|
return (
|
|
<div style={styles.container}>
|
|
<img src={sidebarImg} style={styles.sidebar} />
|
|
<img src={ethLogo} style={styles.ethLogo} />
|
|
|
|
<div style={styles.block}>
|
|
<div style={styles.box}>
|
|
<QRCode data={this.state.address} />
|
|
</div>
|
|
<p style={styles.blockText}>YOUR ADDRESS</p>
|
|
</div>
|
|
|
|
<div style={styles.block}>
|
|
<img src={notesBg} style={styles.box} />
|
|
<p style={styles.blockText}>AMOUNT / NOTES</p>
|
|
</div>
|
|
|
|
<div style={styles.block}>
|
|
<div style={styles.box}>
|
|
<QRCode data={privateKey} />
|
|
</div>
|
|
<p style={styles.blockText}>YOUR PRIVATE KEY</p>
|
|
</div>
|
|
|
|
<div style={styles.infoContainer}>
|
|
<p style={styles.infoText}>
|
|
<strong style={styles.infoLabel}>Your Address:</strong>
|
|
<br />
|
|
{this.state.address}
|
|
</p>
|
|
<p style={styles.infoText}>
|
|
<strong style={styles.infoLabel}>Your Private Key:</strong>
|
|
<br />
|
|
{privateKey}
|
|
</p>
|
|
</div>
|
|
|
|
<div style={styles.identiconContainer}>
|
|
<div style={{ float: 'left' }}>
|
|
<Identicon address={this.state.address} size={'42px'} />
|
|
</div>
|
|
<p style={styles.identiconText}>
|
|
Always look for this icon when sending to this wallet
|
|
</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|