[#835] Fix SSR hydration mismatch in Writer tab expired badge

package.json

@@ -1,6 +1,6 @@
 {
   "name": "plotlink",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "private": true,
   "workspaces": [
     "packages/*"

src/app/profile/[address]/page.tsx

@@ -11,7 +11,7 @@
 import { getFullUserProfile, getFarcasterProfile } from "../../../../lib/actions";
 import { truncateAddress } from "../../../../lib/utils";
 import { formatPrice, formatSupply } from "../../../../lib/format";
 import { getTokenPrice, mcv2BondAbi, erc20Abi, type TokenPriceInfo, get24hPriceChange, getTokenTVL } from "../../../../lib/price";
 import { browserClient } from "../../../../lib/rpc";
 import type { FarcasterProfile } from "../../../../lib/farcaster";
 import type { AgentMetadata } from "../../../../lib/contracts/erc8004";
@@ -133,7 +133,7 @@
       if (r <= 0) clearInterval(interval);
     }, 1000);
     return () => clearInterval(interval);
   }, [dbUser?.steemhunt_fetched_at]);
 
   const onCooldown = cooldownRemaining > 0;
 
@@ -683,7 +683,7 @@
   });
 
   // Claimable royalties (own profile only)
   const { data: royaltyInfo } = useQuery({
     queryKey: ["profile-royalties", address],
     queryFn: async () => {
       const [balance, claimed] = await browserClient.readContract({
@@ -840,7 +840,7 @@
 }) {
   const tokenAddr = storyline.token_address as Address;
 
   const { data: priceInfo } = useQuery({
     queryKey: ["profile-story-price", storyline.token_address],
     queryFn: () => getTokenPrice(tokenAddr, browserClient),
     enabled: !!storyline.token_address,
@@ -884,18 +884,25 @@
     enabled: !!storyline.token_address,
   });
 
-  const checkExpired = useCallback(
-    () => !storyline.sunset && storyline.has_deadline && !!storyline.last_plot_time &&
-      Date.now() > new Date(storyline.last_plot_time).getTime() + DEADLINE_MS,
-    [storyline.sunset, storyline.has_deadline, storyline.last_plot_time],
-  );
-  const [isExpired, setIsExpired] = useState(checkExpired);
+  const [isExpired, setIsExpired] = useState(false);
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect -- initial sync needed for SSR hydration safety
-    setIsExpired(checkExpired());
-    const interval = setInterval(() => setIsExpired(checkExpired()), 1_000);
-    return () => clearInterval(interval);
-  }, [checkExpired]);
+    if (storyline.sunset || !storyline.has_deadline || !storyline.last_plot_time) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- reset when props change (e.g. deadline extension)
+      setIsExpired(false);
+      return;
+    }
+    const expiryTime = new Date(storyline.last_plot_time).getTime() + DEADLINE_MS;
+    const remaining = expiryTime - Date.now();
+    if (remaining <= 0) {
+      // eslint-disable-next-line react-hooks/set-state-in-effect -- one-time sync for already-expired storylines
+      setIsExpired(true);
+      return;
+    }
+    // eslint-disable-next-line react-hooks/set-state-in-effect -- reset in case props changed from expired to active
+    setIsExpired(false);
+    const timeout = setTimeout(() => setIsExpired(true), remaining);
+    return () => clearTimeout(timeout);
+  }, [storyline.sunset, storyline.has_deadline, storyline.last_plot_time]);
 
   return (
     <>