@orderly.network/portfolio 2.8.6 → 2.8.7-alpha.0

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import React7, { createContext, useMemo, useId, useContext, useState, useCallback, useRef, createElement, useEffect } from 'react';
+import React12, { createContext, useMemo, useId, useContext, useState, useCallback, useRef, createElement, useEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useLocalStorage, useAccount, useIndexPricesStream, useCollateral, usePrivateQuery, useStatisticsDaily, useBalanceTopic, useAssetsHistory, useFeeState, useMediaQuery, useAccountInfo, useGetClaimed, DistributionId, TWType, useCurEpochEstimate, useAllBrokers, noCacheConfig, useEpochInfo, useConfig, useGetEnv, useMutation, useOrderlyContext, useDebouncedCallback, useWalletConnector, useAppStore, parseJSON, usePositionStream, useChains, useLeverage, useTransferHistory, useChainInfo, useSymbolsInfo, useFundingFeeHistory, useSubAccountQuery, useApiKeyManager, useDistributionHistory, useVaultsHistory } from '@orderly.network/hooks';
 import { useAppContext, useDataTap, useCanTrade } from '@orderly.network/react-app';
@@ -1084,6 +1084,21 @@ var init_fundingHistory_ui_mobile = __esm({
           }
         );
       };
+      const options = useMemo(() => {
+        return [
+          {
+            label: t("common.all"),
+            value: "All"
+          },
+          ...Object.keys(symbols).map((symbol2) => {
+            const s = symbol2.split("_")[1];
+            return {
+              label: s,
+              value: symbol2
+            };
+          })
+        ];
+      }, [t, symbols]);
       return /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           DataFilter,
@@ -1093,25 +1108,11 @@ var init_fundingHistory_ui_mobile = __esm({
                 type: "select",
                 name: "symbol",
                 isCombine: true,
-                options: [
-                  {
-                    label: "All",
-                    value: "All"
-                  },
-                  ...Object.keys(symbols).map((symbol2) => {
-                    const s = symbol2.split("_")[1];
-                    return {
-                      label: s,
-                      value: symbol2
-                    };
-                  })
-                ],
+                options,
                 value: symbol,
                 valueFormatter: (value) => {
-                  if (value === "All") {
-                    return "All";
-                  }
-                  return value.split("_")[1];
+                  const option = options.find((item) => item.value === value);
+                  return option?.label || value;
                 }
               },
               {
@@ -1608,6 +1609,202 @@ var init_distribution = __esm({
     init_distribution_ui();
   }
 });
+var TransferHistoryMobileUI;
+var init_transfer_mobile_ui = __esm({
+  "src/pages/overview/TransferHistory/transfer.mobile.ui.tsx"() {
+    TransferHistoryMobileUI = (props) => {
+      const {
+        dataSource: dataSource2,
+        queryParameter,
+        state,
+        isMainAccount,
+        isLoading,
+        selectedAccount,
+        onFilter,
+        pagination
+      } = props;
+      const { side, dateRange } = queryParameter;
+      const { t } = useTranslation();
+      const ALL_ACCOUNTS = {
+        label: t("common.allAccount"),
+        value: "All accounts" /* ALL */
+      };
+      const MAIN_ACCOUNT = {
+        label: t("common.mainAccount"),
+        value: "Main accounts" /* MAIN */
+      };
+      const subAccounts = state.subAccounts ?? [];
+      const memoizedOptions = useMemo(() => {
+        if (Array.isArray(subAccounts) && subAccounts.length) {
+          return [
+            ALL_ACCOUNTS,
+            MAIN_ACCOUNT,
+            ...subAccounts.map((value) => ({
+              value: value.id,
+              label: value?.description || formatAddress(value?.id)
+            }))
+          ];
+        }
+        return [ALL_ACCOUNTS, MAIN_ACCOUNT];
+      }, [subAccounts]);
+      const loadMore = () => {
+        if (dataSource2 && dataSource2.length < (pagination?.count || 0)) {
+          pagination?.onPageSizeChange?.(pagination?.pageSize + 50);
+        }
+      };
+      const onCopy = () => {
+        toast.success(t("common.copy.copied"));
+      };
+      const renderHistoryItem = (item) => {
+        const isFromMainAccount = item.from_account_id === state.mainAccountId;
+        const isToMainAccount = item.to_account_id === state.mainAccountId;
+        const fromSubAccount = subAccounts.find(
+          (acc) => acc.id === item.from_account_id
+        );
+        const toSubAccount = subAccounts.find(
+          (acc) => acc.id === item.to_account_id
+        );
+        return /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            p: 2,
+            direction: "column",
+            gapY: 2,
+            className: "oui-rounded-xl oui-bg-base-9 oui-font-semibold",
+            children: [
+              /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", width: "100%", children: [
+                /* @__PURE__ */ jsx(
+                  Text.formatted,
+                  {
+                    rule: "date",
+                    className: "oui-text-base-contrast-36 oui-text-2xs",
+                    children: item.updated_time
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "sm", className: "oui-text-base-contrast-80", children: capitalizeString(item.status) })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "oui-w-full oui-h-[1px] oui-bg-base-6" }),
+              /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", width: "100%", children: [
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36 oui-text-2xs", children: t("common.token") }),
+                  /* @__PURE__ */ jsxs(Flex, { direction: "row", itemAlign: "center", gap: 1, children: [
+                    /* @__PURE__ */ jsx(TokenIcon, { name: item.token, size: "2xs" }),
+                    /* @__PURE__ */ jsx(Text, { size: "xs", className: "oui-text-base-contrast-80", children: item.token })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", children: [
+                  /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast-36 oui-text-2xs", children: t("common.amount") }),
+                  /* @__PURE__ */ jsx(
+                    Text.numeral,
+                    {
+                      dp: 6,
+                      className: "oui-text-base-contrast-80 oui-text-xs",
+                      children: item.amount
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", width: "100%", children: [
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, children: [
+                  /* @__PURE__ */ jsxs(Text, { className: "oui-text-base-contrast-36 oui-text-2xs", children: [
+                    t("transfer.internalTransfer.from"),
+                    " (",
+                    t("common.accountId"),
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: 1, itemAlign: "start", children: [
+                    /* @__PURE__ */ jsx(Flex, { direction: "row", itemAlign: "center", gap: 1, children: /* @__PURE__ */ jsx(
+                      Text.formatted,
+                      {
+                        rule: "address",
+                        copyable: true,
+                        onCopy,
+                        className: "oui-text-base-contrast-80 oui-text-xs",
+                        children: item.from_account_id
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", children: isFromMainAccount ? t("common.mainAccount") : fromSubAccount?.description || t("common.subAccount") })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", gap: 1, children: [
+                  /* @__PURE__ */ jsxs(Text, { className: "oui-text-base-contrast-36 oui-text-2xs", children: [
+                    t("transfer.internalTransfer.to"),
+                    " (",
+                    t("common.accountId"),
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "end", gap: 1, children: [
+                    /* @__PURE__ */ jsx(Flex, { direction: "row", itemAlign: "center", gap: 1, children: /* @__PURE__ */ jsx(
+                      Text.formatted,
+                      {
+                        rule: "address",
+                        copyable: true,
+                        onCopy,
+                        className: "oui-text-base-contrast-80 oui-text-xs",
+                        children: item.to_account_id
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsx(Badge, { color: "neutral", size: "xs", children: isToMainAccount ? t("common.mainAccount") : toSubAccount?.description || t("common.subAccount") })
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        );
+      };
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsx(
+          DataFilter,
+          {
+            onFilter,
+            items: produce(
+              [
+                {
+                  type: "select",
+                  name: "side",
+                  value: side,
+                  options: [
+                    { value: "OUT", label: t("common.outflow") },
+                    { value: "IN", label: t("common.inflow") }
+                  ]
+                },
+                {
+                  type: "range",
+                  name: "dateRange",
+                  value: {
+                    from: dateRange[0],
+                    to: dateRange[1]
+                  }
+                }
+              ],
+              (draft) => {
+                if (isMainAccount) {
+                  draft.unshift({
+                    type: "select",
+                    name: "account",
+                    value: selectedAccount,
+                    options: memoizedOptions
+                  });
+                }
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          ListView,
+          {
+            dataSource: dataSource2,
+            renderItem: renderHistoryItem,
+            contentClassName: "!oui-space-y-1",
+            loadMore,
+            isLoading,
+            className: "oui-px-1"
+          }
+        )
+      ] });
+    };
+  }
+});
 var useColumns2;
 var init_column4 = __esm({
   "src/pages/overview/TransferHistory/column.tsx"() {
@@ -1618,7 +1815,7 @@ var init_column4 = __esm({
       };
       const { state } = useAccount();
       const sub = state.subAccounts ?? [];
-      const columns = React7.useMemo(() => {
+      const columns = React12.useMemo(() => {
         return [
           {
             title: t("common.token"),
@@ -1638,7 +1835,7 @@ var init_column4 = __esm({
             rule: "date"
           },
           {
-            title: `${t("transfer.internalTransfer.from")} (Account ID)`,
+            title: `${t("transfer.internalTransfer.from")} (${t("common.accountId")})`,
             dataIndex: "from_account_id",
             render(val) {
               const isMainAccount = val === state.mainAccountId;
@@ -1650,7 +1847,7 @@ var init_column4 = __esm({
             }
           },
           {
-            title: `${t("transfer.internalTransfer.to")} (Account ID)`,
+            title: `${t("transfer.internalTransfer.to")} (${t("common.accountId")})`,
             dataIndex: "to_account_id",
             render(val) {
               const isMainAccount = val === state.mainAccountId;
@@ -1731,8 +1928,8 @@ var init_transfer_ui = __esm({
                   name: "side",
                   value: side,
                   options: [
-                    { value: "OUT", label: "Outflow" },
-                    { value: "IN", label: "Inflow" }
+                    { value: "OUT", label: t("common.outflow") },
+                    { value: "IN", label: t("common.inflow") }
                   ]
                 },
                 {
@@ -1780,18 +1977,18 @@ var init_useDataSource_script3 = __esm({
     init_date();
     init_transfer_ui();
     useTransferHistoryHook = () => {
-      const today = React7.useMemo(() => {
+      const today = React12.useMemo(() => {
         const date = /* @__PURE__ */ new Date();
         return new Date(getYear(date), getMonth(date), getDate(date), 0, 0, 0);
       }, []);
-      const [dateRange, setDateRange] = React7.useState([
+      const [dateRange, setDateRange] = React12.useState([
         subtractDaysFromCurrentDate(90, today),
         today
       ]);
       const { page, pageSize, setPage, parsePagination } = usePagination();
       const { state } = useAccount();
-      const [selectedAccount, setAccount] = React7.useState("All accounts" /* ALL */);
-      const [side, setSide] = React7.useState("OUT");
+      const [selectedAccount, setAccount] = React12.useState("All accounts" /* ALL */);
+      const [side, setSide] = React12.useState("OUT");
       const [data, { isLoading, meta }] = useTransferHistory({
         dataRange: [
           dateRange[0]?.getTime(),
@@ -1807,7 +2004,7 @@ var init_useDataSource_script3 = __esm({
         page,
         main_sub_only: true
       });
-      const filteredData = React7.useMemo(() => {
+      const filteredData = React12.useMemo(() => {
         return data.filter((item) => {
           if (!selectedAccount || selectedAccount === "All accounts" /* ALL */) {
             return true;
@@ -1819,7 +2016,7 @@ var init_useDataSource_script3 = __esm({
           }
         });
       }, [data, selectedAccount]);
-      const onAccountFilter = React7.useCallback(
+      const onAccountFilter = React12.useCallback(
         (filter) => {
           if (filter.name === "account") {
             setAccount(filter.value);
@@ -1834,7 +2031,7 @@ var init_useDataSource_script3 = __esm({
         },
         [setPage]
       );
-      const pagination = React7.useMemo(
+      const pagination = React12.useMemo(
         () => parsePagination(meta),
         [parsePagination, meta]
       );
@@ -1856,11 +2053,16 @@ var init_useDataSource_script3 = __esm({
 var TransferHistoryWidget;
 var init_transfer_widget = __esm({
   "src/pages/overview/TransferHistory/transfer.widget.tsx"() {
+    init_transfer_mobile_ui();
     init_transfer_ui();
     init_useDataSource_script3();
     TransferHistoryWidget = () => {
       const state = useTransferHistoryHook();
       const accountState = useAccount();
+      const { isMobile } = useScreen();
+      if (isMobile) {
+        return /* @__PURE__ */ jsx(TransferHistoryMobileUI, { ...state, ...accountState });
+      }
       return /* @__PURE__ */ jsx(TransferHistoryUI, { ...state, ...accountState });
     };
   }
@@ -1878,421 +2080,30 @@ var init_TransferHistory = __esm({
     init_transfer_ui();
   }
 });
-var useColumns3;
-var init_column5 = __esm({
-  "src/pages/overview/VaultsHistory/column.tsx"() {
-    useColumns3 = () => {
+var EMPTY_HOLDING, useAccountsData;
+var init_useAccountsData = __esm({
+  "src/hooks/useAccountsData.ts"() {
+    EMPTY_HOLDING = {
+      token: "USDC",
+      holding: 0,
+      frozen: 0
+    };
+    useAccountsData = () => {
       const { t } = useTranslation();
-      const columns = React7.useMemo(() => {
-        return [
-          {
-            title: t("common.type"),
-            dataIndex: "type",
-            className: (record) => {
-              if (record?.type === "deposit") {
-                return "oui-text-success";
-              }
-              if (record?.type === "withdrawal") {
-                return "oui-text-danger";
-              }
-              return "";
-            },
-            render(val) {
-              if (val === "deposit") {
-                return t("common.deposit");
-              }
-              if (val === "withdrawal") {
-                return t("common.withdraw");
-              }
-              return null;
-            }
-          },
-          {
-            title: t("portfolio.overview.vaultName"),
-            dataIndex: "vaultName"
-          },
-          {
-            title: t("common.token"),
-            dataIndex: "token",
-            render(val) {
-              return /* @__PURE__ */ jsxs(Flex, { justify: "start", itemAlign: "center", gap: 2, children: [
-                /* @__PURE__ */ jsx(TokenIcon, { name: val }),
-                val
-              ] });
-            }
-          },
-          {
-            title: t("common.time"),
-            dataIndex: "created_time",
-            rule: "date"
-          },
-          {
-            title: t("common.status"),
-            dataIndex: "status",
-            render(val) {
-              return capitalizeString(val);
-            }
-          },
-          {
-            title: t("common.amount"),
-            dataIndex: "amount_change",
-            render(val) {
-              return /* @__PURE__ */ jsx(
-                Text.numeral,
-                {
-                  showIdentifier: true,
-                  className: cn(
-                    "oui-select-none",
-                    val >= 0 ? "oui-text-success" : "oui-text-danger"
-                  ),
-                  children: val
-                }
-              );
-            }
-          }
-        ];
-      }, [t]);
-      return columns;
-    };
-  }
-});
-var VaultsHistoryUI;
-var init_transfer_ui2 = __esm({
-  "src/pages/overview/VaultsHistory/transfer.ui.tsx"() {
-    init_column5();
-    VaultsHistoryUI = (props) => {
-      const { dataSource: dataSource2, dateRange, isLoading, onFilter } = props;
-      const columns = useColumns3();
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          DataFilter,
-          {
-            onFilter,
-            items: [
-              {
-                type: "range",
-                name: "dateRange",
-                value: {
-                  from: dateRange[0],
-                  to: dateRange[1]
-                }
-              }
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          AuthGuardDataTable,
-          {
-            bordered: true,
-            columns,
-            dataSource: dataSource2,
-            loading: isLoading,
-            className: "oui-font-semibold",
-            classNames: { root: "oui-h-[calc(100%_-_49px)]" },
-            pagination: props.pagination,
-            generatedRowKey: (row) => row.id
-          }
-        )
-      ] });
-    };
-  }
-});
-var useVaultsHistoryHook;
-var init_useDataSource_script4 = __esm({
-  "src/pages/overview/VaultsHistory/useDataSource.script.ts"() {
-    init_date();
-    useVaultsHistoryHook = () => {
-      const today = React7.useMemo(() => {
-        const date = /* @__PURE__ */ new Date();
-        return new Date(getYear(date), getMonth(date), getDate(date), 0, 0, 0);
-      }, []);
-      const [dateRange, setDateRange] = React7.useState([
-        subtractDaysFromCurrentDate(90, today),
-        today
-      ]);
-      const { page, pageSize, setPage, parsePagination } = usePagination();
-      const [data, { isLoading, meta }] = useVaultsHistory({
-        dataRange: [
-          dateRange[0]?.getTime(),
-          set(dateRange[1], {
-            hours: 23,
-            minutes: 59,
-            seconds: 59,
-            milliseconds: 0
-          })?.getTime()
-        ],
-        size: pageSize,
-        page
-      });
-      const dataSource2 = React7.useMemo(() => {
-        if (!Array.isArray(data) || !data.length) {
-          return [];
-        }
-        return data.map((item) => ({
-          ...item,
-          token: "USDC",
-          // need to hard code for now
-          vaultName: "Orderly OmniVault",
-          amount_change: item.type === "withdrawal" ? -item.amount_change : item.amount_change
-        }));
-      }, [data]);
-      const onDateRangeFilter = React7.useCallback(
-        (filter) => {
-          if (filter.name === "dateRange") {
-            setDateRange(parseDateRangeForFilter(filter.value));
-          }
-          setPage(1);
-        },
-        [setPage]
-      );
-      const pagination = React7.useMemo(
-        () => parsePagination(meta),
-        [parsePagination, meta]
-      );
-      return {
-        dataSource: dataSource2,
-        isLoading,
-        dateRange,
-        onFilter: onDateRangeFilter,
-        pagination
-      };
-    };
-  }
-});
-var VaultsHistoryMobile;
-var init_vaults_ui_mobile = __esm({
-  "src/pages/overview/VaultsHistory/vaults.ui.mobile.tsx"() {
-    VaultsHistoryMobile = (props) => {
-      const { dateRange, onFilter, dataSource: dataSource2, isLoading, pagination } = props;
-      const { t } = useTranslation();
-      const loadMore = () => {
-        if (dataSource2.length < (pagination?.count || 0)) {
-          pagination?.onPageSizeChange?.(pagination?.pageSize + 50);
-        }
-      };
-      const renderHistoryItem = (item) => {
-        const typeColor = item.type === "deposit" ? "buy" : "sell";
-        const typeText = item.type === "deposit" ? t("common.deposit") : t("common.withdraw");
-        const amountText = item.amount_change ? Math.abs(item.amount_change) : "-";
-        return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-rounded-xl oui-bg-base-9 oui-p-2 oui-font-semibold", children: [
-          /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-justify-between oui-text-sm oui-text-base-contrast-80", children: [
-            /* @__PURE__ */ jsx("div", { children: item.vaultName }),
-            /* @__PURE__ */ jsx("div", { children: item.status?.slice(0, 1).toUpperCase() + item.status?.slice(1) })
-          ] }),
-          /* @__PURE__ */ jsx(Text.formatted, { rule: "date", intensity: 36, size: "2xs", children: item.created_time }),
-          /* @__PURE__ */ jsx(Divider, { className: "oui-my-2" }),
-          /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center [&>div]:oui-flex-1 [&>div]:oui-text-2xs [&>div]:oui-text-base-contrast-36", children: [
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { children: t("common.token") }),
-              /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-gap-1 oui-text-xs oui-text-base-contrast-80", children: [
-                /* @__PURE__ */ jsx(TokenIcon, { name: "USDC", size: "2xs" }),
-                /* @__PURE__ */ jsx(Text, { children: "USDC" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { children: t("common.type") }),
-              /* @__PURE__ */ jsx(Text, { color: typeColor, className: "oui-text-xs", children: typeText })
-            ] }),
-            /* @__PURE__ */ jsxs("div", { className: "oui-text-right", children: [
-              /* @__PURE__ */ jsx("div", { children: t("common.amount") }),
-              /* @__PURE__ */ jsx("div", { className: "oui-text-xs oui-text-base-contrast-80", children: amountText })
-            ] })
-          ] })
-        ] });
-      };
-      return /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(
-          DataFilter,
-          {
-            items: [
-              {
-                type: "range",
-                name: "dateRange",
-                value: {
-                  from: dateRange[0],
-                  to: dateRange[1]
-                }
-              }
-            ],
-            onFilter: (value) => {
-              onFilter(value);
-            },
-            className: "oui-sticky oui-top-[44px] oui-z-10 oui-border-none oui-bg-base-10 oui-px-3 oui-py-2"
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          ListView,
-          {
-            dataSource: dataSource2,
-            renderItem: renderHistoryItem,
-            contentClassName: "!oui-space-y-1",
-            loadMore,
-            isLoading,
-            className: "oui-px-1"
-          }
-        )
-      ] });
-    };
-  }
-});
-var VaultsHistoryWidget;
-var init_transfer_widget2 = __esm({
-  "src/pages/overview/VaultsHistory/transfer.widget.tsx"() {
-    init_transfer_ui2();
-    init_useDataSource_script4();
-    init_vaults_ui_mobile();
-    VaultsHistoryWidget = () => {
-      const state = useVaultsHistoryHook();
-      const { isMobile } = useScreen();
-      if (isMobile) {
-        return /* @__PURE__ */ jsx(VaultsHistoryMobile, { ...state });
-      }
-      return /* @__PURE__ */ jsx(VaultsHistoryUI, { ...state });
-    };
-  }
-});
-
-// src/pages/overview/VaultsHistory/index.tsx
-var VaultsHistory_exports = {};
-__export(VaultsHistory_exports, {
-  VaultsHistoryUI: () => VaultsHistoryUI,
-  VaultsHistoryWidget: () => VaultsHistoryWidget
-});
-var init_VaultsHistory = __esm({
-  "src/pages/overview/VaultsHistory/index.tsx"() {
-    init_transfer_widget2();
-    init_transfer_ui2();
-  }
-});
-var LazyAssetHistoryWidget, LazyFundingHistoryWidget, LazyDistributionHistoryWidget, LazyTransferHistoryWidget, LazyVaultsHistoryWidget, HistoryDataGroupDesktop;
-var init_historyDataGroup_ui_desktop = __esm({
-  "src/pages/overview/historyDataGroup/historyDataGroup.ui.desktop.tsx"() {
-    LazyAssetHistoryWidget = React7.lazy(
-      () => Promise.resolve().then(() => (init_assetHistory(), assetHistory_exports)).then((mod) => {
-        return { default: mod.AssetHistoryWidget };
-      })
-    );
-    LazyFundingHistoryWidget = React7.lazy(
-      () => Promise.resolve().then(() => (init_funding(), funding_exports)).then((mod) => {
-        return { default: mod.FundingHistoryWidget };
-      })
-    );
-    LazyDistributionHistoryWidget = React7.lazy(
-      () => Promise.resolve().then(() => (init_distribution(), distribution_exports)).then((mod) => {
-        return { default: mod.DistributionHistoryWidget };
-      })
-    );
-    LazyTransferHistoryWidget = React7.lazy(
-      () => Promise.resolve().then(() => (init_TransferHistory(), TransferHistory_exports)).then((mod) => {
-        return { default: mod.TransferHistoryWidget };
-      })
-    );
-    LazyVaultsHistoryWidget = React7.lazy(
-      () => Promise.resolve().then(() => (init_VaultsHistory(), VaultsHistory_exports)).then((mod) => {
-        return { default: mod.VaultsHistoryWidget };
-      })
-    );
-    HistoryDataGroupDesktop = (props) => {
-      const { active = "deposit", onTabChange } = props;
-      const { t } = useTranslation();
-      const { isMainAccount } = useAccount();
-      useEffect(() => {
-        if (active === "vaults" && !isMainAccount) {
-          onTabChange("deposit");
-        }
-      }, [active, isMainAccount]);
-      return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(
-        Tabs,
-        {
-          value: active,
-          onValueChange: onTabChange,
-          variant: "contained",
-          size: "xl",
-          children: [
-            /* @__PURE__ */ jsx(
-              TabPanel,
-              {
-                title: t("common.deposits"),
-                icon: /* @__PURE__ */ jsx(ArrowDownSquareFillIcon, {}),
-                value: "deposit",
-                children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyAssetHistoryWidget, { side: AssetHistorySideEnum.DEPOSIT }) })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TabPanel,
-              {
-                title: t("common.withdrawals"),
-                icon: /* @__PURE__ */ jsx(ArrowUpSquareFillIcon, {}),
-                value: "withdraw",
-                children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyAssetHistoryWidget, { side: AssetHistorySideEnum.WITHDRAW }) })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TabPanel,
-              {
-                title: t("common.funding"),
-                icon: /* @__PURE__ */ jsx(FeeTierIcon, {}),
-                value: "funding",
-                children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyFundingHistoryWidget, {}) })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TabPanel,
-              {
-                title: t("portfolio.overview.distribution"),
-                icon: /* @__PURE__ */ jsx(ServerFillIcon, {}),
-                value: "distribution",
-                children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyDistributionHistoryWidget, {}) })
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              TabPanel,
-              {
-                title: t("portfolio.overview.transferHistory"),
-                icon: /* @__PURE__ */ jsx(ArrowLeftRightSquareFill, {}),
-                value: "transfer",
-                children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyTransferHistoryWidget, {}) })
-              }
-            ),
-            isMainAccount && /* @__PURE__ */ jsx(
-              TabPanel,
-              {
-                value: "vaults",
-                icon: /* @__PURE__ */ jsx(VaultsIcon, {}),
-                title: t("portfolio.overview.vaults"),
-                children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyVaultsHistoryWidget, {}) })
-              }
-            )
-          ]
-        }
-      ) });
-    };
-  }
-});
-var EMPTY_HOLDING, useAccountsData;
-var init_useAccountsData = __esm({
-  "src/hooks/useAccountsData.ts"() {
-    EMPTY_HOLDING = {
-      token: "USDC",
-      holding: 0,
-      frozen: 0
-    };
-    useAccountsData = () => {
-      const { t } = useTranslation();
-      const { state, isMainAccount } = useAccount();
-      const { holding = [] } = useCollateral();
-      const subAccounts = state.subAccounts ?? [];
-      return useMemo(() => {
-        return produce(subAccounts, (draft) => {
-          for (const sub of draft) {
-            sub.account_id = sub.id;
-            if (Array.isArray(sub.holding) && sub.holding.length) {
-              sub.children = sub.holding.map((item) => ({
-                ...item,
-                account_id: sub.id
-              }));
-            } else {
-              sub.children = [{ ...EMPTY_HOLDING, account_id: sub.id }];
+      const { state, isMainAccount } = useAccount();
+      const { holding = [] } = useCollateral();
+      const subAccounts = state.subAccounts ?? [];
+      return useMemo(() => {
+        return produce(subAccounts, (draft) => {
+          for (const sub of draft) {
+            sub.account_id = sub.id;
+            if (Array.isArray(sub.holding) && sub.holding.length) {
+              sub.children = sub.holding.map((item) => ({
+                ...item,
+                account_id: sub.id
+              }));
+            } else {
+              sub.children = [{ ...EMPTY_HOLDING, account_id: sub.id }];
             }
             Reflect.deleteProperty(sub, "holding");
           }
@@ -2379,7 +2190,7 @@ var init_useAssetTotalValue = __esm({
 var LazyConvertHistoryWidget, TotalValueInfo, DepositAndWithdrawButton, DataFilterSection, AssetsDataTable, AssetsTable;
 var init_assets_ui_desktop = __esm({
   "src/pages/assets/assetsPage/assets.ui.desktop.tsx"() {
-    LazyConvertHistoryWidget = React7.lazy(
+    LazyConvertHistoryWidget = React12.lazy(
       () => Promise.resolve().then(() => (init_convert_widget(), convert_widget_exports)).then((mod) => {
         return { default: mod.ConvertHistoryWidget };
       })
@@ -2683,7 +2494,19 @@ var init_assets_ui_desktop = __esm({
                     value: "convertHistory",
                     className: "oui-rounded-xl oui-bg-base-9 oui-px-6",
                     title: t("portfolio.overview.tab.convert.history"),
-                    children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyConvertHistoryWidget, {}) })
+                    children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsxs(
+                      Flex,
+                      {
+                        direction: "column",
+                        mt: 4,
+                        itemAlign: "center",
+                        className: "oui-w-full",
+                        children: [
+                          /* @__PURE__ */ jsx(Divider, { className: "oui-w-full oui-border-b oui-border-line-4 oui-pt-6" }),
+                          /* @__PURE__ */ jsx(LazyConvertHistoryWidget, {})
+                        ]
+                      }
+                    ) })
                   }
                 )
               ]
@@ -2705,7 +2528,7 @@ var init_useAssetsAccountFilter = __esm({
     init_assets_ui_desktop();
     useAssetsAccountFilter = (data) => {
       const { state, isMainAccount } = useAccount();
-      const [selectedAccount, setSelectedAccount] = React7.useState(
+      const [selectedAccount, setSelectedAccount] = React12.useState(
         "All accounts" /* ALL */
       );
       const filteredData = useMemo(() => {
@@ -2724,7 +2547,7 @@ var init_useAssetsAccountFilter = __esm({
           }
         });
       }, [data, selectedAccount, isMainAccount, state]);
-      const onAccountFilter = React7.useCallback(
+      const onAccountFilter = React12.useCallback(
         (filter) => {
           const { name, value } = filter;
           if (name === "account") {
@@ -2742,10 +2565,10 @@ var init_useAssetsAccountFilter = __esm({
     };
     useAssetsMultiFilter = (data) => {
       const { state, isMainAccount } = useAccount();
-      const [selectedAccount, setSelectedAccount] = React7.useState(
+      const [selectedAccount, setSelectedAccount] = React12.useState(
         "All accounts" /* ALL */
       );
-      const [selectedAsset, setSelectedAsset] = React7.useState("all");
+      const [selectedAsset, setSelectedAsset] = React12.useState("all");
       const filteredData = useMemo(() => {
         let accountFiltered = data;
         if (isMainAccount) {
@@ -2778,7 +2601,7 @@ var init_useAssetsAccountFilter = __esm({
         }
         return accountFiltered;
       }, [data, selectedAccount, selectedAsset, isMainAccount, state]);
-      const onFilter = React7.useCallback(
+      const onFilter = React12.useCallback(
         (filter) => {
           const { name, value } = filter;
           if (name === "account") {
@@ -2816,6 +2639,7 @@ var init_convert_script = __esm({
     init_hooks();
     init_date();
     useConvertScript = () => {
+      const { t } = useTranslation();
       const { isMainAccount, state } = useAccount();
       const { holding = [] } = useCollateral();
       const { data: indexPrices } = useIndexPricesStream();
@@ -2842,9 +2666,9 @@ var init_convert_script = __esm({
           value: item.token,
           label: item.token
         })) || [];
-        return [{ label: "All assets", value: "all" }, ...assetOptions];
-      }, [tokensInfo]);
-      const onFilter = React7.useCallback(
+        return [{ label: t("common.allAssets"), value: "all" }, ...assetOptions];
+      }, [tokensInfo, t]);
+      const onFilter = React12.useCallback(
         (filter) => {
           const { name, value } = filter;
           if (name === "account") {
@@ -2864,7 +2688,7 @@ var init_convert_script = __esm({
         },
         [onAccountFilter, setPage]
       );
-      const queryUrl = React7.useMemo(() => {
+      const queryUrl = React12.useMemo(() => {
         const params = new URLSearchParams();
         params.set("page", page.toString());
         params.set("size", pageSize.toString());
@@ -3031,7 +2855,7 @@ var init_convert_column = __esm({
         e.stopPropagation();
         toast.success(t("common.copy.copied"));
       };
-      const columns = React7.useMemo(() => {
+      const columns = React12.useMemo(() => {
         return [
           {
             title: t("portfolio.overview.column.convert.convertedAsset"),
@@ -3128,7 +2952,7 @@ var init_convert_column = __esm({
         e.stopPropagation();
         toast.success(t("common.copy.copied"));
       };
-      const columns = React7.useMemo(() => {
+      const columns = React12.useMemo(() => {
         return [
           {
             title: t("portfolio.overview.column.convert.convertedAsset"),
@@ -3220,24 +3044,10 @@ var init_convert_column = __esm({
     };
   }
 });
-var CONVERT_STATUS_OPTIONS, ConvertDetailsModal, ConvertDesktopUI;
+var ConvertDetailsModal, ConvertDesktopUI;
 var init_convert_ui_desktop = __esm({
   "src/pages/assets/convertPage/convert.ui.desktop.tsx"() {
     init_convert_column();
-    CONVERT_STATUS_OPTIONS = [
-      {
-        label: "All status",
-        value: "all"
-      },
-      {
-        label: "Completed",
-        value: "completed"
-      },
-      {
-        label: "Pending",
-        value: "pending"
-      }
-    ];
     ConvertDetailsModal = modal.create((props) => {
       const { t } = useTranslation();
       const { visible, onOpenChange } = useModal();
@@ -3265,7 +3075,7 @@ var init_convert_ui_desktop = __esm({
               className: "oui-w-full",
               classNames: {
                 header: "oui-h-10",
-                root: "oui-bg-base-8 oui-max-h-[60vh] oui-overflow-y-scroll"
+                root: "oui-bg-base-8 oui-max-h-[60vh] oui-overflow-y-scroll oui-custom-scrollbar"
               },
               onRow: () => ({
                 className: "oui-h-[40px]"
@@ -3279,6 +3089,7 @@ var init_convert_ui_desktop = __esm({
     ConvertDesktopUI = ({
       convertState
     }) => {
+      const { t } = useTranslation();
       const handleDetailsClick = (convertId) => {
         const record = convertState.dataSource.find(
           (item) => item.convert_id === convertId
@@ -3301,6 +3112,14 @@ var init_convert_ui_desktop = __esm({
         onFilter,
         convertedAssetOptions
       } = convertState;
+      const statusOptions = useMemo(
+        () => [
+          { label: t("common.status.all"), value: "all" },
+          { label: t("orders.status.completed"), value: "completed" },
+          { label: t("orders.status.pending"), value: "pending" }
+        ],
+        [t]
+      );
       const dataFilter = useMemo(() => {
         return /* @__PURE__ */ jsx(
           DataFilter,
@@ -3324,7 +3143,7 @@ var init_convert_ui_desktop = __esm({
                 type: "select",
                 name: "status",
                 value: statusFilter,
-                options: CONVERT_STATUS_OPTIONS
+                options: statusOptions
               },
               {
                 type: "range",
@@ -3342,24 +3161,23 @@ var init_convert_ui_desktop = __esm({
         statusFilter,
         dateRange,
         onFilter,
-        convertedAssetOptions
+        convertedAssetOptions,
+        statusOptions
       ]);
-      return /* @__PURE__ */ jsxs(Flex, { direction: "column", mt: 4, itemAlign: "center", className: "oui-w-full", children: [
-        /* @__PURE__ */ jsx(Divider, { className: "oui-w-full oui-border-b oui-border-line-4 oui-pt-6" }),
-        /* @__PURE__ */ jsx(Flex, { direction: "row", className: "oui-w-full", children: dataFilter }),
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        dataFilter,
         /* @__PURE__ */ jsx(
           AuthGuardDataTable,
           {
+            bordered: true,
             columns,
             dataSource: convertState.dataSource,
             loading: convertState.isLoading,
-            bordered: true,
             pagination: convertState.pagination,
             manualPagination: true,
             className: "oui-mt-4 oui-w-full",
             classNames: {
-              root: "oui-h-[calc(100vh_-_200px)]",
-              header: "oui-h-12"
+              root: "oui-h-[calc(100%_-_49px)]"
             },
             onRow: () => ({
               className: "oui-h-[48px] oui-cursor-pointer"
@@ -3377,7 +3195,6 @@ var ConvertMobileUI, ConvertMobileField, ConvertMobileItem, ConverHistoryItemDet
 var init_convert_ui_mobile = __esm({
   "src/pages/assets/convertPage/convert.ui.mobile.tsx"() {
     init_convert_column();
-    init_convert_ui_desktop();
     ConvertMobileUI = ({
       convertState
     }) => {
@@ -3389,6 +3206,14 @@ var init_convert_ui_mobile = __esm({
         onFilter,
         convertedAssetOptions
       } = convertState;
+      const statusOptions = useMemo(
+        () => [
+          { label: t("common.status.all"), value: "all" },
+          { label: t("orders.status.completed"), value: "completed" },
+          { label: t("orders.status.pending"), value: "pending" }
+        ],
+        [t]
+      );
       const dataFilter = useMemo(() => {
         return /* @__PURE__ */ jsx(
           DataFilter,
@@ -3415,7 +3240,7 @@ var init_convert_ui_mobile = __esm({
                 type: "picker",
                 name: "status",
                 value: statusFilter,
-                options: CONVERT_STATUS_OPTIONS,
+                options: statusOptions,
                 className: "oui-whitespace-nowrap"
               },
               {
@@ -3434,7 +3259,8 @@ var init_convert_ui_mobile = __esm({
         statusFilter,
         dateRange,
         onFilter,
-        convertedAssetOptions
+        convertedAssetOptions,
+        statusOptions
       ]);
       return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1 oui-px-3", children: [
         /* @__PURE__ */ jsx(ScrollIndicator, { className: "oui-pr-5", children: /* @__PURE__ */ jsx(Flex, { direction: "row", children: dataFilter }) }),
@@ -3621,32 +3447,436 @@ var init_convert_ui_mobile = __esm({
           ] })) })
         }
       );
-    });
+    });
+  }
+});
+
+// src/pages/assets/convertPage/convert.widget.tsx
+var convert_widget_exports = {};
+__export(convert_widget_exports, {
+  ConvertHistoryWidget: () => ConvertHistoryWidget
+});
+var ConvertHistoryWidget;
+var init_convert_widget = __esm({
+  "src/pages/assets/convertPage/convert.widget.tsx"() {
+    init_convert_script();
+    init_convert_ui_desktop();
+    init_convert_ui_mobile();
+    ConvertHistoryWidget = () => {
+      const convertState = useConvertScript();
+      const { isMobile } = useScreen();
+      if (isMobile) {
+        return /* @__PURE__ */ jsx(ConvertMobileUI, { convertState });
+      }
+      return /* @__PURE__ */ jsx(ConvertDesktopUI, { convertState });
+    };
+  }
+});
+var useColumns3;
+var init_column5 = __esm({
+  "src/pages/overview/VaultsHistory/column.tsx"() {
+    useColumns3 = () => {
+      const { t } = useTranslation();
+      const columns = React12.useMemo(() => {
+        return [
+          {
+            title: t("common.type"),
+            dataIndex: "type",
+            className: (record) => {
+              if (record?.type === "deposit") {
+                return "oui-text-success";
+              }
+              if (record?.type === "withdrawal") {
+                return "oui-text-danger";
+              }
+              return "";
+            },
+            render(val) {
+              if (val === "deposit") {
+                return t("common.deposit");
+              }
+              if (val === "withdrawal") {
+                return t("common.withdraw");
+              }
+              return null;
+            }
+          },
+          {
+            title: t("portfolio.overview.vaultName"),
+            dataIndex: "vaultName"
+          },
+          {
+            title: t("common.token"),
+            dataIndex: "token",
+            render(val) {
+              return /* @__PURE__ */ jsxs(Flex, { justify: "start", itemAlign: "center", gap: 2, children: [
+                /* @__PURE__ */ jsx(TokenIcon, { name: val }),
+                val
+              ] });
+            }
+          },
+          {
+            title: t("common.time"),
+            dataIndex: "created_time",
+            rule: "date"
+          },
+          {
+            title: t("common.status"),
+            dataIndex: "status",
+            render(val) {
+              return capitalizeString(val);
+            }
+          },
+          {
+            title: t("common.amount"),
+            dataIndex: "amount_change",
+            render(val) {
+              return /* @__PURE__ */ jsx(
+                Text.numeral,
+                {
+                  showIdentifier: true,
+                  className: cn(
+                    "oui-select-none",
+                    val >= 0 ? "oui-text-success" : "oui-text-danger"
+                  ),
+                  children: val
+                }
+              );
+            }
+          }
+        ];
+      }, [t]);
+      return columns;
+    };
+  }
+});
+var VaultsHistoryUI;
+var init_transfer_ui2 = __esm({
+  "src/pages/overview/VaultsHistory/transfer.ui.tsx"() {
+    init_column5();
+    VaultsHistoryUI = (props) => {
+      const { dataSource: dataSource2, dateRange, isLoading, onFilter } = props;
+      const columns = useColumns3();
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          DataFilter,
+          {
+            onFilter,
+            items: [
+              {
+                type: "range",
+                name: "dateRange",
+                value: {
+                  from: dateRange[0],
+                  to: dateRange[1]
+                }
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AuthGuardDataTable,
+          {
+            bordered: true,
+            columns,
+            dataSource: dataSource2,
+            loading: isLoading,
+            className: "oui-font-semibold",
+            classNames: { root: "oui-h-[calc(100%_-_49px)]" },
+            pagination: props.pagination,
+            generatedRowKey: (row) => row.id
+          }
+        )
+      ] });
+    };
+  }
+});
+var useVaultsHistoryHook;
+var init_useDataSource_script4 = __esm({
+  "src/pages/overview/VaultsHistory/useDataSource.script.ts"() {
+    init_date();
+    useVaultsHistoryHook = () => {
+      const today = React12.useMemo(() => {
+        const date = /* @__PURE__ */ new Date();
+        return new Date(getYear(date), getMonth(date), getDate(date), 0, 0, 0);
+      }, []);
+      const [dateRange, setDateRange] = React12.useState([
+        subtractDaysFromCurrentDate(90, today),
+        today
+      ]);
+      const { page, pageSize, setPage, parsePagination } = usePagination();
+      const [data, { isLoading, meta }] = useVaultsHistory({
+        dataRange: [
+          dateRange[0]?.getTime(),
+          set(dateRange[1], {
+            hours: 23,
+            minutes: 59,
+            seconds: 59,
+            milliseconds: 0
+          })?.getTime()
+        ],
+        size: pageSize,
+        page
+      });
+      const dataSource2 = React12.useMemo(() => {
+        if (!Array.isArray(data) || !data.length) {
+          return [];
+        }
+        return data.map((item) => ({
+          ...item,
+          token: "USDC",
+          // need to hard code for now
+          vaultName: "Orderly OmniVault",
+          amount_change: item.type === "withdrawal" ? -item.amount_change : item.amount_change
+        }));
+      }, [data]);
+      const onDateRangeFilter = React12.useCallback(
+        (filter) => {
+          if (filter.name === "dateRange") {
+            setDateRange(parseDateRangeForFilter(filter.value));
+          }
+          setPage(1);
+        },
+        [setPage]
+      );
+      const pagination = React12.useMemo(
+        () => parsePagination(meta),
+        [parsePagination, meta]
+      );
+      return {
+        dataSource: dataSource2,
+        isLoading,
+        dateRange,
+        onFilter: onDateRangeFilter,
+        pagination
+      };
+    };
   }
 });
-
-// src/pages/assets/convertPage/convert.widget.tsx
-var convert_widget_exports = {};
-__export(convert_widget_exports, {
-  ConvertHistoryWidget: () => ConvertHistoryWidget
+var VaultsHistoryMobile;
+var init_vaults_ui_mobile = __esm({
+  "src/pages/overview/VaultsHistory/vaults.ui.mobile.tsx"() {
+    VaultsHistoryMobile = (props) => {
+      const { dateRange, onFilter, dataSource: dataSource2, isLoading, pagination } = props;
+      const { t } = useTranslation();
+      const loadMore = () => {
+        if (dataSource2.length < (pagination?.count || 0)) {
+          pagination?.onPageSizeChange?.(pagination?.pageSize + 50);
+        }
+      };
+      const renderHistoryItem = (item) => {
+        const typeColor = item.type === "deposit" ? "buy" : "sell";
+        const typeText = item.type === "deposit" ? t("common.deposit") : t("common.withdraw");
+        const amountText = item.amount_change ? Math.abs(item.amount_change) : "-";
+        return /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-flex-col oui-rounded-xl oui-bg-base-9 oui-p-2 oui-font-semibold", children: [
+          /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-justify-between oui-text-sm oui-text-base-contrast-80", children: [
+            /* @__PURE__ */ jsx("div", { children: item.vaultName }),
+            /* @__PURE__ */ jsx("div", { children: item.status?.slice(0, 1).toUpperCase() + item.status?.slice(1) })
+          ] }),
+          /* @__PURE__ */ jsx(Text.formatted, { rule: "date", intensity: 36, size: "2xs", children: item.created_time }),
+          /* @__PURE__ */ jsx(Divider, { className: "oui-my-2" }),
+          /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center [&>div]:oui-flex-1 [&>div]:oui-text-2xs [&>div]:oui-text-base-contrast-36", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { children: t("common.token") }),
+              /* @__PURE__ */ jsxs("div", { className: "oui-flex oui-items-center oui-gap-1 oui-text-xs oui-text-base-contrast-80", children: [
+                /* @__PURE__ */ jsx(TokenIcon, { name: "USDC", size: "2xs" }),
+                /* @__PURE__ */ jsx(Text, { children: "USDC" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("div", { children: t("common.type") }),
+              /* @__PURE__ */ jsx(Text, { color: typeColor, className: "oui-text-xs", children: typeText })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "oui-text-right", children: [
+              /* @__PURE__ */ jsx("div", { children: t("common.amount") }),
+              /* @__PURE__ */ jsx("div", { className: "oui-text-xs oui-text-base-contrast-80", children: amountText })
+            ] })
+          ] })
+        ] });
+      };
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          DataFilter,
+          {
+            items: [
+              {
+                type: "range",
+                name: "dateRange",
+                value: {
+                  from: dateRange[0],
+                  to: dateRange[1]
+                }
+              }
+            ],
+            onFilter: (value) => {
+              onFilter(value);
+            },
+            className: "oui-sticky oui-top-[44px] oui-z-10 oui-border-none oui-bg-base-10 oui-px-3 oui-py-2"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ListView,
+          {
+            dataSource: dataSource2,
+            renderItem: renderHistoryItem,
+            contentClassName: "!oui-space-y-1",
+            loadMore,
+            isLoading,
+            className: "oui-px-1"
+          }
+        )
+      ] });
+    };
+  }
 });
-var ConvertHistoryWidget;
-var init_convert_widget = __esm({
-  "src/pages/assets/convertPage/convert.widget.tsx"() {
-    init_convert_script();
-    init_convert_ui_desktop();
-    init_convert_ui_mobile();
-    ConvertHistoryWidget = () => {
-      const convertState = useConvertScript();
+var VaultsHistoryWidget;
+var init_transfer_widget2 = __esm({
+  "src/pages/overview/VaultsHistory/transfer.widget.tsx"() {
+    init_transfer_ui2();
+    init_useDataSource_script4();
+    init_vaults_ui_mobile();
+    VaultsHistoryWidget = () => {
+      const state = useVaultsHistoryHook();
       const { isMobile } = useScreen();
       if (isMobile) {
-        return /* @__PURE__ */ jsx(ConvertMobileUI, { convertState });
+        return /* @__PURE__ */ jsx(VaultsHistoryMobile, { ...state });
       }
-      return /* @__PURE__ */ jsx(ConvertDesktopUI, { convertState });
+      return /* @__PURE__ */ jsx(VaultsHistoryUI, { ...state });
     };
   }
 });
-var HistoryDataGroupMobile;
+
+// src/pages/overview/VaultsHistory/index.tsx
+var VaultsHistory_exports = {};
+__export(VaultsHistory_exports, {
+  VaultsHistoryUI: () => VaultsHistoryUI,
+  VaultsHistoryWidget: () => VaultsHistoryWidget
+});
+var init_VaultsHistory = __esm({
+  "src/pages/overview/VaultsHistory/index.tsx"() {
+    init_transfer_widget2();
+    init_transfer_ui2();
+  }
+});
+var LazyAssetHistoryWidget, LazyFundingHistoryWidget, LazyDistributionHistoryWidget, LazyTransferHistoryWidget, LazyConvertHistoryWidget2, LazyVaultsHistoryWidget, HistoryDataGroupDesktop;
+var init_historyDataGroup_ui_desktop = __esm({
+  "src/pages/overview/historyDataGroup/historyDataGroup.ui.desktop.tsx"() {
+    LazyAssetHistoryWidget = React12.lazy(
+      () => Promise.resolve().then(() => (init_assetHistory(), assetHistory_exports)).then((mod) => {
+        return { default: mod.AssetHistoryWidget };
+      })
+    );
+    LazyFundingHistoryWidget = React12.lazy(
+      () => Promise.resolve().then(() => (init_funding(), funding_exports)).then((mod) => {
+        return { default: mod.FundingHistoryWidget };
+      })
+    );
+    LazyDistributionHistoryWidget = React12.lazy(
+      () => Promise.resolve().then(() => (init_distribution(), distribution_exports)).then((mod) => {
+        return { default: mod.DistributionHistoryWidget };
+      })
+    );
+    LazyTransferHistoryWidget = React12.lazy(
+      () => Promise.resolve().then(() => (init_TransferHistory(), TransferHistory_exports)).then((mod) => {
+        return { default: mod.TransferHistoryWidget };
+      })
+    );
+    LazyConvertHistoryWidget2 = React12.lazy(
+      () => Promise.resolve().then(() => (init_convert_widget(), convert_widget_exports)).then((mod) => {
+        return { default: mod.ConvertHistoryWidget };
+      })
+    );
+    LazyVaultsHistoryWidget = React12.lazy(
+      () => Promise.resolve().then(() => (init_VaultsHistory(), VaultsHistory_exports)).then((mod) => {
+        return { default: mod.VaultsHistoryWidget };
+      })
+    );
+    HistoryDataGroupDesktop = (props) => {
+      const { active = "deposit", onTabChange } = props;
+      const { t } = useTranslation();
+      const { isMainAccount } = useAccount();
+      useEffect(() => {
+        if (active === "vaults" && !isMainAccount) {
+          onTabChange("deposit");
+        }
+      }, [active, isMainAccount]);
+      return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(
+        Tabs,
+        {
+          value: active,
+          onValueChange: onTabChange,
+          variant: "contained",
+          size: "xl",
+          children: [
+            /* @__PURE__ */ jsx(
+              TabPanel,
+              {
+                title: t("common.deposits"),
+                icon: /* @__PURE__ */ jsx(ArrowDownSquareFillIcon, {}),
+                value: "deposit",
+                children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyAssetHistoryWidget, { side: AssetHistorySideEnum.DEPOSIT }) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TabPanel,
+              {
+                title: t("common.withdrawals"),
+                icon: /* @__PURE__ */ jsx(ArrowUpSquareFillIcon, {}),
+                value: "withdraw",
+                children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyAssetHistoryWidget, { side: AssetHistorySideEnum.WITHDRAW }) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TabPanel,
+              {
+                title: t("common.funding"),
+                icon: /* @__PURE__ */ jsx(FeeTierIcon, {}),
+                value: "funding",
+                children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyFundingHistoryWidget, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TabPanel,
+              {
+                title: t("portfolio.overview.distribution"),
+                icon: /* @__PURE__ */ jsx(ServerFillIcon, {}),
+                value: "distribution",
+                children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyDistributionHistoryWidget, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TabPanel,
+              {
+                title: t("portfolio.overview.transferHistory"),
+                icon: /* @__PURE__ */ jsx(ArrowLeftRightSquareFill, {}),
+                value: "transfer",
+                children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyTransferHistoryWidget, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TabPanel,
+              {
+                title: t("portfolio.overview.tab.convert.history"),
+                value: "convert",
+                children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyConvertHistoryWidget2, {}) })
+              }
+            ),
+            isMainAccount && /* @__PURE__ */ jsx(
+              TabPanel,
+              {
+                value: "vaults",
+                icon: /* @__PURE__ */ jsx(VaultsIcon, {}),
+                title: t("portfolio.overview.vaults"),
+                children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyVaultsHistoryWidget, {}) })
+              }
+            )
+          ]
+        }
+      ) });
+    };
+  }
+});
+var LazyTransferHistoryWidget2, HistoryDataGroupMobile;
 var init_historyDataGroup_ui_mobile = __esm({
   "src/pages/overview/historyDataGroup/historyDataGroup.ui.mobile.tsx"() {
     init_convert_widget();
@@ -3654,6 +3884,11 @@ var init_historyDataGroup_ui_mobile = __esm({
     init_assetHistory();
     init_distribution();
     init_funding();
+    LazyTransferHistoryWidget2 = React12.lazy(
+      () => Promise.resolve().then(() => (init_TransferHistory(), TransferHistory_exports)).then((mod) => {
+        return { default: mod.TransferHistoryWidget };
+      })
+    );
     HistoryDataGroupMobile = (props) => {
       const { active = "deposit", onTabChange } = props;
       const { t } = useTranslation();
@@ -3681,6 +3916,14 @@ var init_historyDataGroup_ui_mobile = __esm({
                 children: /* @__PURE__ */ jsx(DistributionHistoryWidget, {})
               }
             ),
+            /* @__PURE__ */ jsx(
+              TabPanel,
+              {
+                title: t("portfolio.overview.transferHistory"),
+                value: "transfer",
+                children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyTransferHistoryWidget2, {}) })
+              }
+            ),
             /* @__PURE__ */ jsx(
               TabPanel,
               {
@@ -4169,7 +4412,7 @@ var init_periodHeader = __esm({
 var LazyPeriodTitle, AssetsChart;
 var init_assetsChart_ui = __esm({
   "src/pages/overview/assetChart/assetsChart.ui.tsx"() {
-    LazyPeriodTitle = React7.lazy(
+    LazyPeriodTitle = React12.lazy(
       () => Promise.resolve().then(() => (init_periodHeader(), periodHeader_exports)).then((mod) => {
         return { default: mod.PeriodTitle };
       })
@@ -4180,7 +4423,7 @@ var init_assetsChart_ui = __esm({
       return /* @__PURE__ */ jsx(
         Card,
         {
-          title: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          title: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
             LazyPeriodTitle,
             {
               onPeriodChange,
@@ -4191,7 +4434,7 @@ var init_assetsChart_ui = __esm({
           ) }),
           id: "portfolio-overview-assets-chart",
           classNames: { content: "oui-h-[168px] oui-pb-0" },
-          children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AssetAreaChart, { data, invisible: props.invisible }) })
+          children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(AssetAreaChart, { data, invisible: props.invisible }) })
         }
       );
     };
@@ -4226,7 +4469,7 @@ var init_assetChart = __esm({
 var LazyPeriodTitle2, PerformanceUI, LabelWithHint, PerformancePnL, CumulativePnlChart;
 var init_performance_ui = __esm({
   "src/pages/overview/performance/performance.ui.tsx"() {
-    LazyPeriodTitle2 = React7.lazy(
+    LazyPeriodTitle2 = React12.lazy(
       () => Promise.resolve().then(() => (init_periodHeader(), periodHeader_exports)).then((mod) => {
         return { default: mod.PeriodTitle };
       })
@@ -4246,7 +4489,7 @@ var init_performance_ui = __esm({
       return /* @__PURE__ */ jsxs(
         Card,
         {
-          title: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+          title: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
             LazyPeriodTitle2,
             {
               onPeriodChange,
@@ -4498,7 +4741,7 @@ var init_performance = __esm({
 var EffectiveFee;
 var init_effectiveFee = __esm({
   "src/pages/feeTier/icons/effectiveFee.tsx"() {
-    EffectiveFee = React7.forwardRef((props, ref) => {
+    EffectiveFee = React12.forwardRef((props, ref) => {
       const linearId = useId();
       return /* @__PURE__ */ jsxs(
         "svg",
@@ -5567,22 +5810,22 @@ var LazyCreateAPIKeyDialog, LazyCreatedAPIKeyDialog, LazyDeleteAPIKeyDialog, Laz
 var init_apiManager_ui = __esm({
   "src/pages/api/apiManager.ui.tsx"() {
     init_apiManager_script();
-    LazyCreateAPIKeyDialog = React7.lazy(
+    LazyCreateAPIKeyDialog = React12.lazy(
       () => Promise.resolve().then(() => (init_createApiKey(), createApiKey_exports)).then((mod) => {
         return { default: mod.CreateAPIKeyDialog };
       })
     );
-    LazyCreatedAPIKeyDialog = React7.lazy(
+    LazyCreatedAPIKeyDialog = React12.lazy(
       () => Promise.resolve().then(() => (init_createdApiKey(), createdApiKey_exports)).then((mod) => {
         return { default: mod.CreatedAPIKeyDialog };
       })
     );
-    LazyDeleteAPIKeyDialog = React7.lazy(
+    LazyDeleteAPIKeyDialog = React12.lazy(
       () => Promise.resolve().then(() => (init_deleteApiKey(), deleteApiKey_exports)).then((mod) => {
         return { default: mod.DeleteAPIKeyDialog };
       })
     );
-    LazyEditAPIKeyDialog = React7.lazy(
+    LazyEditAPIKeyDialog = React12.lazy(
       () => Promise.resolve().then(() => (init_editApiKey(), editApiKey_exports)).then((mod) => {
         return { default: mod.EditAPIKeyDialog };
       })
@@ -5611,8 +5854,8 @@ var init_apiManager_ui = __esm({
             ),
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx(KeyList, { ...props }),
-              /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyCreateAPIKeyDialog, { ...props }) }),
-              /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyCreatedAPIKeyDialog, { ...props }) })
+              /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyCreateAPIKeyDialog, { ...props }) }),
+              /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyCreatedAPIKeyDialog, { ...props }) })
             ] })
           ]
         }
@@ -5851,7 +6094,7 @@ var init_apiManager_ui = __esm({
             children: t("common.edit")
           }
         ),
-        open && /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        open && /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           LazyEditAPIKeyDialog,
           {
             item,
@@ -5882,7 +6125,7 @@ var init_apiManager_ui = __esm({
             children: t("common.delete")
           }
         ),
-        open && /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        open && /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           LazyDeleteAPIKeyDialog,
           {
             item,
@@ -7309,22 +7552,22 @@ var MobileOverview = (props) => {
     )
   ] });
 };
-var LazyAssetWidget = React7.lazy(
+var LazyAssetWidget = React12.lazy(
   () => Promise.resolve().then(() => (init_assets(), assets_exports)).then((mod) => {
     return { default: mod.AssetWidget };
   })
 );
-var LazyAssetsChartWidget = React7.lazy(
+var LazyAssetsChartWidget = React12.lazy(
   () => Promise.resolve().then(() => (init_assetChart(), assetChart_exports)).then((mod) => {
     return { default: mod.AssetsChartWidget };
   })
 );
-var LazyPerformanceWidget = React7.lazy(
+var LazyPerformanceWidget = React12.lazy(
   () => Promise.resolve().then(() => (init_performance(), performance_exports)).then((mod) => {
     return { default: mod.PerformanceWidget };
   })
 );
-var LazyHistoryDataGroupWidget = React7.lazy(
+var LazyHistoryDataGroupWidget = React12.lazy(
   () => Promise.resolve().then(() => (init_historyDataGroup(), historyDataGroup_exports)).then((mod) => {
     return { default: mod.HistoryDataGroupWidget };
   })
@@ -7338,10 +7581,10 @@ var OverviewPage = (props) => {
       hideTraderCard: props.hideTraderCard
     }
   ) : /* @__PURE__ */ jsxs(Grid, { cols: 2, gap: 4, children: [
-    /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyAssetWidget, {}) }),
-    /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyAssetsChartWidget, {}) }),
-    /* @__PURE__ */ jsx(Grid.span, { colSpan: 2, children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyPerformanceWidget, {}) }) }),
-    /* @__PURE__ */ jsx(Grid.span, { colSpan: 2, children: /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyHistoryDataGroupWidget, {}) }) })
+    /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyAssetWidget, {}) }),
+    /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyAssetsChartWidget, {}) }),
+    /* @__PURE__ */ jsx(Grid.span, { colSpan: 2, children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyPerformanceWidget, {}) }) }),
+    /* @__PURE__ */ jsx(Grid.span, { colSpan: 2, children: /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyHistoryDataGroupWidget, {}) }) })
   ] }) });
 };
 
@@ -7351,7 +7594,7 @@ __export(feeTier_exports, {
   FeeTierPage: () => FeeTierPage,
   useFeeTierScript: () => useFeeTierScript
 });
-var LazyFeeTierHeader = React7.lazy(
+var LazyFeeTierHeader = React12.lazy(
   () => Promise.resolve().then(() => (init_feeTierHeader(), feeTierHeader_exports)).then((mod) => {
     return { default: mod.FeeTierHeader };
   })
@@ -7457,7 +7700,7 @@ var FeeTier = (props) => {
       },
       children: [
         !isMobile && /* @__PURE__ */ jsx(Divider, {}),
-        /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(React12.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
           LazyFeeTierHeader,
           {
             vol,
@@ -7658,8 +7901,8 @@ var PositionsPage = (props) => {
   const { t } = useTranslation();
   const { state, isMainAccount } = useAccount();
   const subAccounts = state.subAccounts ?? [];
-  const [selectedAccount, setAccount] = React7.useState("All accounts" /* ALL */);
-  const onAccountFilter = React7.useCallback(
+  const [selectedAccount, setAccount] = React12.useState("All accounts" /* ALL */);
+  const onAccountFilter = React12.useCallback(
     (filter) => {
       const { name, value } = filter;
       if (name === "account") {
@@ -7824,7 +8067,7 @@ var OrdersPage = (props) => {
     }
   );
 };
-var TooltipIcon = React7.forwardRef(
+var TooltipIcon = React12.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsx(
       "svg",
@@ -8151,7 +8394,7 @@ var useAssetsColumns = (options) => {
   const tokensInfo = useAppStore((state) => state.tokensInfo);
   const { namespace } = useWalletConnector();
   const { onTransfer, onConvert } = options;
-  const columns = React7.useMemo(() => {
+  const columns = React12.useMemo(() => {
     return [
       {
         title: t("portfolio.overview.column.token"),
@@ -8622,7 +8865,7 @@ var AssetsTableMobile = (props) => {
     value: "Main accounts" /* MAIN */
   };
   const ALL_ASSETS = {
-    label: "All assets",
+    label: t("common.allAssets"),
     value: "all"
   };
   const memoizedOptions = useMemo(() => {
@@ -8679,7 +8922,7 @@ var AssetsTableMobile = (props) => {
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "oui-flex oui-flex-col oui-gap-1", children: dataSource2?.map((assets, index) => {
-      return /* @__PURE__ */ jsxs(React7.Fragment, { children: [
+      return /* @__PURE__ */ jsxs(React12.Fragment, { children: [
         /* @__PURE__ */ jsx(AccountTag, { name: assets.description ?? "sub account" }),
         Array.isArray(assets.children) && assets.children.map((child) => /* @__PURE__ */ jsx(
           AssetMobileItem,