diff --git a/packages/web/pages/settings/account.tsx b/packages/web/pages/settings/account.tsx index 18f66b19e..88f67e075 100644 --- a/packages/web/pages/settings/account.tsx +++ b/packages/web/pages/settings/account.tsx @@ -17,6 +17,7 @@ import { useGetViewerQuery } from '../../lib/networking/queries/useGetViewerQuer import { useValidateUsernameQuery } from '../../lib/networking/queries/useValidateUsernameQuery' import { applyStoredTheme } from '../../lib/themeUpdater' import { showErrorToast, showSuccessToast } from '../../lib/toastHelpers' +import { ConfirmationModal } from '../../components/patterns/ConfirmationModal' const StyledLabel = styled('label', { fontWeight: 600, @@ -51,6 +52,8 @@ export default function Account(): JSX.Element { const [email, setEmail] = useState('') const [emailUpdating, setEmailUpdating] = useState(false) const [source, setSource] = useState('') + const [showUpdateEmailConfirmation, setShowUpdateEmailConfirmation] = + useState(false) const [debouncedUsername, setDebouncedUsername] = useState('') const { usernameErrorMessage, isLoading: isUsernameValidationLoading } = @@ -170,6 +173,7 @@ export default function Account(): JSX.Element { const updateEmail = useCallback(() => { setEmailUpdating(true) + setShowUpdateEmailConfirmation(false) ;(async () => { const response = await updateEmailMutation({ email }) if (response) { @@ -329,7 +333,12 @@ export default function Account(): JSX.Element { >