1  import { useNotifications } from '@usedapp/core'
 2  import React from 'react'
 3  import styled from 'styled-components'
 4  import { AnimationNotification, AnimationNotificationMobile } from '../constants/animation'
 5  import { useContracts } from '../hooks/useContracts'
 6  import { NotificationItem, NotificationInfoItem, NotificationErrorItem } from './NotificationItem'
 7  import { useWaku } from '../providers/waku/provider'
 8  
 9  export function NotificationsList() {
10    const { notifications } = useNotifications()
11    const { votingContract } = useContracts()
12    const { isLoading, isError, restart } = useWaku()
13  
14    return (
15      <NotificationsWrapper>
16        {isLoading && <NotificationInfoItem text="Connecting to a Waku node." />}
17  
18        {!isLoading && isError && <NotificationErrorItem text="Failed connect to a Waku node." action={restart} />}
19  
20        {notifications.map((notification) => {
21          if ('receipt' in notification) {
22            return notification.receipt.logs.map((log) => {
23              if (log.address !== votingContract.address) {
24                return
25              }
26  
27              // this needs to be updated so it takes into account also interface of featuredVotingContract
28              const parsedLog = votingContract.interface.parseLog(log)
29  
30              let text
31              if (parsedLog.name === 'VotingRoomStarted') {
32                text = ' voting room started.'
33              }
34              if (parsedLog.name === 'VotingRoomFinalized') {
35                if (parsedLog.args.passed == true) {
36                  if (parsedLog.args.voteType === 1) {
37                    text = ' is now in the communities directory!'
38                  }
39  
40                  if (parsedLog.args.voteType === 0) {
41                    text = ' is now removed from communities directory!'
42                  }
43                }
44              }
45              if (text) {
46                return (
47                  <NotificationItem
48                    key={log.transactionHash}
49                    publicKey={parsedLog.args.publicKey}
50                    text={text}
51                    transaction={notification.transaction}
52                  />
53                )
54              }
55            })
56          }
57        })}
58      </NotificationsWrapper>
59    )
60  }
61  
62  const NotificationsWrapper = styled.div`
63    display: flex;
64    justify-content: space-between;
65    position: fixed;
66    top: 191px;
67    right: 16px;
68    flex-direction: column;
69    transition: all 0.3s;
70    animation: ${AnimationNotification} 2s ease;
71    z-index: 100;
72  
73    @media (max-width: 600px) {
74      top: unset;
75      right: unset;
76      bottom: 24px;
77      left: 50%;
78      transform: translateX(-50%);
79      animation: ${AnimationNotificationMobile} 2s ease;
80    }
81  `