wiz

static/css/connect.css

@@ -29,9 +29,37 @@
 /* prevent overlap: hide connect string until revealed; click surface on box */
 .qrcode-box #connectString { display: none; }
 .qrcode-box.revealed #connectString { display: block; }
-.qrcode-box #qrcode { pointer-events: none; }
 .qrcode-box { cursor: pointer; }
 
+/* QR viewport and veil overlay */
+.qrcode-viewport {
+    position: relative;
+    width: 100%;
+    height: 175px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+}
+.qrcode-viewport #qrcode {
+    position: absolute;
+    width: 157px;
+    height: 157px;
+}
+.qrcode-viewport .qr-veil {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(7px);
+    -webkit-backdrop-filter: blur(7px);
+    background: rgba(0,0,0,0.25);
+    color: #c434e0;
+    font-size: 12px;
+}
+.qrcode-box.revealed .qr-veil { display: none; }
+
 .qrcode-box-clicked::before {
     content: "";
     position: absolute;

static/index.html

@@ -191,13 +191,16 @@
               <div style="text-align: center; color: #a3a3a3;">Code contains a one-time pairing secret</div>
               <div style="text-align: center; color: #c434e0;" id="click-text">Click to reveal</div>
             </div>
+            <div class="qrcode-viewport">
               <div id="qrcode"></div>
+              <div class="qr-veil"><span>Click to reveal</span></div>
+            </div>
             <div style="color: #a3a3a3; font-size: 11px; word-break: break-all; overflow-wrap: anywhere; max-width: 220px; margin: 0 auto;">
               <div id="connectString"></div>
             </div>
           </div>
         </div>
-        <button class="push-button" style="margin-top: 20px" id="to-status">Continue</button>
+        <button class="push-button" style="margin-top: 20px" id="to-status">OK, I've connected my wallet</button>
       </div>
     </section>
 

static/js/wizard.js

@@ -148,14 +148,13 @@ $(() => {
                 cs.text('');
                 if (qrElement) {
                     while (qrElement.firstChild) qrElement.removeChild(qrElement.firstChild);
-                }
+                    // Pre-generate QR behind veil to entice reveal
-
-                // Reveal on click: generate QR and show string
-                codebox.off('click').on('click', () => {
-                    if (!codebox.hasClass('revealed')) {
-                        if (qrElement && !qrElement.firstChild) {
                     new QRCode(qrElement, { text: connectString, colorDark: '#000000', colorLight: '#ffffff', width: 157, height: 157 });
                 }
+
+                // Reveal on click: show string and remove veil
+                codebox.off('click').on('click', () => {
+                    if (!codebox.hasClass('revealed')) {
                         cs.text(connectString);
                         codebox.addClass('revealed');
                         clickText.text('Pairing code');