SDK, Dashboard: Fix SwapWidget setting same token for buy and sell in chain page (#8067)

Author: MananTank

.changeset/cuddly-steaks-bathe.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fix SwapWidget setting same token for buy and sell in some cases when using last used token from storage

apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx

@@ -97,9 +97,12 @@ export function BuyAndSwapEmbed(props: {
               chainId: props.chain.id,
               tokenAddress: props.tokenAddress,
             },
-            buyToken: {
-              chainId: props.chain.id,
-            },
+            // only set `buyToken` as "Native token" if `sellToken` is not a "native token" already
+            buyToken: props.tokenAddress
+              ? {
+                  chainId: props.chain.id,
+                }
+              : undefined,
           }}
           onError={(error, quote) => {
             const errorMessage = parseError(error);

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

@@ -323,33 +323,30 @@ function SwapWidgetContent(props: SwapWidgetProps) {
         chainId: props.prefill.buyToken.chainId,
       };
     }
-    const last = getLastUsedTokens()?.buyToken;
-    if (last) {
-      return {
-        tokenAddress: getAddress(last.tokenAddress),
-        chainId: last.chainId,
-      };
+    const lastUsedBuyToken = getLastUsedTokens()?.buyToken;
+
+    // the token that will be set as initial value of sell token
+    const sellToken = getInitialSellToken(
+      props.prefill,
+      getLastUsedTokens()?.sellToken,
+    );
+
+    // if both tokens are same, ignore "buyToken", keep "sellToken"
+    if (
+      lastUsedBuyToken &&
+      sellToken &&
+      lastUsedBuyToken.tokenAddress.toLowerCase() ===
+        sellToken.tokenAddress.toLowerCase() &&
+      lastUsedBuyToken.chainId === sellToken.chainId
+    ) {
+      return undefined;
     }
-    return undefined;
+
+    return lastUsedBuyToken;
   });
 
   const [sellToken, setSellToken] = useState<TokenSelection | undefined>(() => {
-    if (props.prefill?.sellToken) {
-      return {
-        tokenAddress:
-          props.prefill.sellToken.tokenAddress ||
-          getAddress(NATIVE_TOKEN_ADDRESS),
-        chainId: props.prefill.sellToken.chainId,
-      };
-    }
-    const last = getLastUsedTokens()?.sellToken;
-    if (last) {
-      return {
-        tokenAddress: getAddress(last.tokenAddress),
-        chainId: last.chainId,
-      };
-    }
-    return undefined;
+    return getInitialSellToken(props.prefill, getLastUsedTokens()?.sellToken);
   });
 
   // persist selections to localStorage whenever they change
@@ -515,3 +512,17 @@ function SwapWidgetContent(props: SwapWidgetProps) {
 
   return null;
 }
+
+function getInitialSellToken(
+  prefill: SwapWidgetProps["prefill"],
+  lastUsedSellToken: TokenSelection | undefined,
+) {
+  if (prefill?.sellToken) {
+    return {
+      tokenAddress:
+        prefill.sellToken.tokenAddress || getAddress(NATIVE_TOKEN_ADDRESS),
+      chainId: prefill.sellToken.chainId,
+    };
+  }
+  return lastUsedSellToken;
+}