@xswap-link/sdk 0.10.6 → 0.10.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.10.6",
+  "version": "0.10.8",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -29,22 +29,33 @@
     }
   },
   "dependencies": {
+    "@coral-xyz/anchor": "^0.29.0",
     "@ethersproject/providers": "^5.7.2",
     "@fortawesome/fontawesome-svg-core": "^6.4.2",
     "@fortawesome/free-regular-svg-icons": "^6.4.2",
     "@fortawesome/free-solid-svg-icons": "^6.4.2",
     "@fortawesome/react-fontawesome": "^0.2.0",
     "@r2wc/core": "^1.1.0",
+    "@solana/spl-token": "^0.4.13",
+    "@solana/wallet-adapter-react": "^0.15.35",
+    "@solana/wallet-adapter-wallets": "^0.19.32",
+    "@solana/web3.js": "^1.98.0",
     "@tanstack/react-query": "^5.64.2",
     "@wagmi/connectors": "^5.7.5",
     "@wagmi/core": "^2.16.3",
     "async-retry": "^1.3.3",
     "bignumber.js": "4.0.4",
+    "crypto": "npm:crypto-browserify@latest",
     "date-fns": "^3.6.0",
     "ethers": "5.7.2",
+    "http": "npm:http-browserify@latest",
+    "https": "npm:https-browserify@latest",
     "notistack": "^3.0.1",
     "react-error-boundary": "^4.1.0",
     "react-virtuoso": "^4.7.12",
+    "stream": "npm:stream-browserify@latest",
+    "url": "npm:url-browserify@latest",
+    "zlib": "npm:zlib-browserify@latest",
     "viem": "~2.29.1",
     "wagmi": "^2.14.9"
   },

package/src/components/AllWalletsConfig/index.tsx

@@ -0,0 +1,40 @@
+import {
+  ConnectionProvider,
+  WalletProvider as SolanaWalletProvider,
+} from "@solana/wallet-adapter-react";
+import {
+  PhantomWalletAdapter,
+  SolflareWalletAdapter,
+} from "@solana/wallet-adapter-wallets";
+import { clusterApiUrl } from "@solana/web3.js";
+import { SolanaWeb3Network } from "@src/models";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactNode, useMemo } from "react";
+import { Config, WagmiProvider } from "wagmi";
+
+const queryClient = new QueryClient();
+
+export const AllWalletsConfig = ({
+  wagmiConfig,
+  children,
+}: {
+  wagmiConfig: Config;
+  children: ReactNode;
+}) => {
+  const solanaEndpoint = clusterApiUrl(SolanaWeb3Network.MAINNET);
+  const solanaWallets = useMemo(
+    () => [new PhantomWalletAdapter(), new SolflareWalletAdapter()],
+    [],
+  );
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <ConnectionProvider endpoint={solanaEndpoint}>
+          <SolanaWalletProvider wallets={solanaWallets} autoConnect>
+            {children}
+          </SolanaWalletProvider>
+        </ConnectionProvider>
+      </QueryClientProvider>
+    </WagmiProvider>
+  );
+};

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

@@ -1,14 +1,32 @@
 import { Spinner, TxDataCard } from "@src/components";
 import { useHistory } from "@src/context";
+import { useWallet } from "@src/context/WalletProvider";
 import { useMemo } from "react";
 import { Virtuoso } from "react-virtuoso";
 
 export const HistoryView = () => {
-  const { history, historyLoadedOnce } = useHistory();
+  const { history, historyLoadedOnce, solanaHistory, solanaHistoryLoadedOnce } =
+    useHistory();
+  const {
+    solana: { address: solanaAddress },
+  } = useWallet();
+
+  const unifiedHistory = useMemo(() => {
+    const combinedHistory = [
+      ...history,
+      ...(solanaAddress ? solanaHistory : []),
+    ];
+    return combinedHistory.sort((a, b) => {
+      return b.timestamp - a.timestamp;
+    });
+  }, [history, solanaHistory, solanaAddress]);
 
   const view = useMemo(() => {
-    if (!history || history.length === 0) {
-      return historyLoadedOnce ? (
+    if (!unifiedHistory || unifiedHistory.length === 0) {
+      const isHistoryLoaded =
+        historyLoadedOnce && (solanaAddress ? solanaHistoryLoadedOnce : true);
+
+      return isHistoryLoaded ? (
         <div className="text-center py-4 text-[#9e9e9e]">
           Your history is empty
         </div>
@@ -21,14 +39,19 @@ export const HistoryView = () => {
 
     return (
       <Virtuoso
-        data={history}
+        data={unifiedHistory}
         style={{ height: "532px" }}
         itemContent={(_, transaction) => {
           return <TxDataCard transaction={transaction} />;
         }}
       />
     );
-  }, [history, historyLoadedOnce]);
+  }, [
+    historyLoadedOnce,
+    solanaHistoryLoadedOnce,
+    unifiedHistory,
+    solanaAddress,
+  ]);
 
   return <div className="flex-1 overflow-hidden">{view}</div>;
 };

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

@@ -20,6 +20,8 @@ import { ArrowIcon } from "./ArrowIcon";
 import { Header } from "./Header";
 import { Steps } from "./Steps";
 import { SwapPanel } from "./SwapPanel";
+import { useWallet } from "@solana/wallet-adapter-react";
+import { VersionedTransaction } from "@solana/web3.js";
 
 type Props = {
   onCloseClick: () => void;
@@ -54,7 +56,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
       evm: { signer },
     },
   } = useNetworks();
-
+  const wallet = useWallet();
   const evmContractApi = useEvmContractApi();
 
   const trackTransaction = useCallback(
@@ -120,8 +122,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
             transactionData.messageId = messageId;
 
             const xSwapRouterOnDestination = new ethers.Contract(
-              // @ts-ignore
-              ADDRESSES[dstChain?.chainId]?.[contractKey],
+              ADDRESSES[dstChain!.chainId]![contractKey]!,
               contractKey === "XSwapRouter"
                 ? XSwapRouterAbi
                 : CustomXSwapRouterAbi,
@@ -186,64 +187,88 @@ export const TxOverview = ({ onCloseClick }: Props) => {
 
   const enqueueSwapTx = useCallback(async () => {
     if (srcToken && route) {
-      const enqueueSwap = () => {
+      if (route.ecosystem === Ecosystem.EVM) {
+        const enqueueSwap = () => {
+          enqueueTransaction({
+            executeTransaction: () => {
+              if (!route.transactions.swap || !signer) {
+                return;
+              }
+
+              return evmContractApi.executeCalldata(
+                signer,
+                route.transactions.swap,
+              );
+            },
+            txStatus: TxStatus.SIGNING_TX,
+            handlers: {
+              onSuccess: (data) => {
+                setTxStatus(TxStatus.COMPLETED);
+                refreshBalance();
+                trackTransaction(data);
+                if (
+                  srcChain?.chainId &&
+                  dstChain?.chainId &&
+                  srcChain?.chainId !== dstChain?.chainId
+                ) {
+                  renderTxStatus(
+                    srcChain?.chainId,
+                    data.transactionHash,
+                    dstToken?.address,
+                    dstValueWei,
+                  );
+                }
+              },
+            },
+          });
+        };
+
+        if (
+          srcToken.address !== constants.AddressZero &&
+          route.transactions.approve
+        ) {
+          setTxNeedsApproval(true);
+          enqueueTransaction({
+            executeTransaction: () => {
+              if (!route.transactions.approve || !signer) {
+                return;
+              }
+              return evmContractApi.executeCalldata(
+                signer,
+                route.transactions.approve,
+              );
+            },
+            txStatus: TxStatus.SIGNING_APPROVAL,
+            handlers: {
+              onSuccess: () => enqueueSwap(),
+            },
+          });
+        } else {
+          setTxNeedsApproval(false);
+          enqueueSwap();
+        }
+      } else if (route.ecosystem === Ecosystem.SOLANA) {
         enqueueTransaction({
           executeTransaction: () => {
-            if (!route.transactions.swap || !signer) {
+            if (!route.swapTransaction || !wallet) {
               return;
             }
 
-            return evmContractApi.executeCalldata(
-              signer,
-              route.transactions.swap,
+            const transaction = VersionedTransaction.deserialize(
+              Buffer.from(route.swapTransaction, "base64"),
             );
+
+            return wallet.signTransaction?.(transaction);
           },
           txStatus: TxStatus.SIGNING_TX,
           handlers: {
-            onSuccess: (data) => {
+            onSuccess: () => {
               setTxStatus(TxStatus.COMPLETED);
               refreshBalance();
-              trackTransaction(data);
-              if (
-                srcChain?.chainId &&
-                dstChain?.chainId &&
-                srcChain?.chainId !== dstChain?.chainId
-              ) {
-                renderTxStatus(
-                  srcChain?.chainId,
-                  data.transactionHash,
-                  dstToken?.address,
-                  dstValueWei,
-                );
-              }
             },
           },
+          network: Ecosystem.SOLANA,
         });
-      };
-
-      if (
-        srcToken.address !== constants.AddressZero &&
-        route.transactions.approve
-      ) {
-        setTxNeedsApproval(true);
-        enqueueTransaction({
-          executeTransaction: () => {
-            if (!route.transactions.approve || !signer) {
-              return;
-            }
-            return evmContractApi.executeCalldata(
-              signer,
-              route.transactions.approve,
-            );
-          },
-          txStatus: TxStatus.SIGNING_APPROVAL,
-          handlers: {
-            onSuccess: () => enqueueSwap(),
-          },
-        });
-      } else {
-        setTxNeedsApproval(false);
-        enqueueSwap();
       }
     }
   }, [
@@ -260,6 +285,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
     dstToken?.address,
     dstValueWei,
     setTxNeedsApproval,
+    wallet,
   ]);
 
   return (

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

@@ -1,10 +1,11 @@
 import { Modal } from "@src/components/Modal";
 import { useSwapContext, useTxUIWrapper } from "@src/context";
+import { useWallet } from "@src/context/WalletProvider";
 import { ADDRESSES } from "@src/contracts";
 import { specialApprovalTokens } from "@src/contracts/specialApprovalTokens";
 import useNetworks from "@src/hooks/networkManagement/useNetworks";
 import { useERC20Token } from "@src/hooks/useERC20Token";
-import { TxStatus } from "@src/models";
+import { Ecosystem, TxStatus } from "@src/models";
 import { safeBigNumberFrom } from "@src/utils";
 import { BigNumber } from "ethers";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -20,7 +21,6 @@ type Button = {
 export const SwapButton = () => {
   const { address, chainId } = useAccount();
   const { switchChainAsync } = useSwitchChain();
-  const [connectWalletModalOpen, setConnectWalletModalOpen] = useState(false);
   const { integrationConfig } = useSwapContext();
 
   const {
@@ -52,6 +52,14 @@ export const SwapButton = () => {
     networks: { evm },
   } = useNetworks();
 
+  const {
+    openEVMWalletModal,
+    setOpenEVMWalletModal,
+    openSolanaWalletModal,
+    setOpenSolanaWalletModal,
+    solana,
+  } = useWallet();
+
   const { allowance, approve } = useERC20Token({
     rpcChainId: srcChainId,
     currentChainId: evm.chainId,
@@ -111,7 +119,7 @@ export const SwapButton = () => {
       };
     }
 
-    if (!address) {
+    if (srcChain?.ecosystem !== Ecosystem.SOLANA && !address) {
       return {
         text:
           integrationConfig.defaultWalletPicker || hasOnConnectWalletCallback
@@ -119,7 +127,7 @@ export const SwapButton = () => {
             : "Connect Wallet First",
         fn: () => {
           if (integrationConfig.defaultWalletPicker) {
-            setConnectWalletModalOpen(true);
+            setOpenEVMWalletModal(true);
           } else if (hasOnConnectWalletCallback) {
             onConnectWallet();
           }
@@ -147,8 +155,19 @@ export const SwapButton = () => {
         disabled: true,
       };
     }
-
-    if (chainId?.toString() !== srcChainId) {
+    if (srcChain?.ecosystem === Ecosystem.SOLANA && !solana.address) {
+      return {
+        text: "Connect Solana Wallet",
+        fn: () => {
+          setOpenSolanaWalletModal(true);
+        },
+        disabled: false,
+      };
+    }
+    if (
+      srcChain?.ecosystem !== Ecosystem.SOLANA &&
+      chainId?.toString() !== srcChainId
+    ) {
       return {
         text: "Change Chain",
         fn: async () => await switchChainAsync({ chainId: Number(srcChainId) }),
@@ -218,11 +237,13 @@ export const SwapButton = () => {
   }, [
     isAsyncDataLoaded,
     error,
+    srcChain?.ecosystem,
     address,
     srcChainId,
     dstChainId,
     srcTokenAddress,
     dstTokenAddress,
+    solana.address,
     chainId,
     srcValueWei,
     srcTokenBalanceWei,
@@ -230,6 +251,10 @@ export const SwapButton = () => {
     currentTokenAllowance,
     bridgeUI,
     integrationConfig.defaultWalletPicker,
+    hasOnConnectWalletCallback,
+    setOpenEVMWalletModal,
+    onConnectWallet,
+    setOpenSolanaWalletModal,
     switchChainAsync,
     enqueueTransaction,
     approve,
@@ -241,12 +266,22 @@ export const SwapButton = () => {
 
   return (
     <>
-      {connectWalletModalOpen && (
-        <Modal onClose={() => setConnectWalletModalOpen(false)}>
-          <WalletPicker onClose={() => setConnectWalletModalOpen(false)} />
+      {openEVMWalletModal && (
+        <Modal onClose={() => setOpenEVMWalletModal(false)}>
+          <WalletPicker
+            ecosystem={Ecosystem.EVM}
+            onClose={() => setOpenEVMWalletModal(false)}
+          />
+        </Modal>
+      )}
+      {openSolanaWalletModal && (
+        <Modal onClose={() => setOpenSolanaWalletModal(false)}>
+          <WalletPicker
+            ecosystem={Ecosystem.SOLANA}
+            onClose={() => setOpenSolanaWalletModal(false)}
+          />
         </Modal>
       )}
-
       <button
         type="button"
         disabled={button.disabled}

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

@@ -13,13 +13,20 @@ import { useSwapContext } from "@src/context";
 import { ERC20Abi } from "@src/contracts";
 import { useEvmContractApi } from "@src/hooks";
 import { Chain, Ecosystem, ImportedTokenData, TokenOption } from "@src/models";
-import { isETHAddressValid, isServer, shortAddress } from "@src/utils";
+import {
+  isETHAddressValid,
+  isServer,
+  isSolanaAddressValid,
+  shortAddress,
+} from "@src/utils";
 import { BigNumber, ethers } from "ethers";
 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";
+import { Connection, PublicKey } from "@solana/web3.js";
+import { METADATA_PROGRAM_ID } from "@src/constants";
 
 type Props = {
   type: SwapPanelType;
@@ -67,7 +74,11 @@ export const TokenPicker = ({
   }, [isOpen]);
 
   const importCustomToken = useCallback(() => {
-    if (chain && customTokenData && isETHAddressValid(searchValue)) {
+    if (
+      chain &&
+      customTokenData &&
+      (isETHAddressValid(searchValue) || isSolanaAddressValid(searchValue))
+    ) {
       let customTokens = {};
       if (!isServer) {
         customTokens = JSON.parse(
@@ -145,14 +156,121 @@ export const TokenPicker = ({
     }
   }, [chain, searchValue, evmContractApi, supportedChains]);
 
+  const getCustomSolanaTokenData = useCallback(async () => {
+    const nonce = Date.now();
+    currentRouteRequestNonce.current = nonce;
+
+    const rpcUrl = supportedChains.find(
+      ({ ecosystem, chainId }) =>
+        ecosystem === Ecosystem.SOLANA && chainId === chain?.chainId,
+    )?.publicRpcUrls[0];
+
+    if (!rpcUrl || !searchValue || !isSolanaAddressValid(searchValue)) {
+      setCustomTokenData(null);
+      setLoadingCustomTokenData(false);
+      return;
+    }
+
+    setLoadingCustomTokenData(true);
+
+    try {
+      const connection = new Connection(rpcUrl, "confirmed");
+      const mintPublicKey = new PublicKey(searchValue);
+      const mintInfo = await connection.getParsedAccountInfo(mintPublicKey);
+
+      if (
+        !mintInfo?.value?.data ||
+        !("parsed" in mintInfo.value.data) ||
+        mintInfo.value.data.program !== "spl-token"
+      ) {
+        setCustomTokenData(null);
+        return;
+      }
+      const decimals = mintInfo.value.data.parsed.info.decimals;
+
+      if (nonce !== currentRouteRequestNonce.current) {
+        return;
+      }
+
+      const TOKEN_METADATA_PROGRAM_ID = new PublicKey(METADATA_PROGRAM_ID);
+
+      const [metadataPDA] = PublicKey.findProgramAddressSync(
+        [
+          Buffer.from("metadata"),
+          TOKEN_METADATA_PROGRAM_ID.toBuffer(),
+          mintPublicKey.toBuffer(),
+        ],
+        TOKEN_METADATA_PROGRAM_ID,
+      );
+
+      const metadataAccount = await connection.getAccountInfo(metadataPDA);
+
+      if (!metadataAccount) {
+        throw new Error("Metadata account not found");
+      }
+
+      const data = Buffer.from(metadataAccount.data);
+
+      // First byte is key (always 4 for Metadata), then comes actual data
+      let offset = 1;
+
+      // Read update authority - 32 bytes
+      offset += 32;
+
+      // Read mint - 32 bytes
+      offset += 32;
+
+      // Read name
+      const nameLen = Math.min(data.readUInt32LE(offset), 32); // Max name length is 32
+      offset += 4;
+      const name = data
+        .slice(offset, offset + nameLen)
+        .toString("utf8")
+        .replace(/\0/g, "");
+      offset += 32; // Name field is always 32 bytes, padded with nulls
+
+      // Read symbol
+      const symbolLen = Math.min(data.readUInt32LE(offset), 10); // Max symbol length is 10
+      offset += 4;
+      const symbol = data
+        .slice(offset, offset + symbolLen)
+        .toString("utf8")
+        .replace(/\0/g, "");
+
+      setCustomTokenData({
+        address: searchValue,
+        name:
+          name || `Token ${searchValue.slice(0, 4)}...${searchValue.slice(-4)}`,
+        symbol: symbol || searchValue.slice(0, 4),
+        decimals,
+      });
+    } catch (error) {
+      console.error("Error fetching Solana token data:", error);
+      setCustomTokenData(null);
+    } finally {
+      if (nonce === currentRouteRequestNonce.current) {
+        setLoadingCustomTokenData(false);
+      }
+    }
+  }, [chain, searchValue, supportedChains]);
+
   useEffect(() => {
     if (
       !bridgeUI &&
-      isETHAddressValid(searchValue) &&
       chain &&
       !findTokenDataByAddressAndChain(searchValue.toLowerCase(), chain.chainId)
     ) {
-      getCustomTokenData();
+      if (chain.ecosystem === Ecosystem.EVM && isETHAddressValid(searchValue)) {
+        getCustomTokenData();
+      } else if (
+        chain.ecosystem === Ecosystem.SOLANA &&
+        isSolanaAddressValid(searchValue)
+      ) {
+        getCustomSolanaTokenData();
+      } else {
+        setLoadingCustomTokenData(false);
+        setCustomTokenData(null);
+      }
     } else {
       setLoadingCustomTokenData(false);
       setCustomTokenData(null);
@@ -161,6 +279,7 @@ export const TokenPicker = ({
     bridgeUI,
     searchValue,
     getCustomTokenData,
+    getCustomSolanaTokenData,
     findTokenDataByAddressAndChain,
     chain,
   ]);

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

@@ -0,0 +1,71 @@
+import { useWallet } from "@src/context/WalletProvider";
+import { SwapPanelType } from "../..";
+import { Chain } from "@src/models";
+import { useCallback } from "react";
+import { shortAddress } from "@src/utils";
+
+type Props = {
+  chain: Chain | undefined;
+  type: SwapPanelType;
+  className?: string;
+};
+
+export const WalletPanel = ({ chain, type, className }: Props) => {
+  const { setOpenEVMWalletModal, setOpenSolanaWalletModal, evm, solana } =
+    useWallet();
+  const openWalletModal = useCallback(() => {
+    if (!chain) {
+      return;
+    }
+    if (chain.ecosystem === "evm") {
+      setOpenEVMWalletModal(true);
+      evm.connectWallet();
+    } else if (chain.ecosystem === "solana") {
+      setOpenSolanaWalletModal(true);
+      solana.connectWallet();
+    }
+  }, [chain, evm, solana, setOpenEVMWalletModal, setOpenSolanaWalletModal]);
+  const renderAddress = useCallback(
+    (chainEcosystem: string) => {
+      if (chainEcosystem === "evm") {
+        return shortAddress(evm.address || "");
+      } else if (chainEcosystem === "solana") {
+        return shortAddress(solana.address || "");
+      }
+    },
+    [evm, solana],
+  );
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => openWalletModal()}
+        className={`${className || ""}`}
+      >
+        <div className="flex justify-between items-center p-4 gap-8">
+          <div className="flex flex-col items-start">
+            {type === "source" ? (
+              <div className="flex items-center gap-2">
+                <p className="text-xs font-medium opacity-60">Sender:</p>
+                {chain && (
+                  <p className="text-sm font-medium">
+                    {renderAddress(chain.ecosystem)}
+                  </p>
+                )}
+              </div>
+            ) : (
+              <div className="flex items-center gap-2">
+                <p className="text-xs font-medium opacity-60">Receiver:</p>
+                {chain && (
+                  <p className="text-sm font-medium">
+                    {renderAddress(chain.ecosystem)}
+                  </p>
+                )}
+              </div>
+            )}
+          </div>
+        </div>
+      </button>
+    </>
+  );
+};

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

@@ -5,6 +5,7 @@ import { AmountPanel } from "./AmountPanel";
 import { ChainPanel } from "./ChainPanel";
 import { MaxPanel } from "./MaxPanel";
 import { TokenPanel } from "./TokenPanel";
+import { WalletPanel } from "./WalletPanel";
 
 type Props = {
   type: SwapPanelType;
@@ -24,6 +25,9 @@ export const SwapPanel = ({ type }: Props) => {
 
   return (
     <div className="flex flex-col x-border rounded-xl bg-t_bg_tertiary bg-opacity-5">
+      <div className="flex border-b border-solid border-t_text_primary border-opacity-10">
+        <WalletPanel chain={chain} type={type} className="w-full flex-grow" />
+      </div>
       <div className="flex border-b border-solid border-t_text_primary border-opacity-10">
         <TokenPanel
           chain={chain}