@gearbox-protocol/ui-kit 4.0.0-next.2 → 4.0.0-next.20

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

@@ -1,222 +1,165 @@
-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 { jsxs as a, jsx as e, Fragment as k } from "react/jsx-runtime";
+import { PointsIcon as N } from "../points-icon/points-icon.js";
+import { TokenIcon as P } from "../token-icon/token-icon.js";
+import { SimpleTooltip as A } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import { FormattedMessageTyped as a } from "../typed-intl/index.js";
+import { FormattedMessageTyped as s } from "../typed-intl/index.js";
 import "react";
-import { positiveTokenRewardsOf as P, pointProgramsOf as S, totalApyOf as Y } from "../../utils/apy-breakdown.js";
+import { tokenRewardsOf as I, pointProgramsOf as B, totalApyOf as T } 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 { bpsToPercent as $ } from "../../utils/bps.js";
+import { cn as p } from "../../utils/cn.js";
 import "sonner";
-import { percentTemplate as p } from "../../utils/format-money.js";
+import { formatLeverage as j } from "../../utils/format-leverage.js";
+import { formatCompactPercent as S } 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 i(n) {
+  const o = $(n), r = S(Math.abs(o));
+  return o < 0 ? `-${r}` : r;
 }
-function m(t) {
-  const n = v(t), i = p(Math.abs(n));
-  return n < 0 ? `-${i}` : n > 0 ? i : p(0);
-}
-function w(t) {
-  const n = v(Math.abs(t));
-  return `-${p(n)}`;
-}
-function Z({
-  supplyApy: t,
-  maxLeverage: n,
-  collateralApy: i,
-  borrowApy: l,
-  additionalBorrowApy: d,
-  children: k,
+function V({
+  supplyApy: n,
+  maxLeverage: o,
+  collateralApy: r,
+  borrowApy: c,
+  quotaRate: u,
+  children: h,
   className: f
 }) {
-  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(
+  const g = o !== void 0 && o > 0, l = r ?? n, w = I(l), y = B(n), b = T(n), d = c != null || u != null ? -((c ?? 0) + (u ?? 0)) : void 0, x = y.filter((t) => t.multiplier != null), v = /* @__PURE__ */ a(
     "div",
     {
-      className: N(
+      className: p(
         "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]",
+        "bg-card text-card-foreground",
+        "border border-border",
         "shadow-[0_4px_14px_rgba(0,0,0,0.15)]",
         "text-left font-normal"
       ),
       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,
+        /* @__PURE__ */ a("div", { className: "flex h-6 items-center justify-between gap-3", children: [
+          /* @__PURE__ */ e("span", { className: "text-base font-semibold leading-4 text-foreground", children: g ? /* @__PURE__ */ e(
+            s,
             {
-              messageId: "components.yieldBreakdown.title"
+              messageId: "components.yieldBreakdown.titleNetAtLeverage",
+              values: {
+                leverage: j(o)
+              }
             }
-          ) }),
-          n !== void 0 && n > 0 && /* @__PURE__ */ e("span", { className: "font-medium", children: /* @__PURE__ */ e(
-            a,
+          ) : /* @__PURE__ */ e(s, { messageId: "components.apyParts.totalAPY" }) }),
+          /* @__PURE__ */ e(
+            "span",
             {
-              messageId: "components.yieldBreakdown.atLeverage",
-              values: { leverage: z(n) }
+              className: p(
+                "rounded-md px-2 py-0.5 text-sm font-semibold tabular-nums",
+                b > 0 ? "bg-success/20 text-success" : "bg-muted text-muted-foreground"
+              ),
+              children: i(b)
             }
-          ) })
+          )
         ] }),
-        /* @__PURE__ */ e(
-          r,
+        l.organicApy != null && /* @__PURE__ */ e(
+          m,
           {
-            label: /* @__PURE__ */ e(
-              a,
-              {
-                messageId: "components.yieldBreakdown.baseYield"
-              }
-            ),
-            value: /* @__PURE__ */ e("span", { className: "font-semibold", children: m(g.organicApy) })
+            muted: l.organicApy < 0,
+            label: /* @__PURE__ */ e(s, { messageId: "components.yieldBreakdown.collateralApy" }),
+            value: i(l.organicApy)
           }
         ),
-        u.length > 0 && /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ e(c, { children: /* @__PURE__ */ e(
-            a,
-            {
-              messageId: "components.yieldBreakdown.incentiveYield"
-            }
-          ) }),
-          u.map((o) => /* @__PURE__ */ e(
-            r,
+        w.map((t) => t.supplyApr == null ? null : /* @__PURE__ */ e(
+          m,
+          {
+            muted: t.supplyApr < 0,
+            label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
+              /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                s,
+                {
+                  messageId: "components.apyParts.extraAPY",
+                  values: { symbol: t.token.symbol }
+                }
+              ) }),
+              /* @__PURE__ */ e(P, { token: t.token, size: 20 })
+            ] }),
+            value: i(t.supplyApr)
+          },
+          `incentive-${t.token.address}-${t.supplyApr}`
+        )),
+        g && d != null && /* @__PURE__ */ e(
+          m,
+          {
+            muted: d < 0,
+            label: /* @__PURE__ */ e(s, { messageId: "components.yieldBreakdown.borrowRate" }),
+            value: i(d)
+          }
+        ),
+        x.length > 0 && /* @__PURE__ */ a(k, { children: [
+          /* @__PURE__ */ e("div", { className: "h-px w-full bg-divider" }),
+          x.map((t) => /* @__PURE__ */ e(
+            m,
             {
-              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 }),
+              label: /* @__PURE__ */ a("span", { className: "inline-flex items-center gap-1.5", children: [
+                /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+                  s,
+                  {
+                    messageId: "components.yieldBreakdown.programPoints",
+                    values: { name: t.name }
+                  }
+                ) }),
                 /* @__PURE__ */ e(
-                  T,
+                  N,
                   {
-                    icon: R,
-                    className: "size-3.5 text-muted-foreground"
+                    reward: {
+                      name: t.name,
+                      type: t.id
+                    },
+                    size: 20
                   }
                 )
               ] }),
-              value: /* @__PURE__ */ e("span", { className: "font-semibold", children: m(o.supplyApr ?? 0) })
+              value: `${t.multiplier}×`
             },
-            `incentive-${o.token.address}-${o.supplyApr ?? 0}`
+            `points-${t.id}`
           ))
-        ] }),
-        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) })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ e(
-          r,
-          {
-            className: "h-7",
-            label: /* @__PURE__ */ e("span", { className: "text-sm font-bold uppercase leading-5 tracking-wide", children: /* @__PURE__ */ e(
-              a,
-              {
-                messageId: "components.yieldBreakdown.netYield"
-              }
-            ) }),
-            value: /* @__PURE__ */ e("span", { className: "text-xl font-bold leading-7", children: m(Y(t)) })
-          }
-        ),
-        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,
+    A,
     {
       placement: "bottom",
       triangle: !1,
       type: "modal-tooltip",
       minWidth: "100%",
       maxWidth: "100%",
-      title: /* @__PURE__ */ e("span", { className: f, children: k }),
+      title: /* @__PURE__ */ e("span", { className: f, children: h }),
       triggerClassName: f,
-      children: y
+      children: v
     }
   );
 }
-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
+function m({
+  label: n,
+  value: o,
+  muted: r = !1
 }) {
-  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 })
-      ]
-    }
-  );
+  return /* @__PURE__ */ a("div", { className: "flex h-6 items-center justify-between gap-3 text-sm leading-5", children: [
+    /* @__PURE__ */ e("span", { className: "min-w-0 font-normal text-muted-foreground", children: n }),
+    /* @__PURE__ */ e(
+      "span",
+      {
+        className: p(
+          "shrink-0 font-semibold tabular-nums",
+          r ? "text-muted-foreground" : "text-foreground"
+        ),
+        children: o
+      }
+    )
+  ] });
 }
 export {
-  Z as YieldBreakdownTooltip
+  V 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
+};