Merge pull request 'issue-25' (#42) from issue-25 into main

Reviewed-on: https://git.sigit.io/sig/it/pulls/42

src/pages/create/index.tsx

@@ -351,7 +351,7 @@ export const CreatePage = () => {
     setIsLoading(false)
 
     navigate(
-      `${appPrivateRoutes.verify}?file=${encodeURIComponent(
+      `${appPrivateRoutes.sign}?file=${encodeURIComponent(
         fileUrl
       )}&key=${encodeURIComponent(encryptionKey)}`
     )

src/pages/decrypt/index.tsx

@@ -1,146 +0,0 @@
-import { Box, Button, TextField, Typography } from '@mui/material'
-import saveAs from 'file-saver'
-import { MuiFileInput } from 'mui-file-input'
-import { useEffect, useState } from 'react'
-import { LoadingSpinner } from '../../components/LoadingSpinner'
-import { decryptArrayBuffer } from '../../utils'
-import styles from './style.module.scss'
-import { toast } from 'react-toastify'
-import { useSearchParams } from 'react-router-dom'
-import axios from 'axios'
-import { DecryptionError } from '../../types/errors/DecryptionError'
-
-export const DecryptZip = () => {
-  const [searchParams] = useSearchParams()
-
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
-  const [encryptionKey, setEncryptionKey] = useState('')
-
-  const [isLoading, setIsLoading] = useState(false)
-  const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
-  const [isDraggingOver, setIsDraggingOver] = useState(false)
-
-  useEffect(() => {
-    const fileUrl = searchParams.get('file')
-
-    if (fileUrl) {
-      const decodedFileUrl = decodeURIComponent(fileUrl)
-
-      setIsLoading(true)
-      setLoadingSpinnerDesc('Fetching zip file')
-      axios
-        .get(decodedFileUrl, {
-          responseType: 'arraybuffer'
-        })
-        .then((res) => {
-          const fileName = decodedFileUrl.split('/').pop()
-          const file = new File([res.data], fileName!)
-          setSelectedFile(file)
-        })
-        .catch((err) => {
-          console.error(
-            `error occurred in getting zip file from ${decodedFileUrl}`,
-            err
-          )
-        })
-        .finally(() => {
-          setIsLoading(false)
-        })
-    }
-
-    const key = searchParams.get('key')
-    if (key) {
-      const decodedKey = decodeURIComponent(key)
-      setEncryptionKey(decodedKey)
-    }
-  }, [searchParams])
-
-  const handleDecrypt = async () => {
-    if (!selectedFile || !encryptionKey) return
-
-    setIsLoading(true)
-    setLoadingSpinnerDesc('Decrypting zip file')
-
-    const encryptedArrayBuffer = await selectedFile.arrayBuffer()
-
-    const arrayBuffer = await decryptArrayBuffer(
-      encryptedArrayBuffer,
-      encryptionKey
-    ).catch((err: DecryptionError) => {
-      console.log('err in decryption:>> ', err)
-
-      toast.error(err.message)
-      setIsLoading(false)
-      return null
-    })
-
-    if (!arrayBuffer) return
-
-    const blob = new Blob([arrayBuffer])
-    saveAs(blob, 'decrypted.zip')
-
-    setIsLoading(false)
-  }
-
-  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault()
-    setIsDraggingOver(false)
-    const file = event.dataTransfer.files[0]
-    if (file.type === 'application/zip') setSelectedFile(file)
-  }
-
-  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault()
-    setIsDraggingOver(true)
-  }
-
-  return (
-    <>
-      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-      <Box className={styles.container}>
-        <Typography component="label" variant="h6">
-          Select encrypted zip file
-        </Typography>
-
-        <Box
-          className={styles.inputBlock}
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-        >
-          {isDraggingOver && (
-            <Box className={styles.fileDragOver}>
-              <Typography variant="body1">Drop file here</Typography>
-            </Box>
-          )}
-          <MuiFileInput
-            placeholder="Drop file here, or click to select"
-            value={selectedFile}
-            onChange={(value) => setSelectedFile(value)}
-            InputProps={{
-              inputProps: {
-                accept: '.zip'
-              }
-            }}
-          />
-
-          <TextField
-            label="Encryption Key"
-            variant="outlined"
-            value={encryptionKey}
-            onChange={(e) => setEncryptionKey(e.target.value)}
-          />
-        </Box>
-
-        <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
-          <Button
-            onClick={handleDecrypt}
-            variant="contained"
-            disabled={!selectedFile || !encryptionKey}
-          >
-            Decrypt
-          </Button>
-        </Box>
-      </Box>
-    </>
-  )
-}

src/pages/decrypt/style.module.scss

@@ -1,27 +0,0 @@
-@import '../../colors.scss';
-
-.container {
-  display: flex;
-  flex-direction: column;
-  color: $text-color;
-
-  .inputBlock {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    gap: 25px;
-  }
-
-  .fileDragOver {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(255, 255, 255, 0.8);
-    z-index: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-}

src/pages/home/index.tsx

@@ -14,6 +14,12 @@ export const HomePage = () => {
       >
         Create
       </Button>
+      <Button
+        onClick={() => navigate(appPrivateRoutes.sign)}
+        variant="contained"
+      >
+        Sign
+      </Button>
       <Button
         onClick={() => navigate(appPrivateRoutes.verify)}
         variant="contained"

src/pages/sign/index.tsx

@@ -0,0 +1,782 @@
+import {
+  Box,
+  Button,
+  List,
+  ListItem,
+  ListSubheader,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+  Typography,
+  useTheme
+} from '@mui/material'
+import axios from 'axios'
+import saveAs from 'file-saver'
+import JSZip from 'jszip'
+import _ from 'lodash'
+import { MuiFileInput } from 'mui-file-input'
+import { EventTemplate } from 'nostr-tools'
+import { useEffect, useState } from 'react'
+import { useSelector } from 'react-redux'
+import { Link, useNavigate, useSearchParams } from 'react-router-dom'
+import { toast } from 'react-toastify'
+import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
+import { LoadingSpinner } from '../../components/LoadingSpinner'
+import { MetadataController, NostrController } from '../../controllers'
+import { appPrivateRoutes, getProfileRoute } from '../../routes'
+import { State } from '../../store/rootReducer'
+import { Meta, ProfileMetadata, User, UserRole } from '../../types'
+import {
+  decryptArrayBuffer,
+  encryptArrayBuffer,
+  generateEncryptionKey,
+  getHash,
+  hexToNpub,
+  parseJson,
+  readContentOfZipEntry,
+  sendDM,
+  shorten,
+  signEventForMetaFile,
+  uploadToFileStorage
+} from '../../utils'
+import styles from './style.module.scss'
+
+enum SignedStatus {
+  Fully_Signed,
+  User_Is_Next_Signer,
+  User_Is_Not_Next_Signer
+}
+
+export const SignPage = () => {
+  const navigate = useNavigate()
+  const [searchParams, setSearchParams] = useSearchParams()
+
+  const [displayInput, setDisplayInput] = useState(false)
+
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [encryptionKey, setEncryptionKey] = useState('')
+
+  const [zip, setZip] = useState<JSZip>()
+
+  const [isLoading, setIsLoading] = useState(true)
+  const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
+
+  const [meta, setMeta] = useState<Meta | null>(null)
+  const [signedStatus, setSignedStatus] = useState<SignedStatus>()
+
+  const [nextSinger, setNextSinger] = useState<string>()
+
+  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
+
+  const [authUrl, setAuthUrl] = useState<string>()
+  const nostrController = NostrController.getInstance()
+
+  useEffect(() => {
+    if (meta) {
+      setDisplayInput(false)
+
+      // get list of users who have signed
+      const signedBy = Object.keys(meta.signedEvents)
+
+      if (meta.signers.length > 0) {
+        // check if all signers have signed then its fully signed
+        if (meta.signers.every((signer) => signedBy.includes(signer))) {
+          setSignedStatus(SignedStatus.Fully_Signed)
+        } else {
+          for (const signer of meta.signers) {
+            if (!signedBy.includes(signer)) {
+              setNextSinger(signer)
+
+              if (signer === usersPubkey) {
+                // logged in user is the next signer
+                setSignedStatus(SignedStatus.User_Is_Next_Signer)
+              } else {
+                setSignedStatus(SignedStatus.User_Is_Not_Next_Signer)
+              }
+
+              break
+            }
+          }
+        }
+      } else {
+        // there's no signer just viewers. So its fully signed
+        setSignedStatus(SignedStatus.Fully_Signed)
+      }
+    }
+  }, [meta, usersPubkey])
+
+  useEffect(() => {
+    const fileUrl = searchParams.get('file')
+    const key = searchParams.get('key')
+
+    if (fileUrl && key) {
+      setIsLoading(true)
+      setLoadingSpinnerDesc('Fetching file from file server')
+
+      axios
+        .get(fileUrl, {
+          responseType: 'arraybuffer'
+        })
+        .then((res) => {
+          const fileName = fileUrl.split('/').pop()
+          const file = new File([res.data], fileName!)
+
+          decrypt(file, decodeURIComponent(key)).then((arrayBuffer) => {
+            if (arrayBuffer) handleDecryptedArrayBuffer(arrayBuffer)
+          })
+        })
+        .catch((err) => {
+          console.error(`error occurred in getting file from ${fileUrl}`, err)
+          toast.error(
+            err.message || `error occurred in getting file from ${fileUrl}`
+          )
+        })
+        .finally(() => {
+          setIsLoading(false)
+        })
+    } else {
+      setIsLoading(false)
+      setDisplayInput(true)
+    }
+  }, [searchParams])
+
+  const decrypt = async (file: File, key: string) => {
+    setLoadingSpinnerDesc('Decrypting file')
+
+    const encryptedArrayBuffer = await file.arrayBuffer()
+
+    const arrayBuffer = await decryptArrayBuffer(encryptedArrayBuffer, key)
+      .catch((err) => {
+        console.log('err in decryption:>> ', err)
+        toast.error(err.message || 'An error occurred in decrypting file.')
+        return null
+      })
+      .finally(() => {
+        setIsLoading(false)
+      })
+
+    return arrayBuffer
+  }
+
+  const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
+    const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
+
+    setLoadingSpinnerDesc('Parsing zip file')
+
+    const zip = await JSZip.loadAsync(decryptedZipFile).catch((err) => {
+      console.log('err in loading zip file :>> ', err)
+      toast.error(err.message || 'An error occurred in loading zip file.')
+      return null
+    })
+
+    if (!zip) return
+
+    setZip(zip)
+
+    setLoadingSpinnerDesc('Parsing meta.json')
+
+    const metaFileContent = await readContentOfZipEntry(
+      zip,
+      'meta.json',
+      'string'
+    )
+
+    if (!metaFileContent) {
+      setIsLoading(false)
+      return
+    }
+
+    const parsedMetaJson = await parseJson<Meta>(metaFileContent).catch(
+      (err) => {
+        console.log('err in parsing the content of meta.json :>> ', err)
+        toast.error(
+          err.message || 'error occurred in parsing the content of meta.json'
+        )
+        setIsLoading(false)
+        return null
+      }
+    )
+
+    setMeta(parsedMetaJson)
+  }
+
+  const handleDecrypt = async () => {
+    if (!selectedFile || !encryptionKey) return
+
+    setIsLoading(true)
+    const arrayBuffer = await decrypt(
+      selectedFile,
+      decodeURIComponent(encryptionKey)
+    )
+
+    if (!arrayBuffer) return
+
+    handleDecryptedArrayBuffer(arrayBuffer)
+  }
+
+  const handleSign = async () => {
+    if (!zip || !meta) return
+
+    setIsLoading(true)
+    setLoadingSpinnerDesc('parsing hashes.json file')
+
+    const hashesFileContent = await readContentOfZipEntry(
+      zip,
+      'hashes.json',
+      'string'
+    )
+
+    if (!hashesFileContent) {
+      setIsLoading(false)
+      return
+    }
+
+    let hashes = await parseJson(hashesFileContent).catch((err) => {
+      console.log('err in parsing the content of hashes.json :>> ', err)
+      toast.error(
+        err.message || 'error occurred in parsing the content of hashes.json'
+      )
+      setIsLoading(false)
+      return null
+    })
+
+    if (!hashes) return
+
+    setLoadingSpinnerDesc('Generating hashes for files')
+
+    const fileHashes: { [key: string]: string } = {}
+    const fileNames = Object.keys(meta.fileHashes)
+
+    // generate hashes for all entries in files folder of zipArchive
+    // these hashes can be used to verify the originality of files
+    for (const fileName of fileNames) {
+      const filePath = `files/${fileName}`
+      const arrayBuffer = await readContentOfZipEntry(
+        zip,
+        filePath,
+        'arraybuffer'
+      )
+
+      if (!arrayBuffer) {
+        setIsLoading(false)
+        return
+      }
+
+      const hash = await getHash(arrayBuffer)
+      if (!hash) {
+        setIsLoading(false)
+        return
+      }
+
+      fileHashes[fileName] = hash
+    }
+
+    setLoadingSpinnerDesc('Signing nostr event')
+    const signedEvent = await signEventForMetaFile(
+      fileHashes,
+      nostrController,
+      setIsLoading
+    )
+
+    if (!signedEvent) return
+
+    const metaCopy = _.cloneDeep(meta)
+
+    metaCopy.signedEvents = {
+      ...metaCopy.signedEvents,
+      [signedEvent.pubkey]: JSON.stringify(signedEvent, null, 2)
+    }
+
+    const stringifiedMeta = JSON.stringify(metaCopy, null, 2)
+    zip.file('meta.json', stringifiedMeta)
+
+    const metaHash = await getHash(stringifiedMeta)
+    if (!metaHash) return
+
+    hashes = {
+      ...hashes,
+      [usersPubkey!]: metaHash
+    }
+
+    zip.file('hashes.json', JSON.stringify(hashes, null, 2))
+
+    const arrayBuffer = await zip
+      .generateAsync({
+        type: 'arraybuffer',
+        compression: 'DEFLATE',
+        compressionOptions: {
+          level: 6
+        }
+      })
+      .catch((err) => {
+        console.log('err in zip:>> ', err)
+        setIsLoading(false)
+        toast.error(err.message || 'Error occurred in generating zip file')
+        return null
+      })
+
+    if (!arrayBuffer) return
+
+    const encryptionKey = await generateEncryptionKey()
+
+    setLoadingSpinnerDesc('Encrypting zip file')
+    const encryptedArrayBuffer = await encryptArrayBuffer(
+      arrayBuffer,
+      encryptionKey
+    )
+
+    const blob = new Blob([encryptedArrayBuffer])
+
+    setLoadingSpinnerDesc('Uploading zip file to file storage.')
+    const fileUrl = await uploadToFileStorage(blob, nostrController)
+      .then((url) => {
+        toast.success('zip file uploaded to file storage')
+        return url
+      })
+      .catch((err) => {
+        console.log('err in upload:>> ', err)
+        setIsLoading(false)
+        toast.error(err.message || 'Error occurred in uploading zip file')
+        return null
+      })
+
+    if (!fileUrl) return
+
+    // check if the current user is the last signer
+    const lastSignerIndex = meta.signers.length - 1
+    const signerIndex = meta.signers.indexOf(usersPubkey!)
+    const isLastSigner = signerIndex === lastSignerIndex
+
+    // if current user is the last signer, then send DMs to all signers and viewers
+    if (isLastSigner) {
+      const userSet = new Set<string>()
+
+      userSet.add(meta.submittedBy)
+
+      meta.signers.forEach((signer) => {
+        userSet.add(signer)
+      })
+
+      meta.viewers.forEach((viewer) => {
+        userSet.add(viewer)
+      })
+
+      const users = Array.from(userSet)
+
+      for (const user of users) {
+        // todo: execute in parallel
+        await sendDM(
+          fileUrl,
+          encryptionKey,
+          user,
+          nostrController,
+          false,
+          setAuthUrl
+        )
+      }
+
+      // when user is the last signer and has sent
+      // the final document to all the signers and viewers
+      // update search params with updated file url and encryption key
+      setSearchParams({
+        file: fileUrl,
+        key: encryptionKey
+      })
+    } else {
+      const nextSigner = meta.signers[signerIndex + 1]
+      await sendDM(
+        fileUrl,
+        encryptionKey,
+        nextSigner,
+        nostrController,
+        false,
+        setAuthUrl
+      )
+    }
+
+    setIsLoading(false)
+  }
+
+  const handleExport = async () => {
+    if (!meta || !zip || !usersPubkey) return
+
+    if (
+      !meta.signers.includes(usersPubkey) &&
+      !meta.viewers.includes(usersPubkey) &&
+      meta.submittedBy !== usersPubkey
+    )
+      return
+
+    setIsLoading(true)
+    setLoadingSpinnerDesc('Signing nostr event')
+    const event: EventTemplate = {
+      kind: 1,
+      content: '',
+      created_at: Math.floor(Date.now() / 1000), // Current timestamp
+      tags: []
+    }
+
+    // Sign the event
+    const signedEvent = await nostrController.signEvent(event).catch((err) => {
+      console.error(err)
+      toast.error(err.message || 'Error occurred in signing nostr event')
+      setIsLoading(false) // Set loading state to false
+      return null
+    })
+
+    if (!signedEvent) return
+
+    const exportSignature = JSON.stringify(signedEvent, null, 2)
+
+    const stringifiedMeta = JSON.stringify(
+      {
+        ...meta,
+        exportSignature
+      },
+      null,
+      2
+    )
+    zip.file('meta.json', stringifiedMeta)
+
+    const arrayBuffer = await zip
+      .generateAsync({
+        type: 'arraybuffer',
+        compression: 'DEFLATE',
+        compressionOptions: {
+          level: 6
+        }
+      })
+      .catch((err) => {
+        console.log('err in zip:>> ', err)
+        setIsLoading(false)
+        toast.error(err.message || 'Error occurred in generating zip file')
+        return null
+      })
+
+    if (!arrayBuffer) return
+
+    const blob = new Blob([arrayBuffer])
+    saveAs(blob, 'exported.zip')
+
+    setIsLoading(false)
+
+    navigate(appPrivateRoutes.verify)
+  }
+
+  if (authUrl) {
+    return (
+      <iframe
+        title="Nsecbunker auth"
+        src={authUrl}
+        width="100%"
+        height="500px"
+      />
+    )
+  }
+
+  return (
+    <>
+      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
+      <Box className={styles.container}>
+        {displayInput && (
+          <>
+            <Typography component="label" variant="h6">
+              Select sigit file
+            </Typography>
+
+            <Box className={styles.inputBlock}>
+              <MuiFileInput
+                placeholder="Select file"
+                value={selectedFile}
+                onChange={(value) => setSelectedFile(value)}
+              />
+
+              {selectedFile && (
+                <TextField
+                  label="Encryption Key"
+                  variant="outlined"
+                  value={encryptionKey}
+                  onChange={(e) => setEncryptionKey(e.target.value)}
+                />
+              )}
+            </Box>
+
+            {selectedFile && encryptionKey && (
+              <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
+                <Button onClick={handleDecrypt} variant="contained">
+                  Decrypt
+                </Button>
+              </Box>
+            )}
+          </>
+        )}
+
+        {meta && signedStatus === SignedStatus.Fully_Signed && (
+          <>
+            <DisplayMeta meta={meta} nextSigner={nextSinger} />
+            <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+              <Button onClick={handleExport} variant="contained">
+                Export
+              </Button>
+            </Box>
+          </>
+        )}
+
+        {meta && signedStatus === SignedStatus.User_Is_Not_Next_Signer && (
+          <DisplayMeta meta={meta} nextSigner={nextSinger} />
+        )}
+
+        {meta && signedStatus === SignedStatus.User_Is_Next_Signer && (
+          <>
+            <DisplayMeta meta={meta} nextSigner={nextSinger} />
+            <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+              <Button onClick={handleSign} variant="contained">
+                Sign
+              </Button>
+            </Box>
+          </>
+        )}
+      </Box>
+    </>
+  )
+}
+
+type DisplayMetaProps = {
+  meta: Meta
+  nextSigner?: string
+}
+
+const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
+  const theme = useTheme()
+
+  const textColor = theme.palette.getContrastText(
+    theme.palette.background.paper
+  )
+
+  const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
+    {}
+  )
+  const [users, setUsers] = useState<User[]>([])
+
+  useEffect(() => {
+    meta.signers.forEach((signer) => {
+      setUsers((prev) => {
+        if (prev.findIndex((user) => user.pubkey === signer) !== -1) return prev
+
+        return [
+          ...prev,
+          {
+            pubkey: signer,
+            role: UserRole.signer
+          }
+        ]
+      })
+    })
+
+    meta.viewers.forEach((viewer) => {
+      setUsers((prev) => {
+        if (prev.findIndex((user) => user.pubkey === viewer) !== -1) return prev
+
+        return [
+          ...prev,
+          {
+            pubkey: viewer,
+            role: UserRole.viewer
+          }
+        ]
+      })
+    })
+  }, [meta])
+
+  useEffect(() => {
+    const metadataController = new MetadataController()
+
+    metadataController
+      .findMetadata(meta.submittedBy)
+      .then((metadataEvent) => {
+        const metadataContent =
+          metadataController.extractProfileMetadataContent(metadataEvent)
+        if (metadataContent)
+          setMetadata((prev) => ({
+            ...prev,
+            [meta.submittedBy]: metadataContent
+          }))
+      })
+      .catch((err) => {
+        console.error(
+          `error occurred in finding metadata for: ${meta.submittedBy}`,
+          err
+        )
+      })
+
+    users.forEach((user) => {
+      if (!(user.pubkey in metadata)) {
+        metadataController
+          .findMetadata(user.pubkey)
+          .then((metadataEvent) => {
+            const metadataContent =
+              metadataController.extractProfileMetadataContent(metadataEvent)
+            if (metadataContent)
+              setMetadata((prev) => ({
+                ...prev,
+                [user.pubkey]: metadataContent
+              }))
+          })
+          .catch((err) => {
+            console.error(
+              `error occurred in finding metadata for: ${user.pubkey}`,
+              err
+            )
+          })
+      }
+    })
+  }, [users, meta.submittedBy])
+
+  const imageLoadError = (event: any) => {
+    event.target.src = placeholderAvatar
+  }
+
+  const getRoboImageUrl = (pubkey: string) => {
+    const npub = hexToNpub(pubkey)
+    return `https://robohash.org/${npub}.png?set=set3`
+  }
+
+  return (
+    <List
+      sx={{
+        bgcolor: 'background.paper',
+        marginTop: 2
+      }}
+      subheader={
+        <ListSubheader
+          sx={{
+            borderBottom: '0.5px solid',
+            paddingBottom: 1,
+            paddingTop: 1,
+            fontSize: '1.5rem'
+          }}
+          className={styles.subHeader}
+        >
+          Meta Info
+        </ListSubheader>
+      }
+    >
+      <ListItem
+        sx={{
+          marginTop: 1,
+          gap: '15px'
+        }}
+      >
+        <Typography variant="h6" sx={{ color: textColor }}>
+          Submitted By
+        </Typography>
+        <Box className={styles.user}>
+          <img
+            onError={imageLoadError}
+            src={
+              metadata[meta.submittedBy]?.picture ||
+              getRoboImageUrl(meta.submittedBy)
+            }
+            alt="Profile Image"
+            className="profile-image"
+            style={{
+              borderWidth: '3px',
+              borderStyle: 'solid',
+              borderColor: `#${meta.submittedBy.substring(0, 6)}`
+            }}
+          />
+          <Link to={getProfileRoute(meta.submittedBy)}>
+            <Typography component="label" className={styles.name}>
+              {metadata[meta.submittedBy]?.display_name ||
+                metadata[meta.submittedBy]?.name ||
+                shorten(hexToNpub(meta.submittedBy))}
+            </Typography>
+          </Link>
+        </Box>
+      </ListItem>
+      <ListItem
+        sx={{
+          marginTop: 1,
+          flexDirection: 'column',
+          alignItems: 'flex-start'
+        }}
+      >
+        <Typography variant="h6" sx={{ color: textColor }}>
+          Files
+        </Typography>
+        <ul>
+          {Object.keys(meta.fileHashes).map((file, index) => (
+            <li key={index} style={{ color: textColor }}>
+              {file}
+            </li>
+          ))}
+        </ul>
+      </ListItem>
+      <ListItem sx={{ marginTop: 1 }}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell className={styles.tableCell}>User</TableCell>
+              <TableCell className={styles.tableCell}>Role</TableCell>
+              <TableCell>Signed Status</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {users.map((user, index) => {
+              const userMeta = metadata[user.pubkey]
+              const npub = hexToNpub(user.pubkey)
+              const roboUrl = `https://robohash.org/${npub}.png?set=set3`
+
+              let signedStatus = '-'
+
+              if (user.role === UserRole.signer) {
+                // check if user has signed the document
+                if (user.pubkey in meta.signedEvents) {
+                  signedStatus = 'Signed'
+                }
+                // check if user is the next signer
+                else if (user.pubkey === nextSigner) {
+                  signedStatus = 'Awaiting Signature'
+                }
+              }
+
+              return (
+                <TableRow key={index}>
+                  <TableCell className={styles.tableCell}>
+                    <Box className={styles.user}>
+                      <img
+                        onError={imageLoadError}
+                        src={userMeta?.picture || roboUrl}
+                        alt="Profile Image"
+                        className="profile-image"
+                        style={{
+                          borderWidth: '3px',
+                          borderStyle: 'solid',
+                          borderColor: `#${user.pubkey.substring(0, 6)}`
+                        }}
+                      />
+                      <Link to={getProfileRoute(user.pubkey)}>
+                        <Typography component="label" className={styles.name}>
+                          {userMeta?.display_name ||
+                            userMeta?.name ||
+                            shorten(npub)}
+                        </Typography>
+                      </Link>
+                    </Box>
+                  </TableCell>
+                  <TableCell className={styles.tableCell}>
+                    {user.role}
+                  </TableCell>
+                  <TableCell>{signedStatus}</TableCell>
+                </TableRow>
+              )
+            })}
+          </TableBody>
+        </Table>
+      </ListItem>
+    </List>
+  )
+}

src/pages/sign/style.module.scss

@@ -0,0 +1,31 @@
+@import '../../colors.scss';
+
+.container {
+  color: $text-color;
+
+  .inputBlock {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 25px;
+  }
+
+  .user {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+
+    .name {
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+
+  .tableCell {
+    border-right: 1px solid rgba(224, 224, 224, 1);
+
+    .user {
+      @extend .user;
+    }
+  }
+}

src/pages/verify/index.tsx

@@ -4,168 +4,80 @@ import {
   List,
   ListItem,
   ListSubheader,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  TextField,
   Typography,
   useTheme
 } from '@mui/material'
-import axios from 'axios'
-import saveAs from 'file-saver'
 import JSZip from 'jszip'
-import _ from 'lodash'
 import { MuiFileInput } from 'mui-file-input'
-import { EventTemplate } from 'nostr-tools'
 import { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
+import { Link } from 'react-router-dom'
-import { Link, useSearchParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
-import { MetadataController, NostrController } from '../../controllers'
+import { MetadataController } from '../../controllers'
 import { getProfileRoute } from '../../routes'
-import { State } from '../../store/rootReducer'
+import { Meta, ProfileMetadata } from '../../types'
-import { Meta, ProfileMetadata, User, UserRole } from '../../types'
 import {
-  decryptArrayBuffer,
-  encryptArrayBuffer,
-  generateEncryptionKey,
-  getHash,
   hexToNpub,
   parseJson,
   readContentOfZipEntry,
-  sendDM,
+  shorten
-  shorten,
-  signEventForMetaFile,
-  uploadToFileStorage
 } from '../../utils'
 import styles from './style.module.scss'
-
+import { Event, verifyEvent } from 'nostr-tools'
-enum SignedStatus {
-  Fully_Signed,
-  User_Is_Next_Signer,
-  User_Is_Not_Next_Signer
-}
 
 export const VerifyPage = () => {
-  const [searchParams] = useSearchParams()
+  const theme = useTheme()
 
-  const [displayInput, setDisplayInput] = useState(false)
+  const textColor = theme.palette.getContrastText(
+    theme.palette.background.paper
+  )
 
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
-  const [encryptionKey, setEncryptionKey] = useState('')
-
-  const [zip, setZip] = useState<JSZip>()
-
-  const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
 
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
   const [meta, setMeta] = useState<Meta | null>(null)
-  const [signedStatus, setSignedStatus] = useState<SignedStatus>()
 
-  const [nextSinger, setNextSinger] = useState<string>()
+  const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
-
+    {}
-  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
+  )
-
-  const [authUrl, setAuthUrl] = useState<string>()
-  const nostrController = NostrController.getInstance()
 
   useEffect(() => {
     if (meta) {
-      setDisplayInput(false)
+      const metadataController = new MetadataController()
 
-      // get list of users who have signed
+      const users = [meta.submittedBy, ...meta.signers, ...meta.viewers]
-      const signedBy = Object.keys(meta.signedEvents)
 
-      if (meta.signers.length > 0) {
+      users.forEach((user) => {
-        // check if all signers have signed then its fully signed
+        if (!(user in metadata)) {
-        if (meta.signers.every((signer) => signedBy.includes(signer))) {
+          metadataController
-          setSignedStatus(SignedStatus.Fully_Signed)
+            .findMetadata(user)
-        } else {
+            .then((metadataEvent) => {
-          for (const signer of meta.signers) {
+              const metadataContent =
-            if (!signedBy.includes(signer)) {
+                metadataController.extractProfileMetadataContent(metadataEvent)
-              setNextSinger(signer)
+              if (metadataContent)
-
+                setMetadata((prev) => ({
-              if (signer === usersPubkey) {
+                  ...prev,
-                // logged in user is the next signer
+                  [user]: metadataContent
-                setSignedStatus(SignedStatus.User_Is_Next_Signer)
+                }))
-              } else {
-                setSignedStatus(SignedStatus.User_Is_Not_Next_Signer)
-              }
-
-              break
-            }
-          }
-        }
-      } else {
-        // there's no signer just viewers. So its fully signed
-        setSignedStatus(SignedStatus.Fully_Signed)
-      }
-    }
-  }, [meta, usersPubkey])
-
-  useEffect(() => {
-    const fileUrl = searchParams.get('file')
-    const key = searchParams.get('key')
-
-    if (fileUrl && key) {
-      setIsLoading(true)
-      setLoadingSpinnerDesc('Fetching file from file server')
-
-      axios
-        .get(fileUrl, {
-          responseType: 'arraybuffer'
-        })
-        .then((res) => {
-          const fileName = fileUrl.split('/').pop()
-          const file = new File([res.data], fileName!)
-
-          decrypt(file, key).then((arrayBuffer) => {
-            if (arrayBuffer) handleDecryptedArrayBuffer(arrayBuffer)
-          })
             })
             .catch((err) => {
-          console.error(`error occurred in getting file from ${fileUrl}`, err)
+              console.error(
-          toast.error(
+                `error occurred in finding metadata for: ${user}`,
-            err.message || `error occurred in getting file from ${fileUrl}`
+                err
               )
             })
-        .finally(() => {
-          setIsLoading(false)
-        })
-    } else {
-      setIsLoading(false)
-      setDisplayInput(true)
         }
-  }, [searchParams])
-
-  const decrypt = async (file: File, key: string) => {
-    setLoadingSpinnerDesc('Decrypting file')
-
-    const encryptedArrayBuffer = await file.arrayBuffer()
-
-    const arrayBuffer = await decryptArrayBuffer(encryptedArrayBuffer, key)
-      .catch((err) => {
-        console.log('err in decryption:>> ', err)
-        toast.error(err.message || 'An error occurred in decrypting file.')
-        return null
       })
-      .finally(() => {
-        setIsLoading(false)
-      })
-
-    return arrayBuffer
     }
+  }, [meta])
 
-  const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
+  const handleVerify = async () => {
-    const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
+    if (!selectedFile) return
+    setIsLoading(true)
 
-    setLoadingSpinnerDesc('Parsing zip file')
+    const zip = await JSZip.loadAsync(selectedFile).catch((err) => {
-
-    const zip = await JSZip.loadAsync(decryptedZipFile).catch((err) => {
       console.log('err in loading zip file :>> ', err)
       toast.error(err.message || 'An error occurred in loading zip file.')
       return null
@@ -173,8 +85,6 @@ export const VerifyPage = () => {
 
     if (!zip) return
 
-    setZip(zip)
-
     setLoadingSpinnerDesc('Parsing meta.json')
 
     const metaFileContent = await readContentOfZipEntry(
@@ -200,280 +110,101 @@ export const VerifyPage = () => {
     )
 
     setMeta(parsedMetaJson)
-  }
-
-  const handleDecrypt = async () => {
-    if (!selectedFile || !encryptionKey) return
-
-    setIsLoading(true)
-    const arrayBuffer = await decrypt(selectedFile, encryptionKey)
-
-    if (!arrayBuffer) return
-
-    handleDecryptedArrayBuffer(arrayBuffer)
-  }
-
-  const handleSign = async () => {
-    if (!zip || !meta) return
-
-    setIsLoading(true)
-    setLoadingSpinnerDesc('parsing hashes.json file')
-
-    const hashesFileContent = await readContentOfZipEntry(
-      zip,
-      'hashes.json',
-      'string'
-    )
-
-    if (!hashesFileContent) {
-      setIsLoading(false)
-      return
-    }
-
-    let hashes = await parseJson(hashesFileContent).catch((err) => {
-      console.log('err in parsing the content of hashes.json :>> ', err)
-      toast.error(
-        err.message || 'error occurred in parsing the content of hashes.json'
-      )
-      setIsLoading(false)
-      return null
-    })
-
-    if (!hashes) return
-
-    setLoadingSpinnerDesc('Generating hashes for files')
-
-    const fileHashes: { [key: string]: string } = {}
-    const fileNames = Object.keys(meta.fileHashes)
-
-    // generate hashes for all entries in files folder of zipArchive
-    // these hashes can be used to verify the originality of files
-    for (const fileName of fileNames) {
-      const filePath = `files/${fileName}`
-      const arrayBuffer = await readContentOfZipEntry(
-        zip,
-        filePath,
-        'arraybuffer'
-      )
-
-      if (!arrayBuffer) {
-        setIsLoading(false)
-        return
-      }
-
-      const hash = await getHash(arrayBuffer)
-      if (!hash) {
-        setIsLoading(false)
-        return
-      }
-
-      fileHashes[fileName] = hash
-    }
-
-    setLoadingSpinnerDesc('Signing nostr event')
-    const signedEvent = await signEventForMetaFile(
-      fileHashes,
-      nostrController,
-      setIsLoading
-    )
-
-    if (!signedEvent) return
-
-    const metaCopy = _.cloneDeep(meta)
-
-    metaCopy.signedEvents = {
-      ...metaCopy.signedEvents,
-      [signedEvent.pubkey]: JSON.stringify(signedEvent, null, 2)
-    }
-
-    const stringifiedMeta = JSON.stringify(metaCopy, null, 2)
-    zip.file('meta.json', stringifiedMeta)
-
-    const metaHash = await getHash(stringifiedMeta)
-    if (!metaHash) return
-
-    hashes = {
-      ...hashes,
-      [usersPubkey!]: metaHash
-    }
-
-    zip.file('hashes.json', JSON.stringify(hashes, null, 2))
-
-    const arrayBuffer = await zip
-      .generateAsync({
-        type: 'arraybuffer',
-        compression: 'DEFLATE',
-        compressionOptions: {
-          level: 6
-        }
-      })
-      .catch((err) => {
-        console.log('err in zip:>> ', err)
-        setIsLoading(false)
-        toast.error(err.message || 'Error occurred in generating zip file')
-        return null
-      })
-
-    if (!arrayBuffer) return
-
-    const encryptionKey = await generateEncryptionKey()
-
-    setLoadingSpinnerDesc('Encrypting zip file')
-    const encryptedArrayBuffer = await encryptArrayBuffer(
-      arrayBuffer,
-      encryptionKey
-    )
-
-    const blob = new Blob([encryptedArrayBuffer])
-
-    setLoadingSpinnerDesc('Uploading zip file to file storage.')
-    const fileUrl = await uploadToFileStorage(blob, nostrController)
-      .then((url) => {
-        toast.success('zip file uploaded to file storage')
-        return url
-      })
-      .catch((err) => {
-        console.log('err in upload:>> ', err)
-        setIsLoading(false)
-        toast.error(err.message || 'Error occurred in uploading zip file')
-        return null
-      })
-
-    if (!fileUrl) return
-
-    // check if the current user is the last signer
-    const lastSignerIndex = meta.signers.length - 1
-    const signerIndex = meta.signers.indexOf(usersPubkey!)
-    const isLastSigner = signerIndex === lastSignerIndex
-
-    // if current user is the last signer, then send DMs to all signers and viewers
-    if (isLastSigner) {
-      const userSet = new Set<string>()
-
-      userSet.add(meta.submittedBy)
-
-      meta.signers.forEach((signer) => {
-        userSet.add(signer)
-      })
-
-      meta.viewers.forEach((viewer) => {
-        userSet.add(viewer)
-      })
-
-      const users = Array.from(userSet)
-
-      for (const user of users) {
-        // todo: execute in parallel
-        await sendDM(
-          fileUrl,
-          encryptionKey,
-          user,
-          nostrController,
-          false,
-          setAuthUrl
-        )
-      }
-    } else {
-      const nextSigner = meta.signers[signerIndex + 1]
-      await sendDM(
-        fileUrl,
-        encryptionKey,
-        nextSigner,
-        nostrController,
-        false,
-        setAuthUrl
-      )
-    }
-
     setIsLoading(false)
   }
 
-  const handleExport = async () => {
+  const imageLoadError = (event: any) => {
-    if (!meta || !zip || !usersPubkey) return
+    event.target.src = placeholderAvatar
+  }
 
-    if (
+  const getRoboImageUrl = (pubkey: string) => {
-      !meta.signers.includes(usersPubkey) &&
+    const npub = hexToNpub(pubkey)
-      !meta.viewers.includes(usersPubkey) &&
+    return `https://robohash.org/${npub}.png?set=set3`
-      meta.submittedBy !== usersPubkey
+  }
+
+  const displayUser = (pubkey: string, verifySignature = false) => {
+    const profile = metadata[pubkey]
+
+    let isValidSignature = false
+
+    if (verifySignature) {
+      const signedEventString = meta ? meta.signedEvents[pubkey] : null
+      if (signedEventString) {
+        try {
+          const signedEvent = JSON.parse(signedEventString)
+          isValidSignature = verifyEvent(signedEvent)
+        } catch (error) {
+          console.error(
+            `An error occurred in parsing and verifying the signature event for ${pubkey}`,
+            error
           )
-      return
+        }
-
+      }
-    setIsLoading(true)
-    setLoadingSpinnerDesc('Signing nostr event')
-    const event: EventTemplate = {
-      kind: 1,
-      content: '',
-      created_at: Math.floor(Date.now() / 1000), // Current timestamp
-      tags: []
     }
 
-    // Sign the event
-    const signedEvent = await nostrController.signEvent(event).catch((err) => {
-      console.error(err)
-      toast.error(err.message || 'Error occurred in signing nostr event')
-      setIsLoading(false) // Set loading state to false
-      return null
-    })
-
-    if (!signedEvent) return
-
-    const exportSignature = JSON.stringify(signedEvent, null, 2)
-
-    const stringifiedMeta = JSON.stringify(
-      {
-        ...meta,
-        exportSignature
-      },
-      null,
-      2
-    )
-    zip.file('meta.json', stringifiedMeta)
-
-    const arrayBuffer = await zip
-      .generateAsync({
-        type: 'arraybuffer',
-        compression: 'DEFLATE',
-        compressionOptions: {
-          level: 6
-        }
-      })
-      .catch((err) => {
-        console.log('err in zip:>> ', err)
-        setIsLoading(false)
-        toast.error(err.message || 'Error occurred in generating zip file')
-        return null
-      })
-
-    if (!arrayBuffer) return
-
-    const blob = new Blob([arrayBuffer])
-    saveAs(blob, 'exported.zip')
-
-    setIsLoading(false)
-  }
-
-  if (authUrl) {
     return (
-      <iframe
+      <Box className={styles.user}>
-        title="Nsecbunker auth"
+        <img
-        src={authUrl}
+          onError={imageLoadError}
-        width="100%"
+          src={profile?.picture || getRoboImageUrl(pubkey)}
-        height="500px"
+          alt="Profile Image"
+          className="profile-image"
+          style={{
+            borderWidth: '3px',
+            borderStyle: 'solid',
+            borderColor: `#${pubkey.substring(0, 6)}`
+          }}
         />
+        <Link to={getProfileRoute(pubkey)}>
+          <Typography component="label" className={styles.name}>
+            {profile?.display_name ||
+              profile?.name ||
+              shorten(hexToNpub(pubkey))}
+          </Typography>
+        </Link>
+        {verifySignature && (
+          <Typography component="label">
+            ({isValidSignature ? 'Valid' : 'Not Valid'} Signature)
+          </Typography>
+        )}
+      </Box>
     )
   }
 
+  const displayExportedBy = () => {
+    if (!meta || !meta.exportSignature) return null
+
+    const exportSignatureString = meta.exportSignature
+
+    try {
+      const exportSignatureEvent = JSON.parse(exportSignatureString) as Event
+
+      if (verifyEvent(exportSignatureEvent)) {
+        return displayUser(exportSignatureEvent.pubkey)
+      } else {
+        toast.error(`Invalid export signature!`)
+        return (
+          <Typography component="label" sx={{ color: 'red' }}>
+            Invalid export signature
+          </Typography>
+        )
+      }
+    } catch (error) {
+      console.error(`An error occurred wile parsing exportSignature`, error)
+      return null
+    }
+  }
+
   return (
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       <Box className={styles.container}>
-        {displayInput && (
+        {!meta && (
           <>
             <Typography component="label" variant="h6">
-              Select sigit file
+              Select exported zip file
             </Typography>
 
-            <Box className={styles.inputBlock}>
             <MuiFileInput
               placeholder="Select file"
               value={selectedFile}
@@ -486,171 +217,24 @@ export const VerifyPage = () => {
             />
 
             {selectedFile && (
-                <TextField
-                  label="Encryption Key"
-                  variant="outlined"
-                  value={encryptionKey}
-                  onChange={(e) => setEncryptionKey(e.target.value)}
-                />
-              )}
-            </Box>
-
-            {selectedFile && encryptionKey && (
               <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
-                <Button onClick={handleDecrypt} variant="contained">
+                <Button onClick={handleVerify} variant="contained">
-                  Decrypt
+                  Verify
                 </Button>
               </Box>
             )}
           </>
         )}
 
-        {meta && signedStatus === SignedStatus.Fully_Signed && (
+        {meta && (
           <>
-            <DisplayMeta meta={meta} nextSigner={nextSinger} />
-            <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
-              <Button onClick={handleExport} variant="contained">
-                Export
-              </Button>
-            </Box>
-          </>
-        )}
-
-        {meta && signedStatus === SignedStatus.User_Is_Not_Next_Signer && (
-          <DisplayMeta meta={meta} nextSigner={nextSinger} />
-        )}
-
-        {meta && signedStatus === SignedStatus.User_Is_Next_Signer && (
-          <>
-            <DisplayMeta meta={meta} nextSigner={nextSinger} />
-            <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
-              <Button onClick={handleSign} variant="contained">
-                Sign
-              </Button>
-            </Box>
-          </>
-        )}
-      </Box>
-    </>
-  )
-}
-
-type DisplayMetaProps = {
-  meta: Meta
-  nextSigner?: string
-}
-
-const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
-  const theme = useTheme()
-
-  const textColor = theme.palette.getContrastText(
-    theme.palette.background.paper
-  )
-
-  const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
-    {}
-  )
-  const [users, setUsers] = useState<User[]>([])
-
-  useEffect(() => {
-    meta.signers.forEach((signer) => {
-      setUsers((prev) => {
-        if (prev.findIndex((user) => user.pubkey === signer) !== -1) return prev
-
-        return [
-          ...prev,
-          {
-            pubkey: signer,
-            role: UserRole.signer
-          }
-        ]
-      })
-    })
-
-    meta.viewers.forEach((viewer) => {
-      setUsers((prev) => {
-        if (prev.findIndex((user) => user.pubkey === viewer) !== -1) return prev
-
-        return [
-          ...prev,
-          {
-            pubkey: viewer,
-            role: UserRole.viewer
-          }
-        ]
-      })
-    })
-  }, [meta])
-
-  useEffect(() => {
-    const metadataController = new MetadataController()
-
-    metadataController
-      .findMetadata(meta.submittedBy)
-      .then((metadataEvent) => {
-        const metadataContent =
-          metadataController.extractProfileMetadataContent(metadataEvent)
-        if (metadataContent)
-          setMetadata((prev) => ({
-            ...prev,
-            [meta.submittedBy]: metadataContent
-          }))
-      })
-      .catch((err) => {
-        console.error(
-          `error occurred in finding metadata for: ${meta.submittedBy}`,
-          err
-        )
-      })
-
-    users.forEach((user) => {
-      if (!(user.pubkey in metadata)) {
-        metadataController
-          .findMetadata(user.pubkey)
-          .then((metadataEvent) => {
-            const metadataContent =
-              metadataController.extractProfileMetadataContent(metadataEvent)
-            if (metadataContent)
-              setMetadata((prev) => ({
-                ...prev,
-                [user.pubkey]: metadataContent
-              }))
-          })
-          .catch((err) => {
-            console.error(
-              `error occurred in finding metadata for: ${user.pubkey}`,
-              err
-            )
-          })
-      }
-    })
-  }, [users, meta.submittedBy])
-
-  const imageLoadError = (event: any) => {
-    event.target.src = placeholderAvatar
-  }
-
-  const getRoboImageUrl = (pubkey: string) => {
-    const npub = hexToNpub(pubkey)
-    return `https://robohash.org/${npub}.png?set=set3`
-  }
-
-  return (
             <List
               sx={{
                 bgcolor: 'background.paper',
                 marginTop: 2
               }}
               subheader={
-        <ListSubheader
+                <ListSubheader className={styles.subHeader}>
-          sx={{
-            borderBottom: '0.5px solid',
-            paddingBottom: 1,
-            paddingTop: 1,
-            fontSize: '1.5rem'
-          }}
-          className={styles.subHeader}
-        >
                   Meta Info
                 </ListSubheader>
               }
@@ -664,30 +248,63 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
                 <Typography variant="h6" sx={{ color: textColor }}>
                   Submitted By
                 </Typography>
-        <Box className={styles.user}>
+                {displayUser(meta.submittedBy)}
-          <img
-            onError={imageLoadError}
-            src={
-              metadata[meta.submittedBy]?.picture ||
-              getRoboImageUrl(meta.submittedBy)
-            }
-            alt="Profile Image"
-            className="profile-image"
-            style={{
-              borderWidth: '3px',
-              borderStyle: 'solid',
-              borderColor: `#${meta.submittedBy.substring(0, 6)}`
-            }}
-          />
-          <Link to={getProfileRoute(meta.submittedBy)}>
-            <Typography component="label" className={styles.name}>
-              {metadata[meta.submittedBy]?.display_name ||
-                metadata[meta.submittedBy]?.name ||
-                shorten(hexToNpub(meta.submittedBy))}
-            </Typography>
-          </Link>
-        </Box>
               </ListItem>
+
+              <ListItem
+                sx={{
+                  marginTop: 1,
+                  gap: '15px'
+                }}
+              >
+                <Typography variant="h6" sx={{ color: textColor }}>
+                  Exported By
+                </Typography>
+                {displayExportedBy()}
+              </ListItem>
+
+              {meta.signers.length > 0 && (
+                <ListItem
+                  sx={{
+                    marginTop: 1,
+                    flexDirection: 'column',
+                    alignItems: 'flex-start'
+                  }}
+                >
+                  <Typography variant="h6" sx={{ color: textColor }}>
+                    Signers
+                  </Typography>
+                  <ul className={styles.usersList}>
+                    {meta.signers.map((signer) => (
+                      <li key={signer} style={{ color: textColor }}>
+                        {displayUser(signer, true)}
+                      </li>
+                    ))}
+                  </ul>
+                </ListItem>
+              )}
+
+              {meta.viewers.length > 0 && (
+                <ListItem
+                  sx={{
+                    marginTop: 1,
+                    flexDirection: 'column',
+                    alignItems: 'flex-start'
+                  }}
+                >
+                  <Typography variant="h6" sx={{ color: textColor }}>
+                    Viewers
+                  </Typography>
+                  <ul className={styles.usersList}>
+                    {meta.viewers.map((viewer) => (
+                      <li key={viewer} style={{ color: textColor }}>
+                        {displayUser(viewer)}
+                      </li>
+                    ))}
+                  </ul>
+                </ListItem>
+              )}
+
               <ListItem
                 sx={{
                   marginTop: 1,
@@ -706,68 +323,10 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
                   ))}
                 </ul>
               </ListItem>
-      <ListItem sx={{ marginTop: 1 }}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              <TableCell className={styles.tableCell}>User</TableCell>
-              <TableCell className={styles.tableCell}>Role</TableCell>
-              <TableCell>Signed Status</TableCell>
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            {users.map((user, index) => {
-              const userMeta = metadata[user.pubkey]
-              const npub = hexToNpub(user.pubkey)
-              const roboUrl = `https://robohash.org/${npub}.png?set=set3`
-
-              let signedStatus = '-'
-
-              if (user.role === UserRole.signer) {
-                // check if user has signed the document
-                if (user.pubkey in meta.signedEvents) {
-                  signedStatus = 'Signed'
-                }
-                // check if user is the next signer
-                else if (user.pubkey === nextSigner) {
-                  signedStatus = 'Awaiting Signature'
-                }
-              }
-
-              return (
-                <TableRow key={index}>
-                  <TableCell className={styles.tableCell}>
-                    <Box className={styles.user}>
-                      <img
-                        onError={imageLoadError}
-                        src={userMeta?.picture || roboUrl}
-                        alt="Profile Image"
-                        className="profile-image"
-                        style={{
-                          borderWidth: '3px',
-                          borderStyle: 'solid',
-                          borderColor: `#${user.pubkey.substring(0, 6)}`
-                        }}
-                      />
-                      <Link to={getProfileRoute(user.pubkey)}>
-                        <Typography component="label" className={styles.name}>
-                          {userMeta?.display_name ||
-                            userMeta?.name ||
-                            shorten(npub)}
-                        </Typography>
-                      </Link>
-                    </Box>
-                  </TableCell>
-                  <TableCell className={styles.tableCell}>
-                    {user.role}
-                  </TableCell>
-                  <TableCell>{signedStatus}</TableCell>
-                </TableRow>
-              )
-            })}
-          </TableBody>
-        </Table>
-      </ListItem>
             </List>
+          </>
+        )}
+      </Box>
+    </>
   )
 }

src/pages/verify/style.module.scss

@@ -2,12 +2,20 @@
 
 .container {
   color: $text-color;
-
-  .inputBlock {
-    position: relative;
   display: flex;
   flex-direction: column;
-    gap: 25px;
+
+  .subHeader {
+    border-bottom: 0.5px solid;
+    font-size: 1.5rem;
+  }
+
+  .usersList {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    list-style: none;
+    margin-top: 10px;
   }
 
   .user {

src/routes/index.tsx

@@ -4,11 +4,13 @@ import { LandingPage } from '../pages/landing/LandingPage'
 import { Login } from '../pages/login'
 import { ProfilePage } from '../pages/profile'
 import { hexToNpub } from '../utils'
+import { SignPage } from '../pages/sign'
 import { VerifyPage } from '../pages/verify'
 
 export const appPrivateRoutes = {
   homePage: '/',
   create: '/create',
+  sign: '/sign',
   verify: '/verify'
 }
 
@@ -48,6 +50,10 @@ export const privateRoutes = [
     path: appPrivateRoutes.create,
     element: <CreatePage />
   },
+  {
+    path: appPrivateRoutes.sign,
+    element: <SignPage />
+  },
   {
     path: appPrivateRoutes.verify,
     element: <VerifyPage />

src/types/core.ts

@@ -14,4 +14,5 @@ export interface Meta {
   fileHashes: { [key: string]: string }
   submittedBy: string
   signedEvents: { [key: string]: string }
+  exportSignature?: string
 }

src/utils/misc.ts

@@ -76,7 +76,7 @@ export const sendDM = async (
     : 'You have received a signed document.'
 
   const decryptionUrl = `${window.location.origin}/#${
-    appPrivateRoutes.verify
+    appPrivateRoutes.sign
   }?file=${encodeURIComponent(fileUrl)}&key=${encodeURIComponent(
     encryptionKey
   )}`

src/utils/zip.ts

@@ -17,6 +17,11 @@ export const readContentOfZipEntry = async <T extends OutputType>(
   // Get the zip entry corresponding to the specified file path
   const zipEntry = zip.files[filePath]
 
+  if (!zipEntry) {
+    toast.error(`Couldn't find file in zip archive at ${filePath}`)
+    return null
+  }
+
   // Read the content of the zip entry asynchronously
   const fileContent = await zipEntry.async(outputType).catch((err) => {
     // Handle any errors that occur during the read operation