diff --git a/ui/components/ui/actionable-message/actionable-message.js b/ui/components/ui/actionable-message/actionable-message.js index 04994c24e4aa..623fec34a27c 100644 --- 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 index 0d7528adf1ca..e0b3796d450e 100644 --- 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 ( { @@ -318,6 +321,7 @@ export default class Home extends PureComponent { type="success" className="home__new-network-notification" autoHideTime={5 * SECOND} + onAutoHide={onAutoHide} message={ @@ -330,7 +334,7 @@ export default class Home extends PureComponent {