@deframe-sdk/components 0.1.67 → 0.1.69

package/dist/index.mjs

@@ -10384,6 +10384,24 @@ var GroupedStrategyListView = ({
     ] })
   ] });
 };
+
+// src/utils/strategyDisplayName.ts
+function getNormalizedMetadataString(value) {
+  if (typeof value !== "string") return "";
+  return value.trim();
+}
+function getStrategyDisplayName(strategy) {
+  var _a, _b;
+  const displayName = getNormalizedMetadataString((_a = strategy == null ? void 0 : strategy.metadata) == null ? void 0 : _a.displayName);
+  if (displayName) return displayName;
+  return (_b = strategy == null ? void 0 : strategy.assetName) != null ? _b : "";
+}
+function getStrategyDisplayLogo(strategy) {
+  var _a, _b;
+  const displayLogo = getNormalizedMetadataString((_a = strategy == null ? void 0 : strategy.metadata) == null ? void 0 : _a.displayLogo);
+  if (displayLogo) return displayLogo;
+  return (_b = strategy == null ? void 0 : strategy.logourl) != null ? _b : "";
+}
 var wrapperBaseClasses = [
   "w-full max-w-[900px] mx-auto flex flex-col",
   "gap-[var(--deframe-widget-size-gap-md)]",
@@ -10435,25 +10453,6 @@ var GroupedStrategyListViewSimple = ({
 }) => {
   const category = categories.find((c) => c.id === categoryId);
   const categoryTitle = category == null ? void 0 : category.title;
-  const allClaimedAssets = React6__default.useMemo(() => {
-    const claimed = /* @__PURE__ */ new Set();
-    for (const category2 of categories) {
-      if (category2.assetFilter.length > 0) {
-        for (const symbol of category2.assetFilter) {
-          claimed.add(symbol.toUpperCase());
-        }
-      }
-    }
-    return claimed;
-  }, [categories]);
-  const filteredStrategies = React6__default.useMemo(() => {
-    const assetFilter = category == null ? void 0 : category.assetFilter;
-    if (!assetFilter || assetFilter.length === 0) {
-      return strategies.filter((s) => !allClaimedAssets.has(s.assetName.toUpperCase()));
-    }
-    const upperFilter = new Set(assetFilter.map((a) => a.toUpperCase()));
-    return strategies.filter((s) => upperFilter.has(s.assetName.toUpperCase()));
-  }, [strategies, category, allClaimedAssets]);
   if (isLoading) {
     return /* @__PURE__ */ jsxs("div", { "data-test-id": "grouped-strategy-list-view-simple-loading", className: twMerge(wrapperBaseClasses, className), children: [
       /* @__PURE__ */ jsx(Skeleton, { variant: "rect", width: "40%", height: 24 }),
@@ -10488,29 +10487,32 @@ var GroupedStrategyListViewSimple = ({
         }
       )
     ] }),
-    filteredStrategies.length === 0 ? /* @__PURE__ */ jsx("div", { "data-test-id": "grouped-strategy-list-view-simple-empty", className: emptyBoxClasses, children: /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: emptyMessage }) }) : /* @__PURE__ */ jsx(
+    strategies.length === 0 ? /* @__PURE__ */ jsx("div", { "data-test-id": "grouped-strategy-list-view-simple-empty", className: emptyBoxClasses, children: /* @__PURE__ */ jsx("span", { className: "text-[length:var(--deframe-widget-font-size-sm)] text-[color:var(--deframe-widget-color-text-tertiary)] font-[var(--deframe-widget-font-family)]", children: emptyMessage }) }) : /* @__PURE__ */ jsx(
       "div",
       {
         "data-test-id": "grouped-strategy-list-view-simple-items",
         className: "flex flex-col gap-[var(--deframe-widget-size-gap-sm)]",
-        children: filteredStrategies.map((s) => /* @__PURE__ */ jsx(
-          StrategyGridCardSimple,
-          {
-            logoUrl: s.logourl,
-            title: s.assetName,
-            subtitle: s.assetName,
-            chainName: s.network,
-            apyFormatted: s.apyFormatted,
-            apyLabel: yieldLabel,
-            riskLevel: "low",
-            onInvestClick: onDeposit ? () => onDeposit(s.id) : () => {
-            },
-            onWithdrawClick: onWithdraw ? () => onWithdraw(s.id) : () => {
+        children: strategies.map((s) => {
+          const displayName = getStrategyDisplayName(s);
+          return /* @__PURE__ */ jsx(
+            StrategyGridCardSimple,
+            {
+              logoUrl: getStrategyDisplayLogo(s),
+              title: displayName,
+              subtitle: displayName,
+              chainName: s.network,
+              apyFormatted: s.apyFormatted,
+              apyLabel: yieldLabel,
+              riskLevel: "low",
+              onInvestClick: onDeposit ? () => onDeposit(s.id) : () => {
+              },
+              onWithdrawClick: onWithdraw ? () => onWithdraw(s.id) : () => {
+              },
+              labels: { investLabel, riskLow, riskMedium, riskHigh }
             },
-            labels: { investLabel, riskLow, riskMedium, riskHigh }
-          },
-          s.id
-        ))
+            s.id
+          );
+        })
       }
     )
   ] });
@@ -11293,13 +11295,11 @@ function buildEarnHistoryByAsset(items, { currency, locale, formatCurrency, onHi
 var EARN_CATEGORY_DEFINITIONS = [
   {
     id: "dolar",
-    imageUrl: mascotUsdUrl,
-    assetFilter: ["USDC", "USDT", "DAI", "thbill"]
+    imageUrl: mascotUsdUrl
   },
   {
     id: "real",
-    imageUrl: mascotBrlUrl,
-    assetFilter: ["BRLA"]
+    imageUrl: mascotBrlUrl
   }
 ];
 var wrapperBaseClasses2 = [
@@ -11362,12 +11362,11 @@ var BANNER_COLORS = [
   "var(--deframe-widget-color-brand-primary)",
   "var(--deframe-widget-color-brand-secondary)"
 ];
-var STABLECOIN_SYMBOLS = /* @__PURE__ */ new Set(["USDC", "USDT", "DAI"]);
 var DEFAULT_POSITIONS = { positions: [], summary: { totalUnderlyingBalanceUSD: 0, totalProfitInUSD: 0 } };
 var defaultFormatCurrency = (amount) => `$${amount.toFixed(2)}`;
 var EarnDesktopViewSimple = ({
   positions = DEFAULT_POSITIONS,
-  strategies = [],
+  strategiesByCategory = {},
   historyItems = [],
   formatCurrency = defaultFormatCurrency,
   currency,
@@ -11383,6 +11382,7 @@ var EarnDesktopViewSimple = ({
   summary,
   categories
 }) => {
+  var _a;
   const [activeCategoryId, setActiveCategoryId] = React6__default.useState(null);
   const totalEarnings = positions.summary.totalProfitInUSD;
   const statsCards = React6__default.useMemo(() => [
@@ -11391,25 +11391,24 @@ var EarnDesktopViewSimple = ({
   ], [positions.summary.totalUnderlyingBalanceUSD, totalEarnings, formatCurrency, labels == null ? void 0 : labels.totalInvestedLabel, labels == null ? void 0 : labels.totalInvestedDescription, labels == null ? void 0 : labels.accumulatedEarningsLabel, labels == null ? void 0 : labels.accumulatedEarningsDescription]);
   const categoryBanners = React6__default.useMemo(() => {
     return categories.map((category) => {
-      var _a;
-      const upperFilter = new Set(category.assetFilter.map((a) => a.toUpperCase()));
+      var _a2, _b;
+      const categoryStrategies = (_a2 = strategiesByCategory[category.id]) != null ? _a2 : [];
       let bestApy = null;
-      for (const strategy of strategies) {
-        if (upperFilter.has(strategy.assetName.toUpperCase()) && strategy.apy > ((_a = bestApy == null ? void 0 : bestApy.apy) != null ? _a : 0)) {
+      for (const strategy of categoryStrategies) {
+        if (strategy.apy > ((_b = bestApy == null ? void 0 : bestApy.apy) != null ? _b : 0)) {
           bestApy = strategy;
         }
       }
-      const isStablecoin = category.assetFilter.some((a) => STABLECOIN_SYMBOLS.has(a.toUpperCase()));
       return {
         id: category.id,
         imageUrl: category.imageUrl,
         alt: category.alt,
         apyFormatted: bestApy == null ? void 0 : bestApy.apyFormatted,
-        description: isStablecoin ? labels == null ? void 0 : labels.stablecoinsBannerDescription : labels == null ? void 0 : labels.realsBannerDescription,
+        description: category.id === "dolar" ? labels == null ? void 0 : labels.stablecoinsBannerDescription : labels == null ? void 0 : labels.realsBannerDescription,
         handleClick: () => setActiveCategoryId(category.id)
       };
     });
-  }, [categories, strategies, labels == null ? void 0 : labels.stablecoinsBannerDescription, labels == null ? void 0 : labels.realsBannerDescription]);
+  }, [categories, strategiesByCategory, labels == null ? void 0 : labels.stablecoinsBannerDescription, labels == null ? void 0 : labels.realsBannerDescription]);
   const cardLabels = React6__default.useMemo(() => ({
     investLabel: labels == null ? void 0 : labels.investLabel,
     withdrawLabel: labels == null ? void 0 : labels.cardWithdrawLabel,
@@ -11434,15 +11433,16 @@ var EarnDesktopViewSimple = ({
   );
   const strategyRows = React6__default.useMemo(() => {
     return formattedPositions.positions.filter((p) => p.spotPosition.underlyingBalanceUSD > 0.01).map((p) => {
-      var _a, _b;
+      var _a2, _b;
+      const strategyDisplayName = getStrategyDisplayName(p.strategy);
       return {
-        logoUrl: p.strategy.logourl,
-        assetName: p.strategy.assetName,
+        logoUrl: getStrategyDisplayLogo(p.strategy),
+        assetName: strategyDisplayName,
         network: p.strategy.network,
         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),
+        totalValueFormatted: (_a2 = p.spotPosition.totalValueFormatted) != null ? _a2 : formatCurrency(p.spotPosition.underlyingBalanceUSD),
         isLoading: false,
         history: (_b = historyByAsset[p.strategy.assetName.toUpperCase()]) != null ? _b : [],
         onInvestClick: onDeposit ? () => onDeposit(p.strategy.id) : () => {
@@ -11467,7 +11467,7 @@ var EarnDesktopViewSimple = ({
       GroupedStrategyListViewSimple,
       {
         categoryId: activeCategoryId,
-        strategies,
+        strategies: (_a = strategiesByCategory[activeCategoryId]) != null ? _a : [],
         isLoading,
         onBack: () => setActiveCategoryId(null),
         onDeposit,