@xswap-link/sdk 0.8.7 → 0.9.1

package/jest.config.ts

@@ -0,0 +1,37 @@
+import type { JestConfigWithTsJest } from "ts-jest";
+
+const esmModules = [
+  "uuid",
+  "wagmi",
+  "@wagmi",
+  "viem",
+  "@viem",
+  "@tanstack/react-query",
+];
+
+const config: JestConfigWithTsJest = {
+  extensionsToTreatAsEsm: [".ts", ".tsx"],
+  verbose: true,
+  preset: "ts-jest",
+  testEnvironment: "jsdom",
+  setupFilesAfterEnv: ["<rootDir>/test/setup.ts"],
+  transform: {
+    "^.+\\.tsx?$": ["ts-jest", { useESM: true }],
+    "\\.jsx?$": "babel-jest",
+  },
+  transformIgnorePatterns: [
+    `node_modules/(?!(?:.pnpm/)?(${esmModules.join("|")}))`,
+  ],
+  testPathIgnorePatterns: ["./dist"],
+  moduleNameMapper: {
+    "^@src/(.*)$": "<rootDir>/src/$1",
+    "^@/(.*)$": "<rootDir>/src/$1",
+    "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
+      "<rootDir>/test/fileMock.ts",
+    "\\.(css)$": "<rootDir>/test/styleMock.ts",
+  },
+  automock: false,
+  resetMocks: false,
+};
+
+export default config;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.8.7",
+  "version": "0.9.1",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -35,7 +35,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@r2wc/core": "^1.1.0",
-    "@tanstack/react-query": "^5.35.5",
+    "@tanstack/react-query": "^5.64.2",
     "async-retry": "^1.3.3",
     "bignumber.js": "4.0.4",
     "date-fns": "^3.6.0",
@@ -43,11 +43,18 @@
     "notistack": "^3.0.1",
     "react-error-boundary": "^4.1.0",
     "react-virtuoso": "^4.7.12",
-    "viem": "2.x",
-    "wagmi": "^2.8.5"
+    "viem": "~2.22.12",
+    "wagmi": "^2.14.9"
   },
   "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-env": "^7.26.0",
+    "@babel/preset-react": "^7.26.3",
+    "@babel/preset-typescript": "^7.26.0",
     "@changesets/cli": "^2.27.1",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.2.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/async-retry": "^1.4.8",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.17",
@@ -55,9 +62,13 @@
     "@types/react-dom": "^18.2.0",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "@typescript-eslint/parser": "^7.1.0",
+    "babel-jest": "^29.7.0",
+    "cross-fetch": "^4.1.0",
     "eslint": "^8.57.0",
     "eslint-plugin-react-hooks": "^4.6.2",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-fetch": "^1.1.1",
     "jest-fetch-mock": "^3.0.3",
     "nodemon": "^3.1.0",
@@ -67,6 +78,7 @@
     "react-dom": "^18.2.0",
     "tailwindcss": "^3.4.3",
     "ts-jest": "^29.1.2",
+    "ts-node": "^10.9.2",
     "tsup": "^8.1.0",
     "typescript": "^5.3.3"
   },
@@ -84,6 +96,6 @@
     "watch": "tsup && nodemon",
     "release": "tsup && changeset publish",
     "lint": "tsc && eslint . --ext .ts",
-    "test": "jest"
+    "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js"
   }
 }

package/src/components/Modal/index.tsx

@@ -45,7 +45,7 @@ export const Modal: FC<{
       }}
     >
       <div
-        className="flex flex-col bg-t_bg_primary x-border rounded-3xl p-4 w-full min-w-[340px]"
+        className="flex flex-col bg-t_bg_primary rounded-3xl p-4 w-full min-w-[340px]"
         style={{
           height: overlay ? "600px" : "100%",
           maxWidth: "480px",

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

@@ -9,7 +9,7 @@ export const Header = ({ onClose }: Props) => {
 
   return (
     <div className="flex justify-between">
-      <div className="text-xl">
+      <div className="text-xl font-sans-bold font-bold">
         {tab === "Swap" && bridgeUI ? "Bridge" : tab}
       </div>
       <Controls onClose={onClose} />

package/src/components/Swap/ReorderButton/ReorderButton.tsx

@@ -22,16 +22,18 @@ export const ReorderButton: FC = () => {
   };
 
   return (
-    <button
-      onClick={onReorderClick}
-      aria-label="Switch target token with the source token"
-      className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-14 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary"
-    >
-      <div className="relative bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark w-8 h-8 rounded-lg">
-        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white">
-          <ArrowsExchange />
+    <div className="h-[1px] w-full">
+      <button
+        onClick={onReorderClick}
+        aria-label="Switch target token with the source token"
+        className="absolute -translate-y-5 left-1/2 -translate-x-5 p-1 border border-solid border-t_text_primary border-opacity-10 rounded-xl bg-t_bg_secondary"
+      >
+        <div className="relative bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark w-8 h-8 rounded-lg">
+          <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 fill-white">
+            <ArrowsExchange />
+          </div>
         </div>
-      </div>
-    </button>
+      </button>
+    </div>
   );
 };

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

@@ -42,7 +42,7 @@ export const FeesPanel = () => {
             {isFetchingRoute ? (
               <Skeleton className="w-[100px] h-full" />
             ) : (
-              <p>{`${totalFee} ${feeToken?.symbol}`}</p>
+              <p>{`${totalFee} ${feeToken?.symbol || ""}`}</p>
             )}
           </div>
           <div className="flex gap-2 items-center fill-t_text_primary">

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

@@ -33,6 +33,7 @@ export const SwapButton = () => {
     srcValueWei,
     srcTokenBalanceWei,
     isFetchingRoute,
+    isAsyncDataLoaded,
   } = useSwapContext();
 
   const { setTxStatus, setTxMsg, setTxModalOpen, enqueueTransaction } =
@@ -92,7 +93,7 @@ export const SwapButton = () => {
   }, [setTxModalOpen, setTxMsg, setTxStatus]);
 
   const button: Button = useMemo(() => {
-    if (!srcChainId || !dstChainId || !srcTokenAddress || !dstTokenAddress) {
+    if (!isAsyncDataLoaded) {
       return {
         text: "Loading XPay...",
         fn: () => {},
@@ -111,8 +112,8 @@ export const SwapButton = () => {
     if (!address) {
       return {
         text: integrationConfig.defaultWalletPicker
-          ? "Connect wallet"
-          : "Connect wallet first",
+          ? "Connect Wallet"
+          : "Connect Wallet First",
         fn: () => {
           setConnectWalletModalOpen(true);
         },
@@ -120,12 +121,20 @@ export const SwapButton = () => {
       };
     }
 
+    if (!srcChainId || !dstChainId || !srcTokenAddress || !dstTokenAddress) {
+      return {
+        text: "Select Tokens",
+        fn: () => {},
+        disabled: true,
+      };
+    }
+
     if (
       srcChainId === dstChainId &&
       srcTokenAddress.toLowerCase() === dstTokenAddress.toLowerCase()
     ) {
       return {
-        text: "Change token",
+        text: "Change Token",
         fn: () => {},
         disabled: true,
       };
@@ -133,7 +142,7 @@ export const SwapButton = () => {
 
     if (chainId?.toString() !== srcChainId) {
       return {
-        text: "Change chain",
+        text: "Change Chain",
         fn: async () => await switchChainAsync({ chainId: Number(srcChainId) }),
         disabled: false,
       };
@@ -145,15 +154,7 @@ export const SwapButton = () => {
       safeBigNumberFrom(srcValueWei).gt(safeBigNumberFrom(srcTokenBalanceWei))
     ) {
       return {
-        text: "Insufficient balance",
-        fn: () => {},
-        disabled: true,
-      };
-    }
-
-    if (!srcTokenAddress || !dstTokenAddress) {
-      return {
-        text: `Select token`,
+        text: "Insufficient Balance",
         fn: () => {},
         disabled: true,
       };
@@ -161,7 +162,7 @@ export const SwapButton = () => {
 
     if (safeBigNumberFrom(srcValueWei || "0").lte(safeBigNumberFrom("0"))) {
       return {
-        text: `Enter token amount`,
+        text: `Enter Token Amount`,
         fn: () => {},
         disabled: true,
       };
@@ -169,7 +170,7 @@ export const SwapButton = () => {
 
     if (isFetchingRoute) {
       return {
-        text: `Fetching route`,
+        text: `Fetching Route`,
         fn: () => {},
         disabled: true,
       };
@@ -181,7 +182,7 @@ export const SwapButton = () => {
       BigNumber.from(currentTokenAllowance).lt(BigNumber.from(srcValueWei))
     ) {
       return {
-        text: "Reset approval",
+        text: "Reset Approval",
         fn: async () => {
           enqueueTransaction({
             executeTransaction: () => approve("0", routerAddress),
@@ -207,18 +208,19 @@ export const SwapButton = () => {
       disabled: false,
     };
   }, [
-    bridgeUI,
+    isAsyncDataLoaded,
+    error,
+    address,
     srcChainId,
     dstChainId,
     srcTokenAddress,
     dstTokenAddress,
-    error,
-    address,
     chainId,
     srcValueWei,
     srcTokenBalanceWei,
     isFetchingRoute,
     currentTokenAllowance,
+    bridgeUI,
     integrationConfig.defaultWalletPicker,
     switchChainAsync,
     enqueueTransaction,
@@ -241,7 +243,7 @@ export const SwapButton = () => {
         type="button"
         disabled={button.disabled}
         onClick={button.fn}
-        className={`text-xl w-full py-5 cursor-pointer disabled:cursor-not-allowed rounded-2xl border-none ${
+        className={`text-xl font-sans-bold font-bold w-full py-5 cursor-pointer disabled:cursor-not-allowed rounded-2xl border-none ${
           button.disabled
             ? "bg-t_button_pr_off_bg text-t_button_pr_off_text"
             : "bg-gradient-to-r from-t_main_accent_light to-t_main_accent_dark text-t_button_pr_text"

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

@@ -31,7 +31,7 @@ export const AmountPanel = ({ type }: Props) => {
           <>
             <SafeInput
               id="swap-amount-input"
-              className={`bg-transparent border-none p-0 text-xl outline-0`}
+              className={`bg-transparent border-none p-0 text-xl outline-0 font-sans-bold font-bold`}
               regex={NUMBER_INPUT_REGEX}
               value={srcValue}
               onChange={(value) => setSrcValue(value)}
@@ -47,7 +47,9 @@ export const AmountPanel = ({ type }: Props) => {
           </div>
         ) : (
           <>
-            <div className={`text-xl text-t_text_secondary`}>
+            <div
+              className={`text-xl text-t_text_secondary font-sans-bold font-bold`}
+            >
               {dstValue || 0}
             </div>
             {valueUsd && (

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

@@ -9,10 +9,16 @@ import { useAccount } from "wagmi";
 type Props = {
   token: TokenOption;
   selectedTokenAddress: string | undefined;
+  selectedChainId: string | undefined;
   onClick: () => void;
 };
-export const TokenItem = ({ token, selectedTokenAddress, onClick }: Props) => {
-  const { supportedChains } = useSwapContext();
+export const TokenItem = ({
+  token,
+  selectedTokenAddress,
+  onClick,
+  selectedChainId,
+}: Props) => {
+  const { supportedChains, tokenPrices } = useSwapContext();
   const { address } = useAccount();
 
   const chain = useMemo(
@@ -20,11 +26,34 @@ export const TokenItem = ({ token, selectedTokenAddress, onClick }: Props) => {
     [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 ${
         token.address.toLowerCase() === selectedTokenAddress?.toLowerCase() &&
-        "bg-t_bg_tertiary bg-opacity-10"
+        selectedChainId &&
+        token.chainId === selectedChainId
+          ? "bg-t_bg_tertiary bg-opacity-10"
+          : ""
       }`}
       onClick={onClick}
     >
@@ -46,16 +75,21 @@ export const TokenItem = ({ token, selectedTokenAddress, onClick }: Props) => {
         </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>
         ) : (
           <>