@unifold/ui-react 0.1.34 → 0.1.36

package/dist/index.js

@@ -1209,24 +1209,34 @@ function CurrencyModal({
             onClose: handleClose
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "uf-relative", children: /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsxs)("div", { className: "uf-pb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `.uf-currency-modal-search::placeholder { color: ${components.search.placeholderColor}; }`
+              }
             }
-          }
-        ) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.jsxs)("div", { className: "uf-space-y-2", children: [
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "uf-relative", children: /* @__PURE__ */ (0, import_jsx_runtime6.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_runtime6.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_runtime6.jsxs)("div", { className: "uf-space-y-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             CurrencyListSection,
             {
@@ -1774,188 +1784,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_runtime7.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_runtime7.jsx)(
-                  "span",
-                  {
-                    className: "uf-text-sm",
-                    style: {
-                      color: components.card.labelColor,
-                      fontFamily: fonts.regular
-                    },
-                    children: "Amount Sent"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.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_runtime7.jsx)(
-                  "span",
-                  {
-                    className: "uf-text-sm",
-                    style: {
-                      color: components.card.labelColor,
-                      fontFamily: fonts.regular
-                    },
-                    children: "Amount Received"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.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_runtime7.jsx)(
-                  "span",
-                  {
-                    className: "uf-text-sm",
-                    style: {
-                      color: components.card.labelColor,
-                      fontFamily: fonts.regular
-                    },
-                    children: "USD Value"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.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_runtime7.jsx)(
-                  "span",
-                  {
-                    className: "uf-text-sm",
-                    style: {
-                      color: components.card.labelColor,
-                      fontFamily: fonts.regular
-                    },
-                    children: "Estimated delivery time"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-                  "span",
-                  {
-                    style: {
-                      color: components.card.titleColor,
-                      fontFamily: fonts.regular,
-                      fontSize: "14px"
-                    },
-                    children: formatEstimatedTime(execution?.estimated_processing_time)
-                  }
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                className: "uf-text-sm",
+                style: {
+                  color: components.card.rowLeftLabel,
+                  fontFamily: fonts.regular
+                },
+                children: "Amount Sent"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                className: "uf-text-sm",
+                style: {
+                  color: components.card.rowLeftLabel,
+                  fontFamily: fonts.regular
+                },
+                children: "Amount Received"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                className: "uf-text-sm",
+                style: {
+                  color: components.card.rowLeftLabel,
+                  fontFamily: fonts.regular
+                },
+                children: "USD Value"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.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_runtime7.jsx)(
-                  "span",
-                  {
-                    className: "uf-text-sm",
-                    style: {
-                      color: components.card.labelColor,
-                      fontFamily: fonts.regular
-                    },
-                    children: "Source Network"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                className: "uf-text-sm",
+                style: {
+                  color: components.card.rowLeftLabel,
+                  fontFamily: fonts.regular
+                },
+                children: "Estimated delivery time"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                style: {
+                  color: components.card.rowRightLabel,
+                  fontFamily: fonts.regular,
+                  fontSize: "14px"
+                },
+                children: formatEstimatedTime(execution?.estimated_processing_time)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                className: "uf-text-sm",
+                style: {
+                  color: components.card.rowLeftLabel,
+                  fontFamily: fonts.regular
+                },
+                children: "Source Network"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center uf-px-4 uf-py-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
               "span",
               {
                 className: "uf-text-sm",
                 style: {
-                  color: components.card.labelColor,
+                  color: components.card.rowLeftLabel,
                   fontFamily: fonts.regular
                 },
                 children: "Destination Network"
@@ -1965,7 +1940,7 @@ function DepositDetailContent({ execution }) {
               "span",
               {
                 style: {
-                  color: components.card.titleColor,
+                  color: components.card.rowRightLabel,
                   fontFamily: fonts.regular,
                   fontSize: "14px"
                 },
@@ -2007,15 +1982,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_runtime7.jsx)(
                   "div",
                   {
                     className: "uf-text-sm",
                     style: {
-                      color: components.card.labelColor,
+                      color: components.card.rowLeftLabel,
                       fontFamily: fonts.regular
                     },
                     children: "Deposit Tx"
@@ -2026,7 +2000,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)
@@ -2036,7 +2010,7 @@ function DepositDetailContent({ execution }) {
                   import_lucide_react4.ExternalLink,
                   {
                     className: "uf-w-3.5 uf-h-3.5 uf-block",
-                    style: { color: components.card.actionColor }
+                    style: { color: components.card.actionIcon }
                   }
                 )
               ]
@@ -2055,7 +2029,7 @@ function DepositDetailContent({ execution }) {
                   {
                     className: "uf-text-sm",
                     style: {
-                      color: components.card.labelColor,
+                      color: components.card.rowLeftLabel,
                       fontFamily: fonts.regular
                     },
                     children: "Completion Tx"
@@ -2066,7 +2040,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(
@@ -2078,7 +2052,7 @@ function DepositDetailContent({ execution }) {
                   import_lucide_react4.ExternalLink,
                   {
                     className: "uf-w-3.5 uf-h-3.5 uf-block",
-                    style: { color: components.card.actionColor }
+                    style: { color: components.card.actionIcon }
                   }
                 )
               ]
@@ -2846,25 +2820,28 @@ function BuyWithCard({
                     }
                   }
                 ) }) }),
-                selectedCurrencyData?.suggested_amounts && selectedCurrencyData.suggested_amounts.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uf-flex uf-gap-3 uf-justify-center", children: selectedCurrencyData.suggested_amounts.map((quickAmount) => /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.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_runtime10.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_runtime10.jsx)(
                   "div",
                   {
@@ -2883,7 +2860,7 @@ function BuyWithCard({
                     "span",
                     {
                       style: {
-                        color: components.card.headerColor,
+                        color: components.card.labelColor,
                         fontFamily: fonts.medium
                       },
                       children: "Provider"
@@ -2942,7 +2919,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"
@@ -3057,8 +3034,8 @@ function BuyWithCard({
         /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("div", { className: "uf-space-y-2 uf-pt-2", children: sortedQuotes.map((quote, index) => {
+            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_runtime10.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, index) => {
               const badges = getProviderBadges(quote, sortedQuotes);
               const displayName = quote.service_provider_display_name;
               const isSelected = selectedProvider?.service_provider === quote.service_provider;
@@ -3075,11 +3052,11 @@ function BuyWithCard({
                   },
                   onMouseEnter: () => setHoveredProviderIndex(index),
                   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 === index ? 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_runtime10.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
@@ -3106,7 +3083,8 @@ function BuyWithCard({
                           badges.map((badge, i) => /* @__PURE__ */ (0, import_jsx_runtime10.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 && ","
@@ -3114,8 +3092,25 @@ function BuyWithCard({
                             },
                             i
                           )),
-                          quote.low_kyc === false && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "uf-text-[10px] uf-text-muted-foreground", children: "\u2022" }),
-                          quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)(
+                            "span",
+                            {
+                              className: "uf-text-[10px]",
+                              style: { color: components.card.subtextRightColor },
+                              children: "\u2022"
+                            }
+                          ),
+                          quote.low_kyc === false && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            "span",
+                            {
+                              className: "uf-text-[10px] uf-font-normal",
+                              style: {
+                                color: components.card.subtextRightColor,
+                                fontFamily: fonts.regular
+                              },
+                              children: "No document upload"
+                            }
+                          )
                         ] })
                       ] })
                     ] }),
@@ -3216,7 +3211,7 @@ function BuyWithCard({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.iconColor } }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-min-w-[72px]", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uf-h-8 uf-flex uf-items-center uf-justify-center uf-mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "uf-relative", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -3259,7 +3254,7 @@ function BuyWithCard({
                     }
                   )
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uf-px-1 uf-self-start uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react6.ChevronRight, { className: "uf-w-4 uf-h-4", style: { color: components.card.iconColor } }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-min-w-[72px]", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "uf-h-8 uf-flex uf-items-center uf-justify-center uf-mb-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "uf-relative", children: [
                     /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -3752,7 +3747,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")
@@ -3806,7 +3801,7 @@ function TransferCryptoButton({
             import_lucide_react9.Zap,
             {
               className: "uf-w-5 uf-h-5",
-              style: { color: colors2.foregroundMuted }
+              style: { color: components.card.iconColor }
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "uf-text-left", children: [
@@ -3898,7 +3893,7 @@ function DepositWithCardButton({
             import_lucide_react10.CreditCard,
             {
               className: "uf-w-5 uf-h-5",
-              style: { color: colors2.foregroundMuted }
+              style: { color: components.card.iconColor }
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "uf-text-left", children: [
@@ -3996,7 +3991,7 @@ function PayWithExchangeButton({
             import_lucide_react11.ArrowLeftRight,
             {
               className: "uf-w-5 uf-h-5",
-              style: { color: colors2.foregroundMuted }
+              style: { color: components.card.iconColor }
             }
           ) }),
           /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "uf-text-left", children: [
@@ -4088,7 +4083,7 @@ function DepositTrackerButton({
               import_lucide_react12.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_runtime16.jsx)(
@@ -7027,7 +7022,7 @@ function DepositsModal({
         onClose: handleClose
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("div", { className: "uf-space-y-2", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime33.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_runtime33.jsx)("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "div",
       {
         className: "uf-text-sm",
@@ -7226,23 +7221,33 @@ function TokenSelectorSheet({
           ),
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "uf-w-7 uf-h-5 uf-invisible" })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "uf-pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsxs)("div", { className: "uf-pb-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "style",
+            {
+              dangerouslySetInnerHTML: {
+                __html: `.uf-token-sheet-search::placeholder { color: ${components.search.placeholderColor}; }`
+              }
             }
-          }
-        ) }) }),
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { style: { position: "relative" }, children: /* @__PURE__ */ (0, import_jsx_runtime34.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_runtime34.jsxs)("div", { className: "uf-pb-3 uf--mx-6", children: [
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             "div",
@@ -7494,12 +7499,13 @@ function TokenSelectorSheet({
                     style: {
                       fontSize: 12,
                       flexShrink: 0,
-                      color: components.card.labelColor,
                       fontFamily: fonts.regular
                     },
                     children: [
-                      "Minimum:",
-                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { style: { color: components.card.textRightColor }, children: [
+                        "Minimum:",
+                        " "
+                      ] }),
                       /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { style: { color: components.card.labelHighlightRightColor }, children: [
                         "$",
                         chain.minimum_deposit_amount_usd
@@ -7581,13 +7587,15 @@ var import_jsx_runtime36 = require("react/jsx-runtime");
 function DepositFooterLinks({
   onGlossaryClick
 }) {
+  const { colors: colors2 } = useTheme();
   return /* @__PURE__ */ (0, import_jsx_runtime36.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_runtime36.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"
       }
     ),
@@ -7597,7 +7605,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"
       }
     ),
@@ -7605,8 +7614,9 @@ function DepositFooterLinks({
     /* @__PURE__ */ (0, import_jsx_runtime36.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"
       }
     )
@@ -7620,61 +7630,117 @@ var t3 = i18n.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_runtime37.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     DialogContent,
     {
-      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_runtime37.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-p-4 uf-pb-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DialogTitle, { className: "uf-text-base uf-font-semibold", children: "Glossary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "uf-relative uf-flex uf-items-center uf-justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)(import_lucide_react15.X, { className: "uf-w-4 uf-h-4" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            DialogTitle,
+            {
+              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_runtime37.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_runtime37.jsx)(import_lucide_react15.X, { className: "uf-w-4 uf-h-4" })
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsxs)("div", { className: "uf-space-y-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Your Deposit Token" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.selectTokenDepositTooltip })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Deposit Address" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Price Impact" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.priceImpact.tooltip })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Slippage" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.slippage.tooltip })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Processing Time" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Minimum Deposit" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "uf-text-xs uf-text-muted-foreground uf-leading-relaxed", children: t3.minDeposit.tooltip })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-border-t uf-border-border" }),
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", children: "Recipient Address" }),
-            /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.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_runtime37.jsxs)("div", { className: "uf-space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.selectTokenDepositTooltip })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Deposit Address" }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Price Impact" }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.priceImpact.tooltip })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Slippage" }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.slippage.tooltip })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Processing Time" }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.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_runtime37.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Minimum Deposit" }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "uf-text-xs uf-leading-relaxed", style: { color: components.card.descriptionColor }, children: t3.minDeposit.tooltip })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            "div",
+            {
+              className: "uf-rounded-xl uf-p-3",
+              style: { backgroundColor: components.card.backgroundColor },
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "uf-text-sm uf-font-medium uf-mb-1", style: { color: components.card.titleColor }, children: "Recipient Address" }),
+                /* @__PURE__ */ (0, import_jsx_runtime37.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." })
+              ]
+            }
+          )
         ] }) })
       ]
     }
@@ -7951,7 +8017,7 @@ function TransferCryptoSingleInput({
       className: "uf-space-y-3 [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden",
       style: { backgroundColor: colors2.background },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1", children: t4.selectTokenDeposit }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1", children: t4.selectTokenDeposit }) }),
         /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
           "button",
           {
@@ -8055,7 +8121,7 @@ function TransferCryptoSingleInput({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.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_runtime39.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_runtime39.jsx)(
@@ -8100,7 +8166,7 @@ function TransferCryptoSingleInput({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.jsx)(
@@ -8112,12 +8178,13 @@ function TransferCryptoSingleInput({
                 }
               }
             )
-          ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "uf-text-sm uf-truncate uf-min-w-0", children: depositAddress ? truncateAddress(depositAddress, 8, 6) : t4.noAddressAvailable }),
+          ) : /* @__PURE__ */ (0, import_jsx_runtime39.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_runtime39.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_runtime39.jsx)(import_lucide_react16.Check, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react16.Copy, { className: "uf-w-3.5 uf-h-3.5" })
             }
           )
@@ -8179,7 +8246,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_runtime39.jsx)(import_lucide_react16.Check, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react16.Copy, { className: "uf-w-3.5 uf-h-3.5" })
                   }
                 )
@@ -8585,7 +8653,7 @@ function TransferCryptoDoubleInput({
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
           /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.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_runtime41.jsxs)(
               Select,
               {
@@ -8593,7 +8661,7 @@ function TransferCryptoDoubleInput({
                 onValueChange: setToken,
                 disabled: tokensLoading || supportedTokens.length === 0,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectTrigger, { 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_runtime41.jsx)(SelectValue, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t5.loading }) }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "uf-text-xs uf-font-normal", children: token }) }) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectTrigger, { 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_runtime41.jsx)(SelectValue, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t5.loading }) }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "uf-text-xs uf-font-normal", children: token }) }) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectContent, { 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_runtime41.jsx)(
                     SelectItem,
                     {
@@ -8608,7 +8676,7 @@ function TransferCryptoDoubleInput({
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.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_runtime41.jsxs)("span", { className: "uf-font-medium", style: { color: components.card.labelHighlightRightColor }, children: [
                 "$",
@@ -8624,7 +8692,7 @@ function TransferCryptoDoubleInput({
                 onValueChange: setChain,
                 disabled: tokensLoading || availableChainsForToken.length === 0,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectTrigger, { 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_runtime41.jsx)(SelectValue, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chain }) }) }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(SelectTrigger, { 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_runtime41.jsx)(SelectValue, { children: tokensLoading ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chain }) }) }) }),
                   /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
                     SelectContent,
                     {
@@ -8667,7 +8735,7 @@ function TransferCryptoDoubleInput({
           ] })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.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_runtime41.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_runtime41.jsx)(
@@ -8712,7 +8780,7 @@ function TransferCryptoDoubleInput({
             }
           ) })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.jsx)(
@@ -8724,12 +8792,13 @@ function TransferCryptoDoubleInput({
                 }
               }
             )
-          ) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "uf-text-sm uf-truncate uf-min-w-0", children: depositAddress ? truncateAddress(depositAddress, 8, 6) : t5.noAddressAvailable }),
+          ) : /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime41.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_runtime41.jsx)(import_lucide_react18.Check, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react18.Copy, { className: "uf-w-3.5 uf-h-3.5" })
             }
           )
@@ -8791,7 +8860,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_runtime41.jsx)(import_lucide_react18.Check, { className: "uf-w-3.5 uf-h-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react18.Copy, { className: "uf-w-3.5 uf-h-3.5" })
                   }
                 )
@@ -10819,14 +10889,23 @@ function DepositModal({
   onDepositSuccess,
   onDepositError,
   theme = "dark",
-  hideOverlay = false
+  hideOverlay = false,
+  initialScreen = "main"
 }) {
   const { colors: colors2, fonts, components } = useTheme();
+  const effectiveInitialScreen = (0, import_react16.useMemo)(() => {
+    const s = initialScreen ?? "main";
+    if (s === "tracker" && hideDepositTracker) return "main";
+    return s;
+  }, [initialScreen, hideDepositTracker]);
   const [containerEl, setContainerEl] = (0, import_react16.useState)(null);
   const containerCallbackRef = (0, import_react16.useCallback)((el) => {
     setContainerEl(el);
   }, []);
-  const [view, setView] = (0, import_react16.useState)("main");
+  const [view, setView] = (0, import_react16.useState)(
+    effectiveInitialScreen
+  );
+  const resetViewTimeoutRef = (0, import_react16.useRef)(null);
   const [cardView, setCardView] = (0, import_react16.useState)(
     "amount"
   );
@@ -10946,6 +11025,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_runtime48.jsx)(SkeletonButton, { variant: "with-icons" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, { variant: "with-icons" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, { variant: "with-icons" }),
+      !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, {})
+    ] });
+  } else if (countryError) {
+    depositPrerequisiteBody = /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.jsx)(import_lucide_react23.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.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_runtime48.jsx)(import_lucide_react23.MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.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_runtime48.jsx)(import_lucide_react23.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
+      /* @__PURE__ */ (0, import_jsx_runtime48.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);
@@ -10956,13 +11072,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_react16.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_react16.useEffect)(
+    () => () => {
+      if (resetViewTimeoutRef.current) {
+        clearTimeout(resetViewTimeoutRef.current);
+      }
+    },
+    []
+  );
   const handleBack = () => {
     if (view === "card" && cardView === "quotes") {
       setCardView("amount");
@@ -11075,95 +11215,64 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: isCountryLoading || isAddressValidationLoading || tokensLoading || walletsLoading || !projectConfig ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, { variant: "with-icons" }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, { variant: "with-icons" }),
-                !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SkeletonButton, {})
-              ] }) : countryError ? (
-                /* Error state - couldn't verify location */
-                /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.jsx)(import_lucide_react23.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "Unable to Verify Location" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.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_runtime48.jsx)(import_lucide_react23.MapPinOff, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: "No Tokens Available" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.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_runtime48.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_runtime48.jsx)(import_lucide_react23.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-text-foreground uf-mb-2", children: addressValidationMessages.unableToReceiveFunds }),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                    TransferCryptoButton,
-                    {
-                      onClick: () => setView("transfer"),
-                      title: t6.transferCrypto.title,
-                      subtitle: t6.transferCrypto.subtitle,
-                      featuredTokens: projectConfig.transfer_crypto.networks
-                    }
-                  ),
-                  enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                    BrowserWalletButton,
-                    {
-                      onClick: handleBrowserWalletClick,
-                      onConnectClick: handleWalletConnectClick,
-                      onDisconnect: handleWalletDisconnect,
-                      chainType: browserWalletChainType,
-                      publishableKey
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                    DepositWithCardButton,
-                    {
-                      onClick: () => setView("card"),
-                      title: t6.depositWithCard.title,
-                      subtitle: t6.depositWithCard.subtitle,
-                      paymentNetworks: projectConfig.payment_networks.networks
-                    }
-                  ),
-                  showPayWithExchange && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
-                    PayWithExchangeButton,
-                    {
-                      onClick: () => setView("exchange"),
-                      title: t6.payWithExchange.title,
-                      subtitle: t6.payWithExchange.subtitle,
-                      exchanges,
-                      loading: exchangesLoading
-                    }
-                  ),
-                  !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  TransferCryptoButton,
+                  {
+                    onClick: () => setView("transfer"),
+                    title: t6.transferCrypto.title,
+                    subtitle: t6.transferCrypto.subtitle,
+                    featuredTokens: projectConfig?.transfer_crypto.networks
+                  }
+                ),
+                enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  BrowserWalletButton,
+                  {
+                    onClick: handleBrowserWalletClick,
+                    onConnectClick: handleWalletConnectClick,
+                    onDisconnect: handleWalletDisconnect,
+                    chainType: browserWalletChainType,
+                    publishableKey
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  DepositWithCardButton,
+                  {
+                    onClick: () => setView("card"),
+                    title: t6.depositWithCard.title,
+                    subtitle: t6.depositWithCard.subtitle,
+                    paymentNetworks: projectConfig?.payment_networks.networks
+                  }
+                ),
+                showPayWithExchange && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  PayWithExchangeButton,
+                  {
+                    onClick: () => setView("exchange"),
+                    title: t6.payWithExchange.title,
+                    subtitle: t6.payWithExchange.subtitle,
+                    exchanges,
+                    loading: exchangesLoading
+                  }
+                ),
+                !hideDepositTracker && /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 DepositHeader,
                 {
                   title: t6.transferCrypto.title,
-                  showBack: true,
+                  showBack: showBackTransfer,
                   onBack: handleBack,
                   onClose: handleClose,
                   showBalance: showBalanceHeader,
@@ -11175,7 +11284,7 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : transferInputVariant === "single_input" ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 TransferCryptoSingleInput,
                 {
                   userId,
@@ -11211,12 +11320,12 @@ function DepositModal({
                 DepositHeader,
                 {
                   title: selectedExecution ? "Deposit Details" : "Deposit Tracker",
-                  showBack: true,
+                  showBack: showBackTracker,
                   onBack: handleBack,
                   onClose: handleClose
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-space-y-2 uf-pb-4", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(DepositDetailContent, { execution: selectedExecution }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-space-y-2 uf-pb-8", children: allExecutions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-py-8 uf-px-4 uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 "div",
                 {
                   className: "uf-text-sm",
@@ -11236,7 +11345,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,
@@ -11249,7 +11358,7 @@ function DepositModal({
                   publishableKey
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              standaloneNeedsDepositPrereq && depositPrerequisiteBody !== null ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-pb-4 uf-space-y-3", children: depositPrerequisiteBody }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
                 BuyWithCard,
                 {
                   userId,