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

package/dist/index.d.mts

@@ -5,7 +5,7 @@ import * as _orderly_network_types from '@orderly.network/types';
 import { RouterAdapter, NetworkId, API } from '@orderly.network/types';
 import { WsNetworkStatus } from '@orderly.network/hooks';
 import * as _orderly_network_i18n from '@orderly.network/i18n';
-import { LocaleContextState } from '@orderly.network/i18n';
+import { LanguageContextState } from '@orderly.network/i18n';
 import { useAnnouncement } from '@orderly.network/ui-notification';
 
 declare const AccountMenuWidget: () => react_jsx_runtime.JSX.Element;
@@ -443,7 +443,7 @@ type MainLogoProps = {
 declare const MainLogo: FC<MainLogoProps>;
 
 type LanguageSwitcherScriptReturn = ReturnType<typeof useLanguageSwitcherScript>;
-type LanguageSwitcherScriptOptions = Pick<LocaleContextState, "popup"> & {
+type LanguageSwitcherScriptOptions = Pick<LanguageContextState, "popup"> & {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ import * as _orderly_network_types from '@orderly.network/types';
 import { RouterAdapter, NetworkId, API } from '@orderly.network/types';
 import { WsNetworkStatus } from '@orderly.network/hooks';
 import * as _orderly_network_i18n from '@orderly.network/i18n';
-import { LocaleContextState } from '@orderly.network/i18n';
+import { LanguageContextState } from '@orderly.network/i18n';
 import { useAnnouncement } from '@orderly.network/ui-notification';
 
 declare const AccountMenuWidget: () => react_jsx_runtime.JSX.Element;
@@ -443,7 +443,7 @@ type MainLogoProps = {
 declare const MainLogo: FC<MainLogoProps>;
 
 type LanguageSwitcherScriptReturn = ReturnType<typeof useLanguageSwitcherScript>;
-type LanguageSwitcherScriptOptions = Pick<LocaleContextState, "popup"> & {
+type LanguageSwitcherScriptOptions = Pick<LanguageContextState, "popup"> & {
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
 };

package/dist/index.js

@@ -1239,7 +1239,7 @@ var useLanguageSwitcherScript = (options) => {
   const [open2, setOpen] = React7.useState(false);
   const [loading, setLoading] = React7.useState(false);
   const [selectedLang, setSelectedLang] = React7.useState(i18n.i18n.language);
-  const { languages, onLanguageBeforeChanged, onLanguageChanged, popup } = i18n.useLocaleContext();
+  const { languages, onLanguageBeforeChanged, onLanguageChanged, popup } = i18n.useLanguageContext();
   const { track, setIdentify } = hooks.useTrack();
   const { isMobile } = ui.useScreen();
   const onOpenChange = React7.useCallback(
@@ -2339,19 +2339,15 @@ var EditIcon = React7.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 } = i18n.useTranslation();
-  const info = React7.useMemo(() => {
-    return {
-      leading: props.accountId.slice(0, 6),
-      middle: props.accountId.slice(6, -4),
-      trailing: props.accountId.slice(-4)
-    };
-  }, [props.accountId]);
-  const copy = React7.useCallback(() => {
-    navigator.clipboard.writeText(props.accountId);
-    ui.toast.success(t("common.copy.copied"));
-  }, [props.accountId]);
+  const info = splitAccountIdForDisplay(props.accountId);
   return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
@@ -2368,7 +2364,7 @@ var AccountIdForCopy = (props) => {
         /* @__PURE__ */ jsxRuntime.jsx(
           ui.CopyIcon,
           {
-            onClick: copy,
+            onClick: props.onCopy,
             className: "oui-cursor-pointer oui-text-base-contrast-36 hover:oui-text-base-contrast"
           }
         )
@@ -2378,7 +2374,44 @@ var AccountIdForCopy = (props) => {
 };
 var AccountItem = (props) => {
   const { t } = i18n.useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const { isMobile } = ui.useScreen();
+  const {
+    isMainAccount,
+    accountId,
+    description,
+    userAddress,
+    isCurrent,
+    onSwitch,
+    accountValue,
+    onEdit
+  } = props;
+  const copyAccountId = React7.useCallback(
+    (event) => {
+      event.stopPropagation();
+      navigator.clipboard.writeText(accountId);
+      ui.toast.success(t("common.copy.copied"));
+    },
+    [accountId, t]
+  );
+  const handleSwitch = React7.useCallback(() => {
+    if (isCurrent) return;
+    onSwitch?.(accountId);
+  }, [isCurrent, onSwitch, accountId]);
+  const handleEdit = React7.useCallback(
+    (event) => {
+      event.stopPropagation();
+      event.preventDefault();
+      onEdit?.({
+        accountId,
+        description: description ?? ""
+      });
+    },
+    [onEdit, accountId, description]
+  );
+  const stopPropagation = React7.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     ui.Flex,
     {
       justify: "between",
@@ -2387,69 +2420,76 @@ var AccountItem = (props) => {
       className: ui.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+        isCurrent && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
             className: ui.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__ */ jsxRuntime.jsxs(
-          ui.Flex,
-          {
-            direction: "column",
-            itemAlign: "start",
-            gap: 1,
-            className: "oui-z-[2]",
-            children: [
-              props.isMainAccount ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-xs oui-leading-3 oui-text-base-contrast", children: ui.formatAddress(props.userAddress ?? "") }) : /* @__PURE__ */ jsxRuntime.jsxs(
-                ui.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__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-xs oui-leading-3 oui-text-base-contrast", children: props.description }),
-                    /* @__PURE__ */ jsxRuntime.jsx(EditIcon, { className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast" })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(AccountIdForCopy, { accountId: props.accountId }), children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-text-2xs oui-leading-3 oui-text-base-contrast-36 hover:oui-text-base-contrast", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { direction: "column", itemAlign: "start", gap: 1, className: "oui-z-[2]", children: [
+          isMainAccount ? /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-xs oui-leading-3 oui-text-base-contrast", children: ui.formatAddress(userAddress ?? "") }) : /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.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__ */ jsxRuntime.jsx(ui.Text, { className: "oui-text-xs oui-leading-3 oui-text-base-contrast", children: description }),
+                /* @__PURE__ */ jsxRuntime.jsx(EditIcon, { className: "oui-fill-base-contrast-54 hover:oui-fill-base-contrast" })
+              ]
+            }
+          ),
+          isMobile ? /* @__PURE__ */ jsxRuntime.jsxs(
+            ui.Flex,
+            {
+              justify: "start",
+              itemAlign: "center",
+              gap: 1,
+              className: "oui-w-full",
+              onClick: stopPropagation,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-text-2xs oui-leading-3 oui-text-base-contrast-36", children: [
+                  "ID: ",
+                  ui.formatAddress(accountId)
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  ui.CopyIcon,
+                  {
+                    size: 12,
+                    onClick: copyAccountId,
+                    className: "oui-shrink-0 oui-cursor-pointer oui-text-base-contrast-36 hover:oui-text-base-contrast"
+                  }
+                )
+              ]
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            ui.Tooltip,
+            {
+              content: /* @__PURE__ */ jsxRuntime.jsx(AccountIdForCopy, { accountId, onCopy: copyAccountId }),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(ui.Text, { className: "oui-text-2xs oui-leading-3 oui-text-base-contrast-36 hover:oui-text-base-contrast", children: [
                 "ID: ",
-                ui.formatAddress(props.accountId)
-              ] }) })
-            ]
-          },
-          props.accountId
-        ),
+                ui.formatAddress(accountId)
+              ] })
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsxs(
           ui.Flex,
           {
@@ -2457,14 +2497,14 @@ var AccountItem = (props) => {
             itemAlign: "end",
             gap: 1,
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "price", dp: 2, children: props.accountValue ?? 0 }),
+              /* @__PURE__ */ jsxRuntime.jsx(ui.Text.numeral, { rule: "price", dp: 2, children: accountValue ?? 0 }),
               /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { children: "USDC" })
             ]
           }
         )
       ]
     }
-  ) });
+  );
 };
 var NickNameTextField = (props) => {
   const { t } = i18n.useTranslation();
@@ -2748,7 +2788,7 @@ function SubAccountUI(props) {
     if (!props.subAccounts?.length) {
       return noSubAccount;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(ui.ScrollArea, { className: "oui-custom-scrollbar oui-max-h-[200px] oui-w-full oui-overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", gap: 2, itemAlign: "start", width: "100%", children: props.subAccounts.map((subAccount) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(ui.ScrollArea, { className: "oui-custom-scrollbar oui-max-h-[205px] oui-w-full oui-overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { direction: "column", gap: 2, itemAlign: "start", width: "100%", children: props.subAccounts.map((subAccount) => /* @__PURE__ */ jsxRuntime.jsx(
       AccountItem,
       {
         accountId: subAccount.id,