@gearbox-protocol/permissionless-ui 1.22.0-next.7 → 1.22.0-next.70

package/dist/esm/components/pool-apy-tooltip/pool-apy-tooltip.js

@@ -1,83 +1,252 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { TooltipProvider as f, Tooltip as v, TooltipTrigger as y, TooltipContent as g } from "../tooltip/tooltip.js";
-function w({
-  children: o,
-  totalAPY: s,
-  extraAPYTotal: i,
-  loading7DAgo: c,
-  loading: h,
-  baseAPY: d,
-  extraAPY: a,
-  apy7DAgo: l,
-  tokensList: p,
-  className: u
+import { jsx as e, jsxs as o, Fragment as x } from "react/jsx-runtime";
+import { faPlus as T } from "@fortawesome/free-solid-svg-icons";
+import { IconLighting as k } from "@gearbox-protocol/static";
+import { FaIcon as S } from "../icons/fa-icon.js";
+import { PointsIcon as _ } from "../points-icon/points-icon.js";
+import { Skeleton as z } from "../skeleton/skeleton.js";
+import "react";
+import "@gearbox-protocol/sdk";
+import { cn as y } from "../../utils/cn.js";
+import "sonner";
+import { percentTemplate as a } from "../../utils/format-money.js";
+import { getStatic as A } from "../../utils/static.js";
+import "luxon";
+import { TokenIcon as C } from "../token-icon/token-icon.js";
+import { SimpleTooltip as Y } from "../tooltip/simple-tooltip.js";
+import "../tooltip/tooltip.js";
+import { FormattedMessageTyped as n } from "../typed-intl/index.js";
+import { VerticalIndicator as l } from "../vertical-indicator/vertical-indicator.js";
+import { VerticalList as u } from "../vertical-list/vertical-list.js";
+const L = {
+  supplyAPY: "components.apyParts.supplyAPY",
+  tokenYield: "components.apyParts.tokenYield"
+}, $ = {
+  supplyAPY: "components.apyParts.supplyAPY.tip",
+  tokenYield: "components.apyParts.tokenYield.tip"
+}, v = {
+  deposit: void 0,
+  "cross-chain-deposit": "components.apyParts.points.condition.crossDeposit",
+  holding: void 0
+};
+function E(r) {
+  return r === "GEAR" ? { icon: A("/logo/logo_symbol.png") } : r;
+}
+function O({ children: r }) {
+  return /* @__PURE__ */ e("div", { className: "w-[110px] grid grid-cols-2 items-end text-end", children: r });
+}
+function ne({
+  children: r,
+  totalAPY: f,
+  baseAPY: c,
+  extraAPY: h,
+  points: i,
+  apy7DAgo: s,
+  externalAPY: d,
+  tokensList: I,
+  className: g
 }) {
-  if (!(s !== void 0 || d?.length || a?.length) || h)
-    return /* @__PURE__ */ t("span", { className: u, children: o });
-  const m = typeof l == "object" ? l?.value : l;
-  return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ n(v, { children: [
-    /* @__PURE__ */ t(y, { asChild: !0, children: /* @__PURE__ */ t("span", { className: u, children: o }) }),
-    /* @__PURE__ */ t(g, { className: "max-w-xs", children: /* @__PURE__ */ n("div", { className: "space-y-2 text-sm", children: [
-      d && d.length > 0 && /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ t("div", { className: "font-medium text-muted-foreground mb-1", children: "Base APY" }),
-        d.map((e, r) => /* @__PURE__ */ n(
+  if (!(f !== void 0 || c && c.length > 0 || h && h.length > 0 || i && i.length > 0))
+    return /* @__PURE__ */ e("span", { className: g, children: r });
+  const P = !s || s.totalAPYLoading || s.loading7DAgo, b = !!s, m = (t, p) => b ? /* @__PURE__ */ o(O, { children: [
+    /* @__PURE__ */ e("span", { children: t }),
+    /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(z, { width: 30, height: 14, loading: P, children: p }) })
+  ] }) : t, w = /* @__PURE__ */ o(
+    "div",
+    {
+      className: y(
+        "w-[370px] p-6",
+        "bg-popover",
+        "border border-border",
+        "rounded-lg",
+        "shadow-[0_4px_28px_4px_rgba(0,0,0,0.15)]",
+        "text-left font-normal"
+      ),
+      children: [
+        /* @__PURE__ */ o(u, { children: [
+          b && /* @__PURE__ */ e(
+            l,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ e("span", { className: "uppercase text-muted-foreground text-xs", children: /* @__PURE__ */ e(
+                n,
+                {
+                  messageId: "components.apyParts.title"
+                }
+              ) }),
+              value: /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: m("1D", "7D") })
+            }
+          ),
+          c?.map((t, p) => /* @__PURE__ */ e(
+            l,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ e(n, { messageId: L[t.type] }),
+              description: /* @__PURE__ */ e(
+                n,
+                {
+                  messageId: $[t.type]
+                }
+              ),
+              value: m(
+                a(t.apy),
+                a(s?.baseAPY?.[p]?.apy || 0)
+              )
+            },
+            `base-${t.type}-${t.apy}`
+          )),
+          h?.map((t) => {
+            const N = I?.[t.rewardToken]?.symbol || t.rewardTokenSymbol;
+            return /* @__PURE__ */ e(
+              l,
+              {
+                size: "sm",
+                label: /* @__PURE__ */ o("span", { className: "inline-flex items-center", children: [
+                  /* @__PURE__ */ e(
+                    n,
+                    {
+                      messageId: "components.apyParts.extraAPY",
+                      values: { symbol: t.rewardTokenSymbol }
+                    }
+                  ),
+                  /* @__PURE__ */ e("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ e(
+                    C,
+                    {
+                      symbol: E(N),
+                      size: 14
+                    }
+                  ) })
+                ] }),
+                description: /* @__PURE__ */ e(
+                  n,
+                  {
+                    messageId: "components.apyParts.extraAPY.tip"
+                  }
+                ),
+                value: m(
+                  a(t.apy),
+                  a(t.apy)
+                )
+              },
+              `extra-${t.rewardToken}-${t.apy}`
+            );
+          })
+        ] }),
+        /* @__PURE__ */ e("div", { className: "my-5 border-t border-border" }),
+        /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(
+          l,
+          {
+            size: "sm",
+            label: /* @__PURE__ */ e("span", { className: "font-bold", children: /* @__PURE__ */ e(
+              n,
+              {
+                messageId: "components.apyParts.totalAPY"
+              }
+            ) }),
+            value: m(
+              a(f || 0),
+              a(s?.totalAPY || 0)
+            )
+          }
+        ) }),
+        d && /* @__PURE__ */ e(
           "div",
           {
-            className: "flex justify-between gap-4",
-            children: [
-              /* @__PURE__ */ t("span", { children: e.type === "supplyAPY" ? "Supply" : e.type || "Base" }),
-              /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-                e.apy.toFixed(2),
-                "%"
-              ] })
-            ]
-          },
-          `base-${e.type || r}-${e.apy}`
-        ))
-      ] }),
-      a && a.length > 0 && /* @__PURE__ */ n("div", { children: [
-        /* @__PURE__ */ t("div", { className: "font-medium text-muted-foreground mb-1", children: "Rewards" }),
-        a.map((e, r) => {
-          const x = e.token && p ? p[e.token]?.symbol : e.token;
-          return /* @__PURE__ */ n(
+            className: y(
+              "mt-5 px-8 pt-[18px] pb-4",
+              "rounded-[10px]",
+              "text-[13px] leading-[120%] text-center",
+              "border border-dashed border-gray-40"
+            ),
+            children: /* @__PURE__ */ e(
+              n,
+              {
+                messageId: d.tooltip,
+                values: {
+                  name: d.name,
+                  value: /* @__PURE__ */ o(x, { children: [
+                    /* @__PURE__ */ e("span", { className: "text-gray-90 mr-1.5", children: /* @__PURE__ */ e(k, { size: 14, style: { verticalAlign: "top" } }) }),
+                    /* @__PURE__ */ o("span", { className: "font-bold", children: [
+                      "+",
+                      a(d.apy)
+                    ] })
+                  ] })
+                }
+              }
+            )
+          }
+        ),
+        i && i.length > 0 && /* @__PURE__ */ o(x, { children: [
+          /* @__PURE__ */ e("div", { className: "relative my-2.5 mx-6 border-t-2 border-border", children: /* @__PURE__ */ e(
             "div",
             {
-              className: "flex justify-between gap-4",
-              children: [
-                /* @__PURE__ */ t("span", { children: x || e.type || "Reward" }),
-                /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-                  e.apy.toFixed(2),
-                  "%"
-                ] })
-              ]
+              className: y(
+                "absolute -top-[10px] left-0",
+                "w-5 h-5",
+                "flex items-center justify-center",
+                "rounded-full",
+                "bg-gray-20"
+              ),
+              children: /* @__PURE__ */ e(S, { icon: T, className: "size-2.5 text-white" })
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "h-6" }),
+          /* @__PURE__ */ e(u, { children: i.map((t) => /* @__PURE__ */ e(
+            l,
+            {
+              size: "sm",
+              label: /* @__PURE__ */ o("span", { className: "inline-flex items-center", children: [
+                /* @__PURE__ */ e(
+                  n,
+                  {
+                    messageId: "components.apyParts.points",
+                    values: { symbol: t.name }
+                  }
+                ),
+                t.reward && /* @__PURE__ */ e("span", { className: "ml-2 inline-flex", children: /* @__PURE__ */ e(
+                  _,
+                  {
+                    reward: {
+                      name: t.reward.name || t.name,
+                      type: t.reward.type || t.name.toLowerCase()
+                    },
+                    size: 16
+                  }
+                ) })
+              ] }),
+              description: /* @__PURE__ */ o("div", { children: [
+                /* @__PURE__ */ e("div", { children: `Per ${[
+                  ...t.reward?.duration ? [t.reward.duration] : [],
+                  ...t.tokenTitle ? [`1 ${t.tokenTitle}`] : []
+                ].join(" per ")}` }),
+                t.reward?.condition && v[t.reward.condition] && /* @__PURE__ */ e("span", { className: "text-warning", children: /* @__PURE__ */ e(
+                  n,
+                  {
+                    messageId: v[t.reward.condition]
+                  }
+                ) })
+              ] }),
+              value: t.amount
             },
-            `extra-${e.token || r}-${e.apy}`
-          );
-        }),
-        i !== void 0 && /* @__PURE__ */ n("div", { className: "flex justify-between gap-4 text-muted-foreground", children: [
-          /* @__PURE__ */ t("span", { children: "Total Extra" }),
-          /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-            i.toFixed(2),
-            "%"
-          ] })
-        ] })
-      ] }),
-      s !== void 0 && /* @__PURE__ */ n("div", { className: "border-t pt-2 flex justify-between gap-4 font-medium", children: [
-        /* @__PURE__ */ t("span", { children: "Total APY" }),
-        /* @__PURE__ */ n("span", { className: "tabular-nums", children: [
-          s.toFixed(2),
-          "%"
+            `points-${t.name}-${t.amount}`
+          )) })
         ] })
-      ] }),
-      m !== void 0 && !c && /* @__PURE__ */ n("div", { className: "text-xs text-muted-foreground", children: [
-        "7d ago: ",
-        m.toFixed(2),
-        "%"
-      ] }),
-      c && /* @__PURE__ */ t("div", { className: "text-xs text-muted-foreground", children: "Loading 7d data..." })
-    ] }) })
-  ] }) });
+      ]
+    }
+  );
+  return /* @__PURE__ */ e(
+    Y,
+    {
+      placement: "bottom",
+      triangle: !1,
+      type: "modal-tooltip",
+      minWidth: "100%",
+      maxWidth: "100%",
+      title: /* @__PURE__ */ e("span", { className: g, children: r }),
+      triggerClassName: g,
+      children: w
+    }
+  );
 }
 export {
-  w as PoolAPYTooltip
+  ne as PoolAPYTooltip
 };

package/dist/esm/components/pool-indicator-icon/pool-indicator-icon.js

@@ -1,25 +1,42 @@
-import { jsx as e } from "react/jsx-runtime";
-import "react";
-import { cn as i } from "../../utils/cn.js";
-import "sonner";
+import { jsxs as d, jsx as r } from "react/jsx-runtime";
+import { IconLighting as n } from "@gearbox-protocol/static";
+import m from "react";
 import "@gearbox-protocol/sdk";
-function f({
-  children: o,
-  size: t = 24,
-  className: r
-}) {
-  return /* @__PURE__ */ e(
-    "div",
-    {
-      className: i(
-        "inline-flex items-center justify-center rounded-full bg-muted",
-        r
-      ),
-      style: { width: t, height: t },
-      children: o
-    }
-  );
-}
+import { cn as a } from "../../utils/cn.js";
+import "sonner";
+import "luxon";
+const f = {
+  primary: "#e0369c",
+  secondary: "#fff"
+}, j = m.forwardRef(({ children: t, size: i = 24, color: s = "primary", className: l }, c) => {
+  const e = i + 8, o = f[s];
+  return /* @__PURE__ */ d("div", { ref: c, className: a("relative", l), children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "absolute -top-1 -left-1 flex items-center justify-center rounded-full",
+        style: {
+          width: e,
+          height: e,
+          border: `2px solid ${o}`
+        }
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "absolute -top-1.5 -right-1.5 flex items-center justify-center rounded-full",
+        style: {
+          width: 14,
+          height: 14,
+          backgroundColor: o
+        },
+        children: /* @__PURE__ */ r(n, { size: 8 })
+      }
+    ),
+    t
+  ] });
+});
 export {
-  f as PoolIndicatorIcon
+  j as PoolIndicatorIcon
 };

package/dist/esm/components/pool-points-indicator/pool-points-indicator.js

@@ -1,8 +1,9 @@
 import { jsxs as i, jsx as r } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as o } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const a = {
   primary: "border-primary bg-primary",
   secondary: "border-secondary bg-secondary",
@@ -10,27 +11,27 @@ const a = {
   blue: "border-blue-600 bg-blue-600",
   yellow: "border-yellow-600 bg-yellow-600"
 };
-function p({
+function u({
   size: e = 24,
   color: n = "primary",
   className: s,
   children: d
 }) {
-  const l = e + 8, t = a[n];
+  const t = e + 8, l = a[n];
   return /* @__PURE__ */ i("div", { className: o("relative inline-block", s), children: [
     /* @__PURE__ */ r(
       "div",
       {
         className: o(
           "absolute flex items-center justify-center rounded-full border-2",
-          t.split(" ")[0]
+          l.split(" ")[0]
           // border color
         ),
         style: {
           top: -4,
           left: -4,
-          width: l,
-          height: l
+          width: t,
+          height: t
         }
       }
     ),
@@ -39,7 +40,7 @@ function p({
       {
         className: o(
           "absolute flex items-center justify-center rounded-full",
-          t.split(" ")[1]
+          l.split(" ")[1]
         ),
         style: {
           top: -e / 4,
@@ -71,5 +72,5 @@ function p({
   ] });
 }
 export {
-  p as PoolPointsIndicator
+  u as PoolPointsIndicator
 };

package/dist/esm/components/progress/progress.js

@@ -1,13 +1,14 @@
 import { jsxs as t, jsx as l } from "react/jsx-runtime";
-import * as e from "@radix-ui/react-progress";
+import * as r from "@radix-ui/react-progress";
 import * as u from "react";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
+import "luxon";
 const g = u.forwardRef(
   ({
     className: o,
-    value: r,
+    value: e,
     variant: i = "default",
     size: n = "default",
     showLabel: a = !1,
@@ -25,7 +26,7 @@ const g = u.forwardRef(
     };
     return /* @__PURE__ */ t("div", { className: s("flex w-full items-center", a && "gap-3"), children: [
       /* @__PURE__ */ l(
-        e.Root,
+        r.Root,
         {
           ref: d,
           className: s(
@@ -35,25 +36,25 @@ const g = u.forwardRef(
           ),
           ...m,
           children: /* @__PURE__ */ l(
-            e.Indicator,
+            r.Indicator,
             {
               className: s(
                 "h-full w-full flex-1 transition-all",
                 c[i]
               ),
-              style: { transform: `translateX(-${100 - (r || 0)}%)` }
+              style: { transform: `translateX(-${100 - (e || 0)}%)` }
             }
           )
         }
       ),
       a && /* @__PURE__ */ t("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: [
-        r,
+        e,
         "%"
       ] })
     ] });
   }
 );
-g.displayName = e.Root.displayName;
+g.displayName = r.Root.displayName;
 export {
   g as Progress
 };

package/dist/esm/components/progress-circle/progress-circle.js

@@ -1,19 +1,20 @@
-import { jsxs as o, jsx as a } from "react/jsx-runtime";
+import { jsxs as n, jsx as a } from "react/jsx-runtime";
 import "react";
+import "@gearbox-protocol/sdk";
 import { cn as p } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-function j({
+import "luxon";
+function k({
   value: l,
   size: e = 40,
   strokeWidth: t = 4,
   indicatorColor: m = "hsl(var(--primary))",
   trackColor: f = "hsl(var(--muted))",
   className: h,
-  children: c
+  children: i
 }) {
-  const i = Math.max(0, Math.min(100, l || 0)), r = e / 2, s = r - t / 2, n = 2 * Math.PI * s, u = (100 - i) * n / 100;
-  return /* @__PURE__ */ o(
+  const o = Math.max(0, Math.min(100, l || 0)), r = e / 2, s = r - t / 2, c = 2 * Math.PI * s, u = (100 - o) * c / 100;
+  return /* @__PURE__ */ n(
     "div",
     {
       className: p(
@@ -22,14 +23,14 @@ function j({
       ),
       style: { width: e, height: e },
       children: [
-        /* @__PURE__ */ o(
+        /* @__PURE__ */ n(
           "svg",
           {
             width: e,
             height: e,
             viewBox: `0 0 ${e} ${e}`,
             className: "rotate-[-90deg]",
-            "aria-label": `Progress: ${i}%`,
+            "aria-label": `Progress: ${o}%`,
             role: "img",
             children: [
               /* @__PURE__ */ a(
@@ -52,7 +53,7 @@ function j({
                   fill: "transparent",
                   stroke: m,
                   strokeWidth: t,
-                  strokeDasharray: n,
+                  strokeDasharray: c,
                   strokeDashoffset: u,
                   strokeLinecap: "round",
                   className: "transition-[stroke-dashoffset] duration-300 ease-in-out"
@@ -61,11 +62,11 @@ function j({
             ]
           }
         ),
-        c && /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center", children: c })
+        i && /* @__PURE__ */ a("div", { className: "absolute inset-0 flex items-center justify-center", children: i })
       ]
     }
   );
 }
 export {
-  j as ProgressCircle
+  k as ProgressCircle
 };

package/dist/esm/components/radio-group/radio-group.js

@@ -1,11 +1,13 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-radio-group";
-import { Circle as p } from "lucide-react";
 import * as t from "react";
+import { faCircle as p } from "@fortawesome/free-solid-svg-icons";
+import { FaIcon as f } from "../icons/fa-icon.js";
+import "@gearbox-protocol/sdk";
 import { cn as s } from "../../utils/cn.js";
 import "sonner";
-import "@gearbox-protocol/sdk";
-const f = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
+import "luxon";
+const u = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
   a.Root,
   {
     className: s("grid gap-2", r),
@@ -13,8 +15,8 @@ const f = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
     ref: o
   }
 ));
-f.displayName = a.Root.displayName;
-const m = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
+u.displayName = a.Root.displayName;
+const l = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
   a.Item,
   {
     ref: o,
@@ -23,29 +25,35 @@ const m = t.forwardRef(({ className: r, ...i }, o) => /* @__PURE__ */ e(
       r
     ),
     ...i,
-    children: /* @__PURE__ */ e(a.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(p, { className: "h-2.5 w-2.5 fill-primary text-primary" }) })
+    children: /* @__PURE__ */ e(a.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e(
+      f,
+      {
+        icon: p,
+        className: "size-2.5 fill-primary text-primary"
+      }
+    ) })
   }
 ));
-m.displayName = a.Item.displayName;
-const u = t.forwardRef(({ value: r, label: i, description: o, disabled: d, ...n }, c) => /* @__PURE__ */ l("div", { className: "flex items-start space-x-3", children: [
+l.displayName = a.Item.displayName;
+const y = t.forwardRef(({ value: r, label: i, description: o, disabled: m, ...n }, c) => /* @__PURE__ */ d("div", { className: "flex items-start space-x-3", children: [
   /* @__PURE__ */ e(
-    m,
+    l,
     {
       ref: c,
       value: r,
       id: r,
-      disabled: d,
+      disabled: m,
       ...n
     }
   ),
-  /* @__PURE__ */ l("div", { className: "grid gap-1.5 leading-none", children: [
+  /* @__PURE__ */ d("div", { className: "grid gap-1.5 leading-none", children: [
     /* @__PURE__ */ e(
       "label",
       {
         htmlFor: r,
         className: s(
           "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 cursor-pointer",
-          d && "opacity-50 cursor-not-allowed"
+          m && "opacity-50 cursor-not-allowed"
         ),
         children: i
       }
@@ -53,9 +61,9 @@ const u = t.forwardRef(({ value: r, label: i, description: o, disabled: d, ...n
     o && /* @__PURE__ */ e("p", { className: "text-sm text-muted-foreground", children: o })
   ] })
 ] }));
-u.displayName = "RadioOption";
+y.displayName = "RadioOption";
 export {
-  f as RadioGroup,
-  m as RadioGroupItem,
-  u as RadioOption
+  u as RadioGroup,
+  l as RadioGroupItem,
+  y as RadioOption
 };