From 7573c300cd54f9234766c8e6af09d813cbb61e9b Mon Sep 17 00:00:00 2001
From: jwinterm <johnwmurphy@gmail.com>
Date: Thu, 29 Jan 2026 08:46:52 -0500
Subject: [PATCH] fix: smirk modal

---
 html/index.html              | 15 +++++++
 html/js/network/smirkAuth.js | 80 ++++++++++++++++++++++--------------
 2 files changed, 64 insertions(+), 31 deletions(-)

diff --git a/html/index.html b/html/index.html
index 219f495..4d7acc2 100644
--- a/html/index.html
+++ b/html/index.html
@@ -224,6 +224,21 @@
             <h2 id="addressModalTitle">Manage Payout Address</h2>
             <p class="modal-description">Enter your Wownero (WOW) or Monero (XMR) address below. This will be used for payouts when you escape.</p>
             <p class="modal-description" style="font-size:11px; color:#888; margin-top:8px; padding:6px; background:rgba(255,200,0,0.1); border-radius:4px;">💡 <strong>Session Info:</strong> Your address and credits are tied to a browser session token stored locally. They will persist across page refreshes but will be lost if you clear cookies, use incognito mode, or switch browsers.</p>
+
+            <!-- Smirk Wallet Integration -->
+            <div id="smirkSection" style="margin: 15px 0; padding: 12px; background: rgba(26,26,77,0.5); border: 1px solid #3a3a7d; border-radius: 6px;">
+                <div style="display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
+                    <span style="font-size: 1.2em;">🔐</span>
+                    <strong style="color: #aaf;">Connect with Smirk Wallet</strong>
+                </div>
+                <p style="font-size: 11px; color: #999; margin-bottom: 10px;">Automatically set your payout address by connecting your Smirk browser wallet.</p>
+                <div id="smirkButtonContainer">
+                    <!-- Will be populated by smirkAuth.js -->
+                </div>
+            </div>
+
+            <div style="text-align: center; color: #666; margin: 10px 0; font-size: 12px;">— or enter manually —</div>
+
             <form id="addressModalForm">
                 <label for="addressModalInput" class="modal-label">Payout Address</label>
                 <textarea id="addressModalInput" autocomplete="off" spellcheck="false" rows="3" placeholder="Paste your payout address here"></textarea>
diff --git a/html/js/network/smirkAuth.js b/html/js/network/smirkAuth.js
index 2ce8789..b68f8c7 100644
--- a/html/js/network/smirkAuth.js
+++ b/html/js/network/smirkAuth.js
@@ -231,45 +231,63 @@ const SmirkAuth = {
      * Should be called after DOM is ready and socket is connected
      */
     init() {
-        // Only show button if Smirk extension is available
-        if (!this.isAvailable()) {
-            console.log('Smirk extension not detected, button will not be shown');
+        const container = $('#smirkButtonContainer');
+        if (!container.length) {
+            console.log('Smirk button container not found');
             return;
         }
 
-        // Check if button already exists
-        if ($('#smirkLoginBtn').length > 0) {
-            return;
-        }
+        // Clear any existing content
+        container.empty();
 
-        // Create button
-        const btn = this._createButton();
+        if (this.isAvailable()) {
+            // Smirk extension IS installed - show connect button
+            const btn = this._createButton();
+            btn.on('click', () => this._handleClick(btn));
+            container.append(btn);
 
-        // Add click handler
-        btn.on('click', () => this._handleClick(btn));
+            // Check if already linked on page load
+            this.checkStatus().then(status => {
+                if (status.linked) {
+                    this._updateButton(btn, 'connected');
+                }
+            });
 
-        // Insert after the address button (if it exists) or after the help button
-        const addressBtn = $('#manageAddressButton');
-        if (addressBtn.length > 0) {
-            addressBtn.after(btn);
+            console.log('Smirk extension detected, connect button shown');
         } else {
-            const helpBtn = $('#helpButton');
-            if (helpBtn.length > 0) {
-                helpBtn.after(btn);
-            } else {
-                // Fallback: append to status area
-                $('#status').append(btn);
-            }
+            // Smirk extension NOT installed - show install link
+            const installLink = $('<a>')
+                .attr('href', 'https://smirk.cash')
+                .attr('target', '_blank')
+                .attr('rel', 'noopener noreferrer')
+                .css({
+                    'display': 'inline-block',
+                    'background': '#2a2a5d',
+                    'color': '#aaf',
+                    'border': '1px solid #3a3a7d',
+                    'padding': '8px 16px',
+                    'border-radius': '4px',
+                    'text-decoration': 'none',
+                    'font-size': '12px',
+                    'width': '100%',
+                    'text-align': 'center',
+                    'box-sizing': 'border-box'
+                })
+                .text('Get Smirk Wallet →')
+                .hover(
+                    function() { $(this).css('background', '#3a3a7d'); },
+                    function() { $(this).css('background', '#2a2a5d'); }
+                );
+
+            container.append(installLink);
+
+            const hint = $('<p>')
+                .css({ 'font-size': '10px', 'color': '#666', 'margin-top': '6px', 'margin-bottom': '0' })
+                .text('Install the Smirk browser extension, then refresh this page.');
+            container.append(hint);
+
+            console.log('Smirk extension not detected, showing install link');
         }
-
-        // Check if already linked on page load
-        this.checkStatus().then(status => {
-            if (status.linked) {
-                this._updateButton(btn, 'connected');
-            }
-        });
-
-        console.log('Smirk authentication module initialized');
     }
 };