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