@xswap-link/sdk 0.14.0 → 0.14.1

package/localTheme.ts

@@ -50,8 +50,9 @@ const lightThemeStyles: ModalIntegrationThemeStyles = {
 };
 
 const darkThemeStyles: ModalIntegrationThemeStyles = {
-  mainAccentLight: "#3681C6",
-  mainAccentDark: "#2B4A9D",
+  // Lavender CTA gradient from the swap-v2 design
+  mainAccentLight: "#D3DAF2",
+  mainAccentDark: "#B8C1E9",
   bgPrimary: "#020202",
   bgSecondary: "#0F0F0F",
   bgTertiary: "#ffffff",
@@ -62,7 +63,8 @@ const darkThemeStyles: ModalIntegrationThemeStyles = {
   textGreen: "#4CAF50",
   clickSecondary: "#3681C6",
   clickTertiary: "#FFFFFF",
-  buttonPrText: "#FFFFFF",
+  // Dark text sits on the light lavender primary button
+  buttonPrText: "#020202",
   buttonPrOffBg: "#272727",
   buttonPrOffText: "#90A4AE",
   labelText: "#FFFFFF",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.14.0",
+  "version": "0.14.1",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

package/src/assets/icons/AdjustmentsIcon.tsx

@@ -3,16 +3,14 @@ export const AdjustmentsIcon = ({ className }: { className?: string }) => {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      // The 20px-wide artwork is clipped to a 16px box in the design,
+      // so the slider lines run edge to edge.
+      viewBox="2 0 16 10.4"
       stroke="currentColor"
+      strokeLinejoin="round"
       className={className}
     >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75"
-      />
+      <path d="M8.4 2.1L20 2.1M5.2 2.1C5.2 1.21634 5.91635 0.5 6.8 0.5C7.68366 0.5 8.4 1.21635 8.4 2.1C8.4 2.98366 7.68366 3.7 6.8 3.7C5.91635 3.7 5.2 2.98365 5.2 2.1ZM0 2.1H5.2M14.8 8.3L20 8.3M11.6 8.3C11.6 7.41634 12.3163 6.7 13.2 6.7C14.0837 6.7 14.8 7.41635 14.8 8.3C14.8 9.18366 14.0837 9.9 13.2 9.9C12.3163 9.9 11.6 9.18366 11.6 8.3ZM6.8 8.3H11.6" />
     </svg>
   );
 };

package/src/assets/icons/ClockIcon.tsx

@@ -3,16 +3,12 @@ export const ClockIcon = ({ className }: { className?: string }) => {
     <svg
       xmlns="http://www.w3.org/2000/svg"
       fill="none"
-      viewBox="0 0 24 24"
-      strokeWidth={1.5}
+      viewBox="0 0 16 16"
       stroke="currentColor"
       className={className}
     >
-      <path
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z"
-      />
+      <path d="M8 0.5C12.1421 0.5 15.5 3.85786 15.5 8C15.5 12.0748 12.2503 15.3875 8.20117 15.4941L4.35352 11.6465C3.67047 10.924 2.67065 9.92446 1.84375 9.10742C1.42752 8.69616 1.05392 8.32896 0.78418 8.06543C0.671658 7.9555 0.576752 7.86393 0.504883 7.79395C0.614072 3.7471 3.92679 0.5 8 0.5Z" />
+      <path d="M8 4V8H10.0011" />
     </svg>
   );
 };

package/src/assets/icons/CloseIcon.tsx

@@ -6,10 +6,14 @@ export const CloseIcon: FC<{ className?: string }> = ({ className }) => {
       height="18"
       width="18"
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 10.312 8.319"
+      viewBox="0 0 10 9"
+      fill="none"
+      stroke="currentColor"
       className={className || ""}
     >
-      <path d="M6.073 4.078 10.151 0H9.093A1.87 1.87 0 0 0 7.77.548L5.157 3.162 2.543.548A1.87 1.87 0 0 0 1.22 0H.161L4.24 4.078 0 8.318h1.058a1.87 1.87 0 0 0 1.322-.547l2.777-2.777 2.776 2.777a1.869 1.869 0 0 0 1.322.548h1.058Z" />
+      {/* Hairline 1px stroke at any render size, as in the design */}
+      <path vectorEffect="non-scaling-stroke" d="M0 0.5H1L9 8.5H10" />
+      <path vectorEffect="non-scaling-stroke" d="M10 0.5H9L1 8.5H0" />
     </svg>
   );
 };

package/src/assets/icons/WarningIcon.tsx

@@ -2,14 +2,17 @@ export const WarningIcon = ({ className }: { className?: string }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="currentColor"
+      viewBox="0 0 14 14"
+      fill="none"
       className={className}
     >
       <path
-        fillRule="evenodd"
-        d="M9.401 3.003c1.155-2 4.043-2 5.197 0l7.355 12.748c1.154 2-.29 4.5-2.599 4.5H4.645c-2.309 0-3.752-2.5-2.598-4.5L9.4 3.003ZM12 8.25a.75.75 0 0 1 .75.75v3.75a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75Zm0 8.25a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Z"
-        clipRule="evenodd"
+        d="M11 0C12.6568 6.60986e-05 14 1.34319 14 3V11C14 12.6568 12.6568 13.9999 11 14H3C1.34315 14 1.61073e-08 12.6569 0 11V3C1.28858e-07 1.34315 1.34315 0 3 0H11Z"
+        fill="#F46F28"
+      />
+      <path
+        d="M7.66699 9.66699V11H6.33301V9.66699H7.66699ZM8 3V4.33301L7.66699 5.66699V8.33301H6.33301V5.66699L6 4.33301V3H8Z"
+        fill="#0B0B0B"
       />
     </svg>
   );

package/src/components/Modal/index.tsx

@@ -7,6 +7,11 @@ import { FC, ReactNode } from "react";
  * - Modals needs to be inside all app's main contexts,
  * - Modals' need to rerender on props change.
  *
+ * Presentation follows the swap-v2 design:
+ * - sm and up: the content replaces the widget in place (fills the widget
+ *   container with the same radius), or is centered when in overlay mode,
+ * - below sm: a bottom sheet pinned to the viewport with a drag handle.
+ *
  * Usage:
  * ```
  * const [open, setOpen] = useState(false);
@@ -30,12 +35,14 @@ export const Modal: FC<{
   return (
     <div
       className={`${
-        overlay ? "fixed bg-[rgba(0,0,0,0.8)]" : "absolute"
-      } top-0 left-0 right-0 bottom-0 flex items-center justify-center z-10 ${
+        overlay
+          ? "fixed bg-[rgba(0,0,0,0.8)]"
+          : "fixed sm:absolute bg-[rgba(2,2,2,0.8)] sm:bg-transparent"
+      } top-0 left-0 right-0 bottom-0 flex flex-col justify-end sm:justify-center items-center z-10 ${
         className || ""
       }`}
       onMouseDown={(e) => {
-        if (e.target === e.currentTarget && overlay) {
+        if (e.target === e.currentTarget) {
           e.stopPropagation();
           e.nativeEvent.stopImmediatePropagation();
           e.preventDefault();
@@ -44,13 +51,11 @@ export const Modal: FC<{
       }}
     >
       <div
-        className="flex flex-col bg-t_bg_primary rounded-[20px] border border-solid border-t_text_primary border-opacity-10 p-5 sm:p-6 w-full min-w-[340px]"
-        style={{
-          height: overlay ? "600px" : "100%",
-          maxWidth: "636px",
-          maxHeight: "100%",
-        }}
+        className={`flex flex-col w-full bg-gradient-to-r from-t_bg_secondary/50 to-t_bg_secondary/50 bg-t_bg_primary border-t sm:border border-solid border-t_text_primary border-opacity-10 rounded-t-[24px] rounded-b-none sm:rounded-[32px] p-4 pt-2.5 sm:p-8 h-[85vh] max-h-full overflow-hidden ${
+          overlay ? "sm:h-[600px] sm:max-w-[636px]" : "sm:h-full"
+        }`}
       >
+        <div className="sm:hidden mx-auto mb-4 h-1 w-8 rounded-full bg-t_bg_tertiary bg-opacity-10 shrink-0" />
         {children}
       </div>
     </div>

package/src/components/PoweredBy/index.tsx

@@ -3,17 +3,15 @@ import { ChainlinkMarkIcon } from "@src/assets/icons";
 export const PoweredBy = () => {
   return (
     <div className="flex justify-end items-center">
-      <div className="flex items-center gap-2 p-2 rounded-lg bg-gradient-to-r from-t_bg_tertiary/0 to-t_bg_tertiary/5">
-        <div className="flex items-center [&_svg]:h-6 [&_svg]:w-6">
+      <div className="flex items-center gap-2.5 px-3 py-2 rounded-lg bg-gradient-to-r from-t_bg_tertiary/0 to-t_bg_tertiary/5">
+        <div className="flex items-center [&_svg]:h-5 [&_svg]:w-5">
           <ChainlinkMarkIcon />
         </div>
-        <p className="text-sm whitespace-nowrap leading-6">
-          <span className="text-t_text_primary text-opacity-50">
-            {`Backed By `}
-          </span>
-          <span className="text-t_text_primary text-opacity-75">
-            Chainlink.
+        <p className="text-xs whitespace-nowrap leading-5 tracking-[0.015em]">
+          <span className="text-t_text_primary text-opacity-70">
+            {`POWERED BY `}
           </span>
+          <span className="text-t_text_primary">CCIP.</span>
         </p>
       </div>
     </div>

package/src/components/Swap/PickerView/index.tsx

@@ -0,0 +1,151 @@
+import { useSwapContext } from "@src/context";
+import { Chain, TokenOption } from "@src/models";
+import {
+  isBridgeTokenConnectionSupported,
+  isChainConnectionSupported,
+} from "@src/utils";
+import { ChainPicker } from "../SwapView/SwapPanel/TokenPanel/ChainPicker";
+import { TokenPicker } from "../SwapView/SwapPanel/TokenPanel/TokenPicker";
+
+/**
+ * Token/network picker rendered while `activePicker` is set:
+ * - sm and up it replaces the swap view inside the widget container, so it
+ *   sits on the exact same glass background,
+ * - below sm the same element becomes a bottom sheet pinned to the viewport.
+ */
+export const PickerView = () => {
+  const {
+    activePicker,
+    setActivePicker,
+    bridgeUI,
+    srcChain,
+    dstChain,
+    srcToken,
+    dstToken,
+    srcChainTokensOptions,
+    srcChainOtherTokensOptions,
+    dstChainTokensOptions,
+    dstChainOtherTokensOptions,
+    setSrcToken,
+    setSrcChain,
+    setDstToken,
+    setDstChain,
+    supportedChains,
+    dstChainOptions,
+    bridgeTokensDictionary,
+  } = useSwapContext();
+
+  const type = activePicker ?? "source";
+  // In bridge mode the destination token is derived from the source token,
+  // so the destination side picks a chain instead of a token.
+  const bridgeDestination = bridgeUI && type === "destination";
+  const chain = type === "source" ? srcChain : dstChain;
+  const token = type === "source" ? srcToken : dstToken;
+  const tokens =
+    type === "source" ? srcChainTokensOptions : dstChainTokensOptions;
+  const otherTokens =
+    type === "source" ? srcChainOtherTokensOptions : dstChainOtherTokensOptions;
+
+  const close = () => setActivePicker(null);
+
+  const onTokenSelect = (token: TokenOption) => {
+    const newChain = supportedChains.find(
+      (chain) => chain.chainId === token.chainId,
+    );
+
+    if (type === "source") {
+      setSrcToken(token);
+      setSrcChain(newChain);
+      // The new source token cannot reach the current destination —
+      // reset the destination so the user picks a reachable one.
+      if (
+        dstChain &&
+        (!isChainConnectionSupported(newChain, dstChain.chainId, bridgeUI) ||
+          (bridgeUI &&
+            !isBridgeTokenConnectionSupported({
+              token,
+              tokenChain: newChain,
+              dstChainId: dstChain.chainId,
+              bridgeTokensDictionary,
+            })))
+      ) {
+        setDstChain(undefined);
+        setDstToken(undefined);
+      }
+    } else {
+      setDstToken(token);
+      setDstChain(newChain);
+      // The current source cannot reach the new destination chain —
+      // reset the source so the user picks a reachable one.
+      if (
+        srcChain &&
+        newChain &&
+        !isChainConnectionSupported(srcChain, newChain.chainId, bridgeUI)
+      ) {
+        setSrcChain(undefined);
+        setSrcToken(undefined);
+      }
+    }
+    close();
+  };
+
+  const onDstChainSelect = (newChain: Chain & { disabled?: boolean }) => {
+    // The current source cannot reach the new destination chain —
+    // reset the source so the user picks a reachable one.
+    if (newChain.disabled || newChain.chainId === srcChain?.chainId) {
+      setSrcChain(undefined);
+      setSrcToken(undefined);
+    }
+    setDstChain(newChain);
+    // The destination token gets derived from the source token and the
+    // new chain by the SwapProvider validation effect.
+    setDstToken(undefined);
+    close();
+  };
+
+  if (!activePicker) {
+    return null;
+  }
+
+  return (
+    <div
+      className="fixed top-0 left-0 right-0 bottom-0 z-10 flex flex-col justify-end bg-[rgba(2,2,2,0.8)] sm:absolute sm:z-[1] sm:justify-start sm:bg-transparent"
+      onMouseDown={(e) => {
+        if (e.target === e.currentTarget) {
+          e.stopPropagation();
+          e.nativeEvent.stopImmediatePropagation();
+          e.preventDefault();
+          close();
+        }
+      }}
+    >
+      <div className="flex flex-col w-full h-[85vh] max-h-full overflow-hidden p-4 pt-2.5 rounded-t-[24px] border-t border-solid border-t_text_primary border-opacity-10 bg-gradient-to-r from-t_bg_secondary/50 to-t_bg_secondary/50 bg-t_bg_primary sm:h-full sm:p-0 sm:rounded-none sm:border-0 sm:bg-none sm:bg-transparent">
+        <div className="sm:hidden mx-auto mb-4 h-1 w-8 rounded-full bg-t_bg_tertiary bg-opacity-10 shrink-0" />
+        {bridgeDestination ? (
+          <ChainPicker
+            chains={dstChainOptions}
+            selectedChainId={dstChain?.chainId}
+            sameChainId={srcChain?.chainId}
+            onSelect={onDstChainSelect}
+            onClose={close}
+          />
+        ) : (
+          <TokenPicker
+            type={type}
+            chain={chain}
+            tokens={tokens}
+            otherTokens={otherTokens}
+            selectedTokenAddress={token?.address}
+            onSelect={onTokenSelect}
+            isOpen
+            setModalOpen={(open) => {
+              if (!open) {
+                close();
+              }
+            }}
+          />
+        )}
+      </div>
+    </div>
+  );
+};

package/src/components/Swap/SettingsView/Delivery/index.tsx

@@ -15,7 +15,7 @@ export const Delivery = () => {
         </h2>
         <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25 shrink-0" />
         <p className="text-sm leading-6 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap truncate">
-          {expressDelivery ? "Max. Time 30 Sec." : "Max. Time 30 Min."}
+          {expressDelivery ? "Est. Time 30 Sec." : "Est. Time 30 Min."}
         </p>
         <Tooltip
           text={

package/src/components/Swap/SwapView/ConfirmationView/TxOverview/index.tsx

@@ -11,11 +11,12 @@ import {
   crosschainEstimationTimes,
 } from "@src/constants";
 import { useHistory, useSwapContext, useTxUIWrapper } from "@src/context";
-import { ADDRESSES, XSwapRouterAbi } from "@src/contracts";
+import { ADDRESSES, ERC20Abi, XSwapRouterAbi } from "@src/contracts";
 import { useEvmContractApi } from "@src/hooks";
 import useNetworks from "@src/hooks/networkManagement/useNetworks";
 import {
   Ecosystem,
+  TransactionRequest,
   TxStatus,
   Transaction as EVMTransaction,
 } from "@src/models";
@@ -206,7 +207,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
   const enqueueSwapTx = useCallback(async () => {
     if (srcToken) {
       if (route && route.ecosystem === Ecosystem.EVM) {
-        const enqueueSwap = () => {
+        const enqueueSwap = ({ afterApproval = false } = {}) => {
           enqueueTransaction({
             executeTransaction: () => {
               if (!route.transactions.swap || !signer) {
@@ -216,6 +217,9 @@ export const TxOverview = ({ onCloseClick }: Props) => {
               return evmContractApi.executeCalldata(
                 signer,
                 route.transactions.swap,
+                // right after an approval the RPC may not see the new
+                // allowance yet, so let the gas estimation retry
+                { retryGasEstimation: afterApproval },
               );
             },
             txStatus: TxStatus.SIGNING_TX,
@@ -258,7 +262,15 @@ export const TxOverview = ({ onCloseClick }: Props) => {
             },
             txStatus: TxStatus.SIGNING_APPROVAL,
             handlers: {
-              onSuccess: () => enqueueSwap(),
+              onSuccess: async () => {
+                if (signer && route.transactions.approve) {
+                  await waitForApprovalAllowance(
+                    signer,
+                    route.transactions.approve,
+                  );
+                }
+                enqueueSwap({ afterApproval: true });
+              },
             },
           });
         } else {
@@ -452,7 +464,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
             enqueueSwapTx();
           }}
           type="button"
-          className="text-white border-none h-14 text-sm font-bold w-full py-5 cursor-pointer bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark rounded-lg"
+          className="text-t_button_pr_text border-none h-14 text-sm font-bold w-full py-5 cursor-pointer bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark rounded-lg"
         >
           Sign and swap
         </Button>
@@ -463,6 +475,40 @@ export const TxOverview = ({ onCloseClick }: Props) => {
   );
 };
 
+const ALLOWANCE_POLL_INTERVAL_MS = 500;
+const ALLOWANCE_POLL_MAX_ATTEMPTS = 10;
+
+// After an approval is mined, RPC nodes behind a load balancer may still
+// return the stale allowance for a while, which makes the swap's gas
+// estimation revert. Poll until the approved amount is visible (or give up
+// after ~5s and let the gas estimation retry handle the rest).
+async function waitForApprovalAllowance(
+  signer: ethers.Signer,
+  approveTx: TransactionRequest,
+) {
+  try {
+    const erc20 = new ethers.Contract(approveTx.to, ERC20Abi, signer);
+    const [spender, amount] = erc20.interface.decodeFunctionData(
+      "approve",
+      approveTx.data,
+    );
+    const owner = await signer.getAddress();
+    for (let attempt = 0; attempt < ALLOWANCE_POLL_MAX_ATTEMPTS; attempt++) {
+      const currentAllowance = await erc20.allowance(owner, spender);
+      if (currentAllowance.gte(amount)) {
+        return;
+      }
+      await new Promise((resolve) =>
+        setTimeout(resolve, ALLOWANCE_POLL_INTERVAL_MS),
+      );
+    }
+  } catch (err) {
+    // best-effort — non-standard approve calldata or a failing allowance
+    // call shouldn't block the swap
+    console.error("Failed to poll allowance after approval:", err);
+  }
+}
+
 // Add this function to check token delegation and delegate if necessary
 async function checkAndDelegateTokenAuthority(
   connection: Connection,

package/src/components/Swap/SwapView/FeesPanel/DeliveryInfo/index.tsx

@@ -11,7 +11,7 @@ export const DeliveryInfo = () => {
           : "text-t_text_primary opacity-50"
       }`}
     >
-      {isExpressDeliveryActive ? "Max. Time 30 Sec." : "Max. Time 30 Min."}
+      {isExpressDeliveryActive ? "Est. Time 30 Sec." : "Est. Time 30 Min."}
     </span>
   );
 };

package/src/components/Swap/SwapView/FeesPanel/index.tsx

@@ -195,7 +195,7 @@ export const FeesPanel = () => {
             )}
             {route && !isLoading && srcChain?.chainId !== dstChain?.chainId && (
               <>
-                <div className="w-0.5 h-0.5 bg-t_text_primary opacity-25" />
+                <span className="text-t_text_primary opacity-50">/</span>
                 <DeliveryInfo />
               </>
             )}

package/src/components/Swap/SwapView/SwapButton/index.tsx

@@ -342,10 +342,10 @@ export const SwapButton = () => {
         type="button"
         disabled={button.disabled}
         onClick={button.fn}
-        className={`text-sm font-medium leading-6 tracking-[0.01em] w-full px-6 py-3 cursor-pointer disabled:cursor-not-allowed rounded-[10px] border-none transition-opacity ${
+        className={`text-base font-medium leading-6 tracking-[0.01em] w-full px-6 py-3 cursor-pointer disabled:cursor-not-allowed rounded-lg border-none transition-[filter] ${
           button.disabled
             ? "bg-t_button_pr_off_bg text-t_button_pr_off_text"
-            : "bg-gradient-to-br from-t_main_accent_light to-t_main_accent_dark text-t_button_pr_text hover:opacity-90"
+            : "bg-gradient-to-b from-t_main_accent_light from-50% to-t_main_accent_dark text-t_button_pr_text hover:brightness-105"
         }`}
       >
         {button.text}

package/src/components/Swap/SwapView/SwapPanel/AmountPanel/Balance/index.tsx

@@ -55,9 +55,9 @@ export const Balance = ({ type }: Props) => {
       ) : (
         <p className="text-[10px] leading-4 text-right whitespace-nowrap">
           <span className="text-t_text_primary text-opacity-50">
-            {`Balance `}
+            {`Balance. `}
           </span>
-          <span className="text-t_text_primary text-opacity-75">
+          <span className="text-t_text_primary text-opacity-75 tracking-[0.032em]">
             {`${balanceInfo} ${token.symbol}`}
           </span>
         </p>

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/ChainPicker/index.tsx

@@ -0,0 +1,143 @@
+import { CloseIcon, SearchIcon, WarningIcon } from "@src/assets/icons";
+import { Chain } from "@src/models";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Virtuoso } from "react-virtuoso";
+
+type ChainOption = Chain & {
+  disabled?: boolean;
+};
+
+type Props = {
+  chains: ChainOption[];
+  selectedChainId?: string;
+  /**
+   * Chain occupied by the other side of the bridge — picking it requires
+   * resetting the source, same as picking an unreachable chain.
+   */
+  sameChainId?: string;
+  onSelect: (chain: ChainOption) => void;
+  onClose: () => void;
+};
+
+/**
+ * Network picker used in bridge mode, where the destination token is
+ * derived from the source token and only the chain gets picked by the user.
+ */
+export const ChainPicker = ({
+  chains,
+  selectedChainId,
+  sameChainId,
+  onSelect,
+  onClose,
+}: Props) => {
+  const [searchValue, setSearchValue] = useState("");
+  const chainSearchRef = useRef<HTMLInputElement | null>(null);
+
+  useEffect(() => {
+    setTimeout(() => {
+      chainSearchRef.current?.focus();
+    }, 10); // delay focus a tiny bit to ensure it works
+  }, []);
+
+  const filteredChains = useMemo(() => {
+    if (!searchValue) return chains;
+    const searchLower = searchValue.toLowerCase();
+    return chains.filter(
+      (chain) =>
+        chain.displayName.toLowerCase().includes(searchLower) ||
+        chain.chainId.toLowerCase().includes(searchLower),
+    );
+  }, [chains, searchValue]);
+
+  // The current source cannot reach this chain — picking it resets the source.
+  const requiresSourceReset = (chain: ChainOption) =>
+    !!chain.disabled || chain.chainId === sameChainId;
+
+  return (
+    <>
+      <div className="flex justify-between items-center mb-6">
+        <div className="text-2xl leading-8 tracking-[0.01em] text-t_text_primary">
+          Select Network
+        </div>
+        <button
+          type="button"
+          aria-label="Close"
+          className="flex items-center justify-center w-8 h-8 rounded-md bg-t_bg_tertiary bg-opacity-5 hover:bg-opacity-10 transition-colors"
+          onClick={onClose}
+        >
+          <div className="w-4 h-4 opacity-50 fill-t_text_primary flex items-center justify-center">
+            <CloseIcon />
+          </div>
+        </button>
+      </div>
+
+      <div className="flex items-center gap-2 h-14 px-4 rounded-xl bg-t_bg_tertiary bg-opacity-[0.03] border border-solid border-t_text_primary border-opacity-5 mb-6">
+        <div className="fill-t_text_primary opacity-50 [&_svg]:w-4 [&_svg]:h-4 flex items-center shrink-0">
+          <SearchIcon />
+        </div>
+        <input
+          ref={chainSearchRef}
+          value={searchValue}
+          onChange={(e) => setSearchValue(e.target.value)}
+          placeholder="Search network name"
+          className="bg-transparent border-none outline-none w-full text-sm leading-6 text-t_text_primary placeholder:text-t_text_primary placeholder:text-opacity-40"
+        />
+      </div>
+
+      <div className="flex flex-col mx-0 h-full min-h-0 flex-1">
+        {filteredChains.length ? (
+          <Virtuoso
+            style={{ maxHeight: "700px", height: "100%" }}
+            data={filteredChains}
+            itemContent={(_, chain) => {
+              const resetWarning = requiresSourceReset(chain);
+              const isSelected = chain.chainId === selectedChainId;
+              return (
+                <div className="pb-2">
+                  <div
+                    onClick={() => onSelect(chain)}
+                    className={`flex gap-3 items-center p-3 sm:p-4 rounded-xl cursor-pointer bg-gradient-to-r from-t_bg_tertiary/[0.02] to-t_bg_tertiary/[0.02] bg-[rgba(40,40,40,0.15)] hover:bg-t_bg_tertiary hover:bg-opacity-10 transition-colors ${
+                      isSelected ? "!bg-t_bg_tertiary !bg-opacity-10" : ""
+                    }`}
+                  >
+                    <img
+                      src={chain.image}
+                      alt={chain.displayName}
+                      className={`w-10 h-10 rounded-full shrink-0 ${
+                        resetWarning ? "opacity-40" : ""
+                      }`}
+                    />
+                    <div className="flex justify-between items-center gap-2 w-full min-w-0">
+                      <p
+                        className={`text-sm font-medium leading-5 tracking-[0.01em] text-t_text_primary ${
+                          resetWarning ? "opacity-40" : ""
+                        }`}
+                      >
+                        {chain.displayName}
+                      </p>
+                      {resetWarning && (
+                        <div className="flex items-center justify-end gap-1.5 text-[#D77F02]">
+                          <WarningIcon className="w-3.5 h-3.5 shrink-0" />
+                          <span className="text-xs leading-[18px] tracking-[0.01em] whitespace-nowrap">
+                            <span className="sm:hidden">Source will reset.</span>
+                            <span className="hidden sm:inline">
+                              Source will reset after selection.
+                            </span>
+                          </span>
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                </div>
+              );
+            }}
+          />
+        ) : (
+          <div className="text-center py-1 text-sm text-t_text_primary text-opacity-50">
+            No network found
+          </div>
+        )}
+      </div>
+    </>
+  );
+};