src/components/DisplaySigit/index.tsx

@@ -1,5 +1,5 @@
 import { Meta } from '../../types'
-import { SigitCardDisplayInfo, SigitStatus } from '../../utils'
+import { SigitCardDisplayInfo, SigitStatus, SignStatus } from '../../utils'
 import { Link } from 'react-router-dom'
 import { formatTimestamp, hexToNpub, npubToHex, shorten } from '../../utils'
 import { appPublicRoutes, appPrivateRoutes } from '../../routes'
@@ -13,7 +13,6 @@ import {
   faFile
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { UserAvatar } from '../UserAvatar'
 import { UserAvatarGroup } from '../UserAvatarGroup'
 
 import styles from './style.module.scss'
@@ -34,7 +33,8 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
     submittedBy,
     signers,
     signedStatus,
-    fileExtensions
+    fileExtensions,
+    isValid
   } = parsedMeta
 
   const { signersStatus } = useSigitMeta(meta)
@@ -62,6 +62,7 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
             const profile = profiles[submittedBy]
             return (
               <Tooltip
+                key={submittedBy}
                 title={
                   profile?.display_name ||
                   profile?.name ||
@@ -72,7 +73,11 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
                 disableInteractive
               >
                 <TooltipChild>
-                  <UserAvatar pubkey={submittedBy} image={profile?.picture} />
+                  <DisplaySigner
+                    status={isValid ? SignStatus.Signed : SignStatus.Invalid}
+                    profile={profile}
+                    pubkey={submittedBy}
+                  />
                 </TooltipChild>
               </Tooltip>
             )

src/components/UsersDetails.tsx/index.tsx

@@ -9,7 +9,6 @@ import {
   shorten,
   SignStatus
 } from '../../utils'
-import { UserAvatar } from '../UserAvatar'
 import { useSigitMeta } from '../../hooks/useSigitMeta'
 import { UserAvatarGroup } from '../UserAvatarGroup'
 
@@ -44,7 +43,8 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
     createdAt,
     completedAt,
     parsedSignatureEvents,
-    signedStatus
+    signedStatus,
+    isValid
   } = useSigitMeta(meta)
   const { usersPubkey } = useSelector((state: State) => state.auth)
   const profiles = useSigitProfiles([
@@ -68,6 +68,7 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
               const profile = profiles[submittedBy]
               return (
                 <Tooltip
+                  key={submittedBy}
                   title={
                     profile?.display_name ||
                     profile?.name ||
@@ -78,7 +79,11 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
                   disableInteractive
                 >
                   <TooltipChild>
-                    <UserAvatar pubkey={submittedBy} image={profile?.picture} />
+                    <DisplaySigner
+                      status={isValid ? SignStatus.Signed : SignStatus.Invalid}
+                      profile={profile}
+                      pubkey={submittedBy}
+                    />
                   </TooltipChild>
                 </Tooltip>
               )

src/utils/meta.ts

@@ -1,6 +1,6 @@
 import { CreateSignatureEventContent, Meta } from '../types'
 import { fromUnixTimestamp, parseJson } from '.'
-import { Event } from 'nostr-tools'
+import { Event, verifyEvent } from 'nostr-tools'
 import { toast } from 'react-toastify'
 
 export enum SignStatus {
@@ -75,6 +75,7 @@ export interface SigitCardDisplayInfo {
   signers: `npub1${string}`[]
   fileExtensions: string[]
   signedStatus: SigitStatus
+  isValid: boolean
 }
 
 /**
@@ -128,12 +129,15 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
   const sigitInfo: SigitCardDisplayInfo = {
     signers: [],
     fileExtensions: [],
-    signedStatus: SigitStatus.Partial
+    signedStatus: SigitStatus.Partial,
+    isValid: false
   }
 
   try {
     const createSignatureEvent = await parseNostrEvent(meta.createSignature)
 
+    sigitInfo.isValid = verifyEvent(createSignatureEvent)
+
     // created_at in nostr events are stored in seconds
     sigitInfo.createdAt = fromUnixTimestamp(createSignatureEvent.created_at)