@xswap-link/sdk 0.1.2 → 0.1.4

package/dist/index.js

@@ -34,6 +34,7 @@ __export(src_exports, {
   Alert: () => Alert,
   BALANCES_CHUNK_SIZE: () => BALANCES_CHUNK_SIZE,
   BatchQueryAbi: () => BatchQueryAbi,
+  CCIP_EXPLORER: () => CCIP_EXPLORER,
   ContractName: () => ContractName,
   DEFAULT_ECOSYSTEM: () => DEFAULT_ECOSYSTEM,
   DEFAULT_SOURCE_CHAIN_ID: () => DEFAULT_SOURCE_CHAIN_ID,
@@ -48,9 +49,10 @@ __export(src_exports, {
   ROUTE_TIMEOUT_MS: () => ROUTE_TIMEOUT_MS,
   SLIPPAGE_PRESETS: () => SLIPPAGE_PRESETS,
   Skeleton: () => Skeleton,
+  TxHistoryButton: () => TxHistoryButton,
   Web3Environment: () => Web3Environment,
   XSwapCallType: () => XSwapCallType,
-  XSwapRouterAbi: () => XSwapRouterAbi,
+  addTransactionToRenderedTransactions: () => addTransactionToRenderedTransactions,
   chunkArray: () => chunkArray,
   deepMergeObjects: () => deepMergeObjects,
   findPlaceholderIndex: () => findPlaceholderIndex,
@@ -63,15 +65,20 @@ __export(src_exports, {
   getBridgeTokens: () => getBridgeTokens,
   getChainData: () => getChainData,
   getChains: () => getChains,
+  getDate: () => getDate,
   getHistory: () => getHistory,
   getPrices: () => getPrices,
   getRoute: () => getRoute,
   getSwapTx: () => getSwapTx,
   getTokens: () => getTokens,
+  monitorTransactionStatus: () => monitorTransactionStatus,
   openTxConfigForm: () => openTxConfigForm,
+  removeTransactionFromRenderedTransactions: () => removeTransactionFromRenderedTransactions,
+  renderTxHistoryButtons: () => renderTxHistoryButtons,
   replaceNull: () => replaceNull,
   safeBigNumberFrom: () => safeBigNumberFrom,
   shortAddress: () => shortAddress,
+  updateTransactionDoneInRenderedTransactions: () => updateTransactionDoneInRenderedTransactions,
   weiToHumanReadable: () => weiToHumanReadable
 });
 module.exports = __toCommonJS(src_exports);
@@ -86,7 +93,7 @@ var Alert = ({ desc }) => {
 };
 
 // src/components/TxConfigForm/index.tsx
-var import_react9 = require("react");
+var import_react11 = require("react");
 var import_client = require("react-dom/client");
 var import_react_query = require("@tanstack/react-query");
 var import_wagmi3 = require("wagmi");
@@ -149,8 +156,8 @@ var CloseIcon = () => {
 };
 
 // src/components/TxConfigForm/Form.tsx
-var import_react8 = require("react");
-var import_ethers4 = require("ethers");
+var import_react10 = require("react");
+var import_ethers5 = require("ethers");
 var import_wagmi2 = require("wagmi");
 
 // xswap.config.ts
@@ -237,6 +244,7 @@ var import_ethers3 = require("ethers");
 var ContractName = /* @__PURE__ */ ((ContractName2) => {
   ContractName2["BatchQuery"] = "BatchQuery";
   ContractName2["FeeCollector"] = "FeeCollector";
+  ContractName2["XSwapRouter"] = "XSwapRouter";
   return ContractName2;
 })(ContractName || {});
 
@@ -586,1422 +594,185 @@ var ERC20_default = [
   }
 ];
 
-// src/contracts/abi/XSwapRouter.json
-var XSwapRouter_default = [
-  {
-    inputs: [],
-    stateMutability: "nonpayable",
-    type: "constructor"
-  },
-  {
-    inputs: [
-      {
-        internalType: "uint64",
-        name: "destinationChainSelector",
-        type: "uint64"
-      }
-    ],
-    name: "DestinationChainNotWhitelisted",
-    type: "error"
-  },
-  {
-    inputs: [],
-    name: "FailedToSendNative",
-    type: "error"
-  },
-  {
-    inputs: [],
-    name: "IncorrectArrayLength",
-    type: "error"
-  },
-  {
-    inputs: [],
-    name: "InvalidAddress",
-    type: "error"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "router",
-        type: "address"
-      }
-    ],
-    name: "InvalidRouter",
-    type: "error"
+// src/contracts/abi/index.ts
+var BatchQueryAbi = BatchQuery_default;
+var ERC20Abi = ERC20_default;
+
+// src/contracts/addresses.ts
+var ADDRESSES = {
+  // arbitrum
+  "42161": {
+    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    ["XSwapRouter" /* XSwapRouter */]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
+    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
   },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "messageExecutor",
-        type: "address"
-      }
-    ],
-    name: "MessageAlreadyExecuted",
-    type: "error"
+  // avalanche
+  "43114": {
+    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    ["XSwapRouter" /* XSwapRouter */]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
+    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
   },
-  {
-    inputs: [],
-    name: "MessageMustTransferOnlyOneToken",
-    type: "error"
+  // base
+  "8453": {
+    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    ["XSwapRouter" /* XSwapRouter */]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
+    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
   },
-  {
-    inputs: [
-      {
-        internalType: "uint64",
-        name: "chainId",
-        type: "uint64"
-      }
-    ],
-    name: "NoXSwapRouterOnSelectedChain",
-    type: "error"
+  // ethereum
+  "1": {
+    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    ["XSwapRouter" /* XSwapRouter */]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
+    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
   },
-  {
-    inputs: [
-      {
-        internalType: "uint256",
-        name: "currentBalance",
-        type: "uint256"
-      },
-      {
-        internalType: "uint256",
-        name: "calculatedFees",
-        type: "uint256"
-      }
-    ],
-    name: "NotEnoughBalance",
-    type: "error"
+  // optimism
+  "10": {
+    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    ["XSwapRouter" /* XSwapRouter */]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
+    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
   },
-  {
-    inputs: [
-      {
-        internalType: "uint64",
-        name: "sourceChainSelector",
-        type: "uint64"
-      },
-      {
-        internalType: "address",
-        name: "sender",
-        type: "address"
+  // polygon
+  "137": {
+    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
+    ["XSwapRouter" /* XSwapRouter */]: "0xe1c14b9f065dead2e89ee35382f8bd42bdb87a04",
+    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
+  }
+};
+
+// src/constants/index.ts
+var DEFAULT_ECOSYSTEM = "evm" /* EVM */;
+var NUMBER_INPUT_REGEX = /^[0-9]*[.,]?[0-9]*$/;
+var SLIPPAGE_PRESETS = [0.5, 1.5, 3];
+var DELIVERY_TIME = 30 * 1e3 * 60;
+var EXPRESS_DELIVERY_TIME = 30 * 1e3;
+var BALANCES_CHUNK_SIZE = 500;
+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/";
+
+// src/utils/contracts.ts
+var IERC20 = new import_ethers2.ethers.utils.Interface(ERC20Abi);
+var getBalanceOf = async (wallet, token, rpcUrl) => {
+  const provider = import_ethers2.ethers.getDefaultProvider(rpcUrl);
+  if (token === import_ethers2.ethers.constants.AddressZero) {
+    return import_ethers2.ethers.utils.formatEther(await provider.getBalance(wallet));
+  }
+  const contract = new import_ethers2.ethers.Contract(token, ERC20Abi, provider);
+  return import_ethers2.ethers.utils.formatUnits(
+    await contract.balanceOf(wallet),
+    await contract.decimals()
+  );
+};
+var getBalances = async (chain, wallet) => {
+  return {
+    ...await getNativeBalance(chain, wallet),
+    ...await getErc20Balances(chain, wallet)
+  };
+};
+var getNativeBalance = async (chain, wallet) => {
+  const native = chain.tokens.find(
+    ({ address }) => address === import_ethers2.ethers.constants.AddressZero
+  );
+  if (native) {
+    const provider = import_ethers2.ethers.getDefaultProvider(chain.publicRpcUrls[0]);
+    const balance = await provider.getBalance(wallet);
+    return {
+      [native.address]: balance
+    };
+  }
+  return {};
+};
+var getErc20Balances = async (chain, wallet) => {
+  const erc20Tokens = chain.tokens.filter(
+    ({ address }) => address !== import_ethers2.ethers.constants.AddressZero
+  );
+  const tokenChunks = chunkArray(erc20Tokens, BALANCES_CHUNK_SIZE);
+  const promises = tokenChunks.map(async (tokenChunk) => {
+    const tokenAddresses = tokenChunk.map((token) => token.address);
+    const calldatas = tokenChunk.map(
+      () => IERC20.encodeFunctionData("balanceOf", [wallet])
+    );
+    const contractAddress = ADDRESSES[chain.chainId]?.BatchQuery;
+    const rpcUrl = chain.publicRpcUrls[0];
+    if (contractAddress && rpcUrl) {
+      const contract = new import_ethers2.ethers.Contract(
+        contractAddress,
+        BatchQueryAbi,
+        import_ethers2.ethers.getDefaultProvider(rpcUrl)
+      );
+      return await contract["batchQuery"](tokenAddresses, calldatas);
+    }
+    return Promise.resolve();
+  });
+  const tokenBalances = (await Promise.all(promises)).flat().map(
+    (encodedBalance) => import_ethers2.ethers.utils.defaultAbiCoder.decode(["uint256"], encodedBalance)[0]
+  );
+  const balances = {};
+  erc20Tokens.forEach((token, index) => {
+    balances[token.address] = tokenBalances[index];
+  });
+  return balances;
+};
+var generateApproveTxData = (tokenAddress, spender, amount) => {
+  return tokenAddress !== import_ethers2.ethers.constants.AddressZero ? {
+    to: tokenAddress,
+    value: safeBigNumberFrom("0"),
+    data: IERC20.encodeFunctionData("approve", [spender, amount])
+  } : void 0;
+};
+var findPlaceholderIndex = (abi, funName, funParams, placeholderValue) => {
+  if (funParams.flat(Infinity).filter((param) => param === placeholderValue).length !== 1) {
+    throw new Error("Random placeholder value must be provided and unique.");
+  }
+  const iface = new import_ethers2.ethers.utils.Interface(abi);
+  const functionFragment = iface.getFunction(funName);
+  if (!functionFragment) {
+    throw new Error(`Can't find function "${funName}" in provided ABI.`);
+  }
+  const encodedFunData = iface.encodeFunctionData(functionFragment, funParams);
+  const paramData = encodedFunData.slice(10);
+  const chunks = [];
+  for (let i = 0; i < paramData.length; i += 64) {
+    chunks.push(paramData.slice(i, i + 64));
+  }
+  const searchValue = placeholderValue.toHexString().slice(2).padStart(64, "0");
+  const result = chunks.findIndex((chunk) => chunk === searchValue);
+  if (result === -1) {
+    throw new Error("Randomized parameter not found in the encoded data.");
+  }
+  return result;
+};
+
+// src/utils/strings.ts
+var shortAddress = (address) => {
+  return `${address?.substring(0, 5)}...${address?.substring(
+    address.length - 5,
+    address.length
+  )}`;
+};
+
+// src/utils/index.ts
+var import_date_fns = require("date-fns");
+var replaceNull = (values, newValue) => {
+  const modifiedValues = [...values];
+  for (let i = 0; i < modifiedValues.length; i++) {
+    if (Array.isArray(modifiedValues[i])) {
+      modifiedValues[i] = replaceNull(modifiedValues[i], newValue);
+    } else {
+      if (modifiedValues[i] === null) {
+        modifiedValues[i] = newValue;
       }
-    ],
-    name: "SenderNotWhitelisted",
-    type: "error"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "token",
-        type: "address"
-      }
-    ],
-    name: "TokenNotWhitelisted",
-    type: "error"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: false,
-        internalType: "address",
-        name: "previousAdmin",
-        type: "address"
-      },
-      {
-        indexed: false,
-        internalType: "address",
-        name: "newAdmin",
-        type: "address"
-      }
-    ],
-    name: "AdminChanged",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "address",
-        name: "beacon",
-        type: "address"
-      }
-    ],
-    name: "BeaconUpgraded",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: false,
-        internalType: "address",
-        name: "token",
-        type: "address"
-      },
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "tokenAmount",
-        type: "uint256"
-      }
-    ],
-    name: "EmergencyWithdraw",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "bytes32",
-        name: "messageId",
-        type: "bytes32"
-      },
-      {
-        indexed: true,
-        internalType: "uint64",
-        name: "sourceChainSelector",
-        type: "uint64"
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "sender",
-        type: "address"
-      },
-      {
-        indexed: false,
-        internalType: "bytes",
-        name: "data",
-        type: "bytes"
-      },
-      {
-        indexed: false,
-        internalType: "address",
-        name: "token",
-        type: "address"
-      },
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "tokenAmount",
-        type: "uint256"
-      }
-    ],
-    name: "ExecutorRunFailed",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: false,
-        internalType: "address",
-        name: "newExecutor",
-        type: "address"
-      }
-    ],
-    name: "ExecutorUpdated",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "bytes32",
-        name: "messageId",
-        type: "bytes32"
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "messageExecutor",
-        type: "address"
-      },
-      {
-        indexed: true,
-        internalType: "bytes32",
-        name: "executionHash",
-        type: "bytes32"
-      },
-      {
-        indexed: false,
-        internalType: "address",
-        name: "token",
-        type: "address"
-      },
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "tokenAmount",
-        type: "uint256"
-      }
-    ],
-    name: "FundsReturnedForMessageExecution",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: false,
-        internalType: "uint8",
-        name: "version",
-        type: "uint8"
-      }
-    ],
-    name: "Initialized",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "bytes32",
-        name: "messageId",
-        type: "bytes32"
-      },
-      {
-        indexed: true,
-        internalType: "uint64",
-        name: "sourceChainSelector",
-        type: "uint64"
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "sender",
-        type: "address"
-      },
-      {
-        indexed: false,
-        internalType: "bytes",
-        name: "data",
-        type: "bytes"
-      },
-      {
-        indexed: false,
-        internalType: "address",
-        name: "token",
-        type: "address"
-      },
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "tokenAmount",
-        type: "uint256"
-      }
-    ],
-    name: "MessageReceived",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "bytes32",
-        name: "messageId",
-        type: "bytes32"
-      },
-      {
-        indexed: true,
-        internalType: "uint64",
-        name: "destinationChainSelector",
-        type: "uint64"
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "sender",
-        type: "address"
-      },
-      {
-        indexed: false,
-        internalType: "bytes",
-        name: "data",
-        type: "bytes"
-      },
-      {
-        indexed: false,
-        internalType: "address",
-        name: "token",
-        type: "address"
-      },
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "tokenAmount",
-        type: "uint256"
-      },
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "valueForInstantCcipRecieve",
-        type: "uint256"
-      },
-      {
-        indexed: false,
-        internalType: "address",
-        name: "transferedToken",
-        type: "address"
-      },
-      {
-        indexed: false,
-        internalType: "uint256",
-        name: "transferedTokenAmount",
-        type: "uint256"
-      }
-    ],
-    name: "MessageSent",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "address",
-        name: "previousOwner",
-        type: "address"
-      },
-      {
-        indexed: true,
-        internalType: "address",
-        name: "newOwner",
-        type: "address"
-      }
-    ],
-    name: "OwnershipTransferred",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: false,
-        internalType: "address",
-        name: "newFeeCollectorAddress",
-        type: "address"
-      }
-    ],
-    name: "SetFeeCollectorAddress",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: false,
-        internalType: "address",
-        name: "newFeeOracleAddress",
-        type: "address"
-      }
-    ],
-    name: "SetFeeOracleAddress",
-    type: "event"
-  },
-  {
-    anonymous: false,
-    inputs: [
-      {
-        indexed: true,
-        internalType: "address",
-        name: "implementation",
-        type: "address"
-      }
-    ],
-    name: "Upgraded",
-    type: "event"
-  },
-  {
-    inputs: [
-      {
-        components: [
-          {
-            internalType: "bytes32",
-            name: "messageId",
-            type: "bytes32"
-          },
-          {
-            internalType: "uint64",
-            name: "sourceChainSelector",
-            type: "uint64"
-          },
-          {
-            internalType: "bytes",
-            name: "sender",
-            type: "bytes"
-          },
-          {
-            internalType: "bytes",
-            name: "data",
-            type: "bytes"
-          },
-          {
-            components: [
-              {
-                internalType: "address",
-                name: "token",
-                type: "address"
-              },
-              {
-                internalType: "uint256",
-                name: "amount",
-                type: "uint256"
-              }
-            ],
-            internalType: "struct Client.EVMTokenAmount[]",
-            name: "destTokenAmounts",
-            type: "tuple[]"
-          }
-        ],
-        internalType: "struct Client.Any2EVMMessage",
-        name: "message",
-        type: "tuple"
-      }
-    ],
-    name: "ccipReceive",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "uint64",
-        name: "",
-        type: "uint64"
-      }
-    ],
-    name: "chainSelectorToXSwapRouterMap",
-    outputs: [
-      {
-        internalType: "address",
-        name: "",
-        type: "address"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "_tokenToWithdraw",
-        type: "address"
-      },
-      {
-        internalType: "uint256",
-        name: "_amountToWithdraw",
-        type: "uint256"
-      }
-    ],
-    name: "emergencyWithdraw",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [],
-    name: "feeCollectorAddress",
-    outputs: [
-      {
-        internalType: "address",
-        name: "",
-        type: "address"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    inputs: [],
-    name: "feeOracleAddress",
-    outputs: [
-      {
-        internalType: "address",
-        name: "",
-        type: "address"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "_paymentToken",
-        type: "address"
-      },
-      {
-        internalType: "uint64",
-        name: "_destinationChainSelector",
-        type: "uint64"
-      },
-      {
-        components: [
-          {
-            internalType: "address",
-            name: "receiver",
-            type: "address"
-          },
-          {
-            internalType: "address",
-            name: "tokenOut",
-            type: "address"
-          },
-          {
-            internalType: "uint256",
-            name: "estimatedAmountOut",
-            type: "uint256"
-          },
-          {
-            components: [
-              {
-                internalType: "enum CallType",
-                name: "callType",
-                type: "uint8"
-              },
-              {
-                internalType: "address",
-                name: "target",
-                type: "address"
-              },
-              {
-                internalType: "uint256",
-                name: "value",
-                type: "uint256"
-              },
-              {
-                internalType: "bytes",
-                name: "callData",
-                type: "bytes"
-              },
-              {
-                internalType: "bytes",
-                name: "payload",
-                type: "bytes"
-              }
-            ],
-            internalType: "struct Call[]",
-            name: "calls",
-            type: "tuple[]"
-          }
-        ],
-        internalType: "struct SwapDataDestination",
-        name: "_swapDestinationData",
-        type: "tuple"
-      },
-      {
-        internalType: "address",
-        name: "_token",
-        type: "address"
-      },
-      {
-        internalType: "uint256",
-        name: "_amount",
-        type: "uint256"
-      },
-      {
-        internalType: "uint256",
-        name: "_gasLimit",
-        type: "uint256"
-      }
-    ],
-    name: "getFees",
-    outputs: [
-      {
-        components: [
-          {
-            internalType: "uint256",
-            name: "ccipFee",
-            type: "uint256"
-          },
-          {
-            components: [
-              {
-                internalType: "uint256",
-                name: "tokenFee",
-                type: "uint256"
-              },
-              {
-                internalType: "uint256",
-                name: "nativeFee",
-                type: "uint256"
-              }
-            ],
-            internalType: "struct XSwapFee",
-            name: "xSwapFee",
-            type: "tuple"
-          }
-        ],
-        internalType: "struct MessageFees",
-        name: "fees",
-        type: "tuple"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    inputs: [],
-    name: "getRouter",
-    outputs: [
-      {
-        internalType: "address",
-        name: "",
-        type: "address"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "_ccipRouter",
-        type: "address"
-      },
-      {
-        internalType: "address",
-        name: "_feeOracle",
-        type: "address"
-      },
-      {
-        internalType: "address",
-        name: "_feeCollector",
-        type: "address"
-      },
-      {
-        internalType: "address",
-        name: "_xSwapExecutor",
-        type: "address"
-      },
-      {
-        internalType: "address",
-        name: "_owner",
-        type: "address"
-      }
-    ],
-    name: "initialize",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        components: [
-          {
-            internalType: "bytes32",
-            name: "messageId",
-            type: "bytes32"
-          },
-          {
-            internalType: "uint64",
-            name: "sourceChainSelector",
-            type: "uint64"
-          },
-          {
-            internalType: "bytes",
-            name: "sender",
-            type: "bytes"
-          },
-          {
-            internalType: "bytes",
-            name: "data",
-            type: "bytes"
-          },
-          {
-            components: [
-              {
-                internalType: "address",
-                name: "token",
-                type: "address"
-              },
-              {
-                internalType: "uint256",
-                name: "amount",
-                type: "uint256"
-              }
-            ],
-            internalType: "struct Client.EVMTokenAmount[]",
-            name: "destTokenAmounts",
-            type: "tuple[]"
-          }
-        ],
-        internalType: "struct Client.Any2EVMMessage",
-        name: "_any2EvmMessage",
-        type: "tuple"
-      }
-    ],
-    name: "instantCcipReceive",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "bytes32",
-        name: "",
-        type: "bytes32"
-      }
-    ],
-    name: "messageExecutionHashToExecutorMap",
-    outputs: [
-      {
-        internalType: "address",
-        name: "",
-        type: "address"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    inputs: [],
-    name: "owner",
-    outputs: [
-      {
-        internalType: "address",
-        name: "",
-        type: "address"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    inputs: [],
-    name: "proxiableUUID",
-    outputs: [
-      {
-        internalType: "bytes32",
-        name: "",
-        type: "bytes32"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    inputs: [],
-    name: "renounceOwnership",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "_feeCollectorAddress",
-        type: "address"
-      }
-    ],
-    name: "setFeeCollectorAddress",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "_feeOracleAddress",
-        type: "address"
-      }
-    ],
-    name: "setFeeOracleAddress",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "_router",
-        type: "address"
-      }
-    ],
-    name: "setRouter",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "_xSwapExecutor",
-        type: "address"
-      }
-    ],
-    name: "setXSwapExecutor",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "bytes4",
-        name: "interfaceId",
-        type: "bytes4"
-      }
-    ],
-    name: "supportsInterface",
-    outputs: [
-      {
-        internalType: "bool",
-        name: "",
-        type: "bool"
-      }
-    ],
-    stateMutability: "pure",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "_paymentToken",
-        type: "address"
-      },
-      {
-        internalType: "uint64",
-        name: "_destinationChainSelector",
-        type: "uint64"
-      },
-      {
-        components: [
-          {
-            internalType: "address",
-            name: "receiver",
-            type: "address"
-          },
-          {
-            internalType: "address",
-            name: "tokenOut",
-            type: "address"
-          },
-          {
-            internalType: "uint256",
-            name: "estimatedAmountOut",
-            type: "uint256"
-          },
-          {
-            components: [
-              {
-                internalType: "enum CallType",
-                name: "callType",
-                type: "uint8"
-              },
-              {
-                internalType: "address",
-                name: "target",
-                type: "address"
-              },
-              {
-                internalType: "uint256",
-                name: "value",
-                type: "uint256"
-              },
-              {
-                internalType: "bytes",
-                name: "callData",
-                type: "bytes"
-              },
-              {
-                internalType: "bytes",
-                name: "payload",
-                type: "bytes"
-              }
-            ],
-            internalType: "struct Call[]",
-            name: "calls",
-            type: "tuple[]"
-          }
-        ],
-        internalType: "struct SwapDataDestination",
-        name: "_swapDestinationData",
-        type: "tuple"
-      },
-      {
-        components: [
-          {
-            internalType: "address",
-            name: "tokenIn",
-            type: "address"
-          },
-          {
-            internalType: "uint256",
-            name: "amountIn",
-            type: "uint256"
-          },
-          {
-            internalType: "address",
-            name: "tokenOut",
-            type: "address"
-          },
-          {
-            internalType: "uint256",
-            name: "estimatedAmountOut",
-            type: "uint256"
-          },
-          {
-            internalType: "uint256",
-            name: "valueForDestinationGas",
-            type: "uint256"
-          },
-          {
-            internalType: "uint256",
-            name: "valueForInstantCcipRecieve",
-            type: "uint256"
-          },
-          {
-            components: [
-              {
-                internalType: "enum CallType",
-                name: "callType",
-                type: "uint8"
-              },
-              {
-                internalType: "address",
-                name: "target",
-                type: "address"
-              },
-              {
-                internalType: "uint256",
-                name: "value",
-                type: "uint256"
-              },
-              {
-                internalType: "bytes",
-                name: "callData",
-                type: "bytes"
-              },
-              {
-                internalType: "bytes",
-                name: "payload",
-                type: "bytes"
-              }
-            ],
-            internalType: "struct Call[]",
-            name: "calls",
-            type: "tuple[]"
-          }
-        ],
-        internalType: "struct SwapDataOrigin",
-        name: "_swapOriginData",
-        type: "tuple"
-      },
-      {
-        internalType: "uint256",
-        name: "_gasLimit",
-        type: "uint256"
-      }
-    ],
-    name: "swapAndSendMessage",
-    outputs: [
-      {
-        internalType: "bytes32",
-        name: "messageId",
-        type: "bytes32"
-      }
-    ],
-    stateMutability: "payable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "newOwner",
-        type: "address"
-      }
-    ],
-    name: "transferOwnership",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "uint64",
-        name: "_chainSelector",
-        type: "uint64"
-      },
-      {
-        internalType: "address",
-        name: "_xSwapRouter",
-        type: "address"
-      }
-    ],
-    name: "updateChainSelectorToXSwapRouterMap",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "uint64[]",
-        name: "_chainSelectors",
-        type: "uint64[]"
-      },
-      {
-        internalType: "address[]",
-        name: "_xSwapRouters",
-        type: "address[]"
-      }
-    ],
-    name: "updateChainSelectorToXSwapRouterMapMany",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "uint64",
-        name: "_sourceChainSelector",
-        type: "uint64"
-      },
-      {
-        internalType: "address",
-        name: "_sender",
-        type: "address"
-      },
-      {
-        internalType: "bool",
-        name: "_isWhitelisted",
-        type: "bool"
-      }
-    ],
-    name: "updateWhitelistSender",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "uint64[]",
-        name: "_sourceChainSelectors",
-        type: "uint64[]"
-      },
-      {
-        internalType: "address[]",
-        name: "_senders",
-        type: "address[]"
-      },
-      {
-        internalType: "bool[]",
-        name: "_areWhitelisted",
-        type: "bool[]"
-      }
-    ],
-    name: "updateWhitelistSenderMany",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "_token",
-        type: "address"
-      },
-      {
-        internalType: "bool",
-        name: "_isWhitelisted",
-        type: "bool"
-      }
-    ],
-    name: "updateWhitelistToken",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "newImplementation",
-        type: "address"
-      }
-    ],
-    name: "upgradeTo",
-    outputs: [],
-    stateMutability: "nonpayable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "newImplementation",
-        type: "address"
-      },
-      {
-        internalType: "bytes",
-        name: "data",
-        type: "bytes"
-      }
-    ],
-    name: "upgradeToAndCall",
-    outputs: [],
-    stateMutability: "payable",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "uint64",
-        name: "",
-        type: "uint64"
-      },
-      {
-        internalType: "address",
-        name: "",
-        type: "address"
-      }
-    ],
-    name: "whitelistedSenders",
-    outputs: [
-      {
-        internalType: "bool",
-        name: "",
-        type: "bool"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    inputs: [
-      {
-        internalType: "address",
-        name: "",
-        type: "address"
-      }
-    ],
-    name: "whitelistedTokens",
-    outputs: [
-      {
-        internalType: "bool",
-        name: "",
-        type: "bool"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    inputs: [],
-    name: "xSwapExecutor",
-    outputs: [
-      {
-        internalType: "address",
-        name: "",
-        type: "address"
-      }
-    ],
-    stateMutability: "view",
-    type: "function"
-  },
-  {
-    stateMutability: "payable",
-    type: "receive"
-  }
-];
-
-// src/contracts/abi/index.ts
-var BatchQueryAbi = BatchQuery_default;
-var ERC20Abi = ERC20_default;
-var XSwapRouterAbi = XSwapRouter_default;
-
-// src/contracts/addresses.ts
-var ADDRESSES = {
-  // arbitrum
-  "42161": {
-    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
-    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
-  },
-  // avalanche
-  "43114": {
-    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
-    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
-  },
-  // base
-  "8453": {
-    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
-    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
-  },
-  // ethereum
-  "1": {
-    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
-    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
-  },
-  // optimism
-  "10": {
-    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
-    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
-  },
-  // polygon
-  "137": {
-    ["BatchQuery" /* BatchQuery */]: "0xb5f9934ea0810ef5faa677e8c68c6983b88664b1",
-    ["FeeCollector" /* FeeCollector */]: "0xb37275558f02f05104c2ba35199d16adeb43432f"
-  }
-};
-
-// src/constants/index.ts
-var DEFAULT_ECOSYSTEM = "evm" /* EVM */;
-var NUMBER_INPUT_REGEX = /^[0-9]*[.,]?[0-9]*$/;
-var SLIPPAGE_PRESETS = [0.5, 1.5, 3];
-var DELIVERY_TIME = 30 * 1e3 * 60;
-var EXPRESS_DELIVERY_TIME = 30 * 1e3;
-var BALANCES_CHUNK_SIZE = 500;
-var ROUTE_TIMEOUT_MS = 5e3;
-var MINIMUM_DISPLAYED_TOKEN_AMOUNT = 1e-4;
-var DEFAULT_SOURCE_CHAIN_ID = "1";
-
-// src/utils/contracts.ts
-var IERC20 = new import_ethers2.ethers.utils.Interface(ERC20Abi);
-var getBalanceOf = async (wallet, token, rpcUrl) => {
-  const provider = import_ethers2.ethers.getDefaultProvider(rpcUrl);
-  if (token === import_ethers2.ethers.constants.AddressZero) {
-    return import_ethers2.ethers.utils.formatEther(await provider.getBalance(wallet));
-  }
-  const contract = new import_ethers2.ethers.Contract(token, ERC20Abi, provider);
-  return import_ethers2.ethers.utils.formatUnits(
-    await contract.balanceOf(wallet),
-    await contract.decimals()
-  );
-};
-var getBalances = async (chain, wallet) => {
-  return {
-    ...await getNativeBalance(chain, wallet),
-    ...await getErc20Balances(chain, wallet)
-  };
-};
-var getNativeBalance = async (chain, wallet) => {
-  const native = chain.tokens.find(
-    ({ address }) => address === import_ethers2.ethers.constants.AddressZero
-  );
-  if (native) {
-    const provider = import_ethers2.ethers.getDefaultProvider(chain.publicRpcUrls[0]);
-    const balance = await provider.getBalance(wallet);
-    return {
-      [native.address]: balance
-    };
-  }
-  return {};
-};
-var getErc20Balances = async (chain, wallet) => {
-  const erc20Tokens = chain.tokens.filter(
-    ({ address }) => address !== import_ethers2.ethers.constants.AddressZero
-  );
-  const tokenChunks = chunkArray(erc20Tokens, BALANCES_CHUNK_SIZE);
-  const promises = tokenChunks.map(async (tokenChunk) => {
-    const tokenAddresses = tokenChunk.map((token) => token.address);
-    const calldatas = tokenChunk.map(
-      () => IERC20.encodeFunctionData("balanceOf", [wallet])
-    );
-    const contractAddress = ADDRESSES[chain.chainId]?.BatchQuery;
-    const rpcUrl = chain.publicRpcUrls[0];
-    if (contractAddress && rpcUrl) {
-      const contract = new import_ethers2.ethers.Contract(
-        contractAddress,
-        BatchQueryAbi,
-        import_ethers2.ethers.getDefaultProvider(rpcUrl)
-      );
-      return await contract["batchQuery"](tokenAddresses, calldatas);
-    }
-    return Promise.resolve();
-  });
-  const tokenBalances = (await Promise.all(promises)).flat().map(
-    (encodedBalance) => import_ethers2.ethers.utils.defaultAbiCoder.decode(["uint256"], encodedBalance)[0]
-  );
-  const balances = {};
-  erc20Tokens.forEach((token, index) => {
-    balances[token.address] = tokenBalances[index];
-  });
-  return balances;
-};
-var generateApproveTxData = (tokenAddress, spender, amount) => {
-  return tokenAddress !== import_ethers2.ethers.constants.AddressZero ? {
-    to: tokenAddress,
-    value: safeBigNumberFrom("0"),
-    data: IERC20.encodeFunctionData("approve", [spender, amount])
-  } : void 0;
-};
-var findPlaceholderIndex = (abi, funName, funParams, placeholderValue) => {
-  if (funParams.flat(Infinity).filter((param) => param === placeholderValue).length !== 1) {
-    throw new Error("Random placeholder value must be provided and unique.");
-  }
-  const iface = new import_ethers2.ethers.utils.Interface(abi);
-  const functionFragment = iface.getFunction(funName);
-  if (!functionFragment) {
-    throw new Error(`Can't find function "${funName}" in provided ABI.`);
-  }
-  const encodedFunData = iface.encodeFunctionData(functionFragment, funParams);
-  const paramData = encodedFunData.slice(10);
-  const chunks = [];
-  for (let i = 0; i < paramData.length; i += 64) {
-    chunks.push(paramData.slice(i, i + 64));
-  }
-  const searchValue = placeholderValue.toHexString().slice(2).padStart(64, "0");
-  const result = chunks.findIndex((chunk) => chunk === searchValue);
-  if (result === -1) {
-    throw new Error("Randomized parameter not found in the encoded data.");
-  }
-  return result;
-};
-
-// src/utils/strings.ts
-var shortAddress = (address) => {
-  return `${address?.substring(0, 5)}...${address?.substring(
-    address.length - 5,
-    address.length
-  )}`;
-};
-
-// src/utils/index.ts
-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 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];
       }
     }
   }
@@ -2014,6 +785,10 @@ var chunkArray = (array, chunkSize) => {
   }
   return result;
 };
+var getDate = (blockTimestamp) => {
+  const date = new Date(blockTimestamp * 1e3);
+  return (0, import_date_fns.format)(date, "d MMM yyyy HH:mm:ss");
+};
 
 // src/services/integrations/customCalls/staking.ts
 var generateStakingCalls = ({
@@ -2081,6 +856,7 @@ var generateStakingCalls = ({
 };
 
 // src/services/integrations/transactions.ts
+var import_ethers4 = require("ethers");
 var getSwapTx = async ({
   dstChain,
   dstToken,
@@ -2090,6 +866,7 @@ var getSwapTx = async ({
   const supportedChains = (await getChains()).filter(
     ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
   );
+  validateSwapTxData(supportedChains, dstChain, dstToken);
   const route = await openTxConfigForm({
     dstChainId: dstChain,
     dstTokenAddr: dstToken,
@@ -2099,6 +876,119 @@ var getSwapTx = async ({
   });
   return route.transactions;
 };
+var validateSwapTxData = (supportedChains, dstChain, dstToken) => {
+  const supportedDstChain = supportedChains.find(
+    ({ chainId }) => chainId === dstChain
+  );
+  if (!supportedDstChain) {
+    throw new Error(`Provided chain '${dstChain}' is not supported`);
+  }
+  if (!supportedDstChain.tokens.some(({ address }) => address === dstToken)) {
+    throw new Error(`Provided token '${dstToken}' is not supported`);
+  }
+};
+var monitorTransactionStatus = async (srcChainId, txHash) => {
+  const txReceipt = await getTxReceipt(srcChainId, txHash);
+  if (!txReceipt) {
+    throw new Error(
+      `No transaction found for chain ${srcChainId} tx ${txHash}`
+    );
+  }
+  const supportedChains = (await getChains()).filter(
+    ({ web3Environment, swapSupported }) => web3Environment === "mainnet" /* MAINNET */ && swapSupported
+  );
+  const messageSentEventSignature = "MessageSent(bytes32,uint64,address,bytes,address,uint256,uint256,address,uint256)";
+  const messageSentEventAbi = [
+    "event MessageSent(bytes32 indexed messageId, uint64 indexed destinationChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount, uint256 valueForInstantCcipRecieve, address transferedToken, uint256 transferedTokenAmount)"
+  ];
+  const messageReceivedEventSignature = "MessageReceived(bytes32,uint64,address,bytes,address,uint256)";
+  const messageReceivedEventAbi = [
+    "event MessageReceived(bytes32 indexed messageId, uint64 indexed sourceChainSelector, address indexed sender, bytes data, address token, uint256 tokenAmount)"
+  ];
+  const messageSentEvent = txReceipt.logs?.find((log) => {
+    return log.topics[0] === import_ethers4.ethers.utils.id(messageSentEventSignature);
+  });
+  if (!messageSentEvent) {
+    throw new Error(
+      `No transaction event found for chain ${srcChainId} tx ${txHash}`
+    );
+  }
+  const messageId = messageSentEvent?.topics[1];
+  const iface = new import_ethers4.ethers.utils.Interface(messageSentEventAbi);
+  const decodedMessageSentEvent = iface.parseLog(messageSentEvent);
+  if (!decodedMessageSentEvent) {
+    throw new Error(
+      `No transaction event arguments found for chain ${srcChainId} tx ${txHash}`
+    );
+  }
+  const srcChain = supportedChains.find(
+    (chain) => chain.chainId === srcChainId.toString()
+  );
+  const srcToken = srcChain?.tokens.find(
+    (token) => token.address === decodedMessageSentEvent.args?.token.toString()
+  );
+  const targetChain = supportedChains.find(
+    (chain) => chain.ccipChainId === decodedMessageSentEvent.args?.destinationChainSelector?.toString()
+  );
+  const toChainId = targetChain?.chainId;
+  if (!toChainId) {
+    throw new Error(`Unknown destination chain!`);
+  }
+  const transaction = {
+    txHash,
+    fromChain: srcChain?.displayName,
+    fromChainImage: srcChain?.image,
+    toChain: targetChain.displayName,
+    toChainImage: targetChain.image,
+    fromToken: srcToken?.symbol,
+    fromTokenImage: srcToken?.image,
+    fromAmount: weiToHumanReadable({
+      amount: decodedMessageSentEvent.args?.tokenAmount.toString(),
+      decimals: srcToken?.decimals || 18,
+      precisionFractionalPlaces: 4
+    }),
+    isDone: false,
+    explorer: `${CCIP_EXPLORER}/tx/${txHash}`
+  };
+  addTransactionToRenderedTransactions(transaction);
+  renderTxHistoryButtons();
+  const xSwapRouterOnDestinationAddress = ADDRESSES[toChainId]?.XSwapRouter;
+  if (!xSwapRouterOnDestinationAddress) {
+    throw new Error(`Unknown destination XSwapRouter!`);
+  }
+  const xSwapRouterOnDestination = new import_ethers4.ethers.Contract(
+    xSwapRouterOnDestinationAddress,
+    messageReceivedEventAbi,
+    import_ethers4.ethers.getDefaultProvider(
+      supportedChains.find((chain) => chain.chainId === toChainId)?.publicRpcUrls[0]
+    )
+  );
+  const eventFilter = {
+    address: xSwapRouterOnDestinationAddress,
+    topics: [import_ethers4.ethers.utils.id(messageReceivedEventSignature), messageId]
+  };
+  const onSuccess = async () => {
+    updateTransactionDoneInRenderedTransactions(txHash);
+    renderTxHistoryButtons();
+    await new Promise((resolve) => setTimeout(() => resolve(true), 5e3));
+    removeTransactionFromRenderedTransactions(txHash);
+    renderTxHistoryButtons();
+  };
+  xSwapRouterOnDestination.once(eventFilter, () => onSuccess());
+};
+var getTxReceipt = async (txChainId, txHash) => {
+  const chains = await getChains();
+  const chain = chains.find((chain2) => chain2.chainId === txChainId.toString());
+  const provider = new import_ethers4.ethers.providers.JsonRpcProvider(
+    chain?.publicRpcUrls[0]
+  );
+  try {
+    return await provider.getTransactionReceipt(txHash);
+  } catch (error) {
+    console.error("Error fetching transaction receipt:", error);
+    return null;
+  }
+};
 
 // src/hooks/useDebounce.tsx
 var import_react = require("react");
@@ -2125,7 +1015,6 @@ var import_bignumber2 = __toESM(require("bignumber.js"));
 
 // src/components/TxConfigForm/HistoryCard.tsx
 var import_react2 = require("react");
-var import_date_fns = require("date-fns");
 
 // src/components/icons/ArrowRightIcon.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -2163,115 +1052,123 @@ var ArrowDownIcon = () => {
   );
 };
 
-// src/components/icons/ArrowUpRightIcon.tsx
+// src/components/icons/ArrowLeftIcon.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var ArrowUpRightIcon = () => {
+var ArrowLeftIcon = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "svg",
     {
+      width: "10",
+      height: "16",
+      viewBox: "0 0 10 16",
+      fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 512 512",
-      fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        "path",
+        {
+          d: "M0.5 8L8.13251 15.5L9.5 14.1562L3.20318 8L9.4682 1.84375L8.10071 0.5L0.5 8Z",
+          fill: "white"
+        }
+      )
     }
   );
 };
 
-// src/components/icons/CheckIcon.tsx
+// src/components/icons/ArrowUpRightIcon.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
-var CheckIcon = () => {
+var ArrowUpRightIcon = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 448 512",
+      viewBox: "0 0 512 512",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z" })
     }
   );
 };
 
-// src/components/icons/ChevronDownIcon.tsx
+// src/components/icons/CheckIcon.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var ChevronDownIcon = () => {
+var CheckIcon = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "svg",
     {
-      width: "12",
-      height: "12",
       xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 512 512",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-        "path",
-        {
-          fill: "currentColor",
-          d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
-        }
-      )
+      viewBox: "0 0 448 512",
+      fill: "currentColor",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z" })
     }
   );
 };
 
-// src/components/icons/ChevronUpIcon.tsx
+// src/components/icons/ChevronDownIcon.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var ChevronUpIcon = () => {
+var ChevronDownIcon = () => {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
-      height: "12",
       width: "12",
+      height: "12",
       xmlns: "http://www.w3.org/2000/svg",
       viewBox: "0 0 512 512",
       children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "path",
         {
           fill: "currentColor",
-          d: "M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
+          d: "M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"
         }
       )
     }
   );
 };
 
-// src/components/icons/CircularProgressIcon.tsx
+// src/components/icons/ChevronUpIcon.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
+var ChevronUpIcon = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "path",
+    {
+      fill: "currentColor",
+      d: "M233.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L256 173.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"
+    }
+  ) });
+};
+
+// src/components/icons/CircularProgressIcon.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CircularProgressIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "svg",
     {
-      className: "animate-spin -ml-1 mr-3 h-10 w-10 text-white",
-      xmlns: "http://www.w3.org/2000/svg",
+      className: "animate-spin-slow text-white",
+      width: "33",
+      height: "33",
+      viewBox: "0 0 33 33",
       fill: "none",
-      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "circle",
           {
-            className: "opacity-25",
-            cx: "12",
-            cy: "12",
-            r: "10",
-            stroke: "currentColor",
-            strokeWidth: "4"
+            cx: "16.5",
+            cy: "16.5",
+            r: "15.5",
+            stroke: "white",
+            strokeOpacity: "0.2",
+            strokeWidth: "2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-          "path",
-          {
-            className: "opacity-75",
-            fill: "currentColor",
-            d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
-          }
-        )
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M1 16C1 7.71573 7.71573 1 16 1", stroke: "white", strokeWidth: "2" })
       ]
     }
   );
 };
 
 // src/components/icons/CoinsIcon.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var CoinsIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "svg",
     {
       width: "24",
@@ -2279,7 +1176,7 @@ var CoinsIcon = () => {
       viewBox: "0 0 24 24",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "path",
         {
           d: "M15 20C12.7667 20 10.875 19.225 9.325 17.675C7.775 16.125 7 14.2333 7 12C7 9.76667 7.775 7.875 9.325 6.325C10.875 4.775 12.7667 4 15 4C17.2333 4 19.125 4.775 20.675 6.325C22.225 7.875 23 9.76667 23 12C23 14.2333 22.225 16.125 20.675 17.675C19.125 19.225 17.2333 20 15 20ZM7 19.75C5.23333 19.2833 3.79167 18.3333 2.675 16.9C1.55833 15.4667 1 13.8333 1 12C1 10.1667 1.55833 8.53333 2.675 7.1C3.79167 5.66667 5.23333 4.71667 7 4.25V6.35C5.8 6.76667 4.83333 7.49167 4.1 8.525C3.36667 9.55833 3 10.7167 3 12C3 13.2833 3.36667 14.4417 4.1 15.475C4.83333 16.5083 5.8 17.2333 7 17.65V19.75ZM15 18C16.6667 18 18.0833 17.4167 19.25 16.25C20.4167 15.0833 21 13.6667 21 12C21 10.3333 20.4167 8.91667 19.25 7.75C18.0833 6.58333 16.6667 6 15 6C13.3333 6 11.9167 6.58333 10.75 7.75C9.58333 8.91667 9 10.3333 9 12C9 13.6667 9.58333 15.0833 10.75 16.25C11.9167 17.4167 13.3333 18 15 18Z",
@@ -2292,9 +1189,9 @@ var CoinsIcon = () => {
 };
 
 // src/components/icons/DownArrorIcon.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var DownArrowIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     "svg",
     {
       width: 16,
@@ -2302,7 +1199,7 @@ var DownArrowIcon = () => {
       viewBox: "0 0 16 16",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "path",
         {
           d: "M8.00008 9.76921L5.06421 6.83334H10.9359L8.00008 9.76921Z",
@@ -2315,9 +1212,9 @@ var DownArrowIcon = () => {
 };
 
 // src/components/icons/HistoryIcon.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var HistoryIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "svg",
     {
       width: "20",
@@ -2325,7 +1222,7 @@ var HistoryIcon = () => {
       viewBox: "0 0 20 20",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "path",
         {
           d: "M9.98413 17.5C8.1633 17.5 6.57667 16.8646 5.22424 15.5938C3.8718 14.3229 3.09663 12.7361 2.89871 10.8333H4.52163C4.70635 12.2778 5.3166 13.4722 6.35236 14.4167C7.38812 15.3611 8.59871 15.8333 9.98413 15.8333C11.5279 15.8333 12.8374 15.2674 13.9128 14.1354C14.9881 13.0035 15.5258 11.625 15.5258 10C15.5258 8.375 14.9881 6.99653 13.9128 5.86458C12.8374 4.73264 11.5279 4.16667 9.98413 4.16667C9.07371 4.16667 8.22267 4.38889 7.43101 4.83333C6.63934 5.27778 5.97302 5.88889 5.43205 6.66667H7.60913V8.33333H2.85913V3.33333H4.44246V5.29167C5.11538 4.40278 5.93673 3.71528 6.90653 3.22917C7.87632 2.74306 8.90219 2.5 9.98413 2.5C10.9737 2.5 11.9006 2.69792 12.7649 3.09375C13.6291 3.48958 14.3812 4.02431 15.0211 4.69792C15.661 5.37153 16.169 6.16319 16.5451 7.07292C16.9211 7.98264 17.1091 8.95833 17.1091 10C17.1091 11.0417 16.9211 12.0174 16.5451 12.9271C16.169 13.8368 15.661 14.6285 15.0211 15.3021C14.3812 15.9757 13.6291 16.5104 12.7649 16.9062C11.9006 17.3021 10.9737 17.5 9.98413 17.5ZM12.2008 13.5L9.19246 10.3333V5.83333H10.7758V9.66667L13.3091 12.3333L12.2008 13.5Z",
@@ -2337,23 +1234,12 @@ var HistoryIcon = () => {
 };
 
 // src/components/icons/HourGlassIcon.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
-var HourGlassIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 384 512",
-      fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M0 32C0 14.3 14.3 0 32 0H64 320h32c17.7 0 32 14.3 32 32s-14.3 32-32 32V75c0 42.4-16.9 83.1-46.9 113.1L237.3 256l67.9 67.9c30 30 46.9 70.7 46.9 113.1v11c17.7 0 32 14.3 32 32s-14.3 32-32 32H320 64 32c-17.7 0-32-14.3-32-32s14.3-32 32-32V437c0-42.4 16.9-83.1 46.9-113.1L146.7 256 78.9 188.1C48.9 158.1 32 117.4 32 75V64C14.3 64 0 49.7 0 32zM96 64V75c0 25.5 10.1 49.9 28.1 67.9L192 210.7l67.9-67.9c18-18 28.1-42.4 28.1-67.9V64H96zm0 384H288V437c0-25.5-10.1-49.9-28.1-67.9L192 301.3l-67.9 67.9c-18 18-28.1 42.4-28.1 67.9v11z" })
-    }
-  );
-};
+var import_jsx_runtime14 = require("react/jsx-runtime");
 
 // src/components/icons/SearchIcon.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var SearchIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2361,29 +1247,18 @@ var SearchIcon = () => {
       width: "24",
       viewBox: "0 -960 960 960",
       fill: "#ffffffc0",
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M784-120 532-372q-30 24-69 38t-83 14q-109 0-184.5-75.5T120-580q0-109 75.5-184.5T380-840q109 0 184.5 75.5T640-580q0 44-14 83t-38 69l252 252-56 56ZM380-400q75 0 127.5-52.5T560-580q0-75-52.5-127.5T380-760q-75 0-127.5 52.5T200-580q0 75 52.5 127.5T380-400Z" })
     }
   );
 };
 
 // src/components/icons/XMarkIcon.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var XMarkIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 384 512",
-      fill: "current",
-      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z" })
-    }
-  );
-};
+var import_jsx_runtime16 = require("react/jsx-runtime");
 
 // src/components/icons/PercentageIcon.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var PercentageIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
     "svg",
     {
       width: "12",
@@ -2392,14 +1267,14 @@ var PercentageIcon = () => {
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "path",
           {
             d: "M3.00008 5.33329C2.35564 5.33329 1.80564 5.10552 1.35008 4.64996C0.894526 4.1944 0.666748 3.6444 0.666748 2.99996C0.666748 2.35551 0.894526 1.80551 1.35008 1.34996C1.80564 0.894404 2.35564 0.666626 3.00008 0.666626C3.64453 0.666626 4.19453 0.894404 4.65008 1.34996C5.10564 1.80551 5.33342 2.35551 5.33342 2.99996C5.33342 3.6444 5.10564 4.1944 4.65008 4.64996C4.19453 5.10552 3.64453 5.33329 3.00008 5.33329ZM3.00008 3.99996C3.27786 3.99996 3.51397 3.90274 3.70841 3.70829C3.90286 3.51385 4.00008 3.27774 4.00008 2.99996C4.00008 2.72218 3.90286 2.48607 3.70841 2.29163C3.51397 2.09718 3.27786 1.99996 3.00008 1.99996C2.7223 1.99996 2.48619 2.09718 2.29175 2.29163C2.0973 2.48607 2.00008 2.72218 2.00008 2.99996C2.00008 3.27774 2.0973 3.51385 2.29175 3.70829C2.48619 3.90274 2.7223 3.99996 3.00008 3.99996ZM9.00008 11.3333C8.35564 11.3333 7.80564 11.1055 7.35008 10.65C6.89453 10.1944 6.66675 9.6444 6.66675 8.99996C6.66675 8.35552 6.89453 7.80552 7.35008 7.34996C7.80564 6.8944 8.35564 6.66663 9.00008 6.66663C9.64453 6.66663 10.1945 6.8944 10.6501 7.34996C11.1056 7.80552 11.3334 8.35552 11.3334 8.99996C11.3334 9.6444 11.1056 10.1944 10.6501 10.65C10.1945 11.1055 9.64453 11.3333 9.00008 11.3333ZM9.00008 9.99996C9.27786 9.99996 9.51397 9.90274 9.70842 9.70829C9.90286 9.51385 10.0001 9.27774 10.0001 8.99996C10.0001 8.72218 9.90286 8.48607 9.70842 8.29163C9.51397 8.09718 9.27786 7.99996 9.00008 7.99996C8.7223 7.99996 8.48619 8.09718 8.29175 8.29163C8.0973 8.48607 8.00008 8.72218 8.00008 8.99996C8.00008 9.27774 8.0973 9.51385 8.29175 9.70829C8.48619 9.90274 8.7223 9.99996 9.00008 9.99996ZM1.60008 11.3333L0.666748 10.4L10.4001 0.666626L11.3334 1.59996L1.60008 11.3333Z",
             fill: "url(#paint0_linear_32_1164)"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
           "linearGradient",
           {
             id: "paint0_linear_32_1164",
@@ -2409,8 +1284,8 @@ var PercentageIcon = () => {
             y2: "1.31767",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { stopColor: "#3681C6" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("stop", { offset: "1", stopColor: "#2B4A9D" })
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("stop", { stopColor: "#3681C6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("stop", { offset: "1", stopColor: "#2B4A9D" })
             ]
           }
         ) })
@@ -2420,9 +1295,9 @@ var PercentageIcon = () => {
 };
 
 // src/components/icons/TimerIcon.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var TimerIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -2430,15 +1305,15 @@ var TimerIcon = () => {
       viewBox: "0 -960 960 960",
       width: "16",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M360-840v-80h240v80H360Zm80 440h80v-240h-80v240Zm40 320q-74 0-139.5-28.5T226-186q-49-49-77.5-114.5T120-440q0-74 28.5-139.5T226-694q49-49 114.5-77.5T480-800q62 0 119 20t107 58l56-56 56 56-56 56q38 50 58 107t20 119q0 74-28.5 139.5T734-186q-49 49-114.5 77.5T480-80Zm0-80q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Zm0-280Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M360-840v-80h240v80H360Zm80 440h80v-240h-80v240Zm40 320q-74 0-139.5-28.5T226-186q-49-49-77.5-114.5T120-440q0-74 28.5-139.5T226-694q49-49 114.5-77.5T480-800q62 0 119 20t107 58l56-56 56 56-56 56q38 50 58 107t20 119q0 74-28.5 139.5T734-186q-49 49-114.5 77.5T480-80Zm0-80q116 0 198-82t82-198q0-116-82-198t-198-82q-116 0-198 82t-82 198q0 116 82 198t198 82Zm0-280Z" })
     }
   );
 };
 
 // src/components/icons/InfoIcon.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var InfoIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "svg",
     {
       width: "28",
@@ -2446,15 +1321,15 @@ var InfoIcon = () => {
       viewBox: "0 0 28 28",
       xmlns: "http://www.w3.org/2000/svg",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("path", { d: "M12.6667 20.6666H15.3334V12.6666H12.6667V20.6666ZM14.0001 9.99996C14.3779 9.99996 14.6945 9.87218 14.9501 9.61663C15.2056 9.36107 15.3334 9.0444 15.3334 8.66663C15.3334 8.28885 15.2056 7.97218 14.9501 7.71663C14.6945 7.46107 14.3779 7.33329 14.0001 7.33329C13.6223 7.33329 13.3056 7.46107 13.0501 7.71663C12.7945 7.97218 12.6667 8.28885 12.6667 8.66663C12.6667 9.0444 12.7945 9.36107 13.0501 9.61663C13.3056 9.87218 13.6223 9.99996 14.0001 9.99996ZM14.0001 27.3333C12.1556 27.3333 10.4223 26.9833 8.80008 26.2833C7.17786 25.5833 5.76675 24.6333 4.56675 23.4333C3.36675 22.2333 2.41675 20.8222 1.71675 19.2C1.01675 17.5777 0.666748 15.8444 0.666748 14C0.666748 12.1555 1.01675 10.4222 1.71675 8.79996C2.41675 7.17774 3.36675 5.76663 4.56675 4.56663C5.76675 3.36663 7.17786 2.41663 8.80008 1.71663C10.4223 1.01663 12.1556 0.666626 14.0001 0.666626C15.8445 0.666626 17.5779 1.01663 19.2001 1.71663C20.8223 2.41663 22.2334 3.36663 23.4334 4.56663C24.6334 5.76663 25.5834 7.17774 26.2834 8.79996C26.9834 10.4222 27.3334 12.1555 27.3334 14C27.3334 15.8444 26.9834 17.5777 26.2834 19.2C25.5834 20.8222 24.6334 22.2333 23.4334 23.4333C22.2334 24.6333 20.8223 25.5833 19.2001 26.2833C17.5779 26.9833 15.8445 27.3333 14.0001 27.3333ZM14.0001 24.6666C16.9779 24.6666 19.5001 23.6333 21.5667 21.5666C23.6334 19.5 24.6667 16.9777 24.6667 14C24.6667 11.0222 23.6334 8.49996 21.5667 6.43329C19.5001 4.36663 16.9779 3.33329 14.0001 3.33329C11.0223 3.33329 8.50008 4.36663 6.43341 6.43329C4.36675 8.49996 3.33341 11.0222 3.33341 14C3.33341 16.9777 4.36675 19.5 6.43341 21.5666C8.50008 23.6333 11.0223 24.6666 14.0001 24.6666Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { d: "M12.6667 20.6666H15.3334V12.6666H12.6667V20.6666ZM14.0001 9.99996C14.3779 9.99996 14.6945 9.87218 14.9501 9.61663C15.2056 9.36107 15.3334 9.0444 15.3334 8.66663C15.3334 8.28885 15.2056 7.97218 14.9501 7.71663C14.6945 7.46107 14.3779 7.33329 14.0001 7.33329C13.6223 7.33329 13.3056 7.46107 13.0501 7.71663C12.7945 7.97218 12.6667 8.28885 12.6667 8.66663C12.6667 9.0444 12.7945 9.36107 13.0501 9.61663C13.3056 9.87218 13.6223 9.99996 14.0001 9.99996ZM14.0001 27.3333C12.1556 27.3333 10.4223 26.9833 8.80008 26.2833C7.17786 25.5833 5.76675 24.6333 4.56675 23.4333C3.36675 22.2333 2.41675 20.8222 1.71675 19.2C1.01675 17.5777 0.666748 15.8444 0.666748 14C0.666748 12.1555 1.01675 10.4222 1.71675 8.79996C2.41675 7.17774 3.36675 5.76663 4.56675 4.56663C5.76675 3.36663 7.17786 2.41663 8.80008 1.71663C10.4223 1.01663 12.1556 0.666626 14.0001 0.666626C15.8445 0.666626 17.5779 1.01663 19.2001 1.71663C20.8223 2.41663 22.2334 3.36663 23.4334 4.56663C24.6334 5.76663 25.5834 7.17774 26.2834 8.79996C26.9834 10.4222 27.3334 12.1555 27.3334 14C27.3334 15.8444 26.9834 17.5777 26.2834 19.2C25.5834 20.8222 24.6334 22.2333 23.4334 23.4333C22.2334 24.6333 20.8223 25.5833 19.2001 26.2833C17.5779 26.9833 15.8445 27.3333 14.0001 27.3333ZM14.0001 24.6666C16.9779 24.6666 19.5001 23.6333 21.5667 21.5666C23.6334 19.5 24.6667 16.9777 24.6667 14C24.6667 11.0222 23.6334 8.49996 21.5667 6.43329C19.5001 4.36663 16.9779 3.33329 14.0001 3.33329C11.0223 3.33329 8.50008 4.36663 6.43341 6.43329C4.36675 8.49996 3.33341 11.0222 3.33341 14C3.33341 16.9777 4.36675 19.5 6.43341 21.5666C8.50008 23.6333 11.0223 24.6666 14.0001 24.6666Z" })
     }
   );
 };
 
 // src/components/icons/SettingsIcon.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SettingsIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     "svg",
     {
       width: "18",
@@ -2462,7 +1337,7 @@ var SettingsIcon = () => {
       viewBox: "0 0 18 18",
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         "path",
         {
           d: "M6.62325 17.5L6.26504 14.78C6.07101 14.7092 5.88818 14.6242 5.71653 14.525C5.54489 14.4258 5.37698 14.3196 5.2128 14.2063L2.54862 15.2688L0.0859375 11.2312L2.39191 9.57375C2.37698 9.47458 2.36952 9.37896 2.36952 9.28687V8.71313C2.36952 8.62104 2.37698 8.52542 2.39191 8.42625L0.0859375 6.76875L2.54862 2.73125L5.2128 3.79375C5.37698 3.68042 5.54862 3.57417 5.72773 3.475C5.90683 3.37583 6.08594 3.29083 6.26504 3.22L6.62325 0.5H11.5486L11.9068 3.22C12.1009 3.29083 12.2837 3.37583 12.4553 3.475C12.627 3.57417 12.7949 3.68042 12.9591 3.79375L15.6233 2.73125L18.0859 6.76875L15.78 8.42625C15.7949 8.52542 15.8024 8.62104 15.8024 8.71313V9.28687C15.8024 9.37896 15.7874 9.47458 15.7576 9.57375L18.0635 11.2312L15.6009 15.2688L12.9591 14.2063C12.7949 14.3196 12.6233 14.4258 12.4441 14.525C12.265 14.6242 12.0859 14.7092 11.9068 14.78L11.5486 17.5H6.62325ZM9.13071 11.975C9.99639 11.975 10.7352 11.6846 11.3471 11.1038C11.9591 10.5229 12.265 9.82167 12.265 9C12.265 8.17833 11.9591 7.47708 11.3471 6.89625C10.7352 6.31542 9.99639 6.025 9.13071 6.025C8.25012 6.025 7.50758 6.31542 6.9031 6.89625C6.29862 7.47708 5.99639 8.17833 5.99639 9C5.99639 9.82167 6.29862 10.5229 6.9031 11.1038C7.50758 11.6846 8.25012 11.975 9.13071 11.975ZM9.13071 10.275C8.75758 10.275 8.44042 10.151 8.17922 9.90312C7.91803 9.65521 7.78743 9.35417 7.78743 9C7.78743 8.64583 7.91803 8.34479 8.17922 8.09688C8.44042 7.84896 8.75758 7.725 9.13071 7.725C9.50385 7.725 9.82101 7.84896 10.0822 8.09688C10.3434 8.34479 10.474 8.64583 10.474 9C10.474 9.35417 10.3434 9.65521 10.0822 9.90312C9.82101 10.151 9.50385 10.275 9.13071 10.275ZM8.19042 15.8H9.95907L10.2725 13.5475C10.7352 13.4342 11.1643 13.2677 11.5598 13.0481C11.9553 12.8285 12.3173 12.5629 12.6456 12.2513L14.8621 13.1225L15.7352 11.6775L13.8098 10.2963C13.8844 10.0979 13.9367 9.88896 13.9665 9.66938C13.9964 9.44979 14.0113 9.22667 14.0113 9C14.0113 8.77333 13.9964 8.55021 13.9665 8.33063C13.9367 8.11104 13.8844 7.90208 13.8098 7.70375L15.7352 6.3225L14.8621 4.8775L12.6456 5.77C12.3173 5.44417 11.9553 5.17146 11.5598 4.95188C11.1643 4.73229 10.7352 4.56583 10.2725 4.4525L9.98146 2.2H8.2128L7.89937 4.4525C7.43668 4.56583 7.00758 4.73229 6.61206 4.95188C6.21653 5.17146 5.85459 5.43708 5.52624 5.74875L3.30982 4.8775L2.43668 6.3225L4.36206 7.6825C4.28743 7.895 4.23519 8.1075 4.20534 8.32C4.17549 8.5325 4.16056 8.75917 4.16056 9C4.16056 9.22667 4.17549 9.44625 4.20534 9.65875C4.23519 9.87125 4.28743 10.0837 4.36206 10.2963L2.43668 11.6775L3.30982 13.1225L5.52624 12.23C5.85459 12.5558 6.21653 12.8285 6.61206 13.0481C7.00758 13.2677 7.43668 13.4342 7.89937 13.5475L8.19042 15.8Z",
@@ -2474,9 +1349,9 @@ var SettingsIcon = () => {
 };
 
 // src/components/icons/XSwapBadgeIcon.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var XSwapBadgeIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "svg",
     {
       version: "1.2",
@@ -2485,8 +1360,8 @@ var XSwapBadgeIcon = () => {
       width: "80",
       height: "27",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("title", { children: "xswap-badge" }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("title", { children: "xswap-badge" }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "image",
           {
             width: "80",
@@ -2495,17 +1370,17 @@ var XSwapBadgeIcon = () => {
             href: "data:image/png;base64,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"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("style", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("use", { id: "Background", href: "#img1iVBORw0KGgoAAAANSUhEUgAAAF", x: "0", y: "1" })
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("style", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("use", { id: "Background", href: "#img1iVBORw0KGgoAAAANSUhEUgAAAF", x: "0", y: "1" })
       ]
     }
   );
 };
 
 // src/components/icons/ChainlinkCCIPIcon.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var ChainlinkCCIPIcon = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "svg",
     {
       version: "1.2",
@@ -2514,8 +1389,8 @@ var ChainlinkCCIPIcon = () => {
       width: "67",
       height: "27",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("title", { children: "chainlink-CCIP" }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("title", { children: "chainlink-CCIP" }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "image",
           {
             width: "67",
@@ -2524,20 +1399,42 @@ var ChainlinkCCIPIcon = () => {
             href: "data:image/png;base64,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"
           }
         ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("style", {}),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("use", { id: "Background", href: "#imgiVBORw0KGgoAAA", x: "0", y: "0" })
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", {}),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("use", { id: "Background", href: "#imgiVBORw0KGgoAAA", x: "0", y: "0" })
       ]
     }
   );
 };
 
+// src/components/icons/XSwapLogo.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
+var XSwapLogo = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "svg",
+    {
+      version: "1.1",
+      id: "Layer_1",
+      xmlns: "http://www.w3.org/2000/svg",
+      x: "0px",
+      y: "0px",
+      viewBox: "0 0 50 50",
+      enableBackground: "new 0 0 50 50",
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        "image",
+        {
+          id: "image0",
+          x: "0",
+          y: "0",
+          href: "data:image/png;base64,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"
+        }
+      )
+    }
+  );
+};
+
 // src/components/TxConfigForm/HistoryCard.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var HistoryCard = ({ transaction, supportedChains }) => {
-  const getDate = (0, import_react2.useCallback)((blockTimestamp) => {
-    const date2 = new Date(blockTimestamp * 1e3);
-    return (0, import_date_fns.format)(date2, "d MMM yyyy HH:mm:ss");
-  }, []);
   const date = getDate(transaction.timestamp);
   const supportedTokens = (0, import_react2.useMemo)(() => {
     const customTokens = JSON.parse(
@@ -2582,23 +1479,14 @@ var HistoryCard = ({ transaction, supportedChains }) => {
   const targetChainData = supportedChains.find(
     (chain) => chain.chainId === transaction.targetChainId
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-col border border-solid border-[rgba(255,255,255,0.1)] rounded-xl bg-[rgb(15,15,15)] p-2 gap-4 mb-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-[rgba(255,255,255,0.6)] text-xs", children: date }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-grow justify-end items-center", children: [
-        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-3.5 h-3.5 mr-1 text-[rgb(250,200,100)]", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(HourGlassIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-xs text-[rgb(250,200,100)]", children: "In progress" })
-        ] }),
-        transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-3.5 h-3.5 mr-1 text-[rgb(100,200,100)]", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CheckIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-xs text-[rgb(100,200,100)]", children: "Done" })
-        ] }),
-        transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-4 h-4 mr-1 text-[rgb(255,100,100)]", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(XMarkIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-xs text-[rgb(255,100,100)]", children: "Reverted" })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col globalBorder rounded-xl bg-[rgb(15,15,15)] text-white text-xs sm:text-sm p-4 gap-3 mb-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-sm sm:text-base", children: date }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
+        transaction.status === "IN_PROGRESS" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[rgb(250,200,100)]", children: "In progress" }) }),
+        transaction.status === "DONE" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[rgb(100,200,100)]", children: "Done" }) }),
+        transaction.status === "REVERTED" && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "text-[rgb(255,100,100)]", children: "Reverted" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           "a",
           {
             href: `${supportedChains.find(
@@ -2608,15 +1496,15 @@ var HistoryCard = ({ transaction, supportedChains }) => {
             rel: "noreferrer",
             className: "ml-2 no-underline",
             "aria-label": "Show the transaction in the chain explorer",
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-3.5 h-3.5 text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ArrowUpRightIcon, {}) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowUpRightIcon, {}) })
           }
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap gap-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-grow items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex justify-between flex-wrap gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "img",
             {
               src: sourceChainData?.image,
@@ -2624,11 +1512,11 @@ var HistoryCard = ({ transaction, supportedChains }) => {
               className: "w-5 h-5 mr-1"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-xs text-[rgba(255,255,255,0.6)]", children: sourceChainData?.displayName })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: sourceChainData?.displayName })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-3.5 h-3.5 text-[rgba(255,255,255,0.6)] my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ArrowRightIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRightIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "img",
             {
               src: targetChainData?.image,
@@ -2636,35 +1524,35 @@ var HistoryCard = ({ transaction, supportedChains }) => {
               className: "w-5 h-5 mr-1"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-xs text-[rgba(255,255,255,0.6)]", children: targetChainData?.displayName })
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: targetChainData?.displayName })
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-1 items-center flex-wrap text-xs text-[rgba(255,255,255,0.6)]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center mb-2 last:mb-0", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center flex-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
           Number(transferredAmount) < MINIMUM_DISPLAYED_TOKEN_AMOUNT ? `<${MINIMUM_DISPLAYED_TOKEN_AMOUNT}` : transferredAmount,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-xs ml-1 text-rgba(255,255,255,0.6)", children: tokenData?.symbol }),
-          tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ml-1", children: tokenData?.symbol }),
+          tokenData?.image ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "img",
             {
               src: tokenData?.image,
               alt: tokenData?.name || "",
               className: "w-5 h-5 ml-1"
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
+          ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
         ] }),
-        transaction.tokenOutAddress && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "w-3.5 h-3.5 text-[rgba(255,255,255,0.6)] my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ArrowRightIcon, {}) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex items-center", children: [
+        transaction.tokenOutAddress && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-3.5 h-3.5 my-0 mx-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ArrowRightIcon, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex items-center", children: [
             Number(receivedAmount) < 1e-4 ? "<0.0001" : receivedAmount,
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "text-xs ml-1 text-[rgba(255,255,255,0.6)]", children: tokenOutData?.symbol }),
-            tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "ml-1", children: tokenOutData?.symbol }),
+            tokenOutData?.image ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               "img",
               {
                 src: tokenOutData?.image,
                 alt: tokenOutData?.name || "",
                 className: "w-5 h-5 ml-1"
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center justify-center w-5 h-5 text-[10px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: tokenData?.symbol.substring(0, 1) })
           ] })
         ] })
       ] }) })
@@ -2673,7 +1561,7 @@ var HistoryCard = ({ transaction, supportedChains }) => {
 };
 
 // src/components/TxConfigForm/History.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var History = ({ signer, supportedChains }) => {
   const [fetchedHistory, setFetchedHistory] = (0, import_react3.useState)();
   const [historyLoadedOnce, setHistoryLoadedOnce] = (0, import_react3.useState)(false);
@@ -2727,11 +1615,11 @@ var History = ({ signer, supportedChains }) => {
     return () => clearInterval(timer);
   }, [signer, fetchHistory, getHistory, historyLoadedOnce]);
   if (!signer)
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "w-full h-[30vh] overflow-scroll overflow-x-hidden", children: [
-    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
-    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CircularProgressIcon, {}) }),
-    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center w-full h-[30vh]", children: "Connect a wallet to browse history" });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center justify-center w-full", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "w-full h-96 overflow-scroll overflow-x-hidden", children: [
+    fetchedHistory?.length === 0 && historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "w-full text-center py-4 px-0 text-[rgb(158,158,158)]", children: "Your history is empty..." }),
+    !fetchedHistory && !historyLoadedOnce && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex w-full h-full items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CircularProgressIcon, {}) }),
+    fetchedHistory?.map((transaction, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       HistoryCard,
       {
         transaction,
@@ -2743,30 +1631,30 @@ var History = ({ signer, supportedChains }) => {
 };
 
 // src/components/TxConfigForm/TopBar.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var TopBar = ({
   signer,
   setSettingsShown,
   setHistoryTabShown,
   historyTabShown
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex w-full justify-between mx-auto pl-4 pr-8 pt-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex gap-2", children: [
-      !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full justify-between items-center mx-auto sm:pl-4 pr-8 pt-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "rounded-lg text-[rgba(255,255,255,0.6)] text-xs sm:text-base whitespace-nowrap", children: signer ? `Connected wallet: ${shortAddress(signer)}` : `Wallet disconnected` }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex gap-2", children: [
+      !historyTabShown && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "div",
         {
           onClick: () => setSettingsShown(true),
           className: "flex items-center text-xs gap-1 cursor-pointer",
-          children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SettingsIcon, {}) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(SettingsIcon, {}) })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "div",
         {
           onClick: () => setHistoryTabShown((x) => !x),
           className: "flex items-center text-sm gap-1 cursor-pointer",
-          children: !historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_jsx_runtime24.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { children: "Back" })
+          children: !historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "w-7 h-7 rounded-full bg-gradient-to-r from-x_blue_light to-x_blue_dark flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(HistoryIcon, {}) }) }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: "Back" })
         }
       )
     ] })
@@ -2775,7 +1663,7 @@ var TopBar = ({
 
 // src/components/TxConfigForm/Settings.tsx
 var import_react4 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var Settings = ({
   setSlippage,
   setSettingsShown,
@@ -2792,22 +1680,22 @@ var Settings = ({
       );
     }
   }, [slippageActivePresetIndex, usingSlippageInput]);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "absolute w-[310px] right-0 top-[46px] z-10 bg-black border border-solid border-[rgba(54,129,198,1)] p-4 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-4 justify-between", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-base", children: "Settings" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute w-[310px] right-0 top-[46px] z-10 bg-black border border-solid border-[rgba(54,129,198,1)] p-4 rounded-xl", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-4 justify-between", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-base", children: "Settings" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "div",
         {
           className: "cursor-pointer",
           onClick: () => setSettingsShown(false),
-          children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CloseIcon, {})
+          children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(CloseIcon, {})
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-sm text-[rgba(255,255,255,0.6)]", children: "Express delivery" }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
           "span",
           {
             className: "inline-flex w-14 h-9 p-3 relative align-middle box-border overflow-hidden cursor-pointer",
@@ -2815,8 +1703,8 @@ var Settings = ({
               setExpressChecked((x) => !x);
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "h-full, w-full rounded-lg bg-[rgba(255,255,255,0.3)]" }),
+              /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 "span",
                 {
                   className: `transition-all w-5 h-5 rounded-full absolute translate-y-[-4px] 
@@ -2827,15 +1715,15 @@ var Settings = ({
           }
         ) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InfoIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "text-xs text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "text-xs text-left", children: "Express delivery is a special feature of XSwap that reduces transaction time across chains to around 30 seconds. It is currently available for swaps below a value of $ 1000 USD." })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col gap-2 ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-2 ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: " text-[rgba(255,255,255,0.6)] text-sm", children: "Slippage" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center bg-[rgba(15,15,15,1)] p-1 globalBorder rounded-xl", children: SLIPPAGE_PRESETS.map((preset, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "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]" : ""}`,
@@ -2847,8 +1735,8 @@ var Settings = ({
           },
           index
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "bg-[rgba(39,39,39,1)] p-2 border border-solid border-[rgba(82,82,82,1)] rounded-xl text-white flex items-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
             "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",
@@ -2867,16 +1755,16 @@ var Settings = ({
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(PercentageIcon, {})
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(PercentageIcon, {})
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(InfoIcon, {}) }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "text-xs text-left", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "min-w-[26px] min-h-[26px] text-[#ffa726]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(InfoIcon, {}) }),
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "text-xs text-left", children: [
           "Slippage is the price variation you are willing to accept in the event that the price of the trade changes while it is processing.",
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("br", {}),
           " ",
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("br", {}),
+          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("br", {}),
           "If the trade fails due to too-low slippage, you will receive USDC on the destination chain."
         ] })
       ] })
@@ -2885,7 +1773,7 @@ var Settings = ({
 };
 
 // src/components/TxConfigForm/FeesDetails.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var FeesDetails = ({
   isGettingRoute,
   route,
@@ -2896,12 +1784,12 @@ var FeesDetails = ({
   feesDetailsShown,
   setFeesDetailsShown
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-center gap-1 text-sm font-medium text-white opacity-60", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CoinsIcon, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "mr-1", children: "Fees:" }),
-        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "bg-current rounded animate-pulse w-20 h-4" }) : ` ${weiToHumanReadable({
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col gap-3 globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 mb-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center justify-between text-xs sm:text-sm ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center gap-1 font-medium text-white opacity-60", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CoinsIcon, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mr-1", children: "Fees:" }),
+        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "bg-current rounded animate-pulse w-20 h-4" }) : ` ${weiToHumanReadable({
           amount: safeBigNumberFrom(
             route?.xSwapFees.xSwapFee.nativeFee || "0"
           ).add(safeBigNumberFrom(route?.xSwapFees.ccipFee || "0")).add(
@@ -2911,30 +1799,30 @@ var FeesDetails = ({
           precisionFractionalPlaces: 5
         })} ${paymentToken?.symbol}`
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex gap-1 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
           "div",
           {
-            className: `flex gap-1 text-xs font-medium ${expressChecked ? "text-x_green" : "text-white opacity-60"}`,
+            className: `flex gap-1 items-center font-medium ${expressChecked ? "text-x_green" : "text-white opacity-60"}`,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(TimerIcon, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(TimerIcon, {}),
               expressChecked ? "Fast ~ 30sec " : "Normal ~ 30min"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
           "div",
           {
             onClick: () => setFeesDetailsShown((x) => !x),
-            className: "text-xs font-medium text-white opacity-60 cursor-pointer flex items-center",
-            children: feesDetailsShown ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ChevronDownIcon, {})
+            className: "font-medium text-white opacity-60 cursor-pointer flex items-center w-[15px] h-[9px]",
+            children: feesDetailsShown ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ChevronDownIcon, {})
           }
         )
       ] })
     ] }),
-    feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex w-full items-center justify-between ", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
+    feesDetailsShown && /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex w-full items-center justify-between ", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
           "CCIP Fee:",
           ` ${weiToHumanReadable({
             amount: route?.xSwapFees.ccipFee || "0",
@@ -2942,7 +1830,7 @@ var FeesDetails = ({
             precisionFractionalPlaces: 5
           })} ${paymentToken?.symbol}`
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
           "Native Fee:",
           ` ${weiToHumanReadable({
             amount: route?.xSwapFees.xSwapFee.nativeFee || "0",
@@ -2951,12 +1839,12 @@ var FeesDetails = ({
           })} ${paymentToken?.symbol}`
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col text-[10px] gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
           "Slippage: ",
           `${slippage}%`
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "font-medium text-white opacity-60", children: [
           "Min amount out:",
           " ",
           weiToHumanReadable({
@@ -2973,45 +1861,95 @@ var FeesDetails = ({
 };
 
 // src/components/TxConfigForm/Summary.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_react6 = require("react");
+
+// src/components/TxConfigForm/UsdPrice.tsx
+var import_react5 = require("react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var UsdPrice = ({
+  prices,
+  token,
+  amount = "0",
+  loading = false
+}) => {
+  const [usdPrice, setUsdPrice] = (0, import_react5.useState)("0.00");
+  (0, import_react5.useEffect)(() => {
+    if (token && prices && prices[token.address]) {
+      setUsdPrice((Number(amount) * Number(prices[token.address])).toFixed(2));
+    }
+  }, [token, prices, amount]);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "opacity-60 py-4", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Skeleton, { width: "w-12", height: "h-4" }) : token ? prices && prices[token.address] ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { children: `$${usdPrice}` }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: "$0.00" }) });
+};
+
+// src/components/TxConfigForm/Summary.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var Summary = ({
   isGettingRoute,
-  amount,
   route,
   dstToken,
   dstChain
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
-      isGettingRoute && amount.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "bg-current rounded animate-pulse w-[190px] h-7" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-2 items-center text-white text-2xl", children: [
-        weiToHumanReadable({
-          amount: route?.estAmountOut || "0",
-          decimals: dstToken?.decimals || 18,
-          precisionFractionalPlaces: 5
-        }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { src: dstToken?.image, alt: dstToken?.name }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { children: dstToken?.symbol })
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col gap-1 text-sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on chain:" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex gap-1 text-white", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "w-4 h-4", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { children: dstChain?.displayName })
+  const [prices, setPrices] = (0, import_react6.useState)();
+  const amountReadable = (0, import_react6.useMemo)(
+    () => weiToHumanReadable({
+      amount: route?.estAmountOut || "0",
+      decimals: dstToken?.decimals || 18,
+      precisionFractionalPlaces: 5
+    }),
+    [route, dstToken]
+  );
+  (0, import_react6.useEffect)(() => {
+    if (dstChain) {
+      getPrices({ chainId: dstChain.chainId, currency: "USD" }).then(
+        (prices2) => setPrices(prices2)
+      );
+    }
+  }, [dstChain]);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4 relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex justify-between", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-sm", children: "You receive" }),
+        isGettingRoute ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          Skeleton,
+          {
+            width: "w-[100px]",
+            height: "h-[36px]",
+            other: "sm:w-[190px]"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex gap-2 items-center text-white text-xl sm:text-3xl", children: [
+          amountReadable,
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-4 sm:w-6 h-4 sm:h-6", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: dstToken?.image, alt: dstToken?.name }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-base sm:text-xl", children: dstToken?.symbol })
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex flex-col gap-1 text-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-[rgba(255,255,255,0.6)] text-right", children: "on chain:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center gap-1 text-white", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "w-4 h-4", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("img", { src: dstChain?.image, alt: dstChain?.name }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { children: dstChain?.displayName })
+        ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute right-[50%] top-0 translate-x-1/2 translate-y-[-60%] globalBorder rounded-xl p-[5px] bg-[rgba(15,15,15,1)]", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: " flex items-center justify-center rounded-lg  w-8 h-8 bg-gradient-to-l from-[rgba(54,129,198,1)] to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ArrowDownIcon, {}) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      UsdPrice,
+      {
+        prices,
+        token: dstToken,
+        amount: amountReadable,
+        loading: isGettingRoute
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "absolute right-[50%] top-0 translate-x-1/2 translate-y-[-60%] globalBorder rounded-xl p-[5px] bg-[rgba(15,15,15,1)]", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: " flex items-center justify-center rounded-lg  w-8 h-8 bg-gradient-to-l from-[rgba(54,129,198,1)] to-[rgba(43,74,157,1)] ", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ArrowDownIcon, {}) }) })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-var import_react7 = require("react");
+var import_react9 = require("react");
 
 // src/components/TxConfigForm/TokenPicker.tsx
-var import_react5 = require("react");
+var import_react7 = require("react");
 var import_react_dom = require("react-dom");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var TokenPicker = ({
   onCloseClick,
   tokens,
@@ -3020,8 +1958,8 @@ var TokenPicker = ({
   signer,
   balances
 }) => {
-  const [searchValue, setSearchValue] = (0, import_react5.useState)("");
-  const modalRoot = document.querySelector(".xswap");
+  const [searchValue, setSearchValue] = (0, import_react7.useState)("");
+  const modalRoot = document.querySelector("#xswap-modal");
   const onBackdropClick = (e) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
@@ -3029,7 +1967,7 @@ var TokenPicker = ({
       onCloseClick();
     }
   };
-  const filteredTokens = (0, import_react5.useMemo)(() => {
+  const filteredTokens = (0, import_react7.useMemo)(() => {
     const isMatch = (value, searchValue2) => value.toLowerCase().indexOf(searchValue2.toLowerCase()) > -1;
     return tokens?.filter(
       (token) => isMatch(token.symbol, searchValue) || isMatch(token.name, searchValue) || token.address === searchValue.toLowerCase()
@@ -3038,24 +1976,24 @@ var TokenPicker = ({
     );
   }, [searchValue, tokens]);
   return modalRoot ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {
         onClick: onBackdropClick,
         className: "box-border fixed h-full w-full z-[999] top-0 left-0 bg-[rgba(0,0,0,0.8)] flex items-center justify-center p-5",
-        children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "relative bg-black rounded-3xl p-6 max-h-[70%] flex flex-col text-base text-white w-[452px] h-[70%] border border-solid border-[rgba(255,255,255,0.2)]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "relative bg-black rounded-3xl p-6 max-h-[70%] flex flex-col text-base text-white w-[452px] h-[70%] border border-solid border-[rgba(255,255,255,0.2)]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "div",
             {
               onClick: onCloseClick,
               className: "absolute top-4 right-4 cursor-pointer",
-              children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(CloseIcon, {})
+              children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseIcon, {})
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-base mb-4", children: "Pick a token" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center border border-solid border-[rgba(255,255,255,0.1)] rounded-lg py-0 px-3 gap-2 bg-[rgba(15,15,15,1)]", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(SearchIcon, {}) }),
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-base mb-4", children: "Pick a token" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex items-center border border-solid border-[rgba(255,255,255,0.1)] rounded-lg py-0 px-3 gap-2 bg-[rgba(15,15,15,1)]", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "w-6 h-6", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SearchIcon, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
               "input",
               {
                 placeholder: "Search name or paste address",
@@ -3065,7 +2003,7 @@ var TokenPicker = ({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "my-4 mx-0 flex flex-wrap gap-3", children: tokens?.filter((token) => token?.quickPick).map((token) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             "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)]" : ""}`,
@@ -3074,14 +2012,14 @@ var TokenPicker = ({
                 onCloseClick();
               },
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("img", { src: token.image, alt: token.name, className: "w-5" }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-sm", children: token.symbol })
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("img", { src: token.image, alt: token.name, className: "w-5" }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-sm", children: token.symbol })
               ]
             },
             token.address
           )) }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "h-[2px] my-0 mx-[-24px] w-[100%+48px] px-12 bg-[rgba(255,255,255,0.1)]" }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "overflow-y-scroll h-full mx-[-24px] w-[100%+48px] flex flex-col", children: filteredTokens && filteredTokens.length > 0 ? filteredTokens.map((token, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
             "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)]" : ""}`,
@@ -3090,29 +2028,29 @@ var TokenPicker = ({
                 onCloseClick();
               },
               children: [
-                token.image ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+                token.image ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
                   "img",
                   {
                     src: token.image,
                     alt: token.name,
                     className: "token-picker__all__logo"
                   }
-                ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
-                /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex flex-col leading-[16px]", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
-                    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-[#888] text-[11px]", children: token.symbol })
+                ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex items-center justify-center w-9 h-9 text-[15px] ml-1 rounded-full bg-[#272e40] text-[#e0e7fa]", children: token?.symbol.substring(0, 1) }),
+                /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between items-center gap-1 overflow-hidden grow", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col leading-[16px]", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "overflow-hidden whitespace-nowrap text-ellipsis text-[15px]", children: token.name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-[#888] text-[11px]", children: token.symbol })
                   ] }),
-                  signer && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "text-xs", children: weiToHumanReadable({
+                  signer && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: balances && balances[token.address] && token.decimals ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "text-xs", children: weiToHumanReadable({
                     amount: balances[token.address]?.toString() || "0",
                     decimals: token.decimals,
                     precisionFractionalPlaces: 4
-                  }) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Skeleton, { w: "w-12", h: "h-3" }) })
+                  }) }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Skeleton, { width: "w-12", height: "h-3" }) })
                 ] })
               ]
             },
             `${index}_${token.address}`
-          )) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
+          )) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-sm text-white", children: "No tokens found." }) }) })
         ] })
       }
     ),
@@ -3121,7 +2059,7 @@ var TokenPicker = ({
 };
 
 // src/components/TxConfigForm/ChainListElement.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var ChainListElement = ({
   chain,
   setSrcChain,
@@ -3129,8 +2067,8 @@ var ChainListElement = ({
   index,
   length
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
       "li",
       {
         className: "bg-transparent border-none flex gap-1 items-center cursor-pointer py-2 w-full",
@@ -3139,21 +2077,21 @@ var ChainListElement = ({
           setChainListShown(false);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { width: 12, height: 12, src: chain.image, alt: chain.displayName }),
           chain.displayName
         ]
       }
     ),
-    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
+    index !== length - 1 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "h-px mx-2 bg-[rgba(255,255,255,0.15)]" })
   ] }, `${chain.ecosystem}-${chain.chainId}`);
 };
 
 // src/components/TxConfigForm/BalanceComponent.tsx
-var import_react6 = require("react");
+var import_react8 = require("react");
 var import_bignumber3 = __toESM(require("bignumber.js"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var BalanceComponent = ({ srcToken, balances }) => {
-  const balanceText = (0, import_react6.useMemo)(() => {
+  const balanceText = (0, import_react8.useMemo)(() => {
     if (!balances || !srcToken)
       return "0";
     if (balances[srcToken.address]?.toString() === "0")
@@ -3173,7 +2111,7 @@ var BalanceComponent = ({ srcToken, balances }) => {
       precisionFractionalPlaces: 5
     });
   }, [srcToken, balances]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_jsx_runtime30.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
     "Balance:",
     " ",
     srcToken && balances ? weiToHumanReadable({
@@ -3181,12 +2119,12 @@ var BalanceComponent = ({ srcToken, balances }) => {
       decimals: srcToken.decimals,
       precisionFractionalPlaces: 4
     }) : 0,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "bg-gradient-to-r from-x_blue_light to-x_blue_dark bg-clip-text text-transparent", children: "Max" })
   ] });
 };
 
 // src/components/TxConfigForm/SwapPanel.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var SwapPanel = ({
   amount,
   setAmount,
@@ -3199,10 +2137,10 @@ var SwapPanel = ({
   prices,
   supportedChains
 }) => {
-  const [chainListShown, setChainListShown] = (0, import_react7.useState)(false);
-  const [tokenListShown, setTokenListShown] = (0, import_react7.useState)(false);
-  const listRef = (0, import_react7.useRef)(null);
-  const buttonRef = (0, import_react7.useRef)(null);
+  const [chainListShown, setChainListShown] = (0, import_react9.useState)(false);
+  const [tokenListShown, setTokenListShown] = (0, import_react9.useState)(false);
+  const listRef = (0, import_react9.useRef)(null);
+  const buttonRef = (0, import_react9.useRef)(null);
   const handleClickOutside = (event) => {
     if (listRef.current && buttonRef.current) {
       const listElement = listRef.current;
@@ -3221,21 +2159,21 @@ var SwapPanel = ({
         })
       );
   };
-  (0, import_react7.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (chainListShown) {
       document.addEventListener("mousedown", handleClickOutside);
       return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [chainListShown]);
-  const chainListOptions = (0, import_react7.useMemo)(
+  const chainListOptions = (0, import_react9.useMemo)(
     () => supportedChains.filter((chain) => chain.chainId !== srcChain?.chainId),
     [supportedChains, srcChain]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col items-start globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "w-full flex gap-4 items-start justify-between mb-4", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col gap-2 overflow-hidden w-1/2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("p", { className: "text-white opacity-60 text-sm font-medium", children: "You pay" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex justify-between globalBorder rounded-lg bg-[rgba(15,15,15,1)] p-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col justify-between gap-2 overflow-hidden w-1/2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("p", { className: "text-white opacity-60 text-xs sm:text-sm font-medium", children: "You pay" }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "input",
           {
             className: "p-0 border-none outline-none bg-transparent text-2xl overflow-ellipsis",
@@ -3255,90 +2193,94 @@ var SwapPanel = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-          "div",
-          {
-            ref: buttonRef,
-            className: "bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2",
-            onClick: () => setChainListShown((prev) => !prev),
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                "img",
-                {
-                  width: "16",
-                  height: "16",
-                  src: srcChain?.image,
-                  alt: srcChain?.name
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: srcChain?.displayName }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DownArrowIcon, {})
-            ]
-          }
-        ),
-        chainListShown && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          "ul",
-          {
-            ref: listRef,
-            className: "bg-black globalBorder rounded-lg whitespace-nowrap z-1 right-0 top-10 px-2 max-w-full max-h-[40vh] overflow-auto absolute text-sm z-20",
-            children: chainListOptions.map((chain, index) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-              ChainListElement,
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex items-center text-sm text-[rgba(255,255,255,0.6)]", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        UsdPrice,
+        {
+          prices,
+          token: srcToken,
+          amount,
+          loading: false
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col relative items-end gap-2.5 w-1/2 text-xs", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        "div",
+        {
+          className: "flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap",
+          onClick: () => {
+            setTokenListShown((state) => !state);
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "img",
               {
-                index,
-                length: supportedChains.length,
-                setSrcChain,
-                setChainListShown,
-                chain
+                height: 16,
+                width: 16,
+                src: srcToken?.image,
+                alt: srcToken?.name
               }
-            ))
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
-          "div",
-          {
-            className: "flex gap-2 items-center p-2 max-w-full cursor-pointer bg-black text-white globalBorder rounded-3xl whitespace-nowrap",
-            onClick: () => {
-              setTokenListShown((state) => !state);
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-                "img",
-                {
-                  height: 16,
-                  width: 16,
-                  src: srcToken?.image,
-                  alt: srcToken?.name
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: srcToken?.symbol }),
-              /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DownArrowIcon, {})
-            ]
-          }
-        ),
-        tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
-          TokenPicker,
-          {
-            onCloseClick: () => setTokenListShown(false),
-            tokens: srcChain?.tokens,
-            signer,
-            selectedToken: srcToken,
-            setSelectedToken: (token) => setSrcToken(token),
-            balances
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "flex justify-between items-center w-full text-sm text-[rgba(255,255,255,0.6)] relative", children: [
-      srcToken ? prices && prices[srcToken.address] ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { children: `$${(Number(amount) * Number(prices[srcToken.address])).toFixed(
-        2
-      )}` }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Alert, { desc: "Unknown price" }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_jsx_runtime31.Fragment, { children: "$0.00" }),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: srcToken?.symbol }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DownArrowIcon, {})
+          ]
+        }
+      ),
+      tokenListShown && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        TokenPicker,
+        {
+          onCloseClick: () => setTokenListShown(false),
+          tokens: srcChain?.tokens,
+          signer,
+          selectedToken: srcToken,
+          setSelectedToken: (token) => setSrcToken(token),
+          balances
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         "div",
         {
           onClick: handleMaxClick,
           className: "flex gap-1 items-center font-medium text-white opacity-60 py-0.5 cursor-pointer",
-          children: signer && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(BalanceComponent, { balances, srcToken })
+          children: signer && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(BalanceComponent, { balances, srcToken })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+        "div",
+        {
+          ref: buttonRef,
+          className: "bg-black globalBorder rounded-2xl whitespace-nowrap flex items-center p-2 cursor-pointer gap-2",
+          onClick: () => setChainListShown((prev) => !prev),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "img",
+              {
+                width: "16",
+                height: "16",
+                src: srcChain?.image,
+                alt: srcChain?.name
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { children: srcChain?.displayName }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DownArrowIcon, {})
+          ]
+        }
+      ),
+      chainListShown && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        "ul",
+        {
+          ref: listRef,
+          className: "bg-black globalBorder rounded-lg whitespace-nowrap z-1 right-0 top-10 px-2 max-w-full max-h-[40vh] overflow-auto absolute text-sm z-20",
+          children: chainListOptions.map((chain, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            ChainListElement,
+            {
+              index,
+              length: supportedChains.length,
+              setSrcChain,
+              setChainListShown,
+              chain
+            }
+          ))
         }
       )
     ] })
@@ -3346,9 +2288,9 @@ var SwapPanel = ({
 };
 
 // src/components/TxConfigForm/ErrorField.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 var ErrorField = ({ error }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       className: `flex justify-center mb-1 items-center w-full rounded-2xl bg-x_error_background border border-solid ${error.length > 0 ? "border-x_error_border" : "border-transparent"}`,
@@ -3358,13 +2300,28 @@ var ErrorField = ({ error }) => {
 };
 
 // src/components/TxConfigForm/Description.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var Description = ({ description }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex flex-col items-start rounded-lg px-4 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-full flex gap-4 items-start justify-between text-xl", children: description }) });
+};
+
+// src/components/TxConfigForm/Button.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var Button = ({ children, onClick, type, disabled }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "button",
+    {
+      className: "text-white border-none rounded-2xl text-xl py-4 cursor-pointer w-full bg-gradient-to-r from-[#3681c6] to-[#2b4a9d] disabled:opacity-25",
+      onClick,
+      type,
+      disabled,
+      children
+    }
+  );
 };
 
 // src/components/TxConfigForm/Form.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var Form = ({
   dstChainId,
   dstTokenAddr,
@@ -3373,30 +2330,30 @@ var Form = ({
   supportedChains,
   onSubmit
 }) => {
-  const [signer, setSigner] = (0, import_react8.useState)();
-  const [dstChain, setDstChain] = (0, import_react8.useState)();
-  const [dstToken, setDstToken] = (0, import_react8.useState)();
-  const [srcChain, setSrcChain] = (0, import_react8.useState)();
-  const [srcToken, setSrcToken] = (0, import_react8.useState)();
-  const [amount, setAmount] = (0, import_react8.useState)("");
-  const [paymentToken, setPaymentToken] = (0, import_react8.useState)();
-  const [route, setRoute] = (0, import_react8.useState)();
-  const [expressChecked, setExpressChecked] = (0, import_react8.useState)(true);
-  const [historyTabShown, setHistoryTabShown] = (0, import_react8.useState)(false);
-  const [isGettingRoute, setIsGettingRoute] = (0, import_react8.useState)(false);
-  const [prices, setPrices] = (0, import_react8.useState)();
-  const [balances, setBalances] = (0, import_react8.useState)();
-  const [settingsShown, setSettingsShown] = (0, import_react8.useState)(false);
-  const [formError, setFormError] = (0, import_react8.useState)("");
-  const [slippage, setSlippage] = (0, import_react8.useState)("1.5");
-  const [feesDetailsShown, setFeesDetailsShown] = (0, import_react8.useState)(false);
+  const [signer, setSigner] = (0, import_react10.useState)();
+  const [dstChain, setDstChain] = (0, import_react10.useState)();
+  const [dstToken, setDstToken] = (0, import_react10.useState)();
+  const [srcChain, setSrcChain] = (0, import_react10.useState)();
+  const [srcToken, setSrcToken] = (0, import_react10.useState)();
+  const [amount, setAmount] = (0, import_react10.useState)("");
+  const [paymentToken, setPaymentToken] = (0, import_react10.useState)();
+  const [route, setRoute] = (0, import_react10.useState)();
+  const [expressChecked, setExpressChecked] = (0, import_react10.useState)(true);
+  const [historyTabShown, setHistoryTabShown] = (0, import_react10.useState)(false);
+  const [isGettingRoute, setIsGettingRoute] = (0, import_react10.useState)(false);
+  const [prices, setPrices] = (0, import_react10.useState)();
+  const [balances, setBalances] = (0, import_react10.useState)();
+  const [settingsShown, setSettingsShown] = (0, import_react10.useState)(false);
+  const [formError, setFormError] = (0, import_react10.useState)("");
+  const [slippage, setSlippage] = (0, import_react10.useState)("1.5");
+  const [feesDetailsShown, setFeesDetailsShown] = (0, import_react10.useState)(false);
   const debouncedAmount = useDebounce(amount, 1e3);
   const account = (0, import_wagmi2.useAccount)();
   const { switchChainAsync } = (0, import_wagmi2.useSwitchChain)();
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setSigner(account.address);
   }, [account.address]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     const defaultChain = supportedChains.find(
       ({ chainId }) => chainId === account.chainId?.toString()
     );
@@ -3406,17 +2363,17 @@ var Form = ({
       )
     );
   }, [account.chainId]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setDstChain(supportedChains.find((chain) => chain.chainId === dstChainId));
   }, [supportedChains, dstChainId]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setDstToken(
       dstChain?.tokens.find(
         (token) => token.address.toLowerCase() === dstTokenAddr.toLowerCase()
       )
     );
   }, [dstChain]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (srcChain && srcToken && dstChain && debouncedAmount && paymentToken && slippage) {
       setFormError("");
       const timeout = setTimeout(() => {
@@ -3424,8 +2381,12 @@ var Form = ({
       }, ROUTE_TIMEOUT_MS);
       setIsGettingRoute(true);
       setFeesDetailsShown(false);
+      if (!srcToken.decimals)
+        throw new Error(
+          `Configuration error: selected token ($${srcToken.symbol} ${srcToken.name}) has unknown decimals param.`
+        );
       getRoute({
-        fromAmount: import_ethers4.ethers.utils.parseUnits(debouncedAmount, srcToken?.decimals).toString(),
+        fromAmount: import_ethers5.ethers.utils.parseUnits(debouncedAmount, srcToken.decimals).toString(),
         fromAddress: signer || ADDRESSES[srcChain.chainId].FeeCollector,
         fromChain: srcChain.chainId,
         fromToken: srcToken.address,
@@ -3455,30 +2416,30 @@ var Form = ({
     slippage,
     expressChecked
   ]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (srcChain) {
       setPaymentToken(
         srcChain.tokens.find(
-          (token) => token.address.toLowerCase() === import_ethers4.ethers.constants.AddressZero.toLowerCase()
+          (token) => token.address.toLowerCase() === import_ethers5.ethers.constants.AddressZero.toLowerCase()
         )
       );
     }
   }, [srcChain]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setAmount("");
     setFormError("");
   }, [srcToken]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     setSrcToken(srcChain?.tokens[0]);
   }, [srcChain]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (srcChain) {
       getPrices({ chainId: srcChain.chainId, currency: "USD" }).then(
         (prices2) => setPrices(prices2)
       );
     }
   }, [srcChain]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react10.useEffect)(() => {
     if (srcChain && signer) {
       getBalances(srcChain, signer).then((balances2) => setBalances(balances2));
     }
@@ -3491,13 +2452,13 @@ var Form = ({
   const handleSwitchChain = async () => {
     await switchChainAsync({ chainId: Number(srcChain?.chainId) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "form",
     {
       className: "flex flex-col gap-2 z-10 my-0 mx-auto p-4 rounded-3xl overflow-hidden font-light w-x_mobile sm:w-x_desktop",
       onSubmit: handleSubmit,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           TopBar,
           {
             signer,
@@ -3506,7 +2467,7 @@ var Form = ({
             setSettingsShown
           }
         ),
-        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        settingsShown && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           Settings,
           {
             expressChecked,
@@ -3516,9 +2477,9 @@ var Form = ({
             setSlippage
           }
         ),
-        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          desc && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Description, { description: desc }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        historyTabShown ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(History, { signer, supportedChains }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          desc && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Description, { description: desc }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             SwapPanel,
             {
               amount,
@@ -3533,17 +2494,16 @@ var Form = ({
               setSrcChain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             Summary,
             {
               isGettingRoute,
-              amount,
               route,
               dstToken,
               dstChain
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
             FeesDetails,
             {
               route,
@@ -3556,9 +2516,9 @@ var Form = ({
               setFeesDetailsShown
             }
           ),
-          formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ErrorField, { error: formError }),
-          srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("button", { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-            "button",
+          formError.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ErrorField, { error: formError }),
+          signer && srcChain && srcChain.chainId !== account.chainId?.toString() ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Button, { type: "button", onClick: handleSwitchChain, children: "Switch chain" }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+            Button,
             {
               type: "submit",
               disabled: !signer || !route || isGettingRoute,
@@ -3572,7 +2532,7 @@ var Form = ({
 };
 
 // src/components/TxConfigForm/index.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var TxConfigForm = ({
   dstChainId,
   dstTokenAddr,
@@ -3590,17 +2550,17 @@ var TxConfigForm = ({
     }
   };
   const queryClient = new import_react_query.QueryClient();
-  const wagmiConfig = (0, import_react9.useMemo)(
+  const wagmiConfig = (0, import_react11.useMemo)(
     () => getWagmiConfig(supportedChains),
     supportedChains
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_wagmi3.WagmiProvider, { config: wagmiConfig, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_query.QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       className: "top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.8)] fixed flex items-center justify-center z-10",
       onClick: onBackdropClick,
-      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "relative bg-black rounded-3xl w-lg overflow-auto text-white border-2 border-solid border-[rgba(255,255,255,0.1)]", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           Form,
           {
             dstChainId,
@@ -3611,19 +2571,19 @@ var TxConfigForm = ({
             onSubmit
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "div",
           {
             className: "absolute top-7 right-4 cursor-pointer text-white",
             onClick: onClose,
-            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CloseIcon, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(CloseIcon, {})
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "swappage__poweredby", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "Powered by" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(XSwapBadgeIcon, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "\u2715" }),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChainlinkCCIPIcon, {})
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "swappage__poweredby", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "Powered by" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(XSwapBadgeIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: "\u2715" }),
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ChainlinkCCIPIcon, {})
         ] })
       ] })
     }
@@ -3639,7 +2599,7 @@ var openTxConfigForm = async ({
   try {
     return await new Promise((resolve) => {
       txConfigFormRoot.render(
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           TxConfigForm,
           {
             dstChainId,
@@ -3665,16 +2625,130 @@ var openTxConfigForm = async ({
 var txConfigFormRoot;
 if (typeof document !== "undefined") {
   const xswapElement = document.createElement("div");
-  xswapElement.setAttribute("id", "txConfigFormRoot");
-  xswapElement.classList.add("xswap");
+  xswapElement.setAttribute("id", "xswap-modal");
   document.body.appendChild(xswapElement);
   txConfigFormRoot = (0, import_client.createRoot)(xswapElement);
 }
 
+// src/components/TxHistoryButton/index.tsx
+var import_react12 = require("react");
+var import_client2 = require("react-dom/client");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var TxHistoryButton = ({ transaction }) => {
+  const {
+    fromChain,
+    fromChainImage,
+    fromToken,
+    fromTokenImage,
+    fromAmount,
+    toChain,
+    toChainImage,
+    isDone,
+    txHash,
+    explorer
+  } = transaction;
+  const [isWide, setIsWide] = (0, import_react12.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2", onClick: () => setIsWide((x) => !x), children: [
+    isWide && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      "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"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex justify-between flex-col gap-2 sm:gap-5 sm:flex-row w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                "img",
+                {
+                  className: "w-5 h-5",
+                  src: fromChainImage,
+                  alt: "source chain"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromChain }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowRightIcon, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("img", { className: "w-5 h-5", src: toChainImage, alt: "to chain" }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: toChain })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: "Sent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromAmount }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: fromToken }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+                "img",
+                {
+                  className: "w-5 h-5",
+                  src: fromTokenImage,
+                  alt: "source token"
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            "a",
+            {
+              href: explorer,
+              target: "_blank",
+              rel: "noreferrer",
+              className: "no-underline cursor-pointer",
+              "aria-label": "Show the transaction in the chain explorer",
+              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3.5 h-3.5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowUpRightIcon, {}) })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "div",
+      {
+        className: `text-white rounded-xl cursor-pointer bg-gradient-to-r 
+           ${isDone ? "from-[rgba(76,175,80,0.1)] to-[rgba(46,125,50,0.1)] border border-solid border-x_green_dark" : "from-[rgba(54,129,198,0.1)] to-[rgba(43,74,157,0.1)] border border-solid border-x_blue_dark"}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex gap-2 items-center h-14 w-20 justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ArrowLeftIcon, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "relative flex items-center justify-center w-9 h-9", children: isDone ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-x_green w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CheckIcon, {}) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-5 h-5", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(XSwapLogo, {}) }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "absolute flex items-center justify-center top-0 left-0 right-0 bottom-0 text-white", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CircularProgressIcon, {}) })
+          ] }) })
+        ] })
+      }
+    )
+  ] });
+};
+var renderedTransactions = [];
+var addTransactionToRenderedTransactions = (transaction) => {
+  if (!renderedTransactions.some(({ txHash }) => txHash === transaction.txHash))
+    renderedTransactions.push(transaction);
+};
+var removeTransactionFromRenderedTransactions = (txHash) => {
+  const filteredRenderedTransactions = renderedTransactions.filter(
+    (item) => item.txHash !== txHash
+  );
+  renderedTransactions = [...filteredRenderedTransactions];
+};
+var updateTransactionDoneInRenderedTransactions = (txHash) => {
+  const transaction = renderedTransactions.find(
+    (item) => item.txHash === txHash
+  );
+  if (transaction) {
+    transaction.isDone = true;
+  }
+};
+var historyElement = document.createElement("div");
+historyElement.setAttribute("id", "xswap-history");
+historyElement.setAttribute(
+  "class",
+  "absolute bottom-5 right-2 flex flex-col gap-3 pl-9 items-end w-full z-50"
+);
+document.body.appendChild(historyElement);
+var txHistoryButtonRoot = (0, import_client2.createRoot)(historyElement);
+var renderTxHistoryButtons = () => {
+  const buttons = renderedTransactions.map((item) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TxHistoryButton, { transaction: item }, item.txHash));
+  txHistoryButtonRoot.render(buttons);
+};
+
 // src/components/Skeleton/index.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
-var Skeleton = ({ w, h }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: `bg-current rounded animate-pulse ${w} ${h}` });
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var Skeleton = ({ width, height }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: `bg-current rounded animate-pulse ${width} ${height}` });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -3682,6 +2756,7 @@ var Skeleton = ({ w, h }) => {
   Alert,
   BALANCES_CHUNK_SIZE,
   BatchQueryAbi,
+  CCIP_EXPLORER,
   ContractName,
   DEFAULT_ECOSYSTEM,
   DEFAULT_SOURCE_CHAIN_ID,
@@ -3696,9 +2771,10 @@ var Skeleton = ({ w, h }) => {
   ROUTE_TIMEOUT_MS,
   SLIPPAGE_PRESETS,
   Skeleton,
+  TxHistoryButton,
   Web3Environment,
   XSwapCallType,
-  XSwapRouterAbi,
+  addTransactionToRenderedTransactions,
   chunkArray,
   deepMergeObjects,
   findPlaceholderIndex,
@@ -3711,14 +2787,19 @@ var Skeleton = ({ w, h }) => {
   getBridgeTokens,
   getChainData,
   getChains,
+  getDate,
   getHistory,
   getPrices,
   getRoute,
   getSwapTx,
   getTokens,
+  monitorTransactionStatus,
   openTxConfigForm,
+  removeTransactionFromRenderedTransactions,
+  renderTxHistoryButtons,
   replaceNull,
   safeBigNumberFrom,
   shortAddress,
+  updateTransactionDoneInRenderedTransactions,
   weiToHumanReadable
 });