1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
import {View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'
import {urls} from '#/lib/constants'
import {logger} from '#/logger'
import {
usePreferencesQuery,
type UsePreferencesQueryResponse,
} from '#/state/queries/preferences'
import {useSetVerificationPrefsMutation} from '#/state/queries/preferences'
import * as SettingsList from '#/screens/Settings/components/SettingsList'
import {atoms as a, useGutters} from '#/alf'
import {Admonition} from '#/components/Admonition'
import * as Toggle from '#/components/forms/Toggle'
import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck'
import * as Layout from '#/components/Layout'
import {InlineLinkText} from '#/components/Link'
import {Loader} from '#/components/Loader'
export function Screen() {
const {_} = useLingui()
const gutters = useGutters(['base'])
const {data: preferences} = usePreferencesQuery()
return (
<Layout.Screen testID="ModerationVerificationSettingsScreen">
<Layout.Header.Outer>
<Layout.Header.BackButton />
<Layout.Header.Content>
<Layout.Header.TitleText>
<Trans>Verification Settings</Trans>
</Layout.Header.TitleText>
</Layout.Header.Content>
<Layout.Header.Slot />
</Layout.Header.Outer>
<Layout.Content>
<SettingsList.Container>
<SettingsList.Item>
<Admonition type="tip" style={[a.flex_1]}>
<Trans>
Verifications on Bluesky work differently than on other
platforms.{' '}
<InlineLinkText
overridePresentation
to={urls.website.blog.initialVerificationAnnouncement}
label={_(
msg({
message: `Learn more`,
context: `english-only-resource`,
}),
)}
onPress={() => {
logger.metric(
'verification:learn-more',
{
location: 'verificationSettings',
},
{statsig: true},
)
}}>
Learn more here.
</InlineLinkText>
</Trans>
</Admonition>
</SettingsList.Item>
{preferences ? (
<Inner preferences={preferences} />
) : (
<View style={[gutters, a.justify_center, a.align_center]}>
<Loader size="xl" />
</View>
)}
</SettingsList.Container>
</Layout.Content>
</Layout.Screen>
)
}
function Inner({preferences}: {preferences: UsePreferencesQueryResponse}) {
const {_} = useLingui()
const {hideBadges} = preferences.verificationPrefs
const {mutate: setVerificationPrefs, isPending} =
useSetVerificationPrefsMutation()
return (
<Toggle.Item
type="checkbox"
name="hideBadges"
label={_(msg`Hide verification badges`)}
value={hideBadges}
disabled={isPending}
onChange={value => {
setVerificationPrefs({hideBadges: value})
}}>
<SettingsList.Item>
<SettingsList.ItemIcon icon={CircleCheck} />
<SettingsList.ItemText>
<Trans>Hide verification badges</Trans>
</SettingsList.ItemText>
<Toggle.Platform />
</SettingsList.Item>
</Toggle.Item>
)
}
|
