@gearbox-protocol/ui-kit 3.13.0-next.1 → 3.13.0

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

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

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

@@ -1,19 +1,20 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { cva as N } from "class-variance-authority";
-import x from "react";
-import { RoundedImage as y } from "../rounded-image/rounded-image.js";
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { cva as y } from "class-variance-authority";
+import N from "react";
+import { RoundedImage as x } from "../rounded-image/rounded-image.js";
 import { ShortString as S } from "../short-string/short-string.js";
-import { TokenIcon as c } from "../token-icon/token-icon.js";
-import { SimpleTooltip as b } from "../tooltip/simple-tooltip.js";
+import { TokenIcon as l } from "../token-icon/token-icon.js";
+import { SimpleTooltip as I } from "../tooltip/simple-tooltip.js";
 import "../tooltip/tooltip.js";
+import { isIconComposite as b } from "../../types/common.js";
 import "@gearbox-protocol/sdk";
-import { cn as I } from "../../utils/cn.js";
+import { cn as T } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk/common-utils";
-import { getNetworkIcon as T } from "../../utils/network-icons.js";
+import { getNetworkIcon as R } from "../../utils/network-icons.js";
 import "luxon";
 import "../../utils/z-index.js";
-const R = N("", {
+const _ = y("", {
   variants: {
     marginSize: {
       sm: "gap-1",
@@ -25,52 +26,60 @@ const R = N("", {
     marginSize: "md"
   }
 });
-function _(r) {
-  if (r)
-    return typeof r == "string" ? r : r.icon ? { icon: r.icon } : r.symbol;
-}
 function j(r) {
+  if (r) {
+    if (typeof r == "string") return r;
+    if (r.icon !== void 0) {
+      if (typeof r.icon == "string")
+        return { icon: r.icon };
+      if (b(r.icon))
+        return r.icon;
+    }
+    return r.symbol;
+  }
+}
+function z(r) {
   if (r)
     return typeof r == "string" ? r : r.title;
 }
-const z = x.forwardRef(
+const V = N.forwardRef(
   ({
     className: r,
     marginSize: d = "lg",
-    token: m,
-    title: n,
-    size: a = 24,
+    token: n,
+    title: m,
+    size: s = 24,
     showSymbol: f = !1,
     showIcon: p = !0,
-    maxLength: g,
-    chainId: V,
-    comment: l,
-    network: i,
-    ...u
+    maxLength: u,
+    chainId: C,
+    comment: c,
+    network: e,
+    ...g
   }, h) => {
-    const o = _(m), v = n || j(m), s = () => i ? /* @__PURE__ */ t("div", { className: "relative", children: [
-      /* @__PURE__ */ e(
-        c,
+    const o = j(n), v = m || z(n), a = () => e ? /* @__PURE__ */ t("div", { className: "relative", children: [
+      /* @__PURE__ */ i(
+        l,
         {
           symbol: o,
-          size: a,
+          size: s,
           className: "shrink-0 self-center"
         }
       ),
-      /* @__PURE__ */ e("div", { className: "absolute -top-[10px] -right-[7px]", children: /* @__PURE__ */ e(
-        y,
+      /* @__PURE__ */ i("div", { className: "absolute -top-[10px] -right-[7px]", children: /* @__PURE__ */ i(
+        x,
         {
-          src: T(i),
-          alt: i,
+          src: R(e),
+          alt: e,
           size: 14,
           rounded: !0
         }
       ) })
-    ] }) : /* @__PURE__ */ e(
-      c,
+    ] }) : /* @__PURE__ */ i(
+      l,
       {
         symbol: o,
-        size: a,
+        size: s,
         className: "shrink-0 self-center"
       }
     );
@@ -78,22 +87,22 @@ const z = x.forwardRef(
       "div",
       {
         ref: h,
-        className: I(
+        className: T(
           "flex items-center",
-          R({ marginSize: d }),
+          _({ marginSize: d }),
           r
         ),
-        ...u,
+        ...g,
         children: [
-          p && o && (i !== void 0 ? /* @__PURE__ */ t(b, { title: s(), children: [
+          p && o && (e !== void 0 ? /* @__PURE__ */ t(I, { title: a(), children: [
             "Network: ",
-            i
-          ] }) : s()),
-          (n || f) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
-            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(S, { maxLength: g, children: v }) }),
-            l && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
+            e
+          ] }) : a()),
+          (m || f) && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
+            /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(S, { maxLength: u, children: v }) }),
+            c && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
               "(",
-              l,
+              c,
               ")"
             ] })
           ] })
@@ -102,8 +111,8 @@ const z = x.forwardRef(
     );
   }
 );
-z.displayName = "TokenSymbol";
+V.displayName = "TokenSymbol";
 export {
-  z as TokenSymbol,
-  _ as getSymbolOrIcon
+  V as TokenSymbol,
+  j as getSymbolOrIcon
 };

package/dist/esm/types/common.js

@@ -1 +1,6 @@
-
+function n(o) {
+  return typeof o == "object" && o !== null && "kind" in o && o.kind === "composite";
+}
+export {
+  n as isIconComposite
+};