Add EIP-6963 multi-wallet picker to the join tools

Both /join-now and /direct-join now discover every injected wallet (Brave, MetaMask, SafePal, Trust, Coinbase…) via EIP-6963 and, when more than one is present, show a 'Choose your wallet' picker on connect — instead of blindly grabbing window.ethereum (which silently hangs when e.g. Brave's built-in wallet wins the slot). Shared public/rmc-wallet.js; provider resolved on connect and wallet events bound once after. Falls back to window.ethereum for legacy single-provider wallets. CSP-safe (6963 icons are data URIs). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-08-18 08:01:07 -05:00
parent 853e4736c9
commit 5aceb84863
5 changed files with 84 additions and 23 deletions
@@ -0,0 +1,57 @@
+/* RM Circle — EIP-6963 multi-wallet discovery + picker.
+   Lets the user choose among ALL injected wallets (Brave, MetaMask, SafePal,
+   Trust, Coinbase…) instead of whatever won the window.ethereum fight — which is
+   why "connect" silently hangs when e.g. Brave's built-in wallet grabs the slot.
+   CSP-safe: no external libs, and EIP-6963 wallet icons are data: URIs. */
+(function(){
+  'use strict';
+  var found=[], seen={};
+  function onAnnounce(e){
+    var d=e&&e.detail; if(!d||!d.info||!d.provider) return;
+    var key=d.info.uuid||d.info.rdns||d.info.name; if(seen[key]) return; seen[key]=1;
+    found.push({info:d.info, provider:d.provider});
+  }
+  window.addEventListener('eip6963:announceProvider', onAnnounce);
+  function request(){ try{ window.dispatchEvent(new Event('eip6963:requestProvider')); }catch(e){} }
+  request();
+
+  function showPicker(list){
+    return new Promise(function(resolve){
+      var ov=document.createElement('div');
+      ov.style.cssText='position:fixed;inset:0;background:rgba(3,10,18,.74);display:flex;align-items:center;justify-content:center;z-index:99999;padding:20px';
+      var box=document.createElement('div');
+      box.style.cssText='background:#0b1e30;border:1px solid #27445e;border-radius:16px;padding:20px;max-width:360px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.55)';
+      var h=document.createElement('div'); h.style.cssText='font-weight:800;font-size:17px;color:#f7f9fc;margin-bottom:4px'; h.textContent='Choose your wallet'; box.appendChild(h);
+      var s=document.createElement('div'); s.style.cssText='color:#aebdca;font-size:13px;margin-bottom:14px'; s.textContent='Pick the wallet you want to connect with.'; box.appendChild(s);
+      list.forEach(function(w){
+        var b=document.createElement('button');
+        b.style.cssText='display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:#132c43;border:1px solid #294a65;border-radius:11px;padding:12px 14px;margin-bottom:8px;cursor:pointer;color:#f7f9fc;font-weight:700;font-size:15px';
+        if(w.info.icon){ var img=document.createElement('img'); img.src=w.info.icon; img.alt=''; img.style.cssText='width:26px;height:26px;border-radius:6px;flex:none'; b.appendChild(img); }
+        var sp=document.createElement('span'); sp.textContent=w.info.name||'Wallet'; b.appendChild(sp);
+        b.addEventListener('click',function(){ try{document.body.removeChild(ov);}catch(e){} resolve(w.provider); });
+        box.appendChild(b);
+      });
+      var c=document.createElement('button'); c.textContent='Cancel';
+      c.style.cssText='width:100%;background:transparent;border:0;color:#8498aa;padding:8px;margin-top:2px;cursor:pointer;font-size:13px';
+      c.addEventListener('click',function(){ try{document.body.removeChild(ov);}catch(e){} resolve(null); });
+      box.appendChild(c);
+      ov.appendChild(box); document.body.appendChild(ov);
+    });
+  }
+
+  window.RMCWallet={
+    // Resolve a provider: 0 discovered -> legacy window.ethereum; 1 -> use it; 2+ -> ask.
+    pick:function(){
+      return new Promise(function(resolve){
+        request();
+        setTimeout(function(){
+          var list=found.slice();
+          if(list.length===0){ resolve(window.ethereum||null); return; }
+          if(list.length===1){ resolve(list[0].provider); return; }
+          showPicker(list).then(resolve);
+        }, 160);
+      });
+    },
+    list:function(){ return found.slice(); }
+  };
+})();