Fix Missing Address in Paper Wallet (#292)

This commit is contained in:
Daniel Ternyak 2017-10-14 12:24:48 -07:00 committed by GitHub
parent 093cb5a178
commit efed9b4803
2 changed files with 37 additions and 29 deletions

View File

@ -1,5 +1,4 @@
import { Identicon, QRCode } from 'components/ui'; import { Identicon, QRCode } from 'components/ui';
import PrivKeyWallet from 'libs/wallet/privkey';
import React from 'react'; import React from 'react';
import ethLogo from 'assets/images/logo-ethereum-1.png'; import ethLogo from 'assets/images/logo-ethereum-1.png';
@ -91,26 +90,13 @@ const styles: any = {
}; };
interface Props { interface Props {
wallet: PrivKeyWallet;
}
interface State {
address: string; address: string;
} privateKey: string;
export default class PaperWallet extends React.Component<Props, State> {
public state = { address: '' };
public componentDidMount() {
if (!this.props.wallet) {
return;
}
this.props.wallet.getAddress().then(address => {
this.setState({ address });
});
} }
export default class PaperWallet extends React.Component<Props, {}> {
public render() { public render() {
const privateKey = this.props.wallet.getPrivateKey(); const { privateKey, address } = this.props;
return ( return (
<div style={styles.container}> <div style={styles.container}>
@ -119,7 +105,7 @@ export default class PaperWallet extends React.Component<Props, State> {
<div style={styles.block}> <div style={styles.block}>
<div style={styles.box}> <div style={styles.box}>
<QRCode data={this.state.address} /> <QRCode data={address} />
</div> </div>
<p style={styles.blockText}>YOUR ADDRESS</p> <p style={styles.blockText}>YOUR ADDRESS</p>
</div> </div>
@ -140,7 +126,7 @@ export default class PaperWallet extends React.Component<Props, State> {
<p style={styles.infoText}> <p style={styles.infoText}>
<strong style={styles.infoLabel}>Your Address:</strong> <strong style={styles.infoLabel}>Your Address:</strong>
<br /> <br />
{this.state.address} {address}
</p> </p>
<p style={styles.infoText}> <p style={styles.infoText}>
<strong style={styles.infoLabel}>Your Private Key:</strong> <strong style={styles.infoLabel}>Your Private Key:</strong>
@ -151,7 +137,7 @@ export default class PaperWallet extends React.Component<Props, State> {
<div style={styles.identiconContainer}> <div style={styles.identiconContainer}>
<div style={{ float: 'left' }}> <div style={{ float: 'left' }}>
<Identicon address={this.state.address} size={'42px'} /> <Identicon address={address} size={'42px'} />
</div> </div>
<p style={styles.identiconText}> <p style={styles.identiconText}>
Always look for this icon when sending to this wallet Always look for this icon when sending to this wallet

View File

@ -8,9 +8,29 @@ interface Props {
wallet: PrivKeyWallet; wallet: PrivKeyWallet;
} }
interface State {
address: string | null;
privateKey: string | null;
}
const initialState = {
address: null,
privateKey: null
};
export default class PrintableWallet extends Component<Props, {}> { export default class PrintableWallet extends Component<Props, {}> {
public state: State = initialState;
public async componentDidMount() {
const address = await this.props.wallet.getAddress();
const privateKey = this.props.wallet.getPrivateKey();
this.setState({ address, privateKey });
}
public print = () => { public print = () => {
printElement(<PaperWallet wallet={this.props.wallet} />, { const { address, privateKey } = this.state;
if (address && privateKey) {
printElement(<PaperWallet address={address} privateKey={privateKey} />, {
popupFeatures: { popupFeatures: {
scrollbars: 'no' scrollbars: 'no'
}, },
@ -27,12 +47,14 @@ export default class PrintableWallet extends Component<Props, {}> {
} }
` `
}); });
}
}; };
public render() { public render() {
return ( const { address, privateKey } = this.state;
return address && privateKey ? (
<div> <div>
<PaperWallet wallet={this.props.wallet} /> <PaperWallet address={address} privateKey={privateKey} />
<a <a
role="button" role="button"
aria-label={translate('x_Print')} aria-label={translate('x_Print')}
@ -44,6 +66,6 @@ export default class PrintableWallet extends Component<Props, {}> {
{translate('x_Print')} {translate('x_Print')}
</a> </a>
</div> </div>
); ) : null;
} }
} }