fix(poidh): refresh bounty state after submitForVote/resolve/cancel (#91)

fix(poidh): refresh bounty state after submitForVote/resolve/cancel

Author: sktbrd

src/components/bounties/BountyDetailView.tsx

@@ -1,8 +1,8 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import Link from "next/link";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import {
   AlertCircle,
   ArrowLeft,
@@ -47,7 +47,7 @@ import { POIDH_ABI } from "@/lib/poidh/abi";
 import { CHAIN_NAMES, getExplorerUrl, getTxUrl, POIDH_CONTRACTS } from "@/lib/poidh/config";
 import { getThirdwebClient } from "@/lib/thirdweb";
 import { THIRDWEB_AA_CONFIG, THIRDWEB_WALLETS } from "@/lib/thirdweb-wallets";
-import type { PoidhBounty } from "@/types/poidh";
+import type { PoidhBounty, PoidhClaim } from "@/types/poidh";
 
 const VIDEO_EXTENSIONS = /\.(mov|mp4|webm|ogg|m4v)(\?.*)?$/i;
 const IPFS_GATEWAYS = [
@@ -183,6 +183,7 @@ export function BountyDetailView({ initialBounty, chainId, bountyId }: BountyDet
   });
 
   const bounty = data?.bounty;
+  const queryClient = useQueryClient();
 
   const { ethPrice } = useEthPrice();
   const [joinAmount, setJoinAmount] = useState("0.001");
@@ -198,6 +199,89 @@ export function BountyDetailView({ initialBounty, chainId, bountyId }: BountyDet
   const resolveVoteHook = usePoidhResolveVote(chainId);
   const resetVotingHook = usePoidhResetVotingPeriod(chainId);
 
+  // Refresh bounty state after actions that change on-chain status
+  const bountyQueryKey = ["poidh-bounty", chainId, bountyId];
+
+  // Refresh bounty state after actions that change on-chain status
+  useEffect(() => {
+    if (submitForVoteHook.isSuccess) queryClient.invalidateQueries({ queryKey: bountyQueryKey });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [submitForVoteHook.isSuccess]);
+  useEffect(() => {
+    if (resolveVoteHook.isSuccess) queryClient.invalidateQueries({ queryKey: bountyQueryKey });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [resolveVoteHook.isSuccess]);
+  useEffect(() => {
+    if (cancelHook.isSuccess) queryClient.invalidateQueries({ queryKey: bountyQueryKey });
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [cancelHook.isSuccess]);
+
+  // Optimistic claim helpers — persist across page refresh until indexer catches up
+  const pendingClaimKey = `poidh:pending-claim:${chainId}:${bountyId}`;
+
+  const injectOptimisticClaim = useCallback(
+    (pending: { name: string; description: string; url: string; issuer: string; savedAt: number }) => {
+      queryClient.setQueryData<{ bounty: PoidhBounty }>(["poidh-bounty", chainId, bountyId], (old) => {
+        if (!old) return old;
+        const already = old.bounty.claims?.some(
+          (c) => c.issuer.toLowerCase() === pending.issuer.toLowerCase() && c.name === pending.name && c.id < 2_000_000_000,
+        );
+        if (already) return old;
+        const tmpId = Date.now();
+        const optimistic: PoidhClaim = {
+          id: tmpId,
+          onChainId: tmpId,
+          bountyId: old.bounty.id,
+          name: pending.name,
+          description: pending.description,
+          url: pending.url || null,
+          issuer: pending.issuer,
+          createdAt: Math.floor(pending.savedAt / 1000),
+          accepted: false,
+        };
+        return { bounty: { ...old.bounty, claims: [...(old.bounty.claims ?? []), optimistic], hasClaims: true } };
+      });
+    },
+    [queryClient, chainId, bountyId],
+  );
+
+  // On mount: restore pending claim from localStorage if indexer hasn't caught up yet
+  useEffect(() => {
+    try {
+      const raw = localStorage.getItem(pendingClaimKey);
+      if (!raw) return;
+      injectOptimisticClaim(JSON.parse(raw) as { name: string; description: string; url: string; issuer: string; savedAt: number });
+    } catch { /* ignore parse errors */ }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Clear localStorage once the real claim arrives from the API
+  useEffect(() => {
+    if (!bounty?.claims) return;
+    try {
+      const raw = localStorage.getItem(pendingClaimKey);
+      if (!raw) return;
+      const pending = JSON.parse(raw) as { name: string; issuer: string };
+      const arrived = bounty.claims.some(
+        (c) => c.issuer.toLowerCase() === pending.issuer.toLowerCase() && c.name === pending.name && c.id < 2_000_000_000,
+      );
+      if (arrived) localStorage.removeItem(pendingClaimKey);
+    } catch { /* ignore */ }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [bounty?.claims]);
+
+  const handleClaimSuccess = useCallback(
+    ({ name, description, url }: { name: string; description: string; url: string }) => {
+      if (!address) return;
+      const pending = { name, description, url, issuer: address, savedAt: Date.now() };
+      try { localStorage.setItem(pendingClaimKey, JSON.stringify(pending)); } catch { /* quota */ }
+      injectOptimisticClaim(pending);
+      setTimeout(() => queryClient.invalidateQueries({ queryKey: bountyQueryKey }), 15_000);
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [address, injectOptimisticClaim, queryClient],
+  );
+
   const deadlineTimestamp = bounty?.deadline ?? null;
   const countdown = useCountdown(deadlineTimestamp);
 
@@ -392,7 +476,7 @@ export function BountyDetailView({ initialBounty, chainId, bountyId }: BountyDet
                     Be the first to complete this challenge. Film your proof and submit it on-chain.
                   </p>
                 </div>
-                <ClaimBountyModal bounty={bounty}>
+                <ClaimBountyModal bounty={bounty} onSuccess={handleClaimSuccess}>
                   <Button size="lg" className="mt-2">
                     Join
                   </Button>
@@ -794,7 +878,7 @@ export function BountyDetailView({ initialBounty, chainId, bountyId }: BountyDet
                 </CardDescription>
               </CardHeader>
               <CardContent>
-                <ClaimBountyModal bounty={bounty}>
+                <ClaimBountyModal bounty={bounty} onSuccess={handleClaimSuccess}>
                   <Button size="lg" className="w-full">
                     Join
                   </Button>

src/components/bounties/ClaimBountyModal.tsx

@@ -25,9 +25,10 @@ import type { PoidhBounty } from "@/types/poidh";
 interface ClaimBountyModalProps {
   bounty: PoidhBounty;
   children: React.ReactNode;
+  onSuccess?: (claim: { name: string; description: string; url: string }) => void;
 }
 
-export function ClaimBountyModal({ bounty, children }: ClaimBountyModalProps) {
+export function ClaimBountyModal({ bounty, children, onSuccess }: ClaimBountyModalProps) {
   const [open, setOpen] = useState(false);
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
@@ -61,6 +62,7 @@ export function ClaimBountyModal({ bounty, children }: ClaimBountyModalProps) {
     if (!name.trim() || !description.trim()) return;
     try {
       await submit(bounty.onChainId, name.trim(), description.trim(), mediaUrl.trim());
+      onSuccess?.({ name: name.trim(), description: description.trim(), url: mediaUrl.trim() });
     } catch {
       // error captured in hook
     }

src/hooks/usePoidhContract.ts

@@ -69,6 +69,44 @@ function buildPoidhReturn(state: PoidhWriteState) {
   };
 }
 
+const POIDH_ERROR_MESSAGES: Record<string, string> = {
+  AlreadyVoted:                  "You have already voted on this claim.",
+  ClaimNotFound:                 "Claim not found on-chain. Make sure you're on the right network.",
+  BountyNotFound:                "Bounty not found on-chain.",
+  VotingOngoing:                 "Voting is still in progress — wait for the deadline to resolve.",
+  VotingEnded:                   "The voting period has ended.",
+  NoVotingPeriodSet:             "No voting period is active for this bounty.",
+  BountyClaimed:                 "This bounty has already been claimed.",
+  BountyClosed:                  "This bounty is closed.",
+  WrongCaller:                   "You are not allowed to perform this action.",
+  IssuerCannotClaim:             "The bounty creator cannot submit a claim.",
+  IssuerCannotWithdraw:          "The bounty creator cannot withdraw as a contributor.",
+  NotActiveParticipant:          "You are not a participant in this bounty.",
+  NotOpenBounty:                 "This action is only available for open bounties.",
+  NotSoloBounty:                 "This action is only available for solo bounties.",
+  ClaimAlreadyAccepted:          "This claim has already been accepted.",
+  NothingToWithdraw:             "Nothing to withdraw.",
+  MaxParticipantsReached:        "This bounty has reached its maximum number of participants.",
+  NotCancelledOpenBounty:        "This bounty has not been cancelled.",
+  VoteWouldPass:                 "Cannot reset — the vote would pass. Resolve it instead.",
+  MinimumBountyNotMet:           "Amount is below the minimum required to create a bounty.",
+  MinimumContributionNotMet:     "Amount is below the minimum required to contribute.",
+  NoEther:                       "No ETH sent.",
+  ContractsCannotCreateBounties: "Smart contracts cannot create bounties directly.",
+  TransferFailed:                "ETH transfer failed.",
+  InsufficientBalance:           "Insufficient balance.",
+};
+
+function decodePoidhError(err: unknown): Error {
+  if (!(err instanceof Error)) return new Error(String(err));
+  const msg = err.message;
+  for (const [name, friendly] of Object.entries(POIDH_ERROR_MESSAGES)) {
+    if (msg.includes(name)) return new Error(friendly);
+  }
+  // Fallback: trim the noisy viem stack to the first line
+  return new Error(msg.split("\n")[0]);
+}
+
 async function assertPoidhReady(ctx: ReturnType<typeof usePoidhContext>, chainId: number) {
   if (!ctx.isConnected) throw new Error("Connect your wallet first");
   if (!ctx.contractAddress) throw new Error(`Unsupported chain: ${chainId}`);
@@ -113,7 +151,7 @@ async function sendAndConfirm(
     state.setIsSuccess(true);
     return txHash;
   } catch (err) {
-    state.setError(err instanceof Error ? err : new Error(String(err)));
+    state.setError(decodePoidhError(err));
     throw err;
   } finally {
     state.setIsPending(false);

src/lib/poidh/abi.ts

@@ -182,5 +182,38 @@ export const POIDH_ABI = [
     "outputs": [{ "internalType": "uint256", "name": "", "type": "uint256" }],
     "stateMutability": "view",
     "type": "function"
-  }
+  },
+  // ── Custom errors ────────────────────────────────────────────────────────
+  { "inputs": [], "name": "NoEther",                       "type": "error" },
+  { "inputs": [], "name": "MinimumBountyNotMet",           "type": "error" },
+  { "inputs": [], "name": "MinimumContributionNotMet",     "type": "error" },
+  { "inputs": [], "name": "BountyNotFound",                "type": "error" },
+  { "inputs": [], "name": "ClaimNotFound",                 "type": "error" },
+  { "inputs": [], "name": "VotingOngoing",                 "type": "error" },
+  { "inputs": [], "name": "VotingEnded",                   "type": "error" },
+  { "inputs": [], "name": "NoVotingPeriodSet",             "type": "error" },
+  { "inputs": [], "name": "BountyClaimed",                 "type": "error" },
+  { "inputs": [], "name": "BountyClosed",                  "type": "error" },
+  { "inputs": [], "name": "NotOpenBounty",                 "type": "error" },
+  { "inputs": [], "name": "NotSoloBounty",                 "type": "error" },
+  { "inputs": [], "name": "WrongCaller",                   "type": "error" },
+  { "inputs": [], "name": "IssuerCannotClaim",             "type": "error" },
+  { "inputs": [], "name": "IssuerCannotWithdraw",          "type": "error" },
+  { "inputs": [], "name": "NotActiveParticipant",          "type": "error" },
+  { "inputs": [], "name": "AlreadyVoted",                  "type": "error" },
+  { "inputs": [], "name": "ClaimAlreadyAccepted",          "type": "error" },
+  { "inputs": [], "name": "NothingToWithdraw",             "type": "error" },
+  { "inputs": [], "name": "TransferFailed",                "type": "error" },
+  { "inputs": [], "name": "InsufficientBalance",           "type": "error" },
+  { "inputs": [], "name": "MaxParticipantsReached",        "type": "error" },
+  { "inputs": [], "name": "NotCancelledOpenBounty",        "type": "error" },
+  { "inputs": [], "name": "VoteWouldPass",                 "type": "error" },
+  { "inputs": [], "name": "InvalidStartClaimIndex",        "type": "error" },
+  { "inputs": [], "name": "ContractsCannotCreateBounties", "type": "error" },
+  { "inputs": [], "name": "InvalidTreasury",               "type": "error" },
+  { "inputs": [], "name": "InvalidPoidhNft",               "type": "error" },
+  { "inputs": [], "name": "InvalidWithdrawTo",             "type": "error" },
+  { "inputs": [], "name": "DirectEtherNotAccepted",        "type": "error" },
+  { "inputs": [], "name": "InvalidMinBountyAmount",        "type": "error" },
+  { "inputs": [], "name": "InvalidMinContribution",        "type": "error" }
 ] as const;