[TOOL-4819] Dashboard: Load all engine backend wallets, add pagination in table #7347
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughPagination was added to the engine v2 backend wallets list on the Overview page. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant BackendWalletsSection
participant useEngineBackendWallets
participant Backend API
User->>BackendWalletsSection: Loads Overview page
BackendWalletsSection->>useEngineBackendWallets: Fetch wallets (limit=10, page=1)
useEngineBackendWallets->>Backend API: GET /wallets?limit=10&page=1
Backend API-->>useEngineBackendWallets: Returns wallets data
useEngineBackendWallets-->>BackendWalletsSection: Returns wallets data
BackendWalletsSection->>User: Displays wallets and pagination controls
User->>BackendWalletsSection: Clicks "Next"
BackendWalletsSection->>useEngineBackendWallets: Fetch wallets (limit=10, page=2)
useEngineBackendWallets->>Backend API: GET /wallets?limit=10&page=2
Backend API-->>useEngineBackendWallets: Returns next page of wallets
useEngineBackendWallets-->>BackendWalletsSection: Returns wallets data
BackendWalletsSection->>User: Updates wallets list
Assessment against linked issues
Suggested reviewers
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🪧 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 (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
MananTank
force-pushed
the
06-17-_tool-4819_dashboard_load_all_engine_backend_wallets_add_pagination_in_table
branch
from
0532382 to
123fb06
Compare
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7347 +/- ##
=======================================
Coverage 55.58% 55.58%
=======================================
Files 909 909
Lines 58683 58683
Branches 4163 4163
=======================================
Hits 32617 32617
Misses 25959 25959
Partials 107 107
🚀 New features to boost your workflow:
|
size-limit report 📦
|
MananTank
force-pushed
the
06-17-_tool-4819_dashboard_load_all_engine_backend_wallets_add_pagination_in_table
branch
from
123fb06 to
e47f864
Compare
graphite-app
bot
changed the base branch from
06-17-_tool-4821_improve_team_members_search
to
graphite-base/7347
Merge activity
|
…n in table (#7347) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR enhances the `useEngine` hook and the `BackendWalletsSection` component by adding pagination functionality for backend wallets retrieval, allowing users to navigate through pages of wallet data. ### Detailed summary - Added optional `limit` and `page` parameters to the `useEngine` hook. - Updated the fetch URL in the hook to accommodate pagination. - Introduced pagination controls in `BackendWalletsSection` using `Button` components. - Managed pagination state with `useState` for current page tracking. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex -->
graphite-app
bot
force-pushed
the
06-17-_tool-4819_dashboard_load_all_engine_backend_wallets_add_pagination_in_table
branch
from
e47f864 to
3f74760
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts (2)
78-83: Preserve cache while paginating by re-using previous dataWhen paginating, the list flickers because the cache is cleared while the next page is loading.
AddingplaceholderData: keepPreviousData(or thekeepPreviousDatahelper) – exactly as you already did foruseEngineTransactions– will keep the previous page rendered until the new one arrives.return useQuery({ queryKey: [ ...engineKeys.backendWallets(instanceUrl), authToken, params.limit, params.page, ], + placeholderData: keepPreviousData,
85-92: Build the URL withURL/URLSearchParamsto avoid subtle encoding bugsManual string interpolation becomes fragile once more query params creep in (e.g. a future
searchterm or address filter).
Usingnew URL()keeps things readable and automatically escapes values:- const res = await fetch( - `${instanceUrl}backend-wallet/get-all?limit=${params.limit ?? 1000}&page=${params.page ?? 1}`, - { + const url = new URL(`${instanceUrl}backend-wallet/get-all`); + url.searchParams.set("limit", String(params.limit ?? 1_000)); + url.searchParams.set("page", String(params.page ?? 1)); + + const res = await fetch(url, { method: "GET", headers: getEngineRequestHeaders(authToken), - }, - ); + });apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx (3)
67-69: Reset the page index when dependencies changeIf the component receives a new
instanceorauthToken, the current page may be invalid (e.g. you were on page 5 of the previous engine, but the new one only has 1 page).
Add an effect to resetpageback to 1 wheninstance.urlorauthTokenchanges:useEffect(() => { setPage(1); }, [instance.url, authToken]);
82-85: Keep pagination visible while loading to avoid layout shift
showPaginationbecomesfalseduring the loading state becausebackendWallets.dataisundefined, hiding the controls and causing a jank when they re-appear.
Consider basing the flag onbackendWallets.isFetchedinstead, or always rendering the controls and just disabling the buttons.-const disableNextButton = (backendWallets.data?.length || 0) < pageSize; -const disablePreviousButton = page === 1; -const showPagination = !disableNextButton || !disablePreviousButton; +const disableNextButton = (backendWallets.data?.length ?? pageSize) < pageSize; +const disablePreviousButton = page === 1; +const showPagination = backendWallets.isFetched;
168-176: Use functionalsetStateto avoid stale closures
setPage(page - 1)/setPage(page + 1)capture the value ofpageat render time.
Switching pages quickly can enqueue multiple updates and drop clicks.
Use the functional form to always work with the latest value:-onClick={() => setPage(page - 1)} +onClick={() => setPage((p) => p - 1)} … -onClick={() => setPage(page + 1)} +onClick={() => setPage((p) => p + 1)}Also applies to: 178-184
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx(3 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/engine/dedicated/(instance)/[engineId]/overview/components/engine-overview.tsx (1)
apps/dashboard/src/@3rdweb-sdk/react/hooks/useEngine.ts (2)
useEngineBackendWallets(70-99)useEngineWalletConfig(425-443)
⏰ Context from checks skipped due to timeout of 90000ms (5)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
graphite-app
bot
deleted the
06-17-_tool-4819_dashboard_load_all_engine_backend_wallets_add_pagination_in_table
branch
PR-Codex overview
This PR introduces pagination functionality to the
useEnginehook and theBackendWalletsSectioncomponent, allowing users to navigate through backend wallets in a paginated manner.Detailed summary
limitandpageparameters to theuseEnginehook.useEngineto include dynamiclimitandpagevalues.BackendWalletsSection.pageandpageSize.Summary by CodeRabbit