@xswap-link/sdk 0.2.0 → 0.2.2

package/dist/index.js

@@ -30,135 +30,18 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
-  ADDRESSES: () => ADDRESSES,
-  Alert: () => Alert,
-  BALANCES_CHUNK_SIZE: () => BALANCES_CHUNK_SIZE,
-  BatchQueryAbi: () => BatchQueryAbi,
-  CCIP_EXPLORER: () => CCIP_EXPLORER,
   ContractName: () => ContractName,
-  DEFAULT_ECOSYSTEM: () => DEFAULT_ECOSYSTEM,
-  DEFAULT_SOURCE_CHAIN_ID: () => DEFAULT_SOURCE_CHAIN_ID,
-  DELIVERY_TIME: () => DELIVERY_TIME,
-  ERC20Abi: () => ERC20Abi,
-  EXPRESS_DELIVERY_TIME: () => EXPRESS_DELIVERY_TIME,
   Ecosystem: () => Ecosystem,
   Environment: () => Environment,
-  IERC20: () => IERC20,
-  MINIMUM_DISPLAYED_TOKEN_AMOUNT: () => MINIMUM_DISPLAYED_TOKEN_AMOUNT,
-  NUMBER_INPUT_REGEX: () => NUMBER_INPUT_REGEX,
-  ROUTE_TIMEOUT_MS: () => ROUTE_TIMEOUT_MS,
-  SLIPPAGE_PRESETS: () => SLIPPAGE_PRESETS,
-  Skeleton: () => Skeleton,
-  TxHistoryButton: () => TxHistoryButton,
   Web3Environment: () => Web3Environment,
   XSwapCallType: () => XSwapCallType,
-  addTransactionToRenderedTransactions: () => addTransactionToRenderedTransactions,
-  chunkArray: () => chunkArray,
-  deepMergeObjects: () => deepMergeObjects,
-  findPlaceholderIndex: () => findPlaceholderIndex,
-  generateApproveTxData: () => generateApproveTxData,
-  generateRandomBigNumber: () => generateRandomBigNumber,
-  generateStakingCalls: () => generateStakingCalls,
-  generateUniqueRandomBigNumber: () => generateUniqueRandomBigNumber,
-  getBalanceOf: () => getBalanceOf,
-  getBalances: () => getBalances,
-  getBridgeTokens: () => getBridgeTokens,
-  getChainData: () => getChainData,
-  getChains: () => getChains,
-  getDate: () => getDate,
-  getHistory: () => getHistory,
-  getPrices: () => getPrices,
-  getRoute: () => getRoute,
   getSwapTx: () => getSwapTx,
-  getTokens: () => getTokens,
-  monitorTransactionStatus: () => monitorTransactionStatus,
-  openTxConfigForm: () => openTxConfigForm,
-  removeTransactionFromRenderedTransactions: () => removeTransactionFromRenderedTransactions,
-  renderTxHistoryButtons: () => renderTxHistoryButtons,
-  replaceNull: () => replaceNull,
-  safeBigNumberFrom: () => safeBigNumberFrom,
-  shortAddress: () => shortAddress,
-  updateTransactionDoneInRenderedTransactions: () => updateTransactionDoneInRenderedTransactions,
-  weiToHumanReadable: () => weiToHumanReadable
+  monitorTransactionStatus: () => monitorTransactionStatus
 });
 module.exports = __toCommonJS(src_exports);
 
-// src/components/Alert/index.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Alert = ({ desc }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2", children: [
-    "\u26A0\uFE0F ",
-    desc
-  ] });
-};
-
-// src/components/TxConfigForm/index.tsx
-var import_react11 = require("react");
+// src/config/init.ts
 var import_client = require("react-dom/client");
-var import_react_query = require("@tanstack/react-query");
-var import_wagmi3 = require("wagmi");
-
-// src/config/wagmiConfig.ts
-var import_wagmi = require("wagmi");
-var import_connectors = require("wagmi/connectors");
-var WagmiChains = __toESM(require("viem/chains"));
-var import_chains = require("viem/chains");
-var getWagmiConfig = (supportedChains) => {
-  const chains = mapChains(supportedChains);
-  const transports = mapTransports(chains);
-  return (0, import_wagmi.createConfig)({
-    chains,
-    transports,
-    connectors: [
-      (0, import_connectors.injected)(),
-      (0, import_connectors.metaMask)(),
-      (0, import_connectors.safe)(),
-      (0, import_connectors.walletConnect)({ projectId: "c392898b45ac587a280b5eb33e92aeb0" })
-    ]
-  });
-};
-var mapChains = (supportedChains) => {
-  const result = [import_chains.mainnet];
-  result.push(
-    ...Object.values(WagmiChains).filter(
-      (chain) => chain.id !== import_chains.mainnet.id && supportedChains.some(({ chainId }) => chainId === chain.id.toString())
-    )
-  );
-  return result;
-};
-var mapTransports = (chains) => {
-  const transports = {};
-  chains.forEach((chain) => {
-    transports[chain.id] = (0, import_wagmi.http)();
-  });
-  return transports;
-};
-
-// src/components/icons/CloseIcon.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var CloseIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "svg",
-    {
-      height: "18",
-      width: "18",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 10.312 8.319",
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "path",
-        {
-          fill: "white",
-          d: "M6.073 4.078 10.151 0H9.093A1.87 1.87 0 0 0 7.77.548L5.157 3.162 2.543.548A1.87 1.87 0 0 0 1.22 0H.161L4.24 4.078 0 8.318h1.058a1.87 1.87 0 0 0 1.322-.547l2.777-2.777 2.776 2.777a1.869 1.869 0 0 0 1.322.548h1.058Z"
-        }
-      )
-    }
-  );
-};
-
-// src/components/TxConfigForm/Form.tsx
-var import_react10 = require("react");
-var import_ethers5 = require("ethers");
-var import_wagmi2 = require("wagmi");
 
 // xswap.config.ts
 var xSwapConfig = {
@@ -174,6 +57,73 @@ var xswap_config_default = {
   ...xSwapConfigLocal
 };
 
+// package.json
+var version = "0.2.2";
+
+// src/config/init.ts
+var xswapRoot;
+var txStatusRoot;
+var initDocument = () => {
+  if (typeof document === "undefined") {
+    throw new Error("Can't render XPay components from server side.");
+  }
+  fetch(`${xswap_config_default.apiUrl}/sdk/css?data={"version": "${version}"}`).then(
+    async (css) => {
+      const style = document.createElement("style");
+      style.textContent = await css.text();
+      document.body.appendChild(style);
+    }
+  );
+  const xswapElement = document.createElement("div");
+  xswapElement.setAttribute("id", "xswap-modal");
+  document.body.appendChild(xswapElement);
+  xswapRoot = (0, import_client.createRoot)(xswapElement);
+  const txStatusElement = document.createElement("div");
+  txStatusElement.setAttribute("id", "xswap-tx-status");
+  txStatusElement.setAttribute("class", "xswap-tx-status");
+  document.body.appendChild(txStatusElement);
+  txStatusRoot = (0, import_client.createRoot)(txStatusElement);
+};
+
+// 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}`, {
@@ -202,26 +152,6 @@ async function getChains(ecosystem) {
   return _sendRequest(`/chains?data=${JSON.stringify({ ecosystem })}
     `);
 }
-async function getChainData(chainId, ecosystem) {
-  return _sendRequest(
-    `/chains?data=${JSON.stringify({
-      chainId,
-      ecosystem
-    })}`
-  );
-}
-async function getTokens(chainId, address, ecosystem) {
-  return _sendRequest(
-    `/tokens?data=${JSON.stringify({
-      chainId,
-      address,
-      ecosystem
-    })}`
-  );
-}
-async function getBridgeTokens() {
-  return _sendRequest(`/bridgeTokens`);
-}
 async function getHistory(payload) {
   return await _sendRequest(
     `/history?${new URLSearchParams({
@@ -240,45 +170,6 @@ async function getPrices(payload) {
 // src/services/integrations/customCalls/staking.ts
 var import_ethers3 = require("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
 var import_ethers2 = require("ethers");
 
@@ -305,16 +196,6 @@ var weiToHumanReadable = ({
   }
   return res;
 };
-var generateRandomBigNumber = (length) => {
-  return import_ethers.BigNumber.from(import_ethers.utils.randomBytes(length));
-};
-var generateUniqueRandomBigNumber = (length, existingValues) => {
-  let result;
-  while (result === void 0 || existingValues.includes(result)) {
-    result = generateRandomBigNumber(length);
-  }
-  return result;
-};
 
 // src/contracts/abi/BatchQuery.json
 var BatchQuery_default = [
@@ -649,20 +530,18 @@ 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);
-var getBalanceOf = async (wallet, token, rpcUrl) => {
-  const provider = import_ethers2.ethers.getDefaultProvider(rpcUrl);
-  if (token === import_ethers2.ethers.constants.AddressZero) {
-    return import_ethers2.ethers.utils.formatEther(await provider.getBalance(wallet));
-  }
-  const contract = new import_ethers2.ethers.Contract(token, ERC20Abi, provider);
-  return import_ethers2.ethers.utils.formatUnits(
-    await contract.balanceOf(wallet),
-    await contract.decimals()
-  );
-};
 var getBalances = async (chain, wallet) => {
   return {
     ...await getNativeBalance(chain, wallet),
@@ -713,35 +592,6 @@ var getErc20Balances = async (chain, wallet) => {
   });
   return balances;
 };
-var generateApproveTxData = (tokenAddress, spender, amount) => {
-  return tokenAddress !== import_ethers2.ethers.constants.AddressZero ? {
-    to: tokenAddress,
-    value: safeBigNumberFrom("0"),
-    data: IERC20.encodeFunctionData("approve", [spender, amount])
-  } : void 0;
-};
-var findPlaceholderIndex = (abi, funName, funParams, placeholderValue) => {
-  if (funParams.flat(Infinity).filter((param) => param === placeholderValue).length !== 1) {
-    throw new Error("Random placeholder value must be provided and unique.");
-  }
-  const iface = new import_ethers2.ethers.utils.Interface(abi);
-  const functionFragment = iface.getFunction(funName);
-  if (!functionFragment) {
-    throw new Error(`Can't find function "${funName}" in provided ABI.`);
-  }
-  const encodedFunData = iface.encodeFunctionData(functionFragment, funParams);
-  const paramData = encodedFunData.slice(10);
-  const chunks = [];
-  for (let i = 0; i < paramData.length; i += 64) {
-    chunks.push(paramData.slice(i, i + 64));
-  }
-  const searchValue = placeholderValue.toHexString().slice(2).padStart(64, "0");
-  const result = chunks.findIndex((chunk) => chunk === searchValue);
-  if (result === -1) {
-    throw new Error("Randomized parameter not found in the encoded data.");
-  }
-  return result;
-};
 
 // src/utils/strings.ts
 var shortAddress = (address) => {
@@ -753,19 +603,6 @@ var shortAddress = (address) => {
 
 // src/utils/index.ts
 var import_date_fns = require("date-fns");
-var replaceNull = (values, newValue) => {
-  const modifiedValues = [...values];
-  for (let i = 0; i < modifiedValues.length; i++) {
-    if (Array.isArray(modifiedValues[i])) {
-      modifiedValues[i] = replaceNull(modifiedValues[i], newValue);
-    } else {
-      if (modifiedValues[i] === null) {
-        modifiedValues[i] = newValue;
-      }
-    }
-  }
-  return modifiedValues;
-};
 var deepMergeObjects = (obj1, obj2) => {
   for (const key in obj2) {
     if (obj2.hasOwnProperty(key)) {
@@ -790,230 +627,80 @@ var getDate = (blockTimestamp) => {
   return (0, import_date_fns.format)(date, "d MMM yyyy HH:mm:ss");
 };
 
-// src/services/integrations/customCalls/staking.ts
-var generateStakingCalls = ({
-  token,
-  staking,
-  stakingAbi,
-  stakingFunName,
-  stakingFunParams
-}) => {
-  const flatStakingFunParams = stakingFunParams.flat(Infinity);
-  if (flatStakingFunParams.filter((param) => param === null).length !== 1) {
-    throw new Error(
-      "Exactly 1 'null' value should be provided in 'funParams' in order to override token balance"
-    );
-  }
-  const randomBigNumber = generateUniqueRandomBigNumber(
-    32,
-    flatStakingFunParams
-  );
-  const modifiedStakingFunParams = replaceNull(
-    stakingFunParams,
-    randomBigNumber
-  );
-  const approveFunParams = [staking, randomBigNumber];
-  const stakingApproveCall = {
-    callType: 1 /* FULL_TOKEN_BALANCE */,
-    target: token,
-    callData: IERC20.encodeFunctionData("approve", approveFunParams),
-    payload: import_ethers3.ethers.utils.defaultAbiCoder.encode(
-      ["address", "uint256"],
-      [
-        token,
-        findPlaceholderIndex(
-          JSON.stringify(ERC20Abi),
-          "approve",
-          approveFunParams,
-          randomBigNumber
-        )
-      ]
-    ),
-    value: "0"
-  };
-  const stakingCall = {
-    callType: 1 /* FULL_TOKEN_BALANCE */,
-    target: staking,
-    callData: new import_ethers3.ethers.utils.Interface(stakingAbi).encodeFunctionData(
-      stakingFunName,
-      modifiedStakingFunParams
-    ),
-    payload: import_ethers3.ethers.utils.defaultAbiCoder.encode(
-      ["address", "uint256"],
-      [
-        token,
-        findPlaceholderIndex(
-          stakingAbi,
-          stakingFunName,
-          modifiedStakingFunParams,
-          randomBigNumber
-        )
-      ]
-    ),
-    value: "0"
-  };
-  return [stakingApproveCall, stakingCall];
-};
+// src/services/integrations/monitoring.ts
+var import_ethers5 = require("ethers");
 
-// src/services/integrations/transactions.ts
-var import_ethers4 = require("ethers");
-var getSwapTx = async ({
-  dstChain,
-  dstToken,
-  customContractCalls = [],
-  desc
-}) => {
-  const supportedChains = (await getChains()).filter(
-    ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
-  );
-  validateSwapTxData(supportedChains, dstChain, dstToken);
-  const route = await openTxConfigForm({
-    dstChainId: dstChain,
-    dstTokenAddr: dstToken,
-    customContractCalls,
-    desc,
-    supportedChains
-  });
-  return route.transactions;
-};
-var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
-  const supportedDstChain = supportedChains.find(
-    ({ chainId }) => chainId === dstChain
-  );
-  if (!supportedDstChain) {
-    throw new Error(`Provided chain '${dstChain}' is not supported`);
-  }
-  if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
-    throw new Error(`Provided token '${dstToken}' is not supported`);
-  }
+// src/components/Alert/index.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Alert = ({ desc }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "border border-solid border-x_alert rounded-3xl text-x_alert_light text-xs py-0.5 px-2", children: [
+    "\u26A0\uFE0F ",
+    desc
+  ] });
 };
-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);
-  });
-  if (!messageSentEvent) {
-    throw new Error(
-      `No transaction event found for chain ${srcChainId} tx ${txHash}`
-    );
-  }
-  const messageId = messageSentEvent?.topics[1];
-  const iface = new import_ethers4.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 = {
-    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();
-  const xSwapRouterOnDestinationAddress = ADDRESSES[toChainId]?.XSwapRouter;
-  if (!xSwapRouterOnDestinationAddress) {
-    throw new Error(`Unknown destination XSwapRouter!`);
-  }
-  const xSwapRouterOnDestination = new import_ethers4.ethers.Contract(
-    xSwapRouterOnDestinationAddress,
-    messageReceivedEventAbi,
-    import_ethers4.ethers.getDefaultProvider(
-      supportedChains.find((chain) => chain.chainId === toChainId)?.publicRpcUrls[0]
+
+// src/components/TxConfigForm/index.tsx
+var import_react11 = require("react");
+var import_react_query = require("@tanstack/react-query");
+var import_wagmi3 = require("wagmi");
+
+// src/config/wagmiConfig.ts
+var import_wagmi = require("wagmi");
+var import_connectors = require("wagmi/connectors");
+var WagmiChains = __toESM(require("viem/chains"));
+var import_chains = require("viem/chains");
+var getWagmiConfig = (supportedChains) => {
+  const chains = mapChains(supportedChains);
+  const transports = mapTransports(chains);
+  return (0, import_wagmi.createConfig)({
+    chains,
+    transports,
+    connectors: [
+      (0, import_connectors.injected)(),
+      (0, import_connectors.metaMask)(),
+      (0, import_connectors.safe)(),
+      (0, import_connectors.walletConnect)({ projectId: "c392898b45ac587a280b5eb33e92aeb0" })
+    ]
+  });
+};
+var mapChains = (supportedChains) => {
+  const result = [import_chains.mainnet];
+  result.push(
+    ...Object.values(WagmiChains).filter(
+      (chain) => chain.id !== import_chains.mainnet.id && supportedChains.some(({ chainId }) => chainId === chain.id.toString())
     )
   );
-  const eventFilter = {
-    address: xSwapRouterOnDestinationAddress,
-    topics: [import_ethers4.ethers.utils.id(messageReceivedEventSignature), messageId]
-  };
-  const onSuccess = async () => {
-    updateTransactionDoneInRenderedTransactions(txHash);
-    renderTxHistoryButtons();
-    await new Promise((resolve) => setTimeout(() => resolve(true), 5e3));
-    removeTransactionFromRenderedTransactions(txHash);
-    renderTxHistoryButtons();
-  };
-  xSwapRouterOnDestination.once(eventFilter, () => onSuccess());
+  return result;
 };
-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;
-  }
+var mapTransports = (chains) => {
+  const transports = {};
+  chains.forEach((chain) => {
+    transports[chain.id] = (0, import_wagmi.http)();
+  });
+  return transports;
 };
 
-// src/hooks/useDebounce.tsx
-var import_react = require("react");
-var useDebounce = (value, delay) => {
-  const timeoutRef = (0, import_react.useRef)(null);
-  (0, import_react.useEffect)(() => {
-    if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setValue(value);
-    }, delay);
-    return () => {
-      if (timeoutRef.current) clearTimeout(timeoutRef.current);
-    };
-  }, [value, delay]);
-  const [debouncedValue, setValue] = (0, import_react.useState)(value);
-  return debouncedValue;
+// src/components/icons/CloseIcon.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var CloseIcon = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      height: "18",
+      width: "18",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 10.312 8.319",
+      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "path",
+        {
+          fill: "white",
+          d: "M6.073 4.078 10.151 0H9.093A1.87 1.87 0 0 0 7.77.548L5.157 3.162 2.543.548A1.87 1.87 0 0 0 1.22 0H.161L4.24 4.078 0 8.318h1.058a1.87 1.87 0 0 0 1.322-.547l2.777-2.777 2.776 2.777a1.869 1.869 0 0 0 1.322.548h1.058Z"
+        }
+      )
+    }
+  );
 };
 
-// src/components/TxConfigForm/History.tsx
-var import_react3 = require("react");
-var import_bignumber2 = __toESM(require("bignumber.js"));
-
-// src/components/TxConfigForm/HistoryCard.tsx
-var import_react2 = require("react");
-
 // src/components/icons/ArrowRightIcon.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var ArrowRightIcon = () => {
@@ -1430,8 +1117,46 @@ var XSwapLogo = () => {
   );
 };
 
-// src/components/TxConfigForm/HistoryCard.tsx
+// src/components/TxConfigForm/PoweredBy.tsx
 var import_jsx_runtime24 = require("react/jsx-runtime");
+var PoweredBy = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-center items-center gap-2 my-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "text-x_grey", children: "Powered by" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(XSwapBadgeIcon, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: "\u2715" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ChainlinkCCIPIcon, {})
+  ] });
+};
+
+// src/components/TxConfigForm/Form.tsx
+var import_react10 = require("react");
+var import_ethers4 = require("ethers");
+var import_wagmi2 = require("wagmi");
+
+// src/hooks/useDebounce.tsx
+var import_react = require("react");
+var useDebounce = (value, delay) => {
+  const timeoutRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setValue(value);
+    }, delay);
+    return () => {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+    };
+  }, [value, delay]);
+  const [debouncedValue, setValue] = (0, import_react.useState)(value);
+  return debouncedValue;
+};
+
+// src/components/TxConfigForm/History.tsx
+var import_react3 = require("react");
+var import_bignumber2 = __toESM(require("bignumber.js"));
+
+// src/components/TxConfigForm/HistoryCard.tsx
+var import_react2 = require("react");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var HistoryCard = ({ transaction, supportedChains }) => {
   const date = getDate(transaction.timestamp);
   const supportedTokens = (0, import_react2.useMemo)(() => {
@@ -1477,14 +1202,14 @@ var HistoryCard = ({ transaction, supportedChains }) => {
   const targetChainData = supportedChains.find(
     (chain) => chain.chainId === transaction.targetChainId
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col globalBorder rounded-xl bg-[rgb(15,15,15)] text-white text-xs sm:text-sm p-4 gap-3 mb-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm sm:text-base", children: date }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
-        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
-        transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
-        transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col globalBorder rounded-xl bg-[rgb(15,15,15)] text-white text-xs sm:text-sm p-4 gap-3 mb-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm sm:text-base", children: date }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
+        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
+        transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
+        transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "a",
           {
             href: `${supportedChains.find(
@@ -1494,15 +1219,15 @@ var HistoryCard = ({ transaction, supportedChains }) => {
             rel: "noreferrer",
             className: "ml-2 no-underline",
             "aria-label": "Show the transaction in the chain explorer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowUpRightIcon, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowUpRightIcon, {}) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between flex-wrap gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between flex-wrap gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "img",
             {
               src: sourceChainData?.image,
@@ -1510,11 +1235,11 @@ var HistoryCard = ({ transaction, supportedChains }) => {
               className: "w-5 h-5 mr-1"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: sourceChainData?.displayName })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: sourceChainData?.displayName })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRightIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowRightIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "img",
             {
               src: targetChainData?.image,
@@ -1522,35 +1247,35 @@ var HistoryCard = ({ transaction, supportedChains }) => {
               className: "w-5 h-5 mr-1"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: targetChainData?.displayName })
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: targetChainData?.displayName })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center flex-wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center flex-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
           Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}` : transferredAmount,
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ml-1", children: tokenData?.symbol }),
-          tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ml-1", children: tokenData?.symbol }),
+          tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
             "img",
             {
               src: tokenData?.image,
               alt: tokenData?.name || "",
               className: "w-5 h-5 ml-1"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
         ] }),
-        transaction.tokenOutAddress && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRightIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
+        transaction.tokenOutAddress && /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ArrowRightIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex items-center", children: [
             Number(receivedAmount) < 1e-4 ? "<0.0001" : receivedAmount,
-            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ml-1", children: tokenOutData?.symbol }),
-            tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "ml-1", children: tokenOutData?.symbol }),
+            tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               "img",
               {
                 src: tokenOutData?.image,
                 alt: tokenOutData?.name || "",
                 className: "w-5 h-5 ml-1"
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
           ] })
         ] })
       ] }) })
@@ -1559,7 +1284,7 @@ var HistoryCard = ({ transaction, supportedChains }) => {
 };
 
 // src/components/TxConfigForm/History.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var History = ({ signer, supportedChains }) => {
   const [fetchedHistory, setFetchedHistory] = (0, import_react3.useState)();
   const [historyLoadedOnce, setHistoryLoadedOnce] = (0, import_react3.useState)(false);
@@ -1611,11 +1336,11 @@ var History = ({ signer, supportedChains }) => {
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
   if (!signer)
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
-    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
-    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CircularProgressIcon, {}) }),
-    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
+    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
+    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CircularProgressIcon, {}) }),
+    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       HistoryCard,
       {
         transaction,
@@ -1627,30 +1352,30 @@ var History = ({ signer, supportedChains }) => {
 };
 
 // src/components/TxConfigForm/TopBar.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var TopBar = ({
   signer,
   setSettingsShown,
   setHistoryTabShown,
   historyTabShown
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full justify-between items-center mx-auto sm:pl-4 pr-8 pt-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex gap-2", children: [
-      !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex w-full justify-between items-center mx-auto sm:pl-4 pr-8 pt-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2", children: [
+      !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "div",
         {
           onClick: () => setSettingsShown(true),
           className: "flex items-center text-xs gap-1 cursor-pointer",
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SettingsIcon, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(SettingsIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "div",
         {
           onClick: () => setHistoryTabShown((x) => !x),
           className: "flex items-center text-sm gap-1 cursor-pointer",
-          children: !historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: "Back" })
+          children: !historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: "Back" })
         }
       )
     ] })
@@ -1659,7 +1384,7 @@ var TopBar = ({
 
 // src/components/TxConfigForm/Settings.tsx
 var import_react4 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var Settings = ({
   setSlippage,
   setSettingsShown,
@@ -1676,22 +1401,22 @@ var Settings = ({
       );
     }
   }, [slippageActivePresetIndex, usingSlippageInput]);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute w-[310px] right-0 top-[46px] z-10 bg-black border border-solid border-[rgba(54,129,198,1)] p-4 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-4 justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-base", children: "Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute w-[310px] right-0 top-[46px] z-10 bg-black border border-solid border-[rgba(54,129,198,1)] p-4 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-4 justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-base", children: "Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "div",
         {
           className: "cursor-pointer",
           onClick: () => setSettingsShown(false),
-          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "span",
           {
             className: "inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer",
@@ -1699,8 +1424,8 @@ var Settings = ({
               setExpressChecked((x) => !x);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
                 "span",
                 {
                   className: `transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
@@ -1711,15 +1436,15 @@ var Settings = ({
           }
         ) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-xs text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-xs text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-2 ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-2 ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "div",
           {
             className: `transition-all cursor-pointer block rounded-lg p-2 border-none text-sm leading-[10px] ${index === slippageActivePresetIndex && !usingSlippageInput ? "text-white" : "text-[rgba(255,255,255,0.2)]"} ${index === slippageActivePresetIndex && !usingSlippageInput ? "bg-gradient-to-r from-[#3681c6] to-[#2b4a9d]" : ""}`,
@@ -1731,8 +1456,8 @@ var Settings = ({
           },
           index
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "input",
             {
               className: "text-white border-none bg-[rgba(39,39,39,1)] w-10 placeholder:text-[rgba(255,255,255,0.2)] focus:outline-none text-sm leading-none",
@@ -1751,16 +1476,16 @@ var Settings = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PercentageIcon, {})
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(PercentageIcon, {})
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-xs text-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(InfoIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "text-xs text-left", children: [
           "Slippage is the price variation you are willing to accept in the event that the price of the trade changes while it is processing.",
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("br", {}),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("br", {}),
           "If the trade fails due to too-low slippage, you will receive USDC on the destination chain."
         ] })
       ] })
@@ -1769,7 +1494,7 @@ var Settings = ({
 };
 
 // src/components/TxConfigForm/FeesDetails.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var FeesDetails = ({
   isGettingRoute,
   route,
@@ -1780,12 +1505,12 @@ var FeesDetails = ({
   feesDetailsShown,
   setFeesDetailsShown
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CoinsIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mr-1", children: "Fees:" }),
-        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "bg-current rounded animate-pulse w-20 h-4" }) : ` ${weiToHumanReadable({
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CoinsIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "mr-1", children: "Fees:" }),
+        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "bg-current rounded animate-pulse w-20 h-4" }) : ` ${weiToHumanReadable({
           amount: safeBigNumberFrom(
             route?.xSwapFees.xSwapFee.nativeFee || "0"
           ).add(safeBigNumberFrom(route?.xSwapFees.ccipFee || "0")).add(
@@ -1795,30 +1520,30 @@ var FeesDetails = ({
           precisionFractionalPlaces: 5
         })} ${paymentToken?.symbol}`
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-1 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex gap-1 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
           "div",
           {
             className: `flex gap-1 items-center font-medium ${expressChecked ? "text-x_green" : "text-white opacity-60"}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimerIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(TimerIcon, {}),
               expressChecked ? "Fast ~ 30sec " : "Normal ~ 30min"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
           "div",
           {
             onClick: () => setFeesDetailsShown((x) => !x),
             className: "font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]",
-            children: feesDetailsShown ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronDownIcon, {})
+            children: feesDetailsShown ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ChevronDownIcon, {})
           }
         )
       ] })
     ] }),
-    feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center justify-between ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
+    feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex w-full items-center justify-between ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
           "CCIP Fee:",
           ` ${weiToHumanReadable({
             amount: route?.xSwapFees.ccipFee || "0",
@@ -1826,7 +1551,7 @@ var FeesDetails = ({
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}`
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
           "Native Fee:",
           ` ${weiToHumanReadable({
             amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
@@ -1835,12 +1560,12 @@ var FeesDetails = ({
           })} ${paymentToken?.symbol}`
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
           "Slippage: ",
           `${slippage}%`
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
           "Min amount out:",
           " ",
           weiToHumanReadable({
@@ -1861,7 +1586,7 @@ var import_react6 = require("react");
 
 // src/components/TxConfigForm/UsdPrice.tsx
 var import_react5 = require("react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var UsdPrice = ({
   prices,
   token,
@@ -1874,11 +1599,11 @@ var UsdPrice = ({
       setUsdPrice((Number(amount) * Number(prices[token.address])).toFixed(2));
     }
   }, [token, prices, amount]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: "$0.00" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_jsx_runtime30.Fragment, { children: "$0.00" }) });
 };
 
 // src/components/TxConfigForm/Summary.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var Summary = ({
   isGettingRoute,
   route,
@@ -1901,32 +1626,32 @@ var Summary = ({
       );
     }
   }, [dstChain]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
-        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
+        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           Skeleton,
           {
             width: "w-[100px]",
             height: "h-[36px]",
             other: "sm:w-[190px]"
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: [
+        ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: [
           amountReadable,
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-4 sm:w-6 h-4 sm:h-6", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: dstToken?.image, alt: dstToken?.name }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-4 sm:w-6 h-4 sm:h-6", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: dstToken?.image, alt: dstToken?.name }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1 text-sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on chain:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-1 text-white", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-4 h-4", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: dstChain?.displayName })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on chain:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center gap-1 text-white", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-4 h-4", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: dstChain?.displayName })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       UsdPrice,
       {
         prices,
@@ -1935,7 +1660,7 @@ var Summary = ({
         loading: isGettingRoute
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("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__ */ (0, import_jsx_runtime30.jsx)("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__ */ (0, import_jsx_runtime30.jsx)(ArrowDownIcon, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsx)(ArrowDownIcon, {}) }) })
   ] });
 };
 
@@ -1945,7 +1670,7 @@ var import_react9 = require("react");
 // src/components/TxConfigForm/TokenPicker.tsx
 var import_react7 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var TokenPicker = ({
   onCloseClick,
   tokens,
@@ -1972,24 +1697,24 @@ var TokenPicker = ({
     );
   }, [searchValue, tokens]);
   return modalRoot ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       "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__ */ (0, import_jsx_runtime31.jsxs)("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__ */ (0, import_jsx_runtime31.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("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__ */ (0, import_jsx_runtime32.jsx)(
             "div",
             {
               onClick: onCloseClick,
               className: "absolute top-4 right-4 cursor-pointer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(CloseIcon, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-base mb-4", children: "Pick a token" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("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__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SearchIcon, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-base mb-4", children: "Pick a token" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("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__ */ (0, import_jsx_runtime32.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SearchIcon, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
               "input",
               {
                 placeholder: "Search name or paste address",
@@ -1999,7 +1724,7 @@ var TokenPicker = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
             "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)]" : ""}`,
@@ -2008,14 +1733,14 @@ var TokenPicker = ({
                 onCloseClick();
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: token.image, alt: token.name, className: "w-5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-sm", children: token.symbol })
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { src: token.image, alt: token.name, className: "w-5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-sm", children: token.symbol })
               ]
             },
             token.address
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)(
             "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)]" : ""}`,
@@ -2024,29 +1749,29 @@ var TokenPicker = ({
                 onCloseClick();
               },
               children: [
-                token.image ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+                token.image ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
                   "img",
                   {
                     src: token.image,
                     alt: token.name,
                     className: "token-picker__all__logo"
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("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__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col leading-[16px]", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-[#888] text-[11px]", children: token.symbol })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("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__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-col leading-[16px]", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-[#888] text-[11px]", children: token.symbol })
                   ] }),
-                  signer && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs", children: weiToHumanReadable({
+                  signer && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_jsx_runtime32.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "text-xs", children: weiToHumanReadable({
                     amount: balances[token.address]?.toString() || "0",
                     decimals: token.decimals,
                     precisionFractionalPlaces: 4
-                  }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { width: "w-12", height: "h-3" }) })
+                  }) }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Skeleton, { width: "w-12", height: "h-3" }) })
                 ] })
               ]
             },
             `${index}_${token.address}`
-          )) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
+          )) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
         ] })
       }
     ),
@@ -2055,7 +1780,7 @@ var TokenPicker = ({
 };
 
 // src/components/TxConfigForm/ChainListElement.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var ChainListElement = ({
   chain,
   setSrcChain,
@@ -2063,8 +1788,8 @@ var ChainListElement = ({
   index,
   length
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
       "li",
       {
         className: "bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full",
@@ -2073,19 +1798,19 @@ var ChainListElement = ({
           setChainListShown(false);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
           chain.displayName
         ]
       }
     ),
-    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
+    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
   ] }, `${chain.ecosystem}-${chain.chainId}`);
 };
 
 // src/components/TxConfigForm/BalanceComponent.tsx
 var import_react8 = require("react");
 var import_bignumber3 = __toESM(require("bignumber.js"));
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var BalanceComponent = ({ srcToken, balances }) => {
   const balanceText = (0, import_react8.useMemo)(() => {
     if (!balances || !srcToken) return "0";
@@ -2105,7 +1830,7 @@ var BalanceComponent = ({ srcToken, balances }) => {
       precisionFractionalPlaces: 5
     });
   }, [srcToken, balances]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
     "Balance:",
     " ",
     srcToken && balances ? weiToHumanReadable({
@@ -2113,12 +1838,12 @@ var BalanceComponent = ({ srcToken, balances }) => {
       decimals: srcToken.decimals,
       precisionFractionalPlaces: 4
     }) : 0,
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("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
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var SwapPanel = ({
   amount,
   setAmount,
@@ -2163,11 +1888,11 @@ var SwapPanel = ({
     () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
     [supportedChains, srcChain]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           "input",
           {
             className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
@@ -2186,7 +1911,7 @@ var SwapPanel = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         UsdPrice,
         {
           prices,
@@ -2196,8 +1921,8 @@ var SwapPanel = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "div",
         {
           className: "flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap",
@@ -2205,7 +1930,7 @@ var SwapPanel = ({
             setTokenListShown((state) => !state);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "img",
               {
                 height: 16,
@@ -2214,12 +1939,12 @@ var SwapPanel = ({
                 alt: srcToken?.name
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: srcToken?.symbol }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DownArrowIcon, {})
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: srcToken?.symbol }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownArrowIcon, {})
           ]
         }
       ),
-      tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         TokenPicker,
         {
           onCloseClick: () => setTokenListShown(false),
@@ -2230,22 +1955,22 @@ var SwapPanel = ({
           balances
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "div",
         {
           onClick: handleMaxClick,
           className: "flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer",
-          children: signer && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(BalanceComponent, { balances, srcToken })
+          children: signer && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(BalanceComponent, { balances, srcToken })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "div",
         {
           ref: buttonRef,
           className: "bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2",
           onClick: () => setChainListShown((prev) => !prev),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "img",
               {
                 width: "16",
@@ -2254,17 +1979,17 @@ var SwapPanel = ({
                 alt: srcChain?.name
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: srcChain?.displayName }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DownArrowIcon, {})
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { children: srcChain?.displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DownArrowIcon, {})
           ]
         }
       ),
-      chainListShown && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      chainListShown && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "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__ */ (0, import_jsx_runtime34.jsx)(
+          children: chainListOptions.map((chain, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             ChainListElement,
             {
               index,
@@ -2281,9 +2006,9 @@ var SwapPanel = ({
 };
 
 // src/components/TxConfigForm/ErrorField.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var ErrorField = ({ error }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "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"}`,
@@ -2293,15 +2018,15 @@ var ErrorField = ({ error }) => {
 };
 
 // src/components/TxConfigForm/Description.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 var Description = ({ description }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
 };
 
 // src/components/TxConfigForm/Button.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Button = ({ children, onClick, type, disabled }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "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",
@@ -2314,7 +2039,7 @@ var Button = ({ children, onClick, type, disabled }) => {
 };
 
 // src/components/TxConfigForm/Form.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Form = ({
   dstChainId,
   dstTokenAddr,
@@ -2379,7 +2104,7 @@ var Form = ({
           `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`
         );
       getRoute({
-        fromAmount: import_ethers5.ethers.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
+        fromAmount: import_ethers4.ethers.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
         fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
         fromChain: srcChain.chainId,
         fromToken: srcToken.address,
@@ -2413,7 +2138,7 @@ var Form = ({
     if (srcChain) {
       setPaymentToken(
         srcChain.tokens.find(
-          (token) => token.address.toLowerCase() === import_ethers5.ethers.constants.AddressZero.toLowerCase()
+          (token) => token.address.toLowerCase() === import_ethers4.ethers.constants.AddressZero.toLowerCase()
         )
       );
     }
@@ -2444,13 +2169,13 @@ var Form = ({
   const handleSwitchChain = async () => {
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "form",
     {
       className: "flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop",
       onSubmit: handleSubmit,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           TopBar,
           {
             signer,
@@ -2459,7 +2184,7 @@ var Form = ({
             setSettingsShown
           }
         ),
-        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           Settings,
           {
             expressChecked,
@@ -2469,9 +2194,9 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          desc && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Description, { description: desc }),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          desc && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Description, { description: desc }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             SwapPanel,
             {
               amount,
@@ -2486,7 +2211,7 @@ var Form = ({
               setSrcChain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             Summary,
             {
               isGettingRoute,
@@ -2495,7 +2220,7 @@ var Form = ({
               dstChain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             FeesDetails,
             {
               route,
@@ -2508,8 +2233,8 @@ var Form = ({
               setFeesDetailsShown
             }
           ),
-          formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ErrorField, { error: formError }),
-          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+          formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ErrorField, { error: formError }),
+          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
             Button,
             {
               type: "submit",
@@ -2523,11 +2248,8 @@ var Form = ({
   );
 };
 
-// package.json
-var version = "0.2.0";
-
 // src/components/TxConfigForm/index.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var TxConfigForm = ({
   dstChainId,
   dstTokenAddr,
@@ -2549,13 +2271,13 @@ var TxConfigForm = ({
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
     "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__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           Form,
           {
             dstChainId,
@@ -2566,20 +2288,15 @@ var TxConfigForm = ({
             onSubmit
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "div",
           {
             className: "absolute top-7 right-4 cursor-pointer text-white",
             onClick: onClose,
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CloseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CloseIcon, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "swappage__poweredby", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Powered by" }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(XSwapBadgeIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "\u2715" }),
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChainlinkCCIPIcon, {})
-        ] })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PoweredBy, {})
       ] })
     }
   ) }) });
@@ -2594,7 +2311,7 @@ var openTxConfigForm = async ({
   try {
     return await new Promise((resolve) => {
       xswapRoot.render(
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           TxConfigForm,
           {
             dstChainId,
@@ -2617,24 +2334,11 @@ var openTxConfigForm = async ({
     throw new Error(`XSwap component error, ${err}`);
   }
 };
-var xswapRoot;
-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}`;
-  document.head.appendChild(xswapStyleElement);
-  const xswapModalElement = document.createElement("div");
-  xswapModalElement.setAttribute("id", "xswap-modal");
-  document.body.appendChild(xswapModalElement);
-  xswapRoot = (0, import_client.createRoot)(xswapModalElement);
-}
 
-// src/components/TxHistoryButton/index.tsx
+// src/components/TxStatusButton/index.tsx
 var import_react12 = require("react");
-var import_client2 = require("react-dom/client");
-var import_jsx_runtime40 = require("react/jsx-runtime");
-var TxHistoryButton = ({ transaction }) => {
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var TxStatusButton = ({ transaction }) => {
   const {
     fromChain,
     fromChainImage,
@@ -2648,15 +2352,23 @@ var TxHistoryButton = ({ transaction }) => {
     explorer
   } = transaction;
   const [isWide, setIsWide] = (0, import_react12.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
-    isWide && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  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_runtime41.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
+    isWide && /* @__PURE__ */ (0, import_jsx_runtime41.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: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 "img",
                 {
                   className: "w-5 h-5",
@@ -2664,16 +2376,16 @@ var TxHistoryButton = ({ transaction }) => {
                   alt: "source chain"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromChain }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowRightIcon, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: toChain })
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: fromChain }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowRightIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: toChain })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: "Sent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromAmount }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromToken }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: "Sent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: fromAmount }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: fromToken }),
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 "img",
                 {
                   className: "w-5 h-5",
@@ -2683,7 +2395,7 @@ var TxHistoryButton = ({ transaction }) => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "a",
             {
               href: explorer,
@@ -2691,22 +2403,21 @@ var TxHistoryButton = ({ transaction }) => {
               rel: "noreferrer",
               className: "no-underline cursor-pointer",
               "aria-label": "Show the transaction in the chain explorer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowUpRightIcon, {}) })
+              children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowUpRightIcon, {}) })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime41.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"}`,
-        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: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(XSwapLogo, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CircularProgressIcon, {}) })
+        className: `text-white rounded-xl cursor-pointer ${background} ${border}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ArrowLeftIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(XSwapLogo, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CircularProgressIcon, {}) })
           ] }) })
         ] })
       }
@@ -2732,74 +2443,160 @@ var updateTransactionDoneInRenderedTransactions = (txHash) => {
     transaction.isDone = true;
   }
 };
-var historyElement = document.createElement("div");
-historyElement.setAttribute("id", "xswap-history");
-historyElement.setAttribute(
-  "class",
-  "absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50"
-);
-document.body.appendChild(historyElement);
-var txHistoryButtonRoot = (0, import_client2.createRoot)(historyElement);
-var renderTxHistoryButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TxHistoryButton, { transaction: item }, item.txHash));
-  txHistoryButtonRoot.render(buttons);
+var renderTxStatusButtons = () => {
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(TxStatusButton, { transaction: item }, item.txHash));
+  txStatusRoot.render(buttons);
 };
 
 // src/components/Skeleton/index.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+};
+
+// src/services/integrations/monitoring.ts
+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
+  );
+  const messageSentEvent = txReceipt.logs?.find((log) => {
+    return log.topics[0] === import_ethers5.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];
+  const iface = new import_ethers5.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 = {
+    txHash,
+    fromChain: srcChain?.displayName,
+    fromChainImage: srcChain?.image,
+    toChain: dstChain.displayName,
+    toChainImage: dstChain.image,
+    fromToken: srcToken?.symbol,
+    fromTokenImage: srcToken?.image,
+    fromAmount: weiToHumanReadable({
+      amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
+      decimals: srcToken?.decimals || 18,
+      precisionFractionalPlaces: 4
+    }),
+    isDone: false,
+    explorer: `${CCIP_EXPLORER}/tx/${txHash}`
+  };
+  addTransactionToRenderedTransactions(transaction);
+  renderTxStatusButtons();
+  const xSwapRouterOnDestinationAddress = ADDRESSES[dstChainId]?.XSwapRouter;
+  if (!xSwapRouterOnDestinationAddress) {
+    throw new Error(`Unknown destination XSwapRouter!`);
+  }
+  const xSwapRouterOnDestination = new import_ethers5.ethers.Contract(
+    xSwapRouterOnDestinationAddress,
+    MSG_RECEIVED_EVENT_ABI,
+    import_ethers5.ethers.getDefaultProvider(
+      supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
+    )
+  );
+  const msgReceivedEventFilter = {
+    address: xSwapRouterOnDestinationAddress,
+    topics: [import_ethers5.ethers.utils.id(MSG_RECEIVED_EVENT_SIG), messageId]
+  };
+  const onSuccess = async () => {
+    updateTransactionDoneInRenderedTransactions(txHash);
+    renderTxStatusButtons();
+    await new Promise(
+      (resolve) => setTimeout(() => resolve(true), TX_RECEIPT_STATUS_LIFETIME)
+    );
+    removeTransactionFromRenderedTransactions(txHash);
+    renderTxStatusButtons();
+  };
+  xSwapRouterOnDestination.once(msgReceivedEventFilter, () => onSuccess());
+};
+var getTxReceipt = async (txChainId, txHash) => {
+  try {
+    const chain = (await getChains()).find(
+      (chain2) => chain2.chainId === txChainId
+    );
+    const provider = new import_ethers5.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`);
+  }
 };
+
+// src/index.ts
+initDocument();
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  ADDRESSES,
-  Alert,
-  BALANCES_CHUNK_SIZE,
-  BatchQueryAbi,
-  CCIP_EXPLORER,
   ContractName,
-  DEFAULT_ECOSYSTEM,
-  DEFAULT_SOURCE_CHAIN_ID,
-  DELIVERY_TIME,
-  ERC20Abi,
-  EXPRESS_DELIVERY_TIME,
   Ecosystem,
   Environment,
-  IERC20,
-  MINIMUM_DISPLAYED_TOKEN_AMOUNT,
-  NUMBER_INPUT_REGEX,
-  ROUTE_TIMEOUT_MS,
-  SLIPPAGE_PRESETS,
-  Skeleton,
-  TxHistoryButton,
   Web3Environment,
   XSwapCallType,
-  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
+  monitorTransactionStatus
 });