@0xchain/table 1.1.0-beta.3 → 1.1.0-beta.30

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024-present 0xchain
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/filters/Address.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Address.d.ts","sourceRoot":"","sources":["../../src/filters/Address.tsx"],"names":[],"mappings":"AAQA,MAAM,CAAC,OAAO,UAAU,OAAO,CAAC,EAAC,QAAQ,EAAC,EAAE;IAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CAAC,2CA+ChF"}
+{"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

@@ -1,4 +1,4 @@
-export default function Amount({ onChange, filterKey }: {
+export default function Amount({ onChange }: {
     onChange: (from: string, to: string) => void;
     filterKey: string;
 }): import("react/jsx-runtime").JSX.Element;

package/dist/filters/Amount.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Amount.d.ts","sourceRoot":"","sources":["../../src/filters/Amount.tsx"],"names":[],"mappings":"AAUA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAC,EAAE;IAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAC,2CAuGtH"}
+{"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"}

package/dist/filters/TimeRange.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeRange.d.ts","sourceRoot":"","sources":["../../src/filters/TimeRange.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAO9B,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"}
+{"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"}

package/dist/filters/Token.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Token.d.ts","sourceRoot":"","sources":["../../src/filters/Token.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAmB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAQnE,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,IAAI,CAAA;CAAE,2CA2E9F"}
+{"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"}

package/dist/filters/TokenSearch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenSearch.d.ts","sourceRoot":"","sources":["../../src/filters/TokenSearch.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAe,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAO/D,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,CAAC,SAAS,EAAE,cAAc,EAAE,KAAK,IAAI,CAAA;CAAE,2CAwEpG"}
+{"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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;AASnD,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,CAAE,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,2CA+LxQ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAUnD,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

@@ -1,414 +1,576 @@
 'use client';
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { Table as ie, TableHeader as ce, TableRow as E, TableHead as de, TableBody as me, TableCell as K } from "@0xchain/ui/table";
-import * as Z from "react";
-import he, { useState as y, useEffect as z } from "react";
-import { startOfDay as q, endOfDay as X } from "date-fns";
-import { twMerge as v } from "tailwind-merge";
-import { DatePicker as ue } from "antd";
-import M from "dayjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Table, TableHeader, TableRow, TableHead, TableBody, TableCell } from "@0xchain/ui/table";
+import * as React from "react";
+import React__default, { useState, useEffect } from "react";
+import { startOfDay, endOfDay } from "date-fns";
+import { twMerge } from "tailwind-merge";
+import { DatePicker } from "antd";
+import dayjs from "dayjs";
 import "dayjs/locale/en";
 import "dayjs/locale/zh-cn";
 import "dayjs/locale/zh-tw";
 import "dayjs/locale/ja";
 import "dayjs/locale/ko";
-import fe from "antd/es/date-picker/locale/en_US";
-import pe from "antd/es/date-picker/locale/zh_CN";
-import Ae from "antd/es/date-picker/locale/zh_TW";
-import be from "antd/es/date-picker/locale/ja_JP";
-import ge from "antd/es/date-picker/locale/ko_KR";
-import D from "@0xchain/image";
-import { Popover as O, PopoverTrigger as U, PopoverContent as Q } from "@0xchain/ui/popover";
-import { useLocale as xe, useTranslations as J } from "next-intl";
-import { X as W, Search as V } from "lucide-react";
-import * as Y from "@radix-ui/react-slider";
-import $ from "@0xchain/number-like";
-import S from "@0xchain/translation";
-import _ from "@0xchain/request";
-import { useParams as ee } from "next/navigation";
-import { Checkbox as te } from "@0xchain/ui/checkbox";
-import { useDebounceFn as ye } from "ahooks";
-import ke from "@0xchain/empty";
-import we from "@0xchain/loading";
-const Ne = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAZCAYAAAArK+5dAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADWSURBVHgB7ZPhDcIgEIUP0wEcQTdwAxjBERzBDcSJdAPbDdwANznBQnIih6TQP02/hJDmwb274wqwaBDRuDVVd3TksLKbivSd1zRzn9PvQognzeSA7VG0gqPfe7sGksnF71dIk9IljJ1QPt5YonfV9HZIhQme1ONYHeR5Vep5A/tQ+xo9ZSCRn5hSZM5Awe+oVhEb9PA9RVMIU5Q0GGxfNVTgW6zC9yZz0EQ/jinRYliDVrBjmhvBkvEMzF7B+gZ/mb2CD7aHZ2zPiRps7bphOx4uJiyCNyogpaxjuzr+AAAAAElFTkSuQmCC";
-function ve({
-  className: a,
-  onChange: i,
-  ...c
+import enUSPicker from "antd/es/date-picker/locale/en_US";
+import zhCNPicker from "antd/es/date-picker/locale/zh_CN";
+import zhTWPicker from "antd/es/date-picker/locale/zh_TW";
+import jaJPPicker from "antd/es/date-picker/locale/ja_JP";
+import koKRPicker from "antd/es/date-picker/locale/ko_KR";
+import IconFont from "@0xchain/iconfont";
+import { Popover, PopoverTrigger, PopoverContent } from "@0xchain/ui/popover";
+import { useLocale, useTranslations } from "next-intl";
+import { X, Search, RotateCcw } from "lucide-react";
+import Translation from "@0xchain/translation";
+import ImageBar from "@0xchain/image";
+import request from "@0xchain/request";
+import { useParams } from "next/navigation";
+import { Checkbox } from "@0xchain/ui/checkbox";
+import { useDebounceFn } from "ahooks";
+import Empty from "@0xchain/empty";
+import Loading from "@0xchain/loading";
+function DatePickerWithRange({
+  className,
+  onChange,
+  ...props
 }) {
-  const m = xe(), [A, k] = Z.useState(!1), w = Z.useRef(null), [g, b] = Z.useState(null), d = {
-    en: fe,
-    "zh-hans": pe,
-    "zh-hant": Ae,
-    ja: be,
-    ko: ge
-  }, f = {
+  const locale = useLocale();
+  const [open, setOpen] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const [panelRange, setPanelRange] = React.useState(null);
+  const dpLocaleMap = {
+    en: enUSPicker,
+    "zh-hans": zhCNPicker,
+    "zh-hant": zhTWPicker,
+    ja: jaJPPicker,
+    ko: koKRPicker
+  };
+  const dayjsLocaleKeyMap = {
     en: "en",
     "zh-hans": "zh-cn",
     "zh-hant": "zh-tw",
     ja: "ja",
     ko: "ko"
   };
-  Z.useEffect(() => {
-    M.locale(f[m] ?? "en");
-  }, [m]);
-  const C = (o) => {
-    if (!o) {
-      i("", ""), N();
+  React.useEffect(() => {
+    dayjs.locale(dayjsLocaleKeyMap[locale] ?? "en");
+  }, [locale]);
+  const closePopover = (selectedDate) => {
+    if (!selectedDate) {
+      onChange("", "");
+      cancelPopover();
       return;
     }
-    const [h, p] = o, x = h ? q(h.toDate()) : void 0, T = p ? X(p.toDate()) : void 0;
-    i(x ? Math.floor(x.getTime() / 1e3) : "", T ? Math.floor(T.getTime() / 1e3) : ""), N();
-  }, N = () => {
-    k(!1);
-  }, R = (o) => {
-    o ? k(!0) : C(g);
-  }, B = (o) => {
-    if (!o) {
-      b(null);
+    const [from, to] = selectedDate;
+    const start = from ? startOfDay(from.toDate()) : void 0;
+    const end = to ? endOfDay(to.toDate()) : void 0;
+    onChange(start ? Math.floor(start.getTime() / 1e3) : "", end ? Math.floor(end.getTime() / 1e3) : "");
+    cancelPopover();
+  };
+  const cancelPopover = () => {
+    setOpen(false);
+  };
+  const togglePopover = (flag) => {
+    if (!flag) {
+      closePopover(panelRange);
+    } else {
+      setOpen(true);
+    }
+  };
+  const onAntdCalendarChange = (vals) => {
+    if (!vals) {
+      setPanelRange(null);
       return;
     }
-    const [h, p] = o;
-    b([h, p]);
-  }, n = (o) => {
-    if (!o || !o[0] || !o[1]) {
-      b(null), i("", ""), N();
+    const [s, e] = vals;
+    setPanelRange([s, e]);
+  };
+  const onAntdChange = (vals) => {
+    if (!vals || !vals[0] || !vals[1]) {
+      setPanelRange(null);
+      onChange("", "");
+      cancelPopover();
       return;
     }
-    const h = q(o[0].toDate()), p = X(o[1].toDate());
-    i(Math.floor(h.getTime() / 1e3), Math.floor(p.getTime() / 1e3)), b([o[0], o[1]]), N();
+    const sDate = startOfDay(vals[0].toDate());
+    const eDate = endOfDay(vals[1].toDate());
+    onChange(Math.floor(sDate.getTime() / 1e3), Math.floor(eDate.getTime() / 1e3));
+    setPanelRange([vals[0], vals[1]]);
+    cancelPopover();
   };
-  return /* @__PURE__ */ e("div", { className: v(a), ...c, children: /* @__PURE__ */ l(O, { open: A, onOpenChange: R, children: [
-    /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ e("i", { className: "w-4 h-4 p-[2px] cursor-pointer flex items-center justify-center bg-primary  rounded-sm", children: /* @__PURE__ */ e(D, { src: Ne, width: 12, height: 12 }) }) }),
-    /* @__PURE__ */ e(Q, { className: "w-auto p-0", align: "center", side: "right", children: /* @__PURE__ */ e("div", { ref: w, className: "relative", children: /* @__PURE__ */ e(
-      ue.RangePicker,
+  return /* @__PURE__ */ jsx("div", { className: twMerge("", className), ...props, children: /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: togglePopover, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: " flex items-center justify-center bg-border rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(IconFont, { type: "icon-time1", style: { fontSize: "20px", color: "#2A6AF6" } }) }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "center", side: "right", children: /* @__PURE__ */ jsx("div", { ref: containerRef, className: "relative", children: /* @__PURE__ */ jsx(
+      DatePicker.RangePicker,
       {
-        open: !0,
+        open: true,
         size: "small",
-        locale: d[m],
-        allowClear: !1,
-        value: g ?? [M(), M()],
-        onCalendarChange: B,
-        onChange: n,
-        getPopupContainer: () => w.current,
+        locale: dpLocaleMap[locale],
+        allowClear: false,
+        value: panelRange ?? [dayjs(), dayjs()],
+        onCalendarChange: onAntdCalendarChange,
+        onChange: onAntdChange,
+        getPopupContainer: () => containerRef.current,
         style: { position: "absolute", opacity: 0, width: 0, height: 0, pointerEvents: "none" },
-        disabledDate: (o) => o && o > M().endOf("day")
+        disabledDate: (current) => {
+          return current && current > dayjs().endOf("day");
+        }
       }
     ) }) })
   ] }) });
 }
-const Ce = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADZSURBVHgB7ZTbDcIwDEVvUAfoCN2AjsAI3YBu0jABGYER2KAjABPABrBBcMARFkjNo/krR7IaWfZ1nDoB/gRQfmGt7enToAw3pdThu4BFQajAS7sSvh3ZwOsj2QVprMk6ofULNWHsmytZg0hcLOc4TCh4FEVqhMVrIT6idELqhnySbHk/ETfkHKlPbsnuLDBMiLuYFjm4u2E/bIW/E/4ecyABLXZa8/H5zjRKQEInFtywxU0MsUIcD2QSWyCb5RVInvcqMs7/ZHerzygNz74Wz0f0mM4pZLAInpppFh6wLb8LAAAAAElFTkSuQmCC";
-function je({ onChange: a, filterKey: i }) {
-  const [c, m] = y(!1), A = J("common"), [k, w] = y(""), [g, b] = y(""), [d, f] = y([0.01, 1e10]), C = (p) => {
-    f(p), w(p[0].toString()), b(p[1].toString());
-  }, N = (p) => {
-    const x = p.target.value;
-    if (x === "" || /^\d*\.?\d{0,8}$/.test(x) && !x.startsWith(".")) {
-      w(x);
-      const T = parseFloat(x) || 0;
-      f([T, d[1]]);
+function Amount({ onChange }) {
+  const [open, setOpen] = useState(false);
+  const t = useTranslations("common");
+  const [min, setMin] = useState("");
+  const [max, setMax] = useState("");
+  const [sliderValues, setSliderValues] = useState([0.01, 1e10]);
+  const handleFromChange = (e) => {
+    const value = e.target.value;
+    if (value === "" || /^\d*\.?\d{0,8}$/.test(value) && !value.startsWith(".")) {
+      setMin(value);
+      const numValue = parseFloat(value) || 0;
+      setSliderValues([numValue, sliderValues[1]]);
+    }
+  };
+  const handleToChange = (e) => {
+    const value = e.target.value;
+    if (value === "" || /^\d*\.?\d{0,8}$/.test(value) && !value.startsWith(".")) {
+      setMax(value);
+      const numValue = parseFloat(value);
+      setSliderValues([sliderValues[0], numValue]);
     }
-  }, R = (p) => {
-    const x = p.target.value;
-    if (x === "" || /^\d*\.?\d{0,8}$/.test(x) && !x.startsWith(".")) {
-      b(x);
-      const T = parseFloat(x);
-      f([d[0], T]);
+  };
+  const handleConfirm = () => {
+    onChange(min, max);
+    setOpen(false);
+  };
+  const handleCancel = () => {
+    setOpen(false);
+  };
+  const handleMinBlur = (e) => {
+    const value = e.target.value;
+    if (value === "0") {
+      setMin("0.01");
     }
-  }, B = () => {
-    a(k, g), m(!1);
-  }, n = () => {
-    m(!1);
-  }, o = (p) => {
-    p.target.value === "0" && w("0.01");
-  }, h = (p) => {
-    p.target.value === "0" && b("0.01");
   };
-  return /* @__PURE__ */ l(O, { open: c, onOpenChange: m, children: [
-    /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "w-[16px] h-[16px] flex items-center justify-center bg-primary rounded-sm cursor-pointer", children: /* @__PURE__ */ e(D, { src: Ce, width: 12, height: 12, objectFit: "contain" }) }) }),
-    /* @__PURE__ */ e(Q, { className: "bg-card", children: /* @__PURE__ */ l("div", { className: "w-full h-full", children: [
-      /* @__PURE__ */ l("div", { className: "flex flex-row items-center justify-between h-9", children: [
-        /* @__PURE__ */ e("span", { className: "text-sm", children: /* @__PURE__ */ e(S, { value: "label", parentKey: "common.filter.amount" }) }),
-        /* @__PURE__ */ e("div", { className: "w-4 h-4 text-black text-sm cursor-pointer flex items-center justify-center", onClick: () => n(), children: /* @__PURE__ */ e(W, { className: "w-4 h-4" }) })
+  const handleMaxBlur = (e) => {
+    const value = e.target.value;
+    if (value === "0") {
+      setMax("0.01");
+    }
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: " flex items-center justify-center bg-border rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(IconFont, { type: "icon-filter", style: { fontSize: "20px", color: "#2A6AF6" } }) }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "bg-card", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between h-9", children: [
+        /* @__PURE__ */ jsx("span", { className: "text-sm", children: /* @__PURE__ */ jsx(Translation, { value: "label", parentKey: "common.filter.amount" }) }),
+        /* @__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" }) })
       ] }),
-      /* @__PURE__ */ l("div", { className: "flex flex-row items-center justify-between gap-2 py-3", children: [
-        /* @__PURE__ */ l("fieldset", { className: "w-1/2 h-full", children: [
-          /* @__PURE__ */ e("label", { className: "w-full h-full text-sm", children: /* @__PURE__ */ e(S, { value: "form", parentKey: "common.filter.amount" }) }),
-          /* @__PURE__ */ e("input", { type: "text", inputMode: "decimal", pattern: "[0-9]*\\.?[0-9]{0,8}", onBlur: o, placeholder: A("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: k, onChange: N })
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between gap-2 py-3", children: [
+        /* @__PURE__ */ jsxs("fieldset", { className: "w-1/2 h-full", children: [
+          /* @__PURE__ */ jsx("label", { className: "w-full h-full text-sm", children: /* @__PURE__ */ jsx(Translation, { value: "form", parentKey: "common.filter.amount" }) }),
+          /* @__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 })
         ] }),
-        /* @__PURE__ */ l("fieldset", { className: "w-1/2 h-full", children: [
-          /* @__PURE__ */ e("label", { className: "w-full h-full text-sm", children: /* @__PURE__ */ e(S, { value: "to", parentKey: "common.filter.amount" }) }),
-          /* @__PURE__ */ e("input", { type: "text", inputMode: "decimal", pattern: "[0-9]*\\.?[0-9]{0,8}", onBlur: h, placeholder: A("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: g, onChange: R })
-        ] })
-      ] }),
-      /* @__PURE__ */ l("div", { className: " w-full pb-4", children: [
-        /* @__PURE__ */ l(
-          Y.Root,
-          {
-            className: "w-full relative flex items-center justify-center h-1 flex-grow bg-background rounded-sm touch-pan-y select-none",
-            value: d,
-            onValueChange: C,
-            max: 1e10,
-            min: 0.01,
-            step: 1,
-            children: [
-              /* @__PURE__ */ e(Y.Track, { className: "h-1 rounded-full bg-primary", children: /* @__PURE__ */ e(Y.Range, { className: "h-1 absolute bg-primary rounded-full" }) }),
-              /* @__PURE__ */ e(Y.Thumb, { className: "block w-3 h-3 bg-primary rounded-full cursor-pointer touch-none", "aria-label": "Min value" }),
-              /* @__PURE__ */ e(Y.Thumb, { className: "block w-3 h-3 bg-primary rounded-full cursor-pointer touch-none", "aria-label": "Max value" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ l("div", { className: "flex justify-between text-xs text-gray-500 mt-2", children: [
-          /* @__PURE__ */ e($, { addonBefore: i === "valueUSD" ? /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "$" }) : void 0, number: "0.01", minimumFractionDigits: 2, notation: "compact", maximumFractionDigits: 20 }),
-          /* @__PURE__ */ e($, { addonBefore: i === "valueUSD" ? /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "$" }) : void 0, number: "10000000000", notation: "compact", maximumFractionDigits: 2 })
+        /* @__PURE__ */ jsxs("fieldset", { className: "w-1/2 h-full", children: [
+          /* @__PURE__ */ jsx("label", { className: "w-full h-full text-sm", children: /* @__PURE__ */ jsx(Translation, { value: "to", parentKey: "common.filter.amount" }) }),
+          /* @__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 })
         ] })
       ] }),
-      /* @__PURE__ */ l("div", { className: "flex justify-end items-center", children: [
-        /* @__PURE__ */ e("button", { className: "bg-card text-black text-sm px-3 py-1 border-1 border-border rounded-lg ml-3 cursor-pointer", onClick: n, children: A("button.cancel") }),
-        /* @__PURE__ */ e("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded-lg ml-3 cursor-pointer", onClick: B, children: A("button.confirm") })
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center", children: [
+        /* @__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") }),
+        /* @__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") })
       ] })
     ] }) })
   ] });
 }
-const H = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFFSURBVHgB5VVRccMwDFV2A+AxCIOZwQyhDGYGC4OGQcegYzAIgZANgcsgY6DJd9Kquk4Te9ef9t3pkpOf/CTFigHuAojoyPZkAY+YyAYyD/8BbdDyRksIVWIU9MrZStY9mSUzvB7fPdmoxLYlAlYFvsvGF/hdsRAee98rn+PWSXWjbhGvC9ySgJc+Z3w57BWvZ9+wJBKYuMkE/7WOhUOSjFGVujmBlglTbi3jM5h8L04kokv5j/xs+fmVEpqmOWR8P3AOiX1OFx4SkQNcASIimT1BPcySiJT6AvWQNn3PMtTpclABFW8vkeS4jlAusF07J0Zls4P1Anri7ZoAq4Zql5uRhP+m+AOsRZx4FRgr63SGPLhx6gc8R9HfuMXTi2oOEyfhq4RYLPb7A0/vjkD2yZsbxa0XKkxKC3m4Fvibxso3cHP4BWMxfN1YKiXJAAAAAElFTkSuQmCC";
-function Re({ onChange: a }) {
-  const [i, c] = y(!1), m = J("common"), [A, k] = y(""), w = (d) => {
-    const f = d.target.value;
-    (f === "" || /^[a-zA-Z0-9]*$/.test(f)) && k(f);
-  }, g = () => {
-    a(A), c(!1);
-  }, b = () => {
-    c(!1);
+function Address({ onChange }) {
+  const [open, setOpen] = useState(false);
+  const t = useTranslations("common");
+  const [address, setAddress] = useState("");
+  const handleAddressChange = (e) => {
+    const value = e.target.value;
+    if (value === "" || /^[a-zA-Z0-9]*$/.test(value)) {
+      setAddress(value);
+    }
+  };
+  const handleConfirm = () => {
+    onChange(address);
+    setOpen(false);
   };
-  return /* @__PURE__ */ l(O, { open: i, onOpenChange: c, children: [
-    /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "w-[16px] h-[16px] flex items-center justify-center bg-primary rounded-sm cursor-pointer", children: /* @__PURE__ */ e(D, { src: H, width: 12, height: 12, objectFit: "contain" }) }) }),
-    /* @__PURE__ */ e(Q, { className: "bg-card", children: /* @__PURE__ */ l("div", { className: "w-full h-full", children: [
-      /* @__PURE__ */ l("fieldset", { className: "w-full h-full", children: [
-        /* @__PURE__ */ l("label", { className: "w-full h-full text-sm flex items-center justify-between", children: [
-          m("filter.address.label"),
-          /* @__PURE__ */ e("div", { className: "w-4 h-4 text-black text-sm  cursor-pointer flex items-center justify-center", onClick: () => b(), children: /* @__PURE__ */ e(W, { className: "w-4 h-4" }) })
+  const handleCancel = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: " flex items-center justify-center bg-border rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(IconFont, { type: "icon-serch", style: { fontSize: "20px", color: "#2A6AF6" } }) }) }),
+    /* @__PURE__ */ jsx(PopoverContent, { className: "bg-card", children: /* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
+      /* @__PURE__ */ jsxs("fieldset", { className: "w-full h-full", children: [
+        /* @__PURE__ */ jsxs("label", { className: "w-full h-full text-sm flex items-center justify-between", children: [
+          t("filter.address.label"),
+          /* @__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" }) })
         ] }),
-        /* @__PURE__ */ l("div", { className: "w-full relative text-sm ", children: [
-          /* @__PURE__ */ e(V, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
-          /* @__PURE__ */ e("input", { placeholder: m("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: A, onChange: w })
+        /* @__PURE__ */ jsxs("div", { className: "w-full relative text-sm ", children: [
+          /* @__PURE__ */ jsx(Search, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
+          /* @__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 })
         ] })
       ] }),
-      /* @__PURE__ */ l("div", { className: "flex justify-end items-center mt-2", children: [
-        /* @__PURE__ */ e("button", { className: "bg-card text-black text-sm px-3 py-1 border-1 border-gray-300 rounded ml-3 cursor-pointer", onClick: b, children: m("button.cancel") }),
-        /* @__PURE__ */ e("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded ml-3 cursor-pointer", onClick: g, children: m("button.confirm") })
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center mt-2", children: [
+        /* @__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") }),
+        /* @__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") })
       ] })
     ] }) })
   ] });
 }
-const Be = (a) => _.get("/api/v2/tokens/hot-list", { params: { ...a, limit: 100, page: 1 } }), Se = (a) => _.get("/api/token/list/verified", {
-  params: {
-    search: a,
-    page: 1,
-    size: 100
-  }
-});
-function Te({ onChange: a }) {
-  const { chain: i } = ee(), c = J("common.filter.amount"), [m, A] = y(!1), [k, w] = y(""), [g, b] = y([]), [d, f] = y([]), C = () => {
-    A(!1);
-  }, N = () => {
-    a(d), A(!1);
-  }, R = (n) => {
-    d.some((o) => o.tokenAddress === n.tokenAddress) ? f(d.filter((o) => o.tokenAddress !== n.tokenAddress)) : f([...d, n]);
-  }, B = ye(async () => {
-    const n = await Be({
-      chain: i,
-      text: k,
+const getHotTokenList = (params) => {
+  return request.get(`/api/v2/tokens/hot-list`, { params: { ...params, limit: 100, page: 1 } });
+};
+const searchToken = (search) => {
+  return request.get(`/api/token/list/verified`, {
+    params: {
+      search,
+      page: 1,
+      size: 100
+    }
+  });
+};
+function Token({ onChange }) {
+  const { chain } = useParams();
+  const t = useTranslations("common.filter.amount");
+  const [open, setOpen] = useState(false);
+  const [token, setToken] = useState("");
+  const [tokenList, setTokenList] = useState([]);
+  const [selectedToken, setSelectedToken] = useState([]);
+  const handleCancel = () => {
+    setOpen(false);
+  };
+  const handleConfirm = () => {
+    onChange(selectedToken);
+    setOpen(false);
+  };
+  const tokenChange = (item) => {
+    if (selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress)) {
+      setSelectedToken(selectedToken.filter((token2) => token2.tokenAddress !== item.tokenAddress));
+    } else {
+      setSelectedToken([...selectedToken, item]);
+    }
+  };
+  const loadData = useDebounceFn(async () => {
+    const res = await getHotTokenList({
+      chain,
+      text: token,
       limit: 100,
       page: 1
     });
-    b((n == null ? void 0 : n.data) || []);
+    setTokenList(res?.data || []);
   }, { wait: 300 });
-  return z(() => {
-    B.run();
-  }, [i, k]), /* @__PURE__ */ l(O, { open: m, onOpenChange: A, children: [
-    /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "w-[16px] h-[16px] flex items-center justify-center bg-primary rounded-sm cursor-pointer", children: /* @__PURE__ */ e(D, { src: H, width: 12, height: 12, objectFit: "contain" }) }) }),
-    /* @__PURE__ */ l(Q, { className: "py-5 bg-card", children: [
-      /* @__PURE__ */ l("div", { className: "w-full h-full", children: [
-        /* @__PURE__ */ l("div", { className: "flex flex-row items-center justify-between h-9", children: [
-          /* @__PURE__ */ e("span", { className: "text-base text-foreground", children: /* @__PURE__ */ e(S, { value: "label", parentKey: "common.filter.token" }) }),
-          /* @__PURE__ */ e("div", { className: "w-4 h-4 text-black text-sm  cursor-pointer flex items-center justify-center", onClick: () => C(), children: /* @__PURE__ */ e(W, { className: "w-4 h-4 text-foreground" }) })
+  useEffect(() => {
+    loadData.run();
+  }, [chain, token]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: " flex items-center justify-center bg-border rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(IconFont, { type: "icon-serch", style: { fontSize: "20px", color: "#2A6AF6" } }) }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "py-5 bg-card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-full h-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between h-9", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-base text-foreground", children: /* @__PURE__ */ jsx(Translation, { value: "label", parentKey: "common.filter.token" }) }),
+          /* @__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" }) })
         ] }),
-        /* @__PURE__ */ l("div", { className: "w-full relative text-sm py-3", children: [
-          /* @__PURE__ */ e(V, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
-          /* @__PURE__ */ e("input", { type: "text", placeholder: c("label"), 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: k, onChange: (n) => w(n.target.value) })
+        /* @__PURE__ */ jsxs("div", { className: "w-full relative text-sm py-3", children: [
+          /* @__PURE__ */ jsx(Search, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
+          /* @__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) })
         ] })
       ] }),
-      /* @__PURE__ */ e("ul", { className: "max-h-30 min-h-30 overflow-y-auto overflow-x-hidden w-full", children: g == null ? void 0 : g.map((n, o) => /* @__PURE__ */ l("li", { className: "flex h-10 flex-row items-center gap-3 hover:bg-background hover:rounded-sm p-2 cursor-pointer overflow-hidden", onClick: () => R(n), children: [
-        /* @__PURE__ */ e(D, { src: n.iconUrl, objectFit: "contain", alt: n.tokenSymbol, className: "rounded-full w-4 h-4 min-w-4 min-h-4 flex-shrink-0" }),
-        /* @__PURE__ */ l("div", { className: "text-sm text-foreground text-left truncate min-w-0 flex-1 overflow-hidden", children: [
-          /* @__PURE__ */ e("span", { className: "text-foreground", children: n.tokenSymbol }),
+      /* @__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: [
+        /* @__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" }),
+        /* @__PURE__ */ jsxs("div", { className: "text-sm text-foreground text-left truncate min-w-0 flex-1 overflow-hidden", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-foreground", children: item.tokenSymbol }),
           " ",
-          /* @__PURE__ */ e("span", { className: "text-muted-foreground text-xs", children: n.tokenName })
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-xs", children: item.tokenName })
         ] }),
-        /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(te, { className: v("w-4 h-4 cursor-pointer border-1 border-gray-300 rounded-sm", d.some((h) => h.tokenAddress === n.tokenAddress) ? "bg-primary" : "bg-card"), checked: d.some((h) => h.tokenAddress === n.tokenAddress) }) })
-      ] }, o)) }),
-      /* @__PURE__ */ l("div", { className: "flex justify-end items-center mt-2", children: [
-        /* @__PURE__ */ e("button", { className: "bg-card text-black text-sm px-3 py-1 border-1 border-gray-300 rounded ml-3 cursor-pointer", onClick: C, children: /* @__PURE__ */ e(S, { value: "button.cancel", parentKey: "common" }) }),
-        /* @__PURE__ */ e("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded ml-3 cursor-pointer", onClick: N, children: /* @__PURE__ */ e(S, { value: "button.confirm", parentKey: "common" }) })
+        /* @__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) }) })
+      ] }, index)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center mt-2", children: [
+        /* @__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" }) }),
+        /* @__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" }) })
       ] })
     ] })
   ] });
 }
-function De({ onChange: a }) {
-  const { chain: i = "" } = ee(), c = J("common.filter.amount"), [m, A] = y(!1), [k, w] = y(""), [g, b] = y([]), [d, f] = y([]), C = () => {
-    a([]), w(""), f([]), A(!1);
-  }, N = () => {
-    a(d), A(!1);
-  }, R = (n) => {
-    d.some((o) => o.tokenAddress === n.tokenAddress) ? f(d.filter((o) => o.tokenAddress !== n.tokenAddress)) : f([...d, n]);
-  }, B = async () => {
-    var o;
-    const n = await Se(k);
-    b(((o = n == null ? void 0 : n.data) == null ? void 0 : o.content) || []);
+function TokenSearch({ onChange }) {
+  const { chain = "" } = useParams();
+  const t = useTranslations("common.filter.amount");
+  const [open, setOpen] = useState(false);
+  const [token, setToken] = useState("");
+  const [tokenList, setTokenList] = useState([]);
+  const [selectedToken, setSelectedToken] = useState([]);
+  const handleCancel = () => {
+    onChange([]);
+    setToken("");
+    setSelectedToken([]);
+    setOpen(false);
+  };
+  const handleConfirm = () => {
+    onChange(selectedToken);
+    setOpen(false);
   };
-  return z(() => {
-    B();
-  }, [i, k]), /* @__PURE__ */ l(O, { open: m, onOpenChange: A, children: [
-    /* @__PURE__ */ e(U, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "w-[16px] h-[16px] flex items-center justify-center bg-primary rounded-sm cursor-pointer", children: /* @__PURE__ */ e(D, { src: H, width: 12, height: 12, objectFit: "contain" }) }) }),
-    /* @__PURE__ */ l(Q, { className: "py-5 bg-card", children: [
-      /* @__PURE__ */ l("div", { className: "w-full h-full bg-card", children: [
-        /* @__PURE__ */ l("div", { className: "flex flex-row items-center justify-between h-9", children: [
-          /* @__PURE__ */ e("span", { className: "text-base text-foreground", children: /* @__PURE__ */ e(S, { value: "label", parentKey: "common.filter.token" }) }),
-          /* @__PURE__ */ e("div", { className: "w-4 h-4 text-black text-sm  cursor-pointer flex items-center justify-center", onClick: () => C(), children: /* @__PURE__ */ e(W, { className: "w-4 h-4 text-foreground" }) })
+  const tokenChange = (item) => {
+    if (selectedToken.some((token2) => token2.tokenAddress === item.tokenAddress)) {
+      setSelectedToken(selectedToken.filter((token2) => token2.tokenAddress !== item.tokenAddress));
+    } else {
+      setSelectedToken([...selectedToken, item]);
+    }
+  };
+  const loadData = async () => {
+    const res = await searchToken(token);
+    setTokenList(res?.data?.content || []);
+  };
+  useEffect(() => {
+    loadData();
+  }, [chain, token]);
+  return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: " flex items-center justify-center bg-border rounded-sm cursor-pointer", children: /* @__PURE__ */ jsx(IconFont, { type: "icon-serch", style: { fontSize: "20px", color: "#2A6AF6" } }) }) }),
+    /* @__PURE__ */ jsxs(PopoverContent, { className: "py-5 bg-card", children: [
+      /* @__PURE__ */ jsxs("div", { className: "w-full h-full bg-card", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center justify-between h-9", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-base text-foreground", children: /* @__PURE__ */ jsx(Translation, { value: "label", parentKey: "common.filter.token" }) }),
+          /* @__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" }) })
         ] }),
-        /* @__PURE__ */ l("div", { className: "w-full relative bg-card text-sm py-3", children: [
-          /* @__PURE__ */ e(V, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
-          /* @__PURE__ */ e("input", { type: "text", placeholder: c("label"), 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: k, onChange: (n) => w(n.target.value) })
+        /* @__PURE__ */ jsxs("div", { className: "w-full relative bg-card text-sm py-3", children: [
+          /* @__PURE__ */ jsx(Search, { className: "w-4 h-4 absolute left-2 top-1/2 -translate-y-1/2" }),
+          /* @__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) })
         ] })
       ] }),
-      /* @__PURE__ */ e("ul", { className: "max-h-50 min-h-25 overflow-y-auto overflow-x-hidden w-full", children: g == null ? void 0 : g.map((n, o) => /* @__PURE__ */ l("li", { className: "flex h-10 flex-row items-center gap-3 hover:bg-background hover:rounded-sm p-2 cursor-pointer overflow-hidden", onClick: () => R(n), children: [
-        /* @__PURE__ */ e(D, { src: n.iconUrl, objectFit: "contain", alt: n.tokenName, className: "rounded-full w-4 h-4 min-w-4 min-h-4 flex-shrink-0" }),
-        /* @__PURE__ */ e("div", { className: "text-sm text-foreground text-left truncate min-w-0 flex-1 overflow-hidden", children: n.tokenName }),
-        /* @__PURE__ */ e("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e(te, { className: v("w-4 h-4 cursor-pointer border-1 border-gray-300 rounded-sm", d.some((h) => h.tokenAddress === n.tokenAddress) ? "bg-primary" : "bg-white"), checked: d.some((h) => h.tokenAddress === n.tokenAddress) }) })
-      ] }, o)) }),
-      /* @__PURE__ */ l("div", { className: "flex justify-end items-center mt-2", children: [
-        /* @__PURE__ */ e("button", { className: "bg-card text-black text-sm px-3 py-1 border-1 border-gray-300 rounded ml-3 cursor-pointer", onClick: C, children: /* @__PURE__ */ e(S, { value: "button.cancel", parentKey: "common" }) }),
-        /* @__PURE__ */ e("button", { className: "bg-primary text-white text-sm px-3 py-1 rounded ml-3 cursor-pointer", onClick: N, children: /* @__PURE__ */ e(S, { value: "button.confirm", parentKey: "common" }) })
+      /* @__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: [
+        /* @__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" }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-foreground text-left truncate min-w-0 flex-1 overflow-hidden", children: item.tokenName }),
+        /* @__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) }) })
+      ] }, index)) }),
+      /* @__PURE__ */ jsxs("div", { className: "flex justify-end items-center mt-2", children: [
+        /* @__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" }) }),
+        /* @__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" }) })
       ] })
     ] })
   ] });
 }
-const Pe = "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", Fe = (a) => a == null ? "" : typeof a == "object" ? JSON.stringify(a) : a, ct = (a) => {
-  const i = {
+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";
+const formatValue = (value) => {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return value;
+};
+const formatFilterValue = (filterValues) => {
+  const obj = {
     filters: {}
   };
-  return Object.keys(a).forEach((c) => {
-    c === "timestamp" ? (i.filters.startTime = a.timestamp.start, i.filters.endTime = a.timestamp.end) : c === "fromAddress" ? i.filters.fromAddress = a.fromAddress.address : c === "toAddress" ? i.filters.toAddress = a.toAddress.address : c === "valueUsd" ? (i.filters.minValueUsd = a.valueUsd.min, i.filters.maxValueUsd = a.valueUsd.max) : c === "amount" ? (i.filters.minAmount = a.amount.min, i.filters.maxAmount = a.amount.max) : c === "token" ? i.filters.tokenList = a.token.map((m) => m.tokenAddress) : c === "tokenSearch" ? i.filters.tokenList = a.tokenSearch.map((m) => m.tokenAddress) : c === "inputAmount" ? (i.filters.minInputAmount = a.inputAmount.min, i.filters.maxInputAmount = a.inputAmount.max) : c === "outputAmount" ? (i.filters.minOutputAmount = a.outputAmount.min, i.filters.maxOutputAmount = a.outputAmount.max) : c === "fee" && (i.filters.minFee = a.fee.min, i.filters.maxFee = a.fee.max);
-  }), i.filters;
+  Object.keys(filterValues).forEach((key) => {
+    if (key === "timestamp") {
+      obj.filters.startTime = filterValues.timestamp.start;
+      obj.filters.endTime = filterValues.timestamp.end;
+    } else if (key === "fromAddress") {
+      obj.filters.fromAddress = filterValues.fromAddress.address;
+    } else if (key === "toAddress") {
+      obj.filters.toAddress = filterValues.toAddress.address;
+    } else if (key === "valueUsd") {
+      obj.filters.minValueUsd = filterValues.valueUsd.min;
+      obj.filters.maxValueUsd = filterValues.valueUsd.max;
+    } else if (key === "amount") {
+      obj.filters.minAmount = filterValues.amount.min;
+      obj.filters.maxAmount = filterValues.amount.max;
+    } else if (key === "token") {
+      obj.filters.tokenList = filterValues.token.map((item) => item.tokenAddress);
+    } else if (key === "tokenSearch") {
+      obj.filters.tokenList = filterValues.tokenSearch.map((item) => item.tokenAddress);
+    } else if (key === "inputAmount") {
+      obj.filters.minInputAmount = filterValues.inputAmount.min;
+      obj.filters.maxInputAmount = filterValues.inputAmount.max;
+    } else if (key === "outputAmount") {
+      obj.filters.minOutputAmount = filterValues.outputAmount.min;
+      obj.filters.maxOutputAmount = filterValues.outputAmount.max;
+    } else if (key === "fee") {
+      obj.filters.minFee = filterValues.fee.min;
+      obj.filters.maxFee = filterValues.fee.max;
+    }
+  });
+  return obj.filters;
 };
-function dt({ data: a, columns: i, headerClassName: c, bodyClassName: m, rowClassName: A, tableClassName: k, showHeader: w = !0, renderChildren: g, onFilterChange: b, loading: d, onSortChange: f, defaultOrder: C, defaultSortKey: N, emptyClassName: R, ...B }) {
-  const [n, o] = y(null), [h, p] = y({}), [x, T] = y(N || null), [L, re] = y(C || null), I = (t, r) => {
-    o((s) => ({
-      ...s,
-      [t]: r
+function CustomTable({ data, columns, headerClassName, bodyClassName, rowClassName, tableClassName, showHeader = true, renderChildren, onFilterChange, loading, onSortChange, defaultOrder, defaultSortKey, emptyClassName, ...props }) {
+  const [filterValues, setFilterValues] = useState(null);
+  const [resetKey, setResetKey] = useState({});
+  const [sortKey, setSortKey] = useState(defaultSortKey || null);
+  const [sortOrder, setSortOrder] = useState(defaultOrder || null);
+  const handleFilterChange = (columnKey, value) => {
+    setFilterValues((prev) => ({
+      ...prev,
+      [columnKey]: value
     }));
-  }, P = (t) => {
-    o((r) => {
-      const s = { ...r };
-      return delete s[t], s;
-    }), p((r) => ({
-      ...r,
-      [t]: (r[t] || 0) + 1
+  };
+  const removeFilter = (columnKey) => {
+    setFilterValues((prev) => {
+      const newValues = { ...prev };
+      delete newValues[columnKey];
+      return newValues;
+    });
+    setResetKey((prev) => ({
+      ...prev,
+      [columnKey]: (prev[columnKey] || 0) + 1
     }));
-  }, ne = (t) => {
-    switch (t.filter) {
+  };
+  const clearAllFilters = () => {
+    const nextResetKey = {};
+    columns.forEach((column) => {
+      if (column.filter) {
+        nextResetKey[column.key] = (resetKey[column.key] || 0) + 1;
+      }
+    });
+    setFilterValues({});
+    setResetKey((prev) => ({ ...prev, ...nextResetKey }));
+  };
+  const renderFilter = (column) => {
+    switch (column.filter) {
       case "timeRange":
-        return /* @__PURE__ */ e(ve, { onChange: (r, s) => {
-          var u, j;
-          r && s ? (I(t.key, { start: r, end: s }), (j = (u = t.filterProps) == null ? void 0 : u.onChange) == null || j.call(u, { start: r, end: s })) : P(t.key);
-        } }, h[t.key]);
+        return /* @__PURE__ */ jsx(DatePickerWithRange, { onChange: (start, end) => {
+          if (start && end) {
+            handleFilterChange(column.key, { start, end });
+            column.filterProps?.onChange?.({ start, end });
+          } else {
+            removeFilter(column.key);
+          }
+        } }, resetKey[column.key]);
       case "address":
-        return /* @__PURE__ */ e(Re, { onChange: (r) => {
-          var s, u;
-          r ? (I(t.key, { address: r }), (u = (s = t.filterProps) == null ? void 0 : s.onChange) == null || u.call(s, { address: r })) : P(t.key);
-        } }, h[t.key]);
+        return /* @__PURE__ */ jsx(Address, { onChange: (address) => {
+          if (address) {
+            handleFilterChange(column.key, { address });
+            column.filterProps?.onChange?.({ address });
+          } else {
+            removeFilter(column.key);
+          }
+        } }, resetKey[column.key]);
       case "amount":
-        return /* @__PURE__ */ e(je, { filterKey: t.key, onChange: (r, s) => {
-          var j, G;
-          const u = {};
-          r && (u.min = r), s && (u.max = s), Object.keys(u).length > 0 ? (I(t.key, u), (G = (j = t.filterProps) == null ? void 0 : j.onChange) == null || G.call(j, u)) : P(t.key);
-        } }, h[t.key]);
+        return /* @__PURE__ */ jsx(Amount, { filterKey: column.key, onChange: (min, max) => {
+          const obj = {};
+          if (min) {
+            obj.min = min;
+          }
+          if (max) {
+            obj.max = max;
+          }
+          if (Object.keys(obj).length > 0) {
+            handleFilterChange(column.key, obj);
+            column.filterProps?.onChange?.(obj);
+          } else {
+            removeFilter(column.key);
+          }
+        } }, resetKey[column.key]);
       case "token":
-        return /* @__PURE__ */ e(Te, { onChange: (r) => {
-          var s, u;
-          r ? (I(t.key, r), (u = (s = t.filterProps) == null ? void 0 : s.onChange) == null || u.call(s, r)) : P(t.key);
-        } }, h[t.key]);
+        return /* @__PURE__ */ jsx(Token, { onChange: (token) => {
+          if (token) {
+            handleFilterChange(column.key, token);
+            column.filterProps?.onChange?.(token);
+          } else {
+            removeFilter(column.key);
+          }
+        } }, resetKey[column.key]);
       case "tokenSearch":
-        return /* @__PURE__ */ e(De, { onChange: (r) => {
-          var s, u;
-          r ? (I(t.key, r), (u = (s = t.filterProps) == null ? void 0 : s.onChange) == null || u.call(s, r)) : P(t.key);
-        } }, h[t.key]);
+        return /* @__PURE__ */ jsx(TokenSearch, { onChange: (token) => {
+          if (token) {
+            handleFilterChange(column.key, token);
+            column.filterProps?.onChange?.(token);
+          } else {
+            removeFilter(column.key);
+          }
+        } }, resetKey[column.key]);
       default:
         return null;
     }
-  }, se = (t) => t.min && !t.max ? `≥ ${t.min}` : !t.min && t.max ? `≤ ${t.max}` : `${t.min} - ${t.max}`, ae = (t, r) => {
-    if (!r) return null;
-    switch (t.filter) {
+  };
+  const renderAmount = (value) => {
+    if (value.min && !value.max) return `≥ ${value.min}`;
+    if (!value.min && value.max) return `≤ ${value.max}`;
+    return `${value.min} - ${value.max}`;
+  };
+  const renderFilterValue = (column, value) => {
+    if (!value) return null;
+    switch (column.filter) {
       case "timeRange":
-        return `${M(r.start * 1e3).format("YYYY-MM-DD") || ""} - ${M(r.end * 1e3).format("YYYY-MM-DD") || ""}`;
+        return `${dayjs(value.start * 1e3).format("YYYY-MM-DD") || ""} - ${dayjs(value.end * 1e3).format("YYYY-MM-DD") || ""}`;
       case "address":
-        return r.address;
+        return value.address;
       case "amount":
-        return se(r);
+        return renderAmount(value);
       case "token":
-        return r.map((s) => s.tokenName).join(", ");
+        return value.map((item) => item.tokenName).join(", ");
       case "tokenSearch":
-        return r.map((s) => s.tokenName).join(", ");
+        return value.map((item) => item.tokenName).join(", ");
       default:
         return null;
     }
-  }, oe = (t) => {
-    const r = L === "asc" ? "desc" : "asc";
-    T(t), re(r), f == null || f(t, r);
-  }, F = i.filter((t) => !t.hidden), le = F.some((t) => t.filter);
-  return z(() => {
-    n !== null && (b == null || b(n));
-  }, [n]), /* @__PURE__ */ l("div", { className: "overflow-auto min-w-full relative", ...B, children: [
-    /* @__PURE__ */ e(we, { loading: d }),
-    le && n && Object.keys(n).length > 0 && /* @__PURE__ */ e("div", { className: "flex flex-row gap-3 flex-nowrap overflow-x-auto scrollbar-hide pb-3", children: F.map((t) => {
-      if (!n) return null;
-      const r = n == null ? void 0 : n[t.key];
-      return !r || Array.isArray(r) && r.length === 0 ? null : /* @__PURE__ */ l("div", { className: "flex items-center flex-nowrap gap-2 bg-card px-3 py-1 rounded-full border-1 border-border max-w-full min-w-0 overflow-hidden", children: [
-        /* @__PURE__ */ l("div", { className: "text-sm text-muted-foreground shrink-0", children: [
-          t.label,
-          ":"
-        ] }),
-        /* @__PURE__ */ e("div", { className: "text-sm flex-1 min-w-0", children: /* @__PURE__ */ e("div", { className: "min-w-0 truncate", children: ae(t, r) }) }),
-        /* @__PURE__ */ e(
-          "button",
-          {
-            onClick: () => P(t.key),
-            className: "shrink-0 hover:bg-background rounded-full p-1",
-            children: /* @__PURE__ */ e(W, { className: "w-3 h-3 cursor-pointer" })
-          }
-        )
-      ] }, t.key);
-    }) }),
-    /* @__PURE__ */ l(ie, { className: v("", k), children: [
-      w && /* @__PURE__ */ e(ce, { className: v("border-b border-border", c), children: /* @__PURE__ */ e(E, { className: "border-b-0 hover:bg-transparent", children: F.map((t, r) => {
-        var s;
-        return /* @__PURE__ */ e(de, { className: v("text-left", "whitespace-nowrap"), style: { width: t.width }, children: /* @__PURE__ */ l("div", { className: v("flex items-center gap-1 min-w-fit w-full whitespace-nowrap", t.align === "center" && "justify-center", t.align === "right" && "justify-end", (s = t.className) == null ? void 0 : s.call(t, t, r)), children: [
-          t.label,
-          t.filter && ne(t),
-          t.sort && /* @__PURE__ */ e(D, { src: Pe, alt: "sort", className: v("w-4 h-4 cursor-pointer", x === t.key && "opacity-100", L === "desc" && "rotate-180"), onClick: () => oe(t.key) })
-        ] }) }, r);
-      }) }) }),
-      /* @__PURE__ */ e(me, { className: v("[&_tr:last-child]:border-b-0", m), children: (a == null ? void 0 : a.length) > 0 ? a.map((t, r) => /* @__PURE__ */ l(he.Fragment, { children: [
-        /* @__PURE__ */ e(E, { className: v("border-r-0 border-l-0 border-t-0 border-b border-border hover:bg-background", A), children: F.map((s, u) => {
-          var j;
-          return /* @__PURE__ */ e(K, { className: v("text-left min-w-fit py-4", s.align === "center" && "text-center", s.align === "right" && "text-right", "whitespace-nowrap", (j = s.className) == null ? void 0 : j.call(s, s, r, a[r])), style: { width: s.width }, children: s.render ? s.render(t[s.key], t, r) : Fe(t[s.key]) }, u);
-        }) }, r),
-        g && /* @__PURE__ */ e(E, { className: "border-b-0", children: /* @__PURE__ */ e(K, { colSpan: F.length, className: "p-0", children: g(t, r) }) })
-      ] }, r)) : /* @__PURE__ */ e(E, { className: "hover:bg-transparent data-[state=selected]:bg-transparent", children: /* @__PURE__ */ e(K, { colSpan: F.length, className: "w-full text-center", children: /* @__PURE__ */ e(ke, { className: v("w-full h-38", R) }) }) }) })
+  };
+  const handleSort = (key) => {
+    const so = sortOrder === "asc" ? "desc" : "asc";
+    setSortKey(key);
+    setSortOrder(so);
+    onSortChange?.(key, so);
+  };
+  const showColumn = columns.filter((column) => !column.hidden);
+  const showFilter = showColumn.some((column) => column.filter);
+  useEffect(() => {
+    if (filterValues !== null) {
+      onFilterChange?.(filterValues);
+    }
+  }, [filterValues]);
+  return /* @__PURE__ */ jsxs("div", { className: "overflow-auto min-w-full relative", ...props, children: [
+    /* @__PURE__ */ jsx(Loading, { loading }),
+    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: [
+      showColumn.map((column) => {
+        if (!filterValues) return null;
+        const filterValue = filterValues?.[column.key];
+        if (!filterValue) return null;
+        if (Array.isArray(filterValue) && filterValue.length === 0) return null;
+        return /* @__PURE__ */ jsxs("div", { className: "flex items-center flex-nowrap gap-2 text-[#C45D10] px-3 py-1 rounded-full border-1 border-[#FFD78D] max-w-full min-w-0 overflow-hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "text-sm shrink-0", children: [
+            column.label,
+            ":"
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "text-sm flex-1 min-w-0", children: /* @__PURE__ */ jsx("div", { className: "min-w-0 truncate", children: renderFilterValue(column, filterValue) }) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => removeFilter(column.key),
+              className: "shrink-0 hover:bg-background rounded-full p-1",
+              children: /* @__PURE__ */ jsx(X, { className: "w-3 h-3 cursor-pointer" })
+            }
+          )
+        ] }, column.key);
+      }),
+      /* @__PURE__ */ jsxs(
+        "button",
+        {
+          onClick: clearAllFilters,
+          className: "shrink-0 inline-flex items-center gap-1 px-3 py-1 rounded-full border border-border bg-background text-sm text-foreground hover:bg-muted",
+          children: [
+            /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4 text-foreground" }),
+            /* @__PURE__ */ jsx(Translation, { value: "button.clear", parentKey: "common" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Table, { className: twMerge("", tableClassName), children: [
+      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: [
+        column.label,
+        column.filter && renderFilter(column),
+        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) })
+      ] }) }, index)) }) }),
+      /* @__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: [
+        /* @__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),
+        renderChildren && /* @__PURE__ */ jsx(TableRow, { className: "border-b-0", children: /* @__PURE__ */ jsx(TableCell, { colSpan: showColumn.length, className: "p-0", children: renderChildren(row, index) }) })
+      ] }, 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) }) }) }) })
     ] })
   ] });
 }
 export {
-  dt as default,
-  ct as formatFilterValue
+  CustomTable as default,
+  formatFilterValue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xchain/table",
-  "version": "1.1.0-beta.3",
+  "version": "1.1.0-beta.30",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -17,31 +17,48 @@
     "dist",
     "!**/*.tsbuildinfo"
   ],
-  "devDependencies": {
-    "rollup-plugin-preserve-use-client": "3.0.1"
-  },
-  "dependencies": {
+  "peerDependencies": {
+    "@radix-ui/react-slider": "1.3.6",
+    "ahooks": "3.9.5",
+    "antd": "6.1.1",
+    "date-fns": "4.1.0",
+    "dayjs": "1.11.19",
+    "lucide-react": "0.539.0",
+    "next": "16.1.6",
+    "next-intl": "4.8.2",
     "react": "19.1.1",
     "react-dom": "19.1.1",
-    "tailwind-merge": "3.3.1",
-    "lucide-react": "0.539.0",
-    "dayjs": "1.11.19",
-    "next-intl": "4.6.1",
-    "next": "15.5.6",
+    "tailwind-merge": "3.3.1"
+  },
+  "devDependencies": {
     "@0xchain/next-themes": "1.0.0",
-    "date-fns": "4.1.0",
-    "antd": "6.1.1",
-    "ahooks": "3.9.5",
     "@radix-ui/react-slider": "1.3.6",
-    "@0xchain/empty": "1.1.0-beta.3",
-    "@0xchain/loading": "1.1.0-beta.3",
-    "@0xchain/image": "1.1.0-beta.3",
-    "@0xchain/translation": "1.1.0-beta.3",
-    "@0xchain/request": "1.1.0-beta.3",
-    "@0xchain/ui": "1.1.0-beta.3",
-    "@0xchain/number-like": "1.1.0-beta.3",
-    "@0xchain/i18n": "1.1.0-beta.3",
-    "@0xchain/iconfont": "1.1.0-beta.3"
+    "ahooks": "3.9.5",
+    "antd": "6.1.1",
+    "date-fns": "4.1.0",
+    "dayjs": "1.11.19",
+    "lucide-react": "0.539.0",
+    "next": "16.1.6",
+    "next-intl": "4.8.2",
+    "react": "19.1.1",
+    "react-dom": "19.1.1",
+    "rollup-plugin-preserve-use-client": "3.0.1",
+    "tailwind-merge": "3.3.1"
+  },
+  "dependencies": {
+    "@0xchain/empty": "1.1.0-beta.30",
+    "@0xchain/image": "1.1.0-beta.30",
+    "@0xchain/ui": "1.1.0-beta.30",
+    "@0xchain/loading": "1.1.0-beta.30",
+    "@0xchain/translation": "1.1.0-beta.30",
+    "@0xchain/number-like": "1.1.0-beta.30",
+    "@0xchain/request": "1.1.0-beta.30",
+    "@0xchain/iconfont": "1.1.0-beta.30"
+  },
+  "nx": {
+    "tags": [
+      "type:ui"
+    ]
   },
   "publishConfig": {
     "access": "public"