@xswap-link/sdk 0.8.7 → 0.9.0

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.0",
   "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/TokenPanel/TokenPicker/TokenItem/index.tsx

@@ -9,9 +9,15 @@ import { useAccount } from "wagmi";
 type Props = {
   token: TokenOption;
   selectedTokenAddress: string | undefined;
+  selectedChainId: string | undefined;
   onClick: () => void;
 };
-export const TokenItem = ({ token, selectedTokenAddress, onClick }: Props) => {
+export const TokenItem = ({
+  token,
+  selectedTokenAddress,
+  onClick,
+  selectedChainId,
+}: Props) => {
   const { supportedChains } = useSwapContext();
   const { address } = useAccount();
 
@@ -24,7 +30,10 @@ export const TokenItem = ({ token, selectedTokenAddress, onClick }: Props) => {
     <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}
     >

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,13 @@ 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 { address } = useAccount();
   const evmContractApi = useEvmContractApi();
 
   useEffect(() => {
@@ -188,35 +191,63 @@ 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 ownedFilteredTokens = [
+      ...filteredTokens.filter((token) =>
+        BigNumber.from(token?.balance || "0").gt(0),
+      ),
+      ...otherFilteredTokens.filter((token) =>
+        BigNumber.from(token?.balance || "0").gt(0),
+      ),
+    ].sort(
+      (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+    );
 
-    return [...filteredTokensSorted, ...otherFilteredTokensSorted];
-  }, [filteredTokens, otherFilteredTokens]);
+    const currentChainTokens = filteredTokens
+      .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
+      .sort(
+        (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+      );
 
-  const tokenGroups = [filteredTokens, otherFilteredTokens];
+    const otherChainTokens = otherFilteredTokens
+      .filter((token) => BigNumber.from(token?.balance || "0").eq(0))
+      .sort(
+        (tokenDataA, tokenDataB) => tokenDataB.priority - tokenDataA.priority,
+      );
+
+    // 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]);
+
+  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 +344,7 @@ export const TokenPicker = ({
           <CloseIcon />
         </div>
       </div>
+
       <TextInput
         ref={tokenSearchRef}
         inputIcon={
@@ -324,7 +356,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 +421,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 +489,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!}

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

@@ -8,7 +8,7 @@ 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-[10px]">
         <SwapPanel type="source" />
         <ReorderButton />
         <SwapPanel type="destination" />

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,
   });