fix: stale state on previews by antoncoding · Pull Request #196 · antoncoding/monarch

antoncoding · 2025-11-30T03:27:26Z

Summary by CodeRabbit

New Features
- Added a manual refresh button to update balance information directly in the supply modal.
Bug Fixes
- Fixed stale state issues when switching between supply and withdraw modes.
- Improved balance data synchronization to ensure accurate display when modal reopens.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

vercel · 2025-11-30T03:27:30Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
monarch	Ready	Preview	Comment	Nov 30, 2025 3:31am

coderabbitai · 2025-11-30T03:27:35Z

📝 Walkthrough

Walkthrough

Adds manual balance refetch capability to the supply modal. Users can click a new Refetch button in SupplyModalContent to refresh their token and ETH balances. The useSupplyMarket hook exposes a refetch function, and SupplyModalV2 improves state handling by resetting preview amounts when the modal reopens.

Changes

Cohort / File(s)	Summary
Supply modal UI enhancements `src/components/SupplyModalContent.tsx`	Adds ReloadIcon import and Refetch button next to balance display. Button calls refetchBalance to refresh balances on demand. Removes unused console.log.
Supply modal state management `src/components/SupplyModalV2.tsx`	Introduces useEffect to reset mode and preview amounts when modal reopens. Adds useMemo for supplyDelta calculation. Updates mode toggle button styling (hover text color).
Balance refetch API `src/hooks/useSupplyMarket.ts`	Exposes new refetch function in UseSupplyMarketReturn interface. Internal implementation combines token and ETH balance refetches via useCallback.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Check that the refetch button correctly wires to the hook's refetch function
Verify the useEffect dependency array in SupplyModalV2 (defaultMode) prevents infinite resets
Confirm parallel refetch execution in useSupplyMarket doesn't cause race conditions

Possibly related PRs

feat: add monad chain #194: Removes the stray console.log that was added to SupplyModalContent—direct cleanup of code in this PR.
feat: refetch #58: Adds manual refetch functionality to supply components, overlapping with this refetch button feature.
feat: preview withdraw #178: Modifies supplyDelta and preview amount handling in SupplyModalV2, touching similar state management logic.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main fix across multiple files: preventing stale state in preview amounts when toggling supply/withdraw mode.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch fix/util-and-post-action-calc

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

coderabbitai

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/components/SupplyModalContent.tsx (1)
33-36: Add refetch to onSuccess dependencies

onSuccess closes the modal and calls refetch, but the callback only depends on onClose. If refetch ever changes, this can use a stale version and will also trip the hooks lint rules. Suggest:
-  const onSuccess = useCallback(() => {
-    onClose();
-    refetch();
-  }, [onClose]);
+  const onSuccess = useCallback(() => {
+    onClose();
+    refetch();
+  }, [onClose, refetch]);

🧹 Nitpick comments (2)

src/components/SupplyModalV2.tsx (1)

44-55: supplyDelta memo logic is correct but could be clearer

The positive/negative delta handling looks right and should avoid zero/no-op values. For readability you might replace the x && x > 0n pattern with an explicit if (!x || x <= 0n) return undefined; style, but that’s optional.
src/hooks/useSupplyMarket.ts (1)
96-100: Combined refetch implementation is fine; async variant optional

Calling both refetchToken and refetchETH inside a memoized callback is enough here. If you ever need to await completion, you could switch to:
const refetch = useCallback(async () => {
  await Promise.all([refetchToken(), refetchETH()]);
}, [refetchETH, refetchToken]);
For now, the void-fire-and-forget version is acceptable.

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f23dc44 and 3e19ed0.

📒 Files selected for processing (3)

src/components/SupplyModalContent.tsx (3 hunks)
src/components/SupplyModalV2.tsx (4 hunks)
src/hooks/useSupplyMarket.ts (4 hunks)

🧰 Additional context used

📓 Path-based instructions (6)

**/*.{ts,tsx,js,jsx,css,scss}