[Dashboard] Move server wallet sections to wallets tab #8174
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughIntroduces server-side vault integration and pagination to the wallets page, restructures UI layouts for user and server wallet sections, centralizes CreateServerWallet alongside the network selector, and applies rounded styling updates to search inputs and buttons. No public API changes except Page props adding optional searchParams.page. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant B as Browser
participant P as Next.js Page (wallets/page.tsx)
participant EC as EngineCloud (mgmt token)
participant VS as Vault SDK (createVaultClient, listEoas)
participant PS as Project Service (getProject)
participant SWT as ServerWalletsTable
participant UWC as InAppWalletUsersPageContent
B->>P: Request /wallets?page=N
par Parallel fetch
P->>PS: getProject(team_slug, project_slug)
P->>EC: derive managementAccessToken
end
P->>VS: createVaultClient(project, managementAccessToken)
alt vault client and token available
P->>VS: listEoas({ pageSize: 5, page: N })
VS-->>P: { wallets, totalPages, totalRecords } or error
else unavailable
P-->>P: Fallback to empty wallets data
end
P->>SWT: Render with { currentPage, totalPages, totalRecords, wallets, error? }
P->>UWC: Render User wallets section
SWT-->>B: Server wallets UI
UWC-->>B: User wallets UI
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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. |
joaquim-verges
changed the title
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
| // @ts-expect-error - TODO: fix this | ||
| page_size: pageSize, |
There was a problem hiding this comment.
The @ts-expect-error suppression suggests a type mismatch between the parameter name used (page_size) and what the Vault SDK expects. Consider checking the SDK documentation for the correct parameter naming convention - it might be pageSize (camelCase) rather than page_size (snake_case). Addressing this type error would improve code maintainability and prevent potential runtime issues.
| // @ts-expect-error - TODO: fix this | |
| page_size: pageSize, | |
| pageSize, |
Spotted by Diamond
Is this helpful? React 👍 or 👎 to let us know.
This comment came from an experimental review—please leave feedback if it was helpful/unhelpful. Learn more about experimental comments here.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8174 +/- ##
=======================================
Coverage 56.29% 56.29%
=======================================
Files 906 906
Lines 59209 59209
Branches 4182 4182
=======================================
Hits 33330 33330
Misses 25774 25774
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
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx (1)
67-83: Sanitize the requested page number.
Number.parseIntcan yieldNaNor values ≤ 0, which then sendsnull/negative pages to the vault API. Clamp to at least 1 (and prefer base 10 parsing) so we always request valid pages.- const pageSize = 5; - const currentPage = Number.parseInt(searchParams.page ?? "1"); + const pageSize = 5; + const parsedPage = Number.parseInt(searchParams.page ?? "1", 10); + const currentPage = Number.isFinite(parsedPage) && parsedPage > 0 ? parsedPage : 1;
📜 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 (4)
apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx(3 hunks)apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx(4 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx(5 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/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.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/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.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/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.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/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.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/server-wallets/wallet-table/wallet-table-ui.client.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx (1)
CreateServerWallet(22-168)apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx (1)
SingleNetworkSelector(152-298)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx (4)
packages/vault-sdk/src/sdk.ts (2)
createVaultClient(111-165)listEoas(326-337)apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_THIRDWEB_VAULT_URL(4-5)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table.tsx (1)
ServerWalletsTable(6-37)apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx (1)
InAppWalletUsersPageContent(47-346)
⏰ 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). (4)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
| const [vaultClient, project] = await Promise.all([ | ||
| createVaultClient({ | ||
| baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL, | ||
| }).catch(() => undefined), | ||
| getProject(params.team_slug, params.project_slug), | ||
| ]); |
There was a problem hiding this comment.
Fix vault client fallback when env is unset.
Passing baseUrl as an empty string makes createVaultClient throw (the URL constructor rejects ""), so we silently fall back to vaultClient = undefined and the server wallet list never loads unless the env var is set. Coerce the value to undefined so the SDK’s default base URL is used when the env is absent.
- const [vaultClient, project] = await Promise.all([
- createVaultClient({
- baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL,
- }).catch(() => undefined),
+ const [vaultClient, project] = await Promise.all([
+ createVaultClient({
+ baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL || undefined,
+ }).catch(() => undefined),📝 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.
| const [vaultClient, project] = await Promise.all([ | |
| createVaultClient({ | |
| baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL, | |
| }).catch(() => undefined), | |
| getProject(params.team_slug, params.project_slug), | |
| ]); | |
| const [vaultClient, project] = await Promise.all([ | |
| createVaultClient({ | |
| baseUrl: NEXT_PUBLIC_THIRDWEB_VAULT_URL || undefined, | |
| }).catch(() => undefined), | |
| getProject(params.team_slug, params.project_slug), | |
| ]); |
🤖 Prompt for AI Agents
In
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/page.tsx
around lines 48 to 53, the vault client fallback fails because an empty string
is passed as baseUrl which makes createVaultClient throw; change the baseUrl
argument so that an empty string becomes undefined (e.g. coerce
NEXT_PUBLIC_THIRDWEB_VAULT_URL to undefined when falsy) so the SDK uses its
default URL, and keep the .catch(() => undefined) behavior for any runtime
errors.
PR-Codex overview
This PR focuses on enhancing the user interface and functionality of the in-app wallet management components, including improved styling and the addition of new features for better user experience.
Detailed summary
SelectTriggerandInputcomponents to usebg-background.SingleNetworkSelectorandCreateServerWalletin a flex container for better layout.CreateServerWalletinstances.UserIconto theInAppWalletUsersPageContent.InAppWalletUsersPageContent.Summary by CodeRabbit
New Features
UI
Changes