Fix Missing Address in Paper Wallet (#292)

common/components/PaperWallet/index.tsx

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

common/components/PrintableWallet/index.tsx

@@ -8,13 +8,33 @@ interface Props {
   wallet: PrivKeyWallet;
 }
 
+interface State {
+  address: string | null;
+  privateKey: string | null;
+}
+
+const initialState = {
+  address: null,
+  privateKey: null
+};
+
 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 = () => {
-    printElement(<PaperWallet wallet={this.props.wallet} />, {
-      popupFeatures: {
-        scrollbars: 'no'
-      },
-      styles: `
+    const { address, privateKey } = this.state;
+    if (address && privateKey) {
+      printElement(<PaperWallet address={address} privateKey={privateKey} />, {
+        popupFeatures: {
+          scrollbars: 'no'
+        },
+        styles: `
         * {
           box-sizing: border-box;
         }
@@ -26,13 +46,15 @@ export default class PrintableWallet extends Component<Props, {}> {
           margin: 0;
         }
       `
-    });
+      });
+    }
   };
 
   public render() {
-    return (
+    const { address, privateKey } = this.state;
+    return address && privateKey ? (
       <div>
-        <PaperWallet wallet={this.props.wallet} />
+        <PaperWallet address={address} privateKey={privateKey} />
         <a
           role="button"
           aria-label={translate('x_Print')}
@@ -44,6 +66,6 @@ export default class PrintableWallet extends Component<Props, {}> {
           {translate('x_Print')}
         </a>
       </div>
-    );
+    ) : null;
   }
 }