Bluesky app fork with some witchin' additions 馃挮
witchsky.app
bluesky
fork
client
1import {View} from 'react-native'
2import {msg} from '@lingui/core/macro'
3import {useLingui} from '@lingui/react'
4
5import {type Shadow} from '#/state/cache/types'
6import {atoms as a, useTheme} from '#/alf'
7import {Button} from '#/components/Button'
8import {useDialogControl} from '#/components/Dialog'
9import {useFullVerificationState} from '#/components/verification'
10import {type FullVerificationState} from '#/components/verification'
11import {VerificationCheck} from '#/components/verification/VerificationCheck'
12import {VerificationsDialog} from '#/components/verification/VerificationsDialog'
13import {VerifierDialog} from '#/components/verification/VerifierDialog'
14import {useAnalytics} from '#/analytics'
15import type * as bsky from '#/types/bsky'
16
17export function shouldShowVerificationCheckButton(
18 state: FullVerificationState,
19) {
20 let ok = false
21
22 if (state.profile.role === 'default') {
23 if (state.profile.isVerified) {
24 ok = true
25 } else if (state.profile.isViewer && state.profile.wasVerified) {
26 ok = true
27 } else if (
28 state.viewer.role === 'verifier' &&
29 state.viewer.hasIssuedVerification
30 ) {
31 ok = true
32 }
33 } else if (state.profile.role === 'verifier') {
34 if (state.profile.isViewer) {
35 ok = true
36 } else if (state.profile.isVerified) {
37 ok = true
38 }
39 }
40
41 if (
42 !state.profile.showBadge &&
43 !state.profile.isViewer &&
44 !(state.viewer.role === 'verifier' && state.viewer.hasIssuedVerification)
45 ) {
46 ok = false
47 }
48
49 return ok
50}
51
52export function VerificationCheckButton({
53 profile,
54 width,
55}: {
56 profile: Shadow<bsky.profile.AnyProfileView>
57 width: number
58}) {
59 const state = useFullVerificationState({
60 profile,
61 })
62
63 if (shouldShowVerificationCheckButton(state)) {
64 return <Badge profile={profile} verificationState={state} width={width} />
65 }
66
67 return null
68}
69
70function Badge({
71 profile,
72 verificationState: state,
73 width,
74}: {
75 profile: Shadow<bsky.profile.AnyProfileView>
76 verificationState: FullVerificationState
77 width: number
78}) {
79 const t = useTheme()
80 const ax = useAnalytics()
81 const {_} = useLingui()
82 const verificationsDialogControl = useDialogControl()
83 const verifierDialogControl = useDialogControl()
84
85 const verifiedByHidden = !state.profile.showBadge && state.profile.isViewer
86
87 return (
88 <>
89 <Button
90 label={
91 state.profile.isViewer
92 ? _(msg`View your verifications`)
93 : _(msg`View this user's verifications`)
94 }
95 hitSlop={20}
96 onPress={evt => {
97 evt.preventDefault()
98 ax.metric('verification:badge:click', {})
99 if (state.profile.role === 'verifier') {
100 verifierDialogControl.open()
101 } else {
102 verificationsDialogControl.open()
103 }
104 }}>
105 {({hovered}) => (
106 <View
107 style={[
108 a.justify_end,
109 a.align_end,
110 a.transition_transform,
111 {
112 width: width,
113 height: width,
114 transform: [
115 {
116 scale: hovered ? 1.1 : 1,
117 },
118 ],
119 },
120 ]}>
121 <VerificationCheck
122 width={width}
123 fill={
124 verifiedByHidden
125 ? t.atoms.bg_contrast_100.backgroundColor
126 : state.profile.isVerified
127 ? t.palette.primary_500
128 : t.atoms.bg_contrast_100.backgroundColor
129 }
130 verifier={state.profile.role === 'verifier'}
131 />
132 </View>
133 )}
134 </Button>
135
136 <VerificationsDialog
137 control={verificationsDialogControl}
138 profile={profile}
139 verificationState={state}
140 />
141
142 <VerifierDialog
143 control={verifierDialogControl}
144 profile={profile}
145 verificationState={state}
146 />
147 </>
148 )
149}