@orderly.network/ui-scaffold 2.8.3 → 2.8.4

package/dist/index.d.mts

@@ -48,6 +48,7 @@ type MainNavItem = {
     id?: string;
     testid?: string;
     name: string;
+    label?: string;
     href: string;
     target?: HTMLAttributeAnchorTarget;
     icon?: string | react__default.ReactElement;

package/dist/index.d.ts

@@ -48,6 +48,7 @@ type MainNavItem = {
     id?: string;
     testid?: string;
     name: string;
+    label?: string;
     href: string;
     target?: HTMLAttributeAnchorTarget;
     icon?: string | react__default.ReactElement;

package/dist/index.js

@@ -2452,8 +2452,8 @@ var LeftNavSheet = (props) => {
   const { state } = hooks.useAccount();
   const { t } = i18n.useTranslation();
   const { primaryMenus, secondaryMenus } = React6.useMemo(() => {
-    const primary = (props.menus || []).filter((m) => !m.isSecondary);
-    const secondary = (props.menus || []).filter((m) => m.isSecondary);
+    const primary = (props?.menus || []).filter((m) => !m.isSecondary);
+    const secondary = (props?.menus || []).filter((m) => m.isSecondary);
     return { primaryMenus: primary, secondaryMenus: secondary };
   }, [props.menus]);
   const showSubAccount = React6.useMemo(
@@ -4429,6 +4429,7 @@ var Scaffold = (props) => {
 };
 
 // src/components/main/mainNav.script.ts
+var NON_ROUTING_HREFS = ["/vaults"];
 var CampaignPositionEnum = /* @__PURE__ */ ((CampaignPositionEnum3) => {
   CampaignPositionEnum3["menuLeading"] = "menuLeading";
   CampaignPositionEnum3["menuTailing"] = "menuTailing";
@@ -4454,6 +4455,17 @@ var useMainNavScript = (props) => {
       setCurrent(item.map((item2) => item2.href));
     }
     const current2 = item[item.length - 1];
+    const isExternalLink = typeof current2.href === "string" && (current2.href.startsWith("http://") || current2.href.startsWith("https://"));
+    if (NON_ROUTING_HREFS.includes(current2.href)) {
+      return;
+    }
+    if (current2.target) {
+      window.open(current2.href, current2.target);
+      return;
+    } else if (isExternalLink) {
+      window.location.href = current2.href;
+      return;
+    }
     const args = {
       href: current2.href,
       name: current2.name,
@@ -4689,22 +4701,6 @@ var CurrentLeverage = (props) => {
     }
   );
 };
-var MaxLeverage = (props) => {
-  const { t } = i18n.useTranslation();
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    ui.Flex,
-    {
-      direction: "column",
-      gap: 0,
-      className: "oui-text-2xs",
-      itemAlign: "start",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { intensity: 54, className: "oui-whitespace-nowrap", children: t("leverage.maxLeverage") }) }),
-        /* @__PURE__ */ jsxRuntime.jsx(ui.Text, { color: "primary", as: "div", children: `${props.maxLeverage ?? "--"}x` })
-      ]
-    }
-  );
-};
 var UnrealPnL = (props) => {
   const { visible, onToggleVisibility, visibleAvailable = true } = props;
   const { t } = i18n.useTranslation();
@@ -4861,27 +4857,6 @@ var AccountInfoPopover = (props) => {
             }
           )
         ] }, key);
-      case "maxLeverage":
-        return /* @__PURE__ */ jsxRuntime.jsxs(DropdownMenu, { onSetTop: onSetToTop("maxLeverage"), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { className: "oui-text-base-contrast-54", gapX: 2, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              IdentityButton,
-              {
-                active: keys.includes("maxLeverage"),
-                onClick: () => props.onToggleItemByKey("maxLeverage")
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("span", { children: t("leverage.maxLeverage") })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            ui.Text,
-            {
-              className: "group-hover:-oui-translate-x-5 oui-transition-transform",
-              color: "primary",
-              children: `${props.maxLeverage ?? "-"}x`
-            }
-          )
-        ] }, key);
       default:
         return null;
     }
@@ -5029,10 +5004,6 @@ var AccountSummary = (props) => {
         canToggleIndex++;
         return /* @__PURE__ */ jsxRuntime.jsx(CurrentLeverage, { currentLeverage: props.currentLeverage });
       }
-      case "maxLeverage": {
-        canToggleIndex++;
-        return /* @__PURE__ */ jsxRuntime.jsx(MaxLeverage, { maxLeverage: props.maxLeverage });
-      }
       case "totalValue":
       default:
         return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5056,7 +5027,6 @@ var AccountSummary = (props) => {
           {
             totalValue: rest.totalValue,
             freeCollateral: props.freeCollateral,
-            maxLeverage: props.maxLeverage,
             currentLeverage: props.currentLeverage,
             unrealized_pnl_ROI: props.unrealized_pnl_ROI,
             unrealPnL: props.unrealPnL,
@@ -5159,7 +5129,7 @@ var AccountSummaryWidget = () => {
   );
 };
 var MessageCenter = (props) => {
-  const { maintenanceDialogInfo, messages, showAnnouncement } = props;
+  const { maintenanceDialogInfo, messages, showAnnouncement, closeTips } = props;
   const { routerAdapter } = useScaffoldContext();
   const { t } = i18n.useTranslation();
   const messageSize = React6.useMemo(() => messages.length, [messages]);
@@ -5192,7 +5162,12 @@ var MessageCenter = (props) => {
         ui.Popover,
         {
           open: popoverOpen,
-          onOpenChange: setPopoverOpen,
+          onOpenChange: (open2) => {
+            setPopoverOpen(open2);
+            if (open2) {
+              closeTips();
+            }
+          },
           arrow: true,
           content: /* @__PURE__ */ jsxRuntime.jsx(
             uiNotification.AnnouncementCenterUI,
@@ -5231,7 +5206,8 @@ var MessageCenterWidget = () => {
     {
       messages: announcementState.tips,
       maintenanceDialogInfo: announcementState.maintenanceDialogInfo,
-      showAnnouncement: announcementState.showAnnouncement
+      showAnnouncement: announcementState.showAnnouncement,
+      closeTips: announcementState.closeTips
     }
   );
 };
@@ -5325,6 +5301,7 @@ var NavItem2 = (props) => {
         "data-actived": isActive,
         className: ui.cn(
           "oui-group oui-relative oui-h-[32px] oui-rounded oui-px-3 oui-py-1 oui-text-sm oui-text-base-contrast-36 hover:oui-bg-base-7",
+          item.className,
           classNames?.navItem
         ),
         onClick: onClickHandler,
@@ -5337,7 +5314,7 @@ var NavItem2 = (props) => {
                 color: isActive ? "brand" : "inherit",
                 angle: 45,
                 className: "oui-whitespace-nowrap oui-break-normal",
-                children: item.name
+                children: item.label ?? item.name
               }
             ),
             hasSubMenu && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "oui-ml-1 group-data-[open=true]:oui-rotate-180", children: isActive ? /* @__PURE__ */ jsxRuntime.jsx(ActiveIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ui.ChevronDownIcon, { size: 12, color: "white" }) })
@@ -5449,7 +5426,7 @@ var SubMenus = (props) => {
           }
         },
         className: ui.cn(
-          customSubMenuRender ? "oui-w-auto oui-p-0 oui-border-0 oui-rounded-lg" : "oui-w-[260px] oui-space-y-[2px] oui-border oui-border-line-6 oui-p-1",
+          customSubMenuRender ? "oui-w-auto oui-p-0 oui-border-0 oui-rounded-lg" : "oui-w-[200px] oui-space-y-[2px] oui-border oui-border-line-6 oui-p-1",
           className
         ),
         children: customSubMenuRender ? customSubMenuRender() : items.map((item, index) => {
@@ -5509,24 +5486,21 @@ var SubMenu = (props) => {
 };
 var SubMenuTitle = (props) => {
   const { item, isActive } = props;
-  return /* @__PURE__ */ jsxRuntime.jsxs(ui.Flex, { itemAlign: "center", width: "100%", position: "relative", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-1", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.Text.gradient,
-        {
-          color: isActive ? "brand" : "inherit",
-          size: "xs",
-          as: "div",
-          intensity: 80,
-          weight: "semibold",
-          className: "oui-whitespace-nowrap oui-break-normal",
-          children: item.name
-        }
-      ),
-      typeof item.tag !== "undefined" && /* @__PURE__ */ jsxRuntime.jsx(Tag, { item })
-    ] }),
-    item.target === "_blank" && /* @__PURE__ */ jsxRuntime.jsx(OutlinkIcon, {})
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { itemAlign: "center", width: "100%", position: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "oui-flex oui-flex-1", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ui.Text.gradient,
+      {
+        color: isActive ? "brand" : "inherit",
+        size: "xs",
+        as: "div",
+        intensity: 80,
+        weight: "semibold",
+        className: "oui-whitespace-nowrap oui-break-normal",
+        children: item.name
+      }
+    ),
+    typeof item.tag !== "undefined" && /* @__PURE__ */ jsxRuntime.jsx(Tag, { item })
+  ] }) });
 };
 var Tag = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5583,64 +5557,6 @@ var ItemIcon = (props) => {
     )
   ] });
 };
-var OutlinkIcon = () => {
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 20 20",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className: "oui-absolute oui-right-0 oui-top-0 group-hover:oui-invisible",
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "path",
-          {
-            d: "M14.159 17.492a3.333 3.333 0 0 0 3.333-3.333V5.826a3.333 3.333 0 0 0-3.333-3.334H5.826a3.333 3.333 0 0 0-3.334 3.334v8.333a3.333 3.333 0 0 0 3.334 3.333zm-6.667-4.166a.85.85 0 0 1-.599-.235.86.86 0 0 1 0-1.198l3.333-3.333-1.9-1.901h5v5l-1.901-1.9L8.09 13.09a.84.84 0 0 1-.599.235",
-            fill: "#fff",
-            fillOpacity: ".2"
-          }
-        )
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(
-      "svg",
-      {
-        width: "20",
-        height: "20",
-        viewBox: "0 0 20 20",
-        fill: "none",
-        xmlns: "http://www.w3.org/2000/svg",
-        className: "oui-invisible oui-absolute oui-right-0 oui-top-0 group-hover:oui-visible",
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: "M14.159 17.492a3.333 3.333 0 0 0 3.333-3.333V5.826a3.333 3.333 0 0 0-3.333-3.334H5.826a3.333 3.333 0 0 0-3.334 3.334v8.333a3.333 3.333 0 0 0 3.334 3.333zm-6.667-4.166a.85.85 0 0 1-.599-.235.86.86 0 0 1 0-1.198l3.333-3.333-1.9-1.901h5v5l-1.901-1.9L8.09 13.09a.84.84 0 0 1-.599.235",
-              fill: "url(#outlineIcon)"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "linearGradient",
-            {
-              id: "outlineIcon",
-              x1: "17.492",
-              y1: "9.992",
-              x2: "2.492",
-              y2: "9.992",
-              gradientUnits: "userSpaceOnUse",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx("stop", { stopColor: "rgb(var(--oui-gradient-brand-end))" }),
-                /* @__PURE__ */ jsxRuntime.jsx("stop", { offset: "1", stopColor: "rgb(var(--oui-gradient-brand-start))" })
-              ]
-            }
-          ) })
-        ]
-      }
-    )
-  ] });
-};
 var CampaignButton = (props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
     NavItem2,
@@ -5663,7 +5579,8 @@ var MainNavMenus = (props) => {
     {
       item,
       currentPath: props.current,
-      onClick: props.onItemClick
+      onClick: props.onItemClick,
+      classNames
     },
     index
   )) });
@@ -5775,7 +5692,7 @@ var MainNav = (props) => {
       px: 3,
       gapX: 3,
       className: ui.cn(
-        "oui-main-nav oui-font-semibold",
+        "oui-main-nav oui-font-semibold oui-border-0 lg:oui-border-b-white/[0.12] lg:oui-border-b",
         className,
         classNames?.root
       ),