@gearbox-protocol/ui-kit 3.10.1 → 3.10.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),j=require("../../assets-list-cell/assets-list-cell.cjs"),k=require("../../compound-apy/compound-apy.cjs"),c=require("../../description/description.cjs"),C=require("../../network-icon/network-icon.cjs"),A=require("../../percent-indicator/percent-indicator.cjs"),I=require("../../pool-apy-tooltip/pool-apy-tooltip.cjs"),P=require("../../pool-indicator-icon/pool-indicator-icon.cjs"),_=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 q=require("../../token-symbol/token-symbol.cjs"),h=require("../../typed-intl/index.cjs"),N=require("../../../test-ids/pool-table.cjs");function a(e,o,l){const t=e?.header??n.jsx(h.FormattedMessageTyped,{messageId:e?.headerMessageId??o});let i;if(e?.headerTip!==null){const r=e?.headerTipMessageId??l;i=e?.headerTip??(r&&n.jsx(h.FormattedMessageTyped,{messageId:r}))}return{header:t,headerTip:i,mobileTitle:e?.mobileTitle??t}}function v({ctx:e}){const{pool:o,underlyingToken:l,points:t,apy:i,isMobile:r}=e,s=r?20:24,d=n.jsx(q.TokenSymbol,{token:l,size:s});return t&&t.length>0&&i?n.jsx(I.PoolAPYTooltip,{totalAPY:i.totalAPY,baseAPY:i.baseAPY,extraAPY:i.extraAPY,points:t,tokensList:e.tokensList,children:n.jsx("div",{children:n.jsx(P.PoolIndicatorIcon,{size:s,children:d})})}):o.hasPoints?n.jsx(_.PoolPointsIndicator,{size:s,children:d}):d}function y(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:t}=e,i=l?l(e):y(e);return n.jsxs("div",{className:"grid grid-cols-[auto_1fr] gap-x-3",children:[n.jsxs("div",{className:"flex items-center gap-3 shrink-0 leading-0",children:[t.network&&n.jsx(C.NetworkIcon,{network:t.network,isTest:!1,size:14,showTooltip:!0}),n.jsx(v,{ctx:e})]}),n.jsxs("div",{className:"flex md:flex-col min-w-0 overflow-hidden items-center md:items-start gap-2 md:gap-0",children:[n.jsx("span",{className:"truncate max-w-full",children:i}),o&&n.jsx(c.Description,{className:"min-w-0 text-xs",children:o(e)})]})]})}function S({ctx:e}){const{pool:o,underlyingToken:l,loading:t}=e;return n.jsxs("div",{className:"flex flex-col items-start md:items-end",children:[n.jsx(u.Skeleton,{loading:!!t,width:60,children:m.formatMoney(o.expectedLiquidityInUSD??0)}),n.jsx(c.Description,{children:f.tokenTemplate(o.expectedLiquidity,l)})]})}function M({ctx:e}){const{pool:o,underlyingToken:l,loading:t}=e;return n.jsxs("div",{className:"flex flex-col items-start md:items-end",children:[n.jsx(u.Skeleton,{loading:!!t,width:60,children:m.formatMoney(o.totalBorrowedInUSD??0)}),n.jsx(c.Description,{children:f.tokenTemplate(o.totalBorrowed,l)})]})}function Y({ctx:e}){const{pool:o,loading:l,underlyingToken:t}=e,i=t?.decimals??18,r=o.poolTokenSymbol!=null?{title:o.poolTokenSymbol,decimals:i}:t;return n.jsxs("div",{className:"flex flex-col items-start md:items-end","data-testid":N.poolTableTestIds.poolLineCellBalance,children:[n.jsx(u.Skeleton,{loading:!!l,width:60,children:m.formatMoney(o.userBalanceInUSD??0)}),o.userBalance!==void 0&&r&&n.jsx(c.Description,{children:f.tokenTemplate(o.userBalance,r)})]})}function z(e,o,l){const t=e.pool.collateralTokens,{tokensList:i,isMobile:r}=e,{mode:s="cascade",...d}=l??{};return!t?.length||!i?null:n.jsx(j.AssetsListCell,{maxAssets:o,tokensList:i,balances:t.map(p=>({token:p})),iconSize:r?20:24,options:{mode:s,...d}})}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:t=>n.jsx(D,{ctx:t,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:t=>n.jsx(S,{ctx:t}),mobileTitle:l}}function F(e){const{header:o,headerTip:l,mobileTitle:t}=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:d,tokensList:p}=i,{totalAPY:g=0,baseAPY:x=[],extraAPY:b=[],externalAPY:T,apy7DAgo:w}=r??{};return n.jsx(u.Skeleton,{width:60,loading:!!s,children:n.jsx(k.CompoundAPY,{totalAPY:g,totalAPYLoading:!!s,baseAPY:x,extraAPY:b,points:d,apy7DAgo:w,tokensList:p,externalAPY:T})})},mobileTitle:t}}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:t=>n.jsx(M,{ctx:t}),mobileTitle:l}}function U(e){const{header:o,headerTip:l,mobileTitle:t}=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 n.jsx("div",{className:"flex justify-start md:justify-end",children:m.percentageTemplate(r)})},mobileTitle:t}}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:t=>{const i=t.pool.utilization??0;return n.jsx("div",{className:"flex justify-start md:justify-end",children:n.jsx(A.PercentIndicator,{percent:i})})},mobileTitle:l}}function $(e){const o=e?.maxAssets??5,l=r=>z(r,o,e?.options),{header:t,mobileTitle:i}=a(e,"components.poolTable.collateral");return{id:"collateral",header:t,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??(t=>n.jsx(Y,{ctx:t})),mobileTitle:l}}function E(e){return e}exports.balanceColumn=H;exports.borrowApyColumn=U;exports.borrowedColumn=O;exports.collateralColumn=$;exports.customColumn=E;exports.defaultPoolName=y;exports.poolColumn=B;exports.supplyApyColumn=F;exports.supplyColumn=L;exports.utilizationColumn=R;
|
|
@@ -11,68 +11,69 @@ interface ColumnHeaderOptions {
|
|
|
11
11
|
headerTipMessageId?: LocaleKeys;
|
|
12
12
|
mobileTitle?: React.ReactNode;
|
|
13
13
|
}
|
|
14
|
+
export declare function defaultPoolName(ctx: PoolTableCellContext): string;
|
|
14
15
|
/**
|
|
15
16
|
* Pool name column — displays token icon, pool name and optional description.
|
|
16
17
|
*
|
|
17
18
|
* Used in both charts and client-v3.
|
|
18
19
|
*/
|
|
19
|
-
export declare function poolColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo>(options?: ColumnHeaderOptions & {
|
|
20
|
+
export declare function poolColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo, S extends string = string>(options?: ColumnHeaderOptions & {
|
|
20
21
|
renderDescription?: (ctx: PoolTableCellContext<P, T>) => React.ReactNode;
|
|
21
22
|
/** Custom pool name formatter. Defaults to "TOKEN vN" for v3 pools. */
|
|
22
23
|
getPoolName?: (ctx: PoolTableCellContext<P, T>) => string;
|
|
23
24
|
width?: string;
|
|
24
|
-
}): PoolTableColumnDef<P, T>;
|
|
25
|
+
}): PoolTableColumnDef<P, T, S>;
|
|
25
26
|
/**
|
|
26
27
|
* Total supply column — shows total expected liquidity in USD and native token.
|
|
27
28
|
*
|
|
28
29
|
* Used in both charts and client-v3.
|
|
29
30
|
*/
|
|
30
|
-
export declare function supplyColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo>(options?: ColumnHeaderOptions & {
|
|
31
|
+
export declare function supplyColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo, S extends string = string>(options?: ColumnHeaderOptions & {
|
|
31
32
|
width?: string;
|
|
32
|
-
sortField?:
|
|
33
|
+
sortField?: S;
|
|
33
34
|
hideOnMedium?: boolean;
|
|
34
|
-
}): PoolTableColumnDef<P, T>;
|
|
35
|
+
}): PoolTableColumnDef<P, T, S>;
|
|
35
36
|
/**
|
|
36
37
|
* Supply APY column — shows compound APY with tooltip breakdown.
|
|
37
38
|
*
|
|
38
39
|
* Used in both charts and client-v3.
|
|
39
40
|
*/
|
|
40
|
-
export declare function supplyApyColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo>(options?: ColumnHeaderOptions & {
|
|
41
|
+
export declare function supplyApyColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo, S extends string = string>(options?: ColumnHeaderOptions & {
|
|
41
42
|
width?: string;
|
|
42
|
-
sortField?:
|
|
43
|
-
}): PoolTableColumnDef<P, T>;
|
|
43
|
+
sortField?: S;
|
|
44
|
+
}): PoolTableColumnDef<P, T, S>;
|
|
44
45
|
/**
|
|
45
46
|
* Total borrowed column — shows total borrowed in USD and native token.
|
|
46
47
|
*
|
|
47
48
|
* Used in both charts and client-v3.
|
|
48
49
|
*/
|
|
49
|
-
export declare function borrowedColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo>(options?: ColumnHeaderOptions & {
|
|
50
|
+
export declare function borrowedColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo, S extends string = string>(options?: ColumnHeaderOptions & {
|
|
50
51
|
width?: string;
|
|
51
|
-
}): PoolTableColumnDef<P, T>;
|
|
52
|
+
}): PoolTableColumnDef<P, T, S>;
|
|
52
53
|
/**
|
|
53
54
|
* Borrow APY column — formatted borrow rate (`percentageTemplate`: **basis points**, 10_000 = 100%).
|
|
54
55
|
*
|
|
55
56
|
* Prefer `pool.borrowAPY` when the backend (or adapter) fills it; otherwise pass `getBorrowRate`.
|
|
56
57
|
*/
|
|
57
|
-
export declare function borrowApyColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo>(options?: ColumnHeaderOptions & {
|
|
58
|
+
export declare function borrowApyColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo, S extends string = string>(options?: ColumnHeaderOptions & {
|
|
58
59
|
width?: string;
|
|
59
60
|
/** Custom getter for borrow rate (basis points). Used when `pool.borrowAPY` is undefined. */
|
|
60
61
|
getBorrowRate?: (pool: P) => number;
|
|
61
|
-
}): PoolTableColumnDef<P, T>;
|
|
62
|
+
}): PoolTableColumnDef<P, T, S>;
|
|
62
63
|
/**
|
|
63
64
|
* Utilization column — `pool.utilization` (0–100) with a progress bar.
|
|
64
65
|
*/
|
|
65
|
-
export declare function utilizationColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo>(options?: ColumnHeaderOptions & {
|
|
66
|
+
export declare function utilizationColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo, S extends string = string>(options?: ColumnHeaderOptions & {
|
|
66
67
|
width?: string;
|
|
67
|
-
sortField?:
|
|
68
|
-
}): PoolTableColumnDef<P, T>;
|
|
68
|
+
sortField?: S;
|
|
69
|
+
}): PoolTableColumnDef<P, T, S>;
|
|
69
70
|
/**
|
|
70
71
|
* Collateral / assets column — shows a list of collateral asset icons.
|
|
71
72
|
*
|
|
72
73
|
* Default: reads `pool.collateralTokens` and renders {@link AssetsListCell}.
|
|
73
74
|
* Override with `cell` / `mobileCell` for custom asset shapes (e.g. client-v3 quota objects).
|
|
74
75
|
*/
|
|
75
|
-
export declare function collateralColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo>(options?: ColumnHeaderOptions & {
|
|
76
|
+
export declare function collateralColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo, S extends string = string>(options?: ColumnHeaderOptions & {
|
|
76
77
|
width?: string;
|
|
77
78
|
gapBefore?: "sm" | "md" | "none";
|
|
78
79
|
cell?: (ctx: PoolTableCellContext<P, T>) => React.ReactNode;
|
|
@@ -81,21 +82,21 @@ export declare function collateralColumn<P extends PoolDTO = PoolDTO, T extends
|
|
|
81
82
|
/** @default 5 */
|
|
82
83
|
maxAssets?: number;
|
|
83
84
|
options?: MultiAssetCellProps["options"];
|
|
84
|
-
}): PoolTableColumnDef<P, T>;
|
|
85
|
+
}): PoolTableColumnDef<P, T, S>;
|
|
85
86
|
/**
|
|
86
87
|
* User balance column (client-v3 style) — USD + amount in pool token.
|
|
87
88
|
*
|
|
88
89
|
* Default: `pool.userBalanceInUSD`, `pool.userBalance`, `pool.poolTokenSymbol` (and underlying decimals for formatting).
|
|
89
90
|
*/
|
|
90
|
-
export declare function balanceColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo>(options?: ColumnHeaderOptions & {
|
|
91
|
+
export declare function balanceColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo, S extends string = string>(options?: ColumnHeaderOptions & {
|
|
91
92
|
width?: string;
|
|
92
93
|
className?: string;
|
|
93
94
|
headerClassName?: string;
|
|
94
|
-
sortField?:
|
|
95
|
+
sortField?: S;
|
|
95
96
|
cell?: (ctx: PoolTableCellContext<P, T>) => React.ReactNode;
|
|
96
|
-
}): PoolTableColumnDef<P, T>;
|
|
97
|
+
}): PoolTableColumnDef<P, T, S>;
|
|
97
98
|
/**
|
|
98
99
|
* Generic custom column — convenience helper to create a column with minimal boilerplate.
|
|
99
100
|
*/
|
|
100
|
-
export declare function customColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo>(def: PoolTableColumnDef<P, T>): PoolTableColumnDef<P, T>;
|
|
101
|
+
export declare function customColumn<P extends PoolDTO = PoolDTO, T extends TokenMetaInfo = TokenMetaInfo, S extends string = string>(def: PoolTableColumnDef<P, T, S>): PoolTableColumnDef<P, T, S>;
|
|
101
102
|
export {};
|