<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR introduces two new properties, `amountEditable` and `tokenEditable`, to enhance the `BuyWidget` component, allowing control over editing options for token selection and amount. This improves user experience by providing flexibility in the widget's functionality.
### Detailed summary
- Added `amountEditable` and `tokenEditable` properties to `BuyWidget`.
- Updated `BuyPlayground.tsx`, `CheckoutPlayground.tsx`, and `TransactionPlayground.tsx` to use new props.
- Modified `CodeGen.tsx` to incorporate editability options.
- Updated URL generation in `buildBuyIframeUrl.ts` for new props.
- Added editability options in `LeftSection.tsx`.
- Enhanced `BuyWidgetEmbed` to accept new props.
- Implemented stories in `BuyWidget.stories.tsx` for editable and non-editable states.
- Added documentation in `iframe/page.mdx` for new features.
- Adjusted `FundWallet.tsx` and `TokenSection.tsx` to respect new editability options.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
## Release Notes
* **New Features**
* Added `amountEditable` and `tokenEditable` props to the BuyWidget component, allowing developers to disable token selection and/or amount editing in the buy flow.
* Enhanced UI controls to prevent interaction with locked fields when these options are disabled.
* Updated documentation with examples of how to use the new editability options.
* **Tests**
* Added story variants demonstrating token and amount lock scenarios.
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
-->
[SDK] Feature: Add Etherlink Shadownet Testnet chain
## Notes for the reviewer
Adds the Etherlink Shadownet testnet chain (ID 127823) to the predefined chains in the SDK. This includes its native currency (XTZ) and block explorer URL.
## How to test
- Verify the `etherlinkShadownet` chain can be imported from `thirdweb/chains`.
- Check that the chain object contains the correct `id`, `name`, `nativeCurrency`, and `blockExplorers` properties.
- Run `pnpm build` and `pnpm lint` to ensure no new issues are introduced.
---
[Slack Thread](https://thirdwebdev.slack.com/archives/C09DS2CKGP2/p1767789368607579?thread_ts=1767789368.607579&cid=C09DS2CKGP2)
<a href="https://cursor.com/background-agent?bcId=bc-a0f088a7-057b-46f0-b6a6-3ba957d1e261"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/open-in-cursor-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/open-in-cursor-light.svg"><img alt="Open in Cursor" src="https://cursor.com/open-in-cursor.svg"></picture></a> <a href="https://cursor.com/agents?id=bc-a0f088a7-057b-46f0-b6a6-3ba957d1e261"><picture><source media="(prefers-color-scheme: dark)" srcset="https://cursor.com/open-in-web-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://cursor.com/open-in-web-light.svg"><img alt="Open in Web" src="https://cursor.com/open-in-web.svg"></picture></a>
<!-- start pr-codex -->
---
## PR-Codex overview
This PR introduces the `Etherlink Shadownet` testnet chain to the project, defining its properties and adding it to the exports.
### Detailed summary
- Added a new chain definition for `etherlinkShadownet` in `etherlink-shadownet.ts`.
- Defined properties such as `id`, `name`, `nativeCurrency`, and `blockExplorers`.
- Exported `etherlinkShadownet` in `chains.ts` for use in the application.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Added support for Etherlink Shadownet testnet chain, enabling development and testing on this network with proper block explorer integration and native currency configuration (XTZ).
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the token selection UI by adding a token details screen and improving the display of token information within the `SwapWidget` and `BridgeWidget`.
### Detailed summary
- Added a token details screen in the token selection UI.
- Enhanced the `SelectedTokenButton` to include a more flexible display of the token symbol.
- Introduced `useTokenPrice` hook for fetching token prices.
- Updated `TokenButton` to include an info button for showing token details.
- Created `TokenInfoScreen` and `TokenInfoRow` components for displaying detailed token information.
- Integrated token info functionality into `TokenSelectionScreen`.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on UI improvements for the `TransactionWidget` in the `thirdweb` package, enhancing user experience with better layout, spacing, and loading indicators.
### Detailed summary
- Changed the `chain` in `simpleBuyRequest` from `baseSepolia` to `base`.
- Updated the story names and added new stories for `TransactionWidget`.
- Improved layout and spacing in `TransactionPayment`.
- Replaced static loading elements with `Skeleton` components for better loading states.
- Enhanced button styles and added a loading spinner.
- Refined contract info and address display for better clarity.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **UI Improvements**
* Improved TransactionWidget loading states with clearer visual spinner components
* Enhanced visual presentation and layout of transaction details, addresses, and network information
* Refined typography, spacing, and styling throughout the widget for better readability and consistency
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR enhances the `SwapWidget` and related components by improving the chain selection logic and UI responsiveness, introducing a more reliable token selection process, and adjusting the timeout for modal unmounting.
### Detailed summary
- Updated `setTimeout` duration in `onModalUnmount` to 200ms.
- Changed `useBridgeChains` to `useBridgeChain` for better chain fetching.
- Added `type` and `selections` props to various components for handling buy/sell logic.
- Implemented a new `useBridgeChainsWithFilters` function for filtered chain queries.
- Enhanced UI components to accommodate new selection logic.
- Improved loading states and mobile responsiveness in `SelectBridgeChain` and `SelectToken`.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
- Bridge filtering now supports testnet and mutually exclusive origin/destination filters.
- Token selection accepts operation context (buy/sell) and selected-chain hints.
* **Improvements**
- Filter-driven chain lists yield more relevant token choices.
- Loading skeletons adapt sizing for mobile and desktop.
- Deferred buy-token assignment reduces redundant fetches during modal close.
- Slightly longer modal unmount delay for smoother transitions.
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR modifies the behavior of the wallet connection process in the `WalletSwitcherConnectionScreen`. After a wallet is connected, it skips the "Choose Payment" screen and directly moves to the token selection screen, enhancing user experience in bridge widgets.
### Detailed summary
- Updated the `onConnect` function to remove the call to `props.onBack()`, preventing the return to the "Choose Payment" screen.
- Changed the flow to directly transition to the token selection screen after wallet connection.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved wallet connection flow in bridge widgets. After connecting a wallet on the Choose Payment screen, users are now directed directly to token selection instead of returning to the payment screen.
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing wallet integration in bridge components by introducing custom wallet options and modifying default wallet selections for various widgets.
### Detailed summary
- Removed in-app wallet from default wallet list for bridge widgets.
- Added `CustomWallets` component in `BuyWidget.stories.tsx` and `SwapWidget.stories.tsx`.
- Implemented `getDefaultWalletsForBridgeComponents` to return a list of wallets.
- Updated `FundWallet`, `SwapUI`, and `TransactionPayment` components to use custom wallet options.
- Introduced new wallet options in `TransactionWidget.stories.tsx`.
- Added `CustomWallets` functionality in `BridgeWidget` stories.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the `CheckoutWidget` and related components in the `thirdweb` application, including the removal of duplicate fiat price displays, adding new environment constants, and refining query parameter parsing for improved functionality and usability.
### Detailed summary
- Removed duplicate fiat price display in `CheckoutWidget`.
- Added `NEXT_PUBLIC_CHECKOUT_IFRAME_CLIENT_ID` constant.
- Introduced `parseQueryParams` utility for better query handling.
- Updated `CheckoutWidgetEmbed` to utilize new constants and improved query parsing.
- Added validation for required parameters in the checkout page.
- Refactored currency validation to use `isValidCurrency`.
- Modified tests to skip certain cases based on environment variables.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Embeddable checkout widget with a dedicated checkout page/layout and a new public env var for iframe client ID.
* Content-Security-Policy headers applied to checkout widget routes.
* **Bug Fixes**
* Removed duplicate fiat price display in the checkout button.
* **Chores / Refactor**
* Centralized query-parameter parsing and currency validation; added input sanitization utilities.
* Added a patch-level changeset entry.
* **Tests**
* Marked several integration tests as skipped by default; enabled one parallel-execution test.
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on improving the Payment Details UI for bridge widget components in the `thirdweb` package, enhancing layout, styling, and functionality.
### Detailed summary
- Adjusted `padding` in `TokenBalanceRow.tsx`.
- Replaced `OutlineWalletIcon` with a styled `Container` in `WalletRow.tsx`.
- Updated `borderRadius` and `borderBottom` styles in `PaymentOverview.tsx`.
- Enhanced `StepConnectorArrow` styles and added `iconSize` for `ChevronDownIcon`.
- Modified `OutlineWalletIcon` definition to accept `size`, `color`, and `style` props.
- Refactored `cryptoPaymentMethod` and `ethCryptoPaymentMethod` structures for clarity.
- Updated `PaymentDetails.tsx` styles, including `gap`, `borderRadius`, and button styles.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **Bug Fixes**
* Improved bridge payment details UI with enhanced spacing, borders, and styling
* Updated wallet row display with better visual presentation when disconnected
* Refined typography and color usage across payment interface components
* Enhanced border radius and padding consistency throughout bridge widget
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on enhancing the in-app wallet feature by updating icons, adding new components for different authentication methods, and improving the UI for wallet connection options.
### Detailed summary
- Updated the in-app wallet icon in the wide connect UI.
- Changed `defaultAuthOptions` from a constant to an exported variable.
- Modified `EmailIcon` component for better styling and structure.
- Added new functions for various modal configurations (`ConfiguredInAppWalletWideModal`, `GoogleLoginWideModal`, `GithubLoginWideModal`).
- Introduced `InAppWalletIcon` component to handle multiple authentication methods visually.
- Created comprehensive storybook examples for `InAppWalletIcon` with various authentication options.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Added an in-app wallet icon that displays available authentication methods and adapts layout for single vs. multiple options.
* **UI/UX Improvements**
* Updated wallet icon visuals and dynamic color handling for more consistent rendering in the connect modal.
* Simplified email icon visuals for clearer strokes.
* **Stories**
* Added Storybook examples showcasing the in-app wallet icon across themes and auth-option permutations.
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on improving the user experience in the `SwapWidget` by automatically selecting the native token when no sell or buy token is selected.
### Detailed summary
- Added logic to set the `sellToken` as the native token of the buy token's chain if no sell token is selected.
- Added logic to set the `buyToken` as the native token of the sell token's chain if no buy token is selected.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR addresses an issue with the `Spinner` component's animation in a Next.js environment, ensuring that the animation works consistently.
### Detailed summary
- Updated the `Spinner` component to use a `<circle>` element instead of a `Circle` styled component.
- Removed the `StyledCircle` import from `elements.js`.
- Added animation styles directly to the `<circle>` element.
- Defined the `tw-spinner-circle-dash` keyframe animation within the component.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR focuses on improving the `SwapWidget` UI by alphabetically sorting the chains returned by the `use-bridge-chains.ts` module, ensuring that chains with names starting with numbers are placed at the end of the list.
### Detailed summary
- Updated the `queryFn` in `use-bridge-chains.ts` to be asynchronous.
- Introduced a copy of the fetched data to sort it.
- Implemented sorting logic to place chains starting with numbers at the end.
- Used `localeCompare` for alphabetical sorting of chain names.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **New Features**
* Chains in the SwapWidget are now alphabetically sorted for improved navigation; chain names beginning with digits appear after alphabetic entries.
* **Chores**
* Patch release entry added to the changelog.
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Manan TankandGitHub
Yash094
