@rash2x/bridge-widget 0.6.35 → 0.6.37

package/dist/{index-BXp-N4UF.cjs → index-DLEm1SpB.cjs}

@@ -499,6 +499,7 @@ const useTronWalletConnectStore = zustand.create(
     isConnecting: false,
     connect: null,
     disconnect: null,
+    cancelConnection: null,
     signTransaction: null,
     setAddress: (address) => set2({
       address,
@@ -508,6 +509,7 @@ const useTronWalletConnectStore = zustand.create(
     setActions: (actions) => set2({
       connect: actions.connect,
       disconnect: actions.disconnect,
+      cancelConnection: actions.cancelConnection,
       signTransaction: actions.signTransaction
     }),
     reset: () => set2({
@@ -2642,7 +2644,7 @@ const ChainSelectModal = ({
       chain2.chainKey
     );
   };
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-h-[90dvh] h-[90dvh] overflow-hidden flex flex-col p-10 pt-7", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "md:max-h-[90dvh] md:h-[90dvh] fixed top-0 left-0 right-0 bottom-0 overflow-hidden flex flex-col p-10 pt-7", children: [
     /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { className: "text-left pb-0", children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "text-xl leading-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-0", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: t2("bridge.select") }),
       /* @__PURE__ */ jsxRuntime.jsx("div", { children: t2(isSource ? "bridge.sourceNetwork" : "bridge.destinationNetwork") })
@@ -2656,7 +2658,7 @@ const ChainSelectModal = ({
         className: "text-foreground placeholder:text-muted-foreground"
       }
     ),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 overflow-y-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-muted-foreground/20 [&::-webkit-scrollbar-thumb]:rounded-full hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/30", children: [
       groupedChains.available.length > 0 && groupedChains.available.map((c2) => renderChainItem(c2, false)),
       groupedChains.willChangeSrc.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -3150,7 +3152,7 @@ function getSimpleFallback(chainKey) {
   const key = chainKey.toLowerCase();
   if (key === "ton") return 0.15;
   if (key === "tron") return 10;
-  return 0.01;
+  return 2e-3;
 }
 function useGasEstimate(amountNum) {
   const { fromChain } = useChainsStore();
@@ -3184,6 +3186,7 @@ function useGasEstimate(amountNum) {
     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(
@@ -3194,6 +3197,7 @@ function useGasEstimate(amountNum) {
       );
       const decimals = nativeCurrencyDecimals || 18;
       requiredNative = Number(feesInNative) / Math.pow(10, decimals);
+      quoteFeesAvailable = true;
     } else {
       requiredNative = getSimpleFallback(chainKey);
     }
@@ -3203,13 +3207,14 @@ function useGasEstimate(amountNum) {
     } else {
       hasEnoughGas = nativeBalance >= requiredNative;
     }
+    const shouldCheckGas = balancesKnown && quoteFeesAvailable;
     return {
       nativeSym,
       nativeBalance,
       requiredNative,
       balancesKnown,
       isNativeSelected,
-      hasEnoughGas: balancesKnown ? hasEnoughGas : true
+      hasEnoughGas: shouldCheckGas ? hasEnoughGas : true
     };
   }, [
     chainKey,
@@ -3763,11 +3768,9 @@ function useBridgeTransaction() {
                 );
                 feeSymbol = srcChain2?.nativeCurrency?.symbol || "";
               }
-              if (feeSymbol) {
-                const feeValue = parseFloat(result.actualFeeValue);
-                if (!isNaN(feeValue)) {
-                  txStore.updateActualFee(feeValue, feeSymbol);
-                }
+              const feeValue = parseFloat(result.actualFeeValue);
+              if (!isNaN(feeValue)) {
+                txStore.updateActualFee(feeValue, feeSymbol);
               }
             }
             txStore.updateStatus("completed");
@@ -3785,15 +3788,19 @@ function useBridgeTransaction() {
             txStore.setError("COMPLETION_TRACKING_FAILED");
           }
           console.error("Error tracking completion:", err);
+        }).finally(() => {
+          setIsProcessing(false);
         });
+        return txResult;
       } else {
+        setIsProcessing(false);
         throw new TransactionFailedError(
           chainKey,
           "Transaction hash not received from wallet"
         );
       }
-      return txResult;
     } catch (err) {
+      setIsProcessing(false);
       if (isUserRejection(err)) {
         txStore.setError("TRANSACTION_REJECTED");
         throw new TransactionFailedError(
@@ -3809,8 +3816,6 @@ function useBridgeTransaction() {
       console.log(err);
       txStore.setError("UNKNOWN_ERROR");
       throw err;
-    } finally {
-      setIsProcessing(false);
     }
   };
   return {
@@ -4315,7 +4320,7 @@ const WalletSelectModal = () => {
     }
     return a2.order - b2.order;
   });
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "p-10 pt-7", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 p-10 pt-7", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogHeader, { className: "text-left", children: [
       /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "text-2xl leading-8", children: t2("wallets.chooseWallet") }),
       /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogDescription, { children: t2("wallets.oneWalletPerEnv") })
@@ -4548,67 +4553,114 @@ const SuccessStep = ({
 }) => {
   const { current, reset } = useTransactionStore();
   const { t: t2 } = useBridgeTranslation();
+  const { chains } = useChainsStore();
   const metadata = current?.metadata;
   const srcTxHash = current?.srcTxHash;
   const srcChainKey = current?.quote?.srcChainKey;
+  const quote = current?.quote;
+  const estimatedFee = react.useMemo(() => {
+    if (!quote?.fees || !srcChainKey || !chains) return null;
+    const srcChain = chains.find((c2) => c2.chainKey === srcChainKey);
+    if (!srcChain) return null;
+    const nativeCurrencyAddress = srcChain.nativeCurrency.address;
+    const nativeCurrencyDecimals = srcChain.nativeCurrency.decimals;
+    const nativeCurrencySymbol = srcChain.nativeCurrency.symbol;
+    const feesInNative = quote.fees.filter(
+      (f4) => f4.chainKey === srcChainKey && f4.token === nativeCurrencyAddress
+    ).reduce((sum, f4) => sum + BigInt(f4.amount || "0"), 0n);
+    if (feesInNative === 0n) return null;
+    const feeValue = Number(feesInNative) / Math.pow(10, nativeCurrencyDecimals);
+    return {
+      value: feeValue,
+      symbol: nativeCurrencySymbol
+    };
+  }, [quote, srcChainKey, chains]);
+  const finalFee = react.useMemo(() => {
+    if (metadata?.actualFeeValue !== void 0 && metadata?.actualFeeSymbol) {
+      return {
+        value: metadata.actualFeeValue,
+        symbol: metadata.actualFeeSymbol
+      };
+    }
+    return estimatedFee;
+  }, [metadata?.actualFeeValue, metadata?.actualFeeSymbol, estimatedFee]);
   const handleOpenExplorer = () => {
     if (srcTxHash && srcChainKey) {
       openTransactionInExplorer(srcChainKey, srcTxHash);
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { showCloseButton: true, className: "overflow-hidden md:max-w-[420px] p-10", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 flex-1 justify-start items-center text-center bg-background", children: [
-      icon,
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 pb-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { children: t2("transaction.success") }) }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-2 mt-4 relative z-10 pb-14", children: [
-        metadata?.srcAmountHuman && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: t2("transaction.bridged") }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 font-medium", children: [
-            formatBalance(metadata.srcAmountHuman, 2),
-            " ",
-            metadata?.srcTokenSymbol,
-            /* @__PURE__ */ jsxRuntime.jsx(TokenSymbol, { symbol: metadata?.srcTokenSymbol })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: t2("transaction.transferTitle") }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium space-x-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex gap-1 items-center", children: [
-              metadata?.srcChainName,
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx(NetworkSymbol, { chainKey: metadata.srcChainName })
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    dialog.DialogContent,
+    {
+      showCloseButton: true,
+      className: "overflow-hidden md:max-w-[420px] p-10",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 flex-1 justify-start items-center text-center bg-background", children: [
+          icon,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "text-[28px]", children: t2("transaction.success") }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full space-y-2 mt-3 relative z-10 pb-14", children: [
+            metadata?.srcAmountHuman && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: t2("transaction.bridged") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1 font-medium", children: [
+                formatBalance(metadata.srcAmountHuman, 2),
+                " ",
+                metadata?.srcTokenSymbol,
+                /* @__PURE__ */ jsxRuntime.jsx(TokenSymbol, { className: "w-[18px] h-[18px]", symbol: metadata?.srcTokenSymbol })
+              ] })
             ] }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "→" }),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex gap-1 items-center", children: [
-              metadata?.dstChainName,
-              " ",
-              /* @__PURE__ */ jsxRuntime.jsx(NetworkSymbol, { chainKey: metadata.dstChainName })
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: t2("transaction.transferTitle") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium flex gap-1 items-center", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex gap-1 items-center", children: [
+                  metadata?.srcChainName,
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    NetworkSymbol,
+                    {
+                      className: "w-[18px] h-[18px] rounded-full",
+                      chainKey: metadata.srcChainName
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ArrowRight, { className: "text-muted-foreground/50 size-4" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex gap-1 items-center", children: [
+                  metadata?.dstChainName,
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    NetworkSymbol,
+                    {
+                      className: "w-[18px] h-[18px] rounded-full",
+                      chainKey: metadata.dstChainName
+                    }
+                  )
+                ] })
+              ] })
+            ] }),
+            srcTxHash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: t2("transaction.hash") }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "button",
+                {
+                  onClick: handleOpenExplorer,
+                  className: "font-medium cursor-pointer inline-flex items-center gap-1 underline hover:no-underline",
+                  children: formatHash(srcTxHash)
+                }
+              )
+            ] }),
+            finalFee && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: t2("transaction.finalFee") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
+                formatBalance(finalFee.value, 6),
+                " ",
+                finalFee.symbol
+              ] })
             ] })
           ] })
         ] }),
-        srcTxHash && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: t2("transaction.hash") }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
-            {
-              onClick: handleOpenExplorer,
-              className: "font-medium cursor-pointer inline-flex items-center gap-1 underline hover:no-underline",
-              children: formatHash(srcTxHash)
-            }
-          )
-        ] }),
-        metadata?.actualFeeValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex justify-between items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: t2("transaction.finalFee") }),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-            metadata.actualFeeValue,
-            " ",
-            metadata.actualFeeSymbol
-          ] })
-        ] })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: reset, className: "w-full", children: t2("transaction.done") }) })
-  ] });
+        /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogFooter, { children: /* @__PURE__ */ jsxRuntime.jsx(button.Button, { onClick: reset, className: "w-full", children: t2("transaction.done") }) })
+      ]
+    }
+  );
 };
 const useCountdown = (initialSeconds) => {
   const [time2, setTime] = react.useState(initialSeconds);
@@ -6622,7 +6674,7 @@ const SettingsModal = ({ isOpen, onClose }) => {
     dialog.DialogContent,
     {
       onOpenAutoFocus: (e2) => e2.preventDefault(),
-      className: "p-10 pt-7",
+      className: "flex flex-col fixed top-0 left-0 right-0 bottom-0 p-10 pt-7",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "text-2xl leading-8", children: t2("settings.title") }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
@@ -6938,7 +6990,6 @@ const TokenSelectModal = ({
   react.useLayoutEffect(() => {
     const updateHeight = () => {
       const container2 = document.getElementById("token-select-list");
-      console.log("CONTAINER", container2);
       if (!container2) return;
       const height = container2.getBoundingClientRect().height;
       if (height > 0) {
@@ -7011,7 +7062,7 @@ const TokenSelectModal = ({
     },
     [effectiveTab, virtualItems]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "max-h-[90dvh] h-[90dvh] overflow-hidden flex flex-col p-10 pt-7", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(dialog.Dialog, { open: isOpen, onOpenChange: (open) => !open && handleClose(), children: /* @__PURE__ */ jsxRuntime.jsxs(dialog.DialogContent, { className: "md:max-h-[90dvh] md:h-[90dvh] overflow-hidden flex flex-col fixed top-0 left-0 right-0 bottom-0 p-10 pt-7", children: [
     /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogHeader, { className: "text-left", children: /* @__PURE__ */ jsxRuntime.jsx(dialog.DialogTitle, { className: "text-2xl leading-8", children: t2("bridge.selectToken") }) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       SearchInput,
@@ -25915,7 +25966,7 @@ class WalletConnectModal {
   }
   async initUi() {
     if (typeof window !== "undefined") {
-      await Promise.resolve().then(() => require("./index-DJbbVeMD.cjs"));
+      await Promise.resolve().then(() => require("./index-BdVobQxB.cjs"));
       const modal = document.createElement("wcm-modal");
       document.body.insertAdjacentElement("beforeend", modal);
       OptionsCtrl.setIsUiLoaded(true);
@@ -25960,11 +26011,13 @@ const useThemeStore = zustand.create((set2) => ({
   }
 }));
 const TRON_MAINNET_CHAIN_ID = "tron:0x2b6653dc";
+const CONNECTION_TIMEOUT = 6e4;
 function useTronWalletConnect(projectId) {
   const { address, isConnected, isConnecting } = useTronWalletConnectStore();
   const { setAddress, setIsConnecting, setActions, reset } = useTronWalletConnectStore();
   const providerRef = react.useRef(null);
   const modalRef = react.useRef(null);
+  const abortControllerRef = react.useRef(null);
   const { onClose: closeWalletSelectModal } = useWalletSelectModal();
   const appliedTheme = useThemeStore((state2) => state2.appliedTheme);
   react.useEffect(() => {
@@ -26027,6 +26080,9 @@ function useTronWalletConnect(projectId) {
     };
     initProvider();
     return () => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+      }
       if (providerRef.current) {
         providerRef.current.disconnect();
       }
@@ -26053,9 +26109,14 @@ function useTronWalletConnect(projectId) {
         "WalletConnect not initialized. Please provide a valid project ID."
       );
     }
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+    abortControllerRef.current = new AbortController();
+    const abortController = abortControllerRef.current;
     setIsConnecting(true);
     try {
-      const session = await providerRef.current.connect({
+      const connectionPromise = providerRef.current.connect({
         namespaces: {
           tron: {
             methods: ["tron_signTransaction", "tron_signMessage"],
@@ -26064,6 +26125,19 @@ function useTronWalletConnect(projectId) {
           }
         }
       });
+      const timeoutPromise = new Promise((_3, reject) => {
+        const timeoutId = setTimeout(() => {
+          reject(new Error("Connection timeout - please try again"));
+        }, CONNECTION_TIMEOUT);
+        abortController.signal.addEventListener("abort", () => {
+          clearTimeout(timeoutId);
+          reject(new Error("Connection cancelled"));
+        });
+      });
+      const session = await Promise.race([connectionPromise, timeoutPromise]);
+      if (abortController.signal.aborted) {
+        throw new Error("Connection cancelled");
+      }
       if (session) {
         const accounts = session.namespaces?.tron?.accounts || [];
         if (accounts.length > 0) {
@@ -26088,8 +26162,18 @@ function useTronWalletConnect(projectId) {
       throw error;
     } finally {
       setIsConnecting(false);
+      abortControllerRef.current = null;
     }
   }, [setAddress, setIsConnecting]);
+  const cancelConnection = react.useCallback(() => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      console.log("TRON WalletConnect connection cancelled");
+    }
+    if (modalRef.current) {
+      modalRef.current.closeModal();
+    }
+  }, []);
   const disconnect = react.useCallback(async () => {
     if (!providerRef.current) return;
     try {
@@ -26126,15 +26210,17 @@ function useTronWalletConnect(projectId) {
     setActions({
       connect,
       disconnect,
+      cancelConnection,
       signTransaction
     });
-  }, [connect, disconnect, signTransaction, setActions]);
+  }, [connect, disconnect, cancelConnection, signTransaction, setActions]);
   return {
     address,
     isConnected,
     isConnecting,
     connect,
     disconnect,
+    cancelConnection,
     signTransaction
   };
 }
@@ -26637,4 +26723,4 @@ exports.useSettingsStore = useSettingsStore;
 exports.useSwapModel = useSwapModel;
 exports.useTokensStore = useTokensStore;
 exports.useTransactionStore = useTransactionStore;
-//# sourceMappingURL=index-BXp-N4UF.cjs.map
+//# sourceMappingURL=index-DLEm1SpB.cjs.map