[SDK] Allow passing activeWallet to SwapWidget #8504
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: a704c3f The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughAdds an optional Changes
Sequence DiagramsequenceDiagram
participant User
participant Dashboard as Project Wallet UI
participant Modal as Swap Modal
participant SwapWidget
participant ThirdwebClient as Thirdweb Client
User->>Dashboard: Open project wallet UI
User->>Dashboard: Click "Swap"
Dashboard->>Modal: Open swap modal
Modal->>User: Prompt for secret key (+ optional vault token)
User->>Modal: Submit credentials
Modal->>ThirdwebClient: Instantiate client with credentials
ThirdwebClient->>Modal: Provide wallet adapter
Modal->>SwapWidget: Initialize with activeWallet (adapter) + Thirdweb client
SwapWidget->>SwapWidget: Pre-select wallet using activeWallet
User->>SwapWidget: Select tokens and execute swap
SwapWidget->>ThirdwebClient: Perform swap transaction
ThirdwebClient-->>SwapWidget: Return swap result
SwapWidget-->>Dashboard: Emit onClose / update
Dashboard->>Modal: Close modal
Estimated code review effort🎯 4 (Complex) | ⏱️ ~50 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
Dashboard
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #8504 +/- ##
==========================================
- Coverage 54.65% 54.63% -0.03%
==========================================
Files 920 920
Lines 61102 61107 +5
Branches 4144 4141 -3
==========================================
- Hits 33398 33383 -15
- Misses 27602 27625 +23
+ Partials 102 99 -3
🚀 New features to boost your workflow:
|
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/dashboard/src/@/constants/thirdweb.server.ts (1)
42-42: Consider handling potential URL parsing errors.If
THIRDWEB_ENGINE_CLOUD_URLis misconfigured (e.g., not a valid URL),new URL()will throw. Other domain constants in this file are already hostnames, so they don't require parsing. While the default value is valid, an invalid environment variable would crash at startup.Consider wrapping the URL parsing or validating the environment variable format:
- engineCloud: new URL(THIRDWEB_ENGINE_CLOUD_URL).hostname, + engineCloud: (() => { + try { + return new URL(THIRDWEB_ENGINE_CLOUD_URL).hostname; + } catch { + console.warn("Invalid THIRDWEB_ENGINE_CLOUD_URL, using default"); + return "engine.thirdweb-dev.com"; + } + })(),Alternatively, store the hostname directly in the constant to match the pattern of other domain constants.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (1)
779-792: Consider adding error handling for SwapWidget failures.The SwapWidget is rendered without
onErrororonCancelcallbacks. Consider adding these handlers to provide user feedback on failures or allow closing the modal gracefully.<SwapWidget client={swapClient} prefill={{ sellToken: { chainId: chainId, tokenAddress: tokenAddress, }, }} activeWallet={activeWallet} theme={getSDKTheme(t)} + onError={(error) => { + console.error("Swap error:", error); + toast.error("Swap failed. Please try again."); + }} + onCancel={() => { + onClose(); + }} />
📜 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)
.changeset/shaky-hoops-battle.md(1 hunks).vscode/settings.json(2 hunks)apps/dashboard/src/@/constants/thirdweb.server.ts(2 hunks)apps/dashboard/src/@/constants/urls.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
apps/dashboard/src/@/constants/thirdweb.server.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/dashboard/src/@/constants/urls.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/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/dashboard/src/@/constants/urls.ts
apps/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/*.{ts,tsx}: UseNavLinkfor internal navigation with automatic active states in dashboard
Start server component files withimport "server-only";in Next.js
Read cookies/headers withnext/headersin server components
Access server-only environment variables in server components
Perform heavy data fetching in server components
Implement redirect logic withredirect()fromnext/navigationin server components
Begin client component files with'use client';directive in Next.js
Handle interactive UI with React hooks (useState,useEffect, React Query, wallet hooks) in client components
Access browser APIs (localStorage,window,IntersectionObserver) in client components
Support fast transitions with prefetched data in client components
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader for API calls – never embed tokens in URLs
Return typed results (Project[],User[]) from server-side data fetches – avoidany
Wrap client-side API calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysin React Query for cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components – only use analytics client-side
Files:
apps/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/dashboard/src/@/constants/urls.ts
apps/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.{ts,tsx}: Always import from the central UI library under@/components/ui/*for reusable core UI components likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; never embed raw SVG
Keep components pure; fetch data outside using server components or hooks and pass it down via props
Use Tailwind CSS as the styling system; avoid inline styles or CSS modules
Merge class names withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand other Tailwind variables instead of hard-coded colors
Use spacing utilities (px-*,py-*,gap-*) instead of custom margins
Follow mobile-first responsive design with Tailwind helpers (max-sm,md,lg,xl)
Never hard-code colors; always use Tailwind variables
Combine class names viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/dashboard/src/@/constants/urls.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/dashboard/src/@/constants/thirdweb.server.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/dashboard/src/@/constants/urls.ts
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/dashboard/src/@/constants/urls.ts
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/@/constants/thirdweb.server.tsapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/dashboard/src/@/constants/urls.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/dashboard/src/@/constants/thirdweb.server.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsxapps/dashboard/src/@/constants/urls.ts
packages/thirdweb/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/**/*.{ts,tsx}: Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (e.g.const { jsPDF } = await import("jspdf");)Lazy-load heavy dependencies inside async paths to keep the initial bundle lean (e.g., const { jsPDF } = await import('jspdf');)
Files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx
apps/dashboard/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Add
classNameprop to the root element of every component to allow external overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}: Group feature-specific components under feature/components/_ and expose a barrel index.ts when necessary
Expose a className prop on the root element of every component for styling overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
🧬 Code graph analysis (4)
apps/dashboard/src/@/constants/thirdweb.server.ts (1)
apps/dashboard/src/@/constants/urls.ts (1)
THIRDWEB_ENGINE_CLOUD_URL(29-30)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.ts (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
ActiveWalletInfo(140-144)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.ts (1)
useActiveWalletInfo(8-27)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (3)
packages/thirdweb/src/exports/thirdweb.ts (1)
createThirdwebClient(24-24)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
SwapWidget(251-271)apps/dashboard/src/@/utils/sdk-component-theme.ts (1)
getSDKTheme(8-43)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Vercel Agent Review
- GitHub Check: Size
- GitHub Check: Unit Tests
🔇 Additional comments (11)
.changeset/shaky-hoops-battle.md (1)
1-5: LGTM!The changeset correctly documents the new
activeWalletprop addition to SwapWidget with an appropriate patch version bump..vscode/settings.json (1)
2-3: LGTM!The editor settings enforce consistent formatting (2-space indentation) and automatic Biome fixes on save, which aligns with the project's Biome-based linting configuration.
Also applies to: 23-25
apps/dashboard/src/@/constants/urls.ts (1)
29-30: Note the inconsistency in URL format.This constant includes the full URL with protocol (
https://engine.thirdweb-dev.com), while other constants in this file are hostnames only (e.g.,pay.thirdweb-dev.com). This works becausethirdweb.server.tsextracts the hostname vianew URL().hostname, but it's worth noting the inconsistency for future maintainability.packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)
173-176: LGTM!The
activeWalletprop is well-documented and correctly typed. The optional nature ensures backward compatibility.
328-328: LGTM!The
activeWalletprop is correctly passed touseActiveWalletInfo, enabling the override behavior when provided.packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.ts (1)
8-26: LGTM!The hook correctly prioritizes
activeWalletOverridewhen provided, falling back to the connected wallet hooks otherwise. The dependency array is complete, and the memoization logic is sound.apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (5)
139-141: Credentials stored in component state - security consideration.Storing
swapSecretKeyandswapVaultAccessTokenin React state means they persist across modal open/close cycles, which improves UX. However, be aware that:
- These values are accessible in React DevTools in development
- They persist in memory until the page is refreshed or unmounted
This is acceptable for a dashboard context where users are authenticated, but ensure users understand credentials remain in memory during their session.
325-333: LGTM!The Swap button follows the existing UI patterns with consistent styling (
variant="outline",size="sm") and proper icon usage.
615-627: LGTM!The
SwapProjectWalletModalContentPropstype is well-defined with clear prop types for all required data and callbacks.
654-662: The code is correct. ThecreateThirdwebClientSDK explicitly supports passing bothclientIdandsecretKeyparameters simultaneously, as verified by the SDK's test suite which confirms: "should NOT ignore clientId if secretKey is provided". ThepublishableKeyvariable is the project's public client ID, and using it withsecretKeyis the intended pattern for server-side operations that need to reference a specific client configuration.Likely an incorrect or invalid review comment.
664-682: Wallet adapter setup is correct; no-opswitchChainis safe for server wallets.The
createWalletAdaptercorrectly wrapsEngine.serverWalletwith no-op handlers. Verification confirms SwapWidget does not invokewallet.switchChain()during cross-chain swaps, so the no-op implementation poses no issues. The adapter internally tracks chain state via_chainand emitschainChangedevents (wallet-adapter.ts:82-83), whileEngine.serverWalletspecifies the chain per-transaction through Engine API execution options rather than relying on wallet-level chain switching.
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
| export const THIRDWEB_ENGINE_CLOUD_URL = | ||
| process.env.NEXT_PUBLIC_ENGINE_CLOUD_URL || "https://engine.thirdweb-dev.com"; |
There was a problem hiding this comment.
The THIRDWEB_ENGINE_CLOUD_URL constant uses a full URL format with https:// protocol, but this causes a crash when the environment variable is set to just a hostname (which is the pattern used for all other domain constants).
View Details
📝 Patch Details
diff --git a/apps/dashboard/src/@/constants/thirdweb.server.ts b/apps/dashboard/src/@/constants/thirdweb.server.ts
index 3525c4089..9046a21cf 100644
--- a/apps/dashboard/src/@/constants/thirdweb.server.ts
+++ b/apps/dashboard/src/@/constants/thirdweb.server.ts
@@ -39,7 +39,7 @@ export function getConfiguredThirdwebClient(options: {
rpc: THIRDWEB_RPC_DOMAIN,
social: THIRDWEB_SOCIAL_API_DOMAIN,
storage: THIRDWEB_STORAGE_DOMAIN,
- engineCloud: new URL(THIRDWEB_ENGINE_CLOUD_URL).hostname,
+ engineCloud: THIRDWEB_ENGINE_CLOUD_URL,
});
}
diff --git a/apps/dashboard/src/@/constants/urls.ts b/apps/dashboard/src/@/constants/urls.ts
index a2856c5f3..7bc691737 100644
--- a/apps/dashboard/src/@/constants/urls.ts
+++ b/apps/dashboard/src/@/constants/urls.ts
@@ -27,4 +27,4 @@ export const THIRDWEB_BRIDGE_URL =
process.env.NEXT_PUBLIC_BRIDGE_URL || "bridge.thirdweb-dev.com";
export const THIRDWEB_ENGINE_CLOUD_URL =
- process.env.NEXT_PUBLIC_ENGINE_CLOUD_URL || "https://engine.thirdweb-dev.com";
+ process.env.NEXT_PUBLIC_ENGINE_CLOUD_URL || "engine.thirdweb-dev.com";
Analysis
Inconsistent URL format in THIRDWEB_ENGINE_CLOUD_URL causes crash with environment variable override
What fails: THIRDWEB_ENGINE_CLOUD_URL uses a full URL format with protocol ("https://engine.thirdweb-dev.com"), but the code that uses it in thirdweb.server.ts line 42 calls new URL(THIRDWEB_ENGINE_CLOUD_URL).hostname to extract the hostname. This causes a TypeError: Invalid URL when the environment variable NEXT_PUBLIC_ENGINE_CLOUD_URL is set to a hostname-only value (following the pattern of all other domain constants like THIRDWEB_PAY_DOMAIN, THIRDWEB_BUNDLER_DOMAIN, etc.).
How to reproduce:
- Set
NEXT_PUBLIC_ENGINE_CLOUD_URL=engine.thirdweb-dev.com(hostname only, like other domain env vars) - Run the application in non-production environment
- The
getConfiguredThirdwebClient()function inthirdweb.server.tscallssetThirdwebDomains()which executesnew URL(THIRDWEB_ENGINE_CLOUD_URL).hostname - This crashes with:
TypeError: Invalid URL
Result: Application crashes with invalid URL error in non-production environments when the environment variable is set to a hostname-only value.
Expected: The constant should follow the same pattern as all other domain constants in the thirdweb SDK - storing just the hostname without protocol. The setThirdwebDomains() function expects domain names without protocols and automatically adds the correct protocol (https:// for normal domains, http:// for localhost).
Changes made:
- Changed
THIRDWEB_ENGINE_CLOUD_URLconstant from"https://engine.thirdweb-dev.com"to"engine.thirdweb-dev.com"inapps/dashboard/src/@/constants/urls.ts - Updated the usage in
apps/dashboard/src/@/constants/thirdweb.server.tsline 42 fromnew URL(THIRDWEB_ENGINE_CLOUD_URL).hostnametoTHIRDWEB_ENGINE_CLOUD_URLto pass the hostname directly, consistent with all other domain parameters
Merge activity
|
<!--
## 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 enhancing the `SwapWidget` by allowing the passing of an `activeWallet` prop and improving the project wallet functionality in the dashboard. It also includes updates to the VSCode settings and introduces new components for swapping tokens.
### Detailed summary
- Added `activeWallet` prop to `SwapWidgetProps`.
- Modified `useActiveWalletInfo` to accept an `activeWalletOverride`.
- Introduced `SwapProjectWalletModalContent` for token swapping.
- Updated `ProjectWalletDetailsSection` to include swap functionality.
- Adjusted VSCode settings for formatting preferences.
> ✨ 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**
* Added in-app token swap functionality for project wallets, allowing users to exchange tokens directly from the wallet interface with credentials management.
* SwapWidget now supports wallet pre-selection, enabling faster and more streamlined token swap initiation.
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
_SDK_Allow_passing_activeWallet_to_SwapWidget
branch
from
466fc0e to
a704c3f
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (1)
615-627: Fine-tune credentials gating and empty swap state; consider extracting modal to its own fileA few points in
SwapProjectWalletModalContentare worth tightening up:
Credential gating vs helper text / send flow
hasRequiredCredentialscurrently requires:
- managed vault:
secretKeyonly- non‑managed vault:
secretKeyandvaultAccessToken
while the shared helper copy still describes vault access tokens as “optional”, and the send modal only validatessecretKeyvia Zod. It’s worth aligning these so users don’t see conflicting rules across send vs swap, either by:- relaxing
hasRequiredCredentialsto match the send flow, or- tightening the send form validation and adjusting the helper text to reflect when a vault token is actually required.
Empty swap body when client/wallet are missing
On the swap screen, ifswapClientoractiveWalletare falsy, nothing is rendered under the header. A small fallback (e.g. an inline error or helper text prompting users to go back and re‑enter credentials) would avoid a visually “blank” modal in edge cases.Component size / cohesion
This modal now combines navigation, credentials UX, client/wallet wiring, and the embeddedSwapWidgetin ~150 lines. ExtractingSwapProjectWalletModalContent(and its props type) into a dedicated file would keepproject-wallet-details.tsxleaner and make the swap flow easier to maintain and test in isolation.Also applies to: 629-796
📜 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)
.changeset/shaky-hoops-battle.md(1 hunks).vscode/settings.json(2 hunks)apps/dashboard/src/@/constants/thirdweb.server.ts(2 hunks)apps/dashboard/src/@/constants/urls.ts(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/dashboard/src/@/constants/urls.ts
- .changeset/shaky-hoops-battle.md
- packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.ts
- apps/dashboard/src/@/constants/thirdweb.server.ts
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
packages/thirdweb/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/**/*.{ts,tsx}: Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (e.g.const { jsPDF } = await import("jspdf");)Lazy-load heavy dependencies inside async paths to keep the initial bundle lean (e.g., const { jsPDF } = await import('jspdf');)
Files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.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:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxapps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}: Import UI component primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Use Tailwind CSS only – no inline styles or CSS modules in dashboard and playground
Usecn()from@/lib/utilsfor conditional Tailwind class merging
Use design system tokens for styling (backgrounds:bg-card, borders:border-border, muted text:text-muted-foreground)
ExposeclassNameprop on root element for component overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/*.{ts,tsx}: UseNavLinkfor internal navigation with automatic active states in dashboard
Start server component files withimport "server-only";in Next.js
Read cookies/headers withnext/headersin server components
Access server-only environment variables in server components
Perform heavy data fetching in server components
Implement redirect logic withredirect()fromnext/navigationin server components
Begin client component files with'use client';directive in Next.js
Handle interactive UI with React hooks (useState,useEffect, React Query, wallet hooks) in client components
Access browser APIs (localStorage,window,IntersectionObserver) in client components
Support fast transitions with prefetched data in client components
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader for API calls – never embed tokens in URLs
Return typed results (Project[],User[]) from server-side data fetches – avoidany
Wrap client-side API calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysin React Query for cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components – only use analytics client-side
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.{ts,tsx}: Always import from the central UI library under@/components/ui/*for reusable core UI components likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; never embed raw SVG
Keep components pure; fetch data outside using server components or hooks and pass it down via props
Use Tailwind CSS as the styling system; avoid inline styles or CSS modules
Merge class names withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand other Tailwind variables instead of hard-coded colors
Use spacing utilities (px-*,py-*,gap-*) instead of custom margins
Follow mobile-first responsive design with Tailwind helpers (max-sm,md,lg,xl)
Never hard-code colors; always use Tailwind variables
Combine class names viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/dashboard/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Add
classNameprop to the root element of every component to allow external overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}: Group feature-specific components under feature/components/_ and expose a barrel index.ts when necessary
Expose a className prop on the root element of every component for styling overrides
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx
🧬 Code graph analysis (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/hooks.ts (1)
useActiveWalletInfo(8-27)
⏰ 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). (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Vercel Agent Review
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
.vscode/settings.json (1)
2-3: Reasonable VSCode settings for enforcing consistent code quality.The changes to enable automatic code fixes and import organization on save align with using Biome as the project formatter. These settings will help maintain consistency across the codebase as the broader SwapWidget changes are integrated.
Note: These are developer-facing settings that will affect all team members' save behavior. If this represents a workflow change for the team, ensure there's alignment before merging.
Also applies to: 23-25
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
11-11: activeWallet override is cleanly wired through SwapWidgetThe new
activeWallet?: Walletprop is correctly typed, documented, and forwarded intouseActiveWalletInfo(props.activeWallet), preserving existing behavior when the prop is omitted while enabling wallet pre-selection. No changes needed.Also applies to: 173-176, 328-328
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/project-wallet/project-wallet-details.tsx (1)
6-6: Swap entrypoint, state, and dialog wiring look consistent and safeThe new swap-related imports,
isSwapOpen+ in-memory credential state, “Swap” button, and<Dialog>wiring intoSwapProjectWalletModalContentall mirror the existing send/change-wallet patterns and keep secrets out of persistent storage. The swap flow is correctly scoped to the current project wallet (chainId, tokenAddress, address) and reuses the central SDK theming util. No issues from a correctness or UX standpoint.Also applies to: 14-14, 19-21, 26-27, 29-29, 79-79, 132-142, 315-333, 419-435
graphite-app
bot
deleted the
_SDK_Allow_passing_activeWallet_to_SwapWidget
branch
PR-Codex overview
This PR introduces the ability to pass an
activeWalletto theSwapWidget, enhances the configuration for theTHIRDWEB_ENGINE_CLOUD_URL, and adds a swap functionality in theProjectWalletDetailsSection, allowing users to swap tokens with a project wallet.Detailed summary
THIRDWEB_ENGINE_CLOUD_URLto constants.getConfiguredThirdwebClientto includeengineCloud.SwapWidgetPropsto acceptactiveWallet.useActiveWalletInfoto support anactiveWalletOverride.ProjectWalletDetailsSection.SwapProjectWalletModalContentfor token swapping UI.Summary by CodeRabbit
New Features
Chores
✏️ Tip: You can customize this high-level summary in your review settings.