Give each faucet token card its own independent claim state

- Serialize through shared signer via isClaimingRef (prevents concurrent
  wallet prompts)
- Explicit claimOne(tokenId) / claimAll() instead of inferring bulk
  from array length
- isBulkPending reflected on all cards during bulk claim
- Defense-in-depth: isClaimingRef gates new claims while any in-flight
- Singular/plural success toast matches single vs bulk claim
- Each card owns its own pending state via pendingTokens Set
- Per-card spinner shown while pending or during bulk claim
- Balance refresh via invalidateQueries preserved on success

Author: Chidubemkingsley

apps/web/src/features/faucet/components/faucet-page.tsx

@@ -111,7 +111,7 @@ export function FaucetPage() {
   const isConnected = useWalletStore((state) => state.status === "connected")
   const { mismatch } = useNetwork()
   const { data, isLoading } = useFaucetData(address)
-  const { claim, pendingTokens, isBulkPending } = useClaim()
+  const { claimOne, claimAll, pendingTokens, isBulkPending } = useClaim()
 
   const isTestnet = NETWORK.name === "testnet"
   const claimDisabled = !isConnected || mismatch
@@ -155,9 +155,9 @@ export function FaucetPage() {
                   lastClaimLedger={data?.lastClaimLedgers[token.symbol]}
                   cooldownLedgers={data?.cooldownLedgers}
                   isLoading={isLoading}
-                  isPending={pendingTokens.has(token.contractId)}
+                  isPending={pendingTokens.has(token.contractId) || isBulkPending}
                   isDisabled={claimDisabled}
-                  onClaim={(selectedToken) => claim([selectedToken.contractId])}
+                  onClaim={(selectedToken) => claimOne(selectedToken.contractId)}
                 />
               ))}
             </div>
@@ -189,7 +189,7 @@ export function FaucetPage() {
                     variant="default"
                     className="w-full"
                     disabled={claimDisabled || isBulkPending}
-                    onClick={() => claim(FAUCET_TOKENS.map((t) => t.contractId))}
+                    onClick={() => claimAll()}
                   >
                     {isBulkPending ? (
                       <span className="flex items-center gap-2">

apps/web/src/features/faucet/hooks/useClaim.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useState } from "react"
+import { useCallback, useRef, useState } from "react"
 import { toast } from "sonner"
 import { useQueryClient } from "@tanstack/react-query"
 import { FAUCET_TOKENS } from "../data/tokens"
@@ -26,29 +26,77 @@ export function useClaim() {
   const queryClient = useQueryClient()
   const [pendingTokens, setPendingTokens] = useState<Set<string>>(new Set())
   const [isBulkPending, setIsBulkPending] = useState(false)
+  const isClaimingRef = useRef(false)
 
-  const claim = useCallback(
-    async (tokenIds: Array<string>) => {
+  const claimOne = useCallback(
+    async (tokenId: string) => {
       if (!address || !isConnected) return
-      if (tokenIds.length === 0) return
+      if (isClaimingRef.current) return
 
-      const isBulk = tokenIds.length === FAUCET_TOKENS.length
+      isClaimingRef.current = true
+      setPendingTokens((prev) => {
+        const next = new Set(prev)
+        next.add(tokenId)
+        return next
+      })
 
-      if (isBulk) {
-        setIsBulkPending(true)
-      } else {
+      const toastId = toast.loading("Claiming test token…")
+
+      try {
+        const faucet = createFaucetClient(address)
+        const tx = await faucet.claim_many({
+          account: address,
+          tokens: [tokenId],
+        })
+
+        const unsignedXdr = tx.toXDR()
+        const { signedTxXdr } = await walletKit.signTransaction(unsignedXdr)
+        const signedXdr = signedTxXdr
+        const { hash } = await sendAndPoll(signedXdr)
+
+        // Refresh balances after a successful claim
+        await queryClient.invalidateQueries({ queryKey: queryKeys.faucet.data(address) })
+
+        toast.success("Test token claimed!", {
+          id: toastId,
+          description: (
+            <a
+              href={explorerTxUrl(hash)}
+              target="_blank"
+              rel="noreferrer"
+              className="text-xs text-primary hover:underline"
+            >
+              View transaction →
+            </a>
+          ),
+        })
+      } catch (error) {
+        const message = isClaimTooSoonError(error)
+          ? "Cooldown active — please wait before claiming again."
+          : parseSorobanError(error)
+        toast.error(message, { id: toastId })
+      } finally {
         setPendingTokens((prev) => {
           const next = new Set(prev)
-          for (const id of tokenIds) {
-            next.add(id)
-          }
+          next.delete(tokenId)
           return next
         })
+        isClaimingRef.current = false
       }
+    },
+    [address, isConnected, queryClient],
+  )
+
+  const claimAll = useCallback(
+    async () => {
+      if (!address || !isConnected) return
+      if (isClaimingRef.current) return
+
+      isClaimingRef.current = true
+      setIsBulkPending(true)
 
-      const toastId = toast.loading(
-        tokenIds.length === 1 ? "Claiming test token…" : "Claiming test tokens…",
-      )
+      const tokenIds = FAUCET_TOKENS.map((t) => t.contractId)
+      const toastId = toast.loading("Claiming test tokens…")
 
       try {
         const faucet = createFaucetClient(address)
@@ -84,21 +132,12 @@ export function useClaim() {
           : parseSorobanError(error)
         toast.error(message, { id: toastId })
       } finally {
-        if (isBulk) {
-          setIsBulkPending(false)
-        } else {
-          setPendingTokens((prev) => {
-            const next = new Set(prev)
-            for (const id of tokenIds) {
-              next.delete(id)
-            }
-            return next
-          })
-        }
+        setIsBulkPending(false)
+        isClaimingRef.current = false
       }
     },
     [address, isConnected, queryClient],
   )
 
-  return { claim, pendingTokens, isBulkPending }
+  return { claimOne, claimAll, pendingTokens, isBulkPending }
 }

apps/web/src/features/faucet/hooks/useFaucetData.ts

@@ -1,11 +1,11 @@
 import { useQuery } from "@tanstack/react-query"
-import { queryKeys } from "@/shared/lib/query-keys"
-import { FAUCET_TOKENS, type FaucetTokenSymbol } from "../data/tokens"
+import { FAUCET_TOKENS, type FaucetTokenSymbol } from "../data/tokens" // eslint-disable-line import/consistent-type-specifier-style
 import {
   createFaucetClient,
   createTokenClient,
   fromContractAmount,
 } from "../lib/clients"
+import { queryKeys } from "@/shared/lib/query-keys"
 
 export type FaucetData = {
   balances: Record<FaucetTokenSymbol, number>
@@ -44,10 +44,10 @@ async function fetchFaucetData(address: string | null): Promise<FaucetData> {
   const lastClaimLedgers = {} as Record<FaucetTokenSymbol, number | null>
 
   FAUCET_TOKENS.forEach((token, index) => {
-    const balanceTx = balanceTxs[index]
-    const lastClaimTx = lastClaimTxs[index]
-    balances[token.symbol] = fromContractAmount((balanceTx?.result as bigint | undefined) ?? 0n)
-    claimAmounts[token.symbol] = fromContractAmount(claimTxs[index]?.result as bigint)
+    const balanceTx = balanceTxs.at(index)
+    const lastClaimTx = lastClaimTxs.at(index)
+    balances[token.symbol] = fromContractAmount(balanceTx?.result ?? 0n)
+    claimAmounts[token.symbol] = fromContractAmount(claimTxs[index].result)
     lastClaimLedgers[token.symbol] = lastClaimTx ? Number(lastClaimTx.result) : null
   })
 

apps/web/src/features/faucet/lib/clients.ts

@@ -1,5 +1,4 @@
-import { FaucetContractClient as FaucetClient } from "@workspace/contracts"
-import { TestTokenContractClient as TokenClient } from "@workspace/contracts"
+import { FaucetContractClient as FaucetClient, TestTokenContractClient as TokenClient } from "@workspace/contracts"
 import { CONTRACTS } from "@/app/config/contracts"
 import { NETWORK } from "@/app/config/network"