martbost
75 lines
3.9 KiB
JavaScript
75 lines
3.9 KiB
JavaScript
// Detects "in-app browsers" — the webviews Telegram, Facebook, Instagram and
|
||
// friends open when you tap a link inside them.
|
||
//
|
||
// Why this exists: a member taps their sponsor's link in a Telegram chat,
|
||
// Telegram opens it in its own webview, and that webview can never hold a
|
||
// wallet. The page correctly reported "no wallet in this browser" and the
|
||
// member correctly replied that they were using Trust — both true, and
|
||
// completely at cross purposes. The instruction to "open your wallet's browser"
|
||
// is useless when the reason they are here is that they tapped a link.
|
||
//
|
||
// So: name the actual browser they are in, and give them the one thing that
|
||
// actually helps — the address on their clipboard.
|
||
(function () {
|
||
'use strict';
|
||
|
||
function detect() {
|
||
var ua = navigator.userAgent || '';
|
||
// Telegram exposes a proxy object in its webview on Android, and the Mini
|
||
// App bridge on both. Far more reliable than sniffing its UA, which is a
|
||
// plain Chrome string.
|
||
if (window.TelegramWebviewProxy || (window.Telegram && window.Telegram.WebApp && !window.ethereum)) return 'Telegram';
|
||
if (/FBAN|FBAV|FB_IAB/i.test(ua)) return 'Facebook';
|
||
if (/Instagram/i.test(ua)) return 'Instagram';
|
||
if (/\bLine\//i.test(ua)) return 'LINE';
|
||
if (/\bMessenger\b/i.test(ua)) return 'Messenger';
|
||
if (/\bTwitter\b/i.test(ua)) return 'X';
|
||
// Generic Android WebView: "; wv)" is the giveaway. Only treat it as an
|
||
// in-app browser when no wallet is present, since some wallet browsers are
|
||
// themselves WebViews and those are exactly the ones that DO work.
|
||
if (/; wv\)/i.test(ua) && !window.ethereum) return 'an in-app browser';
|
||
return null;
|
||
}
|
||
|
||
window.RMCInApp = {
|
||
name: detect,
|
||
// Returns HTML for the wallet-error slot, or '' when this is a normal
|
||
// browser and the existing "open your wallet's browser" advice is right.
|
||
notice: function (pathForWallet) {
|
||
var w = detect();
|
||
if (!w) return '';
|
||
var url = 'rmcircle.team' + (pathForWallet || location.pathname);
|
||
return '<b>You’re in ' + w + '’s built-in browser</b> — it can’t hold a wallet, ' +
|
||
'so no wallet app can connect here. That’s why this isn’t working, and it’s not anything you did wrong.' +
|
||
'<div style="margin-top:10px"><button type="button" id="rmcCopyAddr" class="btn btn-primary btn-sm">' +
|
||
'Copy this page’s address</button> <span id="rmcCopiedNote" class="micro" style="margin-left:8px"></span></div>' +
|
||
'<div style="margin-top:10px;line-height:1.6">Then open <b>SafePal</b> (or Trust / MetaMask), find its ' +
|
||
'<b>Browser</b> or <b>DApps</b> tab, and paste it there. Typing <b>' + url + '</b> by hand works too.</div>';
|
||
},
|
||
// Wire the copy button after the notice is inserted.
|
||
bind: function (pathForWallet) {
|
||
var btn = document.getElementById('rmcCopyAddr');
|
||
if (!btn) return;
|
||
btn.addEventListener('click', function () {
|
||
var url = 'https://rmcircle.team' + (pathForWallet || location.pathname);
|
||
var note = document.getElementById('rmcCopiedNote');
|
||
function ok() { if (note) note.textContent = 'Copied — now paste it in your wallet’s browser.'; }
|
||
if (navigator.clipboard && navigator.clipboard.writeText) {
|
||
navigator.clipboard.writeText(url).then(ok, function () { fallback(url, ok); });
|
||
} else { fallback(url, ok); }
|
||
});
|
||
function fallback(url, done) {
|
||
// Older webviews have no clipboard API — select the text so a long-press
|
||
// copy works, rather than leaving the button doing nothing.
|
||
var t = document.createElement('textarea');
|
||
t.value = 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);
|
||
}
|
||
}
|
||
};
|
||
})();
|