@gearbox-protocol/ui-kit 3.8.2 → 3.9.1

package/dist/cjs/components/composites/pool-table/columns.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../assets-list-cell/assets-list-cell.cjs"),j=require("../../compound-apy/compound-apy.cjs"),c=require("../../description/description.cjs"),k=require("../../network-icon/network-icon.cjs"),C=require("../../percent-indicator/percent-indicator.cjs"),A=require("../../pool-apy-tooltip/pool-apy-tooltip.cjs"),I=require("../../pool-indicator-icon/pool-indicator-icon.cjs"),P=require("../../pool-points-indicator/pool-points-indicator.cjs"),u=require("../../skeleton/skeleton.cjs");require("react");require("@gearbox-protocol/sdk");require("clsx");require("tailwind-merge");require("sonner");const m=require("../../../utils/format-money.cjs"),p=require("../../../utils/templates.cjs");require("luxon");require("../../../utils/z-index.cjs");const _=require("../../token-symbol/token-symbol.cjs"),f=require("../../typed-intl/index.cjs"),q=require("../../../test-ids/pool-table.cjs");function s(e,o,l){const n=e?.header??t.jsx(f.FormattedMessageTyped,{messageId:e?.headerMessageId??o});let i;if(e?.headerTip!==null){const r=e?.headerTipMessageId??l;i=e?.headerTip??(r&&t.jsx(f.FormattedMessageTyped,{messageId:r}))}return{header:n,headerTip:i,mobileTitle:e?.mobileTitle??n}}function N({ctx:e}){const{pool:o,underlyingToken:l,points:n,apy:i,isMobile:r}=e,a=r?20:24,d=t.jsx(_.TokenSymbol,{token:l,size:a});return n&&n.length>0&&i?t.jsx(A.PoolAPYTooltip,{totalAPY:i.totalAPY,baseAPY:i.baseAPY,extraAPY:i.extraAPY,points:n,tokensList:e.tokensList,children:t.jsx("div",{children:t.jsx(I.PoolIndicatorIcon,{size:a,children:d})})}):o.hasPoints?t.jsx(P.PoolPointsIndicator,{size:a,children:d}):d}function v(e){const o=e.underlyingToken?.title??e.underlyingToken?.symbol??"",l=e.pool.version;return l&&l>=300&&l<310?`${o} v${Math.floor(l/100)}`:o}function D({ctx:e,renderDescription:o,getPoolName:l}){const{pool:n}=e,i=l?l(e):v(e);return t.jsxs("div",{className:"grid grid-cols-[auto_1fr] gap-x-3",children:[t.jsxs("div",{className:"flex items-center gap-3 shrink-0 leading-0",children:[n.network&&t.jsx(k.NetworkIcon,{network:n.network,isTest:!1,size:14,showTooltip:!0}),t.jsx(N,{ctx:e})]}),t.jsxs("div",{className:"flex md:flex-col min-w-0 overflow-hidden items-center md:items-start gap-2 md:gap-0",children:[t.jsx("span",{className:"truncate max-w-full",children:i}),o&&t.jsx(c.Description,{className:"min-w-0 text-xs",children:o(e)})]})]})}function S({ctx:e}){const{pool:o,underlyingToken:l,loading:n}=e;return t.jsxs("div",{className:"flex flex-col items-start md:items-end",children:[t.jsx(u.Skeleton,{loading:!!n,width:60,children:m.formatMoney(o.expectedLiquidityInUSD??0)}),t.jsx(c.Description,{children:p.tokenTemplate(o.expectedLiquidity,l)})]})}function M({ctx:e}){const{pool:o,underlyingToken:l,loading:n}=e;return t.jsxs("div",{className:"flex flex-col items-start md:items-end",children:[t.jsx(u.Skeleton,{loading:!!n,width:60,children:m.formatMoney(o.totalBorrowedInUSD??0)}),t.jsx(c.Description,{children:p.tokenTemplate(o.totalBorrowed,l)})]})}function Y({ctx:e}){const{pool:o,loading:l,underlyingToken:n}=e,i=n?.decimals??18,r=o.poolTokenSymbol!=null?{title:o.poolTokenSymbol,decimals:i}:n;return t.jsxs("div",{className:"flex flex-col items-start md:items-end","data-testid":q.poolTableTestIds.poolLineCellBalance,children:[t.jsx(u.Skeleton,{loading:!!l,width:60,children:m.formatMoney(o.userBalanceInUSD??0)}),o.userBalance!==void 0&&r&&t.jsx(c.Description,{children:p.tokenTemplate(o.userBalance,r)})]})}function z(e,o){const l=e.pool.collateralTokens,{tokensList:n,isMobile:i}=e;return!l?.length||!n?null:t.jsx(w.AssetsListCell,{maxAssets:o,tokensList:n,balances:l.map(r=>({token:r})),iconSize:i?20:24,options:{mode:"cascade"}})}function B(e){const{header:o,mobileTitle:l}=s(e,"components.poolTable.pool");return{id:"pool",header:o,width:e?.width??"186px",align:"left",className:"pl-4",cell:n=>t.jsx(D,{ctx:n,renderDescription:e?.renderDescription,getPoolName:e?.getPoolName}),mobileTitle:l}}function L(e){const{header:o,mobileTitle:l}=s(e,"components.poolTable.supply");return{id:"supply",header:o,width:e?.width??"1fr",align:"right",hideOnMedium:e?.hideOnMedium,sort:e?.sortField!==void 0?{field:e.sortField,defaultDirection:"desc"}:{field:"supply",defaultDirection:"desc"},cell:n=>t.jsx(S,{ctx:n}),mobileTitle:l}}function F(e){const{header:o,headerTip:l,mobileTitle:n}=s(e,"components.poolTable.supplyApy","components.poolTable.supplyApy.tip");return{id:"supplyApy",header:o,headerTip:l,width:e?.width??"1.25fr",align:"right",sort:e?.sortField!==void 0?{field:e.sortField,defaultDirection:"desc"}:{field:"apy",defaultDirection:"desc"},cell:i=>{const{apy:r,loading:a,points:d,tokensList:h}=i,{totalAPY:y=0,baseAPY:g=[],extraAPY:x=[],externalAPY:b,apy7DAgo:T}=r??{};return t.jsx(u.Skeleton,{width:60,loading:!!a,children:t.jsx(j.CompoundAPY,{totalAPY:y,totalAPYLoading:!!a,baseAPY:g,extraAPY:x,points:d,apy7DAgo:T,tokensList:h,externalAPY:b})})},mobileTitle:n}}function O(e){const{header:o,mobileTitle:l}=s(e,"components.poolTable.borrowed");return{id:"borrowed",header:o,width:e?.width??"1.15fr",align:"right",cell:n=>t.jsx(M,{ctx:n}),mobileTitle:l}}function U(e){const{header:o,headerTip:l,mobileTitle:n}=s(e,"components.poolTable.borrowApy");return{id:"borrowApy",header:o,headerTip:l,width:e?.width??"150px",align:"right",cell:i=>{const r=i.pool.borrowAPY??e?.getBorrowRate?.(i.pool)??0;return t.jsx("div",{className:"flex justify-start md:justify-end",children:m.percentageTemplate(r)})},mobileTitle:n}}function R(e){const{header:o,mobileTitle:l}=s(e,"components.poolTable.utilization");return{id:"utilization",header:o,width:e?.width??"150px",align:"right",className:"pr-4",sort:e?.sortField!==void 0?{field:e.sortField,defaultDirection:"desc"}:{field:"utilization",defaultDirection:"desc"},cell:n=>{const i=n.pool.utilization??0;return t.jsx("div",{className:"flex justify-start md:justify-end",children:t.jsx(C.PercentIndicator,{percent:i})})},mobileTitle:l}}function $(e){const o=e?.maxAssets??5,l=r=>z(r,o),{header:n,mobileTitle:i}=s(e,"components.poolTable.collateral");return{id:"collateral",header:n,width:e?.width??"148px",align:e?.align??"left",gapBefore:e?.gapBefore??"md",cell:e?.cell??l,mobileCell:e?.mobileCell??e?.cell??l,mobileTitle:i}}function H(e){const{header:o,mobileTitle:l}=s(e,"components.poolTable.balance");return{id:"balance",header:o,width:e?.width??"1.15fr",align:"right",className:e?.className??"pr-4",headerClassName:e?.headerClassName??"pr-4",sort:e?.sortField!==void 0?{field:e.sortField,defaultDirection:"desc"}:{field:"balance",defaultDirection:"desc"},cell:e?.cell??(n=>t.jsx(Y,{ctx:n})),mobileTitle:l}}function E(e){return e}exports.balanceColumn=H;exports.borrowApyColumn=U;exports.borrowedColumn=O;exports.collateralColumn=$;exports.customColumn=E;exports.poolColumn=B;exports.supplyApyColumn=F;exports.supplyColumn=L;exports.utilizationColumn=R;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),w=require("../../assets-list-cell/assets-list-cell.cjs"),j=require("../../compound-apy/compound-apy.cjs"),d=require("../../description/description.cjs"),k=require("../../network-icon/network-icon.cjs"),C=require("../../percent-indicator/percent-indicator.cjs"),A=require("../../pool-apy-tooltip/pool-apy-tooltip.cjs"),I=require("../../pool-indicator-icon/pool-indicator-icon.cjs"),P=require("../../pool-points-indicator/pool-points-indicator.cjs"),u=require("../../skeleton/skeleton.cjs");require("react");require("@gearbox-protocol/sdk");require("clsx");require("tailwind-merge");require("sonner");const m=require("../../../utils/format-money.cjs"),f=require("../../../utils/templates.cjs");require("luxon");require("../../../utils/z-index.cjs");const _=require("../../token-symbol/token-symbol.cjs"),h=require("../../typed-intl/index.cjs"),q=require("../../../test-ids/pool-table.cjs");function a(e,o,l){const n=e?.header??t.jsx(h.FormattedMessageTyped,{messageId:e?.headerMessageId??o});let i;if(e?.headerTip!==null){const r=e?.headerTipMessageId??l;i=e?.headerTip??(r&&t.jsx(h.FormattedMessageTyped,{messageId:r}))}return{header:n,headerTip:i,mobileTitle:e?.mobileTitle??n}}function N({ctx:e}){const{pool:o,underlyingToken:l,points:n,apy:i,isMobile:r}=e,s=r?20:24,c=t.jsx(_.TokenSymbol,{token:l,size:s});return n&&n.length>0&&i?t.jsx(A.PoolAPYTooltip,{totalAPY:i.totalAPY,baseAPY:i.baseAPY,extraAPY:i.extraAPY,points:n,tokensList:e.tokensList,children:t.jsx("div",{children:t.jsx(I.PoolIndicatorIcon,{size:s,children:c})})}):o.hasPoints?t.jsx(P.PoolPointsIndicator,{size:s,children:c}):c}function v(e){const o=e.underlyingToken?.title??e.underlyingToken?.symbol??"",l=e.pool.version;return l&&l>=300&&l<310?`${o} v${Math.floor(l/100)}`:o}function D({ctx:e,renderDescription:o,getPoolName:l}){const{pool:n}=e,i=l?l(e):v(e);return t.jsxs("div",{className:"grid grid-cols-[auto_1fr] gap-x-3",children:[t.jsxs("div",{className:"flex items-center gap-3 shrink-0 leading-0",children:[n.network&&t.jsx(k.NetworkIcon,{network:n.network,isTest:!1,size:14,showTooltip:!0}),t.jsx(N,{ctx:e})]}),t.jsxs("div",{className:"flex md:flex-col min-w-0 overflow-hidden items-center md:items-start gap-2 md:gap-0",children:[t.jsx("span",{className:"truncate max-w-full",children:i}),o&&t.jsx(d.Description,{className:"min-w-0 text-xs",children:o(e)})]})]})}function S({ctx:e}){const{pool:o,underlyingToken:l,loading:n}=e;return t.jsxs("div",{className:"flex flex-col items-start md:items-end",children:[t.jsx(u.Skeleton,{loading:!!n,width:60,children:m.formatMoney(o.expectedLiquidityInUSD??0)}),t.jsx(d.Description,{children:f.tokenTemplate(o.expectedLiquidity,l)})]})}function M({ctx:e}){const{pool:o,underlyingToken:l,loading:n}=e;return t.jsxs("div",{className:"flex flex-col items-start md:items-end",children:[t.jsx(u.Skeleton,{loading:!!n,width:60,children:m.formatMoney(o.totalBorrowedInUSD??0)}),t.jsx(d.Description,{children:f.tokenTemplate(o.totalBorrowed,l)})]})}function Y({ctx:e}){const{pool:o,loading:l,underlyingToken:n}=e,i=n?.decimals??18,r=o.poolTokenSymbol!=null?{title:o.poolTokenSymbol,decimals:i}:n;return t.jsxs("div",{className:"flex flex-col items-start md:items-end","data-testid":q.poolTableTestIds.poolLineCellBalance,children:[t.jsx(u.Skeleton,{loading:!!l,width:60,children:m.formatMoney(o.userBalanceInUSD??0)}),o.userBalance!==void 0&&r&&t.jsx(d.Description,{children:f.tokenTemplate(o.userBalance,r)})]})}function z(e,o,l){const n=e.pool.collateralTokens,{tokensList:i,isMobile:r}=e,{mode:s="cascade",...c}=l??{};return!n?.length||!i?null:t.jsx(w.AssetsListCell,{maxAssets:o,tokensList:i,balances:n.map(p=>({token:p})),iconSize:r?20:24,options:{mode:s,...c}})}function B(e){const{header:o,mobileTitle:l}=a(e,"components.poolTable.pool");return{id:"pool",header:o,width:e?.width??"186px",align:"left",className:"pl-4",cell:n=>t.jsx(D,{ctx:n,renderDescription:e?.renderDescription,getPoolName:e?.getPoolName}),mobileTitle:l}}function L(e){const{header:o,mobileTitle:l}=a(e,"components.poolTable.supply");return{id:"supply",header:o,width:e?.width??"1fr",align:"right",hideOnMedium:e?.hideOnMedium,sort:e?.sortField!==void 0?{field:e.sortField,defaultDirection:"desc"}:{field:"supply",defaultDirection:"desc"},cell:n=>t.jsx(S,{ctx:n}),mobileTitle:l}}function F(e){const{header:o,headerTip:l,mobileTitle:n}=a(e,"components.poolTable.supplyApy","components.poolTable.supplyApy.tip");return{id:"supplyApy",header:o,headerTip:l,width:e?.width??"1.25fr",align:"right",sort:e?.sortField!==void 0?{field:e.sortField,defaultDirection:"desc"}:{field:"apy",defaultDirection:"desc"},cell:i=>{const{apy:r,loading:s,points:c,tokensList:p}=i,{totalAPY:y=0,baseAPY:g=[],extraAPY:x=[],externalAPY:b,apy7DAgo:T}=r??{};return t.jsx(u.Skeleton,{width:60,loading:!!s,children:t.jsx(j.CompoundAPY,{totalAPY:y,totalAPYLoading:!!s,baseAPY:g,extraAPY:x,points:c,apy7DAgo:T,tokensList:p,externalAPY:b})})},mobileTitle:n}}function O(e){const{header:o,mobileTitle:l}=a(e,"components.poolTable.borrowed");return{id:"borrowed",header:o,width:e?.width??"1.15fr",align:"right",cell:n=>t.jsx(M,{ctx:n}),mobileTitle:l}}function U(e){const{header:o,headerTip:l,mobileTitle:n}=a(e,"components.poolTable.borrowApy");return{id:"borrowApy",header:o,headerTip:l,width:e?.width??"150px",align:"right",cell:i=>{const r=i.pool.borrowAPY??e?.getBorrowRate?.(i.pool)??0;return t.jsx("div",{className:"flex justify-start md:justify-end",children:m.percentageTemplate(r)})},mobileTitle:n}}function R(e){const{header:o,mobileTitle:l}=a(e,"components.poolTable.utilization");return{id:"utilization",header:o,width:e?.width??"150px",align:"right",className:"pr-4",sort:e?.sortField!==void 0?{field:e.sortField,defaultDirection:"desc"}:{field:"utilization",defaultDirection:"desc"},cell:n=>{const i=n.pool.utilization??0;return t.jsx("div",{className:"flex justify-start md:justify-end",children:t.jsx(C.PercentIndicator,{percent:i})})},mobileTitle:l}}function $(e){const o=e?.maxAssets??5,l=r=>z(r,o,e?.options),{header:n,mobileTitle:i}=a(e,"components.poolTable.collateral");return{id:"collateral",header:n,width:e?.width??"148px",align:e?.align??"left",gapBefore:e?.gapBefore??"md",cell:e?.cell??l,mobileCell:e?.mobileCell??e?.cell??l,mobileTitle:i}}function H(e){const{header:o,mobileTitle:l}=a(e,"components.poolTable.balance");return{id:"balance",header:o,width:e?.width??"1.15fr",align:"right",className:e?.className??"pr-4",headerClassName:e?.headerClassName??"pr-4",sort:e?.sortField!==void 0?{field:e.sortField,defaultDirection:"desc"}:{field:"balance",defaultDirection:"desc"},cell:e?.cell??(n=>t.jsx(Y,{ctx:n})),mobileTitle:l}}function E(e){return e}exports.balanceColumn=H;exports.borrowApyColumn=U;exports.borrowedColumn=O;exports.collateralColumn=$;exports.customColumn=E;exports.poolColumn=B;exports.supplyApyColumn=F;exports.supplyColumn=L;exports.utilizationColumn=R;

package/dist/esm/components/composites/pool-table/columns.js

@@ -1,4 +1,4 @@
-import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
 import { AssetsListCell as A } from "../../assets-list-cell/assets-list-cell.js";
 import { CompoundAPY as C } from "../../compound-apy/compound-apy.js";
 import { Description as m } from "../../description/description.js";
@@ -13,40 +13,40 @@ import "@gearbox-protocol/sdk";
 import "clsx";
 import "tailwind-merge";
 import "sonner";
-import { percentageTemplate as I, formatMoney as p } from "../../../utils/format-money.js";
-import { tokenTemplate as f } from "../../../utils/templates.js";
+import { percentageTemplate as I, formatMoney as f } from "../../../utils/format-money.js";
+import { tokenTemplate as h } from "../../../utils/templates.js";
 import "luxon";
 import "../../../utils/z-index.js";
 import { TokenSymbol as Y } from "../../token-symbol/token-symbol.js";
-import { FormattedMessageTyped as h } from "../../typed-intl/index.js";
+import { FormattedMessageTyped as g } from "../../typed-intl/index.js";
 import { poolTableTestIds as z } from "../../../test-ids/pool-table.js";
-function a(e, l, o) {
+function d(e, l, o) {
   const t = e?.header ?? /* @__PURE__ */ i(
-    h,
+    g,
     {
       messageId: e?.headerMessageId ?? l
     }
   );
-  let r;
+  let n;
   if (e?.headerTip !== null) {
-    const n = e?.headerTipMessageId ?? o;
-    r = e?.headerTip ?? (n && /* @__PURE__ */ i(h, { messageId: n }));
+    const r = e?.headerTipMessageId ?? o;
+    n = e?.headerTip ?? (r && /* @__PURE__ */ i(g, { messageId: r }));
   }
-  return { header: t, headerTip: r, mobileTitle: e?.mobileTitle ?? t };
+  return { header: t, headerTip: n, mobileTitle: e?.mobileTitle ?? t };
 }
 function B({ ctx: e }) {
-  const { pool: l, underlyingToken: o, points: t, apy: r, isMobile: n } = e, d = n ? 20 : 24, c = /* @__PURE__ */ i(Y, { token: o, size: d });
-  return t && t.length > 0 && r ? /* @__PURE__ */ i(
+  const { pool: l, underlyingToken: o, points: t, apy: n, isMobile: r } = e, a = r ? 20 : 24, s = /* @__PURE__ */ i(Y, { token: o, size: a });
+  return t && t.length > 0 && n ? /* @__PURE__ */ i(
     N,
     {
-      totalAPY: r.totalAPY,
-      baseAPY: r.baseAPY,
-      extraAPY: r.extraAPY,
+      totalAPY: n.totalAPY,
+      baseAPY: n.baseAPY,
+      extraAPY: n.extraAPY,
       points: t,
       tokensList: e.tokensList,
-      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(v, { size: d, children: c }) })
+      children: /* @__PURE__ */ i("div", { children: /* @__PURE__ */ i(v, { size: a, children: s }) })
     }
-  ) : l.hasPoints ? /* @__PURE__ */ i(D, { size: d, children: c }) : c;
+  ) : l.hasPoints ? /* @__PURE__ */ i(D, { size: a, children: s }) : s;
 }
 function M(e) {
   const l = e.underlyingToken?.title ?? e.underlyingToken?.symbol ?? "", o = e.pool.version;
@@ -57,9 +57,9 @@ function S({
   renderDescription: l,
   getPoolName: o
 }) {
-  const { pool: t } = e, r = o ? o(e) : M(e);
-  return /* @__PURE__ */ s("div", { className: "grid grid-cols-[auto_1fr] gap-x-3", children: [
-    /* @__PURE__ */ s("div", { className: "flex items-center gap-3 shrink-0 leading-0", children: [
+  const { pool: t } = e, n = o ? o(e) : M(e);
+  return /* @__PURE__ */ c("div", { className: "grid grid-cols-[auto_1fr] gap-x-3", children: [
+    /* @__PURE__ */ c("div", { className: "flex items-center gap-3 shrink-0 leading-0", children: [
       t.network && /* @__PURE__ */ i(
         P,
         {
@@ -71,17 +71,17 @@ function S({
       ),
       /* @__PURE__ */ i(B, { ctx: e })
     ] }),
-    /* @__PURE__ */ s("div", { className: "flex md:flex-col min-w-0 overflow-hidden items-center md:items-start gap-2 md:gap-0", children: [
-      /* @__PURE__ */ i("span", { className: "truncate max-w-full", children: r }),
+    /* @__PURE__ */ c("div", { className: "flex md:flex-col min-w-0 overflow-hidden items-center md:items-start gap-2 md:gap-0", children: [
+      /* @__PURE__ */ i("span", { className: "truncate max-w-full", children: n }),
       l && /* @__PURE__ */ i(m, { className: "min-w-0 text-xs", children: l(e) })
     ] })
   ] });
 }
 function F({ ctx: e }) {
   const { pool: l, underlyingToken: o, loading: t } = e;
-  return /* @__PURE__ */ s("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(u, { loading: !!t, width: 60, children: p(l.expectedLiquidityInUSD ?? 0) }),
-    /* @__PURE__ */ i(m, { children: f(
+  return /* @__PURE__ */ c("div", { className: "flex flex-col items-start md:items-end", children: [
+    /* @__PURE__ */ i(u, { loading: !!t, width: 60, children: f(l.expectedLiquidityInUSD ?? 0) }),
+    /* @__PURE__ */ i(m, { children: h(
       l.expectedLiquidity,
       o
     ) })
@@ -89,46 +89,46 @@ function F({ ctx: e }) {
 }
 function L({ ctx: e }) {
   const { pool: l, underlyingToken: o, loading: t } = e;
-  return /* @__PURE__ */ s("div", { className: "flex flex-col items-start md:items-end", children: [
-    /* @__PURE__ */ i(u, { loading: !!t, width: 60, children: p(l.totalBorrowedInUSD ?? 0) }),
-    /* @__PURE__ */ i(m, { children: f(
+  return /* @__PURE__ */ c("div", { className: "flex flex-col items-start md:items-end", children: [
+    /* @__PURE__ */ i(u, { loading: !!t, width: 60, children: f(l.totalBorrowedInUSD ?? 0) }),
+    /* @__PURE__ */ i(m, { children: h(
       l.totalBorrowed,
       o
     ) })
   ] });
 }
 function j({ ctx: e }) {
-  const { pool: l, loading: o, underlyingToken: t } = e, r = t?.decimals ?? 18, n = l.poolTokenSymbol != null ? {
+  const { pool: l, loading: o, underlyingToken: t } = e, n = t?.decimals ?? 18, r = l.poolTokenSymbol != null ? {
     title: l.poolTokenSymbol,
-    decimals: r
+    decimals: n
   } : t;
-  return /* @__PURE__ */ s(
+  return /* @__PURE__ */ c(
     "div",
     {
       className: "flex flex-col items-start md:items-end",
       "data-testid": z.poolLineCellBalance,
       children: [
-        /* @__PURE__ */ i(u, { loading: !!o, width: 60, children: p(l.userBalanceInUSD ?? 0) }),
-        l.userBalance !== void 0 && n && /* @__PURE__ */ i(m, { children: f(l.userBalance, n) })
+        /* @__PURE__ */ i(u, { loading: !!o, width: 60, children: f(l.userBalanceInUSD ?? 0) }),
+        l.userBalance !== void 0 && r && /* @__PURE__ */ i(m, { children: h(l.userBalance, r) })
       ]
     }
   );
 }
-function U(e, l) {
-  const o = e.pool.collateralTokens, { tokensList: t, isMobile: r } = e;
-  return !o?.length || !t ? null : /* @__PURE__ */ i(
+function O(e, l, o) {
+  const t = e.pool.collateralTokens, { tokensList: n, isMobile: r } = e, { mode: a = "cascade", ...s } = o ?? {};
+  return !t?.length || !n ? null : /* @__PURE__ */ i(
     A,
     {
       maxAssets: l,
-      tokensList: t,
-      balances: o.map((n) => ({ token: n })),
+      tokensList: n,
+      balances: t.map((p) => ({ token: p })),
       iconSize: r ? 20 : 24,
-      options: { mode: "cascade" }
+      options: { mode: a, ...s }
     }
   );
 }
 function ae(e) {
-  const { header: l, mobileTitle: o } = a(
+  const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.pool"
   );
@@ -150,7 +150,7 @@ function ae(e) {
   };
 }
 function de(e) {
-  const { header: l, mobileTitle: o } = a(
+  const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.supply"
   );
@@ -166,7 +166,7 @@ function de(e) {
   };
 }
 function se(e) {
-  const { header: l, headerTip: o, mobileTitle: t } = a(
+  const { header: l, headerTip: o, mobileTitle: t } = d(
     e,
     "components.poolTable.supplyApy",
     "components.poolTable.supplyApy.tip"
@@ -178,24 +178,24 @@ function se(e) {
     width: e?.width ?? "1.25fr",
     align: "right",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "apy", defaultDirection: "desc" },
-    cell: (r) => {
-      const { apy: n, loading: d, points: c, tokensList: g } = r, {
+    cell: (n) => {
+      const { apy: r, loading: a, points: s, tokensList: p } = n, {
         totalAPY: T = 0,
         baseAPY: b = [],
         extraAPY: w = [],
         externalAPY: y,
         apy7DAgo: k
-      } = n ?? {};
-      return /* @__PURE__ */ i(u, { width: 60, loading: !!d, children: /* @__PURE__ */ i(
+      } = r ?? {};
+      return /* @__PURE__ */ i(u, { width: 60, loading: !!a, children: /* @__PURE__ */ i(
         C,
         {
           totalAPY: T,
-          totalAPYLoading: !!d,
+          totalAPYLoading: !!a,
           baseAPY: b,
           extraAPY: w,
-          points: c,
+          points: s,
           apy7DAgo: k,
-          tokensList: g,
+          tokensList: p,
           externalAPY: y
         }
       ) });
@@ -204,7 +204,7 @@ function se(e) {
   };
 }
 function ce(e) {
-  const { header: l, mobileTitle: o } = a(
+  const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.borrowed"
   );
@@ -218,7 +218,7 @@ function ce(e) {
   };
 }
 function me(e) {
-  const { header: l, headerTip: o, mobileTitle: t } = a(
+  const { header: l, headerTip: o, mobileTitle: t } = d(
     e,
     "components.poolTable.borrowApy"
   );
@@ -228,15 +228,15 @@ function me(e) {
     headerTip: o,
     width: e?.width ?? "150px",
     align: "right",
-    cell: (r) => {
-      const n = r.pool.borrowAPY ?? e?.getBorrowRate?.(r.pool) ?? 0;
-      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: I(n) });
+    cell: (n) => {
+      const r = n.pool.borrowAPY ?? e?.getBorrowRate?.(n.pool) ?? 0;
+      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: I(r) });
     },
     mobileTitle: t
   };
 }
 function ue(e) {
-  const { header: l, mobileTitle: o } = a(
+  const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.utilization"
   );
@@ -248,14 +248,14 @@ function ue(e) {
     className: "pr-4",
     sort: e?.sortField !== void 0 ? { field: e.sortField, defaultDirection: "desc" } : { field: "utilization", defaultDirection: "desc" },
     cell: (t) => {
-      const r = t.pool.utilization ?? 0;
-      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: /* @__PURE__ */ i(x, { percent: r }) });
+      const n = t.pool.utilization ?? 0;
+      return /* @__PURE__ */ i("div", { className: "flex justify-start md:justify-end", children: /* @__PURE__ */ i(x, { percent: n }) });
     },
     mobileTitle: o
   };
 }
 function pe(e) {
-  const l = e?.maxAssets ?? 5, o = (n) => U(n, l), { header: t, mobileTitle: r } = a(
+  const l = e?.maxAssets ?? 5, o = (r) => O(r, l, e?.options), { header: t, mobileTitle: n } = d(
     e,
     "components.poolTable.collateral"
   );
@@ -267,11 +267,11 @@ function pe(e) {
     gapBefore: e?.gapBefore ?? "md",
     cell: e?.cell ?? o,
     mobileCell: e?.mobileCell ?? e?.cell ?? o,
-    mobileTitle: r
+    mobileTitle: n
   };
 }
 function fe(e) {
-  const { header: l, mobileTitle: o } = a(
+  const { header: l, mobileTitle: o } = d(
     e,
     "components.poolTable.balance"
   );

package/dist/types/components/composites/pool-table/columns.d.ts

@@ -1,3 +1,4 @@
+import { MultiAssetCellProps } from '../../assets-list-cell';
 import { LocaleKeys } from '../../../locale';
 import { PoolDTO, PoolTableCellContext, PoolTableColumnDef } from './types';
 import type * as React from "react";
@@ -78,6 +79,7 @@ export declare function collateralColumn<P extends PoolDTO = PoolDTO>(options?:
     align?: "left" | "right";
     /** @default 5 */
     maxAssets?: number;
+    options?: MultiAssetCellProps["options"];
 }): PoolTableColumnDef<P>;
 /**
  * User balance column (client-v3 style) — USD + amount in pool token.

package/dist/types/components/composites/pool-table/types.d.ts

@@ -54,11 +54,11 @@ export interface PoolApyDTO {
         loading7DAgo?: boolean;
     };
 }
-export interface PoolTableCellContext<P extends PoolDTO = PoolDTO> {
+export interface PoolTableCellContext<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo> {
     pool: P;
-    tokensList: Record<Address, TokenMetaInfo> | undefined;
+    tokensList: Record<Address, T> | undefined;
     /** Underlying token meta (resolved from `pool.underlyingToken`). */
-    underlyingToken: TokenMetaInfo | undefined;
+    underlyingToken: T | undefined;
     apy: PoolApyDTO | undefined;
     /** Points / rewards data for tooltip. */
     points: Array<PoolAPYPointsTip> | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gearbox-protocol/ui-kit",
-  "version": "3.8.2",
+  "version": "3.9.1",
   "description": "Internal UI components",
   "repository": "https://github.com/gearbox-protocol/ui-kit",
   "license": "MIT",