@unifold/ui-web 0.1.34 → 0.1.36

package/dist/index.mjs

@@ -38698,18 +38698,18 @@ function composeContextScopes(...scopes) {
   createScope.scopeName = baseScope.scopeName;
   return createScope;
 }
-var useLayoutEffect22 = globalThis?.document ? React32.useLayoutEffect : () => {
+var useLayoutEffect23 = globalThis?.document ? React32.useLayoutEffect : () => {
 };
 var useReactId = React42[" useId ".trim().toString()] || (() => void 0);
 var count = 0;
 function useId13(deterministicId) {
   const [id, setId] = React42.useState(useReactId());
-  useLayoutEffect22(() => {
+  useLayoutEffect23(() => {
     if (!deterministicId) setId((reactId) => reactId ?? String(count++));
   }, [deterministicId]);
   return deterministicId || (id ? `radix-${id}` : "");
 }
-var useInsertionEffect = React52[" useInsertionEffect ".trim().toString()] || useLayoutEffect22;
+var useInsertionEffect = React52[" useInsertionEffect ".trim().toString()] || useLayoutEffect23;
 function useControllableState({
   prop,
   defaultProp,
@@ -39324,7 +39324,7 @@ var PORTAL_NAME = "Portal";
 var Portal = React12.forwardRef((props, forwardedRef) => {
   const { container: containerProp, ...portalProps } = props;
   const [mounted, setMounted] = React12.useState(false);
-  useLayoutEffect22(() => setMounted(true), []);
+  useLayoutEffect23(() => setMounted(true), []);
   const container = containerProp || mounted && globalThis?.document?.body;
   return container ? import_react_dom.default.createPortal(/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Primitive.div, { ...portalProps, ref: forwardedRef }), container) : null;
 });
@@ -39367,7 +39367,7 @@ function usePresence(present) {
     const currentAnimationName = getAnimationName(stylesRef.current);
     prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
   }, [state]);
-  useLayoutEffect22(() => {
+  useLayoutEffect23(() => {
     const styles = stylesRef.current;
     const wasPresent = prevPresentRef.current;
     const hasPresentChanged = wasPresent !== present;
@@ -39389,7 +39389,7 @@ function usePresence(present) {
       prevPresentRef.current = present;
     }
   }, [present, send]);
-  useLayoutEffect22(() => {
+  useLayoutEffect23(() => {
     if (node) {
       let timeoutId;
       const ownerWindow = node.ownerDocument.defaultView ?? window;
@@ -45402,7 +45402,7 @@ Arrow.displayName = NAME;
 var Root2 = Arrow;
 function useSize(element) {
   const [size4, setSize] = React27.useState(void 0);
-  useLayoutEffect22(() => {
+  useLayoutEffect23(() => {
     if (element) {
       setSize({ width: element.offsetWidth, height: element.offsetHeight });
       const resizeObserver = new ResizeObserver((entries) => {
@@ -45539,7 +45539,7 @@ var PopperContent = React28.forwardRef(
     });
     const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
     const handlePlaced = useCallbackRef(onPlaced);
-    useLayoutEffect22(() => {
+    useLayoutEffect23(() => {
       if (isPositioned) {
         handlePlaced?.();
       }
@@ -45548,7 +45548,7 @@ var PopperContent = React28.forwardRef(
     const arrowY = middlewareData.arrow?.y;
     const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
     const [contentZIndex, setContentZIndex] = React28.useState();
-    useLayoutEffect22(() => {
+    useLayoutEffect23(() => {
       if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
     }, [content]);
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -46479,7 +46479,7 @@ var SelectValue = React34.forwardRef(
     const { onValueNodeHasChildrenChange } = context;
     const hasChildren = children !== void 0;
     const composedRefs = useComposedRefs(forwardedRef, context.onValueNodeChange);
-    useLayoutEffect22(() => {
+    useLayoutEffect23(() => {
       onValueNodeHasChildrenChange(hasChildren);
     }, [onValueNodeHasChildrenChange, hasChildren]);
     return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
@@ -46512,7 +46512,7 @@ var SelectContent = React34.forwardRef(
   (props, forwardedRef) => {
     const context = useSelectContext(CONTENT_NAME4, props.__scopeSelect);
     const [fragment, setFragment] = React34.useState();
-    useLayoutEffect22(() => {
+    useLayoutEffect23(() => {
       setFragment(new DocumentFragment());
     }, []);
     if (!context.open) {
@@ -46874,9 +46874,9 @@ var SelectItemAlignedPosition = React34.forwardRef((props, forwardedRef) => {
     context.dir,
     onPlaced
   ]);
-  useLayoutEffect22(() => position(), [position]);
+  useLayoutEffect23(() => position(), [position]);
   const [contentZIndex, setContentZIndex] = React34.useState();
-  useLayoutEffect22(() => {
+  useLayoutEffect23(() => {
     if (content) setContentZIndex(window.getComputedStyle(content).zIndex);
   }, [content]);
   const handleScrollButtonChange = React34.useCallback(
@@ -47173,7 +47173,7 @@ var SelectItemText = React34.forwardRef(
       [itemContext.disabled, itemContext.value, textContent]
     );
     const { onNativeOptionAdd, onNativeOptionRemove } = nativeOptionsContext;
-    useLayoutEffect22(() => {
+    useLayoutEffect23(() => {
       onNativeOptionAdd(nativeOption);
       return () => onNativeOptionRemove(nativeOption);
     }, [onNativeOptionAdd, onNativeOptionRemove, nativeOption]);
@@ -47199,7 +47199,7 @@ var SelectScrollUpButton = React34.forwardRef((props, forwardedRef) => {
   const viewportContext = useSelectViewportContext(SCROLL_UP_BUTTON_NAME, props.__scopeSelect);
   const [canScrollUp, setCanScrollUp] = React34.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
-  useLayoutEffect22(() => {
+  useLayoutEffect23(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
       let handleScroll22 = function() {
         const canScrollUp2 = viewport.scrollTop > 0;
@@ -47233,7 +47233,7 @@ var SelectScrollDownButton = React34.forwardRef((props, forwardedRef) => {
   const viewportContext = useSelectViewportContext(SCROLL_DOWN_BUTTON_NAME, props.__scopeSelect);
   const [canScrollDown, setCanScrollDown] = React34.useState(false);
   const composedRefs = useComposedRefs(forwardedRef, viewportContext.onScrollButtonChange);
-  useLayoutEffect22(() => {
+  useLayoutEffect23(() => {
     if (contentContext.viewport && contentContext.isPositioned) {
       let handleScroll22 = function() {
         const maxScroll = viewport.scrollHeight - viewport.clientHeight;
@@ -47276,7 +47276,7 @@ var SelectScrollButtonImpl = React34.forwardRef((props, forwardedRef) => {
   React34.useEffect(() => {
     return () => clearAutoScrollTimer();
   }, [clearAutoScrollTimer]);
-  useLayoutEffect22(() => {
+  useLayoutEffect23(() => {
     const activeItem = getItems().find((item) => item.ref.current === document.activeElement);
     activeItem?.ref.current?.scrollIntoView({ block: "nearest" });
   }, [getItems]);
@@ -48606,24 +48606,34 @@ function CurrencyModal({
             onClose: handleClose
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-relative", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          "input",
-          {
-            type: "text",
-            value: searchQuery,
-            onChange: (e) => setSearchQuery(e.target.value),
-            placeholder: "Search",
-            className: "uf-w-full uf-px-4 uf-py-2.5 uf-text-sm uf-outline-none focus:uf-ring-2 focus:uf-ring-ring/30",
-            style: {
-              backgroundColor: components.search.backgroundColor,
-              color: components.search.inputColor,
-              fontFamily: fonts.regular,
-              borderRadius: components.input.borderRadius,
-              border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-pb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `.uf-currency-modal-search::placeholder { color: ${components.search.placeholderColor}; }`
+              }
             }
-          }
-        ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-flex-1 sm:uf-flex-none uf-overflow-y-auto uf-pb-6 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden sm:uf-min-h-[200px] sm:uf-max-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-space-y-2", children: [
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-relative", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "input",
+            {
+              type: "text",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              placeholder: "Search",
+              className: "uf-currency-modal-search uf-w-full uf-p-4 uf-text-sm uf-outline-none focus:uf-ring-2 focus:uf-ring-ring/30",
+              style: {
+                backgroundColor: components.search.backgroundColor,
+                color: components.search.inputColor,
+                fontFamily: fonts.regular,
+                borderRadius: components.input.borderRadius,
+                border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
+              }
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "uf-flex-1 sm:uf-flex-none uf-overflow-y-auto uf-pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden sm:uf-min-h-[200px] sm:uf-max-h-[400px]", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "uf-space-y-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
             CurrencyListSection,
             {
@@ -49145,188 +49155,153 @@ function DepositDetailContent({ execution }) {
         className: "uf-overflow-hidden uf-mb-3",
         style: { backgroundColor: components.card.backgroundColor, borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-            "div",
-            {
-              className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
-              style: { borderColor: colors2.border },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  "span",
-                  {
-                    className: "uf-text-sm",
-                    style: {
-                      color: components.card.labelColor,
-                      fontFamily: fonts.regular
-                    },
-                    children: "Amount Sent"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-                  "span",
-                  {
-                    style: {
-                      color: components.card.titleColor,
-                      fontFamily: fonts.regular,
-                      fontSize: "14px"
-                    },
-                    children: [
-                      formatAmount(
-                        execution.source_amount_base_unit,
-                        execution.source_token_metadata?.decimals
-                      ),
-                      " ",
-                      formatCurrency(execution.source_currency)
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-            "div",
-            {
-              className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
-              style: { borderColor: colors2.border },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  "span",
-                  {
-                    className: "uf-text-sm",
-                    style: {
-                      color: components.card.labelColor,
-                      fontFamily: fonts.regular
-                    },
-                    children: "Amount Received"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-                  "span",
-                  {
-                    style: {
-                      color: components.card.titleColor,
-                      fontFamily: fonts.regular,
-                      fontSize: "14px"
-                    },
-                    children: [
-                      formatAmount(
-                        execution.destination_amount_base_unit,
-                        execution.destination_token_metadata?.decimals
-                      ),
-                      " ",
-                      formatCurrency(execution.destination_currency)
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-            "div",
-            {
-              className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
-              style: { borderColor: colors2.border },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  "span",
-                  {
-                    className: "uf-text-sm",
-                    style: {
-                      color: components.card.labelColor,
-                      fontFamily: fonts.regular
-                    },
-                    children: "USD Value"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  "span",
-                  {
-                    style: {
-                      color: components.card.titleColor,
-                      fontFamily: fonts.regular,
-                      fontSize: "14px"
-                    },
-                    children: formatUsdAmount2(
-                      execution.source_amount_usd,
-                      execution.source_amount_base_unit
-                    )
-                  }
-                )
-              ]
-            }
-          ),
-          isPending && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-            "div",
-            {
-              className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
-              style: { borderColor: colors2.border },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  "span",
-                  {
-                    className: "uf-text-sm",
-                    style: {
-                      color: components.card.labelColor,
-                      fontFamily: fonts.regular
-                    },
-                    children: "Estimated delivery time"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  "span",
-                  {
-                    style: {
-                      color: components.card.titleColor,
-                      fontFamily: fonts.regular,
-                      fontSize: "14px"
-                    },
-                    children: formatEstimatedTime(execution?.estimated_processing_time)
-                  }
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "span",
+              {
+                className: "uf-text-sm",
+                style: {
+                  color: components.card.rowLeftLabel,
+                  fontFamily: fonts.regular
+                },
+                children: "Amount Sent"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              "span",
+              {
+                style: {
+                  color: components.card.rowRightLabel,
+                  fontFamily: fonts.regular,
+                  fontSize: "14px"
+                },
+                children: [
+                  formatAmount(
+                    execution.source_amount_base_unit,
+                    execution.source_token_metadata?.decimals
+                  ),
+                  " ",
+                  formatCurrency(execution.source_currency)
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "span",
+              {
+                className: "uf-text-sm",
+                style: {
+                  color: components.card.rowLeftLabel,
+                  fontFamily: fonts.regular
+                },
+                children: "Amount Received"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              "span",
+              {
+                style: {
+                  color: components.card.rowRightLabel,
+                  fontFamily: fonts.regular,
+                  fontSize: "14px"
+                },
+                children: [
+                  formatAmount(
+                    execution.destination_amount_base_unit,
+                    execution.destination_token_metadata?.decimals
+                  ),
+                  " ",
+                  formatCurrency(execution.destination_currency)
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "span",
+              {
+                className: "uf-text-sm",
+                style: {
+                  color: components.card.rowLeftLabel,
+                  fontFamily: fonts.regular
+                },
+                children: "USD Value"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "span",
+              {
+                style: {
+                  color: components.card.rowRightLabel,
+                  fontFamily: fonts.regular,
+                  fontSize: "14px"
+                },
+                children: formatUsdAmount2(
+                  execution.source_amount_usd,
+                  execution.source_amount_base_unit
                 )
-              ]
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-            "div",
-            {
-              className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3 uf-border-b",
-              style: { borderColor: colors2.border },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  "span",
-                  {
-                    className: "uf-text-sm",
-                    style: {
-                      color: components.card.labelColor,
-                      fontFamily: fonts.regular
-                    },
-                    children: "Source Network"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
-                  "span",
-                  {
-                    style: {
-                      color: components.card.titleColor,
-                      fontFamily: fonts.regular,
-                      fontSize: "14px"
-                    },
-                    children: getNetworkName(
-                      execution.source_chain_type,
-                      execution.source_chain_id
-                    )
-                  }
+              }
+            )
+          ] }),
+          isPending && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "span",
+              {
+                className: "uf-text-sm",
+                style: {
+                  color: components.card.rowLeftLabel,
+                  fontFamily: fonts.regular
+                },
+                children: "Estimated delivery time"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "span",
+              {
+                style: {
+                  color: components.card.rowRightLabel,
+                  fontFamily: fonts.regular,
+                  fontSize: "14px"
+                },
+                children: formatEstimatedTime(execution?.estimated_processing_time)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "span",
+              {
+                className: "uf-text-sm",
+                style: {
+                  color: components.card.rowLeftLabel,
+                  fontFamily: fonts.regular
+                },
+                children: "Source Network"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "span",
+              {
+                style: {
+                  color: components.card.rowRightLabel,
+                  fontFamily: fonts.regular,
+                  fontSize: "14px"
+                },
+                children: getNetworkName(
+                  execution.source_chain_type,
+                  execution.source_chain_id
                 )
-              ]
-            }
-          ),
+              }
+            )
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
               "span",
               {
                 className: "uf-text-sm",
                 style: {
-                  color: components.card.labelColor,
+                  color: components.card.rowLeftLabel,
                   fontFamily: fonts.regular
                 },
                 children: "Destination Network"
@@ -49336,7 +49311,7 @@ function DepositDetailContent({ execution }) {
               "span",
               {
                 style: {
-                  color: components.card.titleColor,
+                  color: components.card.rowRightLabel,
                   fontFamily: fonts.regular,
                   fontSize: "14px"
                 },
@@ -49378,15 +49353,14 @@ function DepositDetailContent({ execution }) {
               href: execution.explorer_url,
               target: "_blank",
               rel: "noopener noreferrer",
-              className: "uf-grid uf-grid-cols-[auto_1fr_auto] uf-items-center uf-gap-2 uf-px-4 uf-py-3 uf-border-b hover:uf-bg-card/50 uf-transition-colors",
-              style: { borderColor: colors2.border },
+              className: "uf-grid uf-grid-cols-[auto_1fr_auto] uf-items-center uf-gap-2 uf-px-4 uf-py-3 hover:uf-bg-card/50 uf-transition-colors",
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
                   "div",
                   {
                     className: "uf-text-sm",
                     style: {
-                      color: components.card.labelColor,
+                      color: components.card.rowLeftLabel,
                       fontFamily: fonts.regular
                     },
                     children: "Deposit Tx"
@@ -49397,7 +49371,7 @@ function DepositDetailContent({ execution }) {
                   {
                     className: "uf-text-sm uf-text-right",
                     style: {
-                      color: components.card.titleColor,
+                      color: components.card.rowRightLabel,
                       fontFamily: fonts.regular
                     },
                     children: formatTransactionHash(execution.transaction_hash)
@@ -49407,7 +49381,7 @@ function DepositDetailContent({ execution }) {
                   ExternalLink,
                   {
                     className: "uf-w-3.5 uf-h-3.5 uf-block",
-                    style: { color: components.card.actionColor }
+                    style: { color: components.card.actionIcon }
                   }
                 )
               ]
@@ -49426,7 +49400,7 @@ function DepositDetailContent({ execution }) {
                   {
                     className: "uf-text-sm",
                     style: {
-                      color: components.card.labelColor,
+                      color: components.card.rowLeftLabel,
                       fontFamily: fonts.regular
                     },
                     children: "Completion Tx"
@@ -49437,7 +49411,7 @@ function DepositDetailContent({ execution }) {
                   {
                     className: "uf-text-sm uf-text-right",
                     style: {
-                      color: components.card.titleColor,
+                      color: components.card.rowRightLabel,
                       fontFamily: fonts.regular
                     },
                     children: formatTransactionHash(
@@ -49449,7 +49423,7 @@ function DepositDetailContent({ execution }) {
                   ExternalLink,
                   {
                     className: "uf-w-3.5 uf-h-3.5 uf-block",
-                    style: { color: components.card.actionColor }
+                    style: { color: components.card.actionIcon }
                   }
                 )
               ]
@@ -50208,25 +50182,28 @@ function BuyWithCard({
                     }
                   }
                 ) }) }),
-                selectedCurrencyData?.suggested_amounts && selectedCurrencyData.suggested_amounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-flex uf-gap-3 uf-justify-center", children: selectedCurrencyData.suggested_amounts.map((quickAmount) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-                  "button",
-                  {
-                    onClick: () => handleQuickAmount(quickAmount),
-                    className: "uf-w-24 uf-py-2 hover:uf-bg-accent uf-transition-colors uf-text-sm uf-font-medium",
-                    style: {
-                      backgroundColor: components.card.backgroundColor,
-                      color: components.card.titleColor,
-                      fontFamily: fonts.medium,
-                      borderRadius: components.card.borderRadius,
-                      border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
+                selectedCurrencyData?.suggested_amounts && selectedCurrencyData.suggested_amounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-flex uf-gap-3 uf-justify-center", children: selectedCurrencyData.suggested_amounts.map((quickAmount) => {
+                  const isSelected = parseFloat(amount) === quickAmount;
+                  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+                    "button",
+                    {
+                      onClick: () => handleQuickAmount(quickAmount),
+                      className: "uf-w-24 uf-py-2 hover:uf-bg-accent uf-transition-colors uf-text-sm uf-font-medium",
+                      style: {
+                        backgroundColor: components.card.backgroundColor,
+                        color: components.card.titleColor,
+                        fontFamily: fonts.medium,
+                        borderRadius: components.card.borderRadius,
+                        border: `${components.card.borderWidth}px solid ${isSelected ? colors2.primary : components.card.borderColor}`
+                      },
+                      children: [
+                        getCurrencySymbol(currency),
+                        quickAmount.toLocaleString()
+                      ]
                     },
-                    children: [
-                      getCurrencySymbol(currency),
-                      quickAmount.toLocaleString()
-                    ]
-                  },
-                  quickAmount
-                )) }),
+                    quickAmount
+                  );
+                }) }),
                 amountValidationError && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "div",
                   {
@@ -50245,7 +50222,7 @@ function BuyWithCard({
                     "span",
                     {
                       style: {
-                        color: components.card.headerColor,
+                        color: components.card.labelColor,
                         fontFamily: fonts.medium
                       },
                       children: "Provider"
@@ -50304,7 +50281,7 @@ function BuyWithCard({
                         {
                           className: "uf-text-xs uf-font-normal uf-mb-2",
                           style: {
-                            color: components.card.labelColor,
+                            color: components.card.headerColor,
                             fontFamily: fonts.regular
                           },
                           children: "Auto-picked for you"
@@ -50419,8 +50396,8 @@ function BuyWithCard({
         /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           "div",
           {
-            className: `uf-transition-all uf-duration-300 uf-min-h-[420px] ${showQuotesView && !showOnrampView ? "uf-opacity-100" : "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0"}`,
-            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-space-y-2 uf-pt-2", children: sortedQuotes.map((quote, index2) => {
+            className: `uf-transition-all uf-duration-300 uf-min-h-[420px] uf-flex uf-flex-col ${showQuotesView && !showOnrampView ? "uf-opacity-100" : "uf-opacity-0 uf-pointer-events-none uf-absolute uf-inset-0"}`,
+            children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-space-y-2 uf-pt-2 uf-pb-8 uf-overflow-y-auto uf-flex-1 uf-min-h-0", children: sortedQuotes.map((quote, index2) => {
               const badges = getProviderBadges(quote, sortedQuotes);
               const displayName = quote.service_provider_display_name;
               const isSelected = selectedProvider?.service_provider === quote.service_provider;
@@ -50437,11 +50414,11 @@ function BuyWithCard({
                   },
                   onMouseEnter: () => setHoveredProviderIndex(index2),
                   onMouseLeave: () => setHoveredProviderIndex(null),
-                  className: `uf-w-full uf-transition-colors uf-p-3 uf-flex uf-items-center uf-justify-between uf-group ${isSelected ? "uf-ring-2 uf-ring-inset uf-ring-primary" : ""}`,
+                  className: "uf-w-full uf-transition-colors uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
                   style: {
                     backgroundColor: hoveredProviderIndex === index2 ? colors2.cardHover : components.card.backgroundColor,
                     borderRadius: components.card.borderRadius,
-                    border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
+                    border: isSelected ? `2px solid ${colors2.primary}` : `${components.card.borderWidth}px solid ${components.card.borderColor}`
                   },
                   children: [
                     /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
@@ -50468,7 +50445,8 @@ function BuyWithCard({
                           badges.map((badge, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
                             "span",
                             {
-                              className: "uf-text-[10px] uf-text-green-400 uf-font-normal",
+                              className: "uf-text-[10px] uf-font-normal",
+                              style: { color: colors2.success },
                               children: [
                                 badge,
                                 i < badges.length - 1 && ","
@@ -50476,8 +50454,25 @@ function BuyWithCard({
                             },
                             i
                           )),
-                          quote.low_kyc === false && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground", children: "\u2022" }),
-                          quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground uf-font-normal", children: "No document upload" })
+                          quote.low_kyc === false && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                            "span",
+                            {
+                              className: "uf-text-[10px]",
+                              style: { color: components.card.subtextRightColor },
+                              children: "\u2022"
+                            }
+                          ),
+                          quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                            "span",
+                            {
+                              className: "uf-text-[10px] uf-font-normal",
+                              style: {
+                                color: components.card.subtextRightColor,
+                                fontFamily: fonts.regular
+                              },
+                              children: "No document upload"
+                            }
+                          )
                         ] })
                       ] })
                     ] }),
@@ -50578,7 +50573,7 @@ function BuyWithCard({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.iconColor } }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-min-w-[72px]", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-h-8 uf-flex uf-items-center uf-justify-center uf-mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-relative", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -50621,7 +50616,7 @@ function BuyWithCard({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.iconColor } }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-min-w-[72px]", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "uf-h-8 uf-flex uf-items-center uf-justify-center uf-mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "uf-relative", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -51103,7 +51098,7 @@ function DepositExecutionItem({
           {
             className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
             style: {
-              color: components.card.titleColor,
+              color: components.card.textRightColor,
               fontFamily: fonts.medium
             },
             children: formatUsdAmount2(execution.source_amount_usd || "0")
@@ -51152,7 +51147,7 @@ function TransferCryptoButton({
             Zap,
             {
               className: "uf-w-5 uf-h-5",
-              style: { color: colors2.foregroundMuted }
+              style: { color: components.card.iconColor }
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "uf-text-left", children: [
@@ -51239,7 +51234,7 @@ function DepositWithCardButton({
             CreditCard,
             {
               className: "uf-w-5 uf-h-5",
-              style: { color: colors2.foregroundMuted }
+              style: { color: components.card.iconColor }
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "uf-text-left", children: [
@@ -51332,7 +51327,7 @@ function PayWithExchangeButton({
             ArrowLeftRight,
             {
               className: "uf-w-5 uf-h-5",
-              style: { color: colors2.foregroundMuted }
+              style: { color: components.card.iconColor }
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "uf-text-left", children: [
@@ -51419,7 +51414,7 @@ function DepositTrackerButton({
               Clock,
               {
                 className: "uf-w-5 uf-h-5",
-                style: { color: colors2.foregroundMuted }
+                style: { color: components.card.iconColor }
               }
             ),
             badge !== void 0 && badge > 0 && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
@@ -54249,7 +54244,7 @@ function DepositsModal({
         onClose: handleClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uf-flex-1 uf-min-h-0 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uf-space-y-2", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uf-flex-1 uf-min-h-0 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       "div",
       {
         className: "uf-text-sm",
@@ -54443,23 +54438,33 @@ function TokenSelectorSheet({
           ),
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "uf-w-7 uf-h-5 uf-invisible" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "uf-pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
-          "input",
-          {
-            type: "text",
-            placeholder: "Search",
-            value: searchQuery,
-            onChange: (e) => setSearchQuery(e.target.value),
-            className: "uf-w-full uf-px-4 uf-py-2.5 uf-text-sm uf-outline-none focus:uf-ring-2 focus:uf-ring-ring/30",
-            style: {
-              backgroundColor: components.search.backgroundColor,
-              color: components.search.inputColor,
-              fontFamily: fonts.regular,
-              borderRadius: components.input.borderRadius,
-              border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "uf-pb-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `.uf-token-sheet-search::placeholder { color: ${components.search.placeholderColor}; }`
+              }
             }
-          }
-        ) }) }),
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            "input",
+            {
+              type: "text",
+              placeholder: "Search",
+              value: searchQuery,
+              onChange: (e) => setSearchQuery(e.target.value),
+              className: "uf-token-sheet-search uf-w-full uf-px-4 uf-py-2.5 uf-text-sm uf-outline-none focus:uf-ring-2 focus:uf-ring-ring/30",
+              style: {
+                backgroundColor: components.search.backgroundColor,
+                color: components.search.inputColor,
+                fontFamily: fonts.regular,
+                borderRadius: components.input.borderRadius,
+                border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
+              }
+            }
+          ) })
+        ] }),
         quickSelectOptions.length > 0 && !searchQuery && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "uf-pb-3 uf--mx-6", children: [
           /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
             "div",
@@ -54711,12 +54716,13 @@ function TokenSelectorSheet({
                     style: {
                       fontSize: 12,
                       flexShrink: 0,
-                      color: components.card.labelColor,
                       fontFamily: fonts.regular
                     },
                     children: [
-                      "Minimum:",
-                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { style: { color: components.card.textRightColor }, children: [
+                        "Minimum:",
+                        " "
+                      ] }),
                       /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { style: { color: components.card.labelHighlightRightColor }, children: [
                         "$",
                         chain.minimum_deposit_amount_usd
@@ -54792,13 +54798,15 @@ function DepositPollingUi({
 function DepositFooterLinks({
   onGlossaryClick
 }) {
+  const { colors: colors2 } = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-flex uf-justify-end uf-items-center uf-gap-2 uf-text-xs uf-text-muted-foreground", children: [
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "a",
       {
         href: "https://unifold.io/terms",
         target: "_blank",
-        className: "uf-cursor-pointer hover:uf-text-foreground uf-transition-colors",
+        className: "uf-cursor-pointer hover:uf-opacity-90 uf-transition-colors",
+        style: { color: colors2.primary },
         children: "Terms"
       }
     ),
@@ -54808,7 +54816,8 @@ function DepositFooterLinks({
       {
         href: "https://unifold.io/support",
         target: "_blank",
-        className: "uf-cursor-pointer hover:uf-text-foreground uf-transition-colors",
+        className: "uf-cursor-pointer hover:uf-opacity-90 uf-transition-colors",
+        style: { color: colors2.primary },
         children: "Help"
       }
     ),
@@ -54816,8 +54825,9 @@ function DepositFooterLinks({
     /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       "div",
       {
-        className: "uf-cursor-pointer hover:uf-text-foreground uf-transition-colors",
+        className: "uf-cursor-pointer hover:uf-opacity-90 uf-transition-colors",
         onClick: onGlossaryClick,
+        style: { color: colors2.primary },
         children: "Glossary"
       }
     )
@@ -54827,61 +54837,117 @@ var t3 = i18n2.transferCrypto;
 function GlossaryModal({
   open,
   onOpenChange,
-  themeClass,
-  colors: colors2
+  backgroundColor: backgroundColorProp,
+  themeClass: themeClassProp,
+  colors: colorsProp
 }) {
+  const { themeClass, colors: colors2, components } = useTheme();
+  const resolvedThemeClass = themeClassProp ?? themeClass;
+  const modalBackground = backgroundColorProp ?? colors2.background;
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Dialog2, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
     DialogContent2,
     {
-      className: `sm:uf-max-w-[400px] !uf-top-auto !uf-h-auto sm:!uf-top-[50%] uf-border-secondary uf-text-foreground uf-p-0 uf-gap-0 [&>button]:uf-hidden ${themeClass}`,
-      style: { backgroundColor: colors2.card },
+      className: `sm:uf-max-w-[400px] !uf-top-auto !uf-h-auto sm:!uf-top-[50%] uf-border-secondary uf-p-0 uf-gap-0 [&>button]:uf-hidden ${resolvedThemeClass}`,
+      style: { backgroundColor: modalBackground },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-p-4 uf-pb-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(DialogTitle2, { className: "uf-text-base uf-font-semibold", children: "Glossary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-relative uf-flex uf-items-center uf-justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "uf-invisible uf-w-9 uf-h-9 uf-flex uf-shrink-0 uf-items-center uf-justify-center", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(X, { className: "uf-w-4 uf-h-4" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+            DialogTitle2,
+            {
+              className: "uf-text-base uf-font-medium uf-absolute uf-left-0 uf-right-0 uf-text-center uf-pointer-events-none",
+              style: { color: components.header.titleColor },
+              children: "Glossary"
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
             "button",
             {
               onClick: () => onOpenChange(false),
-              className: "uf-p-1 uf-rounded-lg hover:uf-bg-secondary uf-transition-colors uf-text-muted-foreground hover:uf-text-foreground",
+              className: "uf-p-1 uf-rounded-lg hover:uf-bg-secondary uf-transition-colors uf-flex-shrink-0 uf-z-[1]",
+              style: { color: components.header.buttonColor },
               children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(X, { className: "uf-w-4 uf-h-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-max-h-[60vh] sm:uf-max-h-[400px] uf-overflow-y-auto uf-px-4 uf-pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-space-y-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Your Deposit Token" }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.selectTokenDepositTooltip })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Deposit Address" }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: "A unique wallet address generated for you. Send supported tokens to this address and they will be automatically converted and deposited into your account." })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Price Impact" }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.priceImpact.tooltip })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Slippage" }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.slippage.tooltip })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Processing Time" }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: "The estimated time for your deposit to be confirmed and credited. This depends on the source network's block confirmation time and current congestion." })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Minimum Deposit" }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.minDeposit.tooltip })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Recipient Address" }),
-            /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: "The destination address on the target blockchain where your converted deposit will be sent. This is typically your wallet address on the application's native chain." })
-          ] })
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-max-h-[60vh] sm:uf-max-h-[400px] uf-overflow-y-auto uf-pb-4 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Your Deposit Token" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.selectTokenDepositTooltip })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Deposit Address" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: "A unique wallet address generated for you. Send supported tokens to this address and they will be automatically converted and deposited into your account." })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Price Impact" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.priceImpact.tooltip })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Slippage" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.slippage.tooltip })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Processing Time" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: "The estimated time for your deposit to be confirmed and credited. This depends on the source network's block confirmation time and current congestion." })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Minimum Deposit" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.minDeposit.tooltip })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Recipient Address" }),
+                /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: "The destination address on the target blockchain where your converted deposit will be sent. This is typically your wallet address on the application's native chain." })
+              ]
+            }
+          )
         ] }) })
       ]
     }
@@ -55122,7 +55188,7 @@ function TransferCryptoSingleInput({
       className: "uf-space-y-3 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden",
       style: { backgroundColor: colors2.background },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-1 uf-flex uf-items-center uf-justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1", children: t4.selectTokenDeposit }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-text-xs uf-mb-1 uf-flex uf-items-center uf-justify-between", style: { color: components.card.labelColor }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1", children: t4.selectTokenDeposit }) }),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
           "button",
           {
@@ -55226,7 +55292,7 @@ function TransferCryptoSingleInput({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: "Intent address" }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: "Intent address" }),
           /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
             // QR Skeleton - matches QR code appearance
             /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -55271,7 +55337,7 @@ function TransferCryptoSingleInput({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-text-sm uf-text-muted-foreground uf-mb-2 uf-flex uf-justify-center uf-items-center uf-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-text-sm uf-mb-2 uf-flex uf-justify-center uf-items-center uf-gap-1", children: [
           loading || tokensLoading || !initialSelectionDone ? (
             // Address skeleton
             /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
@@ -55283,12 +55349,13 @@ function TransferCryptoSingleInput({
                 }
               }
             )
-          ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-sm uf-truncate uf-min-w-0", children: depositAddress ? truncateAddress(depositAddress, 8, 6) : t4.noAddressAvailable }),
+          ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-sm uf-truncate uf-min-w-0", style: { color: components.card.titleColor }, children: depositAddress ? truncateAddress(depositAddress, 8, 6) : t4.noAddressAvailable }),
           depositAddress && initialSelectionDone && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             "span",
             {
               onClick: handleCopyAddress,
-              className: `uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer ${copied ? "uf-text-green-500" : "uf-text-muted-foreground"}`,
+              className: "uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer",
+              style: { color: copied ? colors2.success : components.card.actionColor },
               children: copied ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Check, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Copy, { className: "uf-w-3.5 uf-h-3.5" })
             }
           )
@@ -55350,7 +55417,8 @@ function TransferCryptoSingleInput({
                   "span",
                   {
                     onClick: () => handleCopyRecipientAddress(recipientAddress),
-                    className: `uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer ${copiedRecipient ? "uf-text-green-500" : "uf-text-muted-foreground"}`,
+                    className: "uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer",
+                    style: { color: copiedRecipient ? colors2.success : components.card.actionColor },
                     children: copiedRecipient ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Check, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Copy, { className: "uf-w-3.5 uf-h-3.5" })
                   }
                 )
@@ -55741,7 +55809,7 @@ function TransferCryptoDoubleInput({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: t5.selectedToken }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: t5.selectedToken }),
             /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
               Select2,
               {
@@ -55749,7 +55817,7 @@ function TransferCryptoDoubleInput({
                 onValueChange: setToken,
                 disabled: tokensLoading || supportedTokens.length === 0,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectTrigger2, { className: "uf-bg-secondary uf-h-10 hover:uf-bg-accent uf-text-foreground disabled:uf-opacity-50", style: { border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectValue2, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t5.loading }) }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uf-text-xs uf-font-normal", children: token }) }) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectTrigger2, { className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50", style: { backgroundColor: components.card.backgroundColor, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectValue2, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t5.loading }) }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uf-text-xs uf-font-normal", children: token }) }) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectContent2, { className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]", style: { border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`, ...fonts.regular ? { "--uf-font-family": fonts.regular } : {} }, children: supportedTokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                     SelectItem2,
                     {
@@ -55764,7 +55832,7 @@ function TransferCryptoDoubleInput({
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: [
               t5.selectedChain,
               /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "uf-font-medium", style: { color: components.card.labelHighlightRightColor }, children: [
                 "$",
@@ -55780,7 +55848,7 @@ function TransferCryptoDoubleInput({
                 onValueChange: setChain,
                 disabled: tokensLoading || availableChainsForToken.length === 0,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectTrigger2, { className: "uf-bg-secondary uf-h-10 hover:uf-bg-accent uf-text-foreground disabled:uf-opacity-50", style: { border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}` }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectValue2, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t5.loading }) }) : currentChainFromBackend ? renderChainItem(currentChainFromBackend) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chain }) }) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectTrigger2, { className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50", style: { backgroundColor: components.card.backgroundColor, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(SelectValue2, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t5.loading }) }) : currentChainFromBackend ? renderChainItem(currentChainFromBackend) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chain }) }) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
                     SelectContent2,
                     {
@@ -55823,7 +55891,7 @@ function TransferCryptoDoubleInput({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-text-xs uf-text-muted-foreground uf-mb-2 uf-flex uf-items-center uf-gap-1", children: "Intent address" }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: "Intent address" }),
           /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
             // QR Skeleton - matches QR code appearance
             /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -55868,7 +55936,7 @@ function TransferCryptoDoubleInput({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uf-text-sm uf-text-muted-foreground uf-mb-2 uf-flex uf-justify-center uf-items-center uf-gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "uf-text-sm uf-mb-2 uf-flex uf-justify-center uf-items-center uf-gap-1", children: [
           loading || tokensLoading || !initialSelectionDone ? (
             // Address skeleton
             /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
@@ -55880,12 +55948,13 @@ function TransferCryptoDoubleInput({
                 }
               }
             )
-          ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uf-text-sm uf-truncate uf-min-w-0", children: depositAddress ? truncateAddress(depositAddress, 8, 6) : t5.noAddressAvailable }),
+          ) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "uf-text-sm uf-truncate uf-min-w-0", style: { color: components.card.titleColor }, children: depositAddress ? truncateAddress(depositAddress, 8, 6) : t5.noAddressAvailable }),
           depositAddress && initialSelectionDone && /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
             "span",
             {
               onClick: handleCopyAddress,
-              className: `uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer ${copied ? "uf-text-green-500" : "uf-text-muted-foreground"}`,
+              className: "uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer",
+              style: { color: copied ? colors2.success : components.card.actionColor },
               children: copied ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Check, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Copy, { className: "uf-w-3.5 uf-h-3.5" })
             }
           )
@@ -55947,7 +56016,8 @@ function TransferCryptoDoubleInput({
                   "span",
                   {
                     onClick: () => handleCopyRecipientAddress(recipientAddress),
-                    className: `uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer ${copiedRecipient ? "uf-text-green-500" : "uf-text-muted-foreground"}`,
+                    className: "uf-flex-shrink-0 uf-transition-colors uf-cursor-pointer",
+                    style: { color: copiedRecipient ? colors2.success : components.card.actionColor },
                     children: copiedRecipient ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Check, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Copy, { className: "uf-w-3.5 uf-h-3.5" })
                   }
                 )
@@ -57944,14 +58014,23 @@ function DepositModal({
   onDepositSuccess,
   onDepositError,
   theme = "dark",
-  hideOverlay = false
+  hideOverlay = false,
+  initialScreen = "main"
 }) {
   const { colors: colors2, fonts, components } = useTheme();
+  const effectiveInitialScreen = (0, import_react3.useMemo)(() => {
+    const s = initialScreen ?? "main";
+    if (s === "tracker" && hideDepositTracker) return "main";
+    return s;
+  }, [initialScreen, hideDepositTracker]);
   const [containerEl, setContainerEl] = (0, import_react3.useState)(null);
   const containerCallbackRef = (0, import_react3.useCallback)((el) => {
     setContainerEl(el);
   }, []);
-  const [view, setView] = (0, import_react3.useState)("main");
+  const [view, setView] = (0, import_react3.useState)(
+    effectiveInitialScreen
+  );
+  const resetViewTimeoutRef = (0, import_react3.useRef)(null);
   const [cardView, setCardView] = (0, import_react3.useState)(
     "amount"
   );
@@ -58071,6 +58150,43 @@ function DepositModal({
     const template = errors[code] ?? addressValidationMessages.defaultError;
     return interpolate(template, metadata);
   };
+  const openingScreen = effectiveInitialScreen;
+  const sessionOpenedFromMenu = openingScreen === "main";
+  const standaloneNeedsDepositPrereq = openingScreen !== "main" && (view === "transfer" || view === "card");
+  let depositPrerequisiteBody;
+  if (isCountryLoading || isAddressValidationLoading || tokensLoading || walletsLoading || !projectConfig) {
+    depositPrerequisiteBody = standaloneNeedsDepositPrereq ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SkeletonButton, { variant: "with-icons" }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SkeletonButton, { variant: "with-icons" }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SkeletonButton, { variant: "with-icons" }),
+      !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SkeletonButton, {})
+    ] });
+  } else if (countryError) {
+    depositPrerequisiteBody = /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "We couldn't verify your location. Please check your connection and try again." })
+    ] });
+  } else if (!isAllowed) {
+    depositPrerequisiteBody = /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "There are no supported tokens available from your current location." })
+    ] });
+  } else if (isAddressValid === false) {
+    depositPrerequisiteBody = /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: getAddressValidationErrorMessage(
+        addressFailureCode,
+        addressFailureMetadata
+      ) })
+    ] });
+  } else {
+    depositPrerequisiteBody = null;
+  }
+  const showBackTransfer = sessionOpenedFromMenu;
+  const showBackCard = cardView !== "amount" || sessionOpenedFromMenu;
+  const showBackTracker = selectedExecution !== null || sessionOpenedFromMenu;
   const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
   const handleWalletDisconnect = () => {
     setUserDisconnectedWallet(true);
@@ -58081,13 +58197,37 @@ function DepositModal({
   };
   const handleClose = () => {
     onOpenChange(false);
-    setTimeout(() => {
-      setView("main");
+    if (resetViewTimeoutRef.current) {
+      clearTimeout(resetViewTimeoutRef.current);
+    }
+    resetViewTimeoutRef.current = setTimeout(() => {
+      setView(effectiveInitialScreen);
       setCardView("amount");
       setExchangeView("providers");
       setBrowserWalletInfo(null);
+      resetViewTimeoutRef.current = null;
     }, 200);
   };
+  (0, import_react3.useLayoutEffect)(() => {
+    if (!open) return;
+    if (resetViewTimeoutRef.current) {
+      clearTimeout(resetViewTimeoutRef.current);
+      resetViewTimeoutRef.current = null;
+    }
+    setView(effectiveInitialScreen);
+    setCardView("amount");
+    setExchangeView("providers");
+    setBrowserWalletInfo(null);
+    setSelectedExecution(null);
+  }, [open, effectiveInitialScreen]);
+  (0, import_react3.useEffect)(
+    () => () => {
+      if (resetViewTimeoutRef.current) {
+        clearTimeout(resetViewTimeoutRef.current);
+      }
+    },
+    []
+  );
   const handleBack = () => {
     if (view === "card" && cardView === "quotes") {
       setCardView("amount");
@@ -58200,95 +58340,64 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || isAddressValidationLoading || tokensLoading || walletsLoading || !projectConfig ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SkeletonButton, { variant: "with-icons" }),
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SkeletonButton, { variant: "with-icons" }),
-                !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(SkeletonButton, {})
-              ] }) : countryError ? (
-                /* Error state - couldn't verify location */
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "We couldn't verify your location. Please check your connection and try again." })
-                ] })
-              ) : !isAllowed ? (
-                /* Blocked country state (isAllowed is false or null without error) */
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: "There are no supported tokens available from your current location." })
-                ] })
-              ) : isAddressValid === false ? (
-                /* Invalid recipient address state (e.g., Algorand not opted in) */
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("p", { className: "uf-text-sm uf-text-muted-foreground uf-max-w-[280px]", children: getAddressValidationErrorMessage(
-                    addressFailureCode,
-                    addressFailureMetadata
-                  ) })
-                ] })
-              ) : (
-                /* Normal deposit options */
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                    TransferCryptoButton,
-                    {
-                      onClick: () => setView("transfer"),
-                      title: t6.transferCrypto.title,
-                      subtitle: t6.transferCrypto.subtitle,
-                      featuredTokens: projectConfig.transfer_crypto.networks
-                    }
-                  ),
-                  enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                    BrowserWalletButton,
-                    {
-                      onClick: handleBrowserWalletClick,
-                      onConnectClick: handleWalletConnectClick,
-                      onDisconnect: handleWalletDisconnect,
-                      chainType: browserWalletChainType,
-                      publishableKey
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                    DepositWithCardButton,
-                    {
-                      onClick: () => setView("card"),
-                      title: t6.depositWithCard.title,
-                      subtitle: t6.depositWithCard.subtitle,
-                      paymentNetworks: projectConfig.payment_networks.networks
-                    }
-                  ),
-                  showPayWithExchange && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                    PayWithExchangeButton,
-                    {
-                      onClick: () => setView("exchange"),
-                      title: t6.payWithExchange.title,
-                      subtitle: t6.payWithExchange.subtitle,
-                      exchanges,
-                      loading: exchangesLoading
-                    }
-                  ),
-                  !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
-                    DepositTrackerButton,
-                    {
-                      onClick: () => {
-                        setAllExecutions(depositExecutions);
-                        setView("tracker");
-                      },
-                      title: "Deposit Tracker",
-                      subtitle: "Track your deposit progress",
-                      badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
-                    }
-                  )
-                ] })
-              ) })
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody ?? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                  TransferCryptoButton,
+                  {
+                    onClick: () => setView("transfer"),
+                    title: t6.transferCrypto.title,
+                    subtitle: t6.transferCrypto.subtitle,
+                    featuredTokens: projectConfig?.transfer_crypto.networks
+                  }
+                ),
+                enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                  BrowserWalletButton,
+                  {
+                    onClick: handleBrowserWalletClick,
+                    onConnectClick: handleWalletConnectClick,
+                    onDisconnect: handleWalletDisconnect,
+                    chainType: browserWalletChainType,
+                    publishableKey
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                  DepositWithCardButton,
+                  {
+                    onClick: () => setView("card"),
+                    title: t6.depositWithCard.title,
+                    subtitle: t6.depositWithCard.subtitle,
+                    paymentNetworks: projectConfig?.payment_networks.networks
+                  }
+                ),
+                showPayWithExchange && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                  PayWithExchangeButton,
+                  {
+                    onClick: () => setView("exchange"),
+                    title: t6.payWithExchange.title,
+                    subtitle: t6.payWithExchange.subtitle,
+                    exchanges,
+                    loading: exchangesLoading
+                  }
+                ),
+                !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                  DepositTrackerButton,
+                  {
+                    onClick: () => {
+                      setAllExecutions(depositExecutions);
+                      setView("tracker");
+                    },
+                    title: "Deposit Tracker",
+                    subtitle: "Track your deposit progress",
+                    badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
+                  }
+                )
+              ] }) })
             ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                 DepositHeader,
                 {
                   title: t6.transferCrypto.title,
-                  showBack: true,
+                  showBack: showBackTransfer,
                   onBack: handleBack,
                   onClose: handleClose,
                   showBalance: showBalanceHeader,
@@ -58300,7 +58409,7 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                 TransferCryptoSingleInput,
                 {
                   userId,
@@ -58336,12 +58445,12 @@ function DepositModal({
                 DepositHeader,
                 {
                   title: selectedExecution ? "Deposit Details" : "Deposit Tracker",
-                  showBack: true,
+                  showBack: showBackTracker,
                   onBack: handleBack,
                   onClose: handleClose
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-space-y-2 uf-pb-4", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                 "div",
                 {
                   className: "uf-text-sm",
@@ -58361,7 +58470,7 @@ function DepositModal({
                 DepositHeader,
                 {
                   title: cardView === "quotes" ? t6.quotes : t6.depositWithCard.title,
-                  showBack: true,
+                  showBack: showBackCard,
                   onBack: handleBack,
                   onClose: handleClose,
                   badge: cardView === "quotes" ? { count: quotesCount } : void 0,
@@ -58374,7 +58483,7 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
                 BuyWithCard,
                 {
                   userId,
@@ -58664,7 +58773,8 @@ function UnifoldProvider2({
             enablePayWithExchange: config?.enablePayWithExchange,
             onDepositSuccess: handleDepositSuccess,
             onDepositError: handleDepositError,
-            theme: resolvedTheme
+            theme: resolvedTheme,
+            initialScreen: depositConfig.initialScreen ?? config?.defaultInitialScreen
           }
         )
       ]