Something went wrong. Try again.
An ATproto social media client -- with an independent Appview.
Something went wrong. Try again.
4.2 kB · 155 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156import {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 = 14 }
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={evt => { evt.preventDefault() logger.metric('verification:badge:click', {}, {statsig: true}) if (state.profile.role === 'verifier') { verifierDialogControl.open() } else { verificationsDialogControl.open() } }}> {({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} /> </> )}