@kodiak-finance/orderly-ui-scaffold 2.8.20 → 2.8.21-alpha.0

package/dist/index.mjs

@@ -7,10 +7,10 @@ import { useAppContext, useAppConfig } from '@kodiak-finance/orderly-react-app';
 import { AccountStatusEnum, ABSTRACT_CHAIN_ID_MAP, EMPTY_LIST, TrackerEventName, EMPTY_OBJECT } from '@kodiak-finance/orderly-types';
 import { ChainSelectorSheetId, ChainSelectorDialogId, ChainSelectorWidget } from '@kodiak-finance/orderly-ui-chain-selector';
 import { WalletConnectorSheetId, WalletConnectorModalId } from '@kodiak-finance/orderly-ui-connector';
-import { Decimal, getTimestamp, windowGuard } from '@kodiak-finance/orderly-utils';
+import { Decimal, getTimestamp } from '@kodiak-finance/orderly-utils';
 import jsQR from 'jsqr';
 import { qrcode } from '@akamfoad/qr';
-import { useAnnouncement, NotificationUI as NotificationUI$1, AnnouncementCenterUI } from '@kodiak-finance/orderly-ui-notification';
+import { useAnnouncement, AnnouncementBannerUI, AnnouncementCenterUI } from '@kodiak-finance/orderly-ui-notification';
 import { format } from 'date-fns';
 import { UTCDateMini } from '@date-fns/utc';
 
@@ -3651,7 +3651,7 @@ var isExternalUrl = (href) => {
   }
 };
 var NotificationUI = (props) => {
-  const { dataSource, showAnnouncement } = props;
+  const { dataSource, showAnnouncement, className } = props;
   const { routerAdapter } = useScaffoldContext();
   const onItemClick = (url) => {
     if (!url)
@@ -3662,74 +3662,27 @@ var NotificationUI = (props) => {
       target: isExternalUrl(url) ? "_blank" : void 0
     });
   };
-  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",
+    AnnouncementBannerUI,
     {
-      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
-        }
-      )
+      dataSource,
+      showAnnouncement,
+      onClose: props.onClose,
+      onItemClick,
+      className: cn("oui-mx-auto", className)
     }
   );
 };
-var NotificationWidget = () => {
+var NotificationWidget = ({ className }) => {
   const { announcementState } = useScaffoldContext();
   return /* @__PURE__ */ jsx(
     NotificationUI,
     {
+      className,
       dataSource: announcementState.tips,
       onClose: announcementState.closeTips,
       showAnnouncement: announcementState.showAnnouncement
@@ -3770,6 +3723,7 @@ var MobileScaffold = (props) => {
         classNames?.root
       ),
       children: [
+        /* @__PURE__ */ jsx("div", { className: "oui-mx-1 oui-mb-1", children: /* @__PURE__ */ jsx(NotificationWidget, {}) }),
         /* @__PURE__ */ jsx(
           "header",
           {
@@ -3826,8 +3780,7 @@ var MobileScaffold = (props) => {
               }
             ) })
           }
-        ),
-        /* @__PURE__ */ jsx(NotificationWidget, {})
+        )
       ]
     }
   );
@@ -4294,18 +4247,20 @@ var DesktopScaffold = (props) => {
               classNames?.container
             ),
             children: [
-              /* @__PURE__ */ jsx(Box, { px: 2, ref: announcementRef, children: /* @__PURE__ */ jsx(
-                RestrictedInfoWidget,
-                {
-                  className: cn(
-                    "oui-scaffold-restricted-info",
-                    "oui-relative oui-z-[1]",
-                    "oui-mt-2",
-                    "oui-bg-base-9",
-                    "oui-min-w-[994px]"
-                  )
-                }
-              ) }),
+              /* @__PURE__ */ jsxs(Box, { px: 2, ref: announcementRef, className: "oui-space-y-2", children: [
+                /* @__PURE__ */ jsx(
+                  RestrictedInfoWidget,
+                  {
+                    className: cn(
+                      "oui-scaffold-restricted-info",
+                      "oui-relative oui-z-[1]",
+                      "oui-bg-base-9",
+                      "oui-min-w-[994px]"
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(NotificationWidget, { className: "oui-mx-auto" })
+              ] }),
               !hasLeftSidebar ? (
                 // ----------No leftSidebar layout start ---------
                 /* @__PURE__ */ jsx(Box, { height: "100%", className: cn(classNames?.content), children })