@gearbox-protocol/ui-kit 4.0.0-next.6 → 4.0.0-next.61

package/dist/esm/components/token-icon/token-icon.js

@@ -1,104 +1,98 @@
-import { jsx as r, jsxs as R, Fragment as _ } from "react/jsx-runtime";
-import N from "react";
-import "@gearbox-protocol/sdk";
-import { cn as T } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import { getStatic as g } from "../../utils/static.js";
-import { getTokenIcon as w } from "../../utils/token-icon-source.js";
-import "luxon";
+import { jsx as r, jsxs as x, Fragment as R } from "react/jsx-runtime";
+import b from "react";
+import { getTokenIcon as I } from "./token-icon-source.js";
+import { cn as y } from "../../utils/cn.js";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-import { RoundedImage as u } from "../rounded-image/rounded-image.js";
-const s = g("/tokens/default.svg");
-function U(t) {
+import { getStatic as k } from "../../utils/internal/static.js";
+import { RoundedImage as m } from "../rounded-image/rounded-image.js";
+const u = k("/tokens/default.svg");
+function w(t) {
   return t.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
 }
-function j(t) {
+function _(t) {
   return typeof t == "object" && t !== null && "icon" in t && !("kind" in t);
 }
-function I(t) {
+function N(t) {
   return typeof t == "object" && t !== null && "kind" in t && t.kind === "composite";
 }
-function k(t) {
+function T(t) {
   if (t.type === "url") return t.url;
-  const o = U(t.symbol);
-  return o ? g(`/tokens/${o}.svg`) : s;
+  const e = w(t.symbol);
+  return e ? k(`/tokens/${e}.svg`) : u;
 }
-function C(t) {
-  if (!t || I(t))
-    return s;
-  if (j(t))
+function j(t) {
+  if (!t || N(t))
+    return u;
+  if (_(t))
     return t.icon;
-  const o = U(t);
-  return o ? g(`/tokens/${o}.svg`) : s;
-}
-function F(t) {
-  return t ? I(t) ? t.layers.map(k) : [C(t)] : [s];
+  const e = w(t);
+  return e ? k(`/tokens/${e}.svg`) : u;
 }
-const L = 0.65;
-function v(t, o) {
-  return t !== void 0 ? w(t) : typeof o == "string" ? w(o) : o;
+const F = 0.65;
+function L(t, e) {
+  return t !== void 0 ? I(t) : typeof e == "string" ? I(e) : e;
 }
-const D = N.forwardRef(function({
-  token: o,
-  symbol: e,
-  size: n = 48,
+const v = b.forwardRef(function({
+  token: e,
+  symbol: n,
+  size: o = 48,
   fit: c = "contain",
-  rounded: a = !1,
-  className: l,
-  ...f
-}, m) {
-  const i = v(o, e);
-  if (I(i))
+  rounded: s = !1,
+  className: a,
+  ...l
+}, f) {
+  const i = L(e, n);
+  if (N(i))
     return /* @__PURE__ */ r(
-      S,
+      C,
       {
-        ref: m,
+        ref: f,
         composite: i,
-        size: n,
+        size: o,
         fit: c,
-        rounded: a,
-        className: l
+        rounded: s,
+        className: a
       }
     );
-  const p = C(i);
+  const p = j(i);
   return /* @__PURE__ */ r(
-    u,
+    m,
     {
-      ref: m,
-      className: l,
+      ref: f,
+      className: a,
       src: p,
       alt: "",
-      rounded: a,
+      rounded: s,
       fit: c,
-      width: n,
-      height: n,
-      size: n,
-      ...f
+      width: o,
+      height: o,
+      size: o,
+      ...l
     }
   );
-}), S = N.forwardRef(function({ composite: o, size: e, fit: n, rounded: c, className: a }, l) {
-  const { preset: f, layers: m, scaleFactor: i = L } = o, [p, b] = m, h = k(p), x = k(b), d = Math.round(e * i);
-  let y;
-  switch (f) {
+}), C = b.forwardRef(function({ composite: e, size: n, fit: o, rounded: c, className: s }, a) {
+  const { preset: l, layers: f, scaleFactor: i = F } = e, [p, S] = f, g = T(p), U = T(S), d = Math.round(n * i);
+  let h;
+  switch (l) {
     case "centered_foreground":
-      y = /* @__PURE__ */ R(_, { children: [
+      h = /* @__PURE__ */ x(R, { children: [
         /* @__PURE__ */ r(
-          u,
+          m,
           {
             className: "absolute inset-0",
             style: { zIndex: 0 },
-            src: h,
+            src: g,
             alt: "background",
             rounded: c,
-            fit: n,
-            size: e
+            fit: o,
+            size: n
           }
         ),
         /* @__PURE__ */ r(
           "div",
           {
-            className: T(
+            className: y(
               "absolute left-1/2 top-1/2 z-[1] -translate-x-1/2 -translate-y-1/2",
               "flex items-center justify-center"
             ),
@@ -107,12 +101,12 @@ const D = N.forwardRef(function({
               height: d
             },
             children: /* @__PURE__ */ r(
-              u,
+              m,
               {
-                src: x,
+                src: U,
                 alt: "foreground",
                 rounded: c,
-                fit: n,
+                fit: o,
                 size: d
               }
             )
@@ -121,37 +115,29 @@ const D = N.forwardRef(function({
       ] });
       break;
     default:
-      return console.error("Unknown TokenIcon composite preset", f), /* @__PURE__ */ r(
-        u,
+      return console.error("Unknown TokenIcon composite preset", l), /* @__PURE__ */ r(
+        m,
         {
-          src: h,
+          src: g,
           alt: "error",
           rounded: c,
-          fit: n,
-          size: e
+          fit: o,
+          size: n
         }
       );
   }
   return /* @__PURE__ */ r(
     "div",
     {
-      ref: l,
-      className: T("relative inline-block shrink-0", a),
-      style: { width: e, height: e },
-      children: y
+      ref: a,
+      className: y("relative inline-block shrink-0", s),
+      style: { width: n, height: n },
+      children: h
     }
   );
 });
-S.displayName = "TokenIconComposite";
-D.displayName = "TokenIcon";
-function K(t) {
-  for (const o of t)
-    for (const e of F(o)) {
-      const n = new window.Image();
-      n.src = e;
-    }
-}
+C.displayName = "TokenIconComposite";
+v.displayName = "TokenIcon";
 export {
-  D as TokenIcon,
-  K as preloadTokenIcons
+  v as TokenIcon
 };

package/dist/esm/components/token-symbol/token-symbol.js

@@ -6,13 +6,10 @@ import { ShortString as S } from "../short-string/short-string.js";
 import { TokenIcon as s } from "../token-icon/token-icon.js";
 import { SimpleTooltip as T } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
-import "@gearbox-protocol/sdk";
 import { cn as y } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import { getNetworkIcon as I } from "../../utils/network-icons.js";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
+import { getNetworkIcon as I } from "../../utils/internal/network-icons.js";
 const b = v("", {
   variants: {
     marginSize: {
@@ -34,22 +31,22 @@ const _ = N.forwardRef(
     className: r,
     marginSize: c = "lg",
     token: m,
-    title: o,
-    size: a = 24,
+    title: a,
+    size: l = 24,
     showSymbol: d = !1,
-    showIcon: p = !0,
-    maxLength: f,
+    showIcon: f = !0,
+    maxLength: p,
     chainId: j,
-    comment: l,
+    comment: o,
     network: i,
     ...g
   }, u) => {
-    const h = o || R(m), n = () => i ? /* @__PURE__ */ t("div", { className: "relative", children: [
+    const h = a || R(m), n = () => i ? /* @__PURE__ */ t("div", { className: "relative", children: [
       /* @__PURE__ */ e(
         s,
         {
           token: m,
-          size: a,
+          size: l,
           className: "shrink-0 self-center"
         }
       ),
@@ -62,7 +59,7 @@ const _ = N.forwardRef(
           rounded: !0
         }
       ) })
-    ] }) : /* @__PURE__ */ e(s, { token: m, size: a, className: "shrink-0 self-center" });
+    ] }) : /* @__PURE__ */ e(s, { token: m, size: l, className: "shrink-0 self-center" });
     return /* @__PURE__ */ t(
       "div",
       {
@@ -74,15 +71,15 @@ const _ = N.forwardRef(
         ),
         ...g,
         children: [
-          p && m && (i !== void 0 ? /* @__PURE__ */ t(T, { title: n(), children: [
+          f && m && (i !== void 0 ? /* @__PURE__ */ t(T, { title: n(), children: [
             "Network: ",
             i
           ] }) : n()),
-          (o || d) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
-            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(S, { maxLength: f, children: h }) }),
-            l && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
+          (a || d) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
+            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(S, { maxLength: p, children: h }) }),
+            o && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
               "(",
-              l,
+              o,
               ")"
             ] })
           ] })

package/dist/esm/{utils → components/token-template}/bn-to-pretty-view.js

@@ -1,6 +1,6 @@
-import { formatBN as a } from "@gearbox-protocol/sdk";
-import { bnToInputView as m } from "./bn-to-input-view.js";
-import { parseSmallNumber as f } from "./parse-input-to-bn.js";
+import { formatBN as a } from "@gearbox-protocol/sdk/onchain";
+import { bnToInputView as m } from "../../utils/internal/bn-to-input-view.js";
+import { parseSmallNumber as f } from "../../utils/internal/parse-small-number.js";
 function l(r, t, e, u = !1) {
   if (r === void 0)
     return { originalValue: "-" };

package/dist/esm/components/token-template/index.js

@@ -1,4 +1,6 @@
-import { TokenTemplate as m } from "./token-template.js";
+import { TokenTemplate as t } from "./token-template.js";
+import { tokenTemplateString as m } from "../../utils/templates.js";
 export {
-  m as TokenTemplate
+  t as TokenTemplate,
+  m as tokenTemplateString
 };

package/dist/esm/components/token-template/token-template.js

@@ -1,35 +1,26 @@
-import { jsxs as T, jsx as o } from "react/jsx-runtime";
-import "react";
-import { bnToPrettyView as d } from "../../utils/bn-to-pretty-view.js";
-import "clsx";
-import "tailwind-merge";
-import "sonner";
-import "@gearbox-protocol/sdk";
-import "@gearbox-protocol/sdk/common-utils";
-import { negativeTokenTemplate as q, tokenTemplateString as z } from "../../utils/templates.js";
-import "luxon";
-import "../../utils/z-index.js";
-import { FormattedNumberString as g } from "../formatted-number/formatted-number.js";
-import { ShortString as x } from "../short-string/short-string.js";
-function N({
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { bnToPrettyView as x } from "./bn-to-pretty-view.js";
+import { tokenTemplateString as w } from "../../utils/templates.js";
+import { FormattedNumberString as S } from "../formatted-number/formatted-number.js";
+import { ShortString as T } from "../short-string/short-string.js";
+function j({
   value: r,
-  token: m,
-  precision: e,
-  formatter: i = d,
-  noFormattedAmountValue: n = "-",
+  token: e,
+  precision: n,
+  formatter: m = x,
+  noFormattedAmountValue: i = "-",
   showSymbol: p = !0,
-  maxLength: a = 1 / 0,
-  ...l
+  maxLength: s = 1 / 0,
+  ...f
 }) {
-  const { decimals: s = 18, title: f, symbol: c } = m || {}, t = i(r, s, e), u = t === n;
-  return /* @__PURE__ */ T("span", { children: [
-    /* @__PURE__ */ o(g, { value: t, ...l }),
+  const { decimals: l = 18, title: a, symbol: c } = e || {}, t = m(r, l, n), u = t === i;
+  return /* @__PURE__ */ d("span", { children: [
+    /* @__PURE__ */ o(S, { value: t, ...f }),
     " ",
-    !u && p && /* @__PURE__ */ o(x, { maxLength: a, children: f ?? c })
+    !u && p && /* @__PURE__ */ o(T, { maxLength: s, children: a ?? c })
   ] });
 }
 export {
-  N as TokenTemplate,
-  q as negativeTokenTemplate,
-  z as tokenTemplateString
+  j as TokenTemplate,
+  w as tokenTemplateString
 };

package/dist/esm/components/tooltip/simple-tooltip.js

@@ -1,112 +1,109 @@
-import { jsxs as L, jsx as r } from "react/jsx-runtime";
+import { jsxs as I, jsx as r } from "react/jsx-runtime";
 import * as a from "@radix-ui/react-tooltip";
 import * as e from "react";
-import "@gearbox-protocol/sdk";
 import { cn as k } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import { Z_INDEX as F } from "../../utils/z-index.js";
-const I = e.createContext({ lockParent: () => {
+const A = e.createContext({ lockParent: () => {
 }, unlockParent: () => {
-} }), A = e.createContext(!1), H = 7, J = 12;
+} }), H = e.createContext(!1), K = 7, J = 12;
 function Q({
-  children: K,
+  children: S,
   title: d,
-  placement: S = "top",
-  trigger: n = "hover",
-  triangle: W = !0,
+  placement: W = "top",
+  trigger: t = "hover",
+  triangle: _ = !0,
   delayShow: h = 5,
-  maxWidth: C = "200px",
-  minWidth: _,
+  maxWidth: v = "200px",
+  minWidth: C,
   type: j = "tooltip",
-  open: P,
-  onOpenChange: v,
+  open: x,
+  onOpenChange: P,
   className: z,
-  triggerClassName: x,
+  triggerClassName: w,
   useTitleAsTrigger: B = !1
 }) {
-  const [M, g] = e.useState(!1), [y, w] = e.useState(!1), f = e.useRef(null), i = e.useRef(null), p = P !== void 0, c = p ? P : M, o = e.useCallback(
-    (t) => {
-      p ? v?.(t) : g(t);
+  const [M, $] = e.useState(!1), [y, R] = e.useState(!1), f = e.useRef(null), i = e.useRef(null), p = x !== void 0, c = p ? x : M, o = e.useCallback(
+    (n) => {
+      p ? P?.(n) : $(n);
     },
-    [p, v]
-  ), s = e.useContext(I), G = e.useMemo(
+    [p, P]
+  ), s = e.useContext(A), g = e.useMemo(
     () => ({
-      lockParent: () => w(!0),
-      unlockParent: () => w(!1)
+      lockParent: () => R(!0),
+      unlockParent: () => R(!1)
     }),
     []
-  ), R = e.useRef(!1);
-  R.current = y;
+  ), T = e.useRef(!1);
+  T.current = y;
   const l = e.useRef(
     null
   ), u = e.useCallback(() => {
     l.current !== null && (clearTimeout(l.current), l.current = null);
-  }, []), V = e.useCallback(
-    (t) => {
-      if (n !== "click") {
-        if (t) {
+  }, []), G = e.useCallback(
+    (n) => {
+      if (t !== "click") {
+        if (n) {
           u(), o(!0), s.lockParent();
           return;
         }
         l.current = setTimeout(() => {
-          l.current = null, !R.current && (o(!1), s.unlockParent());
+          l.current = null, !T.current && (o(!1), s.unlockParent());
         }, 100);
       }
     },
-    [n, o, s, u]
+    [t, o, s, u]
   );
   e.useEffect(() => u, [u]);
-  const X = e.useCallback(
-    (t) => {
-      n === "click" && (t.stopPropagation(), o(!c));
+  const V = e.useCallback(
+    (n) => {
+      t === "click" && (n.stopPropagation(), o(!c));
     },
-    [n, c, o]
-  ), Z = e.useCallback(
-    (t) => {
-      n === "click" && (t.key === "Enter" || t.key === " ") && (t.preventDefault(), t.stopPropagation(), o(!c));
+    [t, c, o]
+  ), X = e.useCallback(
+    (n) => {
+      t === "click" && (n.key === "Enter" || n.key === " ") && (n.preventDefault(), n.stopPropagation(), o(!c));
     },
-    [n, c, o]
+    [t, c, o]
   );
   e.useEffect(() => {
-    if (n !== "click" || !c) return;
-    const t = (m) => {
-      const N = m.target;
-      f.current && !f.current.contains(N) && i.current && !i.current.contains(N) && o(!1);
-    }, O = (m) => {
+    if (t !== "click" || !c) return;
+    const n = (m) => {
+      const L = m.target;
+      f.current && !f.current.contains(L) && i.current && !i.current.contains(L) && o(!1);
+    }, N = (m) => {
       m.key === "Escape" && o(!1);
     };
-    return document.addEventListener("pointerdown", t), document.addEventListener("keydown", O), () => {
-      document.removeEventListener("pointerdown", t), document.removeEventListener("keydown", O);
+    return document.addEventListener("pointerdown", n), document.addEventListener("keydown", N), () => {
+      document.removeEventListener("pointerdown", n), document.removeEventListener("keydown", N);
     };
-  }, [n, c, o]);
-  const T = e.useRef(s.unlockParent);
-  T.current = s.unlockParent, e.useEffect(() => () => T.current(), []);
-  const b = j === "modal-tooltip", D = W && !b, $ = k(
+  }, [t, c, o]);
+  const b = e.useRef(s.unlockParent);
+  b.current = s.unlockParent, e.useEffect(() => () => b.current(), []);
+  const D = j === "modal-tooltip", E = _ && !D, Z = k(
     F.TOOLTIP,
     "pointer-events-auto",
     "animate-in fade-in-0 zoom-in-75 duration-150",
     "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-75 data-[state=closed]:duration-150",
-    b ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased break-words min-w-0",
+    D ? "bg-transparent p-0" : "rounded bg-black/85 px-2 py-1 text-[0.85rem] leading-[1.5] font-normal text-center text-white/85 antialiased break-words min-w-0",
     z
-  ), q = e.useContext(A), E = /* @__PURE__ */ L(
+  ), q = e.useContext(H), O = /* @__PURE__ */ I(
     a.Root,
     {
       open: c || y,
-      onOpenChange: V,
-      delayDuration: n === "click" ? 0 : h,
+      onOpenChange: G,
+      delayDuration: t === "click" ? 0 : h,
       children: [
-        /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: B ? d : n === "click" ? /* @__PURE__ */ r(
+        /* @__PURE__ */ r(a.Trigger, { asChild: !0, children: B ? d : t === "click" ? /* @__PURE__ */ r(
           "button",
           {
             ref: i,
             type: "button",
-            onClick: X,
-            onKeyDown: Z,
+            onClick: V,
+            onKeyDown: X,
             className: k(
               "inline-flex appearance-none border-0 bg-transparent p-0 text-inherit font-inherit cursor-pointer",
-              x
+              w
             ),
             children: d
           }
@@ -114,29 +111,31 @@ function Q({
           "span",
           {
             ref: i,
-            className: k("inline-flex", x),
+            className: k("inline-flex", w),
             children: d
           }
         ) }),
-        /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ L(
+        /* @__PURE__ */ r(a.Portal, { children: /* @__PURE__ */ I(
           a.Content,
           {
             ref: f,
-            side: S,
-            sideOffset: D ? H - 4 : 8,
+            side: W,
+            sideOffset: E ? K - 4 : 8,
             collisionPadding: 8,
-            className: $,
+            className: Z,
             style: {
-              maxWidth: C ? `min(${C}, calc(100vw - 16px))` : "calc(100vw - 16px)",
-              minWidth: _
+              maxWidth: v ? `min(${v}, calc(100vw - 16px))` : "calc(100vw - 16px)",
+              // min-width wins over max-width in CSS; cap it the same way or a
+              // 400px breakdown overflows a phone.
+              minWidth: C ? `min(${C}, calc(100vw - 16px))` : void 0
             },
             children: [
-              /* @__PURE__ */ r(I.Provider, { value: G, children: K }),
-              D && /* @__PURE__ */ r(
+              /* @__PURE__ */ r(A.Provider, { value: g, children: S }),
+              E && /* @__PURE__ */ r(
                 a.Arrow,
                 {
                   width: J,
-                  height: H,
+                  height: K,
                   className: "fill-black/85"
                 }
               )
@@ -146,12 +145,12 @@ function Q({
       ]
     }
   );
-  return q ? E : /* @__PURE__ */ r(A.Provider, { value: !0, children: /* @__PURE__ */ r(
+  return q ? O : /* @__PURE__ */ r(H.Provider, { value: !0, children: /* @__PURE__ */ r(
     a.Provider,
     {
-      delayDuration: n === "click" ? 0 : h,
+      delayDuration: t === "click" ? 0 : h,
       skipDelayDuration: 300,
-      children: E
+      children: O
     }
   ) });
 }

package/dist/esm/components/tooltip/tooltip.js

@@ -1,13 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-tooltip";
 import * as a from "react";
-import "@gearbox-protocol/sdk";
 import { cn as m } from "../../utils/cn.js";
-import "sonner";
-import "@gearbox-protocol/sdk/common-utils";
-import "luxon";
+import "@gearbox-protocol/sdk/onchain";
 import { Z_INDEX as s } from "../../utils/z-index.js";
-const v = o.Provider, x = o.Root, h = o.Trigger, p = a.forwardRef(({ className: e, sideOffset: r = 4, ...i }, d) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
+const T = o.Provider, g = o.Root, b = o.Trigger, n = a.forwardRef(({ className: e, sideOffset: r = 4, ...i }, d) => /* @__PURE__ */ t(o.Portal, { children: /* @__PURE__ */ t(
   o.Content,
   {
     ref: d,
@@ -20,10 +17,10 @@ const v = o.Provider, x = o.Root, h = o.Trigger, p = a.forwardRef(({ className:
     ...i
   }
 ) }));
-p.displayName = o.Content.displayName;
+n.displayName = o.Content.displayName;
 export {
-  x as Tooltip,
-  p as TooltipContent,
-  v as TooltipProvider,
-  h as TooltipTrigger
+  g as Tooltip,
+  n as TooltipContent,
+  T as TooltipProvider,
+  b as TooltipTrigger
 };

package/dist/esm/components/trading-view/index.js

@@ -1,6 +1,4 @@
-import { GraphDropdown as p } from "./graph-dropdown.js";
-import { TradingView as a } from "./trading-view.js";
+import { TradingView as i } from "./trading-view.js";
 export {
-  p as GraphDropdown,
-  a as TradingView
+  i as TradingView
 };