Fix #8 - Add paperwallet art

app/components/multiple-wallets/multiple-wallets.component.scss

@@ -4,6 +4,19 @@
   background: #efefef;
   margin: 2rem 0;
   padding: 2rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @media print {
+    display: block;
+  }
+
+  * {
+    @media print {
+      display: block;
+    }
+  }
 
   .wallet {
     &:not(:last-child) {

app/components/multiple-wallets/multiple-wallets.component.svelte.html

@@ -1,15 +1,36 @@
+<h1 class="print-only print-title">Those wallets are 15cmx8cm, folded they occupies the size of a business card (5cmx8cm).</h1>
+
+{{#each wallets as wallet, i}}
+  <PaperWallet publicAddress="{{wallet.publicAddress}}" privateKey="{{wallet.privateKey}}" publicQRCode="{{wallet.publicQRCode}}" privateQRCode="{{wallet.privateQRCode}}" />
+{{/each}}
+
 <div class="MultipleWalletsComp">
+  <button class="btn" on:click="actionPaperWallet()">PaperWallet (print)</button>
   {{#each wallets as wallet, i}}
-  <div class="wallet">
-    <h2>Wallet #{{i + 1}}</h2>
-    <div class="wallet-public-address">
-      <div class="wallet-title">Public Address:</div>
-      <div class="wallet-value">{{wallet.publicAddress}}</div>
+    <div class="wallet">
+      <h2>Wallet #{{i + 1}}</h2>
+      <div class="wallet-public-address">
+        <div class="wallet-title">Public Address:</div>
+        <div class="wallet-value">{{wallet.publicAddress}}</div>
+      </div>
+      <div class="wallet-private-key">
+        <div class="wallet-title">Private key:</div>
+        <div class="wallet-value">{{wallet.privateKey}}</div>
+      </div>
     </div>
-    <div class="wallet-private-key">
-      <div class="wallet-title">Private key:</div>
-      <div class="wallet-value">{{wallet.privateKey}}</div>
-    </div>
-  </div>
   {{/each}}
 </div>
+
+<script>
+  import PaperWallet from '../paperwallet/paperwallet.component.svelte';
+  export default {
+    methods: {
+      actionPaperWallet() {
+        window.print();
+      }
+    },
+    components: {
+      PaperWallet
+    }
+  }
+</script>

app/components/paperwallet/paperwallet.component.scss

@@ -0,0 +1,6 @@
+.PaperWalletComp {
+  @media print {
+    width: 15cm;
+    margin: 0 auto 0.5cm;
+  }
+}

app/pages/generator/generator.page.scss

@@ -8,6 +8,7 @@
 
   @include viewports(above small) {
     flex-direction: column;
+    min-height: auto;
   }
 
   h1 {

app/pages/generator/generator.page.svelte.html

@@ -20,6 +20,7 @@ <h1 class="title">Keep Swiping</h1>
 
 <script>
   import roadtrip from 'roadtrip';
+  import QRious from 'qrious';
   import BigInteger from '../../helpers/peercoin/BigInteger';
   import Peercoin from '../../helpers/peercoin/Peercoin';
   import Base58 from '../../helpers/peercoin/Base58';
@@ -37,7 +38,7 @@ <h1 class="title">Keep Swiping</h1>
       return {
         lastTouch: +new Date(),
         touches: 0,
-        totalTouches: 1 + (Math.round(crypto.getRandomValues(new Uint8Array(10))[5] / 4)), // 120
+        totalTouches: 120 + (Math.round(crypto.getRandomValues(new Uint8Array(10))[5] / 4)),
         hasStarted: false,
         hasFinished: false,
         isTouchDevice: true,
@@ -78,7 +79,6 @@ <h1 class="title">Keep Swiping</h1>
 
         // If mousemove, simulate touch to keep with the function
         if (e.type === 'mousemove') {
-          console.log(e);
           e.touches = [];
           e.touches[0] = {
             pageX: e.layerX,
@@ -177,7 +177,9 @@ <h1 class="title">Keep Swiping</h1>
         window.store.set({
           wallets: wallets.concat({
             publicAddress: address,
-            privateKey: addresspriv
+            privateKey: addresspriv,
+            privateQRCode: new QRious({value: addresspriv, size: 200 * 4, level: 'L'}).toDataURL(),
+            publicQRCode: new QRious({value: address, size: 200 * 4, level: 'L'}).toDataURL(),
           })
         });
       },

app/pages/wallet/wallet.handler.js

@@ -7,8 +7,6 @@ export default class WalletHandler {
       enter(current, previous) {
         const wallets = window.store.get('wallets') || [];
 
-        console.log(wallets);
-
         // If no address generated, redirect to home
         if (wallets.length < 1) {
           roadtrip.goto('/');

app/pages/wallet/wallet.page.scss

@@ -243,6 +243,10 @@
     box-shadow: 0 2px 4px rgba(#000, 0.2);
     border-radius: 3px;
     padding: 1rem;
+
+    @include viewports(above small) {
+      margin: 2rem 0;
+    }
   }
 }
 

app/pages/wallet/wallet.page.svelte.html

@@ -12,6 +12,8 @@ <h1 class="title">
     <MultipleWallets wallets="{{wallets}}" />
   {{/if}}
   {{#if wallets.length === 1}}
+    <h1 class="print-only print-title">This wallet is 15cmx8cm, folded it occupies the size of a business card (5cmx8cm).</h1>
+    <PaperWallet publicAddress="{{publicAddress}}" privateKey="{{privateKey}}" publicQRCode="{{publicQRCode}}" privateQRCode="{{privateQRCode}}" />
     <img src="{{publicQRCode}}" alt="Public Address QR Code" class="qr-code">
     <div class="wallet-details">
       <div class="share-btn" on:click="openShareMenu()">
@@ -45,26 +47,27 @@ <h1 class="title">
       <li><a href="#" on:click="actionCopyToClipboard(event)">Copy <b>address/priv. key</b> to clipboard</a></li>
       <li><a href="mailto:your-address-here@email.com?body={{actionGetMailBody()}}">Send via email</a></li>
       <li><a href="{{actionDownloadJSONFile()}}" download="peercoin_wallet.json">Save JSON data</a></li>
-      <li class="disabled"><a href="#">Choose paper wallet model (soon)</a></li>
+      <li><a href="#" on:click="actionPaperWallet(event)">Paper Wallet (print)</a></li>
     </ul>
   </nav>
 </div>
 
 <script>
   import roadtrip from 'roadtrip';
-  import QRious from 'qrious';
   import { Store } from 'svelte/store.umd.js';
   import Icon from '../../components/icon/icon.component.svelte';
   import MultipleWallets from '../../components/multiple-wallets/multiple-wallets.component.svelte';
+  import PaperWallet from '../../components/paperwallet/paperwallet.component.svelte';
 
   export default {
     data() {
+      const wallets = window.store.get('wallets');
       return {
-        wallets: window.store.get('wallets'),
-        publicAddress: window.store.get('wallets')[0].publicAddress,
-        privateKey: window.store.get('wallets')[0].privateKey,
-        privateQRCode: new QRious({value: window.store.get('wallets')[0].privateKey || 'just a sample lorem ipsum dolor sit', size: 200 * 4, level: 'L'}).toDataURL(),
-        publicQRCode: new QRious({value: window.store.get('wallets')[0].publicAddress || 'just a sample lorem ipsum dolor sit', size: 200 * 4, level: 'L'}).toDataURL(),
+        wallets: wallets,
+        publicAddress: wallets[0].publicAddress,
+        privateKey: wallets[0].privateKey,
+        privateQRCode: wallets[0].privateQRCode,
+        publicQRCode: wallets[0].publicQRCode,
         isPrivateKeyVisible: false,
         isShareMenuOpen: false
       }
@@ -94,6 +97,10 @@ <h1 class="title">
       closeShareMenu() {
         this.set({isShareMenuOpen: false});
       },
+      actionPaperWallet(e) {
+        e.preventDefault();
+        window.print();
+      },
       actionCopyToClipboard(e) {
         e.preventDefault();
 
@@ -108,9 +115,8 @@ <h1 class="title">
 
         try {
           document.execCommand('copy');
-          console.log('Copied!');
         } catch (err) {
-          console.log('Oops, unable to copy');
+          console.error('Oops, unable to copy');
         }
 
         document.body.removeChild(textArea);
@@ -155,7 +161,8 @@ <h1 class="title">
     },
     components: {
       Icon,
-      MultipleWallets
+      MultipleWallets,
+      PaperWallet
     }
   }
 </script>

app/styles/styles.scss

@@ -180,3 +180,32 @@ main {
     transform: scale(0.9);
   }
 }
+
+@media print {
+  .page *:not(.print-only) {
+    display: none;
+  }
+
+  .page .print-only * {
+    display: block;
+  }
+}
+
+.print-only {
+  display: none;
+
+  @media print {
+    display: block;
+  }
+}
+
+.print-title {
+  text-align: center;
+  font-size: 16pt;
+  margin-bottom: 2cm;
+  display: none;
+
+  @media print {
+    display: block;
+  }
+}