@xswap-link/sdk 0.9.0 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {

package/src/components/Swap/SwapView/SwapPanel/ChainPanel/ChainPicker/ChainItem/index.tsx

@@ -1,10 +1,9 @@
-import { DotGreenIcon, HelpIcon } from "@src/assets/icons";
+import { DotGreenIcon } from "@src/assets/icons";
 import { SwapPanelType } from "@src/components/Swap/SwapView";
-import { Tooltip } from "@src/components/Tooltip";
 import { useSwapContext } from "@src/context";
 import useNetworks from "@src/hooks/networkManagement/useNetworks";
 import { Chain } from "@src/models";
-import { useMemo, useRef } from "react";
+import { useMemo } from "react";
 
 type Props = {
   chain: Chain;
@@ -18,8 +17,6 @@ export const ChainItem = ({ chain, type, onClick, disabled }: Props) => {
     networks: { evm },
   } = useNetworks();
 
-  const tooltipTriggerRef = useRef<SVGSVGElement>(null);
-
   const { srcChain, dstChain, bridgeUI } = useSwapContext();
 
   const currentChainId = useMemo(
@@ -40,66 +37,61 @@ export const ChainItem = ({ chain, type, onClick, disabled }: Props) => {
     return type === "destination" ? srcChain?.chainId : dstChain?.chainId;
   }, [bridgeUI, dstChain?.chainId, srcChain?.chainId, type]);
 
-  return (
-    <div
-      onClick={() => {
-        if (chain.chainId === sameChainId || disabled) {
-          return;
-        }
-        onClick(chain.chainId);
-      }}
-      className={`flex justify-between items-center gap-3 mt-2 mb-2 cursor-pointer p-4 border border-solid border-white border-opacity-0 hover:selected-chain-item ${
-        currentChainId === chain.chainId ? "selected-chain-item" : ""
-      } ${
-        chain.chainId === sameChainId || disabled
-          ? "disabled-chain-item cursor-default"
-          : ""
-      }`}
-    >
-      <div className="flex gap-3 items-center w-full">
-        <img src={chain.image} alt={chain.name} className="w-[34px] h-[34px]" />
-        <p>{chain.displayName}</p>
-      </div>
+  const getTooltipText = () => {
+    if (chain.chainId === sameChainId) {
+      return "Transfers between the same chains are not available";
+    }
+    if (disabled) {
+      return bridgeUI
+        ? "Token is not available on this chain"
+        : `Swap from ${
+            srcChain?.displayName || "the source chain"
+          } to this chain is currently not supported.`;
+    }
+    return "";
+  };
 
-      {connected && (
-        <div className="flex items-baseline gap-1">
-          <DotGreenIcon />
-          <div className="text-t_text_green">connected</div>
-        </div>
-      )}
+  const tooltipText = getTooltipText();
 
-      {disabled && chain.chainId !== sameChainId && (
-        <div className="flex items-center gap-1">
-          <Tooltip
-            text={
-              bridgeUI
-                ? "Token is not available on this chain"
-                : `Transfers from ${
-                    srcChain?.name || "the source chain"
-                  } to this chain are currently not supported.`
-            }
-            position="BOTTOM"
-            triggerRef={tooltipTriggerRef}
-            id="transfers-from-chain-not-supported-tooltip"
+  return (
+    <div className="group relative">
+      <div
+        onClick={() => {
+          if (chain.chainId === sameChainId || disabled) {
+            return;
+          }
+          onClick(chain.chainId);
+        }}
+        className={`flex justify-between items-center gap-2 mt-2 mb-2 cursor-pointer p-4 border border-solid border-white border-opacity-0 hover:selected-chain-item ${
+          currentChainId === chain.chainId ? "selected-chain-item" : ""
+        } ${
+          chain.chainId === sameChainId || disabled
+            ? "disabled-chain-item cursor-default"
+            : ""
+        }`}
+      >
+        <div className="flex gap-3 items-center w-full">
+          <img
+            src={chain.image}
+            alt={chain.name}
+            className="w-[34px] h-[34px]"
           />
+          <p>{chain.displayName}</p>
         </div>
-      )}
 
-      {chain.chainId === sameChainId && (
-        <div className="flex items-center gap-1">
-          <Tooltip
-            text="Transfers between the same chain are not available"
-            id="transfers-between-same-chains-tooltip"
-            position="BOTTOM"
-            triggerRef={tooltipTriggerRef}
-          />
-        </div>
-      )}
+        {tooltipText && (
+          <div className="w-full text-center opacity-0 group-hover:opacity-100 text-xs transition-opacity duration-200">
+            {tooltipText}
+          </div>
+        )}
 
-      <HelpIcon
-        ref={tooltipTriggerRef}
-        className="cursor-help fill-t_main_accent_light w-[18px] h-[18px] min-w-[18px] min-h-[18px] max-w-[18px] max-h-[18px]"
-      />
+        {connected && (
+          <div className="flex items-baseline gap-1">
+            <DotGreenIcon />
+            <div className="text-t_text_green">connected</div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };

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

@@ -18,7 +18,7 @@ export const TokenItem = ({
   onClick,
   selectedChainId,
 }: Props) => {
-  const { supportedChains } = useSwapContext();
+  const { supportedChains, tokenPrices } = useSwapContext();
   const { address } = useAccount();
 
   const chain = useMemo(
@@ -26,6 +26,26 @@ export const TokenItem = ({
     [supportedChains, token],
   );
 
+  const tokenPrice = useMemo(() => {
+    const prices = tokenPrices[token.chainId];
+    return prices?.[token.address];
+  }, [token, tokenPrices]);
+
+  const tokenBalance = useMemo(() => {
+    if (!token.balance || !token.decimals) return null;
+    return Number(ethers.utils.formatUnits(token.balance, token.decimals));
+  }, [token.balance, token.decimals]);
+
+  const hasBalance = useMemo(
+    () => token.balance && !token.balance.eq(0),
+    [token.balance],
+  );
+
+  const tokenValueUsd = useMemo(() => {
+    if (!tokenBalance || !tokenPrice || !hasBalance) return null;
+    return tokenBalance * +tokenPrice;
+  }, [tokenBalance, tokenPrice, hasBalance]);
+
   return (
     <div
       className={`token-picker-container ${
@@ -55,16 +75,21 @@ export const TokenItem = ({
         </div>
 
         {token.balance && token.decimals ? (
-          <div className="text-xs text-t_text_primary text-opacity-50">
-            {token.balance.eq(0) ||
-            Number(ethers.utils.formatUnits(token.balance, token.decimals)) >
-              0.0001
-              ? weiToHumanReadable({
-                  amount: token.balance.toString(),
-                  decimals: token.decimals,
-                  precisionFractionalPlaces: 4,
-                })
-              : "<0.0001"}
+          <div className="text-right">
+            <div className="text-xs text-t_text_primary">
+              {token.balance.eq(0) || tokenBalance! > 0.0001
+                ? weiToHumanReadable({
+                    amount: token.balance.toString(),
+                    decimals: token.decimals,
+                    precisionFractionalPlaces: 4,
+                  })
+                : "<0.0001"}
+            </div>
+            {hasBalance && (
+              <div className="text-xs text-t_text_primary text-opacity-50">
+                {tokenValueUsd ? `$${tokenValueUsd.toFixed(2)}` : "$ -"}
+              </div>
+            )}
           </div>
         ) : (
           <>

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

@@ -51,8 +51,12 @@ export const TokenPicker = ({
   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();
 
@@ -191,6 +195,15 @@ export const TokenPicker = ({
   }, [isOpen]);
 
   const allTokens = useMemo(() => {
+    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),
@@ -198,9 +211,16 @@ export const TokenPicker = ({
       ...otherFilteredTokens.filter((token) =>
         BigNumber.from(token?.balance || "0").gt(0),
       ),
-    ].sort(
-      (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
-    );
+    ].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))
@@ -231,7 +251,7 @@ export const TokenPicker = ({
         ];
 
     return groups.flat();
-  }, [filteredTokens, otherFilteredTokens, chain, address]);
+  }, [filteredTokens, otherFilteredTokens, chain, address, tokenPrices]);
 
   const ownedTokens = useMemo(
     () => allTokens.filter((token) => token.balance?.gt(0)),

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

@@ -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-[10px]">
+    <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/SwapProvider.tsx

@@ -64,8 +64,7 @@ type SwapContext = {
   setSrcChain: Dispatch<SetStateAction<Chain | undefined>>;
   srcChainTokensOptions: TokenOption[];
   srcChainOtherTokensOptions: TokenOption[];
-  srcChainTokensPrices: TokenPrices;
-  dstChainTokensPrices: TokenPrices;
+  tokenPrices: TokenPrices;
   srcToken: Token | undefined;
   setSrcToken: Dispatch<SetStateAction<Token | undefined>>;
   dstChain: Chain | undefined;
@@ -128,8 +127,7 @@ const init: SwapContext = {
   srcChain: undefined,
   srcChainTokensOptions: [],
   srcChainOtherTokensOptions: [],
-  srcChainTokensPrices: {},
-  dstChainTokensPrices: {},
+  tokenPrices: {},
   dstChain: undefined,
   dstChainTokensOptions: [],
   dstChainOtherTokensOptions: [],
@@ -246,12 +244,7 @@ export const SwapProvider = ({
   const [dstChainTokensOptions, setDstChainTokensOptions] = useState(
     init.dstChainTokensOptions,
   );
-  const [srcChainTokensPrices, setSrcChainTokensPrices] = useState(
-    init.srcChainTokensPrices,
-  );
-  const [dstChainTokensPrices, setDstChainTokensPrices] = useState(
-    init.dstChainTokensPrices,
-  );
+  const [tokenPrices, setTokenPrices] = useState(init.tokenPrices);
   const [srcChainOtherTokensOptions, setSrcChainOtherTokensOptions] = useState(
     init.srcChainOtherTokensOptions,
   );
@@ -265,6 +258,15 @@ export const SwapProvider = ({
 
   const { history } = useHistory();
 
+  useEffect(() => {
+    if (supportedChains.length > 0) {
+      const chainIds = supportedChains.map((chain) => chain.chainId);
+      getPrices({ chainId: chainIds }).then((prices) => {
+        setTokenPrices(prices);
+      });
+    }
+  }, [supportedChains]);
+
   const supportedTokens: Record<string, Record<string, Token>> = useMemo(() => {
     const customTokens = !isServer
       ? JSON.parse(localStorage.getItem("custom-tokens") || "{}")
@@ -406,36 +408,21 @@ export const SwapProvider = ({
     [srcToken?.decimals, srcValue],
   );
 
-  // fetch srcTokenPrices
-  useEffect(() => {
-    if (srcChain) {
-      getPrices({ chainId: srcChain.chainId, currency: "USD" }).then((prices) =>
-        setSrcChainTokensPrices(prices),
-      );
-    }
-  }, [srcChain]);
-
-  // fetch dstTokenPrices
-  useEffect(() => {
-    if (dstChain) {
-      getPrices({ chainId: dstChain.chainId, currency: "USD" }).then((prices) =>
-        setDstChainTokensPrices(prices),
-      );
-    }
-  }, [dstChain]);
-
   const srcValueUsd = useMemo(() => {
     if (
       srcToken &&
-      srcChainTokensPrices &&
-      srcChainTokensPrices[srcToken.address]
+      srcChain &&
+      tokenPrices &&
+      tokenPrices[srcChain.chainId] &&
+      tokenPrices[srcChain.chainId]?.[srcToken.address]
     ) {
       return (
-        Number(srcValue) * Number(srcChainTokensPrices[srcToken.address])
+        Number(srcValue) *
+        Number(tokenPrices[srcChain.chainId]?.[srcToken.address])
       ).toFixed(2);
     }
     return null;
-  }, [srcChainTokensPrices, srcToken, srcValue]);
+  }, [tokenPrices, srcToken, srcValue, srcChain]);
   const dstValue = useMemo(
     () =>
       weiToHumanReadable({
@@ -457,15 +444,18 @@ export const SwapProvider = ({
   const dstValueUsd = useMemo(() => {
     if (
       dstToken &&
-      dstChainTokensPrices &&
-      dstChainTokensPrices[dstToken.address]
+      dstChain &&
+      tokenPrices &&
+      tokenPrices[dstChain?.chainId] &&
+      tokenPrices[dstChain?.chainId]?.[dstToken.address]
     ) {
       return (
-        Number(dstValue) * Number(dstChainTokensPrices[dstToken.address])
+        Number(dstValue) *
+        Number(tokenPrices[dstChain?.chainId]?.[dstToken.address])
       ).toFixed(2);
     }
     return null;
-  }, [dstChainTokensPrices, dstToken, dstValue]);
+  }, [tokenPrices, dstToken, dstValue, dstChain]);
   const dstValueMin = useMemo(
     () =>
       weiToHumanReadable({
@@ -950,8 +940,7 @@ export const SwapProvider = ({
         setSrcChain,
         srcChainTokensOptions,
         srcChainOtherTokensOptions,
-        dstChainTokensPrices,
-        srcChainTokensPrices,
+        tokenPrices,
         dstChain,
         setDstChain,
         dstChainTokensOptions,

package/src/models/TokenData.ts

@@ -40,7 +40,9 @@ export type Prices = {
 };
 
 export type TokenPrices = {
-  [tokenAddress: string]: string;
+  [chainId: string]: {
+    [tokenAddress: string]: string;
+  };
 };
 
 export type TokenBalances = {

package/src/models/payloads/GetPricesPayload.ts

@@ -1,4 +1,4 @@
 export type GetPricesPayload = {
-  chainId: string;
+  chainId: string[];
   currency?: string;
 };