WIP

src/components/dialogs/EmailDialog/index.tsx

@@ -0,0 +1,35 @@
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import * as Dialog from '#/components/Dialog'
+import {Text} from '#/components/Typography'
+
+export {useDialogControl} from '#/components/Dialog'
+
+export function EmailDialog({
+  control,
+}: {
+  control: Dialog.DialogControlProps
+}) {
+  const {_} = useLingui()
+
+  return (
+    <Dialog.Outer control={control}>
+      <Dialog.Handle />
+
+      <Dialog.ScrollableInner label={_(msg`Make adjustments to your account email settings`)}>
+        <Inner control={control} />
+      </Dialog.ScrollableInner>
+    </Dialog.Outer>
+  )
+}
+
+function Inner({
+  control,
+}: {
+  control: Dialog.DialogControlProps
+}) {
+  return (
+    <Text>Hello</Text>
+  )
+}

src/components/dialogs/EmailDialog/types.ts

@@ -0,0 +1,35 @@
+import {type ReactNode} from 'react'
+
+import {type DialogControlProps} from '#/components/Dialog'
+
+export type EmailDialogProps = {
+  control: DialogControlProps
+}
+
+export type EmailDialogInnerProps = EmailDialogProps & {}
+
+export type Screen = {
+  id: ScreenID.ChangeEmail
+} | {
+  id: ScreenID.EnterCode
+  /**
+   * - email was sent earlier
+   * - email was _just_ sent
+   */
+  instructions: ReactNode[]
+} | {
+  id: ScreenID.VerifyEmail
+  /**
+   * - default flow
+   * - new user blockers (x5)
+   */
+  instructions: ReactNode[]
+  // onCloseWithoutVerifying,
+  // onCloseAfterVerifying,
+}
+
+export enum ScreenID {
+  ChangeEmail = 'ChangeEmail', // normal, instructs to click link first
+  EnterCode = 'EnterCode', // if user elects to enter a code
+  VerifyEmail = 'VerifyEmail', // as a separate step, instructs to click link first
+}