[SDK] Feature: country Code on Payment Widgets
#7966
Conversation
🦋 Changeset detectedLatest commit: f3eac3f 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. WalkthroughAdds an optional country (ISO 3166 alpha-2) parameter across buy/checkout/transaction flows, threading it from widgets and transaction modal through BridgeOrchestrator to PaymentSelection and FiatProviderSelection, into the fiat quote hook and onramp preparation. Types, props, and stories updated; no control-flow changes beyond propagation. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant App as App/Caller
participant Widget as Buy/Checkout/TransactionWidget
participant TxModal as TransactionModal
participant Orchestrator as BridgeOrchestrator
participant PaySel as PaymentSelection
participant FiatSel as FiatProviderSelection
participant Hook as useBuyWithFiatQuotesForProviders
participant Onramp as prepareOnramp
App->>Widget: render({ country? })
Widget->>Orchestrator: render({ country })
Note right of Orchestrator: defaults to "US" if undefined
Orchestrator->>PaySel: render({ country })
PaySel->>FiatSel: render({ country })
FiatSel->>Hook: useBuyWithFiatQuotesForProviders({ country, ... })
Hook->>Onramp: prepareOnramp({ country, ... })
Onramp-->>Hook: quotes (country-aware)
Hook-->>FiatSel: quotes
FiatSel-->>PaySel: render options
PaySel-->>Orchestrator: selection UI
Orchestrator-->>Widget: proceed flow
App->>TxModal: render({ country? }) Note over App,TxModal: via useSendTransaction
TxModal->>Orchestrator: render({ country })
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
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. |
![graphite-app[bot]](https://avatars.githubusercontent.com/in/158384?s=60&v=4){kind=small}
packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts
Outdated
Show resolved
Hide resolved
size-limit report 📦
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
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/payment-selection/FiatProviderSelection.tsx (1)
171-175: Bug: currency fallback should be "USD", not "US"Passing "US" breaks currency formatting; use the ISO 4217 code.
- {formatCurrencyAmount( - currency || "US", - quote.currencyAmount, - )} + {formatCurrencyAmount( + currency || "USD", + quote.currencyAmount, + )}
🧹 Nitpick comments (17)
.changeset/purple-foxes-wear.md (1)
5-5: Clarify the note to specify ISO 3166-1 alpha-2 and scope.Small copy tweak to reduce ambiguity.
-Adds `country` code option to payment widgets +Adds optional ISO 3166-1 alpha-2 `country` code to payment widgets and onramp flowspackages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts (3)
36-39: Typo: duplicated word “country”.- * The user's ISO 3166 alpha-2 country country code. This is used to determine onramp provider support. + * The user's ISO 3166-1 alpha-2 country code. Used to determine onramp provider support.
99-101: Stabilize queryKey and includecountryexplicitly (avoid objects/clients in keys).Current key uses the whole
paramsobject, which likely includes non-serializable fields (e.g.,client) and can churn caches. Recommend enumerating primitives and addingcountry.- queryKey: ["onramp-prepare", provider, params], + queryKey: [ + "onramp-prepare", + provider, + params?.chainId ?? null, + params?.tokenAddress ?? null, + params?.receiver ?? null, + params?.amount ?? null, + params?.currency ?? "USD", + params?.country?.toUpperCase?.() ?? null, + ],
88-97: Normalizecountryto uppercase before sending.Prevents cache misses and provider mismatches due to casing.
- return prepareOnramp({ + const normalizedCountry = params.country?.toUpperCase(); + return prepareOnramp({ amount: amountWei, chainId: params.chainId, client: params.client, currency: params.currency || "USD", onramp: provider, receiver: params.receiver, tokenAddress: params.tokenAddress, - country: params.country, + country: normalizedCountry, });packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts (2)
93-97: Typo: duplicated word “country”. Also consider adding an example snippet.Fix wording; optionally add a brief example under the main type doc showing
payModal: { country: "GB" }.- /** - * The user's ISO 3166 alpha-2 country country code. This is used to determine onramp provider support. - */ + /** + * The user's ISO 3166-1 alpha-2 country code. Used to determine onramp provider support. + */
93-97: Unify on a sharedCountryCodetype across the package.If you have a shared types barrel, prefer
type CountryCode = Uppercase<string>(or a literal union if available) and reuse it in all surfaces.- country?: string; + country?: CountryCode;Additional (outside this file):
// e.g., packages/thirdweb/src/types.ts export type CountryCode = Uppercase<string>;packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx (1)
35-36: Good default for Storybook; consider exposing as a control.Add
countrytoargTypesso reviewers can toggle examples (e.g., "GB", "CA").tags: ["autodocs"], title: "Bridge/PaymentSelection", } satisfies Meta<typeof PaymentSelectionWithTheme>;Add under
argTypes:argTypes: { + country: { + control: "text", + description: "ISO 3166-1 alpha-2 country code used for fiat providers", + },packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx (1)
45-45: Add Storybook control/docs for countryExpose the new prop via argTypes for discoverability and quick testing.
argTypes: { onCancel: { action: "flow cancelled" }, onComplete: { action: "flow completed" }, onError: { action: "error occurred" }, + country: { + control: "text", + description: "ISO 3166-1 alpha-2 country code (e.g., 'US') used for onramp availability", + }, presetOptions: { control: "object", description: "Quick buy options", },packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx (1)
36-36: Document the new public propAdd a short TSDoc so consumers understand intent.
onTxSent: (data: WaitForReceiptOptions) => void; modalMode: "buy" | "deposit"; - country?: string; + /** ISO 3166-1 alpha-2 country code used to determine onramp availability. */ + country?: string;packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
196-198: Fix doc typo; consider a shared CountryCode typeRemove duplicated word and, optionally, standardize on a shared CountryCode alias across widgets/hooks for consistency.
- /** The user's ISO 3166 alpha-2 country country code. This is used to determine onramp provider support. */ + /** The user's ISO 3166-1 alpha-2 country code. Used to determine onramp provider support. */ country?: string;packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
187-191: Fix doc typo; align wording with TransactionWidgetMinor copy fix for clarity and consistency.
- /** - * The user's ISO 3166 alpha-2 country country code. This is used to determine onramp provider support. - */ + /** + * The user's ISO 3166-1 alpha-2 country code. Used to determine onramp provider support. + */ country?: string;packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
196-200: Fix TSDoc wording for country propNit: duplicate word and spec name. Use “ISO 3166-1 alpha-2” and remove the repetition.
/** - * The user's ISO 3166 alpha-2 country country code. This is used to determine onramp provider support. + * The user's ISO 3166-1 alpha-2 country code. Used to determine onramp provider support. */ country?: string;packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (3)
128-132: Make prop optional and align docs with defaultCurrent type requires the key but allows undefined; callers conceptually treat it as optional. Also fix the spec name and mention the default to avoid surprises.
/** - * The user's ISO 3166 alpha-2 country country code. This is used to determine onramp provider support. + * The user's ISO 3166-1 alpha-2 country code. Used to determine onramp provider support. + * @default "US" */ - country: string | undefined; + country?: string;
156-157: Reconsider defaulting to "US" at this layerDefaulting here forces "US" even when upstream intentionally passes undefined to allow downstream inference. Either:
- keep the default but document clearly (see prior comment), or
- remove this default and apply defaulting at the first consumer that truly requires a value (e.g., the fiat quotes/onramp prep), which preserves “unspecified” semantics across the tree.
If you keep it, also normalize to uppercase at usage.
-export function BridgeOrchestrator({ +export function BridgeOrchestrator({ client, uiOptions, receiverAddress, onComplete, onError, onCancel, connectOptions, connectLocale, purchaseData, paymentLinkId, presetOptions, paymentMethods = ["crypto", "card"], showThirdwebBranding = true, supportedTokens, - country = "US", + country = "US", }: BridgeOrchestratorProps) {If opting for downstream defaulting instead:
- supportedTokens, - country = "US", + supportedTokens, + country, }: BridgeOrchestratorProps) {
328-329: Normalize country to uppercase before passing downstreamEnsure consistent formatting for provider matching.
- country={country} + country={country?.toUpperCase()}packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (2)
94-98: Make prop optional and fix TSDoc wordingMirror BridgeOrchestrator’s prop shape and fix duplicate word/spec name.
/** - * The user's ISO 3166 alpha-2 country country code. This is used to determine onramp provider support. + * The user's ISO 3166-1 alpha-2 country code. Used to determine onramp provider support. */ - country: string | undefined; + country?: string;
305-315: Pass-through to FiatProviderSelection looks correctcountry is forwarded to fiat selection; consider upstream normalization to keep this layer simple.
If upstream normalization is not added, normalize here instead:
- <FiatProviderSelection - country={country} + <FiatProviderSelection + country={country?.toUpperCase()} client={client} onProviderSelected={handleOnrampProviderSelected}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (13)
.changeset/purple-foxes-wear.md(1 hunks)packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts(2 hunks)packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts(1 hunks)packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(3 hunks)packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx(1 hunks)
🧰 Additional context used
📓 Path-based instructions (5)
.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/purple-foxes-wear.md
**/*.{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/hooks/transaction/useSendTransaction.tspackages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.tspackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.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/core/hooks/transaction/useSendTransaction.tspackages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.tspackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.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/core/hooks/transaction/useSendTransaction.tspackages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsxpackages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.tspackages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsxpackages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.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/BridgeOrchestrator.stories.tsxpackages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx
⏰ 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: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (10)
packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts (1)
96-97: LGTM: threadscountrytoprepareOnramp.packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts (1)
49-99: Public API expanded ⇒ ensure minor bump in.changeset.Adding
country?: stringto the exportedSendTransactionPayModalConfigis a public API change. Align the changeset tominor(see.changeset/purple-foxes-wear.md).packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx (2)
140-140: LGTM: country is correctly forwarded to TransactionModal.
139-167: Verify country prop forwarding and avoid implicit “US” default
Confirm thatTransactionModalaccepts an optionalcountry?: stringprop and thatBridgeOrchestratordoes not inject or fallback to"US"when no country is provided.packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx (1)
118-121: LGTM: country forwarded to BridgeOrchestratorProp is correctly threaded into the orchestrator.
packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx (1)
447-449: LGTM: country plumbed through to BridgeOrchestratorForwarding is correct and preserves optionality.
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
439-441: LGTM: country forwarded to BridgeOrchestratorWiring looks good.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx (1)
31-31: LGTM: country threaded into quotes hookProp added, destructured, and passed to useBuyWithFiatQuotesForProviders as intended.
Also applies to: 63-64, 75-76
packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx (1)
407-409: Prop forwarding looks goodcountry is correctly threaded into BridgeOrchestrator.
If BridgeOrchestrator defaults undefined to "US", confirm that this is intentional and won’t override any “auto-detect/infer-later” behavior in downstream hooks.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx (1)
123-124: LGTM: prop threaded into componentDestructuring country is consistent with upstream.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #7966 +/- ##
=======================================
Coverage 56.52% 56.52%
=======================================
Files 904 904
Lines 58623 58633 +10
Branches 4146 4147 +1
=======================================
+ Hits 33138 33144 +6
- Misses 25380 25383 +3
- Partials 105 106 +1
🚀 New features to boost your workflow:
|
gregfromstl
force-pushed
the
feat/country-code
branch
from
3747e9c to
f3eac3f
Compare
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/payment-selection/FiatProviderSelection.tsx (1)
171-174: Currency code bug: use "USD", not "US"formatCurrencyAmount likely expects ISO 4217 (e.g., “USD”). “US” will misformat or fail.
- {formatCurrencyAmount( - currency || "US", - quote.currencyAmount, - )} + {formatCurrencyAmount( + currency || "USD", + quote.currencyAmount, + )}
🧹 Nitpick comments (4)
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (3)
187-191: Normalize and type-hint the country codeConsider normalizing to uppercase and tightening the type to reduce downstream ambiguity and mismatches with providers expecting “US”, “GB”, etc.
/** * The user's ISO 3166 alpha-2 country code. This is used to determine onramp provider support. */ - country?: string; + country?: string; // e.g. "US", "GB" + // Tip: normalize to uppercase at callsite to avoid case issuesOptional follow-up (outside this hunk): create a shared alias to reuse across widgets.
// packages/thirdweb/src/types/country.ts /** ISO 3166 alpha-2 uppercase country code, e.g. "US" */ export type CountryCode = string;
439-441: Pass an uppercased, sanitized country codeUppercasing here avoids edge cases from “us”, “gb”, etc., while preserving BridgeOrchestrator’s default “US”.
- <BridgeOrchestrator - country={props.country} + <BridgeOrchestrator + country={props.country?.toUpperCase()}
410-411: Narrow the queryKey to avoid unnecessary refetches when unrelated props (like country) changebridgeDataQuery does not depend on country; stringifying the whole props object causes avoidable refetches and cache misses.
- queryKey: ["bridgeData", stringify(props)], + queryKey: [ + "bridgeData", + props.chain.id, + checksumAddress(props.tokenAddress ?? NATIVE_TOKEN_ADDRESS), + props.amount, + props.currency ?? "USD", + props.title, + props.description, + props.image, + props.buttonLabel, + ],packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx (1)
75-76: Optional: Uppercasecountryfor consistent provider queriesThe hook’s
queryKeyalready includes the fullparamsobject (includingcountry), so changing country invalidates cached quotes. To avoid mismatches between lowercase/uppercase codes, consider:- country, + country: country?.toUpperCase(),
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (13)
.changeset/purple-foxes-wear.md(1 hunks)packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts(2 hunks)packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts(1 hunks)packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx(3 hunks)packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx(1 hunks)packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- .changeset/purple-foxes-wear.md
🚧 Files skipped from review as they are similar to previous changes (10)
- packages/thirdweb/src/react/web/ui/Bridge/CheckoutWidget.tsx
- packages/thirdweb/src/react/web/ui/Bridge/TransactionWidget.tsx
- packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx
- packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx
- packages/thirdweb/src/react/web/hooks/transaction/useSendTransaction.tsx
- packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx
- packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts
- packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx
- packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts
- packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.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/payment-selection/FiatProviderSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.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/FiatProviderSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.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/FiatProviderSelection.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
⏰ 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, esbuild)
- 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 (2)
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx (2)
31-32: Prop addition looks goodShape and optionality are correct for threading country through selection.
63-64: Destructuring is fine; rely on upstream defaultBridgeOrchestrator sets a default “US”, so passing through undefined here is acceptable.
PR-Codex overview
This PR introduces a
countrycode option to various payment widgets in thethirdwebpackage, enhancing the payment processing functionality by allowing the specification of the user's ISO 3166 alpha-2 country code.Detailed summary
countryproperty to payment widgets and related components.PaymentSelection,TransactionModal,BuyWidget,CheckoutWidget,FiatProviderSelection, andBridgeOrchestratorto accept and utilizecountry.countryin multiple files explaining its purpose.Summary by CodeRabbit
New Features
Documentation
Chores