@xswap-link/sdk 0.14.1 → 0.15.1

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/NetworkFilter/index.tsx

@@ -1,4 +1,4 @@
-import { ChevronDownIcon, SearchIcon } from "@src/assets/icons";
+import { ChevronDownThinIcon, SearchThinIcon } from "@src/assets/icons";
 import { useSwapContext } from "@src/context";
 import { SwapPanelType } from "@src/components/Swap/SwapView";
 import { Chain } from "@src/models";
@@ -56,14 +56,15 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
     return () => document.removeEventListener("mousedown", onPointerDown);
   }, []);
 
-  const previewChains = chains.slice(0, 3);
+  // 2x2 icon cluster shown when no network is picked
+  const clusterChains = chains.slice(0, 4);
 
   return (
     <div className="relative" ref={containerRef}>
       <button
         type="button"
         onClick={() => setOpen((state) => !state)}
-        className="flex items-center gap-2 h-12 px-3 py-2 rounded-lg bg-t_bg_tertiary bg-opacity-[0.04] hover:bg-opacity-10 transition-colors"
+        className="flex items-center gap-2.5 h-12 px-3 py-2 rounded-lg bg-t_bg_tertiary bg-opacity-[0.04] hover:bg-opacity-10 transition-colors"
       >
         {selectedChain ? (
           <img
@@ -72,13 +73,13 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
             className="w-5 h-5 rounded-full"
           />
         ) : (
-          <div className="flex -space-x-1.5 shrink-0">
-            {previewChains.map((chain) => (
+          <div className="grid grid-cols-2 gap-0.5 shrink-0">
+            {clusterChains.map((chain) => (
               <img
                 key={chain.chainId}
                 src={chain.image}
                 alt={chain.displayName}
-                className="w-5 h-5 rounded-full border border-solid border-t_bg_primary bg-t_bg_primary"
+                className="w-[11px] h-[11px] rounded-full"
               />
             ))}
           </div>
@@ -89,67 +90,77 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
             : `${chains.length} Networks`}
         </p>
         <div
-          className={`flex items-center justify-center w-6 h-6 fill-t_text_primary opacity-50 transition-transform [&_svg]:w-3 [&_svg]:h-3 ${
+          className={`flex items-center justify-center w-6 h-6 text-t_text_primary opacity-50 transition-transform ${
             open ? "rotate-180" : ""
           }`}
         >
-          <ChevronDownIcon />
+          <ChevronDownThinIcon />
         </div>
       </button>
 
       {open && (
-        <div className="absolute right-0 top-[calc(100%+8px)] z-20 flex flex-col w-[220px] max-h-[280px] rounded-xl bg-t_bg_primary border border-solid border-t_text_primary border-opacity-10 backdrop-blur-[24px] overflow-hidden shadow-lg">
-          <div className="flex items-center gap-2 px-4 py-3 border-b border-solid border-t_text_primary border-opacity-10">
-            <div className="fill-t_text_primary opacity-50 [&_svg]:w-3.5 [&_svg]:h-3.5 flex items-center">
-              <SearchIcon />
+        <div className="absolute -right-2 top-[calc(100%+8px)] z-20 flex flex-col w-[296px] py-5 px-2.5 rounded-xl network-dropdown-surface border border-solid border-t_text_primary border-opacity-5 overflow-hidden">
+          <div className="flex items-center gap-2 px-2.5 pb-4">
+            <div className="text-t_text_primary opacity-60 [&_svg]:w-4 [&_svg]:h-4 flex items-center">
+              <SearchThinIcon />
             </div>
             <input
               value={searchValue}
               onChange={(e) => setSearchValue(e.target.value)}
               placeholder={`Browse ${chains.length} Chains...`}
-              className="bg-transparent border-none outline-none w-full text-sm text-t_text_primary placeholder:text-t_text_primary placeholder:text-opacity-40"
+              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="h-[200px]">
+          <div className="h-px w-full bg-t_bg_tertiary bg-opacity-5 mb-2" />
+          {/* The design's list mask is a hard cut 6px into the sixth row —
+              that sliver is the hint that the list scrolls. Rows are 40px
+              pills around 24px of content, so the cut lands at 214px. */}
+          <div className="h-[214px]">
             <Virtuoso
-              style={{ height: "200px" }}
+              style={{ height: "214px" }}
               data={[undefined, ...filteredChains] as (Chain | undefined)[]}
-              itemContent={(_, chain) => (
-                <button
-                  type="button"
-                  onClick={() => {
-                    onSelect(chain);
-                    setOpen(false);
-                  }}
-                  className={`flex items-center gap-2 w-full px-4 py-2 text-left hover:bg-t_bg_tertiary hover:bg-opacity-10 transition-colors ${
-                    (chain?.chainId || "") === (selectedChain?.chainId || "")
-                      ? "bg-t_bg_tertiary bg-opacity-10"
-                      : ""
-                  }`}
-                >
-                  {chain ? (
-                    <img
-                      src={chain.image}
-                      alt={chain.displayName}
-                      className="w-5 h-5 rounded-full"
-                    />
-                  ) : (
-                    <div className="flex -space-x-1 shrink-0">
-                      {previewChains.map((previewChain) => (
-                        <img
-                          key={previewChain.chainId}
-                          src={previewChain.image}
-                          alt={previewChain.displayName}
-                          className="w-4 h-4 rounded-full border border-solid border-t_bg_primary bg-t_bg_primary"
-                        />
-                      ))}
-                    </div>
-                  )}
-                  <p className="text-sm leading-6 text-t_text_primary truncate">
-                    {chain ? chain.displayName : "All Networks"}
-                  </p>
-                </button>
-              )}
+              itemContent={(_, chain) => {
+                const isSelected =
+                  (chain?.chainId || "") === (selectedChain?.chainId || "");
+                return (
+                  <button
+                    type="button"
+                    onClick={() => {
+                      onSelect(chain);
+                      setOpen(false);
+                    }}
+                    className={`network-dropdown-row flex items-center gap-2.5 w-full h-10 px-2.5 rounded-lg text-left ${
+                      isSelected ? "network-dropdown-row-active" : ""
+                    }`}
+                  >
+                    {chain ? (
+                      <img
+                        src={chain.image}
+                        alt={chain.displayName}
+                        className="w-6 h-6 rounded-full"
+                      />
+                    ) : (
+                      <div className="grid grid-cols-2 gap-0.5 shrink-0">
+                        {clusterChains.map((clusterChain) => (
+                          <img
+                            key={clusterChain.chainId}
+                            src={clusterChain.image}
+                            alt={clusterChain.displayName}
+                            className="w-[11px] h-[11px] rounded-full"
+                          />
+                        ))}
+                      </div>
+                    )}
+                    <p
+                      className={`text-sm leading-[18px] tracking-[0.01em] text-t_text_primary truncate ${
+                        isSelected ? "" : "text-opacity-80"
+                      }`}
+                    >
+                      {chain ? chain.displayName : "All Networks"}
+                    </p>
+                  </button>
+                );
+              }}
             />
           </div>
         </div>

package/src/components/Swap/SwapView/SwapPanel/TokenPanel/TokenPicker/TokenItem/index.tsx

@@ -139,7 +139,7 @@ export const TokenItem = ({
               )
             )}
             {resetWarning ? (
-              <div className="flex items-center justify-end gap-1.5 text-[#D77F02]">
+              <div className="flex items-center justify-end gap-1.5 text-[#F46F28]">
                 <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">

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

@@ -1,6 +1,6 @@
 import { faCheck } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { CloseIcon, CopyIcon, SearchIcon } from "@src/assets/icons";
+import { CloseIcon, CopyIcon, SearchThinIcon } from "@src/assets/icons";
 import {
   Button,
   Spinner,
@@ -20,7 +20,7 @@ import {
 } from "@src/utils";
 import { BigNumber, ethers } from "ethers";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { GroupedVirtuoso } from "react-virtuoso";
+import { Virtuoso } from "react-virtuoso";
 import { NetworkFilter } from "./NetworkFilter";
 import { TokenItem } from "./TokenItem";
 import { useAccount } from "wagmi";
@@ -55,7 +55,11 @@ export const TokenPicker = ({
   const [loadingCustomTokenData, setLoadingCustomTokenData] = useState(false);
   const [customTokenData, setCustomTokenData] =
     useState<ImportedTokenData | null>(null);
-  const [networkFilter, setNetworkFilter] = useState<Chain | undefined>(chain);
+  // Always opens on "All Networks" — the cross-chain token list is the
+  // default view even when a chain is already set on the swap panel.
+  const [networkFilter, setNetworkFilter] = useState<Chain | undefined>(
+    undefined,
+  );
   const currentRouteRequestNonce = useRef<number>(0);
   const tokenSearchRef = useRef<HTMLInputElement | null>(null);
 
@@ -295,8 +299,7 @@ export const TokenPicker = ({
 
   useEffect(() => {
     setSearchValue("");
-    setNetworkFilter(chain);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    setNetworkFilter(undefined);
   }, [isOpen]);
 
   const isMatch = (value, searchValue) =>
@@ -422,11 +425,50 @@ export const TokenPicker = ({
       : [{ label: "RECOMMENDED.", tokens: recommendedTokens }];
   }, [ownedTokens, recommendedTokens]);
 
-  const allTokens = useMemo(
-    () => tokenGroups.flatMap((group) => group.tokens),
+  // The current group's label renders OUTSIDE the scroll container (pinned
+  // above it, transparent bg), so rows physically clip on the label's bottom
+  // edge — the scroller's top edge. Labels of the following groups stay
+  // in-flow and take over the pinned slot once they reach that line.
+  const listRows = useMemo(
+    () =>
+      tokenGroups.flatMap((group, groupIndex) => {
+        const rows: (
+          | { kind: "label"; label: string; groupLabel: string }
+          | { kind: "empty"; groupLabel: string }
+          | { kind: "token"; token: TokenOption; groupLabel: string }
+        )[] =
+          groupIndex === 0
+            ? []
+            : [
+                {
+                  kind: "label",
+                  label: group.label,
+                  groupLabel: group.label,
+                },
+              ];
+        if (group.tokens.length) {
+          rows.push(
+            ...group.tokens.map((token) => ({
+              kind: "token" as const,
+              token,
+              groupLabel: group.label,
+            })),
+          );
+        } else {
+          rows.push({ kind: "empty", groupLabel: group.label });
+        }
+        return rows;
+      }),
     [tokenGroups],
   );
 
+  // Index of the topmost (partially) visible row, reported by Virtuoso.
+  const [topRowIndex, setTopRowIndex] = useState(0);
+  const pinnedGroupLabel =
+    listRows[Math.min(topRowIndex, listRows.length - 1)]?.groupLabel ??
+    tokenGroups[0]?.label ??
+    "";
+
   useEffect(() => {
     if (isOpen && tokenSearchRef.current) {
       setTimeout(() => {
@@ -438,7 +480,7 @@ export const TokenPicker = ({
   return showImportWarning ? (
     <>
       <div className="flex justify-between items-center mb-6">
-        <div className="text-2xl leading-8 tracking-[0.01em]">
+        <div className="text-2xl font-medium leading-8 tracking-[0.01em]">
           Import token
         </div>
         <button
@@ -528,7 +570,7 @@ export const TokenPicker = ({
   ) : (
     <>
       <div className="flex justify-between items-center mb-6">
-        <div className="text-2xl leading-8 tracking-[0.01em] text-t_text_primary">
+        <div className="text-2xl font-medium leading-8 tracking-[0.01em] text-t_text_primary">
           Select Token
         </div>
         <button
@@ -545,8 +587,8 @@ export const TokenPicker = ({
 
       <div className="flex items-center justify-between gap-2 h-14 pl-4 pr-1 rounded-xl bg-t_bg_tertiary bg-opacity-[0.03] border border-solid border-t_text_primary border-opacity-5 mb-6">
         <div className="flex items-center gap-2 flex-1 min-w-0">
-          <div className="fill-t_text_primary opacity-50 [&_svg]:w-4 [&_svg]:h-4 flex items-center shrink-0">
-            <SearchIcon />
+          <div className="text-t_text_primary opacity-60 flex items-center shrink-0">
+            <SearchThinIcon />
           </div>
           <input
             ref={tokenSearchRef}
@@ -584,7 +626,7 @@ export const TokenPicker = ({
                     <div className="text-sm font-medium text-ellipsis">
                       {customTokenData.name}
                     </div>
-                    <div className="text-xs text-t_text_primary !text-opacity-50 font-medium">
+                    <div className="text-xs text-t_text_primary !text-opacity-50">
                       {importChain?.displayName}
                     </div>
                   </div>
@@ -603,45 +645,54 @@ export const TokenPicker = ({
                 </div>
               </div>
             ) : (
-              <div className="flex flex-col h-full">
-                <GroupedVirtuoso
-                  style={{ maxHeight: "700px", height: "100%" }}
-                  groupCounts={tokenGroups.map((group) => group.tokens.length)}
-                  groupContent={(index) => (
-                    // Sticky section label: a near-opaque, blurred, widget-glass-colored
-                    // band — rows dissolve under it while scrolling instead
-                    // of showing through, and the band still picks up a hint
-                    // of the page glow like the glass around it.
-                    <div className="backdrop-blur-xl bg-gradient-to-r from-t_bg_secondary/40 to-t_bg_secondary/40 bg-t_bg_primary bg-opacity-75">
-                      <p className="pb-3 text-[10px] font-medium leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30 text-left">
-                        {tokenGroups[index]?.label}
-                      </p>
-                      {!tokenGroups[index]?.tokens.length && (
-                        <div className="text-center py-1 pb-3 text-sm text-t_text_primary text-opacity-50">
-                          No token found
-                        </div>
-                      )}
-                    </div>
-                  )}
-                  itemContent={(index) => {
-                    const token = allTokens[index];
-                    return (
-                      token && (
+              <div className="flex flex-col h-full min-h-0">
+                {/* Pinned label of the group at the top of the list; sits
+                    above the scroller, so rows clip on its bottom edge. */}
+                <p className="pb-3 text-[10px] leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30 text-left shrink-0">
+                  {pinnedGroupLabel}
+                </p>
+                <div className="relative flex flex-col flex-1 min-h-0">
+                  <Virtuoso
+                    style={{ maxHeight: "700px", height: "100%" }}
+                    totalCount={listRows.length}
+                    rangeChanged={({ startIndex }) => setTopRowIndex(startIndex)}
+                    itemContent={(index) => {
+                      const row = listRows[index];
+                      if (!row) {
+                        return null;
+                      }
+                      if (row.kind === "label") {
+                        return (
+                          <p className="pt-2 pb-3 text-[10px] leading-4 tracking-[0.015em] text-t_text_primary text-opacity-30 text-left">
+                            {row.label}
+                          </p>
+                        );
+                      }
+                      if (row.kind === "empty") {
+                        return (
+                          <div className="text-center py-1 pb-3 text-sm text-t_text_primary text-opacity-50">
+                            No token found
+                          </div>
+                        );
+                      }
+                      return (
                         <TokenItem
                           panelType={type}
-                          token={token}
+                          token={row.token}
                           selectedChainId={chain?.chainId}
                           selectedTokenAddress={selectedTokenAddress}
-                          resetWarning={getResetWarning(token)}
+                          resetWarning={getResetWarning(row.token)}
                           onClick={() => {
-                            onSelect(token);
+                            onSelect(row.token);
                             setModalOpen(false);
                           }}
                         />
-                      )
-                    );
-                  }}
-                />
+                      );
+                    }}
+                  />
+                  {/* Scroll fade — rows dissolve towards the widget bottom */}
+                  <div className="pointer-events-none absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-t_bg_secondary/65 to-t_bg_secondary/0" />
+                </div>
               </div>
             )}
           </>

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

@@ -1,5 +1,5 @@
-import { ChevronDownIcon } from "@src/assets/icons";
-import { TokenLogoWithChain } from "@src/components";
+import { ChevronDownThinIcon } from "@src/assets/icons";
+import { Skeleton, TokenLogoWithChain } from "@src/components";
 import { useSwapContext } from "@src/context";
 import { Chain, Token } from "@src/models";
 import { useMemo } from "react";
@@ -19,6 +19,7 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
     srcTokenLocked,
     dstChainLocked,
     setActivePicker,
+    isAsyncDataLoaded,
   } = useSwapContext();
 
   const integratorLockedDestinationToken = useMemo(
@@ -43,6 +44,25 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
     integratorLockedDestinationToken ||
     integratorLockedSourceToken;
 
+  if (!isAsyncDataLoaded) {
+    // Mirror the loaded layout: symbol bar + token circle with the small
+    // chain badge, so nothing shifts when the real content arrives.
+    return (
+      <div
+        className={`flex items-center shrink-0 min-h-11 ${className || ""}`}
+        aria-hidden
+      >
+        <div className="flex items-center gap-3">
+          <Skeleton className="w-12 h-4" />
+          <div className="relative flex items-end pr-1 pb-1">
+            <Skeleton className="w-10 h-10 rounded-full" />
+            <Skeleton className="absolute bottom-0 right-0 w-[18px] h-[18px] rounded-full border border-solid border-t_bg_secondary" />
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <button
       type="button"
@@ -50,7 +70,7 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
       onClick={() => {
         setActivePicker(type);
       }}
-      className={`flex items-center gap-1 shrink-0 rounded-lg ${
+      className={`flex items-center shrink-0 min-h-11 rounded-lg ${
         locked ? "" : "hover:opacity-80 transition-opacity"
       } ${className || ""}`}
     >
@@ -86,8 +106,10 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
         )}
       </div>
       {!locked && (
-        <div className="flex items-center justify-center w-6 h-6 fill-t_text_primary opacity-50 [&_svg]:w-3 [&_svg]:h-3">
-          <ChevronDownIcon />
+        // The 24px glyph has 8px of built-in whitespace on each side; pull the
+        // right side back so the chevron sits flush with the panel edge.
+        <div className="flex items-center justify-center w-6 h-6 ml-1 -mr-2 text-t_text_primary opacity-50">
+          <ChevronDownThinIcon />
         </div>
       )}
     </button>

package/src/components/Swap/SwapView/SwapPanel/UsdValue/index.tsx

@@ -16,11 +16,11 @@ export const UsdValue = ({ type }: Props) => {
   );
 
   if (type === "destination" && isFetchingRoute) {
-    return <Skeleton className="w-[80px] h-[16px]" />;
+    return <Skeleton className="w-[80px] h-[16px] my-1" />;
   }
 
   return (
-    <p className="text-[10px] leading-4 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap">
+    <p className="py-1 text-[10px] leading-4 tracking-[0.01em] text-t_text_primary text-opacity-50 whitespace-nowrap">
       {valueUsd ? `${valueUsd} USD` : ""}
     </p>
   );

package/src/components/Swap/SwapView/SwapPanel/WalletPanel/index.tsx

@@ -1,4 +1,5 @@
-import { ChevronDownIcon } from "@src/assets/icons";
+import { ChevronDownThinSmallIcon } from "@src/assets/icons";
+import { Skeleton } from "@src/components";
 import { useWallet } from "@src/context/WalletProvider";
 import { useSwapContext } from "@src/context";
 import { SwapPanelType } from "../..";
@@ -21,25 +22,28 @@ export const WalletPanel = ({ chain, className }: Props) => {
     solana,
     sui,
   } = useWallet();
-  const { integrationConfig, hasOnConnectWalletCallback, onConnectWallet } =
-    useSwapContext();
+  const {
+    integrationConfig,
+    hasOnConnectWalletCallback,
+    onConnectWallet,
+    isAsyncDataLoaded,
+  } = useSwapContext();
 
   const openEvmWalletModal = useCallback(() => {
     // Mirror SwapButton's contract: when the integrator supplied their own
     // connect handler and did not opt into the built-in picker, defer to it
-    // (e.g. the host dapp's RainbowKit modal) instead of opening the SDK picker.
+    // in every state — the host decides whether to show its connect modal or
+    // its account modal (e.g. RainbowKit) for an already-connected wallet.
     if (!integrationConfig.defaultWalletPicker && hasOnConnectWalletCallback) {
       onConnectWallet();
       return;
     }
     setOpenEVMWalletModal(true);
-    evm.connectWallet();
   }, [
     integrationConfig.defaultWalletPicker,
     hasOnConnectWalletCallback,
     onConnectWallet,
     setOpenEVMWalletModal,
-    evm,
   ]);
 
   const openWalletModal = useCallback(() => {
@@ -50,17 +54,10 @@ export const WalletPanel = ({ chain, className }: Props) => {
       openEvmWalletModal();
     } else if (chain.ecosystem === "solana") {
       setOpenSolanaWalletModal(true);
-      solana.connectWallet();
     } else if (chain.ecosystem === "sui") {
       setOpenSuiWalletModal(true);
     }
-  }, [
-    chain,
-    openEvmWalletModal,
-    solana,
-    setOpenSolanaWalletModal,
-    setOpenSuiWalletModal,
-  ]);
+  }, [chain, openEvmWalletModal, setOpenSolanaWalletModal, setOpenSuiWalletModal]);
 
   const address = useMemo(() => {
     if (!chain) {
@@ -76,23 +73,31 @@ export const WalletPanel = ({ chain, className }: Props) => {
     return "";
   }, [chain, evm, solana, sui]);
 
+  if (!isAsyncDataLoaded) {
+    return <Skeleton className="w-16 h-6" />;
+  }
+
+  // Reserve the button's height before the chain loads so the card
+  // doesn't grow when the wallet button appears.
   if (!chain) {
-    return null;
+    return <div className="h-6" aria-hidden />;
   }
 
   return (
     <button
       type="button"
       onClick={openWalletModal}
-      className={`flex items-center justify-center gap-0.5 px-2 py-1 rounded bg-t_bg_tertiary bg-opacity-5 hover:bg-opacity-10 transition-colors ${
+      className={`flex items-center justify-center px-2 py-1 rounded bg-t_bg_tertiary bg-opacity-5 hover:bg-opacity-10 transition-colors ${
         className || ""
       }`}
     >
       <p className="text-[10px] leading-4 tracking-[0.01em] text-t_text_primary whitespace-nowrap">
         {address ? shortAddress(address) : "Connect"}
       </p>
-      <div className="flex items-center justify-center w-4 h-4 fill-t_text_primary opacity-50 [&_svg]:w-2.5 [&_svg]:h-2.5">
-        <ChevronDownIcon />
+      {/* The 16px glyph has 6px of built-in whitespace on each side; pull the
+          right side back so the button's visual padding stays symmetric. */}
+      <div className="flex items-center justify-center w-4 h-4 -mr-1.5 text-t_text_primary opacity-50">
+        <ChevronDownThinSmallIcon />
       </div>
     </button>
   );

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

@@ -1,5 +1,5 @@
 import { useSwapContext } from "@src/context";
-import { useMemo } from "react";
+import { MouseEvent, useMemo } from "react";
 import { SwapPanelType } from "../index";
 import { AmountPanel } from "./AmountPanel";
 import { Balance } from "./AmountPanel/Balance";
@@ -23,15 +23,27 @@ export const SwapPanel = ({ type }: Props) => {
     [type, srcChain, dstChain],
   );
 
+  // The whole source card acts as the amount input's hit area; clicks on the
+  // nested buttons (wallet, MAX, token picker) must keep their own actions.
+  const focusAmountInput = (event: MouseEvent<HTMLDivElement>) => {
+    if (type !== "source" || (event.target as HTMLElement).closest("button")) {
+      return;
+    }
+    event.currentTarget
+      .querySelector<HTMLInputElement>("#swap-amount-input")
+      ?.focus();
+  };
+
   return (
     <div
-      className={`flex flex-col gap-2 px-4 sm:px-6 py-4 rounded-2xl bg-t_bg_secondary bg-opacity-60 ${
+      onClick={focusAmountInput}
+      className={`flex flex-col gap-2 px-4 sm:px-6 py-4 rounded-2xl backdrop-blur-[12px] ${
         type === "source"
-          ? "bg-gradient-to-r from-t_bg_tertiary/5 to-t_bg_tertiary/5 border border-solid border-t_text_primary border-opacity-25"
+          ? "bg-gradient-to-r from-t_bg_tertiary/5 to-t_bg_tertiary/5 swap-panel-gradient-border cursor-text"
           : "bg-gradient-to-r from-t_bg_tertiary/[0.03] to-t_bg_tertiary/[0.03]"
       }`}
     >
-      <div className="flex gap-2 items-center w-full">
+      <div className="flex gap-2 items-center w-full min-h-6">
         <p className="text-[10px] leading-4 tracking-[0.01em] text-t_text_primary text-opacity-50">
           {type === "source" ? "Source" : "Destination"}
         </p>
@@ -41,7 +53,7 @@ export const SwapPanel = ({ type }: Props) => {
         <AmountPanel type={type} />
         <TokenPanel chain={chain} token={token} type={type} />
       </div>
-      <div className="flex items-center justify-between w-full gap-4">
+      <div className="flex items-center justify-between w-full gap-4 min-h-6">
         <UsdValue type={type} />
         <Balance type={type} />
       </div>