From 78705c03b9397026ca36a21a92d8877e7dd0e0d2 Mon Sep 17 00:00:00 2001
From: Cho Young-Hwi <cyh76507707@gmail.com>
Date: Mon, 16 Mar 2026 15:23:04 +0000
Subject: [PATCH] [#175] Show Claim Royalties always with disabled state and
 tooltip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Remove early return null — section always visible in writer dashboard
- Claim button disabled when plotCount < 2 or unclaimed === 0
- Info icon (ⓘ) with hover/tap tooltip explaining royalties, unlock
  conditions, and current status with dynamic values
- Shows unlock hint: "Chain N more plots to unlock royalties"
- Unclaimed amount always displayed even when 0

Fixes #175

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/ClaimRoyalties.tsx | 80 +++++++++++++++++++++----------
 1 file changed, 54 insertions(+), 26 deletions(-)

diff --git a/src/components/ClaimRoyalties.tsx b/src/components/ClaimRoyalties.tsx
index c6aca146..e0403d5c 100644
--- a/src/components/ClaimRoyalties.tsx
+++ b/src/components/ClaimRoyalties.tsx
@@ -21,6 +21,7 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary }: ClaimRo
   const [error, setError] = useState<string | null>(null);
   const [claimedAmount, setClaimedAmount] = useState<bigint>(BigInt(0));
   const [txHash, setTxHash] = useState<string | null>(null);
+  const [showTooltip, setShowTooltip] = useState(false);
 
   const { writeContractAsync } = useWriteContract();
 
@@ -43,6 +44,7 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary }: ClaimRo
 
   const unclaimed = royaltyInfo?.unclaimed ?? BigInt(0);
   const eligible = plotCount >= 2;
+  const canClaim = eligible && unclaimed > BigInt(0);
 
   const executeClaim = useCallback(async () => {
     try {
@@ -74,41 +76,67 @@ export function ClaimRoyalties({ tokenAddress, plotCount, beneficiary }: ClaimRo
     setError(null);
   }, []);
 
-  // Don't show if no royalties to claim
-  if (unclaimed === BigInt(0) && txState === "idle") return null;
-
   return (
     <div className="mt-3">
       <div className="flex items-center justify-between text-xs">
-        <div>
+        <div className="flex items-center gap-1.5">
           <span className="text-muted text-[10px] uppercase tracking-wider">
-            Unclaimed Royalties
+            Royalties
           </span>
-          <span className="text-foreground ml-2">
+          {/* Info icon with tooltip */}
+          <div className="relative inline-block">
+            <button
+              type="button"
+              onClick={() => setShowTooltip((v) => !v)}
+              onMouseEnter={() => setShowTooltip(true)}
+              onMouseLeave={() => setShowTooltip(false)}
+              className="text-muted hover:text-foreground text-[10px] leading-none transition-colors"
+              aria-label="Royalty info"
+            >
+              &#9432;
+            </button>
+            {showTooltip && (
+              <div className="border-border bg-surface absolute bottom-full left-1/2 z-50 mb-2 w-56 -translate-x-1/2 rounded border px-3 py-2 text-[10px] leading-relaxed shadow-lg">
+                <p className="text-foreground font-medium">Royalties</p>
+                <p className="text-muted mt-1">
+                  You earn a share of every trade on your storyline&apos;s token.
+                </p>
+                <p className="text-muted mt-1.5">To claim:</p>
+                <ul className="text-muted mt-0.5 list-inside list-disc">
+                  <li>
+                    Chain at least 2 plots ({plotCount}/2)
+                  </li>
+                  <li>
+                    Unclaimed &gt; 0 ({formatUnits(unclaimed, 18)} {reserveLabel})
+                  </li>
+                </ul>
+              </div>
+            )}
+          </div>
+          <span className="text-foreground ml-1">
             {formatUnits(unclaimed, 18)} {reserveLabel}
           </span>
         </div>
-        {eligible ? (
-          <button
-            onClick={txState === "done" || txState === "error" ? reset : executeClaim}
-            disabled={
-              (txState === "idle" && unclaimed === BigInt(0)) ||
-              (txState !== "idle" && txState !== "done" && txState !== "error")
-            }
-            className="bg-accent text-background rounded px-3 py-1 text-[10px] font-medium transition-opacity disabled:opacity-40"
-          >
-            {txState === "idle" && "Claim"}
-            {txState === "confirming" && "Confirm..."}
-            {txState === "pending" && "Pending..."}
-            {txState === "done" && `Claimed ${formatUnits(claimedAmount, 18)} ${reserveLabel}`}
-            {txState === "error" && "Retry"}
-          </button>
-        ) : (
-          <span className="text-muted text-[10px]">
-            Chain plot #1 to unlock
-          </span>
-        )}
+        <button
+          onClick={txState === "done" || txState === "error" ? reset : executeClaim}
+          disabled={
+            (txState === "idle" && !canClaim) ||
+            (txState !== "idle" && txState !== "done" && txState !== "error")
+          }
+          className="bg-accent text-background rounded px-3 py-1 text-[10px] font-medium transition-opacity disabled:opacity-40"
+        >
+          {txState === "idle" && "Claim"}
+          {txState === "confirming" && "Confirm..."}
+          {txState === "pending" && "Pending..."}
+          {txState === "done" && `Claimed ${formatUnits(claimedAmount, 18)} ${reserveLabel}`}
+          {txState === "error" && "Retry"}
+        </button>
       </div>
+      {!eligible && txState === "idle" && (
+        <p className="text-muted mt-1 text-[10px]">
+          Chain {2 - plotCount} more {2 - plotCount === 1 ? "plot" : "plots"} to unlock royalties
+        </p>
+      )}
       {txHash && txState === "done" && (
         <p className="text-muted mt-1 text-[10px]">
           Tx:{" "}