From 7ec14061eb3677a14091e521926501081b112b18 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Sun, 29 Jun 2025 19:40:47 -0400
Subject: [PATCH] update

---
 landing/tip-jar.html | 183 ++++++++++++++++++++++---------------------
 1 file changed, 95 insertions(+), 88 deletions(-)
diff --git a/landing/tip-jar.html b/landing/tip-jar.html
index 4d2d342..d5c1886 100644
--- a/landing/tip-jar.html
+++ b/landing/tip-jar.html
@@ -4,36 +4,36 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Lightning Tip Jar</title>
-    <!-- TailwindCSS (Play CDN) -->
+
+    <!-- TailwindCSS (Play CDN for demo) -->
     <script src="https://cdn.tailwindcss.com"></script>
+
     <!-- QRCode generator -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js" integrity="sha512-Rdym6z1nIh/x6O+4QJBk/w++Q5e7oapbPo8EjS2X3tq6MUJBbiuKxVhQ5BaRPHUl2j3Ky4gGB4vJfIQDw4RGeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
 
     <style>
-      :root {
-        --accent-purple: #a855f7;
-        --accent-orange: #f97316;
+      :root { --accent-purple: #a855f7; --accent-orange: #f97316; }
+      body {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        margin: 0;
       }
       .accent-gradient {
         background: linear-gradient(90deg, var(--accent-purple), var(--accent-orange));
         -webkit-background-clip: text;
         -webkit-text-fill-color: transparent;
       }
-      .btn-primary {
-        @apply w-full py-2 rounded-lg bg-gradient-to-r from-purple-600 to-orange-500 text-white font-semibold transition active:scale-95;
-      }
     </style>
   </head>
 
-  <body class="min-h-screen flex items-center justify-center bg-gray-900 text-gray-200">
+  <body class="bg-gray-900 text-gray-200">
     <main id="app" class="w-full max-w-sm p-6 space-y-6 text-center"></main>
 
     <script type="module">
-      /******************** Imports ********************/
-      import { nip19 } from "https://cdn.jsdelivr.net/npm/nostr-tools@2.15.0/+esm";
-      import { SimplePool } from "https://cdn.jsdelivr.net/npm/nostr-tools@2.15.0/pool/+esm";
+      import { nip19, SimplePool } from "https://esm.sh/nostr-tools@1.7.5?bundle";
 
-      /******************** Config ********************/
       const RELAYS = [
         "wss://relay.damus.io",
         "wss://nos.lol",
@@ -41,118 +41,125 @@
         "wss://relay.primal.net",
         "wss://relay.nostr.band",
       ];
-      const TIMEOUT_MS = 7000;
+      const TIMEOUT_MS = 8000;
 
-      /******************** Logger ********************/
-      const log  = (...a) => console.log("[tipjar]", ...a);
+      const log = (...a) => console.log("[tipjar]", ...a);
       const warn = (...a) => console.warn("[tipjar]", ...a);
-      const err  = (...a) => console.error("[tipjar]", ...a);
-      window.addEventListener("error",   e => err("Uncaught:", e.message, e.error||e));
-      window.addEventListener("unhandledrejection", e => err("Promise rejection:", e.reason));
+      const error = (...a) => console.error("[tipjar]", ...a);
+      window.addEventListener("error", e => error("Uncaught:", e.message));
+      window.addEventListener("unhandledrejection", e => error("Promise rejection:", e.reason));
 
-      /******************** Entry ********************/
       init();
 
       function init() {
-        const { npub, basePath } = parseURL();
-        if (!npub)        return showLanding(basePath);
-        if (!npub.startsWith("npub")) return showLanding(basePath, "Please enter a valid npub.");
-        loadTipJar(npub);
+        const { npub, base } = parseUrl();
+        if (!npub) return renderLanding(base);
+        if (!npub.startsWith("npub")) return renderLanding(base, "Invalid npub provided.");
+        renderTipJar(npub);
       }
 
-      /******** URL helpers ********/
-      function parseURL() {
-        const pathParts = location.pathname.split("/").filter(Boolean);
+      function parseUrl() {
+        const parts = location.pathname.split("/").filter(Boolean);
         let npub = null;
-        if (pathParts.length >= 2 && pathParts[0] === "n") npub = pathParts[1];
+        if (parts[0] === "n" && parts[1]) npub = parts[1];
         else npub = new URLSearchParams(location.search).get("n");
         const idx = location.pathname.indexOf("/n/");
-        const base = idx >= 0 ? location.pathname.slice(0, idx) : location.pathname;
-        return { npub, basePath: base };
+        const base = idx > 0 ? location.pathname.slice(0, idx) : location.pathname;
+        return { npub, base };
       }
 
-      /******** LANDING PAGE ********/
-      function showLanding(basePath, msg = "") {
-        document.getElementById("app").innerHTML = `
+      function renderLanding(base, msg = '') {
+        document.getElementById('app').innerHTML = `
           <div class="space-y-6">
             <h1 class="text-3xl font-extrabold accent-gradient">Lightning Tip Jar</h1>
-            <p class="text-gray-400">Generate a one‑click tipping page from any Nostr <span class="font-mono">npub</span>.</p>
-            ${msg ? `<p class="text-red-500">${msg}</p>` : ""}
-            <form id="lookup" class="space-y-4">
-              <input id="npubIn" type="text" placeholder="npub1…" required class="w-full px-4 py-2 rounded-lg bg-gray-800 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-600" />
-              <button type="submit" class="btn-primary">Create Tip Page</button>
+            <p class="text-gray-400">Enter a Nostr <span class="font-mono">npub…</span> to create a tipping page.</p>
+            ${msg ? `<p class='text-red-500'>${msg}</p>` : ''}
+            <form id="form" class="space-y-4">
+              <input id="input" type="text" placeholder="npub1…" required class="w-full px-4 py-2 rounded-lg bg-gray-800 text-gray-200 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-purple-600" />
+              <button class="w-full py-2 rounded-lg bg-gradient-to-r from-purple-600 to-orange-500 text-white font-semibold transition active:scale-95" type="submit">Generate</button>
             </form>
-            <footer class="text-xs text-gray-500 pt-4">Works entirely client‑side • No servers • 100% Lightning ⚡</footer>
+            <footer class="text-xs text-gray-500">Client-side • No servers • Lightning ⚡</footer>
           </div>`;
-
-        document.getElementById("lookup").onsubmit = (e) => {
+        document.getElementById('form').onsubmit = e => {
           e.preventDefault();
-          const val = document.getElementById("npubIn").value.trim();
-          if (!val.startsWith("npub")) return showLanding(basePath, "npub should start with ‘npub’. Try again.");
-          const isFile = /\.html?$/.test(basePath);
-          const dest = isFile ? `${basePath}?n=${val}` : `${basePath.replace(/\/$/, "")}/n/${val}`;
-          location.href = dest;
+          const v = document.getElementById('input').value.trim();
+          if (!v.startsWith('npub')) return renderLanding(base, 'npub must start with "npub".');
+          const isFile = /\.html?$/.test(base);
+          location.href = isFile ? `${base}?n=${v}` : `${base.replace(/\/$/, '')}/n/${v}`;
         };
       }
 
-      /******** TIP‑JAR FLOW ********/
-      async function loadTipJar(npub) {
-        const app = document.getElementById("app");
+      async function renderTipJar(npub) {
+        const app = document.getElementById('app');
         app.innerHTML = `
           <img id="avatar" class="w-24 h-24 rounded-full mx-auto hidden" alt="Avatar" />
-          <h1 id="name"   class="text-2xl font-extrabold accent-gradient mb-2">Loading…</h1>
-          <p  id="about"  class="text-sm text-gray-400"></p>
-          <div id="qrcode" class="mx-auto"></div>
-          <p  id="address" class="break-all font-mono text-lg"></p>
-          <button id="copy"   class="btn-primary">Copy Address</button>`;
+          <h1 id="name" class="text-2xl font-extrabold accent-gradient mb-2">Loading…</h1>
+          <p id="about" class="text-sm text-gray-400"></p>
+          <div id="qrcode" class="mx-auto bg-white p-4 rounded-xl inline-block"></div>
+          <p id="addr" class="break-all font-mono text-lg"></p>
+          <button id="copy" class="w-full py-2 rounded-lg bg-gradient-to-r from-purple-600 to-orange-500 text-white font-semibold transition active:scale-95">Copy Address</button>`;
 
-        // decode npub
         let hex;
-        try { hex = nip19.decode(npub).data; log("Hex pubkey", hex); }
-        catch { return fail("Bad npub format"); }
+        try {
+          const dec = nip19.decode(npub);
+          hex = dec.data;
+          log('Decoded hex pubkey', hex);
+        } catch {
+          return fatal(app, 'Bad npub format');
+        }
 
         const fallback = `${npub}@npub.cash`;
-        let meta = null, addr = fallback;
+        let meta = null, ln = fallback;
 
         const pool = new SimplePool();
-        const sub  = pool.sub(RELAYS, [{ kinds:[0], authors:[hex], limit:1 }]);
-        let finished = false;
-        const timer = setTimeout(() => { warn("Timeout: no profile"); wrapUp(); }, TIMEOUT_MS);
+        const sub = pool.sub(RELAYS, [{ kinds: [0], authors: [hex], limit: 1 }]);
+        const timer = setTimeout(() => { warn('Relay timeout'); finalize(); }, TIMEOUT_MS);
 
-        sub.on("event", (ev, relay) => {
-          log("Profile", ev.id, "from", relay);
-          clearTimeout(timer); finished = true;
+        sub.on('event', ev => {
+          clearTimeout(timer);
           try {
-            meta = JSON.parse(ev.content || "{}");
-            addr = meta.lud16 || meta.lud06 || fallback;
-          } catch(e) { err("Meta parse", e); }
-          wrapUp();
+            meta = JSON.parse(ev.content || '{}');
+            ln = meta.lud16 || meta.lud06 || fallback;
+            log('Profile metadata', meta);
+          } catch (e) {
+            error('Failed to parse metadata JSON', e);
+          }
+          finalize();
         });
-        sub.on("notice", (n) => warn("Relay notice", n));
-        sub.on("eose", () => { if (!finished) warn("EOSE no profile"); });
+        sub.on('eose', () => warn('EOSE reached, no event'));
 
-        function wrapUp() {
-          try { sub.unsub(); pool.close(RELAYS); } catch {}
-          render(meta, addr);
+        function finalize() {
+          try { sub.unsub(); pool.close(); } catch {};
+          buildUI(app, meta, ln);
+        }
+
+        function fatal(container, msg) {
+          container.innerHTML = `<p class='text-red-500'>${msg}</p>`;
         }
-        function fail(msg){ app.innerHTML = `<p class='text-red-500'>${msg}</p>`; }
       }
 
-      /******** RENDER TIP CARD ********/
-      function render(meta, ln) {
-        document.getElementById("name").textContent  = meta?.name  || "Lightning Tip Jar";
-        document.getElementById("about").textContent = meta?.about || "";
-        if (meta?.picture){ const img = document.getElementById("avatar"); img.src = meta.picture; img.classList.remove("hidden"); }
-        if (!meta?.lud16 && !meta?.lud06) document.getElementById("about").textContent += "\n(No lightning address on profile; using fallback)";
-
-        document.getElementById("address").textContent = ln;
-        const qr = document.getElementById("qrcode"); qr.innerHTML = "";
-        new QRCode(qr, { text: ln, width: 200, height: 200, colorDark: "#fff", colorLight: "#000", correctLevel: QRCode.CorrectLevel.H });
-
-        document.getElementById("copy").onclick = () => {
+      function buildUI(app, meta, ln) {
+        document.getElementById('name').textContent = meta?.name || 'Lightning Tip Jar';
+        if (meta?.about) document.getElementById('about').textContent = meta.about;
+        if (meta?.picture) {
+          const img = document.getElementById('avatar');
+          img.src = meta.picture;
+          img.classList.remove('hidden');
+        }
+        if (!meta?.lud16 && !meta?.lud06) {
+          const about = document.getElementById('about');
+          about.textContent += ' (using fallback address)';
+        }
+        document.getElementById('addr').textContent = ln;
+        const qrEl = document.getElementById('qrcode');
+        qrEl.innerHTML = '';
+        new QRCode(qrEl, { text: ln, width: 200, height: 200, colorDark: '#111', colorLight: '#fff' });
+        document.getElementById('copy').onclick = () => {
           navigator.clipboard.writeText(ln).then(() => {
-            const btn = document.getElementById("copy"); const old = btn.textContent;
-            btn.textContent = "Copied!"; setTimeout(()=>btn.textContent=old, 1500);
+            const btn = document.getElementById('copy');
+            const old = btn.textContent;
+            btn.textContent = 'Copied!';
+            setTimeout(() => btn.textContent = old, 1200);
           });
         };
       }
