Hide MetaMask donation button when no compatible wallet is detected

- Hide donation button by default in popup.html
- Show 'Checking for Web3 wallet...' message initially
- Check wallet availability on popup load
- Only show donation button when MetaMask/wallet is detected
- Display helpful message when no wallet is found
- Handle detection errors gracefully
- Improve user experience by not showing unavailable options

popup.html

@@ -104,10 +104,10 @@
     </div>
     
     <div style="margin-bottom: 6px;">
-      <button id="web3-donate-btn" style="background: linear-gradient(45deg, #f6851b, #e2761b); color: white; border: none; padding: 4px 8px; border-radius: 4px; font-size: 10px; cursor: pointer; margin-bottom: 4px;">
+      <button id="web3-donate-btn" style="background: linear-gradient(45deg, #f6851b, #e2761b); color: white; border: none; padding: 4px 8px; border-radius: 4px; font-size: 10px; cursor: pointer; margin-bottom: 4px; display: none;">
         🦊 Donate with MetaMask
       </button>
-      <div id="web3-status" style="font-size: 9px; color: #666; display: none;"></div>
+      <div id="web3-status" style="font-size: 9px; color: #666; display: block;">Checking for Web3 wallet...</div>
     </div>
     
     <div style="font-size: 10px; margin-bottom: 4px;">

popup.js

@@ -22,10 +22,55 @@ document.addEventListener('DOMContentLoaded', function() {
   const stopBtn = document.getElementById('stop-btn');
   const statusDiv = document.getElementById('status');
   const progressDiv = document.getElementById('progress');
+  const web3DonateBtn = document.getElementById('web3-donate-btn');
+  const web3Status = document.getElementById('web3-status');
 
   let isRunningBulk = false;
   let shouldStop = false;
 
+  // Check for MetaMask availability and update UI accordingly
+  async function checkWalletAvailability() {
+    try {
+      console.log('Checking wallet availability...');
+      web3Status.textContent = 'Checking for Web3 wallet...';
+      web3Status.style.color = '#666';
+      web3Status.style.fontSize = '11px';
+
+      const isAvailable = await checkMetaMaskAvailable();
+
+      if (isAvailable) {
+        console.log('Wallet detected, showing donation button');
+        web3DonateBtn.style.display = 'block';
+        web3Status.textContent = 'Web3 wallet detected! 🎉';
+        web3Status.style.color = '#4CAF50';
+        web3Status.style.fontSize = '10px';
+
+        // Hide the status after a short delay
+        setTimeout(() => {
+          web3Status.style.display = 'none';
+        }, 2000);
+      } else {
+        console.log('No wallet detected, hiding donation button');
+        web3DonateBtn.style.display = 'none';
+        web3Status.textContent = 'Install MetaMask or another Web3 wallet to support the project 💝';
+        web3Status.style.color = '#666';
+        web3Status.style.fontSize = '10px';
+        web3Status.style.display = 'block';
+      }
+    } catch (error) {
+      console.error('Error checking wallet availability:', error);
+      // Hide donation button on error to be safe
+      web3DonateBtn.style.display = 'none';
+      web3Status.textContent = 'Unable to check wallet availability';
+      web3Status.style.color = '#f44336';
+      web3Status.style.fontSize = '10px';
+      web3Status.style.display = 'block';
+    }
+  }
+
+  // Initialize wallet check
+  checkWalletAvailability();
+
   function showStatus(message, type = 'info') {
     statusDiv.textContent = message;
     statusDiv.className = `status ${type}`;
@@ -220,9 +265,6 @@ document.addEventListener('DOMContentLoaded', function() {
   });
 
   // Web3/MetaMask donation functionality
-  const web3DonateBtn = document.getElementById('web3-donate-btn');
-  const web3Status = document.getElementById('web3-status');
-
   function showWeb3Status(message, isError = false) {
     web3Status.textContent = message;
     web3Status.style.color = isError ? '#f44336' : '#4CAF50';