From 3952423e58b50e2afe97b68500f247aa7e460816 Mon Sep 17 00:00:00 2001
From: PhiMarHal <phimarhal@protonmail.com>
Date: Mon, 2 Dec 2024 13:45:58 +0100
Subject: [PATCH] disconnect wallet

---
 app.js     | 59 +++++++++++++++++++++++++++++++++++++++---------------
 styles.css | 20 ++++++++++++------
 2 files changed, 57 insertions(+), 22 deletions(-)

diff --git a/app.js b/app.js
index 2eb4d42..e76a395 100644
--- a/app.js
+++ b/app.js
@@ -839,45 +839,72 @@ async function updateWalletDisplay() {
     }
 
     try {
-        // Check if user has registered a name
         const user = await contract.users(userAddress);
         const displayText = user.name ? user.name : `${userAddress.slice(0, 6)}...${userAddress.slice(-4)}`;
 
         walletInfo.innerHTML = `
             <span class="wallet-address" 
-                  title="Click to disconnect, right-click to copy address" 
-                  style="cursor: pointer;"
+                title="${userAddress}" 
+                style="cursor: pointer;"
             >${displayText}</span>
         `;
 
-        // Get the span element
         const addressSpan = walletInfo.querySelector('.wallet-address');
-
-        // Left click to disconnect
-        addressSpan.addEventListener('click', async () => {
-            userAddress = null;
-            signer = null;
-            contract = new ethers.Contract(CONFIG.CONTRACT_ADDRESS, CONFIG.CONTRACT_ABI, provider);
-            await updateWalletDisplay();
-            showStatus('Wallet disconnected', 'success');
+        let longPressTimer;
+        let isLongPress = false;
+
+        // Desktop events
+        addressSpan.addEventListener('click', async (e) => {
+            if (!isLongPress) {
+                userAddress = null;
+                signer = null;
+                contract = new ethers.Contract(CONFIG.CONTRACT_ADDRESS, CONFIG.CONTRACT_ABI, provider);
+                await updateWalletDisplay();
+                showStatus('Wallet disconnected', 'success');
+            }
         });
 
-        // Right click to copy address
         addressSpan.addEventListener('contextmenu', async (e) => {
-            e.preventDefault(); // Prevent the context menu from appearing
+            e.preventDefault();
+            await copyAddress();
+        });
+
+        // Mobile events
+        addressSpan.addEventListener('touchstart', (e) => {
+            isLongPress = false;
+            longPressTimer = setTimeout(() => {
+                isLongPress = true;
+                copyAddress();
+            }, 500); // 500ms for long press
+        });
+
+        addressSpan.addEventListener('touchend', (e) => {
+            clearTimeout(longPressTimer);
+            if (!isLongPress) {
+                // Handle as normal click (disconnect)
+                addressSpan.click();
+            }
+        });
+
+        addressSpan.addEventListener('touchmove', (e) => {
+            clearTimeout(longPressTimer);
+            isLongPress = false;
+        });
+
+        async function copyAddress() {
             try {
                 await navigator.clipboard.writeText(userAddress);
                 showStatus('Address copied to clipboard!', 'success');
             } catch (error) {
                 showStatus('Failed to copy address', 'error');
             }
-        });
+        }
 
     } catch (error) {
         console.error('Error fetching user info:', error);
         walletInfo.innerHTML = `
             <span class="wallet-address" 
-                  title="Click to disconnect, right-click to copy address"
+                  title="Click to disconnect, hold to copy address"
                   style="cursor: pointer;"
             >${userAddress.slice(0, 6)}...${userAddress.slice(-4)}</span>
         `;
diff --git a/styles.css b/styles.css
index 79056cc..754dfa7 100644
--- a/styles.css
+++ b/styles.css
@@ -225,34 +225,42 @@ body {
     box-sizing: border-box;
 }
 
+/* Add to styles.css */
 #wallet-info {
     flex: 1;
+    height: 38px; /* Consistent height for both states */
+    display: flex;
+    align-items: center;
 }
 
 #connect-wallet {
-    padding: 16px 32px;
+    padding: 12px 24px; /* Reduced padding to match address display */
     background: var(--button-primary);
     color: white;
     font-size: 24px;
+    font-family: monospace;
     border: none;
     border-radius: 4px;
     cursor: pointer;
     transition: background 0.2s ease;
 }
 
-#connect-wallet:hover {
-    background: var(--button-hover);
-}
-
 .wallet-address {
     color: var(--text-primary);
     font-size: 24px;
     font-family: monospace;
-    padding: 16px 32px;
+    padding: 8px 16px;
     background: var(--background-dark);
     border-radius: 4px;
+    user-select: none; /* Prevent text selection on mobile */
 }
 
+
+#connect-wallet:hover {
+    background: var(--button-hover);
+}
+
+
 /* Main words container */
 #words-display {
     margin: 0 auto;  /* Changed from 20px auto */