SDK: Delete Bridge Orchestrator, Refactor Bridge widget components #8169
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughRemoves paymentMachine and BridgeOrchestrator; refactors bridge UIs into container/content multi-screen flows; replaces uiOptions with explicit props (currency, metadata, paymentInfo/transaction/destinationToken); adds useTokenQuery and bridge UI types; updates hooks, component prop signatures, Storybook stories, and tests. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor User
participant Widget as TransactionWidgetContent
participant Sel as PaymentSelection
participant Quote as QuoteLoader
participant Prev as PaymentDetails
participant Exec as StepRunner
participant Tx as TransactionPayment
participant Succ as SuccessScreen
Note over Widget: init-ui
User->>Widget: Open widget
Widget->>Sel: Render methodSelection
Sel-->>Widget: onPaymentMethodSelected(method)
Widget->>Quote: Render load-quote
Quote-->>Widget: onQuoteReceived(quote)
Widget->>Prev: Render preview
Prev-->>Widget: onConfirm()
alt buy flow
Widget->>Exec: execute-buy
Exec-->>Widget: onComplete(statuses)
Widget->>Succ: success
Succ-->>Widget: onDone()
else direct tx
Widget->>Tx: execute-tx
Tx-->>Widget: onExecuteTransaction()
Widget->>Succ: success
Succ-->>Widget: onDone()
end
Widget-->>User: Close/Callback
sequenceDiagram
autonumber
actor User
participant Modal as TransactionModal
participant Dep as DepositAndExecuteTx
participant Wrap as TransactionWidgetContentWrapper
alt requires deposit
User->>Modal: Open (transaction)
Modal->>Dep: Show deposit flow
Dep-->>Modal: deposit complete → execute
Modal->>Dep: Render ExecutingTxScreen
Dep-->>Modal: tx result
else no deposit
User->>Modal: Open (transaction)
Modal->>Wrap: Delegate to multi-step flow
Wrap-->>Modal: onTxSent(data)
end
Modal-->>User: onTxSent/onClose
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (1 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
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. |
MananTank
changed the title
![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 (8)
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
30-40: Include token & chain in the query key.
useQuerycaches byqueryKey. With a constant key, switching to a different token (or chain) without unmounting keeps using the cached observer, so this analytics event never re-runs and the new token isn’t tracked. Add the dynamic props to the key so React Query treats each combination separately. (tanstack.dev)useQuery({ queryFn: () => { trackPayEvent({ chainId: chain.id, client, event: "ub:ui:unsupported_token", fromToken: tokenAddress, }); }, - queryKey: ["unsupported_token"], + queryKey: ["unsupported_token", chain.id, tokenAddress], });packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx (1)
135-138: PassonCompletethrough the deposit flowThe execute-after-deposit path equally skips
onComplete. Wrap the callback you hand toExecutingTxScreenso the modal reports completion consistently.<ExecutingTxScreen closeModal={props.onClose} - onTxSent={props.onTxSent} + onTxSent={(data) => { + props.onTxSent(data); + props.onComplete(); + }} tx={props.tx} windowAdapter={webWindowAdapter} />packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
18-49: Type/default parameter mismatch.The type declares
hasPaymentId: boolean(required), but line 59 provides a default valuehasPaymentId = false. This creates an inconsistency: the type says the prop is required, but the implementation allows it to be omitted.Apply this diff to make the type match the implementation:
/** * Whether or not this payment is associated with a payment ID. If it does, we show a different message. */ - hasPaymentId: boolean; + hasPaymentId?: boolean; };packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
40-80: Restore optional prop signatures
sender,onBack,purchaseData,paymentLinkId, and the newfeePayerprop are declared asprop: T | undefined. That makes each prop required (consumers must now passundefinedexplicitly) even though they were previously optional. This is a breaking API change for anyone usingQuoteLoaderinternally or externally. Please switch these back to optional properties (prop?: T) so existing call sites continue to compile.- sender: string | undefined; + sender?: string; … - onBack: (() => void) | undefined; + onBack?: () => void; … - purchaseData: PurchaseData | undefined; + purchaseData?: PurchaseData; … - paymentLinkId: string | undefined; + paymentLinkId?: string; … - feePayer: "sender" | "receiver" | undefined; + feePayer?: "sender" | "receiver";packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
30-73: Keep optional StepRunner props optional
title,wallet,onCancel, andonBacknow useprop: T | undefined, which forces callers to provide these props explicitly (even when intentionally omitted). They used to be optional, so this silently breaks every existing usage site. Please revert them to optional properties (prop?: T) to preserve the component’s public API.-type StepRunnerProps = { - title: string | undefined; +type StepRunnerProps = { + title?: string; … - wallet: Wallet | undefined; + wallet?: Wallet; … - onCancel: (() => void) | undefined; + onCancel?: () => void; … - onBack: (() => void) | undefined; + onBack?: () => void;packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
150-161: Don't hardcode USD on quick-buy buttonsNow that we expose
currency, the quick amount experience must display the selected fiat. The handler still assumes USD (usdAmountparam) and the buttons render$${amount}, so ifcurrency === "EUR"the UI shows the wrong symbol and conversion text. Please base both the label and conversion math on the active currency (e.g. useformatCurrencyAmount(currency, fiatAmount)and fall back to USD only when no price exists), otherwise non-USD flows are misleading.Apply this diff to fix the issue:
- const handleQuickAmount = (usdAmount: number) => { - const price = destinationToken.prices[currency || "USD"] || 0; + const handleQuickAmount = (fiatAmount: number) => { + const price = + destinationToken.prices[currency] ?? + destinationToken.prices["USD"] ?? + 0; if (price === 0) { return; } // Convert USD amount to token amount using token price - const tokenAmount = usdAmount / price; + const tokenAmount = fiatAmount / price; @@ - {presetOptions?.map((amount) => ( + {presetOptions?.map((fiatAmount) => ( <Button - key={amount} - onClick={() => handleQuickAmount(Number(amount))} + key={fiatAmount} + onClick={() => handleQuickAmount(fiatAmount)} @@ - > - ${amount} + > + {formatCurrencyAmount(currency, fiatAmount)} </Button> ))}Also applies to: 285-299
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
164-168: Honor explicitincludeDestinationToken=false.Swapping to
||makes an explicitincludeDestinationTokenoffalsebehave as though it weretruewhenever the receiver differs from the payer. That regresses the opt-out behavior; respect consumer intent by falling back only when the prop isundefined.- includeDestinationToken: - includeDestinationToken || - receiverAddress?.toLowerCase() !== - payerWallet?.getAccount()?.address?.toLowerCase(), + includeDestinationToken: + includeDestinationToken ?? + receiverAddress?.toLowerCase() !== + payerWallet?.getAccount()?.address?.toLowerCase(),packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
369-400: Handle locale fetch failures instead of hanging the UI.When
useConnectLocalerejects,localQuery.datastaysundefinedwhileisPendingisfalse, so the currentif (tokenQuery.isPending || !localQuery.data)branch renders the loading spinner forever. Users never see an error or a retry path. Please add an error branch (similar to the token query handling) so locale fetch failures surface a message and recovery option.
🧹 Nitpick comments (1)
packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts (1)
14-15: Resolve the unusedincludeDestinationTokenflagThe flag still never influences the fetch logic; only the cache key sees it. Either wire it into the query or drop the option so consumers aren't misled.
📜 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 (35)
packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts(2 hunks)packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts(1 hunks)packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx(0 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(4 hunks)packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx(9 hunks)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx(9 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx(7 hunks)packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx(11 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx(4 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/types.ts(1 hunks)packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx(5 hunks)packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx(0 hunks)packages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/fixtures.ts(9 hunks)packages/thirdweb/src/stories/utils.tsx(1 hunks)
💤 Files with no reviewable changes (2)
- packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx
- packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
packages/thirdweb/src/react/web/ui/Bridge/common/token-query.tspackages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.tspackages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/react/core/hooks/usePaymentMethods.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsxpackages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/types.tspackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/stories/Bridge/FundWallet.stories.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/stories/utils.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.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/common/token-query.tspackages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.tspackages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/react/core/hooks/usePaymentMethods.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsxpackages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/types.tspackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/stories/Bridge/FundWallet.stories.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/stories/utils.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.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/common/token-query.tspackages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.tspackages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/react/core/hooks/usePaymentMethods.tspackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsxpackages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/types.tspackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/stories/Bridge/FundWallet.stories.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/stories/utils.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.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/CheckoutWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/FundWallet.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx
**/types.ts
📄 CodeRabbit inference engine (AGENTS.md)
Provide and re‑use local type barrels in a
types.tsfile
Files:
packages/thirdweb/src/react/web/ui/Bridge/types.ts
🧠 Learnings (5)
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Client-side data fetching: wrap calls in React Query with descriptive, stable `queryKeys` and set sensible `staleTime/cacheTime` (≥ 60s default); keep tokens secret via internal routes or server actions
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/common/token-query.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/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.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 apps/{dashboard,playground}/**/*.stories.tsx : Add Storybook stories (`*.stories.tsx`) alongside new UI components
Applied to files:
packages/thirdweb/src/stories/Bridge/CheckoutWidget.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/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
🧬 Code graph analysis (29)
packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
packages/thirdweb/src/pay/convert/get-token.ts (1)
getToken(6-37)
packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts (1)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx (6)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/bridge/types/Token.ts (1)
Token(3-12)packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
ModeInfo(11-22)packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx (1)
TokenBalanceRow(14-98)packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts (1)
useTransactionDetails(55-187)
packages/thirdweb/src/stories/Bridge/fixtures.ts (3)
packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
DirectPaymentInfo(4-9)packages/thirdweb/src/exports/thirdweb.ts (1)
PreparedTransaction(179-179)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (2)
packages/thirdweb/src/exports/react.ts (1)
SwapWidgetProps(150-150)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (4)
packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
DirectPaymentInfo(4-9)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx (1)
FiatValue(15-55)packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (1)
WithHeader(9-73)
packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (3)
packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(25-25)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsx (3)
packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
DIRECT_PAYMENT_UI_OPTIONS(771-864)packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (2)
CheckoutWidgetProps(45-211)CheckoutWidget(315-352)
packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
packages/thirdweb/src/exports/thirdweb.ts (1)
PreparedTransaction(179-179)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (3)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
ModeInfo(11-22)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
ModalHeader(36-68)
packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx (3)
packages/thirdweb/src/stories/Bridge/fixtures.ts (2)
FUND_WALLET_UI_OPTIONS(714-768)RECEIVER_ADDRESSES(642-648)packages/thirdweb/src/stories/utils.tsx (1)
ModalThemeWrapper(18-36)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
FundWallet(96-384)
packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx (4)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
TransactionWidgetContentWrapper(337-427)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx (1)
DepositScreen(77-281)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (4)
packages/thirdweb/src/react/web/ui/PayEmbed.tsx (1)
PayEmbedConnectOptions(431-541)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx (1)
TokenAndChain(22-99)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (14)
packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (1)
DirectPayment(48-205)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(108-333)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)
packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx (3)
packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
USDC(38-49)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(108-333)
packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx (3)
packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
TRANSACTION_UI_OPTIONS(867-907)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
TransactionPayment(80-445)
packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx (3)
packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/exports/thirdweb.ts (2)
defineChain(18-18)NATIVE_TOKEN_ADDRESS(31-31)packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
UnsupportedTokenScreen(25-101)
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (6)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/core/hooks/others/useChainQuery.ts (1)
useChainMetadata(165-175)packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts (1)
useTransactionDetails(55-187)packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (1)
WithHeader(9-73)packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx (1)
ChainIcon(159-186)packages/thirdweb/src/react/web/ui/components/ChainName.tsx (1)
ChainName(11-30)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (2)
packages/thirdweb/src/react/web/ui/PayEmbed.tsx (1)
PayEmbedConnectOptions(431-541)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx (3)
packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
DIRECT_PAYMENT_UI_OPTIONS(771-864)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (1)
DirectPayment(48-205)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (16)
packages/thirdweb/src/transaction/actions/wait-for-tx-receipt.ts (1)
WaitForReceiptOptions(14-20)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
TransactionPayment(80-445)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(108-333)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx (1)
ExecutingTxScreen(19-183)
packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx (2)
packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
packages/thirdweb/src/bridge/types/Chain.ts (1)
Chain(5-40)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (16)
packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
FundWallet(96-384)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(108-333)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx (1)
DynamicHeight(8-33)
packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx (5)
packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/stories/Bridge/fixtures.ts (2)
STORY_MOCK_WALLET(90-90)simpleBuyQuote(251-311)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)
packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx (4)
packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/stories/Bridge/fixtures.ts (2)
simpleOnrampQuote(93-123)simpleBuyQuote(251-311)
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareRequest(14-18)BridgePrepareResult(23-27)
packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (3)
packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/stories/Bridge/fixtures.ts (3)
simpleOnrampQuote(93-123)DIRECT_PAYMENT_UI_OPTIONS(771-864)TRANSACTION_UI_OPTIONS(867-907)
packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
packages/thirdweb/src/pay/types.ts (1)
PurchaseData(1-1)
⏰ 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: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (11)
packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts (1)
98-103: Currency option addition looks goodNice to see the fiat currency choice formalized with
SupportedFiatCurrency; this keeps the modal typing aligned with the rest of the bridge flow.packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
684-907: Nice explicit fixture typingDefining focused UI option shapes (
FundWalletUIOptions, etc.) makes the stories much easier to reason about—thanks for tightening that up.packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (2)
136-143: LGTM!The conditional message rendering based on
showContinueWithTxis clear and correct.
158-162: LGTM!Button label logic correctly reflects the
showContinueWithTxflow.packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx (1)
139-141: LGTM!The
currencyprop addition follows the same optional pattern ascountryand aligns with the broader currency handling refactor across bridge components.packages/thirdweb/src/stories/utils.tsx (1)
18-36: LGTM!The refactor to render both dark and light themes simultaneously is a good improvement for Storybook visualization. The removal of the
themeprop simplifies the API and the implementation is clean.packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (2)
9-21: LGTM!The refactor from nested
uiOptions.metadatato explicittitle,description, andimageprops makes the component's dependencies clearer and more maintainable.
23-73: LGTM!The rendering logic correctly uses the new explicit props with appropriate null checks and conditional rendering.
packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx (1)
7-21: Decorator-based theming keeps both palettes alignedSwitching to the shared
ModalThemeWrapperdecorator neatly exercises the screen in both dark and light modes without per-story prop plumbing. Looks great.packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx (1)
13-45: Great fixture wiring for autonomous StepRunner previewBundling the mock wallet, prepared quote, and auto-start flag lets the story showcase the full execution flow without network travel. Nice job tightening the public surface.
packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx (1)
7-50: Unified arg presets simplify the TransactionPayment variantsReusing the
TRANSACTION_UI_OPTIONSpresets while applying the global modal theme decorator keeps every variant consistent and eliminates duplicate wiring. Nicely streamlined.
packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
Show resolved
Hide resolved
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
31-94: Add TSDoc to public type.Per coding guidelines, every public symbol in
packages/thirdweb/**must have comprehensive TSDoc with at least one@exampleand a custom tag.Apply this diff to add TSDoc:
+/** + * Props for the FundWallet component. + * @example + * ```tsx + * <FundWallet + * client={client} + * destinationToken={ethToken} + * currency="USD" + * metadata={{ title: "Fund Wallet", description: "Add ETH", image: undefined }} + * onContinue={(amount, token, receiver) => console.log(amount)} + * presetOptions={[5, 10, 20]} + * connectOptions={undefined} + * showThirdwebBranding={true} + * receiverAddress={undefined} + * initialAmount={undefined} + * buttonLabel={undefined} + * /> + * ``` + * @internal + */ type FundWalletProps = {As per coding guidelines.
♻️ Duplicate comments (2)
packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (2)
164-174: Same concern: verify modeInfo and spread operator usage.Similar to the previous story, ensure that the
modeInfo.transactionfield and the spread ofTRANSACTION_UI_OPTIONS.erc20Transferdon't conflict or cause duplication.
176-186: Same concern: verify modeInfo and spread operator usage.Similar to the previous transaction stories, ensure that the
modeInfo.transactionfield and the spread ofTRANSACTION_UI_OPTIONS.contractInteractiondon't conflict or cause duplication.
🧹 Nitpick comments (6)
packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx (1)
6-22: Consider using Storybook actions for better interactivity.The meta configuration is well-structured with proper typing and decorator-based theming. Consider enhancing the
onContinuecallback to use Storybook's action logger for better story interactivity:+import { action } from "@storybook/addon-actions"; + const meta: Meta<typeof DirectPayment> = { args: { client: storyClient, - onContinue: (_amount, _token, _receiverAddress) => {}, + onContinue: action("onContinue"), currency: "USD", ...DIRECT_PAYMENT_UI_OPTIONS.digitalArt, },This would allow reviewers and developers to see the callback arguments in the Storybook Actions panel when testing stories.
packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx (1)
10-17: Use Storybook actions for interactive callbacks.The callback handlers use
alert()and empty functions, which limits the ability to observe interactions in Storybook's Actions panel. Replace them with Storybook actions for better debugging and demonstration.Apply this diff:
+import { action } from "@storybook/addon-actions"; + const meta: Meta<typeof PaymentSelection> = { args: { client: storyClient, - onBack: () => { - alert("Back"); - }, + onBack: action("onBack"), connectLocale: en, destinationAmount: "1", destinationToken: USDC, - onError: (error) => console.error("Error:", error), - onPaymentMethodSelected: () => {}, + onError: action("onError"), + onPaymentMethodSelected: action("onPaymentMethodSelected"), country: "US",packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx (2)
11-12: Verify spread order doesn't override currency.The explicit
currency: "USD"is set before spreading...TRANSACTION_UI_OPTIONS.ethTransfer. If the fixture object includes a currency field, it will override the explicit value. Consider reordering:args: { client: storyClient, onExecuteTransaction: () => {}, onContinue: (_amount, _token, _receiverAddress) => {}, - currency: "USD", ...TRANSACTION_UI_OPTIONS.ethTransfer, + currency: "USD", },This ensures your explicit currency always takes precedence.
28-32: Consider removing redundant spread.The
EthereumTransferstory spreadsTRANSACTION_UI_OPTIONS.ethTransfer, which is already spread in the base meta args (line 12). This is redundant but harmless.export const EthereumTransfer: Story = { - args: { - ...TRANSACTION_UI_OPTIONS.ethTransfer, - }, + args: {}, };Alternatively, remove it from the base meta args if you want each story to be explicit about its transaction type.
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (2)
150-162: Simplify currency fallback and verify price availability.The pattern
currency || "USD"appears multiple times (lines 151, 268, 270). Ifcurrencyis typed asSupportedFiatCurrency(required prop on line 79), the fallback is unnecessary and could mask issues if the price for the specified currency is missing.Consider checking price availability explicitly:
const handleQuickAmount = (usdAmount: number) => { - const price = destinationToken.prices[currency || "USD"] || 0; + const price = destinationToken.prices[currency] || 0; if (price === 0) { + console.warn(`Price not available for currency: ${currency}`); return; } const tokenAmount = usdAmount / price; const formattedAmount = numberToPlainString( Number.parseFloat(tokenAmount.toFixed(6)), ); setAmount(formattedAmount); };Similarly update lines 268-271.
165-174: Remove unreachablemetadata.titlefallback or confirm its necessity.BuyWidget always supplies a
titleprop to FundWallet, sometadata.titleis neverundefinedand the fallback (Buy ${destinationToken.symbol}) is never executed. Remove the fallback logic or reserve it for future callers.
📜 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 (11)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx(9 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx(3 hunks)packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each 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/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsxpackages/thirdweb/src/stories/Bridge/FundWallet.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.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/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsxpackages/thirdweb/src/stories/Bridge/FundWallet.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.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/StepRunner.stories.tsxpackages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/stories/Bridge/FundWallet.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.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/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsxpackages/thirdweb/src/stories/Bridge/FundWallet.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx
🧬 Code graph analysis (11)
packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx (5)
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/stories/Bridge/fixtures.ts (2)
STORY_MOCK_WALLET(90-90)simpleBuyQuote(251-311)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)
packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx (5)
packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (1)
DirectPayment(48-205)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
DIRECT_PAYMENT_UI_OPTIONS(771-864)packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx (1)
CustomButtonLabel(59-63)packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx (1)
CustomButtonLabel(46-50)
packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx (4)
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
TransactionPayment(80-445)packages/thirdweb/src/stories/utils.tsx (1)
ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
TRANSACTION_UI_OPTIONS(867-907)packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx (1)
CustomButtonLabel(57-61)
packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/stories/Bridge/fixtures.ts (3)
simpleOnrampQuote(93-123)DIRECT_PAYMENT_UI_OPTIONS(771-864)TRANSACTION_UI_OPTIONS(867-907)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(108-333)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
USDC(38-49)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (3)
packages/thirdweb/src/react/web/ui/PayEmbed.tsx (1)
PayEmbedConnectOptions(431-541)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (2)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx (5)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
FundWallet(96-388)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (2)
RECEIVER_ADDRESSES(642-648)FUND_WALLET_UI_OPTIONS(714-768)packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx (1)
CustomButtonLabel(57-61)packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx (1)
CustomButtonLabel(46-50)
packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
UnsupportedTokenScreen(25-101)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx (4)
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/stories/Bridge/fixtures.ts (2)
simpleBuyQuote(251-311)simpleOnrampQuote(93-123)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
⏰ 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: Unit Tests
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (30)
packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx (3)
1-3: LGTM!The imports are appropriate for the decorator-based theming refactor and align with the pattern used across other Bridge stories.
14-29: LGTM!The meta configuration correctly implements the decorator-based theming pattern. All required props are provided in the args, and the decorator ensures both light and dark theme variants are rendered.
31-63: LGTM!The story exports provide comprehensive coverage of different error scenarios, including edge cases like missing cancel button and empty error messages. The stories are well-structured and follow Storybook best practices.
packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx (2)
1-4: LGTM!The imports are clean and align with the decorator-based theming refactor. The direct import of
DirectPaymentwithout wrapper components simplifies the story setup.
27-61: LGTM!The story definitions are clean, consistent, and cover diverse use cases (digital art, concert tickets, subscriptions, physical products, no-image scenarios, and custom button labels). The pattern of spreading fixture options is maintainable and DRY.
packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx (1)
38-51: LGTM! Well-structured story configurations.The story exports are well-organized with descriptive names that clearly communicate the scenarios being tested. The two stories effectively demonstrate the component's behavior with different
paymentMethodsconfigurations.packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx (4)
1-5: LGTM: Imports are clean and properly organized.All imports are used and follow ESM conventions with
.jsextensions.
7-22: LGTM: Meta definition is well-structured.The meta correctly types the component, provides all required props (
client,chain,tokenAddress), and uses the decorator pattern for theme variations.
27-31: LGTM: TokenNotSupported story correctly demonstrates the token-unsupported path.The story uses Ethereum mainnet (chain 1) to trigger the non-testnet "Token Not Supported" message, inheriting other required props from the meta args.
33-37: LGTM: TestnetNotSupported story correctly demonstrates the testnet path.The story uses Sepolia testnet (chain ID 11155111) to trigger the "Testnet Not Supported" message. The chain ID is correct and the comment is helpful.
packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx (5)
5-7: LGTM! Import refactoring aligns with decorator approach.The import changes correctly reflect the move from per-story theme wrappers to a global decorator pattern, and the fixture imports are properly scoped.
69-88: LGTM! Meta configuration properly implements global decorator pattern.The meta configuration correctly:
- Updates component reference from wrapper to direct SuccessScreen
- Provides all required props with sensible defaults
- Implements ModalThemeWrapper as a global decorator, consistent with the refactoring across Bridge stories
The new
showContinueWithTxandhasPaymentIdprops enable testing different transaction flow scenarios.
93-95: LGTM! Basic story provides sensible default scenario.The Basic story serves as a minimal example using meta defaults, replacing the previous Default/DefaultLight stories with a unified approach via the global decorator.
97-112: LGTM! Payment scenario stories provide good coverage.OnrampPayment and ComplexPayment stories effectively test different completion scenarios (onramp-only and combined flows) with appropriate fixture data.
122-129: Review the PaymentId story prop combination.The PaymentId story sets both
hasPaymentId: trueandshowContinueWithTx: true, but based on the component implementation, whenhasPaymentIdis true, the Continue/Done button is not rendered at all. SettingshowContinueWithTxhas no effect in this case.Consider whether
showContinueWithTx: trueis intentional here, or if it should be removed/set to false since the button won't be visible whenhasPaymentIdis true.Based on the component logic in SuccessScreen.tsx:
{!hasPaymentId && ( <Button fullWidth onClick={onDone} variant="accent"> {showContinueWithTx ? "Continue" : "Done"} </Button> )}packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx (2)
15-21: LGTM: Clean decorator pattern.The decorator correctly applies ModalThemeWrapper to all stories, providing consistent dark/light theme rendering. This is a good refactor from per-story theming.
34-50: LGTM: Story configurations are correct.The remaining stories correctly override the base args with their respective transaction types (ERC20 transfer, contract interaction, and custom button label). The structure is clean and consistent.
packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx (3)
3-3: LGTM: Import added for WindowAdapter.The import of
webWindowAdapteris correctly sourced from the WindowAdapter module and used in the story args on line 18.
25-31: LGTM: Decorator pattern correctly implemented.The
ModalThemeWrapperdecorator is properly applied to wrap all stories with both dark and light theme variants, replacing the previous per-story theme configuration approach. This aligns with the broader refactoring pattern across Bridge stories.
41-45: LGTM: Story renamed and simplified.The story has been renamed from
LighttoBasicand correctly provides the requiredrequestprop. The structure is clean and follows the new decorator-based theming approach.packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (4)
3-3: LGTM: Import updated to direct component.The import correctly references
PaymentDetailsdirectly instead of a theme-wrapped variant, aligning with the decorator-based theming approach.
61-87: LGTM: Meta configuration updated with new props and decorator.The meta args have been properly updated to include the new required props (
modeInfo,currency,metadata,client,confirmButtonLabel), and theModalThemeWrapperdecorator is correctly applied. The structure aligns with the refactored component API.
99-105: Spread operator safe – no overriding of critical props DIRECT_PAYMENT_UI_OPTIONS.credits only definesmetadata,buttonLabel, andpaymentInfo, so it cannot overridepaymentMethodorpreparedQuote.
152-162: Ignore – the spread is applied at the root ofargs, not insidemodeInfo, so it cannot overridemodeInfo.transaction.Likely an incorrect or invalid review comment.
packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (2)
30-31: Good: Added explicit sizing constraints.Adding
overflow: "hidden"andwidth: "100%"ensures the image container behaves predictably and prevents layout issues.
11-11: Retain requiredtitleprop All callers supply a non‐undefined string via fallback (e.g.metadata.title || "…", or the ternary in FundWallet), sotitle: stringis correct.Likely an incorrect or invalid review comment.
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
109-109: LGTM: State initialization.Correctly initializes amount state with the
initialAmountprop fallback to empty string.packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx (3)
6-28: Good: Simplified story structure with global decorator.The refactor from per-story theme variants to a global
ModalThemeWrapperdecorator reduces duplication and aligns with the pattern used in other Bridge stories (e.g., DirectPayment, TransactionPayment).
33-63: LGTM: Story definitions follow consistent pattern.All stories correctly spread UI options from fixtures and override specific props where needed (e.g.,
receiverAddress). This is consistent with other Bridge story files.
13-17: Required prop defaults verified.
FUND_WALLET_UI_OPTIONS.ethDefaultsuppliesdestinationTokenandmetadata, and the story explicitly definescurrency,presetOptions,connectOptions, andshowThirdwebBranding, covering all required props.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
337-341: Add required TSDoc forTransactionWidgetContentWrapper.Public exports under
packages/thirdwebmust include comprehensive TSDoc with a compiling@exampleand a custom tag. Please document this wrapper accordingly.packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
150-161: Fix fiat preset UX: use selected currency symbol, not hardcoded “$”; drop redundant fallbacks; rename param.
- Label buttons with the active currency (not “$”).
- Remove unnecessary
|| "USD"sincecurrencyis required here.- Rename
usdAmount→fiatAmountfor clarity.-const handleQuickAmount = (usdAmount: number) => { - const price = destinationToken.prices[currency || "USD"] || 0; +const handleQuickAmount = (fiatAmount: number) => { + const price = destinationToken.prices[currency] ?? 0; if (price === 0) { return; } - const tokenAmount = usdAmount / price; + const tokenAmount = fiatAmount / price; const formattedAmount = numberToPlainString( Number.parseFloat(tokenAmount.toFixed(6)), ); setAmount(formattedAmount); }; ... - {formatCurrencyAmount( - currency || "USD", - Number(amount) * - (destinationToken.prices[currency || "USD"] || 0), - )} + {formatCurrencyAmount( + currency, + Number(amount) * (destinationToken.prices[currency] ?? 0), + )} ... - {presetOptions?.map((amount) => ( + {presetOptions?.map((fiat) => ( <Button - key={amount} - onClick={() => handleQuickAmount(Number(amount))} + key={fiat} + onClick={() => handleQuickAmount(Number(fiat))} style={{ backgroundColor: theme.colors.tertiaryBg, flex: 1, fontSize: fontSize.sm, borderRadius: radius.lg, padding: `${spacing.sm} ${spacing.md}`, }} variant="outline" > - ${amount} + {formatCurrencyAmount(currency, fiat)} </Button> ))}Also applies to: 268-271, 289-305
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
107-123: Add explicit return type and comprehensive TSDoc.The exported
PaymentSelectionfunction is missing:
- An explicit return type annotation
- Comprehensive TSDoc with at least one compiling
@exampleand a custom tag (@beta,@internal,@experimental, etc.)As per coding guidelines for
packages/thirdweb/**/*.{ts,tsx}, every public symbol must have TSDoc documentation.Apply this diff to add the return type and TSDoc:
+/** + * PaymentSelection component allows users to choose and configure their payment method + * for bridging tokens to a destination chain. + * + * @param props - The payment selection configuration + * @returns A React component for payment method selection + * + * @example + * ```tsx + * import { PaymentSelection } from "thirdweb/react"; + * import { createThirdwebClient } from "thirdweb"; + * + * const client = createThirdwebClient({ clientId: "..." }); + * + * function MyBridge() { + * return ( + * <PaymentSelection + * destinationToken={{ chainId: 137, address: "0x...", decimals: 18 }} + * destinationAmount="100" + * receiverAddress="0x..." + * client={client} + * onPaymentMethodSelected={(method) => console.log(method)} + * onError={(error) => console.error(error)} + * onBack={() => console.log("back")} + * connectOptions={{}} + * connectLocale={{}} + * paymentMethods={["crypto", "card"]} + * currency="USD" + * includeDestinationToken={false} + * feePayer={undefined} + * country={undefined} + * supportedTokens={undefined} + * /> + * ); + * } + * ``` + * + * @internal + */ export function PaymentSelection({ destinationToken, client, destinationAmount, receiverAddress, onPaymentMethodSelected, onError, onBack, connectOptions, connectLocale, includeDestinationToken, paymentMethods, supportedTokens, feePayer, currency, country, -}: PaymentSelectionProps) { +}: PaymentSelectionProps): JSX.Element {As per coding guidelines.
♻️ Duplicate comments (3)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
359-370: Guard spreadingconnectOptionswhen branding is disabled.When
showThirdwebBrandingisfalseandprops.connectOptionsisundefined(the default), spreading...props.connectOptionsthrowsTypeError: Cannot convert undefined or null to object, so the widget never renders. Please stage a safe fallback before spreading.const connectOptions = useMemo(() => { if (props.showThirdwebBranding === false) { - return { - ...props.connectOptions, - connectModal: { - ...props.connectOptions?.connectModal, - showThirdwebBranding: props.showThirdwebBranding, - }, - }; + const baseConnectOptions = + props.connectOptions ?? ({} as TransactionWidgetConnectOptions); + const baseConnectModal = baseConnectOptions.connectModal ?? {}; + return { + ...baseConnectOptions, + connectModal: { + ...baseConnectModal, + showThirdwebBranding: props.showThirdwebBranding, + }, + }; } return props.connectOptions; }, [props.connectOptions, props.showThirdwebBranding]);packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
383-401: Handle token lookup errors; don’t render an empty shell.On failed
useTokenQuery, we drop toreturn null. ReuseErrorBannerwith Retry/Cancel (as previously requested).} else if (tokenQuery.data?.type === "success") { return ( <CheckoutWidgetContent {...props} connectLocale={localQuery.data} destinationToken={tokenQuery.data.token} currency={props.currency || "USD"} paymentMethods={props.paymentMethods || ["crypto", "card"]} connectOptions={connectOptions} showThirdwebBranding={ props.showThirdwebBranding === undefined ? true : props.showThirdwebBranding } /> ); } - return null; + if (tokenQuery.isError) { + return ( + <ErrorBanner + client={props.client} + error={tokenQuery.error as Error} + onRetry={() => tokenQuery.refetch()} + onCancel={() => props.onCancel?.(undefined)} + /> + ); + } + return null;packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
95-107: Add explicit return type and TSDoc on exported component.Public exports in packages/thirdweb require TSDoc and an explicit return type. Add a brief TSDoc with an example and annotate the return as React.JSX.Element.
As per coding guidelines.
+/** + * Component for funding a wallet with tokens using fiat or crypto. + * @param props - FundWalletProps + * @returns React component + * @example + * ```tsx + * <FundWallet + * client={client} + * destinationToken={token} + * currency="USD" + * metadata={{ title: "Fund", description: "Add funds", image: undefined }} + * onContinue={() => {}} + * presetOptions={[5, 10, 20]} + * connectOptions={undefined} + * showThirdwebBranding + * /> + * ``` + * @internal + */ export function FundWallet({ client, receiverAddress, onContinue, presetOptions, connectOptions, showThirdwebBranding, initialAmount, destinationToken, currency, buttonLabel, metadata, -}: FundWalletProps) { +}: FundWalletProps): React.JSX.Element {
🧹 Nitpick comments (5)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
350-367: Polish button label when amount is empty.Avoid “Buy 0 TOKEN” before input. Use token-only label if amount is falsy.
- {buttonLabel || `Buy ${amount} ${destinationToken.symbol}`} + {buttonLabel || + (amount ? `Buy ${amount} ${destinationToken.symbol}` : `Buy ${destinationToken.symbol}`)}packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2)
375-416: Surface token lookup failures instead of returning null.When
useTokenQueryerrors (non-unsupported cases), the wrapper falls through tonull. RenderErrorBannerwith Retry and Cancel.} else if (tokenQuery.data?.type === "success") { return ( <BridgeWidgetContent {...props} connectLocale={localQuery.data} destinationToken={tokenQuery.data.token} currency={props.currency || "USD"} paymentMethods={props.paymentMethods || ["crypto", "card"]} presetOptions={props.presetOptions || [5, 10, 20]} connectOptions={connectOptions} showThirdwebBranding={ props.showThirdwebBranding === undefined ? true : props.showThirdwebBranding } /> ); } - return null; + if (tokenQuery.isError) { + return ( + <ErrorBanner + client={props.client} + error={tokenQuery.error as Error} + onRetry={() => tokenQuery.refetch()} + onCancel={() => props.onCancel?.(undefined)} + /> + ); + } + return null;
375-388: Optional: fallback locale if Connect locale fails.If
localQuery.isError, fall back to"en_US"to avoid indefinite spinner.- if (tokenQuery.isPending || !localQuery.data) { + if (tokenQuery.isPending || (!localQuery.data && !localQuery.isError)) { ... - } else if (tokenQuery.data?.type === "unsupported_token") { + } else if (localQuery.isError) { + // proceed with default locale if needed + // e.g., const fallbackLocale = getConnectLocaleSync("en_US"); + // or render content with a minimal copy + // Keep as a TODO if sync API not available + }packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
486-514: Nit: name the first screen “buy-ui”/“start” for parity.Align screen ids with BuyWidget (“1:buy-ui”) for consistency.
- | { id: "1:init-ui" } + | { id: "1:buy-ui" }packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
212-214: Remove dead code: fallback for required prop.The
currencyprop is now required (line 91), so the fallback|| "USD"on line 213 is dead code and will never execute.Apply this diff to remove the unnecessary fallback:
const fiatPaymentMethod: PaymentMethod = { - currency: currency || "USD", + currency, onramp: provider, payerWallet, type: "fiat", };
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (5)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx(9 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx(7 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(5 hunks)
🧰 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/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.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/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.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/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
🧠 Learnings (3)
📚 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/TransactionWidget.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
🧬 Code graph analysis (5)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (16)
packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
FundWallet(95-388)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(107-332)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx (1)
DynamicHeight(8-33)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (4)
packages/thirdweb/src/react/web/ui/PayEmbed.tsx (1)
PayEmbedConnectOptions(431-541)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx (1)
TokenAndChain(22-99)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (2)
packages/thirdweb/src/react/web/ui/PayEmbed.tsx (1)
PayEmbedConnectOptions(431-541)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (15)
packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (1)
DirectPayment(48-205)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(107-332)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (17)
packages/thirdweb/src/transaction/actions/wait-for-tx-receipt.ts (1)
WaitForReceiptOptions(14-20)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
TransactionPayment(80-445)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(107-332)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx (1)
ExecutingTxScreen(19-183)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)
⏰ 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: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
361-373: Branding override preserves consumer config. LGTM.Only overrides
connectModal.showThirdwebBrandingwhen the widget explicitly setsshowThirdwebBranding === false. Good.packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
189-190: No stray quote: textOverflow value is properly quoted
Verified thattextOverflow: "ellipsis"in TokenAndChain.tsx (line 82) uses matching quotes—no build break risk.Likely an incorrect or invalid review comment.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (2)
26-26: Dropping the export on PaymentSelectionProps is safe; no imports or type‐references exist outside its own file.Likely an incorrect or invalid review comment.
40-40: Ensure allPaymentSelectionusages supply new required propsWidgets correctly pass
receiverAddress,onBack,paymentMethodsandcurrency, but the Storybook example only providesclientandonBack. Update the story (and any other call sites) to include the newly required props—or add sensible defaults—to avoid runtime errors.
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (3)
packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx (2)
77-82: Add an explicit return type.The function lacks an explicit return type. Per coding guidelines, TypeScript functions should declare return types explicitly.
As per coding guidelines.
Apply this diff:
-export function DepositScreen(props: { +export function DepositScreen(props: { connectLocale: ConnectLocale; client: ThirdwebClient; tx: PreparedTransaction; onDone: () => void; -}) { +}): React.JSX.Element {
77-82: Add explicit return type toDepositScreen. Per coding guidelines, functions must declare a return type; update its signature toexport function DepositScreen(props: …): JSX.Element { … }.packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
313-371: Unify token price shape: useprices: { USD }instead ofpriceUsdSeveral fixtures define token prices as
priceUsd, while others useprices: { USD: ... }. Downstream UI expects a consistent shape; the mismatch can break fiat displays.Standardize all occurrences to
prices: { USD: <number> }.Example change:
- name: "Ethereum", - priceUsd: 2500.0, + name: "Ethereum", + prices: { USD: 2500.0 },Apply similarly to all tokens in these quotes.
Also applies to: 373-438, 442-594
♻️ Duplicate comments (1)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
412-423: ** Prevent runtime crash when spreading undefinedconnectModal.**If
props.connectOptions.connectModalisundefined, spreading it at line 417 throwsTypeError: Cannot convert undefined or null to object, breaking the widget before any UI renders. Guard with a fallback object.Apply this diff to fix:
const connectOptions = useMemo(() => { if (props.showThirdwebBranding === false) { return { ...props.connectOptions, connectModal: { - ...props.connectOptions?.connectModal, + ...(props.connectOptions?.connectModal ?? {}), showThirdwebBranding: props.showThirdwebBranding, }, }; } return props.connectOptions; }, [props.connectOptions, props.showThirdwebBranding]);
🧹 Nitpick comments (12)
packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx (1)
25-39: Disable during pending and use testnet/smaller amount for safetyAvoid duplicate submits and accidental large-value mainnet sends in Storybook. Consider Base Sepolia and a tiny amount; also disable while pending.
-import { base } from "../../../chains/chain-definitions/base.js"; +import { baseSepolia } from "../../../chains/chain-definitions/base-sepolia.js"; @@ - <Button + <Button variant="primary" + disabled={sendTx.isPending} onClick={() => { const sendFunds = prepareTransaction({ - chain: base, + chain: baseSepolia, client: storyClient, to: "0x83Dd93fA5D8343094f850f90B3fb90088C1bB425", - value: toWei("100"), + value: toWei("0.001"), }); sendTx.mutate(sendFunds); }} > - {sendTx.isPending ? "Sending..." : "Send 100 Base ETH"} + {sendTx.isPending ? "Sending..." : "Send 0.001 Base Sepolia ETH"} </Button>packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx (2)
89-123: Tidy up wrapper props and clarifyonCompletesemantics
- You pass several props as
undefinedtoTransactionWidgetContentWrapper; they can be omitted.onCompleteexists on ModalProps but isn’t used. Either remove it from the public surface or document when it should fire to avoid confusion.Minimal prop cleanup:
return ( <TransactionWidgetContentWrapper client={props.client} country={props.country} currency={props.currency} transaction={props.tx} onCancel={props.onClose} locale={props.localeId} onSuccess={(data) => { props.onTxSent(data); }} title={props.payOptions.metadata?.name} description={props.payOptions.metadata?.description} image={props.payOptions.metadata?.image} paymentMethods={ props.payOptions.buyWithCrypto === false ? ["card"] : props.payOptions.buyWithFiat === false ? ["crypto"] : ["crypto", "card"] } showThirdwebBranding={props.payOptions.showThirdwebBranding} supportedTokens={props.supportedTokens} - onError={undefined} - paymentLinkId={undefined} - buttonLabel={undefined} - purchaseData={undefined} /> );
41-87: Consider adding TSDoc forTransactionModal(public symbol)If exported from the package’s public surface, add TSDoc with an example and stability tag (
@beta/@internal) per package guidelines.packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (4)
349-360: Avoid re-firing analytics on window focus/mount re-rendersReact Query refetches on window focus by default; this will re-trigger trackPayEvent. Disable refetch for this tracking-only query.
Apply this diff:
useQuery({ queryFn: () => { trackPayEvent({ client: props.client, event: "ub:ui:buy_widget:render", toChainId: props.chain.id, toToken: props.tokenAddress, }); return true; }, - queryKey: ["buy_widget:render"], + queryKey: ["buy_widget:render"], + refetchOnMount: false, + refetchOnWindowFocus: false, + refetchOnReconnect: false, });
520-527: Use functional state updates to avoid stale closures in transitionssetScreen({...screen, ...}) can read stale state under quick successive updates. Prefer functional updates.
Apply this diff and replicate for other setScreen calls:
- onContinue={(destinationAmount, destinationToken, receiverAddress) => { - setScreen({ - id: "2:methodSelection", - destinationAmount, - destinationToken, - receiverAddress, - }); - }} + onContinue={(destinationAmount, destinationToken, receiverAddress) => { + setScreen(() => ({ + id: "2:methodSelection", + destinationAmount, + destinationToken, + receiverAddress, + })); + }}
627-637: Minor: drop explicit undefined propsPassing confirmButtonLabel={undefined} is redundant; removing it simplifies the call.
- confirmButtonLabel={undefined}
656-664: Minor: drop explicit undefined propsPassing title={undefined} to StepRunner is unnecessary; remove for clarity.
- title={undefined}packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
175-188: Nit: simplify background color helpergetStepBackgroundColor returns the same value for all statuses; inline or collapse the switch.
- const getStepBackgroundColor = ( - status: "pending" | "executing" | "completed" | "failed", - ) => { - switch (status) { - case "completed": - return theme.colors.tertiaryBg; - case "executing": - return theme.colors.tertiaryBg; - case "failed": - return theme.colors.tertiaryBg; - default: - return theme.colors.tertiaryBg; - } - }; + const getStepBackgroundColor = () => theme.colors.tertiaryBg;packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (1)
18-46: Consider makingshowThirdwebBrandingoptional in the type to match the component default.The type requires
showThirdwebBranding: boolean(line 45), but the component provides a default value= true(line 53). For consistency, consider either making the type optional (showThirdwebBranding?: boolean) or removing the default from the component signature. Current code works but mixing required types with defaults is less conventional.packages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx (3)
1-8: Wire callbacks to Storybook actions for visibilityUse addon-actions so interactions are observable in the UI.
+import { action } from "@storybook/addon-actions";
9-20: Prefersatisfies Meta<...>and add autodocs; use actions for callbacksImproves type safety, docs, and interactive logging. As per coding guidelines.
-const meta: Meta<typeof StoryVariant> = { - args: { - client: storyClient, - onSuccess: () => {}, - onError: () => {}, - onCancel: () => {}, - currency: "USD", - ...TRANSACTION_UI_OPTIONS.ethTransfer, - }, - component: StoryVariant, - title: "Bridge/Transaction/TransactionWidget", -}; +const meta = { + args: { + client: storyClient, + onSuccess: action("onSuccess"), + onError: action("onError"), + onCancel: action("onCancel"), + currency: "USD", + ...TRANSACTION_UI_OPTIONS.ethTransfer, + }, + component: StoryVariant, + title: "Bridge/Transaction/TransactionWidget", + tags: ["autodocs"], +} satisfies Meta<typeof StoryVariant>;
49-63: Add explicit return type to comply with TS guidelinesKeeps story TS strict and consistent. As per coding guidelines.
-function StoryVariant(props: TransactionWidgetProps) { +function StoryVariant(props: TransactionWidgetProps): JSX.Element { return ( <div style={{ display: "flex", flexDirection: "column", gap: "40px", alignItems: "center", }} > <TransactionWidget {...props} theme="dark" /> <TransactionWidget {...props} theme="light" /> </div> ); }
📜 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 (24)
apps/playground-web/src/app/payments/components/RightSection.tsx(0 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx(10 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx(8 hunks)packages/thirdweb/src/react/web/ui/Bridge/types.ts(1 hunks)packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx(1 hunks)packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx(6 hunks)packages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx(0 hunks)packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx(0 hunks)packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx(0 hunks)packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/fixtures.ts(9 hunks)packages/thirdweb/src/stories/BuyWidget.stories.tsx(3 hunks)
💤 Files with no reviewable changes (4)
- apps/playground-web/src/app/payments/components/RightSection.tsx
- packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx
- packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx
- packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/thirdweb/src/react/web/ui/Bridge/types.ts
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each 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/stories/Bridge/Transaction/TransactionWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.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/stories/Bridge/Transaction/TransactionWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.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/Transaction/TransactionWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.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/stories/Bridge/Transaction/TransactionWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/stories/Bridge/StepRunner.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx
🧠 Learnings (4)
📚 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/Transaction/TransactionWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsx
📚 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.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
🧬 Code graph analysis (19)
packages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx (2)
packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
TRANSACTION_UI_OPTIONS(800-840)
packages/thirdweb/src/stories/BuyWidget.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
BuyWidget(329-339)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)packages/thirdweb/src/exports/chains.ts (2)
base(17-17)ethereum(32-32)
packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx (3)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
TransactionWidgetContentWrapper(351-483)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)
packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
UnsupportedTokenScreen(25-101)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareRequest(14-18)BridgePrepareResult(23-27)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (18)
packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
UnsupportedTokenScreen(25-101)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
RequiredParams(24-26)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
FundWallet(95-388)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(107-332)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx (1)
DynamicHeight(8-33)
packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx (1)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
ModalHeader(36-68)
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (4)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/core/hooks/others/useChainQuery.ts (1)
useChainMetadata(165-175)packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts (1)
useTransactionDetails(55-187)packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (1)
WithHeader(9-66)
packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsx (3)
packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
DIRECT_PAYMENT_UI_OPTIONS(704-797)packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (2)
CheckoutWidgetProps(45-211)CheckoutWidget(315-325)
packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx (1)
packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)
packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/stories/Bridge/fixtures.ts (2)
simpleBuyQuote(251-311)simpleOnrampQuote(93-123)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/stories/Bridge/fixtures.ts (4)
simpleOnrampQuote(93-123)DIRECT_PAYMENT_UI_OPTIONS(704-797)simpleBuyQuote(251-311)TRANSACTION_UI_OPTIONS(800-840)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (15)
packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (1)
DirectPayment(48-205)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(107-332)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)
packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
DirectPaymentInfo(4-9)
packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx (4)
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (2)
STORY_MOCK_WALLET(90-90)simpleBuyQuote(251-311)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (16)
packages/thirdweb/src/transaction/actions/wait-for-tx-receipt.ts (1)
WaitForReceiptOptions(14-20)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
UnsupportedTokenScreen(25-101)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
TransactionPayment(80-448)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(107-332)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx (1)
ExecutingTxScreen(19-183)
packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (4)
packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
DirectPaymentInfo(4-9)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx (1)
FiatValue(15-55)packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (1)
WithHeader(9-66)
packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(107-332)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
USDC(38-49)
🪛 Gitleaks (8.28.0)
packages/thirdweb/src/stories/BuyWidget.stories.tsx
[high] 26-26: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 39-39: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 52-52: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 101-101: 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). (1)
- GitHub Check: Size
🔇 Additional comments (16)
packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx (3)
1-3: LGTM!The imports are correctly updated to support the decorator-based theming approach. The addition of
ModalThemeWrapperandstoryClientfrom utils aligns with the refactoring objective to standardize theming across Bridge stories.
14-29: LGTM! Cleaner decorator-based approach.The meta configuration correctly refactors to use:
ErrorBannerdirectly instead of the removed wrapper component- Shared
storyClientfor consistent configuration- Decorator pattern for theming (renders both light and dark variants via
ModalThemeWrapper)This approach is more maintainable than per-story theming and aligns with Storybook best practices.
34-63: LGTM! Comprehensive error scenario coverage.The story definitions provide good coverage of error states:
- Various error types (network, user rejection, insufficient funds, generic)
- Optional prop handling (
onCancel: undefined)- Edge case testing (empty error message)
These stories will correctly render with the decorator-based theming approach, automatically showing both light and dark theme variants.
packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx (2)
73-76: TSDoc is acceptable for an@internalsymbol.The
@internaltag indicates this is not part of the public API, so the lack of an@exampleis acceptable. If this symbol is promoted to public in the future, ensure a compiling@exampleis added per coding guidelines.As per coding guidelines.
146-146: LGTM: Consistent removal of back navigation.The removal of the
onBackprop fromModalHeaderis consistent with the removal ofonBackfrom the component's props. No back button will be rendered, which aligns with the refactor to removeBridgeOrchestratorand simplify navigation flows.packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
641-648: Good: limit story-only addresses to local scopeMaking
RECEIVER_ADDRESSESnon-exported reduces accidental external coupling. LGTM.packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx (1)
12-36: Story setup looks correctMeta args, decorator, and
webWindowAdapterwiring align with the new StepRunner API.requestprovided in the story itself is fine.packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx (2)
7-36: Props and decorator align with new PaymentSelection APIArgs are explicit (currency, methods, receiverAddress) and the ModalThemeWrapper decorator keeps theme coverage. Looks good.
41-51: Nice split of crypto-only and card-only variantsThe two targeted stories simplify coverage versus many small variants. LGTM.
packages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsx (1)
11-21: Stories look solid and exercise the new props correctlyMeta/args and variants are well‑wired; rendering both themes via StoryVariant is clean. No issues.
packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx (1)
7-22: Decorator-based theming and args look correctDirectly targets UnsupportedTokenScreen with proper defaults; mainnet/testnet stories cover both UI branches.
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (2)
362-374: Branding override preserves consumer config (good fix)Only forcing connectModal.showThirdwebBranding when widget explicitly disables branding avoids overwriting integrator settings.
342-347: Confirm default locale id format ("en_US" vs "en-US")Ensure the default matches LocaleId values used by useConnectLocale. If the enum expects hyphenated tags, switch to "en-US".
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
30-73: Internal type visibility is correct
No external references toStepRunnerPropsfound; leaving it unexported is fine.packages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx (2)
25-47: Story args layering looks goodVariants correctly rely on meta args and override only scenario-specific fields.
1-7: Confirm .js path import is intentionalThe import targets a TS module with a .js extension. If your tooling expects extensionless or TS paths in Storybook, consider aligning to repo convention; otherwise keep as-is.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
362-374: Guard connectModal spread and only override branding when prop is provided.Avoid spreading possibly-undefined and preserve consumer-provided modal settings; only set showThirdwebBranding when the widget prop is explicitly set.
Apply this diff:
- const connectOptions = useMemo(() => { - if (props.showThirdwebBranding === false) { - return { - ...props.connectOptions, - connectModal: { - ...props.connectOptions?.connectModal, - showThirdwebBranding: false, - }, - }; - } - return props.connectOptions; - }, [props.connectOptions, props.showThirdwebBranding]); + const connectOptions = useMemo(() => { + if (!props.connectOptions) return undefined; + const showThirdwebBranding = + props.showThirdwebBranding ?? + props.connectOptions.connectModal?.showThirdwebBranding; + return { + ...props.connectOptions, + connectModal: { + ...(props.connectOptions.connectModal || {}), + ...(showThirdwebBranding !== undefined + ? { showThirdwebBranding } + : {}), + }, + }; + }, [props.connectOptions, props.showThirdwebBranding]);packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
411-423: Prevent runtime crash when connectModal is absent.Guard the spread with a fallback and only set showThirdwebBranding when explicitly disabling branding.
Apply this diff:
- const connectOptions = useMemo(() => { - if (props.showThirdwebBranding === false) { - return { - ...props.connectOptions, - connectModal: { - ...props.connectOptions?.connectModal, - showThirdwebBranding: props.showThirdwebBranding, - }, - }; - } - return props.connectOptions; - }, [props.connectOptions, props.showThirdwebBranding]); + const connectOptions = useMemo(() => { + if (props.showThirdwebBranding === false) { + return { + ...props.connectOptions, + connectModal: { + ...(props.connectOptions?.connectModal || {}), + showThirdwebBranding: false, + }, + }; + } + return props.connectOptions; + }, [props.connectOptions, props.showThirdwebBranding]);
🧹 Nitpick comments (2)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (2)
438-455: Use ErrorBanner for tx errors to align UX and analytics.Replace custom error block with ErrorBanner to unify recovery and event tracking.
Apply this diff:
- } else if (txQuery.error) { - return ( - <div - style={{ - alignItems: "center", - display: "flex", - flexDirection: "column", - justifyContent: "center", - minHeight: "350px", - }} - > - <AccentFailIcon size={iconSize["3xl"]} /> - <Spacer y="lg" /> - <Text color="secondaryText" size="md"> - {txQuery.error.message} - </Text> - </div> - ); + } else if (txQuery.error) { + return ( + <ErrorBanner + client={props.client} + error={txQuery.error as Error} + onRetry={() => txQuery.refetch()} + onCancel={props.onCancel} + /> + );
407-409: Query key too broad; avoid stringify(props).Using stringify(props) risks unstable keys and cache churn. Limit to stable fields (chainId, tokenAddress, amount, transaction hash/nonce) and omit functions.
Example:
- queryKey: ["transaction-query", stringify(props)], + queryKey: [ + "transaction-query", + props.transaction.chain.id, + props.tokenAddress, + props.amount, + // include a stable transaction identifier if available + // props.transaction.to, props.transaction.data, etc. + ],
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (6)
packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts(0 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx(8 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(4 hunks)packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx(1 hunks)
💤 Files with no reviewable changes (1)
- packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each 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/CheckoutWidget.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.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/CheckoutWidget.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.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/CheckoutWidget.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.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/PaymentSelection.stories.tsx
🧠 Learnings (3)
📚 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/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
🧬 Code graph analysis (4)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (14)
packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (1)
DirectPayment(48-205)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(102-322)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)
packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(102-322)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
USDC(38-49)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (15)
packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
RequiredParams(24-26)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
FundWallet(95-388)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(102-322)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (15)
packages/thirdweb/src/transaction/actions/wait-for-tx-receipt.ts (1)
WaitForReceiptOptions(14-20)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-36)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
TransactionPayment(80-448)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(102-322)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(64-451)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)
⏰ 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: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
399-411: Good error surfacing with retry/cancel.Switch to ErrorBanner on token lookup failure avoids empty renders and adds analytics + recovery paths.
packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx (2)
7-35: Story config looks solid and aligned with new props.Decorator approach and default args cover main paths (crypto/fiat) well.
40-50: Clear variants for method filtering.OnlyCryptoMethodEnabled / OnlyFiatMethodEnabled are helpful focused demos.
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
371-394: Verify native token handling when amount is provided.If tokenAddress is undefined, this code treats it as NATIVE_TOKEN_ADDRESS and sets erc20Value. Ensure prepareTransaction expects erc20Value for native tokens; otherwise, set value (wei) instead.
Would you confirm prepareTransaction’s behavior for native vs ERC-20 amounts? If native requires value, we should branch:
- erc20Value = { - amountWei: toUnits(props.amount, token.decimals), - tokenAddress: checksumAddress(tokenAddress), - }; + if (tokenAddress === NATIVE_TOKEN_ADDRESS) { + return { + type: "success", + transaction: prepareTransaction({ + ...props.transaction, + value: toUnits(props.amount, token.decimals), + }), + }; + } else { + erc20Value = { + amountWei: toUnits(props.amount, token.decimals), + tokenAddress: checksumAddress(tokenAddress), + }; + }
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
375-429: Missing error handling for token query failures.When
tokenQueryfails for reasons other than "unsupported_token", the component falls through toreturn null, leaving users with an empty widget and no recovery path. ThetokenQuery.errorcase at lines 413-426 only handles explicit error results, but doesn't catch the scenario wheretokenQuery.dataisundefineddue to a non-"unsupported" failure.Add an explicit check for
tokenQuery.isErrorbefore the finalreturn null:} else if (tokenQuery.data?.type === "success") { return ( <BridgeWidgetContent {...props} connectLocale={localQuery.data} destinationToken={tokenQuery.data.token} currency={props.currency || "USD"} paymentMethods={props.paymentMethods || ["crypto", "card"]} presetOptions={props.presetOptions || [5, 10, 20]} connectOptions={connectOptions} showThirdwebBranding={ props.showThirdwebBranding === undefined ? true : props.showThirdwebBranding } /> ); - } else if (tokenQuery.error) { + } else if (tokenQuery.isError || tokenQuery.error) { return ( <ErrorBanner client={props.client} - error={tokenQuery.error} + error={tokenQuery.error || new Error("Failed to load token")} onRetry={() => { tokenQuery.refetch(); }} onCancel={() => { props.onCancel?.(undefined); }} /> ); } return null;
♻️ Duplicate comments (6)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
362-373: Fix branding memo to preserve consumer settings.This memo unconditionally overwrites
connectOptions.connectModal.showThirdwebBrandingwhen the widget prop isfalse, but fails to preserve the consumer's existing setting when the widget prop isundefined. This regresses integrators who explicitly configuredconnectModal.showThirdwebBranding.Apply the diff from the previous review to only override branding when explicitly provided:
const connectOptions = useMemo(() => { - if (props.showThirdwebBranding === false) { + if (!props.connectOptions) return undefined; + const showThirdwebBranding = + props.showThirdwebBranding ?? + props.connectOptions.connectModal?.showThirdwebBranding; + return { + ...props.connectOptions, + connectModal: { + ...(props.connectOptions.connectModal || {}), + ...(showThirdwebBranding !== undefined + ? { showThirdwebBranding } + : {}), + }, + }; - return { - ...props.connectOptions, - connectModal: { - ...props.connectOptions?.connectModal, - showThirdwebBranding: false, - }, - }; - } - return props.connectOptions; }, [props.connectOptions, props.showThirdwebBranding]);packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (2)
348-360: Fix branding memo to preserve consumer settings.This memo has the same issue as BuyWidget: it unconditionally overwrites
connectOptions.connectModal.showThirdwebBrandingwhen the widget prop isfalse, but fails to preserve the consumer's setting when the prop isundefined.Apply the same fix as recommended for BuyWidget:
const connectOptions = useMemo(() => { - if (props.showThirdwebBranding === false) { + if (!props.connectOptions) return undefined; + const showThirdwebBranding = + props.showThirdwebBranding ?? + props.connectOptions.connectModal?.showThirdwebBranding; + return { + ...props.connectOptions, + connectModal: { + ...(props.connectOptions.connectModal || {}), + ...(showThirdwebBranding !== undefined + ? { showThirdwebBranding } + : {}), + }, + }; - return { - ...props.connectOptions, - connectModal: { - ...props.connectOptions?.connectModal, - showThirdwebBranding: false, - }, - }; - } - return props.connectOptions; }, [props.connectOptions, props.showThirdwebBranding]);
375-415: Missing error handling for token query failures.Same issue as BuyWidget: when
tokenQueryfails for reasons other than "unsupported_token", the component returnsnull, leaving users without a recovery path.Add explicit error handling before the final
return null:} else if (tokenQuery.data?.type === "success") { return ( <CheckoutWidgetContent {...props} connectLocale={localQuery.data} destinationToken={tokenQuery.data.token} currency={props.currency || "USD"} paymentMethods={props.paymentMethods || ["crypto", "card"]} connectOptions={connectOptions} showThirdwebBranding={ props.showThirdwebBranding === undefined ? true : props.showThirdwebBranding } /> ); - } else if (tokenQuery.error) { + } else if (tokenQuery.isError || tokenQuery.error) { return ( <ErrorBanner client={props.client} - error={tokenQuery.error} + error={tokenQuery.error || new Error("Failed to load token")} onRetry={() => { tokenQuery.refetch(); }} onCancel={() => { props.onCancel?.(undefined); }} /> ); } return null;packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (2)
99-105: Fix missingmodeInfooverride for direct payment scenario.This story spreads
DIRECT_PAYMENT_UI_OPTIONS.creditswhich includespaymentInfo, but doesn't overridemodeInfoto setmode: "direct_payment". Without this, the story falls back to the meta defaultmodeInfo: { mode: "fund_wallet" }, which doesn't match the direct payment scenario the story is testing.Apply this diff:
export const OnrampSimpleDirectPayment: Story = { args: { paymentMethod: fiatPaymentMethod, preparedQuote: simpleOnrampQuote, + modeInfo: { + mode: "direct_payment", + paymentInfo: DIRECT_PAYMENT_UI_OPTIONS.credits.paymentInfo, + }, ...DIRECT_PAYMENT_UI_OPTIONS.credits, }, };
121-127: Fix missingmodeInfooverride for direct payment scenario.This story spreads
DIRECT_PAYMENT_UI_OPTIONS.digitalArtwhich includespaymentInfo, but doesn't overridemodeInfoto setmode: "direct_payment". Without this, the story falls back to the meta defaultmodeInfo: { mode: "fund_wallet" }, which doesn't match the direct payment scenario.Apply this diff:
export const BuySimpleDirectPayment: Story = { args: { paymentMethod: ethCryptoPaymentMethod, preparedQuote: simpleBuyQuote, + modeInfo: { + mode: "direct_payment", + paymentInfo: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.paymentInfo, + }, ...DIRECT_PAYMENT_UI_OPTIONS.digitalArt, }, };packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
412-423: Guard against undefinedconnectModalbefore spreading.If
props.connectOptions?.connectModalisundefined, spreading it will throwTypeError: Cannot convert undefined or null to object, causing the widget to crash before rendering.Apply this diff:
const connectOptions = useMemo(() => { if (props.showThirdwebBranding === false) { return { ...props.connectOptions, connectModal: { - ...props.connectOptions?.connectModal, + ...(props.connectOptions?.connectModal || {}), showThirdwebBranding: props.showThirdwebBranding, }, }; } return props.connectOptions; }, [props.connectOptions, props.showThirdwebBranding]);
🧹 Nitpick comments (1)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
461-463: Consider removing duplicate RequiredParams utility.The
RequiredParamsutility type is already defined inpackages/thirdweb/src/react/web/ui/Bridge/types.ts(lines 25-27). Instead of duplicating it here, import it from the centralized types module.Apply this diff to import the utility:
-type RequiredParams<T extends object, keys extends keyof T> = T & { - [K in keys]-?: T[K]; -}; - function CheckoutWidgetContent( props: RequiredParams<And add the import at the top:
import { useTokenQuery } from "./common/token-query.js"; import { DirectPayment } from "./DirectPayment.js"; import { ErrorBanner } from "./ErrorBanner.js"; import { PaymentDetails } from "./payment-details/PaymentDetails.js"; import { PaymentSelection } from "./payment-selection/PaymentSelection.js"; import { SuccessScreen } from "./payment-success/SuccessScreen.js"; import { QuoteLoader } from "./QuoteLoader.js"; import { StepRunner } from "./StepRunner.js"; -import type { PaymentMethod } from "./types.js"; +import type { PaymentMethod, RequiredParams } from "./types.js"; import { UnsupportedTokenScreen } from "./UnsupportedTokenScreen.js";
📜 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 (13)
packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts(1 hunks)packages/thirdweb/src/react/core/machines/paymentMachine.test.ts(0 hunks)packages/thirdweb/src/react/core/machines/paymentMachine.ts(0 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx(4 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx(8 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx(10 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(4 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/types.ts(1 hunks)packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx(2 hunks)
💤 Files with no reviewable changes (2)
- packages/thirdweb/src/react/core/machines/paymentMachine.ts
- packages/thirdweb/src/react/core/machines/paymentMachine.test.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsxpackages/thirdweb/src/react/web/ui/Bridge/types.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.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/payment-details/PaymentOverview.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsxpackages/thirdweb/src/react/web/ui/Bridge/types.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.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/payment-details/PaymentOverview.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsxpackages/thirdweb/src/react/web/ui/Bridge/types.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.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/PaymentDetails.stories.tsx
**/types.ts
📄 CodeRabbit inference engine (AGENTS.md)
Provide and re‑use local type barrels in a
types.tsfile
Files:
packages/thirdweb/src/react/web/ui/Bridge/types.ts
🧠 Learnings (6)
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
📚 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/TransactionWidget.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/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/types.ts
📚 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/types.ts
🧬 Code graph analysis (8)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx (3)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/types.ts (2)
PaymentMethod(32-46)ModeInfo(12-23)packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts (1)
useTransactionDetails(55-187)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (3)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
ModeInfo(12-23)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
ModalHeader(36-68)
packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(63-450)packages/thirdweb/src/stories/Bridge/fixtures.ts (4)
simpleOnrampQuote(93-123)DIRECT_PAYMENT_UI_OPTIONS(704-797)simpleBuyQuote(251-311)TRANSACTION_UI_OPTIONS(800-840)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (13)
packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/web/ui/Bridge/types.ts (2)
PaymentMethod(32-46)RequiredParams(25-27)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (1)
DirectPayment(48-205)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(102-322)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(63-450)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (12)
packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
UnsupportedTokenScreen(25-101)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/web/ui/Bridge/types.ts (2)
PaymentMethod(32-46)RequiredParams(25-27)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
FundWallet(95-388)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx (1)
DynamicHeight(8-33)
packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
packages/thirdweb/src/pay/types.ts (1)
PurchaseData(1-1)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (2)
packages/thirdweb/src/react/web/ui/PayEmbed.tsx (1)
PayEmbedConnectOptions(431-541)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (17)
packages/thirdweb/src/transaction/actions/wait-for-tx-receipt.ts (1)
WaitForReceiptOptions(14-20)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/exports/utils.ts (1)
stringify(189-189)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
PaymentMethod(32-46)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
TransactionPayment(80-448)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(102-322)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(63-450)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx (1)
ExecutingTxScreen(19-183)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)
🔇 Additional comments (40)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx (1)
17-17: LGTM! Import path update aligns with type consolidation.The PaymentMethod type import now references the centralized Bridge types module, consistent with the broader refactor to consolidate UI bridge types into a single source of truth.
packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (4)
19-19: LGTM! Import path aligns with type consolidation.The PaymentMethod import now references the centralized Bridge types module.
40-80: Explicit undefined typing clarifies contracts.The props signature updates make optional fields explicitly typed as
| undefinedrather than using optional syntax (?:), and introducefeePayerandmodeprops to replace the previousuiOptions-based approach. This improves type safety and aligns with the broader refactor to explicit prop contracts.
94-129: Mode-based event tracking correctly replaces uiOptions logic.The new
modeprop ("direct_payment" | "fund_wallet" | "transaction") drives analytics event naming, andfeePayeris now explicitly passed rather than derived from uiOptions. The event tracking call correctly uses the mode value.
166-240: Fee payer correctly propagated through bridge params.The
getBridgeParamsfunction signature now includesfeePayerand passes it to both transfer and onramp paths (lines 208, 173). The default "sender" value is applied when feePayer is undefined (line 208), ensuring consistent behavior.packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (5)
328-338: LGTM! Clean container/content separation.The refactor into
BridgeWidgetContainerandBridgeWidgetContentWrapperprovides clear separation of theming/layout concerns from content orchestration logic.
342-346: Token query flow correctly replaces bridge data query.The
useTokenQueryhook provides token-based routing, enabling clean separation between unsupported tokens, successful token resolution, and error cases.
431-473: Screen state machine provides clear navigation.The discriminated union types for screen states enable type-safe navigation between widget screens, ensuring each screen receives its required props.
514-721: Multi-screen orchestration correctly wires navigation.The
BridgeWidgetContentfunction properly orchestrates transitions between screens (buy-ui → methodSelection → load-quote → preview → execute → success/error), and handlers (handleError,handleCancel) centralize error/cancel logic.
726-743: Container correctly applies theming and layout.The
BridgeWidgetContainerwraps content withCustomThemeProvider,EmbedContainer, andDynamicHeightfor consistent theming and responsive height behavior.packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (5)
7-7: LGTM! Import addition supports explicit currency typing.The
SupportedFiatCurrencyimport enables explicit typing of the newcurrencyprop.
20-20: LGTM! Import addition supports new type surface.The
ModeInfoandPaymentMethodimports align with the centralized Bridge types refactor.
24-61: Metadata-driven props improve clarity.The props signature now explicitly receives
metadata,currency, andmodeInfoinstead of relying on nesteduiOptions, making the component's requirements clear and type-safe.
274-277: Header correctly derives title from metadata.The
ModalHeaderusesmetadata.titlewith a sensible fallback ("Payment Details"), ensuring a title is always displayed.
285-299: PaymentOverview correctly receives explicit props.The component invocation passes
currency,metadata, andmodeInfodirectly, aligning with the updatedPaymentOverviewsignature.packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (5)
315-325: LGTM! Container/content separation mirrors BuyWidget pattern.The refactor into
CheckoutWidgetContainerandCheckoutWidgetContentWrapperprovides consistent architecture with BuyWidget.
329-333: Token query flow correctly replaces bridge data query.The
useTokenQueryhook enables token-based routing between unsupported tokens, successful resolution, and error cases.
417-459: Screen state machine enables type-safe navigation.The discriminated union for screen states ensures each screen receives its required data at compile time.
501-712: Multi-screen orchestration correctly wires flow.The screen transitions and handlers (
handleError,handleCancel) properly orchestrate the checkout flow from init-ui through to success/error states.
717-734: Container applies consistent theming.The container pattern mirrors BuyWidget, providing theme and layout wrapping.
packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
1-46: LGTM! Centralized type definitions improve maintainability.The new types module consolidates Bridge UI types into a single source of truth, with clear discriminated unions for
ModeInfoandPaymentMethodthat enable type-safe handling across payment flows. TheRequiredParamsutility provides a clean way to enforce required fields on types.As confirmed in the past review, these types are internal to the Bridge UI and don't require TSDoc since they're not re-exported through the public API.
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx (5)
4-5: LGTM! Import additions support explicit prop typing.The added imports enable explicit typing of the new
currencyprop and transaction-related logic.
16-16: LGTM! Import additions align with type consolidation.The
ModeInfoandPaymentMethodimports reference the centralized Bridge types module.
18-41: Explicit props improve clarity and type safety.The component signature now explicitly receives
currency,metadata, andmodeInfoinstead of nesteduiOptions, making requirements clear and enabling better type checking.
144-206: Mode-based rendering correctly accesses modeInfo fields.Each rendering branch (
direct_payment,fund_wallet,transaction) correctly accesses the appropriate fields frommodeInfo, and the discriminated union ensures type safety at each access point.
212-228: TransactionOverViewCompact correctly receives explicit props.The internal component signature and invocation properly pass
transaction,currency, andmetadatadirectly, anduseTransactionDetailsreceives the correct parameters.packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (3)
21-21: LGTM! Import path aligns with type consolidation.The
PaymentMethodimport now references the centralized Bridge types module.
26-94: Explicit prop typing clarifies component contract.The props signature updates convert optional fields to explicit
| undefinedtyping and make several fields required (destinationToken,destinationAmount,receiverAddress,onBack,paymentMethods,currency). This eliminates ambiguity and improves type safety.
96-100: Step type expansion supports token selection flow.The addition of the
tokenSelectionvariant withselectedWalletenables proper type-safe handling of the token selection screen state.packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (4)
1-16: LGTM!The imports are correctly updated to reflect the refactored component structure, importing
PaymentDetailsdirectly and removing the wrapper-based approach.
61-87: LGTM!The meta configuration is properly structured with appropriate defaults and the
ModalThemeWrapperdecorator for consistent theming across stories.
152-162: LGTM!The transaction mode story correctly overrides
modeInfowithmode: "transaction"and the associatedtransactionfield before spreading the UI options.
164-186: LGTM!Both transaction mode stories correctly override
modeInfowithmode: "transaction"and the associatedtransactionfield.packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (7)
1-55: LGTM!The imports are correctly updated to support the refactored multi-screen architecture, including new types for state management and screen-specific components.
56-215: LGTM!The prop types are well-defined. The
onSuccesssignature change from() => voidto(data: WaitForReceiptOptions) => voidis appropriate for the refactored architecture, providing callers with transaction receipt details including chain, client, and transaction hash.
329-340: LGTM!Clean component structure that delegates to container (for theming/styling) and content wrapper (for data loading and state management).
485-539: LGTM!Well-structured screen state machine using discriminated unions, and clean
RequiredParamsutility type for enforcing required fields in component props.
541-596: LGTM!The component is properly initialized with required parameters, and the
init-uiscreen correctly wires theTransactionPaymentcomponent with appropriate callbacks for state transitions.
598-752: LGTM!The payment flow screens are correctly implemented with proper state transitions, error handling, and prop wiring. The success screen correctly sets
showContinueWithTx={true}and transitions to transaction execution on user confirmation.
754-808: LGTM!The error and execute-tx screens are correctly wired with appropriate callbacks. The
ExecutingTxScreenproperly receives the transaction and callsprops.onSuccesswithWaitForReceiptOptionsdata, and the container component correctly applies theming and layout.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx (1)
22-35: Use realistic transaction amounts in demo stories. The Bridge transaction stories usetoWei("100")(100 ETH), whereas other examples (e.g. PayEmbed stories) usetoWei("0.123")(~0.123 ETH). Reduce to a smaller value liketoWei("0.01")or match existing examples to avoid large demo transactions.
📜 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 (1)
packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each 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/stories/Bridge/Transaction/useSendTransactionModal.stories.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/stories/Bridge/Transaction/useSendTransactionModal.stories.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/Transaction/useSendTransactionModal.stories.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/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx
🧠 Learnings (1)
📚 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/Transaction/useSendTransactionModal.stories.tsx
🧬 Code graph analysis (1)
packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx (3)
packages/thirdweb/src/exports/thirdweb.ts (2)
prepareTransaction(181-181)PreparedTransaction(179-179)packages/thirdweb/src/exports/chains.ts (2)
base(17-17)sepolia(74-74)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (3)
packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx (3)
1-14: LGTM!The imports are well-organized and all appear to be utilized in the story file.
16-20: LGTM!The Storybook meta configuration correctly references the Variant component and uses an appropriate title hierarchy.
37-47: LGTM!The story configurations are well-structured with descriptive names that clearly communicate their purpose.
packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx
Show resolved
Hide resolved
Merge activity
|
…8169) <!-- ## 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 primarily focuses on refactoring and updating various components related to payment and transaction handling in the `thirdweb` library. It introduces new props, modifies existing interfaces, and cleans up the codebase by removing unused files. ### Detailed summary - Deleted several unused files related to payment and transaction handling. - Updated `transaction` and `payment` components to use new props and interfaces. - Replaced `type` definitions with `interface` in some components for consistency. - Improved error handling and state management in transaction modals. - Enhanced `SuccessScreen` and `UnsupportedTokenScreen` with new props for better UI. - Modified various story files to reflect component updates and new props. - Adjusted payment selection and fund wallet components to align with new data structures. > The following files were skipped due to too many changes: `packages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsx`, `packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx`, `packages/thirdweb/src/stories/Bridge/fixtures.ts`, `packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx`, `packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx`, `packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx`, `packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx`, `packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx` > ✨ 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** * Optional fiat currency display across payment & transaction modals (defaults to USD). * Token support detection with a dedicated unsupported-token screen. * **Refactor** * Bridge flows reorganized into modular multi-step UIs (selection, quote, preview, execute, success). * Components now use explicit metadata (title/description/image) and explicit currency/mode props; branding handling centralized. * **Documentation** * Storybook reorganized: decorator-based theming, updated/added widget stories, and cleaned-up story exports. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
pay-widget-refactor
branch
from
07614c1 to
ef9cf34
Compare
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
375-429: Remove unreachable final return
Thereturn nullat the end is dead code—useTokenQueryalways yields pending, unsupported, success, or error. Drop this branch.
♻️ Duplicate comments (5)
packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (2)
13-17: Add comprehensive TSDoc with example.This public hook is missing TSDoc documentation. Per coding guidelines for
packages/thirdweb/**/*.{ts,tsx}, every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.).As per coding guidelines.
19-39: Fix error handling logic.Line 26 evaluates a ternary expression inside
.catch()but doesn't return its result. This means errors are always swallowed, andtokenwill beundefinedfor both unsupported tokens and other errors.Apply this diff to fix the error handling:
).catch((err) => { - err.message.includes("not supported") ? undefined : Promise.reject(err); + if (!err.message.includes("not supported")) { + throw err; + } + return undefined; });packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (2)
99-105: Verify modeInfo is set correctly for direct payment story.The
OnrampSimpleDirectPaymentstory spreadsDIRECT_PAYMENT_UI_OPTIONS.creditsbut doesn't explicitly overridemodeInfo. Since the default meta args setmodeInfo: { mode: "fund_wallet" }, this story may be incorrectly displaying a fund wallet mode instead of direct payment mode.Check if the fixture includes
modeInfo:#!/bin/bash # Description: Check if DIRECT_PAYMENT_UI_OPTIONS includes modeInfo # Search for DIRECT_PAYMENT_UI_OPTIONS definition ast-grep --pattern $'export const DIRECT_PAYMENT_UI_OPTIONS: $_ = { $$$ credits: { $$$ } $$$ }'If
modeInfois not in the fixture, apply this diff:export const OnrampSimpleDirectPayment: Story = { args: { paymentMethod: fiatPaymentMethod, preparedQuote: simpleOnrampQuote, + modeInfo: { + mode: "direct_payment", + paymentInfo: DIRECT_PAYMENT_UI_OPTIONS.credits.paymentInfo, + }, ...DIRECT_PAYMENT_UI_OPTIONS.credits, }, };
121-127: Verify modeInfo is set correctly for direct payment story.The
BuySimpleDirectPaymentstory spreadsDIRECT_PAYMENT_UI_OPTIONS.digitalArtbut doesn't explicitly overridemodeInfo. Since the default meta args setmodeInfo: { mode: "fund_wallet" }, this story may be incorrectly displaying a fund wallet mode instead of direct payment mode.Check if the fixture includes
modeInfo:#!/bin/bash # Description: Check if DIRECT_PAYMENT_UI_OPTIONS includes modeInfo for digitalArt # Search for DIRECT_PAYMENT_UI_OPTIONS definition ast-grep --pattern $'export const DIRECT_PAYMENT_UI_OPTIONS: $_ = { $$$ digitalArt: { $$$ } $$$ }'If
modeInfois not in the fixture, apply this diff:export const BuySimpleDirectPayment: Story = { args: { paymentMethod: ethCryptoPaymentMethod, preparedQuote: simpleBuyQuote, + modeInfo: { + mode: "direct_payment", + paymentInfo: DIRECT_PAYMENT_UI_OPTIONS.digitalArt.paymentInfo, + }, ...DIRECT_PAYMENT_UI_OPTIONS.digitalArt, }, };packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (1)
9-15: Add explicit return type and TSDoc.Per coding guidelines, public components in
packages/thirdweb/**must have comprehensive TSDoc with at least one@exampleand a custom tag (@internal, etc.), plus an explicit return type.Apply this diff:
+/** + * Renders content with an optional header containing title, description, and image. + * @param props - Component properties + * @param props.children - Content to render below the header + * @param props.title - Header title text + * @param props.description - Optional header description + * @param props.image - Optional header image URL (supports IPFS) + * @param props.client - ThirdwebClient for resolving IPFS URLs + * @returns React component with optional header wrapper + * @example + * ```tsx + * <WithHeader + * client={client} + * title="Fund Wallet" + * description="Add funds to your wallet" + * image="ipfs://..." + * > + * <div>Content</div> + * </WithHeader> + * ``` + * @internal + */ export function WithHeader(props: { children: React.ReactNode; title: string; description: string | undefined; image: string | undefined; client: ThirdwebClient; -}) { +}): React.JSX.Element {As per coding guidelines.
🧹 Nitpick comments (2)
packages/thirdweb/src/stories/BuyWidget.stories.tsx (1)
16-18: Excellent story coverage for various BuyWidget scenarios.The renamed and new stories effectively demonstrate:
- Native token purchases (
BuyBaseNativeToken)- ERC-20 token purchases (
BuyBaseUSDC)- UI customization (
CustomTitleDescriptionAndButtonLabel,HideTitle)- Large amount handling across chains (
LargeAmount)Consider adding explicit return type annotations to align with the TypeScript coding guidelines:
-export function BuyBaseNativeToken() { +export function BuyBaseNativeToken(): JSX.Element { return <BuyWidget client={storyClient} chain={base} amount="0.1" />; } -export function BuyBaseUSDC() { +export function BuyBaseUSDC(): JSX.Element { return ( <BuyWidget client={storyClient} chain={base} amount="0.1" tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" /> ); } -export function CustomTitleDescriptionAndButtonLabel() { +export function CustomTitleDescriptionAndButtonLabel(): JSX.Element { return ( <BuyWidget client={storyClient} title="Custom Title" description="Custom Description" chain={base} amount="0.1" tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" buttonLabel="Custom Button Label" /> ); } -export function HideTitle() { +export function HideTitle(): JSX.Element { return ( <BuyWidget client={storyClient} title="" chain={base} amount="0.1" tokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913" /> ); } -export function LargeAmount() { +export function LargeAmount(): JSX.Element { return ( <BuyWidget client={storyClient} chain={ethereum} tokenAddress="0x1f9840a85d5aF5bf1D1762F925BDADdC4201F984" amount="150000" /> ); }As per coding guidelines
Also applies to: 20-29, 31-43, 45-55, 96-105
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
362-415: Remove unreachablereturn nullfallback
The finalreturn nullinCheckoutWidget.tsxcan never be reached—useTokenQueryalways yields a pending, error, or valid-data state.
📜 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 (43)
apps/playground-web/src/app/payments/components/RightSection.tsx(0 hunks)packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts(2 hunks)packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts(1 hunks)packages/thirdweb/src/react/core/machines/paymentMachine.test.ts(0 hunks)packages/thirdweb/src/react/core/machines/paymentMachine.ts(0 hunks)packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx(0 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx(9 hunks)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx(4 hunks)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx(10 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx(8 hunks)packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx(5 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx(10 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(4 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx(4 hunks)packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx(6 hunks)packages/thirdweb/src/react/web/ui/Bridge/types.ts(1 hunks)packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx(1 hunks)packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx(6 hunks)packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx(0 hunks)packages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx(0 hunks)packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx(0 hunks)packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx(0 hunks)packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/fixtures.ts(9 hunks)packages/thirdweb/src/stories/BuyWidget.stories.tsx(3 hunks)packages/thirdweb/src/stories/utils.tsx(1 hunks)
💤 Files with no reviewable changes (8)
- packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx
- apps/playground-web/src/app/payments/components/RightSection.tsx
- packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
- packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx
- packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx
- packages/thirdweb/src/react/core/machines/paymentMachine.ts
- packages/thirdweb/src/react/core/machines/paymentMachine.test.ts
- packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx
🚧 Files skipped from review as they are similar to previous changes (6)
- packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx
- packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx
- packages/thirdweb/src/react/web/ui/Bridge/types.ts
- packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts
- packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx
- packages/thirdweb/src/stories/Bridge/CheckoutWidget.stories.tsx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each 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/TransactionButton/DepositScreen.tsxpackages/thirdweb/src/stories/utils.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsxpackages/thirdweb/src/react/core/hooks/usePaymentMethods.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/token-query.tspackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.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/TransactionButton/DepositScreen.tsxpackages/thirdweb/src/stories/utils.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsxpackages/thirdweb/src/react/core/hooks/usePaymentMethods.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/token-query.tspackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.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/TransactionButton/DepositScreen.tsxpackages/thirdweb/src/stories/utils.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsxpackages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsxpackages/thirdweb/src/react/core/hooks/usePaymentMethods.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/token-query.tspackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.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/Transaction/TransactionWidget.stories.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsxpackages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsxpackages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx
🧠 Learnings (14)
📚 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/Transaction/TransactionWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx
📚 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/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Interactive UI that relies on hooks (`useState`, `useEffect`, React Query, wallet hooks).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Anything that consumes hooks from `tanstack/react-query` or thirdweb SDKs.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
📚 Learning: 2025-10-02T12:41:46.918Z
Learnt from: MananTank
PR: thirdweb-dev/js#8169
File: packages/thirdweb/src/stories/BuyWidget.stories.tsx:1-1
Timestamp: 2025-10-02T12:41:46.918Z
Learning: In the thirdweb SDK stories, importing `Meta` from `storybook/react-vite` is acceptable and should not be flagged as an issue.
Applied to files:
packages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx
📚 Learning: 2025-09-03T23:35:50.476Z
Learnt from: MananTank
PR: thirdweb-dev/js#7977
File: apps/playground-web/src/app/page.tsx:61-65
Timestamp: 2025-09-03T23:35:50.476Z
Learning: In the thirdweb-dev/js codebase, specifically for React components in **/*.{ts,tsx} files, do not suggest adding explicit return types like `: JSX.Element` or `: React.ReactElement` to function components. The project maintainer MananTank has explicitly declined these suggestions.
Applied to files:
packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
📚 Learning: 2025-10-01T22:32:18.080Z
Learnt from: MananTank
PR: thirdweb-dev/js#8169
File: packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx:95-107
Timestamp: 2025-10-01T22:32:18.080Z
Learning: In the thirdweb-dev/js codebase, specifically for React components in packages/thirdweb/src/react/**/*.{ts,tsx} files, do not suggest adding TSDoc blocks to function components. The project maintainer MananTank has explicitly declined these suggestions.
Applied to files:
packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
📚 Learning: 2025-08-29T15:37:38.513Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: AGENTS.md:0-0
Timestamp: 2025-08-29T15:37:38.513Z
Learning: Applies to apps/{dashboard,playground}/**/*.{ts,tsx} : Client-side data fetching: wrap calls in React Query with descriptive, stable `queryKeys` and set sensible `staleTime/cacheTime` (≥ 60s default); keep tokens secret via internal routes or server actions
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/common/token-query.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/**/*.{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/common/token-query.ts
📚 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/common/token-query.ts
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*client.tsx : Keep `queryKey` stable and descriptive for cache hits.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Use descriptive, stable `queryKeys` for React Query cache hits
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts
📚 Learning: 2025-09-17T11:02:13.528Z
Learnt from: MananTank
PR: thirdweb-dev/js#8044
File: packages/thirdweb/src/react/web/ui/Bridge/swap-widget/use-tokens.ts:15-17
Timestamp: 2025-09-17T11:02:13.528Z
Learning: The thirdweb `client` object is serializable and can safely be used in React Query keys, similar to the `contract` object.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts
📚 Learning: 2025-06-13T13:03:41.732Z
Learnt from: MananTank
PR: thirdweb-dev/js#7332
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/nft-drop-claim.tsx:82-90
Timestamp: 2025-06-13T13:03:41.732Z
Learning: The thirdweb `contract` object is serializable and can safely be used in contexts (e.g., React-Query keys) that require serializable values.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts
🧬 Code graph analysis (26)
packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx (1)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
ModalHeader(36-68)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (3)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
ModeInfo(12-23)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
ModalHeader(36-68)
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareRequest(14-18)BridgePrepareResult(23-27)
packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
DirectPaymentInfo(5-10)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx (4)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/types.ts (2)
PaymentMethod(32-46)ModeInfo(12-23)packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx (1)
TokenBalanceRow(14-98)packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts (1)
useTransactionDetails(55-187)
packages/thirdweb/src/stories/Bridge/Transaction/TransactionWidget.stories.tsx (3)
packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
TRANSACTION_UI_OPTIONS(800-840)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (2)
TransactionWidgetProps(56-215)TransactionWidget(330-340)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (16)
packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/web/ui/Bridge/types.ts (2)
PaymentMethod(32-46)RequiredParams(25-27)packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
FundWallet(95-388)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(102-322)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(63-450)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)packages/thirdweb/src/react/web/ui/components/DynamicHeight.tsx (1)
DynamicHeight(8-33)
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (2)
packages/thirdweb/src/bridge/types/Chain.ts (1)
Chain(5-40)packages/thirdweb/src/exports/thirdweb.ts (1)
ThirdwebClient(25-25)
packages/thirdweb/src/stories/BuyWidget.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
BuyWidget(328-338)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)packages/thirdweb/src/exports/chains.ts (2)
base(17-17)ethereum(32-32)
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (7)
packages/thirdweb/src/exports/thirdweb.ts (1)
PreparedTransaction(179-179)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts (1)
useTransactionDetails(55-187)packages/thirdweb/src/exports/utils.ts (2)
resolvePromisedValue(198-198)shortenAddress(149-149)packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (1)
WithHeader(9-66)packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx (1)
ChainIcon(159-186)packages/thirdweb/src/react/web/ui/components/ChainName.tsx (1)
ChainName(11-30)
packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx (2)
packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(63-450)packages/thirdweb/src/stories/Bridge/fixtures.ts (3)
simpleOnrampQuote(93-123)DIRECT_PAYMENT_UI_OPTIONS(704-797)TRANSACTION_UI_OPTIONS(800-840)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/stories/Bridge/Transaction/useSendTransactionModal.stories.tsx (4)
packages/thirdweb/src/exports/thirdweb.ts (2)
prepareTransaction(181-181)PreparedTransaction(179-179)packages/thirdweb/src/exports/chains.ts (2)
base(17-17)sepolia(74-74)packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx (1)
useSendTransaction(124-179)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (2)
packages/thirdweb/src/react/web/ui/PayEmbed.tsx (1)
PayEmbedConnectOptions(431-541)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx (3)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
TransactionWidgetContentWrapper(351-483)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)
packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (2)
packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/components/text.tsx (1)
Text(18-34)
packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
packages/thirdweb/src/pay/types.ts (1)
PurchaseData(1-1)
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (13)
packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts (2)
BridgePrepareResult(23-27)BridgePrepareRequest(14-18)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
useTokenQuery(13-45)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
PaymentMethod(32-46)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (1)
CompletedStatusResult(19-26)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (1)
DirectPayment(48-205)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(102-322)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(63-450)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)
packages/thirdweb/src/react/web/ui/Bridge/swap-widget/SwapWidget.tsx (1)
packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(102-322)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
USDC(38-49)
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (15)
packages/thirdweb/src/transaction/actions/wait-for-tx-receipt.ts (1)
WaitForReceiptOptions(14-20)packages/thirdweb/src/react/web/ui/ConnectWallet/locale/getConnectLocale.ts (1)
useConnectLocale(45-54)packages/thirdweb/src/exports/utils.ts (1)
stringify(189-189)packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
UnsupportedTokenScreen(25-101)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
TransactionPayment(80-448)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
PaymentSelection(102-322)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
QuoteLoader(83-164)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (1)
PaymentDetails(63-450)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
StepRunner(75-426)packages/thirdweb/src/react/web/adapters/WindowAdapter.ts (1)
webWindowAdapter(23-23)packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx (1)
ErrorBanner(31-107)packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx (1)
ExecutingTxScreen(19-183)packages/thirdweb/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx (1)
EmbedContainer(459-485)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (4)
packages/thirdweb/src/react/web/ui/PayEmbed.tsx (1)
PayEmbedConnectOptions(431-541)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(14-16)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx (1)
TokenAndChain(22-99)
packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (4)
packages/thirdweb/src/react/web/ui/Bridge/types.ts (1)
DirectPaymentInfo(5-10)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx (1)
FiatValue(15-55)packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx (1)
WithHeader(9-66)
packages/thirdweb/src/react/web/ui/Bridge/common/token-query.ts (1)
packages/thirdweb/src/pay/convert/get-token.ts (1)
getToken(6-37)
packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx (1)
SuccessScreen(53-199)packages/thirdweb/src/stories/Bridge/fixtures.ts (2)
simpleBuyQuote(251-311)simpleOnrampQuote(93-123)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)
packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx (3)
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx (1)
UnsupportedTokenScreen(25-101)packages/thirdweb/src/stories/utils.tsx (2)
storyClient(14-16)ModalThemeWrapper(18-36)packages/thirdweb/src/exports/thirdweb.ts (2)
defineChain(18-18)NATIVE_TOKEN_ADDRESS(31-31)
🪛 Gitleaks (8.28.0)
packages/thirdweb/src/stories/BuyWidget.stories.tsx
[high] 26-26: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 39-39: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 52-52: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 101-101: 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). (8)
- GitHub Check: Build Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
PR-Codex overview
This PR primarily focuses on refactoring and enhancing the payment and transaction handling components in the
thirdweblibrary. It introduces new types, improves existing interfaces, and modifies various components to better handle payment methods and UI states.Detailed summary
paymentMachineand related stories.currencyprop toTransactionModal.UnsupportedTokenScreenPropsto enforce required properties.DepositScreenby removing theonBackprop.StepRunnerPropsto require properties instead of optional.PaymentSelectionPropsto enforce required fields.TransactionModalto manage deposit flow better.TransactionWidgetandCheckoutWidget.SuccessScreento handle payment ID states.FundWalletandTransactionPaymentto include metadata and currency props.Summary by CodeRabbit
New Features
Refactor
Documentation