Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {Text as RNText, View} from 'react-native'
2import {Image} from 'expo-image'
3import {msg} from '@lingui/core/macro'
4import {useLingui} from '@lingui/react'
5import {Trans} from '@lingui/react/macro'
6
7import {urls} from '#/lib/constants'
8import {getUserDisplayName} from '#/lib/getUserDisplayName'
9import {useDeerVerificationEnabled} from '#/state/preferences/deer-verification'
10import {useSession} from '#/state/session'
11import {atoms as a, useBreakpoints, useTheme} from '#/alf'
12import {Button, ButtonText} from '#/components/Button'
13import * as Dialog from '#/components/Dialog'
14import {VerifierCheck} from '#/components/icons/VerifierCheck'
15import {Link} from '#/components/Link'
16import {Text} from '#/components/Typography'
17import {type FullVerificationState} from '#/components/verification'
18import {useAnalytics} from '#/analytics'
19import type * as bsky from '#/types/bsky'
20
21export {useDialogControl} from '#/components/Dialog'
22
23export function VerifierDialog({
24 control,
25 profile,
26 verificationState,
27}: {
28 control: Dialog.DialogControlProps
29 profile: bsky.profile.AnyProfileView
30 verificationState: FullVerificationState
31}) {
32 return (
33 <Dialog.Outer control={control} nativeOptions={{preventExpansion: true}}>
34 <Dialog.Handle />
35 <Inner
36 control={control}
37 profile={profile}
38 verificationState={verificationState}
39 />
40 <Dialog.Close />
41 </Dialog.Outer>
42 )
43}
44
45function Inner({
46 profile,
47 control,
48}: {
49 control: Dialog.DialogControlProps
50 profile: bsky.profile.AnyProfileView
51 verificationState: FullVerificationState
52}) {
53 const t = useTheme()
54 const ax = useAnalytics()
55 const {_} = useLingui()
56 const {gtMobile} = useBreakpoints()
57 const {currentAccount} = useSession()
58
59 const isSelf = profile.did === currentAccount?.did
60 const userName = getUserDisplayName(profile)
61 const label = isSelf
62 ? _(msg`You are a trusted verifier`)
63 : _(msg`${userName} is a trusted verifier`)
64
65 const deerVerificationEnabled = useDeerVerificationEnabled()
66
67 return (
68 <Dialog.ScrollableInner
69 label={label}
70 style={[
71 gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
72 ]}>
73 <View style={[a.gap_lg]}>
74 {!deerVerificationEnabled && (
75 <View
76 style={[
77 a.w_full,
78 a.rounded_md,
79 a.overflow_hidden,
80 t.atoms.bg_contrast_25,
81 {minHeight: 100},
82 ]}>
83 <Image
84 accessibilityIgnoresInvertColors
85 source={require('../../../assets/images/initial_verification_announcement_1.png')}
86 style={[
87 {
88 aspectRatio: 353 / 160,
89 },
90 ]}
91 alt={_(
92 msg`An illustration showing that Bluesky selects trusted verifiers, and trusted verifiers in turn verify individual user accounts.`,
93 )}
94 />
95 </View>
96 )}
97
98 <View style={[a.gap_sm]}>
99 <Text
100 style={[a.text_2xl, a.font_semi_bold, a.pr_4xl, a.leading_tight]}>
101 {label}
102 </Text>
103 <Text style={[a.text_md, a.leading_snug]}>
104 <Trans>
105 Accounts with a scalloped blue check mark{' '}
106 <RNText>
107 <VerifierCheck width={14} />
108 </RNText>{' '}
109 can verify others. These trusted verifiers are selected by{' '}
110 {deerVerificationEnabled ? 'you' : 'Bluesky'}.
111 </Trans>
112 </Text>
113 </View>
114
115 <View
116 style={[
117 a.w_full,
118 a.gap_sm,
119 a.justify_end,
120 gtMobile ? [a.flex_row, a.justify_end] : [a.flex_col],
121 ]}>
122 <Link
123 overridePresentation
124 to={urls.website.blog.initialVerificationAnnouncement}
125 label={_(
126 msg({
127 message: `Learn more about verification on Bluesky`,
128 context: `english-only-resource`,
129 }),
130 )}
131 size="small"
132 color="primary"
133 style={[a.justify_center]}
134 onPress={() => {
135 ax.metric('verification:learn-more', {
136 location: 'verifierDialog',
137 })
138 }}>
139 <ButtonText>
140 <Trans context="english-only-resource">Learn more</Trans>
141 </ButtonText>
142 </Link>
143 <Button
144 label={_(msg`Close dialog`)}
145 size="small"
146 color="secondary"
147 onPress={() => {
148 control.close()
149 }}>
150 <ButtonText>
151 <Trans>Close</Trans>
152 </ButtonText>
153 </Button>
154 </View>
155 </View>
156 </Dialog.ScrollableInner>
157 )
158}