@xswap-link/sdk 0.2.0 → 0.2.2

package/dist/index.mjs

@@ -5,82 +5,8 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
   throw Error('Dynamic require of "' + x + '" is not supported');
 });
 
-// src/components/Alert/index.tsx
-import { jsxs } from "react/jsx-runtime";
-var Alert = ({ desc }) => {
-  return /* @__PURE__ */ 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
-import { useMemo as useMemo7 } from "react";
+// src/config/init.ts
 import { createRoot } from "react-dom/client";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { WagmiProvider } from "wagmi";
-
-// src/config/wagmiConfig.ts
-import { createConfig, http } from "wagmi";
-import { injected, metaMask, walletConnect, safe } from "wagmi/connectors";
-import * as WagmiChains from "viem/chains";
-import { mainnet } from "viem/chains";
-var getWagmiConfig = (supportedChains) => {
-  const chains = mapChains(supportedChains);
-  const transports = mapTransports(chains);
-  return createConfig({
-    chains,
-    transports,
-    connectors: [
-      injected(),
-      metaMask(),
-      safe(),
-      walletConnect({ projectId: "c392898b45ac587a280b5eb33e92aeb0" })
-    ]
-  });
-};
-var mapChains = (supportedChains) => {
-  const result = [mainnet];
-  result.push(
-    ...Object.values(WagmiChains).filter(
-      (chain) => chain.id !== mainnet.id && supportedChains.some(({ chainId }) => chainId === chain.id.toString())
-    )
-  );
-  return result;
-};
-var mapTransports = (chains) => {
-  const transports = {};
-  chains.forEach((chain) => {
-    transports[chain.id] = http();
-  });
-  return transports;
-};
-
-// src/components/icons/CloseIcon.tsx
-import { jsx } from "react/jsx-runtime";
-var CloseIcon = () => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      height: "18",
-      width: "18",
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 10.312 8.319",
-      children: /* @__PURE__ */ 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
-import { useEffect as useEffect7, useState as useState8 } from "react";
-import { ethers as ethers4 } from "ethers";
-import { useAccount, useSwitchChain } from "wagmi";
 
 // xswap.config.ts
 var xSwapConfig = {
@@ -96,6 +22,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 = createRoot(xswapElement);
+  const txStatusElement = document.createElement("div");
+  txStatusElement.setAttribute("id", "xswap-tx-status");
+  txStatusElement.setAttribute("class", "xswap-tx-status");
+  document.body.appendChild(txStatusElement);
+  txStatusRoot = createRoot(txStatusElement);
+};
+
+// 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}`, {
@@ -124,26 +117,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({
@@ -162,45 +135,6 @@ async function getPrices(payload) {
 // src/services/integrations/customCalls/staking.ts
 import { ethers as ethers2 } from "ethers";
 
-// src/models/Addresses.ts
-var ContractName = /* @__PURE__ */ ((ContractName2) => {
-  ContractName2["BatchQuery"] = "BatchQuery";
-  ContractName2["FeeCollector"] = "FeeCollector";
-  ContractName2["XSwapRouter"] = "XSwapRouter";
-  return ContractName2;
-})(ContractName || {});
-
-// src/models/Ecosystem.ts
-var Ecosystem = /* @__PURE__ */ ((Ecosystem2) => {
-  Ecosystem2["EVM"] = "evm";
-  return Ecosystem2;
-})(Ecosystem || {});
-
-// src/models/Environment.ts
-var Environment = /* @__PURE__ */ ((Environment2) => {
-  Environment2["PROD"] = "production";
-  Environment2["DEV"] = "develop";
-  Environment2["LOCAL"] = "local";
-  return Environment2;
-})(Environment || {});
-
-// src/models/Web3Environment.ts
-var Web3Environment = /* @__PURE__ */ ((Web3Environment2) => {
-  Web3Environment2["DEVNET"] = "devnet";
-  Web3Environment2["TESTNET"] = "testnet";
-  Web3Environment2["MAINNET"] = "mainnet";
-  return Web3Environment2;
-})(Web3Environment || {});
-
-// src/models/XSwapCallType.ts
-var XSwapCallType = /* @__PURE__ */ ((XSwapCallType2) => {
-  XSwapCallType2[XSwapCallType2["DEFAULT"] = 0] = "DEFAULT";
-  XSwapCallType2[XSwapCallType2["FULL_TOKEN_BALANCE"] = 1] = "FULL_TOKEN_BALANCE";
-  XSwapCallType2[XSwapCallType2["FULL_NATIVE_BALANCE"] = 2] = "FULL_NATIVE_BALANCE";
-  XSwapCallType2[XSwapCallType2["COLLECT_TOKEN_BALANCE"] = 3] = "COLLECT_TOKEN_BALANCE";
-  return XSwapCallType2;
-})(XSwapCallType || {});
-
 // src/utils/contracts.ts
 import { ethers } from "ethers";
 
@@ -227,16 +161,6 @@ var weiToHumanReadable = ({
   }
   return res;
 };
-var generateRandomBigNumber = (length) => {
-  return BigNumber.from(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 = [
@@ -571,20 +495,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 ethers.utils.Interface(ERC20Abi);
-var getBalanceOf = async (wallet, token, rpcUrl) => {
-  const provider = ethers.getDefaultProvider(rpcUrl);
-  if (token === ethers.constants.AddressZero) {
-    return ethers.utils.formatEther(await provider.getBalance(wallet));
-  }
-  const contract = new ethers.Contract(token, ERC20Abi, provider);
-  return ethers.utils.formatUnits(
-    await contract.balanceOf(wallet),
-    await contract.decimals()
-  );
-};
 var getBalances = async (chain, wallet) => {
   return {
     ...await getNativeBalance(chain, wallet),
@@ -635,35 +557,6 @@ var getErc20Balances = async (chain, wallet) => {
   });
   return balances;
 };
-var generateApproveTxData = (tokenAddress, spender, amount) => {
-  return tokenAddress !== 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 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) => {
@@ -675,266 +568,103 @@ var shortAddress = (address) => {
 
 // src/utils/index.ts
 import { format } from "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)) {
       if (obj1.hasOwnProperty(key) && typeof obj1[key] === "object" && typeof obj2[key] === "object") {
         deepMergeObjects(obj1[key], obj2[key]);
       } else {
-        obj1[key] = obj2[key];
-      }
-    }
-  }
-  return { ...obj1 };
-};
-var chunkArray = (array, chunkSize) => {
-  const result = [];
-  for (let i = 0; i < array.length; i += chunkSize) {
-    result.push(array.slice(i, i + chunkSize));
-  }
-  return result;
-};
-var getDate = (blockTimestamp) => {
-  const date = new Date(blockTimestamp * 1e3);
-  return 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: ethers2.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 ethers2.utils.Interface(stakingAbi).encodeFunctionData(
-      stakingFunName,
-      modifiedStakingFunParams
-    ),
-    payload: ethers2.utils.defaultAbiCoder.encode(
-      ["address", "uint256"],
-      [
-        token,
-        findPlaceholderIndex(
-          stakingAbi,
-          stakingFunName,
-          modifiedStakingFunParams,
-          randomBigNumber
-        )
-      ]
-    ),
-    value: "0"
-  };
-  return [stakingApproveCall, stakingCall];
-};
-
-// src/services/integrations/transactions.ts
-import { ethers as ethers3 } from "ethers";
-var getSwapTx = async ({
-  dstChain,
-  dstToken,
-  customContractCalls = [],
-  desc
-}) => {
-  const supportedChains = (await getChains()).filter(
-    ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
-  );
-  validateSwapTxData(supportedChains, dstChain, dstToken);
-  const route = await openTxConfigForm({
-    dstChainId: dstChain,
-    dstTokenAddr: dstToken,
-    customContractCalls,
-    desc,
-    supportedChains
-  });
-  return route.transactions;
-};
-var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
-  const supportedDstChain = supportedChains.find(
-    ({ chainId }) => chainId === dstChain
-  );
-  if (!supportedDstChain) {
-    throw new Error(`Provided chain '${dstChain}' is not supported`);
-  }
-  if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
-    throw new Error(`Provided token '${dstToken}' is not supported`);
-  }
-};
-var monitorTransactionStatus = async (srcChainId, txHash) => {
-  const txReceipt = await getTxReceipt(srcChainId, txHash);
-  if (!txReceipt) {
-    throw new Error(
-      `No transaction found for chain ${srcChainId} tx ${txHash}`
-    );
-  }
-  const supportedChains = (await getChains()).filter(
-    ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
-  );
-  const messageSentEventSignature = "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";
-  const messageSentEventAbi = [
-    "event MessageSent(bytes32 indexed messageId, uint64 indexed destinationChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount, uint256 valueForInstantCcipRecieve, address transferedToken, uint256 transferedTokenAmount)"
-  ];
-  const messageReceivedEventSignature = "MessageReceived(bytes32,uint64,address,bytes,address,uint256)";
-  const messageReceivedEventAbi = [
-    "event MessageReceived(bytes32 indexed messageId, uint64 indexed sourceChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount)"
-  ];
-  const messageSentEvent = txReceipt.logs?.find((log) => {
-    return log.topics[0] === ethers3.utils.id(messageSentEventSignature);
-  });
-  if (!messageSentEvent) {
-    throw new Error(
-      `No transaction event found for chain ${srcChainId} tx ${txHash}`
-    );
-  }
-  const messageId = messageSentEvent?.topics[1];
-  const iface = new ethers3.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 ethers3.Contract(
-    xSwapRouterOnDestinationAddress,
-    messageReceivedEventAbi,
-    ethers3.getDefaultProvider(
-      supportedChains.find((chain) => chain.chainId === toChainId)?.publicRpcUrls[0]
-    )
-  );
-  const eventFilter = {
-    address: xSwapRouterOnDestinationAddress,
-    topics: [ethers3.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());
+        obj1[key] = obj2[key];
+      }
+    }
+  }
+  return { ...obj1 };
 };
-var getTxReceipt = async (txChainId, txHash) => {
-  const chains = await getChains();
-  const chain = chains.find((chain2) => chain2.chainId === txChainId.toString());
-  const provider = new ethers3.providers.JsonRpcProvider(
-    chain?.publicRpcUrls[0]
-  );
-  try {
-    return await provider.getTransactionReceipt(txHash);
-  } catch (error) {
-    console.error("Error fetching transaction receipt:", error);
-    return null;
+var chunkArray = (array, chunkSize) => {
+  const result = [];
+  for (let i = 0; i < array.length; i += chunkSize) {
+    result.push(array.slice(i, i + chunkSize));
   }
+  return result;
+};
+var getDate = (blockTimestamp) => {
+  const date = new Date(blockTimestamp * 1e3);
+  return format(date, "d MMM yyyy HH:mm:ss");
 };
 
-// src/hooks/useDebounce.tsx
-import { useEffect, useRef, useState } from "react";
-var useDebounce = (value, delay) => {
-  const timeoutRef = useRef(null);
-  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] = useState(value);
-  return debouncedValue;
+// src/services/integrations/monitoring.ts
+import { ethers as ethers4 } from "ethers";
+
+// src/components/Alert/index.tsx
+import { jsxs } from "react/jsx-runtime";
+var Alert = ({ desc }) => {
+  return /* @__PURE__ */ 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/History.tsx
-import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
-import BigNumberJS2 from "bignumber.js";
+// src/components/TxConfigForm/index.tsx
+import { useMemo as useMemo7 } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider } from "wagmi";
 
-// src/components/TxConfigForm/HistoryCard.tsx
-import { useCallback, useMemo } from "react";
+// src/config/wagmiConfig.ts
+import { createConfig, http } from "wagmi";
+import { injected, metaMask, walletConnect, safe } from "wagmi/connectors";
+import * as WagmiChains from "viem/chains";
+import { mainnet } from "viem/chains";
+var getWagmiConfig = (supportedChains) => {
+  const chains = mapChains(supportedChains);
+  const transports = mapTransports(chains);
+  return createConfig({
+    chains,
+    transports,
+    connectors: [
+      injected(),
+      metaMask(),
+      safe(),
+      walletConnect({ projectId: "c392898b45ac587a280b5eb33e92aeb0" })
+    ]
+  });
+};
+var mapChains = (supportedChains) => {
+  const result = [mainnet];
+  result.push(
+    ...Object.values(WagmiChains).filter(
+      (chain) => chain.id !== mainnet.id && supportedChains.some(({ chainId }) => chainId === chain.id.toString())
+    )
+  );
+  return result;
+};
+var mapTransports = (chains) => {
+  const transports = {};
+  chains.forEach((chain) => {
+    transports[chain.id] = http();
+  });
+  return transports;
+};
+
+// src/components/icons/CloseIcon.tsx
+import { jsx } from "react/jsx-runtime";
+var CloseIcon = () => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      height: "18",
+      width: "18",
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 10.312 8.319",
+      children: /* @__PURE__ */ 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/icons/ArrowRightIcon.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
@@ -1352,8 +1082,46 @@ var XSwapLogo = () => {
   );
 };
 
+// src/components/TxConfigForm/PoweredBy.tsx
+import { jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+var PoweredBy = () => {
+  return /* @__PURE__ */ jsxs6("div", { className: "flex justify-center items-center gap-2 my-3", children: [
+    /* @__PURE__ */ jsx23("span", { className: "text-x_grey", children: "Powered by" }),
+    /* @__PURE__ */ jsx23(XSwapBadgeIcon, {}),
+    /* @__PURE__ */ jsx23("span", { children: "\u2715" }),
+    /* @__PURE__ */ jsx23(ChainlinkCCIPIcon, {})
+  ] });
+};
+
+// src/components/TxConfigForm/Form.tsx
+import { useEffect as useEffect7, useState as useState8 } from "react";
+import { ethers as ethers3 } from "ethers";
+import { useAccount, useSwitchChain } from "wagmi";
+
+// src/hooks/useDebounce.tsx
+import { useEffect, useRef, useState } from "react";
+var useDebounce = (value, delay) => {
+  const timeoutRef = useRef(null);
+  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] = useState(value);
+  return debouncedValue;
+};
+
+// src/components/TxConfigForm/History.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useState as useState2 } from "react";
+import BigNumberJS2 from "bignumber.js";
+
 // src/components/TxConfigForm/HistoryCard.tsx
-import { Fragment, jsx as jsx23, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useCallback, useMemo } from "react";
+import { Fragment, jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
 var HistoryCard = ({ transaction, supportedChains }) => {
   const date = getDate(transaction.timestamp);
   const supportedTokens = useMemo(() => {
@@ -1399,14 +1167,14 @@ var HistoryCard = ({ transaction, supportedChains }) => {
   const targetChainData = supportedChains.find(
     (chain) => chain.chainId === transaction.targetChainId
   );
-  return /* @__PURE__ */ jsxs6("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__ */ jsxs6("div", { className: "flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ jsx23("div", { className: "text-sm sm:text-base", children: date }),
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
-        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ jsx23("div", { className: "flex items-center", children: /* @__PURE__ */ jsx23("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
-        transaction.status === "DONE" && /* @__PURE__ */ jsx23("div", { className: "flex items-center", children: /* @__PURE__ */ jsx23("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
-        transaction.status === "REVERTED" && /* @__PURE__ */ jsx23("div", { className: "flex items-center", children: /* @__PURE__ */ jsx23("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
-        /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsxs7("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__ */ jsxs7("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ jsx24("div", { className: "text-sm sm:text-base", children: date }),
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ jsx24("div", { className: "flex items-center", children: /* @__PURE__ */ jsx24("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
+        transaction.status === "DONE" && /* @__PURE__ */ jsx24("div", { className: "flex items-center", children: /* @__PURE__ */ jsx24("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
+        transaction.status === "REVERTED" && /* @__PURE__ */ jsx24("div", { className: "flex items-center", children: /* @__PURE__ */ jsx24("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
+        /* @__PURE__ */ jsx24(
           "a",
           {
             href: `${supportedChains.find(
@@ -1416,15 +1184,15 @@ var HistoryCard = ({ transaction, supportedChains }) => {
             rel: "noreferrer",
             className: "ml-2 no-underline",
             "aria-label": "Show the transaction in the chain explorer",
-            children: /* @__PURE__ */ jsx23("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx23(ArrowUpRightIcon, {}) })
+            children: /* @__PURE__ */ jsx24("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx24(ArrowUpRightIcon, {}) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsxs6("div", { className: "flex justify-between flex-wrap gap-2", children: [
-      /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx23(
+    /* @__PURE__ */ jsxs7("div", { className: "flex justify-between flex-wrap gap-2", children: [
+      /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx24(
             "img",
             {
               src: sourceChainData?.image,
@@ -1432,11 +1200,11 @@ var HistoryCard = ({ transaction, supportedChains }) => {
               className: "w-5 h-5 mr-1"
             }
           ),
-          /* @__PURE__ */ jsx23("div", { children: sourceChainData?.displayName })
+          /* @__PURE__ */ jsx24("div", { children: sourceChainData?.displayName })
         ] }),
-        /* @__PURE__ */ jsx23("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ jsx23(ArrowRightIcon, {}) }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ jsx23(
+        /* @__PURE__ */ jsx24("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ jsx24(ArrowRightIcon, {}) }),
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx24(
             "img",
             {
               src: targetChainData?.image,
@@ -1444,35 +1212,35 @@ var HistoryCard = ({ transaction, supportedChains }) => {
               className: "w-5 h-5 mr-1"
             }
           ),
-          /* @__PURE__ */ jsx23("div", { children: targetChainData?.displayName })
+          /* @__PURE__ */ jsx24("div", { children: targetChainData?.displayName })
         ] })
       ] }),
-      /* @__PURE__ */ jsx23("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ jsxs6("div", { className: "flex items-center flex-wrap", children: [
-        /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ jsx24("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ jsxs7("div", { className: "flex items-center flex-wrap", children: [
+        /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
           Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}` : transferredAmount,
-          /* @__PURE__ */ jsx23("div", { className: "ml-1", children: tokenData?.symbol }),
-          tokenData?.image ? /* @__PURE__ */ jsx23(
+          /* @__PURE__ */ jsx24("div", { className: "ml-1", children: tokenData?.symbol }),
+          tokenData?.image ? /* @__PURE__ */ jsx24(
             "img",
             {
               src: tokenData?.image,
               alt: tokenData?.name || "",
               className: "w-5 h-5 ml-1"
             }
-          ) : /* @__PURE__ */ jsx23("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__ */ jsx24("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__ */ jsxs6(Fragment, { children: [
-          /* @__PURE__ */ jsx23("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ jsx23(ArrowRightIcon, {}) }),
-          /* @__PURE__ */ jsxs6("div", { className: "flex items-center", children: [
+        transaction.tokenOutAddress && /* @__PURE__ */ jsxs7(Fragment, { children: [
+          /* @__PURE__ */ jsx24("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ jsx24(ArrowRightIcon, {}) }),
+          /* @__PURE__ */ jsxs7("div", { className: "flex items-center", children: [
             Number(receivedAmount) < 1e-4 ? "<0.0001" : receivedAmount,
-            /* @__PURE__ */ jsx23("div", { className: "ml-1", children: tokenOutData?.symbol }),
-            tokenOutData?.image ? /* @__PURE__ */ jsx23(
+            /* @__PURE__ */ jsx24("div", { className: "ml-1", children: tokenOutData?.symbol }),
+            tokenOutData?.image ? /* @__PURE__ */ jsx24(
               "img",
               {
                 src: tokenOutData?.image,
                 alt: tokenOutData?.name || "",
                 className: "w-5 h-5 ml-1"
               }
-            ) : /* @__PURE__ */ jsx23("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__ */ jsx24("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) })
           ] })
         ] })
       ] }) })
@@ -1481,7 +1249,7 @@ var HistoryCard = ({ transaction, supportedChains }) => {
 };
 
 // src/components/TxConfigForm/History.tsx
-import { jsx as jsx24, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
 var History = ({ signer, supportedChains }) => {
   const [fetchedHistory, setFetchedHistory] = useState2();
   const [historyLoadedOnce, setHistoryLoadedOnce] = useState2(false);
@@ -1533,11 +1301,11 @@ var History = ({ signer, supportedChains }) => {
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
   if (!signer)
-    return /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
-  return /* @__PURE__ */ jsx24("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ jsxs7("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
-    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ jsx24("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
-    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ jsx24("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ jsx24(CircularProgressIcon, {}) }),
-    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ jsx24(
+    return /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
+  return /* @__PURE__ */ jsx25("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ jsxs8("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
+    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ jsx25("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
+    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ jsx25("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ jsx25(CircularProgressIcon, {}) }),
+    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ jsx25(
       HistoryCard,
       {
         transaction,
@@ -1549,30 +1317,30 @@ var History = ({ signer, supportedChains }) => {
 };
 
 // src/components/TxConfigForm/TopBar.tsx
-import { Fragment as Fragment2, jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
 var TopBar = ({
   signer,
   setSettingsShown,
   setHistoryTabShown,
   historyTabShown
 }) => {
-  return /* @__PURE__ */ jsxs8("div", { className: "flex w-full justify-between items-center mx-auto sm:pl-4 pr-8 pt-2", children: [
-    /* @__PURE__ */ jsx25("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__ */ jsxs8("div", { className: "flex gap-2", children: [
-      !historyTabShown && /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsxs9("div", { className: "flex w-full justify-between items-center mx-auto sm:pl-4 pr-8 pt-2", children: [
+    /* @__PURE__ */ jsx26("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__ */ jsxs9("div", { className: "flex gap-2", children: [
+      !historyTabShown && /* @__PURE__ */ jsx26(
         "div",
         {
           onClick: () => setSettingsShown(true),
           className: "flex items-center text-xs gap-1 cursor-pointer",
-          children: /* @__PURE__ */ jsx25("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__ */ jsx25(SettingsIcon, {}) })
+          children: /* @__PURE__ */ jsx26("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__ */ jsx26(SettingsIcon, {}) })
         }
       ),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(
         "div",
         {
           onClick: () => setHistoryTabShown((x) => !x),
           className: "flex items-center text-sm gap-1 cursor-pointer",
-          children: !historyTabShown ? /* @__PURE__ */ jsx25(Fragment2, { children: /* @__PURE__ */ jsx25("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__ */ jsx25(HistoryIcon, {}) }) }) : /* @__PURE__ */ jsx25("div", { children: "Back" })
+          children: !historyTabShown ? /* @__PURE__ */ jsx26(Fragment2, { children: /* @__PURE__ */ jsx26("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__ */ jsx26(HistoryIcon, {}) }) }) : /* @__PURE__ */ jsx26("div", { children: "Back" })
         }
       )
     ] })
@@ -1581,7 +1349,7 @@ var TopBar = ({
 
 // src/components/TxConfigForm/Settings.tsx
 import { useState as useState3, useEffect as useEffect3 } from "react";
-import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
 var Settings = ({
   setSlippage,
   setSettingsShown,
@@ -1598,22 +1366,22 @@ var Settings = ({
       );
     }
   }, [slippageActivePresetIndex, usingSlippageInput]);
-  return /* @__PURE__ */ jsx26("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__ */ jsxs9("div", { className: "flex flex-col gap-4 justify-between", children: [
-    /* @__PURE__ */ jsxs9("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ jsx26("div", { className: "text-base", children: "Settings" }),
-      /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27("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__ */ jsxs10("div", { className: "flex flex-col gap-4 justify-between", children: [
+    /* @__PURE__ */ jsxs10("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ jsx27("div", { className: "text-base", children: "Settings" }),
+      /* @__PURE__ */ jsx27(
         "div",
         {
           className: "cursor-pointer",
           onClick: () => setSettingsShown(false),
-          children: /* @__PURE__ */ jsx26(CloseIcon, {})
+          children: /* @__PURE__ */ jsx27(CloseIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsxs9("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ jsx26("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
-        /* @__PURE__ */ jsx26("div", { children: /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs10("div", { children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ jsx27("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
+        /* @__PURE__ */ jsx27("div", { children: /* @__PURE__ */ jsxs10(
           "span",
           {
             className: "inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer",
@@ -1621,8 +1389,8 @@ var Settings = ({
               setExpressChecked((x) => !x);
             },
             children: [
-              /* @__PURE__ */ jsx26("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
-              /* @__PURE__ */ jsx26(
+              /* @__PURE__ */ jsx27("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
+              /* @__PURE__ */ jsx27(
                 "span",
                 {
                   className: `transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
@@ -1633,15 +1401,15 @@ var Settings = ({
           }
         ) })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsx26("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ jsx26(InfoIcon, {}) }),
-        /* @__PURE__ */ jsx26("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__ */ jsxs10("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx27("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ jsx27(InfoIcon, {}) }),
+        /* @__PURE__ */ jsx27("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__ */ jsxs9("div", { className: "flex flex-col gap-2 ", children: [
-      /* @__PURE__ */ jsx26("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ jsx26("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ jsx26(
+    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-2 ", children: [
+      /* @__PURE__ */ jsx27("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
+      /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ jsx27("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ jsx27(
           "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]" : ""}`,
@@ -1653,8 +1421,8 @@ var Settings = ({
           },
           index
         )) }),
-        /* @__PURE__ */ jsxs9("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__ */ jsx26(
+        /* @__PURE__ */ jsxs10("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__ */ jsx27(
             "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",
@@ -1673,16 +1441,16 @@ var Settings = ({
               }
             }
           ),
-          /* @__PURE__ */ jsx26(PercentageIcon, {})
+          /* @__PURE__ */ jsx27(PercentageIcon, {})
         ] })
       ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsx26("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ jsx26(InfoIcon, {}) }),
-        /* @__PURE__ */ jsxs9("div", { className: "text-xs text-left", children: [
+      /* @__PURE__ */ jsxs10("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ jsx27("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ jsx27(InfoIcon, {}) }),
+        /* @__PURE__ */ jsxs10("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__ */ jsx26("br", {}),
+          /* @__PURE__ */ jsx27("br", {}),
           " ",
-          /* @__PURE__ */ jsx26("br", {}),
+          /* @__PURE__ */ jsx27("br", {}),
           "If the trade fails due to too-low slippage, you will receive USDC on the destination chain."
         ] })
       ] })
@@ -1691,7 +1459,7 @@ var Settings = ({
 };
 
 // src/components/TxConfigForm/FeesDetails.tsx
-import { jsx as jsx27, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
 var FeesDetails = ({
   isGettingRoute,
   route,
@@ -1702,12 +1470,12 @@ var FeesDetails = ({
   feesDetailsShown,
   setFeesDetailsShown
 }) => {
-  return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1", children: [
-    /* @__PURE__ */ jsxs10("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm ", children: [
-      /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
-        /* @__PURE__ */ jsx27(CoinsIcon, {}),
-        /* @__PURE__ */ jsx27("div", { className: "mr-1", children: "Fees:" }),
-        isGettingRoute ? /* @__PURE__ */ jsx27("div", { className: "bg-current rounded animate-pulse w-20 h-4" }) : ` ${weiToHumanReadable({
+  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1", children: [
+    /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm ", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
+        /* @__PURE__ */ jsx28(CoinsIcon, {}),
+        /* @__PURE__ */ jsx28("div", { className: "mr-1", children: "Fees:" }),
+        isGettingRoute ? /* @__PURE__ */ jsx28("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(
@@ -1717,30 +1485,30 @@ var FeesDetails = ({
           precisionFractionalPlaces: 5
         })} ${paymentToken?.symbol}`
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex gap-1 items-center", children: [
-        /* @__PURE__ */ jsxs10(
+      /* @__PURE__ */ jsxs11("div", { className: "flex gap-1 items-center", children: [
+        /* @__PURE__ */ jsxs11(
           "div",
           {
             className: `flex gap-1 items-center font-medium ${expressChecked ? "text-x_green" : "text-white opacity-60"}`,
             children: [
-              /* @__PURE__ */ jsx27(TimerIcon, {}),
+              /* @__PURE__ */ jsx28(TimerIcon, {}),
               expressChecked ? "Fast ~ 30sec " : "Normal ~ 30min"
             ]
           }
         ),
-        /* @__PURE__ */ jsx27(
+        /* @__PURE__ */ jsx28(
           "div",
           {
             onClick: () => setFeesDetailsShown((x) => !x),
             className: "font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]",
-            children: feesDetailsShown ? /* @__PURE__ */ jsx27(ChevronUpIcon, {}) : /* @__PURE__ */ jsx27(ChevronDownIcon, {})
+            children: feesDetailsShown ? /* @__PURE__ */ jsx28(ChevronUpIcon, {}) : /* @__PURE__ */ jsx28(ChevronDownIcon, {})
           }
         )
       ] })
     ] }),
-    feesDetailsShown && /* @__PURE__ */ jsxs10("div", { className: "flex w-full items-center justify-between ", children: [
-      /* @__PURE__ */ jsxs10("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ jsxs10("div", { className: "font-medium text-white opacity-60", children: [
+    feesDetailsShown && /* @__PURE__ */ jsxs11("div", { className: "flex w-full items-center justify-between ", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col text-[10px] gap-1", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "font-medium text-white opacity-60", children: [
           "CCIP Fee:",
           ` ${weiToHumanReadable({
             amount: route?.xSwapFees.ccipFee || "0",
@@ -1748,7 +1516,7 @@ var FeesDetails = ({
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}`
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: "font-medium text-white opacity-60", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "font-medium text-white opacity-60", children: [
           "Native Fee:",
           ` ${weiToHumanReadable({
             amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
@@ -1757,12 +1525,12 @@ var FeesDetails = ({
           })} ${paymentToken?.symbol}`
         ] })
       ] }),
-      /* @__PURE__ */ jsxs10("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ jsxs10("div", { className: "font-medium text-white opacity-60", children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col text-[10px] gap-1", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "font-medium text-white opacity-60", children: [
           "Slippage: ",
           `${slippage}%`
         ] }),
-        /* @__PURE__ */ jsxs10("div", { className: "font-medium text-white opacity-60", children: [
+        /* @__PURE__ */ jsxs11("div", { className: "font-medium text-white opacity-60", children: [
           "Min amount out:",
           " ",
           weiToHumanReadable({
@@ -1783,7 +1551,7 @@ import { useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } f
 
 // src/components/TxConfigForm/UsdPrice.tsx
 import { useEffect as useEffect4, useState as useState4 } from "react";
-import { Fragment as Fragment3, jsx as jsx28 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx29 } from "react/jsx-runtime";
 var UsdPrice = ({
   prices,
   token,
@@ -1796,11 +1564,11 @@ var UsdPrice = ({
       setUsdPrice((Number(amount) * Number(prices[token.address])).toFixed(2));
     }
   }, [token, prices, amount]);
-  return /* @__PURE__ */ jsx28("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ jsx28(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ jsx28("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ jsx28(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ jsx28(Fragment3, { children: "$0.00" }) });
+  return /* @__PURE__ */ jsx29("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ jsx29(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ jsx29("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ jsx29(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ jsx29(Fragment3, { children: "$0.00" }) });
 };
 
 // src/components/TxConfigForm/Summary.tsx
-import { jsx as jsx29, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
 var Summary = ({
   isGettingRoute,
   route,
@@ -1823,32 +1591,32 @@ var Summary = ({
       );
     }
   }, [dstChain]);
-  return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
-    /* @__PURE__ */ jsxs11("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx29("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
-        isGettingRoute ? /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs12("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx30("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
+        isGettingRoute ? /* @__PURE__ */ jsx30(
           Skeleton,
           {
             width: "w-[100px]",
             height: "h-[36px]",
             other: "sm:w-[190px]"
           }
-        ) : /* @__PURE__ */ jsxs11("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: [
+        ) : /* @__PURE__ */ jsxs12("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: [
           amountReadable,
-          /* @__PURE__ */ jsx29("div", { className: "w-4 sm:w-6 h-4 sm:h-6", children: /* @__PURE__ */ jsx29("img", { src: dstToken?.image, alt: dstToken?.name }) }),
-          /* @__PURE__ */ jsx29("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
+          /* @__PURE__ */ jsx30("div", { className: "w-4 sm:w-6 h-4 sm:h-6", children: /* @__PURE__ */ jsx30("img", { src: dstToken?.image, alt: dstToken?.name }) }),
+          /* @__PURE__ */ jsx30("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1 text-sm", children: [
-        /* @__PURE__ */ jsx29("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on chain:" }),
-        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 text-white", children: [
-          /* @__PURE__ */ jsx29("div", { className: "w-4 h-4", children: /* @__PURE__ */ jsx29("img", { src: dstChain?.image, alt: dstChain?.name }) }),
-          /* @__PURE__ */ jsx29("div", { children: dstChain?.displayName })
+      /* @__PURE__ */ jsxs12("div", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ jsx30("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on chain:" }),
+        /* @__PURE__ */ jsxs12("div", { className: "flex items-center gap-1 text-white", children: [
+          /* @__PURE__ */ jsx30("div", { className: "w-4 h-4", children: /* @__PURE__ */ jsx30("img", { src: dstChain?.image, alt: dstChain?.name }) }),
+          /* @__PURE__ */ jsx30("div", { children: dstChain?.displayName })
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       UsdPrice,
       {
         prices,
@@ -1857,7 +1625,7 @@ var Summary = ({
         loading: isGettingRoute
       }
     ),
-    /* @__PURE__ */ jsx29("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__ */ jsx29("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__ */ jsx29(ArrowDownIcon, {}) }) })
+    /* @__PURE__ */ jsx30("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__ */ jsx30("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__ */ jsx30(ArrowDownIcon, {}) }) })
   ] });
 };
 
@@ -1867,7 +1635,7 @@ import { useState as useState7, useEffect as useEffect6, useRef as useRef2, useM
 // src/components/TxConfigForm/TokenPicker.tsx
 import { useState as useState6, useMemo as useMemo4 } from "react";
 import { createPortal } from "react-dom";
-import { Fragment as Fragment4, jsx as jsx30, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 var TokenPicker = ({
   onCloseClick,
   tokens,
@@ -1894,24 +1662,24 @@ var TokenPicker = ({
     );
   }, [searchValue, tokens]);
   return modalRoot ? createPortal(
-    /* @__PURE__ */ jsx30(
+    /* @__PURE__ */ jsx31(
       "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__ */ jsxs12("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__ */ jsx30(
+        children: /* @__PURE__ */ jsxs13("div", { className: "relative bg-black rounded-3xl p-6 max-h-[70%] flex flex-col text-base text-white w-[452px] h-[70%] border border-solid border-[rgba(255,255,255,0.2)]", children: [
+          /* @__PURE__ */ jsx31(
             "div",
             {
               onClick: onCloseClick,
               className: "absolute top-4 right-4 cursor-pointer",
-              children: /* @__PURE__ */ jsx30(CloseIcon, {})
+              children: /* @__PURE__ */ jsx31(CloseIcon, {})
             }
           ),
-          /* @__PURE__ */ jsx30("p", { className: "text-base mb-4", children: "Pick a token" }),
-          /* @__PURE__ */ jsxs12("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__ */ jsx30("div", { className: "w-6 h-6", children: /* @__PURE__ */ jsx30(SearchIcon, {}) }),
-            /* @__PURE__ */ jsx30(
+          /* @__PURE__ */ jsx31("p", { className: "text-base mb-4", children: "Pick a token" }),
+          /* @__PURE__ */ jsxs13("div", { className: "flex items-center border border-solid border-[rgba(255,255,255,0.1)] rounded-lg py-0 px-3 gap-2 bg-[rgba(15,15,15,1)]", children: [
+            /* @__PURE__ */ jsx31("div", { className: "w-6 h-6", children: /* @__PURE__ */ jsx31(SearchIcon, {}) }),
+            /* @__PURE__ */ jsx31(
               "input",
               {
                 placeholder: "Search name or paste address",
@@ -1921,7 +1689,7 @@ var TokenPicker = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx30("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ jsxs12(
+          /* @__PURE__ */ jsx31("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ jsxs13(
             "div",
             {
               className: `flex gap-2 py-1 px-2 items-center bg-[rgb(15,15,15)] rounded-2xl border border-solid border-[rgba(255,255,255,0.1)] hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35, 35, 35)]" : ""}`,
@@ -1930,14 +1698,14 @@ var TokenPicker = ({
                 onCloseClick();
               },
               children: [
-                /* @__PURE__ */ jsx30("img", { src: token.image, alt: token.name, className: "w-5" }),
-                /* @__PURE__ */ jsx30("div", { className: "text-sm", children: token.symbol })
+                /* @__PURE__ */ jsx31("img", { src: token.image, alt: token.name, className: "w-5" }),
+                /* @__PURE__ */ jsx31("div", { className: "text-sm", children: token.symbol })
               ]
             },
             token.address
           )) }),
-          /* @__PURE__ */ jsx30("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
-          /* @__PURE__ */ jsx30("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__ */ jsxs12(
+          /* @__PURE__ */ jsx31("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
+          /* @__PURE__ */ jsx31("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ jsxs13(
             "div",
             {
               className: `flex gap-3 py-2 px-[24px] w-full items-center hover:bg-[rgb(25,25,25)] hover:cursor-pointer ${token.address === selectedToken?.address ? "bg-[rgb(35,35,35)]" : ""}`,
@@ -1946,29 +1714,29 @@ var TokenPicker = ({
                 onCloseClick();
               },
               children: [
-                token.image ? /* @__PURE__ */ jsx30(
+                token.image ? /* @__PURE__ */ jsx31(
                   "img",
                   {
                     src: token.image,
                     alt: token.name,
                     className: "token-picker__all__logo"
                   }
-                ) : /* @__PURE__ */ jsx30("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__ */ jsxs12("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
-                  /* @__PURE__ */ jsxs12("div", { className: "flex flex-col leading-[16px]", children: [
-                    /* @__PURE__ */ jsx30("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
-                    /* @__PURE__ */ jsx30("div", { className: "text-[#888] text-[11px]", children: token.symbol })
+                ) : /* @__PURE__ */ jsx31("div", { className: "flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
+                /* @__PURE__ */ jsxs13("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
+                  /* @__PURE__ */ jsxs13("div", { className: "flex flex-col leading-[16px]", children: [
+                    /* @__PURE__ */ jsx31("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
+                    /* @__PURE__ */ jsx31("div", { className: "text-[#888] text-[11px]", children: token.symbol })
                   ] }),
-                  signer && /* @__PURE__ */ jsx30(Fragment4, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ jsx30("div", { className: "text-xs", children: weiToHumanReadable({
+                  signer && /* @__PURE__ */ jsx31(Fragment4, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ jsx31("div", { className: "text-xs", children: weiToHumanReadable({
                     amount: balances[token.address]?.toString() || "0",
                     decimals: token.decimals,
                     precisionFractionalPlaces: 4
-                  }) }) : /* @__PURE__ */ jsx30(Skeleton, { width: "w-12", height: "h-3" }) })
+                  }) }) : /* @__PURE__ */ jsx31(Skeleton, { width: "w-12", height: "h-3" }) })
                 ] })
               ]
             },
             `${index}_${token.address}`
-          )) : /* @__PURE__ */ jsx30("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx30("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
+          )) : /* @__PURE__ */ jsx31("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx31("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
         ] })
       }
     ),
@@ -1977,7 +1745,7 @@ var TokenPicker = ({
 };
 
 // src/components/TxConfigForm/ChainListElement.tsx
-import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
 var ChainListElement = ({
   chain,
   setSrcChain,
@@ -1985,8 +1753,8 @@ var ChainListElement = ({
   index,
   length
 }) => {
-  return /* @__PURE__ */ jsxs13("div", { children: [
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14("div", { children: [
+    /* @__PURE__ */ jsxs14(
       "li",
       {
         className: "bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full",
@@ -1995,19 +1763,19 @@ var ChainListElement = ({
           setChainListShown(false);
         },
         children: [
-          /* @__PURE__ */ jsx31("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
+          /* @__PURE__ */ jsx32("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
           chain.displayName
         ]
       }
     ),
-    index !== length - 1 && /* @__PURE__ */ jsx31("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
+    index !== length - 1 && /* @__PURE__ */ jsx32("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
   ] }, `${chain.ecosystem}-${chain.chainId}`);
 };
 
 // src/components/TxConfigForm/BalanceComponent.tsx
 import { useMemo as useMemo5 } from "react";
 import BigNumber3 from "bignumber.js";
-import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
 var BalanceComponent = ({ srcToken, balances }) => {
   const balanceText = useMemo5(() => {
     if (!balances || !srcToken) return "0";
@@ -2027,7 +1795,7 @@ var BalanceComponent = ({ srcToken, balances }) => {
       precisionFractionalPlaces: 5
     });
   }, [srcToken, balances]);
-  return /* @__PURE__ */ jsxs14(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs15(Fragment5, { children: [
     "Balance:",
     " ",
     srcToken && balances ? weiToHumanReadable({
@@ -2035,12 +1803,12 @@ var BalanceComponent = ({ srcToken, balances }) => {
       decimals: srcToken.decimals,
       precisionFractionalPlaces: 4
     }) : 0,
-    /* @__PURE__ */ jsx32("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
+    /* @__PURE__ */ jsx33("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs16 } from "react/jsx-runtime";
 var SwapPanel = ({
   amount,
   setAmount,
@@ -2085,11 +1853,11 @@ var SwapPanel = ({
     () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
     [supportedChains, srcChain]
   );
-  return /* @__PURE__ */ jsxs15("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
-    /* @__PURE__ */ jsxs15("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
-      /* @__PURE__ */ jsxs15("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx33("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
-        /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsxs16("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
+      /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx34("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
+        /* @__PURE__ */ jsx34(
           "input",
           {
             className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
@@ -2108,7 +1876,7 @@ var SwapPanel = ({
           }
         )
       ] }),
-      /* @__PURE__ */ jsx33("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ jsx34(
         UsdPrice,
         {
           prices,
@@ -2118,8 +1886,8 @@ var SwapPanel = ({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs15("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
-      /* @__PURE__ */ jsxs15(
+    /* @__PURE__ */ jsxs16("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
+      /* @__PURE__ */ jsxs16(
         "div",
         {
           className: "flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap",
@@ -2127,7 +1895,7 @@ var SwapPanel = ({
             setTokenListShown((state) => !state);
           },
           children: [
-            /* @__PURE__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               "img",
               {
                 height: 16,
@@ -2136,12 +1904,12 @@ var SwapPanel = ({
                 alt: srcToken?.name
               }
             ),
-            /* @__PURE__ */ jsx33("div", { children: srcToken?.symbol }),
-            /* @__PURE__ */ jsx33(DownArrowIcon, {})
+            /* @__PURE__ */ jsx34("div", { children: srcToken?.symbol }),
+            /* @__PURE__ */ jsx34(DownArrowIcon, {})
           ]
         }
       ),
-      tokenListShown && /* @__PURE__ */ jsx33(
+      tokenListShown && /* @__PURE__ */ jsx34(
         TokenPicker,
         {
           onCloseClick: () => setTokenListShown(false),
@@ -2152,22 +1920,22 @@ var SwapPanel = ({
           balances
         }
       ),
-      /* @__PURE__ */ jsx33(
+      /* @__PURE__ */ jsx34(
         "div",
         {
           onClick: handleMaxClick,
           className: "flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer",
-          children: signer && /* @__PURE__ */ jsx33(BalanceComponent, { balances, srcToken })
+          children: signer && /* @__PURE__ */ jsx34(BalanceComponent, { balances, srcToken })
         }
       ),
-      /* @__PURE__ */ jsxs15(
+      /* @__PURE__ */ jsxs16(
         "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__ */ jsx33(
+            /* @__PURE__ */ jsx34(
               "img",
               {
                 width: "16",
@@ -2176,17 +1944,17 @@ var SwapPanel = ({
                 alt: srcChain?.name
               }
             ),
-            /* @__PURE__ */ jsx33("div", { children: srcChain?.displayName }),
-            /* @__PURE__ */ jsx33(DownArrowIcon, {})
+            /* @__PURE__ */ jsx34("div", { children: srcChain?.displayName }),
+            /* @__PURE__ */ jsx34(DownArrowIcon, {})
           ]
         }
       ),
-      chainListShown && /* @__PURE__ */ jsx33(
+      chainListShown && /* @__PURE__ */ jsx34(
         "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__ */ jsx33(
+          children: chainListOptions.map((chain, index) => /* @__PURE__ */ jsx34(
             ChainListElement,
             {
               index,
@@ -2203,9 +1971,9 @@ var SwapPanel = ({
 };
 
 // src/components/TxConfigForm/ErrorField.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var ErrorField = ({ error }) => {
-  return /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsx35(
     "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"}`,
@@ -2215,15 +1983,15 @@ var ErrorField = ({ error }) => {
 };
 
 // src/components/TxConfigForm/Description.tsx
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 var Description = ({ description }) => {
-  return /* @__PURE__ */ jsx35("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ jsx35("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
+  return /* @__PURE__ */ jsx36("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ jsx36("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
 };
 
 // src/components/TxConfigForm/Button.tsx
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 var Button = ({ children, onClick, type, disabled }) => {
-  return /* @__PURE__ */ jsx36(
+  return /* @__PURE__ */ jsx37(
     "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",
@@ -2236,7 +2004,7 @@ var Button = ({ children, onClick, type, disabled }) => {
 };
 
 // src/components/TxConfigForm/Form.tsx
-import { jsx as jsx37, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
 var Form = ({
   dstChainId,
   dstTokenAddr,
@@ -2301,7 +2069,7 @@ var Form = ({
           `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`
         );
       getRoute({
-        fromAmount: ethers4.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
+        fromAmount: ethers3.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
         fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
         fromChain: srcChain.chainId,
         fromToken: srcToken.address,
@@ -2335,7 +2103,7 @@ var Form = ({
     if (srcChain) {
       setPaymentToken(
         srcChain.tokens.find(
-          (token) => token.address.toLowerCase() === ethers4.constants.AddressZero.toLowerCase()
+          (token) => token.address.toLowerCase() === ethers3.constants.AddressZero.toLowerCase()
         )
       );
     }
@@ -2366,13 +2134,13 @@ var Form = ({
   const handleSwitchChain = async () => {
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
   };
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     "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__ */ jsx37(
+        /* @__PURE__ */ jsx38(
           TopBar,
           {
             signer,
@@ -2381,7 +2149,7 @@ var Form = ({
             setSettingsShown
           }
         ),
-        settingsShown && /* @__PURE__ */ jsx37(
+        settingsShown && /* @__PURE__ */ jsx38(
           Settings,
           {
             expressChecked,
@@ -2391,9 +2159,9 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? /* @__PURE__ */ jsx37(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs16("div", { className: "flex flex-col gap-2", children: [
-          desc && /* @__PURE__ */ jsx37(Description, { description: desc }),
-          /* @__PURE__ */ jsx37(
+        historyTabShown ? /* @__PURE__ */ jsx38(History, { signer, supportedChains }) : /* @__PURE__ */ jsxs17("div", { className: "flex flex-col gap-2", children: [
+          desc && /* @__PURE__ */ jsx38(Description, { description: desc }),
+          /* @__PURE__ */ jsx38(
             SwapPanel,
             {
               amount,
@@ -2408,7 +2176,7 @@ var Form = ({
               setSrcChain
             }
           ),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             Summary,
             {
               isGettingRoute,
@@ -2417,7 +2185,7 @@ var Form = ({
               dstChain
             }
           ),
-          /* @__PURE__ */ jsx37(
+          /* @__PURE__ */ jsx38(
             FeesDetails,
             {
               route,
@@ -2430,8 +2198,8 @@ var Form = ({
               setFeesDetailsShown
             }
           ),
-          formError.length > 0 && /* @__PURE__ */ jsx37(ErrorField, { error: formError }),
-          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ jsx37(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ jsx37(
+          formError.length > 0 && /* @__PURE__ */ jsx38(ErrorField, { error: formError }),
+          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ jsx38(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ jsx38(
             Button,
             {
               type: "submit",
@@ -2445,11 +2213,8 @@ var Form = ({
   );
 };
 
-// package.json
-var version = "0.2.0";
-
 // src/components/TxConfigForm/index.tsx
-import { jsx as jsx38, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
 var TxConfigForm = ({
   dstChainId,
   dstTokenAddr,
@@ -2471,13 +2236,13 @@ var TxConfigForm = ({
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ jsx38(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx38(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ jsx39(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx39(
     "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__ */ jsxs17("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__ */ jsx38(
+      children: /* @__PURE__ */ jsxs18("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__ */ jsx39(
           Form,
           {
             dstChainId,
@@ -2488,20 +2253,15 @@ var TxConfigForm = ({
             onSubmit
           }
         ),
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           "div",
           {
             className: "absolute top-7 right-4 cursor-pointer text-white",
             onClick: onClose,
-            children: /* @__PURE__ */ jsx38(CloseIcon, {})
+            children: /* @__PURE__ */ jsx39(CloseIcon, {})
           }
         ),
-        /* @__PURE__ */ jsxs17("div", { className: "swappage__poweredby", children: [
-          /* @__PURE__ */ jsx38("span", { children: "Powered by" }),
-          /* @__PURE__ */ jsx38(XSwapBadgeIcon, {}),
-          /* @__PURE__ */ jsx38("span", { children: "\u2715" }),
-          /* @__PURE__ */ jsx38(ChainlinkCCIPIcon, {})
-        ] })
+        /* @__PURE__ */ jsx39(PoweredBy, {})
       ] })
     }
   ) }) });
@@ -2516,7 +2276,7 @@ var openTxConfigForm = async ({
   try {
     return await new Promise((resolve) => {
       xswapRoot.render(
-        /* @__PURE__ */ jsx38(
+        /* @__PURE__ */ jsx39(
           TxConfigForm,
           {
             dstChainId,
@@ -2539,24 +2299,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 = createRoot(xswapModalElement);
-}
 
-// src/components/TxHistoryButton/index.tsx
-import { useState as useState9 } from "react";
-import { createRoot as createRoot2 } from "react-dom/client";
-import { Fragment as Fragment6, jsx as jsx39, jsxs as jsxs18 } from "react/jsx-runtime";
-var TxHistoryButton = ({ transaction }) => {
+// src/components/TxStatusButton/index.tsx
+import { useMemo as useMemo8, useState as useState9 } from "react";
+import { Fragment as Fragment6, jsx as jsx40, jsxs as jsxs19 } from "react/jsx-runtime";
+var TxStatusButton = ({ transaction }) => {
   const {
     fromChain,
     fromChainImage,
@@ -2570,15 +2317,23 @@ var TxHistoryButton = ({ transaction }) => {
     explorer
   } = transaction;
   const [isWide, setIsWide] = useState9(false);
-  return /* @__PURE__ */ jsxs18("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
-    isWide && /* @__PURE__ */ jsxs18(
+  const background = useMemo8(
+    () => isDone ? "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(76,175,80,0.2)] to-[rgba(46,125,50,0.2)]" : "bg-[rgba(2,2,2,1)] bg-gradient-to-r from-[rgba(54,129,198,0.2)] to-[rgba(43,74,157,0.2)]",
+    [isDone]
+  );
+  const border = useMemo8(
+    () => isDone ? "border border-solid border-x_green_dark" : "border border-solid border-x_blue_dark",
+    [isDone]
+  );
+  return /* @__PURE__ */ jsxs19("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
+    isWide && /* @__PURE__ */ jsxs19(
       "div",
       {
-        className: `flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl bg-gradient-to-r ${isDone ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark" : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"}`,
+        className: `flex items-center min-w-60 sm:w-[520px] text-white h-14 px-4 text-sm gap-3 rounded-xl ${background} ${border}`,
         children: [
-          /* @__PURE__ */ jsxs18("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
-            /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsxs19("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
+            /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx40(
                 "img",
                 {
                   className: "w-5 h-5",
@@ -2586,16 +2341,16 @@ var TxHistoryButton = ({ transaction }) => {
                   alt: "source chain"
                 }
               ),
-              /* @__PURE__ */ jsx39("div", { children: fromChain }),
-              /* @__PURE__ */ jsx39("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx39(ArrowRightIcon, {}) }),
-              /* @__PURE__ */ jsx39("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
-              /* @__PURE__ */ jsx39("div", { children: toChain })
+              /* @__PURE__ */ jsx40("div", { children: fromChain }),
+              /* @__PURE__ */ jsx40("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx40(ArrowRightIcon, {}) }),
+              /* @__PURE__ */ jsx40("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
+              /* @__PURE__ */ jsx40("div", { children: toChain })
             ] }),
-            /* @__PURE__ */ jsxs18("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx39("div", { children: "Sent" }),
-              /* @__PURE__ */ jsx39("div", { children: fromAmount }),
-              /* @__PURE__ */ jsx39("div", { children: fromToken }),
-              /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsxs19("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx40("div", { children: "Sent" }),
+              /* @__PURE__ */ jsx40("div", { children: fromAmount }),
+              /* @__PURE__ */ jsx40("div", { children: fromToken }),
+              /* @__PURE__ */ jsx40(
                 "img",
                 {
                   className: "w-5 h-5",
@@ -2605,7 +2360,7 @@ var TxHistoryButton = ({ transaction }) => {
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "a",
             {
               href: explorer,
@@ -2613,22 +2368,21 @@ var TxHistoryButton = ({ transaction }) => {
               rel: "noreferrer",
               className: "no-underline cursor-pointer",
               "aria-label": "Show the transaction in the chain explorer",
-              children: /* @__PURE__ */ jsx39("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx39(ArrowUpRightIcon, {}) })
+              children: /* @__PURE__ */ jsx40("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ jsx40(ArrowUpRightIcon, {}) })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       "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__ */ jsxs18("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
-          /* @__PURE__ */ jsx39(ArrowLeftIcon, {}),
-          /* @__PURE__ */ jsx39("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ jsx39("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ jsx39(CheckIcon, {}) }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
-            /* @__PURE__ */ jsx39("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx39(XSwapLogo, {}) }),
-            /* @__PURE__ */ jsx39("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ jsx39(CircularProgressIcon, {}) })
+        className: `text-white rounded-xl cursor-pointer ${background} ${border}`,
+        children: /* @__PURE__ */ jsxs19("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
+          /* @__PURE__ */ jsx40(ArrowLeftIcon, {}),
+          /* @__PURE__ */ jsx40("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ jsx40("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ jsx40(CheckIcon, {}) }) : /* @__PURE__ */ jsxs19(Fragment6, { children: [
+            /* @__PURE__ */ jsx40("div", { className: "w-5 h-5", children: /* @__PURE__ */ jsx40(XSwapLogo, {}) }),
+            /* @__PURE__ */ jsx40("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ jsx40(CircularProgressIcon, {}) })
           ] }) })
         ] })
       }
@@ -2654,73 +2408,159 @@ 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 = createRoot2(historyElement);
-var renderTxHistoryButtons = () => {
-  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx39(TxHistoryButton, { transaction: item }, item.txHash));
-  txHistoryButtonRoot.render(buttons);
+var renderTxStatusButtons = () => {
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ jsx40(TxStatusButton, { transaction: item }, item.txHash));
+  txStatusRoot.render(buttons);
 };
 
 // src/components/Skeleton/index.tsx
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { jsx as jsx41 } from "react/jsx-runtime";
 var Skeleton = ({ width, height }) => {
-  return /* @__PURE__ */ jsx40("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+  return /* @__PURE__ */ jsx41("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
+};
+
+// src/services/integrations/monitoring.ts
+import retry from "async-retry";
+var monitorTransactionStatus = async (txChainId, txHash) => {
+  const txReceipt = await getTxReceipt(txChainId, txHash);
+  const supportedChains = (await getChains()).filter(
+    ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
+  );
+  const messageSentEvent = txReceipt.logs?.find((log) => {
+    return log.topics[0] === ethers4.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 ethers4.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 ethers4.Contract(
+    xSwapRouterOnDestinationAddress,
+    MSG_RECEIVED_EVENT_ABI,
+    ethers4.getDefaultProvider(
+      supportedChains.find((chain) => chain.chainId === dstChainId)?.publicRpcUrls[0]
+    )
+  );
+  const msgReceivedEventFilter = {
+    address: xSwapRouterOnDestinationAddress,
+    topics: [ethers4.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 ethers4.providers.JsonRpcProvider(
+      chain?.publicRpcUrls[0]
+    );
+    return await retry(async () => {
+      const txReceipt = await provider.getTransactionReceipt(txHash);
+      if (!txReceipt) {
+        throw new Error(`Couldn't fetch tx receipt`);
+      }
+      return txReceipt;
+    });
+  } catch (e) {
+    throw new Error(
+      `Couldn't fetch tx ${txHash} receipt on chain ${txChainId}`
+    );
+  }
+};
+
+// src/services/integrations/transactions.ts
+var getSwapTx = async ({
+  dstChain,
+  dstToken,
+  customContractCalls = [],
+  desc
+}) => {
+  const supportedChains = (await getChains()).filter(
+    ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
+  );
+  validateSwapTxData(supportedChains, dstChain, dstToken);
+  const route = await openTxConfigForm({
+    dstChainId: dstChain,
+    dstTokenAddr: dstToken,
+    customContractCalls,
+    desc,
+    supportedChains
+  });
+  return route.transactions;
+};
+var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
+  const supportedDstChain = supportedChains.find(
+    ({ chainId }) => chainId === dstChain
+  );
+  if (!supportedDstChain) {
+    throw new Error(`Provided chain '${dstChain}' is not supported`);
+  }
+  if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
+    throw new Error(`Provided token '${dstToken}' is not supported`);
+  }
 };
+
+// src/index.ts
+initDocument();
 export {
-  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
 };