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