Fix #17385 - Provide autohide callback for ActionMessage

MetaMask · Jan 25, 2023 · 5a6fb66 · 5a6fb66
1 parent 709d026
commit 5a6fb66
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/ui/components/ui/actionable-message/actionable-message.js b/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,
 };
diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
@@ -274,6 +274,9 @@ export default class Home extends PureComponent {
       clearNewCustomNetworkAdded,
       setRpcTarget,
     } = this.props;
+
+    const onAutoHide = () => setNewCollectibleAddedMessage('');
+
     return (
       <MultipleNotifications>
         {
@@ -318,6 +321,7 @@ export default class Home extends PureComponent {
             type="success"
             className="home__new-network-notification"
             autoHideTime={5 * SECOND}
+            onAutoHide={onAutoHide}
             message={
               <Box display={DISPLAY.INLINE_FLEX}>
                 <i className="fa fa-check-circle home__new-nft-notification-icon" />
@@ -330,7 +334,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>
             }