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