Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughStarred market management is refactored to use a new Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant MarketsComponent
participant useStaredMarkets (Hook)
participant LocalStorage
participant Toast
User->>MarketsComponent: Clicks star/unstar
MarketsComponent->>useStaredMarkets: Calls starMarket/unstarMarket
useStaredMarkets->>LocalStorage: Read/update starred IDs
useStaredMarkets->>Toast: Show notification
useStaredMarkets-->>MarketsComponent: Return updated IDs
sequenceDiagram
participant User
participant FromAndToMarkets
participant SortableHeader
User->>SortableHeader: Click column header
SortableHeader->>FromAndToMarkets: Trigger sort state update
FromAndToMarkets->>FromAndToMarkets: Sort toMarkets data
FromAndToMarkets-->>User: Render sorted table
Possibly related PRs
Poem
Note ⚡️ AI Code Reviews for VS Code, Cursor, WindsurfCodeRabbit now has a plugin for VS Code, Cursor and Windsurf. This brings AI code reviews directly in the code editor. Each commit is reviewed immediately, finding bugs before the PR is raised. Seamless context handoff to your AI code agent ensures that you can easily incorporate review feedback. Note ⚡️ Faster reviews with cachingCodeRabbit now supports caching for code and dependencies, helping speed up reviews. This means quicker feedback, reduced wait times, and a smoother review experience overall. Cached data is encrypted and stored securely. This feature will be automatically enabled for all accounts on May 16th. To opt out, configure ✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
app/positions/components/FromAndToMarkets.tsx (3)
62-86: Add minimal a11y metadata to sortable headers
<th>s change order but screen-readers get no hint.
Settingaria-sortwhenisSortedis true adds almost no cost and keeps the component accessible.- return ( - <th - className={`${className} cursor-pointer hover:text-primary-500`} - onClick={() => onClick(column)} - > + return ( + <th + className={`${className} cursor-pointer hover:text-primary-500`} + onClick={() => onClick(column)} + {...(isSorted && { 'aria-sort': currentSortDirection === 1 ? 'ascending' : 'descending' })} + >
111-118: Use functional updater to avoid stale state on rapid clicks
setToSortDirection(toSortDirection * -1)closes over the old value; two fast clicks can race and leave the direction unchanged.
A functional update is immune to this.- if (toSortColumn === column) { - setToSortDirection(toSortDirection * -1); + if (toSortColumn === column) { + setToSortDirection((d) => d * -1);
134-166: Minor: avoid repeated BigInt conversions in sort
BigInt(a.state.supplyAssets)runs for every comparison. Caching once per element keeps the sort O(n log n) but halves the constant factor.- let sorted = [...filteredToMarkets]; + const sorted = filteredToMarkets.map((m) => ({ + ...m, + supplyAssetsBig: BigInt(m.state.supplyAssets), + lltvBig: BigInt(m.lltv), + }));…and use the pre-computed fields in the comparator.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
app/markets/components/markets.tsx(2 hunks)app/positions/components/FromAndToMarkets.tsx(8 hunks)app/positions/components/MarketBadge.tsx(1 hunks)app/positions/components/RebalanceActionInput.tsx(1 hunks)src/hooks/useStaredMarkets.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
app/markets/components/markets.tsx (1)
src/hooks/useStaredMarkets.ts (1)
useStaredMarkets(16-45)
src/hooks/useStaredMarkets.ts (1)
src/hooks/useStyledToast.tsx (1)
useStyledToast(6-20)
app/positions/components/FromAndToMarkets.tsx (6)
src/hooks/useStaredMarkets.ts (1)
useStaredMarkets(16-45)app/positions/components/RebalanceModal.tsx (1)
PER_PAGE(27-27)src/components/TokenIcon.tsx (1)
TokenIcon(15-52)src/utils/external.ts (1)
getAssetURL(8-17)src/components/common/Button.tsx (1)
Button(4-53)src/components/TooltipContent.tsx (1)
TooltipContent(12-35)
🔇 Additional comments (10)
src/hooks/useStaredMarkets.ts (5)
6-14: Well-implemented initialization function with error handlingThe
getInitialStaredMarketshelper handles localStorage initialization properly with good error handling for JSON parsing failures.
16-19: Good state initialization and hook structureThe hook properly initializes state from localStorage and uses the styled toast hook. Clean implementation.
20-30: Proper implementation of the star functionalityThe
starMarketfunction:
- Prevents redundant operations with an early return
- Updates state and synchronizes with localStorage
- Provides user feedback through toast notifications
- Uses proper dependency management with useCallback
32-42: Proper implementation of the unstar functionalityThe
unstarMarketfunction correctly handles removal from starred markets with the same good practices as the star function.
44-45: Clean hook interfaceThe hook exposes a simple, intuitive API with all necessary functionality.
app/positions/components/RebalanceActionInput.tsx (1)
33-33: Improved border styling for better visual consistencyThe border styling change from a dashed primary border to a solid gray border with dark mode support creates better visual harmony with other UI components.
app/positions/components/MarketBadge.tsx (1)
15-15: Enhanced badge styling for visual consistencyThe badge styling changes (rounded-md instead of rounded-full, gray tones instead of orange) create a more neutral and consistent appearance across the application.
app/markets/components/markets.tsx (2)
18-18: Good extraction of starred markets functionalityAdding the import for the new hook centralizes this functionality.
53-53: Effective implementation of the hookSuccessfully replaced local state management with the centralized hook, improving code organization and reusability.
app/positions/components/FromAndToMarkets.tsx (1)
350-370: Pagination: controlled vs uncontrolled prop mismatch
fromtable usespage, thetotable usesinitialPage.
With sorting or external page resets,Paginationwon’t update becauseinitialPageis only read once.- initialPage={toPagination.currentPage} + page={toPagination.currentPage}
| isDisabled={maxTransferableAmount <= 0n} | ||
| onClick={(e) => { | ||
| e.stopPropagation(); | ||
| onFromMarketSelect(marketPosition.market.uniqueKey); | ||
| const remainingAmount = | ||
| BigInt(marketPosition.state.supplyAssets) + | ||
| BigInt(marketPosition.pendingDelta); | ||
| if (remainingAmount > 0n) { | ||
| if (maxTransferableAmount > 0n) { | ||
| onSelectMax?.( | ||
| marketPosition.market.uniqueKey, | ||
| Number(remainingAmount), | ||
| Number(maxTransferableAmount), | ||
| ); |
There was a problem hiding this comment.
BigInt → Number may lose precision for large token amounts
Number(maxTransferableAmount) silently rounds once the value exceeds 2⁵³-1.
Pass the bigint (or a string) to onSelectMax instead.
- Number(maxTransferableAmount),
+ maxTransferableAmount, // keep as bigintIf the callback expects a number, consider formatUnits before converting so the value fits inside JS safe range.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| isDisabled={maxTransferableAmount <= 0n} | |
| onClick={(e) => { | |
| e.stopPropagation(); | |
| onFromMarketSelect(marketPosition.market.uniqueKey); | |
| const remainingAmount = | |
| BigInt(marketPosition.state.supplyAssets) + | |
| BigInt(marketPosition.pendingDelta); | |
| if (remainingAmount > 0n) { | |
| if (maxTransferableAmount > 0n) { | |
| onSelectMax?.( | |
| marketPosition.market.uniqueKey, | |
| Number(remainingAmount), | |
| Number(maxTransferableAmount), | |
| ); | |
| isDisabled={maxTransferableAmount <= 0n} | |
| onClick={(e) => { | |
| e.stopPropagation(); | |
| onFromMarketSelect(marketPosition.market.uniqueKey); | |
| if (maxTransferableAmount > 0n) { | |
| onSelectMax?.( | |
| marketPosition.market.uniqueKey, | |
| maxTransferableAmount, // keep as bigint | |
| ); |
🤖 Prompt for AI Agents
In app/positions/components/FromAndToMarkets.tsx around lines 290 to 298, the
code converts a bigint maxTransferableAmount to a Number, which can lose
precision for large values. To fix this, pass maxTransferableAmount as a bigint
or convert it to a string before passing to onSelectMax. If onSelectMax requires
a number, use a formatting function like formatUnits to convert the bigint into
a safe numeric range before passing it.
Docstrings generation was requested by @antoncoding. * #145 (comment) The following files were modified: * `app/markets/components/markets.tsx` * `app/positions/components/FromAndToMarkets.tsx` * `app/positions/components/MarketBadge.tsx` * `app/positions/components/RebalanceActionInput.tsx`
|
Note Generated docstrings for this pull request at #146 |
1 participant
Summary by CodeRabbit
New Features
UI Improvements