diff --git a/src/app/components/MemberVerificationBadge.tsx b/src/app/components/MemberVerificationBadge.tsx new file mode 100644 index 000000000..2a206532d --- /dev/null +++ b/src/app/components/MemberVerificationBadge.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import { Icon, Icons, Text, Tooltip, TooltipProvider } from 'folds'; +import { useUserVerifiedStatus } from '../hooks/useUserVerifiedStatus'; + +type MemberVerificationBadgeProps = { + userId: string; +}; + +export function MemberVerificationBadge({ userId }: MemberVerificationBadgeProps) { + const vs = useUserVerifiedStatus(userId); + if (vs === 'unknown') return null; + const color = + vs === 'verified' ? 'var(--tc-positive-normal, #5effc4)' : 'var(--tc-warning-normal, #ffcc55)'; + const label = vs === 'verified' ? 'Identity verified' : 'Not verified'; + return ( + + {label} + + } + > + {(ref) => ( + + + + )} + + ); +} diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx index 78d201ec6..c5652a746 100644 --- a/src/app/components/user-profile/UserRoomProfile.tsx +++ b/src/app/components/user-profile/UserRoomProfile.tsx @@ -10,6 +10,8 @@ import { usePowerLevels } from '../../hooks/usePowerLevels'; import { useRoom } from '../../hooks/useRoom'; import { useUserPresence } from '../../hooks/useUserPresence'; import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips'; +import { useCrossSigningActive } from '../../hooks/useCrossSigning'; +import { MemberVerificationBadge } from '../MemberVerificationBadge'; import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile'; import { PowerChip } from './PowerChip'; import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration'; @@ -28,6 +30,7 @@ type UserRoomProfileProps = { }; export function UserRoomProfile({ userId }: UserRoomProfileProps) { const mx = useMatrixClient(); + const crossSigningActive = useCrossSigningActive(); const useAuthentication = useMediaAuthentication(); const navigate = useNavigate(); const closeUserRoomProfile = useCloseUserRoomProfile(); @@ -35,6 +38,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) { const ignored = ignoredUsers.includes(userId); const room = useRoom(); + const showEncryption = room.hasEncryptionStateEvent() && crossSigningActive; const powerLevels = usePowerLevels(room); const creators = useRoomCreators(room); @@ -76,8 +80,9 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) { /> - + + {showEncryption && } {userId !== myUserId && (