feat: allow to specify notification duration (#13)

Co-authored-by: Alexander Sakhaev <alsakhaev@gmail.com>
dapplets · Sep 9, 2024 · 7dd15ba · 7dd15ba
1 parent 7300baa
commit 7dd15ba
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 4 deletions.
diff --git a/libs/engine/src/app/contexts/modal-context/modal-context.tsx b/libs/engine/src/app/contexts/modal-context/modal-context.tsx
@@ -9,7 +9,8 @@ export type ModalProps = {
   subject: string
   body: string
   type: NotificationType
-  actions: {
+  duration?: number
+  actions?: {
     label: string
     type?: 'primary' | 'default'
     onClick?: () => void

diff --git a/libs/engine/src/app/contexts/modal-context/modal-provider.tsx b/libs/engine/src/app/contexts/modal-context/modal-provider.tsx
@@ -26,13 +26,16 @@ const ModalProvider: FC<Props> = ({ children, onModalApiReady }) => {
       }
 
       const modalId = counterRef.current++
+      const duration = modalProps.duration ?? 4.5
 
       api[modalProps.type]({
         key: modalId,
         message: modalProps.subject,
         description: modalProps.body,
         placement: 'bottomRight',
-        duration: null,
+        duration: duration,
+        showProgress: duration !== 0,
+        pauseOnHover: false,
         btn:
           modalProps.actions && modalProps.actions.length
             ? modalProps.actions.map((action, i) => (
@@ -57,7 +60,7 @@ const ModalProvider: FC<Props> = ({ children, onModalApiReady }) => {
 
   useEffect(() => {
     onModalApiReady({ notify })
-  }, [notify, onModalApiReady]);
+  }, [notify, onModalApiReady])
 
   const state: ModalContextState = {
     notify,

diff --git a/libs/engine/src/app/contexts/mutable-web-context/notifications.ts b/libs/engine/src/app/contexts/mutable-web-context/notifications.ts
@@ -12,6 +12,7 @@ export const mutationSwitched = ({
   subject: 'Mutation Switched',
   body: `The mutation has been switched from ${fromMutationId} to ${toMutationId}`,
   type: NotificationType.Info,
+  duration: 0,
   actions: [
     { label: 'Ok, got it', type: 'primary' },
     {
@@ -26,6 +27,7 @@ export const mutationDisabled = ({ onBack }: { onBack: () => void }): ModalProps
   subject: 'Mutation Disabled',
   body: `You disabled all mutations`,
   type: NotificationType.Warning,
+  duration: 0,
   actions: [
     { label: 'Ok, got it', type: 'primary' },
     {

diff --git a/libs/engine/src/custom-elements/dapplet-overlay.tsx b/libs/engine/src/custom-elements/dapplet-overlay.tsx
@@ -20,7 +20,7 @@ const ModalBackdrop = styled.div`
   outline: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
     'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  z-index: 2147483647;
+  z-index: 2030;
   visibility: visible;
 `