Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 witchsky.app
Something went wrong. Try again.
5.7 kB · 196 lines
TSX
at prod
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197import {type Insets, View} from 'react-native'import {useLingui} from '@lingui/react/macro'
import {type Shadow} from '#/state/cache/types'import {useDeerVerification} from '#/state/preferences/deer-verification'import {atoms as a, 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 {useAnalytics} from '#/analytics'import type * as bsky from '#/types/bsky'import {type VerificationBadge, verificationBadges} from './badges'import {verifierColor} from './verifier-color'
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, width, hitSlop,}: { profile: Shadow<bsky.profile.AnyProfileView> width: number hitSlop: Insets}) { const state = useFullVerificationState({ profile, })
const {perVerifierBadges} = useDeerVerification() if (!shouldShowVerificationCheckButton(state)) return null const badges = state.profile.showBadge ? verificationBadges(profile, !!perVerifierBadges) : [] // Keep the existing access to invalid/hidden verifications for their owner. if (!badges.length) badges.push({kind: 'verification'}) return ( <View style={[a.flex_row, a.align_center, a.gap_2xs]}> {badges.map((badge, index) => ( <Badge key={ badge.kind === 'verifier' ? 'verifier' : (badge.issuer ?? 'verification') } badge={badge} profile={profile} verificationState={state} width={width} hitSlop={{ ...hitSlop, left: index === 0 ? hitSlop.left : 1, right: index === badges.length - 1 ? hitSlop.right : 1, }} /> ))} </View> )}
function Badge({ badge, profile, verificationState: state, width, hitSlop,}: { profile: Shadow<bsky.profile.AnyProfileView> badge: VerificationBadge verificationState: FullVerificationState width: number hitSlop: Insets}) { const t = useTheme() const {perVerifierBadges} = useDeerVerification() const ax = useAnalytics() const {t: l} = useLingui() const verificationsDialogControl = useDialogControl() const verifierDialogControl = useDialogControl()
const isVerifier = badge.kind === 'verifier' const issuer = badge.kind === 'verification' ? badge.issuer : undefined const verifiedByHidden = !state.profile.showBadge && state.profile.isViewer
return ( <> <Button label={ isVerifier ? l`View trusted verifier status` : issuer ? l`View verification from ${issuer}` : state.profile.isViewer ? l`View your verifications` : l`View this user's verifications` } hitSlop={hitSlop} onPress={evt => { evt.preventDefault() ax.metric('verification:badge:click', {}) if (isVerifier) { verifierDialogControl.open() } else { verificationsDialogControl.open() } }}> {({hovered}) => ( <View style={[ a.justify_end, a.align_end, a.transition_transform, { width: width, height: width, transform: [ { scale: hovered ? 1.1 : 1, }, ], }, ]}> <VerificationCheck width={width} fill={ isVerifier ? perVerifierBadges ? verifierColor(badge.did, t) : t.palette.primary_500 : verifiedByHidden ? t.atoms.bg_contrast_100.backgroundColor : state.profile.isVerified ? perVerifierBadges ? verifierColor(issuer ?? profile.did, t) : t.palette.primary_500 : t.atoms.bg_contrast_100.backgroundColor } verifier={isVerifier} /> </View> )} </Button> {isVerifier ? ( <VerifierDialog control={verifierDialogControl} profile={profile} verificationState={state} /> ) : ( <VerificationsDialog issuer={issuer} control={verificationsDialogControl} profile={profile} verificationState={state} /> )} </> )}