[MNY-210] SDK: export a script to render BridgeEmbed #8106
Conversation
🦋 Changeset detectedLatest commit: 1f7cda6 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 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 a browser-embeddable BridgeWidget: new React component and props, a script-entry bundle and UMD render API, tsup build config and tsconfig, Storybook stories, minor layout/docs/test tweaks, and a new script README. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Page as Page Script
participant DOM as DOM Element
participant BridgeAPI as BridgeWidget (global)
participant Root as React Root
participant Provider as ThirdwebProvider
participant Script as BridgeWidgetScript
participant Widget as BridgeWidget
participant Swap as SwapWidget
participant Buy as BuyWidget
Page->>BridgeAPI: BridgeWidget.render(DOM, props)
BridgeAPI->>Root: createRoot(DOM).render(Provider(Script(props)))
Root->>Provider: mount
Provider->>Script: mount → create client & theme
Script->>Widget: render({ client, theme, ...props })
Widget->>Widget: set activeTab
alt activeTab == Swap
Widget->>Swap: mount Swap UI with swap props
else activeTab == Buy
Widget->>Buy: mount Buy UI with buy props
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes Pre-merge checks and finishing touches❌ Failed checks (5 warnings)
✨ 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. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
size-limit report 📦
|
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #8106 +/- ##
==========================================
- Coverage 56.32% 56.26% -0.06%
==========================================
Files 906 906
Lines 59206 59208 +2
Branches 4179 4174 -5
==========================================
- Hits 33345 33311 -34
- Misses 25755 25792 +37
+ Partials 106 105 -1
🚀 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: 9
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
packages/thirdweb/src/wallets/eip5792/send-calls.ts (2)
198-203: Bug:valuedropped for contract-creation calls (noto).
ETH value can be sent with contract creation; current code forces it toundefined.Apply this diff to preserve
value:- return { - data: _data as Hex, - to: undefined, - value: undefined, - }; + return { + data: _data as Hex, + to: undefined, + value: + typeof _value === "bigint" || typeof _value === "number" + ? numberToHex(_value) + : undefined, + };
69-71: Docs mismatch: defaultversionsays "1.0" but code uses "2.0.0".
Update TSDoc to reflect the actual default.Apply this diff:
- * @param {WalletSendCallsParameters[number]["version"]} [options.version="1.0"] - The `wallet_sendCalls` version to use, defaults to "1.0". + * @param {WalletSendCallsParameters[number]["version"]} [options.version="2.0.0"] - The `wallet_sendCalls` version to use, defaults to "2.0.0".
🧹 Nitpick comments (6)
packages/thirdweb/src/wallets/eip5792/send-calls.ts (2)
23-27: Enforce “to or data” at the type level; drop redundant| undefined.
Avoids runtime errors and tightens the API. Also removes a small redundancy in optional fields.Apply this diff:
-type WalletCall = OneOf<{ - to?: Address | undefined; // TODO: Make this required but compatible with StaticPrepareTransactionOptions to prevent runtime error - data?: Hex | undefined; - value?: bigint | undefined; -}>; +type WalletCall = + | { to: Address; data?: Hex; value?: bigint } + | { to?: undefined; data: Hex; value?: bigint };Note: After this change,
OneOfbecomes unused in this file. Remove it from the imports:-import type { OneOf, Prettify } from "../../utils/type-utils.js"; +import type { Prettify } from "../../utils/type-utils.js";
158-161: Add TSDoc and mark internal (exported but not part of public API).
Keeps package docs compliant with repo guidelines.Apply this diff:
+/** + * Convert SDK `sendCalls` options into provider params for EIP-5792. + * @internal + */ export async function toProviderCallParams(packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (1)
26-65: Consider makingbuyoptional to allow Swap-only embedsDefaulting tab to "swap" while requiring
buyforces callers to supply unused fields.Proposed shape:
- Change
buyto optional.- Render Buy tab only if
props.buyis provided.- Default
tabbased on which ofswap/buyis provided.packages/thirdweb/src/script-exports/readme.md (2)
15-27: Document both globals: BridgeWidget and thirdweb.BridgeWidgetWe’re aliasing to
window.thirdweb.BridgeWidgetin the build; document both for clarity.Apply this diff:
- BridgeWidget.render(node, { + // Either of the following will work: + // BridgeWidget.render(node, { ... }) + // thirdweb.BridgeWidget.render(node, { ... }) + BridgeWidget.render(node, {
50-50: Typo: “Customing” → “Customizing”-### Customing Swap UI +### Customizing Swap UIpackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx (1)
23-23: Add explicit return types for story functionsAligns with repo TS guidelines.
Apply this diff:
-export function BasicUsage() { +export function BasicUsage(): JSX.Element { @@ -export function LightTheme() { +export function LightTheme(): JSX.Element { @@ -export function CurrencySet() { +export function CurrencySet(): JSX.Element { @@ -export function NoThirdwebBranding() { +export function NoThirdwebBranding(): JSX.Element { @@ -export function CustomTheme() { +export function CustomTheme(): JSX.Element {Also applies to: 32-32, 42-42, 52-52, 63-63
📜 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 ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
packages/thirdweb/package.json(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx(1 hunks)packages/thirdweb/src/script-exports/bridge-widget.tsx(1 hunks)packages/thirdweb/src/script-exports/readme.md(1 hunks)packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx(1 hunks)packages/thirdweb/src/wallets/eip5792/send-calls.ts(3 hunks)packages/thirdweb/tsup.config.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{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:
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsxpackages/thirdweb/src/script-exports/bridge-widget.tsxpackages/thirdweb/tsup.config.tspackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/wallets/eip5792/send-calls.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsxpackages/thirdweb/src/script-exports/bridge-widget.tsxpackages/thirdweb/tsup.config.tspackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/wallets/eip5792/send-calls.ts
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsxpackages/thirdweb/src/script-exports/bridge-widget.tsxpackages/thirdweb/tsup.config.tspackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/wallets/eip5792/send-calls.ts
**/package.json
📄 CodeRabbit inference engine (AGENTS.md)
Track bundle budgets via
package.json#size-limit
Files:
packages/thirdweb/package.json
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
For new UI components, add Storybook stories (
*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx
packages/thirdweb/src/wallets/**
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/wallets/**: UnifiedWalletandAccountinterfaces in wallet architecture
Support for in-app wallets (social/email login)
Smart wallets with account abstraction
EIP-1193, EIP-5792, EIP-7702 standard support in wallet modules
Files:
packages/thirdweb/src/wallets/eip5792/send-calls.ts
🧠 Learnings (6)
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
PR: thirdweb-dev/js#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:
packages/thirdweb/package.json
📚 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: Run `pnpm build` to ensure everything builds after each file change
Applied to files:
packages/thirdweb/package.json
📚 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}/**/*.stories.tsx : Add Storybook stories (`*.stories.tsx`) alongside new UI components
Applied to files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.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 **/*.stories.tsx : For new UI components, add Storybook stories (`*.stories.tsx`) alongside the code
Applied to files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.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/*.{stories,test}.{tsx,ts} : Provide a Storybook story (`MyComponent.stories.tsx`) or unit test alongside the component.
Applied to files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.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 packages/thirdweb/src/wallets/** : EIP-1193, EIP-5792, EIP-7702 standard support in wallet modules
Applied to files:
packages/thirdweb/src/wallets/eip5792/send-calls.ts
🧬 Code graph analysis (5)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
packages/thirdweb/src/react/web/ui/ConnectWallet/constants.ts (2)
modalMaxWidthCompact(8-8)modalMaxWidthWide(11-11)
packages/thirdweb/src/script-exports/bridge-widget.tsx (1)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (2)
BridgeWidgetProps(26-65)BridgeWidget(67-152)
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (1)
BridgeWidget(67-152)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(15-17)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (4)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-486)packages/thirdweb/src/react/core/design-system/index.ts (3)
radius(188-196)fontSize(164-172)spacing(174-186)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/wallets/eip5792/send-calls.ts (1)
packages/thirdweb/src/exports/utils.ts (1)
Address(144-144)
🪛 Gitleaks (8.28.0)
packages/thirdweb/src/script-exports/readme.md
[high] 61-61: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ 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: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
🔇 Additional comments (5)
packages/thirdweb/src/wallets/eip5792/send-calls.ts (1)
7-7: Good: type‑safe Address import aligns with narrowing.
This keeps call targets strongly typed and consistent with getAddress usage.packages/thirdweb/package.json (2)
93-93: tsup dependency looks good — config verifiedpackages/thirdweb/tsup.config.ts defines a build for "src/script-exports/bridge-widget.tsx" with format "iife" (platform "browser"), outDir "dist/scripts" and globalName "BridgeWidget"; no other tsup entry/format matches found.
68-68: Verified: @types/react-dom and react-dom versions are alignedSearch shows @types/[email protected] in multiple package.json files and [email protected] across the workspace; pnpm-lock.yaml resolves to those same versions — duplicates are present but consistent, no conflict detected.
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (1)
126-135: Avoid unsafe cast for tokenAddress
props.buy.tokenAddress as \0x${string}`will type-force undefined as an address. Prefer passing through as optional ifBuyWidgetacceptsAddress | undefined`, or validate.If
BuyWidgetexpectsAddress | undefined, update to:- tokenAddress={props.buy.tokenAddress as `0x${string}`} + tokenAddress={props.buy.tokenAddress}Otherwise, add a runtime guard before passing.
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx (1)
4-4: Keep using storyClient.clientId — it's defined in utils.tsxpackages/thirdweb/src/stories/utils.tsx reads STORYBOOK_CLIENT_ID and exports storyClient created with that clientId; clientId is not exported, so importing clientId as suggested would break.
Likely an incorrect or invalid review comment.
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
Outdated
Show resolved
Hide resolved
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
Show resolved
Hide resolved
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx
Outdated
Show resolved
Hide resolved
MananTank
force-pushed
the
mny-210
branch
2 times, most recently
from
cf7f9bf to
bfedc72
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (2)
154-178: Extract TabButton into a shared component or reuse ConnectWallet's TabButtonBridge's TabButton duplicates the one in ConnectWallet/NetworkSelector — consolidate to a single primitive (accepting active/size/padding props) or import the existing TabButton to avoid duplication; current differences: Bridge uses Button variant='secondary' + inline styles (radius.full, paddingInline md+, conditional border) while NetworkSelector exports a styled.button (data-active, radius.lg, padding sm).
Files: packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx, packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
53-54: Convert TODO comments into tracked issues — make buy.amount & buy.chainId optionalCreate tracked issues to implement making buy.amount (string) and buy.chainId (number) optional in packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx; triage the other TODOs found across the repo into tracked tasks and link them to follow-up work.
📜 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 ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (8)
packages/thirdweb/package.json(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx(1 hunks)packages/thirdweb/src/script-exports/bridge-widget.tsx(1 hunks)packages/thirdweb/src/script-exports/readme.md(1 hunks)packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx(1 hunks)packages/thirdweb/src/wallets/eip5792/send-calls.ts(3 hunks)packages/thirdweb/tsup.config.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/thirdweb/src/wallets/eip5792/send-calls.ts
- packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget.stories.tsx
- packages/thirdweb/src/script-exports/bridge-widget.tsx
- packages/thirdweb/tsup.config.ts
- packages/thirdweb/package.json
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
🧠 Learnings (4)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485
Timestamp: 2025-09-23T19:56:43.631Z
Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.
📚 Learning: 2025-09-23T19:56:43.631Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485
Timestamp: 2025-09-23T19:56:43.631Z
Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.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 packages/thirdweb/src/exports/** : Every public symbol must have comprehensive TSDoc with at least one `example` block that compiles and custom annotation tags (`beta`, `internal`, `experimental`)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.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 packages/thirdweb/**/*.{ts,tsx} : Every public symbol must have comprehensive TSDoc with at least one compiling `example` and a custom tag (`beta`, `internal`, `experimental`, etc.)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
🧬 Code graph analysis (2)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (5)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-486)packages/thirdweb/src/react/core/design-system/index.ts (3)
radius(188-196)fontSize(164-172)spacing(174-186)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/ConnectWallet/NetworkSelector.tsx (1)
TabButton(735-753)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
packages/thirdweb/src/react/web/ui/ConnectWallet/constants.ts (2)
modalMaxWidthCompact(8-8)modalMaxWidthWide(11-11)
🪛 GitHub Check: codecov/patch
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
[warning] 482-484: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx#L482-L484
Added lines #L482 - L484 were not covered by tests
🪛 Gitleaks (8.28.0)
packages/thirdweb/src/script-exports/readme.md
[high] 62-62: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 markdownlint-cli2 (0.18.1)
packages/thirdweb/src/script-exports/readme.md
13-13: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
🔇 Additional comments (5)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
482-484: LGTM: Intentional 100vw for embed use-caseKeeping width: "100vw" with the modal-based maxWidth cap is consistent with the Bridge widget embedding design. No changes requested.
packages/thirdweb/src/script-exports/readme.md (1)
7-7: Fix the incorrect CDN path.packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (3)
26-65: Add comprehensive TSDoc to public API.
67-152: Add comprehensive TSDoc to public component.
134-134: Validate tokenAddress before casting/passing to BuyWidget.props.buy.tokenAddress is an optional string but is cast to
0x${string}with no runtime validation — validate the value or only pass it when verified.Location: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (BuyWidget tokenAddress prop)
Suggested change:
-tokenAddress={props.buy.tokenAddress as `0x${string}`} +tokenAddress={props.buy.tokenAddress ? (props.buy.tokenAddress as `0x${string}`) : undefined}I couldn't confirm an existing address-validator in the repo; verify if one exists and use it (or add a type guard like isAddress) before casting.
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (4)
packages/thirdweb/src/script-exports/readme.md (2)
13-13: Fix heading levels (MD001)Use H2 under the H1.
-### Basic Usage +## Basic Usage @@ -### Custom Theme +## Custom Theme @@ -### Customizing Swap UI +## Customizing Swap UIAlso applies to: 32-32, 52-52
6-7: Correct CDN path, pin version, and add defer
Update the script tag to match the tsup output and pin the package version:-<!-- … --> -<script src="https://unpkg.com/thirdweb/scripts/bridge-widget.js"></script> +<!-- … --> +<script defer src="https://unpkg.com/thirdweb@<version>/dist/scripts/bridge-widget.js"></script>packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (2)
253-270: Optional: Add ARIA roles for tab semanticsImprove accessibility by marking the container as a tablist and buttons as tabs with aria-selected.
- <Container + <Container + role="tablist" + aria-label="Bridge widget tabs" px="md" @@ - <TabButton isActive={tab === "swap"} onClick={() => setTab("swap")}> + <TabButton role="tab" aria-selected={tab === "swap"} isActive={tab === "swap"} onClick={() => setTab("swap")}> Swap </TabButton> - <TabButton isActive={tab === "buy"} onClick={() => setTab("buy")}> + <TabButton role="tab" aria-selected={tab === "buy"} isActive={tab === "buy"} onClick={() => setTab("buy")}> Buy </TabButton>
242-318: Optional: Add explicit return typeExplicit return types improve API clarity for public components.
-export function BridgeWidget(props: BridgeWidgetProps) { +export function BridgeWidget(props: BridgeWidgetProps): 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 ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (13)
packages/thirdweb/package.json(3 hunks)packages/thirdweb/src/exports/react.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx(1 hunks)packages/thirdweb/src/script-exports/bridge-widget-script.tsx(1 hunks)packages/thirdweb/src/script-exports/bridge-widget.tsx(1 hunks)packages/thirdweb/src/script-exports/readme.md(1 hunks)packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx(1 hunks)packages/thirdweb/src/wallets/eip5792/send-calls.ts(1 hunks)packages/thirdweb/src/wallets/smart/smart-wallet-modular.test.ts(1 hunks)packages/thirdweb/tsconfig.build.tsup.json(1 hunks)packages/thirdweb/tsup.config.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (8)
- packages/thirdweb/src/script-exports/bridge-widget-script.tsx
- packages/thirdweb/tsup.config.ts
- packages/thirdweb/src/exports/react.ts
- packages/thirdweb/src/wallets/eip5792/send-calls.ts
- packages/thirdweb/tsconfig.build.tsup.json
- packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx
- packages/thirdweb/package.json
- packages/thirdweb/src/wallets/smart/smart-wallet-modular.test.ts
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/script-exports/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/script-exports/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/script-exports/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
🧠 Learnings (9)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/script-exports/readme.md:6-7
Timestamp: 2025-09-24T11:09:45.142Z
Learning: For thirdweb Bridge Widget script exports, the module is exported with globalName: "BridgeWidget" in tsup config, making the global API `BridgeWidget.render()` rather than `window.thirdweb.BridgeWidget.render()`.
📚 Learning: 2025-09-24T11:08:43.783Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/script-exports/readme.md
📚 Learning: 2025-09-24T11:09:45.142Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/script-exports/readme.md:6-7
Timestamp: 2025-09-24T11:09:45.142Z
Learning: For thirdweb Bridge Widget script exports, the module is exported with globalName: "BridgeWidget" in tsup config, making the global API `BridgeWidget.render()` rather than `window.thirdweb.BridgeWidget.render()`.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/script-exports/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/script-exports/readme.md
📚 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 src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
packages/thirdweb/src/script-exports/bridge-widget.tsx
📚 Learning: 2025-09-23T19:56:43.668Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485
Timestamp: 2025-09-23T19:56:43.668Z
Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.
Applied to files:
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.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 packages/thirdweb/src/exports/** : Every public symbol must have comprehensive TSDoc with at least one `example` block that compiles and custom annotation tags (`beta`, `internal`, `experimental`)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.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 packages/thirdweb/**/*.{ts,tsx} : Every public symbol must have comprehensive TSDoc with at least one compiling `example` and a custom tag (`beta`, `internal`, `experimental`, etc.)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
📚 Learning: 2025-08-28T12:24:37.171Z
Learnt from: MananTank
PR: thirdweb-dev/js#7933
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-sale.tsx:0-0
Timestamp: 2025-08-28T12:24:37.171Z
Learning: In the token creation flow, the tokenAddress field in erc20Asset_poolMode is always initialized with nativeTokenAddress and is never undefined, so conditional checks for undefined tokenAddress are not needed.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
📚 Learning: 2025-05-27T19:55:25.056Z
Learnt from: MananTank
PR: thirdweb-dev/js#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:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
🧬 Code graph analysis (3)
packages/thirdweb/src/script-exports/bridge-widget.tsx (1)
packages/thirdweb/src/script-exports/bridge-widget-script.tsx (2)
BridgeWidgetScriptProps(18-60)BridgeWidgetScript(62-72)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
packages/thirdweb/src/react/web/ui/ConnectWallet/constants.ts (2)
modalMaxWidthCompact(8-8)modalMaxWidthWide(11-11)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (7)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapPreparedQuote(154-157)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2)
BuyOrOnrampPrepareResult(36-39)BuyWidget(333-496)packages/thirdweb/src/pay/types.ts (1)
PurchaseData(1-1)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-486)packages/thirdweb/src/react/core/design-system/index.ts (3)
radius(188-196)fontSize(164-172)spacing(174-186)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
🪛 Gitleaks (8.28.0)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
[high] 62-62: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
packages/thirdweb/src/script-exports/readme.md
[high] 62-62: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 markdownlint-cli2 (0.18.1)
packages/thirdweb/src/script-exports/readme.md
13-13: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
⏰ 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). (6)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (1)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
482-484: LGTM on 100vw usage for embedWidth: 100vw is consistent with the intended bridge embed behavior.
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
Show resolved
Hide resolved
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (4)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
482-484: Patch coverage: add a small visual test/story to exercise width behaviorCodecov flags these lines as uncovered. Consider a Storybook story that renders ConnectEmbed inside:
- a narrow container (< modalMaxWidthCompact),
- a wide container,
- and an iframe-like constrained box,
to lock in the 100vw-with-maxWidth behavior and catch regressions.packages/thirdweb/src/wallets/smart/smart-wallet-modular.test.ts (1)
111-131: Gate the batch transaction test instead of unconditionally skipping
Replaceit.skipwithit.runIf(process.env.TW_RUN_BATCH_TESTS === "true")("should send a batch transaction", …)and add a TODO linking the tracking issue to re-enable it.packages/thirdweb/src/script-exports/readme.md (1)
3-3: Tighten phrasingMinor grammar improvement.
-Add the script in document head and the element where you want to render the bridge widget in your page +Add the script to the document head and an element where you want to render the Bridge Widget on your pagepackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx (1)
5-19: Set component in meta for better Storybook controls/autodocsAdding component enables controls/docs panels in modern Storybook.
const meta: Meta<typeof BridgeWidgetScript> = { title: "Bridge/BridgeWidgetScript", + component: BridgeWidgetScript, parameters: { layout: "centered", },
📜 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 ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (14)
.changeset/metal-bats-speak.md(1 hunks)packages/thirdweb/package.json(3 hunks)packages/thirdweb/src/exports/react.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx(1 hunks)packages/thirdweb/src/script-exports/bridge-widget-script.tsx(1 hunks)packages/thirdweb/src/script-exports/bridge-widget.tsx(1 hunks)packages/thirdweb/src/script-exports/readme.md(1 hunks)packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx(1 hunks)packages/thirdweb/src/wallets/eip5792/send-calls.ts(1 hunks)packages/thirdweb/src/wallets/smart/smart-wallet-modular.test.ts(1 hunks)packages/thirdweb/tsconfig.build.tsup.json(1 hunks)packages/thirdweb/tsup.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/thirdweb/src/wallets/eip5792/send-calls.ts
🚧 Files skipped from review as they are similar to previous changes (5)
- packages/thirdweb/tsup.config.ts
- packages/thirdweb/src/script-exports/bridge-widget-script.tsx
- packages/thirdweb/src/script-exports/bridge-widget.tsx
- packages/thirdweb/tsconfig.build.tsup.json
- packages/thirdweb/package.json
🧰 Additional context used
📓 Path-based instructions (8)
**/*.{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:
packages/thirdweb/src/exports/react.tspackages/thirdweb/src/wallets/smart/smart-wallet-modular.test.tspackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
packages/thirdweb/src/exports/**
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/exports/**: Export everything viaexports/directory, grouped by feature in the SDK public API
Every public symbol must have comprehensive TSDoc with at least one@exampleblock that compiles and custom annotation tags (@beta,@internal,@experimental)
Files:
packages/thirdweb/src/exports/react.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/exports/react.tspackages/thirdweb/src/wallets/smart/smart-wallet-modular.test.tspackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/exports/react.tspackages/thirdweb/src/wallets/smart/smart-wallet-modular.test.tspackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
.changeset/*.md
📄 CodeRabbit inference engine (AGENTS.md)
.changeset/*.md: Each change inpackages/*must include a changeset for the appropriate package
Version bump rules: patch for non‑API changes; minor for new/modified public API
Files:
.changeset/metal-bats-speak.md
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.test.{ts,tsx}: Place tests alongside code:foo.ts↔foo.test.ts
Use real function invocations with stub data in tests; avoid brittle mocks
Use Mock Service Worker (MSW) for fetch/HTTP call interception in tests
Keep tests deterministic and side-effect free
UseFORKED_ETHEREUM_CHAINfor mainnet interactions andANVIL_CHAINfor isolated tests
**/*.test.{ts,tsx}: Co‑locate tests asfoo.test.ts(x)next to the implementation
Use real function invocations with stub data; avoid brittle mocks
Use MSW to intercept HTTP calls for network interactions; mock only hard‑to‑reproduce scenarios
Keep tests deterministic and side‑effect free; use Vitest
Files:
packages/thirdweb/src/wallets/smart/smart-wallet-modular.test.ts
packages/thirdweb/src/wallets/**
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/wallets/**: UnifiedWalletandAccountinterfaces in wallet architecture
Support for in-app wallets (social/email login)
Smart wallets with account abstraction
EIP-1193, EIP-5792, EIP-7702 standard support in wallet modules
Files:
packages/thirdweb/src/wallets/smart/smart-wallet-modular.test.ts
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
For new UI components, add Storybook stories (
*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx
🧠 Learnings (15)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/script-exports/readme.md:6-7
Timestamp: 2025-09-24T11:09:45.142Z
Learning: For thirdweb Bridge Widget script exports, the module is exported with globalName: "BridgeWidget" in tsup config, making the global API `BridgeWidget.render()` rather than `window.thirdweb.BridgeWidget.render()`.
📚 Learning: 2025-09-24T11:09:45.142Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/script-exports/readme.md:6-7
Timestamp: 2025-09-24T11:09:45.142Z
Learning: For thirdweb Bridge Widget script exports, the module is exported with globalName: "BridgeWidget" in tsup config, making the global API `BridgeWidget.render()` rather than `window.thirdweb.BridgeWidget.render()`.
Applied to files:
packages/thirdweb/src/exports/react.ts.changeset/metal-bats-speak.mdpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsxpackages/thirdweb/src/script-exports/readme.md
📚 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 src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
packages/thirdweb/src/exports/react.ts
📚 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 packages/thirdweb/exports/** : Export all public API via `packages/thirdweb/exports/`, grouped by feature
Applied to files:
packages/thirdweb/src/exports/react.ts
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
PR: thirdweb-dev/js#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:
packages/thirdweb/src/exports/react.ts
📚 Learning: 2025-09-24T11:08:43.783Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.
Applied to files:
packages/thirdweb/src/exports/react.tspackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/script-exports/readme.md
📚 Learning: 2025-09-23T19:56:43.668Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485
Timestamp: 2025-09-23T19:56:43.668Z
Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.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 packages/thirdweb/src/exports/** : Every public symbol must have comprehensive TSDoc with at least one `example` block that compiles and custom annotation tags (`beta`, `internal`, `experimental`)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.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 packages/thirdweb/**/*.{ts,tsx} : Every public symbol must have comprehensive TSDoc with at least one compiling `example` and a custom tag (`beta`, `internal`, `experimental`, etc.)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
📚 Learning: 2025-08-28T12:24:37.171Z
Learnt from: MananTank
PR: thirdweb-dev/js#7933
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-sale.tsx:0-0
Timestamp: 2025-08-28T12:24:37.171Z
Learning: In the token creation flow, the tokenAddress field in erc20Asset_poolMode is always initialized with nativeTokenAddress and is never undefined, so conditional checks for undefined tokenAddress are not needed.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
📚 Learning: 2025-05-27T19:55:25.056Z
Learnt from: MananTank
PR: thirdweb-dev/js#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:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.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 packages/thirdweb/**/*.{ts,tsx} : Comment only ambiguous logic; avoid restating TypeScript in prose
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.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}/**/*.stories.tsx : Add Storybook stories (`*.stories.tsx`) alongside new UI components
Applied to files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.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 **/*.stories.tsx : For new UI components, add Storybook stories (`*.stories.tsx`) alongside the code
Applied to files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.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/*.{stories,test}.{tsx,ts} : Provide a Storybook story (`MyComponent.stories.tsx`) or unit test alongside the component.
Applied to files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx
🧬 Code graph analysis (3)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (7)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapPreparedQuote(154-157)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2)
BuyOrOnrampPrepareResult(36-39)BuyWidget(333-496)packages/thirdweb/src/pay/types.ts (1)
PurchaseData(1-1)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-486)packages/thirdweb/src/react/core/design-system/index.ts (3)
radius(188-196)fontSize(164-172)spacing(174-186)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx (2)
packages/thirdweb/src/script-exports/bridge-widget-script.tsx (1)
BridgeWidgetScript(62-72)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(15-17)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
packages/thirdweb/src/react/web/ui/ConnectWallet/constants.ts (2)
modalMaxWidthCompact(8-8)modalMaxWidthWide(11-11)
🪛 Gitleaks (8.28.0)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
[high] 111-111: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 223-223: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 234-234: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
packages/thirdweb/src/script-exports/readme.md
[high] 62-62: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 GitHub Check: codecov/patch
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
[warning] 482-484: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx#L482-L484
Added lines #L482 - L484 were not covered by tests
🪛 markdownlint-cli2 (0.18.1)
packages/thirdweb/src/script-exports/readme.md
13-13: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (8)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
482-484: LGTM: 100vw is intentional; keep as-is with maxWidth guardAcknowledging prior decision that 100vw is by design for embed contexts. The maxWidth constraint retains the compact/wide caps.
- Please sanity-check on:
- iOS Safari (dynamic toolbars) and Windows (non-overlay scrollbars) to ensure no horizontal scrollbars when the page has a vertical scrollbar.
- Nested/narrow parent containers and small iframes.
If any overflow shows up in those cases, we can explore a non-breaking tweak (e.g., width: min(100vw, 100%)) without changing the current behavior in typical embed flows.
packages/thirdweb/src/script-exports/readme.md (2)
13-13: Fix heading levels (MD001)Use H2 under the H1 to satisfy markdownlint and keep structure consistent.
-### Basic Usage +## Basic Usage @@ -### Custom Theme +## Custom Theme @@ -### Customizing Swap UI +## Customizing Swap UIAlso applies to: 32-32, 52-52
6-6: Global name alignment looks correctThe docs correctly reference BridgeWidget.render(), matching tsup’s globalName: "BridgeWidget".
packages/thirdweb/src/exports/react.ts (1)
140-143: LGTM: Public export addedBridgeWidget and BridgeWidgetProps are correctly re-exported from react.ts.
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (3)
85-89: Swap onError signature is fine as-isAcknowledging the intentional difference: Swap onError requires a non-undefined quote.
23-26: Mark public props as @betaPublic symbols require a custom tag; add @beta to BridgeWidgetProps TSDoc.
/** * Props for the `BridgeWidget` component. + * @beta */ export type BridgeWidgetProps = {
187-241: Add @beta to component TSDocAlign with docs policy for public APIs.
/** * A combined widget for swapping or buying tokens with cross-chain support. @@ * @bridge + * @beta */ export function BridgeWidget(props: BridgeWidgetProps) {packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
36-39: Add required TSDoc for the newly exported public typePublic symbols under packages/thirdweb must include TSDoc with an example and a custom tag.
+/** + * Narrowed prepare result for Buy/Onramp flows. + * @beta + * @example + * function onSuccess(q: BuyOrOnrampPrepareResult) { + * // q.type is "buy" | "onramp" + * console.log(q.type); + * } + */ export type BuyOrOnrampPrepareResult = Extract< BridgePrepareResult, { type: "buy" | "onramp" } >;
| @@ -0,0 +1,7 @@ | |||
| --- | |||
| "thirdweb": patch | |||
There was a problem hiding this comment.
Bump should be minor (new public API)
This PR adds a new public export (BridgeWidget) and a new script bundle entry; per repo rules, that requires a minor bump.
-"thirdweb": patch
+"thirdweb": minor📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| "thirdweb": patch | |
| "thirdweb": minor |
🤖 Prompt for AI Agents
.changeset/metal-bats-speak.md around lines 2 to 2: the changeset currently
lists "thirdweb": patch but the PR adds a new public export and a new script
bundle entry which requires a minor bump per repo rules; update the changeset to
change the version bump for "thirdweb" from patch to minor (e.g., "thirdweb":
minor) so the release tooling will produce a minor version.
|
|
||
| ```html | ||
| <!-- add the bridge-widget script in the head of the document, it adds the `BridgeWidget` global variable to the window object --> | ||
| <script src="https://unpkg.com/thirdweb/scripts/bridge-widget.js"></script> |
There was a problem hiding this comment.
Fix CDN path (build outputs to dist/scripts) and pin a version
The published bundle is emitted under dist/scripts; using /scripts will 404. Also pin the version to avoid silent breaking changes.
-<script src="https://unpkg.com/thirdweb/scripts/bridge-widget.js"></script>
+<!-- Pin to a specific version and use the correct path -->
+<script src="https://unpkg.com/thirdweb@<version>/dist/scripts/bridge-widget.js" defer></script>Replace with an actual version (e.g., @5.29.0). Keeping defer is optional but recommended.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <script src="https://unpkg.com/thirdweb/scripts/bridge-widget.js"></script> | |
| <!-- Pin to a specific version and use the correct path --> | |
| <script src="https://unpkg.com/[email protected]/dist/scripts/bridge-widget.js" defer></script> |
🤖 Prompt for AI Agents
In packages/thirdweb/src/script-exports/readme.md around line 7, the CDN path in
the script tag is incorrect and unpinned: update the src to point to the built
output under dist/scripts (e.g.,
https://unpkg.com/thirdweb@<version>/dist/scripts/bridge-widget.js) and replace
<version> with a concrete released version (for example @5.29.0); optionally
keep the defer attribute to preserve loading behavior.
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 introduces a new `BridgeWidget` component, allowing users to render a widget for token buying and swapping. It also updates related files for better integration and testing, while modifying build configurations and dependencies.
### Detailed summary
- Added `BridgeWidget` component.
- Created a browser script in `dist/scripts/bridge-widget.js`.
- Updated `BuyOrOnrampPrepareResult` type in `BuyWidget.tsx`.
- Excluded test files in `tsconfig.build.tsup.json`.
- Modified `tsup` configuration for building the widget.
- Enhanced documentation for the `BridgeWidget`.
- Added various usage examples in the README.
- Updated `pnpm-lock.yaml` with new dependencies and versions.
> The following files were skipped due to too many changes: `pnpm-lock.yaml`
> ✨ 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**
- Introduced a Bridge Widget with Swap and Buy tabs, theming, branding toggle, currency presets, and callback support.
- Added an embeddable script API with a global render function to mount the Bridge Widget on any webpage and exposed it in React exports.
- **Style**
- Connect Wallet embed now uses full-width with max-width constraints for responsive display.
- **Documentation**
- Added usage guide and Storybook examples for the Bridge Widget script.
- **Build**
- Added browser-targeted bundle config to produce a self-contained Bridge Widget script.
- **Chores**
- Updated build scripts and dev dependencies.
- **Tests**
- Skipped a batch transaction test.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
mny-210
branch
from
5b4a189 to
1f7cda6
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (3)
packages/thirdweb/src/script-exports/readme.md (2)
3-3: Tighten intro copyMinor grammar improvement for clarity.
Apply this diff:
-Add the script in document head and the element where you want to render the bridge widget in your page +Add the script in the document head and add the element where you want to render the bridge widget on your page
5-11: Ensure load order (defer or DOM ready)Since you recommend adding the script in the head, either add defer (as above) or wrap the render call in DOMContentLoaded to avoid calling before the global is available.
Example:
<script> window.addEventListener("DOMContentLoaded", () => { const node = document.getElementById("bridge-widget"); BridgeWidget.render(node, { /* ... */ }); }); </script>packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (1)
242-318: Add explicit return typeAligns with TS guidelines for public functions.
Apply this diff:
-export function BridgeWidget(props: BridgeWidgetProps) { +export function BridgeWidget(props: BridgeWidgetProps): 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 ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (14)
.changeset/metal-bats-speak.md(1 hunks)packages/thirdweb/package.json(3 hunks)packages/thirdweb/src/exports/react.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx(1 hunks)packages/thirdweb/src/script-exports/bridge-widget-script.tsx(1 hunks)packages/thirdweb/src/script-exports/bridge-widget.tsx(1 hunks)packages/thirdweb/src/script-exports/readme.md(1 hunks)packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx(1 hunks)packages/thirdweb/src/wallets/eip5792/send-calls.ts(1 hunks)packages/thirdweb/src/wallets/smart/smart-wallet-modular.test.ts(1 hunks)packages/thirdweb/tsconfig.build.tsup.json(1 hunks)packages/thirdweb/tsup.config.ts(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- packages/thirdweb/tsconfig.build.tsup.json
🚧 Files skipped from review as they are similar to previous changes (6)
- packages/thirdweb/src/wallets/smart/smart-wallet-modular.test.ts
- packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
- packages/thirdweb/src/script-exports/bridge-widget.tsx
- packages/thirdweb/src/wallets/eip5792/send-calls.ts
- packages/thirdweb/package.json
- packages/thirdweb/tsup.config.ts
🧰 Additional context used
📓 Path-based instructions (6)
**/*.{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:
packages/thirdweb/src/exports/react.tspackages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
packages/thirdweb/src/exports/**
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/exports/**: Export everything viaexports/directory, grouped by feature in the SDK public API
Every public symbol must have comprehensive TSDoc with at least one@exampleblock that compiles and custom annotation tags (@beta,@internal,@experimental)
Files:
packages/thirdweb/src/exports/react.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/exports/react.tspackages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/exports/react.tspackages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
For new UI components, add Storybook stories (
*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx
.changeset/*.md
📄 CodeRabbit inference engine (AGENTS.md)
.changeset/*.md: Each change inpackages/*must include a changeset for the appropriate package
Version bump rules: patch for non‑API changes; minor for new/modified public API
Files:
.changeset/metal-bats-speak.md
🧠 Learnings (14)
📓 Common learnings
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/script-exports/readme.md:6-7
Timestamp: 2025-09-24T11:09:45.142Z
Learning: For thirdweb Bridge Widget script exports, the module is exported with globalName: "BridgeWidget" in tsup config, making the global API `BridgeWidget.render()` rather than `window.thirdweb.BridgeWidget.render()`.
📚 Learning: 2025-09-24T11:09:45.142Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/script-exports/readme.md:6-7
Timestamp: 2025-09-24T11:09:45.142Z
Learning: For thirdweb Bridge Widget script exports, the module is exported with globalName: "BridgeWidget" in tsup config, making the global API `BridgeWidget.render()` rather than `window.thirdweb.BridgeWidget.render()`.
Applied to files:
packages/thirdweb/src/exports/react.tspackages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx.changeset/metal-bats-speak.mdpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/script-exports/readme.md
📚 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 src/exports/react.native.ts : React Native specific exports are in `src/exports/react.native.ts`
Applied to files:
packages/thirdweb/src/exports/react.ts
📚 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 packages/thirdweb/exports/** : Export all public API via `packages/thirdweb/exports/`, grouped by feature
Applied to files:
packages/thirdweb/src/exports/react.ts
📚 Learning: 2025-06-17T18:30:52.976Z
Learnt from: MananTank
PR: thirdweb-dev/js#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:
packages/thirdweb/src/exports/react.ts
📚 Learning: 2025-09-24T11:08:43.783Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx:34-41
Timestamp: 2025-09-24T11:08:43.783Z
Learning: In BridgeWidgetProps for packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx, the Swap onError callback signature requires a non-undefined SwapPreparedQuote parameter (unlike Buy's onError which allows undefined quote). This is intentional - SwapWidget's onError is only called when a quote is available.
Applied to files:
packages/thirdweb/src/exports/react.tspackages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/script-exports/readme.md
📚 Learning: 2025-09-23T19:56:43.668Z
Learnt from: MananTank
PR: thirdweb-dev/js#8106
File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485
Timestamp: 2025-09-23T19:56:43.668Z
Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.
Applied to files:
packages/thirdweb/src/script-exports/bridge-widget-script.tsxpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.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}/**/*.stories.tsx : Add Storybook stories (`*.stories.tsx`) alongside new UI components
Applied to files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.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 **/*.stories.tsx : For new UI components, add Storybook stories (`*.stories.tsx`) alongside the code
Applied to files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.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/*.{stories,test}.{tsx,ts} : Provide a Storybook story (`MyComponent.stories.tsx`) or unit test alongside the component.
Applied to files:
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.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 packages/thirdweb/src/exports/** : Every public symbol must have comprehensive TSDoc with at least one `example` block that compiles and custom annotation tags (`beta`, `internal`, `experimental`)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.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 packages/thirdweb/**/*.{ts,tsx} : Every public symbol must have comprehensive TSDoc with at least one compiling `example` and a custom tag (`beta`, `internal`, `experimental`, etc.)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
📚 Learning: 2025-08-28T12:24:37.171Z
Learnt from: MananTank
PR: thirdweb-dev/js#7933
File: apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/tokens/create/token/distribution/token-sale.tsx:0-0
Timestamp: 2025-08-28T12:24:37.171Z
Learning: In the token creation flow, the tokenAddress field in erc20Asset_poolMode is always initialized with nativeTokenAddress and is never undefined, so conditional checks for undefined tokenAddress are not needed.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
📚 Learning: 2025-05-27T19:55:25.056Z
Learnt from: MananTank
PR: thirdweb-dev/js#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:
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
🧬 Code graph analysis (4)
packages/thirdweb/src/script-exports/bridge-widget-script.tsx (6)
packages/thirdweb/src/exports/react.ts (5)
ThemeOverrides(7-7)Theme(6-6)darkTheme(9-9)lightTheme(9-9)BridgeWidget(141-141)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapPreparedQuote(154-157)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
BuyOrOnrampPrepareResult(36-39)packages/thirdweb/src/pay/types.ts (1)
PurchaseData(1-1)packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (1)
BridgeWidget(242-318)
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx (2)
packages/thirdweb/src/script-exports/bridge-widget-script.tsx (1)
BridgeWidgetScript(62-72)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(15-17)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (7)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/types.ts (1)
SwapPreparedQuote(154-157)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2)
BuyOrOnrampPrepareResult(36-39)BuyWidget(333-496)packages/thirdweb/src/pay/types.ts (1)
PurchaseData(1-1)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-486)packages/thirdweb/src/react/core/design-system/index.ts (3)
radius(188-196)fontSize(164-172)spacing(174-186)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
packages/thirdweb/src/react/web/ui/ConnectWallet/constants.ts (2)
modalMaxWidthCompact(8-8)modalMaxWidthWide(11-11)
🪛 Gitleaks (8.28.0)
packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
[high] 111-111: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 223-223: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 234-234: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
packages/thirdweb/src/script-exports/readme.md
[high] 62-62: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🪛 GitHub Check: codecov/patch
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx
[warning] 482-484: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx#L482-L484
Added lines #L482 - L484 were not covered by tests
🪛 markdownlint-cli2 (0.18.1)
packages/thirdweb/src/script-exports/readme.md
13-13: Heading levels should only increment by one level at a time
Expected: h2; Actual: h3
(MD001, heading-increment)
⏰ 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). (6)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (9)
packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (2)
482-484: LGTM: intentional 100vw + maxWidthAcknowledged the design choice for embeds. The change preserves compact/wide constraints via maxWidth; with border-box set, no border-induced overflow.
482-484: Add lightweight coverage for the style change (codecov/patch)Please add a small RTL/JSDOM test that renders EmbedContainer (or ConnectEmbed) and asserts width: 100vw and the maxWidth per modalSize to satisfy patch coverage.
packages/thirdweb/src/script-exports/readme.md (3)
13-13: Fix heading levels (MD001)Use H2 under the H1.
Apply this diff:
-### Basic Usage +## Basic Usage @@ -### Custom Theme +## Custom Theme @@ -### Customizing Swap UI +## Customizing Swap UIAlso applies to: 32-32, 52-52
7-7: Fix CDN path (dist/scripts) and pin a versionThe built bundle lives under dist/scripts and should be version‑pinned to avoid breakage.
Apply this diff:
-<script src="https://unpkg.com/thirdweb/scripts/bridge-widget.js"></script> +<!-- Pin to a specific version and use the correct path --> +<script src="https://unpkg.com/thirdweb@<version>/dist/scripts/bridge-widget.js" defer></script>
6-7: Include React and ReactDOM UMD CDN scripts
In packages/thirdweb/src/script-exports/readme.md (lines 6–7), add before the BridgeWidget tag:<script src="https://unpkg.com/react@19/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@19/umd/react-dom.production.min.js"></script>BridgeWidget is built as an IIFE with React as a peer-dependency (externalized by tsup), so the page must load React and ReactDOM first.
⛔ Skipped due to learnings
Learnt from: MananTank PR: thirdweb-dev/js#8106 File: packages/thirdweb/src/script-exports/readme.md:6-7 Timestamp: 2025-09-24T11:09:45.142Z Learning: For thirdweb Bridge Widget script exports, the module is exported with globalName: "BridgeWidget" in tsup config, making the global API `BridgeWidget.render()` rather than `window.thirdweb.BridgeWidget.render()`.Learnt from: MananTank PR: thirdweb-dev/js#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.Learnt from: MananTank PR: thirdweb-dev/js#8106 File: packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx:482-485 Timestamp: 2025-09-23T19:56:43.668Z Learning: In packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx, the EmbedContainer uses width: "100vw" intentionally rather than "100%" - this is by design for the bridge widget embedding use case.packages/thirdweb/src/exports/react.ts (1)
140-143: LGTM: Public export of BridgeWidgetExport surface looks correct and matches file layout.
.changeset/metal-bats-speak.md (1)
2-2: Version bump should be minor (new public API + script bundle)Adds a new public export and a new script entry; per repo rules this warrants a minor bump.
Apply this diff:
-"thirdweb": patch +"thirdweb": minorpackages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx (2)
23-25: Add @beta tag to public props TSDocRequired by repo docs policy for public APIs.
Apply this diff:
/** * Props for the `BridgeWidget` component. + * @beta */ export type BridgeWidgetProps = {
187-241: Add @beta tag to component TSDocMark the component as beta in generated docs.
Apply this diff:
/** * A combined widget for swapping or buying tokens with cross-chain support. @@ - * @bridge + * @bridge + * @beta */
| // Note: do not use SwapWidgetProps or BuyWidgetProps references here to keep the output for bridge-widget.d.ts as simple as possible | ||
| // Note: these props will be configured buy user in a <script> tag, so they need to be as simple as possible and can not rely on utils like `darkTheme`, `createThirdwebClient` etc.. | ||
| // For example, instead of having for a `Chain` prop, use `chainId` instead | ||
|
|
||
| export type BridgeWidgetScriptProps = { | ||
| clientId: string; | ||
| theme?: "light" | "dark" | ({ type: "light" | "dark" } & ThemeOverrides); | ||
| showThirdwebBranding?: boolean; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add TSDoc for public props (with @beta and example)
Public symbols in packages/thirdweb need TSDoc with an example and a custom tag.
Apply this diff:
-// Note: do not use SwapWidgetProps or BuyWidgetProps references here to keep the output for bridge-widget.d.ts as simple as possible
-// Note: these props will be configured buy user in a <script> tag, so they need to be as simple as possible and can not rely on utils like `darkTheme`, `createThirdwebClient` etc..
-// For example, instead of having for a `Chain` prop, use `chainId` instead
-
export type BridgeWidgetScriptProps = {
+ /**
+ * Props accepted by the script-embeddable Bridge Widget.
+ * Keep shapes simple for use in plain <script> embeds (e.g. use chainId instead of Chain).
+ * @beta
+ * @example
+ * ```html
+ * <div id="bridge-widget"></div>
+ * <script>
+ * const node = document.getElementById("bridge-widget");
+ * BridgeWidget.render(node, {
+ * clientId: "YOUR_CLIENT_ID",
+ * theme: "dark",
+ * buy: { chainId: 8453, amount: "0.1" },
+ * });
+ * </script>
+ * ```
+ */
clientId: string;| export function BridgeWidgetScript(props: BridgeWidgetScriptProps) { | ||
| const client = createThirdwebClient({ clientId: props.clientId }); | ||
| const themeObj: Theme | "light" | "dark" | undefined = | ||
| typeof props.theme === "object" | ||
| ? props.theme.type === "dark" | ||
| ? darkTheme(props.theme) | ||
| : lightTheme(props.theme) | ||
| : props.theme; | ||
|
|
||
| return <BridgeWidget {...props} theme={themeObj} client={client} />; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add TSDoc and explicit return type
Conform to guidelines: docs + explicit return type.
Apply this diff:
-export function BridgeWidgetScript(props: BridgeWidgetScriptProps) {
+/**
+ * Script-friendly wrapper that resolves client and theme, then renders BridgeWidget.
+ * @beta
+ */
+export function BridgeWidgetScript(props: BridgeWidgetScriptProps): JSX.Element {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export function BridgeWidgetScript(props: BridgeWidgetScriptProps) { | |
| const client = createThirdwebClient({ clientId: props.clientId }); | |
| const themeObj: Theme | "light" | "dark" | undefined = | |
| typeof props.theme === "object" | |
| ? props.theme.type === "dark" | |
| ? darkTheme(props.theme) | |
| : lightTheme(props.theme) | |
| : props.theme; | |
| return <BridgeWidget {...props} theme={themeObj} client={client} />; | |
| } | |
| /** | |
| * Script-friendly wrapper that resolves client and theme, then renders BridgeWidget. | |
| * @beta | |
| */ | |
| export function BridgeWidgetScript(props: BridgeWidgetScriptProps): JSX.Element { | |
| const client = createThirdwebClient({ clientId: props.clientId }); | |
| const themeObj: Theme | "light" | "dark" | undefined = | |
| typeof props.theme === "object" | |
| ? props.theme.type === "dark" | |
| ? darkTheme(props.theme) | |
| : lightTheme(props.theme) | |
| : props.theme; | |
| return <BridgeWidget {...props} theme={themeObj} client={client} />; | |
| } |
🤖 Prompt for AI Agents
In packages/thirdweb/src/script-exports/bridge-widget-script.tsx around lines 62
to 72, the exported BridgeWidgetScript function lacks TSDoc and an explicit
return type; add a TSDoc block above the function describing the purpose,
parameters (props) and return value, and update the function signature to
include an explicit return type (e.g., : JSX.Element). Ensure the TSDoc
references the BridgeWidgetScriptProps type and that the return type matches the
JSX element returned.
| import { BridgeWidgetScript } from "../../../script-exports/bridge-widget-script.js"; | ||
| import { storyClient } from "../../utils.js"; |
There was a problem hiding this comment.
Fix clientId usage in stories
BridgeWidgetScript expects a string clientId; storyClient may not expose a clientId property. Import and use clientId directly.
Apply this diff:
-import { storyClient } from "../../utils.js";
+import { clientId } from "../../utils.js";
@@
- <BridgeWidgetScript
- clientId={storyClient.clientId}
- buy={{ chainId: 8453, amount: "0.1" }}
- />
+ <BridgeWidgetScript clientId={clientId} buy={{ chainId: 8453, amount: "0.1" }} />
@@
- <BridgeWidgetScript
- clientId={storyClient.clientId}
- theme="light"
- buy={{ chainId: 8453, amount: "0.1" }}
- />
+ <BridgeWidgetScript clientId={clientId} theme="light" buy={{ chainId: 8453, amount: "0.1" }} />
@@
- <BridgeWidgetScript
- clientId={storyClient.clientId}
- currency="JPY"
- buy={{ chainId: 8453, amount: "0.1" }}
- />
+ <BridgeWidgetScript clientId={clientId} currency="JPY" buy={{ chainId: 8453, amount: "0.1" }} />
@@
- <BridgeWidgetScript
- clientId={storyClient.clientId}
- theme="light"
- buy={{ chainId: 8453, amount: "0.1" }}
- showThirdwebBranding={false}
- />
+ <BridgeWidgetScript clientId={clientId} theme="light" buy={{ chainId: 8453, amount: "0.1" }} showThirdwebBranding={false} />
@@
- <BridgeWidgetScript
- clientId={storyClient.clientId}
+ <BridgeWidgetScript
+ clientId={clientId}
buy={{ chainId: 8453, amount: "0.1" }}
theme={{
type: "light",
colors: {
modalBg: "#FFFFF0",
tertiaryBg: "#DBE4C9",
borderColor: "#8AA624",
secondaryText: "#3E3F29",
accentText: "#E43636",
},
}}
/>Also applies to: 25-27, 33-37, 43-47, 53-57, 65-77
🤖 Prompt for AI Agents
In
packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx
around lines 2-3 and also at 25-27, 33-37, 43-47, 53-57, 65-77, the stories pass
storyClient.clientId to BridgeWidgetScript but storyClient may not expose
clientId; import the clientId value directly (e.g., import { clientId } from the
appropriate module) and replace all uses of storyClient.clientId with clientId
so BridgeWidgetScript receives a string clientId as expected.
PR-Codex overview
This PR focuses on adding a new
BridgeWidgetcomponent to thethirdwebpackage, enabling users to render a bridge widget for token transactions. It includes updates to various files, enhancing functionality and usability.Detailed summary
BridgeWidgetcomponent for token transactions.dist/scripts/bridge-widget.js.BuyWidgettype definitions for better integration.ConnectEmbedstyles for responsive design.package.jsonto includetsupfor building.readme.mdfor theBridgeWidget.BridgeWidgetScriptcomponent.Summary by CodeRabbit
New Features
Style
Documentation
Build
Chores
Tests