@xswap-link/sdk 0.8.6 → 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.6",
+  "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/ChainPanel/ChainPicker/ChainItem/index.tsx

@@ -9,11 +9,11 @@ import { useMemo, useRef } from "react";
 type Props = {
   chain: Chain;
   type: SwapPanelType;
-  disabledChains: string[];
+  disabled: boolean;
   onClick: (chainId: string) => void;
 };
 
-export const ChainItem = ({ chain, type, onClick, disabledChains }: Props) => {
+export const ChainItem = ({ chain, type, onClick, disabled }: Props) => {
   const {
     networks: { evm },
   } = useNetworks();
@@ -40,12 +40,10 @@ export const ChainItem = ({ chain, type, onClick, disabledChains }: Props) => {
     return type === "destination" ? srcChain?.chainId : dstChain?.chainId;
   }, [bridgeUI, dstChain?.chainId, srcChain?.chainId, type]);
 
-  const isInDisabledChains = disabledChains.includes(chain.chainId);
-
   return (
     <div
       onClick={() => {
-        if (chain.chainId === sameChainId || isInDisabledChains) {
+        if (chain.chainId === sameChainId || disabled) {
           return;
         }
         onClick(chain.chainId);
@@ -53,7 +51,7 @@ export const ChainItem = ({ chain, type, onClick, disabledChains }: Props) => {
       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 || isInDisabledChains
+        chain.chainId === sameChainId || disabled
           ? "disabled-chain-item cursor-default"
           : ""
       }`}
@@ -70,7 +68,7 @@ export const ChainItem = ({ chain, type, onClick, disabledChains }: Props) => {
         </div>
       )}
 
-      {isInDisabledChains && chain.chainId !== sameChainId && (
+      {disabled && chain.chainId !== sameChainId && (
         <div className="flex items-center gap-1">
           <Tooltip
             text={

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

@@ -101,6 +101,22 @@ export const ChainPicker = ({
     supportedChains,
   ]);
 
+  const sortedChains = useMemo(() => {
+    return filteredChains
+      .map((chain) => ({
+        ...chain,
+        disabled: disabledChains.includes(chain.chainId),
+      }))
+      .sort((a, b) => {
+        if (a.disabled === b.disabled) {
+          return 0;
+        }
+
+        // Place false before true.
+        return a.disabled ? 1 : -1;
+      });
+  }, [filteredChains, disabledChains]);
+
   return (
     <div className="flex flex-col h-full">
       <div className="flex justify-between">
@@ -117,12 +133,12 @@ export const ChainPicker = ({
         {filteredChains.length ? (
           <Virtuoso
             style={{ height: "100%" }}
-            data={filteredChains}
+            data={sortedChains}
             itemContent={(_, chain) => (
               <ChainItem
                 chain={chain}
                 type={type}
-                disabledChains={disabledChains}
+                disabled={chain.disabled}
                 onClick={select}
               />
             )}

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

@@ -2,8 +2,7 @@ import { ArrowDownIcon } from "@src/assets/icons";
 import { Modal } from "@src/components/Modal";
 import { useSwapContext } from "@src/context";
 import { Chain, Token } from "@src/models";
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { useAccount } from "wagmi";
+import { useCallback, useMemo, useState } from "react";
 import { SwapPanelType } from "../../../SwapView";
 import { ChainPicker } from "./ChainPicker";
 
@@ -15,8 +14,6 @@ type Props = {
 
 export const ChainPanel = ({ chain, type, className }: Props) => {
   const {
-    supportedChains,
-    srcChain,
     setSrcChain,
     setDstChain,
     srcToken,
@@ -25,13 +22,10 @@ export const ChainPanel = ({ chain, type, className }: Props) => {
     setDstToken,
     srcChainLocked,
     dstChainLocked,
-    integrationConfig,
     bridgeUI,
     bridgeTokensDictionary,
   } = useSwapContext();
 
-  const { chainId } = useAccount();
-
   const projectLockedDestinationChain = useMemo(
     () => type === "destination" && dstChainLocked,
     [type, dstChainLocked],
@@ -42,23 +36,6 @@ export const ChainPanel = ({ chain, type, className }: Props) => {
     [type, srcChainLocked],
   );
 
-  // select chain from user wallet
-  useEffect(() => {
-    if (!chainId || integrationConfig.srcChainId) return;
-
-    const userChainFromWallet = supportedChains.find(
-      (chain) => chain.chainId === String(chainId),
-    );
-    if (
-      !userChainFromWallet ||
-      srcChain?.chainId === userChainFromWallet.chainId
-    )
-      return;
-
-    setSrcChain(userChainFromWallet);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [chainId]);
-
   const [chainPickerModalOpen, setChainPickerModalOpen] = useState(false);
 
   const handleSrcChainChange = useCallback(

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

@@ -1,7 +1,5 @@
 import { TokenLogo } from "@src/components";
-import { useSwapContext } from "@src/context";
 import { TokenOption } from "@src/models";
-import { useMemo } from "react";
 
 type Props = {
   token: TokenOption;
@@ -13,13 +11,6 @@ export const QuickPickTokenItem = ({
   selectedTokenAddress,
   onClick,
 }: Props) => {
-  const { supportedChains } = useSwapContext();
-
-  const chain = useMemo(
-    () => supportedChains.find(({ chainId }) => chainId === token.chainId),
-    [supportedChains, token],
-  );
-
   return (
     <button
       type="button"
@@ -36,9 +27,9 @@ export const QuickPickTokenItem = ({
         generatedLogoClassName="w-6 h-6"
       />
       <div className="flex flex-col gap-1 text-xs font-medium !leading-3">
-        <div className="text-t_text_primary">{token.symbol}</div>
+        <div className="text-t_text_primary">{token.name}</div>
         <div className="text-t_text_primary text-opacity-50">
-          {chain?.displayName}
+          {token.symbol}
         </div>
       </div>
     </button>

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}
     >
@@ -41,7 +50,7 @@ export const TokenItem = ({ token, selectedTokenAddress, onClick }: Props) => {
             {token.name}
           </div>
           <div className="text-xs text-t_text_primary text-opacity-50 font-medium">
-            {chain?.displayName}
+            {token.symbol}
           </div>
         </div>