[MNY-197] SDK: SwapWidget chain selection UI improvements

Author: MananTank

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-chain.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import type { Chain as BridgeChain } from "../../../../../bridge/index.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import {
@@ -53,7 +53,22 @@ export function SelectBridgeChainUI(
   },
 ) {
   const [search, setSearch] = useState("");
-  const filteredChains = props.chains.filter((chain) => {
+  const [initiallySelectedChain] = useState(props.selectedChain);
+
+  // put the initially selected chain first
+  const sortedChains = useMemo(() => {
+    if (initiallySelectedChain) {
+      return [
+        initiallySelectedChain,
+        ...props.chains.filter(
+          (chain) => chain.chainId !== initiallySelectedChain.chainId,
+        ),
+      ];
+    }
+    return props.chains;
+  }, [props.chains, initiallySelectedChain]);
+
+  const filteredChains = sortedChains.filter((chain) => {
     return chain.name.toLowerCase().includes(search.toLowerCase());
   });
 

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/select-token-ui.tsx

@@ -37,7 +37,7 @@ import { tokenAmountFormatter } from "./utils.js";
  * @internal
  */
 type SelectTokenUIProps = {
-  onBack: () => void;
+  onClose: () => void;
   client: ThirdwebClient;
   selectedToken: TokenSelection | undefined;
   setSelectedToken: (token: TokenSelection) => void;
@@ -182,6 +182,7 @@ function SelectTokenUI(
     });
   }, [otherTokens]);
 
+  // desktop
   if (!isMobile) {
     return (
       <Container
@@ -205,7 +206,10 @@ function SelectTokenUI(
         </LeftContainer>
         <Container flex="column" relative scrollY>
           <TokenSelectionScreen
-            onSelectToken={props.setSelectedToken}
+            onSelectToken={(token) => {
+              props.setSelectedToken(token);
+              props.onClose();
+            }}
             isMobile={false}
             selectedToken={props.selectedToken}
             isFetching={props.isFetching}
@@ -226,7 +230,10 @@ function SelectTokenUI(
   if (screen === "select-token") {
     return (
       <TokenSelectionScreen
-        onSelectToken={props.setSelectedToken}
+        onSelectToken={(token) => {
+          props.setSelectedToken(token);
+          props.onClose();
+        }}
         selectedToken={props.selectedToken}
         isFetching={props.isFetching}
         ownedTokens={props.ownedTokens}
@@ -581,8 +588,10 @@ function TokenSelectionScreen(props: {
                   client={props.client}
                   onSelect={props.onSelectToken}
                   isSelected={
-                    props.selectedToken?.tokenAddress.toLowerCase() ===
-                    token.address.toLowerCase()
+                    !!props.selectedToken &&
+                    props.selectedToken.tokenAddress.toLowerCase() ===
+                      token.address.toLowerCase() &&
+                    token.chainId === props.selectedToken.chainId
                   }
                 />
               ))}

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/swap-ui.tsx

@@ -235,20 +235,16 @@ export function SwapUI(props: SwapUIProps) {
         {modalState.screen === "select-buy-token" && (
           <SelectToken
             activeWalletInfo={props.activeWalletInfo}
-            onBack={() =>
+            onClose={() => {
               setModalState((v) => ({
                 ...v,
                 isOpen: false,
-              }))
-            }
+              }));
+            }}
             client={props.client}
             selectedToken={props.buyToken}
             setSelectedToken={(token) => {
               props.setBuyToken(token);
-              setModalState((v) => ({
-                ...v,
-                isOpen: false,
-              }));
               // if buy token is same as sell token, unset sell token
               if (
                 props.sellToken &&
@@ -264,20 +260,16 @@ export function SwapUI(props: SwapUIProps) {
 
         {modalState.screen === "select-sell-token" && (
           <SelectToken
-            onBack={() =>
+            onClose={() => {
               setModalState((v) => ({
                 ...v,
                 isOpen: false,
-              }))
-            }
+              }));
+            }}
             client={props.client}
             selectedToken={props.sellToken}
             setSelectedToken={(token) => {
               props.setSellToken(token);
-              setModalState((v) => ({
-                ...v,
-                isOpen: false,
-              }));
               // if sell token is same as buy token, unset buy token
               if (
                 props.buyToken &&