Improve detection of whether a whats new notification was 'seen' (#11225)

ui/components/app/whats-new-popup/index.scss

@@ -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 {

ui/components/app/whats-new-popup/whats-new-popup.js

@@ -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)
+            ? renderFirstNotification(notification, idRefMap, history, isLast)
-            : renderSubsequentNotification(notification, idRefMap, history);
+            : renderSubsequentNotification(
+                notification,
+                idRefMap,
+                history,
+                isLast,
+              );
         })}
       </div>
     </Popover>