Give each faucet token card its own independent claim state

[Chidubemkingsley]

Task done

• Track per-token pending state via pendingTokens Set in useClaim

• Separate isBulkPending for bulk claim button state

• Each card derives isPending from pendingTokens membership

• Bulk button shows pending only during bulk claim

• Add spinner to individual card Claim button when pending

• Closes Issue #2 — Faucet: give each token card its own claim state #175

[vercel]

@Chidubemkingsley is attempting to deploy a commit to the Ijai's projects Team on Vercel.

A member of the Team first needs to authorize it.

[IbrahimIjai]

Nice work, this is close, and a few things are done right that are easy to get wrong: the functional setPendingTokens((prev) => …) updater (no stale-closure bug), keeping pendingTokens out of the useCallback deps so claim isn't recreated on every pending change, and splitting isBulkPending from the per-token set. The per-card spinner is clean too.
Before we merge, a few things:

1. Concurrency on a shared wallet (blocking, this is the real one).

The UI state is now independent per card, but walletKit.signTransaction is a single shared signer. Two claims in flight = two concurrent signing prompts, which the kit can't handle cleanly. Two ways to hit it today:

During a bulk claim, the individual cards stay enabled (claimDisabled doesn't include isBulkPending) and show no pending state, so a token already in the in-flight bulk tx can be claimed again → overlapping tx + cooldown collision + a second wallet prompt.
Same problem with two individual cards clicked back-to-back.

The issue asked us to define and document the rule. I'd keep per-token success/error state independent (so each card surfaces its own result), but serialize initiation through the shared signer — only one claim being signed at a time. Minimum viable: gate new claim triggers while anything is mid-flight. Nicer: queue them so each card still lights up its own pending state in turn. Either is fine, just pick one and write it in the PR description.
2. While bulk is running, reflect it on the cards. Right now all four show idle/clickable mid-bulk. They should at least read as pending (or disabled) so the user isn't firing a redundant individual claim on a token that's already being claimed.
3. Make "bulk" explicit instead of inferred. const isBulk = tokenIds.length === FAUCET_TOKENS.length couples intent to count — it breaks if the token list ever changes, and a single-token claim would read as bulk if there's ever one token. Prefer an explicit claimAll() vs claim(tokenId) (or a flag) so the caller states intent.
4. Guard double-submit in the hook, not just the button. Correctness shouldn't depend only on disabled. Early-return if every id is already pending, cheap defense in depth.
5. Nit: success toast is always plural "Test tokens claimed!" even for a single claim — mirror the singular/plural you already do on the loading toast.
6. DoD: confirm bun run typecheck + bun run lint pass, and drop the before/after GIF (claim one card → others stay idle; claim bulk → cards reflect it). That closes the issue's definition of done.
#1 is the only blocker — the rest are quick. Solid first pass.

[Chidubemkingsley]

@IbrahimIjai

Pushed as c3e489b. All 38 typecheck errors should now resolve on the next CI run.

[IbrahimIjai]

CCool