Connect Telegram: stop relying on window.open inside wallet browsers

Janie can now sign in from Trust's DApp browser but cannot link Telegram.
Cause: the handler called window.open(url,'_blank'), and wallet DApp browsers
routinely block programmatic window.open. The call does nothing, no error is
raised, and the member is left staring at an unchanged screen.

Now the button fetches the link and then renders a real anchor for the member
to tap — an actual tap is handled by the OS, which is what launches the
Telegram app — plus a "copy the link" button with an execCommand fallback for
webviews that refuse both.

Third failure today from the same root assumption: that members are in a
normal browser. They are usually in someone's webview.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
martbost
2026-08-29 06:22:43 -05:00
parent 8964dfcf97
commit 9f3f28c4bf
+30 -4
View File
@@ -312,12 +312,38 @@
const tb=document.getElementById('tgLinkBtn');
tb.addEventListener('click',async function(){
tb.disabled=true;
const note=document.getElementById('tgLinkNote');
try{
const r=await(await fetch('/api/public/tg-link',{method:'POST'})).json();
if(r.url){window.open(r.url,'_blank','noopener');document.getElementById('tgLinkNote').textContent='Tap START in Telegram to finish linking.';}
else document.getElementById('tgLinkNote').textContent=r.error||'Try again shortly.';
}catch(e){document.getElementById('tgLinkNote').textContent='Network hiccup — try again.';}
tb.disabled=false;
if(!r.url){ note.textContent=r.error||'Try again shortly.'; tb.disabled=false; return; }
// Do NOT call window.open here. Wallet DApp browsers (Trust, SafePal,
// MetaMask) block programmatic window.open, so the call silently does
// nothing and the member is left looking at an unchanged screen with
// no idea anything happened. A real anchor the member taps is handled
// by the OS, which is what actually launches the Telegram app —
// and a copy button covers the webviews that refuse even that.
note.textContent='';
foot.insertAdjacentHTML('beforeend',
'<div id="tgLinkOut" style="margin-top:10px;line-height:1.7">' +
'<a id="tgOpen" class="btn btn-primary btn-sm" href="'+r.url+'" target="_blank" rel="noopener">✈️ Open Telegram to finish</a> ' +
'<button id="tgCopy" class="btn btn-secondary btn-sm">Copy the link</button>' +
'<div class="micro" id="tgCopied" style="margin-top:7px">Tap the button above, then press <b>START</b> in Telegram. ' +
'If nothing opens, copy the link and paste it into Telegram instead.</div></div>');
tb.style.display='none';
document.getElementById('tgCopy').addEventListener('click',function(){
const done=function(){document.getElementById('tgCopied').textContent='Copied — paste it into Telegram, then press START.';};
if(navigator.clipboard&&navigator.clipboard.writeText){navigator.clipboard.writeText(r.url).then(done,function(){fb();});}
else fb();
function fb(){
const t=document.createElement('textarea');
t.value=r.url; t.style.cssText='position:fixed;left:0;top:0;opacity:0';
document.body.appendChild(t); t.focus(); t.select();
try{document.execCommand('copy');done();}catch(e){}
setTimeout(function(){document.body.removeChild(t);},100);
}
});
}catch(e){note.textContent='Network hiccup — try again.';tb.disabled=false;}
});
}catch(e){}
}