mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
Improve detection of whether a whats new notification was 'seen' (#11225)
This commit is contained in:
parent
c3b79bb358
commit
6dae3bbe57
@ -10,6 +10,19 @@
|
||||
flex-direction: column;
|
||||
margin: 0 24px 24px 24px;
|
||||
border-bottom: 1px solid $Grey-100;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&__last-notification {
|
||||
> * {
|
||||
&:nth-last-child(2) {
|
||||
margin-bottom: 0;
|
||||
};
|
||||
}
|
||||
|
||||
.whats-new-popup__intersection-observable {
|
||||
bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__notification {
|
||||
@ -53,6 +66,13 @@
|
||||
font-weight: bold;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&__intersection-observable {
|
||||
bottom: 22px;
|
||||
position: absolute;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.popover-wrap.whats-new-popup__popover {
|
||||
|
@ -68,7 +68,7 @@ const renderDescription = (description) => {
|
||||
);
|
||||
};
|
||||
|
||||
const renderFirstNotification = (notification, idRefMap, history) => {
|
||||
const renderFirstNotification = (notification, idRefMap, history, isLast) => {
|
||||
const { id, date, title, description, image, actionText } = notification;
|
||||
const actionFunction = getActionFunctionById(id, history);
|
||||
const imageComponent = image && (
|
||||
@ -84,9 +84,11 @@ const renderFirstNotification = (notification, idRefMap, history) => {
|
||||
<div
|
||||
className={classnames(
|
||||
'whats-new-popup__notification whats-new-popup__first-notification',
|
||||
{
|
||||
'whats-new-popup__last-notification': isLast,
|
||||
},
|
||||
)}
|
||||
key={`whats-new-popop-notification-${id}`}
|
||||
ref={idRefMap[id]}
|
||||
>
|
||||
{!placeImageBelowDescription && imageComponent}
|
||||
<div className="whats-new-popup__notification-title">{title}</div>
|
||||
@ -107,19 +109,29 @@ const renderFirstNotification = (notification, idRefMap, history) => {
|
||||
{actionText}
|
||||
</Button>
|
||||
)}
|
||||
<div
|
||||
className="whats-new-popup__intersection-observable"
|
||||
ref={idRefMap[id]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const renderSubsequentNotification = (notification, idRefMap, history) => {
|
||||
const renderSubsequentNotification = (
|
||||
notification,
|
||||
idRefMap,
|
||||
history,
|
||||
isLast,
|
||||
) => {
|
||||
const { id, date, title, description, actionText } = notification;
|
||||
|
||||
const actionFunction = getActionFunctionById(id, history);
|
||||
return (
|
||||
<div
|
||||
className={classnames('whats-new-popup__notification')}
|
||||
className={classnames('whats-new-popup__notification', {
|
||||
'whats-new-popup__last-notification': isLast,
|
||||
})}
|
||||
key={`whats-new-popop-notification-${id}`}
|
||||
ref={idRefMap[id]}
|
||||
>
|
||||
<div className="whats-new-popup__notification-title">{title}</div>
|
||||
<div className="whats-new-popup__description-and-date">
|
||||
@ -133,6 +145,10 @@ const renderSubsequentNotification = (notification, idRefMap, history) => {
|
||||
{`${actionText} >`}
|
||||
</div>
|
||||
)}
|
||||
<div
|
||||
className="whats-new-popup__intersection-observable"
|
||||
ref={idRefMap[id]}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -207,10 +223,16 @@ export default function WhatsNewPopup({ onClose }) {
|
||||
<div className="whats-new-popup__notifications">
|
||||
{notifications.map(({ id }, index) => {
|
||||
const notification = getTranslatedUINoficiations(t, locale)[id];
|
||||
const isLast = index === notifications.length - 1;
|
||||
// Display the swaps notification with full image
|
||||
return index === 0 || id === 1
|
||||
? renderFirstNotification(notification, idRefMap, history)
|
||||
: renderSubsequentNotification(notification, idRefMap, history);
|
||||
? renderFirstNotification(notification, idRefMap, history, isLast)
|
||||
: renderSubsequentNotification(
|
||||
notification,
|
||||
idRefMap,
|
||||
history,
|
||||
isLast,
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</Popover>
|
||||
|
Loading…
Reference in New Issue
Block a user