@xswap-link/sdk 0.2.4 → 0.2.5

package/dist/index.mjs

@@ -23,7 +23,7 @@ var xswap_config_default = {
 };
 
 // package.json
-var version = "0.2.4";
+var version = "0.2.5";
 
 // src/components/WaitingForInit/index.tsx
 import { jsx } from "react/jsx-runtime";
@@ -61,7 +61,7 @@ var initDocument = () => {
   createInitIndicatorRoot();
   Promise.all([
     createStyleElement(),
-    createXswapRoot(),
+    createXSwapRoot(),
     createTxStatusRoot()
   ]).then(() => {
     initCompleted = true;
@@ -87,7 +87,7 @@ var createStyleElement = async () => {
   style.textContent = text;
   document.body.appendChild(style);
 };
-var createXswapRoot = async () => {
+var createXSwapRoot = async () => {
   const xswapElement = document.createElement("div");
   xswapElement.setAttribute("id", "xswap-modal");
   document.body.appendChild(xswapElement);
@@ -110,45 +110,6 @@ var displayInitIndicator = (display) => {
   display ? initIndicatorRoot.render(/* @__PURE__ */ jsx2(WaitingForInit, {})) : initIndicatorRoot.render("");
 };
 
-// src/models/Addresses.ts
-var ContractName = /* @__PURE__ */ ((ContractName2) => {
-  ContractName2["BatchQuery"] = "BatchQuery";
-  ContractName2["FeeCollector"] = "FeeCollector";
-  ContractName2["XSwapRouter"] = "XSwapRouter";
-  return ContractName2;
-})(ContractName || {});
-
-// src/models/Ecosystem.ts
-var Ecosystem = /* @__PURE__ */ ((Ecosystem2) => {
-  Ecosystem2["EVM"] = "evm";
-  return Ecosystem2;
-})(Ecosystem || {});
-
-// src/models/Environment.ts
-var Environment = /* @__PURE__ */ ((Environment2) => {
-  Environment2["PROD"] = "production";
-  Environment2["DEV"] = "develop";
-  Environment2["LOCAL"] = "local";
-  return Environment2;
-})(Environment || {});
-
-// src/models/Web3Environment.ts
-var Web3Environment = /* @__PURE__ */ ((Web3Environment2) => {
-  Web3Environment2["DEVNET"] = "devnet";
-  Web3Environment2["TESTNET"] = "testnet";
-  Web3Environment2["MAINNET"] = "mainnet";
-  return Web3Environment2;
-})(Web3Environment || {});
-
-// src/models/XSwapCallType.ts
-var XSwapCallType = /* @__PURE__ */ ((XSwapCallType2) => {
-  XSwapCallType2[XSwapCallType2["DEFAULT"] = 0] = "DEFAULT";
-  XSwapCallType2[XSwapCallType2["FULL_TOKEN_BALANCE"] = 1] = "FULL_TOKEN_BALANCE";
-  XSwapCallType2[XSwapCallType2["FULL_NATIVE_BALANCE"] = 2] = "FULL_NATIVE_BALANCE";
-  XSwapCallType2[XSwapCallType2["COLLECT_TOKEN_BALANCE"] = 3] = "COLLECT_TOKEN_BALANCE";
-  return XSwapCallType2;
-})(XSwapCallType || {});
-
 // src/services/api.ts
 async function _sendRequest(urlPath, options) {
   const response = await fetch(`${xswap_config_default.apiUrl}${urlPath}`, {
@@ -191,10 +152,57 @@ async function getPrices(payload) {
     })}`
   );
 }
+async function getTxStatus(payload) {
+  return await _sendRequest(
+    `/getTxStatus?${new URLSearchParams({
+      data: JSON.stringify(payload)
+      // todo remove once gcp starts working
+    })}`
+  );
+}
 
 // src/services/integrations/customCalls/staking.ts
 import { ethers as ethers2 } from "ethers";
 
+// src/models/Addresses.ts
+var ContractName = /* @__PURE__ */ ((ContractName2) => {
+  ContractName2["BatchQuery"] = "BatchQuery";
+  ContractName2["FeeCollector"] = "FeeCollector";
+  ContractName2["XSwapRouter"] = "XSwapRouter";
+  return ContractName2;
+})(ContractName || {});
+
+// src/models/Ecosystem.ts
+var Ecosystem = /* @__PURE__ */ ((Ecosystem2) => {
+  Ecosystem2["EVM"] = "evm";
+  return Ecosystem2;
+})(Ecosystem || {});
+
+// src/models/Environment.ts
+var Environment = /* @__PURE__ */ ((Environment2) => {
+  Environment2["PROD"] = "production";
+  Environment2["DEV"] = "develop";
+  Environment2["LOCAL"] = "local";
+  return Environment2;
+})(Environment || {});
+
+// src/models/Web3Environment.ts
+var Web3Environment = /* @__PURE__ */ ((Web3Environment2) => {
+  Web3Environment2["DEVNET"] = "devnet";
+  Web3Environment2["TESTNET"] = "testnet";
+  Web3Environment2["MAINNET"] = "mainnet";
+  return Web3Environment2;
+})(Web3Environment || {});
+
+// src/models/XSwapCallType.ts
+var XSwapCallType = /* @__PURE__ */ ((XSwapCallType2) => {
+  XSwapCallType2[XSwapCallType2["DEFAULT"] = 0] = "DEFAULT";
+  XSwapCallType2[XSwapCallType2["FULL_TOKEN_BALANCE"] = 1] = "FULL_TOKEN_BALANCE";
+  XSwapCallType2[XSwapCallType2["FULL_NATIVE_BALANCE"] = 2] = "FULL_NATIVE_BALANCE";
+  XSwapCallType2[XSwapCallType2["COLLECT_TOKEN_BALANCE"] = 3] = "COLLECT_TOKEN_BALANCE";
+  return XSwapCallType2;
+})(XSwapCallType || {});
+
 // src/utils/contracts.ts
 import { ethers } from "ethers";
 
@@ -626,6 +634,9 @@ var shortAddress = (address) => {
     address.length
   )}`;
 };
+var isETHAddressValid = (address) => {
+  return /^0x[a-fA-F0-9]{40}$/.test(address);
+};
 
 // src/utils/index.ts
 import { format } from "date-fns";
@@ -654,7 +665,7 @@ var getDate = (blockTimestamp) => {
 };
 
 // src/services/integrations/monitoring.ts
-import { ethers as ethers4 } from "ethers";
+import { ethers as ethers5 } from "ethers";
 
 // src/components/Alert/index.tsx
 import { jsxs } from "react/jsx-runtime";
@@ -666,7 +677,7 @@ var Alert = ({ desc }) => {
 };
 
 // src/components/TxConfigForm/index.tsx
-import { useMemo as useMemo7 } from "react";
+import { useMemo as useMemo8 } from "react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { WagmiProvider } from "wagmi";
 
@@ -1320,15 +1331,35 @@ var History = ({ signer, supportedChains }) => {
       const fetchedTransactions = [];
       if (downloadedHistory) {
         for (const entry of downloadedHistory.history) {
+          let status = "IN_PROGRESS";
           if (!entry.source) {
             continue;
           }
-          let status;
-          if (entry.failed) status = "REVERTED";
+          if (entry.failed) {
+            status = "REVERTED";
+          }
           if (!!entry.target) {
             status = "DONE";
-          } else {
-            status = "IN_PROGRESS";
+          }
+          if (entry.transferType === "SINGLE_CHAIN") {
+            if (!entry.target) {
+              continue;
+            }
+            const blockTimestampMs2 = new Date(entry.target.blockTime).getTime();
+            const estimatedDeliveryTimestamp2 = blockTimestampMs2 / 1e3;
+            fetchedTransactions.push({
+              hash: entry.target.transactionHash,
+              timestamp: blockTimestampMs2 / 1e3,
+              sourceChainId: entry.target.blockchainId,
+              targetChainId: entry.target.blockchainId,
+              amountWei: entry.source.tokenAmount,
+              tokenAddress: entry.source.tokenAddress,
+              tokenOutAddress: entry.target?.tokenAmount,
+              tokenOutAmount: entry.target?.tokenAmount,
+              estimatedDeliveryTimestamp: estimatedDeliveryTimestamp2,
+              status
+            });
+            continue;
           }
           const blockTimestampMs = new Date(entry.source.blockTime).getTime();
           const estimatedDeliveryTimestamp = new BigNumberJS2(
@@ -1522,6 +1553,7 @@ var Settings = ({
 };
 
 // src/components/TxConfigForm/FeesDetails.tsx
+import { useMemo as useMemo2 } from "react";
 import { jsx as jsx30, jsxs as jsxs11 } from "react/jsx-runtime";
 var FeesDetails = ({
   isGettingRoute,
@@ -1534,6 +1566,9 @@ var FeesDetails = ({
   feesDetailsShown,
   setFeesDetailsShown
 }) => {
+  const isExpressDeliveryPossible = useMemo2(() => {
+    return expressChecked && !exceedsExpressDeliveryLimit;
+  }, [expressChecked, exceedsExpressDeliveryLimit]);
   return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-2 sm:p-4 mb-1", children: [
     /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm", children: [
       /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
@@ -1550,13 +1585,13 @@ var FeesDetails = ({
         })} ${paymentToken?.symbol}`
       ] }),
       /* @__PURE__ */ jsxs11("div", { className: "flex gap-1 items-center", children: [
-        /* @__PURE__ */ jsxs11(
+        route?.xSwapFees.expressDeliveryFee && !isGettingRoute && /* @__PURE__ */ jsxs11(
           "div",
           {
-            className: `flex gap-1 items-center font-medium ${expressChecked && !exceedsExpressDeliveryLimit ? "text-x_green" : "text-white opacity-60"}`,
+            className: `flex gap-1 items-center font-medium ${isExpressDeliveryPossible ? "text-x_green" : "text-white opacity-60"}`,
             children: [
               /* @__PURE__ */ jsx30(TimerIcon, {}),
-              expressChecked && !exceedsExpressDeliveryLimit ? "Fast ~ 30sec " : "Normal ~ 30min"
+              isExpressDeliveryPossible ? "Fast ~ 30sec " : "Normal ~ 30min"
             ]
           }
         ),
@@ -1612,7 +1647,7 @@ var FeesDetails = ({
 };
 
 // src/components/TxConfigForm/Summary.tsx
-import { useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
+import { useEffect as useEffect5, useMemo as useMemo4, useState as useState5 } from "react";
 
 // src/components/TxConfigForm/UsdPrice.tsx
 import { useEffect as useEffect4, useState as useState4 } from "react";
@@ -1640,8 +1675,20 @@ var UsdPrice = ({
   return /* @__PURE__ */ jsx31("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ jsx31(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ jsx31("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ jsx31(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ jsx31(Fragment3, { children: "$0.00" }) });
 };
 
+// src/components/UnknownTokenLogo/UnknownTokenLogo.tsx
+import { jsx as jsx32 } from "react/jsx-runtime";
+var UnknownTokenLogo = ({ tokenName, className }) => {
+  return /* @__PURE__ */ jsx32(
+    "div",
+    {
+      className: `w-5 h-5 rounded-full bg-white shadow-sm flex items-center justify-center text-black ${className}`,
+      children: tokenName.substring(0, 1)
+    }
+  );
+};
+
 // src/components/TxConfigForm/Summary.tsx
-import { jsx as jsx32, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs12 } from "react/jsx-runtime";
 var Summary = ({
   isGettingRoute,
   route,
@@ -1649,7 +1696,7 @@ var Summary = ({
   dstChain
 }) => {
   const [prices, setPrices] = useState5();
-  const amountReadable = useMemo3(
+  const amountReadable = useMemo4(
     () => weiToHumanReadable({
       amount: route?.estAmountOut || "0",
       decimals: dstToken?.decimals || 18,
@@ -1667,31 +1714,44 @@ var Summary = ({
   return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
     /* @__PURE__ */ jsxs12("div", { className: "flex justify-between", children: [
       /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx32("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
-        isGettingRoute ? /* @__PURE__ */ jsx32(
+        /* @__PURE__ */ jsx33("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
+        isGettingRoute ? /* @__PURE__ */ jsx33(
           Skeleton,
           {
             width: "w-[100px]",
             height: "h-[36px]",
             other: "sm:w-[190px]"
           }
-        ) : /* @__PURE__ */ jsx32("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: amountReadable })
+        ) : /* @__PURE__ */ jsx33("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: amountReadable })
       ] }),
       /* @__PURE__ */ jsxs12("div", { className: "flex flex-col items-end gap-1 text-sm", children: [
         /* @__PURE__ */ jsxs12("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ jsx32("div", { className: "w-4 sm:w-6 h-4 sm:h-6", children: /* @__PURE__ */ jsx32("img", { src: dstToken?.image, alt: dstToken?.name }) }),
-          /* @__PURE__ */ jsx32("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
+          /* @__PURE__ */ jsx33("div", { className: "w-5 h-5", children: dstToken?.image ? /* @__PURE__ */ jsx33(
+            "img",
+            {
+              className: "w-5 h-5",
+              src: dstToken?.image,
+              alt: dstToken?.name
+            }
+          ) : /* @__PURE__ */ jsx33(
+            UnknownTokenLogo,
+            {
+              tokenName: "?",
+              className: "token-select__generated-logo"
+            }
+          ) }),
+          /* @__PURE__ */ jsx33("p", { className: "text-base sm:text-xl", children: dstToken?.name })
         ] }),
         /* @__PURE__ */ jsxs12("div", { className: "flex justify-center items-center gap-1", children: [
-          /* @__PURE__ */ jsx32("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on " }),
+          /* @__PURE__ */ jsx33("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on " }),
           /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1 text-white", children: [
-            /* @__PURE__ */ jsx32("div", { className: "w-4 h-4", children: /* @__PURE__ */ jsx32("img", { src: dstChain?.image, alt: dstChain?.name }) }),
-            /* @__PURE__ */ jsx32("div", { children: dstChain?.displayName })
+            /* @__PURE__ */ jsx33("div", { className: "w-4 h-4", children: /* @__PURE__ */ jsx33("img", { src: dstChain?.image, alt: dstChain?.name }) }),
+            /* @__PURE__ */ jsx33("div", { children: dstChain?.displayName })
           ] })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx32(
+    /* @__PURE__ */ jsx33(
       UsdPrice,
       {
         prices,
@@ -1701,17 +1761,17 @@ var Summary = ({
         type: "dst"
       }
     ),
-    /* @__PURE__ */ jsx32("div", { className: "absolute right-[50%] top-0 translate-x-1/2 translate-y-[-60%] globalBorder rounded-xl p-[5px] bg-[rgba(15,15,15,1)]", children: /* @__PURE__ */ jsx32("div", { className: " flex items-center justify-center rounded-lg  w-8 h-8 bg-gradient-to-l from-[rgba(54,129,198,1)] to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ jsx32(ArrowDownIcon, {}) }) })
+    /* @__PURE__ */ jsx33("div", { className: "absolute right-[50%] top-0 translate-x-1/2 translate-y-[-60%] globalBorder rounded-xl p-[5px] bg-[rgba(15,15,15,1)]", children: /* @__PURE__ */ jsx33("div", { className: " flex items-center justify-center rounded-lg  w-8 h-8 bg-gradient-to-l from-[rgba(54,129,198,1)] to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ jsx33(ArrowDownIcon, {}) }) })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-import { useState as useState7, useEffect as useEffect6, useRef as useRef2, useMemo as useMemo6 } from "react";
+import { useState as useState7, useEffect as useEffect6, useRef as useRef2, useMemo as useMemo7 } from "react";
 
 // src/components/TxConfigForm/TokenPicker.tsx
-import { useState as useState6, useMemo as useMemo4 } from "react";
+import { useState as useState6, useMemo as useMemo5 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx34, jsxs as jsxs13 } from "react/jsx-runtime";
 var TokenPicker = ({
   onCloseClick,
   tokens,
@@ -1729,7 +1789,7 @@ var TokenPicker = ({
       onCloseClick();
     }
   };
-  const filteredTokens = useMemo4(() => {
+  const filteredTokens = useMemo5(() => {
     const isMatch = (value, searchValue2) => value.toLowerCase().indexOf(searchValue2.toLowerCase()) > -1;
     return tokens?.filter(
       (token) => isMatch(token.symbol, searchValue) || isMatch(token.name, searchValue) || token.address === searchValue.toLowerCase()
@@ -1738,24 +1798,24 @@ var TokenPicker = ({
     );
   }, [searchValue, tokens]);
   return modalRoot ? createPortal(
-    /* @__PURE__ */ jsx33(
+    /* @__PURE__ */ jsx34(
       "div",
       {
         onClick: onBackdropClick,
         className: "box-border fixed h-full w-full z-[999] top-0 left-0 bg-[rgba(0,0,0,0.8)] flex items-center justify-center p-5",
         children: /* @__PURE__ */ jsxs13("div", { className: "relative bg-black rounded-3xl p-6 max-h-[70%] flex flex-col text-base text-white w-[452px] h-[70%] border border-solid border-[rgba(255,255,255,0.2)]", children: [
-          /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(
             "div",
             {
               onClick: onCloseClick,
               className: "absolute top-4 right-4 cursor-pointer",
-              children: /* @__PURE__ */ jsx33(CloseIcon, {})
+              children: /* @__PURE__ */ jsx34(CloseIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx33("p", { className: "text-base mb-4", children: "Pick a token" }),
+          /* @__PURE__ */ jsx34("p", { className: "text-base mb-4", children: "Pick a token" }),
           /* @__PURE__ */ jsxs13("div", { className: "flex items-center border border-solid border-[rgba(255,255,255,0.1)] rounded-lg py-0 px-3 gap-2 bg-[rgba(15,15,15,1)]", children: [
-            /* @__PURE__ */ jsx33("div", { className: "w-6 h-6", children: /* @__PURE__ */ jsx33(SearchIcon, {}) }),
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34("div", { className: "w-6 h-6", children: /* @__PURE__ */ jsx34(SearchIcon, {}) }),
+            /* @__PURE__ */ jsx34(
               "input",
               {
                 placeholder: "Search name or paste address",
@@ -1765,7 +1825,7 @@ var TokenPicker = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx33("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx34("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ jsxs13(
             "div",
             {
               className: `flex gap-2 py-1 px-2 items-center bg-[rgb(15,15,15)] rounded-2xl border border-solid border-[rgba(255,255,255,0.1)] hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35, 35, 35)]" : ""}`,
@@ -1774,14 +1834,14 @@ var TokenPicker = ({
                 onCloseClick();
               },
               children: [
-                /* @__PURE__ */ jsx33("img", { src: token.image, alt: token.name, className: "w-5" }),
-                /* @__PURE__ */ jsx33("div", { className: "text-sm", children: token.symbol })
+                /* @__PURE__ */ jsx34("img", { src: token.image, alt: token.name, className: "w-5" }),
+                /* @__PURE__ */ jsx34("div", { className: "text-sm", children: token.symbol })
               ]
             },
             token.address
           )) }),
-          /* @__PURE__ */ jsx33("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
-          /* @__PURE__ */ jsx33("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ jsxs13(
+          /* @__PURE__ */ jsx34("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
+          /* @__PURE__ */ jsx34("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ jsxs13(
             "div",
             {
               className: `flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35,35,35)]" : ""}`,
@@ -1790,29 +1850,29 @@ var TokenPicker = ({
                 onCloseClick();
               },
               children: [
-                token.image ? /* @__PURE__ */ jsx33(
+                token.image ? /* @__PURE__ */ jsx34(
                   "img",
                   {
                     src: token.image,
                     alt: token.name,
                     className: "token-picker__all__logo"
                   }
-                ) : /* @__PURE__ */ jsx33("div", { className: "flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
+                ) : /* @__PURE__ */ jsx34("div", { className: "flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
                 /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
                   /* @__PURE__ */ jsxs13("div", { className: "flex flex-col leading-[16px]", children: [
-                    /* @__PURE__ */ jsx33("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
-                    /* @__PURE__ */ jsx33("div", { className: "text-[#888] text-[11px]", children: token.symbol })
+                    /* @__PURE__ */ jsx34("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
+                    /* @__PURE__ */ jsx34("div", { className: "text-[#888] text-[11px]", children: token.symbol })
                   ] }),
-                  signer && /* @__PURE__ */ jsx33(Fragment4, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ jsx33("div", { className: "text-xs", children: weiToHumanReadable({
+                  signer && /* @__PURE__ */ jsx34(Fragment4, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ jsx34("div", { className: "text-xs", children: weiToHumanReadable({
                     amount: balances[token.address]?.toString() || "0",
                     decimals: token.decimals,
                     precisionFractionalPlaces: 4
-                  }) }) : /* @__PURE__ */ jsx33(Skeleton, { width: "w-12", height: "h-3" }) })
+                  }) }) : /* @__PURE__ */ jsx34(Skeleton, { width: "w-12", height: "h-3" }) })
                 ] })
               ]
             },
             `${index}_${token.address}`
-          )) : /* @__PURE__ */ jsx33("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx33("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
+          )) : /* @__PURE__ */ jsx34("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx34("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
         ] })
       }
     ),
@@ -1821,7 +1881,7 @@ var TokenPicker = ({
 };
 
 // src/components/TxConfigForm/ChainListElement.tsx
-import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
 var ChainListElement = ({
   chain,
   setSrcChain,
@@ -1839,21 +1899,21 @@ var ChainListElement = ({
           setChainListShown(false);
         },
         children: [
-          /* @__PURE__ */ jsx34("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
+          /* @__PURE__ */ jsx35("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
           chain.displayName
         ]
       }
     ),
-    index !== length - 1 && /* @__PURE__ */ jsx34("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
+    index !== length - 1 && /* @__PURE__ */ jsx35("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
   ] }, `${chain.ecosystem}-${chain.chainId}`);
 };
 
 // src/components/TxConfigForm/BalanceComponent.tsx
-import { useMemo as useMemo5 } from "react";
+import { useMemo as useMemo6 } from "react";
 import BigNumber3 from "bignumber.js";
-import { Fragment as Fragment5, jsx as jsx35, jsxs as jsxs15 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
 var BalanceComponent = ({ srcToken, balances }) => {
-  const balanceText = useMemo5(() => {
+  const balanceText = useMemo6(() => {
     if (!balances || !srcToken) return "0";
     if (balances[srcToken.address]?.toString() === "0") return "0";
     const fullHumanReadable = weiToHumanReadable({
@@ -1879,12 +1939,12 @@ var BalanceComponent = ({ srcToken, balances }) => {
       decimals: srcToken.decimals,
       precisionFractionalPlaces: 4
     }) : 0,
-    /* @__PURE__ */ jsx35("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
+    /* @__PURE__ */ jsx36("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-import { jsx as jsx36, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
 var SwapPanel = ({
   amount,
   setAmount,
@@ -1916,7 +1976,7 @@ var SwapPanel = ({
         weiToHumanReadable({
           amount: balances[srcToken.address]?.toString() || "0",
           decimals: srcToken.decimals,
-          precisionFractionalPlaces: 4
+          precisionFractionalPlaces: srcToken.decimals
         })
       );
   };
@@ -1926,15 +1986,15 @@ var SwapPanel = ({
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [chainListShown]);
-  const chainListOptions = useMemo6(
+  const chainListOptions = useMemo7(
     () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
     [supportedChains, srcChain]
   );
   return /* @__PURE__ */ jsxs16("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
     /* @__PURE__ */ jsxs16("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
       /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx36("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
-        /* @__PURE__ */ jsx36(
+        /* @__PURE__ */ jsx37("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
+        /* @__PURE__ */ jsx37(
           "input",
           {
             className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
@@ -1953,7 +2013,7 @@ var SwapPanel = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx36("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ jsx37(
         UsdPrice,
         {
           prices,
@@ -1974,7 +2034,7 @@ var SwapPanel = ({
             setTokenListShown((state) => !state);
           },
           children: [
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               "img",
               {
                 height: 16,
@@ -1983,12 +2043,12 @@ var SwapPanel = ({
                 alt: srcToken?.name
               }
             ),
-            /* @__PURE__ */ jsx36("div", { children: srcToken?.symbol }),
-            /* @__PURE__ */ jsx36(DownArrowIcon, {})
+            /* @__PURE__ */ jsx37("div", { children: srcToken?.symbol }),
+            /* @__PURE__ */ jsx37(DownArrowIcon, {})
           ]
         }
       ),
-      tokenListShown && /* @__PURE__ */ jsx36(
+      tokenListShown && /* @__PURE__ */ jsx37(
         TokenPicker,
         {
           onCloseClick: () => setTokenListShown(false),
@@ -1999,12 +2059,12 @@ var SwapPanel = ({
           balances
         }
       ),
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37(
         "div",
         {
           onClick: handleMaxClick,
           className: "flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer",
-          children: signer && /* @__PURE__ */ jsx36(BalanceComponent, { balances, srcToken })
+          children: signer && /* @__PURE__ */ jsx37(BalanceComponent, { balances, srcToken })
         }
       ),
       /* @__PURE__ */ jsxs16(
@@ -2014,7 +2074,7 @@ var SwapPanel = ({
           className: "bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2",
           onClick: () => setChainListShown((prev) => !prev),
           children: [
-            /* @__PURE__ */ jsx36(
+            /* @__PURE__ */ jsx37(
               "img",
               {
                 width: "16",
@@ -2023,17 +2083,17 @@ var SwapPanel = ({
                 alt: srcChain?.name
               }
             ),
-            /* @__PURE__ */ jsx36("div", { children: srcChain?.displayName }),
-            /* @__PURE__ */ jsx36(DownArrowIcon, {})
+            /* @__PURE__ */ jsx37("div", { children: srcChain?.displayName }),
+            /* @__PURE__ */ jsx37(DownArrowIcon, {})
           ]
         }
       ),
-      chainListShown && /* @__PURE__ */ jsx36(
+      chainListShown && /* @__PURE__ */ jsx37(
         "ul",
         {
           ref: listRef,
           className: "bg-black globalBorder rounded-lg whitespace-nowrap z-1 right-0 top-10 px-2 max-w-full max-h-[40vh] overflow-auto absolute text-sm z-20",
-          children: chainListOptions.map((chain, index) => /* @__PURE__ */ jsx36(
+          children: chainListOptions.map((chain, index) => /* @__PURE__ */ jsx37(
             ChainListElement,
             {
               index,
@@ -2050,9 +2110,9 @@ var SwapPanel = ({
 };
 
 // src/components/TxConfigForm/ErrorField.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx38 } from "react/jsx-runtime";
 var ErrorField = ({ error }) => {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     "div",
     {
       className: `flex justify-center mb-1 items-center w-full rounded-2xl bg-x_error_background border border-solid ${error.length > 0 ? "border-x_error_border" : "border-transparent"}`,
@@ -2062,15 +2122,15 @@ var ErrorField = ({ error }) => {
 };
 
 // src/components/TxConfigForm/Description.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 var Description = ({ description }) => {
-  return /* @__PURE__ */ jsx38("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ jsx38("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
+  return /* @__PURE__ */ jsx39("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ jsx39("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
 };
 
 // src/components/TxConfigForm/Button.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx40 } from "react/jsx-runtime";
 var Button = ({ children, onClick, type, disabled }) => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     "button",
     {
       className: "text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25",
@@ -2083,8 +2143,9 @@ var Button = ({ children, onClick, type, disabled }) => {
 };
 
 // src/components/TxConfigForm/Form.tsx
-import { jsx as jsx40, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs17 } from "react/jsx-runtime";
 var Form = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -2131,14 +2192,24 @@ var Form = ({
     setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
   }, [supportedChains, dstChainId]);
   useEffect7(() => {
-    setDstToken(
-      dstChain?.tokens.find(
+    (async () => {
+      if (!dstChain) {
+        return;
+      }
+      let dstTokenResult = dstChain?.tokens.find(
         (token) => token.address.toLowerCase() === dstTokenAddr.toLowerCase()
-      )
-    );
+      );
+      if (!dstTokenResult) {
+        dstTokenResult = await getCustomTokenData(
+          dstChain,
+          dstTokenAddr.toLowerCase()
+        );
+      }
+      setDstToken(dstTokenResult);
+    })();
   }, [dstChain]);
   useEffect7(() => {
-    if (srcChain && srcToken && dstChain && debouncedAmount && paymentToken && slippage) {
+    if (integratorId && srcChain && srcToken && dstChain && debouncedAmount && paymentToken && slippage) {
       setFormError("");
       const timeout = setTimeout(() => {
         setFormError("Getting Route is taking longer than usually");
@@ -2150,6 +2221,7 @@ var Form = ({
           `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`
         );
       getRoute({
+        integratorId,
         fromAmount: ethers3.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
         fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
         fromChain: srcChain.chainId,
@@ -2221,7 +2293,7 @@ var Form = ({
       className: "flex flex-col gap-2 z-10 my-0 p-2 md:p-4 rounded-3xl overflow-hidden font-light sm:w-x_desktop",
       onSubmit: handleSubmit,
       children: [
-        /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(
           TopBar,
           {
             signer,
@@ -2231,7 +2303,7 @@ var Form = ({
             onClose
           }
         ),
-        settingsShown && /* @__PURE__ */ jsx40(
+        settingsShown && /* @__PURE__ */ jsx41(
           Settings,
           {
             expressChecked,
@@ -2241,9 +2313,9 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? /* @__PURE__ */ jsx40(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
-          desc && /* @__PURE__ */ jsx40(Description, { description: desc }),
-          /* @__PURE__ */ jsx40(
+        historyTabShown ? /* @__PURE__ */ jsx41(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
+          desc && /* @__PURE__ */ jsx41(Description, { description: desc }),
+          /* @__PURE__ */ jsx41(
             SwapPanel,
             {
               amount,
@@ -2259,7 +2331,7 @@ var Form = ({
               setExceedsExpressDeliveryLimit
             }
           ),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx41(
             Summary,
             {
               isGettingRoute,
@@ -2268,7 +2340,7 @@ var Form = ({
               dstChain
             }
           ),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx41(
             FeesDetails,
             {
               route,
@@ -2282,8 +2354,8 @@ var Form = ({
               setFeesDetailsShown
             }
           ),
-          formError.length > 0 && /* @__PURE__ */ jsx40(ErrorField, { error: formError }),
-          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ jsx40(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ jsx40(
+          formError.length > 0 && /* @__PURE__ */ jsx41(ErrorField, { error: formError }),
+          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ jsx41(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ jsx41(
             Button,
             {
               type: "submit",
@@ -2298,8 +2370,9 @@ var Form = ({
 };
 
 // src/components/TxConfigForm/index.tsx
-import { jsx as jsx41, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs18 } from "react/jsx-runtime";
 var TxConfigForm = ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -2316,19 +2389,20 @@ var TxConfigForm = ({
     }
   };
   const queryClient = new QueryClient();
-  const wagmiConfig = useMemo7(
+  const wagmiConfig = useMemo8(
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ jsx41(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx41(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx42(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx42(
     "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,
       children: /* @__PURE__ */ jsxs18("div", { className: "relative bg-black rounded-3xl overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           Form,
           {
+            integratorId,
             dstChainId,
             dstTokenAddr,
             customContractCalls,
@@ -2338,12 +2412,13 @@ var TxConfigForm = ({
             onClose
           }
         ),
-        /* @__PURE__ */ jsx41(PoweredBy, {})
+        /* @__PURE__ */ jsx42(PoweredBy, {})
       ] })
     }
   ) }) });
 };
 var openTxConfigForm = async ({
+  integratorId,
   dstChainId,
   dstTokenAddr,
   customContractCalls,
@@ -2354,9 +2429,10 @@ var openTxConfigForm = async ({
     return await new Promise(async (resolve) => {
       await waitForInitialization();
       xswapRoot.render(
-        /* @__PURE__ */ jsx41(
+        /* @__PURE__ */ jsx42(
           TxConfigForm,
           {
+            integratorId,
             dstChainId,
             dstTokenAddr,
             customContractCalls,
@@ -2379,27 +2455,26 @@ var openTxConfigForm = async ({
 };
 
 // src/components/TxStatusButton/index.tsx
-import { useMemo as useMemo8, useState as useState9 } from "react";
-import { Fragment as Fragment6, jsx as jsx42, jsxs as jsxs19 } from "react/jsx-runtime";
+import { useMemo as useMemo9, useState as useState9 } from "react";
+import { Fragment as Fragment6, jsx as jsx43, jsxs as jsxs19 } from "react/jsx-runtime";
 var TxStatusButton = ({ transaction }) => {
   const {
-    fromChain,
-    fromChainImage,
-    fromToken,
-    fromTokenImage,
-    fromAmount,
-    toChain,
-    toChainImage,
+    srcChain: fromChain,
+    srcChainImage: fromChainImage,
+    srcToken: fromToken,
+    srcTokenImage: fromTokenImage,
+    srcAmount: fromAmount,
+    dstChain: toChain,
+    dstChainImage: toChainImage,
     isDone,
-    txHash,
     explorer
   } = transaction;
   const [isWide, setIsWide] = useState9(false);
-  const background = useMemo8(
+  const background = useMemo9(
     () => 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(
+  const border = useMemo9(
     () => isDone ? "border border-solid border-x_green_dark" : "border border-solid border-x_blue_dark",
     [isDone]
   );
@@ -2411,7 +2486,7 @@ var TxStatusButton = ({ transaction }) => {
         children: [
           /* @__PURE__ */ jsxs19("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
             /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43(
                 "img",
                 {
                   className: "w-5 h-5",
@@ -2419,26 +2494,32 @@ var TxStatusButton = ({ transaction }) => {
                   alt: "source chain"
                 }
               ),
-              /* @__PURE__ */ jsx42("div", { children: fromChain }),
-              /* @__PURE__ */ jsx42("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx42(ArrowRightIcon, {}) }),
-              /* @__PURE__ */ jsx42("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
-              /* @__PURE__ */ jsx42("div", { children: toChain })
+              /* @__PURE__ */ jsx43("div", { children: fromChain }),
+              /* @__PURE__ */ jsx43("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx43(ArrowRightIcon, {}) }),
+              /* @__PURE__ */ jsx43("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
+              /* @__PURE__ */ jsx43("div", { children: toChain })
             ] }),
             /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx42("div", { children: "Sent" }),
-              /* @__PURE__ */ jsx42("div", { children: fromAmount }),
-              /* @__PURE__ */ jsx42("div", { children: fromToken }),
-              /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43("div", { children: "Sent" }),
+              /* @__PURE__ */ jsx43("div", { children: fromAmount }),
+              /* @__PURE__ */ jsx43("div", { children: fromToken }),
+              fromTokenImage ? /* @__PURE__ */ jsx43(
                 "img",
                 {
                   className: "w-5 h-5",
                   src: fromTokenImage,
                   alt: "source token"
                 }
+              ) : /* @__PURE__ */ jsx43(
+                UnknownTokenLogo,
+                {
+                  tokenName: "?",
+                  className: "token-select__generated-logo"
+                }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx42(
+          /* @__PURE__ */ jsx43(
             "a",
             {
               href: explorer,
@@ -2446,21 +2527,21 @@ var TxStatusButton = ({ transaction }) => {
               rel: "noreferrer",
               className: "no-underline cursor-pointer",
               "aria-label": "Show the transaction in the chain explorer",
-              children: /* @__PURE__ */ jsx42("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx42(ArrowUpRightIcon, {}) })
+              children: /* @__PURE__ */ jsx43("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx43(ArrowUpRightIcon, {}) })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       "div",
       {
         className: `text-white rounded-xl cursor-pointer ${background} ${border}`,
         children: /* @__PURE__ */ jsxs19("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
-          /* @__PURE__ */ jsx42(ArrowLeftIcon, {}),
-          /* @__PURE__ */ jsx42("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ jsx42("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ jsx42(CheckIcon, {}) }) : /* @__PURE__ */ jsxs19(Fragment6, { children: [
-            /* @__PURE__ */ jsx42("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx42(XSwapLogo, {}) }),
-            /* @__PURE__ */ jsx42("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ jsx42(CircularProgressIcon, {}) })
+          /* @__PURE__ */ jsx43(ArrowLeftIcon, {}),
+          /* @__PURE__ */ jsx43("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ jsx43("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ jsx43(CheckIcon, {}) }) : /* @__PURE__ */ jsxs19(Fragment6, { children: [
+            /* @__PURE__ */ jsx43("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx43(XSwapLogo, {}) }),
+            /* @__PURE__ */ jsx43("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ jsx43(CircularProgressIcon, {}) })
           ] }) })
         ] })
       }
@@ -2487,25 +2568,66 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
   }
 };
 var renderTxStatusButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx42(TxStatusButton, { transaction: item }, item.txHash));
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx43(TxStatusButton, { transaction: item }, item.txHash));
   txStatusRoot.render(buttons);
 };
 
 // src/components/Skeleton/index.tsx
-import { jsx as jsx43 } from "react/jsx-runtime";
+import { jsx as jsx44 } from "react/jsx-runtime";
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ jsx43("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+  return /* @__PURE__ */ jsx44("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
 };
 
 // src/services/integrations/monitoring.ts
 import retry from "async-retry";
-var monitorTransactionStatus = async (txChainId, txHash) => {
+
+// src/services/blockchain.ts
+import { ethers as ethers4 } from "ethers";
+var getCustomTokenData = async (chain, tokenAddress) => {
+  const rpcUrl = chain.publicRpcUrls[0];
+  const customTokenContract = new ethers4.Contract(
+    tokenAddress.toLowerCase(),
+    ERC20Abi,
+    ethers4.getDefaultProvider(rpcUrl)
+  );
+  try {
+    const query = async (contract, method, args = []) => {
+      if (contract?.provider) {
+        const response = await contract[method](...args);
+        return response;
+      }
+      return null;
+    };
+    const responses = await Promise.all([
+      query(customTokenContract, "decimals"),
+      query(customTokenContract, "name"),
+      query(customTokenContract, "symbol")
+    ]);
+    const [decimals, name, symbol] = responses;
+    return {
+      address: tokenAddress,
+      symbol,
+      name,
+      decimals,
+      quickPick: false,
+      supported: true,
+      priority: 0
+    };
+  } catch (_) {
+    throw new Error(
+      `Provided token ${tokenAddress} does not exists on chain ${chain.displayName}`
+    );
+  }
+};
+
+// src/services/integrations/monitoring.ts
+var renderTxStatus = async (txChainId, txHash) => {
   const txReceipt = await getTxReceipt(txChainId, txHash);
   const supportedChains = (await getChains()).filter(
     ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
   );
   const messageSentEvent = txReceipt.logs?.find((log) => {
-    return log.topics[0] === ethers4.utils.id(MSG_SENT_EVENT_SIG);
+    return log.topics[0] === ethers5.utils.id(MSG_SENT_EVENT_SIG);
   });
   if (!messageSentEvent) {
     throw new Error(
@@ -2513,7 +2635,7 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
     );
   }
   const messageId = messageSentEvent?.topics[1];
-  const iface = new ethers4.utils.Interface(MSG_SENT_EVENT_ABI);
+  const iface = new ethers5.utils.Interface(MSG_SENT_EVENT_ABI);
   const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
   if (!decodedMessageSentEvent) {
     throw new Error(
@@ -2523,9 +2645,16 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
   const srcChain = supportedChains.find(
     (chain) => chain.chainId === txChainId.toString()
   );
-  const srcToken = srcChain?.tokens.find(
+  if (!srcChain) {
+    throw new Error(`Unknown src chain ${txChainId}`);
+  }
+  const tokenAddress = decodedMessageSentEvent.args?.token.toString();
+  let srcToken = srcChain.tokens.find(
     (token) => token.address === decodedMessageSentEvent.args?.token.toString()
   );
+  if (!srcToken) {
+    srcToken = await getCustomTokenData(srcChain, tokenAddress);
+  }
   const dstChain = supportedChains.find(
     (chain) => chain.ccipChainId === decodedMessageSentEvent.args?.destinationChainSelector?.toString()
   );
@@ -2533,19 +2662,20 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
   if (!dstChainId) {
     throw new Error(`Unknown destination chain!`);
   }
+  const tokenAmount = weiToHumanReadable({
+    amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
+    decimals: srcToken?.decimals || 18,
+    precisionFractionalPlaces: 4
+  });
   const transaction = {
     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
-    }),
+    srcChain: srcChain.displayName,
+    srcChainImage: srcChain.image,
+    dstChain: dstChain.displayName,
+    dstChainImage: dstChain.image,
+    srcToken: srcToken?.symbol,
+    srcTokenImage: srcToken?.image,
+    srcAmount: tokenAmount === "0" ? "<0.0001" : tokenAmount,
     isDone: false,
     explorer: `${CCIP_EXPLORER}/tx/${txHash}`
   };
@@ -2555,16 +2685,16 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
   if (!xSwapRouterOnDestinationAddress) {
     throw new Error(`Unknown destination XSwapRouter!`);
   }
-  const xSwapRouterOnDestination = new ethers4.Contract(
+  const xSwapRouterOnDestination = new ethers5.Contract(
     xSwapRouterOnDestinationAddress,
     MSG_RECEIVED_EVENT_ABI,
-    ethers4.getDefaultProvider(
+    ethers5.getDefaultProvider(
       supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
     )
   );
   const msgReceivedEventFilter = {
     address: xSwapRouterOnDestinationAddress,
-    topics: [ethers4.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
+    topics: [ethers5.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
   };
   const onSuccess = async () => {
     updateTransactionDoneInRenderedTransactions(txHash);
@@ -2575,6 +2705,11 @@ var monitorTransactionStatus = async (txChainId, txHash) => {
     removeTransactionFromRenderedTransactions(txHash);
     renderTxStatusButtons();
   };
+  getTxStatus({ transferId: messageId }).then((response) => {
+    if (response.status === "DONE") {
+      onSuccess();
+    }
+  });
   xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
 };
 var getTxReceipt = async (txChainId, txHash) => {
@@ -2582,7 +2717,7 @@ var getTxReceipt = async (txChainId, txHash) => {
     const chain = (await getChains()).find(
       (chain2) => chain2.chainId === txChainId
     );
-    const provider = new ethers4.providers.JsonRpcProvider(
+    const provider = new ethers5.providers.JsonRpcProvider(
       chain?.publicRpcUrls[0]
     );
     return await retry(async () => {
@@ -2600,7 +2735,8 @@ var getTxReceipt = async (txChainId, txHash) => {
 };
 
 // src/services/integrations/transactions.ts
-var getSwapTx = async ({
+var openTransactionModal = async ({
+  integratorId,
   dstChain,
   dstToken,
   customContractCalls = [],
@@ -2611,6 +2747,7 @@ var getSwapTx = async ({
   );
   validateSwapTxData(supportedChains, dstChain, dstToken);
   const route = await openTxConfigForm({
+    integratorId,
     dstChainId: dstChain,
     dstTokenAddr: dstToken,
     customContractCalls,
@@ -2626,19 +2763,27 @@ var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
   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`);
+  if (!isETHAddressValid(dstToken)) {
+    throw new Error(
+      `Provided token address ${dstToken} on chain ${dstChain} is not correct`
+    );
   }
 };
 
 // src/index.ts
 initDocument();
+var XPay = {
+  openTransactionModal,
+  renderTxStatus
+};
+var src_default = XPay;
 export {
   ContractName,
   Ecosystem,
   Environment,
   Web3Environment,
   XSwapCallType,
-  getSwapTx,
-  monitorTransactionStatus
+  src_default as default,
+  openTransactionModal,
+  renderTxStatus
 };