[MNY-269] SDK: autofocus token search input when token selector modal opens in BuyWidget, SwapWidget and BridgeWidget (#8266)

<!--

## 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 enhances user experience by adding autofocus functionality to token selection inputs in various components and refactoring the `BuyWidget` and `SwapWidget` to utilize a common `Variant` component for rendering with different themes.

### Detailed summary
- Added `autoFocus` to token search inputs in `BuyWidget`, `SwapWidget`, and `BridgeWidget`.
- Refactored `BuyWidget` to use a `Variant` component for theme rendering.
- Refactored `SwapWidget` to use a `Variant` component for theme rendering.
- Introduced `autoFocusCrossIcon` prop in `Modal` component.
- Updated `SearchInput` to accept `autoFocus` prop.

> ✨ 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**
  * Token search input now auto-focuses on desktop when opening token selector modals in Buy, Swap, and Bridge widgets.
  * Modal gained a configurable option to control initial focus of the close (cross) button.

* **Bug Fixes / UX**
  * Prevents unwanted focus on the modal close icon by default when configured, improving keyboard/voicing navigation.

* **Chores**
  * Storybook examples updated for consistent light/dark variants and layout metadata.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

.changeset/happy-trees-doubt.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+autofocus token search input when token selector modal opens in `BuyWidget`, `SwapWidget` and `BridgeWidget` components

packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx

@@ -205,6 +205,7 @@ export function FundWallet(props: FundWalletProps) {
           transform: "none",
         }}
         setOpen={(v) => setIsTokenSelectionOpen(v)}
+        autoFocusCrossIcon={false}
       >
         <SelectToken
           activeWalletInfo={activeWalletInfo}

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

@@ -11,6 +11,7 @@ export function SearchInput(props: {
   value: string;
   onChange: (value: string) => void;
   placeholder: string;
+  autoFocus?: boolean;
 }) {
   return (
     <div
@@ -41,6 +42,7 @@ export function SearchInput(props: {
           paddingLeft: "44px",
         }}
         onChange={(e) => props.onChange(e.target.value)}
+        autoFocus={props.autoFocus}
       />
     </div>
   );

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

@@ -496,6 +496,7 @@ function TokenSelectionScreen(props: {
               value={props.search}
               onChange={props.setSearch}
               placeholder="Search by token or address"
+              autoFocus={!props.isMobile}
             />
           </Container>
 

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

@@ -204,6 +204,7 @@ export function SwapUI(props: SwapUIProps) {
     <Container p="md">
       <Modal
         hide={false}
+        autoFocusCrossIcon={false}
         className="tw-modal__swap-widget"
         size={isMobile ? "compact" : "wide"}
         title="Select Token"

packages/thirdweb/src/react/web/ui/components/Modal.tsx

@@ -41,6 +41,7 @@ export const Modal: React.FC<{
   title: string;
   hide?: boolean;
   crossContainerStyles?: React.CSSProperties;
+  autoFocusCrossIcon?: boolean;
 }> = (props) => {
   const [open, setOpen] = useState(props.open);
   const contentRef = useRef<HTMLDivElement>(null);
@@ -143,7 +144,15 @@ export const Modal: React.FC<{
                   }}
                 >
                   <Dialog.Close asChild>
-                    <IconButton aria-label="Close" autoFocus type="button">
+                    <IconButton
+                      aria-label="Close"
+                      autoFocus={
+                        props.autoFocusCrossIcon === undefined
+                          ? true
+                          : props.autoFocusCrossIcon
+                      }
+                      type="button"
+                    >
                       <Cross2Icon
                         height={iconSize.md}
                         style={{

packages/thirdweb/src/stories/Bridge/BridgeWidget/bridge-widget-script.stories.tsx

@@ -1,27 +1,18 @@
 import type { Meta } from "@storybook/react";
-import { BridgeWidgetScript } from "../../../script-exports/bridge-widget-script.js";
+import {
+  BridgeWidgetScript,
+  type BridgeWidgetScriptProps,
+} from "../../../script-exports/bridge-widget-script.js";
 import { storyClient } from "../../utils.js";
 
 const meta: Meta<typeof BridgeWidgetScript> = {
   title: "Bridge/BridgeWidgetScript",
-  parameters: {
-    layout: "centered",
-  },
-  decorators: [
-    (Story) => {
-      return (
-        <div>
-          <Story />
-        </div>
-      );
-    },
-  ],
 };
 export default meta;
 
 export function BasicUsage() {
   return (
-    <BridgeWidgetScript
+    <Variant
       clientId={storyClient.clientId}
       buy={{ chainId: 8453, amount: "0.1" }}
     />
@@ -30,7 +21,7 @@ export function BasicUsage() {
 
 export function LightTheme() {
   return (
-    <BridgeWidgetScript
+    <Variant
       clientId={storyClient.clientId}
       theme="light"
       buy={{ chainId: 8453, amount: "0.1" }}
@@ -40,7 +31,7 @@ export function LightTheme() {
 
 export function CurrencySet() {
   return (
-    <BridgeWidgetScript
+    <Variant
       clientId={storyClient.clientId}
       currency="JPY"
       buy={{ chainId: 8453, amount: "0.1" }}
@@ -50,7 +41,7 @@ export function CurrencySet() {
 
 export function NoThirdwebBranding() {
   return (
-    <BridgeWidgetScript
+    <Variant
       clientId={storyClient.clientId}
       theme="light"
       buy={{ chainId: 8453, amount: "0.1" }}
@@ -61,7 +52,7 @@ export function NoThirdwebBranding() {
 
 export function CustomTheme() {
   return (
-    <BridgeWidgetScript
+    <Variant
       clientId={storyClient.clientId}
       buy={{ chainId: 8453, amount: "0.1" }}
       theme={{
@@ -77,3 +68,19 @@ export function CustomTheme() {
     />
   );
 }
+
+function Variant(props: BridgeWidgetScriptProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <BridgeWidgetScript {...props} theme="dark" />
+      <BridgeWidgetScript {...props} theme="light" />
+    </div>
+  );
+}

packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.Prefill.stories.tsx

@@ -1,19 +1,19 @@
 import type { Meta } from "@storybook/react-vite";
 import { NATIVE_TOKEN_ADDRESS } from "../../../constants/addresses.js";
-import { SwapWidget } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
+import {
+  SwapWidget,
+  type SwapWidgetProps,
+} from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
 import { storyClient } from "../../utils.js";
 
 const meta = {
-  parameters: {
-    layout: "centered",
-  },
   title: "Bridge/Swap/SwapWidget/Prefill",
 } satisfies Meta<typeof SwapWidget>;
 export default meta;
 
 export function Buy_NativeToken() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         buyToken: {
@@ -26,7 +26,7 @@ export function Buy_NativeToken() {
 
 export function Buy_Base_USDC() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         buyToken: {
@@ -40,7 +40,7 @@ export function Buy_Base_USDC() {
 
 export function Buy_NativeToken_With_Amount() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         buyToken: {
@@ -55,7 +55,7 @@ export function Buy_NativeToken_With_Amount() {
 
 export function Sell_NativeToken() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         sellToken: {
@@ -82,7 +82,7 @@ export function Sell_Base_USDC() {
 
 export function Sell_NativeToken_With_Amount() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         sellToken: {
@@ -97,7 +97,7 @@ export function Sell_NativeToken_With_Amount() {
 
 export function Buy_And_Sell_NativeToken() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       prefill={{
         // base native token
@@ -114,3 +114,19 @@ export function Buy_And_Sell_NativeToken() {
     />
   );
 }
+
+function Variant(props: SwapWidgetProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <SwapWidget {...props} theme="dark" />
+      <SwapWidget {...props} theme="light" />
+    </div>
+  );
+}

packages/thirdweb/src/stories/Bridge/Swap/SwapWidget.stories.tsx

@@ -1,22 +1,13 @@
 import type { Meta } from "@storybook/react";
 import { lightTheme } from "../../../react/core/design-system/index.js";
-import { SwapWidget } from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
+import {
+  SwapWidget,
+  type SwapWidgetProps,
+} from "../../../react/web/ui/Bridge/swap-widget/SwapWidget.js";
 import { storyClient } from "../../utils.js";
 
 const meta: Meta<typeof SwapWidget> = {
-  parameters: {
-    layout: "centered",
-  },
   title: "Bridge/Swap/SwapWidget",
-  decorators: [
-    (Story) => {
-      return (
-        <div>
-          <Story />
-        </div>
-      );
-    },
-  ],
 };
 export default meta;
 
@@ -26,7 +17,7 @@ export function BasicUsage() {
 
 export function CurrencySet() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       currency="JPY"
       persistTokenSelections={false}
@@ -36,7 +27,7 @@ export function CurrencySet() {
 
 export function LightMode() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       currency="JPY"
       theme="light"
@@ -47,7 +38,7 @@ export function LightMode() {
 
 export function NoThirdwebBranding() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       currency="JPY"
       showThirdwebBranding={false}
@@ -58,7 +49,7 @@ export function NoThirdwebBranding() {
 
 export function CustomTheme() {
   return (
-    <SwapWidget
+    <Variant
       client={storyClient}
       currency="JPY"
       persistTokenSelections={false}
@@ -74,3 +65,19 @@ export function CustomTheme() {
     />
   );
 }
+
+function Variant(props: SwapWidgetProps) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
+      <SwapWidget {...props} theme="dark" />
+      <SwapWidget {...props} theme="light" />
+    </div>
+  );
+}

packages/thirdweb/src/stories/BuyWidget.stories.tsx

@@ -9,9 +9,6 @@ import {
 import { storyClient } from "./utils.js";
 
 const meta = {
-  parameters: {
-    layout: "centered",
-  },
   title: "Bridge/Buy/BuyWidget",
 } satisfies Meta<typeof BuyWidget>;
 export default meta;
@@ -143,7 +140,14 @@ export function LargeAmount() {
 
 function Variant(props: BuyWidgetProps) {
   return (
-    <div style={{ display: "flex", flexDirection: "column", gap: "40px" }}>
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: "40px",
+        alignItems: "center",
+      }}
+    >
       <BuyWidget {...props} theme="dark" />
       <BuyWidget {...props} theme="light" />
     </div>