@gearbox-protocol/ui-kit 3.13.1 → 3.14.0-next.10

package/dist/esm/components/composites/strategies-table/components/rewards-tooltip/tooltip-content.js

@@ -1,160 +1,169 @@
-import { jsxs as r, jsx as e, Fragment as j } from "react/jsx-runtime";
-import { faXmark as M } from "@fortawesome/free-solid-svg-icons";
+import { jsxs as r, jsx as e, Fragment as I } from "react/jsx-runtime";
+import { faXmark as W } from "@fortawesome/free-solid-svg-icons";
 import { formatPercentage as s, formatLeverage as _ } from "@gearbox-protocol/sdk";
-import { zeroAddress as L } from "viem";
+import { zeroAddress as j } from "viem";
 import { IconButton as H } from "../../../../icon-button/icon-button.js";
 import { FaIcon as U } from "../../../../icons/fa-icon.js";
-import { SeparateLine as W } from "../../../../separate-line/separate-line.js";
-import { Skeleton as b } from "../../../../skeleton/skeleton.js";
+import { SeparateLine as X } from "../../../../separate-line/separate-line.js";
+import { Skeleton as v } from "../../../../skeleton/skeleton.js";
 import "react";
-import { cn as X } from "../../../../../utils/cn.js";
+import { cn as G } from "../../../../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../../../utils/z-index.js";
-import { TipCard as f } from "../../../../tip-card/tip-card.js";
+import { TipCard as y } from "../../../../tip-card/tip-card.js";
 import { FormattedMessageTyped as o } from "../../../../typed-intl/index.js";
-import { Typography as m } from "../../../../typography/typography.js";
-import { VerticalIndicator as Y } from "../../../../vertical-indicator/vertical-indicator.js";
-import { VerticalList as k } from "../../../../vertical-list/vertical-list.js";
-import { VSpace as R } from "../../../../vspace/vspace.js";
-import { APYFeatureTooltip as p } from "../apy-feature/apy-feature.js";
-import { PointsFeatureTooltip as d } from "../points-feature/points-feature.js";
-import { RewardsTooltipRoot as G } from "./rewards-tooltip-root.js";
-const N = 0;
-function xe({
+import { Typography as p } from "../../../../typography/typography.js";
+import { VerticalIndicator as R } from "../../../../vertical-indicator/vertical-indicator.js";
+import { VerticalList as N } from "../../../../vertical-list/vertical-list.js";
+import { VSpace as L } from "../../../../vspace/vspace.js";
+import { APYFeatureTooltip as d } from "../apy-feature/apy-feature.js";
+import { PointsFeatureTooltip as c } from "../points-feature/points-feature.js";
+import { RewardsTooltipRoot as J } from "./rewards-tooltip-root.js";
+const K = 0;
+function ye({
   cellInfo: a,
   targetToken: n,
   apyListByNetwork: i,
-  tokensList: c,
-  strategyCreditManagers: y,
-  onClose: T,
+  tokensList: h,
+  strategyCreditManagers: P,
+  onClose: A,
   theme: F = "modal"
 }) {
   const {
     maxAPY: S,
     minCreditManager: l,
-    bonusAPY: v,
-    maxLeverage: P,
+    bonusAPY: C,
+    maxLeverage: Y,
     apyLoading: u,
     hasPoints: z,
     isPointsWithAPY: D,
-    rewards: I,
-    debtRewards: A,
+    rewards: g,
+    debtRewards: w,
     rewardRates: V,
     debtRewardRates: q,
     quotaRate: B
-  } = a, C = i?.[N]?.apyList?.[n] || 0, h = i?.[l?.chainId || N]?.extraCollateralAPYList?.[l?.pool || L]?.[n], E = D || !z;
-  return /* @__PURE__ */ r(G, { theme: F, children: [
-    T && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "-10px", right: "-10px" }, children: /* @__PURE__ */ e(H, { size: 26, buttonType: "filledDark", onClick: T, children: /* @__PURE__ */ e(U, { icon: M, style: { width: "12px", height: "12px" } }) }) }),
-    /* @__PURE__ */ e(f, { textColor: "dark", children: /* @__PURE__ */ r(
-      x,
-      {
-        title: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.without.title" }),
-        children: [
-          C > 0 && /* @__PURE__ */ e(
-            b,
-            {
-              className: "inline-block align-text-bottom",
-              width: 50,
-              loading: u,
-              children: /* @__PURE__ */ e(p, { value: `${s(C)}%` })
-            }
-          ),
-          h && h.value > 0 && /* @__PURE__ */ e(
-            b,
-            {
-              className: "inline-block align-text-bottom",
-              width: 50,
-              loading: u,
-              children: /* @__PURE__ */ e(
-                p,
-                {
-                  title: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.without.extra" }),
-                  tip: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.without.extra.tip" }),
-                  value: `${s(h.value)}%`
-                }
-              )
-            }
-          ),
-          I.map((t) => /* @__PURE__ */ e(
-            d,
-            {
-              reward: t,
-              points: t.multiplier
-            },
-            ["base", t.multiplier, t.name, t.type, t.units].join("-")
-          )),
-          A.map((t) => /* @__PURE__ */ e(
-            d,
-            {
-              reward: t,
-              points: t.multiplier,
-              tip: /* @__PURE__ */ e(
-                $,
-                {
-                  tokensList: c,
-                  strategyCreditManagers: y,
-                  reward: t
-                }
+  } = a, k = l?.chainId || K, b = i?.[k]?.apyList?.[n] || 0, m = i?.[k]?.extraCollateralAPYList?.[l?.pool || j]?.[n], E = D || !z, M = b > 0 || m !== void 0 && m.value > 0 || g.length > 0 || w.length > 0;
+  return /* @__PURE__ */ r(J, { theme: F, children: [
+    A && /* @__PURE__ */ e("div", { style: { position: "absolute", top: "-10px", right: "-10px" }, children: /* @__PURE__ */ e(H, { size: 26, buttonType: "filledDark", onClick: A, children: /* @__PURE__ */ e(U, { icon: W, style: { width: "12px", height: "12px" } }) }) }),
+    M && /* @__PURE__ */ r(I, { children: [
+      /* @__PURE__ */ e(y, { textColor: "dark", children: /* @__PURE__ */ r(
+        T,
+        {
+          title: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.without.title" }),
+          children: [
+            b > 0 && /* @__PURE__ */ e(
+              v,
+              {
+                className: "inline-block align-text-bottom",
+                width: 50,
+                loading: u,
+                children: /* @__PURE__ */ e(d, { value: `${s(b)}%` })
+              }
+            ),
+            m && m.value > 0 && /* @__PURE__ */ e(
+              v,
+              {
+                className: "inline-block align-text-bottom",
+                width: 50,
+                loading: u,
+                children: /* @__PURE__ */ e(
+                  d,
+                  {
+                    title: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.without.extra" }),
+                    tip: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.without.extra.tip" }),
+                    value: `${s(m.value)}%`
+                  }
+                )
+              }
+            ),
+            g.map((t) => /* @__PURE__ */ e(
+              c,
+              {
+                reward: t,
+                points: t.multiplier
+              },
+              ["base", t.multiplier, t.name, t.type, t.units].join(
+                "-"
               )
-            },
-            ["debt", t.multiplier, t.name, t.type, t.units, t.cm].join(
-              "-"
-            )
-          ))
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ e(R, { height: 16 }),
-    /* @__PURE__ */ r(f, { textColor: "dark", borderColor: "gradient", children: [
-      /* @__PURE__ */ e(k, { children: /* @__PURE__ */ r(
-        x,
+            )),
+            w.map((t) => /* @__PURE__ */ e(
+              c,
+              {
+                reward: t,
+                points: t.multiplier,
+                tip: /* @__PURE__ */ e(
+                  $,
+                  {
+                    tokensList: h,
+                    strategyCreditManagers: P,
+                    reward: t
+                  }
+                )
+              },
+              [
+                "debt",
+                t.multiplier,
+                t.name,
+                t.type,
+                t.units,
+                t.cm
+              ].join("-")
+            ))
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ e(L, { height: 16 })
+    ] }),
+    /* @__PURE__ */ r(y, { textColor: "dark", borderColor: "gradient", children: [
+      /* @__PURE__ */ e(N, { children: /* @__PURE__ */ r(
+        T,
         {
           title: /* @__PURE__ */ e(
             o,
             {
               messageId: "components.rewardsTooltip.with.title",
               values: {
-                leverage: P > 0 ? `${_(Number(P))}×` : ""
+                leverage: Y > 0 ? `${_(Number(Y))}×` : ""
               }
             }
           ),
           children: [
             E && /* @__PURE__ */ e(
-              b,
+              v,
               {
                 className: "inline-block align-text-bottom",
                 width: 50,
                 loading: u,
-                children: /* @__PURE__ */ e(p, { value: `${s(S)}%` })
+                children: /* @__PURE__ */ e(d, { value: `${s(S)}%` })
               }
             ),
-            I.map((t, g) => {
-              const w = V?.[g] || 0n;
+            g.map((t, f) => {
+              const x = V?.[f] || 0n;
               return /* @__PURE__ */ e(
-                d,
+                c,
                 {
                   reward: t,
-                  points: w
+                  points: x
                 },
                 ["base", t.multiplier, t.name, t.type, t.units].join(
                   "-"
                 )
               );
             }),
-            A.map((t, g) => {
-              const w = q?.[g] || 0n;
+            w.map((t, f) => {
+              const x = q?.[f] || 0n;
               return /* @__PURE__ */ e(
-                d,
+                c,
                 {
                   reward: t,
-                  points: w,
+                  points: x,
                   tip: /* @__PURE__ */ e(
                     $,
                     {
-                      tokensList: c,
-                      strategyCreditManagers: y,
+                      tokensList: h,
+                      strategyCreditManagers: P,
                       reward: t
                     }
                   )
@@ -172,52 +181,52 @@ function xe({
           ]
         }
       ) }),
-      /* @__PURE__ */ e(W, { margin: 16 }),
-      /* @__PURE__ */ r(k, { children: [
+      /* @__PURE__ */ e(X, { margin: 16 }),
+      /* @__PURE__ */ r(N, { children: [
         l && /* @__PURE__ */ e(
-          Y,
+          R,
           {
-            label: /* @__PURE__ */ e(m, { as: "span", color: "secondary", children: /* @__PURE__ */ e(
+            label: /* @__PURE__ */ e(p, { as: "span", color: "secondary", children: /* @__PURE__ */ e(
               o,
               {
                 values: {
-                  symbol: c?.[l.underlyingToken]?.title || "Utilization"
+                  symbol: h?.[l.underlyingToken]?.title || "Utilization"
                 },
                 messageId: "components.rewardsTooltip.with.borrowRate"
               }
             ) }),
-            value: /* @__PURE__ */ e(m, { as: "span", color: "secondary", children: `${s(
+            value: /* @__PURE__ */ e(p, { as: "span", color: "secondary", children: `${s(
               l.baseBorrowRate
             )}%` })
           }
         ),
         l && /* @__PURE__ */ e(
-          Y,
+          R,
           {
-            label: /* @__PURE__ */ e(m, { as: "span", color: "secondary", children: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.with.quotaRate" }) }),
-            value: /* @__PURE__ */ e(m, { as: "span", color: "secondary", children: `${s(Number(B))}%` })
+            label: /* @__PURE__ */ e(p, { as: "span", color: "secondary", children: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.with.quotaRate" }) }),
+            value: /* @__PURE__ */ e(p, { as: "span", color: "secondary", children: `${s(Number(B))}%` })
           }
         )
       ] })
     ] }),
-    v && /* @__PURE__ */ r(j, { children: [
-      /* @__PURE__ */ e(R, { height: 16 }),
+    C && /* @__PURE__ */ r(I, { children: [
+      /* @__PURE__ */ e(L, { height: 16 }),
       /* @__PURE__ */ e(
-        f,
+        y,
         {
           backgroundColor: "gray-10",
           textColor: "light",
           borderColor: "dark",
           children: /* @__PURE__ */ e(
-            x,
+            T,
             {
               title: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.with.bonusAPY.title" }),
               children: /* @__PURE__ */ e("div", { className: "flex-col-12", children: /* @__PURE__ */ e(
-                p,
+                d,
                 {
                   theme: "light",
                   tip: /* @__PURE__ */ e(o, { messageId: "components.rewardsTooltip.with.bonusAPY.tip" }),
-                  value: `${s(v.value)}%`
+                  value: `${s(C.value)}%`
                 }
               ) })
             }
@@ -227,10 +236,10 @@ function xe({
     ] })
   ] });
 }
-function x({ title: a, children: n, theme: i = "main" }) {
-  return /* @__PURE__ */ r(j, { children: [
-    /* @__PURE__ */ e("div", { className: X("flex-col-12", i === "main" ? "mb-3" : "mb-2"), children: /* @__PURE__ */ e(
-      m,
+function T({ title: a, children: n, theme: i = "main" }) {
+  return /* @__PURE__ */ r(I, { children: [
+    /* @__PURE__ */ e("div", { className: G("flex-col-12", i === "main" ? "mb-3" : "mb-2"), children: /* @__PURE__ */ e(
+      p,
       {
         as: "span",
         variant: "bodySmall",
@@ -252,11 +261,11 @@ function $({
     {
       messageId: "components.strategiesTable.line.points.tip",
       values: {
-        symbol: i?.[n[a.cm]?.underlyingToken || L]?.title || "unknown"
+        symbol: i?.[n[a.cm]?.underlyingToken || j]?.title || "unknown"
       }
     }
   );
 }
 export {
-  xe as RewardsTooltipContent
+  ye as RewardsTooltipContent
 };