Detect in-app browsers — the actual reason #34 could not connect

Janie's screenshot showed the X / chevron / share / kebab chrome of TELEGRAM'S
in-app browser, not Trust's DApp browser. She tapped her sponsor's link in a
Telegram chat, Telegram opened it in its own webview, and that webview can
never hold a wallet. The page said "no wallet in this browser", she said she
was using Trust — both true, completely at cross purposes.

Our advice made it worse: "open your wallet's browser and type the address" is
useless to someone whose whole reason for being on the page is that they
tapped a link.

Now we name the browser they are actually in — Telegram, Facebook, Instagram,
LINE, Messenger, X, or a generic Android WebView — say plainly that it cannot
hold a wallet and that this is not their fault, and give them the one useful
thing: a button that copies the address to the clipboard so they can paste it
into Trust. There is an execCommand fallback because older webviews have no
clipboard API, and leaving a button that silently does nothing would be worse
than not having one.

Detection deliberately requires the absence of window.ethereum before calling
something an in-app browser: wallet browsers ARE WebViews, and those are
exactly the ones that work. Verified against Telegram, Android WebView, Trust
(correctly ignored) and mobile Safari (correctly ignored).

This will hit far more members than Janie — every link tapped inside a chat
app lands in the same trap.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

public/inapp-browser.js

@@ -0,0 +1,74 @@
+// 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>Trust</b> (or MetaMask / SafePal), 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);
+      }
+    }
+  };
+})();