this repo has no description
1import {useCallback} from 'react'
2import {View} from 'react-native'
3import {Image} from 'expo-image'
4import {msg} from '@lingui/core/macro'
5import {useLingui} from '@lingui/react'
6import {Trans} from '@lingui/react/macro'
7
8import {urls} from '#/lib/constants'
9import {atoms as a, useBreakpoints, useTheme} from '#/alf'
10import {Button, ButtonText} from '#/components/Button'
11import * as Dialog from '#/components/Dialog'
12import {useNuxDialogContext} from '#/components/dialogs/nuxs'
13import {Sparkle_Stroke2_Corner0_Rounded as SparkleIcon} from '#/components/icons/Sparkle'
14import {VerifierCheck} from '#/components/icons/VerifierCheck'
15import {Link} from '#/components/Link'
16import {Span, Text} from '#/components/Typography'
17import {useAnalytics} from '#/analytics'
18import {IS_NATIVE} from '#/env'
19
20export function InitialVerificationAnnouncement() {
21 const t = useTheme()
22 const {_} = useLingui()
23 const ax = useAnalytics()
24 const {gtMobile} = useBreakpoints()
25 const nuxDialogs = useNuxDialogContext()
26 const control = Dialog.useDialogControl()
27
28 Dialog.useAutoOpen(control)
29
30 const onClose = useCallback(() => {
31 nuxDialogs.dismissActiveNux()
32 }, [nuxDialogs])
33
34 return (
35 <Dialog.Outer control={control} onClose={onClose}>
36 <Dialog.Handle />
37
38 <Dialog.ScrollableInner
39 label={_(msg`Announcing verification on Bluesky`)}
40 style={[
41 gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
42 ]}>
43 <View style={[a.align_start, a.gap_xl]}>
44 <View
45 style={[
46 a.pl_sm,
47 a.pr_md,
48 a.py_sm,
49 a.rounded_full,
50 a.flex_row,
51 a.align_center,
52 a.gap_xs,
53 {
54 backgroundColor: t.palette.primary_25,
55 },
56 ]}>
57 <SparkleIcon fill={t.palette.primary_700} size="sm" />
58 <Text
59 style={[
60 a.font_semi_bold,
61 {
62 color: t.palette.primary_700,
63 },
64 ]}>
65 <Trans>New Feature</Trans>
66 </Text>
67 </View>
68
69 <View
70 style={[
71 a.w_full,
72 a.rounded_md,
73 a.overflow_hidden,
74 t.atoms.bg_contrast_25,
75 {minHeight: 100},
76 ]}>
77 <Image
78 accessibilityIgnoresInvertColors
79 source={require('../../../../assets/images/initial_verification_announcement_1.png')}
80 style={[
81 {
82 aspectRatio: 353 / 160,
83 },
84 ]}
85 alt={_(
86 msg`An illustration showing that Bluesky selects trusted verifiers, and trusted verifiers in turn verify individual user accounts.`,
87 )}
88 />
89 </View>
90
91 <View style={[a.gap_xs]}>
92 <Text style={[a.text_2xl, a.font_semi_bold, a.leading_snug]}>
93 <Trans>A new form of verification</Trans>
94 </Text>
95 <Text style={[a.leading_snug, a.text_md]}>
96 <Trans>
97 We’re introducing a new layer of verification on Bluesky — an
98 easy-to-see checkmark.
99 </Trans>
100 </Text>
101 </View>
102
103 <View
104 style={[
105 a.w_full,
106 a.rounded_md,
107 a.overflow_hidden,
108 t.atoms.bg_contrast_25,
109 {minHeight: 100},
110 ]}>
111 <Image
112 accessibilityIgnoresInvertColors
113 source={require('../../../../assets/images/initial_verification_announcement_2.png')}
114 style={[
115 {
116 aspectRatio: 353 / 196,
117 },
118 ]}
119 alt={_(
120 msg`An mockup of a iPhone showing the Bluesky app open to the profile of a verified user with a blue checkmark next to their display name.`,
121 )}
122 />
123 </View>
124
125 <View style={[a.gap_sm]}>
126 <View style={[a.flex_row, a.align_center, a.gap_xs]}>
127 <VerifierCheck width={14} />
128 <Text style={[a.text_lg, a.font_semi_bold, a.leading_snug]}>
129 <Trans>Who can verify?</Trans>
130 </Text>
131 </View>
132 <View style={[a.gap_sm]}>
133 <Text style={[a.leading_snug, a.text_md]}>
134 <Trans>
135 Bluesky will proactively verify notable and authentic
136 accounts.
137 </Trans>
138 </Text>
139 <Text style={[a.leading_snug, a.text_md]}>
140 <Trans>
141 Trust emerges from relationships, communities, and shared
142 context, so we’re also enabling{' '}
143 <Span style={[a.font_semi_bold]}>trusted verifiers</Span>:
144 organizations that can directly issue verification.
145 </Trans>
146 </Text>
147 <Text style={[a.leading_snug, a.text_md]}>
148 <Trans>
149 When you tap on a check, you’ll see which organizations have
150 granted verification.
151 </Trans>
152 </Text>
153 </View>
154 </View>
155
156 <View style={[a.w_full, a.gap_md]}>
157 <Link
158 overridePresentation
159 to={urls.website.blog.initialVerificationAnnouncement}
160 label={_(msg`Read blog post`)}
161 size="small"
162 variant="solid"
163 color="primary"
164 style={[a.justify_center, a.w_full]}
165 onPress={() => {
166 ax.metric('verification:learn-more', {
167 location: 'initialAnnouncementeNux',
168 })
169 }}>
170 <ButtonText>
171 <Trans>Read blog post</Trans>
172 </ButtonText>
173 </Link>
174 {IS_NATIVE && (
175 <Button
176 label={_(msg`Close`)}
177 size="small"
178 variant="solid"
179 color="secondary"
180 style={[a.justify_center, a.w_full]}
181 onPress={() => {
182 control.close()
183 }}>
184 <ButtonText>
185 <Trans>Close</Trans>
186 </ButtonText>
187 </Button>
188 )}
189 </View>
190 </View>
191
192 <Dialog.Close />
193 </Dialog.ScrollableInner>
194 </Dialog.Outer>
195 )
196}