@xswap-link/sdk 0.1.4 → 0.2.1

package/dist/index.mjs

@@ -1,8 +1,7 @@
 var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
   get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
 }) : x)(function(x) {
-  if (typeof require !== "undefined")
-    return require.apply(this, arguments);
+  if (typeof require !== "undefined") return require.apply(this, arguments);
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
@@ -572,6 +571,15 @@ var ROUTE_TIMEOUT_MS = 5e3;
 var MINIMUM_DISPLAYED_TOKEN_AMOUNT = 1e-4;
 var DEFAULT_SOURCE_CHAIN_ID = "1";
 var CCIP_EXPLORER = "https://ccip.chain.link/";
+var TX_RECEIPT_STATUS_LIFETIME = 1e4;
+var MSG_SENT_EVENT_SIG = "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";
+var 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)"
+];
+var MSG_RECEIVED_EVENT_SIG = "MessageReceived(bytes32,uint64,address,bytes,address,uint256)";
+var MSG_RECEIVED_EVENT_ABI = [
+  "event MessageReceived(bytes32 indexed messageId, uint64 indexed sourceChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount)"
+];
 
 // src/utils/contracts.ts
 var IERC20 = new ethers.utils.Interface(ERC20Abi);
@@ -778,91 +786,49 @@ var generateStakingCalls = ({
   return [stakingApproveCall, stakingCall];
 };
 
-// src/services/integrations/transactions.ts
+// src/services/integrations/monitoring.ts
 import { ethers as ethers3 } from "ethers";
-var getSwapTx = async ({
-  dstChain,
-  dstToken,
-  customContractCalls = [],
-  desc
-}) => {
-  const supportedChains = (await getChains()).filter(
-    ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
-  );
-  validateSwapTxData(supportedChains, dstChain, dstToken);
-  const route = await openTxConfigForm({
-    dstChainId: dstChain,
-    dstTokenAddr: dstToken,
-    customContractCalls,
-    desc,
-    supportedChains
-  });
-  return route.transactions;
-};
-var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
-  const supportedDstChain = supportedChains.find(
-    ({ chainId }) => chainId === dstChain
-  );
-  if (!supportedDstChain) {
-    throw new Error(`Provided chain '${dstChain}' is not supported`);
-  }
-  if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
-    throw new Error(`Provided token '${dstToken}' is not supported`);
-  }
-};
-var monitorTransactionStatus = async (srcChainId, txHash) => {
-  const txReceipt = await getTxReceipt(srcChainId, txHash);
-  if (!txReceipt) {
-    throw new Error(
-      `No transaction found for chain ${srcChainId} tx ${txHash}`
-    );
-  }
+import retry from "async-retry";
+var monitorTransactionStatus = async (txChainId, txHash) => {
+  const txReceipt = await getTxReceipt(txChainId, txHash);
   const supportedChains = (await getChains()).filter(
     ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* 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] === ethers3.utils.id(messageSentEventSignature);
+    return log.topics[0] === ethers3.utils.id(MSG_SENT_EVENT_SIG);
   });
   if (!messageSentEvent) {
     throw new Error(
-      `No transaction event found for chain ${srcChainId} tx ${txHash}`
+      `No transaction event found for chain ${txChainId} tx ${txHash}`
     );
   }
   const messageId = messageSentEvent?.topics[1];
-  const iface = new ethers3.utils.Interface(messageSentEventAbi);
+  const iface = new ethers3.utils.Interface(MSG_SENT_EVENT_ABI);
   const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
   if (!decodedMessageSentEvent) {
     throw new Error(
-      `No transaction event arguments found for chain ${srcChainId} tx ${txHash}`
+      `No transaction event arguments found for chain ${txChainId} tx ${txHash}`
     );
   }
   const srcChain = supportedChains.find(
-    (chain) => chain.chainId === srcChainId.toString()
+    (chain) => chain.chainId === txChainId.toString()
   );
   const srcToken = srcChain?.tokens.find(
     (token) => token.address === decodedMessageSentEvent.args?.token.toString()
   );
-  const targetChain = supportedChains.find(
+  const dstChain = supportedChains.find(
     (chain) => chain.ccipChainId === decodedMessageSentEvent.args?.destinationChainSelector?.toString()
   );
-  const toChainId = targetChain?.chainId;
-  if (!toChainId) {
+  const dstChainId = dstChain?.chainId;
+  if (!dstChainId) {
     throw new Error(`Unknown destination chain!`);
   }
   const transaction = {
     txHash,
     fromChain: srcChain?.displayName,
     fromChainImage: srcChain?.image,
-    toChain: targetChain.displayName,
-    toChainImage: targetChain.image,
+    toChain: dstChain.displayName,
+    toChainImage: dstChain.image,
     fromToken: srcToken?.symbol,
     fromTokenImage: srcToken?.image,
     fromAmount: weiToHumanReadable({
@@ -875,41 +841,83 @@ var monitorTransactionStatus = async (srcChainId, txHash) => {
   };
   addTransactionToRenderedTransactions(transaction);
   renderTxHistoryButtons();
-  const xSwapRouterOnDestinationAddress = ADDRESSES[toChainId]?.XSwapRouter;
+  const xSwapRouterOnDestinationAddress = ADDRESSES[dstChainId]?.XSwapRouter;
   if (!xSwapRouterOnDestinationAddress) {
     throw new Error(`Unknown destination XSwapRouter!`);
   }
   const xSwapRouterOnDestination = new ethers3.Contract(
     xSwapRouterOnDestinationAddress,
-    messageReceivedEventAbi,
+    MSG_RECEIVED_EVENT_ABI,
     ethers3.getDefaultProvider(
-      supportedChains.find((chain) => chain.chainId === toChainId)?.publicRpcUrls[0]
+      supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
     )
   );
-  const eventFilter = {
+  const msgReceivedEventFilter = {
     address: xSwapRouterOnDestinationAddress,
-    topics: [ethers3.utils.id(messageReceivedEventSignature), messageId]
+    topics: [ethers3.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
   };
   const onSuccess = async () => {
     updateTransactionDoneInRenderedTransactions(txHash);
     renderTxHistoryButtons();
-    await new Promise((resolve) => setTimeout(() => resolve(true), 5e3));
+    await new Promise(
+      (resolve) => setTimeout(() => resolve(true), TX_RECEIPT_STATUS_LIFETIME)
+    );
     removeTransactionFromRenderedTransactions(txHash);
     renderTxHistoryButtons();
   };
-  xSwapRouterOnDestination.once(eventFilter, () => onSuccess());
+  xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
 };
 var getTxReceipt = async (txChainId, txHash) => {
-  const chains = await getChains();
-  const chain = chains.find((chain2) => chain2.chainId === txChainId.toString());
-  const provider = new ethers3.providers.JsonRpcProvider(
-    chain?.publicRpcUrls[0]
-  );
   try {
-    return await provider.getTransactionReceipt(txHash);
-  } catch (error) {
-    console.error("Error fetching transaction receipt:", error);
-    return null;
+    const chain = (await getChains()).find(
+      (chain2) => chain2.chainId === txChainId
+    );
+    const provider = new ethers3.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}`
+    );
+  }
+};
+
+// src/services/integrations/transactions.ts
+var getSwapTx = async ({
+  dstChain,
+  dstToken,
+  customContractCalls = [],
+  desc
+}) => {
+  const supportedChains = (await getChains()).filter(
+    ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
+  );
+  validateSwapTxData(supportedChains, dstChain, dstToken);
+  const route = await openTxConfigForm({
+    dstChainId: dstChain,
+    dstTokenAddr: dstToken,
+    customContractCalls,
+    desc,
+    supportedChains
+  });
+  return route.transactions;
+};
+var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
+  const supportedDstChain = supportedChains.find(
+    ({ chainId }) => chainId === dstChain
+  );
+  if (!supportedDstChain) {
+    throw new Error(`Provided chain '${dstChain}' is not supported`);
+  }
+  if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
+    throw new Error(`Provided token '${dstToken}' is not supported`);
   }
 };
 
@@ -918,14 +926,12 @@ import { useEffect, useRef, useState } from "react";
 var useDebounce = (value, delay) => {
   const timeoutRef = useRef(null);
   useEffect(() => {
-    if (timeoutRef.current)
-      clearTimeout(timeoutRef.current);
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
     timeoutRef.current = setTimeout(() => {
       setValue(value);
     }, delay);
     return () => {
-      if (timeoutRef.current)
-        clearTimeout(timeoutRef.current);
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
     };
   }, [value, delay]);
   const [debouncedValue, setValue] = useState(value);
@@ -1498,8 +1504,7 @@ var History = ({ signer, supportedChains }) => {
             continue;
           }
           let status;
-          if (entry.failed)
-            status = "REVERTED";
+          if (entry.failed) status = "REVERTED";
           if (!!entry.target) {
             status = "DONE";
           } else {
@@ -1530,8 +1535,7 @@ var History = ({ signer, supportedChains }) => {
     }
   }, [signer, getHistory]);
   useEffect2(() => {
-    if (!historyLoadedOnce)
-      fetchHistory();
+    if (!historyLoadedOnce) fetchHistory();
     const timer = setInterval(() => {
       fetchHistory();
     }, 6e4);
@@ -2015,10 +2019,8 @@ import BigNumber3 from "bignumber.js";
 import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
 var BalanceComponent = ({ srcToken, balances }) => {
   const balanceText = useMemo5(() => {
-    if (!balances || !srcToken)
-      return "0";
-    if (balances[srcToken.address]?.toString() === "0")
-      return "0";
+    if (!balances || !srcToken) return "0";
+    if (balances[srcToken.address]?.toString() === "0") return "0";
     const fullHumanReadable = weiToHumanReadable({
       amount: balances[srcToken.address]?.toString() || "0",
       decimals: srcToken.decimals,
@@ -2102,8 +2104,7 @@ var SwapPanel = ({
             className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
             value: amount,
             onChange: (e) => {
-              if (e.target.value === ".")
-                return;
+              if (e.target.value === ".") return;
               if (NUMBER_INPUT_REGEX.test(e.target.value)) {
                 setAmount(e.target.value.replace(/,/g, "."));
               }
@@ -2369,8 +2370,7 @@ var Form = ({
   }, [srcChain, signer]);
   const handleSubmit = (event) => {
     event.preventDefault();
-    if (route)
-      onSubmit(route);
+    if (route) onSubmit(route);
   };
   const handleSwitchChain = async () => {
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
@@ -2454,6 +2454,9 @@ var Form = ({
   );
 };
 
+// package.json
+var version = "0.2.1";
+
 // src/components/TxConfigForm/index.tsx
 import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
 var TxConfigForm = ({
@@ -2521,7 +2524,7 @@ var openTxConfigForm = async ({
 }) => {
   try {
     return await new Promise((resolve) => {
-      txConfigFormRoot.render(
+      xswapRoot.render(
         /* @__PURE__ */ jsx38(
           TxConfigForm,
           {
@@ -2532,10 +2535,10 @@ var openTxConfigForm = async ({
             supportedChains,
             onSubmit: (route) => {
               resolve(route);
-              txConfigFormRoot.render("");
+              xswapRoot.render("");
             },
             onClose: () => {
-              txConfigFormRoot.render("");
+              xswapRoot.render("");
             }
           }
         )
@@ -2545,16 +2548,21 @@ var openTxConfigForm = async ({
     throw new Error(`XSwap component error, ${err}`);
   }
 };
-var txConfigFormRoot;
+var xswapRoot;
 if (typeof document !== "undefined") {
-  const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "xswap-modal");
-  document.body.appendChild(xswapElement);
-  txConfigFormRoot = createRoot(xswapElement);
+  const xswapStyleElement = document.createElement("link");
+  xswapStyleElement.rel = "stylesheet";
+  xswapStyleElement.type = "text/css";
+  xswapStyleElement.href = `${xswap_config_default.apiUrl}/sdk/css?data={"version": "${version}"}`;
+  document.head.appendChild(xswapStyleElement);
+  const xswapModalElement = document.createElement("div");
+  xswapModalElement.setAttribute("id", "xswap-modal");
+  document.body.appendChild(xswapModalElement);
+  xswapRoot = createRoot(xswapModalElement);
 }
 
 // src/components/TxHistoryButton/index.tsx
-import { useState as useState9 } from "react";
+import { useMemo as useMemo8, useState as useState9 } from "react";
 import { createRoot as createRoot2 } from "react-dom/client";
 import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
 var TxHistoryButton = ({ transaction }) => {
@@ -2571,11 +2579,19 @@ var TxHistoryButton = ({ transaction }) => {
     explorer
   } = transaction;
   const [isWide, setIsWide] = useState9(false);
+  const background = useMemo8(
+    () => 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 = useMemo8(
+    () => isDone ? "border border-solid border-x_green_dark" : "border border-solid border-x_blue_dark",
+    [isDone]
+  );
   return /* @__PURE__ */ jsxs18("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
     isWide && /* @__PURE__ */ jsxs18(
       "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}`,
         children: [
           /* @__PURE__ */ jsxs18("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
             /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
@@ -2623,8 +2639,7 @@ var TxHistoryButton = ({ transaction }) => {
     /* @__PURE__ */ jsx39(
       "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}`,
         children: /* @__PURE__ */ jsxs18("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
           /* @__PURE__ */ jsx39(ArrowLeftIcon, {}),
           /* @__PURE__ */ jsx39("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ jsx39("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ jsx39(CheckIcon, {}) }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
@@ -2689,10 +2704,15 @@ export {
   Environment,
   IERC20,
   MINIMUM_DISPLAYED_TOKEN_AMOUNT,
+  MSG_RECEIVED_EVENT_ABI,
+  MSG_RECEIVED_EVENT_SIG,
+  MSG_SENT_EVENT_ABI,
+  MSG_SENT_EVENT_SIG,
   NUMBER_INPUT_REGEX,
   ROUTE_TIMEOUT_MS,
   SLIPPAGE_PRESETS,
   Skeleton,
+  TX_RECEIPT_STATUS_LIFETIME,
   TxHistoryButton,
   Web3Environment,
   XSwapCallType,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xswap-link/sdk",
-  "version": "0.1.4",
+  "version": "0.2.1",
   "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/index.tsx

@@ -8,6 +8,8 @@ import { Chain, ContractCall, Route } from "@src/models";
 import { CloseIcon } from "@src/components/icons/CloseIcon";
 import { Form } from "./Form";
 import { ChainlinkCCIPIcon, XSwapBadgeIcon } from "../icons";
+import { version } from "../../../package.json";
+import xswapConfig from "../../../xswap.config";
 
 export type TxConfigFormProps = {
   dstChainId: string;
@@ -46,34 +48,34 @@ const TxConfigForm = ({
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-    <div
-      className="top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex items-center justify-center z-10"
-      onClick={onBackdropClick}
-    >
-      <div className="relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
-        <Form
-          dstChainId={dstChainId}
-          dstTokenAddr={dstTokenAddr}
-          customContractCalls={customContractCalls}
-          desc={desc}
-          supportedChains={supportedChains}
-          onSubmit={onSubmit}
-        />
         <div
-          className="absolute top-7 right-4 cursor-pointer text-white"
-          onClick={onClose}
+          className="top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex items-center justify-center z-10"
+          onClick={onBackdropClick}
         >
-          <CloseIcon />
-        </div>
+          <div className="relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]">
+            <Form
+              dstChainId={dstChainId}
+              dstTokenAddr={dstTokenAddr}
+              customContractCalls={customContractCalls}
+              desc={desc}
+              supportedChains={supportedChains}
+              onSubmit={onSubmit}
+            />
+            <div
+              className="absolute top-7 right-4 cursor-pointer text-white"
+              onClick={onClose}
+            >
+              <CloseIcon />
+            </div>
 
-        <div className="swappage__poweredby">
-          <span>Powered by</span>
-          <XSwapBadgeIcon />
-          <span>✕</span>
-          <ChainlinkCCIPIcon />
+            <div className="swappage__poweredby">
+              <span>Powered by</span>
+              <XSwapBadgeIcon />
+              <span>✕</span>
+              <ChainlinkCCIPIcon />
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
       </QueryClientProvider>
     </WagmiProvider>
   );
@@ -88,7 +90,7 @@ export const openTxConfigForm = async ({
 }: TxConfigFormProps): Promise<Route> => {
   try {
     return await new Promise((resolve) => {
-      txConfigFormRoot.render(
+      xswapRoot.render(
         <TxConfigForm
           dstChainId={dstChainId}
           dstTokenAddr={dstTokenAddr}
@@ -97,10 +99,10 @@ export const openTxConfigForm = async ({
           supportedChains={supportedChains}
           onSubmit={(route) => {
             resolve(route);
-            txConfigFormRoot.render("");
+            xswapRoot.render("");
           }}
           onClose={() => {
-            txConfigFormRoot.render("");
+            xswapRoot.render("");
           }}
         />,
       );
@@ -111,10 +113,16 @@ export const openTxConfigForm = async ({
 };
 
 // skip on server-side integrations
-let txConfigFormRoot: Root;
+let xswapRoot: Root;
 if (typeof document !== "undefined") {
-  const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "xswap-modal");
-  document.body.appendChild(xswapElement);
-  txConfigFormRoot = createRoot(xswapElement);
+  const xswapStyleElement = document.createElement("link");
+  xswapStyleElement.rel = "stylesheet";
+  xswapStyleElement.type = "text/css";
+  xswapStyleElement.href = `${xswapConfig.apiUrl}/sdk/css?data={"version": "${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/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from "react";
+import { FC, useMemo, useState } from "react";
 import { createRoot } from "react-dom/client";
 import {
   ArrowLeftIcon,
@@ -27,15 +27,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 +90,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 />

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/services/integrations/index.ts

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