From b58d419a5977605bd443598e861356644e4436a1 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 16:24:42 +0000
Subject: [PATCH] [#195] Add tooltip to Donations label on writer dashboard

Info icon with hover/tap tooltip explaining that donations are sent
directly to the writer's wallet and don't need claiming.

Fixes #195

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/app/dashboard/writer/page.tsx | 32 ++++++++++++++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/src/app/dashboard/writer/page.tsx b/src/app/dashboard/writer/page.tsx
index 03f5fe2b..52a5134f 100644
--- a/src/app/dashboard/writer/page.tsx
+++ b/src/app/dashboard/writer/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { useAccount } from "wagmi";
 import { useQuery } from "@tanstack/react-query";
 import { formatUnits } from "viem";
@@ -121,9 +122,11 @@ function StorylineDetail({ storyline, writerAddress }: { storyline: Storyline; w
           </span>
         </div>
         <div>
-          <span className="block text-[10px] uppercase tracking-wider">
+          <span className="text-[10px] uppercase tracking-wider">
             Donations
           </span>
+          <DonationsTooltip />
+          <br />
           {storyline.token_address
             ? <DonationCount storylineId={storyline.storyline_id} tokenAddress={storyline.token_address} />
             : <span className="text-foreground">—</span>
@@ -183,3 +186,30 @@ function DonationCount({ storylineId, tokenAddress }: { storylineId: number; tok
     </span>
   );
 }
+
+function DonationsTooltip() {
+  const [show, setShow] = useState(false);
+  return (
+    <span className="relative ml-1 inline-block">
+      <button
+        type="button"
+        onClick={() => setShow((v) => !v)}
+        onMouseEnter={() => setShow(true)}
+        onMouseLeave={() => setShow(false)}
+        className="text-muted hover:text-foreground text-[10px] leading-none transition-colors"
+        aria-label="Donation info"
+      >
+        &#9432;
+      </button>
+      {show && (
+        <span className="border-border bg-surface absolute bottom-full left-1/2 z-50 mb-2 w-52 -translate-x-1/2 rounded border px-3 py-2 text-[10px] leading-relaxed shadow-lg">
+          <span className="text-foreground font-medium">Donations</span>
+          <br />
+          <span className="text-muted">
+            Sent directly to your wallet when donors contribute. Already in your account — no claiming needed.
+          </span>
+        </span>
+      )}
+    </span>
+  );
+}