[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))",
     },

apps/playground-web/src/app/bridge/swap-widget/components/right-section.tsx

@@ -59,7 +59,9 @@ export function RightSection(props: { options: SwapWidgetPlaygroundOptions }) {
             prefill={props.options.prefill}
             currency={props.options.currency}
             showThirdwebBranding={props.options.showThirdwebBranding}
-            key={JSON.stringify(props.options)}
+            key={JSON.stringify({
+              prefill: props.options.prefill,
+            })}
             persistTokenSelections={false}
           />
         )}

apps/portal/src/app/bridge/swap/page.mdx

@@ -13,6 +13,7 @@ import {
   TypeScriptIcon,
 } from "@/icons";
 import SwapWidgetImage from "./swap-dark.png";
+import SwapWidgetImageLight from "./swap-light.png";
 
 export const metadata = createMetadata({
   image: {
@@ -55,7 +56,12 @@ function Example() {
 }
 ```
 
+<div className='dark-only'>
 <DocImage src={SwapWidgetImage} />
+</div>
+<div className='light-only'>
+<DocImage src={SwapWidgetImageLight} />
+</div>
 
 ## Live Playground
 

apps/portal/src/app/bridge/swap/swap-dark.png

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

apps/portal/src/app/bridge/swap/swap-light.png

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

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

@@ -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,
+  };
 }