@xswap-link/sdk 0.10.14 → 0.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.10.14",
+  "version": "0.11.0",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -38,7 +38,7 @@
     "@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-react": "^0.15.38",
     "@solana/wallet-adapter-wallets": "^0.19.32",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-query": "^5.64.2",

package/polyfills/buffer.js

@@ -1,9 +1,5 @@
+import { Buffer } from "buffer";
+
 if (typeof globalThis.Buffer === "undefined") {
-  import("buffer")
-    .then(({ Buffer }) => {
-      globalThis.Buffer = Buffer;
-    })
-    .catch((err) => {
-      console.error("Failed to load Buffer polyfill:", err);
-    });
+  globalThis.Buffer = Buffer;
 }

package/src/assets/icons/DotRedIcon.tsx

@@ -0,0 +1,12 @@
+export const DotRedIcon = () => {
+  return (
+    <svg
+      width="6"
+      height="7"
+      viewBox="0 0 6 7"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="3" cy="3.91418" r="3" fill="#F44336" />
+    </svg>
+  );
+};

package/src/assets/icons/index.ts

@@ -15,6 +15,7 @@ export * from "./CloseIcon";
 export * from "./CoinsIcon";
 export * from "./CopyIcon";
 export * from "./DotGreenIcon";
+export * from "./DotRedIcon";
 export * from "./DownArrorIcon";
 export * from "./ErrorIcon";
 export * from "./ErrorModalStatusIcon";

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

@@ -2,6 +2,7 @@ import { TokenLogo } from "@src/components";
 import { useSwapContext } from "@src/context";
 import { SwapPanelType } from "../../../index";
 import { useMemo } from "react";
+import { Ecosystem } from "@src/models";
 
 type Props = {
   type: SwapPanelType;
@@ -16,6 +17,7 @@ export const SwapPanel = ({ type }: Props) => {
     srcValueUsd,
     dstValue,
     dstValueUsd,
+    bridgeUI,
   } = useSwapContext();
 
   const token = useMemo(
@@ -28,15 +30,20 @@ export const SwapPanel = ({ type }: Props) => {
     [dstChain, srcChain, type],
   );
 
-  const value = useMemo(
-    () => (type === "source" ? srcValue : dstValue),
-    [dstValue, srcValue, type],
-  );
+  const value = useMemo(() => {
+    if (
+      type === "destination" &&
+      bridgeUI &&
+      srcChain?.ecosystem === Ecosystem.SOLANA
+    ) {
+      return srcValue;
+    }
+    return type === "source" ? srcValue : dstValue;
+  }, [type, bridgeUI, srcChain?.ecosystem, srcValue, dstValue]);
 
-  const valueUsd = useMemo(
-    () => (type === "source" ? srcValueUsd : dstValueUsd),
-    [dstValueUsd, srcValueUsd, type],
-  );
+  const valueUsd = useMemo(() => {
+    return type === "source" ? srcValueUsd : dstValueUsd;
+  }, [dstValueUsd, srcValueUsd, type]);
 
   return (
     <div className="flex justify-between bg-gradient-to-r from-t_main_accent_light/20 to-t_main_accent_dark/20 p-5 rounded-xl">

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

@@ -18,7 +18,11 @@ import {
 } from "@src/contracts";
 import { useEvmContractApi } from "@src/hooks";
 import useNetworks from "@src/hooks/networkManagement/useNetworks";
-import { Ecosystem, Transaction, TxStatus } from "@src/models";
+import {
+  Ecosystem,
+  TxStatus,
+  Transaction as EVMTransaction,
+} from "@src/models";
 import { renderTxStatus } from "@src/services";
 import { ContractReceipt, constants, ethers } from "ethers";
 import { useCallback } from "react";
@@ -28,20 +32,31 @@ import { Header } from "./Header";
 import { Steps } from "./Steps";
 import { SwapPanel } from "./SwapPanel";
 import { useWallet } from "@solana/wallet-adapter-react";
+
 import {
   Connection,
-  Keypair,
   PublicKey,
+  Transaction,
   VersionedTransaction,
 } from "@solana/web3.js";
 import {
+  AddressConversion,
   CCIPClient,
   CCIPContext,
   CCIPCoreConfig,
   CCIPProvider,
   CCIPSendRequest,
 } from "@src/services/svm";
-import BigNumber from "bignumber.js";
+import { BN } from "@coral-xyz/anchor";
+import {
+  Account,
+  createApproveInstruction,
+  getAccount,
+  getAssociatedTokenAddressSync,
+  TOKEN_2022_PROGRAM_ID,
+  TOKEN_PROGRAM_ID,
+} from "@solana/spl-token";
+import { findFeeBillingSignerPDA } from "@src/services/svm/utils/pdas";
 
 type Props = {
   onCloseClick: () => void;
@@ -77,7 +92,8 @@ export const TxOverview = ({ onCloseClick }: Props) => {
       evm: { signer, address: evmAddress },
     },
   } = useNetworks();
-  const wallet = useWallet();
+  const { publicKey, signTransaction } = useWallet();
+
   const evmContractApi = useEvmContractApi();
 
   const trackTransaction = useCallback(
@@ -86,7 +102,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
         return;
       }
 
-      const transactionData: Transaction = {
+      const transactionData: EVMTransaction = {
         hash: txReceipt.transactionHash,
         timestamp: Date.now() / 1000,
         sourceChainId: srcChain.chainId,
@@ -278,18 +294,57 @@ export const TxOverview = ({ onCloseClick }: Props) => {
                 "confirmed",
               );
 
+              if (!publicKey) {
+                throw new Error("No public key found");
+              }
+
+              // Delegate token authority first (APPROVE)
+              await checkAndDelegateTokenAuthority(
+                connection,
+                publicKey,
+                new PublicKey(srcToken.address),
+                CCIP_ROUTER_PROGRAM_ID,
+                signTransaction as (
+                  tx: VersionedTransaction,
+                ) => Promise<VersionedTransaction>,
+              );
+
               const provider: CCIPProvider = {
                 connection,
-                wallet: Keypair.generate(),
+                wallet: null,
                 getAddress() {
-                  return wallet.publicKey || PublicKey.default;
+                  return publicKey || PublicKey.default;
                 },
                 async signTransaction(tx: VersionedTransaction) {
-                  const signedTransaction = await wallet.signTransaction?.(tx);
-                  if (!signedTransaction) {
-                    throw new Error("Failed to sign the transaction.");
+                  if (!signTransaction) {
+                    throw new Error("No sign transaction function found");
+                  }
+
+                  if (!(tx instanceof VersionedTransaction)) {
+                    throw new Error(
+                      "Transaction must be a VersionedTransaction",
+                    );
+                  }
+
+                  try {
+                    const signedTx = await signTransaction(tx);
+
+                    if (!signedTx.signatures[0]?.some((byte) => byte !== 0)) {
+                      throw new Error("Transaction was not properly signed");
+                    }
+
+                    return signedTx;
+                  } catch (error) {
+                    console.error("Transaction signing/sending failed:", error);
+                    if (error instanceof Error && "getLogs" in error) {
+                      console.error(
+                        "Transaction logs:",
+                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                        await (error as any).getLogs(),
+                      );
+                    }
+                    throw error;
                   }
-                  return signedTransaction;
                 },
               };
 
@@ -312,37 +367,45 @@ export const TxOverview = ({ onCloseClick }: Props) => {
               const client = new CCIPClient(context);
 
               const extraArgs = client.createExtraArgs({
-                gasLimit: 0,
                 allowOutOfOrderExecution: true,
               });
 
-              if (!dstToken) return undefined;
+              if (
+                !evmAddress ||
+                !evmAddress.startsWith("0x") ||
+                evmAddress.length !== 42
+              ) {
+                throw new Error(
+                  "Invalid EVM address. Must be a valid 20-byte address starting with 0x",
+                );
+              }
 
               const sendRequest: CCIPSendRequest = {
-                destChainSelector: new BigNumber(dstChain?.ccipChainId ?? ""),
-                receiver: Buffer.from(
-                  evmAddress && evmAddress.startsWith("0x")
-                    ? evmAddress.slice(2)
-                    : evmAddress || "",
-                  "hex",
-                ),
-                data: Buffer.alloc(0),
+                destChainSelector: new BN(dstChain?.ccipChainId || "0"),
+                receiver: AddressConversion.evmAddressToSolanaBytes(evmAddress),
+                data: new Uint8Array(0),
                 tokenAmounts: [
                   {
                     token: new PublicKey(srcToken.address),
-                    amount: new BigNumber(srcValueWei.toString()), // TODO: Check if this is correct, probably not
+                    amount: new BN(srcValueWei.toString()),
                   },
                 ],
                 feeToken: PublicKey.default,
                 extraArgs: extraArgs,
               };
 
-              const result = await client.sendWithMessageId(sendRequest);
-              console.log(`Message sent! Transaction: ${result.txSignature}`);
-              console.log(`Message ID: ${result.messageId}`);
+              try {
+                const result = await client.sendWithMessageId(sendRequest);
+
+                if (result.txSignature) {
+                  return result.txSignature;
+                }
+              } catch (sendError) {
+                console.error("CCIP transaction failed:", sendError);
+              }
             }
 
-            if (!route || !route.swapTransaction || !wallet) {
+            if (!route || !route.swapTransaction || !publicKey) {
               return;
             }
 
@@ -350,7 +413,7 @@ export const TxOverview = ({ onCloseClick }: Props) => {
               Buffer.from(route.swapTransaction, "base64"),
             );
 
-            return wallet.signTransaction?.(transaction);
+            return signTransaction?.(transaction);
           },
           txStatus: TxStatus.SIGNING_TX,
           handlers: {
@@ -376,11 +439,12 @@ export const TxOverview = ({ onCloseClick }: Props) => {
     trackTransaction,
     dstChain?.chainId,
     dstChain?.ccipChainId,
-    dstToken,
+    dstToken?.address,
     dstValueWei,
     setTxNeedsApproval,
     bridgeUI,
-    wallet,
+    signTransaction,
+    publicKey,
     evmAddress,
     srcValueWei,
   ]);
@@ -417,3 +481,106 @@ export const TxOverview = ({ onCloseClick }: Props) => {
     </div>
   );
 };
+
+// Add this function to check token delegation and delegate if necessary
+async function checkAndDelegateTokenAuthority(
+  connection: Connection,
+  publicKey: PublicKey,
+  tokenMint: PublicKey,
+  routerProgramId: PublicKey,
+  signTransaction: (tx: VersionedTransaction) => Promise<VersionedTransaction>,
+) {
+  try {
+    const [feeBillingSignerPDA] = findFeeBillingSignerPDA(routerProgramId);
+
+    const tokenAccount = getAssociatedTokenAddressSync(
+      tokenMint,
+      publicKey,
+      false,
+      TOKEN_PROGRAM_ID,
+    );
+
+    const token2022Account = getAssociatedTokenAddressSync(
+      tokenMint,
+      publicKey,
+      false,
+      TOKEN_2022_PROGRAM_ID,
+    );
+    let is2022Token = false;
+    try {
+      let tokenAccountInfo: Account | undefined;
+      try {
+        tokenAccountInfo = await getAccount(
+          connection,
+          tokenAccount,
+          connection.commitment,
+          TOKEN_PROGRAM_ID,
+        );
+      } catch (err) {
+        console.error("Failed to fetch Token account:", err);
+      }
+      if (!tokenAccountInfo) {
+        try {
+          tokenAccountInfo = await getAccount(
+            connection,
+            token2022Account,
+            connection.commitment,
+            TOKEN_2022_PROGRAM_ID,
+          );
+          is2022Token = true;
+        } catch (err) {
+          console.error("Failed to fetch Token-2022 account:", err);
+        }
+      }
+      if (!tokenAccountInfo) {
+        throw new Error("Failed to fetch tokenAccountInfo");
+      }
+      if (
+        tokenAccountInfo.delegate !== null &&
+        tokenAccountInfo.delegate.equals(feeBillingSignerPDA) &&
+        tokenAccountInfo.delegatedAmount > BigInt(0)
+      ) {
+        // Token already properly delegated, skipping approval
+        return;
+      }
+    } catch (error) {
+      console.error(
+        "Error checking token account, proceeding with delegation:",
+        error,
+      );
+    }
+
+    const MAX_UINT64 = ((BigInt(1) << BigInt(64)) - BigInt(1)).toString();
+    const approveInstruction = createApproveInstruction(
+      is2022Token ? token2022Account : tokenAccount,
+      feeBillingSignerPDA,
+      publicKey,
+      BigInt(MAX_UINT64),
+      [],
+      is2022Token ? TOKEN_2022_PROGRAM_ID : TOKEN_PROGRAM_ID,
+    );
+
+    const { blockhash, lastValidBlockHeight } =
+      await connection.getLatestBlockhash();
+    const transaction = new Transaction({
+      feePayer: publicKey,
+      blockhash,
+      lastValidBlockHeight,
+    });
+
+    transaction.add(approveInstruction);
+
+    const versionedTx = new VersionedTransaction(transaction.compileMessage());
+    const signedTx = await signTransaction(versionedTx);
+    const signature = await connection.sendRawTransaction(signedTx.serialize());
+
+    await connection.confirmTransaction({
+      signature,
+      blockhash,
+      lastValidBlockHeight,
+    });
+  } catch (error) {
+    console.error("Failed to check or delegate token authority:", error);
+    throw error;
+  }
+}

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

@@ -7,6 +7,8 @@ import {
 } from "@src/assets/icons";
 import { useSwapContext, useTxUIWrapper } from "@src/context";
 import { TokenItem } from "./TokenItem";
+import { useMemo } from "react";
+import { Ecosystem } from "@src/models";
 
 type Props = {
   onCloseClick: () => void;
@@ -22,8 +24,16 @@ export const TxResult = ({ onCloseClick }: Props) => {
     dstToken,
     srcValue,
     dstValue,
+    bridgeUI,
   } = useSwapContext();
 
+  const value = useMemo(() => {
+    if (bridgeUI && srcChain?.ecosystem === Ecosystem.SOLANA) {
+      return srcValue;
+    }
+    return dstValue;
+  }, [bridgeUI, srcChain?.ecosystem, srcValue, dstValue]);
+
   return (
     <div className="flex flex-col gap-5 text-t_text_primary justify-center items-center">
       {txError ? (
@@ -63,7 +73,7 @@ export const TxResult = ({ onCloseClick }: Props) => {
               <div className="-rotate-90 flex justify-center w-8 fill-t_text_primary opacity-50">
                 <ArrowDownLongIcon />
               </div>
-              <TokenItem chain={dstChain} token={dstToken} value={dstValue} />
+              <TokenItem chain={dstChain} token={dstToken} value={value} />
             </div>
           )}
           <a

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

@@ -1,9 +1,12 @@
 import { useSwapContext } from "@src/context";
 import { weiToHumanReadable } from "@src/utils";
-import { FC } from "react";
 import { Fee } from "../Fee";
 
-export const Fees: FC = () => {
+export const Fees = ({
+  solanaBridgeFee,
+}: {
+  solanaBridgeFee: string | null;
+}) => {
   const { route, slippage, feeToken, dstToken, expressDelivery } =
     useSwapContext();
 
@@ -11,11 +14,13 @@ export const Fees: FC = () => {
     {
       name: "CCIP Fee: ",
       value: `${
-        weiToHumanReadable({
-          amount: route?.xSwapFees.ccipFee || "0",
-          decimals: feeToken?.decimals || 18,
-          precisionFractionalPlaces: 5,
-        }) || 0
+        solanaBridgeFee
+          ? solanaBridgeFee
+          : weiToHumanReadable({
+              amount: route?.xSwapFees.ccipFee || "0",
+              decimals: feeToken?.decimals || 18,
+              precisionFractionalPlaces: 5,
+            }) || 0
       } ${feeToken?.symbol || ""}`,
     },
     {

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

@@ -2,15 +2,156 @@ import { ArrowDownIcon, TokensIcon } from "@src/assets/icons";
 import { Skeleton } from "@src/components";
 import { useSwapContext } from "@src/context";
 import { safeBigNumberFrom, weiToHumanReadable } from "@src/utils";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { DeliveryInfo } from "./DeliveryInfo";
 import { Fees } from "./Fees";
+import { Ecosystem } from "@src/models";
+import { Connection, PublicKey } from "@solana/web3.js";
+import {
+  CCIP_ROUTER_PROGRAM_ID,
+  FEE_QUOTER_PROGRAM_ID,
+  LINK_TOKEN_MINT,
+  PROGRAM_ID,
+  RMN_REMOTE_PROGRAM_ID,
+  SOLANA_MAINNET_RPC_URL,
+  SYSTEM_PROGRAM_ID,
+} from "@src/constants";
+import {
+  AddressConversion,
+  CCIPClient,
+  CCIPContext,
+  CCIPCoreConfig,
+  CCIPProvider,
+} from "@src/services/svm";
+import { BN } from "@coral-xyz/anchor";
+import { useWallet } from "@solana/wallet-adapter-react";
+import useNetworks from "@src/hooks/networkManagement/useNetworks";
 
 export const FeesPanel = () => {
   const [expanded, setExpanded] = useState(false);
+  const [isFetchingSolanaFee, setIsFetchingSolanaFee] = useState(false);
+  const [solanaBridgeFee, setSolanaBridgeFee] = useState<string | null>(null);
 
-  const { route, feeToken, isFetchingRoute, srcChain, dstChain } =
-    useSwapContext();
+  const {
+    route,
+    feeToken,
+    isFetchingRoute,
+    srcChain,
+    dstChain,
+    srcToken,
+    srcValueWei,
+    bridgeUI,
+  } = useSwapContext();
+
+  const { publicKey } = useWallet();
+  const {
+    networks: {
+      evm: { address: evmAddress },
+    },
+  } = useNetworks();
+
+  useEffect(() => {
+    const fetchSolanaBridgeFee = async () => {
+      if (
+        bridgeUI &&
+        srcChain?.ecosystem === Ecosystem.SOLANA &&
+        dstChain?.ccipChainId &&
+        srcToken &&
+        srcValueWei &&
+        publicKey &&
+        evmAddress
+      ) {
+        try {
+          setIsFetchingSolanaFee(true);
+
+          const connection = new Connection(
+            SOLANA_MAINNET_RPC_URL,
+            "confirmed",
+          );
+
+          const provider: CCIPProvider = {
+            connection,
+            wallet: null,
+            getAddress() {
+              return publicKey;
+            },
+            async signTransaction(tx) {
+              return tx;
+            },
+          };
+
+          const config: CCIPCoreConfig = {
+            ccipRouterProgramId: CCIP_ROUTER_PROGRAM_ID,
+            feeQuoterProgramId: FEE_QUOTER_PROGRAM_ID,
+            tokenMint: new PublicKey(srcToken.address),
+            rmnRemoteProgramId: RMN_REMOTE_PROGRAM_ID,
+            linkTokenMint: LINK_TOKEN_MINT,
+            nativeSol: PublicKey.default,
+            systemProgramId: SYSTEM_PROGRAM_ID,
+            programId: PROGRAM_ID,
+          };
+
+          const context: CCIPContext = {
+            provider,
+            config,
+          };
+
+          const client = new CCIPClient(context);
+
+          const extraArgs = client.createExtraArgs({
+            allowOutOfOrderExecution: true,
+          });
+
+          const receiver =
+            AddressConversion.evmAddressToSolanaBytes(evmAddress);
+
+          const feeRequest = {
+            destChainSelector: new BN(dstChain.ccipChainId),
+            message: {
+              receiver: receiver,
+              data: new Uint8Array(0),
+              tokenAmounts: [
+                {
+                  token: new PublicKey(srcToken.address),
+                  amount: new BN(srcValueWei.toString()),
+                },
+              ],
+              feeToken: PublicKey.default,
+              extraArgs: extraArgs,
+            },
+          };
+
+          const feeResult = await client.getFee(feeRequest);
+          const feeInLamports = feeResult.amount.toString();
+          setSolanaBridgeFee(feeInLamports);
+
+          const feeInSol = weiToHumanReadable({
+            amount: feeInLamports,
+            decimals: 9,
+            precisionFractionalPlaces: 5,
+          });
+          setSolanaBridgeFee(feeInSol);
+        } catch (error) {
+          setSolanaBridgeFee(null);
+        } finally {
+          setIsFetchingSolanaFee(false);
+        }
+      } else {
+        setSolanaBridgeFee(null);
+      }
+    };
+
+    fetchSolanaBridgeFee();
+  }, [
+    bridgeUI,
+    srcChain?.ecosystem,
+    dstChain?.ccipChainId,
+    srcToken?.address,
+    srcValueWei,
+    publicKey,
+    evmAddress,
+    srcToken,
+  ]);
 
   const totalFee = useMemo(() => {
     if (!route) {
@@ -28,6 +169,12 @@ export const FeesPanel = () => {
     });
   }, [feeToken?.decimals, route]);
 
+  const isLoading =
+    isFetchingRoute ||
+    (srcChain?.ecosystem === Ecosystem.SOLANA &&
+      bridgeUI &&
+      isFetchingSolanaFee);
+
   return (
     <div className="flex flex-col x-border rounded-xl py-2 px-4 bg-t_bg_tertiary bg-opacity-5">
       <button
@@ -39,16 +186,18 @@ export const FeesPanel = () => {
           <div className="flex gap-2 items-center text-xs font-medium sm:text-sm fill-t_text_primary">
             <TokensIcon />
             <p className="opacity-60">Fee: </p>
-            {isFetchingRoute ? (
+            {isLoading ? (
               <Skeleton className="w-[100px] h-full" />
             ) : (
-              <p>{`${totalFee} ${feeToken?.symbol || ""}`}</p>
+              <p>{`${solanaBridgeFee ? solanaBridgeFee : totalFee} ${
+                feeToken?.symbol || ""
+              }`}</p>
             )}
           </div>
           <div className="flex gap-2 items-center fill-t_text_primary">
-            {route &&
-              !isFetchingRoute &&
-              srcChain?.chainId !== dstChain?.chainId && <DeliveryInfo />}
+            {route && !isLoading && srcChain?.chainId !== dstChain?.chainId && (
+              <DeliveryInfo />
+            )}
             {expanded ? (
               <div className="w-4 h-2 rotate-180">
                 <ArrowDownIcon />
@@ -60,7 +209,7 @@ export const FeesPanel = () => {
             )}
           </div>
         </div>
-        {expanded && <Fees />}
+        {expanded && <Fees solanaBridgeFee={solanaBridgeFee} />}
       </button>
     </div>
   );