@xswap-link/sdk 0.13.1 → 0.14.1

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

@@ -4,16 +4,15 @@ import { CloseIcon, CopyIcon, SearchIcon } from "@src/assets/icons";
 import {
   Button,
   Spinner,
-  TextInput,
   TokenLogoWithChain,
   UnknownTokenLogo,
 } from "@src/components";
 import { SwapPanelType } from "@src/components/Swap/SwapView";
 import { useSwapContext } from "@src/context";
-import { ERC20Abi } from "@src/contracts";
-import { useEvmContractApi } from "@src/hooks";
 import { Chain, Ecosystem, ImportedTokenData, TokenOption } from "@src/models";
 import {
+  isBridgeTokenConnectionSupported,
+  isChainConnectionSupported,
   isETHAddressValid,
   isServer,
   isSolanaAddressValid,
@@ -22,12 +21,13 @@ import {
 import { BigNumber, ethers } from "ethers";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GroupedVirtuoso } from "react-virtuoso";
-import { QuickPickTokenItem } from "./QuickPickTokenItem";
+import { NetworkFilter } from "./NetworkFilter";
 import { TokenItem } from "./TokenItem";
 import { useAccount } from "wagmi";
 import { Connection, PublicKey } from "@solana/web3.js";
 import { METADATA_PROGRAM_ID } from "@src/constants";
 import { useWallet } from "@src/context/WalletProvider";
+import { getTokenMetadata } from "@src/services/api";
 
 type Props = {
   type: SwapPanelType;
@@ -55,31 +55,38 @@ export const TokenPicker = ({
   const [loadingCustomTokenData, setLoadingCustomTokenData] = useState(false);
   const [customTokenData, setCustomTokenData] =
     useState<ImportedTokenData | null>(null);
-  const [showQuickPicks, setShowQuickPicks] = useState(true);
+  const [networkFilter, setNetworkFilter] = useState<Chain | undefined>(chain);
   const currentRouteRequestNonce = useRef<number>(0);
   const tokenSearchRef = useRef<HTMLInputElement | null>(null);
 
   const {
     bridgeUI,
     supportedChains,
+    srcChain,
+    dstChain,
     findTokenDataByAddressAndChain,
     tokenPrices,
     addTokenToChainIfNotExists,
+    bridgeTokensDictionary,
   } = useSwapContext();
   const { address } = useAccount();
   const {
     solana: { address: solanaAddress },
   } = useWallet();
-  const evmContractApi = useEvmContractApi();
 
   useEffect(() => {
     setShowImportWarning(false);
     setAcceptRisks(false);
   }, [isOpen]);
 
+  // Custom token imports follow the network filter, not the chain currently
+  // set on the swap panel — the picker lists tokens across networks, so a
+  // pasted address is resolved on the network the user is browsing.
+  const importChain = networkFilter ?? chain;
+
   const importCustomToken = useCallback(() => {
     if (
-      chain &&
+      importChain &&
       customTokenData &&
       (isETHAddressValid(searchValue) || isSolanaAddressValid(searchValue))
     ) {
@@ -99,12 +106,12 @@ export const TokenPicker = ({
         quickPick: false,
         supported: true,
         priority: 0,
-        chainId: chain.chainId,
+        chainId: importChain.chainId,
       };
 
       if (!isServer) {
-        customTokens[chain.chainId] = {
-          ...(customTokens[chain.chainId] || {}),
+        customTokens[importChain.chainId] = {
+          ...(customTokens[importChain.chainId] || {}),
           [searchValue.toLowerCase()]: newCustomToken,
         };
         localStorage.setItem("custom-tokens", JSON.stringify(customTokens));
@@ -115,7 +122,7 @@ export const TokenPicker = ({
       setModalOpen(false);
     }
   }, [
-    chain,
+    importChain,
     customTokenData,
     searchValue,
     addTokenToChainIfNotExists,
@@ -123,42 +130,32 @@ export const TokenPicker = ({
   ]);
 
   const getCustomTokenData = useCallback(async () => {
+    if (!importChain) {
+      return;
+    }
     const nonce = Date.now();
     currentRouteRequestNonce.current = nonce;
-    const rpcUrl = supportedChains.find(
-      ({ ecosystem, chainId }) =>
-        ecosystem === Ecosystem.EVM && chainId === chain?.chainId,
-    )?.publicRpcUrls[0];
-    const customTokenContract = new ethers.Contract(
-      searchValue.toLowerCase(),
-      ERC20Abi,
-      ethers.getDefaultProvider(rpcUrl),
-    );
     setLoadingCustomTokenData(true);
     try {
-      const responses = await Promise.all([
-        evmContractApi.query(customTokenContract, "decimals"),
-        evmContractApi.query(customTokenContract, "name"),
-        evmContractApi.query(customTokenContract, "symbol"),
-      ]);
+      // Resolved server-side through private RPCs — public ones often 429
+      const tokenData = await getTokenMetadata({
+        chainId: importChain.chainId,
+        tokenAddress: searchValue.toLowerCase(),
+      });
       if (nonce !== currentRouteRequestNonce.current) {
         return;
       }
-      const [decimals, name, symbol] = responses;
-      setCustomTokenData({
-        address: searchValue.toLowerCase(),
-        decimals,
-        name,
-        symbol,
-      });
+      setCustomTokenData(tokenData);
     } catch (_) {
-      setCustomTokenData(null);
+      if (nonce === currentRouteRequestNonce.current) {
+        setCustomTokenData(null);
+      }
     } finally {
       if (nonce === currentRouteRequestNonce.current) {
         setLoadingCustomTokenData(false);
       }
     }
-  }, [chain, searchValue, evmContractApi, supportedChains]);
+  }, [importChain, searchValue]);
 
   const getCustomSolanaTokenData = useCallback(async () => {
     const nonce = Date.now();
@@ -166,7 +163,7 @@ export const TokenPicker = ({
 
     const rpcUrl = supportedChains.find(
       ({ ecosystem, chainId }) =>
-        ecosystem === Ecosystem.SOLANA && chainId === chain?.chainId,
+        ecosystem === Ecosystem.SOLANA && chainId === importChain?.chainId,
     )?.publicRpcUrls[0];
 
     if (!rpcUrl || !searchValue || !isSolanaAddressValid(searchValue)) {
@@ -256,23 +253,26 @@ export const TokenPicker = ({
         setLoadingCustomTokenData(false);
       }
     }
-  }, [chain, searchValue, supportedChains]);
+  }, [importChain, searchValue, supportedChains]);
 
   useEffect(() => {
     if (
       !bridgeUI &&
-      chain &&
+      importChain &&
       !findTokenDataByAddressAndChain(
-        chain.ecosystem === Ecosystem.EVM
+        importChain.ecosystem === Ecosystem.EVM
           ? searchValue.toLowerCase()
           : searchValue,
-        chain.chainId,
+        importChain.chainId,
       )
     ) {
-      if (chain.ecosystem === Ecosystem.EVM && isETHAddressValid(searchValue)) {
+      if (
+        importChain.ecosystem === Ecosystem.EVM &&
+        isETHAddressValid(searchValue)
+      ) {
         getCustomTokenData();
       } else if (
-        chain.ecosystem === Ecosystem.SOLANA &&
+        importChain.ecosystem === Ecosystem.SOLANA &&
         isSolanaAddressValid(searchValue)
       ) {
         getCustomSolanaTokenData();
@@ -290,45 +290,31 @@ export const TokenPicker = ({
     getCustomTokenData,
     getCustomSolanaTokenData,
     findTokenDataByAddressAndChain,
-    chain,
+    importChain,
   ]);
 
   useEffect(() => {
     setSearchValue("");
+    setNetworkFilter(chain);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
   const isMatch = (value, searchValue) =>
     value.toLowerCase().indexOf(searchValue.toLowerCase()) > -1;
 
-  const filteredTokens = useMemo(
-    () =>
-      tokens?.filter(
-        (token) =>
-          isMatch(token.symbol, searchValue) ||
-          isMatch(token.name, searchValue) ||
-          token.address.toLowerCase() === searchValue.toLowerCase(),
-      ),
-    [searchValue, tokens],
-  );
-
-  const otherFilteredTokens = useMemo(
-    () =>
-      otherTokens?.filter(
-        (token) =>
-          isMatch(token.symbol, searchValue) ||
-          isMatch(token.name, searchValue) ||
-          token.address.toLowerCase() === searchValue.toLowerCase(),
-      ),
-    [searchValue, otherTokens],
-  );
-
-  useEffect(() => {
-    if (isOpen && tokenSearchRef.current) {
-      setTimeout(() => {
-        tokenSearchRef.current?.focus();
-      }, 10); // delay focus a tiny bit to ensure it works
-    }
-  }, [isOpen]);
+  const visibleTokens = useMemo(() => {
+    const all = [...(tokens || []), ...(otherTokens || [])];
+    return all.filter((token) => {
+      if (networkFilter && token.chainId !== networkFilter.chainId) {
+        return false;
+      }
+      return (
+        isMatch(token.symbol, searchValue) ||
+        isMatch(token.name, searchValue) ||
+        token.address.toLowerCase() === searchValue.toLowerCase()
+      );
+    });
+  }, [tokens, otherTokens, searchValue, networkFilter]);
 
   const calculateTokenValue = useCallback(
     (token: TokenOption) => {
@@ -342,119 +328,134 @@ export const TokenPicker = ({
     [tokenPrices],
   );
 
-  const ownedFilteredTokens = useMemo(() => {
-    return [
-      ...filteredTokens.filter((token) =>
-        BigNumber.from(token?.balance || "0").gt(0),
-      ),
-      ...otherFilteredTokens.filter((token) =>
-        BigNumber.from(token?.balance || "0").gt(0),
-      ),
-    ].sort((tokenA, tokenB) => {
-      const valueA = calculateTokenValue(tokenA);
-      const valueB = calculateTokenValue(tokenB);
-      // First sort by USD value
-      if (valueB !== valueA) {
-        return valueB - valueA;
+  const getResetWarning = useCallback(
+    (token: TokenOption): SwapPanelType | null => {
+      if (type === "destination") {
+        if (
+          srcChain &&
+          !isChainConnectionSupported(srcChain, token.chainId, bridgeUI)
+        ) {
+          return "source";
+        }
+        return null;
       }
-      // If USD values are equal (or both 0), sort by priority
-      return tokenB.priority - tokenA.priority;
-    });
-  }, [filteredTokens, otherFilteredTokens, calculateTokenValue]);
-
-  const allTokens = useMemo(() => {
-    const currentChainTokens = filteredTokens
-      .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
-      .sort(
-        (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
-      );
-    const otherChainTokens = otherFilteredTokens
-      .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
-      .sort(
-        (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+      const tokenChain = supportedChains.find(
+        ({ chainId }) => chainId === token.chainId,
       );
+      if (
+        dstChain &&
+        tokenChain &&
+        (!isChainConnectionSupported(tokenChain, dstChain.chainId, bridgeUI) ||
+          (bridgeUI &&
+            !isBridgeTokenConnectionSupported({
+              token,
+              tokenChain,
+              dstChainId: dstChain.chainId,
+              bridgeTokensDictionary,
+            })))
+      ) {
+        return "destination";
+      }
+      return null;
+    },
+    [type, srcChain, dstChain, bridgeUI, supportedChains, bridgeTokensDictionary],
+  );
 
-    // Create groups based on chain and wallet connection status
-    const groups = chain
-      ? [
-          ...(!!(address || solanaAddress) && ownedFilteredTokens.length
-            ? [ownedFilteredTokens]
-            : []),
-          currentChainTokens,
-          otherChainTokens,
-        ]
-      : [
-          ...(!!(address || solanaAddress) && ownedFilteredTokens.length
-            ? [ownedFilteredTokens]
-            : []),
-          [...currentChainTokens, ...otherChainTokens],
-        ];
-
-    return groups.flat();
+  // Tokens that reset the other side of the swap on selection go below
+  // the ones that can be picked freely.
+  const compareByResetWarning = useCallback(
+    (tokenA: TokenOption, tokenB: TokenOption) =>
+      Number(!!getResetWarning(tokenA)) - Number(!!getResetWarning(tokenB)),
+    [getResetWarning],
+  );
+
+  const ownedTokens = useMemo(() => {
+    if (!address && !solanaAddress) {
+      return [];
+    }
+    return visibleTokens
+      .filter((token) => BigNumber.from(token?.balance || "0").gt(0))
+      .sort((tokenA, tokenB) => {
+        const warningOrder = compareByResetWarning(tokenA, tokenB);
+        if (warningOrder !== 0) {
+          return warningOrder;
+        }
+        const valueA = calculateTokenValue(tokenA);
+        const valueB = calculateTokenValue(tokenB);
+        // First sort by USD value
+        if (valueB !== valueA) {
+          return valueB - valueA;
+        }
+        // If USD values are equal (or both 0), sort by priority
+        return tokenB.priority - tokenA.priority;
+      });
   }, [
-    filteredTokens,
-    otherFilteredTokens,
-    ownedFilteredTokens,
-    chain,
+    visibleTokens,
     address,
     solanaAddress,
+    calculateTokenValue,
+    compareByResetWarning,
   ]);
 
-  const ownedTokens = useMemo(
-    () => allTokens.filter((token) => token.balance?.gt(0)),
-    [allTokens],
+  const recommendedTokens = useMemo(
+    () =>
+      visibleTokens
+        .filter(
+          (token) =>
+            !(address || solanaAddress) ||
+            BigNumber.from(token?.balance || "0").eq(0),
+        )
+        .sort(
+          (tokenDataA, tokenDataB) =>
+            compareByResetWarning(tokenDataA, tokenDataB) ||
+            tokenDataB.priority - tokenDataA.priority,
+        ),
+    [visibleTokens, address, solanaAddress, compareByResetWarning],
   );
 
   const tokenGroups = useMemo(() => {
-    const currentChainTokens = filteredTokens
-      .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
-      .sort(
-        (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
-      );
-    const otherChainTokens = otherFilteredTokens
-      .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
-      .sort(
-        (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
-      );
-
-    return chain
+    return ownedTokens.length
       ? [
-          ...(!!(address || solanaAddress) && ownedFilteredTokens.length
-            ? [ownedFilteredTokens]
-            : []),
-          currentChainTokens,
-          otherChainTokens,
+          { label: "MY TOKENS.", tokens: ownedTokens },
+          { label: "RECOMMENDED.", tokens: recommendedTokens },
         ]
-      : [
-          ...(!!(address || solanaAddress) && ownedFilteredTokens.length
-            ? [ownedFilteredTokens]
-            : []),
-          [...currentChainTokens, ...otherChainTokens],
-        ];
-  }, [
-    chain,
-    address,
-    solanaAddress,
-    filteredTokens,
-    otherFilteredTokens,
-    ownedFilteredTokens,
-  ]);
+      : [{ label: "RECOMMENDED.", tokens: recommendedTokens }];
+  }, [ownedTokens, recommendedTokens]);
+
+  const allTokens = useMemo(
+    () => tokenGroups.flatMap((group) => group.tokens),
+    [tokenGroups],
+  );
+
+  useEffect(() => {
+    if (isOpen && tokenSearchRef.current) {
+      setTimeout(() => {
+        tokenSearchRef.current?.focus();
+      }, 10); // delay focus a tiny bit to ensure it works
+    }
+  }, [isOpen]);
 
   return showImportWarning ? (
     <>
-      <div className="flex justify-between">
-        <div className="text-base/4 mb-4">Import token</div>
-        <div
-          className="w-4 h-4 fill-t_text_primary cursor-pointer"
+      <div className="flex justify-between items-center mb-6">
+        <div className="text-2xl leading-8 tracking-[0.01em]">
+          Import token
+        </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={() => setModalOpen(false)}
         >
-          <CloseIcon />
-        </div>
+          <div className="w-4 h-4 opacity-50 fill-t_text_primary flex items-center justify-center">
+            <CloseIcon />
+          </div>
+        </button>
       </div>
       <div className="flex flex-col h-full gap-2">
         {customTokenData && (
           <div
-            className={`token-picker-container grow-0 bg-t_bg_secondary border border-solid border-t_text_primary border-opacity-10 rounded-xl py-2 pr-2 pl-4 hover:cursor-pointer`}
+            className={`flex gap-3 py-3 px-4 items-center grow-0 bg-t_bg_tertiary bg-opacity-[0.03] border border-solid border-t_text_primary border-opacity-10 rounded-xl`}
           >
             <UnknownTokenLogo
               tokenName={customTokenData.name}
@@ -464,7 +465,7 @@ export const TokenPicker = ({
               <div className="overflow-hidden whitespace-nowrap text-ellipsis text-sm font-medium">
                 {customTokenData.name}
               </div>
-              <div className="token-picker__all__symbol">
+              <div className="text-sm text-t_text_primary text-opacity-50">
                 {customTokenData.symbol}
               </div>
             </div>
@@ -478,19 +479,19 @@ export const TokenPicker = ({
                   )
                 }
                 aria-label={`Copy ${customTokenData.symbol} token address`}
-                className="flex items-center p-2 fill-white cursor-pointer hover:fill-t_main_accent_light"
+                className="flex items-center p-2 fill-t_text_primary cursor-pointer hover:fill-t_main_accent_light"
               >
                 <CopyIcon className="w-5 h-5" />
               </button>
             </div>
           </div>
         )}
-        <div className="px-2 py-4 rounded-xl border border-x_orange text-sm">
+        <div className="px-4 py-4 rounded-xl border border-solid border-t_warning_dark text-sm text-t_text_primary text-opacity-80">
           Ensure that you have verified the token address and confirmed its
           correctness
         </div>
-        <div className="bg-t_bg_secondary border border-solid border-t_text_primary border-opacity-10 rounded-xl p-2">
-          <div className="text-sm mb-2">
+        <div className="bg-t_bg_tertiary bg-opacity-[0.03] border border-solid border-t_text_primary border-opacity-10 rounded-xl p-4">
+          <div className="text-sm mb-2 text-t_text_primary text-opacity-80">
             Be mindful that anyone can create tokens, even counterfeit versions
             of existing ones. Certain tokens and their technical specifications
             might not be compatible with XSwap services. By importing such
@@ -501,21 +502,21 @@ export const TokenPicker = ({
             onClick={() => setAcceptRisks((state) => !state)}
             className="flex items-center"
           >
-            <div className="flex justify-center items-center p-1 w-6 h-6 border-2 border-white rounded-md mr-2">
+            <div className="flex justify-center items-center p-1 w-6 h-6 border-2 border-solid border-t_text_primary border-opacity-50 rounded-md mr-2">
               {acceptRisks && (
                 <FontAwesomeIcon icon={faCheck} className="w-4 h-4" />
               )}
             </div>
 
-            <div className="font-bold">Accept</div>
+            <div className="font-medium">Accept</div>
           </button>
         </div>
         <div className="flex grow items-end justify-center">
           <Button
             type="button"
             disabled={!acceptRisks}
-            className={`token-picker__import-button w-full ${
-              !acceptRisks ? "!cursor-not-allowed" : ""
+            className={`w-full !rounded-[10px] !py-3 !text-sm !font-medium bg-gradient-to-br from-t_main_accent_light to-t_main_accent_dark !text-t_button_pr_text ${
+              !acceptRisks ? "!cursor-not-allowed opacity-50" : ""
             }`}
             onClick={importCustomToken}
           >
@@ -526,49 +527,43 @@ export const TokenPicker = ({
     </>
   ) : (
     <>
-      <div className="flex justify-between">
-        <div className="text-base/4 text-t_text_primary mb-4">{`Pick ${type} token`}</div>
-        <div
-          className="w-4 h-4 fill-t_text_primary cursor-pointer"
+      <div className="flex justify-between items-center mb-6">
+        <div className="text-2xl leading-8 tracking-[0.01em] text-t_text_primary">
+          Select Token
+        </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={() => setModalOpen(false)}
         >
-          <CloseIcon />
-        </div>
+          <div className="w-4 h-4 opacity-50 fill-t_text_primary flex items-center justify-center">
+            <CloseIcon />
+          </div>
+        </button>
       </div>
 
-      <TextInput
-        ref={tokenSearchRef}
-        inputIcon={
-          <div className="fill-t_text_primary">
+      <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>
-        }
-        placeholder="Search name or paste address"
-        value={searchValue}
-        handleChange={setSearchValue}
-      />
-      <div
-        className={`flex flex-wrap gap-1 my-4 mx-0 transition-all duration-300 ${
-          showQuickPicks
-            ? "opacity-100 max-h-[200px]"
-            : "opacity-0 max-h-0 overflow-hidden"
-        }`}
-      >
-        {tokens
-          .filter((token) => token?.quickPick)
-          .map((token) => (
-            <QuickPickTokenItem
-              key={token.address}
-              token={token}
-              selectedTokenAddress={selectedTokenAddress}
-              onClick={() => {
-                onSelect(token);
-                setModalOpen(false);
-              }}
-            />
-          ))}
+          <input
+            ref={tokenSearchRef}
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            placeholder="Search name or paste address"
+            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>
+        <NetworkFilter
+          type={type}
+          selectedChain={networkFilter}
+          onSelect={setNetworkFilter}
+        />
       </div>
-      <div className="flex flex-col mx-0 h-full">
+
+      <div className="flex flex-col mx-0 h-full min-h-0 flex-1">
         {loadingCustomTokenData ? (
           <div className="flex justify-center w-full py-4 px-0">
             <Spinner className="w-9 h-9" />
@@ -576,10 +571,10 @@ export const TokenPicker = ({
         ) : (
           <>
             {customTokenData ? (
-              <div className={`token-picker-container hover:cursor-default`}>
+              <div className="flex gap-3 py-3 px-4 items-center rounded-xl bg-t_bg_tertiary bg-opacity-[0.03]">
                 <TokenLogoWithChain
                   token={customTokenData}
-                  chain={chain}
+                  chain={importChain}
                   tokenLogoClassName="w-9 h-9"
                   generatedLogoClassName="w-9 h-9 text-[16px]"
                   chainLogoClassName="w-5"
@@ -590,17 +585,17 @@ export const TokenPicker = ({
                       {customTokenData.name}
                     </div>
                     <div className="text-xs text-t_text_primary !text-opacity-50 font-medium">
-                      {chain?.displayName}
+                      {importChain?.displayName}
                     </div>
                   </div>
-                  <div className="token-picker__all__symbol">
+                  <div className="text-sm text-t_text_primary text-opacity-50">
                     {customTokenData.symbol}
                   </div>
                 </div>
                 <div>
                   <Button
                     type="button"
-                    className="h-8 py-0 px-4 text-t_text_primary leading-[14px] rounded-[32px] bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark"
+                    className="h-8 py-0 px-4 leading-[14px] rounded-lg bg-gradient-to-br from-t_main_accent_light to-t_main_accent_dark !text-t_button_pr_text"
                     onClick={() => setShowImportWarning(true)}
                   >
                     Import
@@ -608,83 +603,38 @@ export const TokenPicker = ({
                 </div>
               </div>
             ) : (
-              <div className="flex flex-col h-full gap-8 w-[calc(100%+32px)] mx-[-16px]">
+              <div className="flex flex-col h-full">
                 <GroupedVirtuoso
                   style={{ maxHeight: "700px", height: "100%" }}
-                  groupCounts={tokenGroups.map((group) => group?.length)}
-                  scrollerRef={(ref) => {
-                    if (ref) {
-                      ref.addEventListener("scroll", (e) => {
-                        const target = e.target as HTMLDivElement;
-                        setShowQuickPicks(target.scrollTop < 10);
-                      });
-                    }
-                  }}
+                  groupCounts={tokenGroups.map((group) => group.tokens.length)}
                   groupContent={(index) => (
-                    <div className="py-1 bg-t_bg_primary text-t_text_primary">
-                      <div className="px-4 text-left">
-                        {(() => {
-                          if (chain) {
-                            // chain is selected
-                            switch (index) {
-                              case 0: {
-                                if (!address && !solanaAddress) {
-                                  return `${chain.displayName} network`;
-                                }
-                                return ownedTokens.length
-                                  ? "My tokens"
-                                  : `${chain.displayName} network`;
-                              }
-                              case 1: {
-                                if (!address && !solanaAddress) {
-                                  return "Other networks";
-                                }
-                                return `${chain.displayName} network`;
-                              }
-                              case 2: {
-                                return "Other networks";
-                              }
-                              default: {
-                                return "Undefined group";
-                              }
-                            }
-                          } else {
-                            // chain is not selected
-                            switch (index) {
-                              case 0: {
-                                if (!address) {
-                                  return "All networks";
-                                }
-                                return ownedTokens.length
-                                  ? "My tokens"
-                                  : "All networks";
-                              }
-                              case 1: {
-                                return "All networks";
-                              }
-                              default: {
-                                return "Undefined group";
-                              }
-                            }
-                          }
-                        })()}
-                      </div>
-                      <div className="horizontal-separator" />
-                      {!tokenGroups[index]?.length && (
-                        <div className="text-center py-1">No token found</div>
+                    // 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 (
-                      allTokens[index] && (
+                      token && (
                         <TokenItem
                           panelType={type}
-                          token={allTokens[index]}
+                          token={token}
                           selectedChainId={chain?.chainId}
                           selectedTokenAddress={selectedTokenAddress}
+                          resetWarning={getResetWarning(token)}
                           onClick={() => {
-                            onSelect(allTokens[index]!);
+                            onSelect(token);
                             setModalOpen(false);
                           }}
                         />