ansxor.ca
forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 馃挮
xan.lol
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 {useDeerVerificationEnabled} from '#/state/preferences/deer-verification'
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 const deerVerificationEnabled = useDeerVerificationEnabled()
65
66 return (
67 <Dialog.ScrollableInner
68 label={label}
69 style={[
70 gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full,
71 ]}>
72 <View style={[a.gap_lg]}>
73 {!deerVerificationEnabled && (
74 <View
75 style={[
76 a.w_full,
77 a.rounded_md,
78 a.overflow_hidden,
79 t.atoms.bg_contrast_25,
80 {minHeight: 100},
81 ]}>
82 <Image
83 accessibilityIgnoresInvertColors
84 source={require('../../../assets/images/initial_verification_announcement_1.png')}
85 style={[
86 {
87 aspectRatio: 353 / 160,
88 },
89 ]}
90 alt={_(
91 msg`An illustration showing that Bluesky selects trusted verifiers, and trusted verifiers in turn verify individual user accounts.`,
92 )}
93 />
94 </View>
95 )}
96
97 <View style={[a.gap_sm]}>
98 <Text
99 style={[a.text_2xl, a.font_semi_bold, a.pr_4xl, a.leading_tight]}>
100 {label}
101 </Text>
102 <Text style={[a.text_md, a.leading_snug]}>
103 <Trans>
104 Accounts with a scalloped blue check mark{' '}
105 <RNText>
106 <VerifierCheck width={14} />
107 </RNText>{' '}
108 can verify others. These trusted verifiers are selected by{' '}
109 {deerVerificationEnabled ? 'you' : 'Bluesky'}.
110 </Trans>
111 </Text>
112 </View>
113
114 <View
115 style={[
116 a.w_full,
117 a.gap_sm,
118 a.justify_end,
119 gtMobile ? [a.flex_row, a.justify_end] : [a.flex_col],
120 ]}>
121 <Link
122 overridePresentation
123 to={urls.website.blog.initialVerificationAnnouncement}
124 label={_(
125 msg({
126 message: `Learn more about verification on Bluesky`,
127 context: `english-only-resource`,
128 }),
129 )}
130 size="small"
131 color="primary"
132 style={[a.justify_center]}
133 onPress={() => {
134 ax.metric('verification:learn-more', {
135 location: 'verifierDialog',
136 })
137 }}>
138 <ButtonText>
139 <Trans context="english-only-resource">Learn more</Trans>
140 </ButtonText>
141 </Link>
142 <Button
143 label={_(msg`Close dialog`)}
144 size="small"
145 color="secondary"
146 onPress={() => {
147 control.close()
148 }}>
149 <ButtonText>
150 <Trans>Close</Trans>
151 </ButtonText>
152 </Button>
153 </View>
154 </View>
155 </Dialog.ScrollableInner>
156 )
157}