@xswap-link/sdk 0.9.7 → 0.9.9

package/package.json

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

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

@@ -236,37 +236,43 @@ export const TokenPicker = ({
     // Create groups based on chain and wallet connection status
     const groups = chain
       ? [
-          ...(!!address && ownedFilteredTokens.length
+          ...(!!address && ownedFilteredTokens.length && type === "source"
             ? [ownedFilteredTokens]
             : []),
           currentChainTokens,
           otherChainTokens,
         ]
       : [
-          ...(!!address && ownedFilteredTokens.length
+          ...(!!address && ownedFilteredTokens.length && type === "source"
             ? [ownedFilteredTokens]
             : []),
           [...currentChainTokens, ...otherChainTokens],
         ];
 
     return groups.flat();
-  }, [filteredTokens, otherFilteredTokens, chain, address, tokenPrices]);
+  }, [filteredTokens, otherFilteredTokens, chain, address, type, 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,
-      ];
+  const tokenGroups = useMemo(() => {
+    return chain
+      ? [
+          ...(type === "source" && !!address && ownedTokens.length
+            ? [ownedTokens]
+            : []),
+          filteredTokens,
+          otherFilteredTokens,
+        ]
+      : [
+          ...(type === "source" && !!address && ownedTokens.length
+            ? [ownedTokens]
+            : []),
+          otherFilteredTokens,
+        ];
+  }, [chain, type, address, ownedTokens, filteredTokens, otherFilteredTokens]);
 
   return showImportWarning ? (
     <>
@@ -459,7 +465,7 @@ export const TokenPicker = ({
                                 if (!address) {
                                   return `${chain.displayName} network`;
                                 }
-                                return ownedTokens.length
+                                return ownedTokens.length && type === "source"
                                   ? "My tokens"
                                   : `${chain.displayName} network`;
                               }
@@ -483,7 +489,7 @@ export const TokenPicker = ({
                                 if (!address) {
                                   return "All networks";
                                 }
-                                return ownedTokens.length
+                                return ownedTokens.length && type === "source"
                                   ? "My tokens"
                                   : "All networks";
                               }

package/src/components/TxConfigForm/index.tsx

@@ -13,6 +13,7 @@ import { FC, MouseEvent, useEffect, useMemo } from "react";
 import { ErrorBoundary } from "react-error-boundary";
 import { useReconnect, WagmiProvider } from "wagmi";
 import { changeHostVariableColor } from "../../../localTheme";
+import { setApiUrl } from "@src/services/api";
 
 export type TxConfigFormPayload = Omit<
   ModalIntegrationPayload,
@@ -97,6 +98,7 @@ export const TxConfigForm = ({
   onSrcChainChange,
   bridge,
   onConnectWallet,
+  override,
 }: TxConfigFormPayload &
   (
     | {
@@ -105,7 +107,6 @@ export const TxConfigForm = ({
         overlay: true;
       }
     | {
-        // Satisfy TypeScript, so it understands that this field is not needed when overlay=false
         onSubmit?: undefined;
         onClose?: undefined;
         overlay: false;
@@ -129,6 +130,12 @@ export const TxConfigForm = ({
     changeHostVariableColor(lightTheme, styles);
   }, [lightTheme, styles]);
 
+  useEffect(() => {
+    if (override?.apiUrl) {
+      setApiUrl(override?.apiUrl);
+    }
+  }, [override?.apiUrl]);
+
   return (
     <ErrorBoundary
       FallbackComponent={() => (
@@ -214,6 +221,7 @@ export const openTxConfigForm = async ({
   dstChainLocked,
   srcTokenLocked,
   srcChainLocked,
+  override,
 }: TxConfigFormPayload): Promise<Route> => {
   try {
     if (xpayRoot === null) {
@@ -257,6 +265,7 @@ export const openTxConfigForm = async ({
           dstChainLocked={dstChainLocked}
           srcTokenLocked={srcTokenLocked}
           srcChainLocked={srcChainLocked}
+          override={override}
         />,
       );
     });

package/src/components/TxWidgetWC/index.tsx

@@ -4,7 +4,7 @@ import {
   Web3Environment,
   WidgetIntegrationPayload,
 } from "@src/models";
-import { getChains } from "@src/services";
+import { getChains, setApiUrl } from "@src/services";
 import { isServer } from "@src/utils";
 import { createWebComponent } from "@src/utils/webComponents";
 import { useEffect, useState } from "react";
@@ -35,6 +35,7 @@ const TxWidget = ({
   onSrcChainChange,
   onConnectWallet,
   bridge,
+  override,
 }: WidgetIntegrationPayload) => {
   const [loading, setLoading] = useState(true);
   const [supportedChains, setSupportedChains] = useState<Chain[]>([]);
@@ -43,6 +44,10 @@ const TxWidget = ({
     (async () => {
       setLoading(true);
 
+      if (override?.apiUrl) {
+        setApiUrl(override.apiUrl);
+      }
+
       const chains = (await getChains()).filter(
         ({ web3Environment, bridgeSupported, swapSupported }) =>
           web3Environment === Web3Environment.MAINNET &&
@@ -52,6 +57,7 @@ const TxWidget = ({
       setSupportedChains(chains);
       setLoading(false);
     })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   const parsedStyles: ModalIntegrationStyles | undefined = (() => {
@@ -98,6 +104,7 @@ const TxWidget = ({
           onSrcChainChange={onSrcChainChange}
           onConnectWallet={onConnectWallet}
           bridge={bridge}
+          override={override}
         />
       )}
     </>
@@ -141,6 +148,7 @@ export const createTxWidgetWC = () => {
       onDstChainChange: "function",
       onSrcTokenChange: "function",
       onSrcChainChange: "function",
+      override: "json",
     },
   });
 
@@ -176,4 +184,5 @@ export type TxWidgetWCAttributes = {
   "on-src-token-change"?: WidgetIntegrationPayload["onSrcTokenChange"];
   "on-src-chain-change"?: WidgetIntegrationPayload["onSrcChainChange"];
   bridge: WidgetIntegrationPayload["bridge"] | undefined;
+  override: string | undefined;
 };

package/src/components/TxWidgetWCWrapped/index.tsx

@@ -47,6 +47,7 @@ export const TxWidgetWCWrapped = ({
   onSrcChainChange,
   onConnectWallet,
   bridge,
+  override,
 }: WidgetIntegrationPayload) => {
   useEffect(() => {
     // We couldn't find a way to pass a function to the web component created by @r2wc/core.
@@ -84,6 +85,7 @@ export const TxWidgetWCWrapped = ({
       src-token-locked={srcTokenLocked}
       src-chain-locked={srcChainLocked}
       bridge={bridge}
+      override={JSON.stringify(override)}
     ></xpay-widget>
   );
 };

package/src/context/SwapProvider.tsx

@@ -533,11 +533,32 @@ export const SwapProvider = ({
       !srcToken ||
       !dstToken ||
       !srcValueWei ||
-      safeBigNumberFrom(srcValueWei).eq(0)
+      safeBigNumberFrom(srcValueWei).eq(0) ||
+      (bridgeUI && !bridgeTokensDictionary)
     ) {
       setRoute(undefined);
       return;
     }
+
+    // Validate the current path before requesting a route
+    const { source, target } = mapToValidPath({
+      source: { chain: srcChain, token: srcToken },
+      target: { chain: dstChain, token: dstToken },
+      type: bridgeUI ? "BRIDGE" : "SWAP",
+      supportedChains,
+      bridgeTokensDictionary: bridgeTokensDictionary || {},
+    });
+
+    // If any of the chains or tokens would be changed by validation, don't request a route
+    if (
+      source.chain?.chainId !== srcChain?.chainId ||
+      target.chain?.chainId !== dstChain?.chainId ||
+      source.token?.address !== srcToken?.address ||
+      target.token?.address !== dstToken?.address
+    ) {
+      return;
+    }
+
     try {
       setError("");
       setFetchingRoute(true);
@@ -580,6 +601,7 @@ export const SwapProvider = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
     address,
+    bridgeUI,
     dstChain,
     dstToken,
     getRoute,

package/src/models/index.ts

@@ -17,4 +17,3 @@ export * from "./TransactionHistory";
 export * from "./TxUIWrapper";
 export * from "./Web3Environment";
 export * from "./XSwapCallType";
-export * from "./XSwapConfig";

package/src/models/payloads/ModalIntegrationPayload.ts

@@ -64,4 +64,7 @@ export type ModalIntegrationPayload = {
   onSrcChainChange?: (chain: string | undefined) => void;
   onConnectWallet?: () => void;
   bridge?: boolean;
+  override?: {
+    apiUrl?: string;
+  };
 };

package/src/models/payloads/WidgetIntegrationPayload.ts

@@ -27,4 +27,7 @@ export type WidgetIntegrationPayload = {
   onSrcChainChange?: (chain: string | undefined) => void;
   onConnectWallet?: () => void;
   bridge?: boolean;
+  override?: {
+    apiUrl?: string;
+  };
 };

package/src/services/api.ts

@@ -13,13 +13,18 @@ import {
   TransactionHistory,
   TransactionStatus,
 } from "@src/models";
-import xSwapConfig from "../../xswap.config";
+
+let XSWAP_API_URL = "https://xswap.link/api";
+
+export const setApiUrl = (url: string) => {
+  XSWAP_API_URL = url;
+};
 
 async function _sendRequest<T>(
   urlPath: string,
   options?: RequestInit,
 ): Promise<T> {
-  const response = await fetch(`${xSwapConfig.apiUrl}${urlPath}`, {
+  const response = await fetch(`${XSWAP_API_URL}${urlPath}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
@@ -59,8 +64,7 @@ export async function getRoute(
  * @param ecosystem optional
  */
 export async function getChains(ecosystem?: Ecosystem): Promise<Chain[]> {
-  return _sendRequest<Chain[]>(`/chains?data=${JSON.stringify({ ecosystem })}
-    `);
+  return _sendRequest<Chain[]>(`/chains?data=${JSON.stringify({ ecosystem })}`);
 }
 
 /**

package/src/utils/validation.ts

@@ -262,7 +262,14 @@ const mapToValidPathSwap = ({
   }
 
   // Setting tokens
-  // Removed check for token chainId equality as tokens may not include a chainId property
+  // validate if the token is supported in the new source chain
+  newSourceToken = newSourceChain.tokens.find(
+    (token) => token.tokenId === newSourceToken?.tokenId && token.supported,
+  );
+  newTargetToken = newTargetChain.tokens.find(
+    (token) => token.tokenId === newTargetToken?.tokenId && token.supported,
+  );
+
   if (!newSourceToken) {
     newSourceToken = getDefaultSwapTokenForChain(
       newSourceChain,
@@ -339,18 +346,32 @@ const mapToValidPathBridge = ({
   // Setting tokens
   // check if the source token is bridgeable anywhere
   if (newSourceToken && newSourceChain) {
-    const isBridgeable =
-      Object.keys(
-        bridgeTokensDictionary[newSourceChain.chainId]?.[
-          newSourceToken.address.toLowerCase()
-        ] || {},
-      ).length > 0;
+    // First validate if the token is supported in the source chain
+    newSourceToken = newSourceChain.tokens.find(
+      (token) => token.tokenId === newSourceToken?.tokenId && token.supported,
+    );
 
-    if (!isBridgeable) {
-      newSourceToken = undefined;
+    if (newSourceToken) {
+      const isBridgeable =
+        Object.keys(
+          bridgeTokensDictionary[newSourceChain.chainId]?.[
+            newSourceToken.address.toLowerCase()
+          ] || {},
+        ).length > 0;
+
+      if (!isBridgeable) {
+        newSourceToken = undefined;
+      }
     }
   }
 
+  // Validate if target token is supported in the target chain
+  if (newTargetToken && newTargetChain) {
+    newTargetToken = newTargetChain.tokens.find(
+      (token) => token.tokenId === newTargetToken?.tokenId && token.supported,
+    );
+  }
+
   if (!newSourceToken) {
     const defaultToken = getDefaultBridgeTokenForChain({
       chain: newSourceChain,

package/test/context/SwapProvider.test.tsx

@@ -260,6 +260,110 @@ describe("SwapProvider", () => {
       // Should set a valid token for the new chain
       expect(result.current.srcToken?.address).toBeDefined();
     });
+
+    it("should preserve token when changing to chain with same token", async () => {
+      const { result } = renderHook(() => useSwapContext(), {
+        wrapper: getWrapper(
+          { ...integrationConfig, bridge: false },
+          supportedChains,
+          wagmiConfig,
+        ),
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // First set initial chain and token
+      const initialChain = supportedChains.find(
+        (chain) => chain.chainId === SRC_SWAP_CHAIN_ID,
+      );
+      if (!initialChain) throw new Error("Initial chain not found");
+
+      const initialToken = initialChain.tokens.find(
+        (token) =>
+          token.address.toLowerCase() === SRC_SWAP_TOKEN_ADDR.toLowerCase(),
+      );
+      if (!initialToken) throw new Error("Initial token not found");
+
+      await act(async () => {
+        result.current.setSrcChain(initialChain);
+        result.current.setSrcToken(initialToken);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // Now change to a different chain that has the same token (by tokenId)
+      const newChain = supportedChains.find(
+        (chain) =>
+          chain.chainId !== initialChain.chainId &&
+          chain.tokens.some(
+            (token) =>
+              token.tokenId === initialToken.tokenId && token.supported,
+          ),
+      );
+      if (!newChain) throw new Error("New chain with same token not found");
+
+      await act(async () => {
+        result.current.setSrcChain(newChain);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // Should preserve the same tokenId but with new chain's token address
+      expect(result.current.srcToken?.tokenId).toBe(initialToken.tokenId);
+      expect(result.current.srcToken?.address).not.toBe(initialToken.address);
+    });
+
+    it("should reset token when changing to chain without same token", async () => {
+      const { result } = renderHook(() => useSwapContext(), {
+        wrapper: getWrapper(
+          { ...integrationConfig, bridge: false },
+          supportedChains,
+          wagmiConfig,
+        ),
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // First set initial chain and token
+      const initialChain = supportedChains.find(
+        (chain) => chain.chainId === SRC_SWAP_CHAIN_ID,
+      );
+      if (!initialChain) throw new Error("Initial chain not found");
+
+      const initialToken = initialChain.tokens.find(
+        (token) =>
+          token.address.toLowerCase() === SRC_SWAP_TOKEN_ADDR.toLowerCase(),
+      );
+      if (!initialToken) throw new Error("Initial token not found");
+
+      await act(async () => {
+        result.current.setSrcChain(initialChain);
+        result.current.setSrcToken(initialToken);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // Now change to a chain that doesn't have the same token
+      const newChain = supportedChains.find(
+        (chain) =>
+          chain.chainId !== initialChain.chainId &&
+          !chain.tokens.some((token) => token.tokenId === initialToken.tokenId),
+      );
+      if (!newChain) throw new Error("New chain without same token not found");
+
+      await act(async () => {
+        result.current.setSrcChain(newChain);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // Should have a different token now
+      expect(result.current.srcToken?.tokenId).not.toBe(initialToken.tokenId);
+      expect(result.current.srcToken?.address).not.toBe(initialToken.address);
+      // But should still have a valid token
+      expect(result.current.srcToken).toBeDefined();
+    });
+
     it("should handle destination chain change", async () => {
       const { result } = renderHook(() => useSwapContext(), {
         wrapper: getWrapper(
@@ -288,7 +392,7 @@ describe("SwapProvider", () => {
       expect(result.current.dstToken?.address).toBeDefined();
     });
 
-    it("should handle source token change", async () => {
+    it("should preserve token when changing destination chain with same token", async () => {
       const { result } = renderHook(() => useSwapContext(), {
         wrapper: getWrapper(
           { ...integrationConfig, bridge: false },
@@ -301,12 +405,119 @@ describe("SwapProvider", () => {
         await new Promise((resolve) => setTimeout(resolve, 0));
       });
 
+      // First set initial chain and token
+      const initialChain = supportedChains.find(
+        (chain) => chain.chainId === DST_SWAP_CHAIN_ID,
+      );
+      if (!initialChain) throw new Error("Initial chain not found");
+
+      const initialToken = initialChain.tokens.find(
+        (token) =>
+          token.address.toLowerCase() === DST_SWAP_TOKEN_ADDR.toLowerCase(),
+      );
+      if (!initialToken) throw new Error("Initial token not found");
+
+      await act(async () => {
+        result.current.setDstChain(initialChain);
+        result.current.setDstToken(initialToken);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // Now change to a different chain that has the same token (by tokenId)
       const newChain = supportedChains.find(
+        (chain) =>
+          chain.chainId !== initialChain.chainId &&
+          chain.tokens.some(
+            (token) =>
+              token.tokenId === initialToken.tokenId && token.supported,
+          ),
+      );
+      if (!newChain) throw new Error("New chain with same token not found");
+
+      await act(async () => {
+        result.current.setDstChain(newChain);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // Should preserve the same tokenId but with new chain's token address
+      expect(result.current.dstToken?.tokenId).toBe(initialToken.tokenId);
+      expect(result.current.dstToken?.address).not.toBe(initialToken.address);
+    });
+
+    it("should reset token when changing destination chain without same token", async () => {
+      const { result } = renderHook(() => useSwapContext(), {
+        wrapper: getWrapper(
+          { ...integrationConfig, bridge: false },
+          supportedChains,
+          wagmiConfig,
+        ),
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // First set initial chain and token
+      const initialChain = supportedChains.find(
+        (chain) => chain.chainId === DST_SWAP_CHAIN_ID,
+      );
+      if (!initialChain) throw new Error("Initial chain not found");
+
+      const initialToken = initialChain.tokens.find(
+        (token) =>
+          token.address.toLowerCase() === DST_SWAP_TOKEN_ADDR.toLowerCase(),
+      );
+      if (!initialToken) throw new Error("Initial token not found");
+
+      await act(async () => {
+        result.current.setDstChain(initialChain);
+        result.current.setDstToken(initialToken);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // Now change to a chain that doesn't have the same token
+      const newChain = supportedChains.find(
+        (chain) =>
+          chain.chainId !== initialChain.chainId &&
+          !chain.tokens.some((token) => token.tokenId === initialToken.tokenId),
+      );
+      if (!newChain) throw new Error("New chain without same token not found");
+
+      await act(async () => {
+        result.current.setDstChain(newChain);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // Should have a different token now
+      expect(result.current.dstToken?.tokenId).not.toBe(initialToken.tokenId);
+      expect(result.current.dstToken?.address).not.toBe(initialToken.address);
+      // But should still have a valid token
+      expect(result.current.dstToken).toBeDefined();
+    });
+
+    it("should handle source token change", async () => {
+      const { result } = renderHook(() => useSwapContext(), {
+        wrapper: getWrapper(
+          {
+            ...integrationConfig,
+            bridge: false,
+            srcChainId: SRC_SWAP_CHAIN_ID,
+          },
+          supportedChains,
+          wagmiConfig,
+        ),
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      const activeSrcChain = supportedChains.find(
         (chain) => chain.chainId === SRC_SWAP_CHAIN_ID,
       );
-      if (!newChain) throw new Error("Source chain not set");
+      if (!activeSrcChain) throw new Error("Source chain not set");
 
-      const newToken = newChain.tokens.find(
+      const newToken = activeSrcChain.tokens.find(
         (token) =>
           token.address.toLowerCase() === SRC_SWAP_TOKEN_ADDR.toLowerCase(),
       );
@@ -322,7 +533,11 @@ describe("SwapProvider", () => {
     it("should handle destination token change", async () => {
       const { result } = renderHook(() => useSwapContext(), {
         wrapper: getWrapper(
-          { ...integrationConfig, bridge: false },
+          {
+            ...integrationConfig,
+            bridge: false,
+            dstChainId: DST_SWAP_CHAIN_ID,
+          },
           supportedChains,
           wagmiConfig,
         ),
@@ -544,6 +759,61 @@ describe("SwapProvider", () => {
         result.current.dstChain?.chainId,
       );
     });
+
+    it("should preserve token when changing destination chain if token exists on both chains", async () => {
+      // Set up initial state with Arbitrum as source chain
+      const arbitrumChain = supportedChains.find(
+        (chain) => chain.chainId === "42161", // Arbitrum One
+      );
+      if (!arbitrumChain) throw new Error("Arbitrum chain not found");
+
+      // Find WETH token on Base
+      const arbitrumWethToken = arbitrumChain.tokens.find(
+        (token) => token.tokenId === "WETH",
+      );
+      if (!arbitrumWethToken)
+        throw new Error("WETH token not found on arbitrum");
+
+      // Set Base as initial destination chain
+      const baseChain = supportedChains.find(
+        (chain) => chain.chainId === "8453", // Base
+      );
+      if (!baseChain) throw new Error("Base chain not found");
+
+      const { result } = renderHook(() => useSwapContext(), {
+        wrapper: getWrapper(
+          {
+            ...integrationConfig,
+            bridge: true,
+            srcChainId: arbitrumChain.chainId,
+            dstChainId: baseChain.chainId,
+            srcTokenAddr: arbitrumWethToken.address,
+          },
+          supportedChains,
+          wagmiConfig,
+        ),
+      });
+
+      await act(async () => {
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // Find Ethereum chain
+      const ethereumChain = supportedChains.find(
+        (chain) => chain.chainId === "1", // Ethereum
+      );
+      if (!ethereumChain) throw new Error("Ethereum chain not found");
+
+      // Change destination chain to Ethereum
+      await act(async () => {
+        result.current.setDstChain(ethereumChain);
+        await new Promise((resolve) => setTimeout(resolve, 0));
+      });
+
+      // Verify that WETH is still selected but with Ethereum's address
+      expect(result.current.dstToken?.tokenId).toBe("WETH");
+      expect(result.current.dstChain?.chainId).toBe("1");
+    });
   });
 
   describe("Swap mode validation", () => {

package/src/models/XSwapConfig.ts

@@ -1,4 +0,0 @@
-export type XSwapConfig = {
-  apiUrl: string;
-  localCss: boolean;
-};