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

package/dist/index.mjs

@@ -1,7 +1,7 @@
 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 { 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, CopyIcon, Popover, Grid, TextField, inputFormatter, ExtensionSlot, EyeIcon, EyeCloseIcon, SimpleDialogFooter, TooltipProvider, TooltipRoot, TooltipTrigger, BellIcon, TooltipContent, PopoverTrigger, PopupUnionIcon, CloseRoundFillIcon, SpotIcon, PerpsIcon, SelectedChoicesFillIcon } from '@orderly.network/ui';
+import { useTranslation, i18n, useLanguageContext, Trans } from '@orderly.network/i18n';
 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';
@@ -1232,7 +1232,7 @@ var useLanguageSwitcherScript = (options) => {
   const [open2, setOpen] = useState(false);
   const [loading, setLoading] = useState(false);
   const [selectedLang, setSelectedLang] = useState(i18n.language);
-  const { languages, onLanguageBeforeChanged, onLanguageChanged, popup } = useLocaleContext();
+  const { languages, onLanguageBeforeChanged, onLanguageChanged, popup } = useLanguageContext();
   const { track, setIdentify } = useTrack();
   const { isMobile } = useScreen();
   const onOpenChange = useCallback(
@@ -2332,19 +2332,15 @@ var EditIcon = forwardRef((props, ref) => {
     }
   );
 });
+function splitAccountIdForDisplay(accountId) {
+  return {
+    leading: accountId.slice(0, 6),
+    middle: accountId.slice(6, -4),
+    trailing: accountId.slice(-4)
+  };
+}
 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]);
+  const info = splitAccountIdForDisplay(props.accountId);
   return /* @__PURE__ */ jsxs(
     Flex,
     {
@@ -2361,7 +2357,7 @@ var AccountIdForCopy = (props) => {
         /* @__PURE__ */ jsx(
           CopyIcon,
           {
-            onClick: copy,
+            onClick: props.onCopy,
             className: "oui-cursor-pointer oui-text-base-contrast-36 hover:oui-text-base-contrast"
           }
         )
@@ -2371,7 +2367,44 @@ var AccountIdForCopy = (props) => {
 };
 var AccountItem = (props) => {
   const { t } = useTranslation();
-  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+  const { isMobile } = useScreen();
+  const {
+    isMainAccount,
+    accountId,
+    description,
+    userAddress,
+    isCurrent,
+    onSwitch,
+    accountValue,
+    onEdit
+  } = props;
+  const copyAccountId = useCallback(
+    (event) => {
+      event.stopPropagation();
+      navigator.clipboard.writeText(accountId);
+      toast.success(t("common.copy.copied"));
+    },
+    [accountId, t]
+  );
+  const handleSwitch = useCallback(() => {
+    if (isCurrent) return;
+    onSwitch?.(accountId);
+  }, [isCurrent, onSwitch, accountId]);
+  const handleEdit = useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      onEdit?.({
+        accountId,
+        description: description ?? ""
+      });
+    },
+    [onEdit, accountId, description]
+  );
+  const stopPropagation = useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ jsxs(
     Flex,
     {
       justify: "between",
@@ -2380,69 +2413,76 @@ var AccountItem = (props) => {
       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"
+        isCurrent && "oui-border-[rgb(var(--oui-gradient-brand-start))]",
+        !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);
-            }
+            className: "oui-absolute oui-inset-0 oui-z-0",
+            onClick: handleSwitch
           }
         ),
-        props.isCurrent && /* @__PURE__ */ jsx(
+        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]"
+              "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: [
+        /* @__PURE__ */ jsxs(Flex, { direction: "column", itemAlign: "start", gap: 1, className: "oui-z-[2]", children: [
+          isMainAccount ? /* @__PURE__ */ jsx(Text, { className: "oui-text-xs oui-leading-3 oui-text-base-contrast", children: formatAddress(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: handleEdit,
+              children: [
+                /* @__PURE__ */ jsx(Text, { className: "oui-text-xs oui-leading-3 oui-text-base-contrast", children: description }),
+                /* @__PURE__ */ jsx(EditIcon, { className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast" })
+              ]
+            }
+          ),
+          isMobile ? /* @__PURE__ */ jsxs(
+            Flex,
+            {
+              justify: "start",
+              itemAlign: "center",
+              gap: 1,
+              className: "oui-w-full",
+              onClick: stopPropagation,
+              children: [
+                /* @__PURE__ */ jsxs(Text, { className: "oui-text-2xs oui-leading-3 oui-text-base-contrast-36", children: [
+                  "ID: ",
+                  formatAddress(accountId)
+                ] }),
+                /* @__PURE__ */ jsx(
+                  CopyIcon,
+                  {
+                    size: 12,
+                    onClick: copyAccountId,
+                    className: "oui-shrink-0 oui-cursor-pointer oui-text-base-contrast-36 hover:oui-text-base-contrast"
+                  }
+                )
+              ]
+            }
+          ) : /* @__PURE__ */ jsx(
+            Tooltip,
+            {
+              content: /* @__PURE__ */ jsx(AccountIdForCopy, { accountId, onCopy: copyAccountId }),
+              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
-        ),
+                formatAddress(accountId)
+              ] })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxs(
           Flex,
           {
@@ -2450,14 +2490,14 @@ var AccountItem = (props) => {
             itemAlign: "end",
             gap: 1,
             children: [
-              /* @__PURE__ */ jsx(Text.numeral, { rule: "price", dp: 2, children: props.accountValue ?? 0 }),
+              /* @__PURE__ */ jsx(Text.numeral, { rule: "price", dp: 2, children: accountValue ?? 0 }),
               /* @__PURE__ */ jsx(Text, { children: "USDC" })
             ]
           }
         )
       ]
     }
-  ) });
+  );
 };
 var NickNameTextField = (props) => {
   const { t } = useTranslation();
@@ -2741,7 +2781,7 @@ function SubAccountUI(props) {
     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(
+    return /* @__PURE__ */ jsx(ScrollArea, { className: "oui-custom-scrollbar oui-max-h-[205px] 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,