@gearbox-protocol/ui-kit 4.0.0-next.21 → 4.0.0-next.23
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.
- package/dist/cjs/components/composites/pool-assets-table/pool-assets-table-row.cjs +1 -1
- package/dist/cjs/components/composites/pool-assets-table/pool-assets-table.cjs +1 -1
- package/dist/esm/components/composites/pool-assets-table/pool-assets-table-row.js +45 -47
- package/dist/esm/components/composites/pool-assets-table/pool-assets-table.js +22 -24
- package/dist/types/components/composites/pool-assets-table/pool-assets-table-row.d.ts +1 -2
- package/dist/types/components/composites/pool-assets-table/pool-assets-table.d.ts +1 -2
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");require("@gearbox-protocol/sdk");require("clsx");require("tailwind-merge");require("sonner");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");require("@gearbox-protocol/sdk");require("clsx");require("tailwind-merge");require("sonner");const _=require("../../../utils/format-money.cjs");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../../utils/z-index.cjs");require("../../points-icon/points-icon.cjs");const v=require("../../base/values/scalars.cjs");require("../../badge/badge.cjs");require("../../badge/chip.cjs");const o=require("../../typed-intl/index.cjs"),S=require("../../collateral-allocation-tooltip/allocation-wheel.cjs");require("@fortawesome/free-solid-svg-icons");require("../../icons/fa-icon.cjs");require("../../token-icon/token-icon.cjs");require("../../tooltip/simple-tooltip.cjs");require("../../tooltip/tooltip.cjs");const f=require("../../name-cell/name-cell.cjs"),y=require("../../short-string/short-string.cjs");require("react-intl");require("../../buttons/button/button.cjs");const t=require("../../table/grid-table.cjs");require("../../skeleton/skeleton.cjs");require("../../table/table.cjs");const i=require("../../table/table-sm.cjs"),C=require("../../token-symbol/token-symbol.cjs"),b=require("../../token-template/token-template.cjs"),A=require("../../vertical-indicator/vertical-indicator.cjs"),a=require("./constants.cjs");function z(s,l){if(l!==0n)return Number(s*10000n/l)}function k(s,l){return l<=0n||s<=0n?0:Number(s*10000n/l)/1e4}function N({asset:s,underlyingToken:l,last:h,isCompact:c,totalUsed:q,colorIndex:j}){const{token:u,limit:n,used:r}=s,g=c?40:21,m=k(r.value,q),d=()=>e.jsx(f.NameCell,{leading:e.jsx(C.TokenSymbol,{size:32,token:u}),title:e.jsx(y.ShortString,{maxLength:g,children:u.symbol})}),p=()=>e.jsxs("div",{className:"flex items-center justify-end gap-2","data-testid":a.PoolAssetsTableTest.exposureCell,children:[e.jsx(S.AllocationWheel,{share:m,colorIndex:j,idle:m===0}),e.jsx(A.VerticalIndicator,{value:e.jsx(b.TokenTemplate,{decimalPartLength:2,precision:2,showSymbol:!1,token:l,value:r.value}),valueDescription:r.valueUsd===null?"—":_.formatMoney(r.valueUsd)})]}),x=()=>e.jsx("div",{"data-testid":a.PoolAssetsTableTest.capCell,children:n.value===0n?e.jsx("span",{children:"—"}):e.jsx(b.TokenTemplate,{decimalPartLength:2,precision:2,showSymbol:!1,token:l,value:n.value})}),T=()=>e.jsx("div",{"data-testid":a.PoolAssetsTableTest.capUtilizationCell,children:e.jsx(v.UtilizationValue,{data:z(r.value,n.value)})});return e.jsx(t.GridTableRow,{last:h,height:"auto",className:"cursor-default",style:{minHeight:"75px"},children:c?e.jsx(t.GridTableCell,{className:"px-3 py-0!",size:"sm",span:"full",children:e.jsxs(i.TableLineSm,{className:"w-full",columns:3,columnsXs:3,title:d(),children:[e.jsx(i.TableCellSm,{title:e.jsx(o.FormattedMessageTyped,{messageId:"components.poolAssetsTable.exposure"}),children:p()}),e.jsx(i.TableCellSm,{title:e.jsx(o.FormattedMessageTyped,{messageId:"components.poolAssetsTable.cap"}),children:x()}),e.jsx(i.TableCellSm,{title:e.jsx(o.FormattedMessageTyped,{messageId:"components.poolAssetsTable.capUtilization"}),children:T()})]})}):e.jsxs(e.Fragment,{children:[e.jsx(t.GridTableCell,{className:"pl-4",size:"sm",textAlign:"left",children:d()}),e.jsx(t.GridTableCell,{size:"sm",textAlign:"right",children:p()}),e.jsx(t.GridTableCell,{size:"sm",textAlign:"right",children:x()}),e.jsx(t.GridTableCell,{className:"pr-4",size:"sm",textAlign:"right",children:T()})]})})}exports.PoolAssetsTableRow=N;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),b=require("../../cards/card/card.cjs");require("clsx");require("tailwind-merge");require("react");require("@fortawesome/free-solid-svg-icons");require("../../icons/fa-icon.cjs");require("@gearbox-protocol/sdk");require("sonner");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../../utils/z-index.cjs");require("react-intl");require("../../buttons/button/button.cjs");const i=require("../../table/grid-table.cjs");require("../../skeleton/skeleton.cjs");require("../../table/table.cjs");const q=require("../../../hooks/use-media-query.cjs"),p=require("../../../hooks/use-observed-width-key.cjs"),T=require("./constants.cjs"),m=require("./pool-assets-table-head.cjs"),_=require("./pool-assets-table-row.cjs"),h=680;function A({list:r,sort:n,underlyingToken:a}){const c=q.useIsMobile(),{ref:u,widthKey:l}=p.useObservedWidthKey(),t=l>0?l<h:c,d=r.reduce((s,o)=>s+o.used.value,0n);return e.jsx(b.Card,{ref:u,className:"overflow-hidden rounded-lg p-2",children:e.jsxs(i.GridTable,{cols:t?"1fr":"1fr max-content max-content minmax(0,1fr)","data-testid":T.PoolAssetsTableTest.root,gap:0,size:"lg",wrapperClassName:"overflow-visible",children:[!t&&e.jsx(i.GridTableHeader,{children:e.jsx(m.PoolAssetsTableHead,{sort:n})}),e.jsx(i.GridTableBody,{children:r.map((s,o)=>e.jsx(_.PoolAssetsTableRow,{asset:s,underlyingToken:a,last:o===r.length-1,isCompact:t,totalUsed:d,colorIndex:o},s.token.address))})]})})}exports.PoolAssetsTable=A;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
import { jsx as e, jsxs as s, Fragment as
|
|
1
|
+
import { jsx as e, jsxs as s, Fragment as A } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import "@gearbox-protocol/sdk";
|
|
4
4
|
import "clsx";
|
|
5
5
|
import "tailwind-merge";
|
|
6
6
|
import "sonner";
|
|
7
|
-
import { formatMoney as
|
|
7
|
+
import { formatMoney as N } from "../../../utils/format-money.js";
|
|
8
8
|
import "@gearbox-protocol/sdk/common-utils";
|
|
9
9
|
import "luxon";
|
|
10
10
|
import "../../../utils/z-index.js";
|
|
@@ -13,136 +13,134 @@ import { UtilizationValue as y } from "../../base/values/scalars.js";
|
|
|
13
13
|
import "../../badge/badge.js";
|
|
14
14
|
import "../../badge/chip.js";
|
|
15
15
|
import { FormattedMessageTyped as m } from "../../typed-intl/index.js";
|
|
16
|
-
import { AllocationWheel as
|
|
16
|
+
import { AllocationWheel as C } from "../../collateral-allocation-tooltip/allocation-wheel.js";
|
|
17
17
|
import "@fortawesome/free-solid-svg-icons";
|
|
18
18
|
import "../../icons/fa-icon.js";
|
|
19
19
|
import "../../token-icon/token-icon.js";
|
|
20
20
|
import "../../tooltip/simple-tooltip.js";
|
|
21
21
|
import "../../tooltip/tooltip.js";
|
|
22
|
-
import { NameCell as
|
|
23
|
-
import { ShortString as
|
|
22
|
+
import { NameCell as S } from "../../name-cell/name-cell.js";
|
|
23
|
+
import { ShortString as U } from "../../short-string/short-string.js";
|
|
24
24
|
import "react-intl";
|
|
25
25
|
import "../../buttons/button/button.js";
|
|
26
26
|
import { GridTableRow as k, GridTableCell as o } from "../../table/grid-table.js";
|
|
27
27
|
import "../../skeleton/skeleton.js";
|
|
28
28
|
import "../../table/table.js";
|
|
29
29
|
import { TableLineSm as w, TableCellSm as a } from "../../table/table-sm.js";
|
|
30
|
-
import { TokenSymbol as
|
|
31
|
-
import { TokenTemplate as
|
|
32
|
-
import { VerticalIndicator as
|
|
30
|
+
import { TokenSymbol as L } from "../../token-symbol/token-symbol.js";
|
|
31
|
+
import { TokenTemplate as v } from "../../token-template/token-template.js";
|
|
32
|
+
import { VerticalIndicator as I } from "../../vertical-indicator/vertical-indicator.js";
|
|
33
33
|
import { PoolAssetsTableTest as n } from "./constants.js";
|
|
34
|
-
function
|
|
34
|
+
function P(i, t) {
|
|
35
35
|
if (t !== 0n)
|
|
36
36
|
return Number(i * 10000n / t);
|
|
37
37
|
}
|
|
38
|
-
function
|
|
38
|
+
function j(i, t) {
|
|
39
39
|
return t <= 0n || i <= 0n ? 0 : Number(i * 10000n / t) / 1e4;
|
|
40
40
|
}
|
|
41
|
-
function
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
colorIndex: A
|
|
41
|
+
function ue({
|
|
42
|
+
asset: i,
|
|
43
|
+
underlyingToken: t,
|
|
44
|
+
last: b,
|
|
45
|
+
isCompact: p,
|
|
46
|
+
totalUsed: x,
|
|
47
|
+
colorIndex: T
|
|
49
48
|
}) {
|
|
50
|
-
const { token:
|
|
51
|
-
|
|
49
|
+
const { token: c, limit: r, used: l } = i, z = p ? 40 : 21, d = j(l.value, x), u = () => /* @__PURE__ */ e(
|
|
50
|
+
S,
|
|
52
51
|
{
|
|
53
|
-
leading: /* @__PURE__ */ e(
|
|
54
|
-
title: /* @__PURE__ */ e(
|
|
55
|
-
subtitle: /* @__PURE__ */ e(x, { maxLength: 20, children: i })
|
|
52
|
+
leading: /* @__PURE__ */ e(L, { size: 32, token: c }),
|
|
53
|
+
title: /* @__PURE__ */ e(U, { maxLength: z, children: c.symbol })
|
|
56
54
|
}
|
|
57
|
-
),
|
|
55
|
+
), h = () => /* @__PURE__ */ s(
|
|
58
56
|
"div",
|
|
59
57
|
{
|
|
60
58
|
className: "flex items-center justify-end gap-2",
|
|
61
59
|
"data-testid": n.exposureCell,
|
|
62
60
|
children: [
|
|
63
61
|
/* @__PURE__ */ e(
|
|
64
|
-
|
|
62
|
+
C,
|
|
65
63
|
{
|
|
66
|
-
share:
|
|
67
|
-
colorIndex:
|
|
68
|
-
idle:
|
|
64
|
+
share: d,
|
|
65
|
+
colorIndex: T,
|
|
66
|
+
idle: d === 0
|
|
69
67
|
}
|
|
70
68
|
),
|
|
71
69
|
/* @__PURE__ */ e(
|
|
72
|
-
|
|
70
|
+
I,
|
|
73
71
|
{
|
|
74
72
|
value: /* @__PURE__ */ e(
|
|
75
|
-
|
|
73
|
+
v,
|
|
76
74
|
{
|
|
77
75
|
decimalPartLength: 2,
|
|
78
76
|
precision: 2,
|
|
79
77
|
showSymbol: !1,
|
|
80
|
-
token:
|
|
78
|
+
token: t,
|
|
81
79
|
value: l.value
|
|
82
80
|
}
|
|
83
81
|
),
|
|
84
|
-
valueDescription: l.valueUsd === null ? "—" :
|
|
82
|
+
valueDescription: l.valueUsd === null ? "—" : N(l.valueUsd)
|
|
85
83
|
}
|
|
86
84
|
)
|
|
87
85
|
]
|
|
88
86
|
}
|
|
89
|
-
),
|
|
90
|
-
|
|
87
|
+
), f = () => /* @__PURE__ */ e("div", { "data-testid": n.capCell, children: r.value === 0n ? /* @__PURE__ */ e("span", { children: "—" }) : /* @__PURE__ */ e(
|
|
88
|
+
v,
|
|
91
89
|
{
|
|
92
90
|
decimalPartLength: 2,
|
|
93
91
|
precision: 2,
|
|
94
92
|
showSymbol: !1,
|
|
95
|
-
token:
|
|
93
|
+
token: t,
|
|
96
94
|
value: r.value
|
|
97
95
|
}
|
|
98
|
-
) }),
|
|
96
|
+
) }), g = () => /* @__PURE__ */ e("div", { "data-testid": n.capUtilizationCell, children: /* @__PURE__ */ e(y, { data: P(l.value, r.value) }) });
|
|
99
97
|
return /* @__PURE__ */ e(
|
|
100
98
|
k,
|
|
101
99
|
{
|
|
102
|
-
last:
|
|
100
|
+
last: b,
|
|
103
101
|
height: "auto",
|
|
104
102
|
className: "cursor-default",
|
|
105
103
|
style: { minHeight: "75px" },
|
|
106
|
-
children:
|
|
104
|
+
children: p ? /* @__PURE__ */ e(o, { className: "px-3 py-0!", size: "sm", span: "full", children: /* @__PURE__ */ s(
|
|
107
105
|
w,
|
|
108
106
|
{
|
|
109
107
|
className: "w-full",
|
|
110
108
|
columns: 3,
|
|
111
109
|
columnsXs: 3,
|
|
112
|
-
title:
|
|
110
|
+
title: u(),
|
|
113
111
|
children: [
|
|
114
112
|
/* @__PURE__ */ e(
|
|
115
113
|
a,
|
|
116
114
|
{
|
|
117
115
|
title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.exposure" }),
|
|
118
|
-
children:
|
|
116
|
+
children: h()
|
|
119
117
|
}
|
|
120
118
|
),
|
|
121
119
|
/* @__PURE__ */ e(
|
|
122
120
|
a,
|
|
123
121
|
{
|
|
124
122
|
title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.cap" }),
|
|
125
|
-
children:
|
|
123
|
+
children: f()
|
|
126
124
|
}
|
|
127
125
|
),
|
|
128
126
|
/* @__PURE__ */ e(
|
|
129
127
|
a,
|
|
130
128
|
{
|
|
131
129
|
title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.capUtilization" }),
|
|
132
|
-
children:
|
|
130
|
+
children: g()
|
|
133
131
|
}
|
|
134
132
|
)
|
|
135
133
|
]
|
|
136
134
|
}
|
|
137
|
-
) }) : /* @__PURE__ */ s(
|
|
138
|
-
/* @__PURE__ */ e(o, { className: "pl-4", size: "sm", textAlign: "left", children:
|
|
135
|
+
) }) : /* @__PURE__ */ s(A, { children: [
|
|
136
|
+
/* @__PURE__ */ e(o, { className: "pl-4", size: "sm", textAlign: "left", children: u() }),
|
|
137
|
+
/* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: h() }),
|
|
139
138
|
/* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: f() }),
|
|
140
|
-
/* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: g() })
|
|
141
|
-
/* @__PURE__ */ e(o, { className: "pr-4", size: "sm", textAlign: "right", children: v() })
|
|
139
|
+
/* @__PURE__ */ e(o, { className: "pr-4", size: "sm", textAlign: "right", children: g() })
|
|
142
140
|
] })
|
|
143
141
|
}
|
|
144
142
|
);
|
|
145
143
|
}
|
|
146
144
|
export {
|
|
147
|
-
|
|
145
|
+
ue as PoolAssetsTableRow
|
|
148
146
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
2
|
-
import { Card as
|
|
1
|
+
import { jsx as o, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import { Card as c } from "../../cards/card/card.js";
|
|
3
3
|
import "clsx";
|
|
4
4
|
import "tailwind-merge";
|
|
5
5
|
import "react";
|
|
@@ -12,41 +12,39 @@ import "luxon";
|
|
|
12
12
|
import "../../../utils/z-index.js";
|
|
13
13
|
import "react-intl";
|
|
14
14
|
import "../../buttons/button/button.js";
|
|
15
|
-
import { GridTable as
|
|
15
|
+
import { GridTable as f, GridTableHeader as b, GridTableBody as T } from "../../table/grid-table.js";
|
|
16
16
|
import "../../skeleton/skeleton.js";
|
|
17
17
|
import "../../table/table.js";
|
|
18
|
-
import { useIsMobile as
|
|
19
|
-
import { useObservedWidthKey as
|
|
20
|
-
import { PoolAssetsTableTest as
|
|
21
|
-
import { PoolAssetsTableHead as
|
|
22
|
-
import { PoolAssetsTableRow as
|
|
23
|
-
const
|
|
24
|
-
function
|
|
18
|
+
import { useIsMobile as h } from "../../../hooks/use-media-query.js";
|
|
19
|
+
import { useObservedWidthKey as u } from "../../../hooks/use-observed-width-key.js";
|
|
20
|
+
import { PoolAssetsTableTest as x } from "./constants.js";
|
|
21
|
+
import { PoolAssetsTableHead as v } from "./pool-assets-table-head.js";
|
|
22
|
+
import { PoolAssetsTableRow as w } from "./pool-assets-table-row.js";
|
|
23
|
+
const A = 680;
|
|
24
|
+
function U({
|
|
25
25
|
list: t,
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
underlyingToken: l
|
|
26
|
+
sort: s,
|
|
27
|
+
underlyingToken: p
|
|
29
28
|
}) {
|
|
30
|
-
const
|
|
31
|
-
return /* @__PURE__ */ o(
|
|
32
|
-
|
|
29
|
+
const l = h(), { ref: a, widthKey: m } = u(), i = m > 0 ? m < A : l, d = t.reduce((r, e) => r + e.used.value, 0n);
|
|
30
|
+
return /* @__PURE__ */ o(c, { ref: a, className: "overflow-hidden rounded-lg p-2", children: /* @__PURE__ */ n(
|
|
31
|
+
f,
|
|
33
32
|
{
|
|
34
33
|
cols: i ? "1fr" : "1fr max-content max-content minmax(0,1fr)",
|
|
35
|
-
"data-testid":
|
|
34
|
+
"data-testid": x.root,
|
|
36
35
|
gap: 0,
|
|
37
36
|
size: "lg",
|
|
38
37
|
wrapperClassName: "overflow-visible",
|
|
39
38
|
children: [
|
|
40
|
-
!i && /* @__PURE__ */ o(
|
|
41
|
-
/* @__PURE__ */ o(
|
|
42
|
-
|
|
39
|
+
!i && /* @__PURE__ */ o(b, { children: /* @__PURE__ */ o(v, { sort: s }) }),
|
|
40
|
+
/* @__PURE__ */ o(T, { children: t.map((r, e) => /* @__PURE__ */ o(
|
|
41
|
+
w,
|
|
43
42
|
{
|
|
44
43
|
asset: r,
|
|
45
|
-
|
|
46
|
-
underlyingToken: l,
|
|
44
|
+
underlyingToken: p,
|
|
47
45
|
last: e === t.length - 1,
|
|
48
46
|
isCompact: i,
|
|
49
|
-
totalUsed:
|
|
47
|
+
totalUsed: d,
|
|
50
48
|
colorIndex: e
|
|
51
49
|
},
|
|
52
50
|
r.token.address
|
|
@@ -56,5 +54,5 @@ function q({
|
|
|
56
54
|
) });
|
|
57
55
|
}
|
|
58
56
|
export {
|
|
59
|
-
|
|
57
|
+
U as PoolAssetsTable
|
|
60
58
|
};
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { QuotaAsset, Token } from '@gearbox-protocol/sdk/model';
|
|
2
2
|
import { default as React } from 'react';
|
|
3
3
|
export interface PoolAssetsTableRowProps {
|
|
4
|
-
readonly poolName: string;
|
|
5
4
|
readonly asset: QuotaAsset;
|
|
6
5
|
readonly underlyingToken: Token;
|
|
7
6
|
readonly last: boolean;
|
|
@@ -12,4 +11,4 @@ export interface PoolAssetsTableRowProps {
|
|
|
12
11
|
/**
|
|
13
12
|
* Single data row: token name, exposure (amount + pie), cap, and cap utilization.
|
|
14
13
|
*/
|
|
15
|
-
export declare function PoolAssetsTableRow({
|
|
14
|
+
export declare function PoolAssetsTableRow({ asset, underlyingToken, last, isCompact, totalUsed, colorIndex, }: PoolAssetsTableRowProps): React.ReactElement;
|
|
@@ -3,7 +3,6 @@ import { default as React } from 'react';
|
|
|
3
3
|
import { PoolAssetsTableSort } from './types';
|
|
4
4
|
export interface PoolAssetsTableProps {
|
|
5
5
|
readonly list: ReadonlyArray<QuotaAsset>;
|
|
6
|
-
readonly poolName: string;
|
|
7
6
|
readonly sort: PoolAssetsTableSort;
|
|
8
7
|
readonly underlyingToken: Token;
|
|
9
8
|
}
|
|
@@ -11,4 +10,4 @@ export interface PoolAssetsTableProps {
|
|
|
11
10
|
* Grid table of pool asset quotas: exposure, cap, and cap utilization.
|
|
12
11
|
* Collapses into stacked cards below {@link COMPACT_WIDTH_THRESHOLD}.
|
|
13
12
|
*/
|
|
14
|
-
export declare function PoolAssetsTable({ list,
|
|
13
|
+
export declare function PoolAssetsTable({ list, sort, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;
|