[SDK] Fix fiat payments with no wallet connected #8048
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: a38e299 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughOptionalized wallet usage across fiat payment flows and step execution, added recipient-address resolution/validation for fiat payments, made several React Query functions explicitly return boolean, introduced a new optional BuyWidget prop, and added a patch changeset: “Fix fiat payments with no wallets connected.” Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant U as User
participant B as Bridge UI
participant SR as StepRunner
participant SE as useStepExecutor
participant W as Wallet (optional)
participant A as Account
participant C as Chain
U->>B: Select fiat payment (wallet may be absent)
B->>SR: Render (wallet may be undefined)
SR->>SE: start({ wallet?, steps })
alt No transactions
SE-->>SR: Skip wallet/account checks
SR-->>B: Complete without tx execution
else Transactions present
alt Wallet missing
SE-->>SR: Error "No wallet provided to execute transactions" (400)
SR-->>B: Surface error
else Wallet provided
SE->>W: getAccount()
alt No account
SE-->>SR: Error "Wallet not connected" (400)
SR-->>B: Surface error
else Account present
SE->>W: getChain()
SE->>C: switch if needed
opt Batch path
SE->>A: sendBatchTransaction(batchedTxs)
end
opt Single-tx path
SE->>A: sendTransaction(tx)
end
SE-->>SR: Completed statuses
SR-->>B: onComplete()
end
end
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
joaquim-verges
changed the title
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
size-limit report 📦
|
Codecov Report❌ Patch coverage is ❌ Your patch status has failed because the patch coverage (0.00%) is below the target coverage (80.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## main #8048 +/- ##
==========================================
- Coverage 56.54% 56.53% -0.02%
==========================================
Files 904 904
Lines 58842 58857 +15
Branches 4167 4170 +3
==========================================
+ Hits 33275 33276 +1
- Misses 25461 25476 +15
+ Partials 106 105 -1
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
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/payment-selection/PaymentSelection.tsx (1)
108-124: Add TSDoc and explicit return type for public export.Repo guidelines require comprehensive TSDoc (with an
@exampleand custom tag) and explicit return types.+/** + * Payment method selection for Bridge flows (crypto or fiat). + * Resolves payer wallet and recipient, and routes to the chosen on‑ramp/provider. + * @beta + * @example + * <PaymentSelection + * destinationToken={token} + * destinationAmount="100" + * client={client} + * receiverAddress="0xabc..." + * country="US" + * connectLocale={{ locale: "en" }} + * onPaymentMethodSelected={(m) => console.log(m)} + * onError={(e) => console.error(e)} + * /> + */ -export function PaymentSelection({ +export function PaymentSelection({ destinationToken, client, destinationAmount, receiverAddress, onPaymentMethodSelected, onError, onBack, connectOptions, connectLocale, includeDestinationToken, paymentMethods = ["crypto", "card"], supportedTokens, feePayer, currency, country, -}: PaymentSelectionProps) { +}: PaymentSelectionProps): JSX.Element {.changeset/fuzzy-suits-wear.md (1)
6-6: Remove stray character that will break the changeset parser.There is a dangling
6at EOF.Apply:
-6packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
22-35: Fix unguarded payerWallet accesses in Bridge/QuoteLoader
- Found unguarded uses that can throw when payerWallet is undefined:
- packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx — paymentMethod.payerWallet.getAccount()?.address (lines ~224 and ~243).
- Action: guard these accesses (check paymentMethod.type === "wallet" before use or use optional chaining: paymentMethod.payerWallet?.getAccount()?.address).
- Note: other hits (PaymentOverview, PaymentDetails, TokenSelection) are already type‑narrowed or use optional chaining.
🧹 Nitpick comments (4)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (3)
308-317: Provider screen receives emptytoAddresswhen only wallet is present.Mirror the recipient fallback so the provider UI is prefilled correctly.
- toAddress={receiverAddress || ""} + toAddress={receiverAddress ?? payerWallet?.getAccount()?.address ?? ""}
158-163: Boolean default may exclude destination token unintentionally.
A || (B !== C)evaluates tofalsewhen both addresses areundefined, potentially excluding the destination token when intent is “include unless same address is known.” Consider a nullish default.- includeDestinationToken: - includeDestinationToken || - receiverAddress?.toLowerCase() !== - payerWallet?.getAccount()?.address?.toLowerCase(), + includeDestinationToken: + includeDestinationToken ?? + (Boolean(receiverAddress) && + receiverAddress!.toLowerCase() !== + payerWallet?.getAccount()?.address?.toLowerCase()),
132-143: Side‑effect viauseQueryhas a static key.For analytics side‑effects, prefer a stable
useEffector at least key by inputs to avoid accidental deduping/caching conflicts across pages.- useQuery({ + useQuery({ queryFn: () => { trackPayEvent({ client, event: "payment_selection", toChainId: destinationToken.chainId, toToken: destinationToken.address, }); return true; }, - queryKey: ["payment_selection"], + queryKey: ["payment_selection", destinationToken.chainId, destinationToken.address], });packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx (1)
39-40: Key the query by the effective currency to avoid duplicate caches.
queryFndefaults to"USD"butqueryKeyusesprops.currency(possiblyundefined), causing two cache entries for USD. Normalize in the key.Apply:
- props.currency, + props.currency ?? "USD",
📜 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 (9)
.changeset/fuzzy-suits-wear.md(1 hunks)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts(2 hunks)packages/thirdweb/src/react/core/machines/paymentMachine.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.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/react/core/machines/paymentMachine.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/core/hooks/useStepExecutor.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/react/core/machines/paymentMachine.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/core/hooks/useStepExecutor.ts
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/react/core/machines/paymentMachine.tspackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsxpackages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/core/hooks/useStepExecutor.ts
.changeset/*.md
📄 CodeRabbit inference engine (AGENTS.md)
.changeset/*.md: Each change inpackages/*must include a changeset for the appropriate package
Version bump rules: patch for non‑API changes; minor for new/modified public API
Files:
.changeset/fuzzy-suits-wear.md
🧠 Learnings (5)
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Support for in-app wallets (social/email login)
Applied to files:
.changeset/fuzzy-suits-wear.mdpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to apps/{dashboard,playground-web}/**/*.{ts,tsx} : Wrap client-side data fetching calls in React Query (`tanstack/react-query`)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.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/QuoteLoader.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Unified `Wallet` and `Account` interfaces in wallet architecture
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Smart wallets with account abstraction
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx
🧬 Code graph analysis (2)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-35)
packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (2)
packages/thirdweb/src/bridge/types/Errors.ts (1)
ApiError(11-36)packages/thirdweb/src/chains/utils.ts (1)
getCachedChain(79-89)
⏰ 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, webpack)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (8)
packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx (1)
136-136: Fix for queryFn return type.Explicitly returning
trueaddresses the TypeScript requirement that useQuery's queryFn must return a value. This ensures the query resolves properly while maintaining the side effect of tracking the pay event.packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (3)
41-41: Correctly makes wallet optional with proper validation.Making the
walletparameter optional is essential for supporting fiat-only flows. The implementation correctly validates wallet presence when transactions need to be executed, ensuring type safety while enabling no-wallet scenarios.
420-436: Excellent guard logic for wallet-dependent operations.The implementation properly separates concerns:
- Only validates wallet presence when there are actual transactions to execute
- Provides clear, actionable error messages for missing wallet or account
- Maintains existing wallet connection validation logic
This approach allows fiat-only flows (onramp) to proceed without a wallet while ensuring transaction execution paths have proper validation.
438-511: Well-structured transaction execution with proper validation.The transaction execution logic maintains robust error handling and validation:
- Clear error for invalid step indices
- Chain switching when needed
- Smart batching for compatible transactions
- Proper completion tracking
The nested transaction logic is well-organized and maintains the existing behavior while accommodating the optional wallet parameter.
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
33-33: Proper alignment with useStepExecutor changes.Making the
walletprop optional correctly aligns with theuseStepExecutorhook's updated interface. The component still passes the wallet value through, maintaining compatibility while enabling no-wallet execution flows.packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx (2)
104-104: Correct queryFn return value fix.Adding
return trueensures the useQuery call has a proper return value, maintaining consistency with similar patterns throughout the codebase (like in QuoteLoader.tsx).
243-243: Safe optional chaining for wallet access.Using optional chaining (
paymentMethod.payerWallet?.getAccount()?.address) properly handles cases wherepayerWalletmight be undefined in fiat payment flows. This prevents runtime errors while maintaining the existing fallback logic withpreparedQuote.intent.sender.packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (1)
370-372: Simplified execution gating enables no-wallet flows.Removing the
payerWalletrequirement from the execution condition is the key change that allows fiat payments to proceed to the StepRunner without a connected wallet. The StepRunner still receives thepayerWallet(which may be undefined) and theuseStepExecutorhook properly handles the validation when transactions actually need to be executed.This change maintains safety by delegating wallet validation to the appropriate execution layer while removing unnecessary blocking conditions.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
Show resolved
Hide resolved
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
Show resolved
Hide resolved
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
Show resolved
Hide resolved
joaquim-verges
force-pushed
the
Fix_fiat_payments_with_no_wallet_connected
branch
from
066082b to
9646cfd
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (5)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
197-201: Document precedence and stability of receiverAddressClarify that receiverAddress takes precedence over the connected wallet address (and that it can be used when no wallet is connected). Consider tagging this prop with @beta (repo guideline) and adding a short example in the BuyWidget docs to avoid ambiguity.
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx (1)
33-33: Make wallet optional — add UX hint when missingOptionalizing wallet matches the executor change. Minor UX: when wallet is absent and txs exist, surface a clearer CTA than “Retry” (e.g., show “Back” to method selection) on INVALID_INPUT to guide users.
packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (2)
41-42: Public API: wallet is now optional — update JSDocGood change. Please update StepExecutorOptions docs to state that wallet is required only when transactions exist; onramp‑only runs without a wallet.
420-511: Guard tx execution on wallet presence — treat user-initiated aborts as non-errorsVerified ErrorCode includes "INVALID_INPUT" (packages/thirdweb/src/bridge/types/Errors.ts).
@@ - } catch (err) { - console.error("Error executing payment", err); - if (err instanceof ApiError) { - setError(err); - } else { - setError( - new ApiError({ - code: "UNKNOWN_ERROR", - message: (err as Error)?.message || "An unknown error occurred", - statusCode: 500, - }), - ); - } + } catch (err) { + // Treat user-initiated aborts as non-errors + const msg = (err as Error)?.message || ""; + const aborted = + abortControllerRef.current?.signal.aborted || msg === "Polling aborted"; + if (!aborted) { + console.error("Error executing payment", err); + if (err instanceof ApiError) { + setError(err); + } else { + setError( + new ApiError({ + code: "UNKNOWN_ERROR", + message: msg || "An unknown error occurred", + statusCode: 500, + }), + ); + } + }packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (1)
370-385: Bubble StepRunner executor errors to the payment machine (add onError and forward errors)StepRunner consumes useStepExecutor errors but does not notify BridgeOrchestrator, so the machine never receives ERROR_OCCURRED and the ErrorBanner won't appear.
- Add onError?: (error: Error) => void to packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx and invoke it when useStepExecutor reports an error (e.g., "No wallet provided to execute transactions").
- In packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx pass handleError to StepRunner (onError={handleError}) so the machine can transition to the error 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 (10)
.changeset/fuzzy-suits-wear.md(1 hunks)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts(2 hunks)packages/thirdweb/src/react/core/machines/paymentMachine.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(1 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (6)
- .changeset/fuzzy-suits-wear.md
- packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx
- packages/thirdweb/src/react/core/machines/paymentMachine.ts
- packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx
- packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
- packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
🧰 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/BridgeOrchestrator.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/core/hooks/useStepExecutor.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/core/hooks/useStepExecutor.ts
packages/thirdweb/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
packages/thirdweb/**/*.{ts,tsx}: Every public symbol must have comprehensive TSDoc with at least one compiling@exampleand a custom tag (@beta,@internal,@experimental, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
Lazy‑load heavy dependencies inside async paths (e.g.,const { jsPDF } = await import("jspdf"))
Files:
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsxpackages/thirdweb/src/react/core/hooks/useStepExecutor.ts
🧠 Learnings (3)
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Unified `Wallet` and `Account` interfaces in wallet architecture
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Smart wallets with account abstraction
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx
📚 Learning: 2025-07-18T19:19:55.613Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: CLAUDE.md:0-0
Timestamp: 2025-07-18T19:19:55.613Z
Learning: Applies to packages/thirdweb/src/wallets/** : Support for in-app wallets (social/email login)
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx
🧬 Code graph analysis (2)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
packages/thirdweb/src/exports/utils.ts (1)
Address(144-144)
packages/thirdweb/src/react/core/hooks/useStepExecutor.ts (2)
packages/thirdweb/src/bridge/types/Errors.ts (1)
ApiError(11-36)packages/thirdweb/src/chains/utils.ts (1)
getCachedChain(79-89)
⏰ 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, vite)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
joaquim-verges
force-pushed
the
Fix_fiat_payments_with_no_wallet_connected
branch
from
9646cfd to
a38e299
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (3)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (3)
207-207: Default currency: use nullish coalescing.Prevents overriding a deliberately empty string and aligns with common style.
- currency: currency || "USD", + currency: currency ?? "USD",
209-209: Ensure all downstream usages treatpayerWalletas optional.Please re-scan for unsafe derefs or non‑null assertions on
payerWallet.#!/bin/bash # Find non-null assertions and unguarded dereferences of payerWallet rg -nP -C2 --type=ts '\bpayerWallet\s*!' rg -nP -C2 --type=ts '(?<!\?)\bpayerWallet\.(getAccount|[A-Za-z_]\w*)\('
312-314: UI alignment fix fortoAddress— LGTM.Now consistent with the guard used on selection; avoids empty address when a wallet is connected.
🧹 Nitpick comments (1)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
199-204: Guard looks good; prefer nullish coalescing for address resolution.Use
??to avoid defaulting whenreceiverAddressis an empty string and for consistency with TS idioms.- const recipientAddress = - receiverAddress || payerWallet?.getAccount()?.address; + const recipientAddress = + receiverAddress ?? payerWallet?.getAccount()?.address;
📜 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 (10)
.changeset/fuzzy-suits-wear.md(1 hunks)packages/thirdweb/src/react/core/hooks/useStepExecutor.ts(2 hunks)packages/thirdweb/src/react/core/machines/paymentMachine.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(2 hunks)packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (9)
- packages/thirdweb/src/react/core/machines/paymentMachine.ts
- packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
- packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx
- .changeset/fuzzy-suits-wear.md
- packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx
- packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx
- packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
- packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx
- packages/thirdweb/src/react/core/hooks/useStepExecutor.ts
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.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-selection/PaymentSelection.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-selection/PaymentSelection.tsx
🧠 Learnings (1)
📚 Learning: 2025-06-26T19:46:04.024Z
Learnt from: gregfromstl
PR: thirdweb-dev/js#7450
File: packages/thirdweb/src/bridge/Webhook.ts:57-81
Timestamp: 2025-06-26T19:46:04.024Z
Learning: In the onramp webhook schema (`packages/thirdweb/src/bridge/Webhook.ts`), the `currencyAmount` field is intentionally typed as `z.number()` while other amount fields use `z.string()` because `currencyAmount` represents fiat currency amounts in decimals (like $10.50), whereas other amount fields represent token amounts in wei (very large integers that benefit from bigint representation). The different naming convention (`currencyAmount` vs `amount`) reflects this intentional distinction.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
🧬 Code graph analysis (1)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
packages/thirdweb/src/react/core/machines/paymentMachine.ts (1)
PaymentMethod(22-35)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (7)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
joaquim-verges
deleted the
Fix_fiat_payments_with_no_wallet_connected
branch
PR-Codex overview
This PR focuses on improving the handling of fiat payments in the
thirdwebpackage by makingwalletandpayerWalletoptional, enhancing error handling, and refining transaction execution logic.Detailed summary
walletandpayerWalletin multiple files.PaymentDetailsandBuyWidgetcomponents to utilize new optional props.Summary by CodeRabbit
New Features
Bug Fixes