Fix #17385 - Provide autohide callback for ActionMessage (#17392)

* Fix #17385 - Provide autohide callback for ActionMessage

* Add autohide to the removeal message

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

@@ -31,6 +31,7 @@ export default function ActionableMessage({
   roundedButtons,
   dataTestId,
   autoHideTime = 0,
+  onAutoHide,
 }) {
   const [shouldDisplay, setShouldDisplay] = useState(true);
   useEffect(
@@ -40,6 +41,7 @@ export default function ActionableMessage({
       }
 
       const timeout = setTimeout(() => {
+        onAutoHide?.();
         setShouldDisplay(false);
       }, autoHideTime);
 
@@ -190,4 +192,8 @@ ActionableMessage.propTypes = {
    * Whether the actionable message should auto-hide itself after a given amount of time
    */
   autoHideTime: PropTypes.number,
+  /**
+   * Callback when autoHide time expires
+   */
+  onAutoHide: PropTypes.func,
 };

ui/pages/home/home.component.js

@@ -274,6 +274,10 @@ export default class Home extends PureComponent {
       clearNewCustomNetworkAdded,
       setRpcTarget,
     } = this.props;
+
+    const onAutoHide = () => setNewCollectibleAddedMessage('');
+    const autoHideDelay = 5 * SECOND;
+
     return (
       <MultipleNotifications>
         {
@@ -317,7 +321,8 @@ export default class Home extends PureComponent {
           <ActionableMessage
             type="success"
             className="home__new-network-notification"
-            autoHideTime={5 * SECOND}
+            autoHideTime={autoHideDelay}
+            onAutoHide={onAutoHide}
             message={
               <Box display={DISPLAY.INLINE_FLEX}>
                 <i className="fa fa-check-circle home__new-nft-notification-icon" />
@@ -330,7 +335,7 @@ export default class Home extends PureComponent {
                 <button
                   className="fas fa-times home__new-nft-notification-close"
                   title={t('close')}
-                  onClick={() => setNewCollectibleAddedMessage('')}
+                  onClick={onAutoHide}
                 />
               </Box>
             }
@@ -341,6 +346,8 @@ export default class Home extends PureComponent {
           <ActionableMessage
             type="danger"
             className="home__new-network-notification"
+            autoHideTime={autoHideDelay}
+            onAutoHide={onAutoHide}
             message={
               <Box display={DISPLAY.INLINE_FLEX}>
                 <i className="fa fa-check-circle home__new-nft-notification-icon" />