feat: Add broadcasting modal

gnoswap-labs · Dec 19, 2023 · da1ae4d · da1ae4d
1 parent e716e9c
commit da1ae4d
Show file tree

Hide file tree

Showing 12 changed files with 815 additions and 40 deletions.
diff --git a/packages/web/src/components/common/modal/Modal.styles.ts b/packages/web/src/components/common/modal/Modal.styles.ts
@@ -10,6 +10,8 @@ export interface ModalStyleProps {
   textColor?: ThemeColorKeyTypes;
   width?: CSSProperties["width"];
   height?: CSSProperties["height"];
+  zIndex?: Z_INDEX;
+  hidden?: boolean;
 }
 
 export const ModalWrapper = styled.div<ModalStyleProps>`
@@ -24,13 +26,14 @@ export const ModalWrapper = styled.div<ModalStyleProps>`
   }};
   ${mixins.positionCenter()};
   position: fixed;
-  z-index: ${Z_INDEX.modal};
+  z-index: ${({zIndex}) => zIndex || Z_INDEX.modal};
   background-color: ${({ theme }) => theme.color.background06};
   border: 1px solid ${({ theme }) => theme.color.border02};
   box-shadow: 10px 14px 60px rgba(0, 0, 0, 0.4);
   border-radius: 8px;
   max-height: 100vh;
   overflow: scroll;
+  display: ${({hidden}) => hidden === true ? "none" : "flex"} ;
 `;
 
 export const ModalHeader = styled.div<ModalStyleProps>`

diff --git a/packages/web/src/components/common/modal/Modal.tsx b/packages/web/src/components/common/modal/Modal.tsx
@@ -24,9 +24,9 @@ const Modal: React.FC<ModalProps> = ({
 }) => {
   const modalRef = useRef<HTMLDivElement | null>(null);
   const cloneChildren = () =>
-  React.Children.map(children, (child) =>
-    cloneElement(child as React.ReactElement, { modalRef })
-  );
+    React.Children.map(children, (child) =>
+      cloneElement(child as React.ReactElement, { modalRef })
+    );
   usePositionModal(modalRef);
   return (
     <>

diff --git a/packages/web/src/components/common/notice/NoticeToast.styles.ts b/packages/web/src/components/common/notice/NoticeToast.styles.ts
@@ -32,7 +32,7 @@ export const NoticeUIList = styled.div`
   .toast-item {
     animation: ${toastInRight} 500ms;
   }
-  z-index: ${Z_INDEX.modalOverlay};
+  z-index: ${Z_INDEX.modalTooltip};
   ${media.tablet} {
     top: 70px;
     right: 30px;
@@ -44,7 +44,6 @@ export const NoticeUIList = styled.div`
   }
 `;
 
-
 export const NoticeUIWrapper = styled.div`
   box-shadow: ${({ theme }) => theme.color.shadow};
   padding: 15px 23px;

diff --git a/packages/web/src/components/common/notice/NoticeToast.tsx b/packages/web/src/components/common/notice/NoticeToast.tsx
@@ -60,7 +60,7 @@ const PendingContent: FC<{ content?: INoticeContent }> = ({ content }: { content
       <LoadingSpinner className="loading-icon" />
       <div>
         <h5>{content.title ? content.title : "Broadcasting Transaction"}</h5>
-        <p>{content.description ? content.description : "Waiting for Transaction Confirmation"}</p>
+        <p>Waiting for Transaction Confirmation</p>
         <a href={content.scannerUrl} target="_blank">
           View transaction <IconNewTab />
         </a>