feat: market history pagination and filters#224
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughReplaces legacy Pagination with a new TablePagination UI; adds server-side pagination and minAssets filtering across data sources, hooks, and tables; introduces TransactionFiltersModal and useTransactionFilters hook; adds UI primitives (Button, pagination primitives), theme variables, utilities, and adjusts related GraphQL queries and error handling. Changes
Sequence DiagramsequenceDiagram
participant User
participant MarketContent
participant TransactionFiltersModal
participant useTransactionFilters
participant Hooks
participant DataSources
participant TablePagination
participant TableComponent
User->>MarketContent: open market page
MarketContent->>TableComponent: render Supplies/Borrows (minAssets from hook)
TableComponent->>Hooks: request page 1 with minAssets
Hooks->>DataSources: query Morpho/Subgraph with minAssets, pageSize, skip
DataSources-->>Hooks: return { items, totalCount }
Hooks-->>TableComponent: provide paginated data, isFetching/isLoading
TableComponent->>TablePagination: render controls (totalPages, totalEntries)
User->>TablePagination: navigate page 2
TablePagination->>TableComponent: onPageChange(2)
TableComponent->>Hooks: request page 2
Hooks->>DataSources: fetch page 2
DataSources-->>Hooks: return { items, totalCount }
Hooks-->>TableComponent: update data
User->>TableComponent: open filters
TableComponent->>MarketContent: onOpenFiltersModal()
MarketContent->>TransactionFiltersModal: show modal
TransactionFiltersModal->>useTransactionFilters: set minSupply/minBorrow
useTransactionFilters->>useTransactionFilters: persist to localStorage
MarketContent->>Hooks: re-fetch with new minAssets
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related PRs
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
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. Comment |
coderabbitai
Bot
added
feature request
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (4)
src/graphql/morpho-api-queries.ts (1)
1-2: Typo: "Officail" → "Official"-// Queries for Morpho Officail API +// Queries for Morpho Official APIapp/admin/stats/components/TransactionsTable.tsx (1)
68-197: ClampcurrentPagewhen filtered data shrinksIf filters (or
data) change such thatsortedData.lengthdrops andtotalPagesbecomes smaller thancurrentPage,currentEntriesbecomes[]while the paginator still shows valid pages. The user sees an empty table until they click a page.You can clamp
currentPagewhenevertotalPageschanges:-import React, { useState, useMemo } from 'react'; +import React, { useState, useMemo, useEffect } from 'react'; @@ - // Pagination - const indexOfLastEntry = currentPage * entriesPerPage; - const indexOfFirstEntry = indexOfLastEntry - entriesPerPage; - const currentEntries = sortedData.slice(indexOfFirstEntry, indexOfLastEntry); - const totalPages = Math.ceil(sortedData.length / entriesPerPage); + // Pagination + const totalPages = Math.ceil(sortedData.length / entriesPerPage); + + useEffect(() => { + if (totalPages > 0 && currentPage > totalPages) { + setCurrentPage(totalPages); + } + }, [currentPage, totalPages]); + + const indexOfLastEntry = currentPage * entriesPerPage; + const indexOfFirstEntry = indexOfLastEntry - entriesPerPage; + const currentEntries = sortedData.slice(indexOfFirstEntry, indexOfLastEntry);app/market/[chainId]/[marketid]/components/SuppliesTable.tsx (1)
34-170: Reset page when filters change to avoid empty pagesWhen
minAssetschanges while the user is on a later page,currentPageis kept as-is. With a stricter filter, that page can be beyond the newtotalPages, leading to an empty table even though earlier pages have data (and causing unnecessary highskiprequests).Resetting to page 1 on filter changes keeps UX and API usage sane:
-import { useState } from 'react'; +import { useState, useEffect } from 'react'; @@ export function SuppliesTable({ chainId, market, minAssets, onOpenFiltersModal }: SuppliesTableProps) { const [currentPage, setCurrentPage] = useState(1); const pageSize = 8; @@ const handlePageChange = (page: number) => { setCurrentPage(page); }; const hasActiveFilter = minAssets !== '0'; const tableKey = `supplies-table-${currentPage}`; + + useEffect(() => { + // When filters change, restart from the first page + setCurrentPage(1); + }, [minAssets]);app/market/[chainId]/[marketid]/components/BorrowsTable.tsx (1)
34-176: Also reset page onminAssetschange for borrowsSame as supplies: changing
minAssetswhile on a highcurrentPagecan leave you on a page beyond the newtotalPages, giving an empty table and unnecessary highskipon the API.Recommend mirroring the reset-to-first-page behavior:
-import { useState } from 'react'; +import { useState, useEffect } from 'react'; @@ export function BorrowsTable({ chainId, market, minAssets, onOpenFiltersModal }: BorrowsTableProps) { const [currentPage, setCurrentPage] = useState(1); const pageSize = 8; @@ const handlePageChange = (page: number) => { setCurrentPage(page); }; const hasActiveFilter = minAssets !== '0'; const tableKey = `borrows-table-${currentPage}`; + + useEffect(() => { + // When filters change, restart from the first page + setCurrentPage(1); + }, [minAssets]);
♻️ Duplicate comments (1)
src/data-sources/subgraph/market-borrows.ts (1)
85-98: Same pagination bug as market-supplies.ts.The merged-list pagination logic here has the same issue:
combined.lengthcan be up to2 * fetchFirst, makinghasMoreandtotalCountinaccurate.
🧹 Nitpick comments (5)
src/components/ui/pagination.tsx (1)
28-34: Minor: empty className string is redundant.Line 32 passes an empty string to
cn(). While harmless, it can be simplified.- <li ref={ref} className={cn("", className)} {...props} /> + <li ref={ref} className={cn(className)} {...props} />src/components/common/MarketsTableWithSameLoanAsset.tsx (1)
30-30: Reconsider component location.TablePagination is imported from
app/market/[chainId]/[marketid]/components/but is being reused here. Shared components should live insrc/components/per the project's organizational guidelines.Based on learnings, shared UI components should be organized in
src/with reusable components insrc/components/.app/markets/components/marketsTable.tsx (1)
6-6: Reconsider component location.TablePagination is imported from
app/market/[chainId]/[marketid]/components/but is reused across multiple files. Shared components should be insrc/components/.Based on learnings, shared UI components should be organized in
src/with reusable components insrc/components/.tailwind.config.ts (1)
48-51: Remove commented-out code.Dead code adds noise. If this primary override is intentional to keep, add a brief comment explaining why it's preserved. Otherwise, delete it.
- // primary: { - // DEFAULT: 'hsl(var(--primary))', - // foreground: 'hsl(var(--primary-foreground))', - // },src/hooks/useMarketSupplies.ts (1)
1-114: Nearly identical touseMarketBorrows.Both hooks share ~90% of the logic. Could extract a shared factory or base hook (e.g.,
useMarketActivity) that accepts the fetch functions as parameters. Not urgent — just a note for future cleanup.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (29)
.claude/settings.local.json(1 hunks)app/admin/stats/components/TransactionsTable.tsx(2 hunks)app/global.css(3 hunks)app/market/[chainId]/[marketid]/components/BorrowsTable.tsx(2 hunks)app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx(4 hunks)app/market/[chainId]/[marketid]/components/SuppliesTable.tsx(3 hunks)app/market/[chainId]/[marketid]/components/TablePagination.tsx(1 hunks)app/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsx(1 hunks)app/market/[chainId]/[marketid]/content.tsx(10 hunks)app/markets/components/Pagination.tsx(0 hunks)app/markets/components/marketsTable.tsx(3 hunks)components.json(1 hunks)package.json(2 hunks)src/components/common/MarketsTableWithSameLoanAsset.tsx(2 hunks)src/components/ui/button.tsx(1 hunks)src/components/ui/pagination.tsx(1 hunks)src/contexts/MarketsContext.tsx(0 hunks)src/data-sources/morpho-api/market-borrows.ts(4 hunks)src/data-sources/morpho-api/market-supplies.ts(4 hunks)src/data-sources/subgraph/market-borrows.ts(3 hunks)src/data-sources/subgraph/market-supplies.ts(3 hunks)src/graphql/morpho-api-queries.ts(2 hunks)src/graphql/morpho-subgraph-queries.ts(2 hunks)src/hooks/useMarketBorrows.ts(1 hunks)src/hooks/useMarketSupplies.ts(1 hunks)src/hooks/useTransactionFilters.ts(1 hunks)src/lib/utils.ts(1 hunks)src/utils/types.ts(1 hunks)tailwind.config.ts(1 hunks)
💤 Files with no reviewable changes (2)
- app/markets/components/Pagination.tsx
- src/contexts/MarketsContext.tsx
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx,js,jsx,css,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Run
pnpm format(Prettier) before pushing with 2-space indentation, 100-character width, single quotes, and Tailwind-aware class ordering
Files:
src/utils/types.tssrc/components/ui/button.tsxsrc/lib/utils.tssrc/components/common/MarketsTableWithSameLoanAsset.tsxsrc/data-sources/morpho-api/market-supplies.tsapp/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsxapp/markets/components/marketsTable.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxsrc/graphql/morpho-subgraph-queries.tssrc/graphql/morpho-api-queries.tssrc/hooks/useTransactionFilters.tsapp/market/[chainId]/[marketid]/content.tsxtailwind.config.tsapp/market/[chainId]/[marketid]/components/TablePagination.tsxsrc/hooks/useMarketBorrows.tsapp/admin/stats/components/TransactionsTable.tsxapp/market/[chainId]/[marketid]/components/BorrowsTable.tsxsrc/data-sources/subgraph/market-supplies.tssrc/data-sources/morpho-api/market-borrows.tssrc/hooks/useMarketSupplies.tssrc/data-sources/subgraph/market-borrows.tsapp/global.cssapp/market/[chainId]/[marketid]/components/LiquidationsTable.tsxsrc/components/ui/pagination.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use camelCase for helper function names (e.g.,
formatApr)
Files:
src/utils/types.tssrc/components/ui/button.tsxsrc/lib/utils.tssrc/components/common/MarketsTableWithSameLoanAsset.tsxsrc/data-sources/morpho-api/market-supplies.tssrc/graphql/morpho-subgraph-queries.tssrc/graphql/morpho-api-queries.tssrc/hooks/useTransactionFilters.tssrc/hooks/useMarketBorrows.tssrc/data-sources/subgraph/market-supplies.tssrc/data-sources/morpho-api/market-borrows.tssrc/hooks/useMarketSupplies.tssrc/data-sources/subgraph/market-borrows.tssrc/components/ui/pagination.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
ESLint (Airbnb + Next.js) enforces hook safety and import hygiene
Files:
src/utils/types.tssrc/components/ui/button.tsxsrc/lib/utils.tssrc/components/common/MarketsTableWithSameLoanAsset.tsxsrc/data-sources/morpho-api/market-supplies.tsapp/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsxapp/markets/components/marketsTable.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxsrc/graphql/morpho-subgraph-queries.tssrc/graphql/morpho-api-queries.tssrc/hooks/useTransactionFilters.tsapp/market/[chainId]/[marketid]/content.tsxtailwind.config.tsapp/market/[chainId]/[marketid]/components/TablePagination.tsxsrc/hooks/useMarketBorrows.tsapp/admin/stats/components/TransactionsTable.tsxapp/market/[chainId]/[marketid]/components/BorrowsTable.tsxsrc/data-sources/subgraph/market-supplies.tssrc/data-sources/morpho-api/market-borrows.tssrc/hooks/useMarketSupplies.tssrc/data-sources/subgraph/market-borrows.tsapp/market/[chainId]/[marketid]/components/LiquidationsTable.tsxsrc/components/ui/pagination.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Use PascalCase for React component file names (e.g.,
VaultBanner.tsx)
Files:
src/components/ui/button.tsxsrc/components/common/MarketsTableWithSameLoanAsset.tsxapp/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsxapp/markets/components/marketsTable.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxapp/market/[chainId]/[marketid]/content.tsxapp/market/[chainId]/[marketid]/components/TablePagination.tsxapp/admin/stats/components/TransactionsTable.tsxapp/market/[chainId]/[marketid]/components/BorrowsTable.tsxapp/market/[chainId]/[marketid]/components/LiquidationsTable.tsxsrc/components/ui/pagination.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{tsx,jsx}: Keep Tailwind class lists lean and dedupe variants withtailwind-merge
All toggles must use the sharedIconSwitchcomponent from@/components/common/IconSwitchfor consistent sizing and animation
Files:
src/components/ui/button.tsxsrc/components/common/MarketsTableWithSameLoanAsset.tsxapp/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsxapp/markets/components/marketsTable.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxapp/market/[chainId]/[marketid]/content.tsxapp/market/[chainId]/[marketid]/components/TablePagination.tsxapp/admin/stats/components/TransactionsTable.tsxapp/market/[chainId]/[marketid]/components/BorrowsTable.tsxapp/market/[chainId]/[marketid]/components/LiquidationsTable.tsxsrc/components/ui/pagination.tsx
app/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Next.js routes must live under
app/directory
Files:
app/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsxapp/markets/components/marketsTable.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxapp/market/[chainId]/[marketid]/content.tsxapp/market/[chainId]/[marketid]/components/TablePagination.tsxapp/admin/stats/components/TransactionsTable.tsxapp/market/[chainId]/[marketid]/components/BorrowsTable.tsxapp/market/[chainId]/[marketid]/components/LiquidationsTable.tsx
src/hooks/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
When building on-chain hooks, mirror
useERC20ApprovalanduseTransactionWithToastpatterns and memoize arrays/objects before using them in effect dependencies to prevent redundant RPC calls
Files:
src/hooks/useTransactionFilters.tssrc/hooks/useMarketBorrows.tssrc/hooks/useMarketSupplies.ts
**/*.{css,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Stylelint keeps utility ordering consistent
Files:
app/global.css
🧠 Learnings (12)
📚 Learning: 2024-12-08T12:10:17.127Z
Learnt from: antoncoding
Repo: antoncoding/monarch PR: 94
File: src/components/supplyModal.tsx:449-452
Timestamp: 2024-12-08T12:10:17.127Z
Learning: The 'solid' variant is defined in the new `Button` component and is a valid variant.
Applied to files:
src/components/ui/button.tsx
📚 Learning: 2025-11-25T14:45:50.416Z
Learnt from: CR
Repo: antoncoding/monarch PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T14:45:50.416Z
Learning: Applies to **/*.{tsx,jsx} : All toggles must use the shared `IconSwitch` component from `@/components/common/IconSwitch` for consistent sizing and animation
Applied to files:
src/components/ui/button.tsx
📚 Learning: 2025-11-25T14:45:50.416Z
Learnt from: CR
Repo: antoncoding/monarch PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T14:45:50.416Z
Learning: Applies to **/*.{tsx,jsx} : Keep Tailwind class lists lean and dedupe variants with `tailwind-merge`
Applied to files:
src/lib/utils.tscomponents.jsontailwind.config.ts
📚 Learning: 2025-11-25T14:45:50.416Z
Learnt from: CR
Repo: antoncoding/monarch PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T14:45:50.416Z
Learning: Applies to **/*.{ts,tsx,js,jsx,css,scss} : Run `pnpm format` (Prettier) before pushing with 2-space indentation, 100-character width, single quotes, and Tailwind-aware class ordering
Applied to files:
components.json
📚 Learning: 2025-11-25T14:45:50.416Z
Learnt from: CR
Repo: antoncoding/monarch PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T14:45:50.416Z
Learning: Shared logic and reusable UI components must be organized in `src/` with components in `src/components/`, hooks in `src/hooks/`, constants in `src/constants/`, and utilities in `src/utils/`
Applied to files:
components.json
📚 Learning: 2025-11-25T14:45:50.416Z
Learnt from: CR
Repo: antoncoding/monarch PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T14:45:50.416Z
Learning: Applies to **/*.{css,scss} : Stylelint keeps utility ordering consistent
Applied to files:
components.json
📚 Learning: 2025-11-25T14:45:50.416Z
Learnt from: CR
Repo: antoncoding/monarch PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T14:45:50.416Z
Learning: Applies to src/constants/**/*.{ts,tsx,js,jsx} : Use SCREAMING_SNAKE_CASE for shared constants
Applied to files:
components.json
📚 Learning: 2024-10-12T09:23:16.495Z
Learnt from: antoncoding
Repo: antoncoding/monarch PR: 63
File: app/markets/components/MarketRowDetail.tsx:49-52
Timestamp: 2024-10-12T09:23:16.495Z
Learning: When rendering oracle feeds in `ExpandedMarketDetail` (`app/markets/components/MarketRowDetail.tsx`), prefer explicit rendering over iterating keys when dealing with a small number of feeds.
Applied to files:
src/components/common/MarketsTableWithSameLoanAsset.tsxapp/markets/components/marketsTable.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxsrc/hooks/useMarketBorrows.tsapp/market/[chainId]/[marketid]/components/BorrowsTable.tsxsrc/hooks/useMarketSupplies.ts
📚 Learning: 2024-10-23T16:17:02.841Z
Learnt from: antoncoding
Repo: antoncoding/monarch PR: 77
File: src/graphql/queries.ts:168-193
Timestamp: 2024-10-23T16:17:02.841Z
Learning: In `src/graphql/queries.ts`, handling only `MarketTransferTransactionData` is intentional at this time.
Applied to files:
src/data-sources/morpho-api/market-supplies.tssrc/graphql/morpho-subgraph-queries.tssrc/graphql/morpho-api-queries.tsapp/market/[chainId]/[marketid]/content.tsxsrc/hooks/useMarketBorrows.tsapp/admin/stats/components/TransactionsTable.tsxsrc/data-sources/subgraph/market-supplies.tssrc/data-sources/morpho-api/market-borrows.tssrc/hooks/useMarketSupplies.tssrc/data-sources/subgraph/market-borrows.ts
📚 Learning: 2025-11-25T14:45:50.416Z
Learnt from: CR
Repo: antoncoding/monarch PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T14:45:50.416Z
Learning: Applies to src/hooks/**/*.{ts,tsx} : When building on-chain hooks, mirror `useERC20Approval` and `useTransactionWithToast` patterns and memoize arrays/objects before using them in effect dependencies to prevent redundant RPC calls
Applied to files:
src/hooks/useTransactionFilters.tsapp/market/[chainId]/[marketid]/content.tsxsrc/hooks/useMarketBorrows.tssrc/hooks/useMarketSupplies.ts
📚 Learning: 2024-11-25T09:39:42.148Z
Learnt from: antoncoding
Repo: antoncoding/monarch PR: 87
File: app/home/HomePage.tsx:17-39
Timestamp: 2024-11-25T09:39:42.148Z
Learning: In `app/home/HomePage.tsx`, the `useEffect` hook depends on `[showCustomized]` because changing `showCustomized` triggers updates to the yield and risk terms.
Applied to files:
app/market/[chainId]/[marketid]/content.tsxapp/market/[chainId]/[marketid]/components/BorrowsTable.tsx
📚 Learning: 2025-11-25T14:45:50.416Z
Learnt from: CR
Repo: antoncoding/monarch PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T14:45:50.416Z
Learning: Review `docs/Styling.md` before touching UI to stay aligned with Monarch design tokens and component patterns
Applied to files:
tailwind.config.ts
🧬 Code graph analysis (17)
src/components/ui/button.tsx (1)
src/lib/utils.ts (1)
cn(4-6)
src/components/common/MarketsTableWithSameLoanAsset.tsx (1)
app/market/[chainId]/[marketid]/components/TablePagination.tsx (1)
TablePagination(18-220)
src/data-sources/morpho-api/market-supplies.ts (1)
src/utils/types.ts (1)
PaginatedMarketActivityTransactions(392-395)
app/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsx (2)
src/components/Input/Input.tsx (1)
Input(19-128)src/components/ui/button.tsx (1)
Button(55-55)
app/market/[chainId]/[marketid]/components/SuppliesTable.tsx (7)
src/utils/types.ts (1)
Market(268-322)src/hooks/useMarketSupplies.ts (1)
useMarketSupplies(21-111)src/components/TooltipContent.tsx (1)
TooltipContent(16-75)src/components/ui/button.tsx (1)
Button(55-55)src/constants/chartColors.ts (1)
MONARCH_PRIMARY(2-2)src/components/common/Spinner.tsx (1)
Spinner(24-57)app/market/[chainId]/[marketid]/components/TablePagination.tsx (1)
TablePagination(18-220)
src/hooks/useTransactionFilters.ts (1)
src/hooks/useLocalStorage.ts (1)
useLocalStorage(4-66)
app/market/[chainId]/[marketid]/content.tsx (4)
src/hooks/useTransactionFilters.ts (1)
useTransactionFilters(12-48)app/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsx (1)
TransactionFiltersModal(37-128)app/market/[chainId]/[marketid]/components/SuppliesTable.tsx (1)
SuppliesTable(34-173)app/market/[chainId]/[marketid]/components/BorrowsTable.tsx (1)
BorrowsTable(34-179)
app/market/[chainId]/[marketid]/components/TablePagination.tsx (2)
src/lib/utils.ts (1)
cn(4-6)src/components/TooltipContent.tsx (1)
TooltipContent(16-75)
src/hooks/useMarketBorrows.ts (4)
src/utils/types.ts (1)
PaginatedMarketActivityTransactions(392-395)src/config/dataSources.ts (1)
supportsMorphoApi(6-20)src/data-sources/morpho-api/market-borrows.ts (1)
fetchMorphoMarketBorrows(41-83)src/data-sources/subgraph/market-borrows.ts (1)
fetchSubgraphMarketBorrows(34-107)
app/admin/stats/components/TransactionsTable.tsx (1)
app/market/[chainId]/[marketid]/components/TablePagination.tsx (1)
TablePagination(18-220)
app/market/[chainId]/[marketid]/components/BorrowsTable.tsx (7)
src/hooks/useMarketBorrows.ts (1)
useMarketBorrows(21-112)src/components/TooltipContent.tsx (1)
TooltipContent(16-75)src/components/common/Button.tsx (1)
Button(4-55)src/constants/chartColors.ts (1)
MONARCH_PRIMARY(2-2)src/components/common/Spinner.tsx (1)
Spinner(24-57)src/components/common/TransactionIdentity.tsx (1)
TransactionIdentity(19-37)app/market/[chainId]/[marketid]/components/TablePagination.tsx (1)
TablePagination(18-220)
src/data-sources/subgraph/market-supplies.ts (2)
src/utils/types.ts (1)
PaginatedMarketActivityTransactions(392-395)src/utils/subgraph-urls.ts (1)
getSubgraphUrl(42-44)
src/data-sources/morpho-api/market-borrows.ts (1)
src/utils/types.ts (1)
PaginatedMarketActivityTransactions(392-395)
src/hooks/useMarketSupplies.ts (4)
src/utils/types.ts (1)
PaginatedMarketActivityTransactions(392-395)src/config/dataSources.ts (1)
supportsMorphoApi(6-20)src/data-sources/morpho-api/market-supplies.ts (1)
fetchMorphoMarketSupplies(42-92)src/data-sources/subgraph/market-supplies.ts (1)
fetchSubgraphMarketSupplies(36-121)
src/data-sources/subgraph/market-borrows.ts (2)
src/utils/types.ts (1)
PaginatedMarketActivityTransactions(392-395)src/utils/subgraph-urls.ts (1)
getSubgraphUrl(42-44)
app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx (2)
src/components/common/Spinner.tsx (1)
Spinner(24-57)app/market/[chainId]/[marketid]/components/TablePagination.tsx (1)
TablePagination(18-220)
src/components/ui/pagination.tsx (2)
src/lib/utils.ts (1)
cn(4-6)src/components/ui/button.tsx (2)
ButtonProps(37-39)buttonVariants(55-55)
🔇 Additional comments (19)
.claude/settings.local.json (1)
31-31: Clarify necessity ofpnpm dlx:*permission in Claude assistant settings.This permission pattern is consistent with other pnpm commands in the file (all using wildcards), but
pnpm dlxis not currently used anywhere in the codebase. Confirm whether this permission is intentional for future use or should be removed/restricted to specific packages if added later.src/lib/utils.ts (1)
1-6: LGTM!Standard shadcn/ui utility for deduplicating Tailwind classes. Clean implementation.
components.json (1)
1-20: LGTM!Standard shadcn/ui configuration. Paths align with Next.js structure.
src/hooks/useTransactionFilters.ts (1)
1-48: LGTM!Hook correctly persists per-symbol filters to localStorage. The setters properly preserve existing values when updating individual fields.
src/components/ui/pagination.tsx (1)
1-119: LGTM!Well-structured pagination primitives with proper accessibility attributes. Components follow shadcn/ui patterns and integrate cleanly with the button variants system.
src/utils/types.ts (1)
391-395: LGTM!Clean pagination wrapper type that enables server-side pagination with total count tracking.
app/markets/components/marketsTable.tsx (2)
67-67: LGTM!Spacing adjustment reduces vertical gap. Intentional UI polish.
208-216: Verify hardcoded isLoading prop.TablePagination receives
isLoading={false}. Confirm whether this table has any loading states that should be reflected in the pagination controls.package.json (1)
39-39: Both dependency versions are current. @radix-ui/react-slot@1.2.4 and class-variance-authority@0.7.1 are the latest stable releases. No known security vulnerabilities identified for these versions.src/graphql/morpho-subgraph-queries.ts (1)
157-163: Type inconsistency:minAssetsisStringhere butBigIntin borrowsRepaysQuery.Line 157 declares
$minAssets: Stringwhile line 188 uses$minAssets: BigInt. Verify this matches the subgraph schema for each entity. If they should be the same, unify them.app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx (1)
25-45: LGTM!Client-side pagination implementation is clean. The loading overlay and TablePagination integration work well together.
src/graphql/morpho-api-queries.ts (1)
441-475: Inconsistent nullability:minAssets: BigInt!vsminAssets: BigIntLine 441 requires minAssets (
BigInt!) while line 475 makes it optional (BigInt). Verify this is intentional per the API schema.app/market/[chainId]/[marketid]/components/TransactionFiltersModal.tsx (1)
37-60: LGTM!Clean modal implementation. Input validation regex handles decimals correctly.
src/components/ui/button.tsx (1)
1-55: LGTM!Standard shadcn/ui Button with proper forwardRef, CVA variants, and Slot support. Clean implementation.
app/market/[chainId]/[marketid]/components/TablePagination.tsx (1)
18-219: Pagination logic and UX look solidPage-number generation, entry range display, and jump-to-page behavior all line up with the props contract and callers; disabling controls while
isLoadingis also handled correctly. I don't see issues here.src/data-sources/morpho-api/market-borrows.ts (1)
3-75: Paginated return shape and mapping look correctThe function now cleanly wraps Morpho results into
{ items, totalCount }, usingpageInfo.countTotalwhen available and keeping the previous item mapping intact. This aligns withPaginatedMarketActivityTransactionsand the hooks that consume it.src/data-sources/morpho-api/market-supplies.ts (1)
2-79: Morpho supplies pagination wiring looks consistentThe new
minAssets/first/skipparameters andpageInfo.countTotalhandling align with the borrows implementation andPaginatedMarketActivityTransactions. Callers that rely onitemsandtotalCountshould work without change.app/global.css (1)
8-97: Theme variable additions look compatibleThe new base layer and shadcn-style CSS variables (
--background,--foreground,--primary, etc.) are defined in the expected HSL format and should play nicely with existingbg-background/text-foregroundusage and the older--color-*tokens.app/market/[chainId]/[marketid]/content.tsx (1)
11-458: Filter scaling and wiring into tables look correct
useTransactionFilterskeeps amounts in human units, and theuseMemoblocks safely convert them to token units withparseUnits, falling back to'0'on empty/invalid input. Passing these scaled values asminAssetstoSuppliesTable/BorrowsTable, plus the sharedTransactionFiltersModalopener, matches the new pagination + filter flow without obvious edge-case issues.
| deposits( | ||
| first: 1000, # Subgraph max limit | ||
| first: $first, | ||
| skip: $skip, | ||
| orderBy: timestamp, | ||
| orderDirection: desc, | ||
| where: { market: $marketId, asset: $loanAssetId } | ||
| where: { market: $marketId, asset: $loanAssetId, amount_gt: $minAssets } | ||
| ) { | ||
| amount | ||
| account { id } | ||
| timestamp | ||
| hash | ||
| } | ||
| withdraws( | ||
| first: 1000, # Subgraph max limit | ||
| first: $first, | ||
| skip: $skip, | ||
| orderBy: timestamp, | ||
| orderDirection: desc, | ||
| where: { market: $marketId, asset: $loanAssetId } | ||
| where: { market: $marketId, asset: $loanAssetId, amount_gt: $minAssets } |
There was a problem hiding this comment.
Pagination on merged lists may skip items.
skip applies separately to deposits and withdraws. When combined client-side and sorted by timestamp, you may miss transactions. For example: skip=8 skips 8 deposits AND 8 withdraws, but merged results expect 8 total.
If true pagination is needed, consider fetching both without skip, then paginating the merged result client-side, or restructure the query.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
app/market/[chainId]/[marketid]/components/SuppliesTable.tsx (1)
35-37: Supplies pagination should also reset page on filter changesThis mirrors the borrows table:
currentPageisn’t reset whenminAssetschanges, so tightening filters can leave you on a page index beyond the newtotalPages.Applying the same fix keeps both tables in sync:
-import { useState } from 'react'; +import { useEffect, useState } from 'react'; @@ export function SuppliesTable({ chainId, market, minAssets, onOpenFiltersModal }: SuppliesTableProps) { const [currentPage, setCurrentPage] = useState(1); const pageSize = 8; + + useEffect(() => { + setCurrentPage(1); + }, [minAssets]);Also applies to: 39-46, 48-51, 162-170
🧹 Nitpick comments (5)
src/data-sources/subgraph/market-supplies.ts (1)
25-37: Subgraph fallback pagination is capped to the first 200 merged eventsThis fetches up to 200 deposits + 200 withdraws, merges/sorts once, then slices client‑side and reports
totalCount = combined.length. That fixes the earlier hasMore issue but meanstotalCount/totalPagesonly reflect this batch, not full history if there are more events.If that’s intentional as a “latest N events” fallback, consider spelling it out in the JSDoc (and in consumers) so
totalCountisn’t interpreted as the global total.Also applies to: 43-46, 53-61, 89-101
src/data-sources/subgraph/market-borrows.ts (1)
24-37: Borrows subgraph fallback exposes only a fixed recent windowHere too you always fetch a 200‑item window per list, merge/sort, then slice with
first/skipand settotalCount = combined.length. That gives deterministic ordering but caps visible history andtotalPagesto this window.If callers should only treat this as “recent activity” when the API fallback is used, it’d help to document that so
totalCountisn’t assumed to be the full dataset size.Also applies to: 42-45, 52-55, 82-94
src/components/common/TablePagination.tsx (1)
94-148: TablePagination logic is good; relies on callers to clamp currentPagePagination controls, ellipsis logic, and jump‑to‑page handling look solid. This component assumes
currentPagestays between 1 andtotalPages; if a caller ever passes an out‑of‑range value, no page will appear selected and next/prev may behave oddly, so keeping that invariant in parents is important.Also, Styling.md recommends using the shared
Buttonfrom@/components/common/Buttonfor clickable actions; if@/components/ui/buttonisn’t the canonical button anymore, consider swapping to match the guidelines.Also applies to: 150-218
src/hooks/useMarketBorrows.ts (1)
75-97: Missing deps in useEffect.The effect body references
marketId,loanAssetId,network,minAssets, andpageSizedirectly for guards and query key construction. AlthoughqueryFntransitively captures these, ESLint's exhaustive-deps rule would flag this and it's clearer to include them.- }, [page, data, queryClient, queryFn]); + }, [page, data, queryClient, queryFn, marketId, loanAssetId, network, minAssets, pageSize]);Based on learnings, hooks in this repo should memoize arrays/objects before using them in effect dependencies to prevent redundant RPC calls.
src/hooks/useMarketSupplies.ts (1)
75-97: Same missing deps issue asuseMarketBorrows.Effect references
marketId,loanAssetId,network,minAssets,pageSizedirectly. Add them to deps.- }, [page, data, queryClient, queryFn]); + }, [page, data, queryClient, queryFn, marketId, loanAssetId, network, minAssets, pageSize]);Based on learnings, hooks should include all referenced values in effect dependencies.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (13)
app/admin/stats/components/TransactionsTable.tsx(2 hunks)app/market/[chainId]/[marketid]/components/BorrowsTable.tsx(2 hunks)app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx(4 hunks)app/market/[chainId]/[marketid]/components/SuppliesTable.tsx(4 hunks)app/markets/components/marketsTable.tsx(3 hunks)docs/Styling.md(1 hunks)src/components/common/MarketsTableWithSameLoanAsset.tsx(2 hunks)src/components/common/TablePagination.tsx(1 hunks)src/data-sources/subgraph/market-borrows.ts(3 hunks)src/data-sources/subgraph/market-supplies.ts(3 hunks)src/hooks/useMarketBorrows.ts(1 hunks)src/hooks/useMarketSupplies.ts(1 hunks)src/utils/balance.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- app/markets/components/marketsTable.tsx
- app/admin/stats/components/TransactionsTable.tsx
- src/components/common/MarketsTableWithSameLoanAsset.tsx
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{ts,tsx,js,jsx,css,scss}
📄 CodeRabbit inference engine (AGENTS.md)
Run
pnpm format(Prettier) before pushing with 2-space indentation, 100-character width, single quotes, and Tailwind-aware class ordering
Files:
src/utils/balance.tsapp/market/[chainId]/[marketid]/components/LiquidationsTable.tsxsrc/components/common/TablePagination.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxsrc/data-sources/subgraph/market-supplies.tssrc/hooks/useMarketSupplies.tssrc/hooks/useMarketBorrows.tssrc/data-sources/subgraph/market-borrows.tsapp/market/[chainId]/[marketid]/components/BorrowsTable.tsx
src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Use camelCase for helper function names (e.g.,
formatApr)
Files:
src/utils/balance.tssrc/components/common/TablePagination.tsxsrc/data-sources/subgraph/market-supplies.tssrc/hooks/useMarketSupplies.tssrc/hooks/useMarketBorrows.tssrc/data-sources/subgraph/market-borrows.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
ESLint (Airbnb + Next.js) enforces hook safety and import hygiene
Files:
src/utils/balance.tsapp/market/[chainId]/[marketid]/components/LiquidationsTable.tsxsrc/components/common/TablePagination.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxsrc/data-sources/subgraph/market-supplies.tssrc/hooks/useMarketSupplies.tssrc/hooks/useMarketBorrows.tssrc/data-sources/subgraph/market-borrows.tsapp/market/[chainId]/[marketid]/components/BorrowsTable.tsx
app/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Next.js routes must live under
app/directory
Files:
app/market/[chainId]/[marketid]/components/LiquidationsTable.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxapp/market/[chainId]/[marketid]/components/BorrowsTable.tsx
**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Use PascalCase for React component file names (e.g.,
VaultBanner.tsx)
Files:
app/market/[chainId]/[marketid]/components/LiquidationsTable.tsxsrc/components/common/TablePagination.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxapp/market/[chainId]/[marketid]/components/BorrowsTable.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
**/*.{tsx,jsx}: Keep Tailwind class lists lean and dedupe variants withtailwind-merge
All toggles must use the sharedIconSwitchcomponent from@/components/common/IconSwitchfor consistent sizing and animation
Files:
app/market/[chainId]/[marketid]/components/LiquidationsTable.tsxsrc/components/common/TablePagination.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxapp/market/[chainId]/[marketid]/components/BorrowsTable.tsx
src/hooks/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
When building on-chain hooks, mirror
useERC20ApprovalanduseTransactionWithToastpatterns and memoize arrays/objects before using them in effect dependencies to prevent redundant RPC calls
Files:
src/hooks/useMarketSupplies.tssrc/hooks/useMarketBorrows.ts
docs/**/*
📄 CodeRabbit inference engine (AGENTS.md)
Long-form documentation lives in
docs/directory
Files:
docs/Styling.md
🧠 Learnings (6)
📚 Learning: 2024-10-12T09:23:16.495Z
Learnt from: antoncoding
Repo: antoncoding/monarch PR: 63
File: app/markets/components/MarketRowDetail.tsx:49-52
Timestamp: 2024-10-12T09:23:16.495Z
Learning: When rendering oracle feeds in `ExpandedMarketDetail` (`app/markets/components/MarketRowDetail.tsx`), prefer explicit rendering over iterating keys when dealing with a small number of feeds.
Applied to files:
app/market/[chainId]/[marketid]/components/LiquidationsTable.tsxapp/market/[chainId]/[marketid]/components/SuppliesTable.tsxapp/market/[chainId]/[marketid]/components/BorrowsTable.tsx
📚 Learning: 2024-10-23T16:17:02.841Z
Learnt from: antoncoding
Repo: antoncoding/monarch PR: 77
File: src/graphql/queries.ts:168-193
Timestamp: 2024-10-23T16:17:02.841Z
Learning: In `src/graphql/queries.ts`, handling only `MarketTransferTransactionData` is intentional at this time.
Applied to files:
src/data-sources/subgraph/market-supplies.tssrc/hooks/useMarketSupplies.tssrc/hooks/useMarketBorrows.tssrc/data-sources/subgraph/market-borrows.ts
📚 Learning: 2025-11-25T14:45:50.416Z
Learnt from: CR
Repo: antoncoding/monarch PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T14:45:50.416Z
Learning: Applies to src/hooks/**/*.{ts,tsx} : When building on-chain hooks, mirror `useERC20Approval` and `useTransactionWithToast` patterns and memoize arrays/objects before using them in effect dependencies to prevent redundant RPC calls
Applied to files:
src/hooks/useMarketSupplies.tssrc/hooks/useMarketBorrows.ts
📚 Learning: 2024-11-25T09:39:42.148Z
Learnt from: antoncoding
Repo: antoncoding/monarch PR: 87
File: app/home/HomePage.tsx:17-39
Timestamp: 2024-11-25T09:39:42.148Z
Learning: In `app/home/HomePage.tsx`, the `useEffect` hook depends on `[showCustomized]` because changing `showCustomized` triggers updates to the yield and risk terms.
Applied to files:
src/hooks/useMarketSupplies.tssrc/hooks/useMarketBorrows.tsapp/market/[chainId]/[marketid]/components/BorrowsTable.tsx
📚 Learning: 2025-11-25T14:45:50.416Z
Learnt from: CR
Repo: antoncoding/monarch PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-25T14:45:50.416Z
Learning: Applies to **/*.{tsx,jsx} : All toggles must use the shared `IconSwitch` component from `@/components/common/IconSwitch` for consistent sizing and animation
Applied to files:
docs/Styling.md
📚 Learning: 2025-11-13T20:32:48.908Z
Learnt from: antoncoding
Repo: antoncoding/monarch PR: 183
File: app/positions/components/RebalanceModal.tsx:301-308
Timestamp: 2025-11-13T20:32:48.908Z
Learning: The TokenIcon component in the codebase accepts a `symbol` prop as part of its valid interface, in addition to `address`, `chainId`, `width`, `height`, and other props.
Applied to files:
docs/Styling.md
🧬 Code graph analysis (7)
app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx (2)
src/components/common/Spinner.tsx (1)
Spinner(24-57)src/components/common/TablePagination.tsx (1)
TablePagination(18-220)
src/components/common/TablePagination.tsx (2)
src/components/TooltipContent.tsx (1)
TooltipContent(16-75)src/components/Input/Input.tsx (1)
Input(19-128)
app/market/[chainId]/[marketid]/components/SuppliesTable.tsx (6)
src/hooks/useMarketSupplies.ts (1)
useMarketSupplies(21-106)src/components/TooltipContent.tsx (1)
TooltipContent(16-75)src/components/ui/button.tsx (1)
Button(55-55)src/constants/chartColors.ts (1)
MONARCH_PRIMARY(2-2)src/utils/balance.ts (1)
formatSimple(48-53)src/components/common/TablePagination.tsx (1)
TablePagination(18-220)
src/data-sources/subgraph/market-supplies.ts (2)
src/utils/types.ts (1)
PaginatedMarketActivityTransactions(392-395)src/utils/subgraph-urls.ts (1)
getSubgraphUrl(42-44)
src/hooks/useMarketSupplies.ts (4)
src/utils/types.ts (1)
PaginatedMarketActivityTransactions(392-395)src/config/dataSources.ts (1)
supportsMorphoApi(6-20)src/data-sources/morpho-api/market-supplies.ts (1)
fetchMorphoMarketSupplies(42-92)src/data-sources/subgraph/market-supplies.ts (1)
fetchSubgraphMarketSupplies(39-109)
src/hooks/useMarketBorrows.ts (4)
src/utils/types.ts (1)
PaginatedMarketActivityTransactions(392-395)src/config/dataSources.ts (1)
supportsMorphoApi(6-20)src/data-sources/morpho-api/market-borrows.ts (1)
fetchMorphoMarketBorrows(41-83)src/data-sources/subgraph/market-borrows.ts (1)
fetchSubgraphMarketBorrows(38-102)
src/data-sources/subgraph/market-borrows.ts (2)
src/utils/types.ts (1)
PaginatedMarketActivityTransactions(392-395)src/utils/subgraph-urls.ts (1)
getSubgraphUrl(42-44)
🔇 Additional comments (7)
src/utils/balance.ts (1)
48-53: formatSimple: widened bigint support looks fineAllowing
number | bigintmatches howIntl.NumberFormatworks and keeps existing callers safe.app/market/[chainId]/[marketid]/components/LiquidationsTable.tsx (1)
35-37: Liquidations pagination + loading overlay look solidClient-side slicing,
totalCount/totalPagescalculation, and the spinner overlay plusTablePaginationwiring all line up cleanly; no issues spotted.Also applies to: 42-47, 61-76, 170-179
docs/Styling.md (1)
440-513: TablePagination docs match the implementationProp list, behavior notes, and usage examples align with
src/components/common/TablePagination.tsx, so consumers get an accurate contract.src/hooks/useMarketBorrows.ts (2)
33-63: LGTM on theuseCallbackwrapper.Properly memoized with the correct dependencies. This addresses the previous review feedback and aligns with the repo's hook patterns.
56-58: Error propagation fixed.The subgraph error now rethrows so consumers can distinguish "no data" from "fetch failed."
src/hooks/useMarketSupplies.ts (2)
33-63: LGTM on memoization.
queryFnis properly wrapped withuseCallbackand correct deps.
56-58: Error handling fixed.Subgraph error now propagates correctly.
| export function BorrowsTable({ chainId, market, minAssets, onOpenFiltersModal }: BorrowsTableProps) { | ||
| const [currentPage, setCurrentPage] = useState(1); | ||
| const pageSize = 8; | ||
|
|
||
| const { | ||
| data: borrows, | ||
| data: paginatedData, | ||
| isLoading, | ||
| isFetching, | ||
| error, | ||
| } = useMarketBorrows(market?.uniqueKey, market.loanAsset.id, chainId); | ||
| } = useMarketBorrows(market?.uniqueKey, market.loanAsset.id, chainId, minAssets, currentPage, pageSize); | ||
|
|
||
| const totalPages = Math.ceil((borrows ?? []).length / pageSize); | ||
| const borrows = paginatedData?.items ?? []; | ||
| const totalCount = paginatedData?.totalCount ?? 0; | ||
| const totalPages = Math.ceil(totalCount / pageSize); | ||
|
|
||
| const handlePageChange = (page: number) => { | ||
| setCurrentPage(page); | ||
| }; | ||
|
|
||
| const paginatedBorrows = useMemo(() => { | ||
| const sliced = (borrows ?? []).slice((currentPage - 1) * pageSize, currentPage * pageSize); | ||
| return sliced; | ||
| }, [currentPage, borrows, pageSize]); | ||
|
|
||
| const hasActiveFilter = minAssets !== '0'; | ||
| const tableKey = `borrows-table-${currentPage}`; |
There was a problem hiding this comment.
Reset page index when filters change to avoid out-of-range pages
currentPage is preserved when minAssets changes. If the user is on a high page and tightens the filter so totalPages shrinks, you can end up with currentPage > totalPages, which makes the paginator show odd ranges and can request pages with no data.
Resetting to page 1 on filter changes keeps things consistent:
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
@@
export function BorrowsTable({ chainId, market, minAssets, onOpenFiltersModal }: BorrowsTableProps) {
const [currentPage, setCurrentPage] = useState(1);
const pageSize = 8;
+
+ useEffect(() => {
+ setCurrentPage(1);
+ }, [minAssets]);Also applies to: 168-177
🤖 Prompt for AI Agents
In app/market/[chainId]/[marketid]/components/BorrowsTable.tsx around lines 35
to 55 (and similarly 168 to 177), currentPage is not reset when filters
(minAssets) or identifying props (market, chainId) change, which can leave
currentPage > totalPages and cause empty or odd paginator states; add a
useEffect that watches minAssets, market?.uniqueKey, market?.loanAsset.id, and
chainId and calls setCurrentPage(1) when any of them change, and optionally add
a small safeguard useEffect that clamps currentPage to Math.max(1,
Math.min(currentPage, totalPages)) whenever totalPages changes so the page never
exceeds available pages.
1 participant
Summary by CodeRabbit
New Features
Improvements
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.