[MNY-314] SDK: Token Selection UX improvements in SwapWidget (#8552)

<!--

## 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 -->

Author: MananTank

.changeset/eager-loops-obey.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Token Selection UX improvements in SwapWidget

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}
           />