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

package/dist/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var React7 = require('react');
+var React12 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var hooks = require('@orderly.network/hooks');
 var reactApp = require('@orderly.network/react-app');
@@ -23,7 +23,7 @@ var perp = require('@orderly.network/perp');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React7__default = /*#__PURE__*/_interopDefault(React7);
+var React12__default = /*#__PURE__*/_interopDefault(React12);
 var pick__default = /*#__PURE__*/_interopDefault(pick);
 
 var __defProp = Object.defineProperty;
@@ -38,16 +38,16 @@ var __export = (target, all) => {
 var LayoutContext, useLayoutContext, LayoutProvider;
 var init_context = __esm({
   "src/layout/context.tsx"() {
-    LayoutContext = React7.createContext({
+    LayoutContext = React12.createContext({
       sideOpen: true
     });
     useLayoutContext = () => {
-      return React7.useContext(LayoutContext);
+      return React12.useContext(LayoutContext);
     };
     LayoutProvider = (props) => {
       const { routerAdapter, children } = props;
-      const [sideOpen, setSideOpen] = React7.useState(true);
-      const memoizedValue = React7.useMemo(
+      const [sideOpen, setSideOpen] = React12.useState(true);
+      const memoizedValue = React12.useMemo(
         () => ({
           sideOpen,
           onSideOpenChange: setSideOpen,
@@ -73,19 +73,19 @@ var init_assets_script = __esm({
       const { isMobile } = ui.useScreen();
       const handleDomId = isMobile ? uiTransfer.DepositAndWithdrawWithSheetId : uiTransfer.DepositAndWithdrawWithDialogId;
       const subAccounts = state.subAccounts ?? [];
-      const canTrade = React7.useMemo(() => {
+      const canTrade = React12.useMemo(() => {
         return !wrongNetwork && !disabledConnect && (state.status === types.AccountStatusEnum.EnableTrading || state.status === types.AccountStatusEnum.EnableTradingWithoutConnected);
       }, [state.status, wrongNetwork, disabledConnect]);
       const onLeverageEdit = () => {
         ui.modal.show(uiLeverage.LeverageWidgetWithDialogId);
       };
-      const onDeposit = React7.useCallback(() => {
+      const onDeposit = React12.useCallback(() => {
         ui.modal.show(handleDomId, { activeTab: "deposit" });
       }, [handleDomId]);
-      const onWithdraw = React7.useCallback(() => {
+      const onWithdraw = React12.useCallback(() => {
         ui.modal.show(handleDomId, { activeTab: "withdraw" });
       }, []);
-      const onTransfer = React7.useCallback(() => {
+      const onTransfer = React12.useCallback(() => {
         if (isMobile) {
           ui.modal.show(uiTransfer.TransferSheetId);
         } else {
@@ -315,7 +315,7 @@ var useHistoryDataGroupScript;
 var init_historyDataGroup_script = __esm({
   "src/pages/overview/historyDataGroup/historyDataGroup.script.ts"() {
     useHistoryDataGroupScript = () => {
-      const [active, setActive] = React7.useState("deposit");
+      const [active, setActive] = React12.useState("deposit");
       return {
         active,
         onTabChange: setActive
@@ -334,7 +334,7 @@ var init_column = __esm({
         e.stopPropagation();
         ui.toast.success(t("common.copy.copied"));
       };
-      const columns = React7.useMemo(() => {
+      const columns = React12.useMemo(() => {
         const txIdColumn = {
           title: t("common.txId"),
           dataIndex: "tx_id",
@@ -455,18 +455,18 @@ var init_assetHistory_script = __esm({
     useAssetHistoryScript = (options) => {
       const { side } = options;
       const isDeposit = side === types.AssetHistorySideEnum.DEPOSIT;
-      const [today] = React7.useState(() => {
+      const [today] = React12.useState(() => {
         const d = /* @__PURE__ */ new Date();
         return new Date(dateFns.getYear(d), dateFns.getMonth(d), dateFns.getDate(d), 0, 0, 0);
       });
       const tokensInfo = hooks.useAppStore((state) => state.tokensInfo);
-      const [target, setTarget] = React7.useState("Web3Wallet" /* Web3Wallet */);
-      const [dateRange, setDateRange] = React7.useState([
+      const [target, setTarget] = React12.useState("Web3Wallet" /* Web3Wallet */);
+      const [dateRange, setDateRange] = React12.useState([
         utils.subtractDaysFromCurrentDate(90, today),
         today
       ]);
       const { page, pageSize, setPage, parsePagination } = ui.usePagination();
-      const { startTime, endTime } = React7.useMemo(() => {
+      const { startTime, endTime } = React12.useMemo(() => {
         const startTime2 = dateRange[0].getTime();
         const endTime2 = dateFns.set(dateRange[1], {
           hours: 23,
@@ -505,23 +505,23 @@ var init_assetHistory_script = __esm({
           setPage(1);
         }
       };
-      const isLoading = React7.useMemo(() => {
+      const isLoading = React12.useMemo(() => {
         if (target === "Web3Wallet" /* Web3Wallet */) {
           return assetLoading;
         }
         return transferLoading;
       }, [target, assetLoading, transferLoading]);
-      const meta = React7.useMemo(() => {
+      const meta = React12.useMemo(() => {
         if (target === "Web3Wallet" /* Web3Wallet */) {
           return assetMeta;
         }
         return transferMeta;
       }, [target, assetMeta, transferMeta]);
-      const pagination = React7.useMemo(
+      const pagination = React12.useMemo(
         () => parsePagination(meta),
         [parsePagination, meta]
       );
-      const dataSource2 = React7.useMemo(() => {
+      const dataSource2 = React12.useMemo(() => {
         return (target === "Web3Wallet" /* Web3Wallet */ ? assetData : transferData).map(
           (item) => {
             const findToken = tokensInfo?.find(({ token }) => token === item.token);
@@ -532,7 +532,7 @@ var init_assetHistory_script = __esm({
           }
         );
       }, [target, assetData, transferData, tokensInfo]);
-      const onDeposit = React7.useCallback(() => {
+      const onDeposit = React12.useCallback(() => {
         ui.modal.show(uiTransfer.DepositAndWithdrawWithSheetId, { activeTab: "deposit" });
       }, []);
       const isWeb3Wallet = target === "Web3Wallet" /* Web3Wallet */;
@@ -568,7 +568,7 @@ var init_assetHistory_ui = __esm({
         isWeb3Wallet: props.isWeb3Wallet
       });
       const { t } = i18n.useTranslation();
-      const options = React7.useMemo(() => {
+      const options = React12.useMemo(() => {
         return [
           { label: t("common.web3Wallet"), value: "Web3Wallet" /* Web3Wallet */ },
           { label: t("common.accountId"), value: "AccountId" /* AccountId */ }
@@ -635,7 +635,7 @@ var init_assetHistory_ui_mobile = __esm({
       } = props;
       const { dateRange, target } = queryParameter;
       const { t } = i18n.useTranslation();
-      const options = React7.useMemo(() => {
+      const options = React12.useMemo(() => {
         return [
           { label: t("common.web3Wallet"), value: "Web3Wallet" /* Web3Wallet */ },
           { label: t("common.accountId"), value: "AccountId" /* AccountId */ }
@@ -852,7 +852,7 @@ var init_column2 = __esm({
   "src/pages/overview/funding/column.tsx"() {
     useFundingHistoryColumns = () => {
       const { t } = i18n.useTranslation();
-      const columns = React7.useMemo(() => {
+      const columns = React12.useMemo(() => {
         return [
           {
             title: t("common.symbol"),
@@ -928,7 +928,7 @@ var init_fundingHistory_ui = __esm({
       const symbols = hooks.useSymbolsInfo();
       const { symbol, dateRange } = queryParameter;
       const { t } = i18n.useTranslation();
-      const options = React7.useMemo(() => {
+      const options = React12.useMemo(() => {
         return [
           {
             label: t("common.all"),
@@ -1091,6 +1091,21 @@ var init_fundingHistory_ui_mobile = __esm({
           }
         );
       };
+      const options = React12.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           ui.DataFilter,
@@ -1100,25 +1115,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;
                 }
               },
               {
@@ -1156,15 +1157,15 @@ var init_useDataSource_script = __esm({
   "src/pages/overview/funding/useDataSource.script.ts"() {
     init_date();
     useFundingHistoryHook = () => {
-      const [today] = React7.useState(() => {
+      const [today] = React12.useState(() => {
         const d = /* @__PURE__ */ new Date();
         return new Date(dateFns.getYear(d), dateFns.getMonth(d), dateFns.getDate(d), 0, 0, 0);
       });
-      const [dateRange, setDateRange] = React7.useState([
+      const [dateRange, setDateRange] = React12.useState([
         utils.subtractDaysFromCurrentDate(90, today),
         today
       ]);
-      const [symbol, setSymbol] = React7.useState("All");
+      const [symbol, setSymbol] = React12.useState("All");
       const { page, pageSize, setPage, parsePagination } = ui.usePagination();
       const [data, { isLoading, meta, isValidating }] = hooks.useFundingFeeHistory(
         {
@@ -1196,7 +1197,7 @@ var init_useDataSource_script = __esm({
           setPage(1);
         }
       };
-      const pagination = React7.useMemo(
+      const pagination = React12.useMemo(
         () => parsePagination(meta),
         [parsePagination, meta]
       );
@@ -1255,7 +1256,7 @@ var init_column3 = __esm({
   "src/pages/overview/distribution/column.tsx"() {
     useColumns = () => {
       const { t } = i18n.useTranslation();
-      const columns = React7.useMemo(() => {
+      const columns = React12.useMemo(() => {
         return [
           {
             title: t("common.token"),
@@ -1330,7 +1331,7 @@ var init_distribution_ui = __esm({
       const columns = useColumns();
       const { type, dateRange } = queryParameter;
       const { t } = i18n.useTranslation();
-      const TYPES = React7.useMemo(() => {
+      const TYPES = React12.useMemo(() => {
         return [
           { label: t("common.all"), value: "All" },
           {
@@ -1397,7 +1398,7 @@ var init_distribution_ui_mobile = __esm({
       const { dataSource: dataSource2, queryParameter, onFilter, isLoading, pagination } = props;
       const { type, dateRange } = queryParameter;
       const { t } = i18n.useTranslation();
-      const TYPES = React7.useMemo(() => {
+      const TYPES = React12.useMemo(() => {
         return [
           { label: t("common.all"), value: "All" },
           {
@@ -1530,15 +1531,15 @@ var init_useDataSource_script2 = __esm({
   "src/pages/overview/distribution/useDataSource.script.ts"() {
     init_date();
     useDistributionHistoryHook = () => {
-      const [today] = React7.useState(() => {
+      const [today] = React12.useState(() => {
         const d = /* @__PURE__ */ new Date();
         return new Date(dateFns.getYear(d), dateFns.getMonth(d), dateFns.getDate(d), 0, 0, 0);
       });
-      const [dateRange, setDateRange] = React7.useState([
+      const [dateRange, setDateRange] = React12.useState([
         utils.subtractDaysFromCurrentDate(90, today),
         today
       ]);
-      const [type, setType] = React7.useState("All");
+      const [type, setType] = React12.useState("All");
       const { page, pageSize, setPage, parsePagination } = ui.usePagination();
       const [data, { isLoading, meta, isValidating }] = hooks.useDistributionHistory({
         // dataRange: dateRange.map((date) => date.getTime()),
@@ -1565,7 +1566,7 @@ var init_useDataSource_script2 = __esm({
           setPage(1);
         }
       };
-      const pagination = React7.useMemo(
+      const pagination = React12.useMemo(
         () => parsePagination(meta),
         [parsePagination, meta]
       );
@@ -1615,6 +1616,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 } = i18n.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 = React12.useMemo(() => {
+        if (Array.isArray(subAccounts) && subAccounts.length) {
+          return [
+            ALL_ACCOUNTS,
+            MAIN_ACCOUNT,
+            ...subAccounts.map((value) => ({
+              value: value.id,
+              label: value?.description || ui.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 = () => {
+        ui.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__ */ jsxRuntime.jsxs(
+          ui.Flex,
+          {
+            p: 2,
+            direction: "column",
+            gapY: 2,
+            className: "oui-rounded-xl oui-bg-base-9 oui-font-semibold",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "row", justify: "between", width: "100%", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.Text.formatted,
+                  {
+                    rule: "date",
+                    className: "oui-text-base-contrast-36 oui-text-2xs",
+                    children: item.updated_time
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "sm", className: "oui-text-base-contrast-80", children: utils.capitalizeString(item.status) })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-w-full oui-h-[1px] oui-bg-base-6" }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "row", justify: "between", width: "100%", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36 oui-text-2xs", children: t("common.token") }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "row", itemAlign: "center", gap: 1, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { name: item.token, size: "2xs" }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { size: "xs", className: "oui-text-base-contrast-80", children: item.token })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-base-contrast-36 oui-text-2xs", children: t("common.amount") }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    ui.Text.numeral,
+                    {
+                      dp: 6,
+                      className: "oui-text-base-contrast-80 oui-text-xs",
+                      children: item.amount
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "row", justify: "between", width: "100%", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 1, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-text-base-contrast-36 oui-text-2xs", children: [
+                    t("transfer.internalTransfer.from"),
+                    " (",
+                    t("common.accountId"),
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", gap: 1, itemAlign: "start", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "row", itemAlign: "center", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text.formatted,
+                      {
+                        rule: "address",
+                        copyable: true,
+                        onCopy,
+                        className: "oui-text-base-contrast-80 oui-text-xs",
+                        children: item.from_account_id
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: isFromMainAccount ? t("common.mainAccount") : fromSubAccount?.description || t("common.subAccount") })
+                  ] })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", gap: 1, children: [
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-text-base-contrast-36 oui-text-2xs", children: [
+                    t("transfer.internalTransfer.to"),
+                    " (",
+                    t("common.accountId"),
+                    ")"
+                  ] }),
+                  /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "end", gap: 1, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "row", itemAlign: "center", gap: 1, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      ui.Text.formatted,
+                      {
+                        rule: "address",
+                        copyable: true,
+                        onCopy,
+                        className: "oui-text-base-contrast-80 oui-text-xs",
+                        children: item.to_account_id
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(ui.Badge, { color: "neutral", size: "xs", children: isToMainAccount ? t("common.mainAccount") : toSubAccount?.description || t("common.subAccount") })
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        );
+      };
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-px-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+          ui.DataFilter,
+          {
+            onFilter,
+            items: immer.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__ */ jsxRuntime.jsx(
+          ui.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"() {
@@ -1625,7 +1822,7 @@ var init_column4 = __esm({
       };
       const { state } = hooks.useAccount();
       const sub = state.subAccounts ?? [];
-      const columns = React7__default.default.useMemo(() => {
+      const columns = React12__default.default.useMemo(() => {
         return [
           {
             title: t("common.token"),
@@ -1645,7 +1842,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;
@@ -1657,7 +1854,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;
@@ -1712,7 +1909,7 @@ var init_transfer_ui = __esm({
         value: "Main accounts" /* MAIN */
       };
       const subAccounts = state.subAccounts ?? [];
-      const memoizedOptions = React7.useMemo(() => {
+      const memoizedOptions = React12.useMemo(() => {
         if (Array.isArray(subAccounts) && subAccounts.length) {
           return [
             ALL_ACCOUNTS,
@@ -1738,8 +1935,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") }
                   ]
                 },
                 {
@@ -1787,18 +1984,18 @@ var init_useDataSource_script3 = __esm({
     init_date();
     init_transfer_ui();
     useTransferHistoryHook = () => {
-      const today = React7__default.default.useMemo(() => {
+      const today = React12__default.default.useMemo(() => {
         const date = /* @__PURE__ */ new Date();
         return new Date(dateFns.getYear(date), dateFns.getMonth(date), dateFns.getDate(date), 0, 0, 0);
       }, []);
-      const [dateRange, setDateRange] = React7__default.default.useState([
+      const [dateRange, setDateRange] = React12__default.default.useState([
         utils.subtractDaysFromCurrentDate(90, today),
         today
       ]);
       const { page, pageSize, setPage, parsePagination } = ui.usePagination();
       const { state } = hooks.useAccount();
-      const [selectedAccount, setAccount] = React7__default.default.useState("All accounts" /* ALL */);
-      const [side, setSide] = React7__default.default.useState("OUT");
+      const [selectedAccount, setAccount] = React12__default.default.useState("All accounts" /* ALL */);
+      const [side, setSide] = React12__default.default.useState("OUT");
       const [data, { isLoading, meta }] = hooks.useTransferHistory({
         dataRange: [
           dateRange[0]?.getTime(),
@@ -1814,7 +2011,7 @@ var init_useDataSource_script3 = __esm({
         page,
         main_sub_only: true
       });
-      const filteredData = React7__default.default.useMemo(() => {
+      const filteredData = React12__default.default.useMemo(() => {
         return data.filter((item) => {
           if (!selectedAccount || selectedAccount === "All accounts" /* ALL */) {
             return true;
@@ -1826,7 +2023,7 @@ var init_useDataSource_script3 = __esm({
           }
         });
       }, [data, selectedAccount]);
-      const onAccountFilter = React7__default.default.useCallback(
+      const onAccountFilter = React12__default.default.useCallback(
         (filter) => {
           if (filter.name === "account") {
             setAccount(filter.value);
@@ -1841,7 +2038,7 @@ var init_useDataSource_script3 = __esm({
         },
         [setPage]
       );
-      const pagination = React7__default.default.useMemo(
+      const pagination = React12__default.default.useMemo(
         () => parsePagination(meta),
         [parsePagination, meta]
       );
@@ -1863,11 +2060,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 = hooks.useAccount();
+      const { isMobile } = ui.useScreen();
+      if (isMobile) {
+        return /* @__PURE__ */ jsxRuntime.jsx(TransferHistoryMobileUI, { ...state, ...accountState });
+      }
       return /* @__PURE__ */ jsxRuntime.jsx(TransferHistoryUI, { ...state, ...accountState });
     };
   }
@@ -1885,423 +2087,32 @@ 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 } = i18n.useTranslation();
-      const columns = React7__default.default.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__ */ jsxRuntime.jsxs(ui.Flex, { justify: "start", itemAlign: "center", gap: 2, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { name: val }),
-                val
-              ] });
-            }
-          },
-          {
-            title: t("common.time"),
-            dataIndex: "created_time",
-            rule: "date"
-          },
-          {
-            title: t("common.status"),
-            dataIndex: "status",
-            render(val) {
-              return utils.capitalizeString(val);
-            }
-          },
-          {
-            title: t("common.amount"),
-            dataIndex: "amount_change",
-            render(val) {
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                ui.Text.numeral,
-                {
-                  showIdentifier: true,
-                  className: ui.cn(
-                    "oui-select-none",
-                    val >= 0 ? "oui-text-success" : "oui-text-danger"
-                  ),
-                  children: val
-                }
-              );
+      const { state, isMainAccount } = hooks.useAccount();
+      const { holding = [] } = hooks.useCollateral();
+      const subAccounts = state.subAccounts ?? [];
+      return React12.useMemo(() => {
+        return immer.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 }];
             }
-          }
-        ];
-      }, [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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.DataFilter,
-          {
-            onFilter,
-            items: [
-              {
-                type: "range",
-                name: "dateRange",
-                value: {
-                  from: dateRange[0],
-                  to: dateRange[1]
-                }
-              }
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          uiConnector.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__default.default.useMemo(() => {
-        const date = /* @__PURE__ */ new Date();
-        return new Date(dateFns.getYear(date), dateFns.getMonth(date), dateFns.getDate(date), 0, 0, 0);
-      }, []);
-      const [dateRange, setDateRange] = React7__default.default.useState([
-        utils.subtractDaysFromCurrentDate(90, today),
-        today
-      ]);
-      const { page, pageSize, setPage, parsePagination } = ui.usePagination();
-      const [data, { isLoading, meta }] = hooks.useVaultsHistory({
-        dataRange: [
-          dateRange[0]?.getTime(),
-          dateFns.set(dateRange[1], {
-            hours: 23,
-            minutes: 59,
-            seconds: 59,
-            milliseconds: 0
-          })?.getTime()
-        ],
-        size: pageSize,
-        page
-      });
-      const dataSource2 = React7__default.default.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__default.default.useCallback(
-        (filter) => {
-          if (filter.name === "dateRange") {
-            setDateRange(parseDateRangeForFilter(filter.value));
-          }
-          setPage(1);
-        },
-        [setPage]
-      );
-      const pagination = React7__default.default.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 } = i18n.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__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-rounded-xl oui-bg-base-9 oui-p-2 oui-font-semibold", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-justify-between oui-text-sm oui-text-base-contrast-80", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.vaultName }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.status?.slice(0, 1).toUpperCase() + item.status?.slice(1) })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "date", intensity: 36, size: "2xs", children: item.created_time }),
-          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-2" }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center [&>div]:oui-flex-1 [&>div]:oui-text-2xs [&>div]:oui-text-base-contrast-36", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("common.token") }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-gap-1 oui-text-xs oui-text-base-contrast-80", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { name: "USDC", size: "2xs" }),
-                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "USDC" })
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("common.type") }),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { color: typeColor, className: "oui-text-xs", children: typeText })
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-right", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("common.amount") }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-xs oui-text-base-contrast-80", children: amountText })
-            ] })
-          ] })
-        ] });
-      };
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          ui.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__ */ jsxRuntime.jsx(
-          ui.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 } = ui.useScreen();
-      if (isMobile) {
-        return /* @__PURE__ */ jsxRuntime.jsx(VaultsHistoryMobile, { ...state });
-      }
-      return /* @__PURE__ */ jsxRuntime.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__default.default.lazy(
-      () => Promise.resolve().then(() => (init_assetHistory(), assetHistory_exports)).then((mod) => {
-        return { default: mod.AssetHistoryWidget };
-      })
-    );
-    LazyFundingHistoryWidget = React7__default.default.lazy(
-      () => Promise.resolve().then(() => (init_funding(), funding_exports)).then((mod) => {
-        return { default: mod.FundingHistoryWidget };
-      })
-    );
-    LazyDistributionHistoryWidget = React7__default.default.lazy(
-      () => Promise.resolve().then(() => (init_distribution(), distribution_exports)).then((mod) => {
-        return { default: mod.DistributionHistoryWidget };
-      })
-    );
-    LazyTransferHistoryWidget = React7__default.default.lazy(
-      () => Promise.resolve().then(() => (init_TransferHistory(), TransferHistory_exports)).then((mod) => {
-        return { default: mod.TransferHistoryWidget };
-      })
-    );
-    LazyVaultsHistoryWidget = React7__default.default.lazy(
-      () => Promise.resolve().then(() => (init_VaultsHistory(), VaultsHistory_exports)).then((mod) => {
-        return { default: mod.VaultsHistoryWidget };
-      })
-    );
-    HistoryDataGroupDesktop = (props) => {
-      const { active = "deposit", onTabChange } = props;
-      const { t } = i18n.useTranslation();
-      const { isMainAccount } = hooks.useAccount();
-      React7.useEffect(() => {
-        if (active === "vaults" && !isMainAccount) {
-          onTabChange("deposit");
-        }
-      }, [active, isMainAccount]);
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-        ui.Tabs,
-        {
-          value: active,
-          onValueChange: onTabChange,
-          variant: "contained",
-          size: "xl",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                title: t("common.deposits"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowDownSquareFillIcon, {}),
-                value: "deposit",
-                children: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyAssetHistoryWidget, { side: types.AssetHistorySideEnum.DEPOSIT }) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                title: t("common.withdrawals"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowUpSquareFillIcon, {}),
-                value: "withdraw",
-                children: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyAssetHistoryWidget, { side: types.AssetHistorySideEnum.WITHDRAW }) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                title: t("common.funding"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FeeTierIcon, {}),
-                value: "funding",
-                children: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyFundingHistoryWidget, {}) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                title: t("portfolio.overview.distribution"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ServerFillIcon, {}),
-                value: "distribution",
-                children: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyDistributionHistoryWidget, {}) })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                title: t("portfolio.overview.transferHistory"),
-                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowLeftRightSquareFill, {}),
-                value: "transfer",
-                children: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyTransferHistoryWidget, {}) })
-              }
-            ),
-            isMainAccount && /* @__PURE__ */ jsxRuntime.jsx(
-              ui.TabPanel,
-              {
-                value: "vaults",
-                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.VaultsIcon, {}),
-                title: t("portfolio.overview.vaults"),
-                children: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.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 } = i18n.useTranslation();
-      const { state, isMainAccount } = hooks.useAccount();
-      const { holding = [] } = hooks.useCollateral();
-      const subAccounts = state.subAccounts ?? [];
-      return React7.useMemo(() => {
-        return immer.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");
+            Reflect.deleteProperty(sub, "holding");
           }
           if (isMainAccount) {
             draft.unshift({
@@ -2353,15 +2164,15 @@ var init_useAssetTotalValue = __esm({
       const { getIndexPrice } = hooks.useIndexPricesStream();
       const allAccounts = useAccountsData();
       const subAccounts = state.subAccounts ?? [];
-      const mainTotalValue = React7.useMemo(
+      const mainTotalValue = React12.useMemo(
         () => calculateTotalHolding(holding, getIndexPrice),
         [holding, getIndexPrice]
       );
-      const subTotalValue = React7.useMemo(
+      const subTotalValue = React12.useMemo(
         () => calculateTotalHolding(subAccounts, getIndexPrice),
         [subAccounts, getIndexPrice]
       );
-      const totalValue = React7.useMemo(() => {
+      const totalValue = React12.useMemo(() => {
         if (isMainAccount) {
           return mainTotalValue.plus(subTotalValue).toNumber();
         } else {
@@ -2386,7 +2197,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__default.default.lazy(
+    LazyConvertHistoryWidget = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_convert_widget(), convert_widget_exports)).then((mod) => {
         return { default: mod.ConvertHistoryWidget };
       })
@@ -2502,10 +2313,10 @@ var init_assets_ui_desktop = __esm({
         label: t("common.allAssets", "All assets"),
         value: "all"
       };
-      const subAccounts = React7.useMemo(() => {
+      const subAccounts = React12.useMemo(() => {
         return state.subAccounts ?? [];
       }, [state.subAccounts]);
-      const memoizedOptions = React7.useMemo(() => {
+      const memoizedOptions = React12.useMemo(() => {
         if (Array.isArray(subAccounts) && subAccounts.length) {
           return [
             ALL_ACCOUNTS,
@@ -2518,7 +2329,7 @@ var init_assets_ui_desktop = __esm({
         }
         return [ALL_ACCOUNTS, MAIN_ACCOUNT];
       }, [ALL_ACCOUNTS, MAIN_ACCOUNT, subAccounts]);
-      const memoizedAssetOptions = React7.useMemo(() => {
+      const memoizedAssetOptions = React12.useMemo(() => {
         return [ALL_ASSETS, ...assetsOptions];
       }, [ALL_ASSETS, assetsOptions]);
       if (!isMainAccount) {
@@ -2690,7 +2501,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__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyConvertHistoryWidget, {}) })
+                    children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsxs(
+                      ui.Flex,
+                      {
+                        direction: "column",
+                        mt: 4,
+                        itemAlign: "center",
+                        className: "oui-w-full",
+                        children: [
+                          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full oui-border-b oui-border-line-4 oui-pt-6" }),
+                          /* @__PURE__ */ jsxRuntime.jsx(LazyConvertHistoryWidget, {})
+                        ]
+                      }
+                    ) })
                   }
                 )
               ]
@@ -2712,10 +2535,10 @@ var init_useAssetsAccountFilter = __esm({
     init_assets_ui_desktop();
     useAssetsAccountFilter = (data) => {
       const { state, isMainAccount } = hooks.useAccount();
-      const [selectedAccount, setSelectedAccount] = React7__default.default.useState(
+      const [selectedAccount, setSelectedAccount] = React12__default.default.useState(
         "All accounts" /* ALL */
       );
-      const filteredData = React7.useMemo(() => {
+      const filteredData = React12.useMemo(() => {
         return data.filter((item) => {
           if (isMainAccount) {
             if (!selectedAccount || selectedAccount === "All accounts" /* ALL */) {
@@ -2731,7 +2554,7 @@ var init_useAssetsAccountFilter = __esm({
           }
         });
       }, [data, selectedAccount, isMainAccount, state]);
-      const onAccountFilter = React7__default.default.useCallback(
+      const onAccountFilter = React12__default.default.useCallback(
         (filter) => {
           const { name, value } = filter;
           if (name === "account") {
@@ -2749,11 +2572,11 @@ var init_useAssetsAccountFilter = __esm({
     };
     useAssetsMultiFilter = (data) => {
       const { state, isMainAccount } = hooks.useAccount();
-      const [selectedAccount, setSelectedAccount] = React7__default.default.useState(
+      const [selectedAccount, setSelectedAccount] = React12__default.default.useState(
         "All accounts" /* ALL */
       );
-      const [selectedAsset, setSelectedAsset] = React7__default.default.useState("all");
-      const filteredData = React7.useMemo(() => {
+      const [selectedAsset, setSelectedAsset] = React12__default.default.useState("all");
+      const filteredData = React12.useMemo(() => {
         let accountFiltered = data;
         if (isMainAccount) {
           if (selectedAccount && selectedAccount !== "All accounts" /* ALL */) {
@@ -2785,7 +2608,7 @@ var init_useAssetsAccountFilter = __esm({
         }
         return accountFiltered;
       }, [data, selectedAccount, selectedAsset, isMainAccount, state]);
-      const onFilter = React7__default.default.useCallback(
+      const onFilter = React12__default.default.useCallback(
         (filter) => {
           const { name, value } = filter;
           if (name === "account") {
@@ -2823,6 +2646,7 @@ var init_convert_script = __esm({
     init_hooks();
     init_date();
     useConvertScript = () => {
+      const { t } = i18n.useTranslation();
       const { isMainAccount, state } = hooks.useAccount();
       const { holding = [] } = hooks.useCollateral();
       const { data: indexPrices } = hooks.useIndexPricesStream();
@@ -2834,24 +2658,24 @@ var init_convert_script = __esm({
       const allAccounts = useAccountsData();
       const tokensInfo = hooks.useAppStore((state2) => state2.tokensInfo);
       const { selectedAccount, onAccountFilter } = useAssetsAccountFilter(allAccounts);
-      const [today] = React7.useState(() => {
+      const [today] = React12.useState(() => {
         const d = /* @__PURE__ */ new Date();
         return new Date(dateFns.getYear(d), dateFns.getMonth(d), dateFns.getDate(d), 0, 0, 0);
       });
-      const [dateRange, setDateRange] = React7.useState([
+      const [dateRange, setDateRange] = React12.useState([
         utils.subtractDaysFromCurrentDate(90, today),
         today
       ]);
-      const [statusFilter, setStatusFilter] = React7.useState("all");
-      const [convertedAssetFilter, setConvertedAssetFilter] = React7.useState("all");
-      const convertedAssetOptions = React7.useMemo(() => {
+      const [statusFilter, setStatusFilter] = React12.useState("all");
+      const [convertedAssetFilter, setConvertedAssetFilter] = React12.useState("all");
+      const convertedAssetOptions = React12.useMemo(() => {
         const assetOptions = tokensInfo?.map((item) => ({
           value: item.token,
           label: item.token
         })) || [];
-        return [{ label: "All assets", value: "all" }, ...assetOptions];
-      }, [tokensInfo]);
-      const onFilter = React7__default.default.useCallback(
+        return [{ label: t("common.allAssets"), value: "all" }, ...assetOptions];
+      }, [tokensInfo, t]);
+      const onFilter = React12__default.default.useCallback(
         (filter) => {
           const { name, value } = filter;
           if (name === "account") {
@@ -2871,7 +2695,7 @@ var init_convert_script = __esm({
         },
         [onAccountFilter, setPage]
       );
-      const queryUrl = React7__default.default.useMemo(() => {
+      const queryUrl = React12__default.default.useMemo(() => {
         const params = new URLSearchParams();
         params.set("page", page.toString());
         params.set("size", pageSize.toString());
@@ -2903,7 +2727,7 @@ var init_convert_script = __esm({
           return data2;
         }
       });
-      const pagination = React7.useMemo(() => {
+      const pagination = React12.useMemo(() => {
         if (data?.meta) {
           return parsePagination(data.meta);
         }
@@ -2915,7 +2739,7 @@ var init_convert_script = __esm({
           }
         };
       }, [data?.meta, parsePagination, page, pageSize, setPage]);
-      const summary = React7.useMemo(() => {
+      const summary = React12.useMemo(() => {
         const dataRows = data?.rows || [];
         const totalConversions = dataRows.length;
         const totalUSDCReceived = dataRows.reduce(
@@ -2967,10 +2791,10 @@ var init_convert_column = __esm({
       convertedAssets
     }) => {
       const { t } = i18n.useTranslation();
-      const assets = React7.useMemo(() => {
+      const assets = React12.useMemo(() => {
         return Object.keys(convertedAssets);
       }, [convertedAssets]);
-      const tooltipContent = React7.useMemo(() => {
+      const tooltipContent = React12.useMemo(() => {
         return /* @__PURE__ */ jsxRuntime.jsxs(
           ui.Flex,
           {
@@ -3038,7 +2862,7 @@ var init_convert_column = __esm({
         e.stopPropagation();
         ui.toast.success(t("common.copy.copied"));
       };
-      const columns = React7__default.default.useMemo(() => {
+      const columns = React12__default.default.useMemo(() => {
         return [
           {
             title: t("portfolio.overview.column.convert.convertedAsset"),
@@ -3135,7 +2959,7 @@ var init_convert_column = __esm({
         e.stopPropagation();
         ui.toast.success(t("common.copy.copied"));
       };
-      const columns = React7__default.default.useMemo(() => {
+      const columns = React12__default.default.useMemo(() => {
         return [
           {
             title: t("portfolio.overview.column.convert.convertedAsset"),
@@ -3227,24 +3051,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 = ui.modal.create((props) => {
       const { t } = i18n.useTranslation();
       const { visible, onOpenChange } = ui.useModal();
@@ -3272,7 +3082,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]"
@@ -3286,6 +3096,7 @@ var init_convert_ui_desktop = __esm({
     ConvertDesktopUI = ({
       convertState
     }) => {
+      const { t } = i18n.useTranslation();
       const handleDetailsClick = (convertId) => {
         const record = convertState.dataSource.find(
           (item) => item.convert_id === convertId
@@ -3308,7 +3119,15 @@ var init_convert_ui_desktop = __esm({
         onFilter,
         convertedAssetOptions
       } = convertState;
-      const dataFilter = React7.useMemo(() => {
+      const statusOptions = React12.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 = React12.useMemo(() => {
         return /* @__PURE__ */ jsxRuntime.jsx(
           ui.DataFilter,
           {
@@ -3331,7 +3150,7 @@ var init_convert_ui_desktop = __esm({
                 type: "select",
                 name: "status",
                 value: statusFilter,
-                options: CONVERT_STATUS_OPTIONS
+                options: statusOptions
               },
               {
                 type: "range",
@@ -3349,24 +3168,23 @@ var init_convert_ui_desktop = __esm({
         statusFilter,
         dateRange,
         onFilter,
-        convertedAssetOptions
+        convertedAssetOptions,
+        statusOptions
       ]);
-      return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", mt: 4, itemAlign: "center", className: "oui-w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-w-full oui-border-b oui-border-line-4 oui-pt-6" }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "row", className: "oui-w-full", children: dataFilter }),
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        dataFilter,
         /* @__PURE__ */ jsxRuntime.jsx(
           uiConnector.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"
@@ -3384,7 +3202,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
     }) => {
@@ -3396,7 +3213,15 @@ var init_convert_ui_mobile = __esm({
         onFilter,
         convertedAssetOptions
       } = convertState;
-      const dataFilter = React7.useMemo(() => {
+      const statusOptions = React12.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 = React12.useMemo(() => {
         return /* @__PURE__ */ jsxRuntime.jsx(
           ui.DataFilter,
           {
@@ -3422,7 +3247,7 @@ var init_convert_ui_mobile = __esm({
                 type: "picker",
                 name: "status",
                 value: statusFilter,
-                options: CONVERT_STATUS_OPTIONS,
+                options: statusOptions,
                 className: "oui-whitespace-nowrap"
               },
               {
@@ -3441,7 +3266,8 @@ var init_convert_ui_mobile = __esm({
         statusFilter,
         dateRange,
         onFilter,
-        convertedAssetOptions
+        convertedAssetOptions,
+        statusOptions
       ]);
       return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-gap-1 oui-px-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx(ui.ScrollIndicator, { className: "oui-pr-5", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "row", children: dataFilter }) }),
@@ -3628,32 +3454,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 } = ui.useScreen();
+      if (isMobile) {
+        return /* @__PURE__ */ jsxRuntime.jsx(ConvertMobileUI, { convertState });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(ConvertDesktopUI, { convertState });
+    };
+  }
+});
+var useColumns3;
+var init_column5 = __esm({
+  "src/pages/overview/VaultsHistory/column.tsx"() {
+    useColumns3 = () => {
+      const { t } = i18n.useTranslation();
+      const columns = React12__default.default.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__ */ jsxRuntime.jsxs(ui.Flex, { justify: "start", itemAlign: "center", gap: 2, children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { name: val }),
+                val
+              ] });
+            }
+          },
+          {
+            title: t("common.time"),
+            dataIndex: "created_time",
+            rule: "date"
+          },
+          {
+            title: t("common.status"),
+            dataIndex: "status",
+            render(val) {
+              return utils.capitalizeString(val);
+            }
+          },
+          {
+            title: t("common.amount"),
+            dataIndex: "amount_change",
+            render(val) {
+              return /* @__PURE__ */ jsxRuntime.jsx(
+                ui.Text.numeral,
+                {
+                  showIdentifier: true,
+                  className: ui.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.DataFilter,
+          {
+            onFilter,
+            items: [
+              {
+                type: "range",
+                name: "dateRange",
+                value: {
+                  from: dateRange[0],
+                  to: dateRange[1]
+                }
+              }
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          uiConnector.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__default.default.useMemo(() => {
+        const date = /* @__PURE__ */ new Date();
+        return new Date(dateFns.getYear(date), dateFns.getMonth(date), dateFns.getDate(date), 0, 0, 0);
+      }, []);
+      const [dateRange, setDateRange] = React12__default.default.useState([
+        utils.subtractDaysFromCurrentDate(90, today),
+        today
+      ]);
+      const { page, pageSize, setPage, parsePagination } = ui.usePagination();
+      const [data, { isLoading, meta }] = hooks.useVaultsHistory({
+        dataRange: [
+          dateRange[0]?.getTime(),
+          dateFns.set(dateRange[1], {
+            hours: 23,
+            minutes: 59,
+            seconds: 59,
+            milliseconds: 0
+          })?.getTime()
+        ],
+        size: pageSize,
+        page
+      });
+      const dataSource2 = React12__default.default.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__default.default.useCallback(
+        (filter) => {
+          if (filter.name === "dateRange") {
+            setDateRange(parseDateRangeForFilter(filter.value));
+          }
+          setPage(1);
+        },
+        [setPage]
+      );
+      const pagination = React12__default.default.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 } = i18n.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__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-col oui-rounded-xl oui-bg-base-9 oui-p-2 oui-font-semibold", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-justify-between oui-text-sm oui-text-base-contrast-80", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.vaultName }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { children: item.status?.slice(0, 1).toUpperCase() + item.status?.slice(1) })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Text.formatted, { rule: "date", intensity: 36, size: "2xs", children: item.created_time }),
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, { className: "oui-my-2" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center [&>div]:oui-flex-1 [&>div]:oui-text-2xs [&>div]:oui-text-base-contrast-36", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("common.token") }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-items-center oui-gap-1 oui-text-xs oui-text-base-contrast-80", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ui.TokenIcon, { name: "USDC", size: "2xs" }),
+                /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "USDC" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("common.type") }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { color: typeColor, className: "oui-text-xs", children: typeText })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-text-right", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { children: t("common.amount") }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-text-xs oui-text-base-contrast-80", children: amountText })
+            ] })
+          ] })
+        ] });
+      };
+      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ui.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__ */ jsxRuntime.jsx(
+          ui.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 } = ui.useScreen();
       if (isMobile) {
-        return /* @__PURE__ */ jsxRuntime.jsx(ConvertMobileUI, { convertState });
+        return /* @__PURE__ */ jsxRuntime.jsx(VaultsHistoryMobile, { ...state });
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(ConvertDesktopUI, { convertState });
+      return /* @__PURE__ */ jsxRuntime.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, LazyConvertHistoryWidget2, LazyVaultsHistoryWidget, HistoryDataGroupDesktop;
+var init_historyDataGroup_ui_desktop = __esm({
+  "src/pages/overview/historyDataGroup/historyDataGroup.ui.desktop.tsx"() {
+    LazyAssetHistoryWidget = React12__default.default.lazy(
+      () => Promise.resolve().then(() => (init_assetHistory(), assetHistory_exports)).then((mod) => {
+        return { default: mod.AssetHistoryWidget };
+      })
+    );
+    LazyFundingHistoryWidget = React12__default.default.lazy(
+      () => Promise.resolve().then(() => (init_funding(), funding_exports)).then((mod) => {
+        return { default: mod.FundingHistoryWidget };
+      })
+    );
+    LazyDistributionHistoryWidget = React12__default.default.lazy(
+      () => Promise.resolve().then(() => (init_distribution(), distribution_exports)).then((mod) => {
+        return { default: mod.DistributionHistoryWidget };
+      })
+    );
+    LazyTransferHistoryWidget = React12__default.default.lazy(
+      () => Promise.resolve().then(() => (init_TransferHistory(), TransferHistory_exports)).then((mod) => {
+        return { default: mod.TransferHistoryWidget };
+      })
+    );
+    LazyConvertHistoryWidget2 = React12__default.default.lazy(
+      () => Promise.resolve().then(() => (init_convert_widget(), convert_widget_exports)).then((mod) => {
+        return { default: mod.ConvertHistoryWidget };
+      })
+    );
+    LazyVaultsHistoryWidget = React12__default.default.lazy(
+      () => Promise.resolve().then(() => (init_VaultsHistory(), VaultsHistory_exports)).then((mod) => {
+        return { default: mod.VaultsHistoryWidget };
+      })
+    );
+    HistoryDataGroupDesktop = (props) => {
+      const { active = "deposit", onTabChange } = props;
+      const { t } = i18n.useTranslation();
+      const { isMainAccount } = hooks.useAccount();
+      React12.useEffect(() => {
+        if (active === "vaults" && !isMainAccount) {
+          onTabChange("deposit");
+        }
+      }, [active, isMainAccount]);
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Card, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+        ui.Tabs,
+        {
+          value: active,
+          onValueChange: onTabChange,
+          variant: "contained",
+          size: "xl",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.TabPanel,
+              {
+                title: t("common.deposits"),
+                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowDownSquareFillIcon, {}),
+                value: "deposit",
+                children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyAssetHistoryWidget, { side: types.AssetHistorySideEnum.DEPOSIT }) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.TabPanel,
+              {
+                title: t("common.withdrawals"),
+                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowUpSquareFillIcon, {}),
+                value: "withdraw",
+                children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyAssetHistoryWidget, { side: types.AssetHistorySideEnum.WITHDRAW }) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.TabPanel,
+              {
+                title: t("common.funding"),
+                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.FeeTierIcon, {}),
+                value: "funding",
+                children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyFundingHistoryWidget, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.TabPanel,
+              {
+                title: t("portfolio.overview.distribution"),
+                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ServerFillIcon, {}),
+                value: "distribution",
+                children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyDistributionHistoryWidget, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.TabPanel,
+              {
+                title: t("portfolio.overview.transferHistory"),
+                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.ArrowLeftRightSquareFill, {}),
+                value: "transfer",
+                children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyTransferHistoryWidget, {}) })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.TabPanel,
+              {
+                title: t("portfolio.overview.tab.convert.history"),
+                value: "convert",
+                children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyConvertHistoryWidget2, {}) })
+              }
+            ),
+            isMainAccount && /* @__PURE__ */ jsxRuntime.jsx(
+              ui.TabPanel,
+              {
+                value: "vaults",
+                icon: /* @__PURE__ */ jsxRuntime.jsx(ui.VaultsIcon, {}),
+                title: t("portfolio.overview.vaults"),
+                children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyVaultsHistoryWidget, {}) })
+              }
+            )
+          ]
+        }
+      ) });
     };
   }
 });
-var HistoryDataGroupMobile;
+var LazyTransferHistoryWidget2, HistoryDataGroupMobile;
 var init_historyDataGroup_ui_mobile = __esm({
   "src/pages/overview/historyDataGroup/historyDataGroup.ui.mobile.tsx"() {
     init_convert_widget();
@@ -3661,6 +3891,11 @@ var init_historyDataGroup_ui_mobile = __esm({
     init_assetHistory();
     init_distribution();
     init_funding();
+    LazyTransferHistoryWidget2 = React12__default.default.lazy(
+      () => Promise.resolve().then(() => (init_TransferHistory(), TransferHistory_exports)).then((mod) => {
+        return { default: mod.TransferHistoryWidget };
+      })
+    );
     HistoryDataGroupMobile = (props) => {
       const { active = "deposit", onTabChange } = props;
       const { t } = i18n.useTranslation();
@@ -3688,6 +3923,14 @@ var init_historyDataGroup_ui_mobile = __esm({
                 children: /* @__PURE__ */ jsxRuntime.jsx(DistributionHistoryWidget, {})
               }
             ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ui.TabPanel,
+              {
+                title: t("portfolio.overview.transferHistory"),
+                value: "transfer",
+                children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyTransferHistoryWidget2, {}) })
+              }
+            ),
             /* @__PURE__ */ jsxRuntime.jsx(
               ui.TabPanel,
               {
@@ -3733,11 +3976,11 @@ var init_historyDataGroup = __esm({
 var OverviewContext, useOverviewContext;
 var init_overviewContext = __esm({
   "src/pages/overview/provider/overviewContext.tsx"() {
-    OverviewContext = React7.createContext(
+    OverviewContext = React12.createContext(
       {}
     );
     useOverviewContext = () => {
-      return React7.useContext(OverviewContext);
+      return React12.useContext(OverviewContext);
     };
   }
 });
@@ -3756,7 +3999,7 @@ var init_assetsChart_script = __esm({
           { account_value: 500 }
         )
       });
-      const _data = React7.useMemo(() => {
+      const _data = React12.useMemo(() => {
         if (filteredData?.length) {
           return filteredData;
         }
@@ -3790,7 +4033,7 @@ var init_useAssetHistory = __esm({
       return PeriodType2;
     })(PeriodType || {});
     useAssetsHistoryData = (localKey2, options) => {
-      const [today] = React7.useState(() => /* @__PURE__ */ new Date());
+      const [today] = React12.useState(() => /* @__PURE__ */ new Date());
       const { getIndexPrice } = hooks.useIndexPricesStream();
       const { t } = i18n.useTranslation();
       const { isRealtime = false } = options || {};
@@ -3799,7 +4042,7 @@ var init_useAssetHistory = __esm({
         localKey2,
         "7D" /* WEEK */
       );
-      const convertToUSDCAndOperate = React7.useCallback(
+      const convertToUSDCAndOperate = React12.useCallback(
         (inputs) => {
           const { token, amount, value, op = "sub" } = inputs;
           if (token.toUpperCase() === "USDC") {
@@ -3815,7 +4058,7 @@ var init_useAssetHistory = __esm({
         },
         [getIndexPrice]
       );
-      const periodLabel = React7.useMemo(() => {
+      const periodLabel = React12.useMemo(() => {
         return {
           ["7D" /* WEEK */]: t("common.select.7d"),
           ["30D" /* MONTH */]: t("common.select.30d"),
@@ -3833,7 +4076,7 @@ var init_useAssetHistory = __esm({
             return dateFns.subDays(today, 10);
         }
       };
-      const periodValue = React7.useMemo(() => {
+      const periodValue = React12.useMemo(() => {
         switch (period) {
           case "7D" /* WEEK */:
             return 7;
@@ -3845,13 +4088,13 @@ var init_useAssetHistory = __esm({
             return 7;
         }
       }, [period]);
-      const [startDate, setStartDate] = React7.useState(getStartDate(period));
-      const endDate = React7.useMemo(() => {
+      const [startDate, setStartDate] = React12.useState(getStartDate(period));
+      const endDate = React12.useMemo(() => {
         const end = new Date(today);
         end.setHours(23, 59, 59, 999);
         return end;
       }, [today]);
-      const totalDeposit = React7.useRef(utils.zero);
+      const totalDeposit = React12.useRef(utils.zero);
       const { data: transferOutHistory, mutate: mutateTransferOut } = hooks.usePrivateQuery(
         `/v1/internal_transfer_history?page=1&size=200&side=OUT&start_t=${startDate.getTime()}&end_t=${endDate.getTime()}`,
         {
@@ -3873,8 +4116,8 @@ var init_useAssetHistory = __esm({
           ignoreAggregation: true
         }
       );
-      const lastBalanceEventRef = React7.useRef(0);
-      const refreshTransferHistory = React7.useCallback(() => {
+      const lastBalanceEventRef = React12.useRef(0);
+      const refreshTransferHistory = React12.useCallback(() => {
         const now = Date.now();
         if (now - lastBalanceEventRef.current < 15e3) {
           return;
@@ -3899,7 +4142,7 @@ var init_useAssetHistory = __esm({
         endTime: endDate.getTime(),
         pageSize: 200
       });
-      const totalDepositForROI = React7.useMemo(() => {
+      const totalDepositForROI = React12.useMemo(() => {
         return allDepositHistory?.filter((item) => item.trans_status === "COMPLETED").reduce((acc, item) => {
           return acc.add(
             // item.amount
@@ -3912,7 +4155,7 @@ var init_useAssetHistory = __esm({
           );
         }, utils.zero);
       }, [allDepositHistory, convertToUSDCAndOperate]);
-      const totalTransferInForROI = React7.useMemo(() => {
+      const totalTransferInForROI = React12.useMemo(() => {
         if (!Array.isArray(transferInHistory)) {
           return utils.zero;
         }
@@ -3931,10 +4174,10 @@ var init_useAssetHistory = __esm({
         setStartDate(getStartDate(value));
         setPeriod(value);
       };
-      const lastItem = React7.useMemo(() => {
+      const lastItem = React12.useMemo(() => {
         return data.length > 0 ? data[data.length - 1] : null;
       }, [data]);
-      const totalTransferIn = React7.useMemo(() => {
+      const totalTransferIn = React12.useMemo(() => {
         if (!Array.isArray(transferInHistory)) {
           return null;
         }
@@ -3955,7 +4198,7 @@ var init_useAssetHistory = __esm({
           );
         }, utils.zero);
       }, [transferInHistory, lastItem, convertToUSDCAndOperate]);
-      const totalTransferOut = React7.useMemo(() => {
+      const totalTransferOut = React12.useMemo(() => {
         if (!Array.isArray(transferOutHistory)) {
           return null;
         }
@@ -4054,7 +4297,7 @@ var init_useAssetHistory = __esm({
         const _data = !realtime ? data2 : mergeData(data2, totalValue2, totalTransferIn2, totalTransferOut2);
         return _data.slice(Math.max(0, _data.length - periodValue));
       };
-      const calculatedData = React7.useMemo(() => {
+      const calculatedData = React12.useMemo(() => {
         if (totalValue === null) {
           return [];
         }
@@ -4079,7 +4322,7 @@ var init_useAssetHistory = __esm({
         totalTransferIn,
         totalTransferOut
       ]);
-      const aggregateValue = React7.useMemo(() => {
+      const aggregateValue = React12.useMemo(() => {
         let vol = utils.zero;
         let pnl = utils.zero;
         let roi = utils.zero;
@@ -4148,7 +4391,7 @@ var init_periodHeader = __esm({
     init_useAssetHistory();
     PeriodTitle = (props) => {
       const { t } = i18n.useTranslation();
-      const periodLabel = React7.useMemo(() => {
+      const periodLabel = React12.useMemo(() => {
         return {
           ["7D" /* WEEK */]: t("common.select.7d"),
           ["30D" /* MONTH */]: t("common.select.30d"),
@@ -4176,7 +4419,7 @@ var init_periodHeader = __esm({
 var LazyPeriodTitle, AssetsChart;
 var init_assetsChart_ui = __esm({
   "src/pages/overview/assetChart/assetsChart.ui.tsx"() {
-    LazyPeriodTitle = React7__default.default.lazy(
+    LazyPeriodTitle = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_periodHeader(), periodHeader_exports)).then((mod) => {
         return { default: mod.PeriodTitle };
       })
@@ -4187,7 +4430,7 @@ var init_assetsChart_ui = __esm({
       return /* @__PURE__ */ jsxRuntime.jsx(
         ui.Card,
         {
-          title: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          title: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
             LazyPeriodTitle,
             {
               onPeriodChange,
@@ -4198,7 +4441,7 @@ var init_assetsChart_ui = __esm({
           ) }),
           id: "portfolio-overview-assets-chart",
           classNames: { content: "oui-h-[168px] oui-pb-0" },
-          children: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(chart.AssetAreaChart, { data, invisible: props.invisible }) })
+          children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(chart.AssetAreaChart, { data, invisible: props.invisible }) })
         }
       );
     };
@@ -4233,7 +4476,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__default.default.lazy(
+    LazyPeriodTitle2 = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_periodHeader(), periodHeader_exports)).then((mod) => {
         return { default: mod.PeriodTitle };
       })
@@ -4253,7 +4496,7 @@ var init_performance_ui = __esm({
       return /* @__PURE__ */ jsxRuntime.jsxs(
         ui.Card,
         {
-          title: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+          title: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
             LazyPeriodTitle2,
             {
               onPeriodChange,
@@ -4456,7 +4699,7 @@ var init_performance_script = __esm({
           { account_value: 500, pnl: 500 }
         )
       });
-      const _data = React7.useMemo(() => {
+      const _data = React12.useMemo(() => {
         if (filteredData?.length) {
           return filteredData;
         }
@@ -4505,8 +4748,8 @@ var init_performance = __esm({
 var EffectiveFee;
 var init_effectiveFee = __esm({
   "src/pages/feeTier/icons/effectiveFee.tsx"() {
-    EffectiveFee = React7__default.default.forwardRef((props, ref) => {
-      const linearId = React7.useId();
+    EffectiveFee = React12__default.default.forwardRef((props, ref) => {
+      const linearId = React12.useId();
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "svg",
         {
@@ -4809,7 +5052,7 @@ var init_feeTierHeader = __esm({
           )
         }
       ];
-      const mergedData = React7.useMemo(() => {
+      const mergedData = React12.useMemo(() => {
         if (typeof headerDataAdapter === "function") {
           return headerDataAdapter(items);
         }
@@ -4826,11 +5069,11 @@ var init_feeTierHeader = __esm({
             direction: "column",
             gap: 2,
             itemAlign: "stretch",
-            children: mergedData.map((item, index) => /* @__PURE__ */ React7.createElement(MobileHeaderItem, { ...item, key: `mobile-item-${index}` }))
+            children: mergedData.map((item, index) => /* @__PURE__ */ React12.createElement(MobileHeaderItem, { ...item, key: `mobile-item-${index}` }))
           }
         );
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { className: "", direction: "row", gapX: 4, my: 4, itemAlign: "stretch", children: mergedData.map((item, index) => /* @__PURE__ */ React7.createElement(DesktopHeaderItem, { ...item, key: `desktop-item-${index}` })) });
+      return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { className: "", direction: "row", gapX: 4, my: 4, itemAlign: "stretch", children: mergedData.map((item, index) => /* @__PURE__ */ React12.createElement(DesktopHeaderItem, { ...item, key: `desktop-item-${index}` })) });
     };
   }
 });
@@ -4842,9 +5085,9 @@ var init_apiManager_script = __esm({
   "src/pages/api/apiManager.script.tsx"() {
     useApiManagerScript = (props) => {
       const { filterTags, keyStatus } = props ?? {};
-      const [showCreateDialog, setShowCreateDialog] = React7.useState(false);
-      const [showCreatedDialog, setShowCreatedDialog] = React7.useState(false);
-      const [generateKey, setGenerateKey] = React7.useState();
+      const [showCreateDialog, setShowCreateDialog] = React12.useState(false);
+      const [showCreatedDialog, setShowCreatedDialog] = React12.useState(false);
+      const [generateKey, setGenerateKey] = React12.useState();
       const { wrongNetwork, disabledConnect } = reactApp.useAppContext();
       const { state, account: account2 } = hooks.useAccount();
       const { t } = i18n.useTranslation();
@@ -4863,8 +5106,8 @@ var init_apiManager_script = __esm({
       ] = hooks.useApiKeyManager({
         keyInfo: { key_status: keyStatus }
       });
-      const [curPubKey, setCurPubKey] = React7.useState(void 0);
-      React7.useEffect(() => {
+      const [curPubKey, setCurPubKey] = React12.useState(void 0);
+      React12.useEffect(() => {
         account2.keyStore.getOrderlyKey()?.getPublicKey().then((pubKey) => {
           setCurPubKey(pubKey);
         });
@@ -4972,7 +5215,7 @@ var init_apiManager_script = __esm({
       };
       const onCopyApiSecretKey = () => ui.toast.success(t("portfolio.apiKey.secretKey.copied"));
       const onCopyIP = () => ui.toast.success(t("portfolio.apiKey.column.restrictedIP.copy"));
-      const keyList = React7.useMemo(() => {
+      const keyList = React12.useMemo(() => {
         return keys?.filter((e) => {
           const filterTag = filterTags ? filterTags?.includes(e.tag) : true;
           const filterCurKey = curPubKey ? !e.orderly_key.includes(curPubKey) : true;
@@ -5032,12 +5275,12 @@ var CreateAPIKeyDialog, Checkbox;
 var init_createApiKey = __esm({
   "src/pages/api/dialog/createApiKey.tsx"() {
     CreateAPIKeyDialog = (props) => {
-      const [ipText, setIpText] = React7.useState("");
-      const [read, setRead] = React7.useState(true);
-      const [trade, setTrade] = React7.useState(true);
-      const [hint, setHint] = React7.useState("");
+      const [ipText, setIpText] = React12.useState("");
+      const [read, setRead] = React12.useState(true);
+      const [trade, setTrade] = React12.useState(true);
+      const [hint, setHint] = React12.useState("");
       const { t } = i18n.useTranslation();
-      React7.useEffect(() => {
+      React12.useEffect(() => {
         if (!props.showCreateDialog) {
           setIpText("");
           setRead(true);
@@ -5045,7 +5288,7 @@ var init_createApiKey = __esm({
           setHint("");
         }
       }, [props.showCreateDialog]);
-      React7.useEffect(() => {
+      React12.useEffect(() => {
         if (ipText.length === 0)
           setHint("");
       }, [ipText]);
@@ -5436,18 +5679,18 @@ var init_editApiKey = __esm({
     init_createApiKey();
     EditAPIKeyDialog = (props) => {
       const { item, open, setOpen, onUpdate } = props;
-      const [ipText, setIpText] = React7.useState(item.ip_restriction_list?.join(","));
-      const [read, setRead] = React7.useState(true);
-      const [trade, setTrade] = React7.useState(true);
-      const [hint, setHint] = React7.useState("");
+      const [ipText, setIpText] = React12.useState(item.ip_restriction_list?.join(","));
+      const [read, setRead] = React12.useState(true);
+      const [trade, setTrade] = React12.useState(true);
+      const [hint, setHint] = React12.useState("");
       const { t } = i18n.useTranslation();
-      React7.useEffect(() => {
+      React12.useEffect(() => {
         setIpText(item.ip_restriction_list.join(","));
         const scope = item.scope?.toLocaleLowerCase() || "";
         setRead(scope.includes("read"));
         setTrade(scope.includes("trading"));
       }, [item]);
-      React7.useEffect(() => {
+      React12.useEffect(() => {
         if (ipText.length === 0)
           setHint("");
       }, [ipText]);
@@ -5574,22 +5817,22 @@ var LazyCreateAPIKeyDialog, LazyCreatedAPIKeyDialog, LazyDeleteAPIKeyDialog, Laz
 var init_apiManager_ui = __esm({
   "src/pages/api/apiManager.ui.tsx"() {
     init_apiManager_script();
-    LazyCreateAPIKeyDialog = React7__default.default.lazy(
+    LazyCreateAPIKeyDialog = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_createApiKey(), createApiKey_exports)).then((mod) => {
         return { default: mod.CreateAPIKeyDialog };
       })
     );
-    LazyCreatedAPIKeyDialog = React7__default.default.lazy(
+    LazyCreatedAPIKeyDialog = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_createdApiKey(), createdApiKey_exports)).then((mod) => {
         return { default: mod.CreatedAPIKeyDialog };
       })
     );
-    LazyDeleteAPIKeyDialog = React7__default.default.lazy(
+    LazyDeleteAPIKeyDialog = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_deleteApiKey(), deleteApiKey_exports)).then((mod) => {
         return { default: mod.DeleteAPIKeyDialog };
       })
     );
-    LazyEditAPIKeyDialog = React7__default.default.lazy(
+    LazyEditAPIKeyDialog = React12__default.default.lazy(
       () => Promise.resolve().then(() => (init_editApiKey(), editApiKey_exports)).then((mod) => {
         return { default: mod.EditAPIKeyDialog };
       })
@@ -5618,8 +5861,8 @@ var init_apiManager_ui = __esm({
             ),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
               /* @__PURE__ */ jsxRuntime.jsx(KeyList, { ...props }),
-              /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyCreateAPIKeyDialog, { ...props }) }),
-              /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyCreatedAPIKeyDialog, { ...props }) })
+              /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyCreateAPIKeyDialog, { ...props }) }),
+              /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyCreatedAPIKeyDialog, { ...props }) })
             ] })
           ]
         }
@@ -5841,7 +6084,7 @@ var init_apiManager_ui = __esm({
     };
     EditButton = (props) => {
       const { item, onUpdate, verifyIP } = props;
-      const [open, setOpen] = React7.useState(false);
+      const [open, setOpen] = React12.useState(false);
       const { t } = i18n.useTranslation();
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -5858,7 +6101,7 @@ var init_apiManager_ui = __esm({
             children: t("common.edit")
           }
         ),
-        open && /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        open && /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           LazyEditAPIKeyDialog,
           {
             item,
@@ -5872,7 +6115,7 @@ var init_apiManager_ui = __esm({
     };
     DeleteButton = (props) => {
       const { item, onDelete } = props;
-      const [open, setOpen] = React7.useState(false);
+      const [open, setOpen] = React12.useState(false);
       const { t } = i18n.useTranslation();
       return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -5889,7 +6132,7 @@ var init_apiManager_ui = __esm({
             children: t("common.delete")
           }
         ),
-        open && /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        open && /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           LazyDeleteAPIKeyDialog,
           {
             item,
@@ -5915,16 +6158,16 @@ var PortfolioLeftSidebarPath = /* @__PURE__ */ ((PortfolioLeftSidebarPath2) => {
 })(PortfolioLeftSidebarPath || {});
 var usePortfolioLayoutScript = (props) => {
   const { routerAdapter } = uiScaffold.useScaffoldContext();
-  const [current, setCurrent] = React7.useState(
+  const [current, setCurrent] = React12.useState(
     props.current ?? routerAdapter?.currentPath ?? "/portfolio"
   );
   const { t } = i18n.useTranslation();
-  React7.useEffect(() => {
+  React12.useEffect(() => {
     if (props.current || routerAdapter?.currentPath) {
       setCurrent(props.current || routerAdapter?.currentPath || "/portfolio");
     }
   }, [props.current, routerAdapter?.currentPath]);
-  const items = React7.useMemo(() => {
+  const items = React12.useMemo(() => {
     return [
       {
         name: t("common.overview"),
@@ -6404,12 +6647,12 @@ var useRewardsData = ({ type = hooks.TWType.normal }) => {
   );
   const epochList = hooks.useEpochInfo(type);
   const brokerId = hooks.useConfig("brokerId");
-  const brokerName = React7.useMemo(() => {
+  const brokerName = React12.useMemo(() => {
     return brokers?.[brokerId];
   }, [brokerId, brokers]);
-  const lastStete = React7.useRef(types.AccountStatusEnum.NotConnected);
-  const timerRef = React7.useRef(null);
-  React7.useEffect(() => {
+  const lastStete = React12.useRef(types.AccountStatusEnum.NotConnected);
+  const timerRef = React12.useRef(null);
+  React12.useEffect(() => {
     if (lastStete.current !== state.status) {
       lastStete.current = state.status;
       timerRef.current = setTimeout(() => {
@@ -6460,7 +6703,7 @@ var OverviewProvider = (props) => {
   const { type, children } = props;
   const state = useAssetsHistoryData(localKey, { isRealtime: true });
   const rewardsData = useRewardsData({ type });
-  const memoizedValue = React7.useMemo(() => {
+  const memoizedValue = React12.useMemo(() => {
     return {
       ...state,
       type,
@@ -6525,7 +6768,7 @@ var usePortfolioChartsState = () => {
     ORDERLY_ASSETS_VISIBLE_KEY,
     true
   );
-  const onPerformanceClick = React7.useCallback(() => {
+  const onPerformanceClick = React12.useCallback(() => {
     return ui.modal.show(PerformanceMobileSheetId);
   }, []);
   return {
@@ -6539,7 +6782,7 @@ var usePortfolioChartsState = () => {
 var PortfolioChartsMobileUI = (props) => {
   const { data, invisible, unrealPnL, unrealROI, visible, onPerformanceClick } = props;
   const { t } = i18n.useTranslation();
-  const colorId = React7.useId();
+  const colorId = React12.useId();
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
@@ -6664,7 +6907,7 @@ var useCurrentStatus = () => {
       textClass: ""
     }
   };
-  return React7.useMemo(() => {
+  return React12.useMemo(() => {
     if (disabledConnect) {
       return statusText.connectWallet;
     }
@@ -6752,7 +6995,7 @@ var ShowAccount = () => {
     navigator.clipboard.writeText(state.address ?? "");
     ui.toast.success(t("common.copy.copied"));
   };
-  const currentNamespace = React7.useMemo(() => {
+  const currentNamespace = React12.useMemo(() => {
     if (namespace) {
       return namespace;
     }
@@ -6761,7 +7004,7 @@ var ShowAccount = () => {
     }
     return null;
   }, [namespace, state.status]);
-  const leftNode = React7.useMemo(() => {
+  const leftNode = React12.useMemo(() => {
     if (!state.address) {
       return;
     }
@@ -6786,7 +7029,7 @@ var ShowAccount = () => {
       )
     ] });
   }, [state.address]);
-  const rightNode = React7.useMemo(() => {
+  const rightNode = React12.useMemo(() => {
     if (currentNamespace === types.ChainNamespace.evm) {
       return /* @__PURE__ */ jsxRuntime.jsx(EVMChains, {});
     }
@@ -6801,7 +7044,7 @@ var ShowAccount = () => {
       "Solana"
     ] });
   }, [currentNamespace]);
-  const bgClass = React7.useMemo(() => {
+  const bgClass = React12.useMemo(() => {
     let bg = "";
     if (currentNamespace == types.ChainNamespace.evm) {
       bg = "oui-bg-[linear-gradient(15deg,#283BEE_-11%,transparent_30%,transparent_77%,#A53411_100%)]";
@@ -6828,7 +7071,7 @@ var AccountStatusMobile = () => {
   const { state } = hooks.useAccount();
   const { wrongNetwork } = reactApp.useAppContext();
   const { description, rootClass } = useCurrentStatus();
-  const alreadyShowAccount = React7.useMemo(() => {
+  const alreadyShowAccount = React12.useMemo(() => {
     if (state.status === types.AccountStatusEnum.EnableTradingWithoutConnected) {
       return true;
     }
@@ -7025,7 +7268,7 @@ var PortfolioHandleMobile = (props) => {
 var PortfolioValueMobile = (props) => {
   const { t } = i18n.useTranslation();
   const { state } = hooks.useAccount();
-  const currentNamespace = React7.useMemo(() => {
+  const currentNamespace = React12.useMemo(() => {
     if (props.namespace) {
       return props.namespace;
     }
@@ -7316,22 +7559,22 @@ var MobileOverview = (props) => {
     )
   ] });
 };
-var LazyAssetWidget = React7__default.default.lazy(
+var LazyAssetWidget = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_assets(), assets_exports)).then((mod) => {
     return { default: mod.AssetWidget };
   })
 );
-var LazyAssetsChartWidget = React7__default.default.lazy(
+var LazyAssetsChartWidget = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_assetChart(), assetChart_exports)).then((mod) => {
     return { default: mod.AssetsChartWidget };
   })
 );
-var LazyPerformanceWidget = React7__default.default.lazy(
+var LazyPerformanceWidget = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_performance(), performance_exports)).then((mod) => {
     return { default: mod.PerformanceWidget };
   })
 );
-var LazyHistoryDataGroupWidget = React7__default.default.lazy(
+var LazyHistoryDataGroupWidget = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_historyDataGroup(), historyDataGroup_exports)).then((mod) => {
     return { default: mod.HistoryDataGroupWidget };
   })
@@ -7345,10 +7588,10 @@ var OverviewPage = (props) => {
       hideTraderCard: props.hideTraderCard
     }
   ) : /* @__PURE__ */ jsxRuntime.jsxs(ui.Grid, { cols: 2, gap: 4, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyAssetWidget, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyAssetsChartWidget, {}) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Grid.span, { colSpan: 2, children: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyPerformanceWidget, {}) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(ui.Grid.span, { colSpan: 2, children: /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyHistoryDataGroupWidget, {}) }) })
+    /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyAssetWidget, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyAssetsChartWidget, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Grid.span, { colSpan: 2, children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyPerformanceWidget, {}) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(ui.Grid.span, { colSpan: 2, children: /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(LazyHistoryDataGroupWidget, {}) }) })
   ] }) });
 };
 
@@ -7358,7 +7601,7 @@ __export(feeTier_exports, {
   FeeTierPage: () => FeeTierPage,
   useFeeTierScript: () => useFeeTierScript
 });
-var LazyFeeTierHeader = React7__default.default.lazy(
+var LazyFeeTierHeader = React12__default.default.lazy(
   () => Promise.resolve().then(() => (init_feeTierHeader(), feeTierHeader_exports)).then((mod) => {
     return { default: mod.FeeTierHeader };
   })
@@ -7366,7 +7609,7 @@ var LazyFeeTierHeader = React7__default.default.lazy(
 var FeeTierTable = (props) => {
   const { isMobile } = ui.useScreen();
   const { tier, columns, dataSource: dataSource2, onRow, onCell } = props;
-  const internalOnRow = React7.useCallback(
+  const internalOnRow = React12.useCallback(
     (record, index) => {
       const config = typeof onRow === "function" ? onRow(record, index) : { normal: void 0, active: void 0 };
       const active = tier !== void 0 && tier !== null && tier === index + 1;
@@ -7388,7 +7631,7 @@ var FeeTierTable = (props) => {
     },
     [tier, onRow]
   );
-  const internalOnCell = React7.useCallback(
+  const internalOnCell = React12.useCallback(
     (column, record, index) => {
       const config = typeof onCell === "function" ? onCell(column, record, index) : { normal: void 0, active: void 0 };
       const active = tier !== void 0 && tier !== null && tier === index + 1;
@@ -7464,7 +7707,7 @@ var FeeTier = (props) => {
       },
       children: [
         !isMobile && /* @__PURE__ */ jsxRuntime.jsx(ui.Divider, {}),
-        /* @__PURE__ */ jsxRuntime.jsx(React7__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
+        /* @__PURE__ */ jsxRuntime.jsx(React12__default.default.Suspense, { fallback: null, children: /* @__PURE__ */ jsxRuntime.jsx(
           LazyFeeTierHeader,
           {
             vol,
@@ -7499,7 +7742,7 @@ var textStyle = {
 };
 var useFeeTierColumns = () => {
   const { t } = i18n.useTranslation();
-  return React7.useMemo(() => {
+  return React12.useMemo(() => {
     return [
       {
         title: t("portfolio.feeTier.column.tier"),
@@ -7621,15 +7864,15 @@ var findCurrentTier = (feeList, data) => {
 };
 var useFeeTierScript = (options) => {
   const { dataAdapter, headerDataAdapter, onRow, onCell } = options || {};
-  const [tier, setTier] = React7.useState();
+  const [tier, setTier] = React12.useState();
   const { data, isLoading } = hooks.useAccountInfo();
   const { state } = hooks.useAccount();
   const cols = useFeeTierColumns();
   const { data: volumeStatistics } = hooks.usePrivateQuery("/v1/volume/user/stats");
-  const { columns, dataSource: dataSource2 } = React7.useMemo(() => {
+  const { columns, dataSource: dataSource2 } = React12.useMemo(() => {
     return typeof dataAdapter === "function" ? dataAdapter(cols, dataSource, { tier }) : { columns: cols, dataSource };
   }, [dataAdapter, cols, tier]);
-  React7.useEffect(() => {
+  React12.useEffect(() => {
     if (!data || isLoading) {
       return;
     }
@@ -7661,12 +7904,12 @@ __export(page_exports, {
 });
 init_assets_ui_desktop();
 var PositionsPage = (props) => {
-  const [tab, setTab] = React7.useState("Positions" /* positions */);
+  const [tab, setTab] = React12.useState("Positions" /* positions */);
   const { t } = i18n.useTranslation();
   const { state, isMainAccount } = hooks.useAccount();
   const subAccounts = state.subAccounts ?? [];
-  const [selectedAccount, setAccount] = React7__default.default.useState("All accounts" /* ALL */);
-  const onAccountFilter = React7__default.default.useCallback(
+  const [selectedAccount, setAccount] = React12__default.default.useState("All accounts" /* ALL */);
+  const onAccountFilter = React12__default.default.useCallback(
     (filter) => {
       const { name, value } = filter;
       if (name === "account") {
@@ -7683,7 +7926,7 @@ var PositionsPage = (props) => {
     label: t("common.mainAccount"),
     value: "Main accounts" /* MAIN */
   };
-  const memoizedOptions = React7.useMemo(() => {
+  const memoizedOptions = React12.useMemo(() => {
     if (Array.isArray(subAccounts) && subAccounts.length) {
       return [
         ALL_ACCOUNTS,
@@ -7796,7 +8039,7 @@ __export(page_exports2, {
 var OrdersPage = (props) => {
   const { sharePnLConfig } = props;
   const { t } = i18n.useTranslation();
-  const ordersRef = React7.useRef(null);
+  const ordersRef = React12.useRef(null);
   const onDownload = () => {
     ordersRef.current?.download?.();
   };
@@ -7831,7 +8074,7 @@ var OrdersPage = (props) => {
     }
   );
 };
-var TooltipIcon = React7__default.default.forwardRef(
+var TooltipIcon = React12__default.default.forwardRef(
   (props, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
@@ -7879,13 +8122,13 @@ var useSettingScript = () => {
   const { data, mutate: refresh } = hooks.useAccountInfo();
   const { wrongNetwork, disabledConnect } = reactApp.useAppContext();
   const [update, { isMutating }] = hooks.useMutation("/v1/client/maintenance_config");
-  const [checked, setChecked] = React7.useState(false);
+  const [checked, setChecked] = React12.useState(false);
   const { notification } = hooks.useOrderlyContext();
   const [soundAlert, setSoundAlert] = hooks.useLocalStorage(
     ORDERLY_ORDER_SOUND_ALERT_KEY,
     notification?.orderFilled?.defaultOpen ?? false
   );
-  React7.useEffect(() => {
+  React12.useEffect(() => {
     setChecked(data?.maintenance_cancel_orders || false);
   }, [data]);
   const updateCheckState = hooks.useDebouncedCallback((value) => {
@@ -7998,7 +8241,7 @@ var SettingDesktop = (props) => {
 };
 var SettingMobile = (props) => {
   const { t } = i18n.useTranslation();
-  const [open, setOpen] = React7.useState(false);
+  const [open, setOpen] = React12.useState(false);
   const onLanguageChange = () => {
     setOpen(true);
   };
@@ -8158,7 +8401,7 @@ var useAssetsColumns = (options) => {
   const tokensInfo = hooks.useAppStore((state) => state.tokensInfo);
   const { namespace } = hooks.useWalletConnector();
   const { onTransfer, onConvert } = options;
-  const columns = React7__default.default.useMemo(() => {
+  const columns = React12__default.default.useMemo(() => {
     return [
       {
         title: t("portfolio.overview.column.token"),
@@ -8267,7 +8510,7 @@ var useAssetsScript = () => {
   const { getIndexPrice } = hooks.useIndexPricesStream();
   const tokensInfo = hooks.useAppStore((state2) => state2.tokensInfo);
   const subAccounts = state.subAccounts ?? [];
-  React7.useEffect(() => {
+  React12.useEffect(() => {
     if (holding.length > 0) {
       subAccount.refresh();
     }
@@ -8276,7 +8519,7 @@ var useAssetsScript = () => {
   const toggleVisible = () => {
     setVisible((visible2) => !visible2);
   };
-  const assetsOptions = React7.useMemo(() => {
+  const assetsOptions = React12.useMemo(() => {
     return tokensInfo?.map((item) => ({
       label: item.token,
       value: item.token
@@ -8289,7 +8532,7 @@ var useAssetsScript = () => {
     filteredData: filtered,
     onFilter
   } = useAssetsMultiFilter(allAccounts);
-  const enhancedFiltered = React7.useMemo(() => {
+  const enhancedFiltered = React12.useMemo(() => {
     return filtered.map((accountData) => {
       const enhancedChildren = accountData.children?.map((holding2) => {
         const tokenInfo = tokensInfo?.find(
@@ -8324,7 +8567,7 @@ var useAssetsScript = () => {
       };
     });
   }, [filtered, getIndexPrice, tokensInfo]);
-  const handleTransfer = React7.useCallback((accountId, token) => {
+  const handleTransfer = React12.useCallback((accountId, token) => {
     if (!accountId) {
       return;
     }
@@ -8344,7 +8587,7 @@ var useAssetsScript = () => {
     onTransfer: showTransfer ? handleTransfer : void 0,
     onConvert: handleConvert
   });
-  const openDepositAndWithdraw = React7.useCallback(
+  const openDepositAndWithdraw = React12.useCallback(
     (viewName) => {
       ui.modal.show(uiTransfer.DepositAndWithdrawWithDialogId, {
         activeTab: viewName
@@ -8352,10 +8595,10 @@ var useAssetsScript = () => {
     },
     []
   );
-  const onDeposit = React7.useCallback(() => {
+  const onDeposit = React12.useCallback(() => {
     openDepositAndWithdraw("deposit");
   }, []);
-  const onWithdraw = React7.useCallback(() => {
+  const onWithdraw = React12.useCallback(() => {
     openDepositAndWithdraw("withdraw");
   }, []);
   const dataSource2 = reactApp.useDataTap(enhancedFiltered, {
@@ -8629,10 +8872,10 @@ var AssetsTableMobile = (props) => {
     value: "Main accounts" /* MAIN */
   };
   const ALL_ASSETS = {
-    label: "All assets",
+    label: t("common.allAssets"),
     value: "all"
   };
-  const memoizedOptions = React7.useMemo(() => {
+  const memoizedOptions = React12.useMemo(() => {
     if (Array.isArray(subAccounts) && subAccounts.length) {
       return [
         ALL_ACCOUNTS,
@@ -8645,7 +8888,7 @@ var AssetsTableMobile = (props) => {
     }
     return [ALL_ACCOUNTS, MAIN_ACCOUNT];
   }, [subAccounts]);
-  const memoizedAssets = React7.useMemo(() => {
+  const memoizedAssets = React12.useMemo(() => {
     return [ALL_ASSETS, ...assetsOptions];
   }, [assetsOptions]);
   if (!props.canTrade) {
@@ -8686,7 +8929,7 @@ var AssetsTableMobile = (props) => {
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "oui-flex oui-flex-col oui-gap-1", children: dataSource2?.map((assets, index) => {
-      return /* @__PURE__ */ jsxRuntime.jsxs(React7__default.default.Fragment, { children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs(React12__default.default.Fragment, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(AccountTag, { name: assets.description ?? "sub account" }),
         Array.isArray(assets.children) && assets.children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
           AssetMobileItem,