@unifold/ui-web 0.1.33 → 0.1.35

package/dist/index.mjs

@@ -43036,19 +43036,35 @@ var API_BASE_URL = (() => {
     return "https://api.unifold.io";
   }
 })();
-var DEFAULT_PUBLISHABLE_KEY = "pk_test_123";
+var DEFAULT_PUBLISHABLE_KEY = "";
 var DEFAULT_CONFIG = {};
+function setApiConfig(config) {
+  if (config.publishableKey !== void 0) {
+    if (!config.publishableKey || config.publishableKey.trim() === "") {
+      throw new Error(
+        "Unifold SDK: publishableKey cannot be empty. Please provide a valid publishable key."
+      );
+    }
+    if (!config.publishableKey.startsWith("pk_test_") && !config.publishableKey.startsWith("pk_live_")) {
+      console.warn(
+        'Unifold SDK: publishableKey should start with "pk_test_" or "pk_live_". Please ensure you are using a valid publishable key.'
+      );
+    }
+    DEFAULT_PUBLISHABLE_KEY = config.publishableKey;
+  }
+  if (config.baseUrl) {
+    API_BASE_URL = config.baseUrl;
+  }
+  if (config.defaultConfig) {
+    DEFAULT_CONFIG = config.defaultConfig;
+  }
+}
 function validatePublishableKey(key) {
   if (!key || key.trim() === "") {
     throw new Error(
       "Unifold SDK: No publishable key configured. Please provide a valid publishable key via setApiConfig() or pass it directly to the API function."
     );
   }
-  if (key === "pk_test_123") {
-    console.warn(
-      'Unifold SDK: Using default test key "pk_test_123". This should only be used for local development. Please use a real publishable key in production.'
-    );
-  }
 }
 function getIconUrl(iconPath) {
   const normalizedPath = iconPath.startsWith("/") ? iconPath : `/${iconPath}`;
@@ -48590,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,
             {
@@ -49129,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"
@@ -49320,7 +49311,7 @@ function DepositDetailContent({ execution }) {
               "span",
               {
                 style: {
-                  color: components.card.titleColor,
+                  color: components.card.rowRightLabel,
                   fontFamily: fonts.regular,
                   fontSize: "14px"
                 },
@@ -49362,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"
@@ -49381,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)
@@ -49391,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 }
                   }
                 )
               ]
@@ -49410,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"
@@ -49421,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(
@@ -49433,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 }
                   }
                 )
               ]
@@ -50192,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",
                   {
@@ -50229,7 +50222,7 @@ function BuyWithCard({
                     "span",
                     {
                       style: {
-                        color: components.card.headerColor,
+                        color: components.card.labelColor,
                         fontFamily: fonts.medium
                       },
                       children: "Provider"
@@ -50288,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"
@@ -50403,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;
@@ -50421,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: [
@@ -50452,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 && ","
@@ -50460,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"
+                            }
+                          )
                         ] })
                       ] })
                     ] }),
@@ -50562,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)(
@@ -50605,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)(
@@ -51087,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")
@@ -51136,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: [
@@ -51223,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: [
@@ -51316,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: [
@@ -51403,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)(
@@ -54233,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",
@@ -54427,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",
@@ -54695,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
@@ -54776,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"
       }
     ),
@@ -54792,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"
       }
     ),
@@ -54800,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"
       }
     )
@@ -54811,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." })
+              ]
+            }
+          )
         ] }) })
       ]
     }
@@ -55106,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",
           {
@@ -55210,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)(
@@ -55255,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)(
@@ -55267,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" })
             }
           )
@@ -55334,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" })
                   }
                 )
@@ -55725,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,
               {
@@ -55733,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,
                     {
@@ -55748,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: [
                 "$",
@@ -55764,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,
                     {
@@ -55807,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)(
@@ -55852,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)(
@@ -55864,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" })
             }
           )
@@ -55931,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" })
                   }
                 )
@@ -58325,7 +58411,7 @@ function DepositModal({
                   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",
@@ -58518,6 +58604,11 @@ function UnifoldProvider2({
     null
   );
   const [resolvedTheme, setResolvedTheme] = import_react.default.useState("dark");
+  (0, import_react.useEffect)(() => {
+    if (publishableKey) {
+      setApiConfig({ publishableKey });
+    }
+  }, [publishableKey]);
   import_react.default.useEffect(() => {
     const appearance = config?.appearance || "dark";
     if (appearance === "auto") {
@@ -58534,12 +58625,16 @@ function UnifoldProvider2({
     }
   }, [config?.appearance]);
   const depositPromiseRef = import_react.default.useRef(null);
+  const depositConfigRef = import_react.default.useRef(null);
+  depositConfigRef.current = depositConfig;
   const closeTimeoutRef = import_react.default.useRef(null);
+  const closeGuardRef = import_react.default.useRef(false);
   const beginDeposit = (0, import_react.useCallback)((config2) => {
     if (closeTimeoutRef.current) {
       clearTimeout(closeTimeoutRef.current);
       closeTimeoutRef.current = null;
     }
+    closeGuardRef.current = false;
     if (depositPromiseRef.current) {
       console.warn("[UnifoldProvider] A deposit is already in progress. Cancelling previous deposit.");
       depositPromiseRef.current.reject({
@@ -58551,17 +58646,27 @@ function UnifoldProvider2({
     const promise = new Promise((resolve, reject) => {
       depositPromiseRef.current = { resolve, reject };
     });
+    promise.catch(() => {
+    });
     setDepositConfig(config2);
     setIsOpen(true);
     return promise;
   }, []);
   const closeDeposit = (0, import_react.useCallback)(() => {
-    if (depositPromiseRef.current) {
-      depositPromiseRef.current.reject({
+    if (closeGuardRef.current) {
+      return;
+    }
+    closeGuardRef.current = true;
+    const promiseToReject = depositPromiseRef.current;
+    depositPromiseRef.current = null;
+    if (depositConfigRef.current?.onClose) {
+      depositConfigRef.current.onClose();
+    }
+    if (promiseToReject) {
+      promiseToReject.reject({
         message: "Deposit cancelled by user",
         code: "DEPOSIT_CANCELLED"
       });
-      depositPromiseRef.current = null;
     }
     setIsOpen(false);
     closeTimeoutRef.current = setTimeout(() => {