feat: require EncryptID auth for wallet visualizations

Add requireAuth() gate to all visualization pages. Unauthenticated users
are redirected to the home page with a login prompt and auto-redirect
back after signing in.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

index.html

@@ -757,6 +757,25 @@
         // ─── EncryptID Auth ────────────────────────────────────────
         EncryptID.renderAuthButton('encryptid-auth');
 
+        // If redirected from a visualization page that requires auth, show a message
+        const urlParams = new URLSearchParams(window.location.search);
+        if (urlParams.get('login') === 'required') {
+            const returnUrl = urlParams.get('return');
+            const banner = document.createElement('div');
+            banner.style.cssText = 'background:#1e293b;border:1px solid var(--primary);border-radius:12px;padding:16px;margin-bottom:16px;text-align:center;color:#94a3b8;font-size:0.9rem;';
+            banner.innerHTML = 'Please sign in with EncryptID to access wallet visualizations.';
+            const authContainer = document.getElementById('encryptid-auth');
+            if (authContainer) authContainer.parentNode.insertBefore(banner, authContainer);
+
+            // After successful auth, redirect back
+            const checkAuth = setInterval(() => {
+                if (EncryptID.isAuthenticated() && returnUrl) {
+                    clearInterval(checkAuth);
+                    window.location.href = decodeURIComponent(returnUrl);
+                }
+            }, 500);
+        }
+
         // ─── Wallet Input Logic ────────────────────────────────────
         const DEMO_ADDRESS = '0x29567BdBcC92aCF37AC6B56B69180857bB69f7D1';
 

js/encryptid.js

@@ -233,6 +233,20 @@ const EncryptID = (() => {
         render();
     }
 
+    // ─── Auth Gate ──────────────────────────────────────────────
+
+    /**
+     * Require authentication before accessing a page.
+     * If not authenticated, redirects to index.html with a return URL.
+     * Call at the top of visualization pages.
+     */
+    function requireAuth() {
+        if (isAuthenticated()) return true;
+        const returnUrl = encodeURIComponent(window.location.href);
+        window.location.replace(`/index.html?login=required&return=${returnUrl}`);
+        return false;
+    }
+
     // ─── Public API ──────────────────────────────────────────────
     return {
         authenticate,
@@ -241,5 +255,6 @@ const EncryptID = (() => {
         isAuthenticated,
         getUser,
         renderAuthButton,
+        requireAuth,
     };
 })();

wallet-multichain-visualization.html

@@ -6,6 +6,8 @@
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💰</text></svg>">
     <title>Multi-Chain Flow | rWallet.online</title>
     <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="js/encryptid.js"></script>
+    <script>if (!EncryptID.requireAuth()) throw new Error('redirect');</script>
     <script src="js/safe-api.js?v=4"></script>
     <script src="js/data-transform.js?v=2"></script>
     <script src="js/router.js?v=5"></script>

wallet-timeline-visualization.html

@@ -6,6 +6,8 @@
     <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💰</text></svg>">
     <title>Balance River | rWallet.online</title>
     <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="js/encryptid.js"></script>
+    <script>if (!EncryptID.requireAuth()) throw new Error('redirect');</script>
     <script src="js/safe-api.js?v=4"></script>
     <script src="js/data-transform.js?v=2"></script>
     <script src="js/router.js?v=5"></script>

wallet-visualization.html

@@ -7,6 +7,8 @@
     <title>Single-Chain Flow | rWallet.online</title>
     <script src="https://d3js.org/d3.v7.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/d3-sankey@0.12.3/dist/d3-sankey.min.js"></script>
+    <script src="js/encryptid.js"></script>
+    <script>if (!EncryptID.requireAuth()) throw new Error('redirect');</script>
     <script src="js/safe-api.js?v=4"></script>
     <script src="js/data-transform.js?v=2"></script>
     <script src="js/router.js?v=5"></script>