all new UI kits added successfully

[Sadeequ]

Fix Report

I investigated and fixed four issues in the codebase. Here is the full report of what I did:

---

Issue 1: WalletConnectButton onOpenModal is never passed from TopBar

I investigated this issue thoroughly. After tracing through the code in src/components/TopBar.tsx and src/components/WalletConnectButton.tsx, I found that onOpenModal IS correctly passed from TopBar at line 73-75:

<WalletConnectButton
  onOpenModal={() => setAccountSidebarOpen(true)}
/>

And the WalletConnectButton component correctly handles this prop at lines 44-50 — when the user clicks the address pill, it calls onOpenModal() which opens the AccountSidebar. I verified this behavior is correct and working as intended, so no code change was needed for this issue.

---

Issue 2: SorokitProvider error state clobbered by parallel fetches and not cleared on reconnect

I fixed two problems in src/context/SorokitProvider.tsx:

Problem A — Parallel fetches clobbering errors: I found that when getAccount and getBalances were called in parallel via Promise.all, the original code used an else if chain that only reported one error:

if (accountRes.error) reportError(accountRes.error, "account", "error");
else if (balancesRes.error) reportError(balancesRes.error, "account", "error");

This meant that if both requests failed, only the account error would surface — the balances error was silently discarded. I changed this to handle all three cases (both failed, only account failed, only balances failed):

if (accountRes.error && balancesRes.error) {
  reportError(`${accountRes.error}; ${balancesRes.error}`, "account", "error");
} else if (accountRes.error) {
  reportError(accountRes.error, "account", "error");
} else if (balancesRes.error) {
  reportError(balancesRes.error, "account", "error");
}

I applied this same fix in two places: the useEffect that loads account data on address change (line 162) and the refreshAccount callback (line 334).

Problem B — Errors not cleared on reconnect: I found that connectWallet only cleared walletError before attempting a connection. If a previous session had left an accountError or networkError in state, those would persist across a reconnect. I added two lines to clear all error states:

setAccountError(null);
setNetworkError(null);

---

Issue 3: switchNetwork adapter ignores the network argument and always returns testnet config

I fixed this in src/lib/mock-client.ts. The root cause was that activeNetwork was declared as const, so it was set once at client creation and never updated. When switchNetwork was called, it returned the correct network info to the caller, but the internal activeNetwork variable still pointed to the original network. This meant subsequent calls to getNetwork would return the stale network.

I made two changes:

1. Changed const activeNetwork to let activeNetwork so it can be reassigned.

2. Added updates to activeNetwork inside the switchNetwork function:

   • activeNetwork = param.name when the param is a NetworkInfo object
   • activeNetwork = param when the param is a NetworkName string

This ensures the mock client correctly tracks the active network after a switch.

---

Issue 4: ClaimableBalanceCard silently discards claimBalance errors and never removes claimed rows

I fixed two problems in src/components/ClaimableBalanceCard.tsx:

Problem A — Silently discarding thrown errors: I found that the doClaim function only handled errors returned in the { error } response object. If claimBalance threw an exception (e.g., a network failure or runtime error), it would propagate as an unhandled rejection and never be shown to the user. I added a catch block:

catch (e) {
  setClaimError(e instanceof Error ? e.message : "Failed to claim balance.");
}

Problem B — Claimed rows not removed: I found that after a successful claim, the row would show a "Claimed" badge but remain in the list. I added a callback pattern to remove the row from the parent state:

1. Added onClaimSuccess?: (balanceId: string) => void to BalanceRowProps
2. Called onClaimSuccess?.(cb.id) after a successful claim in doClaim
3. Added a handleClaimSuccess function in the parent ClaimableBalanceCard that filters out the claimed balance:

   function handleClaimSuccess(balanceId: string) {
     setBalances((prev) => prev.filter((b) => b.id !== balanceId));
   }

4. Passed handleClaimSuccess as the onClaimSuccess prop to each BalanceRow

---

Verification

I ran npm run typecheck and confirmed all changes pass type checking. I also ran npm run lint and verified that all lint errors are pre-existing issues unrelated to my changes.

Related Issue

• CLOSES WalletConnectButton onOpenModal is never passed from TopBar leaving address pill as a no-op #531 ✔️
• CLOSES SorokitProvider error state clobbered by parallel fetches and not cleared on reconnect #532 ✔️
• CLOSES switchNetwork adapter ignores the network argument and always returns testnet config #576 ✔️
• CLOSES ClaimableBalanceCard silently discards claimBalance errors and never removes claimed rows #579 ✔️

[drips-wave]

@Sadeequ Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits