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

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 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;

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 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;

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

@@ -1,48 +1,11 @@
-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;
-  }
-}
-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;
+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;
 }
 export {
-  g as getTokenIcon,
-  c as parseShareTokenUnderlying
+  c as getTokenIcon
 };

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

@@ -1,143 +1,54 @@
-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();
+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 _(t) {
-  return typeof t == "object" && t !== null && "icon" in t && !("kind" in t);
+function k(n) {
+  return typeof n == "object" && n !== null && "icon" in n;
 }
-function N(t) {
-  return typeof t == "object" && t !== null && "kind" in t && t.kind === "composite";
+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 T(t) {
-  if (t.type === "url") return t.url;
-  const e = w(t.symbol);
-  return e ? k(`/tokens/${e}.svg`) : u;
+function _(n, e) {
+  return n !== void 0 ? t(n) : typeof e == "string" ? t(e) : e;
 }
-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,
+const h = 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,
       {
-        ref: f,
-        composite: i,
-        size: o,
-        fit: c,
-        rounded: s,
-        className: a
+        ref: m,
+        className: a,
+        src: s,
+        alt: "",
+        rounded: u,
+        fit: f,
+        width: r,
+        height: r,
+        size: r,
+        ...p
       }
     );
-  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";
+);
+h.displayName = "TokenIcon";
 export {
-  v as TokenIcon
+  h as TokenIcon
 };

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

@@ -1,32 +1,7 @@
-/** 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 +11,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.
+ * 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.
  */
 export declare function getTokenIcon(token: TokenIconInput | string | undefined): TokenIconSource | undefined;

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.
@@ -12,7 +12,7 @@ import { RoundedImageProps } from '../rounded-image/rounded-image';
  * - `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).
+ * - `symbol` — already-resolved source: bare symbol or direct icon URL (legacy).
  * - `size` — icon size in pixels (defaults to 48).
  *
  * Note: Fetches icon from Gearbox static CDN based on symbol.
@@ -20,9 +20,6 @@ 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).
@@ -30,16 +27,16 @@ import { RoundedImageProps } from '../rounded-image/rounded-image';
 type DirectIcon = {
     icon: string;
 };
-export type SymbolOrIcon = string | DirectIcon | IconComposite;
+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` (diesel composites, GEAR logo, etc.).
+     * resolved via `getTokenIcon` (the GEAR logo override).
      */
     token?: TokenIconInput | string;
     symbol?: SymbolOrIcon | 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "4.0.0-next.83",
+  "version": "4.0.0-next.84",
   "description": "Internal UI components",
   "repository": {
     "type": "git",