@deframe-sdk/components 0.1.66 → 0.1.67

package/dist/index.mjs

@@ -10919,7 +10919,7 @@ var ImageBannerCard = ({
       "aria-label": alt,
       onClick,
       className: twMerge(
-        "relative w-full overflow-hidden text-left",
+        "group relative w-full overflow-hidden text-left",
         "rounded-[var(--deframe-widget-size-radius-md)]",
         "border",
         "transition-[transform,opacity] duration-150",
@@ -10933,44 +10933,54 @@ var ImageBannerCard = ({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] z-[1] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-xl)]",
+            className: "relative z-[2] flex flex-col justify-center",
             style: { flex: imageUrl ? "0 0 55%" : "1 1 auto" },
             children: [
-              /* @__PURE__ */ jsx(
-                "span",
+              imageUrl && /* @__PURE__ */ jsx(
+                "div",
                 {
-                  "data-test-id": "image-banner-card-name",
-                  className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)] uppercase tracking-[0.08em]",
-                  style: { color: `color-mix(in srgb, ${colorToken} 80%, var(--deframe-widget-color-text-secondary))` },
-                  children: alt
+                  "aria-hidden": "true",
+                  className: "absolute inset-y-0 left-full pointer-events-none transition-[width] duration-500 ease-out w-[33%]",
+                  style: { background: "linear-gradient(to right, #080a0e, transparent)" }
                 }
               ),
-              apyFormatted && /* @__PURE__ */ jsxs("div", { "data-test-id": "image-banner-card-apy", className: "flex items-baseline gap-[4px]", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-[var(--deframe-widget-size-gap-xs)] px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-xl)] transition-transform duration-500 ease-out origin-left group-hover:scale-[1.04]", children: [
                 /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: "text-[38px] [font-weight:var(--deframe-widget-font-weight-bold)] font-[var(--deframe-widget-font-family)] leading-[1]",
-                    style: { color: colorToken },
-                    children: apyFormatted
+                    "data-test-id": "image-banner-card-name",
+                    className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-medium)] font-[var(--deframe-widget-font-family)] uppercase tracking-[0.08em]",
+                    style: { color: `color-mix(in srgb, ${colorToken} 80%, var(--deframe-widget-color-text-secondary))` },
+                    children: alt
                   }
                 ),
-                /* @__PURE__ */ jsx(
+                apyFormatted && /* @__PURE__ */ jsxs("div", { "data-test-id": "image-banner-card-apy", className: "flex items-baseline gap-[4px]", children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-[38px] [font-weight:var(--deframe-widget-font-weight-bold)] font-[var(--deframe-widget-font-family)] leading-[1]",
+                      style: { color: colorToken },
+                      children: apyFormatted
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] uppercase tracking-[0.1em]",
+                      style: { color: `color-mix(in srgb, ${colorToken} 60%, transparent)` },
+                      children: "APY"
+                    }
+                  )
+                ] }),
+                description && /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: "text-[length:var(--deframe-widget-font-size-xs)] [font-weight:var(--deframe-widget-font-weight-semibold)] font-[var(--deframe-widget-font-family)] uppercase tracking-[0.1em]",
-                    style: { color: `color-mix(in srgb, ${colorToken} 60%, transparent)` },
-                    children: "APY"
+                    "data-test-id": "image-banner-card-description",
+                    className: "text-[length:var(--deframe-widget-font-size-xs)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
+                    children: description
                   }
                 )
-              ] }),
-              description && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  "data-test-id": "image-banner-card-description",
-                  className: "text-[length:var(--deframe-widget-font-size-xs)] leading-[var(--deframe-widget-font-leading-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]",
-                  children: description
-                }
-              )
+              ] })
             ]
           }
         ),
@@ -10979,7 +10989,7 @@ var ImageBannerCard = ({
           {
             "data-test-id": "image-banner-card-image-wrapper",
             className: "relative flex-1 overflow-hidden",
-            style: { minHeight: 160 },
+            style: { background: "linear-gradient(to left, #080a0e, transparent)", minHeight: 160 },
             children: [
               /* @__PURE__ */ jsx(
                 "img",
@@ -10988,16 +10998,14 @@ var ImageBannerCard = ({
                   src: imageUrl,
                   alt: "",
                   "aria-hidden": "true",
-                  className: "absolute inset-0 w-full h-full object-cover object-center"
+                  className: "absolute inset-0 w-full h-full object-cover object-center transition-transform duration-500 ease-out origin-right group-hover:scale-110"
                 }
               ),
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: "absolute inset-0",
-                  style: {
-                    background: "linear-gradient(to right, #080a0e 0%, transparent 40%)"
-                  }
+                  "aria-hidden": "true",
+                  className: "absolute inset-y-0 left-0 z-[1] pointer-events-none transition-[width,transform] duration-500 ease-out w-[40%] group-hover:w-[80%] group-hover:-translate-x-3"
                 }
               )
             ]
@@ -11007,7 +11015,7 @@ var ImageBannerCard = ({
     }
   );
 };
-var GRID_COLS = "grid grid-cols-[1fr_100px_100px_100px] gap-x-[var(--deframe-widget-size-gap-md)]";
+var GRID_COLS = "grid grid-cols-[1fr_100px_100px_100px_100px] gap-x-[var(--deframe-widget-size-gap-md)]";
 var HISTORY_COLORS = {
   deposit: "var(--deframe-widget-color-state-info)",
   withdraw: "var(--deframe-widget-color-text-secondary)",
@@ -11020,6 +11028,7 @@ var EarnHubStrategyCard = ({
   investedFormatted,
   earningsFormatted,
   profitFormatted,
+  totalValueFormatted,
   isLoading,
   onInvestClick,
   onWithdrawClick,
@@ -11040,7 +11049,7 @@ var EarnHubStrategyCard = ({
     {
       "data-slot": "earn-hub-strategy-card",
       "data-test-id": "earn-hub-strategy-card",
-      className: "border-t border-[color:var(--deframe-widget-color-border-secondary)] list-none",
+      className: "border-t border-[color:var(--deframe-widget-color-border-secondary)] list-none overflow-hidden",
       children: [
         /* @__PURE__ */ jsxs(
           "div",
@@ -11049,14 +11058,14 @@ var EarnHubStrategyCard = ({
             onClick: () => setExpanded((v) => !v),
             className: twMerge(
               GRID_COLS,
-              "items-center cursor-pointer",
+              "group items-center cursor-pointer",
               "px-[var(--deframe-widget-size-padding-x-md)] py-[13px]",
               "transition-colors duration-150",
               "hover:bg-[color:color-mix(in_srgb,var(--deframe-widget-color-bg-tertiary)_60%,transparent)]"
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--deframe-widget-size-gap-sm)] min-w-0", children: [
-                /* @__PURE__ */ jsx("div", { className: "w-[36px] h-[36px] rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden shrink-0", children: /* @__PURE__ */ jsx("img", { alt: assetName, src: logoUrl, referrerPolicy: "no-referrer", className: "w-full h-full object-contain" }) }),
+                /* @__PURE__ */ jsx("div", { className: "w-[36px] h-[36px] rounded-full bg-[var(--deframe-widget-color-bg-tertiary)] flex items-center justify-center overflow-hidden shrink-0", children: /* @__PURE__ */ jsx("img", { alt: assetName, src: logoUrl, referrerPolicy: "no-referrer", className: "w-full h-full object-contain transition-transform duration-500 ease-out group-hover:scale-110" }) }),
                 /* @__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: assetName }),
                   network && /* @__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: network })
@@ -11071,11 +11080,9 @@ var EarnHubStrategyCard = ({
                 }
               ) }),
               /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 50, height: 16 }) : profitFormatted ? /* @__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)] font-[var(--deframe-widget-font-family)] leading-none", children: profitFormatted }) : /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "\u2014" }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 60, height: 16 }) : investedFormatted ? /* @__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)]", children: investedFormatted }) : /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "\u2014" }) }),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-end gap-[var(--deframe-widget-size-gap-xs)]", children: [
-                /* @__PURE__ */ jsx("div", { className: "flex flex-col items-end", children: isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 60, height: 16 }) : investedFormatted ? /* @__PURE__ */ jsxs(Fragment, { 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)]", children: investedFormatted }),
-                  (labels == null ? void 0 : labels.investedLabel) && /* @__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: labels.investedLabel })
-                ] }) : /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "\u2014" }) }),
+                isLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: 60, height: 16 }) : totalValueFormatted ? /* @__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)]", children: totalValueFormatted }) : /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-xs)] text-[color:var(--deframe-widget-color-text-tertiary)]", children: "\u2014" }),
                 /* @__PURE__ */ jsx(
                   "svg",
                   {
@@ -11229,6 +11236,60 @@ function formatHistoryAssetAmount(input) {
   }
   return "";
 }
+
+// src/utils/formatEarnPositions.ts
+function formatEarnPositions(positions, { currency, locale, formatCurrency }) {
+  return __spreadProps(__spreadValues({}, positions), {
+    positions: positions.positions.map((p) => {
+      var _a, _b;
+      const symbol = p.strategy.assetName.toUpperCase();
+      const isBrlPegged = currency === "BRL" && BRL_PEGGED_SYMBOLS.has(symbol);
+      const principalHumanized = parseFloat((_b = (_a = p.spotPosition.principal) == null ? void 0 : _a.humanized) != null ? _b : "0");
+      const principalUSD = p.spotPosition.underlyingBalanceUSD - p.spotPosition.profitInUSD;
+      const investedFormatted = isBrlPegged && p.spotPosition.principal ? formatHistoryAssetAmount({ amountHumanized: p.spotPosition.principal.humanized, symbol, currency, locale, formatCurrency }) : formatCurrency(principalUSD);
+      const totalBrla = isBrlPegged && principalHumanized > 0 && principalUSD > 0 ? p.spotPosition.underlyingBalanceUSD * principalHumanized / principalUSD : null;
+      const totalValueFormatted = totalBrla !== null ? formatHistoryAssetAmount({ amountHumanized: String(totalBrla), symbol, currency, locale, formatCurrency }) : formatCurrency(p.spotPosition.underlyingBalanceUSD);
+      return __spreadProps(__spreadValues({}, p), { spotPosition: __spreadProps(__spreadValues({}, p.spotPosition), { investedFormatted, totalValueFormatted }) });
+    })
+  });
+}
+
+// src/utils/buildEarnHistoryByAsset.ts
+function buildEarnHistoryByAsset(items, { currency, locale, formatCurrency, onHistoryDetail }) {
+  var _a, _b, _c, _d, _e;
+  const map = {};
+  for (const item of items) {
+    const isDeposit = item.type.includes("DEPOSIT");
+    const primaryAsset = isDeposit ? (_a = item.amounts) == null ? void 0 : _a.assetIn : (_b = item.amounts) == null ? void 0 : _b.assetOut;
+    const symbol = (_e = (_d = (_c = primaryAsset == null ? void 0 : primaryAsset.token) == null ? void 0 : _c.symbol) == null ? void 0 : _d.toUpperCase()) != null ? _e : "";
+    if (!symbol || !primaryAsset) continue;
+    const amount = formatHistoryAssetAmount({
+      amountHumanized: primaryAsset.amountHumanized,
+      amountInUSD: primaryAsset.amountInUSD,
+      symbol,
+      currency,
+      locale,
+      formatCurrency
+    });
+    const date = new Date(item.createdAt).toLocaleString(locale, {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric",
+      hour: "2-digit",
+      minute: "2-digit"
+    });
+    const entry = {
+      id: item.id,
+      date,
+      type: isDeposit ? "deposit" : "withdraw",
+      amount,
+      onClick: () => onHistoryDetail(item.id, isDeposit)
+    };
+    if (!map[symbol]) map[symbol] = [];
+    map[symbol].push(entry);
+  }
+  return map;
+}
 var EARN_CATEGORY_DEFINITIONS = [
   {
     id: "dolar",
@@ -11296,7 +11357,7 @@ var columnHeaderClasses = [
   "text-[color:var(--deframe-widget-color-text-tertiary)]",
   "leading-[var(--deframe-widget-font-leading-xs)]"
 ].join(" ");
-var GRID_COLS2 = "grid grid-cols-[1fr_100px_100px_100px] gap-x-[var(--deframe-widget-size-gap-md)]";
+var GRID_COLS2 = "grid grid-cols-[1fr_100px_100px_100px_100px] gap-x-[var(--deframe-widget-size-gap-md)]";
 var BANNER_COLORS = [
   "var(--deframe-widget-color-brand-primary)",
   "var(--deframe-widget-color-brand-secondary)"
@@ -11349,41 +11410,6 @@ var EarnDesktopViewSimple = ({
       };
     });
   }, [categories, strategies, labels == null ? void 0 : labels.stablecoinsBannerDescription, labels == null ? void 0 : labels.realsBannerDescription]);
-  const historyByAsset = React6__default.useMemo(() => {
-    var _a, _b, _c, _d, _e;
-    const map = /* @__PURE__ */ new Map();
-    for (const item of historyItems) {
-      const isDeposit = item.type.includes("DEPOSIT");
-      const primaryAsset = isDeposit ? (_a = item.amounts) == null ? void 0 : _a.assetIn : (_b = item.amounts) == null ? void 0 : _b.assetOut;
-      const symbol = (_e = primaryAsset && "token" in primaryAsset ? (_d = (_c = primaryAsset.token) == null ? void 0 : _c.symbol) == null ? void 0 : _d.toUpperCase() : null) != null ? _e : "";
-      if (!symbol) continue;
-      const amount = formatHistoryAssetAmount({
-        amountHumanized: primaryAsset && "amountHumanized" in primaryAsset ? primaryAsset.amountHumanized : void 0,
-        amountInUSD: primaryAsset && "amountInUSD" in primaryAsset ? primaryAsset.amountInUSD : void 0,
-        symbol,
-        currency,
-        locale,
-        formatCurrency
-      });
-      const date = new Date(item.createdAt).toLocaleString(locale, {
-        day: "2-digit",
-        month: "2-digit",
-        year: "numeric",
-        hour: "2-digit",
-        minute: "2-digit"
-      });
-      const entry = {
-        id: item.id,
-        date,
-        type: isDeposit ? "deposit" : "withdraw",
-        amount,
-        onClick: onHistoryDetail ? () => onHistoryDetail(item.id, isDeposit) : void 0
-      };
-      if (!map.has(symbol)) map.set(symbol, []);
-      map.get(symbol).push(entry);
-    }
-    return map;
-  }, [historyItems, locale, formatCurrency, currency, onHistoryDetail]);
   const cardLabels = React6__default.useMemo(() => ({
     investLabel: labels == null ? void 0 : labels.investLabel,
     withdrawLabel: labels == null ? void 0 : labels.cardWithdrawLabel,
@@ -11393,18 +11419,32 @@ var EarnDesktopViewSimple = ({
     historyWithdrawnLabel: labels == null ? void 0 : labels.cardHistoryWithdrawnLabel,
     historyInterestReceivedLabel: labels == null ? void 0 : labels.cardHistoryInterestReceivedLabel
   }), [labels == null ? void 0 : labels.investLabel, labels == null ? void 0 : labels.cardWithdrawLabel, labels == null ? void 0 : labels.cardInvestedLabel, labels == null ? void 0 : labels.cardHistoryTitle, labels == null ? void 0 : labels.cardHistoryDepositedLabel, labels == null ? void 0 : labels.cardHistoryWithdrawnLabel, labels == null ? void 0 : labels.cardHistoryInterestReceivedLabel]);
+  const formattedPositions = useMemo(
+    () => formatEarnPositions(positions, { currency, locale, formatCurrency }),
+    [positions, currency, locale, formatCurrency]
+  );
+  const historyByAsset = useMemo(
+    () => buildEarnHistoryByAsset(historyItems, {
+      currency,
+      locale,
+      formatCurrency,
+      onHistoryDetail: (id, isDeposit) => onHistoryDetail == null ? void 0 : onHistoryDetail(id, isDeposit)
+    }),
+    [historyItems, currency, locale, formatCurrency, onHistoryDetail]
+  );
   const strategyRows = React6__default.useMemo(() => {
-    return positions.positions.filter((p) => p.spotPosition.underlyingBalanceUSD > 0.01).map((p) => {
-      var _a;
+    return formattedPositions.positions.filter((p) => p.spotPosition.underlyingBalanceUSD > 0.01).map((p) => {
+      var _a, _b;
       return {
         logoUrl: p.strategy.logourl,
         assetName: p.strategy.assetName,
         network: p.strategy.network,
-        investedFormatted: formatCurrency(p.spotPosition.underlyingBalanceUSD),
+        investedFormatted: p.spotPosition.investedFormatted,
         earningsFormatted: `${(p.spotPosition.apy * 100).toFixed(2)}%`,
         profitFormatted: formatCurrency(p.spotPosition.profitInUSD),
+        totalValueFormatted: (_a = p.spotPosition.totalValueFormatted) != null ? _a : formatCurrency(p.spotPosition.underlyingBalanceUSD),
         isLoading: false,
-        history: (_a = historyByAsset.get(p.strategy.assetName.toUpperCase())) != null ? _a : [],
+        history: (_b = historyByAsset[p.strategy.assetName.toUpperCase()]) != null ? _b : [],
         onInvestClick: onDeposit ? () => onDeposit(p.strategy.id) : () => {
         },
         onWithdrawClick: onWithdraw ? () => onWithdraw(p.strategy.id) : () => {
@@ -11414,7 +11454,7 @@ var EarnDesktopViewSimple = ({
         labels: cardLabels
       };
     });
-  }, [positions.positions, formatCurrency, historyByAsset, onDeposit, onWithdraw, onDetails, cardLabels]);
+  }, [formattedPositions.positions, formatCurrency, historyByAsset, onDeposit, onWithdraw, onDetails, cardLabels]);
   if (isLoading) {
     return /* @__PURE__ */ jsxs("div", { "data-test-id": "earn-hub-view-simple-loading", className: twMerge(wrapperBaseClasses2, className), children: [
       /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-[var(--deframe-widget-size-gap-sm)]", children: [0, 1].map((i) => /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: "100%", height: 100 }, i)) }),
@@ -11561,13 +11601,13 @@ var EarnDesktopViewSimple = ({
               "px-[var(--deframe-widget-size-padding-x-md)] py-[var(--deframe-widget-size-padding-y-sm)]",
               "border-t border-[color:var(--deframe-widget-color-border-secondary)]"
             ),
-            children: [labels == null ? void 0 : labels.columnStrategy, labels == null ? void 0 : labels.columnApy, labels == null ? void 0 : labels.columnProfit, labels == null ? void 0 : labels.columnTotalValue].map((label, i) => /* @__PURE__ */ jsx(
+            children: [labels == null ? void 0 : labels.columnStrategy, labels == null ? void 0 : labels.columnApy, labels == null ? void 0 : labels.columnProfit, labels == null ? void 0 : labels.columnInvested, labels == null ? void 0 : labels.columnTotalValue].map((label, i) => /* @__PURE__ */ jsx(
               "span",
               {
                 className: twMerge(
                   columnHeaderClasses,
                   (i === 1 || i === 2) && "text-center",
-                  i === 3 && "text-right"
+                  (i === 3 || i === 4) && "text-right"
                 ),
                 children: label
               },