@gearbox-protocol/ui-kit 4.0.0-next.3 → 4.0.0-next.31

package/dist/esm/components/yield-breakdown-tooltip/yield-breakdown-tooltip.js

@@ -1,222 +1,184 @@
-import { jsxs as s, jsx as e, Fragment as I } from "react/jsx-runtime";
-import { faArrowUpRightFromSquare as R } from "@fortawesome/free-solid-svg-icons";
-import { FaIcon as T } from "../icons/fa-icon.js";
-import { PointsIcon as $ } from "../points-icon/points-icon.js";
-import { TokenIcon as j } from "../token-icon/token-icon.js";
-import { SimpleTooltip as F } from "../tooltip/simple-tooltip.js";
+import { jsx as e, jsxs as c, Fragment as A } from "react/jsx-runtime";
+import { APY_BREAKDOWN_TOOLTIP_WIDTH as B, ApyBreakdownBody as v, formatBreakdownRate as u, ApyBreakdownRow as y, periodMessageId as w, ApyBreakdownDivider as h } from "../base/apy-breakdown-body/apy-breakdown-body.js";
+import { PoolApyBreakdownCard as b } from "../base/pool-apy-breakdown-card/pool-apy-breakdown-card.js";
+import { PointsIcon as I } from "../points-icon/points-icon.js";
+import { TokenIcon as P } from "../token-icon/token-icon.js";
+import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import { FormattedMessageTyped as a } from "../typed-intl/index.js";
-import "react";
-import { positiveTokenRewardsOf as P, pointProgramsOf as S, totalApyOf as Y } from "../../utils/apy-breakdown.js";
-import "@gearbox-protocol/sdk";
-import { bpsToPercent as v } from "../../utils/bps.js";
-import { cn as N } from "../../utils/cn.js";
-import "sonner";
-import { percentTemplate as p } from "../../utils/format-money.js";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
-import "../../utils/z-index.js";
-function z(t) {
-  const n = t.toFixed(1);
-  return n.endsWith(".0") ? n.slice(0, -2) : n;
-}
-function m(t) {
-  const n = v(t), i = p(Math.abs(n));
-  return n < 0 ? `-${i}` : n > 0 ? i : p(0);
+import { FormattedMessageTyped as d } from "../typed-intl/index.js";
+import { tokenRewardsOf as O, pointProgramsOf as R, totalApyOf as x } from "../../utils/apy-breakdown.js";
+import { formatLeverage as N } from "../../utils/format-leverage.js";
+function S({
+  title: t,
+  children: l,
+  placement: s = "left",
+  open: a,
+  className: i,
+  triggerClassName: n
+}) {
+  return /* @__PURE__ */ e(
+    T,
+    {
+      placement: s,
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: B,
+      maxWidth: B,
+      title: t,
+      open: a,
+      className: i,
+      triggerClassName: n,
+      children: l
+    }
+  );
 }
-function w(t) {
-  const n = v(Math.abs(t));
-  return `-${p(n)}`;
+function H({
+  supplyApy: t,
+  maxLeverage: l,
+  collateralApy: s,
+  borrowApy: a,
+  quotaRate: i,
+  period: n,
+  children: r,
+  className: m,
+  open: g
+}) {
+  const p = l !== void 0 && l > 0;
+  return /* @__PURE__ */ e(
+    S,
+    {
+      placement: "bottom",
+      title: /* @__PURE__ */ e("span", { className: m, children: r }),
+      triggerClassName: m,
+      open: g,
+      children: p ? /* @__PURE__ */ e(
+        W,
+        {
+          supplyApy: t,
+          maxLeverage: l,
+          collateralApy: s,
+          borrowApy: a,
+          quotaRate: i,
+          period: n
+        }
+      ) : /* @__PURE__ */ e(b, { data: t, period: n })
+    }
+  );
 }
-function Z({
+function W({
   supplyApy: t,
-  maxLeverage: n,
-  collateralApy: i,
-  borrowApy: l,
-  additionalBorrowApy: d,
-  children: k,
-  className: f
+  maxLeverage: l,
+  collateralApy: s,
+  borrowApy: a,
+  quotaRate: i,
+  period: n
 }) {
-  const g = i ?? t, u = P(g), h = S(t), x = l !== void 0 && l > 0, b = d !== void 0 && d > 0, B = x || b, y = /* @__PURE__ */ s(
-    "div",
+  const r = s, m = r ? O(r) : [], g = R(t), p = x(t), f = a != null || i != null ? -((a ?? 0) + (i ?? 0)) : void 0, k = g.filter((o) => o.multiplier != null);
+  return /* @__PURE__ */ c(
+    v,
     {
-      className: N(
-        "flex w-[400px] max-w-[calc(100vw-32px)] flex-col gap-4 p-4",
-        "rounded-xl",
-        "bg-popover text-popover-foreground",
-        "border border-white/[0.07]",
-        "shadow-[0_4px_14px_rgba(0,0,0,0.15)]",
-        "text-left font-normal"
+      title: /* @__PURE__ */ e(
+        d,
+        {
+          messageId: w(
+            n,
+            "components.yieldBreakdown.titleNetAtLeverage",
+            "components.yieldBreakdown.titleNetAtLeverage7d"
+          ),
+          values: { leverage: N(l) }
+        }
       ),
+      chip: u(p),
+      chipPositive: p > 0,
       children: [
-        /* @__PURE__ */ s("div", { className: "flex h-6 items-center justify-between gap-3 text-base leading-4 text-foreground", children: [
-          /* @__PURE__ */ e("span", { className: "font-semibold", children: /* @__PURE__ */ e(
-            a,
-            {
-              messageId: "components.yieldBreakdown.title"
-            }
-          ) }),
-          n !== void 0 && n > 0 && /* @__PURE__ */ e("span", { className: "font-medium", children: /* @__PURE__ */ e(
-            a,
-            {
-              messageId: "components.yieldBreakdown.atLeverage",
-              values: { leverage: z(n) }
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ e(
-          r,
+        r?.organicApy != null ? /* @__PURE__ */ e(
+          y,
           {
+            muted: r.organicApy < 0,
             label: /* @__PURE__ */ e(
-              a,
+              d,
               {
-                messageId: "components.yieldBreakdown.baseYield"
+                messageId: w(
+                  n,
+                  "components.yieldBreakdown.collateralApy",
+                  "components.yieldBreakdown.collateralApy7d"
+                )
               }
             ),
-            value: /* @__PURE__ */ e("span", { className: "font-semibold", children: m(g.organicApy) })
+            value: u(r.organicApy)
           }
-        ),
-        u.length > 0 && /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
-            a,
+        ) : null,
+        m.map(
+          (o) => o.supplyApr == null ? null : /* @__PURE__ */ e(
+            y,
             {
-              messageId: "components.yieldBreakdown.incentiveYield"
-            }
-          ) }),
-          u.map((o) => /* @__PURE__ */ e(
-            r,
-            {
-              label: /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-1.5", children: [
-                /* @__PURE__ */ e(j, { token: o.token, size: 20 }),
-                /* @__PURE__ */ e("span", { children: o.token.symbol }),
-                /* @__PURE__ */ e(
-                  T,
+              muted: o.supplyApr < 0,
+              label: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                  d,
                   {
-                    icon: R,
-                    className: "size-3.5 text-muted-foreground"
+                    messageId: "components.apyParts.extraAPY",
+                    values: { symbol: o.token.symbol }
                   }
-                )
+                ) }),
+                /* @__PURE__ */ e(P, { token: o.token, size: 20 })
               ] }),
-              value: /* @__PURE__ */ e("span", { className: "font-semibold", children: m(o.supplyApr ?? 0) })
+              value: u(o.supplyApr)
             },
-            `incentive-${o.token.address}-${o.supplyApr ?? 0}`
-          ))
-        ] }),
-        B && /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
-            a,
-            {
-              messageId: "components.yieldBreakdown.borrowRate"
-            }
-          ) }),
-          x && /* @__PURE__ */ e(
-            r,
-            {
-              label: /* @__PURE__ */ e(
-                a,
-                {
-                  messageId: "components.yieldBreakdown.baseRate"
-                }
-              ),
-              value: /* @__PURE__ */ e("span", { className: "font-semibold text-muted-foreground", children: w(l) })
-            }
-          ),
-          b && /* @__PURE__ */ e(
-            r,
-            {
-              label: /* @__PURE__ */ e(
-                a,
-                {
-                  messageId: "components.yieldBreakdown.additionalRate"
-                }
-              ),
-              value: /* @__PURE__ */ e("span", { className: "font-semibold text-muted-foreground", children: w(d) })
-            }
+            `incentive-${o.token.address}-${o.supplyApr}`
           )
-        ] }),
-        /* @__PURE__ */ e(
-          r,
+        ),
+        f != null ? /* @__PURE__ */ e(
+          y,
           {
-            className: "h-7",
-            label: /* @__PURE__ */ e("span", { className: "text-sm font-bold uppercase leading-5 tracking-wide", children: /* @__PURE__ */ e(
-              a,
+            muted: f < 0,
+            label: /* @__PURE__ */ e(
+              d,
               {
-                messageId: "components.yieldBreakdown.netYield"
+                messageId: w(
+                  n,
+                  "components.yieldBreakdown.borrowRate",
+                  "components.yieldBreakdown.borrowRate7d"
+                )
               }
-            ) }),
-            value: /* @__PURE__ */ e("span", { className: "text-xl font-bold leading-7", children: m(Y(t)) })
+            ),
+            value: u(f)
           }
-        ),
-        h.length > 0 && /* @__PURE__ */ s(I, { children: [
-          /* @__PURE__ */ e("div", { className: "h-px w-full bg-[#2d3035]" }),
-          /* @__PURE__ */ s("div", { className: "flex h-5 items-center justify-between gap-3", children: [
-            /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
-              a,
-              {
-                messageId: "components.yieldBreakdown.points"
-              }
-            ) }),
-            /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: h.map((o) => /* @__PURE__ */ s(
-              "span",
-              {
-                className: "inline-flex items-center gap-1 rounded-[10px] bg-[#242528] pr-2 text-sm font-semibold text-foreground",
-                children: [
-                  /* @__PURE__ */ e(
-                    $,
-                    {
-                      reward: {
-                        name: o.name,
-                        type: o.id
-                      },
-                      size: 20
-                    }
-                  ),
-                  o.multiplier != null ? `${o.multiplier}×` : "—"
-                ]
-              },
-              `points-${o.id}`
-            )) })
-          ] })
-        ] })
-      ]
-    }
-  );
-  return /* @__PURE__ */ e(
-    F,
-    {
-      placement: "bottom",
-      triangle: !1,
-      type: "modal-tooltip",
-      minWidth: "100%",
-      maxWidth: "100%",
-      title: /* @__PURE__ */ e("span", { className: f, children: k }),
-      triggerClassName: f,
-      children: y
-    }
-  );
-}
-function c({ children: t }) {
-  return /* @__PURE__ */ e("span", { className: "text-xs font-normal uppercase leading-4 tracking-wide text-muted-foreground", children: t });
-}
-function r({
-  label: t,
-  value: n,
-  className: i
-}) {
-  return /* @__PURE__ */ s(
-    "div",
-    {
-      className: N(
-        "flex h-6 items-center justify-between gap-3 text-sm leading-5 text-foreground",
-        i
-      ),
-      children: [
-        /* @__PURE__ */ e("span", { className: "min-w-0 font-normal", children: t }),
-        /* @__PURE__ */ e("span", { className: "shrink-0 tabular-nums", children: n })
+        ) : null,
+        k.length > 0 ? /* @__PURE__ */ c(A, { children: [
+          /* @__PURE__ */ e(h, {}),
+          k.map((o) => /* @__PURE__ */ e(
+            y,
+            {
+              label: /* @__PURE__ */ c("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                  d,
+                  {
+                    messageId: "components.yieldBreakdown.programPoints",
+                    values: { name: o.name }
+                  }
+                ) }),
+                /* @__PURE__ */ e(
+                  I,
+                  {
+                    reward: {
+                      name: o.name,
+                      type: o.id
+                    },
+                    size: 20
+                  }
+                )
+              ] }),
+              value: `${o.multiplier}×`
+            },
+            `points-${o.id}`
+          ))
+        ] }) : null
       ]
     }
   );
 }
 export {
-  Z as YieldBreakdownTooltip
+  S as ApyBreakdownTooltip,
+  H as YieldBreakdownTooltip
 };

package/dist/esm/configs/tailwind-preset.js

@@ -72,9 +72,14 @@ const e = {
         "success-foreground": "hsl(var(--success-foreground))",
         "success-hover": "hsl(var(--success-hover))",
         warning: "hsl(var(--warning))",
+        info: {
+          DEFAULT: "hsl(var(--info))",
+          foreground: "hsl(var(--info-foreground))"
+        },
         liquidation: "hsl(var(--liquidation))",
         "liquidation-line": "hsl(var(--liquidation-line))",
         border: "hsl(var(--border))",
+        divider: "hsl(var(--divider))",
         input: "hsl(var(--input))",
         ring: "hsl(var(--ring))",
         "text-secondary": "hsl(var(--text-secondary))",
@@ -99,7 +104,14 @@ const e = {
           2: "hsl(var(--chart-2))",
           3: "hsl(var(--chart-3))",
           4: "hsl(var(--chart-4))",
-          5: "hsl(var(--chart-5))"
+          5: "hsl(var(--chart-5))",
+          6: "hsl(var(--chart-6))",
+          7: "hsl(var(--chart-7))",
+          8: "hsl(var(--chart-8))",
+          9: "hsl(var(--chart-9))",
+          10: "hsl(var(--chart-10))",
+          11: "hsl(var(--chart-11))",
+          12: "hsl(var(--chart-12))"
         }
       },
       fontFamily: {

package/dist/esm/hooks/index.js

@@ -1,19 +1,20 @@
 import { useCheckboxSelect as r } from "./use-checkbox-select.js";
-import { useControllableState as u } from "./use-controllable-state.js";
+import { useControllableState as s } from "./use-controllable-state.js";
 import { useDebounce as l } from "./use-debounce.js";
 import { useDebounceCall as p } from "./use-debounce-call.js";
-import { getSortForField as S, getSortForFields as a, nextMultiSortState as i, useFilterAllSelected as f, useMultiSort as F, useRangeFilter as b, useSelectFilter as n, useSort as c } from "./use-filter.js";
+import { getSortForField as S, getSortForFields as i, nextMultiSortState as a, useFilterAllSelected as f, useMultiSort as b, useRangeFilter as d, useSelectFilter as F, useSort as n } from "./use-filter.js";
 import { useHF as I } from "./use-hf.js";
-import { useIsDesktop as g, useIsExtraSmall as C, useIsMedium as D, useIsMobile as k, useIsTablet as h, useMediaQuery as v } from "./use-media-query.js";
-import { useOpenedState as A } from "./use-opened-state.js";
-import { usePrevious as H } from "./use-previous.js";
-import { useSmartNumberInput as O } from "./use-smart-number-input.js";
+import { useIsDesktop as g, useIsExtraSmall as C, useIsMedium as D, useIsMobile as h, useIsTablet as k, useMediaQuery as v } from "./use-media-query.js";
+import { useObservedWidthKey as O } from "./use-observed-width-key.js";
+import { useOpenedState as E } from "./use-opened-state.js";
+import { usePrevious as K } from "./use-previous.js";
+import { useSmartNumberInput as P } from "./use-smart-number-input.js";
 export {
   S as getSortForField,
-  a as getSortForFields,
-  i as nextMultiSortState,
+  i as getSortForFields,
+  a as nextMultiSortState,
   r as useCheckboxSelect,
-  u as useControllableState,
+  s as useControllableState,
   l as useDebounce,
   p as useDebounceCall,
   f as useFilterAllSelected,
@@ -21,14 +22,15 @@ export {
   g as useIsDesktop,
   C as useIsExtraSmall,
   D as useIsMedium,
-  k as useIsMobile,
-  h as useIsTablet,
+  h as useIsMobile,
+  k as useIsTablet,
   v as useMediaQuery,
-  F as useMultiSort,
-  A as useOpenedState,
-  H as usePrevious,
-  b as useRangeFilter,
-  n as useSelectFilter,
-  O as useSmartNumberInput,
-  c as useSort
+  b as useMultiSort,
+  O as useObservedWidthKey,
+  E as useOpenedState,
+  K as usePrevious,
+  d as useRangeFilter,
+  F as useSelectFilter,
+  P as useSmartNumberInput,
+  n as useSort
 };

package/dist/esm/hooks/use-observed-width-key.js

@@ -0,0 +1,24 @@
+import { useRef as c, useState as d, useEffect as f } from "react";
+function b() {
+  const t = c(null), [i, u] = d(0);
+  return f(() => {
+    const e = t.current;
+    if (!e) return;
+    const n = () => {
+      const s = Math.round(e.getBoundingClientRect().width);
+      u(
+        (o) => o === s ? o : s
+      );
+    };
+    n();
+    const r = new ResizeObserver(() => {
+      n();
+    });
+    return r.observe(e), () => {
+      r.disconnect();
+    };
+  }, []), { ref: t, widthKey: i };
+}
+export {
+  b as useObservedWidthKey
+};