chore(git): merge pull request 'feat(verify-page): new verify page design' (#151) from 136-verify-page-after-merges into staging

Reviewed-on: #151

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([
@@ -56,7 +56,7 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
     typeof usersPubkey !== 'undefined' &&
     signers.includes(hexToNpub(usersPubkey))
 
-  const ext = extractFileExtensions(Object.keys(fileHashes))
+  const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
 
   return submittedBy ? (
     <div className={styles.container}>
@@ -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>
               )
@@ -196,14 +201,14 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
         <span className={styles.detailsItem}>
           <FontAwesomeIcon icon={faEye} /> {signedStatus}
         </span>
-        {ext.length > 0 ? (
+        {extensions.length > 0 ? (
           <span className={styles.detailsItem}>
-            {ext.length > 1 ? (
+            {!isSame ? (
               <>
                 <FontAwesomeIcon icon={faFile} /> Multiple File Types
               </>
             ) : (
-              getExtensionIconLabel(ext[0])
+              getExtensionIconLabel(extensions[0])
             )}
           </span>
         ) : (

src/hooks/useSigitMeta.tsx

@@ -1,5 +1,10 @@
 import { useEffect, useState } from 'react'
-import { CreateSignatureEventContent, Meta, SignedEventContent } from '../types'
+import {
+  CreateSignatureEventContent,
+  DocSignatureEvent,
+  Meta,
+  SignedEventContent
+} from '../types'
 import { Mark } from '../types/mark'
 import {
   fromUnixTimestamp,
@@ -38,7 +43,9 @@ export interface FlatMeta
   encryptionKey: string | null
 
   // Parsed Document Signatures
-  parsedSignatureEvents: { [signer: `npub1${string}`]: Event }
+  parsedSignatureEvents: {
+    [signer: `npub1${string}`]: DocSignatureEvent
+  }
 
   // Calculated completion time
   completedAt?: number
@@ -74,7 +81,7 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
   const [zipUrl, setZipUrl] = useState<string>('')
 
   const [parsedSignatureEvents, setParsedSignatureEvents] = useState<{
-    [signer: `npub1${string}`]: Event
+    [signer: `npub1${string}`]: DocSignatureEvent
   }>({})
 
   const [completedAt, setCompletedAt] = useState<number>()
@@ -141,7 +148,10 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
         }
 
         // Temp. map to hold events and signers
-        const parsedSignatureEventsMap = new Map<`npub1${string}`, Event>()
+        const parsedSignatureEventsMap = new Map<
+          `npub1${string}`,
+          DocSignatureEvent
+        >()
         const signerStatusMap = new Map<`npub1${string}`, SignStatus>()
 
         const getPrevSignerSig = (npub: `npub1${string}`) => {
@@ -183,9 +193,12 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
           if (isValidSignature) {
             // get the signature of prev signer from the content of current signers signedEvent
             const prevSignersSig = getPrevSignerSig(npub)
-
             try {
               const obj: SignedEventContent = JSON.parse(event.content)
+              parsedSignatureEventsMap.set(npub, {
+                ...event,
+                parsedContent: obj
+              })
               if (
                 obj.prevSig &&
                 prevSignersSig &&

src/layouts/StickySideColumns.module.scss

@@ -23,7 +23,11 @@
   grid-gap: 15px;
 }
 .content {
-  max-width: 550px;
-  width: 550px;
+  padding: 10px;
+  border: 10px solid $overlay-background-color;
+  border-radius: 4px;
+
+  max-width: 590px;
+  width: 590px;
   margin: 0 auto;
 }

src/pages/verify/index.tsx

@@ -1,12 +1,16 @@
-import { Box, Button, Tooltip, Typography, useTheme } from '@mui/material'
+import { Box, Button, Divider, Tooltip, Typography } from '@mui/material'
 import JSZip from 'jszip'
 import { MuiFileInput } from 'mui-file-input'
 import { Event, verifyEvent } from 'nostr-tools'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { NostrController } from '../../controllers'
-import { CreateSignatureEventContent, Meta } from '../../types'
+import {
+  CreateSignatureEventContent,
+  DocSignatureEvent,
+  Meta
+} from '../../types'
 import {
   decryptArrayBuffer,
   extractMarksFromSignedMeta,
@@ -16,10 +20,10 @@ import {
   parseJson,
   readContentOfZipEntry,
   signEventForMetaFile,
-  shorten
+  shorten,
+  getCurrentUserFiles
 } from '../../utils'
 import styles from './style.module.scss'
-import { Cancel, CheckCircle } from '@mui/icons-material'
 import { useLocation } from 'react-router-dom'
 import axios from 'axios'
 import { PdfFile } from '../../types/drawing.ts'
@@ -27,7 +31,8 @@ import {
   addMarks,
   convertToPdfBlob,
   convertToPdfFile,
-  groupMarksByPage
+  groupMarksByFileNamePage,
+  inPx
 } from '../../utils/pdf.ts'
 import { State } from '../../store/rootReducer.ts'
 import { useSelector } from 'react-redux'
@@ -40,13 +45,101 @@ import { UsersDetails } from '../../components/UsersDetails.tsx/index.tsx'
 import { UserAvatar } from '../../components/UserAvatar/index.tsx'
 import { useSigitProfiles } from '../../hooks/useSigitProfiles.tsx'
 import { TooltipChild } from '../../components/TooltipChild.tsx'
+import FileList from '../../components/FileList'
+import { CurrentUserFile } from '../../types/file.ts'
+import { Mark } from '../../types/mark.ts'
+
+interface PdfViewProps {
+  files: CurrentUserFile[]
+  currentFile: CurrentUserFile | null
+  parsedSignatureEvents: {
+    [signer: `npub1${string}`]: DocSignatureEvent
+  }
+}
+
+const SlimPdfView = ({
+  files,
+  currentFile,
+  parsedSignatureEvents
+}: PdfViewProps) => {
+  const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
+  useEffect(() => {
+    if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
+      pdfRefs.current[currentFile.id]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end'
+      })
+    }
+  }, [currentFile])
+  return (
+    <div className={styles.view}>
+      {files.map((currentUserFile, i) => {
+        const { hash, filename, pdfFile, id } = currentUserFile
+        const signatureEvents = Object.keys(parsedSignatureEvents)
+        if (!hash) return
+        return (
+          <>
+            <div
+              id={filename}
+              ref={(el) => (pdfRefs.current[id] = el)}
+              key={filename}
+              className={styles.fileWrapper}
+            >
+              {pdfFile.pages.map((page, i) => {
+                const marks: Mark[] = []
+
+                signatureEvents.forEach((e) => {
+                  const m = parsedSignatureEvents[
+                    e as `npub1${string}`
+                  ].parsedContent?.marks.filter(
+                    (m) => m.pdfFileHash == hash && m.location.page == i
+                  )
+                  if (m) {
+                    marks.push(...m)
+                  }
+                })
+                return (
+                  <div className={styles.imageWrapper} key={i}>
+                    <img draggable="false" src={page.image} />
+                    {marks.map((m) => {
+                      return (
+                        <div
+                          className={styles.mark}
+                          key={m.id}
+                          style={{
+                            left: inPx(m.location.left),
+                            top: inPx(m.location.top),
+                            width: inPx(m.location.width),
+                            height: inPx(m.location.height)
+                          }}
+                        >
+                          {m.value}
+                        </div>
+                      )
+                    })}
+                  </div>
+                )
+              })}
+            </div>
+
+            {i < files.length - 1 && (
+              <Divider
+                sx={{
+                  fontSize: '12px',
+                  color: 'rgba(0,0,0,0.15)'
+                }}
+              >
+                File Separator
+              </Divider>
+            )}
+          </>
+        )
+      })}
+    </div>
+  )
+}
 
 export const VerifyPage = () => {
-  const theme = useTheme()
-  const textColor = theme.palette.getContrastText(
-    theme.palette.background.paper
-  )
-
   const location = useLocation()
   /**
    * uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains meta.json
@@ -54,8 +147,15 @@ export const VerifyPage = () => {
    */
   const { uploadedZip, meta } = location.state || {}
 
-  const { submittedBy, zipUrl, encryptionKey, signers, viewers, fileHashes } =
-    useSigitMeta(meta)
+  const {
+    submittedBy,
+    zipUrl,
+    encryptionKey,
+    signers,
+    viewers,
+    fileHashes,
+    parsedSignatureEvents
+  } = useSigitMeta(meta)
 
   const profiles = useSigitProfiles([
     ...(submittedBy ? [submittedBy] : []),
@@ -70,8 +170,23 @@ export const VerifyPage = () => {
 
   const [currentFileHashes, setCurrentFileHashes] = useState<{
     [key: string]: string | null
-  }>(fileHashes)
+  }>({})
   const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
+  const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
+  const [signatureFileHashes, setSignatureFileHashes] = useState<{
+    [key: string]: string
+  }>(fileHashes)
+
+  useEffect(() => {
+    setSignatureFileHashes(fileHashes)
+  }, [fileHashes])
+
+  useEffect(() => {
+    if (Object.entries(files).length > 0) {
+      const tmp = getCurrentUserFiles(files, fileHashes, signatureFileHashes)
+      setCurrentFile(tmp[0])
+    }
+  }, [signatureFileHashes, fileHashes, files])
 
   const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
   const nostrController = NostrController.getInstance()
@@ -203,7 +318,6 @@ export const VerifyPage = () => {
       }
     }
 
-    console.log('fileHashes :>> ', fileHashes)
     setCurrentFileHashes(fileHashes)
 
     setLoadingSpinnerDesc('Parsing meta.json')
@@ -307,10 +421,10 @@ export const VerifyPage = () => {
     zip.file('meta.json', stringifiedMeta)
 
     const marks = extractMarksFromSignedMeta(updatedMeta)
-    const marksByPage = groupMarksByPage(marks)
+    const marksByPage = groupMarksByFileNamePage(marks)
 
     for (const [fileName, pdf] of Object.entries(files)) {
-      const pages = await addMarks(pdf.file, marksByPage)
+      const pages = await addMarks(pdf.file, marksByPage[fileName])
       const blob = await convertToPdfBlob(pages)
       zip.file(`files/${fileName}`, blob)
     }
@@ -414,51 +528,33 @@ export const VerifyPage = () => {
           <StickySideColumns
             left={
               <>
-                <Box className={styles.filesWrapper}>
-                  {Object.entries(currentFileHashes).map(
-                    ([filename, hash], index) => {
-                      const isValidHash = fileHashes[filename] === hash
-
-                      return (
-                        <Box key={`file-${index}`} className={styles.file}>
-                          <Typography
-                            component="label"
-                            sx={{
-                              color: textColor,
-                              flexGrow: 1
-                            }}
-                          >
-                            {filename}
-                          </Typography>
-                          {isValidHash && (
-                            <Tooltip title="File integrity check passed" arrow>
-                              <CheckCircle
-                                sx={{ color: theme.palette.success.light }}
+                {currentFile !== null && (
+                  <FileList
+                    files={getCurrentUserFiles(
+                      files,
+                      currentFileHashes,
+                      signatureFileHashes
+                    )}
+                    currentFile={currentFile}
+                    setCurrentFile={setCurrentFile}
+                    handleDownload={handleExport}
                   />
-                            </Tooltip>
                 )}
-                          {!isValidHash && (
-                            <Tooltip title="File integrity check failed" arrow>
-                              <Cancel
-                                sx={{ color: theme.palette.error.main }}
-                              />
-                            </Tooltip>
-                          )}
-                        </Box>
-                      )
-                    }
-                  )}
-                </Box>
                 {displayExportedBy()}
-                <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
-                  <Button onClick={handleExport} variant="contained">
-                    Export Sigit
-                  </Button>
-                </Box>
               </>
             }
             right={<UsersDetails meta={meta} />}
+          >
+            <SlimPdfView
+              currentFile={currentFile}
+              files={getCurrentUserFiles(
+                files,
+                currentFileHashes,
+                signatureFileHashes
+              )}
+              parsedSignatureEvents={parsedSignatureEvents}
             />
+          </StickySideColumns>
         )}
       </Container>
     </>

src/pages/verify/style.module.scss

@@ -50,3 +50,36 @@
     }
   }
 }
+
+.view {
+  width: 550px;
+  max-width: 550px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.imageWrapper {
+  position: relative;
+
+  img {
+    width: 100%;
+    display: block;
+  }
+}
+
+.fileWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.mark {
+  position: absolute;
+  border: 1px dotted black;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}

src/types/core.ts

@@ -1,5 +1,6 @@
 import { Mark } from './mark'
 import { Keys } from '../store/auth/types'
+import { Event } from 'nostr-tools'
 
 export enum UserRole {
   signer = 'Signer',
@@ -44,3 +45,7 @@ export interface UserAppData {
   keyPair?: Keys // this key pair is used for blossom requests authentication
   blossomUrls: string[] // array for storing Urls for the files that stores all the sigits and processedGiftWraps on blossom
 }
+
+export interface DocSignatureEvent extends Event {
+  parsedContent?: SignedEventContent
+}

src/utils/file.ts

@@ -1,6 +1,6 @@
 import { Meta } from '../types'
 import { extractMarksFromSignedMeta } from './mark.ts'
-import { addMarks, convertToPdfBlob, groupMarksByPage } from './pdf.ts'
+import { addMarks, convertToPdfBlob, groupMarksByFileNamePage } from './pdf.ts'
 import JSZip from 'jszip'
 import { PdfFile } from '../types/drawing.ts'
 
@@ -10,12 +10,12 @@ const getZipWithFiles = async (
 ): Promise<JSZip> => {
   const zip = new JSZip()
   const marks = extractMarksFromSignedMeta(meta)
-  const marksByPage = groupMarksByPage(marks)
+  const marksByFileNamePage = groupMarksByFileNamePage(marks)
 
   for (const [fileName, pdf] of Object.entries(files)) {
-    const pages = await addMarks(pdf.file, marksByPage)
+    const pages = await addMarks(pdf.file, marksByFileNamePage[fileName])
     const blob = await convertToPdfBlob(pages)
-    zip.file(`/files/${fileName}`, blob)
+    zip.file(`files/${fileName}`, blob)
   }
 
   return zip

src/utils/mark.ts

@@ -119,7 +119,11 @@ const getUpdatedMark = (
   return {
     ...selectedMark,
     currentValue: selectedMarkValue,
-    isCompleted: !!selectedMarkValue
+    isCompleted: !!selectedMarkValue,
+    mark: {
+      ...selectedMark.mark,
+      value: selectedMarkValue
+    }
   }
 }
 

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)
 
@@ -142,7 +146,7 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
     )
 
     const files = Object.keys(createSignatureContent.fileHashes)
-    const extensions = extractFileExtensions(files)
+    const { extensions } = extractFileExtensions(files)
 
     const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
     const isCompletelySigned = createSignatureContent.signers.every((signer) =>
@@ -169,6 +173,10 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
   }
 }
 
+/**
+ * @param fileNames - List of filenames to check
+ * @returns List of extensions and if all are same
+ */
 export const extractFileExtensions = (fileNames: string[]) => {
   const extensions = fileNames.reduce((result: string[], file: string) => {
     const extension = file.split('.').pop()
@@ -178,5 +186,7 @@ export const extractFileExtensions = (fileNames: string[]) => {
     return result
   }, [])
 
-  return extensions
+  const isSame = extensions.every((ext) => ext === extensions[0])
+
+  return { extensions, isSame }
 }

src/utils/pdf.ts

@@ -71,14 +71,19 @@ const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
 /**
  * Reads the pdf file binaries
  */
-const readPdf = (file: File): Promise<string> => {
+const readPdf = (file: File): Promise<string | ArrayBuffer> => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
 
-    reader.onload = (e: any) => {
-      const data = e.target.result
-
+    reader.onload = (e) => {
+      const data = e.target?.result
+      // Make sure we only resolve for string or ArrayBuffer type
+      // They are accepted by PDFJS.getDocument function
+      if (data && typeof data !== 'undefined') {
         resolve(data)
+      } else {
+        reject(new Error('File is null or undefined'))
+      }
     }
 
     reader.onerror = (err) => {
@@ -94,7 +99,7 @@ const readPdf = (file: File): Promise<string> => {
  * Converts pdf to the images
  * @param data pdf file bytes
  */
-const pdfToImages = async (data: any): Promise<PdfPage[]> => {
+const pdfToImages = async (data: string | ArrayBuffer): Promise<PdfPage[]> => {
   const images: string[] = []
   const pdf = await PDFJS.getDocument(data).promise
   const canvas = document.createElement('canvas')
@@ -142,6 +147,7 @@ const addMarks = async (
     canvas.width = viewport.width
     await page.render({ canvasContext: context!, viewport: viewport }).promise
 
+    if (marksPerPage && Object.hasOwn(marksPerPage, i))
       marksPerPage[i]?.forEach((mark) => draw(mark, context!))
 
     images.push(canvas.toDataURL())
@@ -230,11 +236,11 @@ const convertToPdfFile = async (
  * @function scaleMark scales remaining marks in line with SCALE
  * @function byPage groups remaining Marks by their page marks.location.page
  */
-const groupMarksByPage = (marks: Mark[]) => {
+const groupMarksByFileNamePage = (marks: Mark[]) => {
   return marks
     .filter(hasValue)
     .map(scaleMark)
-    .reduce<{ [key: number]: Mark[] }>(byPage, {})
+    .reduce<{ [filename: string]: { [page: number]: Mark[] } }>(byPage, {})
 }
 
 /**
@@ -245,10 +251,21 @@ const groupMarksByPage = (marks: Mark[]) => {
  * @param obj - accumulator in the reducer callback
  * @param mark - current value, i.e. Mark being examined
  */
-const byPage = (obj: { [key: number]: Mark[] }, mark: Mark) => {
-  const key = mark.location.page
-  const curGroup = obj[key] ?? []
-  return { ...obj, [key]: [...curGroup, mark] }
+const byPage = (
+  obj: { [filename: string]: { [page: number]: Mark[] } },
+  mark: Mark
+) => {
+  const filename = mark.fileName
+  const pageNumber = mark.location.page
+  const pages = obj[filename] ?? {}
+  const marks = pages[pageNumber] ?? []
+  return {
+    ...obj,
+    [filename]: {
+      ...pages,
+      [pageNumber]: [...marks, mark]
+    }
+  }
 }
 
 export {
@@ -259,5 +276,5 @@ export {
   convertToPdfFile,
   addMarks,
   convertToPdfBlob,
-  groupMarksByPage
+  groupMarksByFileNamePage
 }