thirdweb 5.107.0 → 5.107.1-nightly-d53f8a25b4978a9f92f494f50955765817e31bad-20250920000329

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

@@ -162,6 +162,10 @@ export type SwapWidgetProps = {
    * @default true
    */
   persistTokenSelections?: boolean;
+  /**
+   * Called when the user disconnects the active wallet
+   */
+  onDisconnect?: () => void;
 };
 
 /**
@@ -325,46 +329,11 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   });
 
   const [buyToken, setBuyToken] = useState<TokenSelection | undefined>(() => {
-    if (props.prefill?.buyToken) {
-      return {
-        tokenAddress:
-          props.prefill.buyToken.tokenAddress ||
-          getAddress(NATIVE_TOKEN_ADDRESS),
-        chainId: props.prefill.buyToken.chainId,
-      };
-    }
-
-    if (!isPersistEnabled) {
-      return undefined;
-    }
-
-    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 lastUsedBuyToken;
+    return getInitialTokens(props.prefill, isPersistEnabled).buyToken;
   });
 
   const [sellToken, setSellToken] = useState<TokenSelection | undefined>(() => {
-    return getInitialSellToken(
-      props.prefill,
-      isPersistEnabled ? getLastUsedTokens()?.sellToken : undefined,
-    );
+    return getInitialTokens(props.prefill, isPersistEnabled).sellToken;
   });
 
   // persist selections to localStorage whenever they change
@@ -394,6 +363,7 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   if (screen.id === "1:swap-ui" || !activeWalletInfo) {
     return (
       <SwapUI
+        onDisconnect={props.onDisconnect}
         showThirdwebBranding={
           props.showThirdwebBranding === undefined
             ? true
@@ -533,17 +503,63 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   return null;
 }
 
-function getInitialSellToken(
+function getInitialTokens(
   prefill: SwapWidgetProps["prefill"],
-  lastUsedSellToken: TokenSelection | undefined,
-) {
-  if (prefill?.sellToken) {
+  isPersistEnabled: boolean,
+): {
+  buyToken: TokenSelection | undefined;
+  sellToken: TokenSelection | undefined;
+} {
+  const lastUsedTokens = isPersistEnabled ? getLastUsedTokens() : undefined;
+  const buyToken = prefill?.buyToken
+    ? {
+        tokenAddress:
+          prefill.buyToken.tokenAddress || getAddress(NATIVE_TOKEN_ADDRESS),
+        chainId: prefill.buyToken.chainId,
+      }
+    : lastUsedTokens?.buyToken;
+
+  const sellToken = prefill?.sellToken
+    ? {
+        tokenAddress:
+          prefill.sellToken.tokenAddress || getAddress(NATIVE_TOKEN_ADDRESS),
+        chainId: prefill.sellToken.chainId,
+      }
+    : lastUsedTokens?.sellToken;
+
+  // if both tokens are same
+  if (
+    buyToken &&
+    sellToken &&
+    buyToken.tokenAddress?.toLowerCase() ===
+      sellToken.tokenAddress?.toLowerCase() &&
+    buyToken.chainId === sellToken.chainId
+  ) {
+    // if sell token prefill is specified, ignore buy token
+    if (prefill?.sellToken) {
+      return {
+        buyToken: undefined,
+        sellToken: sellToken,
+      };
+    }
+
+    // if buy token prefill is specified, ignore sell token
+    if (prefill?.buyToken) {
+      return {
+        buyToken: buyToken,
+        sellToken: undefined,
+      };
+    }
+
+    // if none of the two are specified via prefill, keep buy token
     return {
-      tokenAddress:
-        prefill.sellToken.tokenAddress || getAddress(NATIVE_TOKEN_ADDRESS),
-      chainId: prefill.sellToken.chainId,
+      buyToken: buyToken,
+      sellToken: undefined,
     };
   }
 
-  return lastUsedSellToken;
+  return {
+    buyToken: buyToken,
+    sellToken: sellToken,
+  };
 }

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

@@ -4,6 +4,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 import {
   fontSize,
   iconSize,
+  radius,
   spacing,
 } from "../../../../core/design-system/index.js";
 import { Container, Line, ModalHeader } from "../../components/basic.js";
@@ -21,6 +22,7 @@ type SelectBuyTokenProps = {
   client: ThirdwebClient;
   onSelectChain: (chain: BridgeChain) => void;
   selectedChain: BridgeChain | undefined;
+  isMobile: boolean;
 };
 
 /**
@@ -56,11 +58,15 @@ export function SelectBridgeChainUI(
   });
 
   return (
-    <div>
-      <Container px="md" py="md+">
-        <ModalHeader onBack={props.onBack} title="Select Chain" />
-      </Container>
-      <Line />
+    <Container fullHeight flex="column">
+      {props.isMobile && (
+        <>
+          <Container px="md" py="md+">
+            <ModalHeader onBack={props.onBack} title="Select Chain" />
+          </Container>
+          <Line />
+        </>
+      )}
 
       <Spacer y="md" />
 
@@ -79,10 +85,12 @@ export function SelectBridgeChainUI(
       <Spacer y="sm" />
 
       <Container
+        expand
         px="md"
+        gap={props.isMobile ? undefined : "xxs"}
         flex="column"
         style={{
-          height: "400px",
+          maxHeight: props.isMobile ? "400px" : "none",
           overflowY: "auto",
           scrollbarWidth: "none",
           paddingBottom: spacing.md,
@@ -95,6 +103,7 @@ export function SelectBridgeChainUI(
             client={props.client}
             onClick={() => props.onSelectChain(chain)}
             isSelected={chain.chainId === props.selectedChain?.chainId}
+            isMobile={props.isMobile}
           />
         ))}
 
@@ -119,7 +128,7 @@ export function SelectBridgeChainUI(
           </div>
         )}
       </Container>
-    </div>
+    </Container>
   );
 }
 
@@ -144,6 +153,7 @@ function ChainButton(props: {
   client: ThirdwebClient;
   onClick: () => void;
   isSelected: boolean;
+  isMobile: boolean;
 }) {
   return (
     <Button
@@ -152,18 +162,21 @@ function ChainButton(props: {
       style={{
         justifyContent: "flex-start",
         fontWeight: 500,
-        fontSize: fontSize.md,
+        fontSize: props.isMobile ? fontSize.md : fontSize.sm,
         border: "1px solid transparent",
-        padding: `${spacing.sm} ${spacing.sm}`,
+        padding: !props.isMobile ? `${spacing.xs} ${spacing.xs}` : undefined,
       }}
-      gap="sm"
       onClick={props.onClick}
+      gap="sm"
     >
       <Img
         src={props.chain.icon}
         client={props.client}
-        width={iconSize.lg}
-        height={iconSize.lg}
+        width={props.isMobile ? iconSize.lg : iconSize.md}
+        height={props.isMobile ? iconSize.lg : iconSize.md}
+        style={{
+          borderRadius: radius.full,
+        }}
       />
       {cleanedChainName(props.chain.name)}
     </Button>