From 5ec84bd3b631395f80cb1f5ee24bc8b481b9f5cb Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 12 Dec 2025 18:49:07 +0000
Subject: [PATCH] [MNY-314] SDK: Token Selection UX improvements in SwapWidget
 (#8552)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 -->
---
 .changeset/eager-loops-obey.md                |  5 ++++
 .../web/ui/Bridge/swap-widget/swap-ui.tsx     | 26 +++++++++++++++++++
 2 files changed, 31 insertions(+)
 create mode 100644 .changeset/eager-loops-obey.md

diff --git a/.changeset/eager-loops-obey.md b/.changeset/eager-loops-obey.md
new file mode 100644
index 00000000000..2a5ce76b13e
--- /dev/null
+++ b/.changeset/eager-loops-obey.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Token Selection UX improvements in SwapWidget
diff --git a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
index a948c2eb493..2e5bdf460d8 100644
--- a/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
+++ b/packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx
@@ -6,8 +6,10 @@ import { Buy, Sell } from "../../../../../bridge/index.js";
 import type { prepare as SellPrepare } from "../../../../../bridge/Sell.js";
 import type { TokenWithPrices } from "../../../../../bridge/types/Token.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import { NATIVE_TOKEN_ADDRESS } from "../../../../../constants/addresses.js";
 import { getToken } from "../../../../../pay/convert/get-token.js";
 import type { SupportedFiatCurrency } from "../../../../../pay/convert/type.js";
+import { getAddress } from "../../../../../utils/address.js";
 import { toTokens, toUnits } from "../../../../../utils/units.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import {
@@ -245,6 +247,18 @@ export function SwapUI(props: SwapUIProps) {
               ) {
                 props.setSellToken(undefined);
               }
+
+              // if sell token is not selected, set it as native token of the buy token's chain if buy token is not a native token itself
+              if (
+                !props.sellToken &&
+                token.tokenAddress.toLowerCase() !==
+                  NATIVE_TOKEN_ADDRESS.toLowerCase()
+              ) {
+                props.setSellToken({
+                  tokenAddress: getAddress(NATIVE_TOKEN_ADDRESS),
+                  chainId: token.chainId,
+                });
+              }
             }}
           />
         )}
@@ -270,6 +284,18 @@ export function SwapUI(props: SwapUIProps) {
               ) {
                 props.setBuyToken(undefined);
               }
+
+              // if buy token is not selected, set it as native token of the sell token's chain if sell token is not a native token itself
+              if (
+                !props.buyToken &&
+                token.tokenAddress.toLowerCase() !==
+                  NATIVE_TOKEN_ADDRESS.toLowerCase()
+              ) {
+                props.setBuyToken({
+                  tokenAddress: getAddress(NATIVE_TOKEN_ADDRESS),
+                  chainId: token.chainId,
+                });
+              }
             }}
             activeWalletInfo={props.activeWalletInfo}
           />