2497017413

Build Type

github

Committed by GitHub

Commit Message

<a href="https://github.com/safe-global/safe-react/commit/<a class=hub.com/safe-global/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/safe-global/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/safe-global/safe-react/commit/<a class="double-link" href="https://git"><a class=hub.com/safe-global/safe-react/commit/9d9f5520e3ada2e0135de87852d92ab2eb733387">9d9f5520e">&lt;a href=&quot;https://github.com/safe-global/safe-react/commit/</a><a class="double-link" href="https://github.com/safe-global/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/safe-global/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/safe-global/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/safe-global/safe-react/commit/&lt;a class=&quot;double-link&quot; href=&quot;https://git">&lt;a class=</a>hub.com/safe-global/safe-react/commit/9d9f5520e3ada2e0135de87852d92ab2eb733387">9d9f5520e</a><a href="https://github.com/safe-global/safe-react/commit/9d9f5520e3ada2e0135de87852d92ab2eb733387">&quot;&gt;&amp;lt;a href=&amp;quot;https://github.com/safe-global/safe-react/commit/&lt;/a&gt;&lt;a class=&quot;double-link&quot; href=&quot;https://github.com/safe-global/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/safe-global/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/safe-global/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/safe-global/safe-react/commit/&amp;lt;a class=&amp;quot;double-link&amp;quot; href=&amp;quot;https://git&quot;&gt;&amp;lt;a class=&lt;/a&gt;hub.com/safe-global/safe-react/commit/9d9f5520e3ada2e0135de87852d92ab2eb733387&quot;&gt;9d9f5520e&lt;/a&gt;&lt;a href=&quot;https://github.com/safe-global/safe-react/commit/9d9f5520e3ada2e0135de87852d92ab2eb733387&quot;&gt;&amp;quot;&amp;gt;&amp;amp;lt;a href=&amp;amp;quot;https://github.com/safe-global/safe-react/commit/&amp;lt;/a&amp;gt;&amp;lt;a class=&amp;quot;double-link&amp... (continued)

Pull Request Pull Request #3976: feat: notification centre popper

Run Details

1385 of 4759 branches covered (29.1%)

Branch coverage included in aggregate %.

62 of 62 new or added lines in 5 files covered. (100.0%)

3848 of 9600 relevant lines covered (40.08%)

36.48 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0

/src/components/AppLayout/Header/components/Notifications/NotificationList.tsx

import { ReactElement } from 'react'
import styled from 'styled-components'

import { NotificationsState } from 'src/logic/notifications/store/notifications'
import { NOTIFICATION_LIMIT } from 'src/components/AppLayout/Header/components/Notifications'
import { StyledScrollableBar } from 'src/routes/safe/components/Transactions/TxList/styled'
import { black300 } from 'src/theme/variables'
import NotificationItem from 'src/components/AppLayout/Header/components/Notifications/NotificationItem'

const NotificationList = ({ notifications }: { notifications: NotificationsState }): ReactElement => {
  if (!notifications.length) {
    return <NotificationType>No notifications</NotificationType>
  }

  return (
    <ScrollContainer $showScrollbar={notifications.length > NOTIFICATION_LIMIT}>
      <NotificationType>System updates</NotificationType>
      {notifications.map((notification) => (
        <NotificationItem key={notification.timestamp} {...notification} />
      ))}
    </ScrollContainer>
  )
}

const ScrollContainer = styled(StyledScrollableBar)<{ $showScrollbar: boolean }>`
  height: ${({ $showScrollbar: $scroll }) => ($scroll ? '500px' : 'auto')};
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
`

const NotificationType = styled.h4`
  all: unset;
  display: block;
  font-weight: 400;
  font-size: 14px;
  color: ${black300};
  margin-bottom: 12px;
`

export default NotificationList

1	import { ReactElement } from 'react'
2	import styled from 'styled-components'
3
4	import { NotificationsState } from 'src/logic/notifications/store/notifications'
5	import { NOTIFICATION_LIMIT } from 'src/components/AppLayout/Header/components/Notifications'
6	import { StyledScrollableBar } from 'src/routes/safe/components/Transactions/TxList/styled'
7	import { black300 } from 'src/theme/variables'
8	import NotificationItem from 'src/components/AppLayout/Header/components/Notifications/NotificationItem'
9
10	const NotificationList = ({ notifications }: { notifications: NotificationsState }): ReactElement => {	×
11	if (!notifications.length) {	×
12	return <NotificationType>No notifications</NotificationType>	×
13	}
14
15	return (	×
16	<ScrollContainer $showScrollbar={notifications.length > NOTIFICATION_LIMIT}>
17	<NotificationType>System updates</NotificationType>
18	{notifications.map((notification) => (
19	<NotificationItem key={notification.timestamp} {...notification} />	×
20	))}
21	</ScrollContainer>
22	)
23	}
24
25	const ScrollContainer = styled(StyledScrollableBar)<{ $showScrollbar: boolean }>`	×
26	height: ${({ $showScrollbar: $scroll }) => ($scroll ? '500px' : 'auto')};	×
27	overflow-x: hidden;
28	overflow-y: auto;
29	width: 100%;
30	`
31
32	const NotificationType = styled.h4`	×
33	all: unset;
34	display: block;
35	font-weight: 400;
36	font-size: 14px;
37	color: ${black300};
38	margin-bottom: 12px;
39	`
40
41	export default NotificationList

safe-global / safe-react / 2497017413

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous