@gearbox-protocol/ui-kit 4.0.0-next.25 → 4.0.0-next.26
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/base/title-meta/title-meta.cjs +1 -1
- package/dist/cjs/components/base/token-amount/token-amount.cjs +1 -1
- 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/base/title-meta/title-meta.js +37 -37
- package/dist/esm/components/base/token-amount/token-amount.js +11 -11
- package/dist/esm/components/composites/pool-assets-table/pool-assets-table-row.js +51 -49
- package/dist/esm/components/composites/pool-assets-table/pool-assets-table.js +23 -21
- package/dist/types/components/base/token-amount/token-amount.d.ts +6 -1
- package/dist/types/components/composites/pool-assets-table/pool-assets-table-row.d.ts +3 -1
- package/dist/types/components/composites/pool-assets-table/pool-assets-table.d.ts +6 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../link/link.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../link/link.cjs"),g=require("../../network-icon/network-icon.cjs");require("../../network-icon/network-indicator.cjs");const u=require("../../token-icon/token-icon.cjs"),h=require("../../typed-intl/index.cjs"),n=require("../../typography/typography.cjs"),o=require("../stack/stack.cjs"),s=require("./constants.cjs");function T({network:a,curatorName:r,curatorLink:c,onCuratorLinkClick:l,links:d,testId:m=s.TitleMetaTest.root,networkTestId:p=s.TitleMetaTest.network,curatorTestId:x=s.TitleMetaTest.curator}){return e.jsxs(o.Stack,{direction:"row",align:"center",gap:"md",wrap:!0,className:"text-sm text-foreground","data-testid":m,children:[e.jsxs(o.Stack,{direction:"row",align:"center",gap:"sm","data-testid":p,children:[e.jsx(g.NetworkIcon,{network:a,size:16}),e.jsx(n.Typography,{as:"span",className:"text-sm text-foreground",children:a})]}),r?e.jsx(o.Stack,{direction:"row",align:"center",gap:"sm","data-testid":x,children:c?e.jsx(i.Link,{className:"text-sm text-foreground",href:c,external:!0,target:"_blank",size:"sm",onClick:l,children:r}):e.jsx(n.Typography,{as:"span",className:"text-sm text-foreground",children:r})}):e.jsx(n.Typography,{as:"span",className:"text-sm text-foreground",children:e.jsx(h.FormattedMessageTyped,{messageId:"components.titleMeta.unknownCurator"})}),d?.map(t=>e.jsx(i.Link,{className:"inline-flex items-center gap-2 text-sm text-foreground",href:t.href,external:!0,target:"_blank",size:"sm",onClick:t.onClick,"data-testid":s.TitleMetaTest.link,children:e.jsxs(o.Stack,{direction:"row",align:"center",gap:"sm",children:[t.token?e.jsx(u.TokenIcon,{token:t.token,size:16,className:"shrink-0"}):null,t.label||t.token?.symbol?e.jsx(n.Typography,{as:"span",className:"text-sm text-foreground",children:t.label??t.token?.symbol}):null]})},t.href))]})}exports.TitleMetaTest=s.TitleMetaTest;exports.TitleMeta=T;
|
|
@@ -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"),a=require("../stack/stack.cjs"),u=require("../../token-template/token-template.cjs"),c=require("../../typography/typography.cjs"),i=require("../../../utils/format-money.cjs"),o=require("./constants.cjs");function l({data:e,token:t,align:s="end"}){if(e===null)return n.jsx("span",{className:"text-secondary-foreground","data-testid":o.TokenAmountTest.root,children:"—"});const r=t??e.token;return n.jsxs(a.Stack,{gap:"xs",align:s,"data-testid":o.TokenAmountTest.root,children:[n.jsx(u.TokenTemplate,{value:e.value,token:r}),n.jsx(c.Typography,{as:"span",variant:"caption",color:"secondary",children:e.valueUsd===null?"—":i.formatMoney(e.valueUsd)})]})}exports.TokenAmountTest=o.TokenAmountTest;exports.TokenAmount=l;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime");require("react");require("@gearbox-protocol/sdk/onchain");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/onchain");require("clsx");require("tailwind-merge");require("sonner");const v=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 S=require("../../base/values/scalars.cjs");require("../../badge/badge.cjs");require("../../badge/chip.cjs");const a=require("../../typed-intl/index.cjs"),f=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 y=require("../../name-cell/name-cell.cjs"),C=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 r=require("../../table/table-sm.cjs"),A=require("../../token-symbol/token-symbol.cjs"),T=require("../../token-template/token-template.cjs"),k=require("../../vertical-indicator/vertical-indicator.cjs"),c=require("./constants.cjs");function z(l,s){if(s!==0n)return Number(l*10000n/s)}function N(l,s){return s<=0n||l<=0n?0:Number(l*10000n/s)/1e4}function P({asset:l,underlyingToken:s,last:q,isCompact:u,totalUsed:j,colorIndex:g,explorerUrl:m}){const{token:n,limit:o,used:i}=l,_=u?40:21,d=N(i.value,j),p=()=>e.jsx(y.NameCell,{leading:e.jsx(A.TokenSymbol,{size:32,token:n}),title:e.jsx(C.ShortString,{maxLength:_,children:n.symbol})}),x=()=>e.jsxs("div",{className:"flex items-center justify-end gap-2","data-testid":c.PoolAssetsTableTest.exposureCell,children:[e.jsx(f.AllocationWheel,{share:d,colorIndex:g,idle:d===0}),e.jsx(k.VerticalIndicator,{value:e.jsx(T.TokenTemplate,{decimalPartLength:2,precision:2,showSymbol:!1,token:s,value:i.value}),valueDescription:i.valueUsd===null?"—":v.formatMoney(i.valueUsd)})]}),b=()=>e.jsx("div",{"data-testid":c.PoolAssetsTableTest.capCell,children:o.value===0n?e.jsx("span",{children:"—"}):e.jsx(T.TokenTemplate,{decimalPartLength:2,precision:2,showSymbol:!1,token:s,value:o.value})}),h=()=>e.jsx("div",{"data-testid":c.PoolAssetsTableTest.capUtilizationCell,children:e.jsx(S.UtilizationValue,{data:z(i.value,o.value)})});return e.jsx(t.GridTableRow,{last:q,height:"auto",href:m?`${m}/address/${n.address}`:void 0,target:"_blank",style:{minHeight:"75px"},children:u?e.jsx(t.GridTableCell,{className:"px-3 py-0!",size:"sm",span:"full",children:e.jsxs(r.TableLineSm,{className:"w-full",columns:3,columnsXs:3,title:p(),children:[e.jsx(r.TableCellSm,{title:e.jsx(a.FormattedMessageTyped,{messageId:"components.poolAssetsTable.exposure"}),children:x()}),e.jsx(r.TableCellSm,{title:e.jsx(a.FormattedMessageTyped,{messageId:"components.poolAssetsTable.cap"}),children:b()}),e.jsx(r.TableCellSm,{title:e.jsx(a.FormattedMessageTyped,{messageId:"components.poolAssetsTable.capUtilization"}),children:h()})]})}):e.jsxs(e.Fragment,{children:[e.jsx(t.GridTableCell,{className:"pl-4",size:"sm",textAlign:"left",children:p()}),e.jsx(t.GridTableCell,{size:"sm",textAlign:"right",children:x()}),e.jsx(t.GridTableCell,{size:"sm",textAlign:"right",children:b()}),e.jsx(t.GridTableCell,{className:"pr-4",size:"sm",textAlign:"right",children:h()})]})})}exports.PoolAssetsTableRow=P;
|
|
@@ -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"),q=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/onchain");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 p=require("../../../hooks/use-media-query.cjs"),T=require("../../../hooks/use-observed-width-key.cjs"),m=require("./constants.cjs"),_=require("./pool-assets-table-head.cjs"),h=require("./pool-assets-table-row.cjs"),A=680;function x({list:r,sort:n,underlyingToken:a,explorerUrl:c}){const u=p.useIsMobile(),{ref:d,widthKey:l}=T.useObservedWidthKey(),t=l>0?l<A:u,b=r.reduce((s,o)=>s+o.used.value,0n);return e.jsx(q.Card,{ref:d,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":m.PoolAssetsTableTest.root,gap:0,size:"lg",wrapperClassName:"overflow-visible",children:[!t&&e.jsx(i.GridTableHeader,{children:e.jsx(_.PoolAssetsTableHead,{sort:n})}),e.jsx(i.GridTableBody,{children:r.map((s,o)=>e.jsx(h.PoolAssetsTableRow,{asset:s,underlyingToken:a,last:o===r.length-1,isCompact:t,totalUsed:b,colorIndex:o,explorerUrl:c},s.token.address))})]})})}exports.PoolAssetsTable=x;
|
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as n, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { Link as l } from "../../link/link.js";
|
|
3
|
-
import { NetworkIcon as
|
|
3
|
+
import { NetworkIcon as x } from "../../network-icon/network-icon.js";
|
|
4
4
|
import "../../network-icon/network-indicator.js";
|
|
5
5
|
import { TokenIcon as h } from "../../token-icon/token-icon.js";
|
|
6
6
|
import { FormattedMessageTyped as u } from "../../typed-intl/index.js";
|
|
7
7
|
import { Typography as r } from "../../typography/typography.js";
|
|
8
|
-
import { Stack as
|
|
9
|
-
import { TitleMetaTest as
|
|
8
|
+
import { Stack as o } from "../stack/stack.js";
|
|
9
|
+
import { TitleMetaTest as s } from "./constants.js";
|
|
10
10
|
function I({
|
|
11
|
-
network:
|
|
12
|
-
curatorName:
|
|
13
|
-
curatorLink:
|
|
14
|
-
onCuratorLinkClick:
|
|
15
|
-
links:
|
|
16
|
-
testId: p =
|
|
17
|
-
networkTestId: f =
|
|
18
|
-
curatorTestId:
|
|
11
|
+
network: i,
|
|
12
|
+
curatorName: a,
|
|
13
|
+
curatorLink: m,
|
|
14
|
+
onCuratorLinkClick: c,
|
|
15
|
+
links: d,
|
|
16
|
+
testId: p = s.root,
|
|
17
|
+
networkTestId: f = s.network,
|
|
18
|
+
curatorTestId: g = s.curator
|
|
19
19
|
}) {
|
|
20
|
-
return /* @__PURE__ */
|
|
21
|
-
|
|
20
|
+
return /* @__PURE__ */ n(
|
|
21
|
+
o,
|
|
22
22
|
{
|
|
23
23
|
direction: "row",
|
|
24
24
|
align: "center",
|
|
@@ -27,56 +27,56 @@ function I({
|
|
|
27
27
|
className: "text-sm text-foreground",
|
|
28
28
|
"data-testid": p,
|
|
29
29
|
children: [
|
|
30
|
-
/* @__PURE__ */
|
|
31
|
-
|
|
30
|
+
/* @__PURE__ */ n(
|
|
31
|
+
o,
|
|
32
32
|
{
|
|
33
33
|
direction: "row",
|
|
34
34
|
align: "center",
|
|
35
35
|
gap: "sm",
|
|
36
36
|
"data-testid": f,
|
|
37
37
|
children: [
|
|
38
|
-
/* @__PURE__ */
|
|
39
|
-
/* @__PURE__ */
|
|
38
|
+
/* @__PURE__ */ e(x, { network: i, size: 16 }),
|
|
39
|
+
/* @__PURE__ */ e(r, { as: "span", className: "text-sm text-foreground", children: i })
|
|
40
40
|
]
|
|
41
41
|
}
|
|
42
42
|
),
|
|
43
|
-
|
|
44
|
-
|
|
43
|
+
a ? /* @__PURE__ */ e(
|
|
44
|
+
o,
|
|
45
45
|
{
|
|
46
46
|
direction: "row",
|
|
47
47
|
align: "center",
|
|
48
48
|
gap: "sm",
|
|
49
|
-
"data-testid":
|
|
50
|
-
children:
|
|
49
|
+
"data-testid": g,
|
|
50
|
+
children: m ? /* @__PURE__ */ e(
|
|
51
51
|
l,
|
|
52
52
|
{
|
|
53
53
|
className: "text-sm text-foreground",
|
|
54
|
-
href:
|
|
54
|
+
href: m,
|
|
55
55
|
external: !0,
|
|
56
56
|
target: "_blank",
|
|
57
57
|
size: "sm",
|
|
58
|
-
onClick:
|
|
59
|
-
children:
|
|
58
|
+
onClick: c,
|
|
59
|
+
children: a
|
|
60
60
|
}
|
|
61
|
-
) : /* @__PURE__ */
|
|
61
|
+
) : /* @__PURE__ */ e(r, { as: "span", className: "text-sm text-foreground", children: a })
|
|
62
62
|
}
|
|
63
|
-
) : /* @__PURE__ */
|
|
64
|
-
|
|
63
|
+
) : /* @__PURE__ */ e(r, { as: "span", className: "text-sm text-foreground", children: /* @__PURE__ */ e(u, { messageId: "components.titleMeta.unknownCurator" }) }),
|
|
64
|
+
d?.map((t) => /* @__PURE__ */ e(
|
|
65
65
|
l,
|
|
66
66
|
{
|
|
67
67
|
className: "inline-flex items-center gap-2 text-sm text-foreground",
|
|
68
|
-
href:
|
|
68
|
+
href: t.href,
|
|
69
69
|
external: !0,
|
|
70
70
|
target: "_blank",
|
|
71
71
|
size: "sm",
|
|
72
|
-
onClick:
|
|
73
|
-
"data-testid":
|
|
74
|
-
children: [
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
]
|
|
72
|
+
onClick: t.onClick,
|
|
73
|
+
"data-testid": s.link,
|
|
74
|
+
children: /* @__PURE__ */ n(o, { direction: "row", align: "center", gap: "sm", children: [
|
|
75
|
+
t.token ? /* @__PURE__ */ e(h, { token: t.token, size: 16, className: "shrink-0" }) : null,
|
|
76
|
+
t.label || t.token?.symbol ? /* @__PURE__ */ e(r, { as: "span", className: "text-sm text-foreground", children: t.label ?? t.token?.symbol }) : null
|
|
77
|
+
] })
|
|
78
78
|
},
|
|
79
|
-
|
|
79
|
+
t.href
|
|
80
80
|
))
|
|
81
81
|
]
|
|
82
82
|
}
|
|
@@ -84,5 +84,5 @@ function I({
|
|
|
84
84
|
}
|
|
85
85
|
export {
|
|
86
86
|
I as TitleMeta,
|
|
87
|
-
|
|
87
|
+
s as TitleMetaTest
|
|
88
88
|
};
|
|
@@ -1,30 +1,30 @@
|
|
|
1
|
-
import { jsx as r, jsxs as
|
|
2
|
-
import { Stack as
|
|
3
|
-
import { TokenTemplate as
|
|
1
|
+
import { jsx as r, jsxs as i } from "react/jsx-runtime";
|
|
2
|
+
import { Stack as s } from "../stack/stack.js";
|
|
3
|
+
import { TokenTemplate as a } from "../../token-template/token-template.js";
|
|
4
4
|
import { Typography as l } from "../../typography/typography.js";
|
|
5
5
|
import { formatMoney as p } from "../../../utils/format-money.js";
|
|
6
|
-
import { TokenAmountTest as
|
|
6
|
+
import { TokenAmountTest as n } from "./constants.js";
|
|
7
7
|
function v({
|
|
8
8
|
data: o,
|
|
9
|
-
token:
|
|
10
|
-
align:
|
|
9
|
+
token: e,
|
|
10
|
+
align: t = "end"
|
|
11
11
|
}) {
|
|
12
12
|
if (o === null)
|
|
13
13
|
return /* @__PURE__ */ r(
|
|
14
14
|
"span",
|
|
15
15
|
{
|
|
16
16
|
className: "text-secondary-foreground",
|
|
17
|
-
"data-testid":
|
|
17
|
+
"data-testid": n.root,
|
|
18
18
|
children: "—"
|
|
19
19
|
}
|
|
20
20
|
);
|
|
21
|
-
const m =
|
|
22
|
-
return /* @__PURE__ */ s
|
|
23
|
-
/* @__PURE__ */ r(
|
|
21
|
+
const m = e ?? o.token;
|
|
22
|
+
return /* @__PURE__ */ i(s, { gap: "xs", align: t, "data-testid": n.root, children: [
|
|
23
|
+
/* @__PURE__ */ r(a, { value: o.value, token: m }),
|
|
24
24
|
/* @__PURE__ */ r(l, { as: "span", variant: "caption", color: "secondary", children: o.valueUsd === null ? "—" : p(o.valueUsd) })
|
|
25
25
|
] });
|
|
26
26
|
}
|
|
27
27
|
export {
|
|
28
28
|
v as TokenAmount,
|
|
29
|
-
|
|
29
|
+
n as TokenAmountTest
|
|
30
30
|
};
|
|
@@ -1,76 +1,77 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
1
|
+
import { jsx as e, jsxs as a, Fragment as y } from "react/jsx-runtime";
|
|
2
2
|
import "react";
|
|
3
3
|
import "@gearbox-protocol/sdk/onchain";
|
|
4
4
|
import "clsx";
|
|
5
5
|
import "tailwind-merge";
|
|
6
6
|
import "sonner";
|
|
7
|
-
import { formatMoney as
|
|
7
|
+
import { formatMoney as C } from "../../../utils/format-money.js";
|
|
8
8
|
import "@gearbox-protocol/sdk/common-utils";
|
|
9
9
|
import "luxon";
|
|
10
10
|
import "../../../utils/z-index.js";
|
|
11
11
|
import "../../points-icon/points-icon.js";
|
|
12
|
-
import { UtilizationValue as
|
|
12
|
+
import { UtilizationValue as N } 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 S } 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 k } from "../../name-cell/name-cell.js";
|
|
23
|
+
import { ShortString as w } from "../../short-string/short-string.js";
|
|
24
24
|
import "react-intl";
|
|
25
25
|
import "../../buttons/button/button.js";
|
|
26
|
-
import { GridTableRow as
|
|
26
|
+
import { GridTableRow as L, GridTableCell as o } from "../../table/grid-table.js";
|
|
27
27
|
import "../../skeleton/skeleton.js";
|
|
28
28
|
import "../../table/table.js";
|
|
29
|
-
import { TableLineSm as
|
|
30
|
-
import { TokenSymbol as
|
|
31
|
-
import { TokenTemplate as
|
|
32
|
-
import { VerticalIndicator as
|
|
33
|
-
import { PoolAssetsTableTest as
|
|
34
|
-
function
|
|
29
|
+
import { TableLineSm as U, TableCellSm as n } from "../../table/table-sm.js";
|
|
30
|
+
import { TokenSymbol as I } from "../../token-symbol/token-symbol.js";
|
|
31
|
+
import { TokenTemplate as b } from "../../token-template/token-template.js";
|
|
32
|
+
import { VerticalIndicator as P } from "../../vertical-indicator/vertical-indicator.js";
|
|
33
|
+
import { PoolAssetsTableTest as p } from "./constants.js";
|
|
34
|
+
function j(i, t) {
|
|
35
35
|
if (t !== 0n)
|
|
36
36
|
return Number(i * 10000n / t);
|
|
37
37
|
}
|
|
38
|
-
function
|
|
38
|
+
function B(i, t) {
|
|
39
39
|
return t <= 0n || i <= 0n ? 0 : Number(i * 10000n / t) / 1e4;
|
|
40
40
|
}
|
|
41
41
|
function ue({
|
|
42
42
|
asset: i,
|
|
43
43
|
underlyingToken: t,
|
|
44
|
-
last:
|
|
45
|
-
isCompact:
|
|
46
|
-
totalUsed:
|
|
47
|
-
colorIndex:
|
|
44
|
+
last: x,
|
|
45
|
+
isCompact: c,
|
|
46
|
+
totalUsed: T,
|
|
47
|
+
colorIndex: z,
|
|
48
|
+
explorerUrl: d
|
|
48
49
|
}) {
|
|
49
|
-
const { token:
|
|
50
|
-
|
|
50
|
+
const { token: r, limit: s, used: l } = i, A = c ? 40 : 21, h = B(l.value, T), u = () => /* @__PURE__ */ e(
|
|
51
|
+
k,
|
|
51
52
|
{
|
|
52
|
-
leading: /* @__PURE__ */ e(
|
|
53
|
-
title: /* @__PURE__ */ e(
|
|
53
|
+
leading: /* @__PURE__ */ e(I, { size: 32, token: r }),
|
|
54
|
+
title: /* @__PURE__ */ e(w, { maxLength: A, children: r.symbol })
|
|
54
55
|
}
|
|
55
|
-
),
|
|
56
|
+
), f = () => /* @__PURE__ */ a(
|
|
56
57
|
"div",
|
|
57
58
|
{
|
|
58
59
|
className: "flex items-center justify-end gap-2",
|
|
59
|
-
"data-testid":
|
|
60
|
+
"data-testid": p.exposureCell,
|
|
60
61
|
children: [
|
|
61
62
|
/* @__PURE__ */ e(
|
|
62
|
-
|
|
63
|
+
S,
|
|
63
64
|
{
|
|
64
|
-
share:
|
|
65
|
-
colorIndex:
|
|
66
|
-
idle:
|
|
65
|
+
share: h,
|
|
66
|
+
colorIndex: z,
|
|
67
|
+
idle: h === 0
|
|
67
68
|
}
|
|
68
69
|
),
|
|
69
70
|
/* @__PURE__ */ e(
|
|
70
|
-
|
|
71
|
+
P,
|
|
71
72
|
{
|
|
72
73
|
value: /* @__PURE__ */ e(
|
|
73
|
-
|
|
74
|
+
b,
|
|
74
75
|
{
|
|
75
76
|
decimalPartLength: 2,
|
|
76
77
|
precision: 2,
|
|
@@ -79,30 +80,31 @@ function ue({
|
|
|
79
80
|
value: l.value
|
|
80
81
|
}
|
|
81
82
|
),
|
|
82
|
-
valueDescription: l.valueUsd === null ? "—" :
|
|
83
|
+
valueDescription: l.valueUsd === null ? "—" : C(l.valueUsd)
|
|
83
84
|
}
|
|
84
85
|
)
|
|
85
86
|
]
|
|
86
87
|
}
|
|
87
|
-
),
|
|
88
|
-
|
|
88
|
+
), g = () => /* @__PURE__ */ e("div", { "data-testid": p.capCell, children: s.value === 0n ? /* @__PURE__ */ e("span", { children: "—" }) : /* @__PURE__ */ e(
|
|
89
|
+
b,
|
|
89
90
|
{
|
|
90
91
|
decimalPartLength: 2,
|
|
91
92
|
precision: 2,
|
|
92
93
|
showSymbol: !1,
|
|
93
94
|
token: t,
|
|
94
|
-
value:
|
|
95
|
+
value: s.value
|
|
95
96
|
}
|
|
96
|
-
) }),
|
|
97
|
+
) }), v = () => /* @__PURE__ */ e("div", { "data-testid": p.capUtilizationCell, children: /* @__PURE__ */ e(N, { data: j(l.value, s.value) }) });
|
|
97
98
|
return /* @__PURE__ */ e(
|
|
98
|
-
|
|
99
|
+
L,
|
|
99
100
|
{
|
|
100
|
-
last:
|
|
101
|
+
last: x,
|
|
101
102
|
height: "auto",
|
|
102
|
-
|
|
103
|
+
href: d ? `${d}/address/${r.address}` : void 0,
|
|
104
|
+
target: "_blank",
|
|
103
105
|
style: { minHeight: "75px" },
|
|
104
|
-
children:
|
|
105
|
-
|
|
106
|
+
children: c ? /* @__PURE__ */ e(o, { className: "px-3 py-0!", size: "sm", span: "full", children: /* @__PURE__ */ a(
|
|
107
|
+
U,
|
|
106
108
|
{
|
|
107
109
|
className: "w-full",
|
|
108
110
|
columns: 3,
|
|
@@ -110,33 +112,33 @@ function ue({
|
|
|
110
112
|
title: u(),
|
|
111
113
|
children: [
|
|
112
114
|
/* @__PURE__ */ e(
|
|
113
|
-
|
|
115
|
+
n,
|
|
114
116
|
{
|
|
115
117
|
title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.exposure" }),
|
|
116
|
-
children:
|
|
118
|
+
children: f()
|
|
117
119
|
}
|
|
118
120
|
),
|
|
119
121
|
/* @__PURE__ */ e(
|
|
120
|
-
|
|
122
|
+
n,
|
|
121
123
|
{
|
|
122
124
|
title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.cap" }),
|
|
123
|
-
children:
|
|
125
|
+
children: g()
|
|
124
126
|
}
|
|
125
127
|
),
|
|
126
128
|
/* @__PURE__ */ e(
|
|
127
|
-
|
|
129
|
+
n,
|
|
128
130
|
{
|
|
129
131
|
title: /* @__PURE__ */ e(m, { messageId: "components.poolAssetsTable.capUtilization" }),
|
|
130
|
-
children:
|
|
132
|
+
children: v()
|
|
131
133
|
}
|
|
132
134
|
)
|
|
133
135
|
]
|
|
134
136
|
}
|
|
135
|
-
) }) : /* @__PURE__ */
|
|
137
|
+
) }) : /* @__PURE__ */ a(y, { children: [
|
|
136
138
|
/* @__PURE__ */ e(o, { className: "pl-4", size: "sm", textAlign: "left", children: u() }),
|
|
137
|
-
/* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: h() }),
|
|
138
139
|
/* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: f() }),
|
|
139
|
-
/* @__PURE__ */ e(o, {
|
|
140
|
+
/* @__PURE__ */ e(o, { size: "sm", textAlign: "right", children: g() }),
|
|
141
|
+
/* @__PURE__ */ e(o, { className: "pr-4", size: "sm", textAlign: "right", children: v() })
|
|
140
142
|
] })
|
|
141
143
|
}
|
|
142
144
|
);
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { jsx as o, jsxs as
|
|
2
|
-
import { Card as
|
|
1
|
+
import { jsx as o, jsxs as c } from "react/jsx-runtime";
|
|
2
|
+
import { Card as f } from "../../cards/card/card.js";
|
|
3
3
|
import "clsx";
|
|
4
4
|
import "tailwind-merge";
|
|
5
5
|
import "react";
|
|
@@ -12,40 +12,42 @@ 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 b, GridTableHeader as T, GridTableBody as h } 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 u } from "../../../hooks/use-media-query.js";
|
|
19
|
+
import { useObservedWidthKey as x } from "../../../hooks/use-observed-width-key.js";
|
|
20
|
+
import { PoolAssetsTableTest as v } from "./constants.js";
|
|
21
|
+
import { PoolAssetsTableHead as w } from "./pool-assets-table-head.js";
|
|
22
|
+
import { PoolAssetsTableRow as A } from "./pool-assets-table-row.js";
|
|
23
|
+
const C = 680;
|
|
24
|
+
function q({
|
|
25
25
|
list: t,
|
|
26
26
|
sort: s,
|
|
27
|
-
underlyingToken: p
|
|
27
|
+
underlyingToken: p,
|
|
28
|
+
explorerUrl: l
|
|
28
29
|
}) {
|
|
29
|
-
const
|
|
30
|
-
return /* @__PURE__ */ o(
|
|
31
|
-
|
|
30
|
+
const a = u(), { ref: d, widthKey: m } = x(), i = m > 0 ? m < C : a, n = t.reduce((r, e) => r + e.used.value, 0n);
|
|
31
|
+
return /* @__PURE__ */ o(f, { ref: d, className: "overflow-hidden rounded-lg p-2", children: /* @__PURE__ */ c(
|
|
32
|
+
b,
|
|
32
33
|
{
|
|
33
34
|
cols: i ? "1fr" : "1fr max-content max-content minmax(0,1fr)",
|
|
34
|
-
"data-testid":
|
|
35
|
+
"data-testid": v.root,
|
|
35
36
|
gap: 0,
|
|
36
37
|
size: "lg",
|
|
37
38
|
wrapperClassName: "overflow-visible",
|
|
38
39
|
children: [
|
|
39
|
-
!i && /* @__PURE__ */ o(
|
|
40
|
-
/* @__PURE__ */ o(
|
|
41
|
-
|
|
40
|
+
!i && /* @__PURE__ */ o(T, { children: /* @__PURE__ */ o(w, { sort: s }) }),
|
|
41
|
+
/* @__PURE__ */ o(h, { children: t.map((r, e) => /* @__PURE__ */ o(
|
|
42
|
+
A,
|
|
42
43
|
{
|
|
43
44
|
asset: r,
|
|
44
45
|
underlyingToken: p,
|
|
45
46
|
last: e === t.length - 1,
|
|
46
47
|
isCompact: i,
|
|
47
|
-
totalUsed:
|
|
48
|
-
colorIndex: e
|
|
48
|
+
totalUsed: n,
|
|
49
|
+
colorIndex: e,
|
|
50
|
+
explorerUrl: l
|
|
49
51
|
},
|
|
50
52
|
r.token.address
|
|
51
53
|
)) })
|
|
@@ -54,5 +56,5 @@ function U({
|
|
|
54
56
|
) });
|
|
55
57
|
}
|
|
56
58
|
export {
|
|
57
|
-
|
|
59
|
+
q as PoolAssetsTable
|
|
58
60
|
};
|
|
@@ -21,7 +21,12 @@ type TokenAmountDataProps = {
|
|
|
21
21
|
readonly token: Token;
|
|
22
22
|
};
|
|
23
23
|
export type TokenAmountProps = TokenAmountDataProps & {
|
|
24
|
-
/**
|
|
24
|
+
/**
|
|
25
|
+
* Cross-axis alignment of the token line and the USD caption. Defaults to
|
|
26
|
+
* `end`: nearly every slot this lands in — table cells, info lines, metric
|
|
27
|
+
* rows — is right-aligned, and a flex column ignores the `text-right` its
|
|
28
|
+
* wrapper sets. Pass `start` inside a card, where the left edge is right.
|
|
29
|
+
*/
|
|
25
30
|
readonly align?: TokenAmountAlign;
|
|
26
31
|
};
|
|
27
32
|
export declare function TokenAmount({ data, token, align, }: TokenAmountProps): React.ReactElement;
|
|
@@ -7,8 +7,10 @@ export interface PoolAssetsTableRowProps {
|
|
|
7
7
|
readonly isCompact: boolean;
|
|
8
8
|
readonly totalUsed: bigint;
|
|
9
9
|
readonly colorIndex: number;
|
|
10
|
+
/** Base URL of the chain's explorer; absent leaves the row inert. */
|
|
11
|
+
readonly explorerUrl?: string;
|
|
10
12
|
}
|
|
11
13
|
/**
|
|
12
14
|
* Single data row: token name, exposure (amount + pie), cap, and cap utilization.
|
|
13
15
|
*/
|
|
14
|
-
export declare function PoolAssetsTableRow({ asset, underlyingToken, last, isCompact, totalUsed, colorIndex, }: PoolAssetsTableRowProps): React.ReactElement;
|
|
16
|
+
export declare function PoolAssetsTableRow({ asset, underlyingToken, last, isCompact, totalUsed, colorIndex, explorerUrl, }: PoolAssetsTableRowProps): React.ReactElement;
|
|
@@ -5,9 +5,14 @@ export interface PoolAssetsTableProps {
|
|
|
5
5
|
readonly list: ReadonlyArray<QuotaAsset>;
|
|
6
6
|
readonly sort: PoolAssetsTableSort;
|
|
7
7
|
readonly underlyingToken: Token;
|
|
8
|
+
/**
|
|
9
|
+
* Block explorer base URL of the pool's chain. Given one, each row links to
|
|
10
|
+
* its token's address there; without one the rows stay inert.
|
|
11
|
+
*/
|
|
12
|
+
readonly explorerUrl?: string;
|
|
8
13
|
}
|
|
9
14
|
/**
|
|
10
15
|
* Grid table of pool asset quotas: exposure, cap, and cap utilization.
|
|
11
16
|
* Collapses into stacked cards below {@link COMPACT_WIDTH_THRESHOLD}.
|
|
12
17
|
*/
|
|
13
|
-
export declare function PoolAssetsTable({ list, sort, underlyingToken, }: PoolAssetsTableProps): React.ReactElement | null;
|
|
18
|
+
export declare function PoolAssetsTable({ list, sort, underlyingToken, explorerUrl, }: PoolAssetsTableProps): React.ReactElement | null;
|