@trustware/sdk-staging 1.1.3-staging.20 → 1.1.3-staging.31

package/dist/index.cjs

@@ -69,19 +69,21 @@ var init_config = __esm({
     };
     DEFAULT_FEATURE_FLAGS = {
       tokensPagination: false,
-      balanceStreaming: false
+      balanceStreaming: false,
+      shouldAllowGA4: true
     };
   }
 });
 
 // src/constants.ts
-var SDK_NAME, SDK_VERSION, API_ROOT, API_PREFIX, ASSETS_BASE_URL, WALLETCONNECT_PROJECT_ID;
+var SDK_NAME, SDK_VERSION, API_ROOT, GTM_ID, API_PREFIX, ASSETS_BASE_URL, WALLETCONNECT_PROJECT_ID;
 var init_constants = __esm({
   "src/constants.ts"() {
     "use strict";
     SDK_NAME = "@trustware/sdk";
-    SDK_VERSION = "1.1.3-staging.20";
+    SDK_VERSION = "1.1.3-staging.31";
     API_ROOT = "https://bv-staging-api.trustware.io";
+    GTM_ID = "";
     API_PREFIX = "/api";
     ASSETS_BASE_URL = "https://app.trustware.io";
     WALLETCONNECT_PROJECT_ID = "4ead125c-63be-4b1a-a835-cef2dce67b84";
@@ -173,7 +175,8 @@ function resolveConfig(input) {
   const walletConnect = resolveWalletConnectConfig(input.walletConnect);
   const features = {
     tokensPagination: input.features?.tokensPagination ?? DEFAULT_FEATURE_FLAGS.tokensPagination,
-    balanceStreaming: input.features?.balanceStreaming ?? DEFAULT_FEATURE_FLAGS.balanceStreaming
+    balanceStreaming: input.features?.balanceStreaming ?? DEFAULT_FEATURE_FLAGS.balanceStreaming,
+    shouldAllowGA4: input.features?.shouldAllowGA4 ?? DEFAULT_FEATURE_FLAGS.shouldAllowGA4
   };
   return {
     apiKey: input.apiKey,
@@ -837,8 +840,8 @@ function ConfettiEffect({
   clearDelay = 3e3,
   pieceCount = 50
 }) {
-  const [pieces, setPieces] = (0, import_react19.useState)([]);
-  (0, import_react19.useEffect)(() => {
+  const [pieces, setPieces] = (0, import_react20.useState)([]);
+  (0, import_react20.useEffect)(() => {
     if (isActive) {
       const colors2 = [
         "#10b981",
@@ -914,11 +917,11 @@ function ConfettiEffect({
     }
   );
 }
-var import_react19, import_jsx_runtime6, ConfettiEffect_default;
+var import_react20, import_jsx_runtime6, ConfettiEffect_default;
 var init_ConfettiEffect = __esm({
   "src/widget/components/ConfettiEffect.tsx"() {
     "use strict";
-    import_react19 = require("react");
+    import_react20 = require("react");
     import_jsx_runtime6 = require("react/jsx-runtime");
     ConfettiEffect_default = ConfettiEffect;
   }
@@ -936,6 +939,7 @@ __export(index_exports, {
   DEFAULT_RETRY_CONFIG: () => DEFAULT_RETRY_CONFIG,
   DEFAULT_SLIPPAGE: () => DEFAULT_SLIPPAGE2,
   DEFAULT_THEME: () => DEFAULT_THEME2,
+  GTM_ID: () => GTM_ID,
   IdentityStore: () => IdentityStore,
   RateLimitError: () => RateLimitError,
   SDK_NAME: () => SDK_NAME,
@@ -4278,6 +4282,26 @@ var Trustware = {
     });
     return Trustware;
   },
+  setDestinationChain(chain) {
+    const prev = TrustwareConfigStore.get();
+    TrustwareConfigStore.update({
+      routes: {
+        ...prev.routes,
+        toChain: chain
+      }
+    });
+    return Trustware;
+  },
+  setDestinationToken(token) {
+    const prev = TrustwareConfigStore.get();
+    TrustwareConfigStore.update({
+      routes: {
+        ...prev.routes,
+        toToken: token
+      }
+    });
+    return Trustware;
+  },
   /** Read active wallet */
   getWallet() {
     return walletManager.wallet;
@@ -4320,7 +4344,7 @@ var Trustware = {
 init_http();
 
 // src/widget/TrustwareWidgetV2.tsx
-var import_react38 = require("react");
+var import_react40 = require("react");
 
 // src/widget/lib/utils.ts
 function mergeStyles(...styles) {
@@ -4800,7 +4824,7 @@ var ANIMATION_CLASSES = `
 var ALL_ANIMATION_STYLES = KEYFRAMES + ANIMATION_CLASSES;
 
 // src/widget/context/DepositContext.tsx
-var import_react16 = __toESM(require("react"), 1);
+var import_react17 = __toESM(require("react"), 1);
 
 // src/provider.tsx
 var import_react5 = require("react");
@@ -5049,7 +5073,7 @@ function useWalletSessionState() {
 }
 
 // src/widget/state/deposit/useWalletTokenState.ts
-var import_react15 = require("react");
+var import_react16 = require("react");
 
 // src/widget/hooks/useRouteBuilder.ts
 var import_react10 = require("react");
@@ -5348,7 +5372,8 @@ function useTrustwareConfig() {
         },
         features: {
           tokensPagination: false,
-          balanceStreaming: false
+          balanceStreaming: false,
+          shouldAllowGA4: true
         }
       };
     }
@@ -5552,7 +5577,144 @@ function mapTransactionError(err) {
 }
 
 // src/widget/hooks/useTransactionPolling.ts
+var import_react15 = require("react");
+init_constants();
+
+// src/hooks/useGTM.ts
 var import_react14 = require("react");
+function useGTM(gtmId) {
+  const isInitialized = (0, import_react14.useRef)(false);
+  const scriptRef = (0, import_react14.useRef)(null);
+  const isGA4Allowed = (0, import_react14.useCallback)(() => {
+    try {
+      return Trustware.getConfig().features.shouldAllowGA4;
+    } catch {
+      return false;
+    }
+  }, []);
+  (0, import_react14.useEffect)(() => {
+    if (!isGA4Allowed()) {
+      console.warn(
+        "useGTM: GA4 tracking is disabled or Trustware config not initialized."
+      );
+      return;
+    }
+    if (!gtmId || typeof gtmId !== "string") {
+      console.error(
+        "useGTM: A valid GTM Container ID is required (format: GTM-XXXXX)."
+      );
+      return;
+    }
+    if (isInitialized.current) return;
+    const alreadyLoaded = document.querySelector(
+      `script[src*="googletagmanager.com/gtm.js?id=${gtmId}"]`
+    );
+    if (alreadyLoaded) {
+      window.dataLayer = window.dataLayer || [];
+      isInitialized.current = true;
+      return;
+    }
+    window.dataLayer = window.dataLayer || [];
+    window.dataLayer.push({
+      "gtm.start": (/* @__PURE__ */ new Date()).getTime(),
+      event: "gtm.js"
+    });
+    const firstScript = document.getElementsByTagName("script")[0];
+    const script = document.createElement("script");
+    script.async = true;
+    script.src = `https://www.googletagmanager.com/gtm.js?id=${gtmId}`;
+    firstScript.parentNode?.insertBefore(script, firstScript);
+    scriptRef.current = script;
+    isInitialized.current = true;
+    return () => {
+      if (scriptRef.current) {
+        scriptRef.current.parentNode?.removeChild(scriptRef.current);
+        scriptRef.current = null;
+      }
+      isInitialized.current = false;
+    };
+  }, [gtmId, isGA4Allowed]);
+  const addNoscriptIframe = (0, import_react14.useCallback)(() => {
+    if (!isGA4Allowed()) return;
+    if (document.querySelector('iframe[src*="googletagmanager.com/ns.html"]'))
+      return;
+    const noscript = document.createElement("noscript");
+    const iframe = document.createElement("iframe");
+    iframe.src = `https://www.googletagmanager.com/ns.html?id=${gtmId}`;
+    iframe.height = "0";
+    iframe.width = "0";
+    iframe.style.display = "none";
+    iframe.style.visibility = "hidden";
+    noscript.appendChild(iframe);
+    document.body.insertBefore(noscript, document.body.firstChild);
+  }, [gtmId, isGA4Allowed]);
+  const trackEvent = (0, import_react14.useCallback)(
+    (eventName, eventParams = {}) => {
+      if (!isInitialized.current) {
+        console.warn(
+          "useGTM: Not initialized. Ensure a valid GTM Container ID was provided."
+        );
+        return;
+      }
+      if (!eventName || typeof eventName !== "string") {
+        console.error("useGTM: A valid event name is required.");
+        return;
+      }
+      const payload = { event: eventName, ...eventParams };
+      window.dataLayer.push(payload);
+    },
+    []
+  );
+  const trackPageView = (0, import_react14.useCallback)(
+    (pagePath, pageTitle = document.title) => {
+      trackEvent("page_view", {
+        page_path: pagePath,
+        page_title: pageTitle,
+        page_location: window.location.href
+      });
+    },
+    [trackEvent]
+  );
+  const setUserProperty = (0, import_react14.useCallback)(
+    (propertyName, value) => {
+      if (!isInitialized.current) {
+        console.warn(
+          "useGTM: Not initialized. Ensure a valid GTM Container ID was provided."
+        );
+        return;
+      }
+      const payload = {
+        event: "user_property",
+        user_property_name: propertyName,
+        user_property_value: value
+      };
+      window.dataLayer.push(payload);
+    },
+    []
+  );
+  const directGtag = (0, import_react14.useCallback)(
+    (command, ...args) => {
+      if (!isGA4Allowed()) return;
+      if (!window.gtag) {
+        console.warn(
+          "useGTM: window.gtag is not available. Load gtag.js separately to use this method."
+        );
+        return;
+      }
+      window.gtag(command, ...args);
+    },
+    [isGA4Allowed]
+  );
+  return {
+    trackEvent,
+    trackPageView,
+    setUserProperty,
+    directGtag,
+    addNoscriptIframe
+  };
+}
+
+// src/widget/hooks/useTransactionPolling.ts
 var FAST_POLL_INTERVAL_MS = 1500;
 var NORMAL_POLL_INTERVAL_MS = 2500;
 var POLL_TIMEOUT_MS = 5 * 60 * 1e3;
@@ -5560,19 +5722,28 @@ function useTransactionPolling() {
   const { setCurrentStep } = useDepositNavigation();
   const { setTransactionStatus, setErrorMessage } = useDepositTransaction();
   const { emitSuccess } = useTrustware();
-  const [state, setState] = (0, import_react14.useState)({
+  const { selectedChain, selectedToken } = useDepositForm();
+  const destinationConfig = (() => {
+    try {
+      return Trustware.getConfig();
+    } catch {
+      return void 0;
+    }
+  })();
+  const { trackEvent } = useGTM(GTM_ID);
+  const [state, setState] = (0, import_react15.useState)({
     isPolling: false,
     apiStatus: null,
     error: null,
     transaction: null,
     receiptSubmitted: false
   });
-  const pollingRef = (0, import_react14.useRef)(null);
-  const timeoutRef = (0, import_react14.useRef)(null);
-  const abortRef = (0, import_react14.useRef)(false);
-  const startTimeRef = (0, import_react14.useRef)(0);
-  const pollCountRef = (0, import_react14.useRef)(0);
-  const clearPolling = (0, import_react14.useCallback)(() => {
+  const pollingRef = (0, import_react15.useRef)(null);
+  const timeoutRef = (0, import_react15.useRef)(null);
+  const abortRef = (0, import_react15.useRef)(false);
+  const startTimeRef = (0, import_react15.useRef)(0);
+  const pollCountRef = (0, import_react15.useRef)(0);
+  const clearPolling = (0, import_react15.useCallback)(() => {
     abortRef.current = true;
     if (pollingRef.current) {
       clearTimeout(pollingRef.current);
@@ -5583,7 +5754,7 @@ function useTransactionPolling() {
       timeoutRef.current = null;
     }
   }, []);
-  const startPolling = (0, import_react14.useCallback)(
+  const startPolling = (0, import_react15.useCallback)(
     async (intentId, _txHash) => {
       clearPolling();
       abortRef.current = false;
@@ -5630,6 +5801,13 @@ function useTransactionPolling() {
               }));
               setTransactionStatus("success");
               setCurrentStep("success");
+              trackEvent("payment_completed", {
+                from_chain: selectedChain?.networkName ?? selectedChain?.axelarChainName ?? selectedChain?.chainId ?? "unknown",
+                from_token: selectedToken?.symbol ?? "unknown",
+                to_chain: destinationConfig?.routes?.toChain ?? "unknown",
+                to_token: destinationConfig?.routes?.toToken ?? "unknown",
+                domain: window.origin
+              });
               emitSuccess?.(tx);
               return;
             }
@@ -5692,20 +5870,27 @@ function useTransactionPolling() {
     },
     [
       clearPolling,
+      destinationConfig?.routes.toChain,
+      destinationConfig?.routes.toToken,
       emitSuccess,
-      setTransactionStatus,
+      selectedChain?.axelarChainName,
+      selectedChain?.chainId,
+      selectedChain?.networkName,
+      selectedToken?.symbol,
       setCurrentStep,
-      setErrorMessage
+      setErrorMessage,
+      setTransactionStatus,
+      trackEvent
     ]
   );
-  const stopPolling = (0, import_react14.useCallback)(() => {
+  const stopPolling = (0, import_react15.useCallback)(() => {
     clearPolling();
     setState((prev) => ({
       ...prev,
       isPolling: false
     }));
   }, [clearPolling]);
-  const resetPolling = (0, import_react14.useCallback)(() => {
+  const resetPolling = (0, import_react15.useCallback)(() => {
     clearPolling();
     setState({
       isPolling: false,
@@ -5715,9 +5900,9 @@ function useTransactionPolling() {
       receiptSubmitted: false
     });
   }, [clearPolling]);
-  const clearPollingRef = (0, import_react14.useRef)(clearPolling);
+  const clearPollingRef = (0, import_react15.useRef)(clearPolling);
   clearPollingRef.current = clearPolling;
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     return () => {
       clearPollingRef.current();
     };
@@ -5786,12 +5971,12 @@ function useWalletTokenState({
   selectedToken,
   setSelectedToken
 }) {
-  const [yourWalletTokens, setYourWalletTokens] = (0, import_react15.useState)([]);
-  const [walletTokensReloadNonce, setWalletTokensReloadNonce] = (0, import_react15.useState)(0);
-  const lastLoadedWalletRef = (0, import_react15.useRef)(null);
+  const [yourWalletTokens, setYourWalletTokens] = (0, import_react16.useState)([]);
+  const [walletTokensReloadNonce, setWalletTokensReloadNonce] = (0, import_react16.useState)(0);
+  const lastLoadedWalletRef = (0, import_react16.useRef)(null);
   const { tokens } = useTokens(null);
   const { chains } = useChains();
-  (0, import_react15.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!walletAddress || chains.length === 0 || tokens.length === 0) {
       setYourWalletTokens([]);
       if (!walletAddress) {
@@ -6010,14 +6195,14 @@ function mapWalletTokens(balances, chains, tokens) {
 
 // src/widget/context/DepositContext.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var DepositContext = (0, import_react16.createContext)(
+var DepositContext = (0, import_react17.createContext)(
   void 0
 );
-var DepositNavigationContext = (0, import_react16.createContext)(void 0);
-var DepositWalletContext = (0, import_react16.createContext)(void 0);
-var DepositFormContext = (0, import_react16.createContext)(void 0);
-var DepositTransactionContext = (0, import_react16.createContext)(void 0);
-var DepositUiContext = (0, import_react16.createContext)(void 0);
+var DepositNavigationContext = (0, import_react17.createContext)(void 0);
+var DepositWalletContext = (0, import_react17.createContext)(void 0);
+var DepositFormContext = (0, import_react17.createContext)(void 0);
+var DepositTransactionContext = (0, import_react17.createContext)(void 0);
+var DepositUiContext = (0, import_react17.createContext)(void 0);
 function DepositProvider({
   children,
   initialStep = "home"
@@ -6039,12 +6224,12 @@ function DepositProvider({
     connectWallet,
     disconnectWallet
   } = useWalletSessionState();
-  const [amountInputMode, setAmountInputMode] = (0, import_react16.useState)(
+  const [amountInputMode, setAmountInputMode] = (0, import_react17.useState)(
     "usd"
   );
-  const [selectedToken, setSelectedToken] = (0, import_react16.useState)(null);
-  const [selectedChain, setSelectedChain] = (0, import_react16.useState)(null);
-  const [amount, setAmount] = (0, import_react16.useState)("");
+  const [selectedToken, setSelectedToken] = (0, import_react17.useState)(null);
+  const [selectedChain, setSelectedChain] = (0, import_react17.useState)(null);
+  const [amount, setAmount] = (0, import_react17.useState)("");
   const { yourWalletTokens, setYourWalletTokens, reloadWalletTokens } = useWalletTokenState({
     walletAddress,
     selectedChain,
@@ -6052,12 +6237,12 @@ function DepositProvider({
     selectedToken,
     setSelectedToken
   });
-  const [transactionStatus, setTransactionStatus] = (0, import_react16.useState)("idle");
-  const [transactionHash, setTransactionHash] = (0, import_react16.useState)(null);
-  const [errorMessage, setErrorMessage] = (0, import_react16.useState)(null);
-  const [intentId, setIntentId] = (0, import_react16.useState)(null);
-  const [paymentMethod, setPaymentMethod] = (0, import_react16.useState)("crypto");
-  const resetState = import_react16.default.useCallback(() => {
+  const [transactionStatus, setTransactionStatus] = (0, import_react17.useState)("idle");
+  const [transactionHash, setTransactionHash] = (0, import_react17.useState)(null);
+  const [errorMessage, setErrorMessage] = (0, import_react17.useState)(null);
+  const [intentId, setIntentId] = (0, import_react17.useState)(null);
+  const [paymentMethod, setPaymentMethod] = (0, import_react17.useState)("crypto");
+  const resetState = import_react17.default.useCallback(() => {
     resetNavigation();
     setSelectedToken(null);
     setSelectedChain(null);
@@ -6070,7 +6255,7 @@ function DepositProvider({
     setPaymentMethod("crypto");
     reloadWalletTokens();
   }, [reloadWalletTokens, resetNavigation]);
-  const navigationValue = (0, import_react16.useMemo)(
+  const navigationValue = (0, import_react17.useMemo)(
     () => ({
       currentStep,
       setCurrentStep,
@@ -6088,7 +6273,7 @@ function DepositProvider({
       stepHistory
     ]
   );
-  const walletValue = (0, import_react16.useMemo)(
+  const walletValue = (0, import_react17.useMemo)(
     () => ({
       selectedWallet,
       walletAddress,
@@ -6108,7 +6293,7 @@ function DepositProvider({
       yourWalletTokens
     ]
   );
-  const formValue = (0, import_react16.useMemo)(
+  const formValue = (0, import_react17.useMemo)(
     () => ({
       selectedToken,
       setSelectedToken,
@@ -6130,7 +6315,7 @@ function DepositProvider({
       setPaymentMethod
     ]
   );
-  const transactionValue = (0, import_react16.useMemo)(
+  const transactionValue = (0, import_react17.useMemo)(
     () => ({
       transactionStatus,
       setTransactionStatus,
@@ -6143,14 +6328,14 @@ function DepositProvider({
     }),
     [errorMessage, intentId, transactionHash, transactionStatus]
   );
-  const uiValue = (0, import_react16.useMemo)(
+  const uiValue = (0, import_react17.useMemo)(
     () => ({
       resolvedTheme,
       toggleTheme
     }),
     [resolvedTheme, toggleTheme]
   );
-  const value = (0, import_react16.useMemo)(
+  const value = (0, import_react17.useMemo)(
     () => ({
       ...navigationValue,
       ...walletValue,
@@ -6163,7 +6348,7 @@ function DepositProvider({
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositNavigationContext.Provider, { value: navigationValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositWalletContext.Provider, { value: walletValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositFormContext.Provider, { value: formValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositTransactionContext.Provider, { value: transactionValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositUiContext.Provider, { value: uiValue, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DepositContext.Provider, { value, children }) }) }) }) }) });
 }
 function useRequiredContext(context, name) {
-  const value = (0, import_react16.useContext)(context);
+  const value = (0, import_react17.useContext)(context);
   if (value === void 0) {
     throw new Error(`${name} must be used within a DepositProvider`);
   }
@@ -6186,7 +6371,7 @@ function useDepositUi() {
 }
 
 // src/widget/components/AmountSlider.tsx
-var import_react17 = require("react");
+var import_react18 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var roundToNiceNumber = (value, range) => {
   let roundingFactor;
@@ -6236,7 +6421,7 @@ function AmountSlider({
   style,
   disabled = false
 }) {
-  const generateTickMarks = (0, import_react17.useCallback)(
+  const generateTickMarks = (0, import_react18.useCallback)(
     (minValue, maxValue) => {
       const range = maxValue - minValue;
       if (range <= 0) {
@@ -6284,25 +6469,25 @@ function AmountSlider({
     },
     []
   );
-  const tickMarks = (0, import_react17.useMemo)(
+  const tickMarks = (0, import_react18.useMemo)(
     () => generateTickMarks(min, max),
     [generateTickMarks, min, max]
   );
-  const getPercentage = (0, import_react17.useCallback)(() => {
+  const getPercentage = (0, import_react18.useCallback)(() => {
     const range = max - min;
     if (range <= 0) return 0;
     const clampedValue = Math.min(Math.max(value, min), max);
     return (clampedValue - min) / range * 100;
   }, [max, min, value]);
-  const percentage = (0, import_react17.useMemo)(() => getPercentage(), [getPercentage]);
-  const handleChange = (0, import_react17.useCallback)(
+  const percentage = (0, import_react18.useMemo)(() => getPercentage(), [getPercentage]);
+  const handleChange = (0, import_react18.useCallback)(
     (e2) => {
       const newValue = Math.min(Math.max(Number(e2.target.value), min), max);
       onChange(newValue);
     },
     [onChange, min, max]
   );
-  const handleTickClick = (0, import_react17.useCallback)(
+  const handleTickClick = (0, import_react18.useCallback)(
     (tickValue) => {
       if (disabled) return;
       onChange(tickValue);
@@ -6520,7 +6705,7 @@ function AmountSlider({
 }
 
 // src/widget/components/AmountInputDisplay.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function formatDisplayAmount(value) {
   if (!Number.isFinite(value) || value <= 0) return "0";
@@ -6559,8 +6744,8 @@ function AmountInputDisplay({
   style,
   inputAriaLabel = "Deposit amount"
 }) {
-  const [isEditing, setIsEditing] = (0, import_react18.useState)(false);
-  const inputRef = (0, import_react18.useRef)(null);
+  const [isEditing, setIsEditing] = (0, import_react19.useState)(false);
+  const inputRef = (0, import_react19.useRef)(null);
   const handleAmountClick = () => {
     if (isFixedAmount) return;
     const isZeroish = !amount || parseFloat(amount) === 0;
@@ -6775,7 +6960,7 @@ function CircularProgress({
 }
 
 // src/widget/components/Dialog.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var Dialog = ({
   open,
@@ -6787,11 +6972,11 @@ var Dialog = ({
   confirmText = "Close Anyway",
   isDark = false
 }) => {
-  const dialogRef = (0, import_react20.useRef)(null);
-  const overlayRef = (0, import_react20.useRef)(null);
-  const firstButtonRef = (0, import_react20.useRef)(null);
-  const lastButtonRef = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const dialogRef = (0, import_react21.useRef)(null);
+  const overlayRef = (0, import_react21.useRef)(null);
+  const firstButtonRef = (0, import_react21.useRef)(null);
+  const lastButtonRef = (0, import_react21.useRef)(null);
+  (0, import_react21.useEffect)(() => {
     const handleEscape = (e2) => {
       if (e2.key === "Escape" && open) {
         e2.preventDefault();
@@ -6805,7 +6990,7 @@ var Dialog = ({
       document.removeEventListener("keydown", handleEscape);
     };
   }, [open, onCancel]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     const handleTabKey = (e2) => {
       if (!open) return;
       if (e2.key === "Tab") {
@@ -6829,7 +7014,7 @@ var Dialog = ({
       document.removeEventListener("keydown", handleTabKey);
     };
   }, [open]);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react21.useEffect)(() => {
     if (open) {
       const originalStyle = window.getComputedStyle(document.body).overflow;
       document.body.style.overflow = "hidden";
@@ -7127,7 +7312,7 @@ function TransactionHashLink({
 }
 
 // src/widget/components/SwipeToConfirmTokens.tsx
-var import_react21 = require("react");
+var import_react22 = require("react");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function SwipeToConfirmTokens({
   fromToken,
@@ -7142,33 +7327,33 @@ function SwipeToConfirmTokens({
   style,
   text
 }) {
-  const [dragX, setDragX] = (0, import_react21.useState)(0);
-  const [isDragging, setIsDragging] = (0, import_react21.useState)(false);
-  const [isComplete, setIsComplete] = (0, import_react21.useState)(false);
-  const trackRef = (0, import_react21.useRef)(null);
-  const thumbRef = (0, import_react21.useRef)(null);
-  const [isLongPressing, setIsLongPressing] = (0, import_react21.useState)(false);
-  const [longPressProgress, setLongPressProgress] = (0, import_react21.useState)(0);
-  const longPressTimerRef = (0, import_react21.useRef)(null);
-  const longPressStartRef = (0, import_react21.useRef)(null);
-  const longPressAnimationRef = (0, import_react21.useRef)(null);
+  const [dragX, setDragX] = (0, import_react22.useState)(0);
+  const [isDragging, setIsDragging] = (0, import_react22.useState)(false);
+  const [isComplete, setIsComplete] = (0, import_react22.useState)(false);
+  const trackRef = (0, import_react22.useRef)(null);
+  const thumbRef = (0, import_react22.useRef)(null);
+  const [isLongPressing, setIsLongPressing] = (0, import_react22.useState)(false);
+  const [longPressProgress, setLongPressProgress] = (0, import_react22.useState)(0);
+  const longPressTimerRef = (0, import_react22.useRef)(null);
+  const longPressStartRef = (0, import_react22.useRef)(null);
+  const longPressAnimationRef = (0, import_react22.useRef)(null);
   const LONG_PRESS_DURATION = 1500;
   const thumbSize = 48;
   const padding = 4;
   const threshold = 0.8;
-  const getMaxDrag = (0, import_react21.useCallback)(() => {
+  const getMaxDrag = (0, import_react22.useCallback)(() => {
     if (!trackRef.current) return 0;
     return trackRef.current.offsetWidth - thumbSize - padding * 2;
   }, []);
-  const getProgress = (0, import_react21.useCallback)(() => {
+  const getProgress = (0, import_react22.useCallback)(() => {
     const maxDrag = getMaxDrag();
     return maxDrag > 0 ? dragX / maxDrag : 0;
   }, [dragX, getMaxDrag]);
-  const handleDragStart = (0, import_react21.useCallback)(() => {
+  const handleDragStart = (0, import_react22.useCallback)(() => {
     if (disabled || isComplete) return;
     setIsDragging(true);
   }, [disabled, isComplete]);
-  const handleDragMove = (0, import_react21.useCallback)(
+  const handleDragMove = (0, import_react22.useCallback)(
     (clientX) => {
       if (!isDragging || !trackRef.current || isComplete) return;
       const rect = trackRef.current.getBoundingClientRect();
@@ -7179,7 +7364,7 @@ function SwipeToConfirmTokens({
     },
     [isDragging, isComplete, getMaxDrag]
   );
-  const handleDragEnd = (0, import_react21.useCallback)(() => {
+  const handleDragEnd = (0, import_react22.useCallback)(() => {
     if (!isDragging) return;
     setIsDragging(false);
     const progress2 = getProgress();
@@ -7192,14 +7377,14 @@ function SwipeToConfirmTokens({
       setDragX(0);
     }
   }, [isDragging, getProgress, getMaxDrag, onConfirm]);
-  const triggerConfirmation = (0, import_react21.useCallback)(() => {
+  const triggerConfirmation = (0, import_react22.useCallback)(() => {
     if (isComplete) return;
     setDragX(getMaxDrag());
     setIsComplete(true);
     if (navigator.vibrate) navigator.vibrate(50);
     setTimeout(() => onConfirm(), 150);
   }, [isComplete, getMaxDrag, onConfirm]);
-  const cancelLongPress = (0, import_react21.useCallback)(() => {
+  const cancelLongPress = (0, import_react22.useCallback)(() => {
     setIsLongPressing(false);
     setLongPressProgress(0);
     longPressStartRef.current = null;
@@ -7212,7 +7397,7 @@ function SwipeToConfirmTokens({
       longPressAnimationRef.current = null;
     }
   }, []);
-  const startLongPress = (0, import_react21.useCallback)(() => {
+  const startLongPress = (0, import_react22.useCallback)(() => {
     if (disabled || isComplete || isDragging) return;
     setIsLongPressing(true);
     longPressStartRef.current = Date.now();
@@ -7230,7 +7415,7 @@ function SwipeToConfirmTokens({
     };
     longPressAnimationRef.current = requestAnimationFrame(animateProgress);
   }, [disabled, isComplete, isDragging, triggerConfirmation, cancelLongPress]);
-  const handleKeyDown = (0, import_react21.useCallback)(
+  const handleKeyDown = (0, import_react22.useCallback)(
     (e2) => {
       if (disabled || isComplete) return;
       if (e2.key === "Enter" || e2.key === " ") {
@@ -7240,7 +7425,7 @@ function SwipeToConfirmTokens({
     },
     [disabled, isComplete, startLongPress]
   );
-  const handleKeyUp = (0, import_react21.useCallback)(
+  const handleKeyUp = (0, import_react22.useCallback)(
     (e2) => {
       if (e2.key === "Enter" || e2.key === " ") {
         e2.preventDefault();
@@ -7249,7 +7434,7 @@ function SwipeToConfirmTokens({
     },
     [cancelLongPress]
   );
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     return () => {
       if (longPressTimerRef.current) clearTimeout(longPressTimerRef.current);
       if (longPressAnimationRef.current)
@@ -7260,15 +7445,15 @@ function SwipeToConfirmTokens({
     e2.preventDefault();
     handleDragStart();
   };
-  const handleMouseMove = (0, import_react21.useCallback)(
+  const handleMouseMove = (0, import_react22.useCallback)(
     (e2) => handleDragMove(e2.clientX),
     [handleDragMove]
   );
-  const handleMouseUp = (0, import_react21.useCallback)(() => handleDragEnd(), [handleDragEnd]);
+  const handleMouseUp = (0, import_react22.useCallback)(() => handleDragEnd(), [handleDragEnd]);
   const handleTouchStart = () => handleDragStart();
   const handleTouchMove = (e2) => handleDragMove(e2.touches[0].clientX);
   const handleTouchEnd = () => handleDragEnd();
-  (0, import_react21.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     if (isDragging) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
@@ -7280,7 +7465,29 @@ function SwipeToConfirmTokens({
   }, [isDragging, handleMouseMove, handleMouseUp]);
   const progress = getProgress();
   const effectiveProgress = isLongPressing ? longPressProgress : progress;
-  const getTokenInitials = (symbol) => symbol?.slice(0, 2).toUpperCase();
+  const [blinkOpacity, setBlinkOpacity] = (0, import_react22.useState)(1);
+  (0, import_react22.useEffect)(() => {
+    if (disabled || isComplete || isDragging || isLongPressing) {
+      setBlinkOpacity(1);
+      return;
+    }
+    let direction = -1;
+    const interval = setInterval(() => {
+      setBlinkOpacity((prev) => {
+        const newVal = prev + direction * 0.8;
+        if (newVal <= 0.2) {
+          direction = 1;
+          return 0.2;
+        }
+        if (newVal >= 1) {
+          direction = -1;
+          return 1;
+        }
+        return newVal;
+      });
+    }, 700);
+    return () => clearInterval(interval);
+  }, [disabled, isComplete, isDragging, isLongPressing]);
   const getAriaLabel = () => {
     if (!isWalletConnected) return "Connect your wallet to deposit";
     if (isComplete) return "Transaction confirmed";
@@ -7500,27 +7707,52 @@ function SwipeToConfirmTokens({
                   onTouchStart: handleTouchStart,
                   onTouchMove: handleTouchMove,
                   onTouchEnd: handleTouchEnd,
-                  children: fromToken.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "img",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                    ImageLoader,
                     {
-                      src: fromToken.iconUrl,
+                      src: fromToken.iconUrl || "",
                       alt: fromToken.symbol,
-                      style: {
+                      imgStyle: {
                         width: "2.5rem",
                         height: "2.5rem",
                         objectFit: "contain",
                         borderRadius: "9999px"
-                      }
-                    }
-                  ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "span",
-                    {
-                      style: {
-                        fontSize: fontSize.sm,
-                        fontWeight: fontWeight.bold,
-                        color: colors.white
                       },
-                      children: getTokenInitials(fromToken.symbol)
+                      retry: 1,
+                      Fallback: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                        "span",
+                        {
+                          style: {
+                            fontSize: fontSize.sm,
+                            fontWeight: fontWeight.bold,
+                            color: colors.white,
+                            opacity: blinkOpacity,
+                            transition: "opacity 0.5s ease-in-out"
+                          },
+                          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            "svg",
+                            {
+                              style: {
+                                width: "2rem",
+                                height: "2rem",
+                                color: colors.zinc[500]
+                              },
+                              fill: "none",
+                              stroke: "currentColor",
+                              viewBox: "0 0 24 24",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                                "path",
+                                {
+                                  strokeLinecap: "round",
+                                  strokeLinejoin: "round",
+                                  strokeWidth: 2,
+                                  d: "M9 5l7 7-7 7"
+                                }
+                              )
+                            }
+                          )
+                        }
+                      )
                     }
                   )
                 }
@@ -7556,47 +7788,6 @@ function SwipeToConfirmTokens({
                     }
                   )
                 }
-              ),
-              !toTokenIcon && !isComplete && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "div",
-                {
-                  style: {
-                    position: "absolute",
-                    top: "50%",
-                    transform: "translateY(-50%)",
-                    width: "3rem",
-                    height: "3rem",
-                    borderRadius: "9999px",
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    transition: "opacity 0.2s",
-                    right: `${padding}px`,
-                    opacity: 0.3 + effectiveProgress * 0.7
-                  },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                    "svg",
-                    {
-                      style: {
-                        width: "1.5rem",
-                        height: "1.5rem",
-                        color: colors.white
-                      },
-                      fill: "none",
-                      stroke: "currentColor",
-                      viewBox: "0 0 24 24",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          strokeWidth: 2,
-                          d: "M9 5l7 7-7 7"
-                        }
-                      )
-                    }
-                  )
-                }
               )
             ]
           }
@@ -7709,7 +7900,7 @@ function ThemeToggle({
 }
 
 // src/widget/components/Toast.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var variantStyles = {
   default: {
@@ -7739,14 +7930,14 @@ function ToastItem({
   duration = 4e3,
   onDismiss
 }) {
-  const [isExiting, setIsExiting] = (0, import_react22.useState)(false);
-  (0, import_react22.useEffect)(() => {
+  const [isExiting, setIsExiting] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(() => {
     const timer = setTimeout(() => {
       setIsExiting(true);
     }, duration);
     return () => clearTimeout(timer);
   }, [duration]);
-  (0, import_react22.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     if (isExiting) {
       const exitTimer = setTimeout(() => {
         onDismiss(id);
@@ -7950,8 +8141,8 @@ function toast(data) {
 toast.error = (title, description) => toast({ title, description, variant: "destructive" });
 toast.success = (title, description) => toast({ title, description, variant: "success" });
 function ToastContainer() {
-  const [activeToasts, setActiveToasts] = (0, import_react22.useState)([]);
-  (0, import_react22.useEffect)(() => {
+  const [activeToasts, setActiveToasts] = (0, import_react23.useState)([]);
+  (0, import_react23.useEffect)(() => {
     const listener = (newToasts) => {
       setActiveToasts(newToasts);
     };
@@ -7963,7 +8154,7 @@ function ToastContainer() {
       }
     };
   }, []);
-  const handleDismiss = (0, import_react22.useCallback)((id) => {
+  const handleDismiss = (0, import_react23.useCallback)((id) => {
     toasts = toasts.filter((t) => t.id !== id);
     notifyListeners();
   }, []);
@@ -8000,7 +8191,7 @@ function ToastContainer() {
 }
 
 // src/widget/components/TokenSwipePill.tsx
-var import_react23 = __toESM(require("react"), 1);
+var import_react24 = __toESM(require("react"), 1);
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var MAX_VISIBLE_DOTS = 5;
 function TokenSwipePill({
@@ -8012,10 +8203,10 @@ function TokenSwipePill({
   walletAddress,
   style
 }) {
-  const [isDragging, setIsDragging] = (0, import_react23.useState)(false);
-  const [dragOffset, setDragOffset] = (0, import_react23.useState)(0);
-  const startXRef = (0, import_react23.useRef)(0);
-  const containerRef = (0, import_react23.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react24.useState)(false);
+  const [dragOffset, setDragOffset] = (0, import_react24.useState)(0);
+  const startXRef = (0, import_react24.useRef)(0);
+  const containerRef = (0, import_react24.useRef)(null);
   const currentIndex = tokens.findIndex(
     (t) => normalizeAddress2(
       t.address,
@@ -8036,11 +8227,11 @@ function TokenSwipePill({
     }
     return pos;
   };
-  const handleDragStart = (0, import_react23.useCallback)((clientX) => {
+  const handleDragStart = (0, import_react24.useCallback)((clientX) => {
     setIsDragging(true);
     startXRef.current = clientX;
   }, []);
-  const handleDragMove = (0, import_react23.useCallback)(
+  const handleDragMove = (0, import_react24.useCallback)(
     (clientX) => {
       if (!isDragging) return;
       const delta = startXRef.current - clientX;
@@ -8048,7 +8239,7 @@ function TokenSwipePill({
     },
     [isDragging]
   );
-  const handleDragEnd = (0, import_react23.useCallback)(() => {
+  const handleDragEnd = (0, import_react24.useCallback)(() => {
     if (!isDragging) return;
     setIsDragging(false);
     if (Math.abs(dragOffset) > swipeThreshold) {
@@ -8066,13 +8257,13 @@ function TokenSwipePill({
     e2.preventDefault();
     handleDragStart(e2.clientX);
   };
-  const handleMouseMove = (0, import_react23.useCallback)(
+  const handleMouseMove = (0, import_react24.useCallback)(
     (e2) => {
       handleDragMove(e2.clientX);
     },
     [handleDragMove]
   );
-  const handleMouseUp = (0, import_react23.useCallback)(() => {
+  const handleMouseUp = (0, import_react24.useCallback)(() => {
     handleDragEnd();
   }, [handleDragEnd]);
   const handleTouchStart = (e2) => {
@@ -8086,7 +8277,7 @@ function TokenSwipePill({
   const handleTouchEnd = () => {
     handleDragEnd();
   };
-  (0, import_react23.useEffect)(() => {
+  (0, import_react24.useEffect)(() => {
     if (isDragging) {
       window.addEventListener("mousemove", handleMouseMove);
       window.addEventListener("mouseup", handleMouseUp);
@@ -8097,10 +8288,10 @@ function TokenSwipePill({
     }
   }, [isDragging, handleMouseMove, handleMouseUp]);
   const visualOffset = Math.max(-40, Math.min(40, dragOffset * 0.5));
-  const getTokenInitials = (symbol) => {
-    return symbol?.slice(0, 2).toUpperCase();
+  const getChainInitials = (chain) => {
+    return chain?.slice(0, 2).toUpperCase();
   };
-  const chainBadge = (0, import_react23.useMemo)(() => {
+  const chainBadge = (0, import_react24.useMemo)(() => {
     const url = selectedToken.chainData?.chainIconURI || selectedToken.chainData?.iconUrl;
     return url?.toString();
   }, [selectedToken]);
@@ -8125,6 +8316,7 @@ function TokenSwipePill({
         alignItems: "flex-start",
         gap: spacing[2],
         padding: `${spacing[1.5]} ${spacing[4]}`,
+        minWidth: "16.875rem",
         backgroundColor: colors.background,
         borderRadius: borderRadius.full,
         border: `1px solid ${colors.border}`,
@@ -8145,7 +8337,8 @@ function TokenSwipePill({
             style: {
               display: "flex",
               flexDirection: "column",
-              alignItems: "center"
+              alignItems: "center",
+              width: "70%"
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
@@ -8225,26 +8418,31 @@ function TokenSwipePill({
                                       alignItems: "center",
                                       justifyContent: "center"
                                     },
-                                    children: validateIconUrl(token.iconUrl, isCenter) ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                                      "img",
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                      ImageLoader,
                                       {
                                         src: validateIconUrl(token.iconUrl, isCenter),
                                         alt: token.symbol,
-                                        style: {
+                                        imgStyle: {
                                           width: "2rem",
                                           height: "2rem",
                                           objectFit: "contain"
-                                        }
-                                      }
-                                    ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                                      "span",
-                                      {
-                                        style: {
-                                          fontSize: fontSize.xs,
-                                          fontWeight: fontWeight.bold,
-                                          color: colors.zinc[800]
                                         },
-                                        children: getTokenInitials(token.symbol)
+                                        Fallback: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                          "span",
+                                          {
+                                            style: {
+                                              fontSize: fontSize.xs,
+                                              fontWeight: fontWeight.bold,
+                                              color: colors.zinc[800],
+                                              width: "2rem",
+                                              height: "2rem",
+                                              objectFit: "contain",
+                                              textAlign: "center"
+                                            },
+                                            children: token.symbol
+                                          }
+                                        )
                                       }
                                     )
                                   }
@@ -8267,16 +8465,27 @@ function TokenSwipePill({
                                       overflow: "hidden"
                                     },
                                     children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                                      "img",
+                                      ImageLoader,
                                       {
-                                        src: chainBadge,
+                                        src: chainBadge || "",
                                         alt: selectedToken.chainData?.networkName,
-                                        style: {
+                                        imgStyle: {
                                           width: "0.75rem",
                                           height: "0.75rem",
                                           borderRadius: "9999px",
                                           objectFit: "cover"
-                                        }
+                                        },
+                                        Fallback: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                                          "span",
+                                          {
+                                            style: {
+                                              fontSize: "10px"
+                                            },
+                                            children: getChainInitials(
+                                              selectedToken.chainData?.networkName
+                                            )
+                                          }
+                                        )
                                       }
                                     )
                                   }
@@ -8368,7 +8577,7 @@ function TokenSwipePill({
                       const token = tokens[index];
                       const prevIndex = uniqueIndices[i - 1];
                       const showGap = i > 0 && index - prevIndex > 1;
-                      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react23.default.Fragment, { children: [
+                      return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react24.default.Fragment, { children: [
                         showGap && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                           "span",
                           {
@@ -8550,7 +8759,7 @@ function TokenSwipePill({
 }
 
 // src/widget/components/TransactionSteps.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var DEFAULT_LABELS = {
   confirming: "Confirming in wallet",
@@ -8590,14 +8799,14 @@ function TransactionSteps({
   style,
   stepLabels
 }) {
-  const labels = (0, import_react24.useMemo)(
+  const labels = (0, import_react25.useMemo)(
     () => ({
       ...DEFAULT_LABELS,
       ...stepLabels
     }),
     [stepLabels]
   );
-  const steps = (0, import_react24.useMemo)(
+  const steps = (0, import_react25.useMemo)(
     () => getSteps(transactionStatus, labels),
     [transactionStatus, labels]
   );
@@ -8756,7 +8965,7 @@ function TransactionSteps({
 }
 
 // src/widget/components/WidgetContainer.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 var INJECTED_STYLES = ALL_THEME_STYLES + ALL_ANIMATION_STYLES;
 function WidgetContainer({
@@ -8765,8 +8974,8 @@ function WidgetContainer({
   className,
   style
 }) {
-  const [resolvedTheme, setResolvedTheme] = (0, import_react25.useState)("light");
-  (0, import_react25.useEffect)(() => {
+  const [resolvedTheme, setResolvedTheme] = (0, import_react26.useState)("light");
+  (0, import_react26.useEffect)(() => {
     if (theme === "system") {
       const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
       setResolvedTheme(mediaQuery.matches ? "dark" : "light");
@@ -9009,8 +9218,147 @@ function WidgetSecurityFooter({
   );
 }
 
-// src/widget/components/Skeletons/LoadingSkeleton.tsx
+// src/widget/components/ImageLoader.tsx
+var import_react27 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
+function Skeleton({
+  background,
+  height,
+  borderRadius: borderRadius2
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      style: {
+        background: background || "#eee",
+        height: height || "50px",
+        borderRadius: borderRadius2 || "100%"
+      }
+    }
+  );
+}
+function ImageLoader({
+  src,
+  alt = "",
+  retry = 0,
+  retryDelay = 1e3,
+  lazy: lazy2 = true,
+  Fallback = null,
+  // skeleton = null,
+  imgStyle,
+  onLoad,
+  onError
+}) {
+  const [status, setStatus] = (0, import_react27.useState)("idle");
+  const [attempt, setAttempt] = (0, import_react27.useState)(0);
+  const [srcIsEmpty, setSrcIsEmpty] = (0, import_react27.useState)(false);
+  const imgRef = (0, import_react27.useRef)(null);
+  const observerRef = (0, import_react27.useRef)(null);
+  (0, import_react27.useEffect)(() => {
+    if (status === "error" && attempt < retry) {
+      const timer = setTimeout(() => {
+        setAttempt((prev) => prev + 1);
+        setStatus("loading");
+      }, retryDelay);
+      return () => clearTimeout(timer);
+    }
+  }, [status, attempt, retry, retryDelay]);
+  const loadImage = () => {
+    if (!src) {
+      setSrcIsEmpty(true);
+      return;
+    }
+    setStatus("loading");
+    const img = new Image();
+    img.src = src;
+    img.onload = () => {
+      setStatus("success");
+      onLoad?.();
+    };
+    img.onerror = () => {
+      setStatus("error");
+      onError?.();
+    };
+  };
+  (0, import_react27.useEffect)(() => {
+    if (!lazy2) {
+      setTimeout(() => {
+        loadImage();
+      }, 0);
+      return;
+    }
+    observerRef.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            loadImage();
+            observerRef.current?.disconnect();
+          }
+        });
+      },
+      { threshold: 0.1 }
+    );
+    if (imgRef.current) {
+      observerRef.current.observe(imgRef.current);
+    }
+    return () => observerRef.current?.disconnect();
+  }, [lazy2, src, loadImage]);
+  const showFallback = (0, import_react27.useMemo)(() => {
+    return (status === "error" && attempt >= retry || srcIsEmpty) && Fallback;
+  }, [status, attempt, retry, srcIsEmpty, Fallback]);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: imgRef, style: { position: "relative" }, children: [
+    status === "loading" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      Skeleton,
+      {
+        height: imgStyle?.height,
+        borderRadius: imgStyle?.borderRadius
+      }
+    ),
+    status === "success" && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      "img",
+      {
+        src,
+        alt,
+        style: {
+          // Css guards to prevent external styles from interfering with image rendering
+          all: "revert",
+          // Undo any inherited/global resets (e.g. Tailwind, normalize.css)
+          display: "block",
+          // Prevent inline baseline gap
+          width: "100%",
+          // Restore intended sizing
+          maxWidth: "100%",
+          // Prevent overflow
+          height: "auto",
+          // Maintain aspect ratio
+          border: "none",
+          // Strip any border resets
+          padding: 0,
+          // Strip padding resets
+          margin: 0,
+          // Strip margin resets
+          objectFit: "cover",
+          // Preserve visual intent
+          verticalAlign: "middle",
+          // Guard against inline stripping
+          filter: "none",
+          // Prevent inherited filter washes
+          opacity: 1,
+          // Prevent inherited opacity stripping
+          mixBlendMode: "normal",
+          // Prevent blend mode interference
+          colorScheme: "normal",
+          // Prevent dark-mode inversion
+          ...imgStyle
+        }
+      }
+    ),
+    showFallback && Fallback
+  ] });
+}
+
+// src/widget/components/Skeletons/LoadingSkeleton.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var containerStyle = {
   display: "flex",
   flexDirection: "column",
@@ -9046,11 +9394,11 @@ var lineSmStyle = {
 function LoadingSkeleton({
   style
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { ...containerStyle, ...style }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: rowStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: circleStyle, className: "tw-animate-pulse" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { style: { flex: 1 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: lineLgStyle, className: "tw-animate-pulse" }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: { ...containerStyle, ...style }, children: [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: rowStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: circleStyle, className: "tw-animate-pulse" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { style: { flex: 1 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { style: lineLgStyle, className: "tw-animate-pulse" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           style: { ...lineSmStyle, marginTop: spacing[2] },
@@ -9077,14 +9425,14 @@ function clearPersistedState() {
 }
 
 // src/widget/app/WidgetShellOverlays.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function ConfirmCloseDialog({
   open,
   onConfirm,
   onCancel,
   theme
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     Dialog,
     {
       open,
@@ -9103,7 +9451,7 @@ function InitErrorOverlay({
   onRefresh
 }) {
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     "div",
     {
       role: "dialog",
@@ -9121,7 +9469,7 @@ function InitErrorOverlay({
         padding: spacing[6],
         borderRadius: "20px"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
         "div",
         {
           style: {
@@ -9136,7 +9484,7 @@ function InitErrorOverlay({
             border: `1px solid ${colors.border}`
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "h2",
               {
                 id: "init-error-title",
@@ -9148,7 +9496,7 @@ function InitErrorOverlay({
                 children: "API key validation failed"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "p",
               {
                 id: "init-error-description",
@@ -9160,7 +9508,7 @@ function InitErrorOverlay({
                 children: "We could not validate your Trustware API key. Please refresh to retry."
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
               "button",
               {
                 onClick: onRefresh,
@@ -9191,7 +9539,7 @@ function InitErrorOverlay({
 }
 
 // src/widget/app/WidgetRouter.tsx
-var import_react37 = require("react");
+var import_react39 = require("react");
 
 // src/widget/helpers/tokenAmount.ts
 function rawToDecimal(rawAmount, decimals) {
@@ -9254,12 +9602,12 @@ function resolveChainLabel(chain) {
 }
 
 // src/widget/features/token-selection/components/AvailableTokenListItem.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function AvailableTokenListItem({
   onSelect,
   token
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "button",
     {
       type: "button",
@@ -9277,7 +9625,7 @@ function AvailableTokenListItem({
         cursor: "pointer"
       },
       children: [
-        token.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        token.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "img",
           {
             src: token.iconUrl,
@@ -9298,7 +9646,7 @@ function AvailableTokenListItem({
             }
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "div",
           {
             style: {
@@ -9311,7 +9659,7 @@ function AvailableTokenListItem({
               flexShrink: 0,
               display: token.iconUrl ? "none" : "flex"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
               "span",
               {
                 style: {
@@ -9324,8 +9672,8 @@ function AvailableTokenListItem({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { flex: 1, textAlign: "left", minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { flex: 1, textAlign: "left", minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "div",
             {
               style: {
@@ -9333,7 +9681,7 @@ function AvailableTokenListItem({
                 alignItems: "center",
                 gap: spacing[1.5]
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                 "span",
                 {
                   style: {
@@ -9349,7 +9697,7 @@ function AvailableTokenListItem({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "span",
             {
               style: {
@@ -9364,7 +9712,7 @@ function AvailableTokenListItem({
             }
           )
         ] }),
-        token.balance !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { style: { textAlign: "right", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        token.balance !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { textAlign: "right", flexShrink: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "span",
           {
             style: {
@@ -9375,7 +9723,7 @@ function AvailableTokenListItem({
             children: formatTokenBalance(token.balance, token.decimals)
           }
         ) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "svg",
           {
             style: {
@@ -9388,7 +9736,7 @@ function AvailableTokenListItem({
             fill: "none",
             stroke: "currentColor",
             strokeWidth: 2,
-            children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m9 18 6-6-6-6" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "m9 18 6-6-6-6" })
           }
         )
       ]
@@ -9397,7 +9745,7 @@ function AvailableTokenListItem({
 }
 
 // src/widget/features/token-selection/components/ChainSelectorPanel.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function ChainItem({
   chain,
   index,
@@ -9406,7 +9754,7 @@ function ChainItem({
 }) {
   const key = chain.id ?? chain.chainId ?? chain.networkIdentifier ?? `chain-${index}`;
   const label = resolveChainLabel(chain);
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "button",
     {
       type: "button",
@@ -9428,7 +9776,7 @@ function ChainItem({
         }
       },
       children: [
-        chain.chainIconURI ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        chain.chainIconURI ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "img",
           {
             src: chain.chainIconURI,
@@ -9441,7 +9789,7 @@ function ChainItem({
               flexShrink: 0
             }
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             style: {
@@ -9454,7 +9802,7 @@ function ChainItem({
               justifyContent: "center",
               flexShrink: 0
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "span",
               {
                 style: {
@@ -9467,7 +9815,7 @@ function ChainItem({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { flex: 1, textAlign: "left", minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { flex: 1, textAlign: "left", minWidth: 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "span",
           {
             style: {
@@ -9482,7 +9830,7 @@ function ChainItem({
             children: label
           }
         ) }),
-        isSelected && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             style: {
@@ -9495,7 +9843,7 @@ function ChainItem({
               justifyContent: "center",
               flexShrink: 0
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "svg",
               {
                 style: {
@@ -9507,7 +9855,7 @@ function ChainItem({
                 fill: "none",
                 stroke: "currentColor",
                 strokeWidth: 3,
-                children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "path",
                   {
                     strokeLinecap: "round",
@@ -9532,7 +9880,7 @@ function ChainSelectorPanel({
   otherChains,
   popularChains
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
     "div",
     {
       style: {
@@ -9543,14 +9891,14 @@ function ChainSelectorPanel({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             style: {
               padding: `${spacing[2]} ${spacing[3]}`,
               borderBottom: `1px solid rgba(63, 63, 70, 0.5)`
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "span",
               {
                 style: {
@@ -9565,7 +9913,7 @@ function ChainSelectorPanel({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
           "div",
           {
             style: {
@@ -9573,7 +9921,7 @@ function ChainSelectorPanel({
               overflowY: "auto",
               padding: `${spacing[2]} ${spacing[1]}`
             },
-            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
               "div",
               {
                 style: {
@@ -9582,7 +9930,7 @@ function ChainSelectorPanel({
                   gap: spacing[2],
                   padding: `0 ${spacing[2]}`
                 },
-                children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
                   "div",
                   {
                     style: {
@@ -9592,7 +9940,7 @@ function ChainSelectorPanel({
                       padding: `${spacing[2]} 0`
                     },
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         "div",
                         {
                           style: {
@@ -9604,7 +9952,7 @@ function ChainSelectorPanel({
                           className: "tw-animate-pulse"
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                         "div",
                         {
                           style: {
@@ -9621,7 +9969,7 @@ function ChainSelectorPanel({
                   i
                 ))
               }
-            ) : error ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+            ) : error ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
               "div",
               {
                 style: {
@@ -9629,8 +9977,8 @@ function ChainSelectorPanel({
                   textAlign: "center"
                 },
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { style: { fontSize: fontSize.sm, color: colors.destructive }, children: error }),
-                  /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { style: { fontSize: fontSize.sm, color: colors.destructive }, children: error }),
+                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "button",
                     {
                       type: "button",
@@ -9649,9 +9997,9 @@ function ChainSelectorPanel({
                   )
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
-              popularChains.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { style: { marginBottom: spacing[2] }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { style: { padding: `${spacing[1.5]} ${spacing[3]}` }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+              popularChains.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { marginBottom: spacing[2] }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { style: { padding: `${spacing[1.5]} ${spacing[3]}` }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "span",
                   {
                     style: {
@@ -9664,7 +10012,7 @@ function ChainSelectorPanel({
                     children: "Popular"
                   }
                 ) }),
-                popularChains.map((chain, idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                popularChains.map((chain, idx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   ChainItem,
                   {
                     chain,
@@ -9677,15 +10025,15 @@ function ChainSelectorPanel({
                   )
                 ))
               ] }),
-              otherChains.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { children: [
-                popularChains.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              otherChains.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { children: [
+                popularChains.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   "div",
                   {
                     style: {
                       padding: `${spacing[1.5]} ${spacing[3]}`,
                       marginTop: spacing[2]
                     },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                       "span",
                       {
                         style: {
@@ -9700,7 +10048,7 @@ function ChainSelectorPanel({
                     )
                   }
                 ),
-                otherChains.map((chain, idx) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                otherChains.map((chain, idx) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                   ChainItem,
                   {
                     chain,
@@ -9713,14 +10061,14 @@ function ChainSelectorPanel({
                   )
                 ))
               ] }),
-              popularChains.length === 0 && otherChains.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+              popularChains.length === 0 && otherChains.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                 "div",
                 {
                   style: {
                     padding: `${spacing[3]} ${spacing[4]}`,
                     textAlign: "center"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
                     "p",
                     {
                       style: {
@@ -9741,13 +10089,13 @@ function ChainSelectorPanel({
 }
 
 // src/widget/features/token-selection/components/TokenSearchInput.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function TokenSearchInput({
   searchQuery,
   setSearchQuery
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
       "svg",
       {
         style: {
@@ -9764,12 +10112,12 @@ function TokenSearchInput({
         stroke: "currentColor",
         strokeWidth: 2,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { strokeLinecap: "round", d: "m21 21-4.35-4.35" })
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { strokeLinecap: "round", d: "m21 21-4.35-4.35" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "input",
       {
         type: "text",
@@ -9792,7 +10140,7 @@ function TokenSearchInput({
         }
       }
     ),
-    searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "button",
       {
         type: "button",
@@ -9810,7 +10158,7 @@ function TokenSearchInput({
           transition: "background-color 0.2s"
         },
         "aria-label": "Clear search",
-        children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "svg",
           {
             style: {
@@ -9822,7 +10170,7 @@ function TokenSearchInput({
             fill: "none",
             stroke: "currentColor",
             strokeWidth: 2,
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("path", { strokeLinecap: "round", d: "M18 6 6 18M6 6l12 12" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { strokeLinecap: "round", d: "M18 6 6 18M6 6l12 12" })
           }
         )
       }
@@ -9831,7 +10179,7 @@ function TokenSearchInput({
 }
 
 // src/widget/features/token-selection/components/TokenSelectorStateView.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function TokenSelectorStateView({
   isLoadingTokens,
   searchQuery,
@@ -9840,7 +10188,7 @@ function TokenSelectorStateView({
   tokensError
 }) {
   if (isLoadingTokens) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         style: {
@@ -9849,7 +10197,7 @@ function TokenSelectorStateView({
           gap: spacing[2],
           padding: `0 ${spacing[2]}`
         },
-        children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        children: [1, 2, 3, 4, 5, 6].map((i) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "div",
           {
             style: {
@@ -9859,7 +10207,7 @@ function TokenSelectorStateView({
               padding: `${spacing[2.5]} ${spacing[2]}`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "div",
                 {
                   style: {
@@ -9871,8 +10219,8 @@ function TokenSelectorStateView({
                   className: "tw-animate-pulse"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { flex: 1 }, children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { flex: 1 }, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "div",
                   {
                     style: {
@@ -9885,7 +10233,7 @@ function TokenSelectorStateView({
                     className: "tw-animate-pulse"
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                   "div",
                   {
                     style: {
@@ -9898,7 +10246,7 @@ function TokenSelectorStateView({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "div",
                 {
                   style: {
@@ -9918,7 +10266,7 @@ function TokenSelectorStateView({
     );
   }
   if (state === "no-chain") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         style: {
@@ -9928,8 +10276,8 @@ function TokenSelectorStateView({
           justifyContent: "center",
           padding: `0 ${spacing[4]}`
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "svg",
             {
               style: {
@@ -9942,7 +10290,7 @@ function TokenSelectorStateView({
               fill: "none",
               stroke: "currentColor",
               strokeWidth: 1.5,
-              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                 "path",
                 {
                   strokeLinecap: "round",
@@ -9952,7 +10300,7 @@ function TokenSelectorStateView({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "p",
             {
               style: {
@@ -9967,7 +10315,7 @@ function TokenSelectorStateView({
     );
   }
   if (state === "error") {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "div",
       {
         style: {
@@ -9977,8 +10325,8 @@ function TokenSelectorStateView({
           justifyContent: "center",
           padding: `0 ${spacing[4]}`
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { textAlign: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
             "svg",
             {
               style: {
@@ -9992,12 +10340,12 @@ function TokenSelectorStateView({
               stroke: "currentColor",
               strokeWidth: 2,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { strokeLinecap: "round", d: "M12 8v4M12 16h.01" })
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", d: "M12 8v4M12 16h.01" })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "p",
             {
               style: {
@@ -10008,7 +10356,7 @@ function TokenSelectorStateView({
               children: tokensError
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             "button",
             {
               type: "button",
@@ -10029,7 +10377,7 @@ function TokenSelectorStateView({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       style: {
@@ -10039,8 +10387,8 @@ function TokenSelectorStateView({
         justifyContent: "center",
         padding: `0 ${spacing[4]}`
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { textAlign: "center" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
           "svg",
           {
             style: {
@@ -10053,13 +10401,13 @@ function TokenSelectorStateView({
             stroke: "currentColor",
             strokeWidth: 1.5,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { strokeLinecap: "round", d: "m21 21-4.35-4.35" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("path", { strokeLinecap: "round", d: "M8 11h6" })
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", d: "m21 21-4.35-4.35" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("path", { strokeLinecap: "round", d: "M8 11h6" })
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "p",
           {
             style: {
@@ -10069,7 +10417,7 @@ function TokenSelectorStateView({
             children: searchQuery ? `No tokens matching "${searchQuery}"` : "No tokens available"
           }
         ),
-        searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        searchQuery ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "button",
           {
             type: "button",
@@ -10092,13 +10440,13 @@ function TokenSelectorStateView({
 }
 
 // src/widget/features/token-selection/components/WalletTokenListItem.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function WalletTokenListItem({
   onSelect,
   token
 }) {
   const logoUrl = token.iconUrl || token.logo_url;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "button",
     {
       type: "button",
@@ -10116,8 +10464,8 @@ function WalletTokenListItem({
         cursor: "pointer"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { position: "relative" }, children: [
-          logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { position: "relative" }, children: [
+          logoUrl ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "img",
             {
               src: logoUrl,
@@ -10130,7 +10478,7 @@ function WalletTokenListItem({
                 flexShrink: 0
               }
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               style: {
@@ -10140,7 +10488,7 @@ function WalletTokenListItem({
                 objectFit: "cover",
                 flexShrink: 0
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "span",
                 {
                   style: {
@@ -10156,7 +10504,7 @@ function WalletTokenListItem({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               style: {
@@ -10172,7 +10520,7 @@ function WalletTokenListItem({
                 alignItems: "center",
                 justifyContent: "center"
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "img",
                 {
                   src: token.chainIconURI,
@@ -10187,8 +10535,8 @@ function WalletTokenListItem({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { flex: 1, textAlign: "left", minWidth: 0 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { flex: 1, textAlign: "left", minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
             "div",
             {
               style: {
@@ -10196,7 +10544,7 @@ function WalletTokenListItem({
                 alignItems: "center",
                 gap: spacing[1.5]
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "span",
                 {
                   style: {
@@ -10212,7 +10560,7 @@ function WalletTokenListItem({
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "span",
             {
               style: {
@@ -10237,7 +10585,7 @@ function WalletTokenListItem({
 }
 
 // src/widget/features/token-selection/components/TokenSelectorPanel.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function TokenSelectorPanel({
   filteredTokens,
   filteredWalletTokens,
@@ -10253,7 +10601,7 @@ function TokenSelectorPanel({
   tokensError,
   walletAddress
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       style: {
@@ -10263,7 +10611,7 @@ function TokenSelectorPanel({
         overflow: "hidden"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "div",
           {
             style: {
@@ -10271,7 +10619,7 @@ function TokenSelectorPanel({
               borderBottom: `1px solid rgba(63, 63, 70, 0.5)`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
                 "div",
                 {
                   style: {
@@ -10281,7 +10629,7 @@ function TokenSelectorPanel({
                     marginBottom: spacing[2]
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       "span",
                       {
                         style: {
@@ -10294,7 +10642,7 @@ function TokenSelectorPanel({
                         children: "Token"
                       }
                     ),
-                    walletAddress && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                    walletAddress && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                       "span",
                       {
                         style: {
@@ -10310,7 +10658,7 @@ function TokenSelectorPanel({
                   ]
                 }
               ),
-              selectedChain ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+              selectedChain ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                 TokenSearchInput,
                 {
                   searchQuery,
@@ -10320,7 +10668,7 @@ function TokenSelectorPanel({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
           "div",
           {
             style: {
@@ -10328,7 +10676,7 @@ function TokenSelectorPanel({
               overflowY: "auto",
               padding: `${spacing[2]} ${spacing[1]}`
             },
-            children: !selectedChain || isLoadingTokens || tokensError || filteredTokens.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+            children: !selectedChain || isLoadingTokens || tokensError || filteredTokens.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
               TokenSelectorStateView,
               {
                 isLoadingTokens,
@@ -10337,7 +10685,7 @@ function TokenSelectorPanel({
                 state: !selectedChain ? "no-chain" : tokensError ? "error" : "empty",
                 tokensError
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
               "div",
               {
                 style: {
@@ -10346,7 +10694,7 @@ function TokenSelectorPanel({
                   gap: spacing[0.5]
                 },
                 children: [
-                  filteredWalletTokens.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  filteredWalletTokens.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     "div",
                     {
                       style: {
@@ -10357,7 +10705,7 @@ function TokenSelectorPanel({
                         paddingRight: "0.5rem",
                         marginBottom: spacing[2]
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                         "span",
                         {
                           style: {
@@ -10370,7 +10718,7 @@ function TokenSelectorPanel({
                       )
                     }
                   ) : null,
-                  filteredWalletTokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  filteredWalletTokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     WalletTokenListItem,
                     {
                       token,
@@ -10378,7 +10726,7 @@ function TokenSelectorPanel({
                     },
                     `${token.address}-${i}`
                   )),
-                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     "div",
                     {
                       style: {
@@ -10389,7 +10737,7 @@ function TokenSelectorPanel({
                         paddingRight: "0.5rem",
                         marginBottom: spacing[2]
                       },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                         "span",
                         {
                           style: {
@@ -10402,7 +10750,7 @@ function TokenSelectorPanel({
                       )
                     }
                   ),
-                  filteredTokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  filteredTokens.map((token, i) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     AvailableTokenListItem,
                     {
                       token,
@@ -10410,7 +10758,7 @@ function TokenSelectorPanel({
                     },
                     `${token.address}-${i}`
                   )),
-                  hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                  hasNextPage ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
                     "button",
                     {
                       type: "button",
@@ -10443,7 +10791,7 @@ function TokenSelectorPanel({
 }
 
 // src/widget/features/token-selection/hooks/useOrderedWalletTokens.ts
-var import_react26 = require("react");
+var import_react28 = require("react");
 function useOrderedWalletTokens({
   amount,
   amountInputMode,
@@ -10452,7 +10800,7 @@ function useOrderedWalletTokens({
   setSelectedToken,
   yourWalletTokens
 }) {
-  const handleTokenChange = (0, import_react26.useCallback)(
+  const handleTokenChange = (0, import_react28.useCallback)(
     async (token) => {
       if (token) {
         setSelectedToken(token);
@@ -10461,7 +10809,7 @@ function useOrderedWalletTokens({
     },
     [setSelectedChain, setSelectedToken]
   );
-  const orderedTokens = (0, import_react26.useMemo)(() => {
+  const orderedTokens = (0, import_react28.useMemo)(() => {
     const selectedTokenChainType = selectedToken?.chainData?.type ?? selectedToken?.chainData?.chainType;
     const index = yourWalletTokens.findIndex(
       (token) => normalizeAddress2(
@@ -10530,7 +10878,7 @@ function filterTokenAmountCompatibleTokens(tokens, parsedAmount) {
 }
 
 // src/widget/features/token-selection/hooks/useSelectTokenModel.ts
-var import_react27 = require("react");
+var import_react29 = require("react");
 function useSelectTokenModel({
   goBack,
   searchQuery,
@@ -10554,7 +10902,7 @@ function useSelectTokenModel({
       explorerUrl: chain.blockExplorerUrls?.[0]
     });
   };
-  const handleTokenSelect = (0, import_react27.useCallback)(
+  const handleTokenSelect = (0, import_react29.useCallback)(
     async (token) => {
       if (token.balance !== void 0) {
         setSelectedToken(token);
@@ -10578,7 +10926,7 @@ function useSelectTokenModel({
     },
     [goBack, selectedChain, setSelectedToken, walletAddress]
   );
-  const handleYourTokenSelect = (0, import_react27.useCallback)(
+  const handleYourTokenSelect = (0, import_react29.useCallback)(
     (token) => {
       setSelectedToken(token);
       setSelectedChain(token.chainData);
@@ -10600,7 +10948,7 @@ function useSelectTokenModel({
     const address = token.address?.toLowerCase() ?? "";
     return symbol.includes(normalizedSearchQuery) || name.includes(normalizedSearchQuery) || address.includes(normalizedSearchQuery);
   };
-  const filteredWalletTokens = (0, import_react27.useMemo)(() => {
+  const filteredWalletTokens = (0, import_react29.useMemo)(() => {
     if (!selectedChain?.chainId) {
       return [];
     }
@@ -10693,7 +11041,7 @@ var feeSummaryValueStyle = {
 };
 
 // src/widget/features/amount/components/AmountBalanceRow.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function formatBalanceLabel({
   amountInputMode,
   hasUsdPrice,
@@ -10724,8 +11072,8 @@ function AmountBalanceRow({
   selectedTokenSymbol,
   tokenPriceUSD
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { style: balanceRowStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: balanceRowStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "span",
       {
         style: {
@@ -10743,7 +11091,7 @@ function AmountBalanceRow({
         })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
       "button",
       {
         type: "button",
@@ -10757,7 +11105,7 @@ function AmountBalanceRow({
 }
 
 // src/widget/features/amount/components/AmountConversionRow.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function formatTokenAmount(value) {
   const amount = Number(value ?? 0);
   if (amount <= 0) return "0";
@@ -10781,22 +11129,22 @@ function AmountConversionRow({
   selectedTokenSymbol,
   setAmountInputMode
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { style: tokenConversionRowStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: tokenConversionRowStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "span",
       {
         style: {
           fontSize: fontSize.lg,
           color: colors.mutedForeground
         },
-        children: amountInputMode === "usd" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
+        children: amountInputMode === "usd" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
           formatTokenAmount(amountComputation.tokenAmount),
           " ",
           selectedTokenSymbol
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: hasUsdPrice ? formatUsdAmount2(amountComputation.usdAmount) : "USD pricing unavailable" })
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: hasUsdPrice ? formatUsdAmount2(amountComputation.usdAmount) : "USD pricing unavailable" })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "svg",
       {
         style: {
@@ -10813,7 +11161,7 @@ function AmountConversionRow({
           if (isFixedAmount) return;
           setAmountInputMode((mode) => mode === "usd" ? "token" : "usd");
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
           "path",
           {
             strokeLinecap: "round",
@@ -10827,7 +11175,7 @@ function AmountConversionRow({
 }
 
 // src/widget/features/amount/components/AmountFeeSummary.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function formatEstimatedReceive(estimatedReceive, parsedAmount) {
   if (estimatedReceive) {
     return `~$${parseFloat(estimatedReceive).toLocaleString(void 0, {
@@ -10848,8 +11196,8 @@ function AmountFeeSummary({
   parsedAmount,
   selectedTokenDecimals
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: feeSummaryContainerStyle, children: isLoadingRoute ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: loadingFeeSummaryStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: feeSummaryContainerStyle, children: isLoadingRoute ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: loadingFeeSummaryStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
       "svg",
       {
         style: {
@@ -10861,7 +11209,7 @@ function AmountFeeSummary({
         fill: "none",
         className: "tw-animate-spin",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "circle",
             {
               style: { opacity: 0.25 },
@@ -10872,7 +11220,7 @@ function AmountFeeSummary({
               strokeWidth: "4"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
             "path",
             {
               style: { opacity: 0.75 },
@@ -10883,7 +11231,7 @@ function AmountFeeSummary({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "span",
       {
         style: {
@@ -10894,7 +11242,7 @@ function AmountFeeSummary({
         children: "Calculating fees..."
       }
     )
-  ] }) : !amount.trim() ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: emptyFeeSummaryStyle, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+  ] }) : !amount.trim() ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: emptyFeeSummaryStyle, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     "p",
     {
       style: {
@@ -10903,10 +11251,10 @@ function AmountFeeSummary({
       },
       children: "Enter an amount to continue."
     }
-  ) }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: feeSummaryRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { style: { color: colors.mutedForeground }, children: "Network fee" }),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { style: feeSummaryValueStyle, children: [
+  ) }) : /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: feeSummaryRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { style: { color: colors.mutedForeground }, children: "Network fee" }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { style: feeSummaryValueStyle, children: [
         weiToDecimalString(
           gasReservationWei,
           selectedTokenDecimals ?? 0,
@@ -10915,9 +11263,9 @@ function AmountFeeSummary({
         " "
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { style: feeSummaryDividerStyle }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { style: feeSummaryRowStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: feeSummaryDividerStyle }),
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: feeSummaryRowStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "span",
         {
           style: {
@@ -10927,7 +11275,7 @@ function AmountFeeSummary({
           children: "You'll receive"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         "span",
         {
           style: {
@@ -10942,7 +11290,7 @@ function AmountFeeSummary({
 }
 
 // src/widget/features/amount/components/CryptoPayAmountSection.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function CryptoPayAmountSection({
   amount,
   amountComputation,
@@ -10969,8 +11317,8 @@ function CryptoPayAmountSection({
   walletAddress,
   yourWalletTokensLength
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: amountSectionContainerStyle, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: amountSectionContainerStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       "p",
       {
         style: {
@@ -10982,7 +11330,7 @@ function CryptoPayAmountSection({
         children: "Enter an amount"
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       AmountInputDisplay,
       {
         amount,
@@ -10994,7 +11342,7 @@ function CryptoPayAmountSection({
         style: { marginBottom: spacing[4] }
       }
     ),
-    selectedToken ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    selectedToken ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       AmountConversionRow,
       {
         amountComputation,
@@ -11005,7 +11353,7 @@ function CryptoPayAmountSection({
         setAmountInputMode
       }
     ) : null,
-    selectedToken?.balance ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    selectedToken?.balance ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       AmountBalanceRow,
       {
         amountInputMode,
@@ -11018,7 +11366,7 @@ function CryptoPayAmountSection({
         tokenPriceUSD
       }
     ) : null,
-    selectedToken && yourWalletTokensLength > 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { style: tokenPickerContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    selectedToken && yourWalletTokensLength > 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: tokenPickerContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       TokenSwipePill,
       {
         tokens: orderedTokens,
@@ -11029,8 +11377,8 @@ function CryptoPayAmountSection({
         walletAddress
       }
     ) }) : null,
-    !isFixedAmount && selectedToken && effectiveSliderMax !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: amountSliderContainerStyle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+    !isFixedAmount && selectedToken && effectiveSliderMax !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { style: amountSliderContainerStyle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "p",
         {
           style: {
@@ -11046,7 +11394,7 @@ function CryptoPayAmountSection({
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         AmountSlider,
         {
           value: Math.min(parsedAmount, effectiveSliderMax),
@@ -11057,7 +11405,7 @@ function CryptoPayAmountSection({
         }
       )
     ] }) : null,
-    showFeeSummary ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    showFeeSummary ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       AmountFeeSummary,
       {
         amount,
@@ -11072,7 +11420,7 @@ function CryptoPayAmountSection({
 }
 
 // src/widget/features/amount/hooks/useDepositAmountModel.ts
-var import_react28 = require("react");
+var import_react30 = require("react");
 var BALANCE_TOLERANCE = 1e-9;
 function useDepositAmountModel({
   amount,
@@ -11087,14 +11435,14 @@ function useDepositAmountModel({
 }) {
   const tokenPriceUSD = typeof selectedToken?.usdPrice === "number" && Number.isFinite(selectedToken.usdPrice) && selectedToken.usdPrice > 0 ? selectedToken.usdPrice : 0;
   const hasUsdPrice = typeof tokenPriceUSD === "number" && Number.isFinite(tokenPriceUSD) && tokenPriceUSD > 0;
-  const normalizedTokenBalance = (0, import_react28.useMemo)(() => {
+  const normalizedTokenBalance = (0, import_react30.useMemo)(() => {
     if (!selectedToken?.balance) return 0;
     const normalized = Number(
       rawToDecimal(selectedToken.balance, selectedToken.decimals ?? 18)
     );
     return Number.isFinite(normalized) ? normalized : 0;
   }, [selectedToken?.balance, selectedToken?.decimals]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (fixedFromAmountString) return;
     if (isReady && !hasUsdPrice && amountInputMode === "usd") {
       setAmountInputMode("token");
@@ -11106,7 +11454,7 @@ function useDepositAmountModel({
     isReady,
     setAmountInputMode
   ]);
-  (0, import_react28.useEffect)(() => {
+  (0, import_react30.useEffect)(() => {
     if (!fixedFromAmountString) return;
     if (amount !== fixedFromAmountString) {
       setAmount(fixedFromAmountString);
@@ -11121,7 +11469,7 @@ function useDepositAmountModel({
     setAmount,
     setAmountInputMode
   ]);
-  const amountComputation = (0, import_react28.useMemo)(() => {
+  const amountComputation = (0, import_react30.useMemo)(() => {
     const rawAmount = (fixedFromAmountString ?? amount)?.trim();
     if (!rawAmount) {
       return {
@@ -11188,11 +11536,11 @@ function useDepositAmountModel({
     selectedToken?.decimals,
     tokenPriceUSD
   ]);
-  const requestedTokenAmount = (0, import_react28.useMemo)(() => {
+  const requestedTokenAmount = (0, import_react30.useMemo)(() => {
     const tokenAmount = Number(amountComputation.tokenAmount);
     return Number.isFinite(tokenAmount) ? tokenAmount : 0;
   }, [amountComputation.tokenAmount]);
-  const amountValidationError = (0, import_react28.useMemo)(() => {
+  const amountValidationError = (0, import_react30.useMemo)(() => {
     if (amountComputation.parseError) {
       return amountComputation.parseError;
     }
@@ -11225,15 +11573,15 @@ function useDepositAmountModel({
   ]);
   const amountWei = amountValidationError ? 0n : amountComputation.fromAmountWei ?? 0n;
   const parsedAmount = parseFloat(fixedFromAmountString ?? amount) || 0;
-  const maxTokenAmount = (0, import_react28.useMemo)(
+  const maxTokenAmount = (0, import_react30.useMemo)(
     () => Math.min(normalizedTokenBalance, 1e4),
     [normalizedTokenBalance]
   );
-  const maxUsdAmount = (0, import_react28.useMemo)(() => {
+  const maxUsdAmount = (0, import_react30.useMemo)(() => {
     if (!hasUsdPrice) return void 0;
     return Math.min(maxTokenAmount * tokenPriceUSD, 1e4);
   }, [hasUsdPrice, maxTokenAmount, tokenPriceUSD]);
-  const minAmountForMode = (0, import_react28.useMemo)(() => {
+  const minAmountForMode = (0, import_react30.useMemo)(() => {
     if (minAmountUsd == null) return 0;
     if (amountInputMode === "usd") {
       return minAmountUsd;
@@ -11242,11 +11590,11 @@ function useDepositAmountModel({
     return minAmountUsd / tokenPriceUSD;
   }, [amountInputMode, hasUsdPrice, minAmountUsd, tokenPriceUSD]);
   const sliderMax = amountInputMode === "usd" ? maxUsdAmount : maxTokenAmount;
-  const effectiveSliderMax = (0, import_react28.useMemo)(() => {
+  const effectiveSliderMax = (0, import_react30.useMemo)(() => {
     if (sliderMax == null || !Number.isFinite(sliderMax)) return void 0;
     return Math.max(sliderMax, 0);
   }, [sliderMax]);
-  const effectiveSliderMin = (0, import_react28.useMemo)(() => {
+  const effectiveSliderMin = (0, import_react30.useMemo)(() => {
     if (effectiveSliderMax == null || !Number.isFinite(effectiveSliderMax) || effectiveSliderMax <= 0) {
       return 0;
     }
@@ -11273,7 +11621,7 @@ function useDepositAmountModel({
 }
 
 // src/widget/features/amount/hooks/useHomeAmountModel.ts
-var import_react29 = require("react");
+var import_react31 = require("react");
 function useHomeAmountModel({
   amount,
   setAmount,
@@ -11284,7 +11632,7 @@ function useHomeAmountModel({
   minAmountUsd,
   maxAmountUsd
 }) {
-  (0, import_react29.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!fixedFromAmountString) return;
     if (amount !== fixedFromAmountString) {
       setAmount(fixedFromAmountString);
@@ -11300,7 +11648,7 @@ function useHomeAmountModel({
     setAmountInputMode
   ]);
   const parsedAmount = parseFloat(fixedFromAmountString ?? amount) || 0;
-  const amountValidationMessage = (0, import_react29.useMemo)(() => {
+  const amountValidationMessage = (0, import_react31.useMemo)(() => {
     const rawAmount = (fixedFromAmountString ?? amount)?.trim();
     if (!rawAmount) return null;
     if (!/^\d*\.?\d*$/.test(rawAmount)) {
@@ -11391,7 +11739,7 @@ var mutedOrDividerStyle = (isDarkTheme) => ({
 });
 
 // src/widget/features/wallet/components/PaymentOptionRow.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function PaymentOptionRow({
   disabled = false,
   icon,
@@ -11399,7 +11747,7 @@ function PaymentOptionRow({
   onClick,
   trailing
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "button",
     {
       type: "button",
@@ -11422,7 +11770,7 @@ function PaymentOptionRow({
         opacity: disabled ? 0.5 : 1
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
           "div",
           {
             style: {
@@ -11432,7 +11780,7 @@ function PaymentOptionRow({
             },
             children: [
               icon,
-              /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 "span",
                 {
                   style: {
@@ -11446,24 +11794,24 @@ function PaymentOptionRow({
             ]
           }
         ),
-        trailing ?? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { style: selectionRingStyle })
+        trailing ?? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { style: selectionRingStyle })
       ]
     }
   );
 }
 
 // src/widget/features/wallet/components/DetectedWalletRow.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function DetectedWalletRow({
   onSelect,
   wallet
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     PaymentOptionRow,
     {
       onClick: () => void onSelect(wallet),
       label: wallet.meta.name,
-      icon: wallet.meta.logo ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      icon: wallet.meta.logo ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "img",
         {
           src: wallet.meta.logo,
@@ -11475,7 +11823,7 @@ function DetectedWalletRow({
             objectFit: "cover"
           }
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         "div",
         {
           style: {
@@ -11487,7 +11835,7 @@ function DetectedWalletRow({
             alignItems: "center",
             justifyContent: "center"
           },
-          children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
             "span",
             {
               style: {
@@ -11505,16 +11853,16 @@ function DetectedWalletRow({
 }
 
 // src/widget/features/wallet/components/WalletConnectRow.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function WalletConnectRow({
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     PaymentOptionRow,
     {
       onClick: () => void onClick(),
       label: "WalletConnect",
-      icon: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { style: walletActionIconBoxStyle, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      icon: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { style: walletActionIconBoxStyle, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "svg",
         {
           style: {
@@ -11524,10 +11872,10 @@ function WalletConnectRow({
           },
           viewBox: "0 0 24 24",
           fill: "currentColor",
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { d: "M6.09 10.56c3.26-3.2 8.56-3.2 11.82 0l.39.39a.4.4 0 010 .58l-1.34 1.31a.21.21 0 01-.3 0l-.54-.53c-2.28-2.23-5.97-2.23-8.24 0l-.58.56a.21.21 0 01-.3 0L5.66 11.6a.4.4 0 010-.58l.43-.46zm14.6 2.72l1.2 1.17a.4.4 0 010 .58l-5.38 5.27a.43.43 0 01-.6 0l-3.82-3.74a.11.11 0 00-.15 0l-3.82 3.74a.43.43 0 01-.6 0L2.15 15.03a.4.4 0 010-.58l1.2-1.17a.43.43 0 01.6 0l3.82 3.74c.04.04.1.04.15 0l3.82-3.74a.43.43 0 01.6 0l3.82 3.74c.04.04.1.04.15 0l3.82-3.74a.43.43 0 01.6 0z" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { d: "M6.09 10.56c3.26-3.2 8.56-3.2 11.82 0l.39.39a.4.4 0 010 .58l-1.34 1.31a.21.21 0 01-.3 0l-.54-.53c-2.28-2.23-5.97-2.23-8.24 0l-.58.56a.21.21 0 01-.3 0L5.66 11.6a.4.4 0 010-.58l.43-.46zm14.6 2.72l1.2 1.17a.4.4 0 010 .58l-5.38 5.27a.43.43 0 01-.6 0l-3.82-3.74a.11.11 0 00-.15 0l-3.82 3.74a.43.43 0 01-.6 0L2.15 15.03a.4.4 0 010-.58l1.2-1.17a.43.43 0 01.6 0l3.82 3.74c.04.04.1.04.15 0l3.82-3.74a.43.43 0 01.6 0l3.82 3.74c.04.04.1.04.15 0l3.82-3.74a.43.43 0 01.6 0z" })
         }
       ) }),
-      trailing: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      trailing: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         "svg",
         {
           style: {
@@ -11539,7 +11887,7 @@ function WalletConnectRow({
           fill: "none",
           stroke: "currentColor",
           strokeWidth: 2,
-          children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
         }
       )
     }
@@ -11547,9 +11895,9 @@ function WalletConnectRow({
 }
 
 // src/widget/features/wallet/components/WalletDropdownEmptyState.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function WalletDropdownEmptyState() {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "p",
     {
       style: {
@@ -11564,13 +11912,13 @@ function WalletDropdownEmptyState() {
 }
 
 // src/widget/features/wallet/components/CryptoWalletDropdownContent.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function CryptoWalletDropdownContent({
   browserWallets,
   handleWalletConnect,
   handleWalletSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "div",
     {
       style: {
@@ -11587,10 +11935,10 @@ function CryptoWalletDropdownContent({
         scrollbarColor: `${colors.muted} transparent`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: { padding: spacing[3] }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { style: dropdownSectionHeadingStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: dropdownStatusDotStyle(colors.green[500]) }),
-            /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: { padding: spacing[3] }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: dropdownSectionHeadingStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: dropdownStatusDotStyle(colors.green[500]) }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               "span",
               {
                 style: {
@@ -11602,7 +11950,7 @@ function CryptoWalletDropdownContent({
               }
             )
           ] }),
-          browserWallets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          browserWallets.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "div",
             {
               style: {
@@ -11610,7 +11958,7 @@ function CryptoWalletDropdownContent({
                 flexDirection: "column",
                 gap: spacing[1]
               },
-              children: browserWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+              children: browserWallets.map((wallet) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
                 DetectedWalletRow,
                 {
                   wallet,
@@ -11619,19 +11967,19 @@ function CryptoWalletDropdownContent({
                 wallet.meta.id
               ))
             }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(WalletDropdownEmptyState, {})
+          ) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(WalletDropdownEmptyState, {})
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: dividerBorderStyle }),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { style: { padding: spacing[3] }, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(WalletConnectRow, { onClick: handleWalletConnect }) })
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: dividerBorderStyle }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { padding: spacing[3] }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(WalletConnectRow, { onClick: handleWalletConnect }) })
       ]
     }
   );
 }
 
 // src/widget/features/wallet/components/FiatComingSoonBanner.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function FiatComingSoonBanner() {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
     "div",
     {
       style: {
@@ -11639,7 +11987,7 @@ function FiatComingSoonBanner() {
         backgroundColor: "rgba(245, 158, 11, 0.1)",
         borderBottom: "1px solid rgba(245, 158, 11, 0.2)"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "p",
         {
           style: {
@@ -11656,29 +12004,29 @@ function FiatComingSoonBanner() {
 }
 
 // src/widget/features/wallet/components/FiatMethodRow.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function FiatMethodRow({
   method,
   onSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     PaymentOptionRow,
     {
       onClick: onSelect,
       disabled: true,
       label: method.name,
-      icon: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { style: { color: colors.mutedForeground }, children: method.icon })
+      icon: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { style: { color: colors.mutedForeground }, children: method.icon })
     }
   );
 }
 
 // src/widget/features/wallet/components/FiatPaymentDropdownContent.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function FiatPaymentDropdownContent({
   fiatOptions: fiatOptions2,
   handleFiatSelect
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "div",
     {
       style: {
@@ -11692,11 +12040,11 @@ function FiatPaymentDropdownContent({
         animation: "tw-fade-in 0.2s ease-out"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(FiatComingSoonBanner, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: { padding: spacing[3] }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { style: dropdownSectionHeadingStyle, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: dropdownStatusDotStyle(colors.primary) }),
-            /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(FiatComingSoonBanner, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { padding: spacing[3] }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: dropdownSectionHeadingStyle, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: dropdownStatusDotStyle(colors.primary) }),
+            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
               "span",
               {
                 style: {
@@ -11708,7 +12056,7 @@ function FiatPaymentDropdownContent({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             "div",
             {
               style: {
@@ -11716,7 +12064,7 @@ function FiatPaymentDropdownContent({
                 flexDirection: "column",
                 gap: spacing[1]
               },
-              children: fiatOptions2.map((method) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+              children: fiatOptions2.map((method) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
                 FiatMethodRow,
                 {
                   method,
@@ -11733,9 +12081,9 @@ function FiatPaymentDropdownContent({
 }
 
 // src/widget/features/wallet/components/paymentOptionIcons.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function CryptoPaymentIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "svg",
     {
       style: {
@@ -11747,7 +12095,7 @@ function CryptoPaymentIcon() {
       fill: "none",
       stroke: "currentColor",
       strokeWidth: 2,
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         "path",
         {
           strokeLinecap: "round",
@@ -11759,7 +12107,7 @@ function CryptoPaymentIcon() {
   );
 }
 function FiatPaymentIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "svg",
     {
       style: {
@@ -11772,94 +12120,94 @@ function FiatPaymentIcon() {
       stroke: "currentColor",
       strokeWidth: 2,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", ry: "2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("line", { x1: "1", y1: "10", x2: "23", y2: "10" })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("rect", { x: "1", y: "4", width: "22", height: "16", rx: "2", ry: "2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("line", { x1: "1", y1: "10", x2: "23", y2: "10" })
       ]
     }
   );
 }
 function ApplePayIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "svg",
     {
       style: { width: "2rem", height: "1.25rem" },
       viewBox: "0 0 50 20",
       fill: "currentColor",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M9.6 4.8c-.6.7-1.5 1.3-2.4 1.2-.1-.9.3-1.9.9-2.5.6-.7 1.6-1.2 2.4-1.2.1 1-.3 1.9-.9 2.5zm.9 1.3c-1.3-.1-2.5.8-3.1.8-.6 0-1.6-.7-2.7-.7-1.4 0-2.6.8-3.4 2-.7 1.2-.5 3.5.6 5.5.5.9 1.2 1.9 2.1 1.9.8 0 1.2-.5 2.3-.5s1.4.5 2.4.5c.9 0 1.5-.9 2-1.8.4-.6.5-1.2.7-1.8-1.6-.6-2-2.6-1.4-4-.4-.5-1-1.3-1.5-1.9z" }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M18.4 2.1c2.3 0 4 1.6 4 3.9s-1.7 3.9-4.1 3.9h-2.6v4h-1.8V2.1h4.5zm-2.7 6.2h2.2c1.6 0 2.5-.9 2.5-2.4s-.9-2.4-2.5-2.4h-2.2v4.8zm6.4 3.2c0-1.5 1.2-2.5 3.3-2.6l2.4-.1v-.7c0-1-.7-1.6-1.8-1.6-1 0-1.7.5-1.8 1.3h-1.6c.1-1.5 1.4-2.7 3.5-2.7 2.1 0 3.4 1.1 3.4 2.9v6h-1.6v-1.4c-.5 1-1.5 1.6-2.7 1.6-1.7 0-2.9-1-2.9-2.7h-.2zm5.7-.8v-.7l-2.2.1c-1.1.1-1.8.6-1.8 1.4 0 .8.6 1.3 1.6 1.3 1.3 0 2.4-.9 2.4-2.1zm3.2 5.8v-1.4c.1 0 .5.1.7.1 1 0 1.5-.4 1.8-1.5l.2-.6-3.1-8.6h1.9l2.2 6.9 2.2-6.9h1.8l-3.2 9c-.7 2-1.5 2.7-3.3 2.7-.2 0-.6 0-.8-.1l-.4.4z" })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M9.6 4.8c-.6.7-1.5 1.3-2.4 1.2-.1-.9.3-1.9.9-2.5.6-.7 1.6-1.2 2.4-1.2.1 1-.3 1.9-.9 2.5zm.9 1.3c-1.3-.1-2.5.8-3.1.8-.6 0-1.6-.7-2.7-.7-1.4 0-2.6.8-3.4 2-.7 1.2-.5 3.5.6 5.5.5.9 1.2 1.9 2.1 1.9.8 0 1.2-.5 2.3-.5s1.4.5 2.4.5c.9 0 1.5-.9 2-1.8.4-.6.5-1.2.7-1.8-1.6-.6-2-2.6-1.4-4-.4-.5-1-1.3-1.5-1.9z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M18.4 2.1c2.3 0 4 1.6 4 3.9s-1.7 3.9-4.1 3.9h-2.6v4h-1.8V2.1h4.5zm-2.7 6.2h2.2c1.6 0 2.5-.9 2.5-2.4s-.9-2.4-2.5-2.4h-2.2v4.8zm6.4 3.2c0-1.5 1.2-2.5 3.3-2.6l2.4-.1v-.7c0-1-.7-1.6-1.8-1.6-1 0-1.7.5-1.8 1.3h-1.6c.1-1.5 1.4-2.7 3.5-2.7 2.1 0 3.4 1.1 3.4 2.9v6h-1.6v-1.4c-.5 1-1.5 1.6-2.7 1.6-1.7 0-2.9-1-2.9-2.7h-.2zm5.7-.8v-.7l-2.2.1c-1.1.1-1.8.6-1.8 1.4 0 .8.6 1.3 1.6 1.3 1.3 0 2.4-.9 2.4-2.1zm3.2 5.8v-1.4c.1 0 .5.1.7.1 1 0 1.5-.4 1.8-1.5l.2-.6-3.1-8.6h1.9l2.2 6.9 2.2-6.9h1.8l-3.2 9c-.7 2-1.5 2.7-3.3 2.7-.2 0-.6 0-.8-.1l-.4.4z" })
       ]
     }
   );
 }
 function MPesaIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "svg",
     {
       style: { width: "2rem", height: "1.25rem" },
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z" })
     }
   );
 }
 function VenmoIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "svg",
     {
       style: { width: "2rem", height: "1.25rem" },
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M19.5 3h-15C3.12 3 2 4.12 2 5.5v13C2 19.88 3.12 21 4.5 21h15c1.38 0 2.5-1.12 2.5-2.5v-13C22 4.12 20.88 3 19.5 3zm-4.77 11.58c-.64 1.56-2.13 3.42-3.86 3.42H8.69l-.61-3.55 1.13-.21.28 1.64c.25.14.52.22.79.22.68 0 1.31-.48 1.74-1.34.33-.67.44-1.34.44-1.92 0-.45-.11-.82-.38-1.06-.24-.22-.58-.33-.98-.33-.64 0-1.29.28-1.86.61l-.05-.02.61-4.04h4.13l-.16 1.11H11l-.21 1.4c.41-.13.85-.19 1.28-.19.71 0 1.31.2 1.73.61.46.44.67 1.08.67 1.88 0 .68-.15 1.35-.48 2.01z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M19.5 3h-15C3.12 3 2 4.12 2 5.5v13C2 19.88 3.12 21 4.5 21h15c1.38 0 2.5-1.12 2.5-2.5v-13C22 4.12 20.88 3 19.5 3zm-4.77 11.58c-.64 1.56-2.13 3.42-3.86 3.42H8.69l-.61-3.55 1.13-.21.28 1.64c.25.14.52.22.79.22.68 0 1.31-.48 1.74-1.34.33-.67.44-1.34.44-1.92 0-.45-.11-.82-.38-1.06-.24-.22-.58-.33-.98-.33-.64 0-1.29.28-1.86.61l-.05-.02.61-4.04h4.13l-.16 1.11H11l-.21 1.4c.41-.13.85-.19 1.28-.19.71 0 1.31.2 1.73.61.46.44.67 1.08.67 1.88 0 .68-.15 1.35-.48 2.01z" })
     }
   );
 }
 function ZelleIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "svg",
     {
       style: { width: "2rem", height: "1.25rem" },
       viewBox: "0 0 24 24",
       fill: "currentColor",
-      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("path", { d: "M13.25 4H5.5C4.67 4 4 4.67 4 5.5v13c0 .83.67 1.5 1.5 1.5h13c.83 0 1.5-.67 1.5-1.5v-7.75h-2v6.25H6V7h7.25V4zm3.91 2.83L9.83 14.17l-1.42-1.41 7.33-7.34L13.83 3.5h6.67v6.67l-1.92-1.92-1.42-1.42z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("path", { d: "M13.25 4H5.5C4.67 4 4 4.67 4 5.5v13c0 .83.67 1.5 1.5 1.5h13c.83 0 1.5-.67 1.5-1.5v-7.75h-2v6.25H6V7h7.25V4zm3.91 2.83L9.83 14.17l-1.42-1.41 7.33-7.34L13.83 3.5h6.67v6.67l-1.92-1.92-1.42-1.42z" })
     }
   );
 }
 
 // src/widget/features/wallet/components/fiatOptions.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var fiatOptions = [
   {
     id: "applepay",
     name: "Apple Pay",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ApplePayIcon, {})
+    icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ApplePayIcon, {})
   },
   {
     id: "mpesa",
     name: "M-Pesa",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(MPesaIcon, {})
+    icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(MPesaIcon, {})
   },
   {
     id: "venmo",
     name: "Venmo",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(VenmoIcon, {})
+    icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(VenmoIcon, {})
   },
   {
     id: "zelle",
     name: "Zelle",
-    icon: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(ZelleIcon, {})
+    icon: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ZelleIcon, {})
   }
 ];
 
 // src/widget/features/wallet/components/PaymentDropdownButton.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function PaymentDropdownButton({
   icon,
   isOpen,
   label,
   onClick
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "button",
     {
       type: "button",
@@ -11885,7 +12233,7 @@ function PaymentDropdownButton({
       },
       children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "span",
           {
             style: {
@@ -11898,7 +12246,7 @@ function PaymentDropdownButton({
             children: label
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "svg",
           {
             style: {
@@ -11912,7 +12260,7 @@ function PaymentDropdownButton({
             fill: "none",
             stroke: "currentColor",
             strokeWidth: 2,
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
           }
         )
       ]
@@ -11921,7 +12269,7 @@ function PaymentDropdownButton({
 }
 
 // src/widget/features/wallet/components/HomePaymentOptions.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function HomePaymentOptions({
   browserWallets,
   cryptoDropdownRef,
@@ -11935,7 +12283,7 @@ function HomePaymentOptions({
   setIsCryptoDropdownOpen,
   setIsFiatDropdownOpen
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
     "div",
     {
       style: {
@@ -11948,16 +12296,16 @@ function HomePaymentOptions({
         minHeight: "6rem"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           "div",
           {
             style: isCryptoDropdownOpen ? dropdownWrapperOpenStyle : dropdownWrapperStyle,
             ref: cryptoDropdownRef,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 PaymentDropdownButton,
                 {
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(CryptoPaymentIcon, {}),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(CryptoPaymentIcon, {}),
                   isOpen: isCryptoDropdownOpen,
                   label: "Pay with crypto",
                   onClick: () => {
@@ -11966,7 +12314,7 @@ function HomePaymentOptions({
                   }
                 }
               ),
-              isCryptoDropdownOpen ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              isCryptoDropdownOpen ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 CryptoWalletDropdownContent,
                 {
                   browserWallets,
@@ -11977,9 +12325,9 @@ function HomePaymentOptions({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: dividerRowStyle, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: mutedOrDividerStyle(isDarkTheme) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: dividerRowStyle, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: mutedOrDividerStyle(isDarkTheme) }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
             "span",
             {
               style: {
@@ -11990,18 +12338,18 @@ function HomePaymentOptions({
               children: "Or"
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { style: mutedOrDividerStyle(isDarkTheme) })
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: mutedOrDividerStyle(isDarkTheme) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
           "div",
           {
             style: isFiatDropdownOpen ? dropdownWrapperOpenStyle : dropdownWrapperStyle,
             ref: fiatDropdownRef,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 PaymentDropdownButton,
                 {
-                  icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(FiatPaymentIcon, {}),
+                  icon: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(FiatPaymentIcon, {}),
                   isOpen: isFiatDropdownOpen,
                   label: "Pay with fiat",
                   onClick: () => {
@@ -12010,7 +12358,7 @@ function HomePaymentOptions({
                   }
                 }
               ),
-              isFiatDropdownOpen ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              isFiatDropdownOpen ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                 FiatPaymentDropdownContent,
                 {
                   fiatOptions,
@@ -12026,7 +12374,7 @@ function HomePaymentOptions({
 }
 
 // src/widget/features/wallet/hooks/useHomeWalletActions.ts
-var import_react30 = require("react");
+var import_react32 = require("react");
 
 // src/config/walletconnect.ts
 var import_appkit_universal_connector = require("@reown/appkit-universal-connector");
@@ -12149,12 +12497,12 @@ function useHomeWalletActions({
   detectedWallets,
   setCurrentStep
 }) {
-  const [isCryptoDropdownOpen, setIsCryptoDropdownOpen] = (0, import_react30.useState)(false);
-  const [isFiatDropdownOpen, setIsFiatDropdownOpen] = (0, import_react30.useState)(false);
-  const [universalConnector, setUniversalConnector] = (0, import_react30.useState)();
-  const cryptoDropdownRef = (0, import_react30.useRef)(null);
-  const fiatDropdownRef = (0, import_react30.useRef)(null);
-  (0, import_react30.useEffect)(() => {
+  const [isCryptoDropdownOpen, setIsCryptoDropdownOpen] = (0, import_react32.useState)(false);
+  const [isFiatDropdownOpen, setIsFiatDropdownOpen] = (0, import_react32.useState)(false);
+  const [universalConnector, setUniversalConnector] = (0, import_react32.useState)();
+  const cryptoDropdownRef = (0, import_react32.useRef)(null);
+  const fiatDropdownRef = (0, import_react32.useRef)(null);
+  (0, import_react32.useEffect)(() => {
     const handleClickOutside = (event) => {
       if (cryptoDropdownRef.current && !cryptoDropdownRef.current.contains(event.target)) {
         setIsCryptoDropdownOpen(false);
@@ -12166,7 +12514,7 @@ function useHomeWalletActions({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  (0, import_react30.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     getUniversalConnector().then(setUniversalConnector);
   }, []);
   const handleWalletSelect = async (wallet) => {
@@ -12207,7 +12555,7 @@ function useHomeWalletActions({
 }
 
 // src/widget/pages/Home.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function Home({ style: _style }) {
   const { amount, setAmount, amountInputMode, setAmountInputMode } = useDepositForm();
   const { setCurrentStep } = useDepositNavigation();
@@ -12241,7 +12589,7 @@ function Home({ style: _style }) {
     detectedWallets,
     setCurrentStep
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       style: {
@@ -12250,7 +12598,7 @@ function Home({ style: _style }) {
         minHeight: "500px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
           "div",
           {
             style: {
@@ -12260,7 +12608,7 @@ function Home({ style: _style }) {
               padding: `${spacing[4]} ${spacing[4]}`,
               borderBottom: `1px solid ${colors.border}`
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "h1",
               {
                 style: {
@@ -12273,7 +12621,7 @@ function Home({ style: _style }) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
           "div",
           {
             style: {
@@ -12287,7 +12635,7 @@ function Home({ style: _style }) {
               position: "relative"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 "p",
                 {
                   style: {
@@ -12298,7 +12646,7 @@ function Home({ style: _style }) {
                   children: "Enter an amount"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 AmountInputDisplay,
                 {
                   amount,
@@ -12309,7 +12657,7 @@ function Home({ style: _style }) {
                   style: { marginBottom: spacing[8] }
                 }
               ),
-              amountValidationMessage ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              amountValidationMessage ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 "p",
                 {
                   style: {
@@ -12322,7 +12670,7 @@ function Home({ style: _style }) {
                   },
                   children: amountValidationMessage
                 }
-              ) : minAmountUsd != null || maxAmountUsd != null ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              ) : minAmountUsd != null || maxAmountUsd != null ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 "p",
                 {
                   style: {
@@ -12338,7 +12686,7 @@ function Home({ style: _style }) {
                   ].filter(Boolean).join(" \u2022 ")
                 }
               ) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
                 HomePaymentOptions,
                 {
                   browserWallets,
@@ -12357,14 +12705,14 @@ function Home({ style: _style }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(WidgetSecurityFooter, {})
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(WidgetSecurityFooter, {})
       ]
     }
   );
 }
 
 // src/widget/pages/SelectToken.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function SelectToken({ style }) {
   const { selectedChain, setSelectedChain, setSelectedToken } = useDepositForm();
   const { goBack } = useDepositNavigation();
@@ -12395,7 +12743,7 @@ function SelectToken({ style }) {
     walletAddress,
     yourWalletTokens
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     "div",
     {
       style: {
@@ -12406,7 +12754,7 @@ function SelectToken({ style }) {
         ...style
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "div",
           {
             style: {
@@ -12416,7 +12764,7 @@ function SelectToken({ style }) {
               borderBottom: `1px solid ${colors.border}`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 "button",
                 {
                   type: "button",
@@ -12431,7 +12779,7 @@ function SelectToken({ style }) {
                     cursor: "pointer"
                   },
                   "aria-label": "Go back",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                     "svg",
                     {
                       style: {
@@ -12443,7 +12791,7 @@ function SelectToken({ style }) {
                       fill: "none",
                       stroke: "currentColor",
                       strokeWidth: 2,
-                      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -12455,7 +12803,7 @@ function SelectToken({ style }) {
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 "h1",
                 {
                   style: {
@@ -12472,7 +12820,7 @@ function SelectToken({ style }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           "div",
           {
             style: {
@@ -12481,7 +12829,7 @@ function SelectToken({ style }) {
               overflow: "hidden"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 ChainSelectorPanel,
                 {
                   error,
@@ -12492,7 +12840,7 @@ function SelectToken({ style }) {
                   popularChains
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 TokenSelectorPanel,
                 {
                   filteredTokens,
@@ -12513,17 +12861,17 @@ function SelectToken({ style }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(WidgetSecurityFooter, {})
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(WidgetSecurityFooter, {})
       ]
     }
   );
 }
 
 // src/widget/pages/CryptoPay.tsx
-var import_react33 = require("react");
+var import_react35 = require("react");
 
 // src/widget/features/route-preview/hooks/useRoutePreviewModel.ts
-var import_react31 = require("react");
+var import_react33 = require("react");
 function useRoutePreviewModel({
   amountUsd,
   amountValidationError,
@@ -12536,7 +12884,7 @@ function useRoutePreviewModel({
   walletAddress
 }) {
   const { chains } = useChains();
-  const destinationConfig = (0, import_react31.useMemo)(
+  const destinationConfig = (0, import_react33.useMemo)(
     () => ({
       dappName: config.messages?.title || "DApp",
       toChain: config.routes.toChain,
@@ -12550,7 +12898,7 @@ function useRoutePreviewModel({
       config.routes.toToken
     ]
   );
-  const routeConfig = (0, import_react31.useMemo)(() => {
+  const routeConfig = (0, import_react33.useMemo)(() => {
     const toChainId = config.routes.toChain;
     const toChainKey = normalizeChainKey2(toChainId);
     const toChain = toChainKey ? chains.find(
@@ -12584,7 +12932,7 @@ function useRoutePreviewModel({
     walletAddress
   ]);
   const routeBuilderState = useRouteBuilder(routeConfig);
-  const routePrerequisiteError = (0, import_react31.useMemo)(() => {
+  const routePrerequisiteError = (0, import_react33.useMemo)(() => {
     if (!isReady) return;
     if (!selectedChain) {
       return "Select a source chain to fetch a route.";
@@ -12624,7 +12972,7 @@ function useRoutePreviewModel({
 }
 
 // src/widget/features/transaction/components/CryptoPaySwipeSection.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function CryptoPaySwipeSection({
   actionErrorMessage,
   canSwipe,
@@ -12640,13 +12988,13 @@ function CryptoPaySwipeSection({
   swipeResetKey
 }) {
   const swipeText = actionErrorMessage ? actionErrorMessage : !isWalletConnected ? "Connect your wallet to deposit" : isLoadingRoute ? "Loading route..." : isApproving ? "Approving..." : isReadingAllowance ? "Checking allowance..." : needsApproval ? "Swipe to approve" : "Swipe to confirm";
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "div",
     {
       style: {
         padding: `${spacing[4]} ${spacing[6]}`
       },
-      children: selectedToken?.chainData ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+      children: selectedToken?.chainData ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         SwipeToConfirmTokens,
         {
           text: swipeText,
@@ -12666,7 +13014,7 @@ function CryptoPaySwipeSection({
 }
 
 // src/widget/features/transaction/components/ErrorRecoveryCard.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function ErrorRecoveryCard({
   errorMessage,
   errorSuggestion,
@@ -12677,7 +13025,7 @@ function ErrorRecoveryCard({
   renderErrorIcon,
   transactionHash
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       style: {
@@ -12689,7 +13037,7 @@ function ErrorRecoveryCard({
         padding: `${spacing[8]} ${spacing[6]}`
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "div",
           {
             style: {
@@ -12705,7 +13053,7 @@ function ErrorRecoveryCard({
             children: renderErrorIcon()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "h2",
           {
             style: {
@@ -12718,7 +13066,7 @@ function ErrorRecoveryCard({
             children: errorTitle
           }
         ),
-        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "p",
           {
             style: {
@@ -12730,7 +13078,7 @@ function ErrorRecoveryCard({
             children: errorMessage
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "p",
           {
             style: {
@@ -12743,13 +13091,13 @@ function ErrorRecoveryCard({
             children: errorSuggestion
           }
         ),
-        explorerUrl && transactionHash ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        explorerUrl && transactionHash ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           "div",
           {
             style: {
               marginBottom: spacing[6]
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               TransactionHashLink,
               {
                 explorerUrl,
@@ -12759,7 +13107,7 @@ function ErrorRecoveryCard({
             )
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "div",
           {
             style: {
@@ -12770,7 +13118,7 @@ function ErrorRecoveryCard({
               maxWidth: "20rem"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 "button",
                 {
                   type: "button",
@@ -12790,7 +13138,7 @@ function ErrorRecoveryCard({
                   children: "Try Again"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
                 "button",
                 {
                   type: "button",
@@ -12819,7 +13167,7 @@ function ErrorRecoveryCard({
 }
 
 // src/widget/features/transaction/components/SuccessSummaryCard.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function SuccessSummaryCard({
   amount,
   explorerUrl,
@@ -12829,7 +13177,7 @@ function SuccessSummaryCard({
   selectedTokenSymbol,
   transactionHash
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
     "div",
     {
       style: {
@@ -12843,7 +13191,7 @@ function SuccessSummaryCard({
         animation: "fade-in 0.3s ease-out"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           "div",
           {
             style: {
@@ -12853,7 +13201,7 @@ function SuccessSummaryCard({
               marginBottom: "2rem"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 "div",
                 {
                   style: {
@@ -12867,7 +13215,7 @@ function SuccessSummaryCard({
                     animation: "scale-in 0.3s ease-out",
                     marginBottom: "0.75rem"
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                     "svg",
                     {
                       style: {
@@ -12880,7 +13228,7 @@ function SuccessSummaryCard({
                       stroke: "currentColor",
                       strokeWidth: 2.5,
                       "aria-hidden": "true",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                         "path",
                         {
                           strokeLinecap: "round",
@@ -12892,7 +13240,7 @@ function SuccessSummaryCard({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                 "div",
                 {
                   style: {
@@ -12906,7 +13254,7 @@ function SuccessSummaryCard({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
           "div",
           {
             style: {
@@ -12916,7 +13264,7 @@ function SuccessSummaryCard({
               marginBottom: "2rem"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
                 "div",
                 {
                   style: {
@@ -12933,7 +13281,7 @@ function SuccessSummaryCard({
                   ]
                 }
               ),
-              selectedTokenIconUrl && selectedTokenSymbol ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+              selectedTokenIconUrl && selectedTokenSymbol ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
                 "div",
                 {
                   style: {
@@ -12943,7 +13291,7 @@ function SuccessSummaryCard({
                     marginTop: "0.375rem"
                   },
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
                       "img",
                       {
                         src: selectedTokenIconUrl,
@@ -12955,7 +13303,7 @@ function SuccessSummaryCard({
                         }
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
                       "span",
                       {
                         style: {
@@ -12974,13 +13322,13 @@ function SuccessSummaryCard({
             ]
           }
         ),
-        transactionHash ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        transactionHash ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "div",
           {
             style: {
               marginBottom: "2rem"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               TransactionHashLink,
               {
                 explorerUrl,
@@ -12990,14 +13338,14 @@ function SuccessSummaryCard({
             )
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "div",
           {
             style: {
               width: "100%",
               padding: "1rem"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
               "button",
               {
                 type: "button",
@@ -13023,8 +13371,9 @@ function SuccessSummaryCard({
 }
 
 // src/widget/features/transaction/hooks/useTransactionActionModel.ts
-var import_react32 = require("react");
+var import_react34 = require("react");
 var import_viem2 = require("viem");
+init_constants();
 function normalizeTokenAddressForCompare(chain, addr) {
   const chainType = (chain.type ?? chain.chainType ?? "").toLowerCase();
   const value = (addr ?? "").trim();
@@ -13045,12 +13394,20 @@ function useTransactionActionModel({
   walletAddress,
   walletStatus
 }) {
-  const feeDataCacheRef = (0, import_react32.useRef)({});
+  const feeDataCacheRef = (0, import_react34.useRef)({});
   const { isSubmitting, submitTransaction } = useTransactionSubmit();
+  const { trackEvent } = useGTM(GTM_ID);
+  const destinationConfig = (() => {
+    try {
+      return Trustware.getConfig();
+    } catch {
+      return void 0;
+    }
+  })();
   const chainType = selectedChain?.type ?? selectedChain?.chainType;
   const chainTypeNormalized = (chainType ?? "").toLowerCase();
   const isEvm = chainTypeNormalized === "evm";
-  const backendChainId2 = (0, import_react32.useMemo)(() => {
+  const backendChainId2 = (0, import_react34.useMemo)(() => {
     const chainRef = routeResult?.txReq?.chainId ?? selectedChain?.networkIdentifier ?? selectedChain?.chainId ?? selectedChain?.id;
     if (chainRef == null) return null;
     return String(chainRef);
@@ -13060,23 +13417,23 @@ function useTransactionActionModel({
     selectedChain?.id,
     selectedChain?.networkIdentifier
   ]);
-  const isNativeSelected = (0, import_react32.useMemo)(() => {
+  const isNativeSelected = (0, import_react34.useMemo)(() => {
     const address = selectedToken?.address;
     return isNativeTokenAddress(address, chainType) || isZeroAddrLike(address, chainType) || normalizeTokenAddressForCompare(selectedChain, address) === normalizeTokenAddressForCompare(
       selectedChain,
       getNativeTokenAddress2(chainType)
     );
   }, [chainType, selectedChain, selectedToken?.address]);
-  const spender = (0, import_react32.useMemo)(() => {
+  const spender = (0, import_react34.useMemo)(() => {
     const txReq = routeResult?.txReq;
     const addr = txReq?.to ?? txReq?.target;
     return addr ?? null;
   }, [routeResult?.txReq]);
-  const [allowanceWei, setAllowanceWei] = (0, import_react32.useState)(0n);
-  const [isReadingAllowance, setIsReadingAllowance] = (0, import_react32.useState)(false);
-  const [isApproving, setIsApproving] = (0, import_react32.useState)(false);
-  const [gasReservationWei, setGasReservationWei] = (0, import_react32.useState)(0n);
-  const readAllowance = (0, import_react32.useCallback)(async () => {
+  const [allowanceWei, setAllowanceWei] = (0, import_react34.useState)(0n);
+  const [isReadingAllowance, setIsReadingAllowance] = (0, import_react34.useState)(false);
+  const [isApproving, setIsApproving] = (0, import_react34.useState)(false);
+  const [gasReservationWei, setGasReservationWei] = (0, import_react34.useState)(0n);
+  const readAllowance = (0, import_react34.useCallback)(async () => {
     if (!isEvm || isNativeSelected || !backendChainId2 || !walletAddress || !spender || !selectedToken?.address) {
       setAllowanceWei(0n);
       return;
@@ -13103,11 +13460,11 @@ function useTransactionActionModel({
     spender,
     walletAddress
   ]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     void readAllowance();
   }, [readAllowance]);
   const needsApproval = isEvm && !isNativeSelected && !!walletAddress && !!spender && amountWei > 0n && allowanceWei < amountWei;
-  const waitForApprovalConfirmation = (0, import_react32.useCallback)(
+  const waitForApprovalConfirmation = (0, import_react34.useCallback)(
     async (chainId, txHash) => {
       const timeoutMs = 12e4;
       const intervalMs = 2e3;
@@ -13126,7 +13483,7 @@ function useTransactionActionModel({
     },
     []
   );
-  const handleApproveExact = (0, import_react32.useCallback)(async () => {
+  const handleApproveExact = (0, import_react34.useCallback)(async () => {
     if (isApproving || amountWei <= 0n || !walletAddress || !spender || !selectedToken?.address) {
       return;
     }
@@ -13134,6 +13491,13 @@ function useTransactionActionModel({
     if (!wallet || wallet.ecosystem !== "evm") {
       return;
     }
+    trackEvent("token_approval_initiated", {
+      from_chain: selectedChain?.networkName ?? selectedChain?.axelarChainName ?? selectedChain?.chainId,
+      from_token: selectedToken?.symbol,
+      to_chain: destinationConfig?.routes.toChain,
+      to_token: destinationConfig?.routes.toToken,
+      domain: window.origin
+    });
     setIsApproving(true);
     try {
       const targetChain = Number(
@@ -13191,17 +13555,23 @@ function useTransactionActionModel({
   }, [
     amountWei,
     backendChainId2,
+    destinationConfig?.routes.toChain,
+    destinationConfig?.routes.toToken,
     isApproving,
     readAllowance,
     routeResult?.txReq?.chainId,
+    selectedChain?.axelarChainName,
     selectedChain?.chainId,
     selectedChain?.id,
+    selectedChain?.networkName,
     selectedToken?.address,
+    selectedToken?.symbol,
     spender,
+    trackEvent,
     waitForApprovalConfirmation,
     walletAddress
   ]);
-  const getCachedFeeData = (0, import_react32.useCallback)(async () => {
+  const getCachedFeeData = (0, import_react34.useCallback)(async () => {
     if (!backendChainId2) return {};
     const now = Date.now();
     const cache = feeDataCacheRef.current;
@@ -13224,7 +13594,7 @@ function useTransactionActionModel({
     }
     return cache.inflight;
   }, [backendChainId2]);
-  const estimateGasReservationWei = (0, import_react32.useCallback)(async () => {
+  const estimateGasReservationWei = (0, import_react34.useCallback)(async () => {
     if (!isNativeSelected) {
       setGasReservationWei(0n);
       return 0n;
@@ -13288,18 +13658,35 @@ function useTransactionActionModel({
     routeResult?.txReq,
     walletAddress
   ]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     if (routeResult) {
       void estimateGasReservationWei();
     }
   }, [estimateGasReservationWei, routeResult]);
-  const handleConfirm = (0, import_react32.useCallback)(async () => {
+  const handleConfirm = (0, import_react34.useCallback)(async () => {
     if (!routeResult) {
       return;
     }
+    trackEvent("payment_initiated", {
+      from_chain: selectedChain?.networkName ?? selectedChain?.axelarChainName ?? selectedChain?.chainId,
+      from_token: selectedToken?.symbol,
+      to_chain: destinationConfig?.routes.toChain,
+      to_token: destinationConfig?.routes.toToken,
+      domain: window.origin
+    });
     await submitTransaction(routeResult);
-  }, [routeResult, submitTransaction]);
-  const handleSwipeConfirm = (0, import_react32.useCallback)(async () => {
+  }, [
+    destinationConfig?.routes.toChain,
+    destinationConfig?.routes.toToken,
+    routeResult,
+    selectedChain?.axelarChainName,
+    selectedChain?.chainId,
+    selectedChain?.networkName,
+    selectedToken?.symbol,
+    submitTransaction,
+    trackEvent
+  ]);
+  const handleSwipeConfirm = (0, import_react34.useCallback)(async () => {
     if (needsApproval) {
       await handleApproveExact();
       return;
@@ -13308,7 +13695,7 @@ function useTransactionActionModel({
   }, [handleApproveExact, handleConfirm, needsApproval]);
   const isWalletConnected = walletStatus === "connected";
   const canSwipe = parsedAmount > 0 && !!selectedToken && isWalletConnected && !isLoadingRoute && !isSubmitting && !!routeResult && !actionErrorMessage && !isApproving && !isReadingAllowance;
-  const swipeResetKey = (0, import_react32.useMemo)(() => {
+  const swipeResetKey = (0, import_react34.useMemo)(() => {
     const tokenAddress = selectedToken ? normalizeAddress2(
       selectedToken.address,
       selectedToken?.chainData?.type ?? selectedToken?.chainData?.chainType
@@ -13335,7 +13722,7 @@ function useTransactionActionModel({
 }
 
 // src/widget/pages/CryptoPay.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 var SHOW_FEE_SUMMARY = false;
 function CryptoPay({ style: _style }) {
   const {
@@ -13352,12 +13739,12 @@ function CryptoPay({ style: _style }) {
   const { goBack, setCurrentStep, currentStep } = useDepositNavigation();
   const config = useTrustwareConfig();
   const { fixedFromAmountString, isFixedAmount, minAmountUsd, maxAmountUsd } = useAmountConstraints();
-  const routeRefreshMs = (0, import_react33.useMemo)(() => {
+  const routeRefreshMs = (0, import_react35.useMemo)(() => {
     const raw = config.routes?.options?.routeRefreshMs;
     const n = Number(raw);
     return Number.isFinite(n) && n > 0 ? n : void 0;
   }, [config.routes?.options?.routeRefreshMs]);
-  const isReady = (0, import_react33.useMemo)(() => {
+  const isReady = (0, import_react35.useMemo)(() => {
     if (selectedToken !== null && yourWalletTokens.length > 0 && selectedToken?.chainData !== void 0) {
       return true;
     }
@@ -13432,7 +13819,7 @@ function CryptoPay({ style: _style }) {
   });
   const { emitError } = useTrustware();
   const readySelectedToken = isReady ? selectedToken : null;
-  (0, import_react33.useEffect)(() => {
+  (0, import_react35.useEffect)(() => {
     if (currentStep !== "crypto-pay" || !actionErrorMessage) return;
     emitError?.(
       new TrustwareError({
@@ -13464,7 +13851,7 @@ function CryptoPay({ style: _style }) {
   const handleExpandTokens = () => {
     setCurrentStep("select-token");
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     "div",
     {
       style: {
@@ -13473,9 +13860,9 @@ function CryptoPay({ style: _style }) {
         minHeight: "500px"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(WidgetPageHeader, { onBack: goBack, title: "Confirm Deposit" }),
-        isReady ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(WidgetPageHeader, { onBack: goBack, title: "Confirm Deposit" }),
+        isReady ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_jsx_runtime47.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             CryptoPayAmountSection,
             {
               amount,
@@ -13504,7 +13891,7 @@ function CryptoPay({ style: _style }) {
               yourWalletTokensLength: yourWalletTokens.length
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             CryptoPaySwipeSection,
             {
               actionErrorMessage,
@@ -13521,8 +13908,8 @@ function CryptoPay({ style: _style }) {
               swipeResetKey
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(WidgetSecurityFooter, {})
-        ] }) : /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(WidgetSecurityFooter, {})
+        ] }) : /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
           "div",
           {
             style: {
@@ -13531,7 +13918,7 @@ function CryptoPay({ style: _style }) {
               alignItems: "center",
               justifyContent: "center"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(LoadingSkeleton, {})
+            children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(LoadingSkeleton, {})
           }
         )
       ]
@@ -13540,8 +13927,8 @@ function CryptoPay({ style: _style }) {
 }
 
 // src/widget/pages/Processing.tsx
-var import_react34 = require("react");
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_react36 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function getProgressFromStatus(status) {
   switch (status) {
     case "confirming":
@@ -13579,27 +13966,27 @@ function Processing({ style }) {
   const { resetState, setCurrentStep } = useDepositNavigation();
   const { transactionStatus, transactionHash, intentId } = useDepositTransaction();
   const { transaction, startPolling, isPolling } = useTransactionPolling();
-  const hasStartedPolling = (0, import_react34.useRef)(false);
-  (0, import_react34.useEffect)(() => {
+  const hasStartedPolling = (0, import_react36.useRef)(false);
+  (0, import_react36.useEffect)(() => {
     return () => {
       hasStartedPolling.current = false;
     };
   }, []);
-  (0, import_react34.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (intentId && transactionHash && !isPolling && !hasStartedPolling.current && transactionStatus !== "success" && transactionStatus !== "error") {
       hasStartedPolling.current = true;
       startPolling(intentId, transactionHash);
     }
   }, [intentId, transactionHash, isPolling, transactionStatus, startPolling]);
-  const progress = (0, import_react34.useMemo)(
+  const progress = (0, import_react36.useMemo)(
     () => getProgressFromStatus(transactionStatus),
     [transactionStatus]
   );
-  const stepText = (0, import_react34.useMemo)(
+  const stepText = (0, import_react36.useMemo)(
     () => getStepText(transactionStatus),
     [transactionStatus]
   );
-  const explorerUrl = (0, import_react34.useMemo)(() => {
+  const explorerUrl = (0, import_react36.useMemo)(() => {
     if (transaction?.fromChainTxUrl) {
       return transaction.fromChainTxUrl;
     }
@@ -13617,7 +14004,7 @@ function Processing({ style }) {
   };
   const isIndeterminate = transactionStatus === "confirming" || transactionStatus === "idle";
   const headerTitle = transactionStatus === "success" ? "Complete" : transactionStatus === "error" ? "Failed" : "Processing";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
     "div",
     {
       style: {
@@ -13627,8 +14014,8 @@ function Processing({ style }) {
         ...style
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(WidgetPageHeader, { onClose: handleClose, title: headerTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(WidgetPageHeader, { onClose: handleClose, title: headerTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
           "div",
           {
             style: {
@@ -13640,13 +14027,13 @@ function Processing({ style }) {
               padding: `${spacing[8]} ${spacing[6]}`
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "div",
                 {
                   style: {
                     marginBottom: spacing[6]
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                     CircularProgress,
                     {
                       progress,
@@ -13658,7 +14045,7 @@ function Processing({ style }) {
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "p",
                 {
                   style: {
@@ -13671,7 +14058,7 @@ function Processing({ style }) {
                   children: stepText
                 }
               ),
-              selectedToken && parsedAmount > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+              selectedToken && parsedAmount > 0 && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
                 "p",
                 {
                   style: {
@@ -13688,7 +14075,7 @@ function Processing({ style }) {
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 TransactionSteps,
                 {
                   transactionStatus,
@@ -13699,7 +14086,7 @@ function Processing({ style }) {
                   }
                 }
               ),
-              transactionHash ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              transactionHash ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 TransactionHashLink,
                 {
                   explorerUrl,
@@ -13707,7 +14094,7 @@ function Processing({ style }) {
                   label: "Transaction"
                 }
               ) : null,
-              transactionStatus === "error" && /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+              transactionStatus === "error" && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "button",
                 {
                   type: "button",
@@ -13729,23 +14116,23 @@ function Processing({ style }) {
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(WidgetSecurityFooter, {})
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(WidgetSecurityFooter, {})
       ]
     }
   );
 }
 
 // src/widget/pages/Success.tsx
-var import_react35 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
-var ConfettiEffect2 = (0, import_react35.lazy)(() => Promise.resolve().then(() => (init_ConfettiEffect(), ConfettiEffect_exports)));
+var import_react37 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var ConfettiEffect2 = (0, import_react37.lazy)(() => Promise.resolve().then(() => (init_ConfettiEffect(), ConfettiEffect_exports)));
 function Success({ style }) {
   const { selectedToken, selectedChain, amount } = useDepositForm();
   const { resetState } = useDepositNavigation();
   const { transactionHash } = useDepositTransaction();
   const { transaction } = useTransactionPolling();
-  const parsedAmount = (0, import_react35.useMemo)(() => parseFloat(amount) || 0, [amount]);
-  const explorerUrl = (0, import_react35.useMemo)(() => {
+  const parsedAmount = (0, import_react37.useMemo)(() => parseFloat(amount) || 0, [amount]);
+  const explorerUrl = (0, import_react37.useMemo)(() => {
     if (transaction?.toChainTxUrl) {
       return transaction.toChainTxUrl;
     }
@@ -13760,7 +14147,7 @@ function Success({ style }) {
   const handleDone = () => {
     resetState();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
       style: {
@@ -13773,9 +14160,9 @@ function Success({ style }) {
         ...style
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react35.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ConfettiEffect2, { isActive: true, pieceCount: 60, clearDelay: 4e3 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(WidgetPageHeader, { title: "Deposit Complete" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react37.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ConfettiEffect2, { isActive: true, pieceCount: 60, clearDelay: 4e3 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(WidgetPageHeader, { title: "Deposit Complete" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           "div",
           {
             style: {
@@ -13787,7 +14174,7 @@ function Success({ style }) {
               flexDirection: "column",
               alignItems: "center"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               SuccessSummaryCard,
               {
                 amount: parsedAmount,
@@ -13801,16 +14188,16 @@ function Success({ style }) {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(WidgetSecurityFooter, {})
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(WidgetSecurityFooter, {})
       ]
     }
   );
 }
 
 // src/widget/pages/Error.tsx
-var import_react36 = require("react");
+var import_react38 = require("react");
 init_store();
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function categorizeError(errorMessage) {
   if (!errorMessage) return "unknown";
   const msg = errorMessage.toLowerCase();
@@ -13897,20 +14284,20 @@ function Error2({ style }) {
     setErrorMessage,
     transactionHash
   } = useDepositTransaction();
-  const errorCategory = (0, import_react36.useMemo)(
+  const errorCategory = (0, import_react38.useMemo)(
     () => categorizeError(errorMessage),
     [errorMessage]
   );
-  const errorTitle = (0, import_react36.useMemo)(
+  const errorTitle = (0, import_react38.useMemo)(
     () => getErrorTitle(errorCategory),
     [errorCategory]
   );
-  const errorSuggestion = (0, import_react36.useMemo)(
+  const errorSuggestion = (0, import_react38.useMemo)(
     () => getErrorSuggestion(errorCategory),
     [errorCategory]
   );
-  const retryStep = (0, import_react36.useMemo)(() => getRetryStep(errorCategory), [errorCategory]);
-  (0, import_react36.useEffect)(() => {
+  const retryStep = (0, import_react38.useMemo)(() => getRetryStep(errorCategory), [errorCategory]);
+  (0, import_react38.useEffect)(() => {
     if (errorMessage) {
       try {
         const config = TrustwareConfigStore.get();
@@ -13932,7 +14319,7 @@ function Error2({ style }) {
   const handleStartOver = () => {
     resetState();
   };
-  const explorerUrl = (0, import_react36.useMemo)(() => {
+  const explorerUrl = (0, import_react38.useMemo)(() => {
     if (transactionHash && selectedChain?.blockExplorerUrls?.length) {
       return `${selectedChain.blockExplorerUrls[0].replace(/\/+$/, "")}/tx/${transactionHash}`;
     }
@@ -13940,7 +14327,7 @@ function Error2({ style }) {
   }, [transactionHash, selectedChain]);
   const renderErrorIcon = () => {
     if (errorCategory === "wallet_rejected") {
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "svg",
         {
           style: {
@@ -13953,7 +14340,7 @@ function Error2({ style }) {
           stroke: "currentColor",
           strokeWidth: 2.5,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "path",
             {
               strokeLinecap: "round",
@@ -13965,7 +14352,7 @@ function Error2({ style }) {
       );
     }
     if (errorCategory === "network_error") {
-      return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
         "svg",
         {
           style: {
@@ -13978,7 +14365,7 @@ function Error2({ style }) {
           stroke: "currentColor",
           strokeWidth: 2,
           "aria-hidden": "true",
-          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             "path",
             {
               strokeLinecap: "round",
@@ -13989,7 +14376,7 @@ function Error2({ style }) {
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "svg",
       {
         style: {
@@ -14002,7 +14389,7 @@ function Error2({ style }) {
         stroke: "currentColor",
         strokeWidth: 2,
         "aria-hidden": "true",
-        children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "path",
           {
             strokeLinecap: "round",
@@ -14013,7 +14400,7 @@ function Error2({ style }) {
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "div",
     {
       style: {
@@ -14023,8 +14410,8 @@ function Error2({ style }) {
         ...style
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(WidgetPageHeader, { title: errorTitle }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(WidgetPageHeader, { title: errorTitle }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           ErrorRecoveryCard,
           {
             errorMessage,
@@ -14037,7 +14424,7 @@ function Error2({ style }) {
             transactionHash
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(WidgetSecurityFooter, {})
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(WidgetSecurityFooter, {})
       ]
     }
   );
@@ -14059,7 +14446,7 @@ var ACTIVE_TRANSACTION_STATUSES = [
 ];
 
 // src/widget/app/WidgetRouter.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var pageContainerBaseStyle = {
   width: "100%",
   height: "100%",
@@ -14070,26 +14457,26 @@ function WidgetRouter({
   navigationDirection,
   stepHistory
 }) {
-  const PageComponent = (0, import_react37.useMemo)(
+  const PageComponent = (0, import_react39.useMemo)(
     () => PAGE_COMPONENTS[currentStep],
     [currentStep]
   );
-  const animationClass = (0, import_react37.useMemo)(() => {
+  const animationClass = (0, import_react39.useMemo)(() => {
     return navigationDirection === "forward" ? "tw-animate-slide-in-right" : "tw-animate-slide-in-left";
   }, [navigationDirection]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       className: animationClass,
       style: mergeStyles(pageContainerBaseStyle),
-      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(PageComponent, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(PageComponent, {})
     },
     `${currentStep}-${stepHistory.length}`
   );
 }
 
 // src/widget/TrustwareWidgetV2.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var widgetContentContainerStyle = {
   position: "relative",
   width: "100%",
@@ -14111,7 +14498,7 @@ function WidgetContent({
   const { amount, selectedChain, selectedToken } = useDepositForm();
   const { transactionHash, transactionStatus } = useDepositTransaction();
   const { resolvedTheme, toggleTheme } = useDepositUi();
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     const state = {
       currentStep,
       amount,
@@ -14131,9 +14518,9 @@ function WidgetContent({
     transactionStatus,
     onStateChange
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { style: mergeStyles(widgetContentContainerStyle, style), children: [
-    showThemeToggle && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: themeToggleContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ThemeToggle, { theme: resolvedTheme, onToggle: toggleTheme }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: mergeStyles(widgetContentContainerStyle, style), children: [
+    showThemeToggle && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { style: themeToggleContainerStyle, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ThemeToggle, { theme: resolvedTheme, onToggle: toggleTheme }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       WidgetRouter,
       {
         currentStep,
@@ -14154,8 +14541,8 @@ function WidgetInner({
   const { transactionStatus } = useDepositTransaction();
   const { resolvedTheme } = useDepositUi();
   const { status, revalidate } = useTrustware();
-  const [showConfirmDialog, setShowConfirmDialog] = (0, import_react38.useState)(false);
-  const handleCloseRequest = (0, import_react38.useCallback)(() => {
+  const [showConfirmDialog, setShowConfirmDialog] = (0, import_react40.useState)(false);
+  const handleCloseRequest = (0, import_react40.useCallback)(() => {
     if (ACTIVE_TRANSACTION_STATUSES.includes(transactionStatus)) {
       setShowConfirmDialog(true);
     } else {
@@ -14166,32 +14553,32 @@ function WidgetInner({
       onClose?.();
     }
   }, [transactionStatus, onClose, resetState]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     closeRequestRef.current = handleCloseRequest;
   }, [handleCloseRequest, closeRequestRef]);
-  const handleConfirmClose = (0, import_react38.useCallback)(() => {
+  const handleConfirmClose = (0, import_react40.useCallback)(() => {
     setShowConfirmDialog(false);
     onClose?.();
   }, [onClose]);
-  const handleCancelClose = (0, import_react38.useCallback)(() => {
+  const handleCancelClose = (0, import_react40.useCallback)(() => {
     setShowConfirmDialog(false);
   }, []);
   const effectiveTheme = resolvedTheme;
   const isRefreshing = status === "initializing";
   const initBlocked = status === "error";
-  const handleRefresh = (0, import_react38.useCallback)(() => {
+  const handleRefresh = (0, import_react40.useCallback)(() => {
     revalidate?.();
   }, [revalidate]);
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(WidgetContainer, { theme: effectiveTheme, style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(WidgetContainer, { theme: effectiveTheme, style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         WidgetContent,
         {
           onStateChange,
           showThemeToggle
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         InitErrorOverlay,
         {
           open: initBlocked,
@@ -14201,7 +14588,7 @@ function WidgetInner({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       ConfirmCloseDialog,
       {
         open: showConfirmDialog,
@@ -14212,7 +14599,7 @@ function WidgetInner({
     )
   ] });
 }
-var TrustwareWidgetV2 = (0, import_react38.forwardRef)(function TrustwareWidgetV22({
+var TrustwareWidgetV2 = (0, import_react40.forwardRef)(function TrustwareWidgetV22({
   theme = "system",
   style,
   initialStep = "home",
@@ -14221,14 +14608,14 @@ var TrustwareWidgetV2 = (0, import_react38.forwardRef)(function TrustwareWidgetV
   onOpen,
   showThemeToggle = true
 }, ref) {
-  const [isOpen, setIsOpen] = (0, import_react38.useState)(defaultOpen);
-  const closeRequestRef = (0, import_react38.useRef)(null);
+  const [isOpen, setIsOpen] = (0, import_react40.useState)(defaultOpen);
+  const closeRequestRef = (0, import_react40.useRef)(null);
   const effectiveInitialStep = initialStep;
-  const open = (0, import_react38.useCallback)(() => {
+  const open = (0, import_react40.useCallback)(() => {
     setIsOpen(true);
     onOpen?.();
   }, [onOpen]);
-  const close = (0, import_react38.useCallback)(() => {
+  const close = (0, import_react40.useCallback)(() => {
     if (closeRequestRef.current) {
       closeRequestRef.current();
     } else {
@@ -14236,11 +14623,11 @@ var TrustwareWidgetV2 = (0, import_react38.forwardRef)(function TrustwareWidgetV
       onClose?.();
     }
   }, [onClose]);
-  const handleClose = (0, import_react38.useCallback)(() => {
+  const handleClose = (0, import_react40.useCallback)(() => {
     setIsOpen(false);
     onClose?.();
   }, [onClose]);
-  (0, import_react38.useImperativeHandle)(
+  (0, import_react40.useImperativeHandle)(
     ref,
     () => ({
       open,
@@ -14252,7 +14639,7 @@ var TrustwareWidgetV2 = (0, import_react38.forwardRef)(function TrustwareWidgetV
   if (!isOpen) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DepositProvider, { initialStep: effectiveInitialStep, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(DepositProvider, { initialStep: effectiveInitialStep, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
     WidgetInner,
     {
       theme,
@@ -14297,6 +14684,7 @@ init_constants();
   DEFAULT_RETRY_CONFIG,
   DEFAULT_SLIPPAGE,
   DEFAULT_THEME,
+  GTM_ID,
   IdentityStore,
   RateLimitError,
   SDK_NAME,