@gearbox-protocol/ui-kit 4.0.0-next.84 → 4.0.0-next.85

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 e=require("../../utils/internal/static.cjs"),i=e.getStatic("/logo/logo_symbol.png");function n(t){if(t===void 0)return;const o=typeof t=="string"?t:t.symbol;if(o)return o==="GEAR"?{icon:i}:o}exports.getTokenIcon=n;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../../utils/internal/static.cjs"),u=r.getStatic("/tokens/default.svg"),d=r.getStatic("/logo/logo_symbol.png");function e(s){return s.replaceAll("/","").replaceAll(" ","").toLowerCase()}const v={"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"};function o(s){const c=typeof s=="string"?s:s?.symbol;if(!c)return u;if(c==="GEAR")return d;const t=e(c);return t?r.getStatic(`/tokens/${v[t]??t}.svg`):u}exports.getTokenIconUrl=o;

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),k=require("react"),o=require("./token-icon-source.cjs"),c=require("../../utils/internal/static.cjs"),p=require("../rounded-image/rounded-image.cjs"),r=c.getStatic("/tokens/default.svg");function T(e){return e.replace("/","").replace(" ","").replace("-f","").replace("-","_").toLowerCase()}function m(e){return typeof e=="object"&&e!==null&&"icon"in e}function _(e){if(!e)return r;if(m(e))return e.icon;const n=T(e);return n?c.getStatic(`/tokens/${n}.svg`):r}function S(e,n){return e!==void 0?o.getTokenIcon(e):typeof n=="string"?o.getTokenIcon(n):n}const i=k.forwardRef(function({token:n,symbol:u,size:t=48,fit:a="contain",rounded:s=!1,className:f,...g},I){const d=_(S(n,u));return l.jsx(p.RoundedImage,{ref:I,className:f,src:d,alt:"",rounded:s,fit:a,width:t,height:t,size:t,...g})});i.displayName="TokenIcon";exports.TokenIcon=i;
+"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,11 +1,26 @@
-import { getStatic as t } from "../../utils/internal/static.js";
-const i = t("/logo/logo_symbol.png");
-function c(o) {
-  if (o === void 0) return;
-  const r = typeof o == "string" ? o : o.symbol;
-  if (r)
-    return r === "GEAR" ? { icon: i } : r;
+import { getStatic as u } from "../../utils/internal/static.js";
+const t = u("/tokens/default.svg"), v = u("/logo/logo_symbol.png");
+function d(s) {
+  return s.replaceAll("/", "").replaceAll(" ", "").toLowerCase();
+}
+const o = {
+  "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"
+};
+function e(s) {
+  const c = typeof s == "string" ? s : s?.symbol;
+  if (!c) return t;
+  if (c === "GEAR") return v;
+  const r = d(c);
+  return r ? u(`/tokens/${o[r] ?? r}.svg`) : t;
 }
 export {
-  c as getTokenIcon
+  e as getTokenIconUrl
 };

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

@@ -1,54 +1,35 @@
-import { jsx as g } from "react/jsx-runtime";
-import I from "react";
-import { getTokenIcon as t } from "./token-icon-source.js";
-import { getStatic as c } from "../../utils/internal/static.js";
-import { RoundedImage as d } from "../rounded-image/rounded-image.js";
-const o = c("/tokens/default.svg");
-function l(n) {
-  return n.replace("/", "").replace(" ", "").replace("-f", "").replace("-", "_").toLowerCase();
-}
-function k(n) {
-  return typeof n == "object" && n !== null && "icon" in n;
-}
-function T(n) {
-  if (!n) return o;
-  if (k(n))
-    return n.icon;
-  const e = l(n);
-  return e ? c(`/tokens/${e}.svg`) : o;
-}
-function _(n, e) {
-  return n !== void 0 ? t(n) : typeof e == "string" ? t(e) : e;
-}
-const h = I.forwardRef(
+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: e,
-    symbol: i,
-    size: r = 48,
-    fit: f = "contain",
-    rounded: u = !1,
-    className: a,
-    ...p
-  }, m) {
-    const s = T(_(e, i));
-    return /* @__PURE__ */ g(
-      d,
+    token: n,
+    symbol: r,
+    size: o = 48,
+    fit: t = "contain",
+    rounded: e = !1,
+    className: m,
+    ...a
+  }, c) {
+    return /* @__PURE__ */ f(
+      p,
       {
-        ref: m,
-        className: a,
-        src: s,
+        ref: c,
+        className: m,
+        src: d(n ?? r),
         alt: "",
-        rounded: u,
-        fit: f,
-        width: r,
-        height: r,
-        size: r,
-        ...p
+        rounded: e,
+        fit: t,
+        width: o,
+        height: o,
+        size: o,
+        ...a
       }
     );
   }
 );
-h.displayName = "TokenIcon";
+l.displayName = "TokenIcon";
 export {
-  h as TokenIcon
+  l as TokenIcon
 };

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

@@ -1,7 +1,3 @@
-/** Same shape as `TokenIcon`'s `symbol` prop — kept here to avoid a cycle. */
-export type TokenIconSource = string | {
-    icon: string;
-};
 /**
  * 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
@@ -11,8 +7,8 @@ export interface TokenIconInput {
     symbol: string;
 }
 /**
- * Resolve a token (or bare symbol) into the value `TokenIcon` renders. Every
- * symbol maps to its own CDN asset — share tokens included, the CDN ships
- * `dusdcv3.svg`, `sdwethv3.svg`, `wdwsteth.svg` and friends.
+ * 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

@@ -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: bare symbol or direct icon URL (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.
@@ -24,17 +23,10 @@ import { RoundedImageProps } from '../rounded-image/rounded-image';
  * - for address identifiers (use Identicon component).
  * - for custom images or logos (use Image component).
  */
-type DirectIcon = {
-    icon: string;
-};
-export type SymbolOrIcon = string | DirectIcon;
 export interface TokenIconProps extends Omit<RoundedImageProps, "src" | "size"> {
-    /**
-     * Token (or bare symbol). When set, takes precedence over `symbol` and is
-     * resolved via `getTokenIcon` (the GEAR logo override).
-     */
+    /** 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;
 }

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.0-next.84",
+  "version": "4.0.0-next.85",
   "description": "Internal UI components",
   "repository": {
     "type": "git",