@gearbox-protocol/permissionless-ui 1.22.0-next.13 → 1.22.0-next.15

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

@@ -1,50 +1,108 @@
-import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import { TokenIcon as d } from "../token-icon/token-icon.js";
-import "react";
-import { cn as u } from "../../utils/cn.js";
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { cva as T } from "class-variance-authority";
+import N from "react";
+import { RoundedImage as y } from "../rounded-image/rounded-image.js";
+import { ShortString as x } from "../short-string/short-string.js";
+import { TokenIcon as s } from "../token-icon/token-icon.js";
+import { TooltipProvider as I, Tooltip as S, TooltipTrigger as b, TooltipContent as _ } from "../tooltip/tooltip.js";
+import { cn as O } from "../../utils/cn.js";
 import "sonner";
 import "@gearbox-protocol/sdk";
-function p(e) {
-  if (e)
-    return typeof e == "string" ? e : e.symbol;
+import { getNetworkIcon as R } from "../../utils/network-icons.js";
+import { Z_INDEX as j } from "../../utils/z-index.js";
+const z = T("", {
+  variants: {
+    marginSize: {
+      sm: "gap-1",
+      md: "gap-2",
+      lg: "gap-3"
+    }
+  },
+  defaultVariants: {
+    marginSize: "md"
+  }
+});
+function C(r) {
+  if (r)
+    return typeof r == "string" ? r : r.icon ? { icon: r.icon } : r.symbol;
 }
-function g(e) {
-  if (e)
-    return typeof e == "string" ? e : e.title;
+function D(r) {
+  if (r)
+    return typeof r == "string" ? r : r.title;
 }
-function I({
-  token: e,
-  title: m,
-  className: o,
-  comment: r,
-  showIcon: l = !0,
-  showSymbol: c = !1,
-  size: a = 24,
-  chainId: x,
-  network: h,
-  maxLength: v,
-  ...f
-}) {
-  const i = p(e), n = m || g(e);
-  return /* @__PURE__ */ t("div", { className: u("flex items-center gap-3", o), ...f, children: [
-    l && i && /* @__PURE__ */ s(
-      d,
+const P = N.forwardRef(
+  ({
+    className: r,
+    marginSize: d = "lg",
+    token: n,
+    title: l,
+    size: a = 24,
+    showSymbol: f = !1,
+    showIcon: p = !0,
+    maxLength: g,
+    chainId: V,
+    comment: m,
+    network: t,
+    ...u
+  }, h) => {
+    const o = C(n), v = l || D(n), c = () => t ? /* @__PURE__ */ i("div", { className: "relative", children: [
+      /* @__PURE__ */ e(
+        s,
+        {
+          symbol: o,
+          size: a,
+          className: "shrink-0 self-center"
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: "absolute -top-[10px] -right-[7px]", children: /* @__PURE__ */ e(
+        y,
+        {
+          src: R(t),
+          alt: t,
+          size: 14,
+          rounded: !0
+        }
+      ) })
+    ] }) : /* @__PURE__ */ e(
+      s,
       {
-        symbol: i,
+        symbol: o,
         size: a,
         className: "shrink-0 self-center"
       }
-    ),
-    c && n && /* @__PURE__ */ t("div", { className: "flex items-center gap-1 self-center", children: [
-      /* @__PURE__ */ s("div", { className: "text-xs sm:text-sm md:text-base font-medium truncate whitespace-pre-wrap leading-tight", children: n }),
-      r && /* @__PURE__ */ t("div", { className: "text-md text-muted-foreground leading-tight", children: [
-        "(",
-        r,
-        ")"
-      ] })
-    ] })
-  ] });
-}
+    );
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        ref: h,
+        className: O(
+          "flex items-center",
+          z({ marginSize: d }),
+          r
+        ),
+        ...u,
+        children: [
+          p && o && (t !== void 0 ? /* @__PURE__ */ e(I, { delayDuration: 200, children: /* @__PURE__ */ i(S, { children: [
+            /* @__PURE__ */ e(b, { asChild: !0, children: c() }),
+            /* @__PURE__ */ e(_, { className: j.TOOLTIP, children: /* @__PURE__ */ i("p", { children: [
+              "Network: ",
+              t
+            ] }) })
+          ] }) }) : c()),
+          (l || f) && /* @__PURE__ */ i("div", { className: "flex items-center gap-1 self-center", children: [
+            /* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(x, { maxLength: g, children: v }) }),
+            m && /* @__PURE__ */ i("div", { className: "text-md text-muted-foreground leading-tight", children: [
+              "(",
+              m,
+              ")"
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+P.displayName = "TokenSymbol";
 export {
-  I as TokenSymbol
+  P as TokenSymbol
 };