Refactor project wallet setup and controls UI #8220
Conversation
Extracted project wallet setup logic into a new ProjectWalletSetup component, replacing the previous inline implementation in ProjectFTUX. Updated ProjectWalletControls to use a Select dropdown for wallet selection instead of a radio group. Improved user feedback messages and streamlined wallet selection and creation flows. Closes BLD-388
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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. |
WalkthroughReplaced the inline wallet-setup UI in ProjectFTUX with a new ProjectWalletSetup component. Updated wallet selection controls from radio buttons to a Select dropdown. Introduced a client component to fetch existing server wallets, allow selecting/creating, and set the project wallet. Minor copy changes in wallet table toasts/comments. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant FTUX as ProjectFTUX
participant Setup as ProjectWalletSetup
participant API as Server Wallets API
participant Cache as Query Cache
participant Router as Dashboard Router
participant Toast as Toast
User->>FTUX: Open Project
FTUX->>Setup: Render (project, teamSlug, token)
Setup->>API: Fetch server wallets (token)
API-->>Setup: Wallet list / none
alt Has wallets
User->>Setup: Select wallet (Select dropdown)
User->>Setup: Set as project wallet
else No wallets
User->>Setup: Create wallet
Setup->>API: Create wallet
API-->>Setup: Wallet created
end
Setup->>API: Set project wallet
API-->>Setup: Success/Failure
alt Success
Setup->>Cache: Invalidate server-wallets query
Setup->>Router: Refresh
Setup->>Toast: Show "Project wallet updated"
else Failure
Setup->>Toast: Show error
end
sequenceDiagram
autonumber
actor User
participant Controls as ProjectWalletControls
participant API as Server Wallets API
participant Toast as Toast
User->>Controls: Open "Change project wallet"
Controls->>Controls: Show Select with wallets
User->>Controls: Choose wallet
Controls->>API: Set project wallet
API-->>Controls: Success
Controls->>Toast: "Project wallet updated"
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8220 +/- ##
=======================================
Coverage 55.02% 55.02%
=======================================
Files 919 919
Lines 60583 60583
Branches 4126 4126
=======================================
Hits 33333 33333
Misses 27146 27146
Partials 104 104
🚀 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: 0
♻️ Duplicate comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsx (2)
136-172: Reuse note: SelectValue custom childrenSame caveat as in ProjectWalletControls: verify your Select supports children in SelectValue; otherwise switch to a supported pattern and set value={effectiveSelectedWalletId ?? undefined}.
31-53: Confirm client-side token usageDouble-check that exposing managementAccessToken client-side is acceptable. If sensitive, route calls through a server action/API and keep the token server-only.
As per coding guidelines
🧹 Nitpick comments (5)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx (2)
159-167: Balance refresh likely not invalidating the right query keyuseWalletBalance is an external hook; its internal queryKey may not be ["walletBalance", selectedChainId]. Your invalidateQueries may no-op. Prefer a predicate or call refetch on each cell.
Suggested change:
- await queryClient.invalidateQueries({ - queryKey: ["walletBalance", selectedChainId], - }); + await queryClient.invalidateQueries({ + predicate: (q) => + Array.isArray(q.queryKey) && + q.queryKey.includes(selectedChainId) && + (q.queryKey.includes("walletBalance") || q.queryKey.includes("balance")), + });Or wire a refresh callback into WalletBalanceCell and call balance.refetch() for each visible row.
318-321: Unify copy: "default" vs "project wallet"Toast says “Wallet set as project wallet” but UI shows “Set as default” and badge “default”. Align to avoid confusion.
Proposed diffs:
- <Badge variant="success" className="text-xs"> - default - </Badge> + <Badge variant="success" className="text-xs"> + current + </Badge>- Set as default + Set as project walletAlso applies to: 468-470, 425-426
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
110-114: Good extraction; confirm token exposure is intendedPassing managementAccessToken into a client component exposes it to the browser. If this token grants privileged actions, proxy via a server action/API instead and keep the token server-side.
Also consider updating the section copy (Lines 86-88) to drop “Default” for consistency with “Project wallet”.
As per coding guidelines
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (2)
355-415: Check SelectValue usage; children may not renderMany Select implementations (e.g., shadcn/radix-based) ignore children inside SelectValue and only render the current option’s text. If your Select doesn’t support custom children here, the selected content may appear blank.
If unsupported:
- Keep without children and render the selected summary next to the trigger, or
- Switch to a Combobox/Command pattern that supports fully custom selected/rendered content.
Also prefer value={selectedWalletId ?? undefined} to allow the placeholder to show when no selection.
Diff:
- <SelectValue placeholder="Select server wallet"> - {selectedWallet ? (/* custom JSX */) : "Select server wallet"} - </SelectValue> + <SelectValue placeholder="Select server wallet" />- value={selectedWalletId ?? ""} + value={selectedWalletId ?? undefined}
220-222: Align copy“Change default” → “Change project wallet” for consistency.
- Change default + Change project wallet
📜 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/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx(2 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx(3 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/wallet-table/wallet-table-ui.client.tsx(2 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/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.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/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx
🧠 Learnings (2)
📚 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)/components/ProjectFTUX/ProjectWalletControls.client.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/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsx
🧬 Code graph analysis (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (1)
apps/playground-web/src/components/ui/select.tsx (5)
Select(152-152)SelectTrigger(155-155)SelectValue(154-154)SelectContent(156-156)SelectItem(158-158)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsx (4)
apps/dashboard/src/@/lib/server/project-wallet.ts (1)
ProjectWalletSummary(8-12)apps/dashboard/src/@/actions/project-wallet/list-server-wallets.ts (1)
listProjectServerWallets(18-70)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/lib/vault.client.ts (1)
updateDefaultProjectWallet(190-216)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/transactions/server-wallets/components/create-server-wallet.client.tsx (1)
CreateServerWallet(20-135)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectFTUX.tsx (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsx (1)
ProjectWalletSetup(26-215)
⏰ 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)
🔇 Additional comments (2)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletControls.client.tsx (1)
171-173: Toast message update LGTMClearer phrasing; aligns with the broader wording change.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/ProjectFTUX/ProjectWalletSetup.client.tsx (1)
78-107: Mutation flow LGTMGood UX: errors surfaced, success toast, query invalidation, and router refresh for updated project state.
Extracted project wallet setup logic into a new ProjectWalletSetup component, replacing the previous inline implementation in ProjectFTUX. Updated ProjectWalletControls to use a Select dropdown for wallet selection instead of a radio group. Improved user feedback messages and streamlined wallet selection and creation flows.
Closes BLD-388
PR-Codex overview
This PR primarily focuses on updating the project wallet functionality in the dashboard, enhancing user feedback messages, and refactoring components related to wallet management.
Detailed summary
Alertcomponent inProjectWalletSectionwithProjectWalletSetup.ProjectWalletSetupcomponent for better wallet management.RadioGroupwith aSelectcomponent for wallet selection.ProjectWalletControlsfrom "Default project wallet updated" to "Project wallet updated".ProjectWalletSetupfor selecting existing wallets.Summary by CodeRabbit