martbost
5aceb84863
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>
58 lines
3.4 KiB
JavaScript
58 lines
3.4 KiB
JavaScript
/* 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(); }
|
|
};
|
|
})();
|