[SDK] Feature: add ability to exclude token prices from Bridge.tokens #7942
Conversation
🦋 Changeset detectedLatest commit: 152069a 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.
|
WalkthroughAdds price-aware token types across bridge, pay, and react layers by introducing TokenWithPrices, updating APIs to return/include it, and adding an includePrices option to Bridge.tokens. Adjusts related types/exports, tests, and UI/fixtures. Route types gain transactions: RouteTransaction[]. Onramp and various consumers now use TokenWithPrices. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor Dev as Caller
participant SDK as Bridge.tokens()
participant HTTP as Bridge API
Dev->>SDK: tokens({ chainId, ... , includePrices?: boolean })
alt includePrices defined
SDK->>HTTP: GET /bridge/tokens?chainId=...&includePrices={true|false}
else not provided
SDK->>HTTP: GET /bridge/tokens?chainId=...
end
HTTP-->>SDK: { data: Token[] | TokenWithPrices[] }
SDK-->>Dev: Promise<Token[] | TokenWithPrices[]>
note over Dev,SDK: Returned element type matches includePrices generic
sequenceDiagram
autonumber
actor UI as UI Flow
participant PM as paymentMachine
participant OR as Onramp.prepareQuote
UI->>PM: DESTINATION_CONFIRMED(destinationToken: TokenWithPrices)
PM-->>UI: Context updated with TokenWithPrices
UI->>OR: prepareQuote(...)
OR-->>UI: { destinationToken: TokenWithPrices, ... }
note over UI: Consumers can read token.prices[...] for display/calcs
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. |
size-limit report 📦
|
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 (7)
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (3)
107-111: Fix optional chaining to avoid crash when erc20Value/tokenAddress are undefinedCalling toLowerCase() on possibly undefined will throw.
- erc20Value?.tokenAddress.toLowerCase() !== NATIVE_TOKEN_ADDRESS + erc20Value?.tokenAddress?.toLowerCase() !== NATIVE_TOKEN_ADDRESS ? erc20Value?.tokenAddress : undefined,
116-117: Harden react-query cache key to include chain + tokenBalance depends on chain and token; current key risks stale data when those change.
- queryKey: ["user-balance", activeAccount?.address], + queryKey: [ + "user-balance", + activeAccount?.address, + uiOptions.transaction.chain.id, + (await resolvePromisedValue(uiOptions.transaction.erc20Value))?.tokenAddress ?? + NATIVE_TOKEN_ADDRESS, + ],Note: If you prefer not to await in queryKey, precompute erc20Value via a useMemo outside the query and reference it here.
372-407: Compare balances using on-chain units (bigint) instead of Number()
Replace the formatted string comparisons with raw wei values to eliminate float imprecision:
- Have your balance query return the wallet balance as a bigint (e.g.
balanceWei) rather than a decimal string.- In the click handler, compare
userBalanceWeidirectly againsttransactionDataQuery.data.totalCostWei(both bigints) instead ofNumber(userBalance)vsNumber(totalCost).- Remove all
Number(...)conversions in this block.packages/thirdweb/src/stories/Bridge/fixtures.ts (3)
348-349: Replace legacy priceUsd with prices to match TokenWithPrices- priceUsd: 2500.0, + prices: { USD: 2500.0 },
395-397: Replace remaining priceUsd occurrences with prices in buyWithApprovalQuote- priceUsd: 1.0, + prices: { USD: 1.0 },Apply to both destinationToken and originToken blocks.
Also applies to: 407-409
462-464: Normalize all complexBuyQuote tokens to prices map- priceUsd: 1.0, + prices: { USD: 1.0 },- priceUsd: 2500.0, + prices: { USD: 2500.0 },- priceUsd: 0.00642458, + prices: { USD: 0.00642458 },Apply to each token block listed in these ranges.
Also applies to: 472-474, 506-508, 518-520, 551-553, 563-565
packages/thirdweb/src/bridge/Token.ts (1)
32-39: Update examples: remove deprecated priceUsd and align with new shape.Examples show priceUsd alongside prices, but the types only expose prices. This will confuse SDK consumers.
- * iconUri: "https://assets.relay.link/icons/1/light.png", - * priceUsd: 2000.50, + * iconUri: "https://assets.relay.link/icons/1/light.png", * prices: { * USD: 2000.50, * EUR: 1800.00, * GBP: 1500.00, * JPY: 10000.00 * }- * iconUri: "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png", - * priceUsd: 1.00, + * iconUri: "https://assets.coingecko.com/coins/images/6319/large/USD_Coin_icon.png", * prices: { * USD: 1.00, * EUR: 0.84, * GBP: 0.73, * JPY: 120.00 * }Additionally, consider noting: “Return type depends on includePrices (Token[] | TokenWithPrices[]).”
Also applies to: 47-54
🧹 Nitpick comments (11)
.changeset/ripe-teeth-fold.md (1)
5-5: Clarify default behavior and public type changes in the changeset.Spell out that Bridge.tokens now accepts includePrices?: boolean (default true), introduce TokenWithPrices, and note surfaces updated to return it (e.g., Onramp.prepare destinationToken). Add a brief migration/example to avoid confusion.
Apply this diff to expand the note:
Adds the ability to exclude prices from Bridge.tokens + +- New: `TokenWithPrices` type (`{ ...Token, prices: Record<string, number> }`). +- Bridge: `tokens(..., { includePrices?: boolean })` (default `true`). Set `false` to omit prices. +- Affected surfaces now return `TokenWithPrices` when prices are included (e.g. `Onramp.prepare().destinationToken`). +- Example: + ```ts + const withPrices = await Bridge.tokens(client, { includePrices: true }); + const withoutPrices = await Bridge.tokens(client, { includePrices: false }); + ```packages/thirdweb/src/bridge/types/Token.ts (1)
12-14: Document and make the prices map read-only.Clarifies currency semantics and prevents accidental mutation in consumers.
-export type TokenWithPrices = Token & { - prices: Record<string, number>; -}; +/** + * Token extended with fiat prices keyed by ISO 4217 codes (e.g. "USD"). + * Values are spot prices in the given currency. + */ +export type TokenWithPrices = Token & { + readonly prices: Readonly<Record<string, number>>; +};packages/thirdweb/src/bridge/Onramp.ts (1)
10-10: Public API now returns TokenWithPrices; update docs and example.The JSDoc “example result” block doesn’t show
destinationToken(withprices). Add a short note so SDK consumers know prices are available.Would you like me to open a follow-up PR to:
- add a brief JSDoc line on
destinationTokenmentioningprices,- and update the example payload in this file?
Also applies to: 36-36
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (1)
225-247: Simplify/standardize “Unknown Contract” guardSingle check is sufficient and avoids the stray "UnknownContract" variant.
- {contractName !== "UnknownContract" && - contractName !== undefined && - contractName !== "Unknown Contract" && ( + {contractName && contractName !== "Unknown Contract" && (packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
263-276: Disable quick-amount buttons when price is unavailableCurrently handleQuickAmount silently no-ops; better UX to disable.
- {presetOptions?.map((amount) => ( + {presetOptions?.map((amount) => ( <Button key={amount} + disabled={ + !uiOptions.destinationToken.prices[ + uiOptions.currency || "USD" + ] + } onClick={() => handleQuickAmount(Number(amount))}packages/thirdweb/src/bridge/Token.test.ts (2)
25-25: Also assert price value type to catch shape regressionsTiny hardening: ensure at least USD (or any) entry is numeric when present.
- expect(token).toHaveProperty("prices"); + expect(token).toHaveProperty("prices"); + expect(typeof Object.values(token.prices ?? {})[0]).toBe("number");
37-54: Type-level mismatch: return type should depend onincludePrices
Thetokenssignature still defaults toTokenWithPrices[]regardless ofincludePrices. Update it to a single generic and conditional return:-export async function tokens< - IncludePrices extends boolean = true, - R extends Token | TokenWithPrices = TokenWithPrices, ->(options: tokens.Options<IncludePrices>): Promise<R[]> { +export async function tokens<IncludePrices extends boolean = true>( + options: tokens.Options<IncludePrices>, +): Promise<IncludePrices extends true ? TokenWithPrices[] : Token[]> {And in the test make the intent explicit:
-const result = await tokens({ +const result = await tokens<false>({ client, includePrices: false, });This ensures TS enforces presence/absence of
pricescorrectly.packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (1)
2-2: Avoid deep import; use bridge index for stability.Import from the index barrel to reduce churn and keep layering consistent.
-import type { TokenWithPrices } from "../../../../bridge/types/Token.js"; +import type { Token, TokenWithPrices } from "../../../../bridge/index.js";packages/thirdweb/src/bridge/types/Route.ts (1)
32-32: Minor: simplify optional type.Remove redundant undefined.
- value?: bigint | undefined; + value?: bigint;packages/thirdweb/src/bridge/Token.ts (2)
205-207: Doc the performance tradeoff precisely.Nit: “Setting this to false will speed up the request” → “Setting this to false avoids price lookups and reduces latency/response size.”
244-275: Consider single-responsibility split.Minor: this file now holds both retrieval (GET) and mutation (POST) concerns. Consider moving add() to packages/thirdweb/src/bridge/AddToken.ts for SRP.
📜 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 (16)
.changeset/ripe-teeth-fold.md(1 hunks)packages/thirdweb/src/bridge/Onramp.ts(2 hunks)packages/thirdweb/src/bridge/Token.test.ts(1 hunks)packages/thirdweb/src/bridge/Token.ts(7 hunks)packages/thirdweb/src/bridge/index.ts(1 hunks)packages/thirdweb/src/bridge/types/Route.ts(1 hunks)packages/thirdweb/src/bridge/types/Token.ts(1 hunks)packages/thirdweb/src/pay/convert/get-token.ts(1 hunks)packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts(2 hunks)packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts(2 hunks)packages/thirdweb/src/react/core/machines/paymentMachine.ts(4 hunks)packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx(3 hunks)packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx(2 hunks)packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx(2 hunks)packages/thirdweb/src/stories/Bridge/fixtures.ts(4 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
Files:
packages/thirdweb/src/bridge/index.tspackages/thirdweb/src/react/core/machines/paymentMachine.tspackages/thirdweb/src/react/core/hooks/useTransactionDetails.tspackages/thirdweb/src/bridge/types/Token.tspackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/bridge/Token.test.tspackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/bridge/Onramp.tspackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/bridge/types/Route.tspackages/thirdweb/src/react/core/hooks/usePaymentMethods.tspackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/pay/convert/get-token.tspackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/bridge/Token.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/bridge/index.tspackages/thirdweb/src/react/core/machines/paymentMachine.tspackages/thirdweb/src/react/core/hooks/useTransactionDetails.tspackages/thirdweb/src/bridge/types/Token.tspackages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsxpackages/thirdweb/src/bridge/Token.test.tspackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/bridge/Onramp.tspackages/thirdweb/src/stories/Bridge/fixtures.tspackages/thirdweb/src/bridge/types/Route.tspackages/thirdweb/src/react/core/hooks/usePaymentMethods.tspackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/pay/convert/get-token.tspackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsxpackages/thirdweb/src/bridge/Token.ts
**/*.test.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.test.{ts,tsx}: Place tests alongside code:foo.ts↔foo.test.ts
Use real function invocations with stub data in tests; avoid brittle mocks
Use Mock Service Worker (MSW) for fetch/HTTP call interception in tests
Keep tests deterministic and side-effect free
UseFORKED_ETHEREUM_CHAINfor mainnet interactions andANVIL_CHAINfor isolated tests
Files:
packages/thirdweb/src/bridge/Token.test.ts
🧠 Learnings (8)
📚 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/core/machines/paymentMachine.tspackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.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/core/hooks/useTransactionDetails.tspackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/core/hooks/usePaymentMethods.tspackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.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 : Use React Query (`tanstack/react-query`) for all client data fetching.
Applied to files:
packages/thirdweb/src/react/core/hooks/useTransactionDetails.tspackages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/core/hooks/usePaymentMethods.ts
📚 Learning: 2025-05-27T19:55:25.056Z
Learnt from: MananTank
PR: thirdweb-dev/js#7177
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_hooks/useTokenPriceData.ts:49-49
Timestamp: 2025-05-27T19:55:25.056Z
Learning: In the ERC20 public pages token price data hook (`useTokenPriceData.ts`), direct array access on `json.data[0]` without optional chaining is intentionally correct and should not be changed to use safety checks.
Applied to files:
packages/thirdweb/src/bridge/Token.test.ts
📚 Learning: 2025-05-30T17:14:25.332Z
Learnt from: MananTank
PR: thirdweb-dev/js#7227
File: apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/OpenEditionMetadata.tsx:26-26
Timestamp: 2025-05-30T17:14:25.332Z
Learning: The ModuleCardUIProps interface already includes a client prop of type ThirdwebClient, so when components use `Omit<ModuleCardUIProps, "children" | "updateButton">`, they inherit the client prop without needing to add it explicitly.
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.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 test/src/test-wallets.ts : Predefined test accounts are in `test/src/test-wallets.ts`
Applied to files:
packages/thirdweb/src/stories/Bridge/fixtures.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} : Wrap client-side data fetching calls in React Query (`tanstack/react-query`)
Applied to files:
packages/thirdweb/src/react/core/hooks/usePaymentMethods.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 : When you need access to browser APIs (localStorage, window, IntersectionObserver etc.).
Applied to files:
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
🧬 Code graph analysis (14)
packages/thirdweb/src/react/core/machines/paymentMachine.ts (2)
packages/thirdweb/src/bridge/index.ts (1)
TokenWithPrices(20-20)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts (2)
packages/thirdweb/src/bridge/index.ts (1)
TokenWithPrices(20-20)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/bridge/types/Token.ts (1)
packages/thirdweb/src/bridge/index.ts (2)
TokenWithPrices(20-20)Token(20-20)
packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx (2)
packages/thirdweb/src/bridge/index.ts (1)
TokenWithPrices(20-20)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/bridge/Token.test.ts (1)
packages/thirdweb/src/bridge/Token.ts (1)
tokens(131-184)
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx (2)
packages/thirdweb/src/bridge/index.ts (1)
TokenWithPrices(20-20)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/bridge/Onramp.ts (2)
packages/thirdweb/src/bridge/index.ts (1)
TokenWithPrices(20-20)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/stories/Bridge/fixtures.ts (1)
packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/bridge/types/Route.ts (2)
packages/thirdweb/src/bridge/index.ts (4)
Route(14-14)TokenWithPrices(20-20)RouteQuoteStep(15-15)RouteStep(16-16)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts (1)
packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/pay/convert/get-token.ts (1)
packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (2)
packages/thirdweb/src/bridge/index.ts (1)
TokenWithPrices(20-20)packages/thirdweb/src/bridge/types/Token.ts (1)
TokenWithPrices(12-14)
packages/thirdweb/src/bridge/Token.ts (2)
packages/thirdweb/src/bridge/index.ts (3)
tokens(7-7)Token(20-20)TokenWithPrices(20-20)packages/thirdweb/src/bridge/types/Token.ts (2)
Token(3-10)TokenWithPrices(12-14)
⏰ 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: Size
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (11)
packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts (1)
4-4: LGTM: response typing tightened to TokenWithPrices.Import and response shape align with usage of
originToken.prices.USD. No changes requested.Also applies to: 85-86
packages/thirdweb/src/bridge/index.ts (1)
20-20: LGTM: re-exporting TokenWithPrices in public API.This makes the new type discoverable to consumers.
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
49-53: Prop type update looks correctonContinue now accepting TokenWithPrices aligns with downstream usage.
packages/thirdweb/src/stories/Bridge/fixtures.ts (4)
22-33: ETH fixture alignment with TokenWithPrices looks good
35-46: USDC fixture alignment with TokenWithPrices looks good
48-59: UNI fixture alignment with TokenWithPrices looks good
680-731: Story UIOptions look consistent with TokenWithPrices referencesAlso applies to: 733-827, 829-867
packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts (1)
4-4: Import Token and TokenWithPrices, update tokenInfo and normalize currency lookup
- Change
tokenInfo: TokenWithPrices | nullto(Token | TokenWithPrices) | nulland addTokento the import.- Type-guard for the optional
pricesproperty and lookup via(currency || "USD").toUpperCase().- Verify that
bridge/index.jsactually exports bothTokenandTokenWithPricesand thatgetToken(...)returns apricesmap keyed by uppercase currency codes.packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx (1)
3-3: Accept bothTokenandTokenWithPricesfrom the bridge indexUpdate all four Bridge UI files—
BridgeOrchestrator.tsx,FundWallet.tsx,TransactionPayment.tsx, andDirectPayment.tsx—as follows:• Change the import at the top of each file:
- import type { TokenWithPrices } from "../../../../bridge/types/Token.js"; + import type { Token, TokenWithPrices } from "../../../../bridge/index.js";• In props and callback signatures, replace every
TokenWithPriceswithToken | TokenWithPrices.Ensure that
Tokenis re-exported frompackages/thirdweb/src/bridge/index.jsbefore applying these changes.packages/thirdweb/src/bridge/Token.ts (2)
5-5: Import changes look correct.Type import of TokenWithPrices from ./types/Token.js aligns with module path style in this package.
273-275: Verified POST /v1/tokens includes prices object. TokenWithPrices aligns with the actual response schema.
| export async function tokens< | ||
| IncludePrices extends boolean = true, | ||
| R extends Token | TokenWithPrices = TokenWithPrices, | ||
| >(options: tokens.Options<IncludePrices>): Promise<R[]> { | ||
| const { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Fix unsound generics: bind return type to includePrices via conditional type (remove R).
Today callers can request any R regardless of includePrices, breaking type-safety. Tie the return shape to includePrices so TS infers Token[] when false and TokenWithPrices[] when true.
-export async function tokens<
- IncludePrices extends boolean = true,
- R extends Token | TokenWithPrices = TokenWithPrices,
->(options: tokens.Options<IncludePrices>): Promise<R[]> {
+export async function tokens<
+ IncludePrices extends boolean = true
+>(options: tokens.Options<IncludePrices>): Promise<tokens.Result<IncludePrices>> {- const { data }: { data: R[] } = await response.json();
+ const { data } = (await response.json()) as {
+ data: tokens.Result<IncludePrices>;
+ };- type Options<IncludePrices extends boolean> = {
+ type Options<IncludePrices extends boolean = true> = {- type Result<T extends Token | TokenWithPrices> = T[];
+ type Result<IncludePrices extends boolean> =
+ IncludePrices extends true ? TokenWithPrices[] : Token[];Also applies to: 182-182, 190-190, 212-212
🤖 Prompt for AI Agents
In packages/thirdweb/src/bridge/Token.ts around lines 131-135 (and also adjust
similarly at 182, 190, and 212), the function uses an unconstrained generic R
which lets callers pick any return shape regardless of the IncludePrices flag;
replace R by tying the Promise return type to IncludePrices with a conditional
type (e.g. Promise<IncludePrices extends true ? TokenWithPrices[] : Token[]>)
and remove the R generic, ensuring the options generic stays as IncludePrices so
TypeScript infers Token[] when false and TokenWithPrices[] when true; update the
other affected function signatures the same way and adjust any internal type
annotations to match the new return type.
| const { | ||
| client, | ||
| chainId, | ||
| tokenAddress, | ||
| symbol, | ||
| name, | ||
| limit, | ||
| offset, | ||
| includePrices, | ||
| } = options; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Default includePrices at runtime and always send the flag.
Docs/defaults say true, but the request omits the param when undefined. Be explicit to avoid backend default drift and ensure perf-opt-out is intentional.
const {
client,
chainId,
tokenAddress,
symbol,
name,
limit,
offset,
- includePrices,
+ includePrices,
} = options;
+ const includePricesParam = includePrices ?? true;- if (includePrices !== undefined) {
- url.searchParams.set("includePrices", includePrices.toString());
- }
+ url.searchParams.set("includePrices", String(includePricesParam));Also applies to: 167-169
🤖 Prompt for AI Agents
In packages/thirdweb/src/bridge/Token.ts around lines 135-145 (and also apply
same change at lines 167-169), the includePrices option is currently left
undefined and therefore omitted from requests; change the destructuring or
immediately set a runtime default so includePrices = options.includePrices ??
true, and ensure every outbound request always includes the includePrices flag
(true or false) rather than omitting it so the backend receives an explicit
value; update both occurrences mentioned so the flag is always present in the
request parameters/payload.
| import type { ThirdwebClient } from "../../client/client.js"; | ||
| import type { Action } from "./BridgeAction.js"; | ||
| import type { Token } from "./Token.js"; | ||
| import type { TokenWithPrices } from "./Token.js"; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid forcing routes to carry prices; accept tokens with or without prices.
This reduces coupling and supports includePrices: false.
-import type { TokenWithPrices } from "./Token.js";
+import type { Token, TokenWithPrices } from "./Token.js";
@@
-export type Route = {
- originToken: TokenWithPrices;
- destinationToken: TokenWithPrices;
-};
+export type Route = {
+ originToken: Token | TokenWithPrices;
+ destinationToken: Token | TokenWithPrices;
+};
@@
-export type RouteQuoteStep = {
- originToken: TokenWithPrices;
- destinationToken: TokenWithPrices;
+export type RouteQuoteStep = {
+ originToken: Token | TokenWithPrices;
+ destinationToken: Token | TokenWithPrices;
originAmount: bigint;
destinationAmount: bigint;
estimatedExecutionTimeMs: number;
};
@@
-export type RouteStep = {
- originToken: TokenWithPrices;
- destinationToken: TokenWithPrices;
+export type RouteStep = {
+ originToken: Token | TokenWithPrices;
+ destinationToken: Token | TokenWithPrices;
originAmount: bigint;
destinationAmount: bigint;
estimatedExecutionTimeMs: number;
transactions: RouteTransaction[];
};Also applies to: 8-10, 13-18, 21-27
| tokenAddress: string, | ||
| chainId: number, | ||
| ): Promise<Token> { | ||
| ): Promise<TokenWithPrices> { |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Always request prices to match the return type TokenWithPrices
You changed the return type to TokenWithPrices but don’t pass includePrices. Make it explicit to avoid runtime shape drift if defaults change.
- const result = await tokens({
- chainId,
- client,
- tokenAddress,
- });
+ const result = await tokens({
+ chainId,
+ client,
+ tokenAddress,
+ includePrices: true,
+ });Also applies to: 13-17
🤖 Prompt for AI Agents
In packages/thirdweb/src/pay/convert/get-token.ts around lines 10 and 13-17, the
function signature returns TokenWithPrices but the internal token fetch calls do
not explicitly request prices; update the token retrieval calls to pass
includePrices: true (or set the equivalent option) so the returned object always
contains price data and matches TokenWithPrices, and ensure any downstream
typing/handling expects the price fields.
| import { useCallback, useState } from "react"; | ||
| import type { Quote } from "../../../bridge/index.js"; | ||
| import type { Token } from "../../../bridge/types/Token.js"; | ||
| import type { TokenWithPrices } from "../../../bridge/types/Token.js"; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Broaden machine types to accept tokens without prices.
Narrowing to TokenWithPrices makes flows incompatible when prices are excluded. Use a union across method, context, and event.
-import type { TokenWithPrices } from "../../../bridge/types/Token.js";
+import type { Token, TokenWithPrices } from "../../../bridge/index.js";
@@
type: "wallet";
payerWallet: Wallet;
- originToken: TokenWithPrices;
+ originToken: Token | TokenWithPrices;
balance: bigint;
quote: Quote;
@@
- destinationToken?: TokenWithPrices;
+ destinationToken?: Token | TokenWithPrices;
@@
| {
type: "DESTINATION_CONFIRMED";
- destinationToken: TokenWithPrices;
+ destinationToken: Token | TokenWithPrices;
destinationAmount: string;
receiverAddress: Address;
}Verify other send sites don’t assume prices:
Also applies to: 26-29, 46-47, 75-79
🏁 Script executed:
#!/bin/bash
rg -nP -C2 'DESTINATION_CONFIRMED|originToken|destinationToken' packages/thirdweb/src
rg -nP -C2 '\.prices\s*\[' packages/thirdweb/srcLength of output: 181786
Broaden paymentMachine types & guard against missing prices
- In packages/thirdweb/src/react/core/machines/paymentMachine.ts, import both Token and TokenWithPrices (from "../../../bridge/index.js") and change
• originToken (line 26)
• destinationToken (line 46)
• DESTINATION_CONFIRMED event payload (lines 75–79)
to use Token | TokenWithPrices - Audit all
.pricesusages (e.g. in FundWallet.tsx, TokenSelection.tsx, getTransfer.ts, etc.) and add optional chaining or defaults so flows won’t crash when a plain Token (without prices) is used.
🤖 Prompt for AI Agents
In packages/thirdweb/src/react/core/machines/paymentMachine.ts around lines 3,
26, 46 and 75-79, broaden the types to accept either Token or TokenWithPrices:
import both Token and TokenWithPrices from "../../../bridge/index.js" and change
the types of originToken (line 26), destinationToken (line 46) and the
DESTINATION_CONFIRMED event payload (lines 75–79) to Token | TokenWithPrices;
then audit all usages of .prices across the codebase (e.g., FundWallet.tsx,
TokenSelection.tsx, getTransfer.ts) and guard them with optional chaining or
sensible defaults (e.g., token.prices?.[...] or fallback values) so flows don’t
crash when a plain Token without prices is supplied.
| onContinue: ( | ||
| amount: string, | ||
| token: TokenWithPrices, | ||
| receiverAddress: Address, | ||
| ) => void; |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Don’t narrow public prop to TokenWithPrices; accept Token | TokenWithPrices to avoid a breaking change.
This keeps DirectPayment usable when Bridge.tokens is called with includePrices: false.
onContinue: (
amount: string,
- token: TokenWithPrices,
+ token: Token | TokenWithPrices,
receiverAddress: Address,
) => void;Run to spot other public surfaces narrowed to TokenWithPrices:
🏁 Script executed:
#!/bin/bash
rg -nP -C2 'TokenWithPrices' packages/thirdweb/src/reactLength of output: 9427
Allow Token | TokenWithPrices for all Bridge callbacks to support includePrices=false
Replace TokenWithPrices with Token | TokenWithPrices in:
- packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx onContinue (line 33)
- packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx onContinue (line 51)
- packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx onContinue (line 51)
- packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
•destinationToken(line 49)
•paymentInfo.token(line 57)
•handleRequirementsResolvedcallback signature (line 238)
🤖 Prompt for AI Agents
packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx around lines 31-35:
the onContinue callback currently types the token parameter as TokenWithPrices
which breaks when includePrices=false; update the token type to Token |
TokenWithPrices, and make the same replacement in the other files mentioned
(packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx onContinue at
~line 51, packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx onContinue at
~line 51, and packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx
for destinationToken at ~line 49, paymentInfo.token at ~line 57, and the
handleRequirementsResolved callback signature at ~line 238). Ensure any related
imports/types remain valid after the union type change and update usages that
assumed price fields to safely handle absence of prices.
PR-Codex overview
This PR introduces the
TokenWithPricestype to manage tokens with associated prices, enhancing theBridge.tokensfunctionality. It allows for the exclusion of prices when fetching tokens, improving efficiency and flexibility in token management.Detailed summary
TokenWithPricestype extendingTokento includeprices.TokenWithPricesinstead ofToken.tokensfunction to accept anincludePricesoption.includePricesis false.Summary by CodeRabbit