From 190599db7a83f7a670e6d904c4725cc33a1e89e4 Mon Sep 17 00:00:00 2001
From: Tuan Ho <tuanhv.dev@gmail.com>
Date: Thu, 15 Aug 2019 09:10:24 +0700
Subject: [PATCH 1/2] Update Bulk page for printing

---
 src/App.css             | 17 +++++++++++
 src/components/Bulk.jsx | 68 +++++++++++++++++++++++++++++++++--------
 2 files changed, 72 insertions(+), 13 deletions(-)

diff --git a/src/App.css b/src/App.css
index 39aad85..13751b1 100644
--- a/src/App.css
+++ b/src/App.css
@@ -27,6 +27,11 @@ a:hover{
     text-decoration:none;
     opacity: 0.9;
 }
+
+.word-break-all {
+    word-break: break-all;
+}
+
 #layout {
     display: -webkit-box;
     display: -webkit-flex;
@@ -434,6 +439,18 @@ hr{
         margin-top: 20px;
     }
 
+    #Bulk .addr-item {
+        text-align: center;
+        padding: 20px;
+        border: 1px solid grey;
+        margin-bottom: 50px;
+        page-break-inside: avoid;
+    }
+
+    #Bulk .addr-item h3 {
+        margin-top: 0;
+    }
+
     #layout {
         display: block;
     }
diff --git a/src/components/Bulk.jsx b/src/components/Bulk.jsx
index 05e7258..92241eb 100644
--- a/src/components/Bulk.jsx
+++ b/src/components/Bulk.jsx
@@ -165,10 +165,11 @@ class Bulk extends Component {
                 </Row>
                 <hr />
                 {this.state.pairs[0] ? (
-                    <Row className="r2">
-                        <Col className="max-width">
-                            <Table striped bordered condensed hover>
-                                <thead>
+                    <div>
+                        <Row className="r2 screen-only">
+                            <Col className="max-width">
+                                <Table striped bordered condensed hover>
+                                    <thead>
                                     <tr>
                                         <th>#</th>
                                         <th>Address</th>
@@ -179,8 +180,8 @@ class Bulk extends Component {
                                         }
                                         <th>Private Key</th>
                                     </tr>
-                                </thead>
-                                <tbody>
+                                    </thead>
+                                    <tbody>
                                     {this.state.pairs.map((pair) => (
                                         <tr>
                                             <td>{pair.index}</td>
@@ -188,20 +189,61 @@ class Bulk extends Component {
                                             <td>{pair.wif}</td>
                                             {
                                                 this.state.type === 'Z' ?
-                                                (<td>{pair.priv}</td>)
-                                                : null
+                                                    (<td>{pair.priv}</td>)
+                                                    : null
                                             }
                                         </tr>
                                     ))}
-                                </tbody>
-                            </Table>
-                        </Col>
-                    </Row>
+                                    </tbody>
+                                </Table>
+                            </Col>
+                        </Row>
+                        <div className="print-only">
+                            {this.state.pairs.map((pair) => (
+                                <div className="addr-item">
+                                    <Row>
+                                        <Col sm={6}>
+                                            <h3>Zen Address</h3>
+                                            <div>
+                                                <QRCode
+                                                    bgColor="#FFFFFF"
+                                                    fgColor="#000000"
+                                                    level="L"
+                                                    style={{ width: 200 }}
+                                                    value={pair.addr}
+                                                />
+                                            </div>
+                                            <div className="word-break-all">{pair.addr}</div>
+                                        </Col>
+                                        <Col sm={6}>
+                                            <div>
+                                                {this.state.type === 'T' ? (
+                                                    <h3>Private Key</h3>
+                                                ) : (
+                                                    <h3>Spending Key</h3>
+                                                )}
+                                                <div>
+                                                    <QRCode
+                                                        bgColor="#FFFFFF"
+                                                        fgColor="#000000"
+                                                        level="L"
+                                                        style={{ width: 200 }}
+                                                        value={pair.wif}
+                                                    />
+                                                </div>
+                                                <div className="word-break-all">{pair.wif}</div>
+                                            </div>
+                                        </Col>
+                                    </Row>
+                                </div>
+                            ))}
+                        </div>
+                    </div>
                 ) : (
                     <Row className="r2 no-padding"></Row>
                 )}
 
-                {this.state.paper ?
+                {false && this.state.paper ?
                     this.state.pairs.map((pair) => (
                         <div className="page-break-after print-only bulk-paper">
                             <img alt="art1" id="art1" src={art1} />

From 6d06cf7fef02d03b7ed8c83ae63811bfc2327c3a Mon Sep 17 00:00:00 2001
From: Tuan Ho <tuanhv.dev@gmail.com>
Date: Thu, 15 Aug 2019 09:32:19 +0700
Subject: [PATCH 2/2] Disable print background image on Bulk page

---
 src/components/Bulk.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Bulk.jsx b/src/components/Bulk.jsx
index 92241eb..ce782b8 100644
--- a/src/components/Bulk.jsx
+++ b/src/components/Bulk.jsx
@@ -14,7 +14,7 @@ class Bulk extends Component {
             startIndex: 1,
             nbRows: 1,
             type: 'T',
-            paper: true,
+            paper: false,
             pairs: []
         };
     }
@@ -243,7 +243,7 @@ class Bulk extends Component {
                     <Row className="r2 no-padding"></Row>
                 )}
 
-                {false && this.state.paper ?
+                {this.state.paper ?
                     this.state.pairs.map((pair) => (
                         <div className="page-break-after print-only bulk-paper">
                             <img alt="art1" id="art1" src={art1} />