@gearbox-protocol/ui-kit 4.0.2 → 4.1.0

package/dist/cjs/components/rounded-image/rounded-image.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),c=require("react"),I=require("../../utils/cn.cjs");require("@gearbox-protocol/sdk/onchain");require("../../utils/z-index.cjs");const L=require("../../utils/internal/static.cjs");function S(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const o=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,o.get?o:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const T=S(c),g=L.getStatic("/tokens/default.svg"),m=new Map;function f(e){return m.get(e)?g:e}const b=T.forwardRef(({className:e,size:r,rounded:n=!0,style:o,src:s,defaultIcon:p=g,fit:y="cover",...R},a)=>{const[j,l]=c.useState(void 0),[h,u]=c.useState(!1),i=c.useRef(!1),d=c.useRef(null),v=t=>{d.current=t,typeof a=="function"?a(t):a&&(a.current=t),t?.complete&&t.naturalWidth>0&&u(!0)};c.useEffect(()=>{f(s),l(void 0),i.current=!1;const t=d.current;u(!!t?.complete&&t.naturalWidth>0)},[s]);const O=t=>{i.current||(i.current=!0,m.set(t.currentTarget.src,!0),l(p))},_=()=>{u(!0)};return q.jsx("img",{ref:v,src:j||f(s),alt:"",className:I.cn(y==="cover"?"object-cover":"object-contain object-center",n&&"rounded-full",!h&&"bg-gray-90 dark:bg-gray-110 rounded-full",e),style:{width:r,height:r,...o},loading:"lazy",decoding:"async",onError:O,onLoad:_,...R})});b.displayName="RoundedImage";exports.RoundedImage=b;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react/jsx-runtime"),c=require("react"),I=require("../../utils/cn.cjs");require("@gearbox-protocol/sdk/onchain");require("../../utils/z-index.cjs");const L=require("../../utils/internal/static.cjs");function S(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(r,n,a.get?a:{enumerable:!0,get:()=>e[n]})}}return r.default=e,Object.freeze(r)}const w=S(c),g=L.getStatic("/tokens/default.svg"),m=new Map;function f(e){return m.get(e)?g:e}const b=w.forwardRef(({className:e,size:r,rounded:n=!0,style:a,src:s,defaultIcon:p=g,fit:y="cover",...R},o)=>{const[j,l]=c.useState(void 0),[h,u]=c.useState(!1),i=c.useRef(!1),d=c.useRef(null),v=t=>{d.current=t,typeof o=="function"?o(t):o&&(o.current=t),t?.complete&&t.naturalWidth>0&&u(!0)};c.useEffect(()=>{f(s),l(void 0),i.current=!1;const t=d.current;u(!!t?.complete&&t.naturalWidth>0)},[s]);const O=t=>{i.current||(i.current=!0,m.set(t.currentTarget.src,!0),l(p))},_=()=>{u(!0)};return q.jsx("img",{ref:v,src:j||f(s),alt:"",className:I.cn(y==="cover"?"object-cover":"object-contain object-center",n&&"rounded-full",!h&&"bg-gray-90 dark:bg-gray-110 rounded-full",e),style:{width:r,height:r,...a},loading:"lazy",decoding:"async",onError:O,onLoad:_,...R})});b.displayName="RoundedImage";exports.RoundedImage=b;

package/dist/cjs/components/token-icon/token-icon-source.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("../../utils/internal/static.cjs"),c=o.getStatic("/tokens/templates/diesel.svg"),u=o.getStatic("/logo/logo_symbol.png"),n=/V\d+$/,s="_OLD",f=[{prefix:"farmd",requiresVersion:!1},{prefix:"wd",requiresVersion:!1},{prefix:"sd",requiresVersion:!0},{prefix:"d",requiresVersion:!0}];function l(e){for(const{prefix:t,requiresVersion:i}of f){if(!e.startsWith(t))continue;let r=e.slice(t.length);if(r.endsWith(s)&&(r=r.slice(0,-s.length)),n.test(r))r=r.replace(n,"");else if(i)continue;if(r)return r}}function d(e){return{kind:"composite",preset:"centered_foreground",scaleFactor:.74,layers:[{type:"url",url:c},{type:"symbol",symbol:e}]}}function a(e){if(e===void 0)return;const t=typeof e=="string"?e:e.symbol;if(!t)return;if(t==="GEAR")return{icon:u};const i=l(t);return i?d(i):t}exports.getTokenIcon=a;exports.parseShareTokenUnderlying=l;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("../../utils/internal/static.cjs"),e=d.getStatic("/tokens/default.svg"),r=d.getStatic("/logo/logo_symbol.png");function u(t){return t.replaceAll("/","").replaceAll(" ","").toLowerCase()}const w={"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","wdwsteth[cp0xlrt]":"wdwsteth","wdwsteth[pzeth]":"wdwsteth","wdwsteth[re7lrt]":"wdwsteth","wdwsteth[rsteth]":"wdwsteth","wdwsteth[steaklrt]":"wdwsteth",wdiusd:"iusd",wdrseth:"rseth","dwbtc-v3-0":"dwbtcv3","dwethv3-cp0x":"dwethv3",fweth:"weth",fwsteth:"wsteth",kpkfrxusd:"frxusd",kpkweth:"weth",kpkwsteth:"wsteth",stkrlusdusdc:"rlusdusdc",syusd:"yusd",xtz:"wxtz","cyb-cbbtc":"cbbtc","cyb-tbtc":"tbtc","cyb-wbtc":"wbtc",re7tbtc:"tbtc",re7usdc:"usdc"};function v(t){const s=typeof t=="string"?t:t?.symbol;if(!s)return e;if(s==="GEAR")return r;const c=u(s);return c?d.getStatic(`/tokens/${w[c]??c}.svg`):e}exports.getTokenIconUrl=v;

package/dist/cjs/components/token-icon/token-icon.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),j=require("react"),h=require("./token-icon-source.cjs"),y=require("../../utils/cn.cjs");require("@gearbox-protocol/sdk/onchain");require("../../utils/z-index.cjs");const p=require("../../utils/internal/static.cjs"),d=require("../rounded-image/rounded-image.cjs"),f=p.getStatic("/tokens/default.svg");function x(e){return e.replace("/","").replace(" ","").replace("-f","").replace("-","_").toLowerCase()}function w(e){return typeof e=="object"&&e!==null&&"icon"in e&&!("kind"in e)}function S(e){return typeof e=="object"&&e!==null&&"kind"in e&&e.kind==="composite"}function T(e){if(e.type==="url")return e.url;const n=x(e.symbol);return n?p.getStatic(`/tokens/${n}.svg`):f}function N(e){if(!e||S(e))return f;if(w(e))return e.icon;const n=x(e);return n?p.getStatic(`/tokens/${n}.svg`):f}const C=.65;function U(e,n){return e!==void 0?h.getTokenIcon(e):typeof n=="string"?h.getTokenIcon(n):n}const _=j.forwardRef(function({token:n,symbol:r,size:o=48,fit:c="contain",rounded:i=!1,className:a,...u},l){const s=U(n,r);if(S(s))return t.jsx(b,{ref:l,composite:s,size:o,fit:c,rounded:i,className:a});const m=N(s);return t.jsx(d.RoundedImage,{ref:l,className:a,src:m,alt:"",rounded:i,fit:c,width:o,height:o,size:o,...u})}),b=j.forwardRef(function({composite:n,size:r,fit:o,rounded:c,className:i},a){const{preset:u,layers:l,scaleFactor:s=C}=n,[m,R]=l,k=T(m),q=T(R),g=Math.round(r*s);let I;switch(u){case"centered_foreground":I=t.jsxs(t.Fragment,{children:[t.jsx(d.RoundedImage,{className:"absolute inset-0",style:{zIndex:0},src:k,alt:"background",rounded:c,fit:o,size:r}),t.jsx("div",{className:y.cn("absolute left-1/2 top-1/2 z-[1] -translate-x-1/2 -translate-y-1/2","flex items-center justify-center"),style:{width:g,height:g},children:t.jsx(d.RoundedImage,{src:q,alt:"foreground",rounded:c,fit:o,size:g})})]});break;default:return console.error("Unknown TokenIcon composite preset",u),t.jsx(d.RoundedImage,{src:k,alt:"error",rounded:c,fit:o,size:r})}return t.jsx("div",{ref:a,className:y.cn("relative inline-block shrink-0",i),style:{width:r,height:r},children:I})});b.displayName="TokenIconComposite";_.displayName="TokenIcon";exports.TokenIcon=_;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),i=require("react"),I=require("./token-icon-source.cjs"),m=require("../rounded-image/rounded-image.cjs"),n=i.forwardRef(function({token:o,symbol:t,size:e=48,fit:c="contain",rounded:r=!1,className:u,...a},s){return d.jsx(m.RoundedImage,{ref:s,className:u,src:I.getTokenIconUrl(o??t),alt:"",rounded:r,fit:c,width:e,height:e,size:e,...a})});n.displayName="TokenIcon";exports.TokenIcon=n;

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,26 +20,26 @@ 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 /* @__PURE__ */ E(
+    return /* @__PURE__ */ I(
       "img",
       {
-        ref: I,
-        src: v || f(o),
+        ref: L,
+        src: v || l(o),
         alt: "",
-        className: N(
+        className: k(
           R === "cover" ? "object-cover" : "object-contain object-center",
           g && "rounded-full",
           !b && "bg-gray-90 dark:bg-gray-110 rounded-full",
@@ -52,14 +52,14 @@ const U = k.forwardRef(
         },
         loading: "lazy",
         decoding: "async",
-        onError: L,
-        onLoad: j,
+        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
 };

package/dist/types/components/token-icon/token-icon-source.d.ts

@@ -1,32 +1,3 @@
-/** One layer of a composite icon: a token symbol to resolve, or a ready URL. */
-export type TokenIconLayerSource = {
-    type: "symbol";
-    symbol: string;
-} | {
-    type: "url";
-    url: string;
-};
-/**
- * Named layout preset for a composite icon. The pixel layout is `TokenIcon`'s,
- * never an API payload's — which is why these types live here and not in the
- * SDK read model.
- *
- * `centered_foreground`: background full size, foreground centered at ~65%
- * (a token on a plate).
- */
-export type TokenIconCompositePreset = "centered_foreground";
-/** Client-composed token icon: layers stacked by preset. */
-export type IconComposite = {
-    kind: "composite";
-    preset: TokenIconCompositePreset;
-    scaleFactor?: number;
-    /** Exactly two layers (bottom then top). */
-    layers: readonly [TokenIconLayerSource, TokenIconLayerSource];
-};
-/** Same shape as `TokenIcon`'s `symbol` prop — kept here to avoid a cycle. */
-export type TokenIconSource = string | {
-    icon: string;
-} | IconComposite;
 /**
  * Everything the resolver needs from a token. Structural on purpose so the SDK
  * read-model `Token`, the `TokenData` class, and bare metadata all fit without
@@ -36,17 +7,8 @@ export interface TokenIconInput {
     symbol: string;
 }
 /**
- * Underlying symbol of a pool share token, or `undefined` when the symbol is
- * an ordinary token. Falling through is safe: the caller then uses the token's
- * own CDN asset.
- */
-export declare function parseShareTokenUnderlying(symbol: string): string | undefined;
-/**
- * Resolve a token (or bare symbol) into the value `TokenIcon` renders.
- *
- * Pure front-end concern: share token composites and the GEAR logo special
- * case are derived from the symbol alone — callers must not pre-bake `icon` /
- * `iconUrl`, and should hand the token to `TokenIcon` rather than calling this
- * directly.
+ * CDN asset for a token (or bare symbol). Every symbol maps to its own file —
+ * share tokens included, the CDN ships `dusdcv3.svg`, `sdwethv3.svg`,
+ * `wdwsteth.svg` and friends.
  */
-export declare function getTokenIcon(token: TokenIconInput | string | undefined): TokenIconSource | undefined;
+export declare function getTokenIconUrl(token: TokenIconInput | string | undefined): string;

package/dist/types/components/token-icon/token-icon.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { IconComposite, TokenIconInput } from './token-icon-source';
+import { TokenIconInput } from './token-icon-source';
 import { RoundedImageProps } from '../rounded-image/rounded-image';
 /**
  * TokenIcon — component for displaying token/asset icons.
@@ -10,9 +10,8 @@ import { RoundedImageProps } from '../rounded-image/rounded-image';
  *
  * Props:
  * - `token` — token as it comes from the SDK/backend, or a bare symbol (preferred).
- *   The component resolves the icon itself via `getTokenIcon`, so callers never
- *   pass a pre-baked URL.
- * - `symbol` — already-resolved source: direct icon URL or `IconComposite` (legacy).
+ *   The component resolves the CDN url itself, so callers never pass one.
+ * - `symbol` — bare symbol, same thing for call sites that have no token object.
  * - `size` — icon size in pixels (defaults to 48).
  *
  * Note: Fetches icon from Gearbox static CDN based on symbol.
@@ -20,26 +19,16 @@ import { RoundedImageProps } from '../rounded-image/rounded-image';
  * Symbol is normalized (removes "/", spaces, "-f", converts "-" to "_", lowercased).
  * Icon displays in its original shape (not clipped).
  *
- * **Ref behavior:** In the default single-image mode, `ref` is attached to the underlying `<img>`.
- * In composite mode, `ref` is attached to the outer wrapper `div` (see `TokenIconProps` / `forwardRef` generic).
- *
  * Do NOT use TokenIcon:
  * - for address identifiers (use Identicon component).
  * - for custom images or logos (use Image component).
  */
-type DirectIcon = {
-    icon: string;
-};
-export type SymbolOrIcon = string | DirectIcon | IconComposite;
 export interface TokenIconProps extends Omit<RoundedImageProps, "src" | "size"> {
-    /**
-     * Token (or bare symbol). When set, takes precedence over `symbol` and is
-     * resolved via `getTokenIcon` (diesel composites, GEAR logo, etc.).
-     */
+    /** Token (or bare symbol). Takes precedence over `symbol` when both are set. */
     token?: TokenIconInput | string;
-    symbol?: SymbolOrIcon | undefined;
+    symbol?: string | undefined;
     size?: number;
     className?: string;
 }
-declare const TokenIcon: React.ForwardRefExoticComponent<TokenIconProps & React.RefAttributes<HTMLDivElement | HTMLImageElement>>;
+declare const TokenIcon: React.ForwardRefExoticComponent<TokenIconProps & React.RefAttributes<HTMLImageElement>>;
 export { TokenIcon };

package/dist/types/components/token-symbol/token-symbol.d.ts

@@ -9,7 +9,7 @@ declare const tokenSymbolVariants: (props?: ({
 export interface TokenSymbolProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">, VariantProps<typeof tokenSymbolVariants> {
     /**
      * SDK `Token`, `TokenMetaInfo`, or bare symbol string. Passed straight to
-     * `TokenIcon`, which resolves the icon via `getTokenIcon`.
+     * `TokenIcon`, which resolves the CDN url from the symbol.
      */
     token?: Token | TokenMetaInfo | string;
     /**

package/dist/types/types/common.d.ts

@@ -2,7 +2,7 @@ import { Address } from 'viem';
 /**
  * Token metadata as it arrives from the SDK or backend. Deliberately carries no
  * icon field: icons are a front-end concern resolved from the symbol by
- * `getTokenIcon` inside `TokenIcon`.
+ * `getTokenIconUrl` inside `TokenIcon`.
  */
 export type TokenMetaInfo = {
     symbol: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.2",
+  "version": "4.1.0",
   "description": "Internal UI components",
   "repository": {
     "type": "git",