diff --git a/ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx b/ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx index e63e0a019b2f..de3da35fa841 100644 --- a/ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx +++ b/ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx @@ -51,14 +51,14 @@ export default function TurnOnMetamaskNotifications() { ); const isProfileSyncingEnabled = useSelector(selectIsProfileSyncingEnabled); - const [buttonState, setButtonState] = useState( + const [isLoading, setIsLoading] = useState( isUpdatingMetamaskNotifications, ); const { createNotifications, error } = useCreateNotifications(); const handleTurnOnNotifications = async () => { - setButtonState(true); + setIsLoading(true); await createNotifications(); trackEvent({ category: MetaMetricsEventCategory.NotificationsActivationFlow, @@ -72,13 +72,18 @@ export default function TurnOnMetamaskNotifications() { const handleHideModal = () => { hideModal(); - trackEvent({ - category: MetaMetricsEventCategory.NotificationsActivationFlow, - event: MetaMetricsEventName.NotificationsActivated, - properties: { - is_profile_syncing_enabled: isProfileSyncingEnabled, - action_type: 'dismissed', - }, + setIsLoading((prevLoadingState) => { + if (!prevLoadingState) { + trackEvent({ + category: MetaMetricsEventCategory.NotificationsActivationFlow, + event: MetaMetricsEventName.NotificationsActivated, + properties: { + is_profile_syncing_enabled: isProfileSyncingEnabled, + action_type: 'dismissed', + }, + }); + } + return prevLoadingState; }); }; @@ -149,8 +154,8 @@ export default function TurnOnMetamaskNotifications() { }} submitButtonProps={{ children: t('turnOnMetamaskNotificationsButton'), - loading: buttonState, - disabled: buttonState, + loading: isLoading, + disabled: isLoading, 'data-testid': 'turn-on-notifications-button', }} />