[Playground] Improve token selection and UI for x402 playground #8471
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughAdds SingleNetworkSelector and useAllChainsData, extends TokenSelector with includeNativeToken, updates token fetching to prefer a bridge endpoint with a payments API fallback, and updates X402 UI to prompt when no payment token is selected. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–25 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ 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
the
Playground
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 #8471 +/- ##
=======================================
Coverage 54.83% 54.83%
=======================================
Files 920 920
Lines 60891 60891
Branches 4141 4141
=======================================
Hits 33390 33390
Misses 27399 27399
Partials 102 102
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (4)
apps/playground-web/src/hooks/allChains.ts (1)
19-28: Consider addingstaleTimefor chain data.Chain metadata changes infrequently. Without
staleTime, React Query refetches on every mount. Adding a reasonable stale time (e.g., 5 minutes) would reduce unnecessary API calls. Based on learnings, configure staleTime based on freshness requirements.export function useAllChainsData() { const allChainsQuery = useQuery({ queryFn: () => fetchChainsFromApi(), queryKey: ["all-chains"], + staleTime: 1000 * 60 * 5, // 5 minutes }); return allChainsQuery.data; }apps/playground-web/src/app/x402/components/X402LeftSection.tsx (1)
44-44: UnusedchainIdfromuseId()– Label association is broken.The
chainIdvariable fromuseId()is assigned to theLabel'shtmlFor, butSingleNetworkSelectordoesn't expose anidprop, so the label isn't actually associated with the input. Either remove the unusedchainIdor add anidprop toSingleNetworkSelectorif accessibility association is needed.- const chainId = useId(); const tokenId = useId(); ... <div className="flex flex-col gap-2"> - <Label htmlFor={chainId}>Chain</Label> + <Label>Chain</Label> <SingleNetworkSelectorAlso applies to: 107-116
apps/playground-web/src/app/x402/components/X402RightSection.tsx (1)
31-34: Consider using a constant for zero address check.The hardcoded zero address string is duplicated (also used in
X402LeftSection.tsxline 58). Consider extracting to a shared constant for consistency and to avoid typos.+import { ZERO_ADDRESS } from "thirdweb"; // or define locally + const isTokenSelected = - props.options.tokenAddress !== - "0x0000000000000000000000000000000000000000" && + props.options.tokenAddress !== ZERO_ADDRESS && props.options.tokenSymbol !== "";apps/playground-web/src/components/blocks/NetworkSelectors.tsx (1)
70-85: Consider using a Map for O(1) chain lookups in search/render.Both
searchFnandrenderOptionuse.find()to look up chains by ID, resulting in O(n) lookup per call. For large chain lists, consider building aMap<number, Chain>in theuseMemoalongsidechainsToShow.const chainMap = useMemo(() => { return new Map(chainsToShow.map((chain) => [chain.chainId, chain])); }, [chainsToShow]); // Then in searchFn/renderOption: const chain = chainMap.get(Number(option.value));
📜 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)
apps/playground-web/src/app/x402/components/X402LeftSection.tsx(3 hunks)apps/playground-web/src/app/x402/components/X402RightSection.tsx(4 hunks)apps/playground-web/src/components/blocks/NetworkSelectors.tsx(1 hunks)apps/playground-web/src/components/ui/TokenSelector.tsx(2 hunks)apps/playground-web/src/hooks/allChains.ts(1 hunks)apps/playground-web/src/hooks/useTokensData.ts(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/app/x402/components/X402LeftSection.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/components/blocks/NetworkSelectors.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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/app/x402/components/X402LeftSection.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/components/blocks/NetworkSelectors.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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/app/x402/components/X402LeftSection.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/components/blocks/NetworkSelectors.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/app/x402/components/X402LeftSection.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/components/blocks/NetworkSelectors.tsx
🧠 Learnings (27)
📚 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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/app/x402/components/X402LeftSection.tsxapps/playground-web/src/app/x402/components/X402RightSection.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} : Use React Query (`tanstack/react-query`) for all client-side data fetching with typed hooks
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/app/x402/components/X402LeftSection.tsxapps/playground-web/src/app/x402/components/X402RightSection.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} : 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
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/app/x402/components/X402RightSection.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} : Wrap client-side API calls in React Query (`tanstack/react-query`)
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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/**/*use*.{ts,tsx} : Keep `queryKey` stable and descriptive in React Query hooks for reliable cache hits
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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 descriptive, stable `queryKeys` in React Query for cache hits
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/app/x402/components/X402LeftSection.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/components/blocks/NetworkSelectors.tsx
📚 Learning: 2025-09-17T11:02:13.528Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8044
File: packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts:15-17
Timestamp: 2025-09-17T11:02:13.528Z
Learning: The thirdweb `client` object is serializable and can safely be used in React Query keys, similar to the `contract` object.
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 Learning: 2025-05-27T19:54:55.885Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/app/x402/components/X402RightSection.tsx
📚 Learning: 2025-09-18T20:09:57.064Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8069
File: apps/playground-web/src/app/bridge/swap-widget/components/types.ts:3-12
Timestamp: 2025-09-18T20:09:57.064Z
Learning: The SwapWidgetPlaygroundOptions type should not include persistTokenSelections - the playground intentionally hardcodes persistTokenSelections={false} and doesn't expose it as a configurable option to users.
Applied to files:
apps/playground-web/src/components/ui/TokenSelector.tsx
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
apps/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/app/x402/components/X402LeftSection.tsxapps/playground-web/src/components/blocks/NetworkSelectors.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/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsx
📚 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/playground-web/src/components/ui/TokenSelector.tsxapps/playground-web/src/app/x402/components/X402LeftSection.tsx
📚 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:
apps/playground-web/src/components/ui/TokenSelector.tsx
📚 Learning: 2025-05-27T19:55:25.056Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts:49-49
Timestamp: 2025-05-27T19:55:25.056Z
Learning: In the ERC20 public pages token price data hook (`useTokenPriceData.ts`), direct array access on `json.data[0]` without optional chaining is intentionally correct and should not be changed to use safety checks.
Applied to files:
apps/playground-web/src/hooks/useTokensData.ts
📚 Learning: 2025-08-27T22:11:41.748Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7933
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/create-token-page-impl.tsx:465-473
Timestamp: 2025-08-27T22:11:41.748Z
Learning: In the token creation flow (create-token-page-impl.tsx), the createTokenOnUniversalBridge() call is intentionally not awaited (fire-and-forget pattern) to allow the token creation process to complete immediately without waiting for the bridge operation. This is a deliberate design choice to prioritize user experience by not blocking the main flow with supplementary bridge operations.
Applied to files:
apps/playground-web/src/hooks/useTokensData.ts
📚 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/playground-web/src/hooks/useTokensData.ts
📚 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/playground-web/src/app/x402/components/X402LeftSection.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/playground-web/src/app/x402/components/X402LeftSection.tsxapps/playground-web/src/app/x402/components/X402RightSection.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} : Import UI component primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Applied to files:
apps/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.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} : Always import from the central UI library under `@/components/ui/*` for reusable core UI components like `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`
Applied to files:
apps/playground-web/src/app/x402/components/X402RightSection.tsx
🧬 Code graph analysis (3)
apps/playground-web/src/components/ui/TokenSelector.tsx (3)
apps/playground-web/src/hooks/useTokensData.ts (1)
useTokensData(106-119)apps/playground-web/src/app/x402/components/constants.ts (1)
token(4-9)packages/thirdweb/src/exports/thirdweb.ts (1)
NATIVE_TOKEN_ADDRESS(31-31)
apps/playground-web/src/hooks/useTokensData.ts (2)
apps/playground-web/src/lib/types.ts (1)
TokenMetadata(1-8)apps/playground-web/src/app/x402/components/constants.ts (1)
token(4-9)
apps/playground-web/src/app/x402/components/X402LeftSection.tsx (1)
apps/playground-web/src/components/blocks/NetworkSelectors.tsx (1)
SingleNetworkSelector(17-145)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Vercel Agent Review
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (8)
apps/playground-web/src/app/x402/components/X402LeftSection.tsx (2)
109-115: LGTM!The
SingleNetworkSelectorintegration is correct, passing the requiredclientprop and maintaining proper chain selection flow.
122-131: LGTM!The
includeNativeToken={false}prop correctly excludes native tokens from the x402 payment token selection, which aligns with the PR objectives for improved token selection.apps/playground-web/src/components/ui/TokenSelector.tsx (2)
31-41: LGTM!The native token filtering logic is well-implemented:
- Case-insensitive address comparison is defensive
includeNativeToken === falseexplicit check ensures native tokens are included by default when prop is undefined- Proper memoization with correct dependencies
5-5: LGTM!Import of
NATIVE_TOKEN_ADDRESSfrom thirdweb is correct for the filtering logic.apps/playground-web/src/app/x402/components/X402RightSection.tsx (2)
148-157: LGTM!The empty state card provides clear guidance to users when no token is selected. The UI follows design system tokens with
text-muted-foregroundandCardcomponent.
165-177:supportedTokens.namecannot usetokenNameas it is not available inX402PlaygroundOptions.The
X402PlaygroundOptionstype only providestokenSymbol, nottokenName. UsingtokenSymbolfor bothsymbolandnameis the correct approach given the available data. If a full token name is needed, it would require extending the type definition and providing it from the caller.Likely an incorrect or invalid review comment.
apps/playground-web/src/hooks/useTokensData.ts (2)
7-15: LGTM!The URL construction correctly handles both localhost (dev) and production environments with appropriate protocol selection.
42-56: LGTM!The fallback logic for fetching x402-supported tokens when the bridge returns empty results is well-structured with proper error handling, enabling testnet support as noted in the comment.
size-limit report 📦
|
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
joaquim-verges
force-pushed
the
_X402_Improve_token_selection_and_UI_for_payment_playground
branch
from
21f81a3 to
849eeba
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
apps/playground-web/src/app/x402/components/X402RightSection.tsx (1)
31-34: Token selection guard is correct; consider extracting zero addressUsing both a non-zero token address and non-empty symbol to derive
isTokenSelectedis a solid gate for the payment UI. If this zero-address sentinel is used in multiple places, consider extracting it into a shared constant instead of an inline string.apps/playground-web/src/app/x402/components/X402LeftSection.tsx (2)
55-61: RevisittokenAddressreset semantics now that native tokens are excludedOn chain change,
handleChainChangeresets:tokenAddress: "0x0000000000000000000000000000000000000000" as const, tokenSymbol: "", tokenDecimals: 18,while the
TokenSelectoris rendered withincludeNativeToken={false}andselectedTokenis set back toundefined.If downstream logic treats the zero address as “native token selected” or simply as “some token is present” (e.g.,
if (options.tokenAddress) { ... }), this combination could bypass “no token selected” checks even though the UI requires the user to pick a non‑native token. It may be safer to cleartokenAddress(e.g., toundefined/null) on chain changes and only set it whenhandleTokenChangefires, so state and UI stay aligned withincludeNativeToken={false}.Additionally, the
<Label htmlFor={tokenId}>is not currently associated with anyidonTokenSelector; consider either plumbing anidprop throughTokenSelectorto the underlying focusable element or droppinghtmlForto avoid a broken association.Also applies to: 119-133
21-24: Add an explicit return type toX402LeftSection
X402LeftSectioncurrently relies on inference for its return type. For exported TSX components, adding an explicit return type (e.g.,: React.JSX.Element) improves readability and aligns with the project’s TypeScript guidelines.Example:
export function X402LeftSection( props: { options: X402PlaygroundOptions; setOptions: React.Dispatch<React.SetStateAction<X402PlaygroundOptions>>; }, ): React.JSX.Element { // ... }As per coding guidelines, using explicit return types on exported functions is preferred.
Also applies to: 101-193
📜 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)
apps/playground-web/src/app/x402/components/X402LeftSection.tsx(3 hunks)apps/playground-web/src/app/x402/components/X402RightSection.tsx(4 hunks)apps/playground-web/src/components/blocks/NetworkSelectors.tsx(1 hunks)apps/playground-web/src/components/ui/TokenSelector.tsx(2 hunks)apps/playground-web/src/hooks/allChains.ts(1 hunks)apps/playground-web/src/hooks/useTokensData.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/playground-web/src/hooks/allChains.ts
- apps/playground-web/src/hooks/useTokensData.ts
- apps/playground-web/src/components/blocks/NetworkSelectors.tsx
- apps/playground-web/src/components/ui/TokenSelector.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/app/x402/components/X402LeftSection.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/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/app/x402/components/X402LeftSection.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/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/app/x402/components/X402LeftSection.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/app/x402/components/X402LeftSection.tsx
🧠 Learnings (14)
📚 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/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/app/x402/components/X402LeftSection.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} : Import UI component primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Applied to files:
apps/playground-web/src/app/x402/components/X402RightSection.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} : Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks) in client components
Applied to files:
apps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/app/x402/components/X402LeftSection.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/playground-web/src/app/x402/components/X402RightSection.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} : 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/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/app/x402/components/X402LeftSection.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/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/app/x402/components/X402LeftSection.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} : Always import from the central UI library under `@/components/ui/*` for reusable core UI components like `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`
Applied to files:
apps/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/app/x402/components/X402LeftSection.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/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.tsx
📚 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/playground-web/src/app/x402/components/X402LeftSection.tsx
🧬 Code graph analysis (1)
apps/playground-web/src/app/x402/components/X402LeftSection.tsx (1)
apps/playground-web/src/components/blocks/NetworkSelectors.tsx (1)
SingleNetworkSelector(17-145)
⏰ 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: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Vercel Agent Review
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/playground-web/src/app/x402/components/X402RightSection.tsx (4)
5-5: Icon import LGTMCircleDollarSignIcon import fits the existing icon pattern in this file; no issues.
148-157: Empty-state card for missing token improves UXThe “Select Payment Token” card is a nice empty state and uses design tokens like
text-muted-foregroundconsistently with playground styling. Based on learnings, this aligns with the dashboard/playground design system.
159-177: Gating payment UI onisTokenSelectedis a good safety netRendering the entire Connect/payment block only when
isTokenSelectedis true prevents confusing states and ensuresdisplayBalanceTokenandsupportedTokensare only set when there’s a valid token configuration.
185-199: Pricing copy now correctly reflects the selected tokenShowing
{amount} {tokenSymbol}in the badge and referencingtokenSymbolin the helper text makes the UI copy clearer, especially now that it’s gated onisTokenSelectedso the symbol is always defined.apps/playground-web/src/app/x402/components/X402LeftSection.tsx (1)
6-6: SingleNetworkSelector integration withTHIRDWEB_CLIENTlooks soundImporting
SingleNetworkSelectorfrom the blocks layer and wiring it withchainId={selectedChain},client={THIRDWEB_CLIENT}, andonChange={handleChainChange}matches the described API and keeps concerns well separated. Placeholder andbg-cardstyling also align with the playground design system. I don’t see any functional issues here.Also applies to: 107-116
joaquim-verges
force-pushed
the
_X402_Improve_token_selection_and_UI_for_payment_playground
branch
from
849eeba to
df731a3
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/playground-web/src/hooks/useTokensData.ts (1)
84-98: Remove redundant.flat()call after.flatMap().The
.flatMap()method already flattens one level, making the subsequent.flat()call on line 98 redundant. Additionally, the.filter()on line 97 is unnecessary since the mapping always produces validTokenMetadataobjects (thechainIdguard on line 42 ensureschainIdis defined).Apply this diff to simplify the mapping:
const result = apiTokens.kinds .flatMap((token) => { const assets = token.extra?.defaultAsset ? [token.extra?.defaultAsset] : (token.extra?.supportedAssets ?? []); return assets.map((asset) => ({ chainId: chainId, address: asset.address, decimals: asset.decimals, symbol: asset.eip712.name, name: asset.eip712.name, - })) as TokenMetadata[]; + })); - }) - .filter((token) => token !== undefined) - .flat(); + }) as TokenMetadata[]; return result;
📜 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)
apps/playground-web/src/app/x402/components/X402LeftSection.tsx(3 hunks)apps/playground-web/src/app/x402/components/X402RightSection.tsx(4 hunks)apps/playground-web/src/components/blocks/NetworkSelectors.tsx(1 hunks)apps/playground-web/src/components/ui/TokenSelector.tsx(2 hunks)apps/playground-web/src/hooks/allChains.ts(1 hunks)apps/playground-web/src/hooks/useTokensData.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/playground-web/src/hooks/allChains.ts
- apps/playground-web/src/app/x402/components/X402LeftSection.tsx
- apps/playground-web/src/components/ui/TokenSelector.tsx
- apps/playground-web/src/app/x402/components/X402RightSection.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/components/blocks/NetworkSelectors.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/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/components/blocks/NetworkSelectors.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/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsx
🧠 Learnings (22)
📚 Learning: 2025-08-27T22:11:41.748Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7933
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/create-token-page-impl.tsx:465-473
Timestamp: 2025-08-27T22:11:41.748Z
Learning: In the token creation flow (create-token-page-impl.tsx), the createTokenOnUniversalBridge() call is intentionally not awaited (fire-and-forget pattern) to allow the token creation process to complete immediately without waiting for the bridge operation. This is a deliberate design choice to prioritize user experience by not blocking the main flow with supplementary bridge operations.
Applied to files:
apps/playground-web/src/hooks/useTokensData.ts
📚 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/playground-web/src/hooks/useTokensData.ts
📚 Learning: 2025-05-27T19:55:25.056Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts:49-49
Timestamp: 2025-05-27T19:55:25.056Z
Learning: In the ERC20 public pages token price data hook (`useTokenPriceData.ts`), direct array access on `json.data[0]` without optional chaining is intentionally correct and should not be changed to use safety checks.
Applied to files:
apps/playground-web/src/hooks/useTokensData.ts
📚 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/playground-web/src/hooks/useTokensData.ts
📚 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 `Authorization: Bearer` header for API calls – never embed tokens in URLs
Applied to files:
apps/playground-web/src/hooks/useTokensData.ts
📚 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/playground-web/src/hooks/useTokensData.ts
📚 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} : 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
Applied to files:
apps/playground-web/src/hooks/useTokensData.ts
📚 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 packages/thirdweb/src/**/*.{ts,tsx} : Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Applied to files:
apps/playground-web/src/hooks/useTokensData.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:
apps/playground-web/src/hooks/useTokensData.ts
📚 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:
apps/playground-web/src/hooks/useTokensData.ts
📚 Learning: 2025-05-26T16:27:26.443Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx:304-313
Timestamp: 2025-05-26T16:27:26.443Z
Learning: The `useChainSlug` hook returns a `string`, not `string | undefined`. When the input chainId is undefined or falsy, the hook returns an empty string "", but never returns undefined itself.
Applied to files:
apps/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsx
📚 Learning: 2025-05-26T16:27:26.443Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx:304-313
Timestamp: 2025-05-26T16:27:26.443Z
Learning: The `useChainSlug` hook returns `string | number`, not `string | undefined` as previously assumed. It does not return undefined values.
Applied to files:
apps/playground-web/src/hooks/useTokensData.tsapps/playground-web/src/components/blocks/NetworkSelectors.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} : Import UI component primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
Learnt from: arcoraven
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsx
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.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} : 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/playground-web/src/components/blocks/NetworkSelectors.tsx
📚 Learning: 2025-06-06T23:46:08.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7298
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:424-424
Timestamp: 2025-06-06T23:46:08.795Z
Learning: The thirdweb project has an ESLint rule that restricts direct usage of `defineChain`. When it's necessary to use `defineChain` directly, it's acceptable to disable the rule with `// eslint-disable-next-line no-restricted-syntax`.
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.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/playground-web/src/components/blocks/NetworkSelectors.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/playground-web/src/components/blocks/NetworkSelectors.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} : Handle interactive UI with React hooks (`useState`, `useEffect`, React Query, wallet hooks) in client components
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.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 `FORKED_ETHEREUM_CHAIN` for mainnet interactions and `ANVIL_CHAIN` for isolated tests
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsx
📚 Learning: 2025-08-09T15:37:30.990Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7822
File: apps/dashboard/src/@/components/contracts/contract-card/contract-publisher.tsx:22-31
Timestamp: 2025-08-09T15:37:30.990Z
Learning: The Img component at apps/dashboard/src/@/components/blocks/Img.tsx properly handles empty string src values by immediately setting status to "fallback" and converting empty strings to undefined in the img element's src attribute, preventing unnecessary network requests.
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsx
🧬 Code graph analysis (2)
apps/playground-web/src/hooks/useTokensData.ts (2)
apps/playground-web/src/lib/types.ts (1)
TokenMetadata(1-8)apps/playground-web/src/app/x402/components/constants.ts (1)
token(4-9)
apps/playground-web/src/components/blocks/NetworkSelectors.tsx (2)
apps/playground-web/src/hooks/allChains.ts (1)
useAllChainsData(21-30)apps/playground-web/src/components/ui/select-with-search.tsx (1)
SelectWithSearch(38-198)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Vercel Agent Review
- GitHub Check: Analyze (javascript)
🔇 Additional comments (10)
apps/playground-web/src/hooks/useTokensData.ts (4)
7-22: LGTM! Clean URL construction with proper environment handling.The dual-URL setup correctly handles both bridge and API endpoints with appropriate protocol detection and query parameter configuration.
24-40: LGTM! Proper error handling and type assertion.The initial bridge fetch follows best practices with appropriate error handling and clear error messages.
42-101: Well-structured fallback logic with proper type safety.The conditional fallback to the x402 API when bridge returns empty results is well-implemented. The
chainIdguard on line 42 ensures type safety throughout the fallback branch, and the API response mapping correctly extracts token metadata.
104-117: LGTM! Proper React Query implementation.The hook follows best practices with a stable query key, appropriate stale time for token data, and conditional fetching support.
apps/playground-web/src/components/blocks/NetworkSelectors.tsx (6)
1-12: LGTM! Clean imports and helper function.The imports follow the coding guidelines, and the
cleanChainNamehelper provides a clear, single-responsibility utility for display formatting.
16-29: LGTM! Well-structured props interface.The props interface provides appropriate filtering, customization, and configuration options with clear TypeScript types.
30-54: LGTM! Clean and conditional filtering logic.The chain filtering logic properly applies each filter conditionally based on props, with correct memoization dependencies.
56-80: LGTM! Flexible search implementation.The search function intelligently handles both numeric chain ID searches and text-based name searches with appropriate case insensitivity.
82-112: LGTM! Comprehensive option rendering with responsive design.The render function provides rich chain display with icon, cleaned name, and optional chain ID badge, using proper design tokens and responsive classes.
114-139: LGTM! Properly integrated SelectWithSearch with excellent UX.The component correctly handles loading states, type conversions, and prop forwarding. The
undefinedhandling on line 137 is type-safe, avoiding the string"undefined"issue.
joaquim-verges
force-pushed
the
_X402_Improve_token_selection_and_UI_for_payment_playground
branch
from
df731a3 to
bfaf06b
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/playground-web/src/hooks/allChains.ts (1)
6-19: Check HTTP status before parsing response.The function parses
res.json()on line 10 before validatingres.okon line 12. Non-2xx responses may have unexpected body shapes, causingjson.errorchecks to silently fail.Apply this diff to check status first:
async function fetchChainsFromApi() { // always fetch from prod for chains for now // TODO: re-visit this const res = await fetch("https://api.thirdweb.com/v1/chains"); + + if (!res.ok) { + throw new Error(`Failed to fetch chains: ${res.status}`); + } + const json = await res.json(); - if (json.error || !res.ok) { + if (json.error) { throw new Error( - json.error?.message || `Failed to fetch chains: ${res.status}`, + json.error.message, ); } return json.data as ChainMetadata[]; }
🧹 Nitpick comments (2)
apps/playground-web/src/hooks/allChains.ts (1)
21-30: Consider adding staleTime for rarely-changing chain data.Chain metadata changes infrequently. Adding a
staleTime(e.g., 5–10 minutes) reduces redundant fetches and improves performance.Apply this diff:
const allChainsQuery = useQuery({ queryFn: () => fetchChainsFromApi(), queryKey: ["all-chains"], + staleTime: 1000 * 60 * 5, // 5 minutes });apps/playground-web/src/hooks/useTokensData.ts (1)
84-98: Remove redundant.flat()call.Line 98's
.flat()is unnecessary because.flatMap()already flattens one level.Apply this diff:
const result = apiTokens.kinds .flatMap((token) => { const assets = token.extra?.defaultAsset ? [token.extra?.defaultAsset] : (token.extra?.supportedAssets ?? []); return assets.map((asset) => ({ chainId: chainId, address: asset.address, decimals: asset.decimals, symbol: asset.eip712.name, name: asset.eip712.name, })) as TokenMetadata[]; }) - .filter((token) => token !== undefined) - .flat(); + .filter((token) => token !== undefined);
📜 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)
apps/playground-web/src/app/x402/components/X402LeftSection.tsx(3 hunks)apps/playground-web/src/app/x402/components/X402RightSection.tsx(4 hunks)apps/playground-web/src/components/blocks/NetworkSelectors.tsx(1 hunks)apps/playground-web/src/components/ui/TokenSelector.tsx(2 hunks)apps/playground-web/src/hooks/allChains.ts(1 hunks)apps/playground-web/src/hooks/useTokensData.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/playground-web/src/components/ui/TokenSelector.tsx
- apps/playground-web/src/app/x402/components/X402LeftSection.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/hooks/useTokensData.ts
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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/hooks/useTokensData.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:
apps/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/hooks/useTokensData.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/hooks/useTokensData.ts
🧠 Learnings (36)
📚 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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/app/x402/components/X402RightSection.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} : Use React Query (`tanstack/react-query`) for all client-side data fetching with typed hooks
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/app/x402/components/X402RightSection.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} : 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
Applied to files:
apps/playground-web/src/hooks/allChains.tsapps/playground-web/src/hooks/useTokensData.ts
📚 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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/app/x402/components/X402RightSection.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} : Wrap client-side API calls in React Query (`tanstack/react-query`)
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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/playground-web/src/hooks/allChains.tsapps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/app/x402/components/X402RightSection.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/**/*use*.{ts,tsx} : Keep `queryKey` stable and descriptive in React Query hooks for reliable cache hits
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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 descriptive, stable `queryKeys` in React Query for cache hits
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 Learning: 2025-05-27T19:54:55.885Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx:15-17
Timestamp: 2025-05-27T19:54:55.885Z
Learning: The `fetchDashboardContractMetadata` function from "3rdweb-sdk/react/hooks/useDashboardContractMetadata" has internal error handlers for all promises and cannot throw errors, so external error handling is not needed when calling this function.
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 Learning: 2025-05-27T19:55:25.056Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts:49-49
Timestamp: 2025-05-27T19:55:25.056Z
Learning: In the ERC20 public pages token price data hook (`useTokenPriceData.ts`), direct array access on `json.data[0]` without optional chaining is intentionally correct and should not be changed to use safety checks.
Applied to files:
apps/playground-web/src/hooks/allChains.tsapps/playground-web/src/hooks/useTokensData.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:
apps/playground-web/src/hooks/allChains.tsapps/playground-web/src/hooks/useTokensData.ts
📚 Learning: 2025-09-17T11:02:13.528Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 8044
File: packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts:15-17
Timestamp: 2025-09-17T11:02:13.528Z
Learning: The thirdweb `client` object is serializable and can safely be used in React Query keys, similar to the `contract` object.
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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: Local state or effects live inside components; data fetching happens in hooks
Applied to files:
apps/playground-web/src/hooks/allChains.ts
📚 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} : Import UI component primitives from `@/components/ui/*` (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/app/x402/components/X402RightSection.tsx
📚 Learning: 2025-07-10T10:18:33.238Z
Learnt from: arcoraven
Repo: thirdweb-dev/js PR: 7505
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx:186-204
Timestamp: 2025-07-10T10:18:33.238Z
Learning: The ThirdwebBarChart component in apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/webhooks/analytics/components/WebhookAnalyticsCharts.tsx does not accept standard accessibility props like `aria-label` and `role` in its TypeScript interface, causing compilation errors when added.
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsx
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsx
📚 Learning: 2025-06-06T23:46:08.795Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7298
File: apps/dashboard/src/app/nebula-app/move-funds/move-funds.tsx:424-424
Timestamp: 2025-06-06T23:46:08.795Z
Learning: The thirdweb project has an ESLint rule that restricts direct usage of `defineChain`. When it's necessary to use `defineChain` directly, it's acceptable to disable the rule with `// eslint-disable-next-line no-restricted-syntax`.
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.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 `FORKED_ETHEREUM_CHAIN` for mainnet interactions and `ANVIL_CHAIN` for isolated tests
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsx
📚 Learning: 2025-05-26T16:27:26.443Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx:304-313
Timestamp: 2025-05-26T16:27:26.443Z
Learning: The `useChainSlug` hook returns a `string`, not `string | undefined`. When the input chainId is undefined or falsy, the hook returns an empty string "", but never returns undefined itself.
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/hooks/useTokensData.ts
📚 Learning: 2025-08-09T15:37:30.990Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7822
File: apps/dashboard/src/@/components/contracts/contract-card/contract-publisher.tsx:22-31
Timestamp: 2025-08-09T15:37:30.990Z
Learning: The Img component at apps/dashboard/src/@/components/blocks/Img.tsx properly handles empty string src values by immediately setting status to "fallback" and converting empty strings to undefined in the img element's src attribute, preventing unnecessary network requests.
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsx
📚 Learning: 2025-05-26T16:27:26.443Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7152
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/table.tsx:304-313
Timestamp: 2025-05-26T16:27:26.443Z
Learning: The `useChainSlug` hook returns `string | number`, not `string | undefined` as previously assumed. It does not return undefined values.
Applied to files:
apps/playground-web/src/components/blocks/NetworkSelectors.tsxapps/playground-web/src/hooks/useTokensData.ts
📚 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/playground-web/src/app/x402/components/X402RightSection.tsxapps/playground-web/src/hooks/useTokensData.ts
📚 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/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.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/playground-web/src/app/x402/components/X402RightSection.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} : Always import from the central UI library under `@/components/ui/*` for reusable core UI components like `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`
Applied to files:
apps/playground-web/src/app/x402/components/X402RightSection.tsx
📚 Learning: 2025-08-27T22:11:41.748Z
Learnt from: MananTank
Repo: thirdweb-dev/js PR: 7933
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/create-token-page-impl.tsx:465-473
Timestamp: 2025-08-27T22:11:41.748Z
Learning: In the token creation flow (create-token-page-impl.tsx), the createTokenOnUniversalBridge() call is intentionally not awaited (fire-and-forget pattern) to allow the token creation process to complete immediately without waiting for the bridge operation. This is a deliberate design choice to prioritize user experience by not blocking the main flow with supplementary bridge operations.
Applied to files:
apps/playground-web/src/hooks/useTokensData.ts
📚 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/playground-web/src/hooks/useTokensData.ts
📚 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 `Authorization: Bearer` header for API calls – never embed tokens in URLs
Applied to files:
apps/playground-web/src/hooks/useTokensData.ts
📚 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/playground-web/src/hooks/useTokensData.ts
📚 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 packages/thirdweb/src/**/*.{ts,tsx} : Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Applied to files:
apps/playground-web/src/hooks/useTokensData.ts
📚 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:
apps/playground-web/src/hooks/useTokensData.ts
🧬 Code graph analysis (2)
apps/playground-web/src/components/blocks/NetworkSelectors.tsx (2)
apps/playground-web/src/hooks/allChains.ts (1)
useAllChainsData(21-30)apps/playground-web/src/components/ui/select-with-search.tsx (1)
SelectWithSearch(38-198)
apps/playground-web/src/hooks/useTokensData.ts (2)
apps/playground-web/src/lib/types.ts (1)
TokenMetadata(1-8)apps/playground-web/src/app/x402/components/constants.ts (1)
token(4-9)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Vercel Agent Review
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/playground-web/src/components/blocks/NetworkSelectors.tsx (1)
16-140: Well-structured component with proper filtering and rendering.The
SingleNetworkSelectorimplementation correctly addresses all previous review concerns:
- No unused props
- Single deprecated filter controlled by prop
- Proper handling of undefined chainId in value prop
- Clean memoization with correct dependencies
- Appropriate use of design tokens
apps/playground-web/src/app/x402/components/X402RightSection.tsx (3)
31-34: Correct token selection validation.The
isTokenSelectedlogic properly validates both the token address (against zero address) and ensures the symbol is present. This defensive check prevents rendering the UI with incomplete token data.
148-157: Well-designed empty state prompt.The prompt card uses appropriate design tokens, provides clear guidance, and follows the established UI patterns.
159-177: Simplified ConnectButton configuration.Removing conditional logic and always providing token configuration is correct since the parent condition on line 159 guarantees
isTokenSelectedis true.
joaquim-verges
deleted the
_X402_Improve_token_selection_and_UI_for_payment_playground
branch
PR-Codex overview
This PR introduces a new hook
useAllChainsDatato fetch and manage chain data, replaces theBridgeNetworkSelectorwithSingleNetworkSelector, and enhances theTokenSelectorto conditionally include native tokens. It also updates API calls for fetching tokens.Detailed summary
useAllChainsDatahook for fetching chain data.BridgeNetworkSelectorwithSingleNetworkSelectorinX402LeftSection.TokenSelectorto optionally exclude native tokens.SingleNetworkSelector.Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.