@xswap-link/sdk 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @xswap-link/xswap-sdk
 
+## 0.2.1
+
+### Patch Changes
+
+- 0f722ce: tx monitoring integration update
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.css

@@ -756,6 +756,9 @@ video {
 .bg-\[rgba\(15\,15\,15\,1\)\] {
   background-color: rgba(15, 15, 15, 1);
 }
+.bg-\[rgba\(2\,2\,2\,1\)\] {
+  background-color: rgba(2, 2, 2, 1);
+}
 .bg-\[rgba\(255\,255\,255\,0\.1\)\] {
   background-color: rgba(255, 255, 255, 0.1);
 }
@@ -800,8 +803,8 @@ video {
   --tw-gradient-to: rgb(54 129 198 / 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-\[rgba\(54\,129\,198\,0\.1\)\] {
-  --tw-gradient-from: rgba(54,129,198,0.1) var(--tw-gradient-from-position);
+.from-\[rgba\(54\,129\,198\,0\.2\)\] {
+  --tw-gradient-from: rgba(54,129,198,0.2) var(--tw-gradient-from-position);
   --tw-gradient-to: rgba(54, 129, 198, 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
@@ -810,8 +813,8 @@ video {
   --tw-gradient-to: rgba(54, 129, 198, 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
-.from-\[rgba\(76\,175\,80\,0\.1\)\] {
-  --tw-gradient-from: rgba(76,175,80,0.1) var(--tw-gradient-from-position);
+.from-\[rgba\(76\,175\,80\,0\.2\)\] {
+  --tw-gradient-from: rgba(76,175,80,0.2) var(--tw-gradient-from-position);
   --tw-gradient-to: rgba(76, 175, 80, 0) var(--tw-gradient-to-position);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
@@ -823,14 +826,14 @@ video {
 .to-\[\#2b4a9d\] {
   --tw-gradient-to: #2b4a9d var(--tw-gradient-to-position);
 }
-.to-\[rgba\(43\,74\,157\,0\.1\)\] {
-  --tw-gradient-to: rgba(43,74,157,0.1) var(--tw-gradient-to-position);
+.to-\[rgba\(43\,74\,157\,0\.2\)\] {
+  --tw-gradient-to: rgba(43,74,157,0.2) var(--tw-gradient-to-position);
 }
 .to-\[rgba\(43\,74\,157\,1\)\] {
   --tw-gradient-to: rgba(43,74,157,1) var(--tw-gradient-to-position);
 }
-.to-\[rgba\(46\,125\,50\,0\.1\)\] {
-  --tw-gradient-to: rgba(46,125,50,0.1) var(--tw-gradient-to-position);
+.to-\[rgba\(46\,125\,50\,0\.2\)\] {
+  --tw-gradient-to: rgba(46,125,50,0.2) var(--tw-gradient-to-position);
 }
 .to-x_blue_dark {
   --tw-gradient-to: rgba(43,74,157,1) var(--tw-gradient-to-position);

package/dist/index.d.mts

@@ -291,6 +291,11 @@ declare const ROUTE_TIMEOUT_MS = 5000;
 declare const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
 declare const DEFAULT_SOURCE_CHAIN_ID = "1";
 declare const CCIP_EXPLORER = "https://ccip.chain.link/";
+declare const TX_RECEIPT_STATUS_LIFETIME = 10000;
+declare const MSG_SENT_EVENT_SIG = "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";
+declare const MSG_SENT_EVENT_ABI: string[];
+declare const MSG_RECEIVED_EVENT_SIG = "MessageReceived(bytes32,uint64,address,bytes,address,uint256)";
+declare const MSG_RECEIVED_EVENT_ABI: string[];
 
 declare const BatchQueryAbi: ({
     inputs: {
@@ -389,8 +394,9 @@ declare function getPrices(payload: GetPricesPayload): Promise<TokenPrices>;
 
 declare const generateStakingCalls: ({ token, staking, stakingAbi, stakingFunName, stakingFunParams, }: GenerateStakingCallsParams) => ContractCall[];
 
+declare const monitorTransactionStatus: (txChainId: string, txHash: string) => Promise<void>;
+
 declare const getSwapTx: ({ dstChain, dstToken, customContractCalls, desc, }: GetSwapTxPayload) => Promise<Transactions>;
-declare const monitorTransactionStatus: (srcChainId: number, txHash: string) => Promise<void>;
 
 declare const IERC20: ethers.utils.Interface;
 declare const getBalanceOf: (wallet: string, token: string, rpcUrl: string) => Promise<string>;
@@ -424,4 +430,4 @@ declare const deepMergeObjects: (obj1: Record<string, any>, obj2: Record<string,
 declare const chunkArray: (array: any[], chunkSize: number) => any[][];
 declare const getDate: (blockTimestamp: number) => string;
 
-export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BatchQueryAbi, type BridgeToken, CCIP_EXPLORER, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, DEFAULT_SOURCE_CHAIN_ID, DELIVERY_TIME, ERC20Abi, EXPRESS_DELIVERY_TIME, Ecosystem, Environment, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, type HistoryTransaction, IERC20, MINIMUM_DISPLAYED_TOKEN_AMOUNT, type MonitoredTransaction, NUMBER_INPUT_REGEX, type Prices, type Protocol, ROUTE_TIMEOUT_MS, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, type TxConfigFormProps, TxHistoryButton, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, addTransactionToRenderedTransactions, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getDate, getHistory, getPrices, getRoute, getSwapTx, getTokens, monitorTransactionStatus, openTxConfigForm, removeTransactionFromRenderedTransactions, renderTxHistoryButtons, replaceNull, safeBigNumberFrom, shortAddress, updateTransactionDoneInRenderedTransactions, weiToHumanReadable };
+export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BatchQueryAbi, type BridgeToken, CCIP_EXPLORER, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, DEFAULT_SOURCE_CHAIN_ID, DELIVERY_TIME, ERC20Abi, EXPRESS_DELIVERY_TIME, Ecosystem, Environment, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, type HistoryTransaction, IERC20, MINIMUM_DISPLAYED_TOKEN_AMOUNT, MSG_RECEIVED_EVENT_ABI, MSG_RECEIVED_EVENT_SIG, MSG_SENT_EVENT_ABI, MSG_SENT_EVENT_SIG, type MonitoredTransaction, NUMBER_INPUT_REGEX, type Prices, type Protocol, ROUTE_TIMEOUT_MS, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, TX_RECEIPT_STATUS_LIFETIME, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, type TxConfigFormProps, TxHistoryButton, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, addTransactionToRenderedTransactions, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getDate, getHistory, getPrices, getRoute, getSwapTx, getTokens, monitorTransactionStatus, openTxConfigForm, removeTransactionFromRenderedTransactions, renderTxHistoryButtons, replaceNull, safeBigNumberFrom, shortAddress, updateTransactionDoneInRenderedTransactions, weiToHumanReadable };

package/dist/index.d.ts

@@ -291,6 +291,11 @@ declare const ROUTE_TIMEOUT_MS = 5000;
 declare const MINIMUM_DISPLAYED_TOKEN_AMOUNT = 0.0001;
 declare const DEFAULT_SOURCE_CHAIN_ID = "1";
 declare const CCIP_EXPLORER = "https://ccip.chain.link/";
+declare const TX_RECEIPT_STATUS_LIFETIME = 10000;
+declare const MSG_SENT_EVENT_SIG = "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";
+declare const MSG_SENT_EVENT_ABI: string[];
+declare const MSG_RECEIVED_EVENT_SIG = "MessageReceived(bytes32,uint64,address,bytes,address,uint256)";
+declare const MSG_RECEIVED_EVENT_ABI: string[];
 
 declare const BatchQueryAbi: ({
     inputs: {
@@ -389,8 +394,9 @@ declare function getPrices(payload: GetPricesPayload): Promise<TokenPrices>;
 
 declare const generateStakingCalls: ({ token, staking, stakingAbi, stakingFunName, stakingFunParams, }: GenerateStakingCallsParams) => ContractCall[];
 
+declare const monitorTransactionStatus: (txChainId: string, txHash: string) => Promise<void>;
+
 declare const getSwapTx: ({ dstChain, dstToken, customContractCalls, desc, }: GetSwapTxPayload) => Promise<Transactions>;
-declare const monitorTransactionStatus: (srcChainId: number, txHash: string) => Promise<void>;
 
 declare const IERC20: ethers.utils.Interface;
 declare const getBalanceOf: (wallet: string, token: string, rpcUrl: string) => Promise<string>;
@@ -424,4 +430,4 @@ declare const deepMergeObjects: (obj1: Record<string, any>, obj2: Record<string,
 declare const chunkArray: (array: any[], chunkSize: number) => any[][];
 declare const getDate: (blockTimestamp: number) => string;
 
-export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BatchQueryAbi, type BridgeToken, CCIP_EXPLORER, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, DEFAULT_SOURCE_CHAIN_ID, DELIVERY_TIME, ERC20Abi, EXPRESS_DELIVERY_TIME, Ecosystem, Environment, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, type HistoryTransaction, IERC20, MINIMUM_DISPLAYED_TOKEN_AMOUNT, type MonitoredTransaction, NUMBER_INPUT_REGEX, type Prices, type Protocol, ROUTE_TIMEOUT_MS, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, type TxConfigFormProps, TxHistoryButton, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, addTransactionToRenderedTransactions, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getDate, getHistory, getPrices, getRoute, getSwapTx, getTokens, monitorTransactionStatus, openTxConfigForm, removeTransactionFromRenderedTransactions, renderTxHistoryButtons, replaceNull, safeBigNumberFrom, shortAddress, updateTransactionDoneInRenderedTransactions, weiToHumanReadable };
+export { ADDRESSES, type AddReferralPayload, type Addresses, Alert, BALANCES_CHUNK_SIZE, BatchQueryAbi, type BridgeToken, CCIP_EXPLORER, type Chain, type CoinTypeAddress, type CollectFees, type ContractCall, ContractName, type Contracts, DEFAULT_ECOSYSTEM, DEFAULT_SOURCE_CHAIN_ID, DELIVERY_TIME, ERC20Abi, EXPRESS_DELIVERY_TIME, Ecosystem, Environment, type GenerateStakingCallsParams, type GetPricesPayload, type GetRoutePayload, type GetSwapTxPayload, type HistoryTransaction, IERC20, MINIMUM_DISPLAYED_TOKEN_AMOUNT, MSG_RECEIVED_EVENT_ABI, MSG_RECEIVED_EVENT_SIG, MSG_SENT_EVENT_ABI, MSG_SENT_EVENT_SIG, type MonitoredTransaction, NUMBER_INPUT_REGEX, type Prices, type Protocol, ROUTE_TIMEOUT_MS, type Referral, type ReferralInfo, type Route, SLIPPAGE_PRESETS, Skeleton, TX_RECEIPT_STATUS_LIFETIME, type Token, type TokenBalances, type TokenPrices, type Transaction, type TransactionHistory, type TransactionStatus, type Transactions, type TxConfigFormData, type TxConfigFormProps, TxHistoryButton, Web3Environment, XSwapCallType, type XSwapConfig, type XSwapFee, type XSwapFees, addTransactionToRenderedTransactions, chunkArray, deepMergeObjects, findPlaceholderIndex, generateApproveTxData, generateRandomBigNumber, generateStakingCalls, generateUniqueRandomBigNumber, getBalanceOf, getBalances, getBridgeTokens, getChainData, getChains, getDate, getHistory, getPrices, getRoute, getSwapTx, getTokens, monitorTransactionStatus, openTxConfigForm, removeTransactionFromRenderedTransactions, renderTxHistoryButtons, replaceNull, safeBigNumberFrom, shortAddress, updateTransactionDoneInRenderedTransactions, weiToHumanReadable };

package/dist/index.js

@@ -45,10 +45,15 @@ __export(src_exports, {
   Environment: () => Environment,
   IERC20: () => IERC20,
   MINIMUM_DISPLAYED_TOKEN_AMOUNT: () => MINIMUM_DISPLAYED_TOKEN_AMOUNT,
+  MSG_RECEIVED_EVENT_ABI: () => MSG_RECEIVED_EVENT_ABI,
+  MSG_RECEIVED_EVENT_SIG: () => MSG_RECEIVED_EVENT_SIG,
+  MSG_SENT_EVENT_ABI: () => MSG_SENT_EVENT_ABI,
+  MSG_SENT_EVENT_SIG: () => MSG_SENT_EVENT_SIG,
   NUMBER_INPUT_REGEX: () => NUMBER_INPUT_REGEX,
   ROUTE_TIMEOUT_MS: () => ROUTE_TIMEOUT_MS,
   SLIPPAGE_PRESETS: () => SLIPPAGE_PRESETS,
   Skeleton: () => Skeleton,
+  TX_RECEIPT_STATUS_LIFETIME: () => TX_RECEIPT_STATUS_LIFETIME,
   TxHistoryButton: () => TxHistoryButton,
   Web3Environment: () => Web3Environment,
   XSwapCallType: () => XSwapCallType,
@@ -649,6 +654,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 import_ethers2.ethers.utils.Interface(ERC20Abi);
@@ -855,91 +869,49 @@ var generateStakingCalls = ({
   return [stakingApproveCall, stakingCall];
 };
 
-// src/services/integrations/transactions.ts
+// src/services/integrations/monitoring.ts
 var import_ethers4 = require("ethers");
-var getSwapTx = async ({
-  dstChain,
-  dstToken,
-  customContractCalls = [],
-  desc
-}) => {
+var import_async_retry = __toESM(require("async-retry"));
+var monitorTransactionStatus = async (txChainId, txHash) => {
+  const txReceipt = await getTxReceipt(txChainId, txHash);
   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}`
-    );
-  }
-  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] === import_ethers4.ethers.utils.id(messageSentEventSignature);
+    return log.topics[0] === import_ethers4.ethers.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 import_ethers4.ethers.utils.Interface(messageSentEventAbi);
+  const iface = new import_ethers4.ethers.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({
@@ -952,41 +924,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 import_ethers4.ethers.Contract(
     xSwapRouterOnDestinationAddress,
-    messageReceivedEventAbi,
+    MSG_RECEIVED_EVENT_ABI,
     import_ethers4.ethers.getDefaultProvider(
-      supportedChains.find((chain) => chain.chainId === toChainId)?.publicRpcUrls[0]
+      supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
     )
   );
-  const eventFilter = {
+  const msgReceivedEventFilter = {
     address: xSwapRouterOnDestinationAddress,
-    topics: [import_ethers4.ethers.utils.id(messageReceivedEventSignature), messageId]
+    topics: [import_ethers4.ethers.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 import_ethers4.ethers.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 import_ethers4.ethers.providers.JsonRpcProvider(
+      chain?.publicRpcUrls[0]
+    );
+    return await (0, import_async_retry.default)(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`);
   }
 };
 
@@ -2524,7 +2538,7 @@ var Form = ({
 };
 
 // package.json
-var version = "0.2.0";
+var version = "0.2.1";
 
 // src/components/TxConfigForm/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
@@ -2622,7 +2636,7 @@ if (typeof document !== "undefined") {
   const xswapStyleElement = document.createElement("link");
   xswapStyleElement.rel = "stylesheet";
   xswapStyleElement.type = "text/css";
-  xswapStyleElement.href = `${xswap_config_default.apiUrl}/sdk/css/${version}`;
+  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");
@@ -2648,11 +2662,19 @@ var TxHistoryButton = ({ transaction }) => {
     explorer
   } = transaction;
   const [isWide, setIsWide] = (0, import_react12.useState)(false);
+  const background = (0, import_react12.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 = (0, import_react12.useMemo)(
+    () => isDone ? "border border-solid border-x_green_dark" : "border border-solid border-x_blue_dark",
+    [isDone]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
     isWide && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "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__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
             /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
@@ -2700,8 +2722,7 @@ var TxHistoryButton = ({ transaction }) => {
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "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__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowLeftIcon, {}),
           /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
@@ -2767,10 +2788,15 @@ var Skeleton = ({ width, height }) => {
   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/dist/index.mjs

@@ -571,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);
@@ -777,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
-}) => {
+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
   );
-  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}`
-    );
-  }
-  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({
@@ -874,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`);
   }
 };
 
@@ -2446,7 +2455,7 @@ var Form = ({
 };
 
 // package.json
-var version = "0.2.0";
+var version = "0.2.1";
 
 // src/components/TxConfigForm/index.tsx
 import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -2544,7 +2553,7 @@ if (typeof document !== "undefined") {
   const xswapStyleElement = document.createElement("link");
   xswapStyleElement.rel = "stylesheet";
   xswapStyleElement.type = "text/css";
-  xswapStyleElement.href = `${xswap_config_default.apiUrl}/sdk/css/${version}`;
+  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");
@@ -2553,7 +2562,7 @@ if (typeof document !== "undefined") {
 }
 
 // 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 }) => {
@@ -2570,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: [
@@ -2622,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: [
@@ -2688,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.2.0",
+  "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

@@ -118,7 +118,7 @@ if (typeof document !== "undefined") {
   const xswapStyleElement = document.createElement("link");
   xswapStyleElement.rel = "stylesheet";
   xswapStyleElement.type = "text/css";
-  xswapStyleElement.href = `${xswapConfig.apiUrl}/sdk/css/${version}`;
+  xswapStyleElement.href = `${xswapConfig.apiUrl}/sdk/css?data={"version": "${version}"}`;
   document.head.appendChild(xswapStyleElement);
 
   const xswapModalElement = document.createElement("div");

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";

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,
+  renderTxHistoryButtons,
+  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);
+  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[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);
+    renderTxHistoryButtons();
+    await new Promise((resolve) =>
+      setTimeout(() => resolve(true), TX_RECEIPT_STATUS_LIFETIME),
+    );
+    removeTransactionFromRenderedTransactions(txHash);
+    renderTxHistoryButtons();
+  };
+  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;
-  }
-};