@xswap-link/sdk 0.13.1 → 0.14.0

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

@@ -4,7 +4,6 @@ import { CloseIcon, CopyIcon, SearchIcon } from "@src/assets/icons";
 import {
   Button,
   Spinner,
-  TextInput,
   TokenLogoWithChain,
   UnknownTokenLogo,
 } from "@src/components";
@@ -14,6 +13,7 @@ import { ERC20Abi } from "@src/contracts";
 import { useEvmContractApi } from "@src/hooks";
 import { Chain, Ecosystem, ImportedTokenData, TokenOption } from "@src/models";
 import {
+  isChainConnectionSupported,
   isETHAddressValid,
   isServer,
   isSolanaAddressValid,
@@ -22,7 +22,7 @@ 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";
@@ -55,13 +55,15 @@ 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,
@@ -295,40 +297,26 @@ export const TokenPicker = ({
 
   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 +330,107 @@ 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;
-      }
-      // If USD values are equal (or both 0), sort by priority
-      return tokenB.priority - tokenA.priority;
-    });
-  }, [filteredTokens, otherFilteredTokens, calculateTokenValue]);
+  const ownedTokens = useMemo(() => {
+    if (!address && !solanaAddress) {
+      return [];
+    }
+    return visibleTokens
+      .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;
+        }
+        // If USD values are equal (or both 0), sort by priority
+        return tokenB.priority - tokenA.priority;
+      });
+  }, [visibleTokens, address, solanaAddress, 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 recommendedTokens = useMemo(
+    () =>
+      visibleTokens
+        .filter(
+          (token) =>
+            !(address || solanaAddress) ||
+            BigNumber.from(token?.balance || "0").eq(0),
+        )
+        .sort(
+          (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+        ),
+    [visibleTokens, address, solanaAddress],
+  );
 
-    // Create groups based on chain and wallet connection status
-    const groups = chain
+  const tokenGroups = useMemo(() => {
+    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],
-        ];
-
-    return groups.flat();
-  }, [
-    filteredTokens,
-    otherFilteredTokens,
-    ownedFilteredTokens,
-    chain,
-    address,
-    solanaAddress,
-  ]);
+      : [{ label: "RECOMMENDED.", tokens: recommendedTokens }];
+  }, [ownedTokens, recommendedTokens]);
 
-  const ownedTokens = useMemo(
-    () => allTokens.filter((token) => token.balance?.gt(0)),
-    [allTokens],
+  const allTokens = useMemo(
+    () => tokenGroups.flatMap((group) => group.tokens),
+    [tokenGroups],
   );
 
-  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,
+  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],
+  );
 
-    return chain
-      ? [
-          ...(!!(address || solanaAddress) && ownedFilteredTokens.length
-            ? [ownedFilteredTokens]
-            : []),
-          currentChainTokens,
-          otherChainTokens,
-        ]
-      : [
-          ...(!!(address || solanaAddress) && ownedFilteredTokens.length
-            ? [ownedFilteredTokens]
-            : []),
-          [...currentChainTokens, ...otherChainTokens],
-        ];
-  }, [
-    chain,
-    address,
-    solanaAddress,
-    filteredTokens,
-    otherFilteredTokens,
-    ownedFilteredTokens,
-  ]);
+  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 +440,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 +454,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 +477,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 +502,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,7 +546,7 @@ 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}
@@ -593,14 +563,14 @@ export const TokenPicker = ({
                       {chain?.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 +578,34 @@ 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>
+                    <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 (
-                      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);
                           }}
                         />