[MNY-193] Dashboard: Update Client Ids for Buy and Swap widgets in chain, bridge and asset pages #8101
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughRefactors BuyAndSwapEmbed to derive an internal Thirdweb client from pageType using new per-page clientId env vars and getConfiguredThirdwebClient(clientId). Removes the external client prop and updates call sites across chain, asset (ERC20), and bridge pages accordingly. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Page as Page Component
participant Embed as BuyAndSwapEmbed
participant Cfg as getConfiguredThirdwebClient
participant Widget as Buy/Swap Widget
participant Analytics as Analytics
User->>Page: Navigate / render
Page->>Embed: Render with props (pageType, ...)
Embed->>Embed: choose clientId by pageType (asset / bridge / chain)
Embed->>Cfg: getConfiguredThirdwebClient({ clientId, ... })
Cfg-->>Embed: ThirdwebClient
Embed->>Widget: Render Buy/Swap widget with internal client
Widget-->>Embed: events (shown / success / error)
Embed->>Analytics: report events
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8101 +/- ##
=======================================
Coverage 56.32% 56.32%
=======================================
Files 906 906
Lines 59197 59197
Branches 4176 4176
=======================================
Hits 33345 33345
Misses 25746 25746
Partials 106 106
🚀 New features to boost your workflow:
|
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx (1)
7-7: Add explicit return type for the component.Keeps TS strict and aligns with repo guidelines.
-export function BuyFundsSection(props: { chain: ChainMetadata }) { +export function BuyFundsSection(props: { chain: ChainMetadata }): JSX.Element {apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (4)
29-34: Tighten types and add explicit return type.Avoid unsafe casts by typing tokenAddress as
0x${string}| undefined; add component return type.-export function BuyAndSwapEmbed(props: { - chain: Chain; - tokenAddress: string | undefined; - buyAmount: string | undefined; - pageType: PageType; -}) { +export function BuyAndSwapEmbed(props: { + chain: Chain; + tokenAddress?: `0x${string}`; + buyAmount?: string; + pageType: PageType; +}): JSX.Element { @@ - tokenAddress={props.tokenAddress as `0x${string}`} + tokenAddress={props.tokenAddress}Also applies to: 121-123
25-26: Importing from a “.server” module inside a client component can confuse maintainers.Consider re‑exporting from a neutral module (e.g.,
thirdweb.client-config.ts) or renaming to avoid server‑only connotation.
6-6: Optional: dynamically import heavy widgets to trim initial bundle.Use next/dynamic to load Buy/Swap widgets on demand.
+import dynamic from "next/dynamic"; -import { BuyWidget, SwapWidget } from "thirdweb/react"; +const BuyWidget = dynamic(() => + import("thirdweb/react").then((m) => m.BuyWidget), { ssr: false } +); +const SwapWidget = dynamic(() => + import("thirdweb/react").then((m) => m.SwapWidget), { ssr: false } +);
179-186: Add explicit return type to TabButton.Keeps TS strict.
-function TabButton(props: { +function TabButton(props: { label: string; onClick: () => void; isActive: boolean; -}) { +}): JSX.Element {
📜 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 (7)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(5 hunks)apps/dashboard/src/@/constants/public-envs.ts(1 hunks)apps/dashboard/src/@/constants/thirdweb.server.ts(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx(0 hunks)apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx(0 hunks)
💤 Files with no reviewable changes (2)
- apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
🧠 Learnings (10)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#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.
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
PR: thirdweb-dev/js#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/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
📚 Learning: 2025-05-27T19:56:16.920Z
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenTransfers.ts:41-44
Timestamp: 2025-05-27T19:56:16.920Z
Learning: When reviewing hooks that use environment variables like NEXT_PUBLIC_DASHBOARD_THIRDWEB_CLIENT_ID for API calls, MananTank prefers not to add explicit validation checks for these variables, trusting they will be set in the deployment environment.
Applied to files:
apps/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/@/constants/public-envs.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsxapps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Client Components must start with `'use client'`; handle interactivity with hooks and browser APIs
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-09-17T11:14:35.659Z
Learnt from: MananTank
PR: thirdweb-dev/js#8044
File: packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx:919-930
Timestamp: 2025-09-17T11:14:35.659Z
Learning: In the thirdweb codebase, useCustomTheme() hook can be used inside styled-components callbacks, contrary to the general React Rules of Hooks. This is a valid pattern in their implementation.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧬 Code graph analysis (3)
apps/dashboard/src/@/constants/thirdweb.server.ts (1)
apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_DASHBOARD_CLIENT_ID(1-2)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (3)
packages/thirdweb/src/bridge/types/Chain.ts (1)
Chain(5-40)apps/dashboard/src/@/constants/thirdweb.server.ts (1)
getConfiguredThirdwebClient(25-95)apps/dashboard/src/@/constants/public-envs.ts (3)
NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID(42-43)NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID(36-37)NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID(39-40)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx (1)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx (1)
BuyFundsSection(7-19)
⏰ 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). (1)
- GitHub Check: Size
🔇 Additional comments (6)
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx (1)
10-16: LGTM: decoupled from client prop and wired pageType="chain".Matches the new BuyAndSwapEmbed API.
apps/dashboard/src/@/constants/thirdweb.server.ts (2)
80-83: Client ID precedence updated correctly.New order (options.clientId > NEXT_PUBLIC_DASHBOARD_CLIENT_ID > "dummy-build-client") is consistent with per‑page IDs.
25-30: Optionally accepting clientId is safe — approve.
Repo-wide search shows callers either pass secretKey+teamId or explicitly provide clientId where needed (e.g., apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx); no callers rely on the previous implicit precedence.apps/dashboard/src/@/constants/public-envs.ts (1)
36-43: Add per-page public client IDs to .env examples and CIAdd NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID, NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID, and NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID to your .env.example(s) and CI (they're exported in apps/dashboard/src/@/constants/public-envs.ts and consumed in apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx). I can push a .env.example update.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx (1)
47-47: LGTM: updated BuyFundsSection usage matches new signature — re-scan forclientprop
ripgrep failed with "unrecognized file type: tsx" — cannot confirm absence of remainingclientprop usages. Re-run scan with:rg -n --hidden -g '!node_modules' -g '*.tsx' '<BuyFundsSection\b[^\n]*\bclient=' -C1 || true rg -n --hidden -g '!node_modules' -g '*.tsx' '<BuyAndSwapEmbed\b[^\n]*\bclient=' -C2 || trueapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (1)
51-65: Approve — memoized client selection OK; usages verified.
- BuyAndSwapEmbed pageType usage verified: "bridge" in apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx; "asset" in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx; "chain" in apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx.
- NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID, NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID, NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID exported from apps/dashboard/src/@/constants/public-envs.ts.
- Deployment action required: set envs to — Bridge: 9ff00395a371654636581f2a367fe35a; Chain: f247b972abf146908f320fb9f01ddff6; Asset: 2abfb6eae888137cbb2ce4b45d7aa553.
Merge activity
|
…ain, bridge and asset pages (#8101) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on refactoring components and updating environment variable handling for the `BuyAndSwapEmbed` and `BuyFundsSection` components in a dashboard application. It enhances the usage of client IDs and improves the structure of props. ### Detailed summary - Removed `client` prop from `BuyAndSwapEmbed` and `BuyFundsSection`. - Introduced `clientId` handling in `getConfiguredThirdwebClient`. - Updated `BuyAndSwapEmbed` to use `useMemo` for client configuration based on `pageType`. - Added multiple `NEXT_PUBLIC_*_CLIENT_ID` constants in `public-envs.ts`. - Cleaned up imports and types in various files for better clarity. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - New Features - Auto-configured client selection per page type (asset/bridge/chain) for Buy, Swap, and Bridge embeds, improving reliability without manual setup. - Refactor - Simplified components by removing the need to pass a client prop; widgets now use an internal, memoized client. - Chores - Added new public environment variables for page-specific client IDs to enable tailored configuration: - NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID - NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID - NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID <!-- end of auto-generated comment: release notes by coderabbit.ai -->
ae7c499 to
e568bce
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (5)
30-30: Export PageType for reuseIf callers need the type, export it to avoid duplicating the union elsewhere.
-type PageType = "asset" | "bridge" | "chain"; +export type PageType = "asset" | "bridge" | "chain";
54-67: Replace nested ternaries with an explicit map (clearer, exhaustive)Improves readability and keeps the union exhaustive.
- const client = useMemo(() => { - return getConfiguredThirdwebClient({ - clientId: - props.pageType === "asset" - ? NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID - : props.pageType === "bridge" - ? NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID - : props.pageType === "chain" - ? NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID - : undefined, - secretKey: undefined, - teamId: undefined, - }); - }, [props.pageType]); + const client = useMemo(() => { + const clientIdByPageType: Record<PageType, string | undefined> = { + asset: NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID, + bridge: NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID, + chain: NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID, + }; + const clientId = clientIdByPageType[props.pageType]; + return getConfiguredThirdwebClient({ + clientId, + secretKey: undefined, + teamId: undefined, + }); + }, [props.pageType]);
69-71: ExposeclassNameon the root (dashboard guideline)Dashboard components should accept and merge a
classNameon the root element.-export function BuyAndSwapEmbed(props: { +export function BuyAndSwapEmbed(props: { chain: Chain; tokenAddress: string | undefined; buyAmount: string | undefined; pageType: PageType; + className?: string; }) { @@ - return ( - <div className="bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10"> + return ( + <div className={cn("bg-card rounded-2xl border overflow-hidden flex flex-col relative z-10", props.className)}>Also applies to: 32-37
173-175: Avoid unsafe cast for possibly undefinedtokenAddressIf
props.tokenAddresscan be undefined or non‑0x, the cast to0x${string}is unsound. Prefer a guard.- tokenAddress={props.tokenAddress as `0x${string}`} + tokenAddress={ + props.tokenAddress && props.tokenAddress.startsWith("0x") + ? (props.tokenAddress as `0x${string}`) + : undefined + }
28-29: No server-only import or private env usage found — optional re-export recommendedapps/dashboard/src/@/constants/thirdweb.server.ts contains no import "server-only" and no process.env.* usages; importing it from apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (lines 28–29) is safe today. Optional: add a browser-safe re-export (e.g., thirdweb.client or thirdweb.shared) and have client components import that to future-proof against future server-only changes.
📜 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 (7)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(5 hunks)apps/dashboard/src/@/constants/public-envs.ts(1 hunks)apps/dashboard/src/@/constants/thirdweb.server.ts(2 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx(1 hunks)apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx(0 hunks)apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx(0 hunks)
💤 Files with no reviewable changes (2)
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx
- apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/dashboard/src/@/constants/thirdweb.server.ts
- apps/dashboard/src/@/constants/public-envs.ts
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/page.tsx
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧠 Learnings (8)
📓 Common learnings
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Learnt from: MananTank
PR: thirdweb-dev/js#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.
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Pages requiring fast transitions where data is prefetched on the client.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
PR: thirdweb-dev/js#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/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/components/*.client.tsx : Client components must start with `'use client';` before imports.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Client Components (browser): Begin files with `'use client';`
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
📚 Learning: 2025-09-17T11:14:35.659Z
Learnt from: MananTank
PR: thirdweb-dev/js#8044
File: packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx:919-930
Timestamp: 2025-09-17T11:14:35.659Z
Learning: In the thirdweb codebase, useCustomTheme() hook can be used inside styled-components callbacks, contrary to the general React Rules of Hooks. This is a valid pattern in their implementation.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (3)
packages/thirdweb/src/bridge/types/Chain.ts (1)
Chain(5-40)apps/dashboard/src/@/constants/thirdweb.server.ts (1)
getConfiguredThirdwebClient(25-95)apps/dashboard/src/@/constants/public-envs.ts (3)
NEXT_PUBLIC_ASSET_PAGE_CLIENT_ID(42-43)NEXT_PUBLIC_BRIDGE_PAGE_CLIENT_ID(36-37)NEXT_PUBLIC_CHAIN_PAGE_CLIENT_ID(39-40)
⏰ 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). (5)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (4)
4-6: Good: type-only import and memo hooks usageUsing
import typeand pulling inuseMemois idiomatic and avoids bundling types.
20-24: Verify per‑page clientId envs are present in all deploy envsEnsure
NEXT_PUBLIC_{ASSET,BRIDGE,CHAIN}_PAGE_CLIENT_IDare defined (Vercel/CI and local), otherwise the code will silently fall back to the dashboard default viagetConfiguredThirdwebClient(). Consider adding runtime warn once if a page‑specific ID is missing.Would you like a tiny one-time console.warn guard added?
90-91: LGTM: both widgets now consume the internally configured clientPassing the internally derived
clientintoBuyWidgetandSwapWidgetaligns with the new design.Also applies to: 178-181
32-37: Prop surface change: confirmed — all call sites updated (removedclient, addedpageType)Verified — inspected usages and found no remaining
client=props; these call sites providepageType:
- apps/dashboard/src/app/bridge/components/client/UniversalBridgeEmbed.tsx — pageType="bridge"
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/erc20.tsx — pageType="asset"
- apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/BuyFundsSection.tsx — pageType="chain"
PR-Codex overview
This PR focuses on refactoring the
BuyFundsSectionandBuyAndSwapEmbedcomponents to remove unnecessaryclientprops, streamline client configuration, and enhance the handling of environment variables for client IDs.Detailed summary
clientprop fromBuyFundsSection.BuyAndSwapEmbedto useuseMemofor client configuration based onpageType.public-envs.ts.UniversalBridgeEmbedto remove theclientprop.thirdweb.server.ts.Summary by CodeRabbit