Mobile wallet deep links on the join page: no injected wallet -> offer Open-in-MetaMask/Trust buttons that reopen this URL (ref included) inside the wallet's dApp browser

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-19 10:12:55 -05:00
parent d620555209
commit 506db9de81
2 changed files with 19 additions and 1 deletions
+7
View File
@@ -21,6 +21,13 @@
<h2 style="margin:0 0 10px;font-size:18px">1 · Connect your wallet</h2>
<p style="color:var(--muted);font-size:14px;margin:0 0 14px">Use MetaMask or Trust Wallet on <strong>Polygon</strong>, funded with enough POL for your Premium entry plus a little gas.</p>
<button id="connectBtn" class="btn btn-primary">Connect wallet</button>
<div id="walletHelp" style="display:none;margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:12px;background:#08192880">
<div style="font-weight:800;margin-bottom:6px">📱 On your phone? Open this page inside your wallet app.</div>
<p style="color:var(--muted);font-size:13px;margin:0 0 10px">Mobile browsers can't see your wallet — but your wallet app has its own browser that can. Tap your wallet below and this exact page (with the right sponsor) opens inside it, ready to connect:</p>
<a id="mmDeep" class="btn btn-secondary" style="width:100%;margin-bottom:8px" href="#">🦊 Open in MetaMask</a>
<a id="twDeep" class="btn btn-secondary" style="width:100%" href="#">🛡️ Open in Trust Wallet</a>
<p class="micro" style="margin:10px 0 0">Don't have a wallet yet? <a href="/training">Video 2 in the training</a> shows how to set one up safely (2 minutes). On a computer, install the MetaMask browser extension and refresh this page.</p>
</div>
<div id="connected" style="display:none">
<div class="dj-kv"><span>Wallet</span><b id="wallet" class="dj-mono">—</b></div>
<div class="dj-kv"><span>Network</span><b>Polygon Mainnet ✓</b></div>
+12 -1
View File
@@ -81,7 +81,7 @@
async function connect(){
try{
eth=await window.RMCWallet.pick();
if(!eth){ log('No wallet selected or detected. Install/unlock MetaMask, Trust, or SafePal and try again.','err'); return; }
if(!eth){ showWalletHelp(); log('No wallet detected in this browser. On a phone, use the "Open in your wallet" buttons above — on a computer, install/unlock MetaMask and refresh.','err'); return; }
attachWalletEvents();
log('Requesting wallet connection…');
var accs=await req('eth_requestAccounts'); account=accs[0];
@@ -143,6 +143,17 @@
}catch(e){}
}
// Mobile browsers have no injected wallet — offer deep links that reopen
// THIS page (query string included, so ?ref= survives) inside the wallet
// app's own browser, where window.ethereum exists.
function showWalletHelp(){
var box=$('walletHelp'); if(!box) return;
var here=location.host+location.pathname+location.search;
var mm=$('mmDeep'); if(mm) mm.href='https://metamask.app.link/dapp/'+here;
var tw=$('twDeep'); if(tw) tw.href='https://link.trustwallet.com/open_url?url='+encodeURIComponent(location.href);
box.style.display='block';
}
function attachWalletEvents(){
if(!eth||!eth.on||eth.__rmcBound) return; eth.__rmcBound=true;
eth.on('accountsChanged',function(accs){ account=(accs&&accs[0])||null; if(!account){ $('connected').style.display='none'; $('connectBtn').style.display=''; } else { $('wallet').textContent=account.slice(0,6)+'…'+account.slice(-4); refreshBalance(); } });