[Dashboard] Show project server wallet balance for any token #8469
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 1a11e0d The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
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 |
WalkthroughThis PR adds token selection capabilities to the dashboard wallet interface with local storage persistence, extends the SendProjectWalletModal to support sending specific tokens with dynamic decimal calculation, refines the getWalletBalance utility to correctly handle native vs. ERC20 tokens, and updates portal documentation tab defaults. Changes
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 (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
github-actions
bot
added
Dashboard
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
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8469 +/- ##
=======================================
Coverage 54.83% 54.83%
=======================================
Files 920 920
Lines 60891 60891
Branches 4144 4141 -3
=======================================
Hits 33390 33390
+ Misses 27400 27399 -1
- Partials 101 102 +1
🚀 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 (3)
packages/thirdweb/src/wallets/utils/getWalletBalance.ts (1)
47-75: ERC20/native split correctly ignoresNATIVE_TOKEN_ADDRESSin the ERC20 branch.The new guard
tokenAddress && tokenAddress !== NATIVE_TOKEN_ADDRESSensures native balances still go through the RPC path even when callers pass the native sentinel, matching how native tokens are represented in this repo. Consider updating the JSDoc fortokenAddressto also mention that passingNATIVE_TOKEN_ADDRESSis treated as a native-balance request for clarity.Based on learnings,
NATIVE_TOKEN_ADDRESSis the canonical native-token sentinel.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (2)
13-21: Double-check tokenAddress semantics in the send flow and remove debug logging.The send modal updates are generally good, but there are two things worth confirming/tweaking:
ERC20 decimals vs native sentinel:
- In
mutationFn, any truthyvalues.tokenAddresstriggers an ERC20decimals()read viareadContract, andquantityWeiis computed with thatdecimals.- If
TokenSelectorcan ever emitNATIVE_TOKEN_ADDRESSfor the native token (as in other flows), this branch would attemptdecimals()on a non-ERC20 native sentinel, which would likely revert.- If this selector is guaranteed to only ever return real ERC20 contract addresses here, you’re fine; otherwise, it’s safer to mirror the
getWalletBalanceguard and only treatvalues.tokenAddressas ERC20 when it’s not the native sentinel.Suggested shape (pseudo-diff, assuming
NATIVE_TOKEN_ADDRESSis available here):let decimals = 18;
- if (values.tokenAddress) {
- if (values.tokenAddress && values.tokenAddress !== NATIVE_TOKEN_ADDRESS) {
const decimalsRpc = await readContract({ /* ... */ });
decimals = Number(decimalsRpc);
}You could later derive the native-decimals default from `selectedChain?.nativeCurrency.decimals` if needed.
- Remove
console.logfrom the mutation:
console.log("decimals", decimals);inside the mutation will spam the console in production for every send; this looks like leftover debug and can be safely removed.Overall structure (schema, default values including
tokenAddress, TokenSelector FormField, and dynamic FormDescription based onselectedFormTokenAddress) is sound; this is mainly about tightening the ERC20/native split and avoiding noisy logs.Based on learnings,
NATIVE_TOKEN_ADDRESSis the canonical native-token sentinel, so aligning this branch withgetWalletBalancewould avoid edge cases if the selector ever returns it.Also applies to: 574-605, 634-670, 672-701, 760-763, 772-805, 830-833
707-709: Avoid JSON-stringifying string error messages in the toast.
errorMessage = JSON.stringify(result.error, null, 2)works well for structured objects but will wrap plain string errors in quotes, which can look odd in the toast UI.You might prefer something like:
- const errorMessage = result.error - ? JSON.stringify(result.error, null, 2) - : "Failed to send funds"; + const errorMessage = + typeof result.error === "string" + ? result.error + : result.error + ? JSON.stringify(result.error, null, 2) + : "Failed to send funds";This keeps nice formatting for JSON-like errors while preserving clean strings.
📜 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 (5)
.changeset/chatty-rules-listen.md(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx(15 hunks)apps/portal/src/app/x402/client/page.mdx(1 hunks)apps/portal/src/app/x402/page.mdx(1 hunks)packages/thirdweb/src/wallets/utils/getWalletBalance.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript 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 in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
packages/thirdweb/src/wallets/utils/getWalletBalance.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
packages/thirdweb/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/**/*.{ts,tsx}: Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (e.g.const { jsPDF } = await import("jspdf");)Lazy-load heavy dependencies inside async paths to keep the initial bundle lean (e.g., const { jsPDF } = await import('jspdf');)
Files:
packages/thirdweb/src/wallets/utils/getWalletBalance.ts
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
packages/thirdweb/src/wallets/utils/getWalletBalance.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
packages/thirdweb/src/wallets/utils/getWalletBalance.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}: Import UI component primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Use Tailwind CSS only – no inline styles or CSS modules in dashboard and playground
Usecn()from@/lib/utilsfor conditional Tailwind class merging
Use design system tokens for styling (backgrounds:bg-card, borders:border-border, muted text:text-muted-foreground)
ExposeclassNameprop on root element for component overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/*.{ts,tsx}: UseNavLinkfor internal navigation with automatic active states in dashboard
Start server component files withimport "server-only";in Next.js
Read cookies/headers withnext/headersin server components
Access server-only environment variables in server components
Perform heavy data fetching in server components
Implement redirect logic withredirect()fromnext/navigationin server components
Begin client component files with'use client';directive in Next.js
Handle interactive UI with React hooks (useState,useEffect, React Query, wallet hooks) in client components
Access browser APIs (localStorage,window,IntersectionObserver) in client components
Support fast transitions with prefetched data in client components
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader for API calls – never embed tokens in URLs
Return typed results (Project[],User[]) from server-side data fetches – avoidany
Wrap client-side API calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysin React Query for 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 – only use analytics client-side
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.{ts,tsx}: Always import from the central UI library under@/components/ui/*for reusable core UI components likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; never embed raw SVG
Keep components pure; fetch data outside using server components or hooks and pass it down via props
Use Tailwind CSS as the styling system; avoid inline styles or CSS modules
Merge class names withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand other Tailwind variables instead of hard-coded colors
Use spacing utilities (px-*,py-*,gap-*) instead of custom margins
Follow mobile-first responsive design with Tailwind helpers (max-sm,md,lg,xl)
Never hard-code colors; always use Tailwind variables
Combine class names viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/dashboard/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Add
classNameprop to the root element of every component to allow external overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}: Group feature-specific components under feature/components/_ and expose a barrel index.ts when necessary
Expose a className prop on the root element of every component for styling overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
🧠 Learnings (29)
📓 Common learnings
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Pull request titles must start with the affected workspace in brackets (e.g., [SDK], [Dashboard], [Portal], [Playground])
📚 Learning: 2025-11-24T22:45:01.202Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Applies to packages/**/.changeset/*.md : Each change in packages/* should contain a changeset for the appropriate package with the appropriate version bump: patch for changes that don't impact the public API, minor for any new/modified public API
Applied to files:
.changeset/chatty-rules-listen.md
📚 Learning: 2025-08-28T12:14:44.134Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7933
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/utils/calculate-tick.ts:1-5
Timestamp: 2025-08-28T12:14:44.134Z
Learning: In thirdweb, ZERO_ADDRESS is not a valid token address value and should not be treated as a representation of native tokens. Native tokens are represented by NATIVE_TOKEN_ADDRESS only.
Applied to files:
.changeset/chatty-rules-listen.md
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/dashboard/src/**/*.{ts,tsx} : Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks) in client components
Applied to files:
apps/portal/src/app/x402/page.mdxapps/portal/src/app/x402/client/page.mdxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:45:01.202Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Applies to apps/{dashboard,playground}/**/*.{tsx,ts} : Use NavLink for internal navigation so active states are handled automatically
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Applies to apps/dashboard/**/*.{ts,tsx} : Use `NavLink` from `@/components/ui/NavLink` for internal navigation to ensure active states are handled automatically
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:45:01.202Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Applies to apps/{dashboard,playground}/**/*.{tsx,ts} : Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
Applied to files:
apps/portal/src/app/x402/page.mdxapps/portal/src/app/x402/client/page.mdxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/dashboard/src/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:45:01.202Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Applies to apps/{dashboard,playground}/**/*.{tsx,ts} : Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Applied to files:
apps/portal/src/app/x402/page.mdxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Use interactive client components for UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks)
Applied to files:
apps/portal/src/app/x402/page.mdxapps/portal/src/app/x402/client/page.mdxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/dashboard/src/**/*.{ts,tsx} : Begin client component files with `'use client';` directive in Next.js
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Applies to apps/dashboard/**/*.{ts,tsx} : Use React Query (`tanstack/react-query`) for all client-side data fetching with typed hooks
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Applies to apps/dashboard/**/*.client.tsx : Name component files after the component in PascalCase; append `.client.tsx` when the component is interactive
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-08-28T12:24:37.171Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7933
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-sale.tsx:0-0
Timestamp: 2025-08-28T12:24:37.171Z
Learning: In the token creation flow, the tokenAddress field in erc20Asset_poolMode is always initialized with nativeTokenAddress and is never undefined, so conditional checks for undefined tokenAddress are not needed.
Applied to files:
packages/thirdweb/src/wallets/utils/getWalletBalance.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to **/*.test.{ts,tsx} : Use predefined test accounts from `test/src/test-wallets.ts` in tests
Applied to files:
packages/thirdweb/src/wallets/utils/getWalletBalance.ts
📚 Learning: 2025-10-16T19:00:34.707Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 8267
File: packages/thirdweb/src/extensions/erc20/read/getCurrencyMetadata.ts:47-52
Timestamp: 2025-10-16T19:00:34.707Z
Learning: In the thirdweb SDK's getCurrencyMetadata function (packages/thirdweb/src/extensions/erc20/read/getCurrencyMetadata.ts), zero decimals is not a valid value for native currency. If `options.contract.chain.nativeCurrency.decimals` is 0, it should be treated as missing/invalid data and trigger an API fetch to get the correct native currency metadata.
Applied to files:
packages/thirdweb/src/wallets/utils/getWalletBalance.ts
📚 Learning: 2025-08-28T19:32:54.690Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7939
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx:62-76
Timestamp: 2025-08-28T19:32:54.690Z
Learning: In the StepCard component (apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx), all Next buttons should always use type="submit", even when nextButton.type is "click". The onClick handler for click-type buttons provides additional behavior on top of the submit functionality, not instead of it.
Applied to files:
apps/portal/src/app/x402/client/page.mdx
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/{dashboard,playground-web}/src/**/*.{ts,tsx} : Use design system tokens for styling (backgrounds: `bg-card`, borders: `border-border`, muted text: `text-muted-foreground`)
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/dashboard/src/**/*.{ts,tsx} : Keep tokens secret via internal API routes or server actions
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:45:01.202Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Applies to apps/{dashboard,playground}/**/*.{tsx,ts} : Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Applies to apps/dashboard/**/*.{ts,tsx} : Import icons from `lucide-react` or the project-specific `…/icons` exports; never embed raw SVG
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
Repo: thirdweb-dev/js PR: 7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-10-03T23:36:00.631Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8181
File: packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx:27-27
Timestamp: 2025-10-03T23:36:00.631Z
Learning: In packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx, the component intentionally uses a hardcoded English locale (connectLocaleEn) rather than reading from the provider, as BuyWidget is designed to be English-only and does not require internationalization support.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-09-23T19:56:43.668Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8106
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485
Timestamp: 2025-09-23T19:56:43.668Z
Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Use client components for anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-05-20T18:54:15.781Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7081
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page-impl.tsx:110-118
Timestamp: 2025-05-20T18:54:15.781Z
Learning: In the thirdweb dashboard's token asset creation flow, the `transferBatch` function from `thirdweb/extensions/erc20` accepts the raw quantity values from the form without requiring explicit conversion to wei using `toUnits()`. The function appears to handle this conversion internally or is designed to work with the values in the format they're already provided.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
🧬 Code graph analysis (2)
packages/thirdweb/src/wallets/utils/getWalletBalance.ts (1)
packages/thirdweb/src/exports/thirdweb.ts (1)
NATIVE_TOKEN_ADDRESS(31-31)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (3)
apps/dashboard/src/@/hooks/chains/v5-adapter.ts (1)
useV5DashboardChain(14-28)apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx (1)
SingleNetworkSelector(152-298)packages/thirdweb/src/exports/extensions/erc20.ts (1)
decimals(100-100)
⏰ 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). (9)
- GitHub Check: Vercel Agent Review
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
.changeset/chatty-rules-listen.md (1)
1-5: Changeset correctly declares a patch forthirdweb.Package name and bump type match the behavioral, non-API change (“Allow passing NATIVE_TOKEN_ADDRESS to getWalletBalance()”). No further edits needed.
Based on learnings, this aligns with the “patch for behavior, minor for API surface” rule.
apps/portal/src/app/x402/page.mdx (1)
36-45: React-first tab configuration looks consistent.Switching
defaultValueto"react"and reordering the triggers keeps thevaluewiring intact while emphasizing the React example; TypeScript content remains accessible.apps/portal/src/app/x402/client/page.mdx (1)
24-33: React as the default client tab is wired correctly.The Tabs
defaultValue="react"and reordered triggers keepvaluemappings intact while surfacing React first. TypeScript and HTTP examples remain accessible without behavior changes.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (1)
88-123: LocalStorage-backed chain/token selection and TokenSelector wiring look solid.
- Storage helpers are correctly gated on
typeof window !== "undefined"and swallow parse/storage errors, which is appropriate for non-critical preferences.- Initial
selectedChainId/selectedTokenAddressvalues are derived once from storage or sensible defaults; updates on chain/token change keep storage in sync.handleChainChangeresetting the token selection and persisting{ chainId, tokenAddress: undefined }avoids cross-chain token leaks.useWalletBalancenow receivestokenAddress, and the pairedSingleNetworkSelector+TokenSelectorin the balance row keep network and token selection in sync with the Send/Fund modals.No functional issues stand out here.
Also applies to: 131-177, 204-209, 292-350, 354-365
joaquim-verges
force-pushed
the
_SDK_Allow_passing_NATIVE_TOKEN_ADDRESS_to_getWalletBalance_
branch
from
5541e1b to
f74cfa8
Compare
joaquim-verges
force-pushed
the
_SDK_Allow_passing_NATIVE_TOKEN_ADDRESS_to_getWalletBalance_
branch
from
f74cfa8 to
1a11e0d
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsx (1)
1-1: Add"server-only"import for server component.Server components should start with
import "server-only";to prevent client bundling and make the intent explicit.As per coding guidelines, server components that read cookies/headers, access server-only environment variables, or perform heavy data fetching should include this import.
Apply this diff:
+import "server-only"; + import { createVaultClient, listEoas } from "@thirdweb-dev/vault-sdk";apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (2)
125-125: Consider exposingclassNameprop for styling overrides.Per coding guidelines, components should expose a
classNameprop on the root element to allow external styling overrides.Apply this diff:
-export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps) { +export function ProjectWalletDetailsSection(props: ProjectWalletControlsProps & { className?: string }) { const { projectWallet, project, defaultChainId } = props; // ... return ( - <div> + <div className={props.className}>
708-710: Improve error serialization for better user feedback.Using
JSON.stringifyon error objects may not capture useful details because Error properties are non-enumerable and often serialize to"{}".Apply this diff for better error messages:
if (!result.ok) { - const errorMessage = result.error - ? JSON.stringify(result.error, null, 2) - : "Failed to send funds"; + const errorMessage = result.error + ? (typeof result.error === "string" + ? result.error + : result.error instanceof Error + ? result.error.message + : JSON.stringify(result.error, Object.getOwnPropertyNames(result.error), 2)) + : "Failed to send funds"; throw new Error(errorMessage); }This handles string errors, Error instances, and other objects more gracefully.
📜 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 (6)
.changeset/chatty-rules-listen.md(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx(18 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsx(2 hunks)apps/portal/src/app/x402/client/page.mdx(1 hunks)apps/portal/src/app/x402/page.mdx(1 hunks)packages/thirdweb/src/wallets/utils/getWalletBalance.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- .changeset/chatty-rules-listen.md
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript 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 in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxpackages/thirdweb/src/wallets/utils/getWalletBalance.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}: Import UI component primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Use Tailwind CSS only – no inline styles or CSS modules in dashboard and playground
Usecn()from@/lib/utilsfor conditional Tailwind class merging
Use design system tokens for styling (backgrounds:bg-card, borders:border-border, muted text:text-muted-foreground)
ExposeclassNameprop on root element for component overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/*.{ts,tsx}: UseNavLinkfor internal navigation with automatic active states in dashboard
Start server component files withimport "server-only";in Next.js
Read cookies/headers withnext/headersin server components
Access server-only environment variables in server components
Perform heavy data fetching in server components
Implement redirect logic withredirect()fromnext/navigationin server components
Begin client component files with'use client';directive in Next.js
Handle interactive UI with React hooks (useState,useEffect, React Query, wallet hooks) in client components
Access browser APIs (localStorage,window,IntersectionObserver) in client components
Support fast transitions with prefetched data in client components
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader for API calls – never embed tokens in URLs
Return typed results (Project[],User[]) from server-side data fetches – avoidany
Wrap client-side API calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysin React Query for 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 – only use analytics client-side
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.{ts,tsx}: Always import from the central UI library under@/components/ui/*for reusable core UI components likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; never embed raw SVG
Keep components pure; fetch data outside using server components or hooks and pass it down via props
Use Tailwind CSS as the styling system; avoid inline styles or CSS modules
Merge class names withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand other Tailwind variables instead of hard-coded colors
Use spacing utilities (px-*,py-*,gap-*) instead of custom margins
Follow mobile-first responsive design with Tailwind helpers (max-sm,md,lg,xl)
Never hard-code colors; always use Tailwind variables
Combine class names viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/dashboard/**/page.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Use the
containerclass with amax-w-7xlcap for consistent page width
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxpackages/thirdweb/src/wallets/utils/getWalletBalance.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxpackages/thirdweb/src/wallets/utils/getWalletBalance.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
packages/thirdweb/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/**/*.{ts,tsx}: Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (e.g.const { jsPDF } = await import("jspdf");)Lazy-load heavy dependencies inside async paths to keep the initial bundle lean (e.g., const { jsPDF } = await import('jspdf');)
Files:
packages/thirdweb/src/wallets/utils/getWalletBalance.ts
apps/dashboard/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Add
classNameprop to the root element of every component to allow external overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}: Group feature-specific components under feature/components/_ and expose a barrel index.ts when necessary
Expose a className prop on the root element of every component for styling overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
🧠 Learnings (33)
📓 Common learnings
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7307
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:324-346
Timestamp: 2025-06-09T15:15:02.350Z
Learning: In the move-funds functionality, MananTank prefers having both individual toast.promise notifications for each token transfer AND batch summary toasts, even though this creates multiple notifications. This dual notification approach is acceptable for the move-funds user experience.
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/dashboard/src/**/*.{ts,tsx} : Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks) in client components
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Use interactive client components for UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks)
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/dashboard/src/**/*.{ts,tsx} : Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks) in client components
Applied to files:
apps/portal/src/app/x402/client/page.mdxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:45:01.202Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Applies to apps/{dashboard,playground}/**/*.{tsx,ts} : Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
Applied to files:
apps/portal/src/app/x402/client/page.mdxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Applies to apps/dashboard/**/*.client.tsx : Name component files after the component in PascalCase; append `.client.tsx` when the component is interactive
Applied to files:
apps/portal/src/app/x402/client/page.mdx
📚 Learning: 2025-08-28T19:32:54.690Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7939
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx:62-76
Timestamp: 2025-08-28T19:32:54.690Z
Learning: In the StepCard component (apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/_common/step-card.tsx), all Next buttons should always use type="submit", even when nextButton.type is "click". The onClick handler for click-type buttons provides additional behavior on top of the submit functionality, not instead of it.
Applied to files:
apps/portal/src/app/x402/client/page.mdx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Use interactive client components for UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks)
Applied to files:
apps/portal/src/app/x402/client/page.mdxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/portal/src/app/x402/page.mdx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout changes.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-08-20T10:35:18.543Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 7888
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/payments/page.tsx:77-81
Timestamp: 2025-08-20T10:35:18.543Z
Learning: The webhooks/payments route exists at apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/payments/page.tsx and was added as part of the unified project layout PR #7888.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-05-21T05:17:31.283Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 6929
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx:14-19
Timestamp: 2025-05-21T05:17:31.283Z
Learning: In Next.js server components, the `params` object can sometimes be a Promise that needs to be awaited, despite type annotations suggesting otherwise. In apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/insight/webhooks/page.tsx, it's necessary to await the params object before accessing its properties.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsx
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to **/*.test.{ts,tsx} : Use predefined test accounts from `test/src/test-wallets.ts` in tests
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsxpackages/thirdweb/src/wallets/utils/getWalletBalance.ts
📚 Learning: 2025-06-24T21:38:03.155Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7434
File: apps/dashboard/src/app/(app)/team/~/~/contract/[chain]/[contractAddress]/components/project-selector.tsx:62-76
Timestamp: 2025-06-24T21:38:03.155Z
Learning: In the project-selector.tsx component for contract imports, the addToProject.mutate() call is intentionally not awaited (fire-and-forget pattern) to allow immediate navigation to the contract page while the import happens in the background. This is a deliberate design choice to prioritize user experience.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Applies to apps/dashboard/**/api/**/*.{ts,tsx} : Co-locate data helpers under `@/api/**` and mark them with `"server-only"` import
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsx
📚 Learning: 2025-11-24T22:45:01.202Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsx
📚 Learning: 2025-11-24T22:45:01.202Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Applies to apps/{dashboard,playground}/**/*.{tsx,ts} : Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsx
📚 Learning: 2025-08-28T12:24:37.171Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7933
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-sale.tsx:0-0
Timestamp: 2025-08-28T12:24:37.171Z
Learning: In the token creation flow, the tokenAddress field in erc20Asset_poolMode is always initialized with nativeTokenAddress and is never undefined, so conditional checks for undefined tokenAddress are not needed.
Applied to files:
packages/thirdweb/src/wallets/utils/getWalletBalance.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-10-16T19:00:34.707Z
Learnt from: jnsdls
Repo: thirdweb-dev/js PR: 8267
File: packages/thirdweb/src/extensions/erc20/read/getCurrencyMetadata.ts:47-52
Timestamp: 2025-10-16T19:00:34.707Z
Learning: In the thirdweb SDK's getCurrencyMetadata function (packages/thirdweb/src/extensions/erc20/read/getCurrencyMetadata.ts), zero decimals is not a valid value for native currency. If `options.contract.chain.nativeCurrency.decimals` is 0, it should be treated as missing/invalid data and trigger an API fetch to get the correct native currency metadata.
Applied to files:
packages/thirdweb/src/wallets/utils/getWalletBalance.ts
📚 Learning: 2025-06-06T23:47:55.122Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7298
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:255-277
Timestamp: 2025-06-06T23:47:55.122Z
Learning: The `transfer` function from `thirdweb/extensions/erc20` accepts human-readable amounts via the `amount` property and automatically handles conversion to base units (wei) by fetching the token decimals internally. Manual conversion using `toWei()` is not required when using the `amount` property.
Applied to files:
packages/thirdweb/src/wallets/utils/getWalletBalance.ts
📚 Learning: 2025-05-20T18:54:15.781Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7081
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/assets/create/create-token-page-impl.tsx:110-118
Timestamp: 2025-05-20T18:54:15.781Z
Learning: In the thirdweb dashboard's token asset creation flow, the `transferBatch` function from `thirdweb/extensions/erc20` accepts the raw quantity values from the form without requiring explicit conversion to wei using `toUnits()`. The function appears to handle this conversion internally or is designed to work with the values in the format they're already provided.
Applied to files:
packages/thirdweb/src/wallets/utils/getWalletBalance.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/{dashboard,playground-web}/src/**/*.{ts,tsx} : Use design system tokens for styling (backgrounds: `bg-card`, borders: `border-border`, muted text: `text-muted-foreground`)
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/dashboard/src/**/*.{ts,tsx} : Keep tokens secret via internal API routes or server actions
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Applies to apps/dashboard/**/*.{ts,tsx} : Import icons from `lucide-react` or the project-specific `…/icons` exports; never embed raw SVG
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-07-07T21:21:47.488Z
Learnt from: saminacodes
Repo: thirdweb-dev/js PR: 7543
File: apps/portal/src/app/pay/page.mdx:4-4
Timestamp: 2025-07-07T21:21:47.488Z
Learning: In the thirdweb-dev/js repository, lucide-react icons must be imported with the "Icon" suffix (e.g., ExternalLinkIcon, RocketIcon) as required by the new linting rule, contrary to the typical lucide-react convention of importing without the suffix.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Use client components for anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-10-03T23:36:00.631Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8181
File: packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx:27-27
Timestamp: 2025-10-03T23:36:00.631Z
Learning: In packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx, the component intentionally uses a hardcoded English locale (connectLocaleEn) rather than reading from the provider, as BuyWidget is designed to be English-only and does not require internationalization support.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-07-31T16:17:42.753Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7768
File: apps/playground-web/src/app/navLinks.ts:1-1
Timestamp: 2025-07-31T16:17:42.753Z
Learning: Configuration files that import and reference React components (like icon components from lucide-react) need the "use client" directive, even if they primarily export static data, because the referenced components need to be executed in a client context when used by other client components.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-09-23T19:56:43.668Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8106
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485
Timestamp: 2025-09-23T19:56:43.668Z
Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.
Applied to files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
📚 Learning: 2025-11-24T22:45:01.202Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Applies to apps/{dashboard,playground}/**/*.{tsx,ts} : 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/project-wallet/project-wallet-details.tsxapps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:45:01.202Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-11-24T22:45:01.202Z
Learning: Applies to apps/{dashboard,playground}/**/*.{tsx,ts} : Use NavLink for internal navigation so active states are handled automatically
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/dashboard/src/**/*.{ts,tsx} : Begin client component files with `'use client';` directive in Next.js
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:43:43.644Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T22:43:43.644Z
Learning: Applies to apps/dashboard/src/**/*.{ts,tsx} : Use `NavLink` for internal navigation with automatic active states in dashboard
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7356
File: apps/nebula/src/app/not-found.tsx:1-1
Timestamp: 2025-06-17T18:30:52.976Z
Learning: In the thirdweb/js project, the React namespace is available for type annotations (like React.FC) without needing to explicitly import React. This is project-specific configuration that differs from typical TypeScript/React setups.
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Applies to apps/dashboard/**/*.{ts,tsx} : Use React Query (`tanstack/react-query`) for all client-side data fetching with typed hooks
Applied to files:
apps/portal/src/app/x402/page.mdx
📚 Learning: 2025-11-24T22:44:20.977Z
Learnt from: CR
Repo: thirdweb-dev/js PR: 0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-11-24T22:44:20.977Z
Learning: Applies to apps/dashboard/**/*.{ts,tsx} : Use `NavLink` from `@/components/ui/NavLink` for internal navigation to ensure active states are handled automatically
Applied to files:
apps/portal/src/app/x402/page.mdx
🧬 Code graph analysis (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsx (2)
apps/dashboard/src/@/lib/server/project-wallet.ts (1)
getProjectWallet(25-99)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet.tsx (1)
ProjectWalletSection(343-360)
packages/thirdweb/src/wallets/utils/getWalletBalance.ts (1)
packages/thirdweb/src/exports/thirdweb.ts (1)
NATIVE_TOKEN_ADDRESS(31-31)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (4)
apps/dashboard/src/@/hooks/chains/v5-adapter.ts (1)
useV5DashboardChain(14-28)packages/thirdweb/src/exports/utils.ts (1)
shortenAddress(149-149)apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx (1)
SingleNetworkSelector(152-298)packages/thirdweb/src/exports/extensions/erc20.ts (1)
decimals(100-100)
⏰ 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: Vercel Agent Review
- GitHub Check: Analyze (javascript)
🔇 Additional comments (12)
apps/portal/src/app/x402/client/page.mdx (1)
24-33: Tab reordering and default preference change look good.React is now the default and first tab trigger, making it the primary documentation path. TypeScript and HTTP tabs remain fully accessible and properly aligned with their content blocks.
apps/portal/src/app/x402/page.mdx (1)
36-45: Tab reordering consistent with x402/client documentation.React is now the default and primary tab, with TypeScript still accessible as a secondary option. All tab content remains properly synchronized with trigger values.
packages/thirdweb/src/wallets/utils/getWalletBalance.ts (1)
47-47: LGTM! Correct logic to exclude native token from ERC20 path.The added check ensures that when
tokenAddressis explicitly set toNATIVE_TOKEN_ADDRESS, the function correctly falls through to the native token balance path instead of attempting to fetch it as an ERC20 token.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/server-wallets/page.tsx (1)
120-130: LGTM! Proper integration of project wallet section.The project wallet data is fetched server-side and correctly passed to the ProjectWalletSection component. Error handling is appropriately delegated to
getProjectWallet, which returnsundefinedon failure.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (8)
88-123: LGTM! Well-implemented localStorage helpers.The storage utilities properly handle SSR scenarios with
windowchecks and gracefully catch parse/storage errors. Using a project-specific key withgetStorageKey(projectId)prevents cross-project collisions.
132-144: LGTM! Proper lazy state initialization from storage.Using function initializers in
useStateensures localStorage is only read once on mount, avoiding unnecessary reads on re-renders.
149-176: LGTM! Proper state management with persistence.The handlers correctly reset the token selection when the chain changes (preventing invalid chain+token combinations) and persist both selections to localStorage.
204-209: LGTM! Token-aware balance fetching.The balance query now includes
tokenAddress: selectedTokenAddress, correctly leveraging the enhancedgetWalletBalancefunction to fetch either native or ERC20 token balances.
218-353: LGTM! Improved UX with inline token selection.The UI restructure provides better visibility of selected network and token, with proper responsive behavior and consistent use of design tokens.
576-592: LGTM! Schema extended for token-aware transfers.Adding
tokenAddressas an optional field correctly supports both native token and ERC20 token transfers.
761-763: LGTM! Proper token reset on chain change.Resetting the token to native when the chain changes prevents invalid chain+token combinations and maintains consistency with the main wallet details behavior.
773-805: LGTM! Proper TokenSelector integration in send form.The TokenSelector is correctly integrated with react-hook-form and maintains both the token address for the transaction and the symbol for display purposes.
| let decimals = 18; | ||
| if (values.tokenAddress) { | ||
| const decimalsRpc = await readContract({ | ||
| contract: getContract({ | ||
| address: values.tokenAddress, | ||
| chain: selectedChain, | ||
| client, | ||
| }), | ||
| method: "function decimals() view returns (uint8)", | ||
| params: [], | ||
| }); | ||
| decimals = Number(decimalsRpc); | ||
| } | ||
| const quantityWei = toUnits(values.amount, decimals).toString(); |
There was a problem hiding this comment.
Critical: Incorrect decimals for native tokens.
The code hardcodes decimals = 18 for native tokens, but not all chains use 18 decimals for their native currency. This could result in incorrect transfer amounts.
The getWalletBalance utility correctly uses getChainDecimals(chain) to get the proper decimals for each chain's native token. This send flow should do the same.
Apply this diff to fetch the correct decimals for native tokens:
+import { getChainDecimals } from "thirdweb/chains";Then update the mutation logic:
const sendMutation = useMutation({
mutationFn: async (values: SendFormValues) => {
- let decimals = 18;
- if (values.tokenAddress) {
+ let decimals: number;
+ if (values.tokenAddress) {
const decimalsRpc = await readContract({
contract: getContract({
address: values.tokenAddress,
chain: selectedChain,
client,
}),
method: "function decimals() view returns (uint8)",
params: [],
});
decimals = Number(decimalsRpc);
+ } else {
+ // Native token - use chain-specific decimals
+ decimals = await getChainDecimals(selectedChain);
}
const quantityWei = toUnits(values.amount, decimals).toString();📝 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.
| let decimals = 18; | |
| if (values.tokenAddress) { | |
| const decimalsRpc = await readContract({ | |
| contract: getContract({ | |
| address: values.tokenAddress, | |
| chain: selectedChain, | |
| client, | |
| }), | |
| method: "function decimals() view returns (uint8)", | |
| params: [], | |
| }); | |
| decimals = Number(decimalsRpc); | |
| } | |
| const quantityWei = toUnits(values.amount, decimals).toString(); | |
| let decimals: number; | |
| if (values.tokenAddress) { | |
| const decimalsRpc = await readContract({ | |
| contract: getContract({ | |
| address: values.tokenAddress, | |
| chain: selectedChain, | |
| client, | |
| }), | |
| method: "function decimals() view returns (uint8)", | |
| params: [], | |
| }); | |
| decimals = Number(decimalsRpc); | |
| } else { | |
| // Native token - use chain-specific decimals | |
| decimals = await getChainDecimals(selectedChain); | |
| } | |
| const quantityWei = toUnits(values.amount, decimals).toString(); |
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| mutationFn: async (values: SendFormValues) => { | ||
| const quantityWei = toWei(values.amount).toString(); | ||
| let decimals = 18; | ||
| if (values.tokenAddress) { |
There was a problem hiding this comment.
The send modal's decimal calculation has the same case-sensitivity issue, attempting to read the decimals() method from a checksummed native token address when the user selects native token.
View Details
📝 Patch Details
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
index 5f948a1c3..f56730064 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
@@ -15,6 +15,7 @@ import { useForm } from "react-hook-form";
import { toast } from "sonner";
import {
getContract,
+ isNativeTokenAddress,
readContract,
type ThirdwebClient,
toUnits,
@@ -674,7 +675,7 @@ function SendProjectWalletModalContent(props: SendProjectWalletModalProps) {
const sendMutation = useMutation({
mutationFn: async (values: SendFormValues) => {
let decimals = 18;
- if (values.tokenAddress) {
+ if (values.tokenAddress && !isNativeTokenAddress(values.tokenAddress)) {
const decimalsRpc = await readContract({
contract: getContract({
address: values.tokenAddress,
diff --git a/packages/thirdweb/src/exports/thirdweb.ts b/packages/thirdweb/src/exports/thirdweb.ts
index 047db1df1..e3f052d2f 100644
--- a/packages/thirdweb/src/exports/thirdweb.ts
+++ b/packages/thirdweb/src/exports/thirdweb.ts
@@ -29,6 +29,7 @@ export {
*/
export {
NATIVE_TOKEN_ADDRESS,
+ isNativeTokenAddress,
/**
* @deprecated Use {@link ZERO_ADDRESS}.
*/
diff --git a/packages/thirdweb/src/wallets/utils/getWalletBalance.ts b/packages/thirdweb/src/wallets/utils/getWalletBalance.ts
index 526c671d8..0e6ad5659 100644
--- a/packages/thirdweb/src/wallets/utils/getWalletBalance.ts
+++ b/packages/thirdweb/src/wallets/utils/getWalletBalance.ts
@@ -5,7 +5,10 @@ import {
getChainSymbol,
} from "../../chains/utils.js";
import type { ThirdwebClient } from "../../client/client.js";
-import { NATIVE_TOKEN_ADDRESS } from "../../constants/addresses.js";
+import {
+ NATIVE_TOKEN_ADDRESS,
+ isNativeTokenAddress,
+} from "../../constants/addresses.js";
import { getContract } from "../../contract/contract.js";
import type { GetBalanceResult } from "../../extensions/erc20/read/getBalance.js";
import { eth_getBalance } from "../../rpc/actions/eth_getBalance.js";
@@ -44,7 +47,7 @@ export async function getWalletBalance(
): Promise<GetBalanceResult> {
const { address, client, chain, tokenAddress } = options;
// erc20 case
- if (tokenAddress && tokenAddress !== NATIVE_TOKEN_ADDRESS) {
+ if (tokenAddress && !isNativeTokenAddress(tokenAddress)) {
// load balanceOf dynamically to avoid circular dependency
const { getBalance } = await import(
"../../extensions/erc20/read/getBalance.js"
Analysis
Native token decimal calculation fails with checksummed addresses
What fails: SendProjectWalletModal in project-wallet-details.tsx attempts to call decimals() method on native token pseudo-address when user selects "Native token" from TokenSelector, causing runtime failure. Additionally, getWalletBalance() in packages/thirdweb/src/wallets/utils/getWalletBalance.ts fails to properly identify checksummed native token addresses.
How to reproduce:
- Open the Send modal in the Project Wallet Details page
- Select "Native token" from the Token selector dropdown
- Fill in the required fields (recipient address, amount, secret key)
- Click "Submit transfer"
Result: The function throws an error attempting to call readContract with method: "function decimals() view returns (uint8)" on the native token pseudo-address 0xEeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee (checksummed), which has no contract implementation.
Expected behavior: Should recognize the checksummed native token address and skip the RPC call, using the default 18 decimals for native tokens.
Root cause:
- TokenSelector returns
checksummedNativeTokenAddress = getAddress(NATIVE_TOKEN_ADDRESS)which produces0xEeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee(mixed case) - Code in
SendProjectWalletModal.sendMutationchecksif (values.tokenAddress)without verifying if it's the native token - Code in
getWalletBalance()comparestokenAddress !== NATIVE_TOKEN_ADDRESS(exact case match), which fails for checksummed addresses - Native token pseudo-address has no
decimals()method, causing contract read to fail
Fix implemented:
- Exported
isNativeTokenAddressutility function from thirdweb package - Modified
SendProjectWalletModal.sendMutationto checkif (values.tokenAddress && !isNativeTokenAddress(values.tokenAddress))before attempting RPC call - Modified
getWalletBalance()to use!isNativeTokenAddress(tokenAddress)instead of case-sensitive comparison for proper native token detection
| const { address, client, chain, tokenAddress } = options; | ||
| // erc20 case | ||
| if (tokenAddress) { | ||
| if (tokenAddress && tokenAddress !== NATIVE_TOKEN_ADDRESS) { |
There was a problem hiding this comment.
| if (tokenAddress && tokenAddress !== NATIVE_TOKEN_ADDRESS) { | |
| if (tokenAddress && tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS) { |
The native token address comparison uses a case-sensitive string equality check that will fail when a checksummed NATIVE_TOKEN_ADDRESS is passed, causing the function to attempt reading ERC20 balance data from the native token pseudo-address.
View Details
Analysis
Case-sensitive address comparison fails with checksummed NATIVE_TOKEN_ADDRESS
What fails: getWalletBalance() in packages/thirdweb/src/wallets/utils/getWalletBalance.ts line 47 uses a case-sensitive comparison that fails when a checksummed version of NATIVE_TOKEN_ADDRESS is passed, incorrectly routing native token balance requests through the ERC20 contract path.
How to reproduce:
// When TokenSelector returns the checksummed NATIVE_TOKEN_ADDRESS:
const result = await getWalletBalance({
address: "0x1234...",
chain: ANVIL_CHAIN,
client: TEST_CLIENT,
tokenAddress: "0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE" // checksummed
});
// This incorrectly attempts: getBalance(contract at 0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE)
// Instead of: eth_getBalance()Result vs Expected:
- Result: The function passes a checksummed address (
0xEeeeeEeeeEeEeeEeEeEeeEEUeeeeEeeeeeeeEEeE) to the ERC20getBalance()call, which fails because the pseudo-address is not a valid ERC20 contract - Expected: Should recognize checksummed NATIVE_TOKEN_ADDRESS as equivalent to the lowercase constant (
0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee) and calleth_getBalance()for the native token balance
Fix: Changed line 47 from case-sensitive string comparison (tokenAddress !== NATIVE_TOKEN_ADDRESS) to case-insensitive comparison (tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS), matching the pattern used elsewhere in the codebase (see TransactionPayment.tsx, nativeToken.ts, useTransactionDetails.ts)
Context: Ethereum addresses are case-insensitive per EIP-55 (Mixed-case checksum address encoding). The codebase stores tokens with checksummed addresses in defaultTokens, but the comparison was case-sensitive, causing a logic error when checksummed addresses were compared against the lowercase NATIVE_TOKEN_ADDRESS constant.
joaquim-verges
deleted the
_SDK_Allow_passing_NATIVE_TOKEN_ADDRESS_to_getWalletBalance_
branch
Fixes AI-65
PR-Codex overview
This PR focuses on enhancing the
getWalletBalancefunctionality by allowing the passing ofNATIVE_TOKEN_ADDRESS, improving wallet management in the UI, and refining the handling of token selections in project wallet interactions.Detailed summary
getWalletBalanceto allowNATIVE_TOKEN_ADDRESS.typescripttoreact.getProjectWalletto the dashboard.TokenSelectorfor better token management.Summary by CodeRabbit
New Features
Bug Fixes
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.