Verification (#8226)

* WIP

* Alignment with icon

* Add create/remove prompts

* Fill out check dialog a bit

* Reorg

* Handle was verified state

* Add warning to edit profile

* Add warning to handle dialog

* Decent alignment in posts on all platforms

* Refactor alignment for posts, chatlist, hover card

* Disable on profile

* Convo header

* Compute simple verification state

* Add other icon, rename, integrate

* Swap in simple state for profile edits

* Clean up utility hooks

* Add verifications UI to dialog

* Add edu nux

* Revert change

* Fix wrapping of check on profile

* Rename

* Fix gap under PostMeta

* Update check dialogs

* Handle takendown verifiers in check dialog

* alf composer reply to

* Refactor verification state

* Add create/remove mutations, non-functional for now

* Fix up post-rebase

* Add check to first author noty

* Do cache updates after mutations

* DRY up hook, add to profile updates too

* Add to drawer

* Update account list

* Adapt to new types

* Hook up mutations

* Use profile shadow in feeds

* Add to settings

* Shadow currentAccountProfile

* Add invalid state to verifications

* Fix alignment and overflow in Settings and Drawer

* Re-integrate post rebase

* Remove debug code

* Update copy

* Add unverified notification support

* Remove link

* Make sure dialog closes

* Update URL

* Add settings screen

* Integrate new setting into verification states

* Add metrics, bump package, fix bad import

* NUX fixes

* Update copy

* Fixes

* Update types

* fix search autocomplete

* fix lint

* add display name warning to new dialog

* update default prefs

* Add parsing support for notifications

* Bump pkg

* Tweak noty styles

* Adjust check alignment

* Tweak check alignment

* Fix badge for verifier

* Modify copy

---------

Co-authored-by: Samuel Newman <mozzius@protonmail.com>
Co-authored-by: Paul Frazee <pfrazee@gmail.com>

7 files changed, 810 insertions, 0 deletions

diff --git a/src/components/verification/VerificationCheck.tsx b/src/components/verification/VerificationCheck.tsx
new file mode 100644
index 000000000..4f41c6682
--- /dev/null
+++ b/src/components/verification/VerificationCheck.tsx
@@ -0,0 +1,12 @@
+import {type Props} from '#/components/icons/common'
+import {VerifiedCheck} from '#/components/icons/VerifiedCheck'
+import {VerifierCheck} from '#/components/icons/VerifierCheck'
+
+export function VerificationCheck({
+  verifier,
+  ...rest
+}: Props & {
+  verifier?: boolean
+}) {
+  return verifier ? <VerifierCheck {...rest} /> : <VerifiedCheck {...rest} />
+}
diff --git a/src/components/verification/VerificationCheckButton.tsx b/src/components/verification/VerificationCheckButton.tsx
new file mode 100644
index 000000000..1b66cd90e
--- /dev/null
+++ b/src/components/verification/VerificationCheckButton.tsx
@@ -0,0 +1,155 @@
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {logger} from '#/logger'
+import {type Shadow} from '#/state/cache/types'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button} from '#/components/Button'
+import {useDialogControl} from '#/components/Dialog'
+import {useFullVerificationState} from '#/components/verification'
+import {type FullVerificationState} from '#/components/verification'
+import {VerificationCheck} from '#/components/verification/VerificationCheck'
+import {VerificationsDialog} from '#/components/verification/VerificationsDialog'
+import {VerifierDialog} from '#/components/verification/VerifierDialog'
+import type * as bsky from '#/types/bsky'
+
+export function shouldShowVerificationCheckButton(
+  state: FullVerificationState,
+) {
+  let ok = false
+
+  if (state.profile.role === 'default') {
+    if (state.profile.isVerified) {
+      ok = true
+    } else if (state.profile.isViewer && state.profile.wasVerified) {
+      ok = true
+    } else if (
+      state.viewer.role === 'verifier' &&
+      state.viewer.hasIssuedVerification
+    ) {
+      ok = true
+    }
+  } else if (state.profile.role === 'verifier') {
+    if (state.profile.isViewer) {
+      ok = true
+    } else if (state.profile.isVerified) {
+      ok = true
+    }
+  }
+
+  if (
+    !state.profile.showBadge &&
+    !state.profile.isViewer &&
+    !(state.viewer.role === 'verifier' && state.viewer.hasIssuedVerification)
+  ) {
+    ok = false
+  }
+
+  return ok
+}
+
+export function VerificationCheckButton({
+  profile,
+  size,
+}: {
+  profile: Shadow<bsky.profile.AnyProfileView>
+  size: 'lg' | 'md' | 'sm'
+}) {
+  const state = useFullVerificationState({
+    profile,
+  })
+
+  if (shouldShowVerificationCheckButton(state)) {
+    return <Badge profile={profile} verificationState={state} size={size} />
+  }
+
+  return null
+}
+
+export function Badge({
+  profile,
+  verificationState: state,
+  size,
+}: {
+  profile: Shadow<bsky.profile.AnyProfileView>
+  verificationState: FullVerificationState
+  size: 'lg' | 'md' | 'sm'
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const verificationsDialogControl = useDialogControl()
+  const verifierDialogControl = useDialogControl()
+  const {gtPhone} = useBreakpoints()
+  let dimensions = 12
+  if (size === 'lg') {
+    dimensions = gtPhone ? 20 : 18
+  } else if (size === 'md') {
+    dimensions = 16
+  }
+
+  const verifiedByHidden = !state.profile.showBadge && state.profile.isViewer
+
+  return (
+    <>
+      <Button
+        label={
+          state.profile.isViewer
+            ? _(msg`View your verifications`)
+            : _(msg`View this user's verifications`)
+        }
+        hitSlop={20}
+        onPress={() => {
+          logger.metric('verification:badge:click', {})
+          if (state.profile.role === 'verifier') {
+            verifierDialogControl.open()
+          } else {
+            verificationsDialogControl.open()
+          }
+        }}
+        style={[]}>
+        {({hovered}) => (
+          <View
+            style={[
+              a.justify_end,
+              a.align_end,
+              a.transition_transform,
+              {
+                width: dimensions,
+                height: dimensions,
+                transform: [
+                  {
+                    scale: hovered ? 1.1 : 1,
+                  },
+                ],
+              },
+            ]}>
+            <VerificationCheck
+              width={dimensions}
+              fill={
+                verifiedByHidden
+                  ? t.atoms.bg_contrast_100.backgroundColor
+                  : state.profile.isVerified
+                  ? t.palette.primary_500
+                  : t.atoms.bg_contrast_100.backgroundColor
+              }
+              verifier={state.profile.role === 'verifier'}
+            />
+          </View>
+        )}
+      </Button>
+
+      <VerificationsDialog
+        control={verificationsDialogControl}
+        profile={profile}
+        verificationState={state}
+      />
+
+      <VerifierDialog
+        control={verifierDialogControl}
+        profile={profile}
+        verificationState={state}
+      />
+    </>
+  )
+}
diff --git a/src/components/verification/VerificationCreatePrompt.tsx b/src/components/verification/VerificationCreatePrompt.tsx
new file mode 100644
index 000000000..39ac6dbf6
--- /dev/null
+++ b/src/components/verification/VerificationCreatePrompt.tsx
@@ -0,0 +1,70 @@
+import {useCallback} from 'react'
+import {View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {logger} from '#/logger'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useVerificationCreateMutation} from '#/state/queries/verification/useVerificationCreateMutation'
+import * as Toast from '#/view/com/util/Toast'
+import {atoms as a} from '#/alf'
+import {type DialogControlProps} from '#/components/Dialog'
+import {VerifiedCheck} from '#/components/icons/VerifiedCheck'
+import * as ProfileCard from '#/components/ProfileCard'
+import * as Prompt from '#/components/Prompt'
+import type * as bsky from '#/types/bsky'
+
+export function VerificationCreatePrompt({
+  control,
+  profile,
+}: {
+  control: DialogControlProps
+  profile: bsky.profile.AnyProfileView
+}) {
+  const {_} = useLingui()
+  const moderationOpts = useModerationOpts()
+  const {mutateAsync: create} = useVerificationCreateMutation()
+  const onConfirm = useCallback(async () => {
+    try {
+      await create({profile})
+      Toast.show(_(msg`Successfully verified`))
+    } catch (e) {
+      Toast.show(_(msg`Failed to create a verification`), 'xmark')
+      logger.error('Failed to create a verification', {
+        safeMessage: e,
+      })
+    }
+  }, [_, profile, create])
+
+  return (
+    <Prompt.Outer control={control}>
+      <View style={[a.flex_row, a.align_center, a.gap_sm, a.pb_sm]}>
+        <VerifiedCheck width={18} />
+        <Prompt.TitleText style={[a.pb_0]}>
+          {_(msg`Verify this account?`)}
+        </Prompt.TitleText>
+      </View>
+      <Prompt.DescriptionText>
+        {_(msg`This action can be undone at any time.`)}
+      </Prompt.DescriptionText>
+      <View style={[a.pb_xl]}>
+        {moderationOpts ? (
+          <ProfileCard.Header>
+            <ProfileCard.Avatar
+              profile={profile}
+              moderationOpts={moderationOpts}
+            />
+            <ProfileCard.NameAndHandle
+              profile={profile}
+              moderationOpts={moderationOpts}
+            />
+          </ProfileCard.Header>
+        ) : null}
+      </View>
+      <Prompt.Actions>
+        <Prompt.Action cta={_(msg`Verify account`)} onPress={onConfirm} />
+        <Prompt.Cancel />
+      </Prompt.Actions>
+    </Prompt.Outer>
+  )
+}
diff --git a/src/components/verification/VerificationRemovePrompt.tsx b/src/components/verification/VerificationRemovePrompt.tsx
new file mode 100644
index 000000000..470b61c19
--- /dev/null
+++ b/src/components/verification/VerificationRemovePrompt.tsx
@@ -0,0 +1,50 @@
+import {useCallback} from 'react'
+import {type AppBskyActorDefs} from '@atproto/api'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {logger} from '#/logger'
+import {useVerificationsRemoveMutation} from '#/state/queries/verification/useVerificationsRemoveMutation'
+import * as Toast from '#/view/com/util/Toast'
+import {type DialogControlProps} from '#/components/Dialog'
+import * as Prompt from '#/components/Prompt'
+import type * as bsky from '#/types/bsky'
+
+export {useDialogControl as usePromptControl} from '#/components/Dialog'
+
+export function VerificationRemovePrompt({
+  control,
+  profile,
+  verifications,
+  onConfirm: onConfirmInner,
+}: {
+  control: DialogControlProps
+  profile: bsky.profile.AnyProfileView
+  verifications: AppBskyActorDefs.VerificationView[]
+  onConfirm?: () => void
+}) {
+  const {_} = useLingui()
+  const {mutateAsync: remove} = useVerificationsRemoveMutation()
+  const onConfirm = useCallback(async () => {
+    onConfirmInner?.()
+    try {
+      await remove({profile, verifications})
+      Toast.show(_(msg`Removed verification`))
+    } catch (e) {
+      Toast.show(_(msg`Failed to remove verification`), 'xmark')
+      logger.error('Failed to remove verification', {
+        safeMessage: e,
+      })
+    }
+  }, [_, profile, verifications, remove, onConfirmInner])
+
+  return (
+    <Prompt.Basic
+      control={control}
+      title={_(msg`Remove your verification for this account?`)}
+      onConfirm={onConfirm}
+      confirmButtonCta={_(msg`Remove verification`)}
+      confirmButtonColor="negative"
+    />
+  )
+}
diff --git a/src/components/verification/VerificationsDialog.tsx b/src/components/verification/VerificationsDialog.tsx
new file mode 100644
index 000000000..d61823968
--- /dev/null
+++ b/src/components/verification/VerificationsDialog.tsx
@@ -0,0 +1,257 @@
+import {View} from 'react-native'
+import {type AppBskyActorDefs} from '@atproto/api'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {urls} from '#/lib/constants'
+import {getUserDisplayName} from '#/lib/getUserDisplayName'
+import {logger} from '#/logger'
+import {useModerationOpts} from '#/state/preferences/moderation-opts'
+import {useProfileQuery} from '#/state/queries/profile'
+import {useSession} from '#/state/session'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Admonition} from '#/components/Admonition'
+import {Button, ButtonIcon, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {useDialogControl} from '#/components/Dialog'
+import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash'
+import {Link} from '#/components/Link'
+import * as ProfileCard from '#/components/ProfileCard'
+import {Text} from '#/components/Typography'
+import {type FullVerificationState} from '#/components/verification'
+import {VerificationRemovePrompt} from '#/components/verification/VerificationRemovePrompt'
+import type * as bsky from '#/types/bsky'
+
+export {useDialogControl} from '#/components/Dialog'
+
+export function VerificationsDialog({
+  control,
+  profile,
+  verificationState,
+}: {
+  control: Dialog.DialogControlProps
+  profile: bsky.profile.AnyProfileView
+  verificationState: FullVerificationState
+}) {
+  return (
+    <Dialog.Outer control={control}>
+      <Inner
+        control={control}
+        profile={profile}
+        verificationState={verificationState}
+      />
+      <Dialog.Close />
+    </Dialog.Outer>
+  )
+}
+
+function Inner({
+  profile,
+  control,
+  verificationState: state,
+}: {
+  control: Dialog.DialogControlProps
+  profile: bsky.profile.AnyProfileView
+  verificationState: FullVerificationState
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+
+  const userName = getUserDisplayName(profile)
+  const label = state.profile.isViewer
+    ? state.profile.isVerified
+      ? _(msg`You are verified`)
+      : _(msg`Your verifications`)
+    : state.profile.isVerified
+    ? _(msg`${userName} is verified`)
+    : _(
+        msg({
+          message: `${userName}'s verifications`,
+          comment: `Possessive, meaning "the verifications of {userName}"`,
+        }),
+      )
+
+  return (
+    <Dialog.ScrollableInner
+      label={label}
+      style={[
+        gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+      ]}>
+      <Dialog.Handle />
+
+      <View style={[a.gap_sm, a.pb_lg]}>
+        <Text style={[a.text_2xl, a.font_bold, a.pr_4xl, a.leading_tight]}>
+          {label}
+        </Text>
+        <Text style={[a.text_md, a.leading_snug]}>
+          {state.profile.isVerified ? (
+            <Trans>
+              This account has a checkmark because it's been verified by trusted
+              sources.
+            </Trans>
+          ) : (
+            <Trans>
+              This account has one or more verifications, but it is not
+              currently verified.
+            </Trans>
+          )}
+        </Text>
+      </View>
+
+      {profile.verification ? (
+        <View style={[a.pb_xl, a.gap_md]}>
+          <Text style={[a.text_sm, t.atoms.text_contrast_medium]}>
+            <Trans>Verified by:</Trans>
+          </Text>
+
+          <View style={[a.gap_lg]}>
+            {profile.verification.verifications.map(v => (
+              <VerifierCard
+                key={v.uri}
+                verification={v}
+                subject={profile}
+                outerDialogControl={control}
+              />
+            ))}
+          </View>
+
+          {profile.verification.verifications.some(v => !v.isValid) &&
+            state.profile.isViewer && (
+              <Admonition type="warning" style={[a.mt_xs]}>
+                <Trans>Some of your verifications are invalid.</Trans>
+              </Admonition>
+            )}
+        </View>
+      ) : null}
+
+      <View
+        style={[
+          a.w_full,
+          a.gap_sm,
+          a.justify_end,
+          gtMobile
+            ? [a.flex_row, a.flex_row_reverse, a.justify_start]
+            : [a.flex_col],
+        ]}>
+        <Button
+          label={_(msg`Close dialog`)}
+          size="small"
+          variant="solid"
+          color="primary"
+          onPress={() => {
+            control.close()
+          }}>
+          <ButtonText>
+            <Trans>Close</Trans>
+          </ButtonText>
+        </Button>
+        <Link
+          overridePresentation
+          to={urls.website.blog.initialVerificationAnnouncement}
+          label={_(msg`Learn more about verification on Bluesky`)}
+          size="small"
+          variant="solid"
+          color="secondary"
+          style={[a.justify_center]}
+          onPress={() => {
+            logger.metric('verification:learn-more', {
+              location: 'verificationsDialog',
+            })
+          }}>
+          <ButtonText>
+            <Trans>Learn more</Trans>
+          </ButtonText>
+        </Link>
+      </View>
+
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}
+
+function VerifierCard({
+  verification,
+  subject,
+  outerDialogControl,
+}: {
+  verification: AppBskyActorDefs.VerificationView
+  subject: bsky.profile.AnyProfileView
+  outerDialogControl: Dialog.DialogControlProps
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {currentAccount} = useSession()
+  const moderationOpts = useModerationOpts()
+  const {data: profile, error} = useProfileQuery({did: verification.issuer})
+  const verificationRemovePromptControl = useDialogControl()
+  const canAdminister = verification.issuer === currentAccount?.did
+
+  return (
+    <View
+      style={{
+        opacity: verification.isValid ? 1 : 0.5,
+      }}>
+      <ProfileCard.Outer>
+        <ProfileCard.Header>
+          {error ? (
+            <>
+              <ProfileCard.AvatarPlaceholder />
+              <View style={[a.flex_1]}>
+                <Text
+                  style={[a.text_md, a.font_bold, a.leading_snug]}
+                  numberOfLines={1}>
+                  <Trans>Unknown verifier</Trans>
+                </Text>
+                <Text
+                  emoji
+                  style={[a.leading_snug, t.atoms.text_contrast_medium]}
+                  numberOfLines={1}>
+                  {verification.issuer}
+                </Text>
+              </View>
+            </>
+          ) : profile && moderationOpts ? (
+            <>
+              <ProfileCard.Avatar
+                profile={profile}
+                moderationOpts={moderationOpts}
+              />
+              <ProfileCard.NameAndHandle
+                profile={profile}
+                moderationOpts={moderationOpts}
+              />
+              {canAdminister && (
+                <View>
+                  <Button
+                    label={_(msg`Remove verification`)}
+                    size="small"
+                    variant="outline"
+                    color="negative"
+                    shape="round"
+                    onPress={() => {
+                      verificationRemovePromptControl.open()
+                    }}>
+                    <ButtonIcon icon={TrashIcon} />
+                  </Button>
+                </View>
+              )}
+            </>
+          ) : (
+            <>
+              <ProfileCard.AvatarPlaceholder />
+              <ProfileCard.NameAndHandlePlaceholder />
+            </>
+          )}
+        </ProfileCard.Header>
+      </ProfileCard.Outer>
+
+      <VerificationRemovePrompt
+        control={verificationRemovePromptControl}
+        profile={subject}
+        verifications={[verification]}
+        onConfirm={() => outerDialogControl.close()}
+      />
+    </View>
+  )
+}
diff --git a/src/components/verification/VerifierDialog.tsx b/src/components/verification/VerifierDialog.tsx
new file mode 100644
index 000000000..bfe49ec19
--- /dev/null
+++ b/src/components/verification/VerifierDialog.tsx
@@ -0,0 +1,153 @@
+import {Text as RNText, View} from 'react-native'
+import {Image} from 'expo-image'
+import {msg, Trans} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {urls} from '#/lib/constants'
+import {getUserDisplayName} from '#/lib/getUserDisplayName'
+import {NON_BREAKING_SPACE} from '#/lib/strings/constants'
+import {logger} from '#/logger'
+import {useSession} from '#/state/session'
+import {atoms as a, useBreakpoints, useTheme} from '#/alf'
+import {Button, ButtonText} from '#/components/Button'
+import * as Dialog from '#/components/Dialog'
+import {VerifierCheck} from '#/components/icons/VerifierCheck'
+import {Link} from '#/components/Link'
+import {Text} from '#/components/Typography'
+import {type FullVerificationState} from '#/components/verification'
+import type * as bsky from '#/types/bsky'
+
+export {useDialogControl} from '#/components/Dialog'
+
+export function VerifierDialog({
+  control,
+  profile,
+  verificationState,
+}: {
+  control: Dialog.DialogControlProps
+  profile: bsky.profile.AnyProfileView
+  verificationState: FullVerificationState
+}) {
+  return (
+    <Dialog.Outer control={control}>
+      <Inner
+        control={control}
+        profile={profile}
+        verificationState={verificationState}
+      />
+      <Dialog.Close />
+    </Dialog.Outer>
+  )
+}
+
+function Inner({
+  profile,
+  control,
+}: {
+  control: Dialog.DialogControlProps
+  profile: bsky.profile.AnyProfileView
+  verificationState: FullVerificationState
+}) {
+  const t = useTheme()
+  const {_} = useLingui()
+  const {gtMobile} = useBreakpoints()
+  const {currentAccount} = useSession()
+
+  const isSelf = profile.did === currentAccount?.did
+  const userName = getUserDisplayName(profile)
+  const label = isSelf
+    ? _(msg`You are a trusted verifier`)
+    : _(msg`${userName} is a trusted verifier`)
+
+  return (
+    <Dialog.ScrollableInner
+      label={label}
+      style={[
+        gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
+      ]}>
+      <Dialog.Handle />
+
+      <View style={[a.gap_lg]}>
+        <View
+          style={[
+            a.w_full,
+            a.rounded_md,
+            a.overflow_hidden,
+            t.atoms.bg_contrast_25,
+            {minHeight: 100},
+          ]}>
+          <Image
+            accessibilityIgnoresInvertColors
+            source={require('../../../assets/images/initial_verification_announcement_1.png')}
+            style={[
+              {
+                aspectRatio: 353 / 160,
+              },
+            ]}
+            alt={_(
+              msg`An illustration showing that Bluesky selects trusted verifiers, and trusted verifiers in turn verify individual user accounts.`,
+            )}
+          />
+        </View>
+
+        <View style={[a.gap_sm]}>
+          <Text style={[a.text_2xl, a.font_bold, a.pr_4xl, a.leading_tight]}>
+            {label}
+          </Text>
+          <Text style={[a.text_md, a.leading_snug]}>
+            <Trans>
+              Accounts with a scalloped blue check mark
+              <RNText>
+                {NON_BREAKING_SPACE}
+                <VerifierCheck width={14} />
+                {NON_BREAKING_SPACE}
+              </RNText>
+              can verify others. These trusted verifiers are selected by
+              Bluesky.
+            </Trans>
+          </Text>
+        </View>
+
+        <View
+          style={[
+            a.w_full,
+            a.gap_sm,
+            a.justify_end,
+            gtMobile ? [a.flex_row, a.justify_end] : [a.flex_col],
+          ]}>
+          <Link
+            overridePresentation
+            to={urls.website.blog.initialVerificationAnnouncement}
+            label={_(msg`Learn more about verification on Bluesky`)}
+            size="small"
+            variant="solid"
+            color="primary"
+            style={[a.justify_center]}
+            onPress={() => {
+              logger.metric('verification:learn-more', {
+                location: 'verifierDialog',
+              })
+            }}>
+            <ButtonText>
+              <Trans>Learn more</Trans>
+            </ButtonText>
+          </Link>
+          <Button
+            label={_(msg`Close dialog`)}
+            size="small"
+            variant="solid"
+            color="secondary"
+            onPress={() => {
+              control.close()
+            }}>
+            <ButtonText>
+              <Trans>Close</Trans>
+            </ButtonText>
+          </Button>
+        </View>
+      </View>
+
+      <Dialog.Close />
+    </Dialog.ScrollableInner>
+  )
+}
diff --git a/src/components/verification/index.ts b/src/components/verification/index.ts
new file mode 100644
index 000000000..7a83a160a
--- /dev/null
+++ b/src/components/verification/index.ts
@@ -0,0 +1,113 @@
+import {useMemo} from 'react'
+
+import {usePreferencesQuery} from '#/state/queries/preferences'
+import {useCurrentAccountProfile} from '#/state/queries/useCurrentAccountProfile'
+import {useSession} from '#/state/session'
+import type * as bsky from '#/types/bsky'
+
+export type FullVerificationState = {
+  profile: {
+    role: 'default' | 'verifier'
+    isVerified: boolean
+    wasVerified: boolean
+    isViewer: boolean
+    showBadge: boolean
+  }
+  viewer:
+    | {
+        role: 'default'
+        isVerified: boolean
+      }
+    | {
+        role: 'verifier'
+        isVerified: boolean
+        hasIssuedVerification: boolean
+      }
+}
+
+export function useFullVerificationState({
+  profile,
+}: {
+  profile: bsky.profile.AnyProfileView
+}): FullVerificationState {
+  const {currentAccount} = useSession()
+  const currentAccountProfile = useCurrentAccountProfile()
+  const profileState = useSimpleVerificationState({profile})
+  const viewerState = useSimpleVerificationState({
+    profile: currentAccountProfile,
+  })
+
+  return useMemo(() => {
+    const verifications = profile.verification?.verifications || []
+    const wasVerified =
+      profileState.role === 'default' &&
+      !profileState.isVerified &&
+      verifications.length > 0
+    const hasIssuedVerification = Boolean(
+      viewerState &&
+        viewerState.role === 'verifier' &&
+        profileState.role === 'default' &&
+        verifications.find(v => v.issuer === currentAccount?.did),
+    )
+
+    return {
+      profile: {
+        ...profileState,
+        wasVerified,
+        isViewer: profile.did === currentAccount?.did,
+        showBadge: profileState.showBadge,
+      },
+      viewer:
+        viewerState.role === 'verifier'
+          ? {
+              role: 'verifier',
+              isVerified: viewerState.isVerified,
+              hasIssuedVerification,
+            }
+          : {
+              role: 'default',
+              isVerified: viewerState.isVerified,
+            },
+    }
+  }, [profile, currentAccount, profileState, viewerState])
+}
+
+export type SimpleVerificationState = {
+  role: 'default' | 'verifier'
+  isVerified: boolean
+  showBadge: boolean
+}
+
+export function useSimpleVerificationState({
+  profile,
+}: {
+  profile?: bsky.profile.AnyProfileView
+}): SimpleVerificationState {
+  const preferences = usePreferencesQuery()
+  const prefs = useMemo(
+    () => preferences.data?.verificationPrefs || {hideBadges: false},
+    [preferences.data?.verificationPrefs],
+  )
+  return useMemo(() => {
+    if (!profile || !profile.verification) {
+      return {
+        role: 'default',
+        isVerified: false,
+        showBadge: false,
+      }
+    }
+
+    const {verifiedStatus, trustedVerifierStatus} = profile.verification
+    const isVerifiedUser = ['valid', 'invalid'].includes(verifiedStatus)
+    const isVerifierUser = ['valid', 'invalid'].includes(trustedVerifierStatus)
+    const isVerified =
+      (isVerifiedUser && verifiedStatus === 'valid') ||
+      (isVerifierUser && trustedVerifierStatus === 'valid')
+
+    return {
+      role: isVerifierUser ? 'verifier' : 'default',
+      isVerified,
+      showBadge: prefs.hideBadges ? false : isVerified,
+    }
+  }, [profile, prefs])
+}