@deframe-sdk/components 0.1.35 → 0.1.37

package/dist/index.mjs

@@ -9014,16 +9014,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,
@@ -9037,41 +9033,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__ */ jsx(LowRiskBadge, { label: (_b = labels == null ? void 0 : labels.riskLow) != null ? _b : "Risco Baixo" }),
-    medium: /* @__PURE__ */ jsx(MediumRiskBadge, { label: (_c = labels == null ? void 0 : labels.riskMedium) != null ? _c : "Risco M\xE9dio" }),
-    high: /* @__PURE__ */ jsx(HighRiskBadge, { label: (_d = labels == null ? void 0 : labels.riskHigh) != null ? _d : "Risco Alto" })
+    low: /* @__PURE__ */ jsx(LowRiskBadge, { label: (_b = labels == null ? void 0 : labels.riskLow) != null ? _b : "Baixo" }),
+    medium: /* @__PURE__ */ jsx(MediumRiskBadge, { label: (_c = labels == null ? void 0 : labels.riskMedium) != null ? _c : "M\xE9dio" }),
+    high: /* @__PURE__ */ jsx(HighRiskBadge, { label: (_d = labels == null ? void 0 : labels.riskHigh) != null ? _d : "Alto" })
   };
   return /* @__PURE__ */ jsxs(
     "article",
     {
       "data-slot": "strategy-grid-card-simple",
       "data-test-id": "strategy-grid-card-simple",
-      className: strategyCardClasses,
+      className: cardClasses,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
+        /* @__PURE__ */ jsxs("div", { className: "w-full flex items-center gap-[var(--deframe-widget-size-gap-sm)]", children: [
           /* @__PURE__ */ 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__ */ jsx("img", { alt: title, src: logoUrl, referrerPolicy: "no-referrer", className: "w-full h-full object-contain" }) }),
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex flex-col items-center", children: [
-          /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className: "flex flex-col flex-1 min-w-0", children: [
+            /* @__PURE__ */ 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__ */ jsx("span", { className: "text-[12px] text-[color:var(--deframe-widget-color-text-secondary)] leading-[1.4]", children: chainName })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: riskBadgeMap[riskLevel] })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] flex-shrink-0", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex-shrink-0 whitespace-nowrap", children: riskBadgeMap[riskLevel] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline gap-[var(--deframe-widget-size-gap-sm)]", children: [
+          /* @__PURE__ */ 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__ */ 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: 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__ */ 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
+          }
+        )
       ]
     }
   );
@@ -9349,7 +9353,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)" },
@@ -9367,14 +9370,11 @@ var EarnHubStrategyCard = ({
   history = [],
   labels
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d;
   const [expanded, setExpanded] = React6__default.useState(false);
-  const [showAll, setShowAll] = React6__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__ */ jsxs(
     "li",
     {
@@ -9467,7 +9467,7 @@ var EarnHubStrategyCard = ({
               ),
               history.length > 0 && /* @__PURE__ */ jsxs("div", { "data-test-id": "earn-hub-strategy-card-history", children: [
                 /* @__PURE__ */ 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__ */ jsx("ol", { className: "list-none m-0 p-0", children: visibleHistory.map((entry) => {
+                /* @__PURE__ */ 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;
@@ -9506,26 +9506,7 @@ var EarnHubStrategyCard = ({
                     },
                     entry.id
                   );
-                }) }),
-                hasMore && /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => setShowAll(true),
-                    className: 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)`
-                  }
-                )
+                }) })
               ] })
             ]
           }
@@ -11121,7 +11102,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
           }
         )
@@ -11275,7 +11256,7 @@ var EarnInlineNotificationSimpleView = ({
 };
 var EarnDepositFormViewSimple = ({
   // Header / Layout
-  headerTitle,
+  pageTitle,
   onBack,
   onSubmit,
   // Token selector
@@ -11383,7 +11364,7 @@ var EarnDepositFormViewSimple = ({
                 "data-slot": "deposit-panel-simple-title",
                 "data-test-id": "earn-deposit-form-view-simple-title",
                 className: titleBaseClasses,
-                children: headerTitle
+                children: pageTitle
               }
             )
           }
@@ -11738,7 +11719,7 @@ var EarnWithdrawFormView = ({
 ] });
 var EarnWithdrawFormViewSimple = ({
   // Header / Layout
-  headerTitle,
+  pageTitle,
   onBack,
   onSubmit,
   // Position card (used for inline balance row)
@@ -11841,7 +11822,7 @@ var EarnWithdrawFormViewSimple = ({
                 "data-slot": "withdraw-panel-simple-title",
                 "data-test-id": "earn-withdraw-form-view-simple-title",
                 className: titleBaseClasses,
-                children: headerTitle
+                children: pageTitle
               }
             )
           }
@@ -15596,7 +15577,7 @@ var OnrampFormSimpleView = ({
     "px-[var(--deframe-widget-size-padding-x-md)]",
     "pb-[var(--deframe-widget-size-padding-y-md)]"
   ].join(" ");
-  const cardClasses2 = twMerge(
+  const cardClasses3 = twMerge(
     "rounded-[var(--deframe-widget-size-radius-sm)]",
     "border border-[color:var(--deframe-widget-color-border-secondary)]",
     "bg-[var(--deframe-widget-color-bg-secondary)]",
@@ -15694,7 +15675,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__ */ jsxs(
                           "div",
                           {
@@ -15753,7 +15734,7 @@ var OnrampFormSimpleView = ({
                       "div",
                       {
                         "data-test-id": "onramp-form-simple-view-skeleton",
-                        className: twMerge(cardClasses2, "space-y-3"),
+                        className: twMerge(cardClasses3, "space-y-3"),
                         children: [
                           /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
                             /* @__PURE__ */ jsx(Skeleton, { width: 96, height: 16, shimmer: true }),
@@ -17536,7 +17517,7 @@ var DashboardPortfolioView = ({
     ) })
   ] }) });
 };
-var cardClasses = twMerge(
+var cardClasses2 = 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)]",
@@ -17558,7 +17539,7 @@ function StatCardSkeletonBlock({ showDescription, className }) {
     {
       "data-test-id": "stat-card-skeleton",
       "aria-busy": "true",
-      className: twMerge(cardClasses, "self-stretch", className),
+      className: twMerge(cardClasses2, "self-stretch", className),
       children: [
         /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 140, height: 11 }),
         /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: "60%", height: 44 }),
@@ -17594,7 +17575,7 @@ var DashboardPortfolioViewSimple = ({
         assetCount != null ? "grid-cols-[1fr_auto]" : "grid-cols-1"
       ),
       children: [
-        /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses, "self-stretch"), children: [
+        /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses2, "self-stretch"), children: [
           /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Total da Carteira (USD)" }),
           /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
             motion.p,
@@ -17611,7 +17592,7 @@ var DashboardPortfolioViewSimple = ({
           ) }),
           /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-description", className: descriptionClasses, children: "Soma do saldo por token (em USD)." })
         ] }),
-        assetCount != null && /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses, "self-stretch min-w-[160px]"), children: [
+        assetCount != null && /* @__PURE__ */ jsxs("article", { className: twMerge(cardClasses2, "self-stretch min-w-[160px]"), children: [
           /* @__PURE__ */ jsx("p", { "data-test-id": "stat-card-label", className: labelClasses, children: "Ativos" }),
           /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(
             motion.p,