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>

1 files changed, 113 insertions, 0 deletions

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])
+}