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(null); const [claimedAmount, setClaimedAmount] = useState(BigInt(0)); const [txHash, setTxHash] = useState(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 (
-
+
- Unclaimed Royalties + Royalties - + {/* Info icon with tooltip */} +
+ + {showTooltip && ( +
+

Royalties

+

+ You earn a share of every trade on your storyline's token. +

+

To claim:

+
    +
  • + Chain at least 2 plots ({plotCount}/2) +
  • +
  • + Unclaimed > 0 ({formatUnits(unclaimed, 18)} {reserveLabel}) +
  • +
+
+ )} +
+ {formatUnits(unclaimed, 18)} {reserveLabel}
- {eligible ? ( - - ) : ( - - Chain plot #1 to unlock - - )} +
+ {!eligible && txState === "idle" && ( +

+ Chain {2 - plotCount} more {2 - plotCount === 1 ? "plot" : "plots"} to unlock royalties +

+ )} {txHash && txState === "done" && (

Tx:{" "}