diff --git a/ui/components/ui/actionable-message/actionable-message.js b/ui/components/ui/actionable-message/actionable-message.js index 04994c24e..623fec34a 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 0d7528adf..81612b707 100644 --- a/ui/pages/home/home.component.js +++ b/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 ( { @@ -317,7 +321,8 @@ export default class Home extends PureComponent { @@ -330,7 +335,7 @@ export default class Home extends PureComponent {