use new verify email dialog in 2fa flow

src/screens/Settings/components/Email2FAToggle.tsx

@@ -2,9 +2,9 @@ import React from 'react'
 import {msg} from '@lingui/macro'
 import {useLingui} from '@lingui/react'
 
-import {useModalControls} from '#/state/modals'
 import {useAgent, useSession} from '#/state/session'
 import {useDialogControl} from '#/components/Dialog'
+import {VerifyEmailDialog} from '#/components/dialogs/VerifyEmailDialog'
 import * as Prompt from '#/components/Prompt'
 import {DisableEmail2FADialog} from './DisableEmail2FADialog'
 import * as SettingsList from './SettingsList'
@@ -12,9 +12,9 @@ import * as SettingsList from './SettingsList'
 export function Email2FAToggle() {
   const {_} = useLingui()
   const {currentAccount} = useSession()
-  const {openModal} = useModalControls()
   const disableDialogControl = useDialogControl()
   const enableDialogControl = useDialogControl()
+  const verifyEmailDialogControl = useDialogControl()
   const agent = useAgent()
 
   const enableEmailAuthFactor = React.useCallback(async () => {
@@ -35,15 +35,17 @@ export function Email2FAToggle() {
       disableDialogControl.open()
     } else {
       if (!currentAccount.emailConfirmed) {
-        openModal({
+        verifyEmailDialogControl.open()
-          name: 'verify-email',
-          onSuccess: enableDialogControl.open,
-        })
         return
       }
       enableDialogControl.open()
     }
-  }, [currentAccount, enableDialogControl, openModal, disableDialogControl])
+  }, [
+    currentAccount,
+    enableDialogControl,
+    verifyEmailDialogControl,
+    disableDialogControl,
+  ])
 
   return (
     <>
@@ -55,6 +57,13 @@ export function Email2FAToggle() {
         onConfirm={enableEmailAuthFactor}
         confirmButtonCta={_(msg`Enable`)}
       />
+      <VerifyEmailDialog
+        control={verifyEmailDialogControl}
+        onCloseAfterVerifying={enableDialogControl.open}
+        reasonText={_(
+          msg`You'll need to verify your email address before enabling email 2FA.`,
+        )}
+      />
       <SettingsList.BadgeButton
         label={
           currentAccount?.emailAuthFactor ? _(msg`Change`) : _(msg`Enable`)