Fix #6 - Add Bulk Generation option

peercoin · Aug 20, 2018 · 3164b3f · 3164b3f
1 parent 6829068
commit 3164b3f
Show file tree

Hide file tree

Showing 14 changed files with 941 additions and 214 deletions.
diff --git a/app/components/multiple-wallets/multiple-wallets.component.scss b/app/components/multiple-wallets/multiple-wallets.component.scss
@@ -0,0 +1,35 @@
+@import "../../styles/_variables";
+
+.MultipleWalletsComp {
+  background: #efefef;
+  margin: 2rem 0;
+  padding: 2rem;
+
+  .wallet {
+    &:not(:last-child) {
+      padding: 4rem 0;
+      border-bottom: 2px solid #ccc;
+    }
+
+    .wallet-private-key {
+      margin-top: 1rem;
+    }
+
+    .wallet-title {
+      font-size: 1.5rem;
+      color: $color_primary;
+      margin-bottom: 0.5rem;
+    }
+
+    .wallet-value {
+      font-size: 1.4rem;
+      font-family: monospace;
+      letter-spacing: 1px;
+      background: #fff;
+      box-shadow: 0 2px 5px rgba(#000, 0.1);
+      border-radius: 3px;
+      padding: 2rem 1rem;
+      word-break: break-word;
+    }
+  }
+}
diff --git a/app/components/multiple-wallets/multiple-wallets.component.svelte.html b/app/components/multiple-wallets/multiple-wallets.component.svelte.html
@@ -0,0 +1,15 @@
+<div class="MultipleWalletsComp">
+  {{#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>
+    <div class="wallet-private-key">
+      <div class="wallet-title">Private key:</div>
+      <div class="wallet-value">{{wallet.privateKey}}</div>
+    </div>
+  </div>
+  {{/each}}
+</div>
diff --git a/app/initialize.js b/app/initialize.js
@@ -10,7 +10,7 @@ document.addEventListener('DOMContentLoaded', main);
 function main () {
   window.Routes = new Routes();
   window.store = new Store({
-    publicAddress: '',
-    privateKey: ''
+    wallets: [],
+    numberOfWallets: 1
   });
 }
diff --git a/app/pages/generator/generator.page.scss b/app/pages/generator/generator.page.scss
@@ -4,6 +4,7 @@
 .GeneratorPage {
   display: flex;
   align-items: center;
+  min-height: 100vh;
 
   @include viewports(above small) {
     flex-direction: column;

diff --git a/app/pages/generator/generator.page.svelte.html b/app/pages/generator/generator.page.svelte.html
@@ -37,7 +37,7 @@ <h1 class="title">Keep Swiping</h1>
       return {
         lastTouch: +new Date(),
         touches: 0,
-        totalTouches: 120 + (Math.round(crypto.getRandomValues(new Uint8Array(10))[5] / 4)),
+        totalTouches: 1 + (Math.round(crypto.getRandomValues(new Uint8Array(10))[5] / 4)), // 120
         hasStarted: false,
         hasFinished: false,
         isTouchDevice: true,
@@ -64,6 +64,7 @@ <h1 class="title">Keep Swiping</h1>
         const isTouch = this.get('isTouchDevice');
         const touches = +this.get('touches');
         const totalTouches = +this.get('totalTouches');
+        const numberOfWallets = window.store.get('numberOfWallets');
 
         // Ignore mouse events if device is mobile/touch
         if (isTouch && e.type === 'mousemove') {
@@ -99,11 +100,15 @@ <h1 class="title">Keep Swiping</h1>
             this.set({ finalTouchTime: +new Date() });
           }
           // Finally, generate wallet using computed seed.
-          this.generateWallet(
-            this.get('initialTouchTime'),
-            this.get('finalTouchTime'),
-            this.get('touchList')
-          );
+          for (let i = 0; i < numberOfWallets; i++) {
+            this.generateWallet(
+              this.get('initialTouchTime'),
+              this.get('finalTouchTime'),
+              this.get('touchList')
+            );
+          }
+
+          this.goto('/wallet');
           return;
         }
 
@@ -140,9 +145,16 @@ <h1 class="title">Keep Swiping</h1>
         this.refs.generator.appendChild(point);
       },
       generateWallet(initialTime, finalTime, touchList) {
+        const wallets = window.store.get('wallets') || [];
+        const numberOfWallets = window.store.get('numberOfWallets') || [];
+
+        if (wallets.length >= numberOfWallets) {
+          return;
+        }
+
         // Seed
-        const secret = `${initialTime}${touchList.join('')}${finalTime}`;
-        console.log(secret);
+        const randomSeed = Array.from(window.crypto.getRandomValues(new Uint8Array(2048 / 8))).join('');
+        const secret = `${randomSeed}:${initialTime}${touchList.join('')}${finalTime}`;
 
         // Generating peercoin address/priv. key
         const secretHash = Peercoin.Crypto.SHA256("" + secret);
@@ -163,10 +175,11 @@ <h1 class="title">Keep Swiping</h1>
 
         // Send generated Address to new page
         window.store.set({
-          publicAddress: address,
-          privateKey: addresspriv
+          wallets: wallets.concat({
+            publicAddress: address,
+            privateKey: addresspriv
+          })
         });
-        this.goto('/wallet');
       },
       computeChecksum(hx) {
         var firstSHA = Peercoin.Crypto.SHA256(Peercoin.Crypto.hexToBytes(hx));

diff --git a/app/pages/index/index.page.scss b/app/pages/index/index.page.scss
@@ -5,7 +5,6 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
 
   .logo {
     display: block;
@@ -55,8 +54,41 @@
     }
   }
 
+  .options-panel {
+    padding: 1rem;
+    border-radius: 3px;
+    background: #eee;
+    margin-top: 2rem;
+
+    .option {
+      display: flex;
+      align-items: center;
+
+
+      &:not(:last-child) {
+        margin-bottom: 1rem;
+        padding-bottom: 1rem;
+        border-bottom: 1px solid rgba(#000, 0.1);
+      }
+
+      label {
+        flex: 1;
+        text-align: left;
+        margin-right: 1rem;
+        font-size: 1.3rem;
+      }
+
+      .field {
+        border: 1px solid $color_primary;
+        padding: 0.5rem 1rem;
+        color: $color-primary;
+        border-radius: 3px;
+        font-size: 1.5rem;
+      }
+    }
+  }
+
   .footer {
-    position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;

diff --git a/app/pages/index/index.page.svelte.html b/app/pages/index/index.page.svelte.html
@@ -6,6 +6,13 @@ <h2 class="subtitle">To generate a new wallet, simply click in the button below
     <a href="#" on:click="goto('/generator')" class="btn-start">
       Start
     </a>
+
+    <div class="options-panel">
+      <div class="option">
+        <label>Number of Wallets to generate (Bulk Generation):</label>
+        <input class="field" type="number" min="1" max="1000" value="1" on:input="handleBulk(event.target.value)">
+      </div>
+    </div>
   </div>
   <footer class="footer">
     <a href="#" on:click="goto('/about')" class="footer-link">about</a>
@@ -25,8 +32,10 @@ <h2 class="subtitle">To generate a new wallet, simply click in the button below
         }
         roadtrip.goto(path);
       },
-      generateWallet() {
-       // asd
+      handleBulk(number) {
+        window.store.set({
+          numberOfWallets: number
+        });
       }
     },
     components: {

diff --git a/app/pages/wallet/wallet.handler.js b/app/pages/wallet/wallet.handler.js
@@ -5,11 +5,12 @@ export default class WalletHandler {
   get route() {
     return {
       enter(current, previous) {
-        const pubAddr = window.store.get('publicAddress');
-        const privKey = window.store.get('privateKey');
+        const wallets = window.store.get('wallets') || [];
+
+        console.log(wallets);
 
         // If no address generated, redirect to home
-        if (!pubAddr || !privKey) {
+        if (wallets.length < 1) {
           roadtrip.goto('/');
         } else {
           // Else, load view

diff --git a/app/pages/wallet/wallet.page.svelte.html b/app/pages/wallet/wallet.page.svelte.html
@@ -1,31 +1,40 @@
 <div class="WalletPage page page-entering" ref:page>
   <h1 class="title">
-    <div class="checkmark"><Icon name="check" /></div> Wallet generated!
+    {{#if wallets.length === 1}}
+      <div class="checkmark"><Icon name="check" /></div> Wallet generated!
+    {{/if}}
+    {{#if wallets.length > 1}}
+      <div class="checkmark"><Icon name="check" /></div> {{wallets.length}} Wallets generated!
+    {{/if}}
   </h1>
-
-  <img src="{{publicQRCode}}" alt="Public Address QR Code" class="qr-code">
 
-  <div class="wallet-details">
-    <div class="share-btn" on:click="openShareMenu()">
-      <Icon name="share" />
-    </div>
-    <div class="section">
-      <div class="section-title">Address</div>
-      <div class="section-value selectable">{{publicAddress}}</div>
-    </div>
-    <div class="section">
-      <div class="section-title">Private Key
-        <button class="btn btn-section" on:click="togglePrivateKeyVisibility()">{{(isPrivateKeyVisible) ? 'Hide' : 'Show'}}</button>
+  {{#if wallets.length > 1}}
+    <MultipleWallets wallets="{{wallets}}" />
+  {{/if}}
+  {{#if wallets.length === 1}}
+    <img src="{{publicQRCode}}" alt="Public Address QR Code" class="qr-code">
+    <div class="wallet-details">
+      <div class="share-btn" on:click="openShareMenu()">
+        <Icon name="share" />
+      </div>
+      <div class="section">
+        <div class="section-title">Address</div>
+        <div class="section-value selectable">{{publicAddress}}</div>
+      </div>
+      <div class="section">
+        <div class="section-title">Private Key
+          <button class="btn btn-section" on:click="togglePrivateKeyVisibility()">{{(isPrivateKeyVisible) ? 'Hide' : 'Show'}}</button>
+        </div>
+        {{#if !isPrivateKeyVisible}}
+          <div class="section-value grey">Make sure nobody is watching.</div>
+        {{/if}}
+        {{#if isPrivateKeyVisible}}
+          <img src="{{privateQRCode}}" alt="Private Key QR Code" class="qr-code-private">
+          <div class="section-value selectable">{{privateKey}}</div>
+        {{/if}}
       </div>
-      {{#if !isPrivateKeyVisible}}
-        <div class="section-value grey">Make sure nobody is watching.</div>
-      {{/if}}
-      {{#if isPrivateKeyVisible}}
-        <img src="{{privateQRCode}}" alt="Private Key QR Code" class="qr-code-private">
-        <div class="section-value selectable">{{privateKey}}</div>
-      {{/if}}
     </div>
-  </div>
+  {{/if}}
 
   <button class="btn clear-data" on:click="reset()">Clear data and start again.</button>
 
@@ -46,14 +55,16 @@ <h1 class="title">
   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';
 
   export default {
     data() {
       return {
-        publicAddress: window.store.get('publicAddress'),
-        privateKey: window.store.get('privateKey'),
-        privateQRCode: new QRious({value: window.store.get('privateKey') || 'just a sample lorem ipsum dolor sit', size: 200 * 4, level: 'L'}).toDataURL(),
-        publicQRCode: new QRious({value: window.store.get('publicAddress') || 'just a sample lorem ipsum dolor sit', size: 200 * 4, level: 'L'}).toDataURL(),
+        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(),
         isPrivateKeyVisible: false,
         isShareMenuOpen: false
       }
@@ -72,8 +83,8 @@ <h1 class="title">
         delete window.store;
         window.store = null;
         window.store = new Store({
-          publicAddress: '',
-          privateKey: ''
+          wallets: [],
+          numberOfWallets: 1
         });
         this.goto('/');
       },
@@ -143,7 +154,8 @@ <h1 class="title">
       }
     },
     components: {
-      Icon
+      Icon,
+      MultipleWallets
     }
   }
 </script>
diff --git a/app/styles/styles.scss b/app/styles/styles.scss
@@ -119,9 +119,8 @@ main {
 }
 
 .page {
-  position: absolute;
+  position: relative;
   width: 100%;
-  min-height: 100%;
 
   @include viewports(above small) {
     position: relative;