[Dashboard] Add userId support across wallet APIs and UI #8290
Conversation
Introduces support for the userId field throughout wallet-related APIs and dashboard components. Updates search, display, and transformation logic to handle userId in addition to existing identifiers, and improves UI to distinguish between 'User Identifier' (userId) and 'Auth Identifier'. Updates API client types and documentation to reflect the new userId field. Closes BLD-447
🦋 Changeset detectedLatest commit: 26f951c The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
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. |
WalkthroughThe PR adds userId support across wallet APIs and the dashboard. Changes include a new userId search type in dashboard components, API response types populated with userId fields, search logic extended to query by userId, and UI updated to display both userId and auth identifier with truncation and copy functionality. Changes
Sequence Diagram(s)sequenceDiagram
participant User as Dashboard User
participant UI as AdvancedSearchInput
participant API as Wallet API
participant Transform as transformToWalletUser
participant Table as Results Table
User->>UI: Enter query + select "User Identifier" (userId)
UI->>API: GET /wallets?userId=<query>
API-->>UI: 200 OK (wallets with optional userId)
UI->>Transform: map API wallet -> WalletUser (prefer apiWallet.userId)
Transform-->>Table: WalletUser rows (include user_identifier, auth_identifier)
Table->>User: Render rows with truncated identifiers + CopyTextButton
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Pre-merge checks and finishing touches❌ Failed checks (2 warnings, 1 inconclusive)
✅ Passed checks (1 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 #8290 +/- ##
=======================================
Coverage 54.89% 54.89%
=======================================
Files 919 919
Lines 60623 60623
Branches 4116 4116
=======================================
Hits 33282 33282
Misses 27240 27240
Partials 101 101
🚀 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
🧹 Nitpick comments (1)
apps/dashboard/src/@/components/in-app-wallet-users-content/SearchResults.tsx (1)
28-33: Avoid duplicating identifier truncation logicThe same
truncateIdentifierhelper now lives here and inin-app-wallet-users-content.tsx. Hoisting this into a shared utility (or at least into a common module within this folder) would keep the behavior consistent and reduce drift if we need to tweak the formatting later.
📜 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 (9)
.changeset/breezy-heads-crash.md(1 hunks)apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx(3 hunks)apps/dashboard/src/@/components/in-app-wallet-users-content/SearchResults.tsx(4 hunks)apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx(4 hunks)apps/dashboard/src/@/components/in-app-wallet-users-content/searchUsers.ts(2 hunks)apps/dashboard/src/@/components/in-app-wallet-users-content/types.ts(1 hunks)apps/dashboard/src/@/hooks/useEmbeddedWallets.ts(1 hunks)packages/api/src/client/sdk.gen.ts(2 hunks)packages/api/src/client/types.gen.ts(7 hunks)
🧰 Additional context used
📓 Path-based instructions (7)
.changeset/*.md
📄 CodeRabbit inference engine (AGENTS.md)
.changeset/*.md: Each change inpackages/*must include a changeset for the appropriate package
Version bump rules: patch for non‑API changes; minor for new/modified public API
Files:
.changeset/breezy-heads-crash.md
**/*.{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/@/components/in-app-wallet-users-content/searchUsers.tsapps/dashboard/src/@/components/in-app-wallet-users-content/types.tsapps/dashboard/src/@/hooks/useEmbeddedWallets.tspackages/api/src/client/types.gen.tspackages/api/src/client/sdk.gen.tsapps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/SearchResults.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/@/components/in-app-wallet-users-content/searchUsers.tsapps/dashboard/src/@/components/in-app-wallet-users-content/types.tsapps/dashboard/src/@/hooks/useEmbeddedWallets.tspackages/api/src/client/types.gen.tspackages/api/src/client/sdk.gen.tsapps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/SearchResults.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/@/components/in-app-wallet-users-content/searchUsers.tsapps/dashboard/src/@/components/in-app-wallet-users-content/types.tsapps/dashboard/src/@/hooks/useEmbeddedWallets.tsapps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/SearchResults.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/@/components/in-app-wallet-users-content/searchUsers.tsapps/dashboard/src/@/components/in-app-wallet-users-content/types.tsapps/dashboard/src/@/hooks/useEmbeddedWallets.tsapps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/SearchResults.tsx
**/types.ts
📄 CodeRabbit inference engine (AGENTS.md)
Provide and re‑use local type barrels in a
types.tsfile
Files:
apps/dashboard/src/@/components/in-app-wallet-users-content/types.ts
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsxapps/dashboard/src/@/components/in-app-wallet-users-content/SearchResults.tsx
🧬 Code graph analysis (3)
apps/dashboard/src/@/components/in-app-wallet-users-content/AdvancedSearchInput.tsx (1)
apps/dashboard/src/@/components/in-app-wallet-users-content/types.ts (1)
SearchType(1-7)
apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx (1)
apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
CopyTextButton(9-68)
apps/dashboard/src/@/components/in-app-wallet-users-content/SearchResults.tsx (1)
apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
CopyTextButton(9-68)
⏰ 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: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
.changeset/breezy-heads-crash.md (1)
1-5: Verify version bump classification against API scope.According to the coding guidelines, version bumps should be: "patch for non‑API changes; minor for new/modified public API".
The AI summary indicates that userId fields are being added to multiple public response types (CompleteAuthenticationResponses, GetMyWalletResponses, ListUserWalletsResponses, etc.) and that "public typings [are] extended to document userId fields." Adding new fields to exported response types represents a modification to the public API surface, which typically warrants a minor version bump rather than patch.
Please verify that this changeset should be classified as "patch" or if it should be bumped to "minor" based on the scope of public API modifications.
Replaces the 'External Wallets' column with an 'Email' column in the in-app wallet users table. Adds a utility to extract the primary email from linked accounts and updates CSV export to include the email instead of external wallet addresses. Simplifies the getAuthIdentifier logic to prioritize the 'id' field.
0xFirekeeper
added
the
merge-queue
Merge activity
|
There was a problem hiding this comment.
Actionable comments posted: 3
📜 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/@/components/in-app-wallet-users-content/SearchResults.tsx(3 hunks)apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx(4 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/@/components/in-app-wallet-users-content/SearchResults.tsx
🧰 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/@/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/@/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/@/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/@/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/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx (1)
apps/dashboard/src/@/components/ui/CopyTextButton.tsx (1)
CopyTextButton(9-68)
⏰ 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). (7)
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx (4)
100-121: LGTM!The Auth Identifier column correctly uses the renamed
getAuthIdentifierfunction and applies truncation consistently. The tooltip and header labels are clear and descriptive.
132-152: LGTM!The Email column correctly uses
getPrimaryEmailwith appropriate fallback display and copy functionality. The decision not to truncate emails is appropriate for readability.
261-272: LGTM!The CSV export logic correctly maps the new fields (
auth_identifier,user_identifier) with appropriate fallbacks, maintaining consistency with the table display.
79-99: User Identifier column implementation verified.The
idproperty exists in theWalletUsertype as a string field inUserStatus(packages/thirdweb/src/wallets/in-app/core/wallet/enclave-wallet.ts:39). The implementation correctly accesses this property, handles null/undefined cases with the fallback to "N/A", and uses component utilities (truncateIdentifier,CopyTextButton) appropriately.
apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
Show resolved
Hide resolved
apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
Show resolved
Hide resolved
apps/dashboard/src/@/components/in-app-wallet-users-content/in-app-wallet-users-content.tsx
Show resolved
Hide resolved
1 participant
Closes BLD-447
PR-Codex overview
This PR focuses on adding support for
userIdacross various wallet APIs and updating related components to accommodate this new identifier, enhancing user identification in the application.Detailed summary
userIdsupport in wallet APIs and types.transformToWalletUserfunction to includeuserId.searchUsersto handleuserIdqueries.AdvancedSearchInputwithuserIdas a search type.SearchResultsandInAppWalletUsersPageContentto display and copyuserId.userIddetails.userId.Summary by CodeRabbit