feat: floating tip toast for improved donation visibility

Slides in from bottom-right after random 20-40s delay. Expandable to
reveal Lightning QR code and address. Session-dismissable, respects
inline TipJar dismiss state to avoid double-prompting.

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

Author: Copexit

src/app/page.tsx

@@ -23,6 +23,7 @@ import { SponsorCta } from "@/components/SponsorCta";
 import { useKeyboardNav } from "@/hooks/useKeyboardNav";
 import { useDevMode } from "@/hooks/useDevMode";
 import { DevPanel } from "@/components/DevPanel";
+import { TipToast } from "@/components/TipToast";
 
 type FixMethod = "RBF" | "CPFP";
 
@@ -417,6 +418,7 @@ export default function Home() {
         )}
       </AnimatePresence>
 
+      <TipToast />
       <DevPanel
         visible={devMode.panelVisible}
         scenarios={devMode.scenarios}

src/components/TipToast.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { QRCodeSVG } from "qrcode.react";
+import { motion, AnimatePresence } from "motion/react";
+import { Heart, X } from "lucide-react";
+import { CopyButton } from "./ui/CopyButton";
+
+const LN_ADDRESS = "woozycuticle72@walletofsatoshi.com";
+const DISMISS_KEY = "txfix-tip-toast-dismissed";
+const INLINE_DISMISS_KEY = "txfix-tip-dismissed";
+
+function isDismissed(): boolean {
+  try {
+    return (
+      sessionStorage.getItem(DISMISS_KEY) === "1" ||
+      sessionStorage.getItem(INLINE_DISMISS_KEY) === "1"
+    );
+  } catch {
+    return false;
+  }
+}
+
+function persistDismiss(): void {
+  try {
+    sessionStorage.setItem(DISMISS_KEY, "1");
+  } catch {}
+}
+
+export function TipToast() {
+  const [visible, setVisible] = useState(false);
+  const [dismissed, setDismissed] = useState(isDismissed);
+  const [expanded, setExpanded] = useState(false);
+
+  useEffect(() => {
+    if (dismissed) return;
+
+    const delay = Math.floor(Math.random() * 20000) + 20000; // 20-40s
+    const timer = setTimeout(() => setVisible(true), delay);
+    return () => clearTimeout(timer);
+  }, [dismissed]);
+
+  const handleDismiss = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    persistDismiss();
+    setDismissed(true);
+  };
+
+  return (
+    <AnimatePresence>
+      {visible && !dismissed && (
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: 20 }}
+          transition={{ duration: 0.3 }}
+          className="fixed bottom-4 right-4 left-4 sm:left-auto max-w-sm z-50"
+        >
+          <div className="relative bg-surface-elevated border border-bitcoin/30 rounded-xl shadow-xl overflow-hidden">
+            {/* Collapsed row */}
+            <button
+              onClick={() => setExpanded(!expanded)}
+              className="w-full flex items-center gap-3 px-4 py-3 text-left cursor-pointer group"
+            >
+              <Heart
+                size={16}
+                className="text-bitcoin shrink-0 group-hover:text-bitcoin/80 transition-colors"
+              />
+              <span className="text-sm text-muted group-hover:text-foreground transition-colors flex-1">
+                This tool is free and open source. Tip to keep it running.
+              </span>
+            </button>
+
+            {/* Dismiss */}
+            <button
+              onClick={handleDismiss}
+              className="absolute top-3 right-3 text-muted/50 hover:text-foreground transition-colors cursor-pointer p-0.5"
+              aria-label="Dismiss"
+            >
+              <X size={12} />
+            </button>
+
+            {/* Expanded: QR + address */}
+            <AnimatePresence>
+              {expanded && (
+                <motion.div
+                  initial={{ height: 0, opacity: 0 }}
+                  animate={{ height: "auto", opacity: 1 }}
+                  exit={{ height: 0, opacity: 0 }}
+                  transition={{ duration: 0.25 }}
+                  className="overflow-hidden"
+                >
+                  <div className="px-4 pb-4 space-y-3">
+                    <div className="border-t border-card-border pt-3" />
+
+                    <div className="flex justify-center">
+                      <div className="bg-white rounded-lg p-3">
+                        <QRCodeSVG
+                          value={`lightning:${LN_ADDRESS}`}
+                          size={140}
+                          level="M"
+                          includeMargin={false}
+                        />
+                      </div>
+                    </div>
+
+                    <div className="text-center space-y-2">
+                      <p className="text-xs text-muted">
+                        Scan with any Lightning wallet, or copy the address below
+                      </p>
+                      <div className="flex items-center justify-center gap-2">
+                        <code className="text-xs text-bitcoin bg-bitcoin/10 px-2 py-1 rounded font-mono break-all">
+                          {LN_ADDRESS}
+                        </code>
+                        <CopyButton
+                          text={LN_ADDRESS}
+                          label="Copy"
+                          className="text-[10px] px-2 py-0.5"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+}