[Dashboard] Add transaction filtering by Queue ID and wallet address #8162
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughAdds optional id and from filters to transactions analytics table. Extends TransactionsTableUI state, inputs, and getData signature. Propagates id/from through queryKey and queryFn to getTransactions, which includes them as API query parameters. Minor layout adjustments. No other control flow or error handling changes. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant UI as TransactionsTableUI
participant Hook as Query (queryFn)
participant API as getTransactions / Backend
User->>UI: Enter status, id (queue), from (wallet), page
UI->>Hook: queryKey[page,status,id,from], queryFn({page,status,id,from})
Hook->>API: GET /transactions?status=&page=&id=&from=
API-->>Hook: TransactionsResponse
Hook-->>UI: data
UI-->>User: Render filtered table
rect rgba(200,240,255,0.2)
note right of UI: New: id/from state and inputs
note right of Hook: New: id/from in key and params
note right of API: New: id/from query handling
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
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. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8162 +/- ##
=======================================
Coverage 56.28% 56.28%
=======================================
Files 906 906
Lines 59208 59208
Branches 4180 4180
=======================================
Hits 33324 33324
Misses 25779 25779
Partials 105 105
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx (1)
35-47: Add explicit return type annotation.The function lacks an explicit return type annotation, which violates the TypeScript coding guidelines.
Apply this diff to add the return type:
async function getTransactions({ project, page, status, id, from, }: { project: Project; page: number; status: TransactionStatus | undefined; id: string | undefined; from: string | undefined; -}) { +}): Promise<TransactionsResponse> {As per coding guidelines.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx (1)
70-83: AlignpageSizewith serverlimitor vice versa.UI uses
pageSize = 10but the request setslimit = "20"(see tx-table.tsx Line 58). This leads to incorrect pagination UX.If you keep server limit at 20, update UI:
- const pageSize = 10; + const pageSize = 20;Alternative applied on the server side is proposed in tx-table.tsx for symmetry.
🧹 Nitpick comments (5)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx (4)
114-123: Consider debouncing the Queue ID filter input.The filter triggers a query on every keystroke, which could result in excessive API calls as users type. Consider adding debouncing (e.g., 300-500ms) to improve performance and reduce server load.
Apply this pattern using a debounce hook or library:
const debouncedSetId = useMemo( () => debounce((value: string | undefined) => { setId(value); setPage(1); }, 300), [] ); // Then in onChange: onChange={(e) => { const value = e.target.value.trim(); debouncedSetId(value || undefined); }}
124-133: Consider debouncing and optional validation for wallet address filter.Similar to the Queue ID filter, this triggers queries on every keystroke. Additionally, consider adding basic wallet address format validation (e.g., 0x prefix, length check) to provide early feedback and prevent unnecessary API calls with invalid addresses.
For debouncing, apply the same pattern as suggested for Queue ID. For validation, you could add:
onChange={(e) => { const value = e.target.value.trim(); // Optional: Basic validation if (value && !value.match(/^0x[a-fA-F0-9]{40}$/)) { // Could show error state or just skip query } setFrom(value || undefined); setPage(1); }}Note: Validation is optional depending on whether you want to support partial matches or ENS names.
73-76: Add sensiblestaleTimefor React Query per guidelines.You’re polling every 4s; still add an explicit
staleTime(≥60s default per our guide) to reduce unnecessary re-computation and stabilize cache semantics.As per coding guidelines.
const transactionsQuery = useQuery({ placeholderData: keepPreviousData, - queryFn: () => props.getData({ page, status, id, from }), - queryKey: ["transactions", props.project.id, page, status, id, from], + staleTime: 60_000, + queryFn: () => props.getData({ page, status, id, from }), + queryKey: ["transactions", props.project.id, page, status, id, from], refetchInterval: autoUpdate ? 4_000 : false, });
113-134: Debounce filter inputs and add basic a11y + mobile input hygiene.Typing fires a request on each keypress. Add a small debounce and basic input attributes; this lowers load and avoids auto‑capitalization issues on mobile.
Option A (lightweight, no new deps): use React’s
useDeferredValue.-import { useId, useState } from "react"; +import { useDeferredValue, useId, useState } from "react"; // ... -const [id, setId] = useState<string | undefined>(undefined); -const [from, setFrom] = useState<string | undefined>(undefined); +const [id, setId] = useState<string | undefined>(undefined); +const [from, setFrom] = useState<string | undefined>(undefined); +const idQ = useDeferredValue(id); +const fromQ = useDeferredValue(from); -const transactionsQuery = useQuery({ +const transactionsQuery = useQuery({ placeholderData: keepPreviousData, - queryFn: () => props.getData({ page, status, id, from }), - queryKey: ["transactions", props.project.id, page, status, id, from], + queryFn: () => props.getData({ page, status, id: idQ, from: fromQ }), + queryKey: ["transactions", props.project.id, page, status, idQ, fromQ], refetchInterval: autoUpdate ? 4_000 : false, });Add a11y/mobile attributes to inputs:
<Input className="max-w-[250px]" onChange={(e) => { const value = e.target.value.trim(); setId(value || undefined); setPage(1); }} + aria-label="Filter by Queue ID" + autoCapitalize="off" + autoComplete="off" + autoCorrect="off" + inputMode="text" + spellCheck={false} placeholder="Filter by Queue ID" value={id || ""} /> <Input className="max-w-[250px]" onChange={(e) => { const value = e.target.value.trim(); setFrom(value || undefined); setPage(1); }} + aria-label="Filter by wallet address" + autoCapitalize="off" + autoComplete="off" + autoCorrect="off" + inputMode="text" + spellCheck={false} placeholder="Filter by wallet address" value={from || ""} />Optional: gate fetch while an entered
fromis not a valid EVM address (e.g., usingisAddressfromviem) by adding anenabledpredicate to the query. As per coding guidelines.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx (1)
39-47: Tighten types for filter inputs.If available, prefer using a shared
Address/Hextype (e.g., from your types barrel orviem) forfrom, and a branded/opaque type foridto avoid accidental mixups across fields. This also improves autocomplete at call sites.As per coding guidelines.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx(3 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx
🧠 Learnings (4)
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/_` (e.g., Button, Input, Tabs, Card)
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Import UI primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Always import from the central UI library under `@/components/ui/*` – e.g. `import { Button } from "@/components/ui/button"`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx (2)
packages/engine/src/client/sdk.gen.ts (1)
getTransactions(307-324)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/types.ts (1)
TransactionStatus(88-88)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx (1)
packages/thirdweb/src/react/web/ui/components/formElements.tsx (1)
Label(20-28)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (18)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx (6)
19-26: LGTM!The getData callback correctly forwards the new
idandfromparameters to thegetTransactionsfunction.
57-63: LGTM!The
searchParamscorrectly includes the newidandfromfilter parameters with the?? undefinedfallback pattern, consistent with the existingstatusparameter handling.
19-26: LGTM! getData callback properly forwards new filter parameters.The destructuring and forwarding of
idandfromparameters is clean and consistent with the extended type signature.
35-47: LGTM! Function signature properly extended.The
idandfromparameters follow the same optional pattern asstatus, maintaining consistency.
57-63: Resolved — undefined searchParams are filtered before URL serializationengineCloudProxy (apps/dashboard/src/@/actions/proxies.ts) iterates over params.searchParams and only appends truthy values (if (value) ...), so properties set to undefined are not added to the URL.
19-26: Manually verify engine endpoint query keysThe search didn’t locate any
/v1/transactionshandlers; confirm the engine route for transactions acceptsidandfromquery params (otherwise filters will be ignored).apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table-ui.tsx (12)
49-55: LGTM!The
getDataprop signature correctly extends the parameters to includeidandfromfilter fields, both typed asstring | undefined.
62-68: LGTM!The new state variables
idandfromare correctly initialized and follow the same pattern as the existingstatusstate.
71-76: LGTM!The
queryFnandqueryKeyare correctly updated to include the newidandfromparameters, ensuring proper cache invalidation and data refetching when filters change.
114-143: LGTM!The new filter input fields are well-implemented:
- Properly handle empty state with
undefined- Correctly reset pagination when filters change
- Use controlled component pattern with appropriate value handling
- Include descriptive placeholders
92-111: Layout restructuring looks good.The header section has been restructured to accommodate the new filter inputs with proper responsive design. The layout correctly uses Tailwind utilities and design tokens.
16-16: LGTM! Input import follows coding guidelines.Correctly imports from the central UI library as per project standards.
50-55: LGTM! getData signature properly extended.The addition of
idandfromparameters maintains type safety and consistency with the existing pattern.
66-67: LGTM! State variables properly initialized.The state initialization follows the same pattern as the existing
statusfilter.
71-76: LGTM! React Query properly configured for new filters.Both
queryFnandqueryKeycorrectly includeidandfrom, ensuring proper cache invalidation and data fetching when filters change.
92-111: LGTM! Header layout properly restructured for new filters.The responsive flex layout with conditional borders maintains a clean visual hierarchy while accommodating the new filter inputs.
134-143: LGTM! Status selector properly integrated with new layout.The existing status filtering logic is preserved while fitting into the new filter row layout.
53-55: Public prop shape change is clear and consistent.
getDatanow accepts{ page, status, id, from }. This matches the caller in tx-table.tsx and keeps the contract explicit. Looks good.
| limit: "20", | ||
| page: page.toString(), | ||
| status: status ?? undefined, | ||
| id: id ?? undefined, | ||
| from: from ?? undefined, | ||
| }, |
There was a problem hiding this comment.
Pagination mismatch: server limit is 20 but UI uses pageSize 10.
This desynchronizes:
- total pages calculation and “no results” state,
- skeleton row count (10) vs. rows returned (20),
- perceived vs. actual page size.
Pick one and align both sides.
Option A (keep UI at 10): change server limit to 10 here.
- limit: "20",
+ limit: "10",Option B (keep server at 20): update pageSize to 20 in tx-table-ui.tsx (Line 70). See companion comment there.
📝 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.
| limit: "20", | |
| page: page.toString(), | |
| status: status ?? undefined, | |
| id: id ?? undefined, | |
| from: from ?? undefined, | |
| }, | |
| limit: "10", | |
| page: page.toString(), | |
| status: status ?? undefined, | |
| id: id ?? undefined, | |
| from: from ?? undefined, | |
| }, |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/analytics/tx-table/tx-table.tsx
around lines 58 to 63, the server query uses limit: "20" while the UI pageSize
is 10 which causes pagination and skeleton mismatch; change the server limit to
"10" (limit: "10") so the backend returns the same number of rows per page as
the UI, ensuring total pages, no-results state and skeleton row counts align.
joaquim-verges
deleted the
_Dashboard_Add_transaction_filtering_by_Queue_ID_and_wallet_address
branch
PR-Codex overview
This PR enhances the
TransactionsTableUIcomponent by adding filtering capabilities for transactions based onidandfromfields. It modifies the data fetching function to include these new parameters, improving the user interface for transaction management.Detailed summary
getDatafunction to acceptidandfromparameters.getTransactionsfunction to handleidandfrom.idandfrominTransactionsTableUI.idandfromin the query key.Queue IDandwallet address.Summary by CodeRabbit
New Features
Style