Show private/view keys as QR Codes

adityapk00 · Apr 9, 2021 · ada6d78 · ada6d78
1 parent fa3953d
commit ada6d78
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/app/components/Receive.js b/app/components/Receive.js
@@ -75,10 +75,11 @@ const AddressBlock = ({
                 <div>
                   <div className={[cstyles.sublight].join(' ')}>Private Key</div>
                   <div
-                    className={[cstyles.breakword, cstyles.padtopsmall, cstyles.fixedfont].join(' ')}
+                    className={[cstyles.breakword, cstyles.padtopsmall, cstyles.fixedfont, cstyles.flex].join(' ')}
                     style={{ maxWidth: '600px' }}
                   >
-                    {privateKey}
+                    <QRCode value={privateKey} className={[styles.receiveQrcode].join(' ')} />
+                    <div>{privateKey}</div>
                   </div>
                 </div>
               )}
@@ -89,10 +90,11 @@ const AddressBlock = ({
                 <div>
                   <div className={[cstyles.sublight].join(' ')}>Viewing Key</div>
                   <div
-                    className={[cstyles.breakword, cstyles.padtopsmall, cstyles.fixedfont].join(' ')}
+                    className={[cstyles.breakword, cstyles.padtopsmall, cstyles.fixedfont, cstyles.flex].join(' ')}
                     style={{ maxWidth: '600px' }}
                   >
-                    {viewKey}
+                    <QRCode value={viewKey} className={[styles.receiveQrcode].join(' ')} />
+                    <div>{viewKey}</div>
                   </div>
                 </div>
               )}

diff --git a/app/components/Receive.module.css b/app/components/Receive.module.css
@@ -15,4 +15,5 @@
 .receiveQrcode {
   padding: 8px;
   background-color: white;
+  margin-right: 5px;
 }
diff --git a/app/utils/uris.test.js b/app/utils/uris.test.js
@@ -59,6 +59,7 @@ test('Plain URI', () => {
   expect(targets[0].memoString).toBeUndefined();
   expect(targets[0].memoBase64).toBeUndefined();
 });
+
 test('bad uris', () => {
   // bad protocol
   let error = parseZcashURI('badprotocol:tmEZhbWHTpdKMw5it8YDspUXSMGQyFwovpU?amount=123.456');