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

package/dist/esm/components/client-adapters/styled-rounded-image/styled-rounded-image.js

@@ -33,10 +33,11 @@ import "../../token-symbol/token-symbol.js";
 import "../../simple-accordion/simple-accordion.js";
 import "../../tip-card/tip-card.js";
 import "../../typography/typography.js";
-import "../../vertical-indicator/vertical-indicator.js";
 import "../../points-icon/points-icon.js";
 import "@fortawesome/free-solid-svg-icons";
 import "../../icons/fa-icon.js";
+import "../../vertical-indicator/vertical-indicator.js";
+import "../../base/page-title/page-title.js";
 import "../../detailed-page-title/detailed-page-title-copy-button.js";
 import "../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
 import "../../base/details-view/detail-aside/detail-aside-scope.js";
@@ -60,6 +61,19 @@ import "../../with-title/with-title.js";
 import "../../status-elements/status-elements.js";
 import "react-router-dom";
 import "../styled-dialog-container/styled-dialog-container.js";
+import "../../modal/modal.js";
+import "@radix-ui/react-dialog";
+import "../../dialog/dialog-container.js";
+import "../../dialog/dialog-content.js";
+import "../../dialog/dialog-description.js";
+import "../../dialog/dialog-footer.js";
+import "../../dialog/dialog-header.js";
+import "../../dialog/dialog-title.js";
+import "../../dialog/dialog-modal-container.js";
+import "../../dialog/dialog-overlay.js";
+import "viem";
+import "../../input/input.js";
+import "../../label/label.js";
 import "../../simple-dropdown/simple-dropdown.js";
 import "../../simple-dropdown/simple-dropdown-menu-item.js";
 import "../../help-tip/help-tip.js";
@@ -73,21 +87,8 @@ import "../../checkbox-item/checkbox-item.js";
 import "../styled-button/styled-button.js";
 import "../../composites/tx-preview/confirm/amounts/TransactionConfirmAmountField.js";
 import "../../composites/tx-preview/confirm/dialog/constants.js";
-import "../../modal/modal.js";
-import "../../dialog/dialog-container.js";
 import "../../spinner-loader/spinner-loader.js";
 import "../../detailed-apy/detailed-apy.js";
-import "@radix-ui/react-dialog";
-import "../../dialog/dialog-content.js";
-import "../../dialog/dialog-description.js";
-import "../../dialog/dialog-footer.js";
-import "../../dialog/dialog-header.js";
-import "../../dialog/dialog-title.js";
-import "../../dialog/dialog-modal-container.js";
-import "../../dialog/dialog-overlay.js";
-import "viem";
-import "../../input/input.js";
-import "../../label/label.js";
 import "../../dropdown-menu/dropdown-menu.js";
 import "../../dropdown-menu/dropdown-menu-checkbox-item.js";
 import "../../dropdown-menu/dropdown-menu-content.js";

package/dist/esm/components/composites/pool-assets-table/pool-assets-table-row.js

@@ -1,32 +1,34 @@
 import { jsx as e, jsxs as t, Fragment as N } from "react/jsx-runtime";
 import "react";
-import "@gearbox-protocol/sdk/common-utils";
-import { useIsMobile as y, useIsDesktop as L } from "../../../hooks/use-media-query.js";
 import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import { percentageTemplate as S } from "../../../utils/format-money.js";
+import "@gearbox-protocol/sdk/common-utils";
 import "luxon";
 import "../../../utils/z-index.js";
+import "../../points-icon/points-icon.js";
+import { bps as y } from "../../base/values/scalars.js";
+import "../../badge/badge.js";
+import { FormattedMessageTyped as o } from "../../typed-intl/index.js";
+import { useIsMobile as L, useIsDesktop as S } from "../../../hooks/use-media-query.js";
 import { ShortString as c } from "../../short-string/short-string.js";
 import { GridTableRow as A, GridTableCell as s } from "../../table/grid-table.js";
 import { TableLineSm as k, TableCellSm as p } from "../../table/table-sm.js";
 import { TokenSymbol as v } from "../../token-symbol/token-symbol.js";
 import { TokenTemplate as d } from "../../token-template/token-template.js";
-import { FormattedMessageTyped as o } from "../../typed-intl/index.js";
 import { Typography as w } from "../../typography/typography.js";
-function O({
+function W({
   poolName: h,
   token: l,
   currentQuota: g,
   underlyingToken: r,
   last: u
 }) {
-  const { limit: f, totalQuoted: x, rate: T } = g, a = y(), b = L() ? 21 : a ? 40 : 16, i = () => /* @__PURE__ */ t("div", { className: "flex items-center flex-col-auto", children: [
+  const { limit: f, totalQuoted: b, rate: x } = g, i = L(), T = S() ? 21 : i ? 40 : 16, m = () => /* @__PURE__ */ t("div", { className: "flex items-center flex-col-auto", children: [
     /* @__PURE__ */ e(v, { token: l, size: 32 }),
     /* @__PURE__ */ t("span", { className: "ml-1.5 md:ml-2.5 text-left", children: [
-      /* @__PURE__ */ e(c, { maxLength: b, children: l?.title }),
+      /* @__PURE__ */ e(c, { maxLength: T, children: l?.title }),
       /* @__PURE__ */ e(
         w,
         {
@@ -38,7 +40,7 @@ function O({
         }
       )
     ] })
-  ] }), m = () => S(T), n = () => /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
+  ] }), a = () => y(Number(x)), n = () => /* @__PURE__ */ e("span", { children: /* @__PURE__ */ e(
     o,
     {
       messageId: "components.poolAssetsTable.usage",
@@ -46,7 +48,7 @@ function O({
         amount: /* @__PURE__ */ e(
           d,
           {
-            value: x,
+            value: b,
             token: r,
             decimalPartLength: 2,
             precision: 2,
@@ -77,19 +79,19 @@ function O({
       style: {
         minHeight: "75px"
       },
-      children: a ? /* @__PURE__ */ e(s, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
+      children: i ? /* @__PURE__ */ e(s, { span: "full", size: "sm", className: "px-3 py-0!", children: /* @__PURE__ */ t(
         k,
         {
           columns: 2,
           columnsXs: 2,
-          title: i(),
+          title: m(),
           className: "w-full",
           children: [
             /* @__PURE__ */ e(
               p,
               {
                 title: /* @__PURE__ */ e(o, { messageId: "components.poolAssetsTable.rate" }),
-                children: m()
+                children: a()
               }
             ),
             /* @__PURE__ */ e(
@@ -102,13 +104,13 @@ function O({
           ]
         }
       ) }) : /* @__PURE__ */ t(N, { children: [
-        /* @__PURE__ */ e(s, { textAlign: "left", className: "pl-4", size: "sm", children: i() }),
-        /* @__PURE__ */ e(s, { textAlign: "right", size: "sm", children: m() }),
+        /* @__PURE__ */ e(s, { textAlign: "left", className: "pl-4", size: "sm", children: m() }),
+        /* @__PURE__ */ e(s, { textAlign: "right", size: "sm", children: a() }),
         /* @__PURE__ */ e(s, { textAlign: "right", className: "pr-4", size: "sm", children: n() })
       ] })
     }
   );
 }
 export {
-  O as PoolAssetsTableRow
+  W as PoolAssetsTableRow
 };

package/dist/esm/components/composites/tx-preview/confirm/dialog/TransactionConfirmModalView.js

@@ -32,10 +32,11 @@ import "../../../../token-symbol/token-symbol.js";
 import "../../../../simple-accordion/simple-accordion.js";
 import "../../../../tip-card/tip-card.js";
 import "../../../../typography/typography.js";
-import "../../../../vertical-indicator/vertical-indicator.js";
 import "../../../../points-icon/points-icon.js";
 import "@fortawesome/free-solid-svg-icons";
 import "../../../../icons/fa-icon.js";
+import "../../../../vertical-indicator/vertical-indicator.js";
+import "../../../../base/page-title/page-title.js";
 import "../../../../detailed-page-title/detailed-page-title-copy-button.js";
 import "../../../../detailed-page-title/detailed-page-title-explorer-dropdown.js";
 import "../../../../base/details-view/detail-aside/detail-aside-scope.js";
@@ -59,6 +60,19 @@ import "../../../../with-title/with-title.js";
 import "../../../../status-elements/status-elements.js";
 import "react-router-dom";
 import { StyledDialogContainer as C } from "../../../../client-adapters/styled-dialog-container/styled-dialog-container.js";
+import { Modal as u } from "../../../../modal/modal.js";
+import "@radix-ui/react-dialog";
+import "../../../../dialog/dialog-container.js";
+import "../../../../dialog/dialog-content.js";
+import "../../../../dialog/dialog-description.js";
+import "../../../../dialog/dialog-footer.js";
+import "../../../../dialog/dialog-header.js";
+import "../../../../dialog/dialog-title.js";
+import "../../../../dialog/dialog-modal-container.js";
+import "../../../../dialog/dialog-overlay.js";
+import "viem";
+import "../../../../input/input.js";
+import "../../../../label/label.js";
 import "../../../../simple-dropdown/simple-dropdown.js";
 import "../../../../simple-dropdown/simple-dropdown-menu-item.js";
 import "../../../../help-tip/help-tip.js";
@@ -72,23 +86,10 @@ import "../../../../checkbox-item/checkbox-item.js";
 import "../../../../client-adapters/styled-button/styled-button.js";
 import "../../../../client-adapters/styled-rounded-image/styled-rounded-image.js";
 import "../amounts/TransactionConfirmAmountField.js";
-import { TransactionConfirmDialogTest as u, transactionConfirmModalContainerVariants as M, transactionConfirmDialogShellVariants as T } from "./constants.js";
-import { TransactionConfirmShell as g } from "./TransactionConfirmShell.js";
+import { TransactionConfirmDialogTest as M, transactionConfirmModalContainerVariants as T, transactionConfirmDialogShellVariants as g } from "./constants.js";
+import { TransactionConfirmShell as h } from "./TransactionConfirmShell.js";
 import "../../../../spinner-loader/spinner-loader.js";
 import "../../../../detailed-apy/detailed-apy.js";
-import { Modal as h } from "../../../../modal/modal.js";
-import "@radix-ui/react-dialog";
-import "../../../../dialog/dialog-container.js";
-import "../../../../dialog/dialog-content.js";
-import "../../../../dialog/dialog-description.js";
-import "../../../../dialog/dialog-footer.js";
-import "../../../../dialog/dialog-header.js";
-import "../../../../dialog/dialog-title.js";
-import "../../../../dialog/dialog-modal-container.js";
-import "../../../../dialog/dialog-overlay.js";
-import "viem";
-import "../../../../input/input.js";
-import "../../../../label/label.js";
 import "../../../../dropdown-menu/dropdown-menu.js";
 import "../../../../dropdown-menu/dropdown-menu-checkbox-item.js";
 import "../../../../dropdown-menu/dropdown-menu-content.js";
@@ -130,7 +131,7 @@ import "../../../../split-list/split-list.js";
 import "../../../../status-dot/status-dot.js";
 import "../../../../textarea/textarea.js";
 import "../../../../theme-provider.js";
-function Po({
+function Qo({
   open: i,
   onClose: t,
   title: m,
@@ -144,16 +145,16 @@ function Po({
 }) {
   if (!i) return null;
   const f = o !== "confirm" && o !== "awaiting_receipt" && n ? void 0 : p;
-  return /* @__PURE__ */ r(h, { show: i, onClickOutside: t, zIndexLayer: "MODAL", children: /* @__PURE__ */ r(
+  return /* @__PURE__ */ r(u, { show: i, onClickOutside: t, zIndexLayer: "MODAL", children: /* @__PURE__ */ r(
     C,
     {
       className: c(
-        T(),
-        a ?? M()
+        g(),
+        a ?? T()
       ),
       "data-testid": e,
       children: /* @__PURE__ */ r(
-        g,
+        h,
         {
           ...l,
           header: /* @__PURE__ */ r(
@@ -164,7 +165,7 @@ function Po({
               onClose: t
             }
           ),
-          "data-testid": d ?? u.root,
+          "data-testid": d ?? M.root,
           phase: o
         }
       )
@@ -172,5 +173,5 @@ function Po({
   ) });
 }
 export {
-  Po as TransactionConfirmModalView
+  Qo as TransactionConfirmModalView
 };

package/dist/esm/components/graph/graph-view.js

@@ -1,11 +1,12 @@
-import { jsxs as h, jsx as e } from "react/jsx-runtime";
-import { cva as B } from "class-variance-authority";
-import * as D from "react";
-import { useMemo as M, useRef as b, useState as E, useEffect as I } from "react";
-import { SpinnerLoader as O } from "../spinner-loader/spinner-loader.js";
-import { cn as R } from "../../utils/cn.js";
-import { Graph as P } from "./graph.js";
-const q = B(
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { IconInfo as L } from "@gearbox-protocol/static";
+import { cva as D } from "class-variance-authority";
+import * as B from "react";
+import { useMemo as E, useRef as w, useState as O, useEffect as P } from "react";
+import { SpinnerLoader as q } from "../spinner-loader/spinner-loader.js";
+import { cn as j } from "../../utils/cn.js";
+import { Graph as F } from "./graph.js";
+const J = D(
   "relative w-full overflow-hidden rounded-lg border-border border bg-card text-card-foreground",
   {
     variants: {
@@ -35,64 +36,46 @@ const q = B(
       padding: "default"
     }
   }
-), V = D.forwardRef(
+), k = B.forwardRef(
   ({
-    className: n,
+    className: r,
     variant: t,
     size: l,
     padding: m,
-    title: a,
-    description: s,
-    toolbar: r,
+    title: s,
+    description: a,
+    toolbar: n,
     loading: i = !1,
     emptyMessage: d,
     error: c,
-    children: f,
+    children: h,
     ...x
   }, g) => {
-    const u = a || s || r;
-    return /* @__PURE__ */ h(
+    const u = s || a || n;
+    return /* @__PURE__ */ o(
       "div",
       {
         ref: g,
-        className: R(
+        className: j(
           "flex flex-col",
-          q({ variant: t, size: l, padding: m, className: n })
+          J({ variant: t, size: l, padding: m, className: r })
         ),
         ...x,
         children: [
-          u && /* @__PURE__ */ h("div", { className: "mb-4 flex items-start justify-between gap-4 shrink-0", children: [
-            (a || s) && /* @__PURE__ */ h("div", { className: "flex-1", children: [
-              a && /* @__PURE__ */ e("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: a }),
-              s && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: s })
+          u && /* @__PURE__ */ o("div", { className: "mb-4 flex items-start justify-between gap-4 shrink-0", children: [
+            (s || a) && /* @__PURE__ */ o("div", { className: "flex-1", children: [
+              s && /* @__PURE__ */ e("h3", { className: "text-base sm:text-lg font-semibold leading-none tracking-tight", children: s }),
+              a && /* @__PURE__ */ e("p", { className: "mt-1 text-xs sm:text-sm text-muted-foreground", children: a })
             ] }),
-            r && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: r })
+            n && /* @__PURE__ */ e("div", { className: "shrink-0 w-full", children: n })
           ] }),
-          /* @__PURE__ */ h("div", { className: "relative flex-1 w-full min-h-0", children: [
-            i && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in", children: /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2", children: /* @__PURE__ */ e(O, { size: 32, width: 3 }) }) }),
-            c && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ h("div", { className: "flex flex-col items-center gap-2 text-destructive", children: [
-              /* @__PURE__ */ e(
-                "svg",
-                {
-                  className: "h-12 w-12",
-                  fill: "none",
-                  viewBox: "0 0 24 24",
-                  stroke: "currentColor",
-                  "aria-hidden": "true",
-                  children: /* @__PURE__ */ e(
-                    "path",
-                    {
-                      strokeLinecap: "round",
-                      strokeLinejoin: "round",
-                      strokeWidth: 2,
-                      d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    }
-                  )
-                }
-              ),
-              /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm font-medium", children: c })
+          /* @__PURE__ */ o("div", { className: "relative flex-1 w-full min-h-0", children: [
+            i && /* @__PURE__ */ e("div", { className: "absolute inset-0 z-10 flex items-center justify-center opacity-0 animate-delayed-fade-in", children: /* @__PURE__ */ e("div", { className: "flex flex-col items-center gap-2", children: /* @__PURE__ */ e(q, { size: 32, width: 3 }) }) }),
+            c && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+              /* @__PURE__ */ e(L, { size: 48, className: "size-12" }),
+              /* @__PURE__ */ e("span", { className: "text-xs sm:text-sm", children: c })
             ] }) }),
-            !c && !f && d && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ h("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
+            !c && !h && d && /* @__PURE__ */ e("div", { className: "flex h-full items-center justify-center", children: /* @__PURE__ */ o("div", { className: "flex flex-col items-center gap-2 text-muted-foreground", children: [
               /* @__PURE__ */ e(
                 "svg",
                 {
@@ -117,11 +100,11 @@ const q = B(
             /* @__PURE__ */ e(
               "div",
               {
-                className: R(
+                className: j(
                   "w-full h-full transition-[filter] duration-300 delay-300",
                   i && "blur-sm pointer-events-none"
                 ),
-                children: !c && f
+                children: !c && h
               }
             )
           ] })
@@ -130,35 +113,35 @@ const q = B(
     );
   }
 );
-V.displayName = "GraphView";
-function Y({
-  series: n,
+k.displayName = "GraphView";
+function _({
+  series: r,
   data: t,
   lineColor: l,
   color: m,
-  topColor: a,
-  bottomColor: s,
-  graphId: r,
+  topColor: s,
+  bottomColor: a,
+  graphId: n,
   onUnselectSeries: i,
   loading: d,
   title: c,
-  description: f,
+  description: h,
   toolbar: x,
   emptyMessage: g = "No data available",
   error: u,
-  containerClassName: W,
-  variant: z,
+  containerClassName: z,
+  variant: W,
   size: G,
-  padding: L,
+  padding: S,
   yMeasureUnit: N,
-  showCurrentValue: k,
-  ...S
+  showCurrentValue: y,
+  ...H
 }) {
-  const v = M(() => {
-    if (n && n.length > 0)
-      return n;
+  const v = E(() => {
+    if (r && r.length > 0)
+      return r;
     if (t && t.length > 0) {
-      const o = l ?? m;
+      const f = l ?? m;
       return [
         {
           data: t.map((p) => ({
@@ -167,59 +150,59 @@ function Y({
           })),
           label: "Value",
           yMeasureUnit: N,
-          ...o && { lineColor: o },
-          ...a && { topColor: a },
-          ...s && { bottomColor: s }
+          ...f && { lineColor: f },
+          ...s && { topColor: s },
+          ...a && { bottomColor: a }
         }
       ];
     }
     return [];
-  }, [n, t, N, l, m, a, s]), w = v.some((o) => o.data.length > 0), H = !d && !w, y = b(v);
-  w && (y.current = v);
-  const j = d && !w ? y.current : v, A = j.some((o) => o.data.length > 0);
+  }, [r, t, N, l, m, s, a]), b = v.some((f) => f.data.length > 0), A = !d && !b, R = w(v);
+  b && (R.current = v);
+  const V = d && !b ? R.current : v, I = V.some((f) => f.data.length > 0);
   return /* @__PURE__ */ e(
-    V,
+    k,
     {
-      className: W,
-      variant: z,
+      className: z,
+      variant: W,
       size: G,
-      padding: L,
+      padding: S,
       title: c,
-      description: f,
+      description: h,
       toolbar: x,
       loading: d,
       error: u,
-      emptyMessage: H ? g : void 0,
-      children: A && !u && /* @__PURE__ */ e(
-        P,
+      emptyMessage: A ? g : void 0,
+      children: I && !u && /* @__PURE__ */ e(
+        F,
         {
-          series: j,
+          series: V,
           yMeasureUnit: N,
           ...i ? { onUnselectSeries: i } : {},
-          ...k !== void 0 ? { showCurrentValue: k } : {},
-          ...S
+          ...y !== void 0 ? { showCurrentValue: y } : {},
+          ...H
         }
       )
     }
   );
 }
-function Z(n = 0) {
-  const t = b(null), l = b(null), [m, a] = E(null);
-  return I(() => {
-    const s = () => {
+function $(r = 0) {
+  const t = w(null), l = w(null), [m, s] = O(null);
+  return P(() => {
+    const a = () => {
       if (t.current && l.current) {
         const d = l.current.clientWidth, c = t.current.clientWidth;
-        a(d - c - n);
+        s(d - c - r);
       }
-    }, r = l.current, i = r ? new ResizeObserver(s) : null;
-    return r && i?.observe(r), () => {
-      r && i?.unobserve(r);
+    }, n = l.current, i = n ? new ResizeObserver(a) : null;
+    return n && i?.observe(n), () => {
+      n && i?.unobserve(n);
     };
-  }, [n]), { graphWidth: m, parentRef: l, asideRef: t };
+  }, [r]), { graphWidth: m, parentRef: l, asideRef: t };
 }
 export {
-  V as GraphView,
-  Y as GraphViewWithData,
-  q as graphViewVariants,
-  Z as useGraphAside
+  k as GraphView,
+  _ as GraphViewWithData,
+  J as graphViewVariants,
+  $ as useGraphAside
 };