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>
This commit is contained in:
Eric Bailey
@@ -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} />
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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"
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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])
|
||||
}
|
||||
Reference in New Issue
Block a user