@rash2x/bridge-widget 0.6.93 → 0.6.94

package/dist/{index-BC-9ZbF7.cjs → index-Db2959hv.cjs}

@@ -35,7 +35,7 @@ const reactWindow = require("react-window");
 const common$1 = { "connecting": "Connecting…", "initializing": "Initializing...", "loading": "Loading...", "paste": "paste", "close": "Close", "zeroPlaceholder": "0", "nativeToken": "Native Token" };
 const wallets$1 = { "addTonWallet": "Add TON wallet", "addEvmWallet": "Add EVM wallet", "connectTonWallet": "Connect TON wallet", "connectEvmWallet": "Connect EVM wallet", "initializingMetamask": "Initializing MetaMask SDK...", "initializingTronlink": "Initializing TronLink...", "failedToConnectTon": "Failed to connect to TON wallet", "failedToDisconnect": "Failed to disconnect", "metamaskConnectionError": "MetaMask connection error", "failedToConnectMetamask": "Failed to connect to MetaMask", "failedToDisconnectMetamask": "Failed to disconnect from MetaMask", "selectWallet": "Select Wallet", "tonWallets": "TON", "evmWallets": "EVM", "tronWallets": "TRON", "tonconnect": "TonConnect", "metaMask": "WalletConnect", "walletConnect": "WalletConnect", "tronLink": "TronLink", "addTronWallet": "Add Tron wallet", "comingSoon": "Coming Soon", "connected": "CONNECTED", "connectedStatus": "Connected", "disconnect": "Disconnect", "chooseWallet": "Connect wallet", "oneWalletPerEnv": "You can only connect one wallet per environment.", "connect": "Connect", "connectTronWallet": "Connect Tron wallet", "connectWallet": "Connect wallet" };
 const bridge$1 = { "max": "Max", "sourceNetwork": "Source network", "destinationNetwork": "Destination network", "selectToken": "Select token", "selectNetwork": "Select network", "selectSourceNetwork": "Select source network", "selectDestinationNetwork": "Select destination network", "searchToken": "Search token", "myTokens": "My tokens", "allTokens": "All tokens", "search": "Search", "select": "Select", "willChangeSourceChain": "Will change source network", "willChangeDestinationChain": "Will change destination network", "willChangeBothChains": "Will change both networks", "willChangeSourceNetworkAndToken": "Will change source token", "noBalancesFound": "No balances found.", "noResults": "No results", "tokenNotFound": "We couldn't find a token with that name or symbol. Please try again.", "chainNotFound": "We couldn't find a chain with that name. Please try again.", "sendToAnotherAddress": "Send to another address", "youWillReceive": "You will receive", "anotherAddressPlaceholder": "Address", "addressDoesntMatch": "Address doesn't match the {{network}} network", "checkBeforeTransfer": "Check correctness before transfer" };
-const transaction$1 = { "enterAmount": "Enter amount", "transfer": "Transfer", "getQuote": "Get quote", "failed": "Transaction Failed", "confirm": "Confirm transaction", "signTransaction": "Sign in transaction in wallet", "quoting": "Quoting...", "inProgress": "Transaction in progress...", "checkingBalance": "Checking balance...", "insufficientBalance": "Insufficient balance", "amountTooSmall": "Min {{min}}", "amountTooLarge": "Max {{max}}", "success": "Success", "successTitle": "Success", "done": "Done", "hashCopied": "Hash copied to clipboard", "bridged": "Bridged", "transferTitle": "Transfer", "hash": "Hash", "layerzeroScan": "TxHash", "finalFee": "Final Fee", "route": "Route", "routeTooltip": "Route is the path your transfer takes between networks. The bridge is powered by LayerZero, and the specific path can affect the fee, slippage, and estimated time.", "estTime": "Est. Time", "estTimeTooltip": "Estimated time is the approximate completion time. It depends on the route and network load; actual time may vary.", "slippage": "Slippage", "slippageTooltip": "If the received amount goes below this tolerance, the transaction will be reverted.", "minimumReceived": "Minimum received", "totalFee": "Total Fee", "totalFeeTooltip": "Total fee is the estimated total cost of the transfer. It includes network gas and bridge/route fees. The final fee may vary slightly.", "noRouteFound": "No route found", "notEnoughGas": "Not enough gas", "pasteAddressToTransfer": "Paste address to transfer", "noRouteFoundForSettings": "No route found for current settings.", "tryAdjustSettings": "Try disabling Gas on Destination, or adjust amount/networks.", "quoteError": "Quote error", "steps": { "sent": "Sent", "approving": "Approving Token", "approvingNote": "Step {{current}} of {{total}}: Confirm approval in wallet", "bridging": "Bridging", "processing": "Processing", "processingNote": "Up to 2 minutes", "completed": "Completed" } };
+const transaction$1 = { "enterAmount": "Enter amount", "transfer": "Transfer", "getQuote": "Get quote", "failed": "Transaction Failed", "confirm": "Confirm transaction", "signTransaction": "Sign in transaction in wallet", "quoting": "Quoting...", "inProgress": "Transaction in progress...", "checkingBalance": "Checking balance...", "insufficientBalance": "Insufficient balance", "amountTooSmall": "Min {{min}}", "amountTooLarge": "Max {{max}}", "success": "Success", "successTitle": "Success", "done": "Done", "hashCopied": "Hash copied to clipboard", "bridged": "Bridged", "transferTitle": "Transfer", "hash": "Hash", "layerzeroScan": "TxHash", "finalFee": "Final Fee", "route": "Route", "routeTooltip": "Route is the path your transfer takes between networks. The bridge is powered by LayerZero, and the specific path can affect the fee, slippage, and estimated time.", "estTime": "Est. Time", "estTimeTooltip": "Estimated time is the approximate completion time. It depends on the route and network load; actual time may vary.", "slippage": "Slippage", "slippageTooltip": "If the received amount goes below this tolerance, the transaction will be reverted.", "minimumReceived": "Minimum received", "messageFee": "Message Fee", "messageFeeTooltip": "Message fee is the LayerZero cross-chain messaging cost paid to relay your transaction between networks.", "bridgeFee": "Bridge Fee", "bridgeFeeTooltip": "Bridge fee is the difference between the amount you send and the amount you receive, charged by the bridge protocol.", "totalFee": "Total Fee", "totalFeeTooltip": "Total fee is the estimated total cost of the transfer, including message and bridge fees. The final fee may vary slightly.", "gasEstimate": "Gas: {{gas}}", "noRouteFound": "No route found", "notEnoughGas": "Not enough gas", "pasteAddressToTransfer": "Paste address to transfer", "noRouteFoundForSettings": "No route found for current settings.", "tryAdjustSettings": "Try disabling Gas on Destination, or adjust amount/networks.", "quoteError": "Quote error", "steps": { "sent": "Sent", "approving": "Approving Token", "approvingNote": "Step {{current}} of {{total}}: Confirm approval in wallet", "bridging": "Bridging", "processing": "Processing", "processingNote": "Up to 2 minutes", "completed": "Completed" } };
 const telegram$1 = { "openWebVersion": "Open EVAA Web to Bridge", "restrictionMessage": "You can bridge between the chosen networks on EVAA web version" };
 const app$1 = { "stargateWidgetName": "Stargate Bridge Widget", "liveWidget": "Live Widget", "getStarted": "Get Started" };
 const settings$1 = { "title": "Settings", "gasOnDestination": "Gas on destination", "gasOnDestinationTooltip": "Adds the destination network's native token to cover fees for transactions after bridging. Increases the total fee.", "slippageTolerance": "Slippage tolerance", "slippageToleranceTooltip": "If the received amount goes below this tolerance, the transaction will be reverted.", "routePriority": "Route Priority", "routePriorityTooltip": "Select how the bridge chooses a route. Recommended balances options to find the best overall cost. Fastest prioritizes completion speed over everything else.", "highSlippageWarning": "High slippage warning", "gasPresets": { "auto": "Auto", "none": "None", "medium": "Medium", "max": "Max" }, "routePresets": { "fastest": "Fastest", "cheapest": "Cheapest", "recommended": "Recommended" } };
@@ -53,7 +53,7 @@ const en$3 = {
 const common = { "connecting": "Подключение…", "initializing": "Инициализация...", "loading": "Загрузка...", "paste": "вставить", "close": "Закрыть", "zeroPlaceholder": "0", "nativeToken": "Нативный токен" };
 const wallets = { "addTonWallet": "Добавить TON кошелёк", "addEvmWallet": "Добавить EVM кошелёк", "connectTonWallet": "Подключить TON кошелёк", "connectEvmWallet": "Подключить EVM кошелёк", "initializingMetamask": "Инициализация MetaMask SDK...", "initializingTronlink": "Инициализация TronLink...", "failedToConnectTon": "Не удалось подключиться к TON кошельку", "failedToDisconnect": "Не удалось отключиться", "metamaskConnectionError": "Ошибка подключения MetaMask", "failedToConnectMetamask": "Не удалось подключиться к MetaMask", "failedToDisconnectMetamask": "Не удалось отключиться от MetaMask", "selectWallet": "Выберите кошелёк", "tonWallets": "TON", "evmWallets": "EVM", "tronWallets": "TRON", "tonconnect": "TonConnect", "metaMask": "WalletConnect", "walletConnect": "WalletConnect", "tronLink": "TronLink", "addTronWallet": "Добавить Tron кошелёк", "comingSoon": "Скоро", "connected": "ПОДКЛЮЧЕНО", "connectedStatus": "Подключён", "disconnect": "Отключить", "chooseWallet": "Подключите кошелек", "oneWalletPerEnv": "Можно подключить только один кошелёк на окружение.", "connect": "Подключить", "connectTronWallet": "Подключить Tron кошелёк", "connectWallet": "Подключить кошелёк" };
 const bridge = { "max": "Макс", "sourceNetwork": "Исходная сеть", "destinationNetwork": "Целевая сеть", "selectToken": "Выбрать токен", "selectNetwork": "Выбрать сеть", "selectSourceNetwork": "Выбрать исходную сеть", "selectDestinationNetwork": "Выбрать целевую сеть", "searchToken": "Поиск токена", "myTokens": "Мои токены", "allTokens": "Все токены", "search": "Поиск", "select": "Выбрать", "willChangeSourceChain": "Сменит исходную сеть", "willChangeDestinationChain": "Сменит целевую сеть", "willChangeBothChains": "Сменит обе сети", "willChangeSourceNetworkAndToken": "Сменит исходный токен", "noBalancesFound": "Балансы не найдены.", "noResults": "Нет результатов", "tokenNotFound": "Мы не смогли найти токен с таким названием или символом. Пожалуйста, попробуйте снова.", "chainNotFound": "Мы не смогли найти сеть с таким названием. Пожалуйста, попробуйте снова.", "sendToAnotherAddress": "Отправить на другой адрес", "youWillReceive": "Вы получите", "anotherAddressPlaceholder": "Адрес", "addressDoesntMatch": "Адрес не соответствует сети {{network}}", "checkBeforeTransfer": "Проверьте корректность перед переводом" };
-const transaction = { "enterAmount": "Введите сумму", "transfer": "Перевести", "getQuote": "Получить котировку", "quoting": "Расчет котировки...", "failed": "Ошибка транзакции", "confirm": "Подтвердите транзакцию", "signTransaction": "Подпишите транзакцию в кошельке", "inProgress": "Транзакция выполняется...", "checkingBalance": "Проверка баланса...", "insufficientBalance": "Недостаточно средств", "amountTooSmall": "Минимум {{min}}", "amountTooLarge": "Максимум {{max}}", "success": "Успех", "successTitle": "Успех", "done": "Готово", "hashCopied": "Хэш скопирован в буфер обмена", "bridged": "Переведено", "transferTitle": "Перевод", "hash": "Хэш", "layerzeroScan": "TxHash", "finalFee": "Итоговая комиссия", "route": "Маршрут", "routeTooltip": "Маршрут — это путь, по которому будет выполнен перевод. Мост работает на базе LayerZero, а конкретный путь передачи между сетями может влиять на комиссию, проскальзывание и время.", "estTime": "Время", "estTimeTooltip": "Среднее время — примерное время завершения перевода. Зависит от маршрута и нагрузки сети; фактическое время может отличаться.", "slippage": "Проскальзывание", "slippageTooltip": "Если получаемая сумма окажется ниже этого допуска, транзакция будет отклонена.", "minimumReceived": "Минимум к получению", "totalFee": "Общая комиссия", "totalFeeTooltip": "Общая комиссия за перевод. Включает оценку комиссии сети (газ) и комиссии моста/маршрута. Фактическая сумма может немного измениться.", "noRouteFound": "Маршрут не найден", "notEnoughGas": "Недостаточно газа", "pasteAddressToTransfer": "Укажите адрес получателя", "noRouteFoundForSettings": "Маршрут не найден для текущих настроек.", "tryAdjustSettings": "Попробуйте отключить Gas on Destination или измените сумму/сети.", "quoteError": "Ошибка котировки", "steps": { "sent": "Отправлено", "approving": "Одобрение токена", "approvingNote": "Шаг {{current}} из {{total}}: Подтвердите одобрение в кошельке", "bridging": "Перевод через мост", "processing": "Обработка", "processingNote": "До 2 минут", "completed": "Завершено" } };
+const transaction = { "enterAmount": "Введите сумму", "transfer": "Перевести", "getQuote": "Получить котировку", "quoting": "Расчет котировки...", "failed": "Ошибка транзакции", "confirm": "Подтвердите транзакцию", "signTransaction": "Подпишите транзакцию в кошельке", "inProgress": "Транзакция выполняется...", "checkingBalance": "Проверка баланса...", "insufficientBalance": "Недостаточно средств", "amountTooSmall": "Минимум {{min}}", "amountTooLarge": "Максимум {{max}}", "success": "Успех", "successTitle": "Успех", "done": "Готово", "hashCopied": "Хэш скопирован в буфер обмена", "bridged": "Переведено", "transferTitle": "Перевод", "hash": "Хэш", "layerzeroScan": "TxHash", "finalFee": "Итоговая комиссия", "route": "Маршрут", "routeTooltip": "Маршрут — это путь, по которому будет выполнен перевод. Мост работает на базе LayerZero, а конкретный путь передачи между сетями может влиять на комиссию, проскальзывание и время.", "estTime": "Время", "estTimeTooltip": "Среднее время — примерное время завершения перевода. Зависит от маршрута и нагрузки сети; фактическое время может отличаться.", "slippage": "Проскальзывание", "slippageTooltip": "Если получаемая сумма окажется ниже этого допуска, транзакция будет отклонена.", "minimumReceived": "Минимум к получению", "messageFee": "Комиссия сообщения", "messageFeeTooltip": "Комиссия сообщения — стоимость кросс-чейн передачи через LayerZero для ретрансляции транзакции между сетями.", "bridgeFee": "Комиссия моста", "bridgeFeeTooltip": "Комиссия моста — разница между отправленной и полученной суммой, взимаемая протоколом моста.", "totalFee": "Общая комиссия", "totalFeeTooltip": "Общая комиссия за перевод, включая комиссию сообщения и моста. Фактическая сумма может немного измениться.", "gasEstimate": "Газ: {{gas}}", "noRouteFound": "Маршрут не найден", "notEnoughGas": "Недостаточно газа", "pasteAddressToTransfer": "Укажите адрес получателя", "noRouteFoundForSettings": "Маршрут не найден для текущих настроек.", "tryAdjustSettings": "Попробуйте отключить Gas on Destination или измените сумму/сети.", "quoteError": "Ошибка котировки", "steps": { "sent": "Отправлено", "approving": "Одобрение токена", "approvingNote": "Шаг {{current}} из {{total}}: Подтвердите одобрение в кошельке", "bridging": "Перевод через мост", "processing": "Обработка", "processingNote": "До 2 минут", "completed": "Завершено" } };
 const telegram = { "openWebVersion": "Открыть EVAA веб для трансфера", "restrictionMessage": "Трансфер между выбранными сетями доступен только в веб-версии EVAA" };
 const app = { "stargateWidgetName": "Виджет Stargate Bridge", "liveWidget": "Живой виджет", "getStarted": "Начало работы" };
 const settings = { "title": "Настройки", "gasOnDestination": "Газ на назначении", "gasOnDestinationTooltip": "Добавляет нативный токен целевой сети для оплаты комиссий за транзакции после бриджа. Увеличивает общую комиссию.", "slippageTolerance": "Толерантность к проскальзыванию", "slippageToleranceTooltip": "Если получаемая сумма окажется ниже этого допуска, транзакция будет отклонена.", "routePriority": "Приоритет маршрута", "routePriorityTooltip": "Выберите маршрут перевода. Рекомендуемый — подбирает самый выгодный вариант по общей стоимости. Быстрый — выбирает маршрут с приоритетом скорости, даже если это дороже.", "highSlippageWarning": "Высокое проскальзывание", "gasPresets": { "auto": "Авто", "none": "Нет", "medium": "Средний", "max": "Макс" }, "routePresets": { "fastest": "Быстрый", "cheapest": "Дешевый", "recommended": "Рекомендуемый" } };
@@ -2286,62 +2286,6 @@ function lookupTokenMeta(tokens, chains, chainKey, tokenAddr) {
     priceUsd: void 0
   };
 }
-function computeFeesUsdFromArray(fees, tokens, chains) {
-  const emptyResult = {
-    usd: /* @__PURE__ */ new Map(),
-    human: /* @__PURE__ */ new Map(),
-    original: void 0
-  };
-  if (!fees?.length) return emptyResult;
-  let totalUsd = 0;
-  const byTypeUsd = /* @__PURE__ */ new Map();
-  const byTypeHuman = /* @__PURE__ */ new Map();
-  for (const f4 of fees) {
-    let usd = Number(f4.usd ?? 0);
-    let human = 0;
-    const amount = String(f4.amount ?? "0");
-    if (!usd) {
-      const { decimals, priceUsd } = lookupTokenMeta(
-        tokens,
-        chains,
-        f4.chainKey,
-        f4.token
-      );
-      human = fromLD(amount, decimals);
-      usd = (priceUsd ?? 0) * human;
-    }
-    totalUsd += usd;
-    const type = (f4.type ?? "other").toLowerCase();
-    byTypeUsd.set(type, (byTypeUsd.get(type) ?? 0) + usd);
-    const existing = byTypeHuman.get(type);
-    if (existing) {
-      existing.amount += human;
-    } else {
-      byTypeHuman.set(type, {
-        amount: human,
-        token: f4.token,
-        chainKey: f4.chainKey
-      });
-    }
-  }
-  byTypeUsd.set("total", totalUsd);
-  return {
-    usd: byTypeUsd,
-    human: byTypeHuman,
-    original: fees
-  };
-}
-function sumFeeByTokenLD(fees, dstTokenAddr, dstChainKey) {
-  if (!fees?.length || !dstTokenAddr || !dstChainKey) return "0";
-  let acc = 0n;
-  for (const f4 of fees) {
-    if (f4.chainKey !== dstChainKey) continue;
-    const same = dstChainKey === "ton" ? tonNorm(f4.token) === tonNorm(dstTokenAddr) : lower(f4.token) === lower(dstTokenAddr);
-    if (!same) continue;
-    acc += BigInt(f4.amount ?? "0");
-  }
-  return acc.toString();
-}
 function getQuoteAmounts(quote, srcToken, dstToken) {
   if (!quote || !srcToken || !dstToken) {
     return {
@@ -2362,48 +2306,6 @@ function getQuoteAmounts(quote, srcToken, dstToken) {
     minReceivedHuman
   };
 }
-function getQuoteFees(quote, tokens, chains, srcToken, dstToken) {
-  if (!quote || !tokens || !chains) {
-    return {
-      fees: { usd: /* @__PURE__ */ new Map(), original: /* @__PURE__ */ new Map(), formatted: /* @__PURE__ */ new Map() },
-      inSrcToken: void 0,
-      inDstToken: void 0
-    };
-  }
-  const feeData = computeFeesUsdFromArray(quote.fees, tokens, chains);
-  let inSrcToken = void 0;
-  let inDstToken = void 0;
-  if (srcToken && quote.srcChainKey) {
-    const feeInSrcLD = sumFeeByTokenLD(
-      quote.fees,
-      srcToken.address,
-      quote.srcChainKey
-    );
-    const feeInSrcHuman = fromLD(feeInSrcLD, srcToken.decimals);
-    if (feeInSrcHuman > 0) {
-      inSrcToken = Number(truncateToDecimals(feeInSrcHuman, 8));
-    } else if ((feeData.usd.get("total") || 0) > 0 && srcToken.price?.usd) {
-      const feeInSrcApprox = (feeData.usd.get("total") || 0) / srcToken.price.usd;
-      inSrcToken = Number(truncateToDecimals(feeInSrcApprox, 8));
-    }
-  }
-  if (dstToken && quote.dstChainKey) {
-    const feeInDstLD = sumFeeByTokenLD(
-      quote.fees,
-      dstToken.address,
-      quote.dstChainKey
-    );
-    const feeInDstHuman = fromLD(feeInDstLD, dstToken.decimals);
-    if (feeInDstHuman > 0) {
-      inDstToken = Number(truncateToDecimals(feeInDstHuman, 8));
-    }
-  }
-  return {
-    fees: feeData,
-    inSrcToken,
-    inDstToken
-  };
-}
 function calculateMinReceived(quote, slippageBps, dstToken) {
   if (!quote || !dstToken) return 0;
   const dstAmountLD = BigInt(quote.dstAmount);
@@ -2412,7 +2314,7 @@ function calculateMinReceived(quote, slippageBps, dstToken) {
 }
 function getQuoteDetails(quote, srcToken, dstToken, tokens, chains, slippageBps) {
   const amounts = getQuoteAmounts(quote, srcToken, dstToken);
-  const fees = getQuoteFees(quote, tokens, chains, srcToken, dstToken);
+  const fees = computeFeeBreakdownUsd(quote, srcToken, tokens, chains);
   const minimumReceived = calculateMinReceived(quote, slippageBps, dstToken);
   return {
     inputAmount: amounts.inputHuman,
@@ -2432,6 +2334,28 @@ function getRouteDisplayName(route) {
   if (routeLower.includes("v2")) return "Stargate V2";
   return route.split(/[/\-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
 }
+function computeFeeBreakdownUsd(quote, srcToken, tokens, chains) {
+  const empty = { messageFeeUsd: 0, bridgeFeeUsd: 0, totalFeeUsd: 0 };
+  if (!quote || !srcToken) return empty;
+  let messageFeeUsd = 0;
+  const messageFees = quote.fees.filter((f4) => f4.type === "message");
+  for (const f4 of messageFees) {
+    const { decimals, priceUsd } = lookupTokenMeta(tokens, chains, f4.chainKey, f4.token);
+    const human = fromLD(f4.amount || "0", decimals);
+    messageFeeUsd += human * (priceUsd ?? 0);
+  }
+  let bridgeFeeUsd = 0;
+  if (srcToken.price?.usd) {
+    const srcHuman = fromLD(quote.srcAmount, srcToken.decimals);
+    const dstHuman = fromLD(quote.dstAmount, srcToken.decimals);
+    const diff = srcHuman - dstHuman;
+    if (diff > 0) {
+      bridgeFeeUsd = diff * srcToken.price.usd;
+    }
+  }
+  const totalFeeUsd = messageFeeUsd + bridgeFeeUsd;
+  return { messageFeeUsd, bridgeFeeUsd, totalFeeUsd };
+}
 async function addNetworkFeesToQuote(quote, chainRegistry, chains) {
   if (!quote || !chains) {
     return quote;
@@ -2937,79 +2861,18 @@ const TokenSymbol = ({
   const src2 = `${BASE_URL}/${normalizedSymbol}.svg`;
   return /* @__PURE__ */ jsxRuntime.jsx("img", { src: src2, alt: alt ?? symbol, className });
 };
-function useGasEstimate(amountNum) {
-  const { fromChain } = useChainsStore();
-  const { selectedAssetSymbol } = useTokensStore();
-  const { srcAddress } = useAddresses();
-  const { balances, isLoading: balancesLoading } = useBalances(
-    fromChain?.chainKey,
-    srcAddress
-  );
+function useFeeBreakdown() {
   const { quote } = useBridgeQuoteStore();
-  const balancesKnown = !balancesLoading;
-  const chainKey = fromChain?.chainKey;
-  const nativeCurrencySymbol = fromChain?.nativeCurrency?.symbol;
-  const nativeCurrencyAddress = fromChain?.nativeCurrency?.address;
-  const nativeCurrencyDecimals = fromChain?.nativeCurrency?.decimals;
-  const quoteFees = quote?.fees;
-  const quoteSrcChainKey = quote?.srcChainKey;
-  const nativeBalanceValue = nativeCurrencySymbol ? Number(balances[nativeCurrencySymbol.toUpperCase()]?.balance ?? 0) : 0;
-  const result = react.useMemo(() => {
-    if (!chainKey || !nativeCurrencySymbol) {
-      return {
-        nativeSym: "",
-        nativeBalance: 0,
-        requiredNative: 0,
-        balancesKnown,
-        isNativeSelected: false,
-        hasEnoughGas: true
-      };
-    }
-    const nativeSym = nativeCurrencySymbol.toUpperCase();
-    const nativeBalance = nativeBalanceValue;
-    const isNativeSelected = nativeSym === (selectedAssetSymbol || "").toUpperCase();
-    let requiredNative = 0;
-    let quoteFeesAvailable = false;
-    if (quoteFees && quoteSrcChainKey === chainKey) {
-      const fees = quoteFees;
-      const feesInNative = fees.filter(
-        (f4) => f4.chainKey === chainKey && f4.token === nativeCurrencyAddress
-      ).reduce(
-        (sum, f4) => sum + BigInt(f4.amount || "0"),
-        0n
-      );
-      const decimals = nativeCurrencyDecimals || 18;
-      requiredNative = Number(feesInNative) / Math.pow(10, decimals);
-      quoteFeesAvailable = true;
-    }
-    let hasEnoughGas = true;
-    if (isNativeSelected) {
-      hasEnoughGas = nativeBalance - (amountNum ?? 0) >= requiredNative;
-    } else {
-      hasEnoughGas = nativeBalance >= requiredNative;
-    }
-    const shouldCheckGas = balancesKnown && quoteFeesAvailable;
-    return {
-      nativeSym,
-      nativeBalance,
-      requiredNative,
-      balancesKnown,
-      isNativeSelected,
-      hasEnoughGas: shouldCheckGas ? hasEnoughGas : true
-    };
-  }, [
-    chainKey,
-    nativeCurrencySymbol,
-    nativeCurrencyAddress,
-    nativeCurrencyDecimals,
-    selectedAssetSymbol,
-    quoteFees,
-    quoteSrcChainKey,
-    amountNum,
-    balancesKnown,
-    nativeBalanceValue
-  ]);
-  return result;
+  const { tokens, selectedAssetSymbol, assetMatrix } = useTokensStore();
+  const { fromChain, chains } = useChainsStore();
+  return react.useMemo(() => {
+    const srcToken = resolveTokenOnChainFromMatrix$1(
+      assetMatrix,
+      selectedAssetSymbol,
+      fromChain?.chainKey
+    );
+    return computeFeeBreakdownUsd(quote, srcToken, tokens, chains);
+  }, [quote, tokens, chains, selectedAssetSymbol, assetMatrix, fromChain]);
 }
 function useBridgeExternalData(options) {
   const selectedAssetSymbol = useTokensStore(
@@ -3149,7 +3012,7 @@ const Details = () => {
   const { selectedAssetSymbol } = useTokensStore();
   const { quote, status } = useBridgeQuoteStore();
   const { slippageBps } = useSettingsStore();
-  const gas = useGasEstimate();
+  const fees = useFeeBreakdown();
   const bridgeData = useBridgeExternalData();
   const symbol = (selectedAssetSymbol ?? bridgeData.dstToken?.symbol ?? "—").toUpperCase();
   const isLoading = status === "loading";
@@ -3158,7 +3021,9 @@ const Details = () => {
     1,
     Math.round(bridgeData.quoteDetails?.etaSeconds / 60)
   )}m` : "—";
-  const totalFeeDisplay = !quote ? "—" : gas.requiredNative > 0 ? `${truncateToDecimals(gas.requiredNative, 6)} ${gas.nativeSym}` : "—";
+  const messageFeeDisplay = !quote ? "—" : formatUsd(fees.messageFeeUsd);
+  const bridgeFeeDisplay = !quote ? "—" : formatUsd(fees.bridgeFeeUsd);
+  const totalFeeDisplay = !quote ? "—" : formatUsd(fees.totalFeeUsd);
   const currentSlippageText = !quote ? "—" : formatPercentage(slippageBps);
   const routeText = getRouteDisplayName(quote?.route);
   return /* @__PURE__ */ jsxRuntime.jsx(accordion.Accordion, { type: "single", collapsible: true, className: "w-full border-none", children: /* @__PURE__ */ jsxRuntime.jsxs(accordion.AccordionItem, { value: "item-1", className: "bg-muted rounded-sm", children: [
@@ -3199,22 +3064,30 @@ const Details = () => {
           value: currentSlippageText
         }
       ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DetailsRow,
+        {
+          label: t2("transaction.messageFee"),
+          tooltip: t2("transaction.messageFeeTooltip"),
+          value: messageFeeDisplay,
+          isLoading
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        DetailsRow,
+        {
+          label: t2("transaction.bridgeFee"),
+          tooltip: t2("transaction.bridgeFeeTooltip"),
+          value: bridgeFeeDisplay,
+          isLoading
+        }
+      ),
       /* @__PURE__ */ jsxRuntime.jsx(
         DetailsRow,
         {
           label: t2("transaction.totalFee"),
           tooltip: t2("transaction.totalFeeTooltip"),
-          value: /* @__PURE__ */ jsxRuntime.jsxs("strong", { className: "inline-flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: totalFeeDisplay }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              TokenSymbol,
-              {
-                symbol: gas.nativeSym,
-                className: "w-4 h-4",
-                alt: "token"
-              }
-            )
-          ] }),
+          value: /* @__PURE__ */ jsxRuntime.jsx("strong", { children: totalFeeDisplay }),
           isLoading
         }
       )
@@ -3608,6 +3481,93 @@ async function reportBridgeTransaction(params, config) {
     };
   }
 }
+function useGasEstimate(amountNum) {
+  const { fromChain } = useChainsStore();
+  const { selectedAssetSymbol } = useTokensStore();
+  const { srcAddress } = useAddresses();
+  const { balances, isLoading: balancesLoading } = useBalances(
+    fromChain?.chainKey,
+    srcAddress
+  );
+  const { quote } = useBridgeQuoteStore();
+  const balancesKnown = !balancesLoading;
+  const chainKey = fromChain?.chainKey;
+  const nativeCurrencySymbol = fromChain?.nativeCurrency?.symbol;
+  const nativeCurrencyAddress = fromChain?.nativeCurrency?.address;
+  const nativeCurrencyDecimals = fromChain?.nativeCurrency?.decimals;
+  const quoteFees = quote?.fees;
+  const quoteSrcChainKey = quote?.srcChainKey;
+  const nativeBalanceValue = nativeCurrencySymbol ? Number(balances[nativeCurrencySymbol.toUpperCase()]?.balance ?? 0) : 0;
+  const result = react.useMemo(() => {
+    if (!chainKey || !nativeCurrencySymbol) {
+      return {
+        nativeSym: "",
+        nativeBalance: 0,
+        requiredNative: 0,
+        gasOnlyNative: 0,
+        gasDisplayText: "",
+        balancesKnown,
+        isNativeSelected: false,
+        hasEnoughGas: true
+      };
+    }
+    const nativeSym = nativeCurrencySymbol.toUpperCase();
+    const nativeBalance = nativeBalanceValue;
+    const isNativeSelected = nativeSym === (selectedAssetSymbol || "").toUpperCase();
+    let requiredNative = 0;
+    let quoteFeesAvailable = false;
+    let gasOnlyNative = 0;
+    if (quoteFees && quoteSrcChainKey === chainKey) {
+      const fees = quoteFees;
+      const feesInNative = fees.filter(
+        (f4) => f4.chainKey === chainKey && f4.token === nativeCurrencyAddress
+      ).reduce(
+        (sum, f4) => sum + BigInt(f4.amount || "0"),
+        0n
+      );
+      const decimals = nativeCurrencyDecimals || 18;
+      requiredNative = Number(feesInNative) / Math.pow(10, decimals);
+      const networkFeesInNative = fees.filter(
+        (f4) => f4.chainKey === chainKey && f4.token === nativeCurrencyAddress && f4.type === "network"
+      ).reduce(
+        (sum, f4) => sum + BigInt(f4.amount || "0"),
+        0n
+      );
+      gasOnlyNative = Number(networkFeesInNative) / Math.pow(10, decimals);
+      quoteFeesAvailable = true;
+    }
+    let hasEnoughGas = true;
+    if (isNativeSelected) {
+      hasEnoughGas = nativeBalance - (amountNum ?? 0) >= requiredNative;
+    } else {
+      hasEnoughGas = nativeBalance >= requiredNative;
+    }
+    const shouldCheckGas = balancesKnown && quoteFeesAvailable;
+    const gasDisplayText = gasOnlyNative > 0 ? `~${gasOnlyNative.toFixed(6).replace(/0+$/, "").replace(/\.$/, "")} ${nativeSym}` : "";
+    return {
+      nativeSym,
+      nativeBalance,
+      requiredNative,
+      gasOnlyNative,
+      gasDisplayText,
+      balancesKnown,
+      isNativeSelected,
+      hasEnoughGas: shouldCheckGas ? hasEnoughGas : true
+    };
+  }, [
+    chainKey,
+    nativeCurrencySymbol,
+    nativeCurrencyAddress,
+    nativeCurrencyDecimals,
+    selectedAssetSymbol,
+    quoteFees,
+    quoteSrcChainKey,
+    amountNum,
+    balancesKnown,
+    nativeBalanceValue
+  ]);
+  return result;
+}
 function useBridgeTransaction() {
   const { quote } = useBridgeQuoteStore();
   const { chainRegistry } = useChainStrategies();
@@ -4138,7 +4098,8 @@ const MainButton = ({
         className: "w-full",
         children: label
       }
-    )
+    ),
+    gas.gasDisplayText && quote && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center", children: t2("transaction.gasEstimate", { gas: gas.gasDisplayText }) })
   ] });
 };
 const WalletModalButton = (props) => {
@@ -25783,7 +25744,7 @@ class WalletConnectModal {
   }
   async initUi() {
     if (typeof window !== "undefined") {
-      await Promise.resolve().then(() => require("./index-DgvHCFl2.cjs"));
+      await Promise.resolve().then(() => require("./index-Dda0d9GW.cjs"));
       const modal = document.createElement("wcm-modal");
       document.body.insertAdjacentElement("beforeend", modal);
       OptionsCtrl.setIsUiLoaded(true);
@@ -26575,7 +26536,7 @@ exports.addNetworkFeesToQuote = addNetworkFeesToQuote;
 exports.addrForApi = addrForApi;
 exports.buildAssetMatrix = buildAssetMatrix;
 exports.calculateMinReceived = calculateMinReceived;
-exports.computeFeesUsdFromArray = computeFeesUsdFromArray;
+exports.computeFeeBreakdownUsd = computeFeeBreakdownUsd;
 exports.findNativeMeta = findNativeMeta;
 exports.formatAddress = formatAddress;
 exports.formatBalance = formatBalance;
@@ -26591,7 +26552,6 @@ exports.getDestTokens = getDestTokens;
 exports.getEvmBalances = getEvmBalances;
 exports.getQuoteAmounts = getQuoteAmounts;
 exports.getQuoteDetails = getQuoteDetails;
-exports.getQuoteFees = getQuoteFees;
 exports.getQuotesByPriority = getQuotesByPriority;
 exports.getRouteDisplayName = getRouteDisplayName;
 exports.getTokens = getTokens;
@@ -26607,7 +26567,6 @@ exports.pollUntilDelivered = pollUntilDelivered;
 exports.reportBridgeTransaction = reportBridgeTransaction;
 exports.resolveTokenOnChain = resolveTokenOnChain;
 exports.resolveTokenOnChainFromMatrix = resolveTokenOnChainFromMatrix$1;
-exports.sumFeeByTokenLD = sumFeeByTokenLD;
 exports.toLD = toLD;
 exports.tonNorm = tonNorm;
 exports.truncateToDecimals = truncateToDecimals;
@@ -26620,4 +26579,4 @@ exports.useSettingsStore = useSettingsStore;
 exports.useSwapModel = useSwapModel;
 exports.useTokensStore = useTokensStore;
 exports.useTransactionStore = useTransactionStore;
-//# sourceMappingURL=index-BC-9ZbF7.cjs.map
+//# sourceMappingURL=index-Db2959hv.cjs.map