@xswap-link/sdk 0.14.0 → 0.15.0

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,
@@ -9,10 +9,9 @@ import {
 } 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,
@@ -21,13 +20,14 @@ 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";
 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,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);
 
@@ -67,21 +71,26 @@ export const TokenPicker = ({
     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))
     ) {
@@ -101,12 +110,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));
@@ -117,7 +126,7 @@ export const TokenPicker = ({
       setModalOpen(false);
     }
   }, [
-    chain,
+    importChain,
     customTokenData,
     searchValue,
     addTokenToChainIfNotExists,
@@ -125,42 +134,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();
@@ -168,7 +167,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)) {
@@ -258,23 +257,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();
@@ -292,13 +294,12 @@ export const TokenPicker = ({
     getCustomTokenData,
     getCustomSolanaTokenData,
     findTokenDataByAddressAndChain,
-    chain,
+    importChain,
   ]);
 
   useEffect(() => {
     setSearchValue("");
-    setNetworkFilter(chain);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    setNetworkFilter(undefined);
   }, [isOpen]);
 
   const isMatch = (value, searchValue) =>
@@ -330,6 +331,47 @@ export const TokenPicker = ({
     [tokenPrices],
   );
 
+  const getResetWarning = useCallback(
+    (token: TokenOption): SwapPanelType | null => {
+      if (type === "destination") {
+        if (
+          srcChain &&
+          !isChainConnectionSupported(srcChain, token.chainId, bridgeUI)
+        ) {
+          return "source";
+        }
+        return null;
+      }
+      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],
+  );
+
+  // 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 [];
@@ -337,6 +379,10 @@ export const TokenPicker = ({
     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
@@ -346,7 +392,13 @@ export const TokenPicker = ({
         // If USD values are equal (or both 0), sort by priority
         return tokenB.priority - tokenA.priority;
       });
-  }, [visibleTokens, address, solanaAddress, calculateTokenValue]);
+  }, [
+    visibleTokens,
+    address,
+    solanaAddress,
+    calculateTokenValue,
+    compareByResetWarning,
+  ]);
 
   const recommendedTokens = useMemo(
     () =>
@@ -357,9 +409,11 @@ export const TokenPicker = ({
             BigNumber.from(token?.balance || "0").eq(0),
         )
         .sort(
-          (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+          (tokenDataA, tokenDataB) =>
+            compareByResetWarning(tokenDataA, tokenDataB) ||
+            tokenDataB.priority - tokenDataA.priority,
         ),
-    [visibleTokens, address, solanaAddress],
+    [visibleTokens, address, solanaAddress, compareByResetWarning],
   );
 
   const tokenGroups = useMemo(() => {
@@ -371,36 +425,49 @@ 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],
   );
 
-  const getResetWarning = useCallback(
-    (token: TokenOption): SwapPanelType | null => {
-      if (type === "destination") {
-        if (
-          srcChain &&
-          !isChainConnectionSupported(srcChain, token.chainId, bridgeUI)
-        ) {
-          return "source";
-        }
-        return null;
-      }
-      const tokenChain = supportedChains.find(
-        ({ chainId }) => chainId === token.chainId,
-      );
-      if (
-        dstChain &&
-        tokenChain &&
-        !isChainConnectionSupported(tokenChain, dstChain.chainId, bridgeUI)
-      ) {
-        return "destination";
-      }
-      return null;
-    },
-    [type, srcChain, dstChain, bridgeUI, supportedChains],
-  );
+  // 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) {
@@ -520,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}
@@ -549,7 +616,7 @@ export const TokenPicker = ({
               <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"
@@ -560,7 +627,7 @@ 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="text-sm text-t_text_primary text-opacity-50">
@@ -578,41 +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) => (
-                    <div className="pb-3 bg-t_bg_primary">
-                      <p className="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 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>
             )}
           </>