From 45a464a7c9a1e6e0d4e32fa0540c16d6a05c67ce Mon Sep 17 00:00:00 2001
From: Felicio Mununga <felicio@users.noreply.github.com>
Date: Mon, 6 Nov 2023 21:34:49 +0100
Subject: [PATCH] use NotificationsList for waku state

---
 packages/DApp/src/assets/images/refresh.svg   |  6 ++++
 packages/DApp/src/components/Modal.tsx        | 11 +++++++
 .../DApp/src/components/NotificationItem.tsx  | 33 +++++++++++++++++--
 .../DApp/src/components/NotificationsList.tsx |  9 ++++-
 4 files changed, 56 insertions(+), 3 deletions(-)
 create mode 100644 packages/DApp/src/assets/images/refresh.svg

diff --git a/packages/DApp/src/assets/images/refresh.svg b/packages/DApp/src/assets/images/refresh.svg
new file mode 100644
index 0000000..60ec3da
--- /dev/null
+++ b/packages/DApp/src/assets/images/refresh.svg
@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12 6.25C16.2802 6.25 19.75 9.71979 19.75 14C19.75 18.2802 16.2802 21.75 12 21.75C7.71979 21.75 4.25 18.2802 4.25 14C4.25 13.5858 4.58579 13.25 5 13.25C5.41421 13.25 5.75 13.5858 5.75 14C5.75 17.4518 8.54822 20.25 12 20.25C15.4518 20.25 18.25 17.4518 18.25 14C18.25 10.5482 15.4518 7.75 12 7.75H11.0178C10.5723 7.75 10.3492 8.28857 10.6642 8.60355L12.5303 10.4697C12.8232 10.7626 12.8232 11.2374 12.5303 11.5303C12.2374 11.8232 11.7626 11.8232 11.4697 11.5303L7.46967 7.53033C7.17678 7.23744 7.17678 6.76256 7.46967 6.46967L11.4697 2.46967C11.7626 2.17678 12.2374 2.17678 12.5303 2.46967C12.8232 2.76256 12.8232 3.23744 12.5303 3.53033L10.6642 5.39645C10.3492 5.71143 10.5723 6.25 11.0178 6.25H12Z"
+    fill="#8C21BA"
+  />
+</svg>
diff --git a/packages/DApp/src/components/Modal.tsx b/packages/DApp/src/components/Modal.tsx
index c3b7145..192950f 100644
--- a/packages/DApp/src/components/Modal.tsx
+++ b/packages/DApp/src/components/Modal.tsx
@@ -2,6 +2,7 @@ import React, { ReactNode, useEffect } from 'react'
 import styled from 'styled-components'
 import { Colors } from '../constants/styles'
 import closeIcon from '../assets/images/close.svg'
+import refreshIcon from '../assets/images/refresh.svg'
 
 type ModalProps = {
   heading?: string
@@ -92,3 +93,13 @@ export const CloseButton = styled.button`
   height: 24px;
   background-image: url(${closeIcon});
 `
+
+export const RetryButton = styled.button`
+  position: absolute;
+  content: '';
+  top: 0;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  background-image: url(${refreshIcon});
+`
diff --git a/packages/DApp/src/components/NotificationItem.tsx b/packages/DApp/src/components/NotificationItem.tsx
index e8118c2..0d12e8d 100644
--- a/packages/DApp/src/components/NotificationItem.tsx
+++ b/packages/DApp/src/components/NotificationItem.tsx
@@ -5,7 +5,7 @@ import styled from 'styled-components'
 import { Colors } from '../constants/styles'
 import { useCommunities } from '../hooks/useCommunities'
 import { LinkExternal } from './Link'
-import { CloseButton } from './Modal'
+import { CloseButton, RetryButton } from './Modal'
 import { getExplorerTransactionLink } from '@usedapp/core'
 
 interface NotificationItemProps {
@@ -33,6 +33,7 @@ export function NotificationItem({ publicKey, text, transaction }: NotificationI
             View on Etherscan
           </NotificationLink>
         </NotificationContent>
+
         <NotificationCloseButton onClick={() => setShow(false)} />
       </NotificationBlock>
     )
@@ -40,6 +41,28 @@ export function NotificationItem({ publicKey, text, transaction }: NotificationI
   return null
 }
 
+export function NotificationInfoItem({ text }: { text: string }) {
+  return (
+    <NotificationBlock>
+      <NotificationContent>
+        <NotificationText>{text}</NotificationText>
+      </NotificationContent>
+    </NotificationBlock>
+  )
+}
+
+export function NotificationErrorItem({ text, action }: { text: string; action: () => void }) {
+  return (
+    <NotificationBlock>
+      <NotificationContent>
+        <NotificationText>{text}</NotificationText>
+      </NotificationContent>
+
+      <NotificationRetryButton onClick={() => action()} />
+    </NotificationBlock>
+  )
+}
+
 const NotificationBlock = styled.div`
   display: flex;
   background: ${Colors.VioletSecondaryLight};
@@ -47,7 +70,6 @@ const NotificationBlock = styled.div`
   width: 345px;
   border-radius: 16px;
   filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.15));
-  z-index: 9999;
 `
 
 const NotificationLogoWrap = styled.div`
@@ -90,3 +112,10 @@ const NotificationCloseButton = styled(CloseButton)`
   bottom: 50%;
   transform: translateY(50%);
 `
+
+const NotificationRetryButton = styled(RetryButton)`
+  top: unset;
+  right: 13px;
+  bottom: 50%;
+  transform: translateY(50%);
+`
diff --git a/packages/DApp/src/components/NotificationsList.tsx b/packages/DApp/src/components/NotificationsList.tsx
index 1b8e8db..40404c6 100644
--- a/packages/DApp/src/components/NotificationsList.tsx
+++ b/packages/DApp/src/components/NotificationsList.tsx
@@ -3,14 +3,20 @@ import React from 'react'
 import styled from 'styled-components'
 import { AnimationNotification, AnimationNotificationMobile } from '../constants/animation'
 import { useContracts } from '../hooks/useContracts'
-import { NotificationItem } from './NotificationItem'
+import { NotificationItem, NotificationInfoItem, NotificationErrorItem } from './NotificationItem'
+import { useWaku } from '../providers/waku/provider'
 
 export function NotificationsList() {
   const { notifications } = useNotifications()
   const { votingContract } = useContracts()
+  const { isLoading, isError, restart } = useWaku()
 
   return (
     <NotificationsWrapper>
+      {isLoading && <NotificationInfoItem text="Connecting to a Waku node." />}
+
+      {!isLoading && isError && <NotificationErrorItem text="Failed connect to a Waku node." action={restart} />}
+
       {notifications.map((notification) => {
         if ('receipt' in notification) {
           return notification.receipt.logs.map((log) => {
@@ -62,6 +68,7 @@ const NotificationsWrapper = styled.div`
   flex-direction: column;
   transition: all 0.3s;
   animation: ${AnimationNotification} 2s ease;
+  z-index: 100;
 
   @media (max-width: 600px) {
     top: unset;