@gearbox-protocol/ui-kit 4.0.0-next.11 → 4.0.0-next.12
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/amount-input/token-select-panel.cjs +1 -1
- package/dist/esm/components/base/amount-input/token-select-panel.js +33 -37
- package/dist/types/components/base/amount-input/amount-input.d.ts +3 -2
- package/dist/types/components/base/amount-input/token-select-panel.d.ts +4 -3
- package/package.json +1 -1
|
@@ -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"),p=require("../../confirm-menu/confirm-menu.cjs");require("react-intl");require("../../buttons/button/button.cjs");const b=require("../../vspace/vspace.cjs"),r=require("../../table/grid-table.cjs");require("../../skeleton/skeleton.cjs");require("react");require("@gearbox-protocol/sdk");require("clsx");require("tailwind-merge");require("sonner");const f=require("../../../utils/format-asset-amount.cjs"),h=require("../../../utils/format-money.cjs");require("@gearbox-protocol/sdk/common-utils");require("luxon");require("../../../utils/z-index.cjs");require("../../table/table.cjs");const q=require("../../token-symbol/token-symbol.cjs"),g=require("../../typed-intl/index.cjs"),i=require("./constants.cjs");function _({tokens:n,balances:a,usdPrices:c,onSelect:d,onClose:u}){return e.jsxs("div",{"data-testid":i.AmountInputTest.selectPanel,className:"flex max-h-[calc(100vh-40px)] w-full flex-col overflow-hidden rounded-lg border border-gray-10 bg-modal p-4 shadow-[0_4px_28px_4px_rgba(0,0,0,0.25)] sm:max-h-[560px]",children:[e.jsx(p.ConfirmMenu,{title:e.jsx(g.FormattedMessageTyped,{messageId:"components.amountInput.selectToken"}),onClose:u}),e.jsx(b.VSpace,{size:16}),e.jsx("div",{className:"flex min-h-[260px] flex-col overflow-y-auto pr-1",children:e.jsx(r.GridTable,{cols:"minmax(0,1fr) 120px",gap:0,size:"sm",wrapperClassName:"overflow-visible",children:e.jsx(r.GridTableBody,{children:n.map((s,m)=>{const t=a?.get(s.address)??0n,o=c?.get(s.address),x=Number(t)/10**s.decimals,l=o!==void 0?h.formatMoney(x*o,4):void 0;return e.jsxs(r.GridTableRow,{last:m===n.length-1,height:"56px","data-testid":i.AmountInputTest.selectOption,onRowClick:()=>d(s),children:[e.jsx(r.GridTableCell,{size:"sm",children:e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsx(q.TokenSymbol,{token:s,size:24,showSymbol:!1}),e.jsx("span",{className:"truncate",children:s.name})]})}),e.jsx(r.GridTableCell,{size:"sm",textAlign:"right",children:e.jsxs("div",{children:[e.jsx("div",{className:"block text-xs font-normal tabular-nums text-foreground",children:f.formatAssetAmount(t,s.decimals)}),l!==void 0?e.jsx("div",{className:"block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground",children:l}):null]})})]},s.address)})})})})]})}exports.TokenSelectPanel=_;
|
|
@@ -1,73 +1,69 @@
|
|
|
1
|
-
import { jsxs as
|
|
1
|
+
import { jsxs as o, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { ConfirmMenu as h } from "../../confirm-menu/confirm-menu.js";
|
|
3
3
|
import "react-intl";
|
|
4
4
|
import "../../buttons/button/button.js";
|
|
5
|
-
import { VSpace as
|
|
6
|
-
import { GridTable as
|
|
5
|
+
import { VSpace as u } from "../../vspace/vspace.js";
|
|
6
|
+
import { GridTable as b, GridTableBody as g, GridTableRow as v, GridTableCell as a } from "../../table/grid-table.js";
|
|
7
7
|
import "../../skeleton/skeleton.js";
|
|
8
8
|
import "react";
|
|
9
9
|
import "@gearbox-protocol/sdk";
|
|
10
10
|
import "clsx";
|
|
11
11
|
import "tailwind-merge";
|
|
12
12
|
import "sonner";
|
|
13
|
-
import { formatAssetAmount as
|
|
14
|
-
import { formatMoney as
|
|
13
|
+
import { formatAssetAmount as w } from "../../../utils/format-asset-amount.js";
|
|
14
|
+
import { formatMoney as T } from "../../../utils/format-money.js";
|
|
15
15
|
import "@gearbox-protocol/sdk/common-utils";
|
|
16
16
|
import "luxon";
|
|
17
17
|
import "../../../utils/z-index.js";
|
|
18
18
|
import "../../table/table.js";
|
|
19
|
-
import { TokenSymbol as
|
|
20
|
-
import { FormattedMessageTyped as
|
|
21
|
-
import { AmountInputTest as
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
balances: i,
|
|
29
|
-
usdPrices: p,
|
|
30
|
-
onSelect: c,
|
|
31
|
-
onClose: f
|
|
19
|
+
import { TokenSymbol as y } from "../../token-symbol/token-symbol.js";
|
|
20
|
+
import { FormattedMessageTyped as N } from "../../typed-intl/index.js";
|
|
21
|
+
import { AmountInputTest as s } from "./constants.js";
|
|
22
|
+
function L({
|
|
23
|
+
tokens: i,
|
|
24
|
+
balances: d,
|
|
25
|
+
usdPrices: n,
|
|
26
|
+
onSelect: p,
|
|
27
|
+
onClose: c
|
|
32
28
|
}) {
|
|
33
|
-
return /* @__PURE__ */
|
|
29
|
+
return /* @__PURE__ */ o(
|
|
34
30
|
"div",
|
|
35
31
|
{
|
|
36
|
-
"data-testid":
|
|
32
|
+
"data-testid": s.selectPanel,
|
|
37
33
|
className: "flex max-h-[calc(100vh-40px)] w-full flex-col overflow-hidden rounded-lg border border-gray-10 bg-modal p-4 shadow-[0_4px_28px_4px_rgba(0,0,0,0.25)] sm:max-h-[560px]",
|
|
38
34
|
children: [
|
|
39
35
|
/* @__PURE__ */ e(
|
|
40
36
|
h,
|
|
41
37
|
{
|
|
42
|
-
title: /* @__PURE__ */ e(
|
|
43
|
-
onClose:
|
|
38
|
+
title: /* @__PURE__ */ e(N, { messageId: "components.amountInput.selectToken" }),
|
|
39
|
+
onClose: c
|
|
44
40
|
}
|
|
45
41
|
),
|
|
46
|
-
/* @__PURE__ */ e(
|
|
42
|
+
/* @__PURE__ */ e(u, { size: 16 }),
|
|
47
43
|
/* @__PURE__ */ e("div", { className: "flex min-h-[260px] flex-col overflow-y-auto pr-1", children: /* @__PURE__ */ e(
|
|
48
|
-
|
|
44
|
+
b,
|
|
49
45
|
{
|
|
50
46
|
cols: "minmax(0,1fr) 120px",
|
|
51
47
|
gap: 0,
|
|
52
48
|
size: "sm",
|
|
53
49
|
wrapperClassName: "overflow-visible",
|
|
54
|
-
children: /* @__PURE__ */ e(
|
|
55
|
-
const
|
|
56
|
-
return /* @__PURE__ */
|
|
57
|
-
|
|
50
|
+
children: /* @__PURE__ */ e(g, { children: i.map((r, f) => {
|
|
51
|
+
const t = d?.get(r.address) ?? 0n, l = n?.get(r.address), x = Number(t) / 10 ** r.decimals, m = l !== void 0 ? T(x * l, 4) : void 0;
|
|
52
|
+
return /* @__PURE__ */ o(
|
|
53
|
+
v,
|
|
58
54
|
{
|
|
59
|
-
last:
|
|
55
|
+
last: f === i.length - 1,
|
|
60
56
|
height: "56px",
|
|
61
|
-
"data-testid":
|
|
62
|
-
onRowClick: () =>
|
|
57
|
+
"data-testid": s.selectOption,
|
|
58
|
+
onRowClick: () => p(r),
|
|
63
59
|
children: [
|
|
64
|
-
/* @__PURE__ */ e(
|
|
65
|
-
/* @__PURE__ */ e(
|
|
60
|
+
/* @__PURE__ */ e(a, { size: "sm", children: /* @__PURE__ */ o("div", { className: "flex items-center gap-3", children: [
|
|
61
|
+
/* @__PURE__ */ e(y, { token: r, size: 24, showSymbol: !1 }),
|
|
66
62
|
/* @__PURE__ */ e("span", { className: "truncate", children: r.name })
|
|
67
63
|
] }) }),
|
|
68
|
-
/* @__PURE__ */ e(
|
|
69
|
-
/* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children:
|
|
70
|
-
|
|
64
|
+
/* @__PURE__ */ e(a, { size: "sm", textAlign: "right", children: /* @__PURE__ */ o("div", { children: [
|
|
65
|
+
/* @__PURE__ */ e("div", { className: "block text-xs font-normal tabular-nums text-foreground", children: w(t, r.decimals) }),
|
|
66
|
+
m !== void 0 ? /* @__PURE__ */ e("div", { className: "block text-[11px] font-normal leading-[13px] tabular-nums text-secondary-foreground", children: m }) : null
|
|
71
67
|
] }) })
|
|
72
68
|
]
|
|
73
69
|
},
|
|
@@ -81,5 +77,5 @@ function Q({
|
|
|
81
77
|
);
|
|
82
78
|
}
|
|
83
79
|
export {
|
|
84
|
-
|
|
80
|
+
L as TokenSelectPanel
|
|
85
81
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { AddressMap } from '@gearbox-protocol/sdk';
|
|
1
2
|
import { Token } from '@gearbox-protocol/sdk/model';
|
|
2
3
|
import { default as React } from 'react';
|
|
3
4
|
import { TitleText } from '../text';
|
|
@@ -14,9 +15,9 @@ export interface AmountInputProps {
|
|
|
14
15
|
readonly onToken?: (token: Token) => void;
|
|
15
16
|
readonly balance?: bigint;
|
|
16
17
|
/** Wallet balances by token address — the picker's balance column. */
|
|
17
|
-
readonly balances?:
|
|
18
|
+
readonly balances?: AddressMap<bigint>;
|
|
18
19
|
/** USD price per whole token by address — the picker's USD line. */
|
|
19
|
-
readonly usdPrices?:
|
|
20
|
+
readonly usdPrices?: AddressMap<number>;
|
|
20
21
|
/** Label above the field; defaults to the "Amount" locale string. */
|
|
21
22
|
readonly label?: TitleText;
|
|
22
23
|
/** Label of the balance row; defaults to the "Balance" locale string. */
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
+
import { AddressMap } from '@gearbox-protocol/sdk';
|
|
1
2
|
import { Token } from '@gearbox-protocol/sdk/model';
|
|
2
3
|
import { default as React } from 'react';
|
|
3
4
|
export interface TokenSelectPanelProps {
|
|
4
5
|
readonly tokens: ReadonlyArray<Token>;
|
|
5
|
-
/** Wallet balances by token address
|
|
6
|
-
readonly balances?:
|
|
6
|
+
/** Wallet balances by token address; shows a balance column. */
|
|
7
|
+
readonly balances?: AddressMap<bigint>;
|
|
7
8
|
/** USD price per one whole token by address; shows a USD line under the balance. */
|
|
8
|
-
readonly usdPrices?:
|
|
9
|
+
readonly usdPrices?: AddressMap<number>;
|
|
9
10
|
readonly onSelect: (token: Token) => void;
|
|
10
11
|
readonly onClose: () => void;
|
|
11
12
|
}
|