@xswap-link/sdk 0.2.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "JavaScript SDK for XSwap platform",
   "homepage": "https://github.com/xswap-link/xswap-sdk",
   "repository": {
@@ -23,6 +23,7 @@
     "@tanstack/react-query": "^5.35.5",
     "@types/react": "18.2.0",
     "@types/react-dom": "18.2.0",
+    "async-retry": "^1.3.3",
     "bignumber.js": "4.0.4",
     "date-fns": "^3.6.0",
     "ethers": "^5.7.2",
@@ -33,6 +34,7 @@
   },
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
+    "@types/async-retry": "^1.4.8",
     "@types/jest": "^29.5.12",
     "@types/node": "^20.11.17",
     "@typescript-eslint/eslint-plugin": "^7.1.0",
@@ -56,8 +58,8 @@
   },
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts",
-    "watch": "nodemon",
-    "release": "pnpm run build && changeset publish",
+    "watch": "pnpm build && nodemon",
+    "release": "pnpm build && changeset publish",
     "lint": "tsc && eslint . --ext .ts",
     "test": "jest"
   }

package/src/components/TxConfigForm/PoweredBy.tsx

@@ -0,0 +1,12 @@
+import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "@src/components/icons";
+
+export const PoweredBy = () => {
+  return (
+    <div className="flex justify-center items-center gap-2 my-3">
+      <span className="text-x_grey">Powered by</span>
+      <XSwapBadgeIcon />
+      <span>✕</span>
+      <ChainlinkCCIPIcon />
+    </div>
+  );
+};

package/src/components/TxConfigForm/index.tsx

@@ -1,15 +1,12 @@
 import "@src/global.css";
 import { MouseEvent, useMemo } from "react";
-import { createRoot, Root } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
-import { getWagmiConfig } from "@src/config";
+import { getWagmiConfig, xswapRoot } from "@src/config";
 import { Chain, ContractCall, Route } from "@src/models";
 import { CloseIcon } from "@src/components/icons/CloseIcon";
+import { PoweredBy } from "@src/components/TxConfigForm/PoweredBy";
 import { Form } from "./Form";
-import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "../icons";
-import { version } from "../../../package.json";
-import xswapConfig from "../../../xswap.config";
 
 export type TxConfigFormProps = {
   dstChainId: string;
@@ -67,13 +64,7 @@ const TxConfigForm = ({
             >
               <CloseIcon />
             </div>
-
-            <div className="swappage__poweredby">
-              <span>Powered by</span>
-              <XSwapBadgeIcon />
-              <span>✕</span>
-              <ChainlinkCCIPIcon />
-            </div>
+            <PoweredBy />
           </div>
         </div>
       </QueryClientProvider>
@@ -111,18 +102,3 @@ export const openTxConfigForm = async ({
     throw new Error(`XSwap component error, ${err}`);
   }
 };
-
-// skip on server-side integrations
-let xswapRoot: Root;
-if (typeof document !== "undefined") {
-  const xswapStyleElement = document.createElement("link");
-  xswapStyleElement.rel = "stylesheet";
-  xswapStyleElement.type = "text/css";
-  xswapStyleElement.href = `${xswapConfig.apiUrl}/sdk/css/${version}`;
-  document.head.appendChild(xswapStyleElement);
-
-  const xswapModalElement = document.createElement("div");
-  xswapModalElement.setAttribute("id", "xswap-modal");
-  document.body.appendChild(xswapModalElement);
-  xswapRoot = createRoot(xswapModalElement);
-}

package/src/components/{TxHistoryButton → TxStatusButton}/index.tsx

@@ -1,19 +1,20 @@
-import { FC, useState } from "react";
-import { createRoot } from "react-dom/client";
+import { FC, useMemo, useState } from "react";
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
   CheckIcon,
   CircularProgressIcon,
+  ArrowUpRightIcon,
+  XSwapLogo,
 } from "../icons";
-import { ArrowUpRightIcon, XSwapLogo } from "../icons";
 import { MonitoredTransaction } from "@src/models";
+import { txStatusRoot } from "@src/config";
 
 interface Props {
   transaction: MonitoredTransaction;
 }
 
-export const TxHistoryButton: FC<Props> = ({ transaction }) => {
+export const TxStatusButton: FC<Props> = ({ transaction }) => {
   const {
     fromChain,
     fromChainImage,
@@ -27,15 +28,28 @@ export const TxHistoryButton: FC<Props> = ({ transaction }) => {
     explorer,
   } = transaction;
   const [isWide, setIsWide] = useState(false);
+
+  const background = useMemo(
+    () =>
+      isDone
+        ? "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(76,175,80,0.2)] to-[rgba(46,125,50,0.2)]"
+        : "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(54,129,198,0.2)] to-[rgba(43,74,157,0.2)]",
+    [isDone],
+  );
+
+  const border = useMemo(
+    () =>
+      isDone
+        ? "border border-solid border-x_green_dark"
+        : "border border-solid border-x_blue_dark",
+    [isDone],
+  );
+
   return (
     <div className="flex gap-2" onClick={() => setIsWide((x: boolean) => !x)}>
       {isWide && (
         <div
-          className={`flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl bg-gradient-to-r ${
-            isDone
-              ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark"
-              : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"
-          }`}
+          className={`flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl ${background} ${border}`}
         >
           <div className="flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full">
             <div className="flex items-center gap-2">
@@ -77,12 +91,7 @@ export const TxHistoryButton: FC<Props> = ({ transaction }) => {
         </div>
       )}
       <div
-        className={`text-white rounded-xl cursor-pointer bg-gradient-to-r 
-           ${
-             isDone
-               ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark"
-               : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"
-           }`}
+        className={`text-white rounded-xl cursor-pointer ${background} ${border}`}
       >
         <div className="flex gap-2 items-center h-14 w-20 justify-center">
           <ArrowLeftIcon />
@@ -133,18 +142,9 @@ export const updateTransactionDoneInRenderedTransactions = (txHash: string) => {
   }
 };
 
-const historyElement = document.createElement("div");
-historyElement.setAttribute("id", "xswap-history");
-historyElement.setAttribute(
-  "class",
-  "absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50",
-);
-document.body.appendChild(historyElement);
-const txHistoryButtonRoot = createRoot(historyElement);
-
-export const renderTxHistoryButtons = () => {
+export const renderTxStatusButtons = () => {
   const buttons = renderedTransactions.map((item) => (
-    <TxHistoryButton key={item.txHash} transaction={item} />
+    <TxStatusButton key={item.txHash} transaction={item} />
   ));
-  txHistoryButtonRoot.render(buttons);
+  txStatusRoot.render(buttons);
 };

package/src/components/global.css

@@ -28,3 +28,7 @@
     border: 1px solid rgba(255, 255, 255, 0.1);
   }
 }
+
+.xswap-tx-status {
+  @apply absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50;
+}

package/src/components/index.ts

@@ -1,4 +1,4 @@
 export * from "./Alert";
 export * from "./TxConfigForm";
-export * from "./TxHistoryButton";
+export * from "./TxStatusButton";
 export * from "./Skeleton";

package/src/config/index.ts

@@ -1 +1,2 @@
 export * from "./wagmiConfig";
+export * from "./init";

package/src/config/init.ts

@@ -0,0 +1,31 @@
+import { createRoot, Root } from "react-dom/client";
+import xswapConfig from "../../xswap.config";
+import { version } from "../../package.json";
+
+export let xswapRoot: Root;
+export let txStatusRoot: Root;
+
+export const initDocument = () => {
+  if (typeof document === "undefined") {
+    throw new Error("Can't render XPay components from server side.");
+  }
+
+  fetch(`${xswapConfig.apiUrl}/sdk/css?data={"version": "${version}"}`).then(
+    async (css) => {
+      const style = document.createElement("style");
+      style.textContent = await css.text();
+      document.body.appendChild(style);
+    },
+  );
+
+  const xswapElement = document.createElement("div");
+  xswapElement.setAttribute("id", "xswap-modal");
+  document.body.appendChild(xswapElement);
+  xswapRoot = createRoot(xswapElement);
+
+  const txStatusElement = document.createElement("div");
+  txStatusElement.setAttribute("id", "xswap-tx-status");
+  txStatusElement.setAttribute("class", "xswap-tx-status");
+  document.body.appendChild(txStatusElement);
+  txStatusRoot = createRoot(txStatusElement);
+};

package/src/constants/index.ts

@@ -10,3 +10,17 @@ export const ROUTE_TIMEOUT_MS = 5000;
 export const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
 export const DEFAULT_SOURCE_CHAIN_ID = "1";
 export const CCIP_EXPLORER = "https://ccip.chain.link/";
+export const TX_RECEIPT_STATUS_LIFETIME = 10000;
+
+export const MSG_SENT_EVENT_SIG =
+  "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";
+
+export const MSG_SENT_EVENT_ABI = [
+  "event MessageSent(bytes32 indexed messageId, uint64 indexed destinationChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount, uint256 valueForInstantCcipRecieve, address transferedToken, uint256 transferedTokenAmount)",
+];
+export const MSG_RECEIVED_EVENT_SIG =
+  "MessageReceived(bytes32,uint64,address,bytes,address,uint256)";
+
+export const MSG_RECEIVED_EVENT_ABI = [
+  "event MessageReceived(bytes32 indexed messageId, uint64 indexed sourceChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount)",
+];

package/src/index.ts

@@ -1,6 +1,6 @@
-export * from "./components";
-export * from "./constants";
-export * from "./contracts";
-export * from "./models";
-export * from "./services";
-export * from "./utils";
+import { initDocument } from "@src/config/init";
+
+initDocument();
+
+export * from "@src/models";
+export { getSwapTx, monitorTransactionStatus } from "@src/services";

package/src/services/integrations/index.ts

@@ -1,2 +1,3 @@
 export * from "./customCalls";
+export * from "./monitoring";
 export * from "./transactions";

package/src/services/integrations/monitoring.ts

@@ -0,0 +1,148 @@
+import { Chain, MonitoredTransaction, Web3Environment } from "@src/models";
+import { getChains } from "@src/services";
+import { ethers } from "ethers";
+import { weiToHumanReadable } from "@src/utils";
+import {
+  CCIP_EXPLORER,
+  MSG_RECEIVED_EVENT_ABI,
+  MSG_RECEIVED_EVENT_SIG,
+  MSG_SENT_EVENT_ABI,
+  MSG_SENT_EVENT_SIG,
+  TX_RECEIPT_STATUS_LIFETIME,
+} from "@src/constants";
+import {
+  addTransactionToRenderedTransactions,
+  removeTransactionFromRenderedTransactions,
+  renderTxStatusButtons,
+  updateTransactionDoneInRenderedTransactions,
+} from "@src/components";
+import { ADDRESSES } from "@src/contracts";
+import retry from "async-retry";
+
+export const monitorTransactionStatus = async (
+  txChainId: string,
+  txHash: string,
+): Promise<void> => {
+  const txReceipt = await getTxReceipt(txChainId, txHash);
+
+  const supportedChains: Chain[] = (await getChains()).filter(
+    ({ web3Environment, swapSupported }) =>
+      web3Environment === Web3Environment.MAINNET && swapSupported,
+  );
+
+  const messageSentEvent = txReceipt.logs?.find((log: { topics: string[] }) => {
+    return log.topics[0] === ethers.utils.id(MSG_SENT_EVENT_SIG);
+  });
+
+  if (!messageSentEvent) {
+    throw new Error(
+      `No transaction event found for chain ${txChainId} tx ${txHash}`,
+    );
+  }
+
+  const messageId = messageSentEvent?.topics[1] as string;
+  const iface = new ethers.utils.Interface(MSG_SENT_EVENT_ABI);
+  const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
+
+  if (!decodedMessageSentEvent) {
+    throw new Error(
+      `No transaction event arguments found for chain ${txChainId} tx ${txHash}`,
+    );
+  }
+  const srcChain = supportedChains.find(
+    (chain) => chain.chainId === txChainId.toString(),
+  );
+
+  const srcToken = srcChain?.tokens.find(
+    (token) => token.address === decodedMessageSentEvent.args?.token.toString(),
+  );
+
+  const dstChain = supportedChains.find(
+    (chain) =>
+      chain.ccipChainId ===
+      decodedMessageSentEvent.args?.destinationChainSelector?.toString(),
+  );
+
+  const dstChainId = dstChain?.chainId;
+
+  if (!dstChainId) {
+    throw new Error(`Unknown destination chain!`);
+  }
+
+  const transaction: MonitoredTransaction = {
+    txHash: txHash,
+    fromChain: srcChain?.displayName,
+    fromChainImage: srcChain?.image,
+    toChain: dstChain.displayName,
+    toChainImage: dstChain.image,
+    fromToken: srcToken?.symbol,
+    fromTokenImage: srcToken?.image,
+    fromAmount: weiToHumanReadable({
+      amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
+      decimals: srcToken?.decimals || 18,
+      precisionFractionalPlaces: 4,
+    }),
+    isDone: false,
+    explorer: `${CCIP_EXPLORER}/tx/${txHash}`,
+  };
+
+  addTransactionToRenderedTransactions(transaction);
+  renderTxStatusButtons();
+
+  // start listening
+  // TODO if someone will provide tx which already is done then we will never get the event. Will need to add status endpoint on backend for transactions to check if they are done or not.
+
+  const xSwapRouterOnDestinationAddress = ADDRESSES[dstChainId]?.XSwapRouter;
+  if (!xSwapRouterOnDestinationAddress) {
+    throw new Error(`Unknown destination XSwapRouter!`);
+  }
+
+  const xSwapRouterOnDestination = new ethers.Contract(
+    xSwapRouterOnDestinationAddress,
+    MSG_RECEIVED_EVENT_ABI,
+    ethers.getDefaultProvider(
+      supportedChains.find((chain) => chain.chainId === dstChainId)
+        ?.publicRpcUrls[0],
+    ),
+  );
+
+  const msgReceivedEventFilter = {
+    address: xSwapRouterOnDestinationAddress,
+    topics: [ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId],
+  };
+
+  const onSuccess = async () => {
+    updateTransactionDoneInRenderedTransactions(txHash);
+    renderTxStatusButtons();
+    await new Promise((resolve) =>
+      setTimeout(() => resolve(true), TX_RECEIPT_STATUS_LIFETIME),
+    );
+    removeTransactionFromRenderedTransactions(txHash);
+    renderTxStatusButtons();
+  };
+  xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
+};
+
+const getTxReceipt = async (txChainId: string, txHash: string) => {
+  try {
+    const chain = (await getChains()).find(
+      (chain) => chain.chainId === txChainId,
+    );
+
+    const provider = new ethers.providers.JsonRpcProvider(
+      chain?.publicRpcUrls[0],
+    );
+
+    return await retry(async () => {
+      const txReceipt = await provider.getTransactionReceipt(txHash);
+      if (!txReceipt) {
+        throw new Error(`Couldn't fetch tx receipt`);
+      }
+      return txReceipt;
+    });
+  } catch (e) {
+    throw new Error(
+      `Couldn't fetch tx ${txHash} receipt on chain ${txChainId}`,
+    );
+  }
+};

package/src/services/integrations/transactions.ts

@@ -3,20 +3,9 @@ import {
   GetSwapTxPayload,
   Transactions,
   Web3Environment,
-  MonitoredTransaction,
 } from "@src/models";
 import { getChains } from "@src/services";
-import { ethers } from "ethers";
-import { ADDRESSES } from "@src/contracts";
-import {
-  openTxConfigForm,
-  addTransactionToRenderedTransactions,
-  removeTransactionFromRenderedTransactions,
-  renderTxHistoryButtons,
-  updateTransactionDoneInRenderedTransactions,
-} from "@src/components";
-import { weiToHumanReadable } from "@src/utils";
-import { CCIP_EXPLORER } from "@src/constants";
+import { openTxConfigForm } from "@src/components";
 
 export const getSwapTx = async ({
   dstChain,
@@ -58,138 +47,3 @@ const validateSwapTxData = (
     throw new Error(`Provided token '${dstToken}' is not supported`);
   }
 };
-
-export const monitorTransactionStatus = async (
-  srcChainId: number,
-  txHash: string,
-) => {
-  const txReceipt = await getTxReceipt(srcChainId, txHash);
-
-  if (!txReceipt) {
-    throw new Error(
-      `No transaction found for chain ${srcChainId} tx ${txHash}`,
-    );
-  }
-
-  const supportedChains: Chain[] = (await getChains()).filter(
-    ({ web3Environment, swapSupported }) =>
-      web3Environment === Web3Environment.MAINNET && swapSupported,
-  );
-
-  const messageSentEventSignature =
-    "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";
-
-  const messageSentEventAbi = [
-    "event MessageSent(bytes32 indexed messageId, uint64 indexed destinationChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount, uint256 valueForInstantCcipRecieve, address transferedToken, uint256 transferedTokenAmount)",
-  ];
-  const messageReceivedEventSignature =
-    "MessageReceived(bytes32,uint64,address,bytes,address,uint256)";
-
-  const messageReceivedEventAbi = [
-    "event MessageReceived(bytes32 indexed messageId, uint64 indexed sourceChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount)",
-  ];
-
-  const messageSentEvent = txReceipt.logs?.find((log) => {
-    return log.topics[0] === ethers.utils.id(messageSentEventSignature);
-  });
-
-  if (!messageSentEvent) {
-    throw new Error(
-      `No transaction event found for chain ${srcChainId} tx ${txHash}`,
-    );
-  }
-
-  const messageId = messageSentEvent?.topics[1] as string;
-  const iface = new ethers.utils.Interface(messageSentEventAbi);
-  const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
-
-  if (!decodedMessageSentEvent) {
-    throw new Error(
-      `No transaction event arguments found for chain ${srcChainId} tx ${txHash}`,
-    );
-  }
-  const srcChain = supportedChains.find(
-    (chain) => chain.chainId === srcChainId.toString(),
-  );
-
-  const srcToken = srcChain?.tokens.find(
-    (token) => token.address === decodedMessageSentEvent.args?.token.toString(),
-  );
-
-  const targetChain = supportedChains.find(
-    (chain) =>
-      chain.ccipChainId ===
-      decodedMessageSentEvent.args?.destinationChainSelector?.toString(),
-  );
-
-  const toChainId = targetChain?.chainId;
-
-  if (!toChainId) {
-    throw new Error(`Unknown destination chain!`);
-  }
-
-  const transaction: MonitoredTransaction = {
-    txHash: txHash,
-    fromChain: srcChain?.displayName,
-    fromChainImage: srcChain?.image,
-    toChain: targetChain.displayName,
-    toChainImage: targetChain.image,
-    fromToken: srcToken?.symbol,
-    fromTokenImage: srcToken?.image,
-    fromAmount: weiToHumanReadable({
-      amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
-      decimals: srcToken?.decimals || 18,
-      precisionFractionalPlaces: 4,
-    }),
-    isDone: false,
-    explorer: `${CCIP_EXPLORER}/tx/${txHash}`,
-  };
-
-  addTransactionToRenderedTransactions(transaction);
-  renderTxHistoryButtons();
-
-  // start listening
-  // TODO if someone will provide tx which already is done then we will never get the event. Will need to add status endpoint on backend for transactions to check if they are done or not.
-
-  const xSwapRouterOnDestinationAddress = ADDRESSES[toChainId]?.XSwapRouter;
-  if (!xSwapRouterOnDestinationAddress) {
-    throw new Error(`Unknown destination XSwapRouter!`);
-  }
-
-  const xSwapRouterOnDestination = new ethers.Contract(
-    xSwapRouterOnDestinationAddress,
-    messageReceivedEventAbi,
-    ethers.getDefaultProvider(
-      supportedChains.find((chain) => chain.chainId === toChainId)
-        ?.publicRpcUrls[0],
-    ),
-  );
-
-  const eventFilter = {
-    address: xSwapRouterOnDestinationAddress,
-    topics: [ethers.utils.id(messageReceivedEventSignature), messageId],
-  };
-
-  const onSuccess = async () => {
-    updateTransactionDoneInRenderedTransactions(txHash);
-    renderTxHistoryButtons();
-    await new Promise((resolve) => setTimeout(() => resolve(true), 5000));
-    removeTransactionFromRenderedTransactions(txHash);
-    renderTxHistoryButtons();
-  };
-  xSwapRouterOnDestination.once(eventFilter, () => onSuccess());
-};
-
-const getTxReceipt = async (txChainId: number, txHash: string) => {
-  const chains = await getChains();
-  const chain = chains.find((chain) => chain.chainId === txChainId.toString());
-  const provider = new ethers.providers.JsonRpcProvider(
-    chain?.publicRpcUrls[0],
-  );
-  try {
-    return await provider.getTransactionReceipt(txHash);
-  } catch (error) {
-    console.error("Error fetching transaction receipt:", error);
-    return null;
-  }
-};

package/tailwind.config.js

@@ -8,6 +8,7 @@ module.exports = {
         x_alert_light: "rgb(255,226,183)",
         x_blue: "#3396FF",
         x_green: "#66bb6a",
+        x_grey: "#ffffff80",
         x_error_background: "rgba(255,202,40,0.1)",
         x_error_border: "rgba(255,111,0,1)",
         x_blue_light: "rgba(54,129,198,1)",