@0xchain/table 1.1.0-beta.2 → 1.1.0-beta.21
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/LICENSE +21 -0
- package/dist/filters/Address.d.ts.map +1 -1
- package/dist/filters/Amount.d.ts +1 -1
- package/dist/filters/Amount.d.ts.map +1 -1
- package/dist/filters/TimeRange.d.ts.map +1 -1
- package/dist/filters/Token.d.ts.map +1 -1
- package/dist/filters/TokenSearch.d.ts.map +1 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +483 -321
- package/package.json +38 -22
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024-present 0xchain
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../src/filters/Address.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../src/filters/Address.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CAAE,2CA+CpF"}
|
package/dist/filters/Amount.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Amount.d.ts","sourceRoot":"","sources":["../../src/filters/Amount.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Amount.d.ts","sourceRoot":"","sources":["../../src/filters/Amount.tsx"],"names":[],"mappings":"AAOA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAE,2CA6E/G"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TimeRange.d.ts","sourceRoot":"","sources":["../../src/filters/TimeRange.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"TimeRange.d.ts","sourceRoot":"","sources":["../../src/filters/TimeRange.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,iBAAiB,CAAA;AACxB,OAAO,oBAAoB,CAAA;AAC3B,OAAO,oBAAoB,CAAA;AAC3B,OAAO,iBAAiB,CAAA;AACxB,OAAO,iBAAiB,CAAA;AAexB,UAAU,wBAAyB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC/F,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAA;CACjE;AAED,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,EAC1C,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,wBAAwB,2CAqG1B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/filters/Token.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/filters/Token.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAmB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AASnE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,IAAI,CAAA;CAAE,2CA2E9F"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TokenSearch.d.ts","sourceRoot":"","sources":["../../src/filters/TokenSearch.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"TokenSearch.d.ts","sourceRoot":"","sources":["../../src/filters/TokenSearch.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAe,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQ/D,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,IAAI,CAAA;CAAE,2CAwEpG"}
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAC;IAChC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,SAAS,EAAE,CAAC;IACtF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,MAAM,CAAC,EAAE,WAAW,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,CAAC;IACtE,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,CAAC,EAAE,GAAG,KAAK,MAAM,CAAC;IAC7E,WAAW,CAAC,EAAE;QACZ,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;QAC7B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;KACjC,CAAA;CACF;AACD,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC/E,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;IACjB,OAAO,EAAE,kBAAkB,EAAE,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC;IAC9D,cAAc,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,KAAK,IAAI,CAAC;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IAC9B,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,KAAK,GAAG,MAAM,KAAK,IAAI,CAAC;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAC;CACzB;AAWD,eAAO,MAAM,iBAAiB,GAAI,cAAc,GAAG,QAkClD,CAAA;AACD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,UAAiB,EAAE,cAAc,EAAE,cAAc,EAAE,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAgNvQ"}
|
package/dist/index.js
CHANGED
|
@@ -1,414 +1,576 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx
|
|
3
|
-
import { Table
|
|
4
|
-
import * as
|
|
5
|
-
import
|
|
6
|
-
import { startOfDay
|
|
7
|
-
import { twMerge
|
|
8
|
-
import { DatePicker
|
|
9
|
-
import
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@0xchain/ui/table";
|
|
4
|
+
import * as React from "react";
|
|
5
|
+
import React__default, { useState, useEffect } from "react";
|
|
6
|
+
import { startOfDay, endOfDay } from "date-fns";
|
|
7
|
+
import { twMerge } from "tailwind-merge";
|
|
8
|
+
import { DatePicker } from "antd";
|
|
9
|
+
import dayjs from "dayjs";
|
|
10
10
|
import "dayjs/locale/en";
|
|
11
11
|
import "dayjs/locale/zh-cn";
|
|
12
12
|
import "dayjs/locale/zh-tw";
|
|
13
13
|
import "dayjs/locale/ja";
|
|
14
14
|
import "dayjs/locale/ko";
|
|
15
|
-
import
|
|
16
|
-
import
|
|
17
|
-
import
|
|
18
|
-
import
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import { Popover
|
|
22
|
-
import { useLocale
|
|
23
|
-
import { X
|
|
24
|
-
import
|
|
25
|
-
import
|
|
26
|
-
import
|
|
27
|
-
import
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import
|
|
31
|
-
import
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
onChange: i,
|
|
37
|
-
...c
|
|
15
|
+
import enUSPicker from "antd/es/date-picker/locale/en_US";
|
|
16
|
+
import zhCNPicker from "antd/es/date-picker/locale/zh_CN";
|
|
17
|
+
import zhTWPicker from "antd/es/date-picker/locale/zh_TW";
|
|
18
|
+
import jaJPPicker from "antd/es/date-picker/locale/ja_JP";
|
|
19
|
+
import koKRPicker from "antd/es/date-picker/locale/ko_KR";
|
|
20
|
+
import IconFont from "@0xchain/iconfont";
|
|
21
|
+
import { Popover, PopoverTrigger, PopoverContent } from "@0xchain/ui/popover";
|
|
22
|
+
import { useLocale, useTranslations } from "next-intl";
|
|
23
|
+
import { X, Search } from "lucide-react";
|
|
24
|
+
import Translation from "@0xchain/translation";
|
|
25
|
+
import ImageBar from "@0xchain/image";
|
|
26
|
+
import request from "@0xchain/request";
|
|
27
|
+
import { useParams } from "next/navigation";
|
|
28
|
+
import { Checkbox } from "@0xchain/ui/checkbox";
|
|
29
|
+
import { useDebounceFn } from "ahooks";
|
|
30
|
+
import Empty from "@0xchain/empty";
|
|
31
|
+
import Loading from "@0xchain/loading";
|
|
32
|
+
function DatePickerWithRange({
|
|
33
|
+
className,
|
|
34
|
+
onChange,
|
|
35
|
+
...props
|
|
38
36
|
}) {
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
37
|
+
const locale = useLocale();
|
|
38
|
+
const [open, setOpen] = React.useState(false);
|
|
39
|
+
const containerRef = React.useRef(null);
|
|
40
|
+
const [panelRange, setPanelRange] = React.useState(null);
|
|
41
|
+
const dpLocaleMap = {
|
|
42
|
+
en: enUSPicker,
|
|
43
|
+
"zh-hans": zhCNPicker,
|
|
44
|
+
"zh-hant": zhTWPicker,
|
|
45
|
+
ja: jaJPPicker,
|
|
46
|
+
ko: koKRPicker
|
|
47
|
+
};
|
|
48
|
+
const dayjsLocaleKeyMap = {
|
|
46
49
|
en: "en",
|
|
47
50
|
"zh-hans": "zh-cn",
|
|
48
51
|
"zh-hant": "zh-tw",
|
|
49
52
|
ja: "ja",
|
|
50
53
|
ko: "ko"
|
|
51
54
|
};
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
}, [
|
|
55
|
-
const
|
|
56
|
-
if (!
|
|
57
|
-
|
|
55
|
+
React.useEffect(() => {
|
|
56
|
+
dayjs.locale(dayjsLocaleKeyMap[locale] ?? "en");
|
|
57
|
+
}, [locale]);
|
|
58
|
+
const closePopover = (selectedDate) => {
|
|
59
|
+
if (!selectedDate) {
|
|
60
|
+
onChange("", "");
|
|
61
|
+
cancelPopover();
|
|
58
62
|
return;
|
|
59
63
|
}
|
|
60
|
-
const [
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
const [from, to] = selectedDate;
|
|
65
|
+
const start = from ? startOfDay(from.toDate()) : void 0;
|
|
66
|
+
const end = to ? endOfDay(to.toDate()) : void 0;
|
|
67
|
+
onChange(start ? Math.floor(start.getTime() / 1e3) : "", end ? Math.floor(end.getTime() / 1e3) : "");
|
|
68
|
+
cancelPopover();
|
|
69
|
+
};
|
|
70
|
+
const cancelPopover = () => {
|
|
71
|
+
setOpen(false);
|
|
72
|
+
};
|
|
73
|
+
const togglePopover = (flag) => {
|
|
74
|
+
if (!flag) {
|
|
75
|
+
closePopover(panelRange);
|
|
76
|
+
} else {
|
|
77
|
+
setOpen(true);
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
const onAntdCalendarChange = (vals) => {
|
|
81
|
+
if (!vals) {
|
|
82
|
+
setPanelRange(null);
|
|
69
83
|
return;
|
|
70
84
|
}
|
|
71
|
-
const [
|
|
72
|
-
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
85
|
+
const [s, e] = vals;
|
|
86
|
+
setPanelRange([s, e]);
|
|
87
|
+
};
|
|
88
|
+
const onAntdChange = (vals) => {
|
|
89
|
+
if (!vals || !vals[0] || !vals[1]) {
|
|
90
|
+
setPanelRange(null);
|
|
91
|
+
onChange("", "");
|
|
92
|
+
cancelPopover();
|
|
76
93
|
return;
|
|
77
94
|
}
|
|
78
|
-
const
|
|
79
|
-
|
|
95
|
+
const sDate = startOfDay(vals[0].toDate());
|
|
96
|
+
const eDate = endOfDay(vals[1].toDate());
|
|
97
|
+
onChange(Math.floor(sDate.getTime() / 1e3), Math.floor(eDate.getTime() / 1e3));
|
|
98
|
+
setPanelRange([vals[0], vals[1]]);
|
|
99
|
+
cancelPopover();
|
|
80
100
|
};
|
|
81
|
-
return /* @__PURE__ */
|
|
82
|
-
/* @__PURE__ */
|
|
83
|
-
/* @__PURE__ */
|
|
84
|
-
|
|
101
|
+
return /* @__PURE__ */ jsx("div", { className: twMerge(className), ...props, children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: togglePopover, children: [
|
|
102
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: " flex items-center justify-center bg-[#F1F1F1] rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(IconFont, { type: "icon-time1", style: { fontSize: "20px", color: "#2A6AF6" } }) }) }),
|
|
103
|
+
/* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "center", side: "right", children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "relative", children: /* @__PURE__ */ jsx(
|
|
104
|
+
DatePicker.RangePicker,
|
|
85
105
|
{
|
|
86
|
-
open:
|
|
106
|
+
open: true,
|
|
87
107
|
size: "small",
|
|
88
|
-
locale:
|
|
89
|
-
allowClear:
|
|
90
|
-
value:
|
|
91
|
-
onCalendarChange:
|
|
92
|
-
onChange:
|
|
93
|
-
getPopupContainer: () =>
|
|
108
|
+
locale: dpLocaleMap[locale],
|
|
109
|
+
allowClear: false,
|
|
110
|
+
value: panelRange ?? [dayjs(), dayjs()],
|
|
111
|
+
onCalendarChange: onAntdCalendarChange,
|
|
112
|
+
onChange: onAntdChange,
|
|
113
|
+
getPopupContainer: () => containerRef.current,
|
|
94
114
|
style: { position: "absolute", opacity: 0, width: 0, height: 0, pointerEvents: "none" },
|
|
95
|
-
disabledDate: (
|
|
115
|
+
disabledDate: (current) => {
|
|
116
|
+
return current && current > dayjs().endOf("day");
|
|
117
|
+
}
|
|
96
118
|
}
|
|
97
119
|
) }) })
|
|
98
120
|
] }) });
|
|
99
121
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
const
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
122
|
+
function Amount({ onChange }) {
|
|
123
|
+
const [open, setOpen] = useState(false);
|
|
124
|
+
const t = useTranslations("common");
|
|
125
|
+
const [min, setMin] = useState("");
|
|
126
|
+
const [max, setMax] = useState("");
|
|
127
|
+
const [sliderValues, setSliderValues] = useState([0.01, 1e10]);
|
|
128
|
+
const handleFromChange = (e) => {
|
|
129
|
+
const value = e.target.value;
|
|
130
|
+
if (value === "" || /^\d*\.?\d{0,8}$/.test(value) && !value.startsWith(".")) {
|
|
131
|
+
setMin(value);
|
|
132
|
+
const numValue = parseFloat(value) || 0;
|
|
133
|
+
setSliderValues([numValue, sliderValues[1]]);
|
|
134
|
+
}
|
|
135
|
+
};
|
|
136
|
+
const handleToChange = (e) => {
|
|
137
|
+
const value = e.target.value;
|
|
138
|
+
if (value === "" || /^\d*\.?\d{0,8}$/.test(value) && !value.startsWith(".")) {
|
|
139
|
+
setMax(value);
|
|
140
|
+
const numValue = parseFloat(value);
|
|
141
|
+
setSliderValues([sliderValues[0], numValue]);
|
|
110
142
|
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
143
|
+
};
|
|
144
|
+
const handleConfirm = () => {
|
|
145
|
+
onChange(min, max);
|
|
146
|
+
setOpen(false);
|
|
147
|
+
};
|
|
148
|
+
const handleCancel = () => {
|
|
149
|
+
setOpen(false);
|
|
150
|
+
};
|
|
151
|
+
const handleMinBlur = (e) => {
|
|
152
|
+
const value = e.target.value;
|
|
153
|
+
if (value === "0") {
|
|
154
|
+
setMin("0.01");
|
|
117
155
|
}
|
|
118
|
-
}, B = () => {
|
|
119
|
-
a(k, g), m(!1);
|
|
120
|
-
}, n = () => {
|
|
121
|
-
m(!1);
|
|
122
|
-
}, o = (p) => {
|
|
123
|
-
p.target.value === "0" && w("0.01");
|
|
124
|
-
}, h = (p) => {
|
|
125
|
-
p.target.value === "0" && b("0.01");
|
|
126
156
|
};
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
157
|
+
const handleMaxBlur = (e) => {
|
|
158
|
+
const value = e.target.value;
|
|
159
|
+
if (value === "0") {
|
|
160
|
+
setMax("0.01");
|
|
161
|
+
}
|
|
162
|
+
};
|
|
163
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
164
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: " flex items-center justify-center bg-[#F1F1F1] rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(IconFont, { type: "icon-filter", style: { fontSize: "20px", color: "#2A6AF6" } }) }) }),
|
|
165
|
+
/* @__PURE__ */ jsx(PopoverContent, { className: "bg-card", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
|
|
166
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between h-9", children: [
|
|
167
|
+
/* @__PURE__ */ jsx("span", { className: "text-sm", children: /* @__PURE__ */ jsx(Translation, { value: "label", parentKey: "common.filter.amount" }) }),
|
|
168
|
+
/* @__PURE__ */ jsx("div", { className: "w-4 h-4 text-foreground text-sm cursor-pointer flex items-center justify-center", onClick: () => handleCancel(), children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }) })
|
|
133
169
|
] }),
|
|
134
|
-
/* @__PURE__ */
|
|
135
|
-
/* @__PURE__ */
|
|
136
|
-
/* @__PURE__ */
|
|
137
|
-
/* @__PURE__ */
|
|
170
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between gap-2 py-3", children: [
|
|
171
|
+
/* @__PURE__ */ jsxs("fieldset", { className: "w-1/2 h-full", children: [
|
|
172
|
+
/* @__PURE__ */ jsx("label", { className: "w-full h-full text-sm", children: /* @__PURE__ */ jsx(Translation, { value: "form", parentKey: "common.filter.amount" }) }),
|
|
173
|
+
/* @__PURE__ */ jsx("input", { type: "text", inputMode: "decimal", pattern: "[0-9]*\\.?[0-9]{0,8}", onBlur: handleMinBlur, placeholder: t("filter.amount.min"), className: "w-full h-full bg-card text-sm border-1 border-gray-300 rounded p-2 my-2 focus-visible:outline-primary placeholder:text-gray-400", value: min, onChange: handleFromChange })
|
|
138
174
|
] }),
|
|
139
|
-
/* @__PURE__ */
|
|
140
|
-
/* @__PURE__ */
|
|
141
|
-
/* @__PURE__ */
|
|
142
|
-
] })
|
|
143
|
-
] }),
|
|
144
|
-
/* @__PURE__ */ l("div", { className: " w-full pb-4", children: [
|
|
145
|
-
/* @__PURE__ */ l(
|
|
146
|
-
Y.Root,
|
|
147
|
-
{
|
|
148
|
-
className: "w-full relative flex items-center justify-center h-1 flex-grow bg-background rounded-sm touch-pan-y select-none",
|
|
149
|
-
value: d,
|
|
150
|
-
onValueChange: C,
|
|
151
|
-
max: 1e10,
|
|
152
|
-
min: 0.01,
|
|
153
|
-
step: 1,
|
|
154
|
-
children: [
|
|
155
|
-
/* @__PURE__ */ e(Y.Track, { className: "h-1 rounded-full bg-primary", children: /* @__PURE__ */ e(Y.Range, { className: "h-1 absolute bg-primary rounded-full" }) }),
|
|
156
|
-
/* @__PURE__ */ e(Y.Thumb, { className: "block w-3 h-3 bg-primary rounded-full cursor-pointer touch-none", "aria-label": "Min value" }),
|
|
157
|
-
/* @__PURE__ */ e(Y.Thumb, { className: "block w-3 h-3 bg-primary rounded-full cursor-pointer touch-none", "aria-label": "Max value" })
|
|
158
|
-
]
|
|
159
|
-
}
|
|
160
|
-
),
|
|
161
|
-
/* @__PURE__ */ l("div", { className: "flex justify-between text-xs text-gray-500 mt-2", children: [
|
|
162
|
-
/* @__PURE__ */ e($, { addonBefore: i === "valueUSD" ? /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "$" }) : void 0, number: "0.01", minimumFractionDigits: 2, notation: "compact", maximumFractionDigits: 20 }),
|
|
163
|
-
/* @__PURE__ */ e($, { addonBefore: i === "valueUSD" ? /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "$" }) : void 0, number: "10000000000", notation: "compact", maximumFractionDigits: 2 })
|
|
175
|
+
/* @__PURE__ */ jsxs("fieldset", { className: "w-1/2 h-full", children: [
|
|
176
|
+
/* @__PURE__ */ jsx("label", { className: "w-full h-full text-sm", children: /* @__PURE__ */ jsx(Translation, { value: "to", parentKey: "common.filter.amount" }) }),
|
|
177
|
+
/* @__PURE__ */ jsx("input", { type: "text", inputMode: "decimal", pattern: "[0-9]*\\.?[0-9]{0,8}", onBlur: handleMaxBlur, placeholder: t("filter.amount.max"), className: "w-full h-full bg-card text-sm border-1 border-gray-300 rounded p-2 my-2 focus-visible:outline-primary placeholder:text-gray-400", value: max, onChange: handleToChange })
|
|
164
178
|
] })
|
|
165
179
|
] }),
|
|
166
|
-
/* @__PURE__ */
|
|
167
|
-
/* @__PURE__ */
|
|
168
|
-
/* @__PURE__ */
|
|
180
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center", children: [
|
|
181
|
+
/* @__PURE__ */ jsx("button", { className: "bg-card text-foreground text-sm px-3 py-1 border border-border rounded-lg ml-3 cursor-pointer", onClick: handleCancel, children: t("button.cancel") }),
|
|
182
|
+
/* @__PURE__ */ jsx("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded-lg ml-3 cursor-pointer", onClick: handleConfirm, children: t("button.confirm") })
|
|
169
183
|
] })
|
|
170
184
|
] }) })
|
|
171
185
|
] });
|
|
172
186
|
}
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
const
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
a(
|
|
180
|
-
|
|
181
|
-
|
|
187
|
+
function Address({ onChange }) {
|
|
188
|
+
const [open, setOpen] = useState(false);
|
|
189
|
+
const t = useTranslations("common");
|
|
190
|
+
const [address, setAddress] = useState("");
|
|
191
|
+
const handleAddressChange = (e) => {
|
|
192
|
+
const value = e.target.value;
|
|
193
|
+
if (value === "" || /^[a-zA-Z0-9]*$/.test(value)) {
|
|
194
|
+
setAddress(value);
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
const handleConfirm = () => {
|
|
198
|
+
onChange(address);
|
|
199
|
+
setOpen(false);
|
|
182
200
|
};
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
201
|
+
const handleCancel = () => {
|
|
202
|
+
setOpen(false);
|
|
203
|
+
};
|
|
204
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
205
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: " flex items-center justify-center bg-[#F1F1F1] rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(IconFont, { type: "icon-serch", style: { fontSize: "20px", color: "#2A6AF6" } }) }) }),
|
|
206
|
+
/* @__PURE__ */ jsx(PopoverContent, { className: "bg-card", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
|
|
207
|
+
/* @__PURE__ */ jsxs("fieldset", { className: "w-full h-full", children: [
|
|
208
|
+
/* @__PURE__ */ jsxs("label", { className: "w-full h-full text-sm flex items-center justify-between", children: [
|
|
209
|
+
t("filter.address.label"),
|
|
210
|
+
/* @__PURE__ */ jsx("div", { className: "w-4 h-4 text-f text-sm cursor-pointer flex items-center justify-center", onClick: () => handleCancel(), children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4" }) })
|
|
190
211
|
] }),
|
|
191
|
-
/* @__PURE__ */
|
|
192
|
-
/* @__PURE__ */
|
|
193
|
-
/* @__PURE__ */
|
|
212
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full relative text-sm ", children: [
|
|
213
|
+
/* @__PURE__ */ jsx(Search, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
|
|
214
|
+
/* @__PURE__ */ jsx("input", { placeholder: t("filter.amount.label"), type: "text", pattern: "[a-zA-Z0-9]*", className: "pl-6 w-full h-full bg-card text-sm border-1 border-gray-300 rounded p-2 my-2 focus-visible:outline-primary placeholder:text-gray-400", value: address, onChange: handleAddressChange })
|
|
194
215
|
] })
|
|
195
216
|
] }),
|
|
196
|
-
/* @__PURE__ */
|
|
197
|
-
/* @__PURE__ */
|
|
198
|
-
/* @__PURE__ */
|
|
217
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center mt-2", children: [
|
|
218
|
+
/* @__PURE__ */ jsx("button", { className: "bg-card text-foreground text-sm px-3 py-1 border rounded ml-3 cursor-pointer", onClick: handleCancel, children: t("button.cancel") }),
|
|
219
|
+
/* @__PURE__ */ jsx("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded ml-3 cursor-pointer", onClick: handleConfirm, children: t("button.confirm") })
|
|
199
220
|
] })
|
|
200
221
|
] }) })
|
|
201
222
|
] });
|
|
202
223
|
}
|
|
203
|
-
const
|
|
204
|
-
params: {
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
224
|
+
const getHotTokenList = (params) => {
|
|
225
|
+
return request.get(`/api/v2/tokens/hot-list`, { params: { ...params, limit: 100, page: 1 } });
|
|
226
|
+
};
|
|
227
|
+
const searchToken = (search) => {
|
|
228
|
+
return request.get(`/api/token/list/verified`, {
|
|
229
|
+
params: {
|
|
230
|
+
search,
|
|
231
|
+
page: 1,
|
|
232
|
+
size: 100
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
};
|
|
236
|
+
function Token({ onChange }) {
|
|
237
|
+
const { chain } = useParams();
|
|
238
|
+
const t = useTranslations("common.filter.amount");
|
|
239
|
+
const [open, setOpen] = useState(false);
|
|
240
|
+
const [token, setToken] = useState("");
|
|
241
|
+
const [tokenList, setTokenList] = useState([]);
|
|
242
|
+
const [selectedToken, setSelectedToken] = useState([]);
|
|
243
|
+
const handleCancel = () => {
|
|
244
|
+
setOpen(false);
|
|
245
|
+
};
|
|
246
|
+
const handleConfirm = () => {
|
|
247
|
+
onChange(selectedToken);
|
|
248
|
+
setOpen(false);
|
|
249
|
+
};
|
|
250
|
+
const tokenChange = (item) => {
|
|
251
|
+
if (selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress)) {
|
|
252
|
+
setSelectedToken(selectedToken.filter((token2) => token2.tokenAddress !== item.tokenAddress));
|
|
253
|
+
} else {
|
|
254
|
+
setSelectedToken([...selectedToken, item]);
|
|
255
|
+
}
|
|
256
|
+
};
|
|
257
|
+
const loadData = useDebounceFn(async () => {
|
|
258
|
+
const res = await getHotTokenList({
|
|
259
|
+
chain,
|
|
260
|
+
text: token,
|
|
221
261
|
limit: 100,
|
|
222
262
|
page: 1
|
|
223
263
|
});
|
|
224
|
-
|
|
264
|
+
setTokenList(res?.data || []);
|
|
225
265
|
}, { wait: 300 });
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
}, [
|
|
229
|
-
|
|
230
|
-
/* @__PURE__ */
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
/* @__PURE__ */
|
|
266
|
+
useEffect(() => {
|
|
267
|
+
loadData.run();
|
|
268
|
+
}, [chain, token]);
|
|
269
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
270
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: " flex items-center justify-center bg-[#F1F1F1] rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(IconFont, { type: "icon-serch", style: { fontSize: "20px", color: "#2A6AF6" } }) }) }),
|
|
271
|
+
/* @__PURE__ */ jsxs(PopoverContent, { className: "py-5 bg-card", children: [
|
|
272
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
|
|
273
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between h-9", children: [
|
|
274
|
+
/* @__PURE__ */ jsx("span", { className: "text-base text-foreground", children: /* @__PURE__ */ jsx(Translation, { value: "label", parentKey: "common.filter.token" }) }),
|
|
275
|
+
/* @__PURE__ */ jsx("div", { className: "w-4 h-4 text-foreground text-sm cursor-pointer flex items-center justify-center", onClick: () => handleCancel(), children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-foreground" }) })
|
|
235
276
|
] }),
|
|
236
|
-
/* @__PURE__ */
|
|
237
|
-
/* @__PURE__ */
|
|
238
|
-
/* @__PURE__ */
|
|
277
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full relative text-sm py-3", children: [
|
|
278
|
+
/* @__PURE__ */ jsx(Search, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
|
|
279
|
+
/* @__PURE__ */ jsx("input", { type: "text", placeholder: t("label"), className: "pl-6 w-full h-full bg-card text-sm border border-gray-300 rounded p-2 my-2 focus-visible:outline-primary placeholder:text-gray-400", value: token, onChange: (e) => setToken(e.target.value) })
|
|
239
280
|
] })
|
|
240
281
|
] }),
|
|
241
|
-
/* @__PURE__ */
|
|
242
|
-
/* @__PURE__ */
|
|
243
|
-
/* @__PURE__ */
|
|
244
|
-
/* @__PURE__ */
|
|
282
|
+
/* @__PURE__ */ jsx("ul", { className: "max-h-30 min-h-30 overflow-y-auto overflow-x-hidden w-full", children: tokenList?.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex h-10 flex-row items-center gap-3 hover:bg-background hover:rounded-sm p-2 cursor-pointer overflow-hidden", onClick: () => tokenChange(item), children: [
|
|
283
|
+
/* @__PURE__ */ jsx(ImageBar, { src: item.iconUrl, objectFit: "contain", alt: item.tokenSymbol, className: "rounded-full w-4 h-4 min-w-4 min-h-4 flex-shrink-0" }),
|
|
284
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm text-foreground text-left truncate min-w-0 flex-1 overflow-hidden", children: [
|
|
285
|
+
/* @__PURE__ */ jsx("span", { className: "text-foreground", children: item.tokenSymbol }),
|
|
245
286
|
" ",
|
|
246
|
-
/* @__PURE__ */
|
|
287
|
+
/* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: item.tokenName })
|
|
247
288
|
] }),
|
|
248
|
-
/* @__PURE__ */
|
|
249
|
-
] },
|
|
250
|
-
/* @__PURE__ */
|
|
251
|
-
/* @__PURE__ */
|
|
252
|
-
/* @__PURE__ */
|
|
289
|
+
/* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(Checkbox, { className: twMerge("w-4 h-4 cursor-pointer border border-gray-300 rounded-sm", selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress) ? "bg-primary" : "bg-card"), checked: selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress) }) })
|
|
290
|
+
] }, index)) }),
|
|
291
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center mt-2", children: [
|
|
292
|
+
/* @__PURE__ */ jsx("button", { className: "bg-card text-foreground text-sm px-3 py-1 border rounded ml-3 cursor-pointer", onClick: handleCancel, children: /* @__PURE__ */ jsx(Translation, { value: "button.cancel", parentKey: "common" }) }),
|
|
293
|
+
/* @__PURE__ */ jsx("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded ml-3 cursor-pointer", onClick: handleConfirm, children: /* @__PURE__ */ jsx(Translation, { value: "button.confirm", parentKey: "common" }) })
|
|
253
294
|
] })
|
|
254
295
|
] })
|
|
255
296
|
] });
|
|
256
297
|
}
|
|
257
|
-
function
|
|
258
|
-
const { chain
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
298
|
+
function TokenSearch({ onChange }) {
|
|
299
|
+
const { chain = "" } = useParams();
|
|
300
|
+
const t = useTranslations("common.filter.amount");
|
|
301
|
+
const [open, setOpen] = useState(false);
|
|
302
|
+
const [token, setToken] = useState("");
|
|
303
|
+
const [tokenList, setTokenList] = useState([]);
|
|
304
|
+
const [selectedToken, setSelectedToken] = useState([]);
|
|
305
|
+
const handleCancel = () => {
|
|
306
|
+
onChange([]);
|
|
307
|
+
setToken("");
|
|
308
|
+
setSelectedToken([]);
|
|
309
|
+
setOpen(false);
|
|
310
|
+
};
|
|
311
|
+
const handleConfirm = () => {
|
|
312
|
+
onChange(selectedToken);
|
|
313
|
+
setOpen(false);
|
|
268
314
|
};
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
315
|
+
const tokenChange = (item) => {
|
|
316
|
+
if (selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress)) {
|
|
317
|
+
setSelectedToken(selectedToken.filter((token2) => token2.tokenAddress !== item.tokenAddress));
|
|
318
|
+
} else {
|
|
319
|
+
setSelectedToken([...selectedToken, item]);
|
|
320
|
+
}
|
|
321
|
+
};
|
|
322
|
+
const loadData = async () => {
|
|
323
|
+
const res = await searchToken(token);
|
|
324
|
+
setTokenList(res?.data?.content || []);
|
|
325
|
+
};
|
|
326
|
+
useEffect(() => {
|
|
327
|
+
loadData();
|
|
328
|
+
}, [chain, token]);
|
|
329
|
+
return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
|
|
330
|
+
/* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: " flex items-center justify-center bg-[#F1F1F1] rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(IconFont, { type: "icon-serch", style: { fontSize: "20px", color: "#2A6AF6" } }) }) }),
|
|
331
|
+
/* @__PURE__ */ jsxs(PopoverContent, { className: "py-5 bg-card", children: [
|
|
332
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full h-full bg-card", children: [
|
|
333
|
+
/* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between h-9", children: [
|
|
334
|
+
/* @__PURE__ */ jsx("span", { className: "text-base text-foreground", children: /* @__PURE__ */ jsx(Translation, { value: "label", parentKey: "common.filter.token" }) }),
|
|
335
|
+
/* @__PURE__ */ jsx("div", { className: "w-4 h-4 text-foreground text-sm cursor-pointer flex items-center justify-center", onClick: () => handleCancel(), children: /* @__PURE__ */ jsx(X, { className: "w-4 h-4 text-foreground" }) })
|
|
278
336
|
] }),
|
|
279
|
-
/* @__PURE__ */
|
|
280
|
-
/* @__PURE__ */
|
|
281
|
-
/* @__PURE__ */
|
|
337
|
+
/* @__PURE__ */ jsxs("div", { className: "w-full relative bg-card text-sm py-3", children: [
|
|
338
|
+
/* @__PURE__ */ jsx(Search, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
|
|
339
|
+
/* @__PURE__ */ jsx("input", { type: "text", placeholder: t("label"), className: "pl-6 w-full h-full bg-card text-sm border border-gray-300 rounded p-2 my-2 focus-visible:outline-primary placeholder:text-gray-400", value: token, onChange: (e) => setToken(e.target.value) })
|
|
282
340
|
] })
|
|
283
341
|
] }),
|
|
284
|
-
/* @__PURE__ */
|
|
285
|
-
/* @__PURE__ */
|
|
286
|
-
/* @__PURE__ */
|
|
287
|
-
/* @__PURE__ */
|
|
288
|
-
] },
|
|
289
|
-
/* @__PURE__ */
|
|
290
|
-
/* @__PURE__ */
|
|
291
|
-
/* @__PURE__ */
|
|
342
|
+
/* @__PURE__ */ jsx("ul", { className: "max-h-50 min-h-25 overflow-y-auto overflow-x-hidden w-full", children: tokenList?.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex h-10 flex-row items-center gap-3 hover:bg-background hover:rounded-sm p-2 cursor-pointer overflow-hidden", onClick: () => tokenChange(item), children: [
|
|
343
|
+
/* @__PURE__ */ jsx(ImageBar, { src: item.iconUrl, objectFit: "contain", alt: item.tokenName, className: "rounded-full w-4 h-4 min-w-4 min-h-4 flex-shrink-0" }),
|
|
344
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm text-foreground text-left truncate min-w-0 flex-1 overflow-hidden", children: item.tokenName }),
|
|
345
|
+
/* @__PURE__ */ jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsx(Checkbox, { className: twMerge("w-4 h-4 cursor-pointer border border-gray-300 rounded-sm", selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress) ? "bg-primary" : "bg-white"), checked: selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress) }) })
|
|
346
|
+
] }, index)) }),
|
|
347
|
+
/* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center mt-2", children: [
|
|
348
|
+
/* @__PURE__ */ jsx("button", { className: "bg-card text-foreground text-sm px-3 py-1 border rounded ml-3 cursor-pointer", onClick: handleCancel, children: /* @__PURE__ */ jsx(Translation, { value: "button.cancel", parentKey: "common" }) }),
|
|
349
|
+
/* @__PURE__ */ jsx("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded ml-3 cursor-pointer", onClick: handleConfirm, children: /* @__PURE__ */ jsx(Translation, { value: "button.confirm", parentKey: "common" }) })
|
|
292
350
|
] })
|
|
293
351
|
] })
|
|
294
352
|
] });
|
|
295
353
|
}
|
|
296
|
-
const
|
|
297
|
-
|
|
354
|
+
const SortIcon = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHtSURBVHgB7ZfBalNBFIb/M7cmaBGuT2BcCNZVHsG+QWNw3Qw00qyMT5DbJ9Buiujipnsl+gZ5A3EjLu8bNIIVzSVzOhNaKGnTe86EQhf5IARyD8M388/cMwHW3CEIK/Bs/6RhTG3kh2n6T/bz6P4BIoiWaPRP0gf/69/9CI2L35ybbf/68HAMJQaRbJb1wWWB+WAmyYMclERJbPVOd5jRv+ZRw69ODiVqibAPCPRuaQFhZ6v3tw8Fagmie9liDFdrMAiyuA2J5/t/OkRmV1CaJiSPRSwxnxmZgbSeCS+ksYgl5jOriGERaSwiiRBDmBn0pMbUR1VFIgmW7YNlNJ92p02sKkHkfiASBopy87S4qWYDAmq1MptOaxPv/BhKqJwdFkePJlgjQNRF83yUug284ZnuiAZKxkHPtgqsKvHp+POQEH1CJon7/cRau3RfyE4Hk3pDXiL9h/TG9i57TzC+IZ6iKg6RRNe233uTMSIoHW1X1Yh7R8nG+i/VeWdw5aYMqO6YH/MvHWNI1qL9yu112pWrEFDdJ17b9tA3kq+C0uJ85USob1YJIwxeVJRlkhiiJaxtTdjNls+Sabi3+/IYCqJu2137agzHh9c8KsIbEkqi/3ckMBmuxqKKYWWJEItz1DoX8RHxW20MaxY5AxD/nDkC92cTAAAAAElFTkSuQmCC";
|
|
355
|
+
const formatValue = (value) => {
|
|
356
|
+
if (value === null || value === void 0) {
|
|
357
|
+
return "";
|
|
358
|
+
}
|
|
359
|
+
if (typeof value === "object") {
|
|
360
|
+
return JSON.stringify(value);
|
|
361
|
+
}
|
|
362
|
+
return value;
|
|
363
|
+
};
|
|
364
|
+
const formatFilterValue = (filterValues) => {
|
|
365
|
+
const obj = {
|
|
298
366
|
filters: {}
|
|
299
367
|
};
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
368
|
+
Object.keys(filterValues).forEach((key) => {
|
|
369
|
+
if (key === "timestamp") {
|
|
370
|
+
obj.filters.startTime = filterValues.timestamp.start;
|
|
371
|
+
obj.filters.endTime = filterValues.timestamp.end;
|
|
372
|
+
} else if (key === "fromAddress") {
|
|
373
|
+
obj.filters.fromAddress = filterValues.fromAddress.address;
|
|
374
|
+
} else if (key === "toAddress") {
|
|
375
|
+
obj.filters.toAddress = filterValues.toAddress.address;
|
|
376
|
+
} else if (key === "valueUsd") {
|
|
377
|
+
obj.filters.minValueUsd = filterValues.valueUsd.min;
|
|
378
|
+
obj.filters.maxValueUsd = filterValues.valueUsd.max;
|
|
379
|
+
} else if (key === "amount") {
|
|
380
|
+
obj.filters.minAmount = filterValues.amount.min;
|
|
381
|
+
obj.filters.maxAmount = filterValues.amount.max;
|
|
382
|
+
} else if (key === "token") {
|
|
383
|
+
obj.filters.tokenList = filterValues.token.map((item) => item.tokenAddress);
|
|
384
|
+
} else if (key === "tokenSearch") {
|
|
385
|
+
obj.filters.tokenList = filterValues.tokenSearch.map((item) => item.tokenAddress);
|
|
386
|
+
} else if (key === "inputAmount") {
|
|
387
|
+
obj.filters.minInputAmount = filterValues.inputAmount.min;
|
|
388
|
+
obj.filters.maxInputAmount = filterValues.inputAmount.max;
|
|
389
|
+
} else if (key === "outputAmount") {
|
|
390
|
+
obj.filters.minOutputAmount = filterValues.outputAmount.min;
|
|
391
|
+
obj.filters.maxOutputAmount = filterValues.outputAmount.max;
|
|
392
|
+
} else if (key === "fee") {
|
|
393
|
+
obj.filters.minFee = filterValues.fee.min;
|
|
394
|
+
obj.filters.maxFee = filterValues.fee.max;
|
|
395
|
+
}
|
|
396
|
+
});
|
|
397
|
+
return obj.filters;
|
|
303
398
|
};
|
|
304
|
-
function
|
|
305
|
-
const [
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
|
|
399
|
+
function CustomTable({ data, columns, headerClassName, bodyClassName, rowClassName, tableClassName, showHeader = true, renderChildren, onFilterChange, loading, onSortChange, defaultOrder, defaultSortKey, emptyClassName, ...props }) {
|
|
400
|
+
const [filterValues, setFilterValues] = useState(null);
|
|
401
|
+
const [resetKey, setResetKey] = useState({});
|
|
402
|
+
const [sortKey, setSortKey] = useState(defaultSortKey || null);
|
|
403
|
+
const [sortOrder, setSortOrder] = useState(defaultOrder || null);
|
|
404
|
+
const handleFilterChange = (columnKey, value) => {
|
|
405
|
+
setFilterValues((prev) => ({
|
|
406
|
+
...prev,
|
|
407
|
+
[columnKey]: value
|
|
309
408
|
}));
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
409
|
+
};
|
|
410
|
+
const removeFilter = (columnKey) => {
|
|
411
|
+
setFilterValues((prev) => {
|
|
412
|
+
const newValues = { ...prev };
|
|
413
|
+
delete newValues[columnKey];
|
|
414
|
+
return newValues;
|
|
415
|
+
});
|
|
416
|
+
setResetKey((prev) => ({
|
|
417
|
+
...prev,
|
|
418
|
+
[columnKey]: (prev[columnKey] || 0) + 1
|
|
317
419
|
}));
|
|
318
|
-
}
|
|
319
|
-
|
|
420
|
+
};
|
|
421
|
+
const clearAllFilters = () => {
|
|
422
|
+
const nextResetKey = {};
|
|
423
|
+
columns.forEach((column) => {
|
|
424
|
+
if (column.filter) {
|
|
425
|
+
nextResetKey[column.key] = (resetKey[column.key] || 0) + 1;
|
|
426
|
+
}
|
|
427
|
+
});
|
|
428
|
+
setFilterValues({});
|
|
429
|
+
setResetKey((prev) => ({ ...prev, ...nextResetKey }));
|
|
430
|
+
};
|
|
431
|
+
const renderFilter = (column) => {
|
|
432
|
+
switch (column.filter) {
|
|
320
433
|
case "timeRange":
|
|
321
|
-
return /* @__PURE__ */
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
434
|
+
return /* @__PURE__ */ jsx(DatePickerWithRange, { onChange: (start, end) => {
|
|
435
|
+
if (start && end) {
|
|
436
|
+
handleFilterChange(column.key, { start, end });
|
|
437
|
+
column.filterProps?.onChange?.({ start, end });
|
|
438
|
+
} else {
|
|
439
|
+
removeFilter(column.key);
|
|
440
|
+
}
|
|
441
|
+
} }, resetKey[column.key]);
|
|
325
442
|
case "address":
|
|
326
|
-
return /* @__PURE__ */
|
|
327
|
-
|
|
328
|
-
|
|
329
|
-
|
|
443
|
+
return /* @__PURE__ */ jsx(Address, { onChange: (address) => {
|
|
444
|
+
if (address) {
|
|
445
|
+
handleFilterChange(column.key, { address });
|
|
446
|
+
column.filterProps?.onChange?.({ address });
|
|
447
|
+
} else {
|
|
448
|
+
removeFilter(column.key);
|
|
449
|
+
}
|
|
450
|
+
} }, resetKey[column.key]);
|
|
330
451
|
case "amount":
|
|
331
|
-
return /* @__PURE__ */
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
452
|
+
return /* @__PURE__ */ jsx(Amount, { filterKey: column.key, onChange: (min, max) => {
|
|
453
|
+
const obj = {};
|
|
454
|
+
if (min) {
|
|
455
|
+
obj.min = min;
|
|
456
|
+
}
|
|
457
|
+
if (max) {
|
|
458
|
+
obj.max = max;
|
|
459
|
+
}
|
|
460
|
+
if (Object.keys(obj).length > 0) {
|
|
461
|
+
handleFilterChange(column.key, obj);
|
|
462
|
+
column.filterProps?.onChange?.(obj);
|
|
463
|
+
} else {
|
|
464
|
+
removeFilter(column.key);
|
|
465
|
+
}
|
|
466
|
+
} }, resetKey[column.key]);
|
|
336
467
|
case "token":
|
|
337
|
-
return /* @__PURE__ */
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
468
|
+
return /* @__PURE__ */ jsx(Token, { onChange: (token) => {
|
|
469
|
+
if (token) {
|
|
470
|
+
handleFilterChange(column.key, token);
|
|
471
|
+
column.filterProps?.onChange?.(token);
|
|
472
|
+
} else {
|
|
473
|
+
removeFilter(column.key);
|
|
474
|
+
}
|
|
475
|
+
} }, resetKey[column.key]);
|
|
341
476
|
case "tokenSearch":
|
|
342
|
-
return /* @__PURE__ */
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
477
|
+
return /* @__PURE__ */ jsx(TokenSearch, { onChange: (token) => {
|
|
478
|
+
if (token) {
|
|
479
|
+
handleFilterChange(column.key, token);
|
|
480
|
+
column.filterProps?.onChange?.(token);
|
|
481
|
+
} else {
|
|
482
|
+
removeFilter(column.key);
|
|
483
|
+
}
|
|
484
|
+
} }, resetKey[column.key]);
|
|
346
485
|
default:
|
|
347
486
|
return null;
|
|
348
487
|
}
|
|
349
|
-
}
|
|
350
|
-
|
|
351
|
-
|
|
488
|
+
};
|
|
489
|
+
const renderAmount = (value) => {
|
|
490
|
+
if (value.min && !value.max) return `≥ ${value.min}`;
|
|
491
|
+
if (!value.min && value.max) return `≤ ${value.max}`;
|
|
492
|
+
return `${value.min} - ${value.max}`;
|
|
493
|
+
};
|
|
494
|
+
const renderFilterValue = (column, value) => {
|
|
495
|
+
if (!value) return null;
|
|
496
|
+
switch (column.filter) {
|
|
352
497
|
case "timeRange":
|
|
353
|
-
return `${
|
|
498
|
+
return `${dayjs(value.start * 1e3).format("YYYY-MM-DD") || ""} - ${dayjs(value.end * 1e3).format("YYYY-MM-DD") || ""}`;
|
|
354
499
|
case "address":
|
|
355
|
-
return
|
|
500
|
+
return value.address;
|
|
356
501
|
case "amount":
|
|
357
|
-
return
|
|
502
|
+
return renderAmount(value);
|
|
358
503
|
case "token":
|
|
359
|
-
return
|
|
504
|
+
return value.map((item) => item.tokenName).join(", ");
|
|
360
505
|
case "tokenSearch":
|
|
361
|
-
return
|
|
506
|
+
return value.map((item) => item.tokenName).join(", ");
|
|
362
507
|
default:
|
|
363
508
|
return null;
|
|
364
509
|
}
|
|
365
|
-
}
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
510
|
+
};
|
|
511
|
+
const handleSort = (key) => {
|
|
512
|
+
const so = sortOrder === "asc" ? "desc" : "asc";
|
|
513
|
+
setSortKey(key);
|
|
514
|
+
setSortOrder(so);
|
|
515
|
+
onSortChange?.(key, so);
|
|
516
|
+
};
|
|
517
|
+
const showColumn = columns.filter((column) => !column.hidden);
|
|
518
|
+
const showFilter = showColumn.some((column) => column.filter);
|
|
519
|
+
useEffect(() => {
|
|
520
|
+
if (filterValues !== null) {
|
|
521
|
+
onFilterChange?.(filterValues);
|
|
522
|
+
}
|
|
523
|
+
}, [filterValues]);
|
|
524
|
+
return /* @__PURE__ */ jsxs("div", { className: "overflow-auto min-w-full relative", ...props, children: [
|
|
525
|
+
/* @__PURE__ */ jsx(Loading, { loading }),
|
|
526
|
+
showFilter && filterValues && Object.keys(filterValues).length > 0 && /* @__PURE__ */ jsxs("div", { className: "flex flex-row gap-3 flex-nowrap overflow-x-auto scrollbar-hide pb-3", children: [
|
|
527
|
+
showColumn.map((column) => {
|
|
528
|
+
if (!filterValues) return null;
|
|
529
|
+
const filterValue = filterValues?.[column.key];
|
|
530
|
+
if (!filterValue) return null;
|
|
531
|
+
if (Array.isArray(filterValue) && filterValue.length === 0) return null;
|
|
532
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-nowrap gap-2 text-[#C45D10] px-3 py-1 rounded-full border-1 border-[#FFD78D] bg-[#FFFAEB] max-w-full min-w-0 overflow-hidden", children: [
|
|
533
|
+
/* @__PURE__ */ jsxs("div", { className: "text-sm shrink-0", children: [
|
|
534
|
+
column.label,
|
|
535
|
+
":"
|
|
536
|
+
] }),
|
|
537
|
+
/* @__PURE__ */ jsx("div", { className: "text-sm flex-1 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "min-w-0 truncate", children: renderFilterValue(column, filterValue) }) }),
|
|
538
|
+
/* @__PURE__ */ jsx(
|
|
539
|
+
"button",
|
|
540
|
+
{
|
|
541
|
+
onClick: () => removeFilter(column.key),
|
|
542
|
+
className: "shrink-0 hover:bg-background rounded-full p-1",
|
|
543
|
+
children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3 cursor-pointer" })
|
|
544
|
+
}
|
|
545
|
+
)
|
|
546
|
+
] }, column.key);
|
|
547
|
+
}),
|
|
548
|
+
/* @__PURE__ */ jsxs(
|
|
549
|
+
"button",
|
|
550
|
+
{
|
|
551
|
+
onClick: clearAllFilters,
|
|
552
|
+
className: "shrink-0 inline-flex items-center gap-1 px-3 py-1 rounded-full border border-border bg-background text-sm hover:bg-muted",
|
|
553
|
+
children: [
|
|
554
|
+
/* @__PURE__ */ jsx(IconFont, { type: "icon-clear", size: 18 }),
|
|
555
|
+
/* @__PURE__ */ jsx(Translation, { value: "button.clear", parentKey: "common" })
|
|
556
|
+
]
|
|
557
|
+
}
|
|
558
|
+
)
|
|
559
|
+
] }),
|
|
560
|
+
/* @__PURE__ */ jsxs(Table, { className: twMerge("", tableClassName), children: [
|
|
561
|
+
showHeader && /* @__PURE__ */ jsx(TableHeader, { className: twMerge("border-b border-border", headerClassName), children: /* @__PURE__ */ jsx(TableRow, { className: "border-b-0 hover:bg-transparent", children: showColumn.map((column, index) => /* @__PURE__ */ jsx(TableHead, { className: twMerge("text-left", "whitespace-nowrap"), style: { width: column.width }, children: /* @__PURE__ */ jsxs("div", { className: twMerge("flex items-center gap-1 min-w-fit w-full whitespace-nowrap", column.align === "center" && "justify-center", column.align === "right" && "justify-end", column.className?.(column, index)), children: [
|
|
562
|
+
column.label,
|
|
563
|
+
column.filter && renderFilter(column),
|
|
564
|
+
column.sort && /* @__PURE__ */ jsx(ImageBar, { src: SortIcon, alt: "sort", className: twMerge("w-4 h-4 cursor-pointer", sortKey === column.key && "opacity-100", sortOrder === "desc" && "rotate-180"), onClick: () => handleSort(column.key) })
|
|
565
|
+
] }) }, index)) }) }),
|
|
566
|
+
/* @__PURE__ */ jsx(TableBody, { className: twMerge("[&_tr:last-child]:border-b-0", bodyClassName), children: data?.length > 0 ? data.map((row, index) => /* @__PURE__ */ jsxs(React__default.Fragment, { children: [
|
|
567
|
+
/* @__PURE__ */ jsx(TableRow, { className: twMerge("border-r-0 border-l-0 border-t-0 border-b border-border hover:bg-background", rowClassName), children: showColumn.map((column, columnIndex) => /* @__PURE__ */ jsx(TableCell, { className: twMerge("text-left min-w-fit py-4", column.align === "center" && "text-center", column.align === "right" && "text-right", "whitespace-nowrap", column.className?.(column, index, data[index])), style: { width: column.width }, children: column.render ? column.render(row[column.key], row, index) : formatValue(row[column.key]) }, columnIndex)) }, index),
|
|
568
|
+
renderChildren && /* @__PURE__ */ jsx(TableRow, { className: "border-b-0", children: /* @__PURE__ */ jsx(TableCell, { colSpan: showColumn.length, className: "p-0", children: renderChildren(row, index) }) })
|
|
569
|
+
] }, index)) : /* @__PURE__ */ jsx(TableRow, { className: "hover:bg-transparent data-[state=selected]:bg-transparent", children: /* @__PURE__ */ jsx(TableCell, { colSpan: showColumn.length, className: "w-full text-center", children: /* @__PURE__ */ jsx(Empty, { className: twMerge("w-full h-38", emptyClassName) }) }) }) })
|
|
408
570
|
] })
|
|
409
571
|
] });
|
|
410
572
|
}
|
|
411
573
|
export {
|
|
412
|
-
|
|
413
|
-
|
|
574
|
+
CustomTable as default,
|
|
575
|
+
formatFilterValue
|
|
414
576
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@0xchain/table",
|
|
3
|
-
"version": "1.1.0-beta.
|
|
3
|
+
"version": "1.1.0-beta.21",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/index.js",
|
|
6
6
|
"module": "./dist/index.js",
|
|
@@ -17,31 +17,47 @@
|
|
|
17
17
|
"dist",
|
|
18
18
|
"!**/*.tsbuildinfo"
|
|
19
19
|
],
|
|
20
|
-
"
|
|
21
|
-
"
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
"peerDependencies": {
|
|
21
|
+
"@radix-ui/react-slider": "1.3.6",
|
|
22
|
+
"ahooks": "3.9.5",
|
|
23
|
+
"antd": "6.1.1",
|
|
24
|
+
"date-fns": "4.1.0",
|
|
25
|
+
"dayjs": "1.11.19",
|
|
26
|
+
"lucide-react": "0.539.0",
|
|
27
|
+
"next": "16.1.6",
|
|
28
|
+
"next-intl": "4.8.2",
|
|
24
29
|
"react": "19.1.1",
|
|
25
30
|
"react-dom": "19.1.1",
|
|
26
|
-
"tailwind-merge": "3.3.1"
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
"next-intl": "4.6.1",
|
|
30
|
-
"next": "15.5.6",
|
|
31
|
+
"tailwind-merge": "3.3.1"
|
|
32
|
+
},
|
|
33
|
+
"devDependencies": {
|
|
31
34
|
"@0xchain/next-themes": "1.0.0",
|
|
32
|
-
"date-fns": "4.1.0",
|
|
33
|
-
"antd": "6.1.1",
|
|
34
|
-
"ahooks": "3.9.5",
|
|
35
35
|
"@radix-ui/react-slider": "1.3.6",
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
43
|
-
"
|
|
44
|
-
"
|
|
36
|
+
"ahooks": "3.9.5",
|
|
37
|
+
"antd": "6.1.1",
|
|
38
|
+
"date-fns": "4.1.0",
|
|
39
|
+
"dayjs": "1.11.19",
|
|
40
|
+
"lucide-react": "0.539.0",
|
|
41
|
+
"next": "16.1.6",
|
|
42
|
+
"next-intl": "4.8.2",
|
|
43
|
+
"react": "19.1.1",
|
|
44
|
+
"react-dom": "19.1.1",
|
|
45
|
+
"rollup-plugin-preserve-use-client": "3.0.1",
|
|
46
|
+
"tailwind-merge": "3.3.1"
|
|
47
|
+
},
|
|
48
|
+
"dependencies": {
|
|
49
|
+
"@0xchain/empty": "1.1.0-beta.21",
|
|
50
|
+
"@0xchain/loading": "1.1.0-beta.21",
|
|
51
|
+
"@0xchain/image": "1.1.0-beta.21",
|
|
52
|
+
"@0xchain/number-like": "1.1.0-beta.21",
|
|
53
|
+
"@0xchain/request": "1.1.0-beta.21",
|
|
54
|
+
"@0xchain/translation": "1.1.0-beta.21",
|
|
55
|
+
"@0xchain/ui": "1.1.0-beta.21"
|
|
56
|
+
},
|
|
57
|
+
"nx": {
|
|
58
|
+
"tags": [
|
|
59
|
+
"type:ui"
|
|
60
|
+
]
|
|
45
61
|
},
|
|
46
62
|
"publishConfig": {
|
|
47
63
|
"access": "public"
|