Fix #17138 - Allow ActionMessage to be autohidden after a given number of milliseconds (#17269)

ui/components/ui/actionable-message/actionable-message.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import InfoTooltip from '../info-tooltip';
@@ -30,7 +30,26 @@ export default function ActionableMessage({
   iconFillColor = '',
   roundedButtons,
   dataTestId,
+  autoHideTime = 0,
 }) {
+  const [shouldDisplay, setShouldDisplay] = useState(true);
+  useEffect(
+    function () {
+      if (autoHideTime === 0) {
+        return undefined;
+      }
+
+      const timeout = setTimeout(() => {
+        setShouldDisplay(false);
+      }, autoHideTime);
+
+      return function () {
+        clearTimeout(timeout);
+      };
+    },
+    [autoHideTime],
+  );
+
   const actionableMessageClassName = classnames(
     'actionable-message',
     typeHash[type],
@@ -42,6 +61,10 @@ export default function ActionableMessage({
   const onlyOneAction =
     (primaryAction && !secondaryAction) || (secondaryAction && !primaryAction);
 
+  if (!shouldDisplay) {
+    return null;
+  }
+
   return (
     <div className={actionableMessageClassName} data-testid={dataTestId}>
       {useIcon ? icon || <InfoTooltipIcon fillColor={iconFillColor} /> : null}
@@ -163,4 +186,8 @@ ActionableMessage.propTypes = {
    */
   roundedButtons: PropTypes.bool,
   dataTestId: PropTypes.string,
+  /**
+   * Whether the actionable message should auto-hide itself after a given amount of time
+   */
+  autoHideTime: PropTypes.number,
 };

ui/pages/home/home.component.js

@@ -30,6 +30,7 @@ import {
   DISPLAY,
   COLORS,
 } from '../../helpers/constants/design-system';
+import { SECOND } from '../../../shared/constants/time';
 
 import {
   ASSET_ROUTE,
@@ -312,6 +313,7 @@ export default class Home extends PureComponent {
           <ActionableMessage
             type="success"
             className="home__new-network-notification"
+            autoHideTime={5 * SECOND}
             message={
               <Box display={DISPLAY.INLINE_FLEX}>
                 <i className="fa fa-check-circle home__new-nft-notification-icon" />