@deframe-sdk/components 0.1.34 → 0.1.36

package/dist/index.js

@@ -4903,7 +4903,7 @@ var SwapProcessingViewSimple = () => {
               "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
               "rounded-[inherit]",
               "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
-              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(LoadingIcon, {}),
@@ -5255,7 +5255,7 @@ var SwapSignatureWarningViewSimple = ({
               "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
               "rounded-[inherit]",
               "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
-              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(WarningIcon, {}),
@@ -5445,7 +5445,7 @@ var SwapSuccessViewSimple = () => {
               "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
               "rounded-[inherit]",
               "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
-              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(SuccessIcon, {}),
@@ -5648,7 +5648,7 @@ var SwapTransactionFailedViewSimple = ({
               "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
               "rounded-[inherit]",
               "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
-              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+              "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
             ),
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, {}),
@@ -6345,6 +6345,35 @@ var SwapFormView = ({
     )
   ] });
 };
+var FONT_SIZE_CLASSES = [
+  "text-[36px]",
+  // 0–7 chars
+  "text-[34px]",
+  // 8 chars
+  "text-[32px]",
+  // 9 chars
+  "text-[30px]",
+  // 10 chars
+  "text-[28px]",
+  // 11 chars
+  "text-[26px]",
+  // 12 chars
+  "text-[24px]",
+  // 13 chars
+  "text-[22px]",
+  // 14 chars
+  "text-[20px]"
+  // 15+ chars
+];
+function getResponsiveFontSizeClass(value) {
+  const len = value.length;
+  if (len <= 7) return FONT_SIZE_CLASSES[0];
+  const index = Math.min(len - 7, FONT_SIZE_CLASSES.length - 1);
+  return FONT_SIZE_CLASSES[index];
+}
+function useResponsiveFontSize(value) {
+  return React6.useMemo(() => getResponsiveFontSizeClass(value), [value]);
+}
 var SwapFromCardViewSimple = ({
   labels,
   selectedToken,
@@ -6368,6 +6397,7 @@ var SwapFromCardViewSimple = ({
   errorActionLabel = "Adicionar via PIX",
   onErrorAction
 }) => {
+  const fontSizeClass = useResponsiveFontSize(amountValue || "");
   const [isHovered, setIsHovered] = React6.useState(false);
   const hideTimeout = React6.useRef(null);
   const handleMouseEnter = React6.useCallback(() => {
@@ -6439,9 +6469,11 @@ var SwapFromCardViewSimple = ({
                         className: tailwindMerge.twMerge(
                           "bg-transparent border-none outline-none",
                           "text-right",
-                          "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
+                          fontSizeClass,
+                          "[font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
                           "w-full px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
                           "font-[var(--deframe-widget-font-family)]",
+                          "overflow-hidden text-ellipsis",
                           "placeholder:text-[color:var(--deframe-widget-color-text-tertiary)]",
                           isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
                         )
@@ -6930,6 +6962,7 @@ var SwapToCardViewSimple = ({
 }) => {
   const handleTokenClick = onNetworkAndAssetClick != null ? onNetworkAndAssetClick : onTokenClick;
   const isEmpty = !outputAmount || Number(outputAmount) === 0;
+  const fontSizeClass = useResponsiveFontSize(outputAmount || "");
   const wrapperClasses = tailwindMerge.twMerge(
     "rounded-[var(--deframe-widget-size-radius-sm)]",
     "border",
@@ -7095,9 +7128,10 @@ var SwapToCardViewSimple = ({
                   {
                     "data-test-id": "swap-to-simple-output-amount",
                     className: tailwindMerge.twMerge(
-                      "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
+                      fontSizeClass,
+                      "[font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
                       "font-[var(--deframe-widget-font-family)]",
-                      "text-right w-full",
+                      "text-right w-full overflow-hidden text-ellipsis",
                       isEmpty ? "text-[color:var(--deframe-widget-color-text-tertiary)]" : "text-[color:var(--deframe-widget-color-text-primary)]"
                     ),
                     children: isEmpty ? "0" : outputAmount
@@ -9004,16 +9038,12 @@ var StrategyGridCard = ({
     ]
   }
 );
-var strategyCardClasses = [
-  "w-full",
+var cardClasses = [
+  "w-full flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
+  "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
   "bg-[var(--deframe-widget-color-bg-secondary)]",
   "border border-[color:var(--deframe-widget-color-border-secondary)]",
-  "rounded-[var(--deframe-widget-size-radius-md)]",
-  "p-[var(--deframe-widget-size-padding-x-md)]",
-  "flex flex-row items-center justify-between",
-  "gap-[var(--deframe-widget-size-gap-md)]",
-  "hover:border-[color:var(--deframe-widget-color-border-primary)]",
-  "transition-colors"
+  "rounded-[var(--deframe-widget-size-radius-md)]"
 ].join(" ");
 var StrategyGridCardSimple = ({
   logoUrl,
@@ -9027,41 +9057,49 @@ var StrategyGridCardSimple = ({
   var _a, _b, _c, _d, _e;
   const investLabel = (_a = labels == null ? void 0 : labels.investLabel) != null ? _a : "Depositar";
   const riskBadgeMap = {
-    low: /* @__PURE__ */ jsxRuntime.jsx(LowRiskBadge, { label: (_b = labels == null ? void 0 : labels.riskLow) != null ? _b : "Risco Baixo" }),
-    medium: /* @__PURE__ */ jsxRuntime.jsx(MediumRiskBadge, { label: (_c = labels == null ? void 0 : labels.riskMedium) != null ? _c : "Risco M\xE9dio" }),
-    high: /* @__PURE__ */ jsxRuntime.jsx(HighRiskBadge, { label: (_d = labels == null ? void 0 : labels.riskHigh) != null ? _d : "Risco Alto" })
+    low: /* @__PURE__ */ jsxRuntime.jsx(LowRiskBadge, { label: (_b = labels == null ? void 0 : labels.riskLow) != null ? _b : "Baixo" }),
+    medium: /* @__PURE__ */ jsxRuntime.jsx(MediumRiskBadge, { label: (_c = labels == null ? void 0 : labels.riskMedium) != null ? _c : "M\xE9dio" }),
+    high: /* @__PURE__ */ jsxRuntime.jsx(HighRiskBadge, { label: (_d = labels == null ? void 0 : labels.riskHigh) != null ? _d : "Alto" })
   };
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "article",
     {
       "data-slot": "strategy-grid-card-simple",
       "data-test-id": "strategy-grid-card-simple",
-      className: strategyCardClasses,
+      className: cardClasses,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("img", { alt: title, src: logoUrl, referrerPolicy: "no-referrer", className: "w-full h-full object-contain" }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[var(--deframe-widget-font-leading-sm)] font-[var(--deframe-widget-font-family)] truncate", children: title }),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-secondary)] leading-[var(--deframe-widget-font-leading-xs)]", children: chainName })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)]", children: (_e = labels == null ? void 0 : labels.apyLabel) != null ? _e : "Rendimento" }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[length:var(--deframe-widget-font-size-lg)] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-brand-primary)] font-[var(--deframe-widget-font-family)] leading-none mt-[2px]", children: apyFormatted })
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] [font-weight:var(--deframe-widget-font-weight-semibold)] text-[color:var(--deframe-widget-color-text-primary)] leading-[1.3] font-[var(--deframe-widget-font-family)] truncate", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] leading-[1.4]", children: chainName })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0", children: riskBadgeMap[riskLevel] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-shrink-0 whitespace-nowrap", children: riskBadgeMap[riskLevel] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-[var(--deframe-widget-size-gap-sm)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] uppercase tracking-[0.08em] text-[color:var(--deframe-widget-color-text-tertiary)]", children: (_e = labels == null ? void 0 : labels.apyLabel) != null ? _e : "Rendimento" }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            PrimaryButton,
+            "span",
             {
-              "data-test-id": "strategy-grid-card-simple-invest",
-              "aria-label": `${investLabel} ${title}`,
-              onClick: onInvestClick,
-              className: "h-9 text-[13px] px-[var(--deframe-widget-size-padding-x-md)]",
-              children: investLabel
+              className: tailwindMerge.twMerge(
+                "text-[22px] [font-weight:var(--deframe-widget-font-weight-bold)]",
+                "text-[color:var(--deframe-widget-color-brand-primary)]",
+                "font-[var(--deframe-widget-font-family)] leading-[1.1]"
+              ),
+              children: apyFormatted
             }
           )
-        ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PrimaryButton,
+          {
+            "data-test-id": "strategy-grid-card-simple-invest",
+            "aria-label": `${investLabel} ${title}`,
+            onClick: onInvestClick,
+            className: "h-9 text-[13px] w-full",
+            children: investLabel
+          }
+        )
       ]
     }
   );
@@ -10915,7 +10953,8 @@ var EarnTokenSelectorSimpleView = ({
   isLoading,
   selectTokenLabel,
   chainLabel,
-  chainImage
+  chainImage,
+  className
 }) => {
   const hasToken = selectedToken != null;
   const isInteractive = !!onNetworkAndAssetClick;
@@ -10934,7 +10973,8 @@ var EarnTokenSelectorSimpleView = ({
   };
   const selectorClasses = tailwindMerge.twMerge(
     baseClasses,
-    stateClasses[isInteractive ? "interactive" : "static"]
+    stateClasses[isInteractive ? "interactive" : "static"],
+    className
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
@@ -11061,9 +11101,10 @@ var EarnAmountInputSimpleView = ({
   dollarAmountFormatted
 }) => {
   const isEmpty = !value || value === "0";
+  const fontSizeClass = useResponsiveFontSize(value || "");
   const inputBaseClasses = [
     "bg-transparent border-none outline-none text-right",
-    "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]",
+    `${fontSizeClass} [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1]`,
     "w-full",
     "px-[var(--deframe-widget-size-padding-x-none)] py-[var(--deframe-widget-size-padding-y-none)]",
     "font-[var(--deframe-widget-font-family)]",
@@ -11108,7 +11149,7 @@ var EarnAmountInputSimpleView = ({
           {
             "data-slot": "amount-input-simple-conversion",
             "data-test-id": "earn-amount-input-simple-view-conversion",
-            className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+            className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)] overflow-hidden text-ellipsis whitespace-nowrap max-w-full",
             children: dollarAmountFormatted
           }
         )
@@ -11262,7 +11303,7 @@ var EarnInlineNotificationSimpleView = ({
 };
 var EarnDepositFormViewSimple = ({
   // Header / Layout
-  headerTitle,
+  pageTitle,
   onBack,
   onSubmit,
   // Token selector
@@ -11370,7 +11411,7 @@ var EarnDepositFormViewSimple = ({
                 "data-slot": "deposit-panel-simple-title",
                 "data-test-id": "earn-deposit-form-view-simple-title",
                 className: titleBaseClasses,
-                children: headerTitle
+                children: pageTitle
               }
             )
           }
@@ -11725,7 +11766,7 @@ var EarnWithdrawFormView = ({
 ] });
 var EarnWithdrawFormViewSimple = ({
   // Header / Layout
-  headerTitle,
+  pageTitle,
   onBack,
   onSubmit,
   // Position card (used for inline balance row)
@@ -11828,7 +11869,7 @@ var EarnWithdrawFormViewSimple = ({
                 "data-slot": "withdraw-panel-simple-title",
                 "data-test-id": "earn-withdraw-form-view-simple-title",
                 className: titleBaseClasses,
-                children: headerTitle
+                children: pageTitle
               }
             )
           }
@@ -12087,7 +12128,18 @@ var EarnDepositProcessingView = ({
     }
   );
 };
-function EarnFormSkeleton() {
+function EarnFormSkeleton({
+  headerTitle = "Deposit",
+  tokenSymbol = "USDC",
+  tokenLogoURI,
+  chainLabel = "Arbitrum",
+  chainImage,
+  amount = "500",
+  dollarAmount = "\u2248 $499.87",
+  availableBalance = "Available: 1,250.00 USDC",
+  cancelLabel = "Cancel",
+  submitLabel = "Deposit"
+} = {}) {
   const headerClasses = [
     "flex items-center",
     "px-[var(--deframe-widget-size-padding-x-md)]",
@@ -12123,7 +12175,7 @@ function EarnFormSkeleton() {
       "data-test-id": "earn-form-skeleton",
       className: "flex flex-col font-[var(--deframe-widget-font-family)]",
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClasses2, children: "Deposit" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-header", className: headerClasses, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleClasses2, children: headerTitle }) }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-divider", className: dividerClasses }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-form-skeleton-body", className: bodyClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-form-skeleton-input-card", className: inputCardClasses, children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
@@ -12139,29 +12191,43 @@ function EarnFormSkeleton() {
                 ),
                 children: [
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-shrink-0 w-[38px] h-[38px]", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
+                    tokenLogoURI ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: tokenLogoURI,
+                        alt: tokenSymbol,
+                        className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] object-cover"
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
                       "div",
                       {
                         className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center text-[12px] [font-weight:var(--deframe-widget-font-weight-bold)] text-[color:var(--deframe-widget-color-text-primary)]",
-                        children: "US"
+                        children: tokenSymbol.slice(0, 2).toUpperCase()
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]" })
+                    chainImage ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[var(--deframe-widget-size-radius-full)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: chainImage,
+                        alt: chainLabel,
+                        className: "w-full h-full rounded-[var(--deframe-widget-size-radius-full)] object-cover"
+                      }
+                    ) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -bottom-0.5 -right-0.5 w-4 h-4 rounded-[var(--deframe-widget-size-radius-full)] bg-[var(--deframe-widget-color-bg-tertiary)] shadow-[0_0_0_2px_var(--deframe-widget-color-bg-secondary)]" })
                   ] }),
                   /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start min-w-0", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: "USDC" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]", children: "Arbitrum" })
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[16px] [font-weight:var(--deframe-widget-font-weight-semibold)] leading-[1.2] font-[var(--deframe-widget-font-family)] text-[color:var(--deframe-widget-color-text-primary)]", children: tokenSymbol }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[11px] [font-weight:var(--deframe-widget-font-weight-medium)] text-[color:var(--deframe-widget-color-text-tertiary)] uppercase tracking-[0.04em] font-[var(--deframe-widget-font-family)] leading-[1.2]", children: chainLabel })
                   ] })
                 ]
               }
             ),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-px h-10 bg-[var(--deframe-widget-color-border-secondary)] flex-shrink-0" }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end flex-1 min-w-0", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1] text-[color:var(--deframe-widget-color-text-primary)] text-right w-full font-[var(--deframe-widget-font-family)]", children: "500" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: "\u2248 $499.87" })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[36px] [font-weight:var(--deframe-widget-font-weight-semibold)] [line-height:1.1] text-[color:var(--deframe-widget-color-text-primary)] text-right w-full font-[var(--deframe-widget-font-family)]", children: amount }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: dollarAmount })
             ] })
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "Available: 1,250.00 USDC" }) })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] text-[color:var(--deframe-widget-color-text-tertiary)]", children: availableBalance }) })
         ] }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-form-skeleton-footer", className: footerClasses, children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -12176,7 +12242,7 @@ function EarnFormSkeleton() {
                 "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
                 "text-[color:var(--deframe-widget-color-text-secondary)]"
               ),
-              children: "Cancel"
+              children: cancelLabel
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -12191,7 +12257,7 @@ function EarnFormSkeleton() {
                 "text-[15px] [font-weight:var(--deframe-widget-font-weight-semibold)]",
                 "text-[color:var(--deframe-widget-color-text-primary-dark)]"
               ),
-              children: "Deposit"
+              children: submitLabel
             }
           )
         ] })
@@ -12202,7 +12268,8 @@ function EarnFormSkeleton() {
 function EarnFeedbackOverlaySimpleView({
   variant,
   title,
-  subtitle
+  subtitle,
+  formData
 }) {
   const isLoading = variant === "loading";
   const wrapperClasses = tailwindMerge.twMerge(
@@ -12218,7 +12285,7 @@ function EarnFeedbackOverlaySimpleView({
     "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-lg)]",
     "rounded-[inherit]",
     "backdrop-blur-[12px] [-webkit-backdrop-filter:blur(12px)]",
-    "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-primary)_88%,transparent)]"
+    "bg-[color-mix(in_srgb,var(--deframe-widget-color-bg-secondary)_88%,transparent)]"
   );
   const textSectionClasses = tailwindMerge.twMerge(
     "flex flex-col items-center",
@@ -12241,7 +12308,7 @@ function EarnFeedbackOverlaySimpleView({
       "data-slot": "earn-feedback-overlay-wrapper",
       className: wrapperClasses,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-feedback-overlay-skeleton", children: /* @__PURE__ */ jsxRuntime.jsx(EarnFormSkeleton, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-feedback-overlay-skeleton", children: /* @__PURE__ */ jsxRuntime.jsx(EarnFormSkeleton, __spreadValues({}, formData)) }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           framerMotion.motion.div,
           {
@@ -12526,15 +12593,24 @@ function WarningIcon2() {
   );
 }
 var EarnDepositProcessingSimpleView = ({
-  title,
-  descriptionPrefix
+  amountToken,
+  amountUSD,
+  iconSrc,
+  strategyName
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-deposit-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
-      title,
-      subtitle: descriptionPrefix
+      title: "Processando Dep\xF3sito...",
+      subtitle: "Aguarde enquanto seu dep\xF3sito \xE9 confirmado.",
+      formData: {
+        headerTitle: "Dep\xF3sito",
+        tokenSymbol: strategyName,
+        tokenLogoURI: iconSrc,
+        amount: amountToken,
+        dollarAmount: amountUSD
+      }
     }
   ) });
 };
@@ -12612,9 +12688,12 @@ var EarnDepositSuccessView = ({
   );
 };
 var EarnDepositSuccessSimpleView = ({
-  title,
-  descriptionSuffix,
-  onClose
+  onClose,
+  tokenSymbol,
+  amountToken,
+  amountUSD,
+  iconSrc,
+  strategyName
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onClose) return;
@@ -12625,8 +12704,15 @@ var EarnDepositSuccessSimpleView = ({
     EarnFeedbackOverlaySimpleView,
     {
       variant: "success",
-      title,
-      subtitle: descriptionSuffix
+      title: "Dep\xF3sito Confirmado!",
+      subtitle: "Seu saldo foi atualizado.",
+      formData: {
+        headerTitle: "Dep\xF3sito",
+        tokenSymbol: tokenSymbol || strategyName,
+        tokenLogoURI: iconSrc,
+        amount: amountToken,
+        dollarAmount: amountUSD
+      }
     }
   ) });
 };
@@ -12690,9 +12776,11 @@ var EarnDepositWarningView = ({
   );
 };
 var EarnDepositWarningSimpleView = ({
-  title,
-  description,
-  onBack
+  onBack,
+  amountToken,
+  amountUSD,
+  iconSrc,
+  strategyName
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onBack) return;
@@ -12703,8 +12791,15 @@ var EarnDepositWarningSimpleView = ({
     EarnFeedbackOverlaySimpleView,
     {
       variant: "warning",
-      title,
-      subtitle: description
+      title: "Assinatura Recusada",
+      subtitle: "A assinatura da transa\xE7\xE3o foi cancelada.",
+      formData: {
+        headerTitle: "Dep\xF3sito",
+        tokenSymbol: strategyName,
+        tokenLogoURI: iconSrc,
+        amount: amountToken,
+        dollarAmount: amountUSD
+      }
     }
   ) });
 };
@@ -12771,9 +12866,11 @@ var EarnDepositFailedView = ({
   );
 };
 var EarnDepositFailedSimpleView = ({
-  title,
-  description,
-  onBack
+  onBack,
+  amountToken,
+  amountUSD,
+  iconSrc,
+  strategyName
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onBack) return;
@@ -12784,8 +12881,15 @@ var EarnDepositFailedSimpleView = ({
     EarnFeedbackOverlaySimpleView,
     {
       variant: "error",
-      title,
-      subtitle: description
+      title: "Dep\xF3sito Falhou",
+      subtitle: "A transa\xE7\xE3o foi revertida.",
+      formData: {
+        headerTitle: "Dep\xF3sito",
+        tokenSymbol: strategyName,
+        tokenLogoURI: iconSrc,
+        amount: amountToken,
+        dollarAmount: amountUSD
+      }
     }
   ) });
 };
@@ -12855,15 +12959,24 @@ var EarnWithdrawProcessingView = ({
   );
 };
 var EarnWithdrawProcessingSimpleView = ({
-  title,
-  descriptionPrefix
+  amountToken,
+  amountUSD,
+  iconSrc,
+  strategyName
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "earn-withdraw-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
-      title,
-      subtitle: descriptionPrefix
+      title: "Processando Saque...",
+      subtitle: "Aguarde enquanto seu saque \xE9 confirmado.",
+      formData: {
+        headerTitle: "Saque",
+        tokenSymbol: strategyName,
+        tokenLogoURI: iconSrc,
+        amount: amountToken,
+        dollarAmount: amountUSD
+      }
     }
   ) });
 };
@@ -12934,9 +13047,12 @@ var EarnWithdrawSuccessView = ({
   );
 };
 var EarnWithdrawSuccessSimpleView = ({
-  title,
-  descriptionSuffix,
-  onClose
+  onClose,
+  tokenSymbol,
+  amountToken,
+  amountUSD,
+  iconSrc,
+  strategyName
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onClose) return;
@@ -12947,8 +13063,15 @@ var EarnWithdrawSuccessSimpleView = ({
     EarnFeedbackOverlaySimpleView,
     {
       variant: "success",
-      title,
-      subtitle: descriptionSuffix
+      title: "Saque Confirmado!",
+      subtitle: "Seu saldo foi atualizado.",
+      formData: {
+        headerTitle: "Saque",
+        tokenSymbol: tokenSymbol || strategyName,
+        tokenLogoURI: iconSrc,
+        amount: amountToken,
+        dollarAmount: amountUSD
+      }
     }
   ) });
 };
@@ -13012,9 +13135,11 @@ var EarnWithdrawWarningView = ({
   );
 };
 var EarnWithdrawWarningSimpleView = ({
-  title,
-  description,
-  onBack
+  onBack,
+  amountToken,
+  amountUSD,
+  iconSrc,
+  strategyName
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onBack) return;
@@ -13025,8 +13150,15 @@ var EarnWithdrawWarningSimpleView = ({
     EarnFeedbackOverlaySimpleView,
     {
       variant: "warning",
-      title,
-      subtitle: description
+      title: "Assinatura Recusada",
+      subtitle: "A assinatura da transa\xE7\xE3o foi cancelada.",
+      formData: {
+        headerTitle: "Saque",
+        tokenSymbol: strategyName,
+        tokenLogoURI: iconSrc,
+        amount: amountToken,
+        dollarAmount: amountUSD
+      }
     }
   ) });
 };
@@ -13093,9 +13225,11 @@ var EarnWithdrawFailedView = ({
   );
 };
 var EarnWithdrawFailedSimpleView = ({
-  title,
-  description,
-  onBack
+  onBack,
+  amountToken,
+  amountUSD,
+  iconSrc,
+  strategyName
 }) => {
   React6__namespace.default.useEffect(() => {
     if (!onBack) return;
@@ -13106,8 +13240,15 @@ var EarnWithdrawFailedSimpleView = ({
     EarnFeedbackOverlaySimpleView,
     {
       variant: "error",
-      title,
-      subtitle: description
+      title: "Saque Falhou",
+      subtitle: "A transa\xE7\xE3o foi revertida.",
+      formData: {
+        headerTitle: "Saque",
+        tokenSymbol: strategyName,
+        tokenLogoURI: iconSrc,
+        amount: amountToken,
+        dollarAmount: amountUSD
+      }
     }
   ) });
 };
@@ -13508,7 +13649,8 @@ var OnchainDepositFormSimpleView = ({
                         isLoading: false,
                         selectTokenLabel: "SELECIONE AQUI",
                         chainLabel: (_a = selectedChain == null ? void 0 : selectedChain.name) != null ? _a : "",
-                        chainImage: selectedChain == null ? void 0 : selectedChain.iconUrl
+                        chainImage: selectedChain == null ? void 0 : selectedChain.iconUrl,
+                        className: "w-full justify-between"
                       }
                     ),
                     !hasToken && /* @__PURE__ */ jsxRuntime.jsx(
@@ -13805,7 +13947,12 @@ function OnchainDepositSuccessView({
   );
 }
 var OnchainDepositSuccessSimpleView = ({
-  onClose
+  onClose,
+  tokenSymbol,
+  tokenLogoURI,
+  chainName,
+  chainIconUrl,
+  formattedAmount
 }) => {
   React6__namespace.useEffect(() => {
     if (!onClose) return;
@@ -13817,7 +13964,15 @@ var OnchainDepositSuccessSimpleView = ({
     {
       variant: "success",
       title: "Dep\xF3sito Confirmado!",
-      subtitle: "Seu saldo foi atualizado."
+      subtitle: "Seu saldo foi atualizado.",
+      formData: {
+        headerTitle: "Dep\xF3sito",
+        tokenSymbol,
+        tokenLogoURI,
+        chainLabel: chainName,
+        chainImage: chainIconUrl,
+        amount: formattedAmount
+      }
     }
   ) });
 };
@@ -14847,14 +15002,16 @@ function OnchainWithdrawFailedView({
   );
 }
 var OnchainWithdrawProcessingSimpleView = ({
-  onClose: _onClose
+  onClose: _onClose,
+  formData
 }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-test-id": "onchain-withdraw-processing-simple-view", children: /* @__PURE__ */ jsxRuntime.jsx(
     EarnFeedbackOverlaySimpleView,
     {
       variant: "loading",
       title: "PROCESSANDO SAQUE...",
-      subtitle: "Aguarde enquanto sua transa\xE7\xE3o \xE9 confirmada."
+      subtitle: "Aguarde enquanto sua transa\xE7\xE3o \xE9 confirmada.",
+      formData
     }
   ) });
 };
@@ -15121,7 +15278,12 @@ function OnchainWithdrawSignatureWarningView({
   );
 }
 var OnchainWithdrawSignatureWarningSimpleView = ({
-  onCancel
+  onCancel,
+  tokenSymbol,
+  tokenLogoURI,
+  chainName,
+  chainIconUrl,
+  formattedAmount
 }) => {
   React6__namespace.useEffect(() => {
     if (!onCancel) return;
@@ -15133,7 +15295,15 @@ var OnchainWithdrawSignatureWarningSimpleView = ({
     {
       variant: "warning",
       title: "Saque n\xE3o assinado",
-      subtitle: "A assinatura da transa\xE7\xE3o foi cancelada."
+      subtitle: "A assinatura da transa\xE7\xE3o foi cancelada.",
+      formData: {
+        headerTitle: "Saque",
+        tokenSymbol,
+        tokenLogoURI,
+        chainLabel: chainName,
+        chainImage: chainIconUrl,
+        amount: formattedAmount
+      }
     }
   ) });
 };
@@ -15454,7 +15624,7 @@ var OnrampFormSimpleView = ({
     "px-[var(--deframe-widget-size-padding-x-md)]",
     "pb-[var(--deframe-widget-size-padding-y-md)]"
   ].join(" ");
-  const cardClasses2 = tailwindMerge.twMerge(
+  const cardClasses3 = tailwindMerge.twMerge(
     "rounded-[var(--deframe-widget-size-radius-sm)]",
     "border border-[color:var(--deframe-widget-color-border-secondary)]",
     "bg-[var(--deframe-widget-color-bg-secondary)]",
@@ -15552,7 +15722,7 @@ var OnrampFormSimpleView = ({
                       {
                         "data-slot": "onramp-form-simple-amount-card",
                         "data-test-id": "onramp-form-simple-view-amount-card",
-                        className: cardClasses2,
+                        className: cardClasses3,
                         children: /* @__PURE__ */ jsxRuntime.jsxs(
                           "div",
                           {
@@ -15611,7 +15781,7 @@ var OnrampFormSimpleView = ({
                       "div",
                       {
                         "data-test-id": "onramp-form-simple-view-skeleton",
-                        className: tailwindMerge.twMerge(cardClasses2, "space-y-3"),
+                        className: tailwindMerge.twMerge(cardClasses3, "space-y-3"),
                         children: [
                           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
                             /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { width: 96, height: 16, shimmer: true }),
@@ -17394,7 +17564,7 @@ var DashboardPortfolioView = ({
     ) })
   ] }) });
 };
-var cardClasses = tailwindMerge.twMerge(
+var cardClasses2 = tailwindMerge.twMerge(
   "w-full self-start flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
   "bg-[var(--deframe-widget-color-bg-secondary)] border border-[color:var(--deframe-widget-color-border-secondary)]",
   "rounded-[var(--deframe-widget-size-radius-md)]",
@@ -17416,7 +17586,7 @@ function StatCardSkeletonBlock({ showDescription, className }) {
     {
       "data-test-id": "stat-card-skeleton",
       "aria-busy": "true",
-      className: tailwindMerge.twMerge(cardClasses, "self-stretch", className),
+      className: tailwindMerge.twMerge(cardClasses2, "self-stretch", className),
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 140, height: 11 }),
         /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "60%", height: 44 }),
@@ -17452,7 +17622,7 @@ var DashboardPortfolioViewSimple = ({
         assetCount != null ? "grid-cols-[1fr_auto]" : "grid-cols-1"
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("article", { className: tailwindMerge.twMerge(cardClasses, "self-stretch"), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("article", { className: tailwindMerge.twMerge(cardClasses2, "self-stretch"), children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Total da Carteira (USD)" }),
           /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.p,
@@ -17469,7 +17639,7 @@ var DashboardPortfolioViewSimple = ({
           ) }),
           /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "stat-card-description", className: descriptionClasses, children: "Soma do saldo por token (em USD)." })
         ] }),
-        assetCount != null && /* @__PURE__ */ jsxRuntime.jsxs("article", { className: tailwindMerge.twMerge(cardClasses, "self-stretch min-w-[160px]"), children: [
+        assetCount != null && /* @__PURE__ */ jsxRuntime.jsxs("article", { className: tailwindMerge.twMerge(cardClasses2, "self-stretch min-w-[160px]"), children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Ativos" }),
           /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsxRuntime.jsx(
             framerMotion.motion.p,