@xswap-link/sdk 0.14.1 → 0.15.0

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,19 +90,19 @@ 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="text-t_text_primary opacity-60 [&_svg]:w-3.5 [&_svg]:h-3.5 flex items-center">
+              <SearchThinIcon />
             </div>
             <input
               value={searchValue}
@@ -134,13 +135,13 @@ export const NetworkFilter = ({ type, selectedChain, onSelect }: Props) => {
                       className="w-5 h-5 rounded-full"
                     />
                   ) : (
-                    <div className="flex -space-x-1 shrink-0">
-                      {previewChains.map((previewChain) => (
+                    <div className="grid grid-cols-2 gap-0.5 shrink-0">
+                      {clusterChains.map((clusterChain) => (
                         <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"
+                          key={clusterChain.chainId}
+                          src={clusterChain.image}
+                          alt={clusterChain.displayName}
+                          className="w-[11px] h-[11px] rounded-full"
                         />
                       ))}
                     </div>

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(() => {
@@ -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}
@@ -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] font-medium 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] font-medium 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,4 +1,4 @@
-import { ChevronDownIcon } from "@src/assets/icons";
+import { ChevronDownThinIcon } from "@src/assets/icons";
 import { TokenLogoWithChain } from "@src/components";
 import { useSwapContext } from "@src/context";
 import { Chain, Token } from "@src/models";
@@ -50,7 +50,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 +86,8 @@ 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 />
+        <div className="flex items-center justify-center w-6 h-6 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,4 @@
-import { ChevronDownIcon } from "@src/assets/icons";
+import { ChevronDownThinSmallIcon } from "@src/assets/icons";
 import { useWallet } from "@src/context/WalletProvider";
 import { useSwapContext } from "@src/context";
 import { SwapPanelType } from "../..";
@@ -27,19 +27,18 @@ export const WalletPanel = ({ chain, className }: Props) => {
   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 +49,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 +68,25 @@ export const WalletPanel = ({ chain, className }: Props) => {
     return "";
   }, [chain, evm, solana, sui]);
 
+  // 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 />
+      <div className="flex items-center justify-center w-4 h-4 text-t_text_primary opacity-50">
+        <ChevronDownThinSmallIcon />
       </div>
     </button>
   );

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

@@ -25,13 +25,13 @@ export const SwapPanel = ({ type }: Props) => {
 
   return (
     <div
-      className={`flex flex-col gap-2 px-4 sm:px-6 py-4 rounded-2xl bg-t_bg_secondary bg-opacity-60 ${
+      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/[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 +41,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>