@deframe-sdk/components 0.1.36 → 0.1.38

package/dist/index.d.mts

@@ -2416,6 +2416,7 @@ interface EarnDepositFormViewProps {
     isTxError: boolean;
     txSuccessMessage?: string;
     txErrorMessage?: string;
+    insufficientBalanceMessage?: string;
     bytecodeErrorMessage?: string;
     transactionErrorLabel: string;
     isQuoteValid: boolean;
@@ -2471,6 +2472,7 @@ interface EarnWithdrawFormViewProps {
     isTxError: boolean;
     txSuccessMessage?: string;
     txErrorMessage?: string;
+    insufficientBalanceMessage?: string;
     bytecodeErrorMessage?: string;
     transactionErrorLabel: string;
     isQuoteValid: boolean;

package/dist/index.d.ts

@@ -2416,6 +2416,7 @@ interface EarnDepositFormViewProps {
     isTxError: boolean;
     txSuccessMessage?: string;
     txErrorMessage?: string;
+    insufficientBalanceMessage?: string;
     bytecodeErrorMessage?: string;
     transactionErrorLabel: string;
     isQuoteValid: boolean;
@@ -2471,6 +2472,7 @@ interface EarnWithdrawFormViewProps {
     isTxError: boolean;
     txSuccessMessage?: string;
     txErrorMessage?: string;
+    insufficientBalanceMessage?: string;
     bytecodeErrorMessage?: string;
     transactionErrorLabel: string;
     isQuoteValid: boolean;

package/dist/index.js

@@ -9377,7 +9377,6 @@ var ImageBannerCard = ({
   );
 };
 var GRID_COLS = "grid grid-cols-[1fr_100px_130px] gap-x-[var(--deframe-widget-size-gap-md)]";
-var HISTORY_PAGE_SIZE = 5;
 var HISTORY_CONFIG = {
   deposit: { label: "Depositado", color: "var(--deframe-widget-color-state-info)" },
   withdraw: { label: "Sacado", color: "var(--deframe-widget-color-text-secondary)" },
@@ -9395,14 +9394,11 @@ var EarnHubStrategyCard = ({
   history = [],
   labels
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const [expanded, setExpanded] = React6__namespace.default.useState(false);
-  const [showAll, setShowAll] = React6__namespace.default.useState(false);
   const investLabel = (_a = labels == null ? void 0 : labels.investLabel) != null ? _a : "Depositar";
   const withdrawLabel = (_b = labels == null ? void 0 : labels.withdrawLabel) != null ? _b : "Sacar";
   const historyTitle = (_c = labels == null ? void 0 : labels.historyTitle) != null ? _c : "Hist\xF3rico";
-  const visibleHistory = showAll ? history : history.slice(0, HISTORY_PAGE_SIZE);
-  const hasMore = history.length > HISTORY_PAGE_SIZE && !showAll;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "li",
     {
@@ -9495,7 +9491,7 @@ var EarnHubStrategyCard = ({
               ),
               history.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-test-id": "earn-hub-strategy-card-history", 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: historyTitle }),
-                /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-none m-0 p-0", children: visibleHistory.map((entry) => {
+                /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "list-none m-0 p-0 max-h-[200px] overflow-y-auto", children: history.map((entry) => {
                   var _a2;
                   const config = (_a2 = HISTORY_CONFIG[entry.type]) != null ? _a2 : HISTORY_CONFIG.deposit;
                   const isClickable = !!entry.onClick;
@@ -9534,26 +9530,7 @@ var EarnHubStrategyCard = ({
                     },
                     entry.id
                   );
-                }) }),
-                hasMore && /* @__PURE__ */ jsxRuntime.jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setShowAll(true),
-                    className: tailwindMerge.twMerge(
-                      "mt-[var(--deframe-widget-size-gap-sm)] w-full",
-                      "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)]",
-                      "text-[color:var(--deframe-widget-color-text-secondary)]",
-                      "font-[var(--deframe-widget-font-family)]",
-                      "hover:text-[color:var(--deframe-widget-color-brand-primary)]",
-                      "transition-colors duration-150 cursor-pointer",
-                      "py-[var(--deframe-widget-size-padding-y-xs)]",
-                      "border-t border-[color:var(--deframe-widget-color-border-tertiary)]",
-                      "outline-none bg-transparent border-x-0 border-b-0"
-                    ),
-                    children: (_e = labels == null ? void 0 : labels.showMoreLabel) != null ? _e : `Ver mais (${history.length - HISTORY_PAGE_SIZE} itens)`
-                  }
-                )
+                }) })
               ] })
             ]
           }
@@ -10716,21 +10693,33 @@ var EarnNoBalanceNotificationView = ({
   prompt,
   actionLabel,
   onAction
-}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-[var(--deframe-widget-size-padding-x-md)] mt-[var(--deframe-widget-size-gap-md)]", children: /* @__PURE__ */ jsxRuntime.jsx(SectionCard, { className: "bg-[var(--deframe-widget-color-state-warning)]/10 border border-[var(--deframe-widget-color-state-warning)]/20", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]", children: [
-  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-[color:var(--deframe-widget-color-state-warning)] flex-shrink-0 mt-0.5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", className: "text-[color:var(--deframe-widget-color-text-primary)]", children: prompt }) })
-  ] }),
-  /* @__PURE__ */ jsxRuntime.jsx(
-    PrimaryButton,
-    {
-      type: "button",
-      onClick: onAction,
-      className: "w-full mt-[var(--deframe-widget-size-gap-sm)]",
-      children: actionLabel
-    }
-  )
-] }) }) });
+}) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-md)]", children: /* @__PURE__ */ jsxRuntime.jsxs(
+  "div",
+  {
+    "data-test-id": "earn-no-balance-notification",
+    className: [
+      "bg-[color-mix(in_srgb,var(--deframe-widget-color-state-warning)_16%,transparent)]",
+      "border border-[var(--deframe-widget-color-state-warning)]",
+      "rounded-[var(--deframe-widget-size-radius-sm)]",
+      "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-md)]",
+      "flex flex-col gap-[var(--deframe-widget-size-gap-md)]"
+    ].join(" "),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-[var(--deframe-widget-size-gap-sm)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-5 h-5 text-[color:var(--deframe-widget-color-state-warning)] flex-shrink-0 mt-0.5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", d: "M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z", clipRule: "evenodd" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsxRuntime.jsx(TextBody, { variant: "text-small", children: prompt }) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        PrimaryButton,
+        {
+          type: "button",
+          onClick: onAction,
+          children: actionLabel
+        }
+      )
+    ]
+  }
+) });
 var EarnTxStatusCardView = ({
   statusLabel,
   isProcessing,
@@ -11337,6 +11326,8 @@ var EarnDepositFormViewSimple = ({
   isTxError,
   txSuccessMessage,
   txErrorMessage,
+  // Insufficient balance
+  insufficientBalanceMessage,
   // Bytecode error
   bytecodeErrorMessage,
   // Submit button
@@ -11344,7 +11335,7 @@ var EarnDepositFormViewSimple = ({
   submitButtonText
 }) => {
   const hasToken = selectedToken != null;
-  const hasError = !!bytecodeErrorMessage;
+  const hasError = !!insufficientBalanceMessage || !!bytecodeErrorMessage;
   const isSubmitDisabled = !hasToken || submitDisabled || !amountValue || amountValue === "0" || amountValue === "";
   const [cardHovered, setCardHovered] = React6__namespace.default.useState(false);
   const hideTimerRef = React6__namespace.default.useRef(void 0);
@@ -11505,7 +11496,21 @@ var EarnDepositFormViewSimple = ({
                         children: selectTokenLabel
                       }
                     ),
-                    /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: hasToken && cardHovered && /* @__PURE__ */ jsxRuntime.jsx(
+                    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      EarnInlineNotificationSimpleView,
+                      {
+                        variant: "error",
+                        message: insufficientBalanceMessage || bytecodeErrorMessage
+                      }
+                    ) }),
+                    showNoBalanceNotification ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      EarnNoBalanceNotificationView,
+                      {
+                        prompt: noBalancePrompt,
+                        actionLabel: goToSwapLabel,
+                        onAction: onGoToSwap
+                      }
+                    ) }) : /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { children: hasToken && cardHovered && /* @__PURE__ */ jsxRuntime.jsx(
                       framerMotion.motion.div,
                       {
                         "data-slot": "deposit-simple-chips-row",
@@ -11525,21 +11530,6 @@ var EarnDepositFormViewSimple = ({
                           }
                         )
                       }
-                    ) }),
-                    showNoBalanceNotification && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      EarnNoBalanceNotificationView,
-                      {
-                        prompt: noBalancePrompt,
-                        actionLabel: goToSwapLabel,
-                        onAction: onGoToSwap
-                      }
-                    ) }),
-                    bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
-                      EarnInlineNotificationSimpleView,
-                      {
-                        variant: "error",
-                        message: bytecodeErrorMessage
-                      }
                     ) })
                   ]
                 }
@@ -11795,6 +11785,8 @@ var EarnWithdrawFormViewSimple = ({
   isTxError,
   txSuccessMessage,
   txErrorMessage,
+  // Insufficient balance
+  insufficientBalanceMessage,
   // Bytecode error
   bytecodeErrorMessage,
   // Submit button
@@ -11802,7 +11794,7 @@ var EarnWithdrawFormViewSimple = ({
   submitButtonText
 }) => {
   const hasToken = selectedToken != null;
-  const hasError = !!bytecodeErrorMessage;
+  const hasError = !!insufficientBalanceMessage || !!bytecodeErrorMessage;
   const isSubmitDisabled = !hasToken || submitDisabled || !amountValue || amountValue === "0" || amountValue === "";
   const [cardHovered, setCardHovered] = React6__namespace.default.useState(false);
   const hideTimerRef = React6__namespace.default.useRef(void 0);
@@ -11981,11 +11973,11 @@ var EarnWithdrawFormViewSimple = ({
                         )
                       }
                     ) }),
-                    bytecodeErrorMessage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    hasError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-[var(--deframe-widget-size-gap-sm)]", children: /* @__PURE__ */ jsxRuntime.jsx(
                       EarnInlineNotificationSimpleView,
                       {
                         variant: "error",
-                        message: bytecodeErrorMessage
+                        message: insufficientBalanceMessage || bytecodeErrorMessage
                       }
                     ) })
                   ]