Skip to content

WIP brige embed #7222

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 40 commits into from
Jun 16, 2025
Merged

WIP brige embed #7222

merged 40 commits into from
Jun 16, 2025

Conversation

joaquim-verges
Copy link
Member

@joaquim-verges joaquim-verges commented May 30, 2025


PR-Codex overview

This PR focuses on enhancing the PayEmbed UI with multi-step support, improving various components, and refining error handling for better user experience.

Detailed summary

  • Updated PayEmbed with a refreshed UI and multi-step support.
  • Enhanced Action type in BridgeAction.ts.
  • Improved description handling in payment metadata.
  • Adjusted UI styles for better aesthetics.
  • Added error handling improvements in mapBridgeError.
  • Introduced new utility functions for formatting token and currency amounts.
  • Implemented a WindowAdapter interface for platform-specific functionality.
  • Updated various components to utilize new features and improve usability.

The following files were skipped due to too many changes: packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx, packages/thirdweb/src/react/core/hooks/useBridgeError.ts, packages/thirdweb/src/stories/WalletRow.stories.tsx, packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx, packages/thirdweb/src/stories/TokenBalanceRow.stories.tsx, packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx, packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx, packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts, packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx, packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx, packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx, packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx, packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx, packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx, packages/thirdweb/src/react/core/hooks/useBridgeError.test.ts, packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx, packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts, packages/thirdweb/src/react/core/hooks/useBridgePrepare.test.ts, packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx, packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts, packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx, packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx, pnpm-lock.yaml, packages/thirdweb/src/react/components.md, packages/thirdweb/src/react/core/hooks/useStepExecutor.test.ts, packages/thirdweb/src/react/core/machines/paymentMachine.ts, packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx, packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx, packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx, packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx, packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx, packages/thirdweb/src/react/core/hooks/usePaymentMethods.test.ts, packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx, packages/thirdweb/src/react/web/ui/PayEmbed.tsx, packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx, packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx, packages/thirdweb/src/react/PRODUCT.md, packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx, packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx, packages/thirdweb/src/react/core/hooks/useStepExecutor.ts, packages/thirdweb/src/react/core/machines/paymentMachine.test.ts, packages/thirdweb/src/react/TECH_SPEC.md, packages/thirdweb/src/stories/Bridge/fixtures.ts, packages/thirdweb/src/react/TASK_LIST.md

✨ Ask PR-Codex anything about this PR by commenting with /codex {your question}

Summary by CodeRabbit

  • New Features

    • Introduced BridgeEmbed 2.0, a modular payment and asset-bridging widget supporting multi-hop cross-chain payments, token swaps, and fiat on-ramps.
    • Added a suite of new React components for payment flows, including BridgeOrchestrator, DirectPayment, FundWallet, TransactionPayment, StepRunner, PaymentDetails, PaymentSelection, SuccessScreen, ErrorBanner, and UnsupportedTokenScreen.
    • Enabled multi-step payment flows with detailed transaction receipts, error handling, and support for both crypto and fiat payment methods.
    • Added new hooks for payment method detection, route quoting, transaction preparation, step execution, and error handling.
    • Enhanced PayEmbed with a refreshed UI and multi-step support.
  • Bug Fixes

    • Improved error handling and retry logic in payment and bridging flows.
    • Fixed token and provider casing issues to prevent runtime errors.
    • Improved number formatting and stability for fiat and token amounts.
  • Documentation

    • Added comprehensive product, technical, and task specification documents for BridgeEmbed 2.0.
    • Introduced Storybook stories and fixtures for all new components, enabling visual testing and documentation.
    • Updated developer guides for build, linting, and testing processes.
  • Style

    • Refined UI component styling, spacing, and theming for consistent appearance across light and dark modes.
    • Improved icon sizes and button hover effects for better user experience.
  • Tests

    • Added extensive unit and integration tests for new hooks, components, and state machines.
    • Provided Storybook stories for visual regression and documentation.
  • Chores

    • Added placeholder files to maintain directory structure for future expansion.
    • Updated dependencies and configuration files for new features and tooling support.

End-users will experience a modernized, multi-step payment interface with enhanced bridging, payment, and error handling capabilities.

Copy link

vercel bot commented May 30, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
docs-v2 ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 16, 2025 1:21am
login ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 16, 2025 1:21am
thirdweb_playground ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 16, 2025 1:21am
thirdweb-www ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 16, 2025 1:21am
wallet-ui ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jun 16, 2025 1:21am

Copy link

changeset-bot bot commented May 30, 2025

🦋 Changeset detected

Latest commit: e45c765

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages
Name Type
thirdweb Minor
@thirdweb-dev/wagmi-adapter Patch

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

Copy link
Contributor

coderabbitai bot commented May 30, 2025

Caution

Review failed

The pull request is closed.

Walkthrough

This update introduces BridgeEmbed 2.0, a cross-platform modular payment and asset-bridging system with a unified state machine, new React hooks, UI components, and Storybook stories. It adds comprehensive error handling, dependency inversion adapters, and extensive test coverage. The release also includes new documentation, technical specifications, and a detailed engineering task list.

Changes

File(s) / Group Change Summary
.changeset/icy-eyes-show.md Added a changeset documenting a minor update to the "thirdweb" package, specifically enhancements to the PayEmbed component.
AGENTS.md Updated documentation for formatting/linting and switched test runner from Jest to Vitest, with updated test instructions.
apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/PayModal.tsx,
apps/dashboard/src/components/buttons/MismatchButton.tsx,
apps/dashboard/src/app/pay/components/client/PayPageEmbed.client.tsx
Added optional chaining to prevent errors when accessing possibly undefined properties.
apps/playground-web/src/app/connect/pay/commerce/page.tsx,
apps/playground-web/src/components/pay/direct-payment.tsx
Updated product metadata and added a description field for product details.
apps/playground-web/src/app/connect/pay/components/types.ts Added an optional description field to payOptions in PayEmbedPlaygroundOptions.
apps/playground-web/src/app/connect/pay/embed/LeftSection.tsx Added a description input field to metadata options in the UI.
apps/playground-web/src/app/connect/pay/embed/RightSection.tsx Changed default metadata values for PayEmbed, added conditional image and description logic.
apps/playground-web/src/app/connect/pay/embed/page.tsx Added a description property to the default payOptions.
packages/thirdweb/knip.json Added useBridgeRoutes.ts to the knip entry paths.
packages/thirdweb/package.json Added @storybook/react as a dependency.
packages/thirdweb/src/bridge/Routes.ts Added optional includePrices parameter to the routes function and its options type.
packages/thirdweb/src/bridge/Token.ts Added add function and namespace for indexing tokens via the Universal Bridge API.
packages/thirdweb/src/bridge/types/BridgeAction.ts Added "fee" to the Action type union.
packages/thirdweb/src/bridge/types/Errors.ts Overrode toString() in ApiError to return a JSON string.
packages/thirdweb/src/pay/buyWithFiat/getQuote.ts Changed fiat provider string mapping to use lowercase values.
packages/thirdweb/src/pay/convert/cryptoToFiat.ts,
packages/thirdweb/src/pay/convert/fiatToCrypto.ts,
packages/thirdweb/src/pay/convert/get-token.ts
Refactored to fetch full token objects instead of just prices; added logic to handle missing tokens and support token indexing.
packages/thirdweb/src/pay/utils/commonTypes.ts Changed FiatProviders values from uppercase to lowercase.
packages/thirdweb/src/react/PRODUCT.md,
packages/thirdweb/src/react/TECH_SPEC.md,
packages/thirdweb/src/react/TASK_LIST.md,
packages/thirdweb/src/react/components.md
Added new documentation/specification files for BridgeEmbed 2.0, technical specs, engineering tasks, and component catalog.
packages/thirdweb/src/react/core/adapters/.keep,
packages/thirdweb/src/react/core/errors/.keep,
packages/thirdweb/src/react/core/machines/.keep,
packages/thirdweb/src/react/core/types/.keep,
packages/thirdweb/src/react/native/flows/.keep,
packages/thirdweb/src/react/web/flows/.keep
Added placeholder files to maintain directory structure for adapters, errors, machines, types, and flows.
packages/thirdweb/src/react/core/adapters/WindowAdapter.ts Introduced WindowAdapter interface for window/URL opening abstraction.
packages/thirdweb/src/react/core/errors/mapBridgeError.ts Added mapBridgeError and isRetryable error utility functions.
packages/thirdweb/src/react/core/errors/mapBridgeError.test.ts Added tests for error mapping and retry logic.
packages/thirdweb/src/react/core/hooks/connection/ConnectButtonProps.ts Updated types: made PaymentInfo.token partial with required address, added description to metadata, made onPurchaseSuccess parameter optional, and added presetOptions.
packages/thirdweb/src/react/core/hooks/others/useChainQuery.ts Changed React Query key to use chain?.id instead of the full chain object.
packages/thirdweb/src/react/core/hooks/pay/useBuyWithFiatQuotesForProviders.ts Added hook to fetch fiat onramp quotes from multiple providers.
packages/thirdweb/src/react/core/hooks/transaction/useSendTransaction.ts Made onPurchaseSuccess callback parameter optional in the type definition.
packages/thirdweb/src/react/core/hooks/useBridgeError.ts Added hook to normalize and process bridge errors with user-friendly messages.
packages/thirdweb/src/react/core/hooks/useBridgeError.test.ts Added tests for the useBridgeError hook.
packages/thirdweb/src/react/core/hooks/useBridgePrepare.ts Added hook to prepare bridge transactions for multiple types with caching, retry, and error handling.
packages/thirdweb/src/react/core/hooks/useBridgePrepare.test.ts Added tests for bridge prepare hook types and logic.
packages/thirdweb/src/react/core/hooks/useBridgeQuote.ts Added hook to fetch bridge quotes or transfer preparations.
packages/thirdweb/src/react/core/hooks/useBridgeRoutes.ts Added hook to fetch bridge routes with caching and retry logic.
packages/thirdweb/src/react/core/hooks/useBridgeRoutes.test.ts Added tests for bridge routes hook.
packages/thirdweb/src/react/core/hooks/usePaymentMethods.ts Added hook to return available payment methods (wallet/fiat) for a bridge embed flow.
packages/thirdweb/src/react/core/hooks/usePaymentMethods.test.ts Added tests for the payment methods hook.
packages/thirdweb/src/react/core/hooks/useStepExecutor.ts Added hook to execute prepared transaction steps sequentially, supporting onramps, batching, polling, and error handling.
packages/thirdweb/src/react/core/hooks/useStepExecutor.test.ts Added tests for step flattening and execution logic.
packages/thirdweb/src/react/core/hooks/useTransactionDetails.ts Added hook to fetch and compute detailed transaction information.
packages/thirdweb/src/react/core/hooks/wallets/useAutoConnectCore.test.ts,
packages/thirdweb/src/wallets/connection/autoConnectCore.test.ts
Changed onTimeout test callback to a no-op function.
packages/thirdweb/src/react/core/machines/paymentMachine.ts Added payment state machine hook managing payment flow states, context, and transitions.
packages/thirdweb/src/react/core/machines/paymentMachine.test.ts Added comprehensive tests for the payment machine state logic.
packages/thirdweb/src/react/core/utils/wallet.test.ts Added tests for hasSponsoredTransactionsEnabled utility.
packages/thirdweb/src/react/web/adapters/WindowAdapter.ts Added web implementation of WindowAdapter and exported a default instance.
packages/thirdweb/src/react/web/adapters/adapters.test.ts Added tests for WebWindowAdapter behavior.
packages/thirdweb/src/react/web/ui/Bridge/BridgeOrchestrator.tsx Added orchestrator component managing the full payment flow with state machine and event handlers.
packages/thirdweb/src/react/web/ui/Bridge/DirectPayment.tsx Added direct payment UI component for product/service purchases.
packages/thirdweb/src/react/web/ui/Bridge/ErrorBanner.tsx Added error banner component to display errors and retry/cancel actions.
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx Added UI for funding a wallet with token purchase and quick options.
packages/thirdweb/src/react/web/ui/Bridge/QuoteLoader.tsx Added component to prepare bridge quotes and handle loading/errors.
packages/thirdweb/src/react/web/ui/Bridge/StepRunner.tsx Added step runner component to manage and display multi-step transaction execution.
packages/thirdweb/src/react/web/ui/Bridge/TransactionPayment.tsx Added transaction payment UI for contract interactions and transfers.
packages/thirdweb/src/react/web/ui/Bridge/UnsupportedTokenScreen.tsx Added error screen for unsupported tokens or testnets.
packages/thirdweb/src/react/web/ui/Bridge/common/TokenAndChain.tsx Added component to display token with associated chain icon.
packages/thirdweb/src/react/web/ui/Bridge/common/TokenBalanceRow.tsx Added token balance row component for token selection UIs.
packages/thirdweb/src/react/web/ui/Bridge/common/WithHeader.tsx Added container component with optional header image, title, and description.
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx Added payment details component for bridge transactions.
packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentOverview.tsx Added payment overview component for transaction summaries.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/FiatProviderSelection.tsx Added fiat provider selection component for onramp payments.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/PaymentSelection.tsx Added multi-step payment method selection component.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/TokenSelection.tsx Added token selection UI for wallet-based payments.
packages/thirdweb/src/react/web/ui/Bridge/payment-selection/WalletFiatSelection.tsx Added wallet/fiat selection UI for payment methods.
packages/thirdweb/src/react/web/ui/Bridge/payment-success/PaymentReceipt.tsx Added payment receipt component for completed transactions.
packages/thirdweb/src/react/web/ui/Bridge/payment-success/SuccessScreen.tsx Added payment success screen with receipt and done actions.
packages/thirdweb/src/react/web/ui/ConnectWallet/Details.test.tsx Changed setScreen test callback to a no-op function.
packages/thirdweb/src/react/web/ui/ConnectWallet/WalletSelector.tsx Reduced icon size for the "Show All Wallets" icon.
packages/thirdweb/src/react/web/ui/ConnectWallet/constants.ts Increased modalMaxWidthCompact from 360px to 400px.
packages/thirdweb/src/react/web/ui/ConnectWallet/icons/CreditCardIcon.tsx Added credit card SVG icon component.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx Added type assertion for fromToken prop in SwapScreenContent.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/DirectPaymentModeScreen.tsx Ensured token object always has defined name, symbol, and address.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/currencies.tsx Added getFiatCurrencyIcon function for fiat currency icons.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts Added explicit typing for prefillBuy.token as TokenInfo.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/FiatValue.tsx Improved fiat value number formatting with locale-aware formatting.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/StepConnector.tsx Set color property on inner container for step connector arrow.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/WalletRow.tsx Adjusted gap spacing and added font styling to address/ENS text.
packages/thirdweb/src/react/web/ui/ConnectWallet/screens/formatTokenBalance.ts Added formatTokenAmount and formatCurrencyAmount formatting utilities.
packages/thirdweb/src/react/web/ui/PayEmbed.tsx Refactored PayEmbed to use a query-driven UI flow, added support for unsupported tokens, and centralized orchestration via BridgeOrchestrator.
packages/thirdweb/src/react/web/ui/TransactionButton/DepositScreen.tsx Adjusted container and text styling for wallet address and balance display.
packages/thirdweb/src/react/web/ui/TransactionButton/ExecutingScreen.tsx Updated success icon, added animations, changed explorer button to use windowAdapter prop.
packages/thirdweb/src/react/web/ui/TransactionButton/TransactionModal.tsx Replaced buy screen with BridgeOrchestrator, updated transaction execution to use window adapter.
packages/thirdweb/src/react/web/ui/components/ChainName.tsx Added optional color and style props, exported shorterChainName function.
packages/thirdweb/src/react/web/ui/components/TokenIcon.tsx Updated logic to use chain metadata for icons, special handling for Ethereum native token.
packages/thirdweb/src/react/web/ui/components/buttons.tsx Removed scale-up transform from button hover styles, changed accent variant to opacity effect.
packages/thirdweb/src/stories/Bridge/BridgeOrchestrator.stories.tsx,
packages/thirdweb/src/stories/Bridge/DirectPayment.stories.tsx,
packages/thirdweb/src/stories/Bridge/ErrorBanner.stories.tsx,
packages/thirdweb/src/stories/Bridge/FundWallet.stories.tsx,
packages/thirdweb/src/stories/Bridge/PaymentDetails.stories.tsx,
packages/thirdweb/src/stories/Bridge/PaymentSelection.stories.tsx,
packages/thirdweb/src/stories/Bridge/StepRunner.stories.tsx,
packages/thirdweb/src/stories/Bridge/SuccessScreen.stories.tsx,
packages/thirdweb/src/stories/Bridge/TransactionPayment.stories.tsx,
packages/thirdweb/src/stories/Bridge/UnsupportedTokenScreen.stories.tsx,
packages/thirdweb/src/stories/TokenBalanceRow.stories.tsx,
packages/thirdweb/src/stories/WalletRow.stories.tsx
Added Storybook stories for new bridge/payment UI components with themed wrappers and scenario coverage.
packages/thirdweb/src/stories/Bridge/fixtures.ts Added comprehensive mock data and UI options for Storybook scenarios.
packages/thirdweb/src/stories/utils.tsx Added ModalThemeWrapper component for consistent Storybook theming.

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant BridgeOrchestrator
  participant StateMachine
  participant UIComponents
  participant Hooks
  participant ThirdwebClient
  participant WindowAdapter

  User->>BridgeOrchestrator: Initiate payment flow
  BridgeOrchestrator->>StateMachine: Initialize with mode and adapters
  StateMachine->>UIComponents: Render initial screen (e.g., FundWallet, DirectPayment)
  User->>UIComponents: Enter details / select payment method
  UIComponents->>StateMachine: Dispatch event (e.g., confirm, select method)
  StateMachine->>Hooks: Fetch routes/quotes via useBridgeRoutes/useBridgePrepare
  Hooks->>ThirdwebClient: Query bridge API for routes/quotes
  ThirdwebClient-->>Hooks: Return route/quote data
  Hooks-->>StateMachine: Provide prepared quote
  StateMachine->>UIComponents: Render preview/step runner
  User->>UIComponents: Confirm and execute
  UIComponents->>Hooks: useStepExecutor executes steps
  Hooks->>ThirdwebClient: Send transactions/onramp requests
  Hooks->>WindowAdapter: Open onramp URL if needed
  ThirdwebClient-->>Hooks: Return tx/onramp status
  Hooks-->>UIComponents: Update progress/status
  UIComponents->>StateMachine: Notify on completion or error
  StateMachine->>UIComponents: Render success or error screen
  User->>UIComponents: Retry/cancel/finish
Loading

Possibly related PRs

  • thirdweb-dev/js#7228: Adds a client prop to dashboard components, removing internal useThirdwebClient hook usage, which aligns with the architectural direction and explicit client passing introduced in this PR.

Suggested labels

Portal

Suggested reviewers

  • joaquim-verges
✨ Finishing Touches
  • 📝 Generate Docstrings

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Explain this complex logic.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai explain this code block.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and explain its main purpose.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR.
  • @coderabbitai generate sequence diagram to generate a sequence diagram of the changes in this PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@github-actions github-actions bot added packages SDK Involves changes to the thirdweb SDK labels May 30, 2025
Copy link
Member Author


How to use the Graphite Merge Queue

Add either label to this PR to merge it via the merge queue:

  • merge-queue - adds this PR to the back of the merge queue
  • hotfix - for urgent hot fixes, skip the queue and merge this PR next

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.

Copy link
Contributor

github-actions bot commented May 30, 2025

size-limit report 📦

Path Size Loading time (3g) Running time (snapdragon) Total time
thirdweb (esm) 62.49 KB (+0.1% 🔺) 1.3 s (+0.1% 🔺) 511 ms (+78.17% 🔺) 1.8 s
thirdweb (cjs) 350.88 KB (+0.08% 🔺) 7.1 s (+0.08% 🔺) 2.1 s (-6.17% 🔽) 9.1 s
thirdweb (minimal + tree-shaking) 5.7 KB (0%) 114 ms (0%) 174 ms (+753.9% 🔺) 288 ms
thirdweb/chains (tree-shaking) 531 B (0%) 11 ms (0%) 67 ms (+1206.85% 🔺) 78 ms
thirdweb/react (minimal + tree-shaking) 19.59 KB (0%) 392 ms (0%) 152 ms (+297.08% 🔺) 544 ms

Copy link

codecov bot commented May 30, 2025

Codecov Report

Attention: Patch coverage is 71.87500% with 171 lines in your changes missing coverage. Please review.

Project coverage is 55.74%. Comparing base (283dc28) to head (12ff2f9).
Report is 3 commits behind head on main.

Files with missing lines Patch % Lines
...s/thirdweb/src/react/core/hooks/useStepExecutor.ts 69.20% 96 Missing and 1 partial ⚠️
...thirdweb/src/react/core/machines/paymentMachine.ts 63.80% 57 Missing and 2 partials ⚠️
...es/thirdweb/src/react/core/hooks/useBridgeError.ts 85.00% 9 Missing ⚠️
...thirdweb/src/react/web/ui/components/TokenIcon.tsx 28.57% 5 Missing ⚠️
...i/ConnectWallet/screens/Buy/swap/StepConnector.tsx 0.00% 1 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #7222      +/-   ##
==========================================
+ Coverage   55.55%   55.74%   +0.19%     
==========================================
  Files         908      914       +6     
  Lines       58571    59174     +603     
  Branches     4131     4248     +117     
==========================================
+ Hits        32540    32989     +449     
- Misses      25927    26076     +149     
- Partials      104      109       +5     
Flag Coverage Δ
packages 55.74% <71.87%> (+0.19%) ⬆️
Files with missing lines Coverage Δ
...s/thirdweb/src/react/core/errors/mapBridgeError.ts 100.00% <100.00%> (ø)
...rdweb/src/react/core/hooks/others/useChainQuery.ts 25.73% <100.00%> (+1.47%) ⬆️
...thirdweb/src/react/core/hooks/usePaymentMethods.ts 100.00% <100.00%> (ø)
...s/thirdweb/src/react/web/adapters/WindowAdapter.ts 100.00% <100.00%> (ø)
...i/ConnectWallet/screens/Buy/swap/StepConnector.tsx 12.90% <0.00%> (-0.44%) ⬇️
...thirdweb/src/react/web/ui/components/TokenIcon.tsx 56.41% <28.57%> (-10.26%) ⬇️
...es/thirdweb/src/react/core/hooks/useBridgeError.ts 85.00% <85.00%> (ø)
...thirdweb/src/react/core/machines/paymentMachine.ts 63.80% <63.80%> (ø)
...s/thirdweb/src/react/core/hooks/useStepExecutor.ts 69.20% <69.20%> (ø)

... and 3 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Dashboard Involves changes to the Dashboard. packages Playground Changes involving the Playground codebase. SDK Involves changes to the thirdweb SDK
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants