@xswap-link/sdk 0.8.7 → 0.9.1

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

@@ -19,6 +19,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { GroupedVirtuoso } from "react-virtuoso";
 import { QuickPickTokenItem } from "./QuickPickTokenItem";
 import { TokenItem } from "./TokenItem";
+import { useAccount } from "wagmi";
 
 type Props = {
   type: SwapPanelType;
@@ -46,11 +47,17 @@ export const TokenPicker = ({
   const [loadingCustomTokenData, setLoadingCustomTokenData] = useState(false);
   const [customTokenData, setCustomTokenData] =
     useState<ImportedTokenData | null>(null);
+  const [showQuickPicks, setShowQuickPicks] = useState(true);
   const currentRouteRequestNonce = useRef<number>(0);
   const tokenSearchRef = useRef<HTMLInputElement | null>(null);
 
-  const { bridgeUI, supportedChains, findTokenDataByAddressAndChain } =
-    useSwapContext();
+  const {
+    bridgeUI,
+    supportedChains,
+    findTokenDataByAddressAndChain,
+    tokenPrices,
+  } = useSwapContext();
+  const { address } = useAccount();
   const evmContractApi = useEvmContractApi();
 
   useEffect(() => {
@@ -188,35 +195,79 @@ export const TokenPicker = ({
   }, [isOpen]);
 
   const allTokens = useMemo(() => {
-    const filteredTokensSorted = [
-      ...filteredTokens
-        .filter((token) => BigNumber.from(token?.balance || "0").gt(0))
-        .sort((tokenDataA, tokenDataB) => {
-          return tokenDataB.priority - tokenDataA.priority;
-        }),
-      ...filteredTokens
-        .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
-        .sort((tokenDataA, tokenDataB) => {
-          return tokenDataB.priority - tokenDataA.priority;
-        }),
-    ];
-    const otherFilteredTokensSorted = [
-      ...otherFilteredTokens
-        .filter((token) => BigNumber.from(token?.balance || "0").gt(0))
-        .sort((tokenDataA, tokenDataB) => {
-          return tokenDataB.priority - tokenDataA.priority;
-        }),
-      ...otherFilteredTokens
-        .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
-        .sort((tokenDataA, tokenDataB) => {
-          return tokenDataB.priority - tokenDataA.priority;
-        }),
-    ];
+    const calculateTokenValue = (token: TokenOption) => {
+      if (!token.balance || !token.decimals) return 0;
+      const balance = Number(
+        ethers.utils.formatUnits(token.balance, token.decimals),
+      );
+      const price = tokenPrices[token.chainId]?.[token.address];
+      return price ? balance * Number(price) : 0;
+    };
+
+    const ownedFilteredTokens = [
+      ...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;
+    });
+
+    const currentChainTokens = filteredTokens
+      .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
+      .sort(
+        (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+      );
 
-    return [...filteredTokensSorted, ...otherFilteredTokensSorted];
-  }, [filteredTokens, otherFilteredTokens]);
+    const otherChainTokens = otherFilteredTokens
+      .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
+      .sort(
+        (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+      );
 
-  const tokenGroups = [filteredTokens, otherFilteredTokens];
+    // Create groups based on chain and wallet connection status
+    const groups = chain
+      ? [
+          ...(!!address && ownedFilteredTokens.length
+            ? [ownedFilteredTokens]
+            : []),
+          currentChainTokens,
+          otherChainTokens,
+        ]
+      : [
+          ...(!!address && ownedFilteredTokens.length
+            ? [ownedFilteredTokens]
+            : []),
+          [...currentChainTokens, ...otherChainTokens],
+        ];
+
+    return groups.flat();
+  }, [filteredTokens, otherFilteredTokens, chain, address, tokenPrices]);
+
+  const ownedTokens = useMemo(
+    () => allTokens.filter((token) => token.balance?.gt(0)),
+    [allTokens],
+  );
+
+  const tokenGroups = chain
+    ? [
+        ...(!!address && ownedTokens.length ? [ownedTokens] : []),
+        filteredTokens,
+        otherFilteredTokens,
+      ]
+    : [
+        ...(!!address && ownedTokens.length ? [ownedTokens] : []),
+        otherFilteredTokens,
+      ];
 
   return showImportWarning ? (
     <>
@@ -313,6 +364,7 @@ export const TokenPicker = ({
           <CloseIcon />
         </div>
       </div>
+
       <TextInput
         ref={tokenSearchRef}
         inputIcon={
@@ -324,7 +376,13 @@ export const TokenPicker = ({
         value={searchValue}
         handleChange={setSearchValue}
       />
-      <div className="flex flex-wrap gap-1 my-4 mx-0">
+      <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) => (
@@ -383,17 +441,61 @@ export const TokenPicker = ({
                 <GroupedVirtuoso
                   style={{ maxHeight: "400px", 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);
+                      });
+                    }
+                  }}
                   groupContent={(index) => (
                     <div className="py-1 bg-t_bg_primary text-t_text_primary">
                       <div className="px-4 text-left">
                         {(() => {
                           if (chain) {
-                            return index === 0
-                              ? `${chain.displayName} network`
-                              : "Other networks";
+                            // chain is selected
+                            switch (index) {
+                              case 0: {
+                                if (!address) {
+                                  return `${chain.displayName} network`;
+                                }
+                                return ownedTokens.length
+                                  ? "My tokens"
+                                  : `${chain.displayName} network`;
+                              }
+                              case 1: {
+                                if (!address) {
+                                  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";
+                              }
+                            }
                           }
-
-                          return "All networks";
                         })()}
                       </div>
                       <div className="horizontal-separator" />
@@ -407,6 +509,7 @@ export const TokenPicker = ({
                       allTokens[index] && (
                         <TokenItem
                           token={allTokens[index]}
+                          selectedChainId={chain?.chainId}
                           selectedTokenAddress={selectedTokenAddress}
                           onClick={() => {
                             onSelect(allTokens[index]!);

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

@@ -77,7 +77,7 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
   return (
     <>
       {tokenPickerModalOpen && (
-        <Modal onClose={() => setTokenPickerModalOpen(false)}>
+        <Modal onClose={() => setTokenPickerModalOpen(false)} className="z-50">
           <TokenPicker
             type={type}
             chain={chain!}
@@ -113,7 +113,11 @@ export const TokenPanel = ({ chain, token, type, className }: Props) => {
             <div className="flex flex-col font-medium items-start">
               <p className="text-xs opacity-60">Token: </p>
               <p className={`${token ? "" : "opacity-60"}`}>
-                {token ? token.symbol : "Select"}
+                {token
+                  ? token.symbol
+                  : type === "destination" && bridgeUI
+                  ? "-"
+                  : "Select"}
               </p>
             </div>
           </div>

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

@@ -38,7 +38,7 @@ export const SwapPanel = ({ type }: Props) => {
         />
       </div>
       <div
-        className={`flex justify-between ${
+        className={`flex justify-between rounded-b-[11px] ${
           type === "destination" &&
           "bg-gradient-to-r from-t_main_accent_light/20 to-t_main_accent_dark/20"
         }`}

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

@@ -7,8 +7,8 @@ export type SwapPanelType = "source" | "destination";
 
 export const SwapView = () => {
   return (
-    <div className="flex flex-col gap-2 fill-t_text_primary">
-      <div className="flex flex-col gap-5">
+    <div className="flex flex-col gap-6 fill-t_text_primary">
+      <div className="flex flex-col gap-[11px]">
         <SwapPanel type="source" />
         <ReorderButton />
         <SwapPanel type="destination" />

package/src/components/Tooltip/index.tsx

@@ -13,7 +13,7 @@ const positionToClass: Record<Position, string> = {
 
 export const Tooltip: FC<{
   id: string;
-  position: "TOP" | "BOTTOM" | "LEFT" | "RIGHT";
+  position: Position;
   text: string;
   triggerRef: RefObject<Element>;
 }> = ({ id, position, text, triggerRef }) => {

package/src/context/HistoryProvider.tsx

@@ -10,7 +10,7 @@ import { Transaction, TransactionStatus } from "@src/models";
 import { getHistory } from "@src/services";
 import { isServer } from "@src/utils";
 import BigNumberJS from "bignumber.js";
-import { closeSnackbar, useSnackbar } from "notistack";
+import { useSnackbar } from "notistack";
 import {
   Context,
   ReactNode,
@@ -69,7 +69,7 @@ export const HistoryProvider = ({ children }: HistoryProviderProps) => {
   const [history, setHistory] = useState<Transaction[]>([]);
   const [historyLoadedOnce, setHistoryLoadedOnce] = useState(false);
 
-  const { enqueueSnackbar } = useSnackbar();
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
   const { debounce: getHistoryDebounce } = useDebounce({
     delayMs: 600,
   });