[MNY-189] SDK: SwapWidget UI improvements (#8080)

<!--

## 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 UI improvements for the `SwapWidget`, enhancing responsiveness, styling, and functionality, particularly for mobile users. It also refines token selection and formatting for better user experience.

### Detailed summary
- Removed a changeset file related to `SwapWidget` UI improvements.
- Adjusted breakpoints and font sizes in `design-system/index.ts`.
- Enhanced `SearchInput` styling in `SearchInput.tsx`.
- Added `tokenAmountFormatter` utility in `utils.ts`.
- Made `children` prop optional in `basic.tsx`.
- Updated color values in `sdk-component-theme.ts`.
- Enhanced `Input` component styles in `formElements.tsx`.
- Improved `BuyAndSwapEmbed.tsx` with better token handling.
- Introduced `useIsMobile` hook for mobile detection.
- Updated `ArrowUpDownIcon.tsx` SVG for better rendering.
- Added hover background support in `buttons.tsx`.
- Renamed `WithData` to `WithDataDesktop` in `SelectChain.stories.tsx`.
- Added mobile versions of `WithData` and `Loading` functions in `SelectChain.stories.tsx`.
- Updated `SwapWidget` stories to manage token selections and themes.
- Refined `select-chain.tsx` for better mobile handling.
- Improved `swap-ui.tsx` with mobile responsiveness and token selection logic.
- Enhanced `select-token-ui.tsx` with mobile UI improvements and token display logic.
- Added `ActiveWalletDetails` for displaying wallet information.
- Updated various button and token display styles for consistency and better UX.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

* **New Features**
  * Swap widget: onDisconnect callback, details modal, max-fill, improved wallet/account display, clearer loading/insufficient-balance states; stories now disable token-selection persistence.
  * Mobile detection hook enabling separate mobile/desktop flows.

* **UI/Style**
  * Enhanced token/chain visuals (gradients, smaller icon size), adjusted spacing and input sizing, customizable button hover backgrounds.

* **Refactor**
  * Unified token amount formatting and simplified numeric displays.

* **Chores**
  * Added changeset entry for UI improvements.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

.changeset/nine-otters-pay.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+SwapWidget UI improvements

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

@@ -107,12 +107,13 @@ export function BuyAndSwapEmbed(props: {
           theme={themeObj}
           className="!rounded-2xl !border-none !w-full"
           prefill={{
-            sellToken: {
+            // buy this token by default
+            buyToken: {
               chainId: props.chain.id,
               tokenAddress: props.tokenAddress,
             },
-            // only set `buyToken` as "Native token" if `sellToken` is not a "native token" already
-            buyToken: props.tokenAddress
+            // sell the native token by default (but if buytoken is a native token, don't set)
+            sellToken: props.tokenAddress
               ? {
                   chainId: props.chain.id,
                 }

apps/dashboard/src/@/utils/sdk-component-theme.ts

@@ -31,9 +31,9 @@ export function getSDKTheme(theme: "light" | "dark"): Theme {
       selectedTextBg: "hsl(var(--inverted))",
       selectedTextColor: "hsl(var(--inverted-foreground))",
       separatorLine: "hsl(var(--border))",
-      skeletonBg: "hsl(var(--muted))",
+      skeletonBg: "hsl(var(--secondary-foreground)/15%)",
       success: "hsl(var(--success-text))",
-      tertiaryBg: "hsl(var(--muted)/50%)",
+      tertiaryBg: "hsl(var(--muted)/30%)",
       tooltipBg: "hsl(var(--popover))",
       tooltipText: "hsl(var(--popover-foreground))",
     },

packages/thirdweb/src/react/core/design-system/index.ts

@@ -200,6 +200,7 @@ export const iconSize = {
   "4xl": "128",
   lg: "32",
   md: "24",
+  "sm+": "20",
   sm: "16",
   xl: "48",
   xs: "12",

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

@@ -36,6 +36,7 @@ export function SearchInput(props: {
         variant="outline"
         placeholder={props.placeholder}
         value={props.value}
+        sm
         style={{
           paddingLeft: "44px",
         }}

packages/thirdweb/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).buyToken;
   });
 
   const [sellToken, setSellToken] = useState<TokenSelection | undefined>(() => {
-    return getInitialSellToken(
-      props.prefill,
-      isPersistEnabled ? getLastUsedTokens()?.sellToken : undefined,
-    );
+    return getInitialTokens(props.prefill).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,60 @@ function SwapWidgetContent(props: SwapWidgetProps) {
   return null;
 }
 
-function getInitialSellToken(
-  prefill: SwapWidgetProps["prefill"],
-  lastUsedSellToken: TokenSelection | undefined,
-) {
-  if (prefill?.sellToken) {
+function getInitialTokens(prefill: SwapWidgetProps["prefill"]): {
+  buyToken: TokenSelection | undefined;
+  sellToken: TokenSelection | undefined;
+} {
+  const lastUsedTokens = getLastUsedTokens();
+  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,
+  };
 }

packages/thirdweb/src/react/web/ui/Bridge/swap-widget/common.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>