+1

.eslintrc.js

··· 34 34 'P', 35 35 'Admonition', 36 36 'Admonition.Admonition', 37 37 + 'Span', 37 38 ], 38 39 impliedTextProps: [], 39 40 suggestedTextWrappers: {

+1

assets/icons/circleCheck_stroke2_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.633-3.274a1 1 0 0 1 .141 1.407l-4.5 5.5a1 1 0 0 1-1.481.074l-2-2a1 1 0 1 1 1.414-1.414l1.219 1.219 3.8-4.645a1 1 0 0 1 1.407-.141Z" clip-rule="evenodd"/></svg>

+1

assets/icons/sparkle_stroke2_corner0_rounded.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M12 2a1 1 0 0 1 1 1c0 3.188.669 5.256 1.882 6.536C16.084 10.805 18.01 11.5 21 11.5a1 1 0 1 1 0 2c-2.99 0-4.916.695-6.118 1.964C13.67 16.744 13 18.812 13 22a1 1 0 1 1-2 0c0-3.188-.669-5.256-1.882-6.536C7.916 14.195 5.99 13.5 3 13.5a1 1 0 1 1 0-2c2.99 0 4.916-.695 6.118-1.964C10.33 8.256 11 6.188 11 3a1 1 0 0 1 1-1Zm0 6.734a7.6 7.6 0 0 1-1.43 2.178A7.3 7.3 0 0 1 8.349 12.5a7.3 7.3 0 0 1 2.22 1.588A7.6 7.6 0 0 1 12 16.267a7.6 7.6 0 0 1 1.43-2.179 7.3 7.3 0 0 1 2.221-1.588 7.3 7.3 0 0 1-2.22-1.588A7.6 7.6 0 0 1 12 8.734Z" clip-rule="evenodd"/></svg>

+1

assets/icons/verifiedCheck.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle cx="12" cy="12" r="12" fill="#208BFE"/><path fill="#fff" fill-rule="evenodd" d="M18.311 7.421a1.437 1.437 0 0 1 0 2.033l-6.571 6.571a1.437 1.437 0 0 1-2.033 0L6.42 12.74a1.438 1.438 0 0 1 2.033-2.033l2.27 2.269 5.554-5.555a1.437 1.437 0 0 1 2.033 0Z" clip-rule="evenodd"/></svg>

+1

assets/icons/verifierCheck.svg

··· 1 1 + <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#208BFE" d="M8.792 1.54a4.11 4.11 0 0 1 6.416 0 4.13 4.13 0 0 0 3.146 1.54c2.616.04 4.544 2.5 4 5.1a4.28 4.28 0 0 0 .777 3.462c1.6 2.104.912 5.17-1.427 6.36a4.21 4.21 0 0 0-2.177 2.774c-.62 2.584-3.408 3.948-5.781 2.83a4.1 4.1 0 0 0-3.492 0c-2.373 1.118-5.16-.246-5.78-2.83a4.21 4.21 0 0 0-2.178-2.775c-2.34-1.19-3.028-4.256-1.427-6.36a4.28 4.28 0 0 0 .777-3.46c-.544-2.602 1.384-5.06 4-5.1a4.13 4.13 0 0 0 3.146-1.54Z"/><path fill="#fff" fill-rule="evenodd" d="M17.659 8.399a1.36 1.36 0 0 1 0 1.925l-6.224 6.223a1.36 1.36 0 0 1-1.925 0L6.4 13.435a1.361 1.361 0 1 1 1.925-1.925l2.149 2.15 5.26-5.261a1.36 1.36 0 0 1 1.925 0Z" clip-rule="evenodd"/></svg>

assets/images/initial_verification_announcement_1.png

This is a binary file and will not be displayed.

assets/images/initial_verification_announcement_2.png

This is a binary file and will not be displayed.

+1

bskyweb/cmd/bskyweb/server.go

··· 263 263 e.GET("/moderation/modlists", server.WebGeneric) 264 264 e.GET("/moderation/muted-accounts", server.WebGeneric) 265 265 e.GET("/moderation/blocked-accounts", server.WebGeneric) 266 266 + e.GET("/moderation/verification-settings", server.WebGeneric) 266 267 e.GET("/settings", server.WebGeneric) 267 268 e.GET("/settings/language", server.WebGeneric) 268 269 e.GET("/settings/app-passwords", server.WebGeneric)

+1 -1

package.json

··· 58 58 "icons:optimize": "svgo -f ./assets/icons" 59 59 }, 60 60 "dependencies": { 61 61 - "@atproto/api": "^0.14.21", 61 61 + "@atproto/api": "^0.15.3", 62 62 "@bitdrift/react-native": "^0.6.8", 63 63 "@braintree/sanitize-url": "^6.0.2", 64 64 "@discord/bottom-sheet": "bluesky-social/react-native-bottom-sheet",

+9

src/Navigation.tsx

··· 70 70 import {MessagesInboxScreen} from '#/screens/Messages/Inbox' 71 71 import {MessagesSettingsScreen} from '#/screens/Messages/Settings' 72 72 import {ModerationScreen} from '#/screens/Moderation' 73 73 + import {Screen as ModerationVerificationSettings} from '#/screens/Moderation/VerificationSettings' 73 74 import {Screen as ModerationInteractionSettings} from '#/screens/ModerationInteractionSettings' 74 75 import {PostLikedByScreen} from '#/screens/Post/PostLikedBy' 75 76 import {PostQuotesScreen} from '#/screens/Post/PostQuotes' ··· 164 165 getComponent={() => ModerationInteractionSettings} 165 166 options={{ 166 167 title: title(msg`Post Interaction Settings`), 168 168 + requireAuth: true, 169 169 + }} 170 170 + /> 171 171 + <Stack.Screen 172 172 + name="ModerationVerificationSettings" 173 173 + getComponent={() => ModerationVerificationSettings} 174 174 + options={{ 175 175 + title: title(msg`Verification Settings`), 167 176 requireAuth: true, 168 177 }} 169 178 />

+42 -25

src/components/AccountList.tsx

··· 1 1 import React, {useCallback} from 'react' 2 2 import {View} from 'react-native' 3 3 - import {AppBskyActorDefs} from '@atproto/api' 3 3 + import {type AppBskyActorDefs} from '@atproto/api' 4 4 import {msg, Trans} from '@lingui/macro' 5 5 import {useLingui} from '@lingui/react' 6 6 ··· 12 12 import {atoms as a, useTheme} from '#/alf' 13 13 import {Check_Stroke2_Corner0_Rounded as Check} from '#/components/icons/Check' 14 14 import {ChevronRight_Stroke2_Corner0_Rounded as Chevron} from '#/components/icons/Chevron' 15 15 + import {useSimpleVerificationState} from '#/components/verification' 16 16 + import {VerificationCheck} from '#/components/verification/VerificationCheck' 15 17 import {Button} from './Button' 16 18 import {Text} from './Typography' 17 19 ··· 74 76 ]}> 75 77 <Text 76 78 style={[ 77 77 - a.align_baseline, 79 79 + a.font_bold, 78 80 a.flex_1, 79 81 a.flex_row, 80 82 a.py_sm, 81 81 - {paddingLeft: 48}, 83 83 + a.leading_tight, 84 84 + t.atoms.text_contrast_medium, 85 85 + {paddingLeft: 56}, 82 86 ]}> 83 87 {otherLabel ?? <Trans>Other account</Trans>} 84 88 </Text> ··· 105 109 }) { 106 110 const t = useTheme() 107 111 const {_} = useLingui() 112 112 + const verification = useSimpleVerificationState({profile}) 108 113 109 114 const onPress = useCallback(() => { 110 115 onSelect(account) ··· 114 119 <Button 115 120 testID={`chooseAccountBtn-${account.handle}`} 116 121 key={account.did} 117 117 - style={[a.flex_1]} 122 122 + style={[a.w_full]} 118 123 onPress={onPress} 119 124 label={ 120 125 isCurrentAccount ··· 127 132 a.flex_1, 128 133 a.flex_row, 129 134 a.align_center, 130 130 - {height: 48}, 135 135 + a.px_md, 136 136 + a.gap_sm, 137 137 + {height: 56}, 131 138 (hovered || pressed || isPendingAccount) && t.atoms.bg_contrast_25, 132 139 ]}> 133 133 - <View style={a.p_md}> 134 134 - <UserAvatar 135 135 - avatar={profile?.avatar} 136 136 - size={24} 137 137 - type={profile?.associated?.labeler ? 'labeler' : 'user'} 138 138 - /> 139 139 - </View> 140 140 - <Text style={[a.align_baseline, a.flex_1, a.flex_row, a.py_sm]}> 141 141 - <Text emoji style={[a.font_bold]}> 142 142 - {sanitizeDisplayName( 143 143 - profile?.displayName || profile?.handle || account.handle, 140 140 + <UserAvatar 141 141 + avatar={profile?.avatar} 142 142 + size={36} 143 143 + type={profile?.associated?.labeler ? 'labeler' : 'user'} 144 144 + /> 145 145 + 146 146 + <View style={[a.flex_1, a.gap_2xs, a.pr_2xl]}> 147 147 + <View style={[a.flex_row, a.align_center, a.gap_xs]}> 148 148 + <Text 149 149 + emoji 150 150 + style={[a.font_bold, a.leading_tight]} 151 151 + numberOfLines={1}> 152 152 + {sanitizeDisplayName( 153 153 + profile?.displayName || profile?.handle || account.handle, 154 154 + )} 155 155 + </Text> 156 156 + {verification.showBadge && ( 157 157 + <View> 158 158 + <VerificationCheck 159 159 + width={12} 160 160 + verifier={verification.role === 'verifier'} 161 161 + /> 162 162 + </View> 144 163 )} 145 145 - </Text>{' '} 146 146 - <Text emoji style={[t.atoms.text_contrast_medium]}> 147 147 - {sanitizeHandle(account.handle)} 164 164 + </View> 165 165 + <Text style={[a.leading_tight, t.atoms.text_contrast_medium]}> 166 166 + {sanitizeHandle(account.handle, '@')} 148 167 </Text> 149 149 - </Text> 168 168 + </View> 169 169 + 150 170 {isCurrentAccount ? ( 151 151 - <Check 152 152 - size="sm" 153 153 - style={[{color: t.palette.positive_600}, a.mr_md]} 154 154 - /> 171 171 + <Check size="sm" style={[{color: t.palette.positive_600}]} /> 155 172 ) : ( 156 156 - <Chevron size="sm" style={[t.atoms.text, a.mr_md]} /> 173 173 + <Chevron size="sm" style={[t.atoms.text]} /> 157 174 )} 158 175 </View> 159 176 )}

+5 -1

src/components/Link.tsx

··· 210 210 } 211 211 212 212 export type LinkProps = Omit<BaseLinkProps, 'disableMismatchWarning'> & 213 213 - Omit<ButtonProps, 'onPress' | 'disabled'> 213 213 + Omit<ButtonProps, 'onPress' | 'disabled'> & { 214 214 + overridePresentation?: boolean 215 215 + } 214 216 215 217 /** 216 218 * A interactive element that renders as a `<a>` tag on the web. On mobile it ··· 228 230 onLongPress: outerOnLongPress, 229 231 download, 230 232 shouldProxy, 233 233 + overridePresentation, 231 234 ...rest 232 235 }: LinkProps) { 233 236 const {href, isExternal, onPress, onLongPress} = useLink({ ··· 237 240 onPress: outerOnPress, 238 241 onLongPress: outerOnLongPress, 239 242 shouldProxy: shouldProxy, 243 243 + overridePresentation, 240 244 }) 241 245 242 246 return (

+19 -6

src/components/ProfileCard.tsx

··· 30 30 import * as Pills from '#/components/Pills' 31 31 import {RichText} from '#/components/RichText' 32 32 import {Text} from '#/components/Typography' 33 33 + import {useSimpleVerificationState} from '#/components/verification' 34 34 + import {VerificationCheck} from '#/components/verification/VerificationCheck' 33 35 import type * as bsky from '#/types/bsky' 34 36 35 37 export function Default({ ··· 186 188 profile.displayName || sanitizeHandle(profile.handle), 187 189 moderation.ui('displayName'), 188 190 ) 191 191 + const verification = useSimpleVerificationState({profile}) 189 192 return ( 190 190 - <Text 191 191 - emoji 192 192 - style={[a.text_md, a.font_bold, a.leading_snug, a.self_start]} 193 193 - numberOfLines={1}> 194 194 - {name} 195 195 - </Text> 193 193 + <View style={[a.flex_row, a.align_center]}> 194 194 + <Text 195 195 + emoji 196 196 + style={[a.text_md, a.font_bold, a.leading_snug, a.self_start]} 197 197 + numberOfLines={1}> 198 198 + {name} 199 199 + </Text> 200 200 + {verification.showBadge && ( 201 201 + <View style={[a.pl_xs]}> 202 202 + <VerificationCheck 203 203 + width={14} 204 204 + verifier={verification.role === 'verifier'} 205 205 + /> 206 206 + </View> 207 207 + )} 208 208 + </View> 196 209 ) 197 210 } 198 211

+32 -8

src/components/ProfileHoverCard/index.web.tsx

··· 1 1 import React from 'react' 2 2 import {View} from 'react-native' 3 3 - import {AppBskyActorDefs, moderateProfile, ModerationOpts} from '@atproto/api' 3 3 + import { 4 4 + type AppBskyActorDefs, 5 5 + moderateProfile, 6 6 + type ModerationOpts, 7 7 + } from '@atproto/api' 4 8 import {flip, offset, shift, size, useFloating} from '@floating-ui/react-dom' 5 9 import {msg, plural} from '@lingui/macro' 6 10 import {useLingui} from '@lingui/react' ··· 33 37 import {Portal} from '#/components/Portal' 34 38 import {RichText} from '#/components/RichText' 35 39 import {Text} from '#/components/Typography' 36 36 - import {ProfileHoverCardProps} from './types' 40 40 + import {useSimpleVerificationState} from '#/components/verification' 41 41 + import {VerificationCheck} from '#/components/verification/VerificationCheck' 42 42 + import {type ProfileHoverCardProps} from './types' 37 43 38 44 const floatingMiddlewares = [ 39 45 offset(4), ··· 412 418 [currentAccount, profile], 413 419 ) 414 420 const isLabeler = profile.associated?.labeler 421 421 + const verification = useSimpleVerificationState({profile}) 415 422 416 423 return ( 417 424 <View> ··· 465 472 466 473 <Link to={profileURL} label={_(msg`View profile`)} onPress={hide}> 467 474 <View style={[a.pb_sm, a.flex_1]}> 468 468 - <Text 469 469 - style={[a.pt_md, a.pb_xs, a.text_lg, a.font_bold, a.self_start]}> 470 470 - {sanitizeDisplayName( 471 471 - profile.displayName || sanitizeHandle(profile.handle), 472 472 - moderation.ui('displayName'), 475 475 + <View style={[a.flex_row, a.align_center, a.pt_md, a.pb_xs]}> 476 476 + <Text 477 477 + numberOfLines={1} 478 478 + style={[a.text_lg, a.font_bold, a.self_start]}> 479 479 + {sanitizeDisplayName( 480 480 + profile.displayName || sanitizeHandle(profile.handle), 481 481 + moderation.ui('displayName'), 482 482 + )} 483 483 + </Text> 484 484 + {verification.showBadge && ( 485 485 + <View 486 486 + style={[ 487 487 + a.pl_xs, 488 488 + { 489 489 + marginTop: -2, 490 490 + }, 491 491 + ]}> 492 492 + <VerificationCheck 493 493 + width={16} 494 494 + verifier={verification.role === 'verifier'} 495 495 + /> 496 496 + </View> 473 497 )} 474 474 - </Text> 498 498 + </View> 475 499 476 500 <ProfileHeaderHandle profile={profileShadow} disableTaps /> 477 501 </View>

+18 -8

src/components/Prompt.tsx

··· 1 1 import React from 'react' 2 2 - import {GestureResponderEvent, View} from 'react-native' 2 2 + import {type GestureResponderEvent, View} from 'react-native' 3 3 import {msg} from '@lingui/macro' 4 4 import {useLingui} from '@lingui/react' 5 5 6 6 - import {atoms as a, useBreakpoints, useTheme} from '#/alf' 7 7 - import {Button, ButtonColor, ButtonText} from '#/components/Button' 6 6 + import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf' 7 7 + import {Button, type ButtonColor, ButtonText} from '#/components/Button' 8 8 import * as Dialog from '#/components/Dialog' 9 9 import {Text} from '#/components/Typography' 10 10 - import {BottomSheetViewProps} from '../../modules/bottom-sheet' 10 10 + import {type BottomSheetViewProps} from '../../modules/bottom-sheet' 11 11 12 12 export { 13 13 type DialogControlProps as PromptControlProps, ··· 62 62 ) 63 63 } 64 64 65 65 - export function TitleText({children}: React.PropsWithChildren<{}>) { 65 65 + export function TitleText({ 66 66 + children, 67 67 + style, 68 68 + }: React.PropsWithChildren<ViewStyleProp>) { 66 69 const {titleId} = React.useContext(Context) 67 70 return ( 68 71 <Text 69 72 nativeID={titleId} 70 70 - style={[a.text_2xl, a.font_bold, a.pb_sm, a.leading_snug]}> 73 73 + style={[ 74 74 + a.flex_1, 75 75 + a.text_2xl, 76 76 + a.font_bold, 77 77 + a.pb_sm, 78 78 + a.leading_snug, 79 79 + style, 80 80 + ]}> 71 81 {children} 72 82 </Text> 73 83 ) ··· 190 200 }: React.PropsWithChildren<{ 191 201 control: Dialog.DialogOuterProps['control'] 192 202 title: string 193 193 - description: string 203 203 + description?: string 194 204 cancelButtonCta?: string 195 205 confirmButtonCta?: string 196 206 /** ··· 207 217 return ( 208 218 <Outer control={control} testID="confirmModal"> 209 219 <TitleText>{title}</TitleText> 210 210 - <DescriptionText>{description}</DescriptionText> 220 220 + {description && <DescriptionText>{description}</DescriptionText>} 211 221 <Actions> 212 222 <Action 213 223 cta={confirmButtonCta}

+3 -1

src/components/Typography.tsx

··· 6 6 childHasEmoji, 7 7 normalizeTextStyles, 8 8 renderChildrenWithEmoji, 9 9 - TextProps, 9 9 + type TextProps, 10 10 } from '#/alf/typography' 11 11 + 11 12 export type {TextProps} 13 13 + export {Text as Span} from 'react-native' 12 14 13 15 /** 14 16 * Our main text component. Use this most of the time.

+194

src/components/dialogs/nuxs/InitialVerificationAnnouncement.tsx

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

+13 -4

src/components/dialogs/nuxs/index.tsx

··· 1 1 import React from 'react' 2 2 - import {AppBskyActorDefs} from '@atproto/api' 2 2 + import {type AppBskyActorDefs} from '@atproto/api' 3 3 4 4 import {useGate} from '#/lib/statsig/statsig' 5 5 import {logger} from '#/logger' 6 6 import {Nux, useNuxs, useResetNuxs, useSaveNux} from '#/state/queries/nuxs' 7 7 import { 8 8 usePreferencesQuery, 9 9 - UsePreferencesQueryResponse, 9 9 + type UsePreferencesQueryResponse, 10 10 } from '#/state/queries/preferences' 11 11 import {useProfileQuery} from '#/state/queries/profile' 12 12 - import {SessionAccount, useSession} from '#/state/session' 12 12 + import {type SessionAccount, useSession} from '#/state/session' 13 13 import {useOnboardingState} from '#/state/shell' 14 14 + import {InitialVerificationAnnouncement} from '#/components/dialogs/nuxs/InitialVerificationAnnouncement' 14 15 /* 15 16 * NUXs 16 17 */ ··· 29 30 currentProfile: AppBskyActorDefs.ProfileViewDetailed 30 31 preferences: UsePreferencesQueryResponse 31 32 }) => boolean 32 32 - }[] = [] 33 33 + }[] = [ 34 34 + { 35 35 + id: Nux.InitialVerificationAnnouncement, 36 36 + enabled: () => true, 37 37 + }, 38 38 + ] 33 39 34 40 const Context = React.createContext<Context>({ 35 41 activeNux: undefined, ··· 163 169 return ( 164 170 <Context.Provider value={ctx}> 165 171 {/*For example, activeNux === Nux.NeueTypography && <NeueTypography />*/} 172 172 + {activeNux === Nux.InitialVerificationAnnouncement && ( 173 173 + <InitialVerificationAnnouncement /> 174 174 + )} 166 175 </Context.Provider> 167 176 ) 168 177 }

+32 -17

src/components/dms/MessagesListHeader.tsx

··· 1 1 import React, {useCallback} from 'react' 2 2 import {TouchableOpacity, View} from 'react-native' 3 3 import { 4 4 - AppBskyActorDefs, 5 5 - ModerationCause, 6 6 - ModerationDecision, 4 4 + type AppBskyActorDefs, 5 5 + type ModerationCause, 6 6 + type ModerationDecision, 7 7 } from '@atproto/api' 8 8 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome' 9 9 import {msg} from '@lingui/macro' ··· 12 12 13 13 import {BACK_HITSLOP} from '#/lib/constants' 14 14 import {makeProfileLink} from '#/lib/routes/links' 15 15 - import {NavigationProp} from '#/lib/routes/types' 15 15 + import {type NavigationProp} from '#/lib/routes/types' 16 16 import {sanitizeDisplayName} from '#/lib/strings/display-names' 17 17 import {isWeb} from '#/platform/detection' 18 18 - import {Shadow} from '#/state/cache/profile-shadow' 18 18 + import {type Shadow} from '#/state/cache/profile-shadow' 19 19 import {isConvoActive, useConvo} from '#/state/messages/convo' 20 20 - import {ConvoItem} from '#/state/messages/convo/types' 20 20 + import {type ConvoItem} from '#/state/messages/convo/types' 21 21 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' 22 22 import {atoms as a, useBreakpoints, useTheme, web} from '#/alf' 23 23 import {ConvoMenu} from '#/components/dms/ConvoMenu' ··· 25 25 import {Link} from '#/components/Link' 26 26 import {PostAlerts} from '#/components/moderation/PostAlerts' 27 27 import {Text} from '#/components/Typography' 28 28 + import {useSimpleVerificationState} from '#/components/verification' 29 29 + import {VerificationCheck} from '#/components/verification/VerificationCheck' 28 30 29 31 const PFP_SIZE = isWeb ? 40 : 34 30 32 ··· 149 151 const {_} = useLingui() 150 152 const t = useTheme() 151 153 const convoState = useConvo() 154 154 + const verification = useSimpleVerificationState({ 155 155 + profile, 156 156 + }) 152 157 153 158 const isDeletedAccount = profile?.handle === 'missing.invalid' 154 159 const displayName = isDeletedAccount ··· 185 190 /> 186 191 </View> 187 192 <View style={a.flex_1}> 188 188 - <Text 189 189 - emoji 190 190 - style={[ 191 191 - a.text_md, 192 192 - a.font_bold, 193 193 - a.self_start, 194 194 - web(a.leading_normal), 195 195 - ]} 196 196 - numberOfLines={1}> 197 197 - {displayName} 198 198 - </Text> 193 193 + <View style={[a.flex_row, a.align_center]}> 194 194 + <Text 195 195 + emoji 196 196 + style={[ 197 197 + a.text_md, 198 198 + a.font_bold, 199 199 + a.self_start, 200 200 + web(a.leading_normal), 201 201 + ]} 202 202 + numberOfLines={1}> 203 203 + {displayName} 204 204 + </Text> 205 205 + {verification.showBadge && ( 206 206 + <View style={[a.pl_xs]}> 207 207 + <VerificationCheck 208 208 + width={14} 209 209 + verifier={verification.role === 'verifier'} 210 210 + /> 211 211 + </View> 212 212 + )} 213 213 + </View> 199 214 {!isDeletedAccount && ( 200 215 <Text 201 216 style={[

+5

src/components/icons/CircleCheck.tsx

··· 1 1 + import {createSinglePathSVG} from './TEMPLATE' 2 2 + 3 3 + export const CircleCheck_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 4 + path: 'M12 4a8 8 0 1 0 0 16 8 8 0 0 0 0-16ZM2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm13.633-3.274a1 1 0 0 1 .141 1.407l-4.5 5.5a1 1 0 0 1-1.481.074l-2-2a1 1 0 1 1 1.414-1.414l1.219 1.219 3.8-4.645a1 1 0 0 1 1.407-.141Z', 5 5 + })

+5

src/components/icons/Sparkle.tsx

··· 1 1 + import {createSinglePathSVG} from './TEMPLATE' 2 2 + 3 3 + export const Sparkle_Stroke2_Corner0_Rounded = createSinglePathSVG({ 4 4 + path: 'M12 2a1 1 0 0 1 1 1c0 3.188.669 5.256 1.882 6.536C16.084 10.805 18.01 11.5 21 11.5a1 1 0 1 1 0 2c-2.99 0-4.916.695-6.118 1.964C13.67 16.744 13 18.812 13 22a1 1 0 1 1-2 0c0-3.188-.669-5.256-1.882-6.536C7.916 14.195 5.99 13.5 3 13.5a1 1 0 1 1 0-2c2.99 0 4.916-.695 6.118-1.964C10.33 8.256 11 6.188 11 3a1 1 0 0 1 1-1Zm0 6.734a7.608 7.608 0 0 1-1.43 2.178A7.285 7.285 0 0 1 8.349 12.5c.846.397 1.589.921 2.22 1.588A7.607 7.607 0 0 1 12 16.267a7.607 7.607 0 0 1 1.43-2.179 7.284 7.284 0 0 1 2.221-1.588 7.284 7.284 0 0 1-2.22-1.588A7.608 7.608 0 0 1 12 8.734Z', 5 5 + })

+30

src/components/icons/VerifiedCheck.tsx

··· 1 1 + import React from 'react' 2 2 + import Svg, {Circle, Path} from 'react-native-svg' 3 3 + 4 4 + import {type Props, useCommonSVGProps} from '#/components/icons/common' 5 5 + 6 6 + export const VerifiedCheck = React.forwardRef<Svg, Props>(function LogoImpl( 7 7 + props, 8 8 + ref, 9 9 + ) { 10 10 + const {fill, size, style, ...rest} = useCommonSVGProps(props) 11 11 + 12 12 + return ( 13 13 + <Svg 14 14 + fill="none" 15 15 + {...rest} 16 16 + ref={ref} 17 17 + viewBox="0 0 24 24" 18 18 + width={size} 19 19 + height={size} 20 20 + style={[style]}> 21 21 + <Circle cx="12" cy="12" r="12" fill={fill} /> 22 22 + <Path 23 23 + fill="#fff" 24 24 + fillRule="evenodd" 25 25 + clipRule="evenodd" 26 26 + d="M18.311 7.421a1.437 1.437 0 0 1 0 2.033l-6.571 6.571a1.437 1.437 0 0 1-2.033 0L6.42 12.74a1.438 1.438 0 0 1 2.033-2.033l2.27 2.269 5.554-5.555a1.437 1.437 0 0 1 2.033 0Z" 27 27 + /> 28 28 + </Svg> 29 29 + ) 30 30 + })

+35

src/components/icons/VerifierCheck.tsx

··· 1 1 + import React from 'react' 2 2 + import Svg, {Path} from 'react-native-svg' 3 3 + 4 4 + import {type Props, useCommonSVGProps} from '#/components/icons/common' 5 5 + 6 6 + export const VerifierCheck = React.forwardRef<Svg, Props>(function LogoImpl( 7 7 + props, 8 8 + ref, 9 9 + ) { 10 10 + const {fill, size, style, ...rest} = useCommonSVGProps(props) 11 11 + 12 12 + return ( 13 13 + <Svg 14 14 + fill="none" 15 15 + {...rest} 16 16 + ref={ref} 17 17 + viewBox="0 0 24 24" 18 18 + width={size} 19 19 + height={size} 20 20 + style={[style]}> 21 21 + <Path 22 22 + fill={fill} 23 23 + fillRule="evenodd" 24 24 + clipRule="evenodd" 25 25 + d="M8.792 1.54a4.11 4.11 0 0 1 6.416 0 4.128 4.128 0 0 0 3.146 1.54c2.616.04 4.544 2.5 4 5.1a4.277 4.277 0 0 0 .777 3.462c1.6 2.104.912 5.17-1.427 6.36a4.21 4.21 0 0 0-2.177 2.774c-.62 2.584-3.408 3.948-5.781 2.83a4.092 4.092 0 0 0-3.492 0c-2.373 1.118-5.16-.246-5.78-2.83a4.21 4.21 0 0 0-2.178-2.775c-2.34-1.19-3.028-4.256-1.427-6.36a4.277 4.277 0 0 0 .776-3.46c-.543-2.602 1.385-5.06 4.001-5.1a4.128 4.128 0 0 0 3.146-1.54Z" 26 26 + /> 27 27 + <Path 28 28 + fill="#fff" 29 29 + fillRule="evenodd" 30 30 + clipRule="evenodd" 31 31 + d="M17.659 8.399a1.361 1.361 0 0 1 0 1.925l-6.224 6.223a1.361 1.361 0 0 1-1.925 0L6.4 13.435a1.361 1.361 0 1 1 1.925-1.925l2.149 2.15 5.26-5.261a1.361 1.361 0 0 1 1.925 0Z" 32 32 + /> 33 33 + </Svg> 34 34 + ) 35 35 + })

+12

src/components/verification/VerificationCheck.tsx

··· 1 1 + import {type Props} from '#/components/icons/common' 2 2 + import {VerifiedCheck} from '#/components/icons/VerifiedCheck' 3 3 + import {VerifierCheck} from '#/components/icons/VerifierCheck' 4 4 + 5 5 + export function VerificationCheck({ 6 6 + verifier, 7 7 + ...rest 8 8 + }: Props & { 9 9 + verifier?: boolean 10 10 + }) { 11 11 + return verifier ? <VerifierCheck {...rest} /> : <VerifiedCheck {...rest} /> 12 12 + }

+155

src/components/verification/VerificationCheckButton.tsx

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

+70

src/components/verification/VerificationCreatePrompt.tsx

··· 1 1 + import {useCallback} from 'react' 2 2 + import {View} from 'react-native' 3 3 + import {msg} from '@lingui/macro' 4 4 + import {useLingui} from '@lingui/react' 5 5 + 6 6 + import {logger} from '#/logger' 7 7 + import {useModerationOpts} from '#/state/preferences/moderation-opts' 8 8 + import {useVerificationCreateMutation} from '#/state/queries/verification/useVerificationCreateMutation' 9 9 + import * as Toast from '#/view/com/util/Toast' 10 10 + import {atoms as a} from '#/alf' 11 11 + import {type DialogControlProps} from '#/components/Dialog' 12 12 + import {VerifiedCheck} from '#/components/icons/VerifiedCheck' 13 13 + import * as ProfileCard from '#/components/ProfileCard' 14 14 + import * as Prompt from '#/components/Prompt' 15 15 + import type * as bsky from '#/types/bsky' 16 16 + 17 17 + export function VerificationCreatePrompt({ 18 18 + control, 19 19 + profile, 20 20 + }: { 21 21 + control: DialogControlProps 22 22 + profile: bsky.profile.AnyProfileView 23 23 + }) { 24 24 + const {_} = useLingui() 25 25 + const moderationOpts = useModerationOpts() 26 26 + const {mutateAsync: create} = useVerificationCreateMutation() 27 27 + const onConfirm = useCallback(async () => { 28 28 + try { 29 29 + await create({profile}) 30 30 + Toast.show(_(msg`Successfully verified`)) 31 31 + } catch (e) { 32 32 + Toast.show(_(msg`Failed to create a verification`), 'xmark') 33 33 + logger.error('Failed to create a verification', { 34 34 + safeMessage: e, 35 35 + }) 36 36 + } 37 37 + }, [_, profile, create]) 38 38 + 39 39 + return ( 40 40 + <Prompt.Outer control={control}> 41 41 + <View style={[a.flex_row, a.align_center, a.gap_sm, a.pb_sm]}> 42 42 + <VerifiedCheck width={18} /> 43 43 + <Prompt.TitleText style={[a.pb_0]}> 44 44 + {_(msg`Verify this account?`)} 45 45 + </Prompt.TitleText> 46 46 + </View> 47 47 + <Prompt.DescriptionText> 48 48 + {_(msg`This action can be undone at any time.`)} 49 49 + </Prompt.DescriptionText> 50 50 + <View style={[a.pb_xl]}> 51 51 + {moderationOpts ? ( 52 52 + <ProfileCard.Header> 53 53 + <ProfileCard.Avatar 54 54 + profile={profile} 55 55 + moderationOpts={moderationOpts} 56 56 + /> 57 57 + <ProfileCard.NameAndHandle 58 58 + profile={profile} 59 59 + moderationOpts={moderationOpts} 60 60 + /> 61 61 + </ProfileCard.Header> 62 62 + ) : null} 63 63 + </View> 64 64 + <Prompt.Actions> 65 65 + <Prompt.Action cta={_(msg`Verify account`)} onPress={onConfirm} /> 66 66 + <Prompt.Cancel /> 67 67 + </Prompt.Actions> 68 68 + </Prompt.Outer> 69 69 + ) 70 70 + }

+50

src/components/verification/VerificationRemovePrompt.tsx

··· 1 1 + import {useCallback} from 'react' 2 2 + import {type AppBskyActorDefs} from '@atproto/api' 3 3 + import {msg} from '@lingui/macro' 4 4 + import {useLingui} from '@lingui/react' 5 5 + 6 6 + import {logger} from '#/logger' 7 7 + import {useVerificationsRemoveMutation} from '#/state/queries/verification/useVerificationsRemoveMutation' 8 8 + import * as Toast from '#/view/com/util/Toast' 9 9 + import {type DialogControlProps} from '#/components/Dialog' 10 10 + import * as Prompt from '#/components/Prompt' 11 11 + import type * as bsky from '#/types/bsky' 12 12 + 13 13 + export {useDialogControl as usePromptControl} from '#/components/Dialog' 14 14 + 15 15 + export function VerificationRemovePrompt({ 16 16 + control, 17 17 + profile, 18 18 + verifications, 19 19 + onConfirm: onConfirmInner, 20 20 + }: { 21 21 + control: DialogControlProps 22 22 + profile: bsky.profile.AnyProfileView 23 23 + verifications: AppBskyActorDefs.VerificationView[] 24 24 + onConfirm?: () => void 25 25 + }) { 26 26 + const {_} = useLingui() 27 27 + const {mutateAsync: remove} = useVerificationsRemoveMutation() 28 28 + const onConfirm = useCallback(async () => { 29 29 + onConfirmInner?.() 30 30 + try { 31 31 + await remove({profile, verifications}) 32 32 + Toast.show(_(msg`Removed verification`)) 33 33 + } catch (e) { 34 34 + Toast.show(_(msg`Failed to remove verification`), 'xmark') 35 35 + logger.error('Failed to remove verification', { 36 36 + safeMessage: e, 37 37 + }) 38 38 + } 39 39 + }, [_, profile, verifications, remove, onConfirmInner]) 40 40 + 41 41 + return ( 42 42 + <Prompt.Basic 43 43 + control={control} 44 44 + title={_(msg`Remove your verification for this account?`)} 45 45 + onConfirm={onConfirm} 46 46 + confirmButtonCta={_(msg`Remove verification`)} 47 47 + confirmButtonColor="negative" 48 48 + /> 49 49 + ) 50 50 + }

+257

src/components/verification/VerificationsDialog.tsx

··· 1 1 + import {View} from 'react-native' 2 2 + import {type AppBskyActorDefs} from '@atproto/api' 3 3 + import {msg, Trans} from '@lingui/macro' 4 4 + import {useLingui} from '@lingui/react' 5 5 + 6 6 + import {urls} from '#/lib/constants' 7 7 + import {getUserDisplayName} from '#/lib/getUserDisplayName' 8 8 + import {logger} from '#/logger' 9 9 + import {useModerationOpts} from '#/state/preferences/moderation-opts' 10 10 + import {useProfileQuery} from '#/state/queries/profile' 11 11 + import {useSession} from '#/state/session' 12 12 + import {atoms as a, useBreakpoints, useTheme} from '#/alf' 13 13 + import {Admonition} from '#/components/Admonition' 14 14 + import {Button, ButtonIcon, ButtonText} from '#/components/Button' 15 15 + import * as Dialog from '#/components/Dialog' 16 16 + import {useDialogControl} from '#/components/Dialog' 17 17 + import {Trash_Stroke2_Corner0_Rounded as TrashIcon} from '#/components/icons/Trash' 18 18 + import {Link} from '#/components/Link' 19 19 + import * as ProfileCard from '#/components/ProfileCard' 20 20 + import {Text} from '#/components/Typography' 21 21 + import {type FullVerificationState} from '#/components/verification' 22 22 + import {VerificationRemovePrompt} from '#/components/verification/VerificationRemovePrompt' 23 23 + import type * as bsky from '#/types/bsky' 24 24 + 25 25 + export {useDialogControl} from '#/components/Dialog' 26 26 + 27 27 + export function VerificationsDialog({ 28 28 + control, 29 29 + profile, 30 30 + verificationState, 31 31 + }: { 32 32 + control: Dialog.DialogControlProps 33 33 + profile: bsky.profile.AnyProfileView 34 34 + verificationState: FullVerificationState 35 35 + }) { 36 36 + return ( 37 37 + <Dialog.Outer control={control}> 38 38 + <Inner 39 39 + control={control} 40 40 + profile={profile} 41 41 + verificationState={verificationState} 42 42 + /> 43 43 + <Dialog.Close /> 44 44 + </Dialog.Outer> 45 45 + ) 46 46 + } 47 47 + 48 48 + function Inner({ 49 49 + profile, 50 50 + control, 51 51 + verificationState: state, 52 52 + }: { 53 53 + control: Dialog.DialogControlProps 54 54 + profile: bsky.profile.AnyProfileView 55 55 + verificationState: FullVerificationState 56 56 + }) { 57 57 + const t = useTheme() 58 58 + const {_} = useLingui() 59 59 + const {gtMobile} = useBreakpoints() 60 60 + 61 61 + const userName = getUserDisplayName(profile) 62 62 + const label = state.profile.isViewer 63 63 + ? state.profile.isVerified 64 64 + ? _(msg`You are verified`) 65 65 + : _(msg`Your verifications`) 66 66 + : state.profile.isVerified 67 67 + ? _(msg`${userName} is verified`) 68 68 + : _( 69 69 + msg({ 70 70 + message: `${userName}'s verifications`, 71 71 + comment: `Possessive, meaning "the verifications of {userName}"`, 72 72 + }), 73 73 + ) 74 74 + 75 75 + return ( 76 76 + <Dialog.ScrollableInner 77 77 + label={label} 78 78 + style={[ 79 79 + gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full, 80 80 + ]}> 81 81 + <Dialog.Handle /> 82 82 + 83 83 + <View style={[a.gap_sm, a.pb_lg]}> 84 84 + <Text style={[a.text_2xl, a.font_bold, a.pr_4xl, a.leading_tight]}> 85 85 + {label} 86 86 + </Text> 87 87 + <Text style={[a.text_md, a.leading_snug]}> 88 88 + {state.profile.isVerified ? ( 89 89 + <Trans> 90 90 + This account has a checkmark because it's been verified by trusted 91 91 + sources. 92 92 + </Trans> 93 93 + ) : ( 94 94 + <Trans> 95 95 + This account has one or more verifications, but it is not 96 96 + currently verified. 97 97 + </Trans> 98 98 + )} 99 99 + </Text> 100 100 + </View> 101 101 + 102 102 + {profile.verification ? ( 103 103 + <View style={[a.pb_xl, a.gap_md]}> 104 104 + <Text style={[a.text_sm, t.atoms.text_contrast_medium]}> 105 105 + <Trans>Verified by:</Trans> 106 106 + </Text> 107 107 + 108 108 + <View style={[a.gap_lg]}> 109 109 + {profile.verification.verifications.map(v => ( 110 110 + <VerifierCard 111 111 + key={v.uri} 112 112 + verification={v} 113 113 + subject={profile} 114 114 + outerDialogControl={control} 115 115 + /> 116 116 + ))} 117 117 + </View> 118 118 + 119 119 + {profile.verification.verifications.some(v => !v.isValid) && 120 120 + state.profile.isViewer && ( 121 121 + <Admonition type="warning" style={[a.mt_xs]}> 122 122 + <Trans>Some of your verifications are invalid.</Trans> 123 123 + </Admonition> 124 124 + )} 125 125 + </View> 126 126 + ) : null} 127 127 + 128 128 + <View 129 129 + style={[ 130 130 + a.w_full, 131 131 + a.gap_sm, 132 132 + a.justify_end, 133 133 + gtMobile 134 134 + ? [a.flex_row, a.flex_row_reverse, a.justify_start] 135 135 + : [a.flex_col], 136 136 + ]}> 137 137 + <Button 138 138 + label={_(msg`Close dialog`)} 139 139 + size="small" 140 140 + variant="solid" 141 141 + color="primary" 142 142 + onPress={() => { 143 143 + control.close() 144 144 + }}> 145 145 + <ButtonText> 146 146 + <Trans>Close</Trans> 147 147 + </ButtonText> 148 148 + </Button> 149 149 + <Link 150 150 + overridePresentation 151 151 + to={urls.website.blog.initialVerificationAnnouncement} 152 152 + label={_(msg`Learn more about verification on Bluesky`)} 153 153 + size="small" 154 154 + variant="solid" 155 155 + color="secondary" 156 156 + style={[a.justify_center]} 157 157 + onPress={() => { 158 158 + logger.metric('verification:learn-more', { 159 159 + location: 'verificationsDialog', 160 160 + }) 161 161 + }}> 162 162 + <ButtonText> 163 163 + <Trans>Learn more</Trans> 164 164 + </ButtonText> 165 165 + </Link> 166 166 + </View> 167 167 + 168 168 + <Dialog.Close /> 169 169 + </Dialog.ScrollableInner> 170 170 + ) 171 171 + } 172 172 + 173 173 + function VerifierCard({ 174 174 + verification, 175 175 + subject, 176 176 + outerDialogControl, 177 177 + }: { 178 178 + verification: AppBskyActorDefs.VerificationView 179 179 + subject: bsky.profile.AnyProfileView 180 180 + outerDialogControl: Dialog.DialogControlProps 181 181 + }) { 182 182 + const t = useTheme() 183 183 + const {_} = useLingui() 184 184 + const {currentAccount} = useSession() 185 185 + const moderationOpts = useModerationOpts() 186 186 + const {data: profile, error} = useProfileQuery({did: verification.issuer}) 187 187 + const verificationRemovePromptControl = useDialogControl() 188 188 + const canAdminister = verification.issuer === currentAccount?.did 189 189 + 190 190 + return ( 191 191 + <View 192 192 + style={{ 193 193 + opacity: verification.isValid ? 1 : 0.5, 194 194 + }}> 195 195 + <ProfileCard.Outer> 196 196 + <ProfileCard.Header> 197 197 + {error ? ( 198 198 + <> 199 199 + <ProfileCard.AvatarPlaceholder /> 200 200 + <View style={[a.flex_1]}> 201 201 + <Text 202 202 + style={[a.text_md, a.font_bold, a.leading_snug]} 203 203 + numberOfLines={1}> 204 204 + <Trans>Unknown verifier</Trans> 205 205 + </Text> 206 206 + <Text 207 207 + emoji 208 208 + style={[a.leading_snug, t.atoms.text_contrast_medium]} 209 209 + numberOfLines={1}> 210 210 + {verification.issuer} 211 211 + </Text> 212 212 + </View> 213 213 + </> 214 214 + ) : profile && moderationOpts ? ( 215 215 + <> 216 216 + <ProfileCard.Avatar 217 217 + profile={profile} 218 218 + moderationOpts={moderationOpts} 219 219 + /> 220 220 + <ProfileCard.NameAndHandle 221 221 + profile={profile} 222 222 + moderationOpts={moderationOpts} 223 223 + /> 224 224 + {canAdminister && ( 225 225 + <View> 226 226 + <Button 227 227 + label={_(msg`Remove verification`)} 228 228 + size="small" 229 229 + variant="outline" 230 230 + color="negative" 231 231 + shape="round" 232 232 + onPress={() => { 233 233 + verificationRemovePromptControl.open() 234 234 + }}> 235 235 + <ButtonIcon icon={TrashIcon} /> 236 236 + </Button> 237 237 + </View> 238 238 + )} 239 239 + </> 240 240 + ) : ( 241 241 + <> 242 242 + <ProfileCard.AvatarPlaceholder /> 243 243 + <ProfileCard.NameAndHandlePlaceholder /> 244 244 + </> 245 245 + )} 246 246 + </ProfileCard.Header> 247 247 + </ProfileCard.Outer> 248 248 + 249 249 + <VerificationRemovePrompt 250 250 + control={verificationRemovePromptControl} 251 251 + profile={subject} 252 252 + verifications={[verification]} 253 253 + onConfirm={() => outerDialogControl.close()} 254 254 + /> 255 255 + </View> 256 256 + ) 257 257 + }

+153

src/components/verification/VerifierDialog.tsx

··· 1 1 + import {Text as RNText, View} from 'react-native' 2 2 + import {Image} from 'expo-image' 3 3 + import {msg, Trans} from '@lingui/macro' 4 4 + import {useLingui} from '@lingui/react' 5 5 + 6 6 + import {urls} from '#/lib/constants' 7 7 + import {getUserDisplayName} from '#/lib/getUserDisplayName' 8 8 + import {NON_BREAKING_SPACE} from '#/lib/strings/constants' 9 9 + import {logger} from '#/logger' 10 10 + import {useSession} from '#/state/session' 11 11 + import {atoms as a, useBreakpoints, useTheme} from '#/alf' 12 12 + import {Button, ButtonText} from '#/components/Button' 13 13 + import * as Dialog from '#/components/Dialog' 14 14 + import {VerifierCheck} from '#/components/icons/VerifierCheck' 15 15 + import {Link} from '#/components/Link' 16 16 + import {Text} from '#/components/Typography' 17 17 + import {type FullVerificationState} from '#/components/verification' 18 18 + import type * as bsky from '#/types/bsky' 19 19 + 20 20 + export {useDialogControl} from '#/components/Dialog' 21 21 + 22 22 + export function VerifierDialog({ 23 23 + control, 24 24 + profile, 25 25 + verificationState, 26 26 + }: { 27 27 + control: Dialog.DialogControlProps 28 28 + profile: bsky.profile.AnyProfileView 29 29 + verificationState: FullVerificationState 30 30 + }) { 31 31 + return ( 32 32 + <Dialog.Outer control={control}> 33 33 + <Inner 34 34 + control={control} 35 35 + profile={profile} 36 36 + verificationState={verificationState} 37 37 + /> 38 38 + <Dialog.Close /> 39 39 + </Dialog.Outer> 40 40 + ) 41 41 + } 42 42 + 43 43 + function Inner({ 44 44 + profile, 45 45 + control, 46 46 + }: { 47 47 + control: Dialog.DialogControlProps 48 48 + profile: bsky.profile.AnyProfileView 49 49 + verificationState: FullVerificationState 50 50 + }) { 51 51 + const t = useTheme() 52 52 + const {_} = useLingui() 53 53 + const {gtMobile} = useBreakpoints() 54 54 + const {currentAccount} = useSession() 55 55 + 56 56 + const isSelf = profile.did === currentAccount?.did 57 57 + const userName = getUserDisplayName(profile) 58 58 + const label = isSelf 59 59 + ? _(msg`You are a trusted verifier`) 60 60 + : _(msg`${userName} is a trusted verifier`) 61 61 + 62 62 + return ( 63 63 + <Dialog.ScrollableInner 64 64 + label={label} 65 65 + style={[ 66 66 + gtMobile ? {width: 'auto', maxWidth: 400, minWidth: 200} : a.w_full, 67 67 + ]}> 68 68 + <Dialog.Handle /> 69 69 + 70 70 + <View style={[a.gap_lg]}> 71 71 + <View 72 72 + style={[ 73 73 + a.w_full, 74 74 + a.rounded_md, 75 75 + a.overflow_hidden, 76 76 + t.atoms.bg_contrast_25, 77 77 + {minHeight: 100}, 78 78 + ]}> 79 79 + <Image 80 80 + accessibilityIgnoresInvertColors 81 81 + source={require('../../../assets/images/initial_verification_announcement_1.png')} 82 82 + style={[ 83 83 + { 84 84 + aspectRatio: 353 / 160, 85 85 + }, 86 86 + ]} 87 87 + alt={_( 88 88 + msg`An illustration showing that Bluesky selects trusted verifiers, and trusted verifiers in turn verify individual user accounts.`, 89 89 + )} 90 90 + /> 91 91 + </View> 92 92 + 93 93 + <View style={[a.gap_sm]}> 94 94 + <Text style={[a.text_2xl, a.font_bold, a.pr_4xl, a.leading_tight]}> 95 95 + {label} 96 96 + </Text> 97 97 + <Text style={[a.text_md, a.leading_snug]}> 98 98 + <Trans> 99 99 + Accounts with a scalloped blue check mark 100 100 + <RNText> 101 101 + {NON_BREAKING_SPACE} 102 102 + <VerifierCheck width={14} /> 103 103 + {NON_BREAKING_SPACE} 104 104 + </RNText> 105 105 + can verify others. These trusted verifiers are selected by 106 106 + Bluesky. 107 107 + </Trans> 108 108 + </Text> 109 109 + </View> 110 110 + 111 111 + <View 112 112 + style={[ 113 113 + a.w_full, 114 114 + a.gap_sm, 115 115 + a.justify_end, 116 116 + gtMobile ? [a.flex_row, a.justify_end] : [a.flex_col], 117 117 + ]}> 118 118 + <Link 119 119 + overridePresentation 120 120 + to={urls.website.blog.initialVerificationAnnouncement} 121 121 + label={_(msg`Learn more about verification on Bluesky`)} 122 122 + size="small" 123 123 + variant="solid" 124 124 + color="primary" 125 125 + style={[a.justify_center]} 126 126 + onPress={() => { 127 127 + logger.metric('verification:learn-more', { 128 128 + location: 'verifierDialog', 129 129 + }) 130 130 + }}> 131 131 + <ButtonText> 132 132 + <Trans>Learn more</Trans> 133 133 + </ButtonText> 134 134 + </Link> 135 135 + <Button 136 136 + label={_(msg`Close dialog`)} 137 137 + size="small" 138 138 + variant="solid" 139 139 + color="secondary" 140 140 + onPress={() => { 141 141 + control.close() 142 142 + }}> 143 143 + <ButtonText> 144 144 + <Trans>Close</Trans> 145 145 + </ButtonText> 146 146 + </Button> 147 147 + </View> 148 148 + </View> 149 149 + 150 150 + <Dialog.Close /> 151 151 + </Dialog.ScrollableInner> 152 152 + ) 153 153 + }

+113

src/components/verification/index.ts

··· 1 1 + import {useMemo} from 'react' 2 2 + 3 3 + import {usePreferencesQuery} from '#/state/queries/preferences' 4 4 + import {useCurrentAccountProfile} from '#/state/queries/useCurrentAccountProfile' 5 5 + import {useSession} from '#/state/session' 6 6 + import type * as bsky from '#/types/bsky' 7 7 + 8 8 + export type FullVerificationState = { 9 9 + profile: { 10 10 + role: 'default' | 'verifier' 11 11 + isVerified: boolean 12 12 + wasVerified: boolean 13 13 + isViewer: boolean 14 14 + showBadge: boolean 15 15 + } 16 16 + viewer: 17 17 + | { 18 18 + role: 'default' 19 19 + isVerified: boolean 20 20 + } 21 21 + | { 22 22 + role: 'verifier' 23 23 + isVerified: boolean 24 24 + hasIssuedVerification: boolean 25 25 + } 26 26 + } 27 27 + 28 28 + export function useFullVerificationState({ 29 29 + profile, 30 30 + }: { 31 31 + profile: bsky.profile.AnyProfileView 32 32 + }): FullVerificationState { 33 33 + const {currentAccount} = useSession() 34 34 + const currentAccountProfile = useCurrentAccountProfile() 35 35 + const profileState = useSimpleVerificationState({profile}) 36 36 + const viewerState = useSimpleVerificationState({ 37 37 + profile: currentAccountProfile, 38 38 + }) 39 39 + 40 40 + return useMemo(() => { 41 41 + const verifications = profile.verification?.verifications || [] 42 42 + const wasVerified = 43 43 + profileState.role === 'default' && 44 44 + !profileState.isVerified && 45 45 + verifications.length > 0 46 46 + const hasIssuedVerification = Boolean( 47 47 + viewerState && 48 48 + viewerState.role === 'verifier' && 49 49 + profileState.role === 'default' && 50 50 + verifications.find(v => v.issuer === currentAccount?.did), 51 51 + ) 52 52 + 53 53 + return { 54 54 + profile: { 55 55 + ...profileState, 56 56 + wasVerified, 57 57 + isViewer: profile.did === currentAccount?.did, 58 58 + showBadge: profileState.showBadge, 59 59 + }, 60 60 + viewer: 61 61 + viewerState.role === 'verifier' 62 62 + ? { 63 63 + role: 'verifier', 64 64 + isVerified: viewerState.isVerified, 65 65 + hasIssuedVerification, 66 66 + } 67 67 + : { 68 68 + role: 'default', 69 69 + isVerified: viewerState.isVerified, 70 70 + }, 71 71 + } 72 72 + }, [profile, currentAccount, profileState, viewerState]) 73 73 + } 74 74 + 75 75 + export type SimpleVerificationState = { 76 76 + role: 'default' | 'verifier' 77 77 + isVerified: boolean 78 78 + showBadge: boolean 79 79 + } 80 80 + 81 81 + export function useSimpleVerificationState({ 82 82 + profile, 83 83 + }: { 84 84 + profile?: bsky.profile.AnyProfileView 85 85 + }): SimpleVerificationState { 86 86 + const preferences = usePreferencesQuery() 87 87 + const prefs = useMemo( 88 88 + () => preferences.data?.verificationPrefs || {hideBadges: false}, 89 89 + [preferences.data?.verificationPrefs], 90 90 + ) 91 91 + return useMemo(() => { 92 92 + if (!profile || !profile.verification) { 93 93 + return { 94 94 + role: 'default', 95 95 + isVerified: false, 96 96 + showBadge: false, 97 97 + } 98 98 + } 99 99 + 100 100 + const {verifiedStatus, trustedVerifierStatus} = profile.verification 101 101 + const isVerifiedUser = ['valid', 'invalid'].includes(verifiedStatus) 102 102 + const isVerifierUser = ['valid', 'invalid'].includes(trustedVerifierStatus) 103 103 + const isVerified = 104 104 + (isVerifiedUser && verifiedStatus === 'valid') || 105 105 + (isVerifierUser && trustedVerifierStatus === 'valid') 106 106 + 107 107 + return { 108 108 + role: isVerifierUser ? 'verifier' : 'default', 109 109 + isVerified, 110 110 + showBadge: prefs.hideBadges ? false : isVerified, 111 111 + } 112 112 + }, [profile, prefs]) 113 113 + }

+8

src/lib/constants.ts

··· 192 192 export type SupportedMimeTypes = (typeof SUPPORTED_MIME_TYPES)[number] 193 193 194 194 export const EMOJI_REACTION_LIMIT = 5 195 195 + 196 196 + export const urls = { 197 197 + website: { 198 198 + blog: { 199 199 + initialVerificationAnnouncement: `https://bsky.social/about/blog/04-21-2025-verification`, 200 200 + }, 201 201 + }, 202 202 + }

+10

src/lib/getUserDisplayName.ts

··· 1 1 + import {sanitizeDisplayName} from '#/lib/strings/display-names' 2 2 + import {sanitizeHandle} from '#/lib/strings/handles' 3 3 + 4 4 + export function getUserDisplayName< 5 5 + T extends {displayName?: string; handle: string; [key: string]: any}, 6 6 + >(props: T): string { 7 7 + return sanitizeDisplayName( 8 8 + props.displayName || sanitizeHandle(props.handle, '@'), 9 9 + ) 10 10 + }

+1

src/lib/routes/types.ts

··· 13 13 ModerationMutedAccounts: undefined 14 14 ModerationBlockedAccounts: undefined 15 15 ModerationInteractionSettings: undefined 16 16 + ModerationVerificationSettings: undefined 16 17 Settings: undefined 17 18 Profile: {name: string; hideBackButton?: boolean} 18 19 ProfileFollowers: {name: string}

+13

src/logger/metrics.ts

··· 370 370 targetLanguage: string 371 371 textLength: number 372 372 } 373 373 + 374 374 + 'verification:create': {} 375 375 + 'verification:revoke': {} 376 376 + 'verification:badge:click': {} 377 377 + 'verification:learn-more': { 378 378 + location: 379 379 + | 'initialAnnouncementeNux' 380 380 + | 'verificationsDialog' 381 381 + | 'verifierDialog' 382 382 + | 'verificationSettings' 383 383 + } 384 384 + 'verification:settings:hideBadges': {} 385 385 + 'verification:settings:unHideBadges': {} 373 386 }

+1

src/routes.ts

··· 14 14 ModerationMutedAccounts: '/moderation/muted-accounts', 15 15 ModerationBlockedAccounts: '/moderation/blocked-accounts', 16 16 ModerationInteractionSettings: '/moderation/interaction-settings', 17 17 + ModerationVerificationSettings: '/moderation/verification-settings', 17 18 // profiles, threads, lists 18 19 Profile: ['/profile/:name', '/profile/:name/rss'], 19 20 ProfileFollowers: '/profile/:name/followers',

+31 -18

src/screens/Messages/components/ChatListItem.tsx

··· 43 43 import {useMenuControl} from '#/components/Menu' 44 44 import {PostAlerts} from '#/components/moderation/PostAlerts' 45 45 import {Text} from '#/components/Typography' 46 46 + import {useSimpleVerificationState} from '#/components/verification' 47 47 + import {VerificationCheck} from '#/components/verification/VerificationCheck' 46 48 import type * as bsky from '#/types/bsky' 47 49 48 50 export let ChatListItem = ({ ··· 106 108 const playHaptic = useHaptics() 107 109 const queryClient = useQueryClient() 108 110 const isUnread = convo.unreadCount > 0 111 111 + const verification = useSimpleVerificationState({ 112 112 + profile, 113 113 + }) 109 114 110 115 const blockInfo = useMemo(() => { 111 116 const modui = moderation.ui('profileView') ··· 385 390 <View 386 391 style={[a.flex_1, a.justify_center, web({paddingRight: 45})]}> 387 392 <View style={[a.w_full, a.flex_row, a.align_end, a.pb_2xs]}> 388 388 - <Text 389 389 - numberOfLines={1} 390 390 - style={[{maxWidth: '85%'}, web([a.leading_normal])]}> 393 393 + <View style={[a.flex_shrink]}> 391 394 <Text 392 395 emoji 396 396 + numberOfLines={1} 393 397 style={[ 394 398 a.text_md, 395 399 t.atoms.text, ··· 399 403 ]}> 400 404 {displayName} 401 405 </Text> 402 402 - </Text> 406 406 + </View> 407 407 + {verification.showBadge && ( 408 408 + <View style={[a.pl_xs, a.self_center]}> 409 409 + <VerificationCheck 410 410 + width={14} 411 411 + verifier={verification.role === 'verifier'} 412 412 + /> 413 413 + </View> 414 414 + )} 403 415 {lastMessageSentAt && ( 404 404 - <TimeElapsed timestamp={lastMessageSentAt}> 405 405 - {({timeElapsed}) => ( 406 406 - <Text 407 407 - style={[ 408 408 - a.text_sm, 409 409 - {lineHeight: 21}, 410 410 - t.atoms.text_contrast_medium, 411 411 - web({whiteSpace: 'preserve nowrap'}), 412 412 - ]}> 413 413 - {' '} 414 414 - &middot; {timeElapsed} 415 415 - </Text> 416 416 - )} 417 417 - </TimeElapsed> 416 416 + <View style={[a.pl_xs]}> 417 417 + <TimeElapsed timestamp={lastMessageSentAt}> 418 418 + {({timeElapsed}) => ( 419 419 + <Text 420 420 + style={[ 421 421 + a.text_sm, 422 422 + {lineHeight: 21}, 423 423 + t.atoms.text_contrast_medium, 424 424 + web({whiteSpace: 'preserve nowrap'}), 425 425 + ]}> 426 426 + &middot; {timeElapsed} 427 427 + </Text> 428 428 + )} 429 429 + </TimeElapsed> 430 430 + </View> 418 431 )} 419 432 {(convo.muted || moderation.blocked) && ( 420 433 <Text

+96

src/screens/Moderation/VerificationSettings.tsx

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

+23 -4

src/screens/Moderation/index.tsx

··· 6 6 import {useFocusEffect} from '@react-navigation/native' 7 7 8 8 import {getLabelingServiceTitle} from '#/lib/moderation' 9 9 - import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types' 9 9 + import { 10 10 + type CommonNavigatorParams, 11 11 + type NativeStackScreenProps, 12 12 + } from '#/lib/routes/types' 10 13 import {logger} from '#/logger' 11 14 import {isIOS} from '#/platform/detection' 12 15 import { 13 16 useMyLabelersQuery, 14 17 usePreferencesQuery, 15 15 - UsePreferencesQueryResponse, 18 18 + type UsePreferencesQueryResponse, 16 19 usePreferencesSetAdultContentMutation, 17 20 } from '#/state/queries/preferences' 18 21 import {isNonConfigurableModerationAuthority} from '#/state/session/additional-moderation-authorities' 19 22 import {useSetMinimalShellMode} from '#/state/shell' 20 23 import {ViewHeader} from '#/view/com/util/ViewHeader' 21 21 - import {atoms as a, useBreakpoints, useTheme, ViewStyleProp} from '#/alf' 24 24 + import {atoms as a, useBreakpoints, useTheme, type ViewStyleProp} from '#/alf' 22 25 import {Button, ButtonText} from '#/components/Button' 23 26 import * as Dialog from '#/components/Dialog' 24 27 import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' ··· 27 30 import * as Toggle from '#/components/forms/Toggle' 28 31 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron' 29 32 import {CircleBanSign_Stroke2_Corner0_Rounded as CircleBanSign} from '#/components/icons/CircleBanSign' 30 30 - import {Props as SVGIconProps} from '#/components/icons/common' 33 33 + import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck' 34 34 + import {type Props as SVGIconProps} from '#/components/icons/common' 31 35 import {EditBig_Stroke2_Corner0_Rounded as EditBig} from '#/components/icons/EditBig' 32 36 import {Filter_Stroke2_Corner0_Rounded as Filter} from '#/components/icons/Filter' 33 37 import {Group3_Stroke2_Corner0_Rounded as Group} from '#/components/icons/Group' ··· 268 272 <SubItem 269 273 title={_(msg`Blocked accounts`)} 270 274 icon={CircleBanSign} 275 275 + style={[ 276 276 + (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], 277 277 + ]} 278 278 + /> 279 279 + )} 280 280 + </Link> 281 281 + <Divider /> 282 282 + <Link 283 283 + label={_(msg`Manage verification settings`)} 284 284 + testID="verificationSettingsBtn" 285 285 + to="/moderation/verification-settings"> 286 286 + {state => ( 287 287 + <SubItem 288 288 + title={_(msg`Verification settings`)} 289 289 + icon={CircleCheck} 271 290 style={[ 272 291 (state.hovered || state.pressed) && [t.atoms.bg_contrast_50], 273 292 ]}

+25 -2

src/screens/Profile/Header/EditProfileDialog.tsx

··· 1 1 import {useCallback, useEffect, useState} from 'react' 2 2 import {Dimensions, View} from 'react-native' 3 3 - import {Image as RNImage} from 'react-native-image-crop-picker' 4 4 - import {AppBskyActorDefs} from '@atproto/api' 3 3 + import {type Image as RNImage} from 'react-native-image-crop-picker' 4 4 + import {type AppBskyActorDefs} from '@atproto/api' 5 5 import {msg, Plural, Trans} from '@lingui/macro' 6 6 import {useLingui} from '@lingui/react' 7 7 8 8 + import {urls} from '#/lib/constants' 8 9 import {compressIfNeeded} from '#/lib/media/manip' 9 10 import {cleanError} from '#/lib/strings/errors' 10 11 import {useWarnMaxGraphemeCount} from '#/lib/strings/helpers' ··· 16 17 import {EditableUserAvatar} from '#/view/com/util/UserAvatar' 17 18 import {UserBanner} from '#/view/com/util/UserBanner' 18 19 import {atoms as a, useTheme} from '#/alf' 20 20 + import {Admonition} from '#/components/Admonition' 19 21 import {Button, ButtonText} from '#/components/Button' 20 22 import * as Dialog from '#/components/Dialog' 21 23 import * as TextField from '#/components/forms/TextField' 24 24 + import {InlineLinkText} from '#/components/Link' 22 25 import * as Prompt from '#/components/Prompt' 26 26 + import {useSimpleVerificationState} from '#/components/verification' 23 27 24 28 const DISPLAY_NAME_MAX_GRAPHEMES = 64 25 29 const DESCRIPTION_MAX_GRAPHEMES = 256 ··· 102 106 const {_} = useLingui() 103 107 const t = useTheme() 104 108 const control = Dialog.useDialogContext() 109 109 + const verification = useSimpleVerificationState({ 110 110 + profile, 111 111 + }) 105 112 const { 106 113 mutateAsync: updateProfileMutation, 107 114 error: updateProfileError, ··· 341 348 </TextField.SuffixText> 342 349 )} 343 350 </View> 351 351 + 352 352 + {verification.isVerified && 353 353 + verification.role === 'default' && 354 354 + displayName !== initialDisplayName && ( 355 355 + <Admonition type="error"> 356 356 + <Trans> 357 357 + You are verified. You will lose your verification status if you 358 358 + change your display name.{' '} 359 359 + <InlineLinkText 360 360 + label={_(msg`Learn more`)} 361 361 + to={urls.website.blog.initialVerificationAnnouncement}> 362 362 + <Trans>Learn more.</Trans> 363 363 + </InlineLinkText> 364 364 + </Trans> 365 365 + </Admonition> 366 366 + )} 344 367 345 368 <View> 346 369 <TextField.LabelText>

+31 -3

src/screens/Profile/Header/ProfileHeaderStandard.tsx

··· 10 10 import {useLingui} from '@lingui/react' 11 11 12 12 import {sanitizeDisplayName} from '#/lib/strings/display-names' 13 13 + import {sanitizeHandle} from '#/lib/strings/handles' 13 14 import {logger} from '#/logger' 14 15 import {isIOS, isWeb} from '#/platform/detection' 15 16 import {useProfileShadow} from '#/state/cache/profile-shadow' ··· 22 23 import {useRequireAuth, useSession} from '#/state/session' 23 24 import {ProfileMenu} from '#/view/com/profile/ProfileMenu' 24 25 import * as Toast from '#/view/com/util/Toast' 25 25 - import {atoms as a} from '#/alf' 26 26 + import {atoms as a, platform, useBreakpoints, useTheme} from '#/alf' 26 27 import {Button, ButtonIcon, ButtonText} from '#/components/Button' 27 28 import {useDialogControl} from '#/components/Dialog' 28 29 import {MessageProfileButton} from '#/components/dms/MessageProfileButton' ··· 33 34 } from '#/components/KnownFollowers' 34 35 import * as Prompt from '#/components/Prompt' 35 36 import {RichText} from '#/components/RichText' 36 36 - import {ProfileHeaderDisplayName} from './DisplayName' 37 37 + import {Text} from '#/components/Typography' 38 38 + import {VerificationCheckButton} from '#/components/verification/VerificationCheckButton' 37 39 import {EditProfileDialog} from './EditProfileDialog' 38 40 import {ProfileHeaderHandle} from './Handle' 39 41 import {ProfileHeaderMetrics} from './Metrics' ··· 54 56 hideBackButton = false, 55 57 isPlaceholderProfile, 56 58 }: Props): React.ReactNode => { 59 59 + const t = useTheme() 60 60 + const {gtMobile} = useBreakpoints() 57 61 const profile: Shadow<AppBskyActorDefs.ProfileViewDetailed> = 58 62 useProfileShadow(profileUnshadowed) 59 63 const {currentAccount, hasSession} = useSession() ··· 238 242 <ProfileMenu profile={profile} /> 239 243 </View> 240 244 <View style={[a.flex_col, a.gap_2xs, a.pt_2xs, a.pb_sm]}> 241 241 - <ProfileHeaderDisplayName profile={profile} moderation={moderation} /> 245 245 + <View style={[a.flex_row, a.align_center, a.gap_xs, a.flex_1]}> 246 246 + <Text 247 247 + emoji 248 248 + testID="profileHeaderDisplayName" 249 249 + style={[ 250 250 + t.atoms.text, 251 251 + gtMobile ? a.text_4xl : a.text_3xl, 252 252 + a.self_start, 253 253 + a.font_heavy, 254 254 + ]}> 255 255 + {sanitizeDisplayName( 256 256 + profile.displayName || sanitizeHandle(profile.handle), 257 257 + moderation.ui('displayName'), 258 258 + )} 259 259 + <View 260 260 + style={[ 261 261 + a.pl_xs, 262 262 + { 263 263 + marginTop: platform({ios: 2}), 264 264 + }, 265 265 + ]}> 266 266 + <VerificationCheckButton profile={profile} size="lg" /> 267 267 + </View> 268 268 + </Text> 269 269 + </View> 242 270 <ProfileHeaderHandle profile={profile} /> 243 271 </View> 244 272 {!isPlaceholderProfile && !isBlockedUser && (

+1 -1

src/screens/Search/components/AutocompleteResults.tsx

··· 49 49 ? undefined 50 50 : `/search?q=${encodeURIComponent(searchText)}` 51 51 } 52 52 - style={{borderBottomWidth: 1}} 52 52 + style={a.border_b} 53 53 /> 54 54 {autocompleteData?.map(item => ( 55 55 <SearchProfileCard

+94 -42

src/screens/Search/components/SearchHistory.tsx

··· 1 1 import {Pressable, ScrollView, StyleSheet, View} from 'react-native' 2 2 + import {moderateProfile, type ModerationOpts} from '@atproto/api' 2 3 import {msg, Trans} from '@lingui/macro' 3 4 import {useLingui} from '@lingui/react' 4 5 5 6 import {createHitslop, HITSLOP_10} from '#/lib/constants' 6 7 import {makeProfileLink} from '#/lib/routes/links' 7 8 import {sanitizeDisplayName} from '#/lib/strings/display-names' 9 9 + import {sanitizeHandle} from '#/lib/strings/handles' 10 10 + import {useModerationOpts} from '#/state/preferences/moderation-opts' 8 11 import {Link} from '#/view/com/util/Link' 9 12 import {UserAvatar} from '#/view/com/util/UserAvatar' 10 13 import {BlockDrawerGesture} from '#/view/shell/BlockDrawerGesture' 11 11 - import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf' 14 14 + import {atoms as a, tokens, useBreakpoints, useTheme, web} from '#/alf' 12 15 import {Button, ButtonIcon} from '#/components/Button' 13 16 import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Times' 14 17 import * as Layout from '#/components/Layout' 15 18 import {Text} from '#/components/Typography' 19 19 + import {useSimpleVerificationState} from '#/components/verification' 20 20 + import {VerificationCheck} from '#/components/verification/VerificationCheck' 16 21 import type * as bsky from '#/types/bsky' 17 22 18 23 export function SearchHistory({ ··· 31 36 onRemoveProfileClick: (profile: bsky.profile.AnyProfileView) => void 32 37 }) { 33 38 const {gtMobile} = useBreakpoints() 34 34 - const t = useTheme() 35 39 const {_} = useLingui() 40 40 + const moderationOpts = useModerationOpts() 36 41 37 42 return ( 38 43 <Layout.Content ··· 54 59 <ScrollView 55 60 horizontal 56 61 keyboardShouldPersistTaps="handled" 62 62 + showsHorizontalScrollIndicator={false} 57 63 style={[ 58 64 a.flex_row, 59 65 a.flex_nowrap, 60 66 {marginHorizontal: tokens.space._2xl * -1}, 61 67 ]} 62 68 contentContainerStyle={[a.px_2xl, a.border_0]}> 63 63 - {selectedProfiles.slice(0, 5).map((profile, index) => ( 64 64 - <View 65 65 - key={index} 66 66 - style={[ 67 67 - styles.profileItem, 68 68 - !gtMobile && styles.profileItemMobile, 69 69 - ]}> 70 70 - <Link 71 71 - href={makeProfileLink(profile)} 72 72 - title={profile.handle} 73 73 - asAnchor 74 74 - anchorNoUnderline 75 75 - onBeforePress={() => onProfileClick(profile)} 76 76 - style={[a.align_center, a.w_full]}> 77 77 - <UserAvatar 78 78 - avatar={profile.avatar} 79 79 - type={profile.associated?.labeler ? 'labeler' : 'user'} 80 80 - size={60} 69 69 + {moderationOpts && 70 70 + selectedProfiles 71 71 + .slice(0, 5) 72 72 + .map(profile => ( 73 73 + <RecentProfileItem 74 74 + key={profile.did} 75 75 + profile={profile} 76 76 + moderationOpts={moderationOpts} 77 77 + onPress={() => onProfileClick(profile)} 78 78 + onRemove={() => onRemoveProfileClick(profile)} 81 79 /> 82 82 - <Text 83 83 - emoji 84 84 - style={[a.text_xs, a.text_center, styles.profileName]} 85 85 - numberOfLines={1}> 86 86 - {sanitizeDisplayName( 87 87 - profile.displayName || profile.handle, 88 88 - )} 89 89 - </Text> 90 90 - </Link> 91 91 - <Pressable 92 92 - accessibilityRole="button" 93 93 - accessibilityLabel={_(msg`Remove profile`)} 94 94 - accessibilityHint={_( 95 95 - msg`Removes profile from search history`, 96 96 - )} 97 97 - onPress={() => onRemoveProfileClick(profile)} 98 98 - hitSlop={createHitslop(6)} 99 99 - style={styles.profileRemoveBtn}> 100 100 - <XIcon size="xs" style={t.atoms.text_contrast_low} /> 101 101 - </Pressable> 102 102 - </View> 103 103 - ))} 80 80 + ))} 104 81 </ScrollView> 105 82 </BlockDrawerGesture> 106 83 </View> ··· 131 108 )} 132 109 </View> 133 110 </Layout.Content> 111 111 + ) 112 112 + } 113 113 + 114 114 + function RecentProfileItem({ 115 115 + profile, 116 116 + moderationOpts, 117 117 + onPress, 118 118 + onRemove, 119 119 + }: { 120 120 + profile: bsky.profile.AnyProfileView 121 121 + moderationOpts: ModerationOpts 122 122 + onPress: () => void 123 123 + onRemove: () => void 124 124 + }) { 125 125 + const {_} = useLingui() 126 126 + const {gtMobile} = useBreakpoints() 127 127 + const t = useTheme() 128 128 + 129 129 + const moderation = moderateProfile(profile, moderationOpts) 130 130 + const name = sanitizeDisplayName( 131 131 + profile.displayName || sanitizeHandle(profile.handle), 132 132 + moderation.ui('displayName'), 133 133 + ) 134 134 + const verification = useSimpleVerificationState({profile}) 135 135 + 136 136 + return ( 137 137 + <View style={[styles.profileItem, !gtMobile && styles.profileItemMobile]}> 138 138 + <Link 139 139 + href={makeProfileLink(profile)} 140 140 + title={profile.handle} 141 141 + asAnchor 142 142 + anchorNoUnderline 143 143 + onBeforePress={onPress} 144 144 + style={[a.align_center, a.w_full]}> 145 145 + <UserAvatar 146 146 + avatar={profile.avatar} 147 147 + type={profile.associated?.labeler ? 'labeler' : 'user'} 148 148 + size={60} 149 149 + moderation={moderation.ui('avatar')} 150 150 + /> 151 151 + <View style={styles.profileName}> 152 152 + <View 153 153 + style={[ 154 154 + a.flex_row, 155 155 + a.align_center, 156 156 + a.justify_center, 157 157 + web([a.flex_1]), 158 158 + ]}> 159 159 + <Text 160 160 + emoji 161 161 + style={[a.text_xs, a.leading_snug, a.self_start]} 162 162 + numberOfLines={1}> 163 163 + {name} 164 164 + </Text> 165 165 + {verification.showBadge && ( 166 166 + <View style={[a.pl_xs]}> 167 167 + <VerificationCheck 168 168 + width={12} 169 169 + verifier={verification.role === 'verifier'} 170 170 + /> 171 171 + </View> 172 172 + )} 173 173 + </View> 174 174 + </View> 175 175 + </Link> 176 176 + <Pressable 177 177 + accessibilityRole="button" 178 178 + accessibilityLabel={_(msg`Remove profile`)} 179 179 + accessibilityHint={_(msg`Removes profile from search history`)} 180 180 + hitSlop={createHitslop(6)} 181 181 + style={styles.profileRemoveBtn} 182 182 + onPress={onRemove}> 183 183 + <XIcon size="xs" style={t.atoms.text_contrast_low} /> 184 184 + </Pressable> 185 185 + </View> 134 186 ) 135 187 } 136 188

+35 -14

src/screens/Settings/Settings.tsx

··· 29 29 import * as Toast from '#/view/com/util/Toast' 30 30 import {UserAvatar} from '#/view/com/util/UserAvatar' 31 31 import * as SettingsList from '#/screens/Settings/components/SettingsList' 32 32 - import {atoms as a, tokens, useBreakpoints, useTheme} from '#/alf' 32 32 + import {atoms as a, platform, tokens, useBreakpoints, useTheme} from '#/alf' 33 33 import {AvatarStackWithFetch} from '#/components/AvatarStack' 34 34 import {useDialogControl} from '#/components/Dialog' 35 35 import {SwitchAccountDialog} from '#/components/dialogs/SwitchAccount' ··· 55 55 import * as Menu from '#/components/Menu' 56 56 import * as Prompt from '#/components/Prompt' 57 57 import {Text} from '#/components/Typography' 58 58 + import {useFullVerificationState} from '#/components/verification' 59 59 + import { 60 60 + shouldShowVerificationCheckButton, 61 61 + VerificationCheckButton, 62 62 + } from '#/components/verification/VerificationCheckButton' 58 63 59 64 type Props = NativeStackScreenProps<CommonNavigatorParams, 'Settings'> 60 65 export function SettingsScreen({}: Props) { ··· 278 283 const {gtMobile} = useBreakpoints() 279 284 const shadow = useProfileShadow(profile) 280 285 const moderationOpts = useModerationOpts() 286 286 + const verificationState = useFullVerificationState({ 287 287 + profile: shadow, 288 288 + }) 281 289 282 290 if (!moderationOpts) return null 283 291 ··· 292 300 type={shadow.associated?.labeler ? 'labeler' : 'user'} 293 301 /> 294 302 295 295 - <Text 296 296 - emoji 297 297 - testID="profileHeaderDisplayName" 298 298 - style={[ 299 299 - a.pt_sm, 300 300 - t.atoms.text, 301 301 - gtMobile ? a.text_4xl : a.text_3xl, 302 302 - a.font_heavy, 303 303 - ]}> 304 304 - {sanitizeDisplayName( 305 305 - profile.displayName || sanitizeHandle(profile.handle), 306 306 - moderation.ui('displayName'), 303 303 + <View style={[a.flex_row, a.gap_xs, a.align_center]}> 304 304 + <Text 305 305 + emoji 306 306 + testID="profileHeaderDisplayName" 307 307 + numberOfLines={1} 308 308 + style={[ 309 309 + a.pt_sm, 310 310 + t.atoms.text, 311 311 + gtMobile ? a.text_4xl : a.text_3xl, 312 312 + a.font_heavy, 313 313 + ]}> 314 314 + {sanitizeDisplayName( 315 315 + profile.displayName || sanitizeHandle(profile.handle), 316 316 + moderation.ui('displayName'), 317 317 + )} 318 318 + </Text> 319 319 + {shouldShowVerificationCheckButton(verificationState) && ( 320 320 + <View 321 321 + style={[ 322 322 + { 323 323 + marginTop: platform({web: 8, ios: 8, android: 10}), 324 324 + }, 325 325 + ]}> 326 326 + <VerificationCheckButton profile={shadow} size="lg" /> 327 327 + </View> 307 328 )} 308 308 - </Text> 329 329 + </View> 309 330 <Text style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}> 310 331 {sanitizeHandle(profile.handle, '@')} 311 332 </Text>

+21 -2

src/screens/Settings/components/ChangeHandleDialog.tsx

··· 10 10 SlideOutLeft, 11 11 SlideOutRight, 12 12 } from 'react-native-reanimated' 13 13 - import {ComAtprotoServerDescribeServer} from '@atproto/api' 13 13 + import {type ComAtprotoServerDescribeServer} from '@atproto/api' 14 14 import {msg, Trans} from '@lingui/macro' 15 15 import {useLingui} from '@lingui/react' 16 16 import {useMutation, useQueryClient} from '@tanstack/react-query' 17 17 18 18 - import {HITSLOP_10} from '#/lib/constants' 18 18 + import {HITSLOP_10, urls} from '#/lib/constants' 19 19 import {cleanError} from '#/lib/strings/errors' 20 20 import {createFullHandle, validateServiceHandle} from '#/lib/strings/handles' 21 21 import {sanitizeHandle} from '#/lib/strings/handles' 22 22 import {useFetchDid, useUpdateHandleMutation} from '#/state/queries/handle' 23 23 import {RQKEY as RQKEY_PROFILE} from '#/state/queries/profile' 24 24 import {useServiceQuery} from '#/state/queries/service' 25 25 + import {useCurrentAccountProfile} from '#/state/queries/useCurrentAccountProfile' 25 26 import {useAgent, useSession} from '#/state/session' 26 27 import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' 27 28 import {atoms as a, native, useBreakpoints, useTheme} from '#/alf' ··· 40 41 import {InlineLinkText} from '#/components/Link' 41 42 import {Loader} from '#/components/Loader' 42 43 import {Text} from '#/components/Typography' 44 44 + import {useSimpleVerificationState} from '#/components/verification' 43 45 import {CopyButton} from './CopyButton' 44 46 45 47 export function ChangeHandleDialog({ ··· 152 154 const control = Dialog.useDialogContext() 153 155 const {currentAccount} = useSession() 154 156 const queryClient = useQueryClient() 157 157 + const profile = useCurrentAccountProfile() 158 158 + const verification = useSimpleVerificationState({ 159 159 + profile, 160 160 + }) 155 161 156 162 const { 157 163 mutate: changeHandle, ··· 197 203 <Animated.View 198 204 layout={native(LinearTransition)} 199 205 style={[a.flex_1, a.gap_md]}> 206 206 + {verification.isVerified && verification.role === 'default' && ( 207 207 + <Admonition type="error"> 208 208 + <Trans> 209 209 + You are verified. You will lose your verification status if you 210 210 + change your handle.{' '} 211 211 + <InlineLinkText 212 212 + label={_(msg`Learn more`)} 213 213 + to={urls.website.blog.initialVerificationAnnouncement}> 214 214 + <Trans>Learn more.</Trans> 215 215 + </InlineLinkText> 216 216 + </Trans> 217 217 + </Admonition> 218 218 + )} 200 219 <View> 201 220 <TextField.LabelText> 202 221 <Trans>New handle</Trans>

+4

src/state/cache/profile-shadow.ts

··· 1 1 import {useEffect, useMemo, useState} from 'react' 2 2 + import {type AppBskyActorDefs} from '@atproto/api' 2 3 import {type QueryClient} from '@tanstack/react-query' 3 4 import EventEmitter from 'eventemitter3' 4 5 ··· 29 30 followingUri: string | undefined 30 31 muted: boolean | undefined 31 32 blockingUri: string | undefined 33 33 + verification: AppBskyActorDefs.VerificationState 32 34 } 33 35 34 36 const shadows: WeakMap< ··· 134 136 blocking: 135 137 'blockingUri' in shadow ? shadow.blockingUri : profile.viewer?.blocking, 136 138 }, 139 139 + verification: 140 140 + 'verification' in shadow ? shadow.verification : profile.verification, 137 141 }) 138 142 } 139 143

+16 -10

src/state/queries/notifications/util.ts

··· 1 1 import { 2 2 - AppBskyFeedDefs, 2 2 + type AppBskyFeedDefs, 3 3 AppBskyFeedLike, 4 4 AppBskyFeedPost, 5 5 AppBskyFeedRepost, 6 6 - AppBskyGraphDefs, 6 6 + type AppBskyGraphDefs, 7 7 AppBskyGraphStarterpack, 8 8 - AppBskyNotificationListNotifications, 9 9 - BskyAgent, 8 8 + type AppBskyNotificationListNotifications, 9 9 + type BskyAgent, 10 10 moderateNotification, 11 11 - ModerationOpts, 11 11 + type ModerationOpts, 12 12 } from '@atproto/api' 13 13 - import {QueryClient} from '@tanstack/react-query' 13 13 + import {type QueryClient} from '@tanstack/react-query' 14 14 import chunk from 'lodash.chunk' 15 15 16 16 import {labelIsHideableOffense} from '#/lib/moderation' 17 17 import * as bsky from '#/types/bsky' 18 18 import {precacheProfile} from '../profile' 19 19 - import {FeedNotification, FeedPage, NotificationType} from './types' 19 19 + import { 20 20 + type FeedNotification, 21 21 + type FeedPage, 22 22 + type NotificationType, 23 23 + } from './types' 20 24 21 25 const GROUPABLE_REASONS = ['like', 'repost', 'follow'] 22 26 const MS_1HR = 1e3 * 60 * 60 ··· 155 159 const type = toKnownType(notif) 156 160 if (type !== 'starterpack-joined') { 157 161 groupedNotifs.push({ 158 158 - _reactKey: `notif-${notif.uri}`, 162 162 + _reactKey: `notif-${notif.uri}-${notif.reason}`, 159 163 type, 160 164 notification: notif, 161 165 subjectUri: getSubjectUri(type, notif), 162 166 }) 163 167 } else { 164 168 groupedNotifs.push({ 165 165 - _reactKey: `notif-${notif.uri}`, 169 169 + _reactKey: `notif-${notif.uri}-${notif.reason}`, 166 170 type: 'starterpack-joined', 167 171 notification: notif, 168 172 subjectUri: notif.uri, ··· 238 242 notif.reason === 'reply' || 239 243 notif.reason === 'quote' || 240 244 notif.reason === 'follow' || 241 241 - notif.reason === 'starterpack-joined' 245 245 + notif.reason === 'starterpack-joined' || 246 246 + notif.reason === 'verified' || 247 247 + notif.reason === 'unverified' 242 248 ) { 243 249 return notif.reason as NotificationType 244 250 }

+6

src/state/queries/nuxs/definitions.ts

··· 5 5 export enum Nux { 6 6 NeueTypography = 'NeueTypography', 7 7 ExploreInterestsCard = 'ExploreInterestsCard', 8 8 + InitialVerificationAnnouncement = 'InitialVerificationAnnouncement', 8 9 } 9 10 10 11 export const nuxNames = new Set(Object.values(Nux)) ··· 18 19 id: Nux.ExploreInterestsCard 19 20 data: undefined 20 21 } 22 22 + | { 23 23 + id: Nux.InitialVerificationAnnouncement 24 24 + data: undefined 25 25 + } 21 26 > 22 27 23 28 export const NuxSchemas: Record<Nux, zod.ZodObject<any> | undefined> = { 24 29 [Nux.NeueTypography]: undefined, 25 30 [Nux.ExploreInterestsCard]: undefined, 31 31 + [Nux.InitialVerificationAnnouncement]: undefined, 26 32 }

+5 -2

src/state/queries/preferences/const.ts

··· 1 1 import {DEFAULT_LOGGED_OUT_LABEL_PREFERENCES} from '#/state/queries/preferences/moderation' 2 2 import { 3 3 - ThreadViewPreferences, 4 4 - UsePreferencesQueryResponse, 3 3 + type ThreadViewPreferences, 4 4 + type UsePreferencesQueryResponse, 5 5 } from '#/state/queries/preferences/types' 6 6 7 7 export const DEFAULT_HOME_FEED_PREFS: UsePreferencesQueryResponse['feedViewPrefs'] = ··· 42 42 postInteractionSettings: { 43 43 threadgateAllowRules: undefined, 44 44 postgateEmbeddingRules: [], 45 45 + }, 46 46 + verificationPrefs: { 47 47 + hideBadges: false, 45 48 }, 46 49 }

+25 -5

src/state/queries/preferences/index.ts

··· 1 1 import { 2 2 - AppBskyActorDefs, 3 3 - BskyFeedViewPreference, 4 4 - LabelPreference, 2 2 + type AppBskyActorDefs, 3 3 + type BskyFeedViewPreference, 4 4 + type LabelPreference, 5 5 } from '@atproto/api' 6 6 import {useMutation, useQuery, useQueryClient} from '@tanstack/react-query' 7 7 ··· 16 16 DEFAULT_THREAD_VIEW_PREFS, 17 17 } from '#/state/queries/preferences/const' 18 18 import { 19 19 - ThreadViewPreferences, 20 20 - UsePreferencesQueryResponse, 19 19 + type ThreadViewPreferences, 20 20 + type UsePreferencesQueryResponse, 21 21 } from '#/state/queries/preferences/types' 22 22 import {useAgent} from '#/state/session' 23 23 import {saveLabelers} from '#/state/session/agent-config' ··· 407 407 }, 408 408 }) 409 409 } 410 410 + 411 411 + export function useSetVerificationPrefsMutation() { 412 412 + const queryClient = useQueryClient() 413 413 + const agent = useAgent() 414 414 + 415 415 + return useMutation<void, unknown, AppBskyActorDefs.VerificationPrefs>({ 416 416 + mutationFn: async prefs => { 417 417 + await agent.setVerificationPrefs(prefs) 418 418 + if (prefs.hideBadges) { 419 419 + logger.metric('verification:settings:hideBadges', {}) 420 420 + } else { 421 421 + logger.metric('verification:settings:unHideBadges', {}) 422 422 + } 423 423 + // triggers a refetch 424 424 + await queryClient.invalidateQueries({ 425 425 + queryKey: preferencesQueryKey, 426 426 + }) 427 427 + }, 428 428 + }) 429 429 + }

+17 -14

src/state/queries/profile.ts

··· 1 1 import {useCallback} from 'react' 2 2 - import {Image as RNImage} from 'react-native-image-crop-picker' 2 2 + import {type Image as RNImage} from 'react-native-image-crop-picker' 3 3 import { 4 4 - AppBskyActorDefs, 5 5 - AppBskyActorGetProfile, 6 6 - AppBskyActorGetProfiles, 7 7 - AppBskyActorProfile, 4 4 + type AppBskyActorDefs, 5 5 + type AppBskyActorGetProfile, 6 6 + type AppBskyActorGetProfiles, 7 7 + type AppBskyActorProfile, 8 8 AtUri, 9 9 - BskyAgent, 10 10 - ComAtprotoRepoUploadBlob, 11 11 - Un$Typed, 9 9 + type BskyAgent, 10 10 + type ComAtprotoRepoUploadBlob, 11 11 + type Un$Typed, 12 12 } from '@atproto/api' 13 13 import { 14 14 keepPreviousData, 15 15 - QueryClient, 15 15 + type QueryClient, 16 16 useMutation, 17 17 useQuery, 18 18 useQueryClient, ··· 21 21 import {uploadBlob} from '#/lib/api' 22 22 import {until} from '#/lib/async/until' 23 23 import {useToggleMutationQueue} from '#/lib/hooks/useToggleMutationQueue' 24 24 - import {logEvent, LogEvents, toClout} from '#/lib/statsig/statsig' 25 25 - import {Shadow} from '#/state/cache/types' 24 24 + import {logEvent, type LogEvents, toClout} from '#/lib/statsig/statsig' 25 25 + import {type Shadow} from '#/state/cache/types' 26 26 import {STALE} from '#/state/queries' 27 27 import {resetProfilePostsQueries} from '#/state/queries/post-feed' 28 28 import { 29 29 unstableCacheProfileView, 30 30 useUnstableProfileViewCache, 31 31 } from '#/state/queries/unstable-profile-cache' 32 32 + import {useUpdateProfileVerificationCache} from '#/state/queries/verification/useUpdateProfileVerificationCache' 32 33 import * as userActionHistory from '#/state/userActionHistory' 33 33 - import * as bsky from '#/types/bsky' 34 34 + import type * as bsky from '#/types/bsky' 34 35 import {updateProfileShadow} from '../cache/profile-shadow' 35 36 import {useAgent, useSession} from '../session' 36 37 import { ··· 50 51 const RQKEY_ROOT = 'profile' 51 52 export const RQKEY = (did: string) => [RQKEY_ROOT, did] 52 53 53 53 - const profilesQueryKeyRoot = 'profiles' 54 54 + export const profilesQueryKeyRoot = 'profiles' 54 55 export const profilesQueryKey = (handles: string[]) => [ 55 56 profilesQueryKeyRoot, 56 57 handles, ··· 137 138 export function useProfileUpdateMutation() { 138 139 const queryClient = useQueryClient() 139 140 const agent = useAgent() 141 141 + const updateProfileVerificationCache = useUpdateProfileVerificationCache() 140 142 return useMutation<void, Error, ProfileUpdateParams>({ 141 143 mutationFn: async ({ 142 144 profile, ··· 223 225 }), 224 226 ) 225 227 }, 226 226 - onSuccess(data, variables) { 228 228 + async onSuccess(_, variables) { 227 229 // invalidate cache 228 230 queryClient.invalidateQueries({ 229 231 queryKey: RQKEY(variables.profile.did), ··· 231 233 queryClient.invalidateQueries({ 232 234 queryKey: [profilesQueryKeyRoot, [variables.profile.did]], 233 235 }) 236 236 + await updateProfileVerificationCache({profile: variables.profile}) 234 237 }, 235 238 }) 236 239 }

+9

src/state/queries/useCurrentAccountProfile.tsx

··· 1 1 + import {useMaybeProfileShadow} from '#/state/cache/profile-shadow' 2 2 + import {useProfileQuery} from '#/state/queries/profile' 3 3 + import {useSession} from '#/state/session' 4 4 + 5 5 + export function useCurrentAccountProfile() { 6 6 + const {currentAccount} = useSession() 7 7 + const {data: profile} = useProfileQuery({did: currentAccount?.did}) 8 8 + return useMaybeProfileShadow(profile) 9 9 + }

+35

src/state/queries/verification/useUpdateProfileVerificationCache.ts

··· 1 1 + import {useCallback} from 'react' 2 2 + import {useQueryClient} from '@tanstack/react-query' 3 3 + 4 4 + import {logger} from '#/logger' 5 5 + import {updateProfileShadow} from '#/state/cache/profile-shadow' 6 6 + import {useAgent} from '#/state/session' 7 7 + import type * as bsky from '#/types/bsky' 8 8 + 9 9 + /** 10 10 + * Fetches a fresh verification state from the app view and updates our profile 11 11 + * cache. This state is computed using a variety of factors on the server, so 12 12 + * we need to get this data from the server. 13 13 + */ 14 14 + export function useUpdateProfileVerificationCache() { 15 15 + const qc = useQueryClient() 16 16 + const agent = useAgent() 17 17 + 18 18 + return useCallback( 19 19 + async ({profile}: {profile: bsky.profile.AnyProfileView}) => { 20 20 + try { 21 21 + const {data: updated} = await agent.getProfile({ 22 22 + actor: profile.did ?? '', 23 23 + }) 24 24 + updateProfileShadow(qc, profile.did, { 25 25 + verification: updated.verification, 26 26 + }) 27 27 + } catch (e) { 28 28 + logger.error(`useUpdateProfileVerificationCache failed`, { 29 29 + safeMessage: e, 30 30 + }) 31 31 + } 32 32 + }, 33 33 + [agent, qc], 34 34 + ) 35 35 + }

+53

src/state/queries/verification/useVerificationCreateMutation.tsx

··· 1 1 + import {type AppBskyActorGetProfile} from '@atproto/api' 2 2 + import {useMutation} from '@tanstack/react-query' 3 3 + 4 4 + import {until} from '#/lib/async/until' 5 5 + import {logger} from '#/logger' 6 6 + import {useUpdateProfileVerificationCache} from '#/state/queries/verification/useUpdateProfileVerificationCache' 7 7 + import {useAgent, useSession} from '#/state/session' 8 8 + import type * as bsky from '#/types/bsky' 9 9 + 10 10 + export function useVerificationCreateMutation() { 11 11 + const agent = useAgent() 12 12 + const {currentAccount} = useSession() 13 13 + const updateProfileVerificationCache = useUpdateProfileVerificationCache() 14 14 + 15 15 + return useMutation({ 16 16 + async mutationFn({profile}: {profile: bsky.profile.AnyProfileView}) { 17 17 + if (!currentAccount) { 18 18 + throw new Error('User not logged in') 19 19 + } 20 20 + 21 21 + const {uri} = await agent.app.bsky.graph.verification.create( 22 22 + {repo: currentAccount.did}, 23 23 + { 24 24 + subject: profile.did, 25 25 + createdAt: new Date().toISOString(), 26 26 + handle: profile.handle, 27 27 + displayName: profile.displayName || '', 28 28 + }, 29 29 + ) 30 30 + 31 31 + await until( 32 32 + 5, 33 33 + 1e3, 34 34 + ({data: profile}: AppBskyActorGetProfile.Response) => { 35 35 + if ( 36 36 + profile.verification && 37 37 + profile.verification.verifications.find(v => v.uri === uri) 38 38 + ) { 39 39 + return true 40 40 + } 41 41 + return false 42 42 + }, 43 43 + () => { 44 44 + return agent.getProfile({actor: profile.did ?? ''}) 45 45 + }, 46 46 + ) 47 47 + }, 48 48 + async onSuccess(_, {profile}) { 49 49 + logger.metric('verification:create', {}) 50 50 + await updateProfileVerificationCache({profile}) 51 51 + }, 52 52 + }) 53 53 + }

+63

src/state/queries/verification/useVerificationsRemoveMutation.tsx

··· 1 1 + import { 2 2 + type AppBskyActorDefs, 3 3 + type AppBskyActorGetProfile, 4 4 + AtUri, 5 5 + } from '@atproto/api' 6 6 + import {useMutation} from '@tanstack/react-query' 7 7 + 8 8 + import {until} from '#/lib/async/until' 9 9 + import {logger} from '#/logger' 10 10 + import {useUpdateProfileVerificationCache} from '#/state/queries/verification/useUpdateProfileVerificationCache' 11 11 + import {useAgent, useSession} from '#/state/session' 12 12 + import type * as bsky from '#/types/bsky' 13 13 + 14 14 + export function useVerificationsRemoveMutation() { 15 15 + const agent = useAgent() 16 16 + const {currentAccount} = useSession() 17 17 + const updateProfileVerificationCache = useUpdateProfileVerificationCache() 18 18 + 19 19 + return useMutation({ 20 20 + async mutationFn({ 21 21 + profile, 22 22 + verifications, 23 23 + }: { 24 24 + profile: bsky.profile.AnyProfileView 25 25 + verifications: AppBskyActorDefs.VerificationView[] 26 26 + }) { 27 27 + if (!currentAccount) { 28 28 + throw new Error('User not logged in') 29 29 + } 30 30 + 31 31 + const uris = verifications.map(v => v.uri) 32 32 + 33 33 + await Promise.all( 34 34 + uris.map(uri => { 35 35 + return agent.app.bsky.graph.verification.delete({ 36 36 + repo: currentAccount.did, 37 37 + rkey: new AtUri(uri).rkey, 38 38 + }) 39 39 + }), 40 40 + ) 41 41 + 42 42 + await until( 43 43 + 5, 44 44 + 1e3, 45 45 + ({data: profile}: AppBskyActorGetProfile.Response) => { 46 46 + if ( 47 47 + !profile.verification?.verifications.some(v => uris.includes(v.uri)) 48 48 + ) { 49 49 + return true 50 50 + } 51 51 + return false 52 52 + }, 53 53 + () => { 54 54 + return agent.getProfile({actor: profile.did ?? ''}) 55 55 + }, 56 56 + ) 57 57 + }, 58 58 + async onSuccess(_, {profile}) { 59 59 + logger.metric('verification:revoke', {}) 60 60 + await updateProfileVerificationCache({profile}) 61 61 + }, 62 62 + }) 63 63 + }

+1 -1

src/types/bsky/profile.ts

··· 1 1 - import {AppBskyActorDefs, ChatBskyActorDefs} from '@atproto/api' 1 1 + import {type AppBskyActorDefs, type ChatBskyActorDefs} from '@atproto/api' 2 2 3 3 /** 4 4 * Matches any profile view exported by our SDK

+56 -54

src/view/com/composer/ComposerReplyTo.tsx

··· 1 1 - import React from 'react' 2 2 - import {LayoutAnimation, Pressable, StyleSheet, View} from 'react-native' 1 1 + import {useCallback, useMemo, useState} from 'react' 2 2 + import {LayoutAnimation, Pressable, View} from 'react-native' 3 3 import {Image} from 'expo-image' 4 4 import { 5 5 AppBskyEmbedImages, ··· 12 12 13 13 import {sanitizeDisplayName} from '#/lib/strings/display-names' 14 14 import {sanitizeHandle} from '#/lib/strings/handles' 15 15 - import {ComposerOptsPostRef} from '#/state/shell/composer' 15 15 + import {type ComposerOptsPostRef} from '#/state/shell/composer' 16 16 import {MaybeQuoteEmbed} from '#/view/com/util/post-embeds/QuoteEmbed' 17 17 - import {Text} from '#/view/com/util/text/Text' 18 17 import {PreviewableUserAvatar} from '#/view/com/util/UserAvatar' 19 18 import {atoms as a, useTheme} from '#/alf' 19 19 + import {Text} from '#/components/Typography' 20 20 + import {useSimpleVerificationState} from '#/components/verification' 21 21 + import {VerificationCheck} from '#/components/verification/VerificationCheck' 20 22 21 23 export function ComposerReplyTo({replyTo}: {replyTo: ComposerOptsPostRef}) { 22 24 const t = useTheme() 23 25 const {_} = useLingui() 24 26 const {embed} = replyTo 25 27 26 26 - const [showFull, setShowFull] = React.useState(false) 28 28 + const [showFull, setShowFull] = useState(false) 27 29 28 28 - const onPress = React.useCallback(() => { 30 30 + const onPress = useCallback(() => { 29 31 setShowFull(prev => !prev) 30 32 LayoutAnimation.configureNext({ 31 33 duration: 350, ··· 33 35 }) 34 36 }, []) 35 37 36 36 - const quoteEmbed = React.useMemo(() => { 38 38 + const quoteEmbed = useMemo(() => { 37 39 if ( 38 40 AppBskyEmbedRecord.isView(embed) && 39 41 AppBskyEmbedRecord.isViewRecord(embed.record) && ··· 50 52 return null 51 53 }, [embed]) 52 54 53 53 - const images = React.useMemo(() => { 55 55 + const images = useMemo(() => { 54 56 if (AppBskyEmbedImages.isView(embed)) { 55 57 return embed.images 56 58 } else if ( ··· 61 63 } 62 64 }, [embed]) 63 65 66 66 + const verification = useSimpleVerificationState({profile: replyTo.author}) 67 67 + 64 68 return ( 65 69 <Pressable 66 66 - style={[t.atoms.border_contrast_medium, styles.replyToLayout]} 70 70 + style={[ 71 71 + a.flex_row, 72 72 + a.align_start, 73 73 + a.pt_xs, 74 74 + a.pb_lg, 75 75 + a.mb_md, 76 76 + a.mx_lg, 77 77 + a.border_b, 78 78 + t.atoms.border_contrast_medium, 79 79 + ]} 67 80 onPress={onPress} 68 81 accessibilityRole="button" 69 82 accessibilityLabel={_( 70 83 msg`Expand or collapse the full post you are replying to`, 71 84 )} 72 72 - accessibilityHint={_( 73 73 - msg`Expands or collapses the full post you are replying to`, 74 74 - )}> 85 85 + accessibilityHint=""> 75 86 <PreviewableUserAvatar 76 87 size={50} 77 88 profile={replyTo.author} ··· 79 90 type={replyTo.author.associated?.labeler ? 'labeler' : 'user'} 80 91 disableNavigation={true} 81 92 /> 82 82 - <View style={styles.replyToPost}> 83 83 - <Text type="xl-medium" style={t.atoms.text} numberOfLines={1} emoji> 84 84 - {sanitizeDisplayName( 85 85 - replyTo.author.displayName || sanitizeHandle(replyTo.author.handle), 93 93 + <View style={[a.flex_1, a.pl_md, a.pr_sm, a.gap_2xs]}> 94 94 + <View style={[a.flex_row, a.align_center, a.pr_xs]}> 95 95 + <Text 96 96 + style={[a.font_bold, a.text_md, a.flex_shrink]} 97 97 + numberOfLines={1} 98 98 + emoji> 99 99 + {sanitizeDisplayName( 100 100 + replyTo.author.displayName || 101 101 + sanitizeHandle(replyTo.author.handle), 102 102 + )} 103 103 + </Text> 104 104 + {verification.showBadge && ( 105 105 + <View style={[a.pl_xs]}> 106 106 + <VerificationCheck 107 107 + width={14} 108 108 + verifier={verification.role === 'verifier'} 109 109 + /> 110 110 + </View> 86 111 )} 87 87 - </Text> 88 88 - <View style={styles.replyToBody}> 89 89 - <View style={styles.replyToText}> 112 112 + </View> 113 113 + <View style={[a.flex_row, a.gap_md]}> 114 114 + <View style={[a.flex_1, a.flex_grow]}> 90 115 <Text 91 91 - type="post-text" 92 92 - style={t.atoms.text} 116 116 + style={[a.text_md]} 93 117 numberOfLines={!showFull ? 6 : undefined} 94 118 emoji> 95 119 {replyTo.text} ··· 112 136 showFull: boolean 113 137 }) { 114 138 return ( 115 115 - <View style={[styles.imagesContainer, a.mx_xs]}> 139 139 + <View 140 140 + style={[ 141 141 + a.rounded_xs, 142 142 + a.overflow_hidden, 143 143 + a.mt_2xs, 144 144 + a.mx_xs, 145 145 + { 146 146 + height: 64, 147 147 + width: 64, 148 148 + }, 149 149 + ]}> 116 150 {(images.length === 1 && ( 117 151 <Image 118 152 source={{uri: images[0].thumb}} ··· 196 230 </View> 197 231 ) 198 232 } 199 199 - 200 200 - const styles = StyleSheet.create({ 201 201 - replyToLayout: { 202 202 - flexDirection: 'row', 203 203 - alignItems: 'flex-start', 204 204 - borderBottomWidth: StyleSheet.hairlineWidth, 205 205 - paddingTop: 4, 206 206 - paddingBottom: 16, 207 207 - marginBottom: 12, 208 208 - marginHorizontal: 16, 209 209 - }, 210 210 - replyToPost: { 211 211 - flex: 1, 212 212 - paddingLeft: 13, 213 213 - paddingRight: 8, 214 214 - }, 215 215 - replyToBody: { 216 216 - flexDirection: 'row', 217 217 - gap: 10, 218 218 - }, 219 219 - replyToText: { 220 220 - flex: 1, 221 221 - flexGrow: 1, 222 222 - }, 223 223 - imagesContainer: { 224 224 - borderRadius: 6, 225 225 - overflow: 'hidden', 226 226 - marginTop: 2, 227 227 - height: 64, 228 228 - width: 64, 229 229 - }, 230 230 - })

+29 -3

src/view/com/modals/EditProfile.tsx

··· 8 8 TouchableOpacity, 9 9 View, 10 10 } from 'react-native' 11 11 - import {Image as RNImage} from 'react-native-image-crop-picker' 11 11 + import {type Image as RNImage} from 'react-native-image-crop-picker' 12 12 import Animated, {FadeOut} from 'react-native-reanimated' 13 13 import {LinearGradient} from 'expo-linear-gradient' 14 14 - import {AppBskyActorDefs} from '@atproto/api' 14 14 + import {type AppBskyActorDefs} from '@atproto/api' 15 15 import {msg, Trans} from '@lingui/macro' 16 16 import {useLingui} from '@lingui/react' 17 17 18 18 - import {MAX_DESCRIPTION, MAX_DISPLAY_NAME} from '#/lib/constants' 18 18 + import {MAX_DESCRIPTION, MAX_DISPLAY_NAME, urls} from '#/lib/constants' 19 19 import {usePalette} from '#/lib/hooks/usePalette' 20 20 import {compressIfNeeded} from '#/lib/media/manip' 21 21 import {cleanError} from '#/lib/strings/errors' ··· 30 30 import * as Toast from '#/view/com/util/Toast' 31 31 import {EditableUserAvatar} from '#/view/com/util/UserAvatar' 32 32 import {UserBanner} from '#/view/com/util/UserBanner' 33 33 + import {Admonition} from '#/components/Admonition' 34 34 + import {InlineLinkText} from '#/components/Link' 35 35 + import {useSimpleVerificationState} from '#/components/verification' 33 36 import {ErrorMessage} from '../util/error/ErrorMessage' 34 37 35 38 const AnimatedTouchableOpacity = ··· 139 142 setImageError, 140 143 _, 141 144 ]) 145 145 + const verification = useSimpleVerificationState({ 146 146 + profile, 147 147 + }) 148 148 + const [touchedDisplayName, setTouchedDisplayName] = useState(false) 142 149 143 150 return ( 144 151 <KeyboardAvoidingView style={s.flex1} behavior="height"> ··· 186 193 accessible={true} 187 194 accessibilityLabel={_(msg`Display name`)} 188 195 accessibilityHint={_(msg`Edit your display name`)} 196 196 + onFocus={() => setTouchedDisplayName(true)} 189 197 /> 198 198 + 199 199 + {verification.isVerified && 200 200 + verification.role === 'default' && 201 201 + touchedDisplayName && ( 202 202 + <View style={{paddingTop: 8}}> 203 203 + <Admonition type="error"> 204 204 + <Trans> 205 205 + You are verified. You will lose your verification status 206 206 + if you change your display name.{' '} 207 207 + <InlineLinkText 208 208 + label={_(msg`Learn more`)} 209 209 + to={urls.website.blog.initialVerificationAnnouncement}> 210 210 + <Trans>Learn more.</Trans> 211 211 + </InlineLinkText> 212 212 + </Trans> 213 213 + </Admonition> 214 214 + </View> 215 215 + )} 190 216 </View> 191 217 <View style={s.pb10}> 192 218 <Text style={[styles.label, pal.text]}>

+150 -54

src/view/com/notifications/NotificationFeedItem.tsx

··· 49 49 import {formatCount} from '#/view/com/util/numeric/format' 50 50 import {TimeElapsed} from '#/view/com/util/TimeElapsed' 51 51 import {PreviewableUserAvatar, UserAvatar} from '#/view/com/util/UserAvatar' 52 52 - import {atoms as a, useTheme} from '#/alf' 52 52 + import {atoms as a, platform, useTheme} from '#/alf' 53 53 import {Button, ButtonText} from '#/components/Button' 54 54 import { 55 55 ChevronBottom_Stroke2_Corner0_Rounded as ChevronDownIcon, ··· 59 59 import {PersonPlus_Filled_Stroke2_Corner0_Rounded as PersonPlusIcon} from '#/components/icons/Person' 60 60 import {Repost_Stroke2_Corner2_Rounded as RepostIcon} from '#/components/icons/Repost' 61 61 import {StarterPack} from '#/components/icons/StarterPack' 62 62 + import {VerifiedCheck} from '#/components/icons/VerifiedCheck' 62 63 import {InlineLinkText, Link} from '#/components/Link' 63 64 import * as MediaPreview from '#/components/MediaPreview' 64 65 import {ProfileHoverCard} from '#/components/ProfileHoverCard' 65 66 import {Notification as StarterPackCard} from '#/components/StarterPack/StarterPackCard' 66 67 import {SubtleWebHover} from '#/components/SubtleWebHover' 67 68 import {Text} from '#/components/Typography' 69 69 + import {useSimpleVerificationState} from '#/components/verification' 70 70 + import {VerificationCheck} from '#/components/verification/VerificationCheck' 68 71 import * as bsky from '#/types/bsky' 69 72 70 73 const MAX_AUTHORS = 5 ··· 145 148 146 149 const niceTimestamp = niceDate(i18n, item.notification.indexedAt) 147 150 const firstAuthor = authors[0] 151 151 + const firstAuthorVerification = useSimpleVerificationState({ 152 152 + profile: firstAuthor.profile, 153 153 + }) 148 154 const firstAuthorName = sanitizeDisplayName( 149 155 firstAuthor.profile.displayName || firstAuthor.profile.handle, 150 156 ) ··· 186 192 emoji 187 193 label={_(msg`Go to ${firstAuthorName}'s profile`)}> 188 194 {forceLTR(firstAuthorName)} 195 195 + {firstAuthorVerification.showBadge && ( 196 196 + <View 197 197 + style={[ 198 198 + a.relative, 199 199 + { 200 200 + paddingTop: platform({android: 2}), 201 201 + marginBottom: platform({ios: -7}), 202 202 + top: platform({web: 1}), 203 203 + paddingLeft: 3, 204 204 + paddingRight: 2, 205 205 + }, 206 206 + ]}> 207 207 + <VerificationCheck 208 208 + width={14} 209 209 + verifier={firstAuthorVerification.role === 'verifier'} 210 210 + /> 211 211 + </View> 212 212 + )} 189 213 </InlineLinkText> 190 214 ) 191 215 const additionalAuthorsCount = authors.length - 1 ··· 366 390 <StarterPack width={30} gradient="sky" /> 367 391 </View> 368 392 ) 393 393 + // @ts-ignore TODO 394 394 + } else if (item.type === 'verified') { 395 395 + a11yLabel = hasMultipleAuthors 396 396 + ? _( 397 397 + msg`${firstAuthorName} and ${plural(additionalAuthorsCount, { 398 398 + one: `${formattedAuthorsCount} other`, 399 399 + other: `${formattedAuthorsCount} others`, 400 400 + })} verified you`, 401 401 + ) 402 402 + : _(msg`${firstAuthorName} verified you`) 403 403 + notificationContent = hasMultipleAuthors ? ( 404 404 + <Trans> 405 405 + {firstAuthorLink} and{' '} 406 406 + <Text style={[pal.text, s.bold]}> 407 407 + <Plural 408 408 + value={additionalAuthorsCount} 409 409 + one={`${formattedAuthorsCount} other`} 410 410 + other={`${formattedAuthorsCount} others`} 411 411 + /> 412 412 + </Text>{' '} 413 413 + verified you 414 414 + </Trans> 415 415 + ) : ( 416 416 + <Trans>{firstAuthorLink} verified you</Trans> 417 417 + ) 418 418 + icon = <VerifiedCheck size="xl" /> 419 419 + // @ts-ignore TODO 420 420 + } else if (item.type === 'unverified') { 421 421 + a11yLabel = hasMultipleAuthors 422 422 + ? _( 423 423 + msg`${firstAuthorName} and ${plural(additionalAuthorsCount, { 424 424 + one: `${formattedAuthorsCount} other`, 425 425 + other: `${formattedAuthorsCount} others`, 426 426 + })} removed their verifications from your account`, 427 427 + ) 428 428 + : _(msg`${firstAuthorName} removed their verification from your account`) 429 429 + notificationContent = hasMultipleAuthors ? ( 430 430 + <Trans> 431 431 + {firstAuthorLink} and{' '} 432 432 + <Text style={[pal.text, s.bold]}> 433 433 + <Plural 434 434 + value={additionalAuthorsCount} 435 435 + one={`${formattedAuthorsCount} other`} 436 436 + other={`${formattedAuthorsCount} others`} 437 437 + /> 438 438 + </Text>{' '} 439 439 + removed their verifications from your account 440 440 + </Trans> 441 441 + ) : ( 442 442 + <Trans> 443 443 + {firstAuthorLink} removed their verification from your account 444 444 + </Trans> 445 445 + ) 446 446 + icon = <VerifiedCheck size="xl" fill={t.palette.contrast_500} /> 369 447 } else { 370 448 return null 371 449 } ··· 447 525 style={[ 448 526 a.flex_row, 449 527 a.flex_wrap, 450 450 - a.pb_2xs, 451 528 {paddingTop: 6}, 452 529 a.self_start, 453 530 a.text_md, ··· 475 552 </Text> 476 553 </ExpandListPressable> 477 554 {item.type === 'post-like' || item.type === 'repost' ? ( 478 478 - <AdditionalPostText post={item.subject} /> 555 555 + <View style={[a.pt_2xs]}> 556 556 + <AdditionalPostText post={item.subject} /> 557 557 + </View> 479 558 ) : null} 480 559 {item.type === 'feedgen-like' && item.subjectUri ? ( 481 560 <FeedSourceCard ··· 672 751 visible: boolean 673 752 authors: Author[] 674 753 }) { 675 675 - const {_} = useLingui() 676 676 - const t = useTheme() 677 754 const heightInterp = useAnimatedValue(visible ? 1 : 0) 678 755 const targetHeight = 679 756 authors.length * (EXPANDED_AUTHOR_EL_HEIGHT + 10) /*10=margin*/ ··· 692 769 <Animated.View style={[a.overflow_hidden, heightStyle]}> 693 770 {visible && 694 771 authors.map(author => ( 695 695 - <Link 696 696 - key={author.profile.did} 697 697 - label={author.profile.displayName || author.profile.handle} 698 698 - accessibilityHint={_(msg`Opens this profile`)} 699 699 - to={makeProfileLink({ 700 700 - did: author.profile.did, 701 701 - handle: author.profile.handle, 702 702 - })} 703 703 - style={styles.expandedAuthor}> 704 704 - <View style={[a.mr_sm]}> 705 705 - <ProfileHoverCard did={author.profile.did}> 706 706 - <UserAvatar 707 707 - size={35} 708 708 - avatar={author.profile.avatar} 709 709 - moderation={author.moderation.ui('avatar')} 710 710 - type={author.profile.associated?.labeler ? 'labeler' : 'user'} 711 711 - /> 712 712 - </ProfileHoverCard> 713 713 - </View> 714 714 - <View style={[a.flex_1]}> 715 715 - <View style={[a.flex_row, a.align_end]}> 716 716 - <Text 717 717 - numberOfLines={1} 718 718 - emoji 719 719 - style={[ 720 720 - a.text_md, 721 721 - a.font_bold, 722 722 - a.leading_tight, 723 723 - {maxWidth: '70%'}, 724 724 - ]}> 725 725 - {sanitizeDisplayName( 726 726 - author.profile.displayName || author.profile.handle, 727 727 - )} 728 728 - </Text> 729 729 - <Text 730 730 - numberOfLines={1} 731 731 - style={[ 732 732 - a.pl_xs, 733 733 - a.text_md, 734 734 - a.leading_tight, 735 735 - a.flex_shrink, 736 736 - t.atoms.text_contrast_medium, 737 737 - ]}> 738 738 - {sanitizeHandle(author.profile.handle, '@')} 739 739 - </Text> 740 740 - </View> 741 741 - </View> 742 742 - </Link> 772 772 + <ExpandedAuthorCard key={author.profile.did} author={author} /> 743 773 ))} 744 774 </Animated.View> 745 775 ) 746 776 } 747 777 778 778 + function ExpandedAuthorCard({author}: {author: Author}) { 779 779 + const t = useTheme() 780 780 + const {_} = useLingui() 781 781 + const verification = useSimpleVerificationState({ 782 782 + profile: author.profile, 783 783 + }) 784 784 + return ( 785 785 + <Link 786 786 + key={author.profile.did} 787 787 + label={author.profile.displayName || author.profile.handle} 788 788 + accessibilityHint={_(msg`Opens this profile`)} 789 789 + to={makeProfileLink({ 790 790 + did: author.profile.did, 791 791 + handle: author.profile.handle, 792 792 + })} 793 793 + style={styles.expandedAuthor}> 794 794 + <View style={[a.mr_sm]}> 795 795 + <ProfileHoverCard did={author.profile.did}> 796 796 + <UserAvatar 797 797 + size={35} 798 798 + avatar={author.profile.avatar} 799 799 + moderation={author.moderation.ui('avatar')} 800 800 + type={author.profile.associated?.labeler ? 'labeler' : 'user'} 801 801 + /> 802 802 + </ProfileHoverCard> 803 803 + </View> 804 804 + <View style={[a.flex_1]}> 805 805 + <View style={[a.flex_row, a.align_end]}> 806 806 + <Text 807 807 + numberOfLines={1} 808 808 + emoji 809 809 + style={[ 810 810 + a.text_md, 811 811 + a.font_bold, 812 812 + a.leading_tight, 813 813 + {maxWidth: '70%'}, 814 814 + ]}> 815 815 + {sanitizeDisplayName( 816 816 + author.profile.displayName || author.profile.handle, 817 817 + )} 818 818 + </Text> 819 819 + {verification.showBadge && ( 820 820 + <View style={[a.pl_xs, a.self_center]}> 821 821 + <VerificationCheck 822 822 + width={14} 823 823 + verifier={verification.role === 'verifier'} 824 824 + /> 825 825 + </View> 826 826 + )} 827 827 + <Text 828 828 + numberOfLines={1} 829 829 + style={[ 830 830 + a.pl_xs, 831 831 + a.text_md, 832 832 + a.leading_tight, 833 833 + a.flex_shrink, 834 834 + t.atoms.text_contrast_medium, 835 835 + ]}> 836 836 + {sanitizeHandle(author.profile.handle, '@')} 837 837 + </Text> 838 838 + </View> 839 839 + </View> 840 840 + </Link> 841 841 + ) 842 842 + } 843 843 + 748 844 function AdditionalPostText({post}: {post?: AppBskyFeedDefs.PostView}) { 749 845 const t = useTheme() 750 846 if ( ··· 761 857 {text?.length > 0 && ( 762 858 <Text 763 859 emoji 764 764 - style={[a.text_md, a.leading_snug, t.atoms.text_contrast_medium]}> 860 860 + style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}> 765 861 {text} 766 862 </Text> 767 863 )}

+32 -12

src/view/com/post-thread/PostThreadItem.tsx

··· 32 32 type Shadow, 33 33 usePostShadow, 34 34 } from '#/state/cache/post-shadow' 35 35 + import {useProfileShadow} from '#/state/cache/profile-shadow' 35 36 import {useLanguagePrefs} from '#/state/preferences' 36 37 import {type ThreadPost} from '#/state/queries/post-thread' 37 38 import {useSession} from '#/state/session' ··· 62 63 import {RichText} from '#/components/RichText' 63 64 import {SubtleWebHover} from '#/components/SubtleWebHover' 64 65 import {Text} from '#/components/Typography' 66 66 + import {VerificationCheckButton} from '#/components/verification/VerificationCheckButton' 65 67 import {WhoCanReply} from '#/components/WhoCanReply' 66 68 import * as bsky from '#/types/bsky' 67 69 ··· 207 209 () => countLines(richText?.text) >= MAX_POST_LINES, 208 210 ) 209 211 const {currentAccount} = useSession() 212 212 + const shadowedPostAuthor = useProfileShadow(post.author) 210 213 const rootUri = record.reply?.root?.uri || post.uri 211 214 const postHref = React.useMemo(() => { 212 215 const urip = new AtUri(post.uri) ··· 329 332 type={post.author.associated?.labeler ? 'labeler' : 'user'} 330 333 /> 331 334 <View style={[a.flex_1]}> 332 332 - <Link style={s.flex1} href={authorHref} title={authorTitle}> 333 333 - <Text 334 334 - emoji 335 335 - style={[a.text_lg, a.font_bold, a.leading_snug, a.self_start]} 336 336 - numberOfLines={1}> 337 337 - {sanitizeDisplayName( 338 338 - post.author.displayName || 339 339 - sanitizeHandle(post.author.handle), 340 340 - moderation.ui('displayName'), 341 341 - )} 342 342 - </Text> 343 343 - </Link> 335 335 + <View style={[a.flex_row, a.align_center]}> 336 336 + <Link 337 337 + style={[a.flex_shrink]} 338 338 + href={authorHref} 339 339 + title={authorTitle}> 340 340 + <Text 341 341 + emoji 342 342 + style={[ 343 343 + a.text_lg, 344 344 + a.font_bold, 345 345 + a.leading_snug, 346 346 + a.self_start, 347 347 + ]} 348 348 + numberOfLines={1}> 349 349 + {sanitizeDisplayName( 350 350 + post.author.displayName || 351 351 + sanitizeHandle(post.author.handle), 352 352 + moderation.ui('displayName'), 353 353 + )} 354 354 + </Text> 355 355 + </Link> 356 356 + 357 357 + <View style={[{paddingLeft: 3, top: -1}]}> 358 358 + <VerificationCheckButton 359 359 + profile={shadowedPostAuthor} 360 360 + size="md" 361 361 + /> 362 362 + </View> 363 363 + </View> 344 364 <Link style={s.flex1} href={authorHref} title={authorTitle}> 345 365 <Text 346 366 emoji

+49 -3

src/view/com/profile/ProfileMenu.tsx

··· 1 1 import React, {memo} from 'react' 2 2 - import {AppBskyActorDefs} from '@atproto/api' 2 2 + import {type AppBskyActorDefs} from '@atproto/api' 3 3 import {msg, Trans} from '@lingui/macro' 4 4 import {useLingui} from '@lingui/react' 5 5 import {useNavigation} from '@react-navigation/native' ··· 7 7 8 8 import {HITSLOP_20} from '#/lib/constants' 9 9 import {makeProfileLink} from '#/lib/routes/links' 10 10 - import {NavigationProp} from '#/lib/routes/types' 10 10 + import {type NavigationProp} from '#/lib/routes/types' 11 11 import {shareText, shareUrl} from '#/lib/sharing' 12 12 import {toShareUrl} from '#/lib/strings/url-helpers' 13 13 import {logger} from '#/logger' 14 14 - import {Shadow} from '#/state/cache/types' 14 14 + import {type Shadow} from '#/state/cache/types' 15 15 import {useModalControls} from '#/state/modals' 16 16 import {useDevModeEnabled} from '#/state/preferences/dev-mode' 17 17 import { ··· 25 25 import * as Toast from '#/view/com/util/Toast' 26 26 import {Button, ButtonIcon} from '#/components/Button' 27 27 import {ArrowOutOfBox_Stroke2_Corner0_Rounded as Share} from '#/components/icons/ArrowOutOfBox' 28 28 + import {CircleCheck_Stroke2_Corner0_Rounded as CircleCheck} from '#/components/icons/CircleCheck' 29 29 + import {CircleX_Stroke2_Corner0_Rounded as CircleX} from '#/components/icons/CircleX' 28 30 import {DotGrid_Stroke2_Corner0_Rounded as Ellipsis} from '#/components/icons/DotGrid' 29 31 import {Flag_Stroke2_Corner0_Rounded as Flag} from '#/components/icons/Flag' 30 32 import {ListSparkle_Stroke2_Corner0_Rounded as List} from '#/components/icons/ListSparkle' ··· 43 45 useReportDialogControl, 44 46 } from '#/components/moderation/ReportDialog' 45 47 import * as Prompt from '#/components/Prompt' 48 48 + import {useFullVerificationState} from '#/components/verification' 49 49 + import {VerificationCreatePrompt} from '#/components/verification/VerificationCreatePrompt' 50 50 + import {VerificationRemovePrompt} from '#/components/verification/VerificationRemovePrompt' 46 51 47 52 let ProfileMenu = ({ 48 53 profile, ··· 61 66 const isFollowingBlockedAccount = isFollowing && isBlocked 62 67 const isLabelerAndNotBlocked = !!profile.associated?.labeler && !isBlocked 63 68 const [devModeEnabled] = useDevModeEnabled() 69 69 + const verification = useFullVerificationState({profile}) 64 70 65 71 const [queueMute, queueUnmute] = useProfileMuteMutationQueue(profile) 66 72 const [queueBlock, queueUnblock] = useProfileBlockMutationQueue(profile) ··· 188 194 navigation.navigate('ProfileSearch', {name: profile.handle}) 189 195 }, [navigation, profile.handle]) 190 196 197 197 + const verificationCreatePromptControl = Prompt.usePromptControl() 198 198 + const verificationRemovePromptControl = Prompt.usePromptControl() 199 199 + const currentAccountVerifications = 200 200 + profile.verification?.verifications?.filter(v => { 201 201 + return v.issuer === currentAccount?.did 202 202 + }) ?? [] 203 203 + 191 204 return ( 192 205 <EventStopper onKeyDown={false}> 193 206 <Menu.Root> ··· 277 290 </Menu.ItemText> 278 291 <Menu.ItemIcon icon={List} /> 279 292 </Menu.Item> 293 293 + {verification.viewer.role === 'verifier' && 294 294 + !verification.profile.isViewer && 295 295 + (verification.viewer.hasIssuedVerification ? ( 296 296 + <Menu.Item 297 297 + testID="profileHeaderDropdownVerificationRemoveButton" 298 298 + label={_(msg`Remove verification`)} 299 299 + onPress={() => verificationRemovePromptControl.open()}> 300 300 + <Menu.ItemText> 301 301 + <Trans>Remove verification</Trans> 302 302 + </Menu.ItemText> 303 303 + <Menu.ItemIcon icon={CircleX} /> 304 304 + </Menu.Item> 305 305 + ) : ( 306 306 + <Menu.Item 307 307 + testID="profileHeaderDropdownVerificationCreateButton" 308 308 + label={_(msg`Verify account`)} 309 309 + onPress={() => verificationCreatePromptControl.open()}> 310 310 + <Menu.ItemText> 311 311 + <Trans>Verify account</Trans> 312 312 + </Menu.ItemText> 313 313 + <Menu.ItemIcon icon={CircleCheck} /> 314 314 + </Menu.Item> 315 315 + ))} 280 316 {!isSelf && ( 281 317 <> 282 318 {!profile.viewer?.blocking && ··· 409 445 )} 410 446 onConfirm={onPressShare} 411 447 confirmButtonCta={_(msg`Share anyway`)} 448 448 + /> 449 449 + 450 450 + <VerificationCreatePrompt 451 451 + control={verificationCreatePromptControl} 452 452 + profile={profile} 453 453 + /> 454 454 + <VerificationRemovePrompt 455 455 + control={verificationRemovePromptControl} 456 456 + profile={profile} 457 457 + verifications={currentAccountVerifications} 412 458 /> 413 459 </EventStopper> 414 460 )

+106 -69

src/view/com/util/PostMeta.tsx

··· 1 1 - import React, {memo, useCallback} from 'react' 2 2 - import {StyleProp, View, ViewStyle} from 'react-native' 3 3 - import {AppBskyActorDefs, ModerationDecision} from '@atproto/api' 1 1 + import {memo, useCallback} from 'react' 2 2 + import {type StyleProp, View, type ViewStyle} from 'react-native' 3 3 + import {type AppBskyActorDefs, type ModerationDecision} from '@atproto/api' 4 4 import {msg} from '@lingui/macro' 5 5 import {useLingui} from '@lingui/react' 6 6 import {useQueryClient} from '@tanstack/react-query' 7 7 + import type React from 'react' 7 8 8 9 import {makeProfileLink} from '#/lib/routes/links' 9 10 import {forceLTR} from '#/lib/strings/bidi' ··· 12 13 import {sanitizeHandle} from '#/lib/strings/handles' 13 14 import {niceDate} from '#/lib/strings/time' 14 15 import {isAndroid} from '#/platform/detection' 16 16 + import {useProfileShadow} from '#/state/cache/profile-shadow' 15 17 import {precacheProfile} from '#/state/queries/profile' 16 16 - import {atoms as a, useTheme, web} from '#/alf' 18 18 + import {atoms as a, platform, useTheme, web} from '#/alf' 17 19 import {WebOnlyInlineLinkText} from '#/components/Link' 18 20 import {ProfileHoverCard} from '#/components/ProfileHoverCard' 19 21 import {Text} from '#/components/Typography' 22 22 + import {useSimpleVerificationState} from '#/components/verification' 23 23 + import {VerificationCheck} from '#/components/verification/VerificationCheck' 20 24 import {TimeElapsed} from './TimeElapsed' 21 25 import {PreviewableUserAvatar} from './UserAvatar' 22 26 ··· 35 39 const t = useTheme() 36 40 const {i18n, _} = useLingui() 37 41 38 38 - const displayName = opts.author.displayName || opts.author.handle 39 39 - const handle = opts.author.handle 40 40 - const profileLink = makeProfileLink(opts.author) 42 42 + const author = useProfileShadow(opts.author) 43 43 + const displayName = author.displayName || author.handle 44 44 + const handle = author.handle 45 45 + const profileLink = makeProfileLink(author) 41 46 const queryClient = useQueryClient() 42 47 const onOpenAuthor = opts.onOpenAuthor 43 48 const onBeforePressAuthor = useCallback(() => { 44 44 - precacheProfile(queryClient, opts.author) 49 49 + precacheProfile(queryClient, author) 45 50 onOpenAuthor?.() 46 46 - }, [queryClient, opts.author, onOpenAuthor]) 51 51 + }, [queryClient, author, onOpenAuthor]) 47 52 const onBeforePressPost = useCallback(() => { 48 48 - precacheProfile(queryClient, opts.author) 49 49 - }, [queryClient, opts.author]) 53 53 + precacheProfile(queryClient, author) 54 54 + }, [queryClient, author]) 50 55 51 56 const timestampLabel = niceDate(i18n, opts.timestamp) 57 57 + const verification = useSimpleVerificationState({profile: author}) 52 58 53 59 return ( 54 60 <View ··· 56 62 a.flex_1, 57 63 a.flex_row, 58 64 a.align_center, 59 59 - a.pb_2xs, 65 65 + a.pb_xs, 60 66 a.gap_xs, 61 61 - a.z_10, 67 67 + a.z_20, 62 68 opts.style, 63 69 ]}> 64 70 {opts.showAvatar && ( 65 71 <View style={[a.self_center, a.mr_2xs]}> 66 72 <PreviewableUserAvatar 67 73 size={opts.avatarSize || 16} 68 68 - profile={opts.author} 74 74 + profile={author} 69 75 moderation={opts.moderation?.ui('avatar')} 70 70 - type={opts.author.associated?.labeler ? 'labeler' : 'user'} 76 76 + type={author.associated?.labeler ? 'labeler' : 'user'} 71 77 /> 72 78 </View> 73 79 )} 74 74 - <ProfileHoverCard inline did={opts.author.did}> 75 75 - <Text numberOfLines={1} style={[isAndroid ? a.flex_1 : a.flex_shrink]}> 76 76 - <WebOnlyInlineLinkText 77 77 - to={profileLink} 78 78 - label={_(msg`View profile`)} 79 79 - disableMismatchWarning 80 80 - onPress={onBeforePressAuthor} 81 81 - style={[t.atoms.text]}> 82 82 - <Text emoji style={[a.text_md, a.font_bold, a.leading_snug]}> 80 80 + <View style={[a.flex_row, a.align_end, a.flex_shrink]}> 81 81 + <ProfileHoverCard inline did={author.did}> 82 82 + <View style={[a.flex_row, a.align_end, a.flex_shrink]}> 83 83 + <WebOnlyInlineLinkText 84 84 + emoji 85 85 + numberOfLines={1} 86 86 + to={profileLink} 87 87 + label={_(msg`View profile`)} 88 88 + disableMismatchWarning 89 89 + onPress={onBeforePressAuthor} 90 90 + style={[ 91 91 + a.text_md, 92 92 + a.font_bold, 93 93 + t.atoms.text, 94 94 + a.leading_tight, 95 95 + {maxWidth: '70%', flexShrink: 0}, 96 96 + ]}> 83 97 {forceLTR( 84 98 sanitizeDisplayName( 85 99 displayName, 86 100 opts.moderation?.ui('displayName'), 87 101 ), 88 102 )} 89 89 - </Text> 90 90 - </WebOnlyInlineLinkText> 91 91 - <WebOnlyInlineLinkText 92 92 - to={profileLink} 93 93 - label={_(msg`View profile`)} 94 94 - disableMismatchWarning 95 95 - disableUnderline 96 96 - onPress={onBeforePressAuthor} 97 97 - style={[a.text_md, t.atoms.text_contrast_medium, a.leading_snug]}> 98 98 - <Text 99 99 - emoji 100 100 - style={[a.text_md, t.atoms.text_contrast_medium, a.leading_snug]}> 103 103 + </WebOnlyInlineLinkText> 104 104 + {verification.showBadge && ( 105 105 + <View 106 106 + style={[ 107 107 + a.pl_2xs, 108 108 + a.self_center, 109 109 + { 110 110 + marginTop: platform({web: -1, ios: -1, android: -2}), 111 111 + }, 112 112 + ]}> 113 113 + <VerificationCheck 114 114 + width={14} 115 115 + verifier={verification.role === 'verifier'} 116 116 + /> 117 117 + </View> 118 118 + )} 119 119 + <WebOnlyInlineLinkText 120 120 + numberOfLines={1} 121 121 + to={profileLink} 122 122 + label={_(msg`View profile`)} 123 123 + disableMismatchWarning 124 124 + disableUnderline 125 125 + onPress={onBeforePressAuthor} 126 126 + style={[ 127 127 + a.text_md, 128 128 + t.atoms.text_contrast_medium, 129 129 + a.leading_tight, 130 130 + {flexShrink: 10}, 131 131 + ]}> 101 132 {NON_BREAKING_SPACE + sanitizeHandle(handle, '@')} 102 102 - </Text> 103 103 - </WebOnlyInlineLinkText> 104 104 - </Text> 105 105 - </ProfileHoverCard> 133 133 + </WebOnlyInlineLinkText> 134 134 + </View> 135 135 + </ProfileHoverCard> 106 136 107 107 - {!isAndroid && ( 108 108 - <Text 109 109 - style={[a.text_md, t.atoms.text_contrast_medium]} 110 110 - accessible={false}> 111 111 - &middot; 112 112 - </Text> 113 113 - )} 114 114 - 115 115 - <TimeElapsed timestamp={opts.timestamp}> 116 116 - {({timeElapsed}) => ( 117 117 - <WebOnlyInlineLinkText 118 118 - to={opts.postHref} 119 119 - label={timestampLabel} 120 120 - title={timestampLabel} 121 121 - disableMismatchWarning 122 122 - disableUnderline 123 123 - onPress={onBeforePressPost} 124 124 - style={[ 125 125 - a.text_md, 126 126 - t.atoms.text_contrast_medium, 127 127 - a.leading_snug, 128 128 - web({ 129 129 - whiteSpace: 'nowrap', 130 130 - }), 131 131 - ]}> 132 132 - {timeElapsed} 133 133 - </WebOnlyInlineLinkText> 134 134 - )} 135 135 - </TimeElapsed> 137 137 + <TimeElapsed timestamp={opts.timestamp}> 138 138 + {({timeElapsed}) => ( 139 139 + <WebOnlyInlineLinkText 140 140 + to={opts.postHref} 141 141 + label={timestampLabel} 142 142 + title={timestampLabel} 143 143 + disableMismatchWarning 144 144 + disableUnderline 145 145 + onPress={onBeforePressPost} 146 146 + style={[ 147 147 + a.pl_xs, 148 148 + a.text_md, 149 149 + a.leading_tight, 150 150 + isAndroid && a.flex_grow, 151 151 + a.text_right, 152 152 + t.atoms.text_contrast_medium, 153 153 + web({ 154 154 + whiteSpace: 'nowrap', 155 155 + }), 156 156 + ]}> 157 157 + {!isAndroid && ( 158 158 + <Text 159 159 + style={[ 160 160 + a.text_md, 161 161 + a.leading_tight, 162 162 + t.atoms.text_contrast_medium, 163 163 + ]} 164 164 + accessible={false}> 165 165 + &middot;{' '} 166 166 + </Text> 167 167 + )} 168 168 + {timeElapsed} 169 169 + </WebOnlyInlineLinkText> 170 170 + )} 171 171 + </TimeElapsed> 172 172 + </View> 136 173 </View> 137 174 ) 138 175 }

+23 -7

src/view/shell/Drawer.tsx

··· 51 51 } from '#/components/icons/UserCircle' 52 52 import {InlineLinkText} from '#/components/Link' 53 53 import {Text} from '#/components/Typography' 54 54 + import {useSimpleVerificationState} from '#/components/verification' 55 55 + import {VerificationCheck} from '#/components/verification/VerificationCheck' 54 56 55 57 const iconWidth = 26 56 58 ··· 64 66 const {_, i18n} = useLingui() 65 67 const t = useTheme() 66 68 const {data: profile} = useProfileQuery({did: account.did}) 69 69 + const verification = useSimpleVerificationState({profile}) 67 70 68 71 return ( 69 72 <TouchableOpacity ··· 71 74 accessibilityLabel={_(msg`Profile`)} 72 75 accessibilityHint={_(msg`Navigates to your profile`)} 73 76 onPress={onPressProfile} 74 74 - style={[a.gap_sm]}> 77 77 + style={[a.gap_sm, a.pr_lg]}> 75 78 <UserAvatar 76 79 size={52} 77 80 avatar={profile?.avatar} ··· 80 83 type={profile?.associated?.labeler ? 'labeler' : 'user'} 81 84 /> 82 85 <View style={[a.gap_2xs]}> 83 83 - <Text 84 84 - emoji 85 85 - style={[a.font_heavy, a.text_xl, a.mt_2xs, a.leading_tight]} 86 86 - numberOfLines={1}> 87 87 - {profile?.displayName || account.handle} 88 88 - </Text> 86 86 + <View style={[a.flex_row, a.align_center, a.gap_xs, a.flex_1]}> 87 87 + <Text 88 88 + emoji 89 89 + style={[a.font_heavy, a.text_xl, a.mt_2xs, a.leading_tight]} 90 90 + numberOfLines={1}> 91 91 + {profile?.displayName || account.handle} 92 92 + </Text> 93 93 + {verification.showBadge && ( 94 94 + <View 95 95 + style={{ 96 96 + top: 0, 97 97 + }}> 98 98 + <VerificationCheck 99 99 + width={16} 100 100 + verifier={verification.role === 'verifier'} 101 101 + /> 102 102 + </View> 103 103 + )} 104 104 + </View> 89 105 <Text 90 106 emoji 91 107 style={[t.atoms.text_contrast_medium, a.text_md, a.leading_tight]}

+4 -4

yarn.lock

··· 80 80 tlds "^1.234.0" 81 81 zod "^3.23.8" 82 82 83 83 - "@atproto/api@^0.14.21": 84 84 - version "0.14.21" 85 85 - resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.14.21.tgz#29c189b7dba316945cf7317b9ded49b1b60d3ad9" 86 86 - integrity sha512-hCIcjks/snscH3ZtZFoicQN2hRM5MpWQUvvzyIa265XQ2vSv5BP+gsQVIHWtYKt+gzwq1E7jY4us6c4N7fsLlQ== 83 83 + "@atproto/api@^0.15.3": 84 84 + version "0.15.3" 85 85 + resolved "https://registry.yarnpkg.com/@atproto/api/-/api-0.15.3.tgz#f69f32f5446bfa38ff41b12a98078a61a07f6b49" 86 86 + integrity sha512-HrNaKWHZoVv4pxrt5ITyqG/f1veEitm6Egrvs4ZaDS1FyYDLNVdgLDr4ccW76iFs8ja1xQuQtZNakHbgQUN92w== 87 87 dependencies: 88 88 "@atproto/common-web" "^0.4.1" 89 89 "@atproto/lexicon" "^0.4.10"