@orderly.network/ui-scaffold 2.11.2 → 2.12.0-alpha.0

package/dist/index.mjs

@@ -1,16 +1,16 @@
-import React6, { forwardRef, createContext, useCallback, useRef, useEffect, useMemo, useState, cloneElement, useContext, isValidElement } from 'react';
+import React7, { forwardRef, createContext, useCallback, useRef, useEffect, useMemo, useState, cloneElement, useContext, isValidElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { installExtension, ExtensionPositionEnum, tv, Flex, Text, Tooltip, useScreen, Button, cn, modal, toast, DropdownMenuRoot, DropdownMenuTrigger, DropdownMenuPortal, DropdownMenuContent, DropdownMenuGroup, EVMAvatar, Divider, DropdownMenuItem, ChevronDownIcon, Box, PopoverRoot, PopoverAnchor, PopoverContent, SimpleDialog, Checkbox, useObserverElement, SimpleSheet, Logo, VectorIcon, PeopleIcon, SwapHorizIcon, Sheet, SheetContent, ChevronLeftIcon, Dialog, DialogContent, DialogHeader, DialogTitle, DialogBody, Spinner, ChainIcon, ScrollArea, formatAddress, Popover, Grid, CopyIcon, TextField, inputFormatter, ExtensionSlot, EyeIcon, EyeCloseIcon, SimpleDialogFooter, TooltipProvider, TooltipRoot, TooltipTrigger, BellIcon, TooltipContent, PopoverTrigger, PopupUnionIcon, CloseRoundFillIcon, SpotIcon, PerpsIcon, SelectedChoicesFillIcon } from '@orderly.network/ui';
 import { useTranslation, i18n, useLocaleContext, Trans } from '@orderly.network/i18n';
-import { useWalletConnector, useAccount, useChains, useLocalStorage, useConfig, useTrack, useIndexPricesStream, WsNetworkStatus, useSubAccountQuery, useWsStatus, OrderlyContext, useMemoizedFn, useCollateral, usePositionStream, useMarginRatio, useLeverage, useMaintenanceStatus, useEventEmitter } from '@orderly.network/hooks';
+import { useWalletConnector, useAccount, useChains, useLocalStorage, useConfig, useTrack, WsNetworkStatus, useIndexPricesStream, useWsStatus, useSubAccountQuery, OrderlyContext, useMemoizedFn, useCollateral, usePositionStream, useMarginRatio, useLeverage, useMaintenanceStatus, useEventEmitter } from '@orderly.network/hooks';
 import { useAppContext, useAppConfig } from '@orderly.network/react-app';
 import { AccountStatusEnum, ABSTRACT_CHAIN_ID_MAP, EMPTY_LIST, TrackerEventName, EMPTY_OBJECT } from '@orderly.network/types';
 import { ChainSelectorSheetId, ChainSelectorDialogId, ChainSelectorWidget } from '@orderly.network/ui-chain-selector';
 import { WalletConnectorSheetId, WalletConnectorModalId } from '@orderly.network/ui-connector';
+import { useAnnouncement, NotificationUI as NotificationUI$1, AnnouncementCenterUI } from '@orderly.network/ui-notification';
 import { Decimal, getTimestamp, windowGuard } from '@orderly.network/utils';
 import jsQR from 'jsqr';
 import { qrcode } from '@akamfoad/qr';
-import { useAnnouncement, NotificationUI as NotificationUI$1, AnnouncementCenterUI } from '@orderly.network/ui-notification';
 import { format } from 'date-fns';
 import { UTCDateMini } from '@date-fns/utc';
 
@@ -26,7 +26,7 @@ var __export = (target, all) => {
 var CommuntiyTelegramIcon, CommuntiyDiscordIcon, CommuntiyXIcon;
 var init_communtiyIcons = __esm({
   "src/components/icons/communtiyIcons.tsx"() {
-    CommuntiyTelegramIcon = React6.forwardRef((props, ref) => {
+    CommuntiyTelegramIcon = React7.forwardRef((props, ref) => {
       const { size = 20, ...rest } = props;
       return /* @__PURE__ */ jsx(
         "svg",
@@ -49,7 +49,7 @@ var init_communtiyIcons = __esm({
         }
       );
     });
-    CommuntiyDiscordIcon = React6.forwardRef((props, ref) => {
+    CommuntiyDiscordIcon = React7.forwardRef((props, ref) => {
       const { size = 20, ...rest } = props;
       return /* @__PURE__ */ jsx(
         "svg",
@@ -72,7 +72,7 @@ var init_communtiyIcons = __esm({
         }
       );
     });
-    CommuntiyXIcon = React6.forwardRef(
+    CommuntiyXIcon = React7.forwardRef(
       (props, ref) => {
         const { size = 20, ...rest } = props;
         return /* @__PURE__ */ jsx(
@@ -105,7 +105,7 @@ var init_communtiyIcons = __esm({
 var OrderlyTextIcon;
 var init_orderlyNetworkTextIcon = __esm({
   "src/components/icons/orderlyNetworkTextIcon.tsx"() {
-    OrderlyTextIcon = React6.forwardRef(
+    OrderlyTextIcon = React7.forwardRef(
       (props, ref) => {
         return /* @__PURE__ */ jsxs(
           "svg",
@@ -145,7 +145,7 @@ var init_orderlyNetworkTextIcon = __esm({
 var SignalIcon;
 var init_signal = __esm({
   "src/components/icons/signal.tsx"() {
-    SignalIcon = React6.forwardRef(
+    SignalIcon = React7.forwardRef(
       (props, ref) => {
         const { size = 18, ...rest } = props;
         return /* @__PURE__ */ jsx(
@@ -1507,671 +1507,1252 @@ var MainLogo = (props) => {
   }
   return /* @__PURE__ */ jsx(OrderlyLogo, {});
 };
-var useAccountValue = (mainAccountId) => {
-  const [accountValue, setAccountValue] = useState({});
-  const {
-    data: newPositions = [],
-    isLoading: isPositionLoading,
-    mutate: mutatePositions
-  } = useSubAccountQuery("/v1/client/aggregate/positions", {
-    // formatter: (data) => data,
-    errorRetryCount: 3,
-    accountId: mainAccountId
-  });
-  useEffect(() => {
-    if (isPositionLoading) {
-      return;
+
+// src/components/footer/footer.ui.tsx
+init_icons();
+var Footer = (props) => {
+  const { t } = useTranslation();
+  const signalClsName = useMemo(() => {
+    switch (props.wsStatus) {
+      case WsNetworkStatus.Connected:
+        return "oui-fill-success-light oui-text-success-light";
+      case WsNetworkStatus.Disconnected:
+        return "oui-fill-danger-light oui-text-danger-light";
+      case WsNetworkStatus.Unstable:
+        return "oui-fill-warning-light oui-text-warning-light";
     }
-    if (!newPositions || newPositions.length === 0) {
-      setAccountValue({});
-      return;
+  }, [props.wsStatus]);
+  const openUrl = (url) => {
+    window.open(url, "_blank");
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      direction: "row",
+      justify: "between",
+      height: 28,
+      px: 3,
+      width: "100%",
+      children: [
+        /* @__PURE__ */ jsxs(Flex, { children: [
+          /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              direction: "row",
+              itemAlign: "center",
+              gap: 1,
+              className: signalClsName,
+              children: [
+                /* @__PURE__ */ jsx(
+                  SignalIcon,
+                  {
+                    fillOpacity: 1,
+                    fill: "currentColor"
+                  }
+                ),
+                /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("scaffold.footer.operational") })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Divider,
+            {
+              direction: "vertical",
+              className: "oui-h-[18px] oui-px-1 oui-ml-2 oui-border-line-12"
+            }
+          ),
+          /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+            /* @__PURE__ */ jsx(Text, { intensity: 54, size: "2xs", children: t("scaffold.footer.joinCommunity") }),
+            /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 1, children: [
+              typeof props.telegramUrl !== "undefined" && /* @__PURE__ */ jsx(
+                CommuntiyTelegramIcon,
+                {
+                  className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast oui-cursor-pointer",
+                  fill: "currentColor",
+                  fillOpacity: 1,
+                  onClick: (e) => openUrl(props.telegramUrl)
+                }
+              ),
+              typeof props.discordUrl !== "undefined" && /* @__PURE__ */ jsx(
+                CommuntiyDiscordIcon,
+                {
+                  className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast oui-cursor-pointer",
+                  fill: "currentColor",
+                  fillOpacity: 1,
+                  onClick: (e) => openUrl(props.discordUrl)
+                }
+              ),
+              typeof props.twitterUrl !== "undefined" && /* @__PURE__ */ jsx(
+                CommuntiyXIcon,
+                {
+                  className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast oui-cursor-pointer",
+                  fill: "currentColor",
+                  fillOpacity: 1,
+                  onClick: (e) => openUrl(props.twitterUrl)
+                }
+              )
+            ] }),
+            typeof props?.trailing !== "undefined" && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx(
+                Divider,
+                {
+                  direction: "vertical",
+                  className: "oui-h-[18px] oui-border-line-12"
+                }
+              ),
+              props?.trailing
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: "row",
+            gap: 1,
+            className: "oui-scaffold-footer-powered-by",
+            children: [
+              /* @__PURE__ */ jsx(Text, { intensity: 54, size: "2xs", children: t("scaffold.footer.poweredBy") }),
+              /* @__PURE__ */ jsx(OrderlyTextIcon, {})
+            ]
+          }
+        )
+      ]
     }
-    const value = newPositions.reduce(
-      (acc, position) => {
-        const accountId = position.account_id;
-        if (acc[accountId]) {
-          acc[accountId] = new Decimal(acc[accountId]).plus(position.unsettled_pnl).toNumber();
-        } else {
-          acc[accountId] = new Decimal(position.unsettled_pnl).toNumber();
-        }
-        return acc;
-      },
-      {}
-    );
-    setAccountValue(value);
-  }, [newPositions, isPositionLoading]);
+  );
+};
+var useFooterScript = () => {
+  const wsStatus = useWsStatus();
   return {
-    accountValue
+    wsStatus
   };
 };
-
-// src/components/subAccount/subAccount.script.ts
-var SubAccountScript = () => {
-  const [open2, setOpen] = useState(false);
-  const [mainAccountHolding, setMainAccountHolding] = useState(
-    []
-  );
-  const { wallet, connectedChain } = useWalletConnector();
-  const { data: indexPrices } = useIndexPricesStream();
-  const { isMobile } = useScreen();
-  const { state, account, subAccount, switchAccount } = useAccount();
-  const { t } = useTranslation();
-  const mainAccountId = state.mainAccountId;
-  const { accountValue } = useAccountValue(mainAccountId);
-  const currentAccountId = state.accountId;
-  const hasRefreshedRef = useRef(false);
-  const userAddress = useMemo(() => {
-    let address = state.address;
-    if (connectedChain?.id && ABSTRACT_CHAIN_ID_MAP.has(parseInt(connectedChain?.id))) {
-      address = account.getAdditionalInfo()?.AGWAddress;
-    }
-    return address;
-  }, [wallet, state, account, connectedChain]);
-  const subAccounts = useMemo(() => {
-    if (!state.subAccounts || !state.subAccounts.length) {
-      return [];
+var FooterWidget = (props) => {
+  const state = useFooterScript();
+  return /* @__PURE__ */ jsx(Footer, { ...state, ...props });
+};
+var ScaffoldContext = createContext(
+  {}
+);
+var useScaffoldContext = () => {
+  return useContext(ScaffoldContext);
+};
+var NotificationUI = (props) => {
+  const { dataSource, showAnnouncement } = props;
+  const { routerAdapter } = useScaffoldContext();
+  const onItemClick = (url) => {
+    if (!url) return;
+    routerAdapter?.onRouteChange({
+      href: url,
+      name: url,
+      target: "_blank"
+    });
+  };
+  const notificationRef = useRef(null);
+  const len = useMemo(() => dataSource?.length ?? 0, [dataSource]);
+  const onClose = useCallback(() => {
+    if (len === 0) {
+      return;
     }
-    const currentSubAccount = state.subAccounts.find(
-      (subAccount2) => subAccount2.id === currentAccountId
-    );
-    if (currentSubAccount) {
-      return [
-        currentSubAccount,
-        ...state.subAccounts.filter(
-          (subAccount2) => subAccount2.id !== currentAccountId
-        )
-      ];
+    windowGuard(() => {
+      if (notificationRef.current) {
+        const animationendHandler = () => {
+          props.onClose();
+          notificationRef.current.removeEventListener(
+            "transitionend",
+            animationendHandler
+          );
+        };
+        notificationRef.current.addEventListener(
+          "transitionend",
+          animationendHandler
+        );
+        requestAnimationFrame(() => {
+          notificationRef.current.style.transform = "translateY(120%)";
+        });
+      }
+    });
+  }, [props.onClose, len]);
+  useEffect(() => {
+    if (len === 0) {
+      return;
     }
-    return [...state.subAccounts];
-  }, [state.subAccounts, currentAccountId]);
-  const _popup = useMemo(
-    () => ({ mode: isMobile ? "sheet" : "modal" }),
-    [isMobile]
-  );
-  const doCreatSubAccount = useCallback(
-    (nickName) => {
-      return subAccount.create(nickName);
-    },
-    [subAccount]
-  );
-  const onSwitch = useCallback(
-    (accountId) => {
-      return switchAccount(accountId).catch((error) => {
-      }).then((res) => {
-        toast.success(t("subAccount.modal.switch.success.description"));
+    if (showAnnouncement) {
+      windowGuard(() => {
+        if (notificationRef.current) {
+          requestAnimationFrame(() => {
+            notificationRef.current.style.transform = "translateY(0)";
+          });
+        }
       });
-    },
-    [switchAccount]
-  );
-  const accountsWithValues = useMemo(() => {
-    const mainAccountUnsettlePnl = accountValue[mainAccountId] ?? 0;
-    const mainAccount = mainAccountId && state.address ? {
-      id: mainAccountId,
-      userAddress: state.address,
-      holding: mainAccountHolding,
-      accountValue: calculateAccountValue(
-        mainAccountHolding,
-        mainAccountUnsettlePnl,
-        indexPrices || EMPTY_OBJECT
-      )
-    } : void 0;
-    const updatedSubAccounts = subAccounts.map((subAccount2) => {
-      const subAccountUnsettlePnl = accountValue[subAccount2.id] ?? 0;
-      return {
-        ...subAccount2,
-        accountValue: calculateAccountValue(
-          subAccount2.holding || EMPTY_LIST,
-          subAccountUnsettlePnl,
-          indexPrices || EMPTY_OBJECT
-        )
-      };
-    });
-    return {
-      mainAccount,
-      subAccounts: updatedSubAccounts
-    };
-  }, [
-    mainAccountId,
-    state.address,
-    mainAccountHolding,
-    subAccounts,
-    accountValue,
-    indexPrices
-  ]);
-  useEffect(() => {
-    if (!open2) {
-      hasRefreshedRef.current = false;
-      return;
-    }
-    if (!hasRefreshedRef.current && mainAccountId) {
-      hasRefreshedRef.current = true;
-      subAccount.refresh().then((res) => {
-        setMainAccountHolding(res[mainAccountId] || []);
-      });
-    }
-  }, [open2, mainAccountId, subAccount]);
-  return {
-    userAddress,
-    mainAccount: accountsWithValues.mainAccount,
-    currentAccountId,
-    open: open2,
-    onOpenChange: setOpen,
-    popup: _popup,
-    createSubAccount: doCreatSubAccount,
-    subAccounts: accountsWithValues.subAccounts,
-    onSwitch
-  };
-};
-var calculateAccountValue = (holdings, unsettlePnl, indexPrices) => {
-  const holding = holdings.reduce((acc, holding2) => {
-    const price = getTokenIndexPrice(holding2.token, indexPrices);
-    if (!price) {
-      return acc;
     }
-    return new Decimal(holding2.holding).times(price).add(holding2.isolated_margin ?? 0).add(acc).toNumber();
-  }, 0);
-  return holding + unsettlePnl;
-};
-var getTokenIndexPrice = (token, indexPrices) => {
-  if (token === "USDC") {
-    return 1;
-  }
-  const symbol = `PERP_${token}_USDC`;
-  return indexPrices[symbol] ?? 0;
-};
-var SubAccountIcon = forwardRef(
-  (props, ref) => {
-    const { size = 20, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: size,
-        height: size,
-        viewBox: "0 0 20 20",
-        fill: "currentColor",
-        xmlns: "http://www.w3.org/2000/svg",
-        ref,
-        ...rest,
-        children: /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: "M10 2.5C8.16892 2.5 6.66667 4.00225 6.66667 5.83333C6.66667 7.66441 8.16892 9.16667 10 9.16667C11.8311 9.16667 13.3333 7.66441 13.3333 5.83333C13.3333 4.00225 11.8311 2.5 10 2.5ZM10 4.16667C10.9303 4.16667 11.6667 4.90299 11.6667 5.83333C11.6667 6.76368 10.9303 7.5 10 7.5C9.06965 7.5 8.33333 6.76368 8.33333 5.83333C8.33333 4.90299 9.06965 4.16667 10 4.16667ZM10 11.6667C8.54587 11.6667 6.82264 12.0082 5.37435 12.5798C4.65021 12.8656 3.99558 13.205 3.47168 13.641C2.94778 14.0769 2.5 14.6662 2.5 15.4167V17.5H17.5V16.6667V15.4167C17.5 14.6662 17.0522 14.0769 16.5283 13.641C16.0044 13.205 15.3498 12.8656 14.6257 12.5798C13.1774 12.0082 11.4541 11.6667 10 11.6667ZM10 13.3333C11.1784 13.3333 12.7884 13.645 14.0153 14.1292C14.6288 14.3713 15.1475 14.66 15.4622 14.9219C15.777 15.1838 15.8333 15.3622 15.8333 15.4167V15.8333H4.16667V15.4167C4.16667 15.3622 4.22299 15.1838 4.53776 14.9219C4.85253 14.66 5.37124 14.3713 5.9847 14.1292C7.21162 13.645 8.82163 13.3333 10 13.3333Z",
-            className: "oui-fill-base-contrast-98"
-          }
-        )
-      }
-    );
+  }, [showAnnouncement, len]);
+  if (len === 0) {
+    return null;
   }
-);
-var SwapIcon = forwardRef((props, ref) => {
-  const { size = 20, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    "svg",
+    "div",
     {
-      width: size,
-      height: size,
-      viewBox: "0 0 20 20",
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      ref,
-      ...rest,
-      children: /* @__PURE__ */ jsx("path", { d: "M6 16L2 12L6 8L7.0625 9.0625L4.875 11.25H11V12.75H4.875L7.0625 14.9375L6 16ZM14 11L12.9375 9.9375L15.125 7.75H9V6.25H15.125L12.9375 4.0625L14 3L18 7L14 11Z" })
+      ref: notificationRef,
+      "data-state": showAnnouncement ? "open" : "closed",
+      className: cn(
+        "oui-fixed oui-bottom-[calc(env(safe-area-inset-bottom)+8px)] oui-left-2 oui-z-50 oui-w-[calc(100%_-_16px)] oui-translate-y-[120%] oui-rounded-lg oui-border oui-border-line-6 oui-bg-base-8 md:oui-bottom-10 md:oui-left-auto md:oui-right-3 md:oui-w-[420px]",
+        "oui-transition-all oui-duration-300 oui-ease-in-out",
+        showAnnouncement ? "oui-visible" : "oui-invisible"
+      ),
+      children: /* @__PURE__ */ jsx(
+        NotificationUI$1,
+        {
+          dataSource,
+          onClose,
+          onItemClick
+        }
+      )
     }
   );
-});
-var AddIcon = forwardRef((props, ref) => {
-  const { size = 20, ...rest } = props;
+};
+var NotificationWidget = () => {
+  const { announcementState } = useScaffoldContext();
   return /* @__PURE__ */ jsx(
-    "svg",
+    NotificationUI,
     {
-      width: size,
-      height: size,
-      viewBox: "0 0 20 20",
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      ref,
-      ...rest,
-      children: /* @__PURE__ */ jsx("path", { d: "M9.25 14H10.75V10.75H14V9.25H10.75V6H9.25V9.25H6V10.75H9.25V14ZM4.5 17C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H4.5ZM4.5 15.5H15.5V4.5H4.5V15.5Z" })
+      dataSource: announcementState.tips,
+      onClose: announcementState.closeTips,
+      showAnnouncement: announcementState.showAnnouncement
     }
   );
+};
+
+// src/components/scaffold/scaffold.ui.tsx
+init_restrictedInfo();
+var menuItemVariants = tv({
+  slots: {
+    button: [
+      "oui-min-h-10",
+      "oui-px-3",
+      "oui-py-2",
+      "oui-rounded-md",
+      "oui-w-full",
+      "oui-text-left",
+      "oui-text-base",
+      "oui-text-base-contrast-36",
+      // "oui-flex",
+      "oui-group",
+      // "oui-space-x-2",
+      // "oui-items-center",
+      "hover:oui-bg-base-8",
+      "oui-transition-colors",
+      "group-data-[state=closed]/bar:oui-w-[42px]",
+      "oui-overflow-hidden"
+    ],
+    icon: []
+  },
+  variants: {
+    mode: {
+      "icon-only": {
+        button: "oui-w-10",
+        icon: "w-6 h-6"
+      },
+      full: {
+        button: "oui-full",
+        icon: "w-6 h-6"
+      }
+    },
+    active: {
+      true: {
+        button: "oui-bg-base-5 hover:oui-bg-base-5"
+      }
+    },
+    open: {
+      true: {
+        button: ""
+      }
+    }
+  }
 });
-var EditIcon = forwardRef((props, ref) => {
-  const { size = 12, ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    "svg",
+var MenuItem = React7.memo((props) => {
+  const { item, mode, open: open2, onClick, active, ...rest } = props;
+  const { button } = menuItemVariants({
+    mode,
+    active: props.active,
+    open: props.open
+  });
+  const children = /* @__PURE__ */ jsx(
+    "button",
     {
-      width: size,
-      height: size,
-      viewBox: "0 0 12 12",
-      fill: "currentColor",
-      xmlns: "http://www.w3.org/2000/svg",
-      ref,
-      ...rest,
-      children: /* @__PURE__ */ jsx("path", { d: "M9.95551 2.00049C9.81619 2.00049 9.67686 2.05318 9.57074 2.15918L5.43256 6.29785L5.24945 7.25049L6.20209 7.06738L10.3403 2.9292C10.443 2.82645 10.4999 2.68968 10.4999 2.54443C10.4999 2.39918 10.443 2.26218 10.3403 2.15918C10.2341 2.05318 10.0948 2.00049 9.95551 2.00049ZM3.12494 2.25C2.37147 2.25 1.74994 2.87153 1.74994 3.625V9.375C1.74994 10.1285 2.37147 10.75 3.12494 10.75H8.87494C9.62841 10.75 10.2499 10.1285 10.2499 9.375V5.25C10.2509 5.18374 10.2386 5.11796 10.2139 5.05648C10.1892 4.99499 10.1525 4.93903 10.106 4.89185C10.0595 4.84466 10.0041 4.8072 9.94293 4.78162C9.8818 4.75605 9.8162 4.74288 9.74994 4.74288C9.68368 4.74288 9.61807 4.75605 9.55695 4.78162C9.49582 4.8072 9.44038 4.84466 9.39386 4.89185C9.34734 4.93903 9.31066 4.99499 9.28595 5.05648C9.26124 5.11796 9.249 5.18374 9.24994 5.25V9.375C9.24994 9.58803 9.08797 9.75 8.87494 9.75H3.12494C2.91191 9.75 2.74994 9.58803 2.74994 9.375V3.625C2.74994 3.41197 2.91191 3.25 3.12494 3.25H7.24994C7.3162 3.25094 7.38198 3.2387 7.44346 3.21399C7.50494 3.18928 7.5609 3.1526 7.60809 3.10608C7.65527 3.05956 7.69274 3.00412 7.71832 2.94299C7.74389 2.88186 7.75706 2.81626 7.75706 2.75C7.75706 2.68374 7.74389 2.61814 7.71832 2.55701C7.69274 2.49588 7.65527 2.44044 7.60809 2.39392C7.5609 2.3474 7.50494 2.31072 7.44346 2.28601C7.38198 2.2613 7.3162 2.24906 7.24994 2.25H3.12494Z" })
+      "data-actived": props.active,
+      disabled: item.disabled,
+      className: button(),
+      onClick: () => {
+        props.onClick?.(item);
+      },
+      children: /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 2, as: "span", children: [
+        /* @__PURE__ */ jsx("div", { children: item.icon }),
+        props.open && /* @__PURE__ */ jsx(
+          Text.gradient,
+          {
+            color: props.active ? "brand" : "inherit",
+            angle: 45,
+            size: "base",
+            className: "oui-break-all oui-animate-in oui-fade-in",
+            children: item.name
+          }
+        )
+      ] })
     }
   );
+  if (props.open) {
+    return /* @__PURE__ */ jsx("li", { className: "oui-min-w-[120px]", children });
+  }
+  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, { content: item.name, side: "right", align: "center", sideOffset: 20, children }) });
 });
-var AccountIdForCopy = (props) => {
-  const { t } = useTranslation();
-  const info = useMemo(() => {
-    return {
-      leading: props.accountId.slice(0, 6),
-      middle: props.accountId.slice(6, -4),
-      trailing: props.accountId.slice(-4)
-    };
-  }, [props.accountId]);
-  const copy = useCallback(() => {
-    navigator.clipboard.writeText(props.accountId);
-    toast.success(t("common.copy.copied"));
-  }, [props.accountId]);
-  return /* @__PURE__ */ jsxs(
-    Flex,
+MenuItem.displayName = "LeftMenuItem";
+var SideMenus = (props) => {
+  return /* @__PURE__ */ jsxs(Box, { py: 6, children: [
+    /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        className: "oui-pointer-events-none oui-invisible oui-absolute",
+        children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
+          "linearGradient",
+          {
+            id: "side-menu-gradient",
+            x1: "15.7432",
+            y1: "8.94726",
+            x2: "2.24316",
+            y2: "8.94726",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx("stop", { stopColor: "rgb(var(--oui-gradient-brand-end))" }),
+              /* @__PURE__ */ jsx("stop", { stopColor: "rgb(var(--oui-gradient-brand-start))", offset: "1" })
+            ]
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { className: "oui-space-y-4", children: props.menus?.map((item, index) => {
+      if (item?.hide) {
+        return null;
+      }
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          item,
+          open: props.open,
+          active: item.href === props.current,
+          onClick: props.onItemSelect
+        },
+        index
+      );
+    }) })
+  ] });
+};
+var SideBarHeader = (props) => {
+  const { title } = props;
+  const titleElemet = typeof title === "string" ? /* @__PURE__ */ jsx(Text, { intensity: 54, size: "xs", children: title }) : title;
+  const iconProps = {
+    className: "oui-text-base-contrast-36 hover:oui-text-base-contrast-80 oui-cursor-pointer",
+    onClick: props.onToggle
+  };
+  return /* @__PURE__ */ jsxs(
+    Flex,
     {
-      className: "oui-min-h-[50px] oui-w-[180px]",
-      gap: 2,
-      justify: "between",
+      justify: props.open ? "between" : "center",
       itemAlign: "center",
+      className: "oui-h-6",
+      children: [
+        props.open ? titleElemet : null,
+        props.open ? /* @__PURE__ */ jsx(CollapseIcon, { ...iconProps }) : /* @__PURE__ */ jsx(ExpandIcon, { ...iconProps })
+      ]
+    }
+  );
+};
+var SideBar = (props) => {
+  const { open: open2 = true, items, current, onItemSelect } = props;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-state": open2 ? "opened" : "closed",
+      className: cn("oui-group/bar", props.className),
+      style: props.style,
       children: [
-        /* @__PURE__ */ jsxs(Text, { className: "oui-w-full oui-break-all oui-text-2xs oui-text-base-contrast-36", children: [
-          /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast", children: info.leading }),
-          /* @__PURE__ */ jsx(Text, { children: info.middle }),
-          /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast", children: info.trailing })
-        ] }),
         /* @__PURE__ */ jsx(
-          CopyIcon,
+          SideBarHeader,
           {
-            onClick: copy,
-            className: "oui-cursor-pointer oui-text-base-contrast-36 hover:oui-text-base-contrast"
+            open: open2,
+            title: props.title,
+            onToggle: () => {
+              props.onOpenChange?.(!open2);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          SideMenus,
+          {
+            menus: items,
+            current,
+            onItemSelect,
+            open: open2
           }
         )
       ]
     }
   );
 };
-var AccountItem = (props) => {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
-    Flex,
+SideBar.displayName = "SideBar";
+var ExpandIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M6.326 8.826a.84.84 0 0 0-.6.234L2.16 12.627v-2.135H.492v4.167c0 .46.373.833.834.833h4.166v-1.667H3.357l3.567-3.567a.857.857 0 0 0 0-1.198.84.84 0 0 0-.598-.234M10.502.492V2.16h2.135L9.07 5.726a.857.857 0 0 0 0 1.199.86.86 0 0 0 1.197 0l3.568-3.568v2.135h1.667V1.326a.834.834 0 0 0-.834-.834z" })
+  }
+);
+var CollapseIcon = (props) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M14.668.492a.85.85 0 0 0-.599.234l-3.567 3.568V2.159H8.835v4.167c0 .46.373.833.833.833h4.167V5.492H11.7l3.569-3.567a.86.86 0 0 0 0-1.199.85.85 0 0 0-.6-.234m-12.5 8.334v1.666h2.135L.736 14.06a.86.86 0 0 0 0 1.198.86.86 0 0 0 1.198 0l3.568-3.567v2.134h1.666V9.66a.834.834 0 0 0-.833-.833z" })
+  }
+);
+var useSideNavBuilder = (props) => {
+  const [current, setCurrent] = useState(props?.items?.[0].href || "/");
+  const { expanded, setExpand } = useScaffoldContext();
+  return {
+    items: [],
+    current,
+    open: expanded,
+    onOpenChange: (open2) => {
+      setExpand?.(open2);
+    },
+    onItemSelect: (item) => {
+      if (item.href) {
+        setCurrent(item.href);
+      }
+    },
+    ...props
+  };
+};
+var SideNavbarWidget = (props) => {
+  const state = useSideNavBuilder(props);
+  return /* @__PURE__ */ jsx(SideBar, { ...state });
+};
+var DefaultTradingViewTncLink = ({
+  className
+}) => {
+  return /* @__PURE__ */ jsx(
+    "a",
     {
-      justify: "between",
-      itemAlign: "center",
-      width: "100%",
+      href: "https://www.tradingview.com/",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: className ?? "",
+      children: /* @__PURE__ */ jsx(Text, { intensity: 54, size: "2xs", children: "Charts powered by TradingView" })
+    }
+  );
+};
+var DesktopScaffold = (props) => {
+  const {
+    classNames,
+    footerHeight,
+    topNavbarRef,
+    mainNavProps,
+    topBar,
+    announcementRef,
+    // restrictedInfo,
+    hasLeftSidebar,
+    expand,
+    leftSideProps,
+    leftSidebar,
+    footer,
+    footerRef,
+    sideBarCollaspedWidth,
+    sideBarExpandWidth,
+    footerProps,
+    children
+  } = props;
+  const trailing = typeof footerProps?.trailing !== "undefined" ? footerProps?.trailing : /* @__PURE__ */ jsx(DefaultTradingViewTncLink, {});
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        height: `calc(100vh - ${footerHeight}px)`
+      },
       className: cn(
-        "oui-relative oui-cursor-pointer oui-rounded-[6px] oui-bg-base-6 oui-px-3 oui-py-4",
-        "oui-border oui-border-base-6",
-        props.isCurrent && " oui-border-[rgb(var(--oui-gradient-brand-start))] ",
-        !props.isCurrent && "hover:oui-border-base-contrast-16"
+        "oui-scaffold-root oui-font-semibold",
+        // default text and background color
+        "oui-bg-base-10 oui-text-base-contrast",
+        "oui-flex oui-flex-col",
+        "oui-custom-scrollbar oui-overflow-auto",
+        classNames?.root
       ),
       children: [
         /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: "oui-absolute oui-inset-0 oui-z-0 ",
-            onClick: () => {
-              if (props.isCurrent) {
-                return;
-              }
-              props.onSwitch?.(props.accountId);
-            }
-          }
-        ),
-        props.isCurrent && /* @__PURE__ */ jsx(
-          "div",
+          Box,
           {
+            ref: topNavbarRef,
             className: cn(
-              "oui-absolute -oui-right-[1px] -oui-top-[1px] oui-leading-3",
-              "oui-text-[10px] oui-font-semibold oui-text-base-10",
-              "oui-rounded-[6px] oui-rounded-br-none oui-rounded-tl-none oui-bg-[rgb(var(--oui-gradient-brand-start))] oui-py-0.5 oui-pl-1  oui-pr-[5px]"
+              "oui-scaffold-topNavbar oui-bg-base-9",
+              classNames?.topNavbar
             ),
-            children: t("subAccount.modal.current")
+            children: topBar ?? /* @__PURE__ */ jsx(MainNavWidget, { ...mainNavProps })
           }
         ),
         /* @__PURE__ */ jsxs(
-          Flex,
+          "div",
           {
-            direction: "column",
-            itemAlign: "start",
-            gap: 1,
-            className: "oui-z-[2]",
+            className: cn(
+              "oui-scaffold-container",
+              "oui-relative oui-h-full",
+              // 1024px - 6px (scrollbar widt) = 1018px
+              "oui-min-w-[1018px]",
+              classNames?.container
+            ),
             children: [
-              props.isMainAccount ? /* @__PURE__ */ jsx(Text, { className: "oui-text-xs oui-leading-3 oui-text-base-contrast", children: formatAddress(props.userAddress ?? "") }) : /* @__PURE__ */ jsxs(
-                Flex,
+              /* @__PURE__ */ jsx(Box, { px: 2, ref: announcementRef, children: /* @__PURE__ */ jsx(
+                RestrictedInfoWidget,
                 {
-                  justify: "start",
-                  itemAlign: "center",
-                  className: "oui-cursor-pointer oui-gap-[2px] oui-fill-base-contrast-54 hover:oui-fill-base-contrast",
-                  onClick: (event) => {
-                    props.onEdit?.({
-                      accountId: props.accountId,
-                      description: props.description ?? ""
-                    });
-                    event.stopPropagation();
-                    event.preventDefault();
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx(Text, { className: "oui-text-xs oui-leading-3 oui-text-base-contrast", children: props.description }),
-                    /* @__PURE__ */ jsx(EditIcon, { className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast" })
-                  ]
+                  className: cn(
+                    "oui-scaffold-restricted-info",
+                    "oui-relative oui-z-[1]",
+                    "oui-mt-2",
+                    "oui-bg-base-9",
+                    "oui-min-w-[994px]"
+                  )
                 }
-              ),
-              /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(AccountIdForCopy, { accountId: props.accountId }), children: /* @__PURE__ */ jsxs(Text, { className: "oui-text-2xs oui-leading-3 oui-text-base-contrast-36 hover:oui-text-base-contrast", children: [
-                "ID: ",
-                formatAddress(props.accountId)
-              ] }) })
+              ) }),
+              !hasLeftSidebar ? (
+                // ----------No leftSidebar layout start ---------
+                /* @__PURE__ */ jsx(Box, { height: "100%", className: cn(classNames?.content), children })
+              ) : (
+                // ----------No leftSidebar layout end ---------
+                // ---------- left & body layout start ---------
+                /* @__PURE__ */ jsxs(
+                  Grid,
+                  {
+                    className: cn(
+                      "oui-box-content oui-flex oui-transition-all xl:oui-grid",
+                      "oui-min-h-full oui-flex-1",
+                      classNames?.body
+                    ),
+                    style: {
+                      gridTemplateColumns: `${expand ? `${sideBarExpandWidth}px` : `${sideBarCollaspedWidth}px`} 1fr`
+                      // gridTemplateRows: "auto 1fr",
+                      // gridTemplateAreas: `"left main" "left main"`,
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx("div", { className: cn(classNames?.leftSidebar), children: isValidElement(leftSidebar) ? leftSidebar : /* @__PURE__ */ jsx(SideNavbarWidget, { ...leftSideProps }) }),
+                      /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          width: "100%",
+                          className: cn("oui-overflow-hidden", classNames?.content),
+                          children
+                        }
+                      )
+                    ]
+                  }
+                )
+              )
             ]
-          },
-          props.accountId
+          }
         ),
-        /* @__PURE__ */ jsxs(
-          Flex,
+        /* @__PURE__ */ jsx(
+          Box,
           {
-            className: "oui-text-xs oui-text-base-contrast",
-            itemAlign: "end",
-            gap: 1,
-            children: [
-              /* @__PURE__ */ jsx(Text.numeral, { rule: "price", dp: 2, children: props.accountValue ?? 0 }),
-              /* @__PURE__ */ jsx(Text, { children: "USDC" })
-            ]
+            ref: footerRef,
+            className: cn(
+              "oui-scaffold-footer oui-w-full oui-bg-base-10",
+              "oui-fixed oui-bottom-0 oui-z-50",
+              "oui-border-t oui-border-line-12",
+              classNames?.footer
+            ),
+            children: footer || /* @__PURE__ */ jsx(FooterWidget, { ...footerProps, trailing })
           }
-        )
+        ),
+        /* @__PURE__ */ jsx(NotificationWidget, {})
       ]
     }
-  ) });
-};
-var NickNameTextField = (props) => {
-  const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(
-    TextField,
-    {
-      placeholder: `Sub-account ${(props.subAccountCount ?? 0) + 1}`,
-      fullWidth: true,
-      label: t("subAccount.modal.nickName.label"),
-      value: props.nickName,
-      onChange: (e) => {
-        const _value = e.target.value.replace(/[^a-zA-Z0-9@,\s_-]/g, "");
-        props.setNickName(_value);
-      },
-      formatters: [
-        inputFormatter.createRegexInputFormatter(/[^a-zA-Z0-9@,\s_-]/g)
-      ],
-      classNames: {
-        label: "oui-text-base-contrast-54 oui-text-xs",
-        input: "placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"
-      },
-      maxLength: 20,
-      minLength: 1,
-      autoComplete: "off",
-      helpText: t("subAccount.modal.create.nickname.role"),
-      className: "oui-mb-4",
-      color: props.invalid ? "danger" : void 0
-    }
   );
 };
-var MAX_SUB_ACCOUNT_COUNT = 10;
-var CreateSubAccount = (props) => {
-  const { t } = useTranslation();
-  const { isMobile } = useScreen();
-  const [open2, setOpen] = useState(false);
-  const [nickName, setNickName] = useState(void 0);
-  const { state } = useAccount();
-  const [invalid, setInvalid] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const { widgetConfigs } = useAppContext();
-  const maxSubAccountCount = useMemo(() => {
-    return widgetConfigs?.subAccount?.maxSubAccountCount ?? MAX_SUB_ACCOUNT_COUNT;
-  }, [widgetConfigs]);
-  const subAccountCount = useMemo(() => {
-    return state.subAccounts?.length ?? 0;
-  }, [state]);
-  const trigger = useMemo(() => {
-    return subAccountCount >= maxSubAccountCount ? /* @__PURE__ */ jsx(
-      Tooltip,
-      {
-        className: "oui-max-w-[188px]",
-        content: t("subAccount.modal.create.max.description"),
-        children: /* @__PURE__ */ jsx(
-          AddIcon,
-          {
-            className: cn("oui-cursor-not-allowed oui-fill-base-contrast-20")
-          }
-        )
-      }
-    ) : /* @__PURE__ */ jsx(
-      AddIcon,
-      {
-        className: cn(
-          "oui-cursor-pointer oui-fill-base-contrast-54 hover:oui-fill-base-contrast"
-        ),
-        onClick: () => {
-          setOpen(true);
+var useAccountValue = (mainAccountId) => {
+  const [accountValue, setAccountValue] = useState({});
+  const {
+    data: newPositions = [],
+    isLoading: isPositionLoading,
+    mutate: mutatePositions
+  } = useSubAccountQuery("/v1/client/aggregate/positions", {
+    // formatter: (data) => data,
+    errorRetryCount: 3,
+    accountId: mainAccountId
+  });
+  useEffect(() => {
+    if (isPositionLoading) {
+      return;
+    }
+    if (!newPositions || newPositions.length === 0) {
+      setAccountValue({});
+      return;
+    }
+    const value = newPositions.reduce(
+      (acc, position) => {
+        const accountId = position.account_id;
+        if (acc[accountId]) {
+          acc[accountId] = new Decimal(acc[accountId]).plus(position.unsettled_pnl).toNumber();
+        } else {
+          acc[accountId] = new Decimal(position.unsettled_pnl).toNumber();
         }
-      }
+        return acc;
+      },
+      {}
     );
-  }, [subAccountCount, maxSubAccountCount]);
-  const header = /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      py: 3,
-      direction: "column",
-      justify: "between",
-      itemAlign: "start",
-      width: "100%",
-      children: [
-        /* @__PURE__ */ jsx(Text, { weight: "semibold", children: t("subAccount.modal.create.title") }),
-        /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-text-base-contrast-36", children: t("subAccount.modal.create.description", {
-          subAccountCount,
-          remainingCount: maxSubAccountCount - subAccountCount
-        }) })
-      ]
-    }
-  );
-  const reset = () => {
-    setNickName("");
-    setInvalid(false);
-    setLoading(false);
+    setAccountValue(value);
+  }, [newPositions, isPositionLoading]);
+  return {
+    accountValue
   };
-  const validateNickName = (nickName2) => {
-    if (!nickName2 || !(nickName2.length >= 1 && nickName2.length <= 20)) {
-      setInvalid(true);
-      return true;
+};
+
+// src/components/subAccount/subAccount.script.ts
+var SubAccountScript = () => {
+  const [open2, setOpen] = useState(false);
+  const [mainAccountHolding, setMainAccountHolding] = useState(
+    []
+  );
+  const { wallet, connectedChain } = useWalletConnector();
+  const { data: indexPrices } = useIndexPricesStream();
+  const { isMobile } = useScreen();
+  const { state, account, subAccount, switchAccount } = useAccount();
+  const { t } = useTranslation();
+  const mainAccountId = state.mainAccountId;
+  const { accountValue } = useAccountValue(mainAccountId);
+  const currentAccountId = state.accountId;
+  const hasRefreshedRef = useRef(false);
+  const userAddress = useMemo(() => {
+    let address = state.address;
+    if (connectedChain?.id && ABSTRACT_CHAIN_ID_MAP.has(parseInt(connectedChain?.id))) {
+      address = account.getAdditionalInfo()?.AGWAddress;
     }
-    setInvalid(false);
-    return false;
-  };
-  const doCreatSubAccount = (nickName2) => {
-    let _nickName = `Sub-account ${subAccountCount + 1}`;
-    if (nickName2) {
-      _nickName = nickName2.trim();
+    return address;
+  }, [wallet, state, account, connectedChain]);
+  const subAccounts = useMemo(() => {
+    if (!state.subAccounts || !state.subAccounts.length) {
+      return [];
     }
-    setLoading(true);
-    props.create(_nickName).then((res) => {
-      reset();
-      toast.success(t("subAccount.modal.create.success.description"));
-      setOpen(false);
-    }).catch((e) => {
-      toast.error(t("subAccount.modal.create.failed.description"));
-    }).finally(() => {
-      setLoading(false);
-    });
-  };
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    trigger,
-    /* @__PURE__ */ jsx(
-      SimpleDialog,
-      {
-        title: header,
-        open: open2,
-        onOpenChange: (open3) => {
-          reset();
-          setOpen(open3);
-        },
-        size: isMobile ? "sm" : "xl",
-        actions: {
-          primary: {
-            label: t("common.confirm"),
-            disabled: invalid || loading,
-            loading,
-            onClick: () => {
-              const invalid2 = validateNickName(nickName);
-              if (invalid2) {
-                return;
-              }
-              doCreatSubAccount(nickName);
-            }
-          }
-        },
-        classNames: {
-          content: "oui-w-[360px]"
-        },
+    const currentSubAccount = state.subAccounts.find(
+      (subAccount2) => subAccount2.id === currentAccountId
+    );
+    if (currentSubAccount) {
+      return [
+        currentSubAccount,
+        ...state.subAccounts.filter(
+          (subAccount2) => subAccount2.id !== currentAccountId
+        )
+      ];
+    }
+    return [...state.subAccounts];
+  }, [state.subAccounts, currentAccountId]);
+  const _popup = useMemo(
+    () => ({ mode: isMobile ? "sheet" : "modal" }),
+    [isMobile]
+  );
+  const doCreatSubAccount = useCallback(
+    (nickName) => {
+      return subAccount.create(nickName);
+    },
+    [subAccount]
+  );
+  const onSwitch = useCallback(
+    (accountId) => {
+      return switchAccount(accountId).catch((error) => {
+      }).then((res) => {
+        toast.success(t("subAccount.modal.switch.success.description"));
+      });
+    },
+    [switchAccount]
+  );
+  const accountsWithValues = useMemo(() => {
+    const mainAccountUnsettlePnl = accountValue[mainAccountId] ?? 0;
+    const mainAccount = mainAccountId && state.address ? {
+      id: mainAccountId,
+      userAddress: state.address,
+      holding: mainAccountHolding,
+      accountValue: calculateAccountValue(
+        mainAccountHolding,
+        mainAccountUnsettlePnl,
+        indexPrices || EMPTY_OBJECT
+      )
+    } : void 0;
+    const updatedSubAccounts = subAccounts.map((subAccount2) => {
+      const subAccountUnsettlePnl = accountValue[subAccount2.id] ?? 0;
+      return {
+        ...subAccount2,
+        accountValue: calculateAccountValue(
+          subAccount2.holding || EMPTY_LIST,
+          subAccountUnsettlePnl,
+          indexPrices || EMPTY_OBJECT
+        )
+      };
+    });
+    return {
+      mainAccount,
+      subAccounts: updatedSubAccounts
+    };
+  }, [
+    mainAccountId,
+    state.address,
+    mainAccountHolding,
+    subAccounts,
+    accountValue,
+    indexPrices
+  ]);
+  useEffect(() => {
+    if (!open2) {
+      hasRefreshedRef.current = false;
+      return;
+    }
+    if (!hasRefreshedRef.current && mainAccountId) {
+      hasRefreshedRef.current = true;
+      subAccount.refresh().then((res) => {
+        setMainAccountHolding(res[mainAccountId] || []);
+      });
+    }
+  }, [open2, mainAccountId, subAccount]);
+  return {
+    userAddress,
+    mainAccount: accountsWithValues.mainAccount,
+    currentAccountId,
+    open: open2,
+    onOpenChange: setOpen,
+    popup: _popup,
+    createSubAccount: doCreatSubAccount,
+    subAccounts: accountsWithValues.subAccounts,
+    onSwitch
+  };
+};
+var calculateAccountValue = (holdings, unsettlePnl, indexPrices) => {
+  const holding = holdings.reduce((acc, holding2) => {
+    const price = getTokenIndexPrice(holding2.token, indexPrices);
+    if (!price) {
+      return acc;
+    }
+    return new Decimal(holding2.holding).times(price).add(holding2.isolated_margin ?? 0).add(acc).toNumber();
+  }, 0);
+  return holding + unsettlePnl;
+};
+var getTokenIndexPrice = (token, indexPrices) => {
+  if (token === "USDC") {
+    return 1;
+  }
+  const symbol = `PERP_${token}_USDC`;
+  return indexPrices[symbol] ?? 0;
+};
+var SubAccountIcon = forwardRef(
+  (props, ref) => {
+    const { size = 20, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 20 20",
+        fill: "currentColor",
+        xmlns: "http://www.w3.org/2000/svg",
+        ref,
+        ...rest,
         children: /* @__PURE__ */ jsx(
-          NickNameTextField,
+          "path",
           {
-            nickName,
-            setNickName: (nickName2) => {
-              validateNickName(nickName2);
-              setNickName(nickName2);
-            },
-            subAccountCount,
-            invalid
+            d: "M10 2.5C8.16892 2.5 6.66667 4.00225 6.66667 5.83333C6.66667 7.66441 8.16892 9.16667 10 9.16667C11.8311 9.16667 13.3333 7.66441 13.3333 5.83333C13.3333 4.00225 11.8311 2.5 10 2.5ZM10 4.16667C10.9303 4.16667 11.6667 4.90299 11.6667 5.83333C11.6667 6.76368 10.9303 7.5 10 7.5C9.06965 7.5 8.33333 6.76368 8.33333 5.83333C8.33333 4.90299 9.06965 4.16667 10 4.16667ZM10 11.6667C8.54587 11.6667 6.82264 12.0082 5.37435 12.5798C4.65021 12.8656 3.99558 13.205 3.47168 13.641C2.94778 14.0769 2.5 14.6662 2.5 15.4167V17.5H17.5V16.6667V15.4167C17.5 14.6662 17.0522 14.0769 16.5283 13.641C16.0044 13.205 15.3498 12.8656 14.6257 12.5798C13.1774 12.0082 11.4541 11.6667 10 11.6667ZM10 13.3333C11.1784 13.3333 12.7884 13.645 14.0153 14.1292C14.6288 14.3713 15.1475 14.66 15.4622 14.9219C15.777 15.1838 15.8333 15.3622 15.8333 15.4167V15.8333H4.16667V15.4167C4.16667 15.3622 4.22299 15.1838 4.53776 14.9219C4.85253 14.66 5.37124 14.3713 5.9847 14.1292C7.21162 13.645 8.82163 13.3333 10 13.3333Z",
+            className: "oui-fill-base-contrast-98"
           }
         )
       }
-    )
-  ] });
-};
-var EditNickNameDialog = (props) => {
-  const { subAccount } = useAccount();
-  const [loading, setLoading] = useState(false);
-  const { t } = useTranslation();
-  const [newNickName, setNewNickName] = useState(void 0);
-  const [invalid, setInvalid] = useState(false);
-  const validateNickName = (nickName) => {
-    if (!nickName || !(nickName.length >= 1 && nickName.length <= 20)) {
-      setInvalid(true);
-      return true;
+    );
+  }
+);
+var SwapIcon = forwardRef((props, ref) => {
+  const { size = 20, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ jsx("path", { d: "M6 16L2 12L6 8L7.0625 9.0625L4.875 11.25H11V12.75H4.875L7.0625 14.9375L6 16ZM14 11L12.9375 9.9375L15.125 7.75H9V6.25H15.125L12.9375 4.0625L14 3L18 7L14 11Z" })
     }
-    setInvalid(false);
-  };
-  useEffect(() => {
-    setNewNickName(props.nickName);
-    setInvalid(false);
-    setLoading(false);
-  }, [props.nickName, props.open]);
+  );
+});
+var AddIcon = forwardRef((props, ref) => {
+  const { size = 20, ...rest } = props;
   return /* @__PURE__ */ jsx(
-    SimpleDialog,
+    "svg",
     {
-      title: /* @__PURE__ */ jsx(Text, { children: t("subAccount.modal.edit.title") }),
-      open: props.open,
-      onOpenChange: props.onOpenChange,
-      classNames: {
-        content: "oui-w-[360px]"
-      },
-      actions: {
-        primary: {
-          label: t("common.confirm"),
-          disabled: loading || invalid,
-          loading,
-          onClick: () => {
-            if (validateNickName(newNickName)) {
-              return;
-            }
-            setLoading(true);
-            subAccount?.update({
-              subAccountId: props.accountId,
-              description: newNickName
-            }).catch((e) => {
-              toast.error(t("subAccount.modal.edit.failed.description"));
-            }).then((res) => {
-              toast.success(t("subAccount.modal.edit.success.description"));
-              props.onOpenChange(false);
-            }).finally(() => {
-              setLoading(false);
-            });
-          }
-        },
-        secondary: {
-          label: t("common.cancel"),
-          onClick: () => props.onOpenChange(false)
-        }
-      },
-      children: /* @__PURE__ */ jsx(
-        NickNameTextField,
-        {
-          nickName: newNickName,
-          setNickName: (nickName) => {
-            validateNickName(nickName);
-            setNewNickName(nickName ?? "");
-          },
-          invalid
-        }
-      )
+      width: size,
+      height: size,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ jsx("path", { d: "M9.25 14H10.75V10.75H14V9.25H10.75V6H9.25V9.25H6V10.75H9.25V14ZM4.5 17C4.0875 17 3.73437 16.8531 3.44062 16.5594C3.14687 16.2656 3 15.9125 3 15.5V4.5C3 4.0875 3.14687 3.73438 3.44062 3.44063C3.73437 3.14688 4.0875 3 4.5 3H15.5C15.9125 3 16.2656 3.14688 16.5594 3.44063C16.8531 3.73438 17 4.0875 17 4.5V15.5C17 15.9125 16.8531 16.2656 16.5594 16.5594C16.2656 16.8531 15.9125 17 15.5 17H4.5ZM4.5 15.5H15.5V4.5H4.5V15.5Z" })
     }
   );
-};
-function SubAccountUI(props) {
-  const { t } = useTranslation();
-  const { isMobile } = useScreen();
-  const timer = useRef(null);
-  const onMouseEnter = useCallback(() => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-      timer.current = null;
+});
+var EditIcon = forwardRef((props, ref) => {
+  const { size = 12, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 12 12",
+      fill: "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      ref,
+      ...rest,
+      children: /* @__PURE__ */ jsx("path", { d: "M9.95551 2.00049C9.81619 2.00049 9.67686 2.05318 9.57074 2.15918L5.43256 6.29785L5.24945 7.25049L6.20209 7.06738L10.3403 2.9292C10.443 2.82645 10.4999 2.68968 10.4999 2.54443C10.4999 2.39918 10.443 2.26218 10.3403 2.15918C10.2341 2.05318 10.0948 2.00049 9.95551 2.00049ZM3.12494 2.25C2.37147 2.25 1.74994 2.87153 1.74994 3.625V9.375C1.74994 10.1285 2.37147 10.75 3.12494 10.75H8.87494C9.62841 10.75 10.2499 10.1285 10.2499 9.375V5.25C10.2509 5.18374 10.2386 5.11796 10.2139 5.05648C10.1892 4.99499 10.1525 4.93903 10.106 4.89185C10.0595 4.84466 10.0041 4.8072 9.94293 4.78162C9.8818 4.75605 9.8162 4.74288 9.74994 4.74288C9.68368 4.74288 9.61807 4.75605 9.55695 4.78162C9.49582 4.8072 9.44038 4.84466 9.39386 4.89185C9.34734 4.93903 9.31066 4.99499 9.28595 5.05648C9.26124 5.11796 9.249 5.18374 9.24994 5.25V9.375C9.24994 9.58803 9.08797 9.75 8.87494 9.75H3.12494C2.91191 9.75 2.74994 9.58803 2.74994 9.375V3.625C2.74994 3.41197 2.91191 3.25 3.12494 3.25H7.24994C7.3162 3.25094 7.38198 3.2387 7.44346 3.21399C7.50494 3.18928 7.5609 3.1526 7.60809 3.10608C7.65527 3.05956 7.69274 3.00412 7.71832 2.94299C7.74389 2.88186 7.75706 2.81626 7.75706 2.75C7.75706 2.68374 7.74389 2.61814 7.71832 2.55701C7.69274 2.49588 7.65527 2.44044 7.60809 2.39392C7.5609 2.3474 7.50494 2.31072 7.44346 2.28601C7.38198 2.2613 7.3162 2.24906 7.24994 2.25H3.12494Z" })
     }
-  }, []);
-  const header = /* @__PURE__ */ jsx(Text, { weight: "semibold", children: t("subAccount.modal.title") });
-  const trigger = useMemo(() => {
-    if (props.customTrigger && isMobile) {
-      return /* @__PURE__ */ jsx("div", { onClick: () => props.onOpenChange(true), children: props.customTrigger });
+  );
+});
+var AccountIdForCopy = (props) => {
+  const { t } = useTranslation();
+  const info = useMemo(() => {
+    return {
+      leading: props.accountId.slice(0, 6),
+      middle: props.accountId.slice(6, -4),
+      trailing: props.accountId.slice(-4)
+    };
+  }, [props.accountId]);
+  const copy = useCallback(() => {
+    navigator.clipboard.writeText(props.accountId);
+    toast.success(t("common.copy.copied"));
+  }, [props.accountId]);
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      className: "oui-min-h-[50px] oui-w-[180px]",
+      gap: 2,
+      justify: "between",
+      itemAlign: "center",
+      children: [
+        /* @__PURE__ */ jsxs(Text, { className: "oui-w-full oui-break-all oui-text-2xs oui-text-base-contrast-36", children: [
+          /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast", children: info.leading }),
+          /* @__PURE__ */ jsx(Text, { children: info.middle }),
+          /* @__PURE__ */ jsx(Text, { className: "oui-text-base-contrast", children: info.trailing })
+        ] }),
+        /* @__PURE__ */ jsx(
+          CopyIcon,
+          {
+            onClick: copy,
+            className: "oui-cursor-pointer oui-text-base-contrast-36 hover:oui-text-base-contrast"
+          }
+        )
+      ]
     }
-    if (isMobile) {
-      return /* @__PURE__ */ jsx(
-        Flex,
-        {
-          className: "oui-size-8 oui-rounded-md oui-bg-base-6",
-          itemAlign: "center",
-          justify: "center",
-          children: /* @__PURE__ */ jsx(
-            SubAccountIcon,
-            {
-              className: cn("oui-cursor-pointer"),
-              onClick: () => props.onOpenChange(true)
+  );
+};
+var AccountItem = (props) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      justify: "between",
+      itemAlign: "center",
+      width: "100%",
+      className: cn(
+        "oui-relative oui-cursor-pointer oui-rounded-[6px] oui-bg-base-6 oui-px-3 oui-py-4",
+        "oui-border oui-border-base-6",
+        props.isCurrent && " oui-border-[rgb(var(--oui-gradient-brand-start))] ",
+        !props.isCurrent && "hover:oui-border-base-contrast-16"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "oui-absolute oui-inset-0 oui-z-0 ",
+            onClick: () => {
+              if (props.isCurrent) {
+                return;
+              }
+              props.onSwitch?.(props.accountId);
             }
-          )
-        }
-      );
+          }
+        ),
+        props.isCurrent && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "oui-absolute -oui-right-[1px] -oui-top-[1px] oui-leading-3",
+              "oui-text-[10px] oui-font-semibold oui-text-base-10",
+              "oui-rounded-[6px] oui-rounded-br-none oui-rounded-tl-none oui-bg-[rgb(var(--oui-gradient-brand-start))] oui-py-0.5 oui-pl-1  oui-pr-[5px]"
+            ),
+            children: t("subAccount.modal.current")
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            direction: "column",
+            itemAlign: "start",
+            gap: 1,
+            className: "oui-z-[2]",
+            children: [
+              props.isMainAccount ? /* @__PURE__ */ jsx(Text, { className: "oui-text-xs oui-leading-3 oui-text-base-contrast", children: formatAddress(props.userAddress ?? "") }) : /* @__PURE__ */ jsxs(
+                Flex,
+                {
+                  justify: "start",
+                  itemAlign: "center",
+                  className: "oui-cursor-pointer oui-gap-[2px] oui-fill-base-contrast-54 hover:oui-fill-base-contrast",
+                  onClick: (event) => {
+                    props.onEdit?.({
+                      accountId: props.accountId,
+                      description: props.description ?? ""
+                    });
+                    event.stopPropagation();
+                    event.preventDefault();
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Text, { className: "oui-text-xs oui-leading-3 oui-text-base-contrast", children: props.description }),
+                    /* @__PURE__ */ jsx(EditIcon, { className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(AccountIdForCopy, { accountId: props.accountId }), children: /* @__PURE__ */ jsxs(Text, { className: "oui-text-2xs oui-leading-3 oui-text-base-contrast-36 hover:oui-text-base-contrast", children: [
+                "ID: ",
+                formatAddress(props.accountId)
+              ] }) })
+            ]
+          },
+          props.accountId
+        ),
+        /* @__PURE__ */ jsxs(
+          Flex,
+          {
+            className: "oui-text-xs oui-text-base-contrast",
+            itemAlign: "end",
+            gap: 1,
+            children: [
+              /* @__PURE__ */ jsx(Text.numeral, { rule: "price", dp: 2, children: props.accountValue ?? 0 }),
+              /* @__PURE__ */ jsx(Text, { children: "USDC" })
+            ]
+          }
+        )
+      ]
     }
-    return /* @__PURE__ */ jsx(SubAccountIcon, { className: cn("oui-cursor-pointer") });
-  }, [isMobile, props.customTrigger]);
-  const [editDialogOpen, setEditDialogOpen] = useState(false);
-  const [editAccountItem, setEditAccountItem] = useState(void 0);
-  const noSubAccount = /* @__PURE__ */ jsx(
+  ) });
+};
+var NickNameTextField = (props) => {
+  const { t } = useTranslation();
+  return /* @__PURE__ */ jsx(
+    TextField,
+    {
+      placeholder: `Sub-account ${(props.subAccountCount ?? 0) + 1}`,
+      fullWidth: true,
+      label: t("subAccount.modal.nickName.label"),
+      value: props.nickName,
+      onChange: (e) => {
+        const _value = e.target.value.replace(/[^a-zA-Z0-9@,\s_-]/g, "");
+        props.setNickName(_value);
+      },
+      formatters: [
+        inputFormatter.createRegexInputFormatter(/[^a-zA-Z0-9@,\s_-]/g)
+      ],
+      classNames: {
+        label: "oui-text-base-contrast-54 oui-text-xs",
+        input: "placeholder:oui-text-base-contrast-20 placeholder:oui-text-sm"
+      },
+      maxLength: 20,
+      minLength: 1,
+      autoComplete: "off",
+      helpText: t("subAccount.modal.create.nickname.role"),
+      className: "oui-mb-4",
+      color: props.invalid ? "danger" : void 0
+    }
+  );
+};
+var MAX_SUB_ACCOUNT_COUNT = 10;
+var CreateSubAccount = (props) => {
+  const { t } = useTranslation();
+  const { isMobile } = useScreen();
+  const [open2, setOpen] = useState(false);
+  const [nickName, setNickName] = useState(void 0);
+  const { state } = useAccount();
+  const [invalid, setInvalid] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const { widgetConfigs } = useAppContext();
+  const maxSubAccountCount = useMemo(() => {
+    return widgetConfigs?.subAccount?.maxSubAccountCount ?? MAX_SUB_ACCOUNT_COUNT;
+  }, [widgetConfigs]);
+  const subAccountCount = useMemo(() => {
+    return state.subAccounts?.length ?? 0;
+  }, [state]);
+  const trigger = useMemo(() => {
+    return subAccountCount >= maxSubAccountCount ? /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        className: "oui-max-w-[188px]",
+        content: t("subAccount.modal.create.max.description"),
+        children: /* @__PURE__ */ jsx(
+          AddIcon,
+          {
+            className: cn("oui-cursor-not-allowed oui-fill-base-contrast-20")
+          }
+        )
+      }
+    ) : /* @__PURE__ */ jsx(
+      AddIcon,
+      {
+        className: cn(
+          "oui-cursor-pointer oui-fill-base-contrast-54 hover:oui-fill-base-contrast"
+        ),
+        onClick: () => {
+          setOpen(true);
+        }
+      }
+    );
+  }, [subAccountCount, maxSubAccountCount]);
+  const header = /* @__PURE__ */ jsxs(
     Flex,
     {
+      py: 3,
       direction: "column",
+      justify: "between",
       itemAlign: "start",
-      justify: "center",
-      px: 5,
       width: "100%",
-      className: "oui-h-[120px]",
-      children: /* @__PURE__ */ jsx(Text, { className: "oui-text-center oui-text-xs oui-font-semibold oui-text-base-contrast-36", children: t("subAccount.modal.noAccount.description") })
+      children: [
+        /* @__PURE__ */ jsx(Text, { weight: "semibold", children: t("subAccount.modal.create.title") }),
+        /* @__PURE__ */ jsx(Text, { className: "oui-text-2xs oui-text-base-contrast-36", children: t("subAccount.modal.create.description", {
+          subAccountCount,
+          remainingCount: maxSubAccountCount - subAccountCount
+        }) })
+      ]
     }
   );
-  const renderSubAccount = () => {
-    if (!props.subAccounts?.length) {
-      return noSubAccount;
+  const reset = () => {
+    setNickName("");
+    setInvalid(false);
+    setLoading(false);
+  };
+  const validateNickName = (nickName2) => {
+    if (!nickName2 || !(nickName2.length >= 1 && nickName2.length <= 20)) {
+      setInvalid(true);
+      return true;
     }
-    return /* @__PURE__ */ jsx(ScrollArea, { className: "oui-custom-scrollbar oui-max-h-[200px] oui-w-full oui-overflow-y-auto", children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, itemAlign: "start", width: "100%", children: props.subAccounts.map((subAccount) => /* @__PURE__ */ jsx(
-      AccountItem,
-      {
-        accountId: subAccount.id,
-        description: subAccount.description,
-        isMainAccount: false,
-        isCurrent: subAccount.id === props.currentAccountId,
-        onSwitch: (accountId) => {
-          props.onSwitch?.(accountId);
-        },
-        accountValue: subAccount.accountValue ?? 0,
-        onEdit: () => {
+    setInvalid(false);
+    return false;
+  };
+  const doCreatSubAccount = (nickName2) => {
+    let _nickName = `Sub-account ${subAccountCount + 1}`;
+    if (nickName2) {
+      _nickName = nickName2.trim();
+    }
+    setLoading(true);
+    props.create(_nickName).then((res) => {
+      reset();
+      toast.success(t("subAccount.modal.create.success.description"));
+      setOpen(false);
+    }).catch((e) => {
+      toast.error(t("subAccount.modal.create.failed.description"));
+    }).finally(() => {
+      setLoading(false);
+    });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    trigger,
+    /* @__PURE__ */ jsx(
+      SimpleDialog,
+      {
+        title: header,
+        open: open2,
+        onOpenChange: (open3) => {
+          reset();
+          setOpen(open3);
+        },
+        size: isMobile ? "sm" : "xl",
+        actions: {
+          primary: {
+            label: t("common.confirm"),
+            disabled: invalid || loading,
+            loading,
+            onClick: () => {
+              const invalid2 = validateNickName(nickName);
+              if (invalid2) {
+                return;
+              }
+              doCreatSubAccount(nickName);
+            }
+          }
+        },
+        classNames: {
+          content: "oui-w-[360px]"
+        },
+        children: /* @__PURE__ */ jsx(
+          NickNameTextField,
+          {
+            nickName,
+            setNickName: (nickName2) => {
+              validateNickName(nickName2);
+              setNickName(nickName2);
+            },
+            subAccountCount,
+            invalid
+          }
+        )
+      }
+    )
+  ] });
+};
+var EditNickNameDialog = (props) => {
+  const { subAccount } = useAccount();
+  const [loading, setLoading] = useState(false);
+  const { t } = useTranslation();
+  const [newNickName, setNewNickName] = useState(void 0);
+  const [invalid, setInvalid] = useState(false);
+  const validateNickName = (nickName) => {
+    if (!nickName || !(nickName.length >= 1 && nickName.length <= 20)) {
+      setInvalid(true);
+      return true;
+    }
+    setInvalid(false);
+  };
+  useEffect(() => {
+    setNewNickName(props.nickName);
+    setInvalid(false);
+    setLoading(false);
+  }, [props.nickName, props.open]);
+  return /* @__PURE__ */ jsx(
+    SimpleDialog,
+    {
+      title: /* @__PURE__ */ jsx(Text, { children: t("subAccount.modal.edit.title") }),
+      open: props.open,
+      onOpenChange: props.onOpenChange,
+      classNames: {
+        content: "oui-w-[360px]"
+      },
+      actions: {
+        primary: {
+          label: t("common.confirm"),
+          disabled: loading || invalid,
+          loading,
+          onClick: () => {
+            if (validateNickName(newNickName)) {
+              return;
+            }
+            setLoading(true);
+            subAccount?.update({
+              subAccountId: props.accountId,
+              description: newNickName
+            }).catch((e) => {
+              toast.error(t("subAccount.modal.edit.failed.description"));
+            }).then((res) => {
+              toast.success(t("subAccount.modal.edit.success.description"));
+              props.onOpenChange(false);
+            }).finally(() => {
+              setLoading(false);
+            });
+          }
+        },
+        secondary: {
+          label: t("common.cancel"),
+          onClick: () => props.onOpenChange(false)
+        }
+      },
+      children: /* @__PURE__ */ jsx(
+        NickNameTextField,
+        {
+          nickName: newNickName,
+          setNickName: (nickName) => {
+            validateNickName(nickName);
+            setNewNickName(nickName ?? "");
+          },
+          invalid
+        }
+      )
+    }
+  );
+};
+function SubAccountUI(props) {
+  const { t } = useTranslation();
+  const { isMobile } = useScreen();
+  const timer = useRef(null);
+  const onMouseEnter = useCallback(() => {
+    if (timer.current) {
+      clearTimeout(timer.current);
+      timer.current = null;
+    }
+  }, []);
+  const header = /* @__PURE__ */ jsx(Text, { weight: "semibold", children: t("subAccount.modal.title") });
+  const trigger = useMemo(() => {
+    if (props.customTrigger && isMobile) {
+      return /* @__PURE__ */ jsx("div", { onClick: () => props.onOpenChange(true), children: props.customTrigger });
+    }
+    if (isMobile) {
+      return /* @__PURE__ */ jsx(
+        Flex,
+        {
+          className: "oui-size-8 oui-rounded-md oui-bg-base-6",
+          itemAlign: "center",
+          justify: "center",
+          children: /* @__PURE__ */ jsx(
+            SubAccountIcon,
+            {
+              className: cn("oui-cursor-pointer"),
+              onClick: () => props.onOpenChange(true)
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(SubAccountIcon, { className: cn("oui-cursor-pointer") });
+  }, [isMobile, props.customTrigger]);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [editAccountItem, setEditAccountItem] = useState(void 0);
+  const noSubAccount = /* @__PURE__ */ jsx(
+    Flex,
+    {
+      direction: "column",
+      itemAlign: "start",
+      justify: "center",
+      px: 5,
+      width: "100%",
+      className: "oui-h-[120px]",
+      children: /* @__PURE__ */ jsx(Text, { className: "oui-text-center oui-text-xs oui-font-semibold oui-text-base-contrast-36", children: t("subAccount.modal.noAccount.description") })
+    }
+  );
+  const renderSubAccount = () => {
+    if (!props.subAccounts?.length) {
+      return noSubAccount;
+    }
+    return /* @__PURE__ */ jsx(ScrollArea, { className: "oui-custom-scrollbar oui-max-h-[200px] oui-w-full oui-overflow-y-auto", children: /* @__PURE__ */ jsx(Flex, { direction: "column", gap: 2, itemAlign: "start", width: "100%", children: props.subAccounts.map((subAccount) => /* @__PURE__ */ jsx(
+      AccountItem,
+      {
+        accountId: subAccount.id,
+        description: subAccount.description,
+        isMainAccount: false,
+        isCurrent: subAccount.id === props.currentAccountId,
+        onSwitch: (accountId) => {
+          props.onSwitch?.(accountId);
+        },
+        accountValue: subAccount.accountValue ?? 0,
+        onEdit: () => {
           setEditAccountItem({
             accountId: subAccount.id,
             description: subAccount.description ?? ""
@@ -2466,14 +3047,7 @@ var LeftNavSheet = (props) => {
               }
             )
           ] }),
-          props.feedbackUrl && /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: "oui-text-center oui-text-2xs oui-font-semibold oui-text-primary oui-underline",
-              onClick: () => openExternalLink(props.feedbackUrl),
-              children: t("leftNav.feedback")
-            }
-          )
+          props.customFooter ?? /* @__PURE__ */ jsx(DefaultTradingViewTncLink, { className: "oui-text-center" })
         ] })
       ] })
     }
@@ -3528,732 +4102,113 @@ var MainNavMobile = (props) => {
         props.leading,
         languageSwitcher,
         scanQRCode,
-        chainMenu,
-        walletConnect,
-        props.trailing
-      ] })
-    ] });
-  };
-  return /* @__PURE__ */ jsx(
-    Flex,
-    {
-      width: "100%",
-      height: 44,
-      px: 3,
-      itemAlign: "center",
-      className: cn(props.className, props.classNames?.root),
-      children: renderContent()
-    }
-  );
-};
-var ScaffoldContext = createContext(
-  {}
-);
-var useScaffoldContext = () => {
-  return useContext(ScaffoldContext);
-};
-var NotificationUI = (props) => {
-  const { dataSource, showAnnouncement } = props;
-  const { routerAdapter } = useScaffoldContext();
-  const onItemClick = (url) => {
-    if (!url) return;
-    routerAdapter?.onRouteChange({
-      href: url,
-      name: url,
-      target: "_blank"
-    });
-  };
-  const notificationRef = useRef(null);
-  const len = useMemo(() => dataSource?.length ?? 0, [dataSource]);
-  const onClose = useCallback(() => {
-    if (len === 0) {
-      return;
-    }
-    windowGuard(() => {
-      if (notificationRef.current) {
-        const animationendHandler = () => {
-          props.onClose();
-          notificationRef.current.removeEventListener(
-            "transitionend",
-            animationendHandler
-          );
-        };
-        notificationRef.current.addEventListener(
-          "transitionend",
-          animationendHandler
-        );
-        requestAnimationFrame(() => {
-          notificationRef.current.style.transform = "translateY(120%)";
-        });
-      }
-    });
-  }, [props.onClose, len]);
-  useEffect(() => {
-    if (len === 0) {
-      return;
-    }
-    if (showAnnouncement) {
-      windowGuard(() => {
-        if (notificationRef.current) {
-          requestAnimationFrame(() => {
-            notificationRef.current.style.transform = "translateY(0)";
-          });
-        }
-      });
-    }
-  }, [showAnnouncement, len]);
-  if (len === 0) {
-    return null;
-  }
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref: notificationRef,
-      "data-state": showAnnouncement ? "open" : "closed",
-      className: cn(
-        "oui-fixed oui-bottom-[calc(env(safe-area-inset-bottom)+8px)] oui-left-2 oui-z-50 oui-w-[calc(100%_-_16px)] oui-translate-y-[120%] oui-rounded-lg oui-border oui-border-line-6 oui-bg-base-8 md:oui-bottom-10 md:oui-left-auto md:oui-right-3 md:oui-w-[420px]",
-        "oui-transition-all oui-duration-300 oui-ease-in-out",
-        showAnnouncement ? "oui-visible" : "oui-invisible"
-      ),
-      children: /* @__PURE__ */ jsx(
-        NotificationUI$1,
-        {
-          dataSource,
-          onClose,
-          onItemClick
-        }
-      )
-    }
-  );
-};
-var NotificationWidget = () => {
-  const { announcementState } = useScaffoldContext();
-  return /* @__PURE__ */ jsx(
-    NotificationUI,
-    {
-      dataSource: announcementState.tips,
-      onClose: announcementState.closeTips,
-      showAnnouncement: announcementState.showAnnouncement
-    }
-  );
-};
-var LazyRestrictedInfoWidget = React6.lazy(
-  () => Promise.resolve().then(() => (init_restrictedInfo(), restrictedInfo_exports)).then((mod) => {
-    return { default: mod.RestrictedInfoWidget };
-  })
-);
-var LazyBottomNav = React6.lazy(
-  () => Promise.resolve().then(() => (init_bottomNav(), bottomNav_exports)).then((mod) => {
-    return { default: mod.BottomNav };
-  })
-);
-var MobileScaffold = (props) => {
-  const {
-    classNames,
-    topNavbarRef,
-    bottomNavHeight,
-    topBar,
-    mainNavProps,
-    routerAdapter,
-    bottomNavRef,
-    bottomNavProps,
-    bottomNav,
-    children
-  } = props;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        paddingBottom: `calc(${bottomNavHeight}px + 12px + env(safe-area-inset-bottom))`
-      },
-      className: cn(
-        "oui-scaffold-root oui-w-full oui-bg-base-10 oui-pt-2",
-        classNames?.root
-      ),
-      children: [
-        /* @__PURE__ */ jsx(
-          "header",
-          {
-            ref: topNavbarRef,
-            className: cn(
-              "oui-scaffold-topNavbar",
-              "oui-sticky oui-top-0 oui-z-10 oui-w-full oui-bg-base-10",
-              classNames?.topNavbar
-            ),
-            children: topBar ?? /* @__PURE__ */ jsx(MainNavMobile, { ...mainNavProps, routerAdapter })
-          }
-        ),
-        /* @__PURE__ */ jsxs(
-          Box,
-          {
-            className: cn(
-              "oui-scaffold-container oui-overflow-hidden",
-              // "oui-relative",
-              // "oui-custom-scrollbar oui-overflow-y-auto",
-              classNames?.container
-            ),
-            children: [
-              /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyRestrictedInfoWidget, { className: "oui-mx-1 oui-mb-1 oui-bg-base-6" }) }),
-              /* @__PURE__ */ jsx(
-                Box,
-                {
-                  height: "100%",
-                  width: "100%",
-                  className: cn("oui-scaffold-content", classNames?.content),
-                  children
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "footer",
-          {
-            ref: bottomNavRef,
-            className: cn(
-              "oui-scaffold-bottomNav",
-              "oui-fixed oui-bottom-0 oui-z-10",
-              "oui-w-full oui-bg-base-9",
-              // only effective on real device
-              "oui-pb-[calc(env(safe-area-inset-bottom))]",
-              classNames?.bottomNav
-            ),
-            children: bottomNav ?? /* @__PURE__ */ jsx(React6.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
-              LazyBottomNav,
-              {
-                mainMenus: bottomNavProps?.mainMenus,
-                current: bottomNavProps?.current || mainNavProps?.initialMenu,
-                onRouteChange: routerAdapter?.onRouteChange
-              }
-            ) })
-          }
-        ),
-        /* @__PURE__ */ jsx(NotificationWidget, {})
-      ]
-    }
-  );
-};
-var useScaffoldScript = (options) => {
-  const { restrictedInfo, showAnnouncement } = useAppContext();
-  const [topNavbarRef, topNavbarHeight] = useRefAndHeight(48);
-  const [footerRef, footerHeight] = useRefAndHeight(29);
-  const [bottomNavRef, bottomNavHeight] = useRefAndHeight(64);
-  const [announcementRef, announcementHeight] = useRefAndHeight(0, [
-    showAnnouncement
-  ]);
-  const [expand, setExpand] = useLocalStorage(
-    "orderly_scaffold_expanded",
-    true
-  );
-  const { isMobile } = useScreen();
-  const sideBarExpandWidth = options.leftSideProps?.maxWidth || 185;
-  const sideBarCollaspedWidth = options.leftSideProps?.minWidth || 98;
-  const hasLeftSidebar = !!options.leftSidebar;
-  return {
-    topNavbarRef,
-    footerRef,
-    topNavbarHeight,
-    footerHeight,
-    announcementRef,
-    announcementHeight,
-    restrictedInfo,
-    expand,
-    setExpand,
-    isMobile,
-    sideBarExpandWidth,
-    sideBarCollaspedWidth,
-    hasLeftSidebar,
-    footerProps: options.footerProps,
-    routerAdapter: options.routerAdapter,
-    mainNavProps: options.mainNavProps,
-    bottomNavProps: options.bottomNavProps,
-    bottomNavRef,
-    bottomNavHeight
-  };
-};
-var useRefAndHeight = (defaultHeight, deps = []) => {
-  const ref = useRef(null);
-  const [height, setHeight] = useState(defaultHeight);
-  useObserverElement(ref.current, (entry) => {
-    setHeight(entry.contentRect.height);
-  });
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    const rect = ref.current?.getBoundingClientRect();
-    setHeight(rect.height);
-  }, [ref, ...deps]);
-  return [ref, height];
-};
-
-// src/components/footer/footer.ui.tsx
-init_icons();
-var Footer = (props) => {
-  const { t } = useTranslation();
-  const signalClsName = useMemo(() => {
-    switch (props.wsStatus) {
-      case WsNetworkStatus.Connected:
-        return "oui-fill-success-light oui-text-success-light";
-      case WsNetworkStatus.Disconnected:
-        return "oui-fill-danger-light oui-text-danger-light";
-      case WsNetworkStatus.Unstable:
-        return "oui-fill-warning-light oui-text-warning-light";
-    }
-  }, [props.wsStatus]);
-  const openUrl = (url) => {
-    window.open(url, "_blank");
-  };
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      direction: "row",
-      justify: "between",
-      height: 28,
-      px: 3,
-      width: "100%",
-      children: [
-        /* @__PURE__ */ jsxs(Flex, { children: [
-          /* @__PURE__ */ jsxs(
-            Flex,
-            {
-              direction: "row",
-              itemAlign: "center",
-              gap: 1,
-              className: signalClsName,
-              children: [
-                /* @__PURE__ */ jsx(
-                  SignalIcon,
-                  {
-                    fillOpacity: 1,
-                    fill: "currentColor"
-                  }
-                ),
-                /* @__PURE__ */ jsx(Text, { size: "2xs", children: t("scaffold.footer.operational") })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            Divider,
-            {
-              direction: "vertical",
-              className: "oui-h-[18px] oui-px-1 oui-ml-2 oui-border-line-12"
-            }
-          ),
-          /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
-            /* @__PURE__ */ jsx(Text, { intensity: 54, size: "2xs", children: t("scaffold.footer.joinCommunity") }),
-            /* @__PURE__ */ jsxs(Flex, { direction: "row", gap: 1, children: [
-              typeof props.telegramUrl !== "undefined" && /* @__PURE__ */ jsx(
-                CommuntiyTelegramIcon,
-                {
-                  className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast oui-cursor-pointer",
-                  fill: "currentColor",
-                  fillOpacity: 1,
-                  onClick: (e) => openUrl(props.telegramUrl)
-                }
-              ),
-              typeof props.discordUrl !== "undefined" && /* @__PURE__ */ jsx(
-                CommuntiyDiscordIcon,
-                {
-                  className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast oui-cursor-pointer",
-                  fill: "currentColor",
-                  fillOpacity: 1,
-                  onClick: (e) => openUrl(props.discordUrl)
-                }
-              ),
-              typeof props.twitterUrl !== "undefined" && /* @__PURE__ */ jsx(
-                CommuntiyXIcon,
-                {
-                  className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast oui-cursor-pointer",
-                  fill: "currentColor",
-                  fillOpacity: 1,
-                  onClick: (e) => openUrl(props.twitterUrl)
-                }
-              )
-            ] }),
-            typeof props?.trailing !== "undefined" && /* @__PURE__ */ jsxs(Fragment, { children: [
-              /* @__PURE__ */ jsx(
-                Divider,
-                {
-                  direction: "vertical",
-                  className: "oui-h-[18px] oui-border-line-12"
-                }
-              ),
-              props?.trailing
-            ] })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs(
-          Flex,
-          {
-            direction: "row",
-            gap: 1,
-            className: "oui-scaffold-footer-powered-by",
-            children: [
-              /* @__PURE__ */ jsx(Text, { intensity: 54, size: "2xs", children: t("scaffold.footer.poweredBy") }),
-              /* @__PURE__ */ jsx(OrderlyTextIcon, {})
-            ]
-          }
-        )
-      ]
-    }
-  );
-};
-var useFooterScript = () => {
-  const wsStatus = useWsStatus();
-  return {
-    wsStatus
-  };
-};
-var FooterWidget = (props) => {
-  const state = useFooterScript();
-  return /* @__PURE__ */ jsx(Footer, { ...state, ...props });
-};
-
-// src/components/scaffold/scaffold.ui.tsx
-init_restrictedInfo();
-var menuItemVariants = tv({
-  slots: {
-    button: [
-      "oui-min-h-10",
-      "oui-px-3",
-      "oui-py-2",
-      "oui-rounded-md",
-      "oui-w-full",
-      "oui-text-left",
-      "oui-text-base",
-      "oui-text-base-contrast-36",
-      // "oui-flex",
-      "oui-group",
-      // "oui-space-x-2",
-      // "oui-items-center",
-      "hover:oui-bg-base-8",
-      "oui-transition-colors",
-      "group-data-[state=closed]/bar:oui-w-[42px]",
-      "oui-overflow-hidden"
-    ],
-    icon: []
-  },
-  variants: {
-    mode: {
-      "icon-only": {
-        button: "oui-w-10",
-        icon: "w-6 h-6"
-      },
-      full: {
-        button: "oui-full",
-        icon: "w-6 h-6"
-      }
-    },
-    active: {
-      true: {
-        button: "oui-bg-base-5 hover:oui-bg-base-5"
-      }
-    },
-    open: {
-      true: {
-        button: ""
-      }
-    }
-  }
-});
-var MenuItem = React6.memo((props) => {
-  const { item, mode, open: open2, onClick, active, ...rest } = props;
-  const { button } = menuItemVariants({
-    mode,
-    active: props.active,
-    open: props.open
-  });
-  const children = /* @__PURE__ */ jsx(
-    "button",
-    {
-      "data-actived": props.active,
-      disabled: item.disabled,
-      className: button(),
-      onClick: () => {
-        props.onClick?.(item);
-      },
-      children: /* @__PURE__ */ jsxs(Flex, { itemAlign: "center", gap: 2, as: "span", children: [
-        /* @__PURE__ */ jsx("div", { children: item.icon }),
-        props.open && /* @__PURE__ */ jsx(
-          Text.gradient,
-          {
-            color: props.active ? "brand" : "inherit",
-            angle: 45,
-            size: "base",
-            className: "oui-break-all oui-animate-in oui-fade-in",
-            children: item.name
-          }
-        )
-      ] })
-    }
-  );
-  if (props.open) {
-    return /* @__PURE__ */ jsx("li", { className: "oui-min-w-[120px]", children });
-  }
-  return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(Tooltip, { content: item.name, side: "right", align: "center", sideOffset: 20, children }) });
-});
-MenuItem.displayName = "LeftMenuItem";
-var SideMenus = (props) => {
-  return /* @__PURE__ */ jsxs(Box, { py: 6, children: [
-    /* @__PURE__ */ jsx(
-      "svg",
-      {
-        width: "18",
-        height: "18",
-        viewBox: "0 0 18 18",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className: "oui-pointer-events-none oui-invisible oui-absolute",
-        children: /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs(
-          "linearGradient",
-          {
-            id: "side-menu-gradient",
-            x1: "15.7432",
-            y1: "8.94726",
-            x2: "2.24316",
-            y2: "8.94726",
-            gradientUnits: "userSpaceOnUse",
-            children: [
-              /* @__PURE__ */ jsx("stop", { stopColor: "rgb(var(--oui-gradient-brand-end))" }),
-              /* @__PURE__ */ jsx("stop", { stopColor: "rgb(var(--oui-gradient-brand-start))", offset: "1" })
-            ]
-          }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsx("ul", { className: "oui-space-y-4", children: props.menus?.map((item, index) => {
-      if (item?.hide) {
-        return null;
-      }
-      return /* @__PURE__ */ jsx(
-        MenuItem,
-        {
-          item,
-          open: props.open,
-          active: item.href === props.current,
-          onClick: props.onItemSelect
-        },
-        index
-      );
-    }) })
-  ] });
-};
-var SideBarHeader = (props) => {
-  const { title } = props;
-  const titleElemet = typeof title === "string" ? /* @__PURE__ */ jsx(Text, { intensity: 54, size: "xs", children: title }) : title;
-  const iconProps = {
-    className: "oui-text-base-contrast-36 hover:oui-text-base-contrast-80 oui-cursor-pointer",
-    onClick: props.onToggle
-  };
-  return /* @__PURE__ */ jsxs(
-    Flex,
-    {
-      justify: props.open ? "between" : "center",
-      itemAlign: "center",
-      className: "oui-h-6",
-      children: [
-        props.open ? titleElemet : null,
-        props.open ? /* @__PURE__ */ jsx(CollapseIcon, { ...iconProps }) : /* @__PURE__ */ jsx(ExpandIcon, { ...iconProps })
-      ]
-    }
-  );
-};
-var SideBar = (props) => {
-  const { open: open2 = true, items, current, onItemSelect } = props;
-  return /* @__PURE__ */ jsxs(
-    Box,
+        chainMenu,
+        walletConnect,
+        props.trailing
+      ] })
+    ] });
+  };
+  return /* @__PURE__ */ jsx(
+    Flex,
     {
-      "data-state": open2 ? "opened" : "closed",
-      className: cn("oui-group/bar", props.className),
-      style: props.style,
-      children: [
-        /* @__PURE__ */ jsx(
-          SideBarHeader,
-          {
-            open: open2,
-            title: props.title,
-            onToggle: () => {
-              props.onOpenChange?.(!open2);
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SideMenus,
-          {
-            menus: items,
-            current,
-            onItemSelect,
-            open: open2
-          }
-        )
-      ]
+      width: "100%",
+      height: 44,
+      px: 3,
+      itemAlign: "center",
+      className: cn(props.className, props.classNames?.root),
+      children: renderContent()
     }
   );
 };
-SideBar.displayName = "SideBar";
-var ExpandIcon = (props) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: /* @__PURE__ */ jsx("path", { d: "M6.326 8.826a.84.84 0 0 0-.6.234L2.16 12.627v-2.135H.492v4.167c0 .46.373.833.834.833h4.166v-1.667H3.357l3.567-3.567a.857.857 0 0 0 0-1.198.84.84 0 0 0-.598-.234M10.502.492V2.16h2.135L9.07 5.726a.857.857 0 0 0 0 1.199.86.86 0 0 0 1.197 0l3.568-3.568v2.135h1.667V1.326a.834.834 0 0 0-.834-.834z" })
-  }
+var LazyRestrictedInfoWidget = React7.lazy(
+  () => Promise.resolve().then(() => (init_restrictedInfo(), restrictedInfo_exports)).then((mod) => {
+    return { default: mod.RestrictedInfoWidget };
+  })
 );
-var CollapseIcon = (props) => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    width: "16",
-    height: "16",
-    viewBox: "0 0 16 16",
-    fill: "currentColor",
-    xmlns: "http://www.w3.org/2000/svg",
-    ...props,
-    children: /* @__PURE__ */ jsx("path", { d: "M14.668.492a.85.85 0 0 0-.599.234l-3.567 3.568V2.159H8.835v4.167c0 .46.373.833.833.833h4.167V5.492H11.7l3.569-3.567a.86.86 0 0 0 0-1.199.85.85 0 0 0-.6-.234m-12.5 8.334v1.666h2.135L.736 14.06a.86.86 0 0 0 0 1.198.86.86 0 0 0 1.198 0l3.568-3.567v2.134h1.666V9.66a.834.834 0 0 0-.833-.833z" })
-  }
+var LazyBottomNav = React7.lazy(
+  () => Promise.resolve().then(() => (init_bottomNav(), bottomNav_exports)).then((mod) => {
+    return { default: mod.BottomNav };
+  })
 );
-var useSideNavBuilder = (props) => {
-  const [current, setCurrent] = useState(props?.items?.[0].href || "/");
-  const { expanded, setExpand } = useScaffoldContext();
-  return {
-    items: [],
-    current,
-    open: expanded,
-    onOpenChange: (open2) => {
-      setExpand?.(open2);
-    },
-    onItemSelect: (item) => {
-      if (item.href) {
-        setCurrent(item.href);
-      }
-    },
-    ...props
-  };
-};
-var SideNavbarWidget = (props) => {
-  const state = useSideNavBuilder(props);
-  return /* @__PURE__ */ jsx(SideBar, { ...state });
-};
-var DesktopScaffold = (props) => {
+var MobileScaffold = (props) => {
   const {
     classNames,
-    footerHeight,
     topNavbarRef,
-    mainNavProps,
+    bottomNavHeight,
     topBar,
-    announcementRef,
-    // restrictedInfo,
-    hasLeftSidebar,
-    expand,
-    leftSideProps,
-    leftSidebar,
-    footer,
-    footerRef,
-    sideBarCollaspedWidth,
-    sideBarExpandWidth,
-    footerProps,
+    mainNavProps,
+    routerAdapter,
+    bottomNavRef,
+    bottomNavProps,
+    bottomNav,
     children
   } = props;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       style: {
-        height: `calc(100vh - ${footerHeight}px)`
+        paddingBottom: `calc(${bottomNavHeight}px + 12px + env(safe-area-inset-bottom))`
       },
       className: cn(
-        "oui-scaffold-root oui-font-semibold",
-        // default text and background color
-        "oui-bg-base-10 oui-text-base-contrast",
-        "oui-flex oui-flex-col",
-        "oui-custom-scrollbar oui-overflow-auto",
+        "oui-scaffold-root oui-w-full oui-bg-base-10 oui-pt-2",
         classNames?.root
       ),
       children: [
         /* @__PURE__ */ jsx(
-          Box,
+          "header",
           {
             ref: topNavbarRef,
             className: cn(
-              "oui-scaffold-topNavbar oui-bg-base-9",
+              "oui-scaffold-topNavbar",
+              "oui-sticky oui-top-0 oui-z-10 oui-w-full oui-bg-base-10",
               classNames?.topNavbar
             ),
-            children: topBar ?? /* @__PURE__ */ jsx(MainNavWidget, { ...mainNavProps })
+            children: topBar ?? /* @__PURE__ */ jsx(MainNavMobile, { ...mainNavProps, routerAdapter })
           }
         ),
         /* @__PURE__ */ jsxs(
-          "div",
+          Box,
           {
             className: cn(
-              "oui-scaffold-container",
-              "oui-relative oui-h-full",
-              // 1024px - 6px (scrollbar widt) = 1018px
-              "oui-min-w-[1018px]",
+              "oui-scaffold-container oui-overflow-hidden",
+              // "oui-relative",
+              // "oui-custom-scrollbar oui-overflow-y-auto",
               classNames?.container
             ),
             children: [
-              /* @__PURE__ */ jsx(Box, { px: 2, ref: announcementRef, children: /* @__PURE__ */ jsx(
-                RestrictedInfoWidget,
+              /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyRestrictedInfoWidget, { className: "oui-mx-1 oui-mb-1 oui-bg-base-6" }) }),
+              /* @__PURE__ */ jsx(
+                Box,
                 {
-                  className: cn(
-                    "oui-scaffold-restricted-info",
-                    "oui-relative oui-z-[1]",
-                    "oui-mt-2",
-                    "oui-bg-base-9",
-                    "oui-min-w-[994px]"
-                  )
+                  height: "100%",
+                  width: "100%",
+                  className: cn("oui-scaffold-content", classNames?.content),
+                  children
                 }
-              ) }),
-              !hasLeftSidebar ? (
-                // ----------No leftSidebar layout start ---------
-                /* @__PURE__ */ jsx(Box, { height: "100%", className: cn(classNames?.content), children })
-              ) : (
-                // ----------No leftSidebar layout end ---------
-                // ---------- left & body layout start ---------
-                /* @__PURE__ */ jsxs(
-                  Grid,
-                  {
-                    className: cn(
-                      "oui-box-content oui-flex oui-transition-all xl:oui-grid",
-                      "oui-min-h-full oui-flex-1",
-                      classNames?.body
-                    ),
-                    style: {
-                      gridTemplateColumns: `${expand ? `${sideBarExpandWidth}px` : `${sideBarCollaspedWidth}px`} 1fr`
-                      // gridTemplateRows: "auto 1fr",
-                      // gridTemplateAreas: `"left main" "left main"`,
-                    },
-                    children: [
-                      /* @__PURE__ */ jsx("div", { className: cn(classNames?.leftSidebar), children: isValidElement(leftSidebar) ? leftSidebar : /* @__PURE__ */ jsx(SideNavbarWidget, { ...leftSideProps }) }),
-                      /* @__PURE__ */ jsx(
-                        Box,
-                        {
-                          width: "100%",
-                          className: cn("oui-overflow-hidden", classNames?.content),
-                          children
-                        }
-                      )
-                    ]
-                  }
-                )
               )
             ]
           }
         ),
         /* @__PURE__ */ jsx(
-          Box,
+          "footer",
           {
-            ref: footerRef,
+            ref: bottomNavRef,
             className: cn(
-              "oui-scaffold-footer oui-w-full oui-bg-base-10",
-              "oui-fixed oui-bottom-0 oui-z-50",
-              "oui-border-t oui-border-line-12",
-              classNames?.footer
+              "oui-scaffold-bottomNav",
+              "oui-fixed oui-bottom-0 oui-z-10",
+              "oui-w-full oui-bg-base-9",
+              // only effective on real device
+              "oui-pb-[calc(env(safe-area-inset-bottom))]",
+              classNames?.bottomNav
             ),
-            children: footer || /* @__PURE__ */ jsx(FooterWidget, { ...footerProps })
+            children: bottomNav ?? /* @__PURE__ */ jsx(React7.Suspense, { fallback: null, children: /* @__PURE__ */ jsx(
+              LazyBottomNav,
+              {
+                mainMenus: bottomNavProps?.mainMenus,
+                current: bottomNavProps?.current || mainNavProps?.initialMenu,
+                onRouteChange: routerAdapter?.onRouteChange
+              }
+            ) })
           }
         ),
         /* @__PURE__ */ jsx(NotificationWidget, {})
@@ -4261,6 +4216,59 @@ var DesktopScaffold = (props) => {
     }
   );
 };
+var useScaffoldScript = (options) => {
+  const { restrictedInfo, showAnnouncement } = useAppContext();
+  const [topNavbarRef, topNavbarHeight] = useRefAndHeight(48);
+  const [footerRef, footerHeight] = useRefAndHeight(29);
+  const [bottomNavRef, bottomNavHeight] = useRefAndHeight(64);
+  const [announcementRef, announcementHeight] = useRefAndHeight(0, [
+    showAnnouncement
+  ]);
+  const [expand, setExpand] = useLocalStorage(
+    "orderly_scaffold_expanded",
+    true
+  );
+  const { isMobile } = useScreen();
+  const sideBarExpandWidth = options.leftSideProps?.maxWidth || 185;
+  const sideBarCollaspedWidth = options.leftSideProps?.minWidth || 98;
+  const hasLeftSidebar = !!options.leftSidebar;
+  return {
+    topNavbarRef,
+    footerRef,
+    topNavbarHeight,
+    footerHeight,
+    announcementRef,
+    announcementHeight,
+    restrictedInfo,
+    expand,
+    setExpand,
+    isMobile,
+    sideBarExpandWidth,
+    sideBarCollaspedWidth,
+    hasLeftSidebar,
+    footerProps: options.footerProps,
+    routerAdapter: options.routerAdapter,
+    mainNavProps: options.mainNavProps,
+    bottomNavProps: options.bottomNavProps,
+    bottomNavRef,
+    bottomNavHeight
+  };
+};
+var useRefAndHeight = (defaultHeight, deps = []) => {
+  const ref = useRef(null);
+  const [height, setHeight] = useState(defaultHeight);
+  useObserverElement(ref.current, (entry) => {
+    setHeight(entry.contentRect.height);
+  });
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    const rect = ref.current?.getBoundingClientRect();
+    setHeight(rect.height);
+  }, [ref, ...deps]);
+  return [ref, height];
+};
 
 // src/utils/chain.ts
 function checkChainSupport(chainId, chains) {
@@ -4859,7 +4867,7 @@ var IdentityButton = (props) => {
 var AccountSummary = (props) => {
   const { keys, ...rest } = props;
   let canToggleIndex = 0;
-  const sizeRef = React6.useRef(0);
+  const sizeRef = React7.useRef(0);
   useEffect(() => {
     const resizeObserver = new ResizeObserver((entries) => {
       if (Array.isArray(entries) && entries.length > 0) {