@gearbox-protocol/ui-kit 4.0.1 → 4.1.0

package/dist/esm/components/navbar-logo/navbar-logo.js

@@ -9,19 +9,16 @@ function p({
   ...n
 }) {
   const r = o ? { width: o, height: o } : {};
-  return (
-    // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
-    /* @__PURE__ */ a(
-      "img",
-      {
-        alt: "Logo",
-        className: c("object-contain", t),
-        style: { ...r, ...i },
-        loading: "lazy",
-        decoding: "async",
-        ...n
-      }
-    )
+  return /* @__PURE__ */ a(
+    "img",
+    {
+      alt: "Logo",
+      className: c("object-contain", t),
+      style: { ...r, ...i },
+      loading: "lazy",
+      decoding: "async",
+      ...n
+    }
   );
 }
 export {

package/dist/esm/components/rounded-image/rounded-image.js

@@ -1,15 +1,15 @@
-import { jsx as E } from "react/jsx-runtime";
-import * as k from "react";
-import { useState as i, useRef as l, useEffect as w } from "react";
-import { cn as N } from "../../utils/cn.js";
+import { jsx as I } from "react/jsx-runtime";
+import * as w from "react";
+import { useState as i, useRef as f, useEffect as N } from "react";
+import { cn as k } from "../../utils/cn.js";
 import "@gearbox-protocol/sdk/onchain";
 import "../../utils/z-index.js";
-import { getStatic as T } from "../../utils/internal/static.js";
-const u = T("/tokens/default.svg"), m = /* @__PURE__ */ new Map();
-function f(t) {
+import { getStatic as x } from "../../utils/internal/static.js";
+const u = x("/tokens/default.svg"), m = /* @__PURE__ */ new Map();
+function l(t) {
   return m.get(t) ? u : t;
 }
-const U = k.forwardRef(
+const C = w.forwardRef(
   ({
     className: t,
     size: c,
@@ -20,49 +20,46 @@ const U = k.forwardRef(
     fit: R = "cover",
     ...y
   }, r) => {
-    const [v, s] = i(void 0), [b, n] = i(!1), a = l(!1), d = l(null), I = (e) => {
-      d.current = e, typeof r == "function" ? r(e) : r && (r.current = e), e?.complete && e.naturalWidth > 0 && n(!0);
+    const [v, s] = i(void 0), [b, a] = i(!1), n = f(!1), d = f(null), L = (e) => {
+      d.current = e, typeof r == "function" ? r(e) : r && (r.current = e), e?.complete && e.naturalWidth > 0 && a(!0);
     };
-    w(() => {
-      f(o), s(void 0), a.current = !1;
+    N(() => {
+      l(o), s(void 0), n.current = !1;
       const e = d.current;
-      n(!!e?.complete && e.naturalWidth > 0);
+      a(!!e?.complete && e.naturalWidth > 0);
     }, [o]);
-    const L = (e) => {
-      a.current || (a.current = !0, m.set(e.currentTarget.src, !0), s(h));
-    }, j = () => {
-      n(!0);
+    const j = (e) => {
+      n.current || (n.current = !0, m.set(e.currentTarget.src, !0), s(h));
+    }, E = () => {
+      a(!0);
     };
-    return (
-      // biome-ignore lint/performance/noImgElement: Universal component that works outside Next.js
-      /* @__PURE__ */ E(
-        "img",
-        {
-          ref: I,
-          src: v || f(o),
-          alt: "",
-          className: N(
-            R === "cover" ? "object-cover" : "object-contain object-center",
-            g && "rounded-full",
-            !b && "bg-gray-90 dark:bg-gray-110 rounded-full",
-            t
-          ),
-          style: {
-            width: c,
-            height: c,
-            ...p
-          },
-          loading: "lazy",
-          decoding: "async",
-          onError: L,
-          onLoad: j,
-          ...y
-        }
-      )
+    return /* @__PURE__ */ I(
+      "img",
+      {
+        ref: L,
+        src: v || l(o),
+        alt: "",
+        className: k(
+          R === "cover" ? "object-cover" : "object-contain object-center",
+          g && "rounded-full",
+          !b && "bg-gray-90 dark:bg-gray-110 rounded-full",
+          t
+        ),
+        style: {
+          width: c,
+          height: c,
+          ...p
+        },
+        loading: "lazy",
+        decoding: "async",
+        onError: j,
+        onLoad: E,
+        ...y
+      }
     );
   }
 );
-U.displayName = "RoundedImage";
+C.displayName = "RoundedImage";
 export {
-  U as RoundedImage
+  C as RoundedImage
 };

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

@@ -1,48 +1,55 @@
-import { getStatic as s } from "../../utils/internal/static.js";
-const f = s("/tokens/templates/diesel.svg"), l = s("/logo/logo_symbol.png"), n = /V\d+$/, o = "_OLD", u = [
-  { prefix: "farmd", requiresVersion: !1 },
-  { prefix: "wd", requiresVersion: !1 },
-  { prefix: "sd", requiresVersion: !0 },
-  { prefix: "d", requiresVersion: !0 }
-];
-function c(e) {
-  for (const { prefix: i, requiresVersion: t } of u) {
-    if (!e.startsWith(i)) continue;
-    let r = e.slice(i.length);
-    if (r.endsWith(o) && (r = r.slice(0, -o.length)), n.test(r))
-      r = r.replace(n, "");
-    else if (t)
-      continue;
-    if (r) return r;
-  }
+import { getStatic as d } from "../../utils/internal/static.js";
+const r = d("/tokens/default.svg"), u = d("/logo/logo_symbol.png");
+function e(t) {
+  return t.replaceAll("/", "").replaceAll(" ", "").toLowerCase();
 }
-function d(e) {
-  return {
-    kind: "composite",
-    preset: "centered_foreground",
-    scaleFactor: 0.74,
-    layers: [
-      {
-        type: "url",
-        url: f
-      },
-      {
-        type: "symbol",
-        symbol: e
-      }
-    ]
-  };
-}
-function g(e) {
-  if (e === void 0) return;
-  const i = typeof e == "string" ? e : e.symbol;
-  if (!i) return;
-  if (i === "GEAR")
-    return { icon: l };
-  const t = c(i);
-  return t ? d(t) : i;
+const w = {
+  // Curve factory pools, on the base pool's icon.
+  "crvusdfrax-f": "crvusdfrax",
+  "crvusdusdc-f": "crvusdusdc",
+  "crvusdusdt-f": "crvusdusdt",
+  "cvxcrvusdfrax-f": "cvxcrvusdfrax",
+  "cvxcrvusdusdc-f": "cvxcrvusdusdc",
+  "cvxcrvusdusdt-f": "cvxcrvusdusdt",
+  "stkcvxcrvusdfrax-f": "stkcvxcrvusdfrax",
+  "stkcvxcrvusdusdc-f": "stkcvxcrvusdusdc",
+  "stkcvxcrvusdusdt-f": "stkcvxcrvusdusdt",
+  // Mellow withdrawal phantoms. The SDK reports all of them as one `wdwstETH`;
+  // only the backend tells the vaults apart, and the icon never did.
+  "wdwsteth[cp0xlrt]": "wdwsteth",
+  "wdwsteth[pzeth]": "wdwsteth",
+  "wdwsteth[re7lrt]": "wdwsteth",
+  "wdwsteth[rsteth]": "wdwsteth",
+  "wdwsteth[steaklrt]": "wdwsteth",
+  // Withdrawal phantoms of a single asset.
+  wdiusd: "iusd",
+  wdrseth: "rseth",
+  // Curator variants of a pool share token.
+  "dwbtc-v3-0": "dwbtcv3",
+  "dwethv3-cp0x": "dwethv3",
+  // Wrappers and staked versions, on the asset they hold.
+  fweth: "weth",
+  fwsteth: "wsteth",
+  kpkfrxusd: "frxusd",
+  kpkweth: "weth",
+  kpkwsteth: "wsteth",
+  stkrlusdusdc: "rlusdusdc",
+  syusd: "yusd",
+  xtz: "wxtz",
+  // Curated vaults, on their underlying.
+  "cyb-cbbtc": "cbbtc",
+  "cyb-tbtc": "tbtc",
+  "cyb-wbtc": "wbtc",
+  re7tbtc: "tbtc",
+  re7usdc: "usdc"
+};
+function f(t) {
+  const s = typeof t == "string" ? t : t?.symbol;
+  if (!s) return r;
+  if (s === "GEAR") return u;
+  const c = e(s);
+  return c ? d(`/tokens/${w[c] ?? c}.svg`) : r;
 }
 export {
-  g as getTokenIcon,
-  c as parseShareTokenUnderlying
+  f as getTokenIconUrl
 };

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

@@ -1,143 +1,35 @@
-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 { 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 _(t) {
-  return typeof t == "object" && t !== null && "icon" in t && !("kind" in t);
-}
-function N(t) {
-  return typeof t == "object" && t !== null && "kind" in t && t.kind === "composite";
-}
-function T(t) {
-  if (t.type === "url") return t.url;
-  const e = w(t.symbol);
-  return e ? k(`/tokens/${e}.svg`) : u;
-}
-function j(t) {
-  if (!t || N(t))
-    return u;
-  if (_(t))
-    return t.icon;
-  const e = w(t);
-  return e ? k(`/tokens/${e}.svg`) : u;
-}
-const F = 0.65;
-function L(t, e) {
-  return t !== void 0 ? I(t) : typeof e == "string" ? I(e) : e;
-}
-const v = b.forwardRef(function({
-  token: e,
-  symbol: n,
-  size: o = 48,
-  fit: c = "contain",
-  rounded: s = !1,
-  className: a,
-  ...l
-}, f) {
-  const i = L(e, n);
-  if (N(i))
-    return /* @__PURE__ */ r(
-      C,
+import { jsx as f } from "react/jsx-runtime";
+import i from "react";
+import { getTokenIconUrl as d } from "./token-icon-source.js";
+import { RoundedImage as p } from "../rounded-image/rounded-image.js";
+const l = i.forwardRef(
+  function({
+    token: n,
+    symbol: r,
+    size: o = 48,
+    fit: t = "contain",
+    rounded: e = !1,
+    className: m,
+    ...a
+  }, c) {
+    return /* @__PURE__ */ f(
+      p,
       {
-        ref: f,
-        composite: i,
+        ref: c,
+        className: m,
+        src: d(n ?? r),
+        alt: "",
+        rounded: e,
+        fit: t,
+        width: o,
+        height: o,
         size: o,
-        fit: c,
-        rounded: s,
-        className: a
+        ...a
       }
     );
-  const p = j(i);
-  return /* @__PURE__ */ r(
-    m,
-    {
-      ref: f,
-      className: a,
-      src: p,
-      alt: "",
-      rounded: s,
-      fit: c,
-      width: o,
-      height: o,
-      size: o,
-      ...l
-    }
-  );
-}), 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":
-      h = /* @__PURE__ */ x(R, { children: [
-        /* @__PURE__ */ r(
-          m,
-          {
-            className: "absolute inset-0",
-            style: { zIndex: 0 },
-            src: g,
-            alt: "background",
-            rounded: c,
-            fit: o,
-            size: n
-          }
-        ),
-        /* @__PURE__ */ r(
-          "div",
-          {
-            className: y(
-              "absolute left-1/2 top-1/2 z-[1] -translate-x-1/2 -translate-y-1/2",
-              "flex items-center justify-center"
-            ),
-            style: {
-              width: d,
-              height: d
-            },
-            children: /* @__PURE__ */ r(
-              m,
-              {
-                src: U,
-                alt: "foreground",
-                rounded: c,
-                fit: o,
-                size: d
-              }
-            )
-          }
-        )
-      ] });
-      break;
-    default:
-      return console.error("Unknown TokenIcon composite preset", l), /* @__PURE__ */ r(
-        m,
-        {
-          src: g,
-          alt: "error",
-          rounded: c,
-          fit: o,
-          size: n
-        }
-      );
   }
-  return /* @__PURE__ */ r(
-    "div",
-    {
-      ref: a,
-      className: y("relative inline-block shrink-0", s),
-      style: { width: n, height: n },
-      children: h
-    }
-  );
-});
-C.displayName = "TokenIconComposite";
-v.displayName = "TokenIcon";
+);
+l.displayName = "TokenIcon";
 export {
-  v as TokenIcon
+  l as TokenIcon
 };