Merge pull request #46 from BitcoinQnA/qrcodenew

Qrcodenew
BitcoinQnA · Jan 24, 2023 · 5e23dbd · 5e23dbd
2 parents 57d7917 + efb957c
commit 5e23dbd
Show file tree

Hide file tree

Showing 10 changed files with 5,876 additions and 17,587 deletions.
diff --git a/.gitignore b/.gitignore
@@ -2,4 +2,5 @@ package-lock.json
 node_modules/
 old/
 .env
-.vscode
+.vscode
+test.txt
diff --git a/build.js b/build.js
@@ -13,7 +13,9 @@ console.log('Building HTML file...');
     );
     result = result.replace(/<script id="websocket">[^]*<\/script>/, '');
     console.log('Hot reload Web Socket script tags removed...');
-    const regex1 = new RegExp(/<script src="(?<path>...*)">[^]*?</);
+    const regex1 = new RegExp(
+      /<script class="dev-script" src="(?<path>...*)">[^]*?</
+    );
     let array1 = regex1.exec(result);
     while (array1 !== null) {
       const scriptLocation = path.join(__dirname, `/src/www/`, `${array1[1]}`);
@@ -23,8 +25,9 @@ console.log('Building HTML file...');
         array1[0],
         `<script async>
       ${js}
-      <`
+      </script>`
       );
+      console.log(`${array1[1]} added!`);
       array1 = regex1.exec(result);
       console.log('Done!');
     }

diff --git a/dist/index.html b/dist/index.html
diff --git a/libs/qrcode/package.json b/libs/qrcode/package.json
diff --git a/qrcode.svg b/qrcode.svg
diff --git a/src/www/css/styles.css b/src/www/css/styles.css
@@ -248,7 +248,7 @@ hr {
   transition: 0.3s;
 }
 .tab button {
-  width: calc(100% / 3);
+  width: calc(100% / 4);
 }
 .tab button:hover,
 .tab button.tab--active {
@@ -500,22 +500,31 @@ select {
   background-color: var(--q-blue);
 }
 #infoModalText,
-#qrModalCanvas {
+#qrModalDiv {
   margin: auto;
   padding: 5%;
   max-width: 100%;
 }
-#compactSeedQRCanvas,
-#bip85CompactSeedQRCanvas {
+#qrModalDiv > svg,
+#qrModalDiv > canvas {
+  max-width: 500px;
+  max-height: 500px;
   display: block;
   margin: auto;
 }
+#qrModalDiv > svg > rect {
+  fill: var(--q-orange);
+}
+#qrModalDiv > svg > path {
+  fill: var(--q-blue);
+}
 #compactSeedQR,
 #bip85CompactSeedQR {
   border: 1px solid var(--q-white);
   border-radius: 5px;
   padding: 5px;
   background-color: var(--q-light-blue);
+  min-height: 32px;
 }
 .qr-icon {
   height: 1.1em;

diff --git a/src/www/dev.html b/src/www/dev.html
@@ -157,13 +157,16 @@ <h2>Usage</h2>
         <ul style="list-style-type: none; padding-inline-start: 0;">
           <li>🤖 Generate a cryptographically strong random mnemonic</li>
           <li>📥 Enter your own (previously generated) mnemonic</li>
+          <li>📷 Use your device camera to scan a SeedQR</li>
           <li>🎲 Enter in your own entropy</li>
         </ul>
         <div class="tab">
           <button class="tabLinks" title="Show the Generate Random Entropy Section" id="defaultOpenTab"
             onclick="tabSelect(event, 'Generate_Random')">🤖</button>
           <button class="tabLinks" title="Show the Mnemonic Input Section"
             onclick="tabSelect(event, 'Input_Mnemonic')">📥</button>
+          <button class="tabLinks" title="Show the SeedQR Scan Section"
+            onclick="tabSelect(event, 'Input_SeedQR')">📷</button>
           <button class="tabLinks" title="Show the Entropy Section"
             onclick="tabSelect(event, 'Input_Entropy')">🎲</button>
         </div>
@@ -327,6 +330,13 @@ <h2>Usage</h2>
           <p class="warning hidden" id="inputMnemonicError"></p>
           <br>
         </div>
+        <div id="Input_SeedQR" class="tabContent">
+          <p>Scan SeedQR</p>
+          <p>Click the button below to use your device camera to scan a SeedQR code and load it into Seed Tool. If you
+            have not already granted Seed Tool permission to use your camera, you will be prompted to do that.</p>
+          <button id="scanSeedQR" class="btn">📷</button>
+          <p class="warning hidden" id="scanSeedQRWarningBox"></p>
+        </div>
         <div id="Input_Entropy" class="tabContent">
           <div class="warning">
             <p>
@@ -570,63 +580,71 @@ <h4>BIP39: Mnemonic code for generating deterministic keys</h4>
             id="xorRemoveSeed" onclick="removeXorSeed(event)">-</button><button class="btn" id="xorCalculate"
             onclick="calculateXor()">Recalculate</button>
           <div class="xor-seed">
-            <label for="xorSeed2">Seed 2 of <span class="xor-number-seeds">2</span></label>
+            <label for="xorSeed2">Seed 2 of <span class="xor-number-seeds">2</span> <span class="xorQrIcon"
+                onclick="showXorQr(this)" id="qrXor2"></span></label>
             <div class="copy-wrapper private-data">
               <textarea id="xorSeed2" class="textarea-input"
                 title="These words should be kept safe, secure and private." autocomplete="off" autocorrect="off"
                 autocapitalize="off" spellcheck="false"></textarea>
             </div>
           </div>
           <div class="xor-seed hidden">
-            <label for="xorSeed3">Seed 3 of <span class="xor-number-seeds">2</span></label>
+            <label for="xorSeed3">Seed 3 of <span class="xor-number-seeds">2</span> <span class="xorQrIcon"
+                onclick="showXorQr(this)" id="qrXor3"></span></label>
             <div class="copy-wrapper private-data">
               <textarea id="xorSeed3" class="textarea-input"
                 title="These words should be kept safe, secure and private." autocomplete="off" autocorrect="off"
                 autocapitalize="off" spellcheck="false"></textarea>
             </div>
           </div>
           <div class="xor-seed hidden">
-            <label for="xorSeed4">Seed 4 of <span class="xor-number-seeds">2</span></label>
+            <label for="xorSeed4">Seed 4 of <span class="xor-number-seeds">2</span> <span class="xorQrIcon"
+                onclick="showXorQr(this)" id="qrXor4"></span></label>
             <div class="copy-wrapper private-data">
               <textarea id="xorSeed4" class="textarea-input"
                 title="These words should be kept safe, secure and private." autocomplete="off" autocorrect="off"
                 autocapitalize="off" spellcheck="false"></textarea>
             </div>
           </div>
           <div class="xor-seed hidden">
-            <label for="xorSeed5">Seed 5 of <span class="xor-number-seeds">2</span></label>
+            <label for="xorSeed5">Seed 5 of <span class="xor-number-seeds">2</span> <span class="xorQrIcon"
+                onclick="showXorQr(this)" id="qrXor5"></span></label>
             <div class="copy-wrapper private-data">
               <textarea id="xorSeed5" class="textarea-input"
                 title="These words should be kept safe, secure and private." autocomplete="off" autocorrect="off"
                 autocapitalize="off" spellcheck="false"></textarea>
             </div>
           </div>
           <div class="xor-seed hidden">
-            <label for="xorSeed6">Seed 6 of <span class="xor-number-seeds">2</span></label>
+            <label for="xorSeed6">Seed 6 of <span class="xor-number-seeds">2</span> <span class="xorQrIcon"
+                onclick="showXorQr(this)" id="qrXor6"></span></label>
             <div class="copy-wrapper private-data">
               <textarea id="xorSeed6" class="textarea-input"
                 title="These words should be kept safe, secure and private." autocomplete="off" autocorrect="off"
                 autocapitalize="off" spellcheck="false"></textarea>
             </div>
           </div>
           <div class="xor-seed hidden">
-            <label for="xorSeed7">Seed 7 of <span class="xor-number-seeds">2</span></label>
+            <label for="xorSeed7">Seed 7 of <span class="xor-number-seeds">2</span> <span class="xorQrIcon"
+                onclick="showXorQr(this)" id="qrXor7"></span></label>
             <div class="copy-wrapper private-data">
               <textarea id="xorSeed7" class="textarea-input"
                 title="These words should be kept safe, secure and private." autocomplete="off" autocorrect="off"
                 autocapitalize="off" spellcheck="false"></textarea>
             </div>
           </div>
           <div class="xor-seed hidden">
-            <label for="xorSeed8">Seed 8 of <span class="xor-number-seeds">2</span></label>
+            <label for="xorSeed8">Seed 8 of <span class="xor-number-seeds">2</span> <span class="xorQrIcon"
+                onclick="showXorQr(this)" id="qrXor8"></span></label>
             <div class="copy-wrapper private-data">
               <textarea id="xorSeed8" class="textarea-input"
                 title="These words should be kept safe, secure and private." autocomplete="off" autocorrect="off"
                 autocapitalize="off" spellcheck="false"></textarea>
             </div>
           </div>
           <div>
-            <label for="xorResult">XOR Result</label>
+            <label for="xorResult">XOR Result <span class="xorQrIcon" onclick="showXorQr(this)"
+                id="qrXorResult"></span></label>
             <div class="copy-wrapper private-data">
               <textarea id="xorResult" class="xor-result textarea-input"
                 title="These words should be kept safe, secure and private." autocomplete="off" autocorrect="off"
@@ -1345,7 +1363,7 @@ <h3 id="libraries">Libraries & Tools</h3>
   <div id="qrModal" class="modal">
     <div class="modal-content">
       <span id="modalClose" title="Close" onclick="clearQRModal();">&times;</span>
-      <canvas id="qrModalCanvas"></canvas>
+      <div id="qrModalDiv"></div>
     </div>
   </div>
   <div id="toast-background">
-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,5 @@ package-lock.json @@
     node_modules/
     old/
     .env
-    .vscode
+    .vscode
+    test.txt