package-lock.json

@@ -21,7 +21,6 @@
         "@mui/material": "5.15.11",
         "@noble/hashes": "^1.4.0",
         "@nostr-dev-kit/ndk": "2.5.0",
-        "@pdf-lib/fontkit": "^1.1.1",
         "@reduxjs/toolkit": "2.2.1",
         "axios": "^1.7.4",
         "crypto-hash": "3.0.0",
@@ -1750,15 +1749,6 @@
         }
       }
     },
-    "node_modules/@pdf-lib/fontkit": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@pdf-lib/fontkit/-/fontkit-1.1.1.tgz",
-      "integrity": "sha512-KjMd7grNapIWS/Dm0gvfHEilSyAmeLvrEGVcqLGi0VYebuqqzTbgF29efCx7tvx+IEbG3zQciRSWl3GkUSvjZg==",
-      "license": "MIT",
-      "dependencies": {
-        "pako": "^1.0.6"
-      }
-    },
     "node_modules/@pdf-lib/standard-fonts": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",

package.json

@@ -31,7 +31,6 @@
     "@mui/material": "5.15.11",
     "@noble/hashes": "^1.4.0",
     "@nostr-dev-kit/ndk": "2.5.0",
-    "@pdf-lib/fontkit": "^1.1.1",
     "@reduxjs/toolkit": "2.2.1",
     "axios": "^1.7.4",
     "crypto-hash": "3.0.0",

src/App.scss

@@ -135,18 +135,12 @@ li {
 // Consistent styling for every file mark
 // Reverts some of the design defaults for font
 .file-mark {
-  font-family: 'Roboto';
+  font-family: Arial;
-  font-style: normal;
-  font-weight: normal;
-  letter-spacing: normal;
-  line-height: 1;
-
   font-size: 16px;
+  font-weight: normal;
   color: black;
-  outline: 1px solid transparent;
+  letter-spacing: normal;
-
+  border: 1px solid transparent;
-  justify-content: start;
-  align-items: start;
 
   scroll-margin-top: $header-height + $body-vertical-padding;
 }

src/components/AppBar/AppBar.tsx

@@ -37,7 +37,7 @@ import { setUserRobotImage } from '../../store/userRobotImage/action'
 import { Container } from '../Container'
 import { ButtonIcon } from '../ButtonIcon'
 
-const metadataController = MetadataController.getInstance()
+const metadataController = new MetadataController()
 
 export const AppBar = () => {
   const navigate = useNavigate()

src/components/DisplaySigit/index.tsx

@@ -1,7 +1,7 @@
 import { Meta } from '../../types'
 import { SigitCardDisplayInfo, SigitStatus, SignStatus } from '../../utils'
 import { Link } from 'react-router-dom'
-import { formatTimestamp, npubToHex } from '../../utils'
+import { formatTimestamp, hexToNpub, npubToHex, shorten } from '../../utils'
 import { appPublicRoutes, appPrivateRoutes } from '../../routes'
 import { Button, Divider, Tooltip } from '@mui/material'
 import { DisplaySigner } from '../DisplaySigner'
@@ -17,7 +17,9 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { UserAvatarGroup } from '../UserAvatarGroup'
 
 import styles from './style.module.scss'
+import { TooltipChild } from '../TooltipChild'
 import { getExtensionIconLabel } from '../getExtensionIconLabel'
+import { useSigitProfiles } from '../../hooks/useSigitProfiles'
 import { useSigitMeta } from '../../hooks/useSigitMeta'
 import { extractFileExtensions } from '../../utils/file'
 
@@ -31,6 +33,12 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
     parsedMeta
 
   const { signersStatus, fileHashes } = useSigitMeta(meta)
+
+  const profiles = useSigitProfiles([
+    ...(submittedBy ? [submittedBy] : []),
+    ...signers
+  ])
+
   const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
 
   return (
@@ -46,29 +54,62 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
       ></Link>
       <p className={`line-clamp-2 ${styles.title}`}>{title}</p>
       <div className={styles.users}>
-        {submittedBy && (
+        {submittedBy &&
-          <DisplaySigner
+          (function () {
-            status={isValid ? SignStatus.Signed : SignStatus.Invalid}
+            const profile = profiles[submittedBy]
-            pubkey={submittedBy}
+            return (
-          />
+              <Tooltip
-        )}
+                key={submittedBy}
+                title={
+                  profile?.display_name ||
+                  profile?.name ||
+                  shorten(hexToNpub(submittedBy))
+                }
+                placement="top"
+                arrow
+                disableInteractive
+              >
+                <TooltipChild>
+                  <DisplaySigner
+                    status={isValid ? SignStatus.Signed : SignStatus.Invalid}
+                    profile={profile}
+                    pubkey={submittedBy}
+                  />
+                </TooltipChild>
+              </Tooltip>
+            )
+          })()}
         {submittedBy && signers.length ? (
           <Divider orientation="vertical" flexItem />
         ) : null}
         <UserAvatarGroup max={7}>
           {signers.map((signer) => {
             const pubkey = npubToHex(signer)!
+            const profile = profiles[pubkey]
+
             return (
-              <DisplaySigner
+              <Tooltip
-                key={pubkey}
+                key={signer}
-                status={signersStatus[signer]}
+                title={
-                pubkey={pubkey}
+                  profile?.display_name || profile?.name || shorten(pubkey)
-              />
+                }
+                placement="top"
+                arrow
+                disableInteractive
+              >
+                <TooltipChild>
+                  <DisplaySigner
+                    status={signersStatus[signer]}
+                    profile={profile}
+                    pubkey={pubkey}
+                  />
+                </TooltipChild>
+              </Tooltip>
             )
           })}
         </UserAvatarGroup>
       </div>
-      <div className={`${styles.details} ${styles.iconLabel}`}>
+      <div className={`${styles.details} ${styles.date} ${styles.iconLabel}`}>
         <FontAwesomeIcon icon={faCalendar} />
         {createdAt ? formatTimestamp(createdAt) : null}
       </div>

src/components/DisplaySigner/index.tsx

@@ -1,4 +1,5 @@
 import { Badge } from '@mui/material'
+import { ProfileMetadata } from '../../types'
 import styles from './style.module.scss'
 import { UserAvatar } from '../UserAvatar'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -14,33 +15,38 @@ import { SignStatus } from '../../utils'
 import { Spinner } from '../Spinner'
 
 type DisplaySignerProps = {
+  profile: ProfileMetadata
   pubkey: string
   status: SignStatus
 }
 
-const getStatusIcon = (status: SignStatus) => {
+export const DisplaySigner = ({
-  switch (status) {
+  status,
-    case SignStatus.Signed:
+  profile,
-      return <FontAwesomeIcon icon={faCheck} />
+  pubkey
-    case SignStatus.Awaiting:
+}: DisplaySignerProps) => {
-      return (
+  const getStatusIcon = (status: SignStatus) => {
-        <Spinner>
+    switch (status) {
-          <FontAwesomeIcon icon={faHourglass} />
+      case SignStatus.Signed:
-        </Spinner>
+        return <FontAwesomeIcon icon={faCheck} />
-      )
+      case SignStatus.Awaiting:
-    case SignStatus.Pending:
+        return (
-      return <FontAwesomeIcon icon={faEllipsis} />
+          <Spinner>
-    case SignStatus.Invalid:
+            <FontAwesomeIcon icon={faHourglass} />
-      return <FontAwesomeIcon icon={faExclamation} />
+          </Spinner>
-    case SignStatus.Viewer:
+        )
-      return <FontAwesomeIcon icon={faEye} />
+      case SignStatus.Pending:
+        return <FontAwesomeIcon icon={faEllipsis} />
+      case SignStatus.Invalid:
+        return <FontAwesomeIcon icon={faExclamation} />
+      case SignStatus.Viewer:
+        return <FontAwesomeIcon icon={faEye} />
 
-    default:
+      default:
-      return <FontAwesomeIcon icon={faQuestion} />
+        return <FontAwesomeIcon icon={faQuestion} />
+    }
   }
-}
 
-export const DisplaySigner = ({ status, pubkey }: DisplaySignerProps) => {
   return (
     <Badge
       className={styles.signer}
@@ -50,7 +56,7 @@ export const DisplaySigner = ({ status, pubkey }: DisplaySignerProps) => {
         <div className={styles.statusBadge}>{getStatusIcon(status)}</div>
       }
     >
-      <UserAvatar pubkey={pubkey} />
+      <UserAvatar pubkey={pubkey} image={profile?.picture} />
     </Badge>
   )
 }

src/components/DrawPDFFields/index.tsx

@@ -14,10 +14,9 @@ import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
 import { truncate } from 'lodash'
 import { settleAllFullfilfedPromises, hexToNpub, npubToHex } from '../../utils'
 import { getSigitFile, SigitFile } from '../../utils/file'
-import { getToolboxLabelByMarkType } from '../../utils/mark'
 import { FileDivider } from '../FileDivider'
 import { ExtensionFileBox } from '../ExtensionFileBox'
-import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf'
+import { inPx } from '../../utils/pdf'
 import { useScale } from '../../hooks/useScale'
 import { AvatarIconButton } from '../UserAvatarIconButton'
 import { LoadingSpinner } from '../LoadingSpinner'
@@ -391,7 +390,7 @@ export const DrawPDFFields = (props: Props) => {
                       backgroundColor: drawnField.counterpart
                         ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}4b`
                         : undefined,
-                      outlineColor: drawnField.counterpart
+                      borderColor: drawnField.counterpart
                         ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}`
                         : undefined,
                       left: inPx(from(page.width, drawnField.left)),
@@ -407,16 +406,6 @@ export const DrawPDFFields = (props: Props) => {
                           : undefined
                     }}
                   >
-                    <div
-                      className={`file-mark ${styles.placeholder}`}
-                      style={{
-                        fontFamily: FONT_TYPE,
-                        fontSize: inPx(from(page.width, FONT_SIZE))
-                      }}
-                    >
-                      {getToolboxLabelByMarkType(drawnField.type) ||
-                        'placeholder'}
-                    </div>
                     <span
                       onPointerDown={(event) =>
                         handleResizePointerDown(event, drawnFieldIndex)

src/components/DrawPDFFields/style.module.scss

@@ -13,15 +13,9 @@
   }
 }
 
-.placeholder {
-  position: absolute;
-  opacity: 0.5;
-  inset: 0;
-}
-
 .drawingRectangle {
   position: absolute;
-  outline: 1px solid #01aaad;
+  border: 1px solid #01aaad;
   z-index: 50;
   background-color: #01aaad4b;
   cursor: pointer;
@@ -35,7 +29,7 @@
   }
 
   &.edited {
-    outline: 1px dotted #01aaad;
+    border: 1px dotted #01aaad;
   }
 
   .resizeHandle {

src/components/LoadingSpinner/index.tsx

@@ -1,14 +1,12 @@
-import { createPortal } from 'react-dom'
 import styles from './style.module.scss'
-import { PropsWithChildren } from 'react'
 
 interface Props {
   desc?: string
   variant?: 'small' | 'default'
 }
 
-export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
+export const LoadingSpinner = (props: Props) => {
-  const { desc, children, variant = 'default' } = props
+  const { desc, variant = 'default' } = props
 
   switch (variant) {
     case 'small':
@@ -22,22 +20,16 @@ export const LoadingSpinner = (props: PropsWithChildren<Props>) => {
       )
 
     default:
-      return createPortal(
+      return (
         <div className={styles.loadingSpinnerOverlay}>
           <div
             className={styles.loadingSpinnerContainer}
             data-variant={variant}
           >
             <div className={styles.loadingSpinner}></div>
-            {desc && (
+            {desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>}
-              <div className={styles.loadingSpinnerDesc}>
-                {desc}
-                {children}
-              </div>
-            )}
           </div>
-        </div>,
+        </div>
-        document.getElementById('root')!
       )
   }
 }

src/components/LoadingSpinner/style.module.scss

@@ -42,15 +42,11 @@
   width: 100%;
   padding: 15px;
   border-top: solid 1px rgba(0, 0, 0, 0.1);
+  text-align: center;
   color: rgba(0, 0, 0, 0.5);
 
   font-size: 16px;
   font-weight: 400;
-
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 10px;
 }
 
 @keyframes spin {

src/components/PDFView/PdfMarkItem.tsx

@@ -36,7 +36,7 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
           backgroundColor: selectedMark?.mark.npub
             ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
             : undefined,
-          outlineColor: selectedMark?.mark.npub
+          borderColor: selectedMark?.mark.npub
             ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
             : undefined,
           left: inPx(from(pageWidth, location.left)),

src/components/UserAvatar/index.tsx

@@ -3,56 +3,34 @@ import { getProfileRoute } from '../../routes'
 import styles from './styles.module.scss'
 import { AvatarIconButton } from '../UserAvatarIconButton'
 import { Link } from 'react-router-dom'
-import { useProfileMetadata } from '../../hooks/useProfileMetadata'
-import { Tooltip } from '@mui/material'
-import { shorten } from '../../utils'
-import { TooltipChild } from '../TooltipChild'
 
 interface UserAvatarProps {
+  name?: string
   pubkey: string
-  isNameVisible?: boolean
+  image?: string
 }
 
 /**
  *  This component will be used for the displaying username and profile picture.
  *  Clicking will navigate to the user's profile.
  */
-export const UserAvatar = ({
+export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
-  pubkey,
-  isNameVisible = false
-}: UserAvatarProps) => {
-  const profile = useProfileMetadata(pubkey)
-  const name = profile?.display_name || profile?.name || shorten(pubkey)
-  const image = profile?.picture
-
   return (
     <Link
       to={getProfileRoute(pubkey)}
       className={styles.container}
       tabIndex={-1}
     >
-      <Tooltip
+      <AvatarIconButton
-        key={pubkey}
+        src={image}
-        title={name}
+        hexKey={pubkey}
-        placement="top"
+        aria-label={`account of user ${name || pubkey}`}
-        arrow
+        color="inherit"
-        disableInteractive
+        sx={{
-      >
+          padding: 0
-        <TooltipChild>
+        }}
-          <AvatarIconButton
+      />
-            src={image}
+      {name ? <span className={styles.username}>{name}</span> : null}
-            hexKey={pubkey}
-            aria-label={`account of user ${name}`}
-            color="inherit"
-            sx={{
-              padding: 0
-            }}
-          />
-        </TooltipChild>
-      </Tooltip>
-      {isNameVisible && name ? (
-        <span className={styles.username}>{name}</span>
-      ) : null}
     </Link>
   )
 }

src/components/UsersDetails.tsx/index.tsx

@@ -1,9 +1,11 @@
 import { Divider, Tooltip } from '@mui/material'
+import { useSigitProfiles } from '../../hooks/useSigitProfiles'
 import {
   formatTimestamp,
   fromUnixTimestamp,
   hexToNpub,
   npubToHex,
+  shorten,
   SignStatus
 } from '../../utils'
 import { useSigitMeta } from '../../hooks/useSigitMeta'
@@ -22,10 +24,10 @@ import {
 import { getExtensionIconLabel } from '../getExtensionIconLabel'
 import { useSelector } from 'react-redux'
 import { State } from '../../store/rootReducer'
+import { TooltipChild } from '../TooltipChild'
 import { DisplaySigner } from '../DisplaySigner'
 import { Meta } from '../../types'
 import { extractFileExtensions } from '../../utils/file'
-import { UserAvatar } from '../UserAvatar'
 
 interface UsersDetailsProps {
   meta: Meta
@@ -34,7 +36,6 @@ interface UsersDetailsProps {
 export const UsersDetails = ({ meta }: UsersDetailsProps) => {
   const {
     submittedBy,
-    exportedBy,
     signers,
     viewers,
     fileHashes,
@@ -46,6 +47,11 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
     isValid
   } = useSigitMeta(meta)
   const { usersPubkey } = useSelector((state: State) => state.auth)
+  const profiles = useSigitProfiles([
+    ...(submittedBy ? [submittedBy] : []),
+    ...signers,
+    ...viewers
+  ])
   const userCanSign =
     typeof usersPubkey !== 'undefined' &&
     signers.includes(hexToNpub(usersPubkey))
@@ -57,12 +63,31 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
       <div className={styles.section}>
         <p>Signers</p>
         <div className={styles.users}>
-          {submittedBy && (
+          {submittedBy &&
-            <DisplaySigner
+            (function () {
-              status={isValid ? SignStatus.Signed : SignStatus.Invalid}
+              const profile = profiles[submittedBy]
-              pubkey={submittedBy}
+              return (
-            />
+                <Tooltip
-          )}
+                  key={submittedBy}
+                  title={
+                    profile?.display_name ||
+                    profile?.name ||
+                    shorten(hexToNpub(submittedBy))
+                  }
+                  placement="top"
+                  arrow
+                  disableInteractive
+                >
+                  <TooltipChild>
+                    <DisplaySigner
+                      status={isValid ? SignStatus.Signed : SignStatus.Invalid}
+                      profile={profile}
+                      pubkey={submittedBy}
+                    />
+                  </TooltipChild>
+                </Tooltip>
+              )
+            })()}
 
           {submittedBy && signers.length ? (
             <Divider orientation="vertical" flexItem />
@@ -71,12 +96,26 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
           <UserAvatarGroup max={20}>
             {signers.map((signer) => {
               const pubkey = npubToHex(signer)!
+              const profile = profiles[pubkey]
+
               return (
-                <DisplaySigner
+                <Tooltip
-                  key={pubkey}
+                  key={signer}
-                  status={signersStatus[signer]}
+                  title={
-                  pubkey={pubkey}
+                    profile?.display_name || profile?.name || shorten(pubkey)
-                />
+                  }
+                  placement="top"
+                  arrow
+                  disableInteractive
+                >
+                  <TooltipChild>
+                    <DisplaySigner
+                      status={signersStatus[signer]}
+                      profile={profile}
+                      pubkey={pubkey}
+                    />
+                  </TooltipChild>
+                </Tooltip>
               )
             })}
           </UserAvatarGroup>
@@ -89,28 +128,34 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
               <UserAvatarGroup max={20}>
                 {viewers.map((signer) => {
                   const pubkey = npubToHex(signer)!
+                  const profile = profiles[pubkey]
 
                   return (
-                    <DisplaySigner
+                    <Tooltip
-                      key={pubkey}
+                      key={signer}
-                      status={SignStatus.Viewer}
+                      title={
-                      pubkey={pubkey}
+                        profile?.display_name ||
-                    />
+                        profile?.name ||
+                        shorten(pubkey)
+                      }
+                      placement="top"
+                      arrow
+                      disableInteractive
+                    >
+                      <TooltipChild>
+                        <DisplaySigner
+                          status={SignStatus.Viewer}
+                          profile={profile}
+                          pubkey={pubkey}
+                        />
+                      </TooltipChild>
+                    </Tooltip>
                   )
                 })}
               </UserAvatarGroup>
             </div>
           </>
         )}
-
-        {exportedBy && (
-          <>
-            <p>Exported By</p>
-            <div className={styles.users}>
-              <UserAvatar pubkey={exportedBy} />
-            </div>
-          </>
-        )}
       </div>
       <div className={styles.section}>
         <p>Details</p>

src/controllers/AuthController.ts

@@ -25,7 +25,7 @@ export class AuthController {
 
   constructor() {
     this.nostrController = NostrController.getInstance()
-    this.metadataController = MetadataController.getInstance()
+    this.metadataController = new MetadataController()
   }
 
   /**

src/controllers/MetadataController.ts

@@ -22,7 +22,6 @@ import {
 import { DEFAULT_LOOK_UP_RELAY_LIST } from '../utils/const'
 
 export class MetadataController extends EventEmitter {
-  private static instance: MetadataController
   private nostrController: NostrController
   private specialMetadataRelay = 'wss://purplepag.es'
   private pendingFetches = new Map<string, Promise<Event | null>>() // Track pending fetches
@@ -32,13 +31,6 @@ export class MetadataController extends EventEmitter {
     this.nostrController = NostrController.getInstance()
   }
 
-  public static getInstance(): MetadataController {
-    if (!MetadataController.instance) {
-      MetadataController.instance = new MetadataController()
-    }
-    return MetadataController.instance
-  }
-
   /**
    * Asynchronously checks for more recent metadata events authored by a specific key.
    * If a more recent metadata event is found, it is handled and returned.
@@ -127,6 +119,7 @@ export class MetadataController extends EventEmitter {
       // Check if the cached metadata is older than one day
       if (isOlderThanOneDay(cachedMetadataEvent.cachedAt)) {
         // If older than one week, find the metadata from relays in background
+
         this.checkForMoreRecentMetadata(hexKey, cachedMetadataEvent.event)
       }
 

src/hooks/useProfileMetadata.tsx

@@ -1,46 +0,0 @@
-import { useEffect, useState } from 'react'
-import { ProfileMetadata } from '../types/profile'
-import { MetadataController } from '../controllers/MetadataController'
-import { Event, kinds } from 'nostr-tools'
-
-export const useProfileMetadata = (pubkey: string) => {
-  const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
-
-  useEffect(() => {
-    const metadataController = MetadataController.getInstance()
-    const handleMetadataEvent = (event: Event) => {
-      const metadataContent =
-        metadataController.extractProfileMetadataContent(event)
-
-      if (metadataContent) {
-        setProfileMetadata(metadataContent)
-      }
-    }
-
-    if (pubkey) {
-      metadataController.on(pubkey, (kind: number, event: Event) => {
-        if (kind === kinds.Metadata) {
-          handleMetadataEvent(event)
-        }
-      })
-
-      metadataController
-        .findMetadata(pubkey)
-        .then((metadataEvent) => {
-          if (metadataEvent) handleMetadataEvent(metadataEvent)
-        })
-        .catch((err) => {
-          console.error(
-            `error occurred in finding metadata for: ${pubkey}`,
-            err
-          )
-        })
-    }
-
-    return () => {
-      metadataController.off(pubkey, handleMetadataEvent)
-    }
-  }, [pubkey])
-
-  return profileMetadata
-}

src/hooks/useSigitMeta.tsx

@@ -33,10 +33,6 @@ export interface FlatMeta
   // Remove pubkey and use submittedBy as `npub1${string}`
   submittedBy?: `npub1${string}`
 
-  // Optional field only present on exported sigits
-  // Exporting adds user's pubkey
-  exportedBy?: `npub1${string}`
-
   // Remove created_at and replace with createdAt
   createdAt?: number
 
@@ -72,7 +68,6 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
   const [tags, setTags] = useState<string[][]>()
   const [createdAt, setCreatedAt] = useState<number>()
   const [submittedBy, setSubmittedBy] = useState<`npub1${string}`>() // submittedBy, pubkey from nostr event
-  const [exportedBy, setExportedBy] = useState<`npub1${string}`>() // pubkey from export signature nostr event
   const [id, setId] = useState<string>()
   const [sig, setSig] = useState<string>()
 
@@ -104,18 +99,6 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
     if (!meta) return
     ;(async function () {
       try {
-        if (meta.exportSignature) {
-          const exportSignatureEvent = await parseNostrEvent(
-            meta.exportSignature
-          )
-          if (
-            verifyEvent(exportSignatureEvent) &&
-            exportSignatureEvent.pubkey
-          ) {
-            setExportedBy(exportSignatureEvent.pubkey as `npub1${string}`)
-          }
-        }
-
         const createSignatureEvent = await parseNostrEvent(meta.createSignature)
 
         const { kind, tags, created_at, pubkey, id, sig, content } =
@@ -282,7 +265,6 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
     tags,
     createdAt,
     submittedBy,
-    exportedBy,
     id,
     sig,
     signers,

src/hooks/useSigitProfiles.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react'
+import { ProfileMetadata } from '../types'
+import { MetadataController } from '../controllers'
+import { npubToHex } from '../utils'
+import { Event, kinds } from 'nostr-tools'
+
+/**
+ * Extracts profiles from metadata events
+ * @param pubkeys Array of npubs to check
+ * @returns ProfileMetadata
+ */
+export const useSigitProfiles = (
+  pubkeys: `npub1${string}`[]
+): { [key: string]: ProfileMetadata } => {
+  const [profileMetadata, setProfileMetadata] = useState<{
+    [key: string]: ProfileMetadata
+  }>({})
+
+  useEffect(() => {
+    if (pubkeys.length) {
+      const metadataController = new MetadataController()
+
+      // Remove duplicate keys
+      const users = new Set<string>([...pubkeys])
+
+      const handleMetadataEvent = (key: string) => (event: Event) => {
+        const metadataContent =
+          metadataController.extractProfileMetadataContent(event)
+
+        if (metadataContent) {
+          setProfileMetadata((prev) => ({
+            ...prev,
+            [key]: metadataContent
+          }))
+        }
+      }
+
+      users.forEach((user) => {
+        const hexKey = npubToHex(user)
+        if (hexKey && !(hexKey in profileMetadata)) {
+          metadataController.on(hexKey, (kind: number, event: Event) => {
+            if (kind === kinds.Metadata) {
+              handleMetadataEvent(hexKey)(event)
+            }
+          })
+
+          metadataController
+            .findMetadata(hexKey)
+            .then((metadataEvent) => {
+              if (metadataEvent) handleMetadataEvent(hexKey)(metadataEvent)
+            })
+            .catch((err) => {
+              console.error(
+                `error occurred in finding metadata for: ${user}`,
+                err
+              )
+            })
+        }
+      })
+
+      return () => {
+        users.forEach((key) => {
+          metadataController.off(key, handleMetadataEvent(key))
+        })
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [pubkeys])
+
+  return profileMetadata
+}

src/layouts/Main.tsx

@@ -38,7 +38,7 @@ export const MainLayout = () => {
   const hasSubscribed = useRef(false)
 
   useEffect(() => {
-    const metadataController = MetadataController.getInstance()
+    const metadataController = new MetadataController()
 
     const logout = () => {
       dispatch(

src/pages/create/index.tsx

@@ -36,26 +36,44 @@ import {
   npubToHex,
   queryNip05,
   sendNotification,
+  shorten,
   signEventForMetaFile,
   updateUsersAppData,
-  uploadToFileStorage,
+  uploadToFileStorage
-  DEFAULT_TOOLBOX
 } from '../../utils'
 import { Container } from '../../components/Container'
 import fileListStyles from '../../components/FileList/style.module.scss'
-import { DrawTool } from '../../types/drawing'
+import { DrawTool, MarkType } from '../../types/drawing'
 import { DrawPDFFields } from '../../components/DrawPDFFields'
 import { Mark } from '../../types/mark.ts'
 import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import {
+  fa1,
+  faBriefcase,
+  faCalendarDays,
+  faCheckDouble,
+  faCircleDot,
+  faClock,
+  faCreditCard,
   faEllipsis,
   faEye,
   faFile,
   faFileCirclePlus,
   faGripLines,
+  faHeading,
+  faIdCard,
+  faImage,
+  faPaperclip,
   faPen,
+  faPhone,
   faPlus,
+  faSignature,
+  faSquareCaretDown,
+  faSquareCheck,
+  faStamp,
+  faT,
+  faTableCellsLarge,
   faToolbox,
   faTrash,
   faUpload
@@ -95,8 +113,6 @@ export const CreatePage = () => {
   const [error, setError] = useState<string>()
 
   const [users, setUsers] = useState<User[]>([])
-  const signers = users.filter((u) => u.role === UserRole.signer)
-  const viewers = users.filter((u) => u.role === UserRole.viewer)
 
   const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
 
@@ -108,7 +124,116 @@ export const CreatePage = () => {
   const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
 
   const [selectedTool, setSelectedTool] = useState<DrawTool>()
-  const [toolbox] = useState<DrawTool[]>(DEFAULT_TOOLBOX)
+  const [toolbox] = useState<DrawTool[]>([
+    {
+      identifier: MarkType.TEXT,
+      icon: faT,
+      label: 'Text',
+      active: true
+    },
+    {
+      identifier: MarkType.SIGNATURE,
+      icon: faSignature,
+      label: 'Signature',
+      active: false
+    },
+    {
+      identifier: MarkType.JOBTITLE,
+      icon: faBriefcase,
+      label: 'Job Title',
+      active: false
+    },
+    {
+      identifier: MarkType.FULLNAME,
+      icon: faIdCard,
+      label: 'Full Name',
+      active: false
+    },
+    {
+      identifier: MarkType.INITIALS,
+      icon: faHeading,
+      label: 'Initials',
+      active: false
+    },
+    {
+      identifier: MarkType.DATETIME,
+      icon: faClock,
+      label: 'Date Time',
+      active: false
+    },
+    {
+      identifier: MarkType.DATE,
+      icon: faCalendarDays,
+      label: 'Date',
+      active: false
+    },
+    {
+      identifier: MarkType.NUMBER,
+      icon: fa1,
+      label: 'Number',
+      active: false
+    },
+    {
+      identifier: MarkType.IMAGES,
+      icon: faImage,
+      label: 'Images',
+      active: false
+    },
+    {
+      identifier: MarkType.CHECKBOX,
+      icon: faSquareCheck,
+      label: 'Checkbox',
+      active: false
+    },
+    {
+      identifier: MarkType.MULTIPLE,
+      icon: faCheckDouble,
+      label: 'Multiple',
+      active: false
+    },
+    {
+      identifier: MarkType.FILE,
+      icon: faPaperclip,
+      label: 'File',
+      active: false
+    },
+    {
+      identifier: MarkType.RADIO,
+      icon: faCircleDot,
+      label: 'Radio',
+      active: false
+    },
+    {
+      identifier: MarkType.SELECT,
+      icon: faSquareCaretDown,
+      label: 'Select',
+      active: false
+    },
+    {
+      identifier: MarkType.CELLS,
+      icon: faTableCellsLarge,
+      label: 'Cells',
+      active: false
+    },
+    {
+      identifier: MarkType.STAMP,
+      icon: faStamp,
+      label: 'Stamp',
+      active: false
+    },
+    {
+      identifier: MarkType.PAYMENT,
+      icon: faCreditCard,
+      label: 'Payment',
+      active: false
+    },
+    {
+      identifier: MarkType.PHONE,
+      icon: faPhone,
+      label: 'Phone',
+      active: false
+    }
+  ])
 
   /**
    * Changes the drawing tool
@@ -127,7 +252,7 @@ export const CreatePage = () => {
   useEffect(() => {
     users.forEach((user) => {
       if (!(user.pubkey in metadata)) {
-        const metadataController = MetadataController.getInstance()
+        const metadataController = new MetadataController()
 
         const handleMetadataEvent = (event: Event) => {
           const metadataContent =
@@ -522,11 +647,6 @@ export const CreatePage = () => {
     }
 
     saveAs(finalZipFile, `request-${unixNow()}.sigit.zip`)
-
-    // If user is the next signer, we can navigate directly to sign page
-    if (signers[0].pubkey === usersPubkey) {
-      navigate(appPrivateRoutes.sign, { state: { uploadedZip: finalZipFile } })
-    }
     setIsLoading(false)
   }
 
@@ -552,6 +672,9 @@ export const CreatePage = () => {
     },
     zipUrl: string
   ) => {
+    const signers = users.filter((user) => user.role === UserRole.signer)
+    const viewers = users.filter((user) => user.role === UserRole.viewer)
+
     const content: CreateSignatureEventContent = {
       signers: signers.map((signer) => hexToNpub(signer.pubkey)),
       viewers: viewers.map((viewer) => hexToNpub(viewer.pubkey)),
@@ -580,6 +703,9 @@ export const CreatePage = () => {
 
   // Send notifications to signers and viewers
   const sendNotifications = (meta: Meta) => {
+    const signers = users.filter((user) => user.role === UserRole.signer)
+    const viewers = users.filter((user) => user.role === UserRole.viewer)
+
     // no need to send notification to self so remove it from the list
     const receivers = (
       signers.length > 0
@@ -661,7 +787,7 @@ export const CreatePage = () => {
             toast.error('Failed to publish notifications')
           })
 
-        navigate(appPrivateRoutes.sign, { state: { meta } })
+        navigate(appPrivateRoutes.sign, { state: { meta: meta } })
       } else {
         const zip = new JSZip()
 
@@ -788,6 +914,7 @@ export const CreatePage = () => {
             <div className={styles.flexWrap}>
               <div className={`${styles.paperGroup} ${styles.users}`}>
                 <DisplayUser
+                  metadata={metadata}
                   users={users}
                   handleUserRoleChange={handleUserRoleChange}
                   handleRemoveUser={handleRemoveUser}
@@ -831,6 +958,9 @@ export const CreatePage = () => {
                   <FontAwesomeIcon icon={faPlus} />
                 </Button>
               </div>
+              <Button onClick={handleCreate} variant="contained">
+                Publish
+              </Button>
 
               <div className={`${styles.paperGroup} ${styles.toolbox}`}>
                 {toolbox.map((drawTool: DrawTool, index: number) => {
@@ -857,10 +987,6 @@ export const CreatePage = () => {
                 })}
               </div>
 
-              <Button onClick={handleCreate} variant="contained">
-                Publish
-              </Button>
-
               {!!error && (
                 <FormHelperText error={!!error}>{error}</FormHelperText>
               )}
@@ -884,6 +1010,7 @@ export const CreatePage = () => {
 }
 
 type DisplayUsersProps = {
+  metadata: { [key: string]: ProfileMetadata }
   users: User[]
   handleUserRoleChange: (role: UserRole, pubkey: string) => void
   handleRemoveUser: (pubkey: string) => void
@@ -891,6 +1018,7 @@ type DisplayUsersProps = {
 }
 
 const DisplayUser = ({
+  metadata,
   users,
   handleUserRoleChange,
   handleRemoveUser,
@@ -904,6 +1032,7 @@ const DisplayUser = ({
           .map((user, index) => (
             <SignerCounterpart
               key={`signer-${user.pubkey}`}
+              userMeta={metadata[user.pubkey]}
               user={user}
               index={index}
               moveSigner={moveSigner}
@@ -918,6 +1047,7 @@ const DisplayUser = ({
           return (
             <div className={styles.user} key={`viewer-${user.pubkey}`}>
               <Counterpart
+                userMeta={metadata[user.pubkey]}
                 user={user}
                 handleUserRoleChange={handleUserRoleChange}
                 handleRemoveUser={handleRemoveUser}
@@ -936,6 +1066,7 @@ interface DragItem {
 }
 
 type CounterpartProps = {
+  userMeta: ProfileMetadata
   user: User
   handleUserRoleChange: (role: UserRole, pubkey: string) => void
   handleRemoveUser: (pubkey: string) => void
@@ -947,6 +1078,7 @@ type SignerCounterpartProps = CounterpartProps & {
 }
 
 const SignerCounterpart = ({
+  userMeta,
   user,
   index,
   moveSigner,
@@ -1039,6 +1171,7 @@ const SignerCounterpart = ({
       <FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
       <Counterpart
         user={user}
+        userMeta={userMeta}
         handleRemoveUser={handleRemoveUser}
         handleUserRoleChange={handleUserRoleChange}
       />
@@ -1047,6 +1180,7 @@ const SignerCounterpart = ({
 }
 
 const Counterpart = ({
+  userMeta,
   user,
   handleUserRoleChange,
   handleRemoveUser
@@ -1054,7 +1188,15 @@ const Counterpart = ({
   return (
     <>
       <div className={styles.avatar}>
-        <UserAvatar pubkey={user.pubkey} isNameVisible={true} />
+        <UserAvatar
+          pubkey={user.pubkey}
+          name={
+            userMeta?.display_name ||
+            userMeta?.name ||
+            shorten(hexToNpub(user.pubkey))
+          }
+          image={userMeta?.picture}
+        />
       </div>
       <Tooltip title="Toggle User Role" arrow disableInteractive>
         <Button

src/pages/nostr/index.tsx

@@ -18,16 +18,12 @@ import {
 } from '../../store/actions'
 import { LoginMethods } from '../../store/auth/types'
 import { Dispatch } from '../../store/store'
-import { npubToHex, queryNip05, timeout } from '../../utils'
+import { npubToHex, queryNip05 } from '../../utils'
 import { hexToBytes } from '@noble/hashes/utils'
 import { NIP05_REGEX } from '../../constants'
 
 import styles from './styles.module.scss'
 
-import { TimeoutError } from '../../types/errors/TimeoutError'
-const EXTENSION_LOGIN_DELAY_SECONDS = 5
-const EXTENSION_LOGIN_TIMEOUT_SECONDS = EXTENSION_LOGIN_DELAY_SECONDS + 55
-
 export const Nostr = () => {
   const [searchParams] = useSearchParams()
 
@@ -35,12 +31,11 @@ export const Nostr = () => {
   const navigate = useNavigate()
 
   const authController = new AuthController()
-  const metadataController = MetadataController.getInstance()
+  const metadataController = new MetadataController()
   const nostrController = NostrController.getInstance()
 
   const [isLoading, setIsLoading] = useState(false)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
-  const [isExtensionSlow, setIsExtensionSlow] = useState(false)
   const [inputValue, setInputValue] = useState('')
   const [authUrl, setAuthUrl] = useState<string>()
 
@@ -77,43 +72,27 @@ export const Nostr = () => {
   }
 
   const loginWithExtension = async () => {
-    let waitTimeout: number | undefined
+    setIsLoading(true)
-    try {
+    setLoadingSpinnerDesc('Capturing pubkey from nostr extension')
-      // Wait EXTENSION_LOGIN_DELAY_SECONDS before showing extension delay message
-      waitTimeout = window.setTimeout(() => {
-        setIsExtensionSlow(true)
-      }, EXTENSION_LOGIN_DELAY_SECONDS * 1000)
 
-      setIsLoading(true)
+    nostrController
-      setLoadingSpinnerDesc('Capturing pubkey from nostr extension')
+      .capturePublicKey()
+      .then(async (pubkey) => {
+        dispatch(updateLoginMethod(LoginMethods.extension))
 
-      const pubkey = await nostrController.capturePublicKey()
+        setLoadingSpinnerDesc('Authenticating and finding metadata')
-      dispatch(updateLoginMethod(LoginMethods.extension))
+        const redirectPath =
+          await authController.authAndGetMetadataAndRelaysMap(pubkey)
 
-      setLoadingSpinnerDesc('Authenticating and finding metadata')
+        if (redirectPath) navigateAfterLogin(redirectPath)
-      const redirectPath = await Promise.race([
+      })
-        authController.authAndGetMetadataAndRelaysMap(pubkey),
+      .catch((err) => {
-        timeout(EXTENSION_LOGIN_TIMEOUT_SECONDS * 1000)
+        toast.error('Error capturing public key from nostr extension: ' + err)
-      ])
+      })
-
+      .finally(() => {
-      if (redirectPath) {
+        setIsLoading(false)
-        navigateAfterLogin(redirectPath)
+        setLoadingSpinnerDesc('')
-      }
+      })
-    } catch (error) {
-      if (error instanceof TimeoutError) {
-        // Just log the error, no toast, user has already been notified with the loading screen
-        console.error("Extension didn't respond in time")
-      } else {
-        toast.error('Error capturing public key from nostr extension: ' + error)
-      }
-    } finally {
-      // Clear the wait timeout so we don't change the state unnecessarily
-      window.clearTimeout(waitTimeout)
-
-      setIsLoading(false)
-      setLoadingSpinnerDesc('')
-      setIsExtensionSlow(false)
-    }
   }
 
   /**
@@ -375,33 +354,7 @@ export const Nostr = () => {
 
   return (
     <>
-      {isLoading && (
+      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-        <LoadingSpinner desc={loadingSpinnerDesc}>
-          {isExtensionSlow && (
-            <>
-              <p>
-                Your nostr extension is not responding. Check these
-                alternatives:{' '}
-                <a href="https://github.com/aljazceru/awesome-nostr?tab=readme-ov-file#nip-07-browser-extensions">
-                  https://github.com/aljazceru/awesome-nostr
-                </a>
-              </p>
-              <br />
-              <Button
-                fullWidth
-                variant="contained"
-                onClick={() => {
-                  setLoadingSpinnerDesc('')
-                  setIsLoading(false)
-                  setIsExtensionSlow(false)
-                }}
-              >
-                Close
-              </Button>
-            </>
-          )}
-        </LoadingSpinner>
-      )}
 
       {isNostrExtensionAvailable && (
         <>

src/pages/profile/index.tsx

@@ -27,7 +27,7 @@ export const ProfilePage = () => {
 
   const { npub } = useParams()
 
-  const metadataController = useMemo(() => MetadataController.getInstance(), [])
+  const metadataController = useMemo(() => new MetadataController(), [])
 
   const [pubkey, setPubkey] = useState<string>()
   const [nostrJoiningBlock, setNostrJoiningBlock] =

src/pages/settings/profile/index.tsx

@@ -12,7 +12,7 @@ import {
   useTheme
 } from '@mui/material'
 import { UnsignedEvent, nip19, kinds, VerifiedEvent, Event } from 'nostr-tools'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useMemo, useRef, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { MetadataController, NostrController } from '../../../controllers'
@@ -41,7 +41,7 @@ export const ProfileSettingsPage = () => {
 
   const dispatch: Dispatch = useDispatch()
 
-  const metadataController = MetadataController.getInstance()
+  const metadataController = useMemo(() => new MetadataController(), [])
   const nostrController = NostrController.getInstance()
 
   const [pubkey, setPubkey] = useState<string>()

src/pages/sign/index.tsx

@@ -33,8 +33,7 @@ import {
   sendNotification,
   signEventForMetaFile,
   updateUsersAppData,
-  findOtherUserMarks,
+  findOtherUserMarks
-  timeout
 } from '../../utils'
 import { Container } from '../../components/Container'
 import { DisplayMeta } from './internal/displayMeta'
@@ -277,10 +276,17 @@ export const SignPage = () => {
           setAuthUrl(url)
         })
 
-        // decrypt the encryptionKey, with timeout (duration = 60 seconds)
+        // Set up timeout promise to handle encryption timeout
+        const timeoutPromise = new Promise<never>((_, reject) => {
+          setTimeout(() => {
+            reject(new Error('Timeout occurred'))
+          }, 60000) // Timeout duration = 60 seconds
+        })
+
+        // decrypt the encryptionKey, with timeout
         const encryptionKey = await Promise.race([
           nostrController.nip04Decrypt(sender, key),
-          timeout(60000)
+          timeoutPromise
         ])
           .then((res) => {
             return res
@@ -462,20 +468,20 @@ export const SignPage = () => {
     const fileNames = Object.values(zip.files)
       .filter((entry) => entry.name.startsWith('files/') && !entry.dir)
       .map((entry) => entry.name)
+      .map((entry) => entry.replace(/^files\//, ''))
 
-    for (const zipFilePath of fileNames) {
+    // 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 arrayBuffer = await readContentOfZipEntry(
         zip,
-        zipFilePath,
+        fileName,
         'arraybuffer'
       )
 
-      const fileName = zipFilePath.replace(/^files\//, '')
       if (arrayBuffer) {
         files[fileName] = await convertToSigitFile(arrayBuffer, fileName)
 
-        // generate hashes for all entries in files folder of zipArchive
-        // these hashes can be used to verify the originality of files
         const hash = await getHash(arrayBuffer)
         if (hash) {
           fileHashes[fileName] = hash

src/pages/sign/internal/displayMeta.tsx

@@ -32,7 +32,7 @@ import { useState, useEffect } from 'react'
 import { toast } from 'react-toastify'
 import { UserAvatar } from '../../../components/UserAvatar'
 import { MetadataController } from '../../../controllers'
-import { npubToHex, hexToNpub, parseJson } from '../../../utils'
+import { npubToHex, shorten, hexToNpub, parseJson } from '../../../utils'
 import styles from '../style.module.scss'
 import { SigitFile } from '../../../utils/file'
 
@@ -105,7 +105,7 @@ export const DisplayMeta = ({
   }, [signers, viewers])
 
   useEffect(() => {
-    const metadataController = MetadataController.getInstance()
+    const metadataController = new MetadataController()
 
     const hexKeys: string[] = [
       npubToHex(submittedBy)!,
@@ -167,7 +167,20 @@ export const DisplayMeta = ({
         <Typography variant="h6" sx={{ color: textColor }}>
           Submitted By
         </Typography>
-        <UserAvatar pubkey={submittedBy} isNameVisible={true} />
+        {(function () {
+          const profile = metadata[submittedBy]
+          return (
+            <UserAvatar
+              pubkey={submittedBy}
+              name={
+                profile?.display_name ||
+                profile?.name ||
+                shorten(hexToNpub(submittedBy))
+              }
+              image={profile?.picture}
+            />
+          )
+        })()}
       </ListItem>
       <ListItem
         sx={{
@@ -267,12 +280,14 @@ type DisplayUserProps = {
 const DisplayUser = ({
   meta,
   user,
+  metadata,
   signedBy,
   nextSigner,
   getPrevSignersSig
 }: DisplayUserProps) => {
   const theme = useTheme()
 
+  const userMeta = metadata[user.pubkey]
   const [userStatus, setUserStatus] = useState<UserStatus>(UserStatus.Pending)
   const [prevSignatureStatus, setPreviousSignatureStatus] =
     useState<PrevSignatureValidationEnum>(PrevSignatureValidationEnum.Pending)
@@ -355,7 +370,15 @@ const DisplayUser = ({
   return (
     <TableRow>
       <TableCell className={styles.tableCell}>
-        <UserAvatar pubkey={user.pubkey} isNameVisible={true} />
+        <UserAvatar
+          pubkey={user.pubkey}
+          name={
+            userMeta?.display_name ||
+            userMeta?.name ||
+            shorten(hexToNpub(user.pubkey))
+          }
+          image={userMeta?.picture}
+        />
       </TableCell>
       <TableCell className={styles.tableCell}>{user.role}</TableCell>
       <TableCell>

src/pages/verify/index.tsx

@@ -1,11 +1,16 @@
-import { Box, Button, Typography } from '@mui/material'
+import { Box, Button, Tooltip, Typography } from '@mui/material'
 import JSZip from 'jszip'
 import { MuiFileInput } from 'mui-file-input'
+import { Event, verifyEvent } from 'nostr-tools'
 import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { NostrController } from '../../controllers'
-import { DocSignatureEvent, Meta } from '../../types'
+import {
+  CreateSignatureEventContent,
+  DocSignatureEvent,
+  Meta
+} from '../../types'
 import {
   decryptArrayBuffer,
   extractMarksFromSignedMeta,
@@ -15,6 +20,7 @@ import {
   parseJson,
   readContentOfZipEntry,
   signEventForMetaFile,
+  shorten,
   getCurrentUserFiles
 } from '../../utils'
 import styles from './style.module.scss'
@@ -22,6 +28,7 @@ import { useLocation } from 'react-router-dom'
 import axios from 'axios'
 import {
   addMarks,
+  convertToPdfBlob,
   FONT_SIZE,
   FONT_TYPE,
   groupMarksByFileNamePage,
@@ -35,6 +42,9 @@ import { Container } from '../../components/Container'
 import { useSigitMeta } from '../../hooks/useSigitMeta.tsx'
 import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
 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'
@@ -153,26 +163,12 @@ const SlimPdfView = ({
 
 export const VerifyPage = () => {
   const location = useLocation()
-  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
-
-  const nostrController = NostrController.getInstance()
-
-  const [isLoading, setIsLoading] = useState(false)
-  const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
-
   /**
    * uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains meta.json
    * meta will be received in navigation from create & home page in online mode
    */
-  const { uploadedZip, meta: metaInNavState } = location.state || {}
+  const { uploadedZip, meta } = location.state || {}
-  const [selectedFile, setSelectedFile] = useState<File | null>(null)
-  useEffect(() => {
-    if (uploadedZip) {
-      setSelectedFile(uploadedZip)
-    }
-  }, [uploadedZip])
 
-  const [meta, setMeta] = useState<Meta>(metaInNavState)
   const {
     submittedBy,
     zipUrl,
@@ -183,22 +179,44 @@ export const VerifyPage = () => {
     parsedSignatureEvents
   } = useSigitMeta(meta)
 
-  const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
+  const profiles = useSigitProfiles([
+    ...(submittedBy ? [submittedBy] : []),
+    ...signers,
+    ...viewers
+  ])
+
+  const [isLoading, setIsLoading] = useState(false)
+  const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
+
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
 
-  const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
   const [currentFileHashes, setCurrentFileHashes] = useState<{
     [key: string]: string | null
   }>({})
+  const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
+  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, currentFileHashes, fileHashes)
+      const tmp = getCurrentUserFiles(files, fileHashes, signatureFileHashes)
       setCurrentFile(tmp[0])
     }
-  }, [currentFileHashes, fileHashes, files])
+  }, [signatureFileHashes, fileHashes, files])
+
+  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
+  const nostrController = NostrController.getInstance()
 
   useEffect(() => {
-    if (metaInNavState && encryptionKey) {
+    if (uploadedZip) {
+      setSelectedFile(uploadedZip)
+    } else if (meta && encryptionKey) {
       const processSigit = async () => {
         setIsLoading(true)
 
@@ -283,7 +301,7 @@ export const VerifyPage = () => {
 
       processSigit()
     }
-  }, [encryptionKey, metaInNavState, zipUrl])
+  }, [encryptionKey, meta, uploadedZip, zipUrl])
 
   const handleVerify = async () => {
     if (!selectedFile) return
@@ -297,7 +315,6 @@ export const VerifyPage = () => {
 
     if (!zip) return
 
-    const files: { [filename: string]: SigitFile } = {}
     const fileHashes: { [key: string]: string | null } = {}
     const fileNames = Object.values(zip.files)
       .filter((entry) => entry.name.startsWith('files/') && !entry.dir)
@@ -305,27 +322,24 @@ export const VerifyPage = () => {
 
     // generate hashes for all entries in files folder of zipArchive
     // these hashes can be used to verify the originality of files
-    for (const zipFilePath of fileNames) {
+    for (const fileName of fileNames) {
       const arrayBuffer = await readContentOfZipEntry(
         zip,
-        zipFilePath,
+        fileName,
         'arraybuffer'
       )
 
-      const fileName = zipFilePath.replace(/^files\//, '')
       if (arrayBuffer) {
-        files[fileName] = await convertToSigitFile(arrayBuffer, fileName)
         const hash = await getHash(arrayBuffer)
 
         if (hash) {
-          fileHashes[fileName] = hash
+          fileHashes[fileName.replace(/^files\//, '')] = hash
         }
       } else {
-        fileHashes[fileName] = null
+        fileHashes[fileName.replace(/^files\//, '')] = null
       }
     }
 
-    setFiles(files)
     setCurrentFileHashes(fileHashes)
 
     setLoadingSpinnerDesc('Parsing meta.json')
@@ -354,7 +368,43 @@ export const VerifyPage = () => {
 
     if (!parsedMetaJson) return
 
-    setMeta(parsedMetaJson)
+    const createSignatureEvent = await parseJson<Event>(
+      parsedMetaJson.createSignature
+    ).catch((err) => {
+      console.log('err in parsing the createSignature event:>> ', err)
+      toast.error(
+        err.message || 'error occurred in parsing the create signature event'
+      )
+      setIsLoading(false)
+      return null
+    })
+
+    if (!createSignatureEvent) return
+
+    const isValidCreateSignature = verifyEvent(createSignatureEvent)
+
+    if (!isValidCreateSignature) {
+      toast.error('Create signature is invalid')
+      setIsLoading(false)
+      return
+    }
+
+    const createSignatureContent = await parseJson<CreateSignatureEventContent>(
+      createSignatureEvent.content
+    ).catch((err) => {
+      console.log(
+        `err in parsing the createSignature event's content :>> `,
+        err
+      )
+      toast.error(
+        err.message ||
+          `error occurred in parsing the create signature event's content`
+      )
+      setIsLoading(false)
+      return null
+    })
+
+    if (!createSignatureContent) return
 
     setIsLoading(false)
   }
@@ -398,7 +448,8 @@ export const VerifyPage = () => {
     for (const [fileName, file] of Object.entries(files)) {
       if (file.isPdf) {
         // Draw marks into PDF file and generate a brand new blob
-        const blob = await addMarks(file, marksByPage[fileName])
+        const pages = await addMarks(file, marksByPage[fileName])
+        const blob = await convertToPdfBlob(pages)
         zip.file(`files/${fileName}`, blob)
       } else {
         zip.file(`files/${fileName}`, file)
@@ -428,6 +479,47 @@ export const VerifyPage = () => {
     setIsLoading(false)
   }
 
+  const displayExportedBy = () => {
+    if (!meta || !meta.exportSignature) return null
+
+    const exportSignatureString = meta.exportSignature
+
+    try {
+      const exportSignatureEvent = JSON.parse(exportSignatureString) as Event
+
+      if (verifyEvent(exportSignatureEvent)) {
+        const exportedBy = exportSignatureEvent.pubkey
+        const profile = profiles[exportedBy]
+        return (
+          <Tooltip
+            title={
+              profile?.display_name ||
+              profile?.name ||
+              shorten(hexToNpub(exportedBy))
+            }
+            placement="top"
+            arrow
+            disableInteractive
+          >
+            <TooltipChild>
+              <UserAvatar pubkey={exportedBy} image={profile?.picture} />
+            </TooltipChild>
+          </Tooltip>
+        )
+      } 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} />}
@@ -462,19 +554,22 @@ export const VerifyPage = () => {
         {meta && (
           <StickySideColumns
             left={
-              currentFile !== null && (
+              <>
-                <FileList
+                {currentFile !== null && (
-                  files={getCurrentUserFiles(
+                  <FileList
-                    files,
+                    files={getCurrentUserFiles(
-                    currentFileHashes,
+                      files,
-                    fileHashes
+                      currentFileHashes,
-                  )}
+                      signatureFileHashes
-                  currentFile={currentFile}
+                    )}
-                  setCurrentFile={setCurrentFile}
+                    currentFile={currentFile}
-                  handleDownload={handleExport}
+                    setCurrentFile={setCurrentFile}
-                  downloadLabel="Download Sigit"
+                    handleDownload={handleExport}
-                />
+                    downloadLabel="Download Sigit"
-              )
+                  />
+                )}
+                {displayExportedBy()}
+              </>
             }
             right={<UsersDetails meta={meta} />}
             leftIcon={faFileDownload}
@@ -483,7 +578,11 @@ export const VerifyPage = () => {
           >
             <SlimPdfView
               currentFile={currentFile}
-              files={getCurrentUserFiles(files, currentFileHashes, fileHashes)}
+              files={getCurrentUserFiles(
+                files,
+                currentFileHashes,
+                signatureFileHashes
+              )}
               parsedSignatureEvents={parsedSignatureEvents}
             />
           </StickySideColumns>

src/pages/verify/style.module.scss

@@ -61,6 +61,6 @@
 
 [data-dev='true'] {
   .mark {
-    outline: 1px dotted black;
+    border: 1px dotted black;
   }
 }

src/types/errors/TimeoutError.ts

@@ -1,6 +0,0 @@
-export class TimeoutError extends Error {
-  constructor() {
-    super('Timeout')
-    this.name = this.constructor.name
-  }
-}

src/utils/const.ts

@@ -21,8 +21,6 @@ export const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000
 
 export const SIGIT_RELAY = 'wss://relay.sigit.io'
 
-export const SIGIT_BLOSSOM = 'https://blossom.sigit.io'
-
 export const DEFAULT_LOOK_UP_RELAY_LIST = [
   SIGIT_RELAY,
   'wss://user.kindpag.es',

src/utils/dvm.ts

@@ -13,7 +13,7 @@ import { setRelayInfoAction } from '../store/actions'
 export const getNostrJoiningBlockNumber = async (
   hexKey: string
 ): Promise<NostrJoiningBlock | null> => {
-  const metadataController = MetadataController.getInstance()
+  const metadataController = new MetadataController()
 
   const relaySet = await metadataController.findRelayListMetadata(hexKey)
 

src/utils/file.ts

@@ -4,6 +4,7 @@ import { MOST_COMMON_MEDIA_TYPES } from './const.ts'
 import { extractMarksFromSignedMeta } from './mark.ts'
 import {
   addMarks,
+  convertToPdfBlob,
   groupMarksByFileNamePage,
   isPdf,
   pdfToImages
@@ -21,7 +22,8 @@ export const getZipWithFiles = async (
   for (const [fileName, file] of Object.entries(files)) {
     if (file.isPdf) {
       // Handle PDF Files
-      const blob = await addMarks(file, marksByFileNamePage[fileName])
+      const pages = await addMarks(file, marksByFileNamePage[fileName])
+      const blob = await convertToPdfBlob(pages)
       zip.file(`files/${fileName}`, blob)
     } else {
       // Handle other files

src/utils/mark.ts

@@ -3,27 +3,6 @@ import { hexToNpub } from './nostr.ts'
 import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
 import { EMPTY } from './const.ts'
-import { MarkType } from '../types/drawing.ts'
-import {
-  faT,
-  faSignature,
-  faBriefcase,
-  faIdCard,
-  faHeading,
-  faClock,
-  faCalendarDays,
-  fa1,
-  faImage,
-  faSquareCheck,
-  faCheckDouble,
-  faPaperclip,
-  faCircleDot,
-  faSquareCaretDown,
-  faTableCellsLarge,
-  faStamp,
-  faCreditCard,
-  faPhone
-} from '@fortawesome/free-solid-svg-icons'
 
 /**
  * Takes in an array of Marks already filtered by User.
@@ -152,121 +131,6 @@ const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
   return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
 }
 
-export const DEFAULT_TOOLBOX = [
-  {
-    identifier: MarkType.TEXT,
-    icon: faT,
-    label: 'Text',
-    active: true
-  },
-  {
-    identifier: MarkType.SIGNATURE,
-    icon: faSignature,
-    label: 'Signature',
-    active: false
-  },
-  {
-    identifier: MarkType.JOBTITLE,
-    icon: faBriefcase,
-    label: 'Job Title',
-    active: false
-  },
-  {
-    identifier: MarkType.FULLNAME,
-    icon: faIdCard,
-    label: 'Full Name',
-    active: false
-  },
-  {
-    identifier: MarkType.INITIALS,
-    icon: faHeading,
-    label: 'Initials',
-    active: false
-  },
-  {
-    identifier: MarkType.DATETIME,
-    icon: faClock,
-    label: 'Date Time',
-    active: false
-  },
-  {
-    identifier: MarkType.DATE,
-    icon: faCalendarDays,
-    label: 'Date',
-    active: false
-  },
-  {
-    identifier: MarkType.NUMBER,
-    icon: fa1,
-    label: 'Number',
-    active: false
-  },
-  {
-    identifier: MarkType.IMAGES,
-    icon: faImage,
-    label: 'Images',
-    active: false
-  },
-  {
-    identifier: MarkType.CHECKBOX,
-    icon: faSquareCheck,
-    label: 'Checkbox',
-    active: false
-  },
-  {
-    identifier: MarkType.MULTIPLE,
-    icon: faCheckDouble,
-    label: 'Multiple',
-    active: false
-  },
-  {
-    identifier: MarkType.FILE,
-    icon: faPaperclip,
-    label: 'File',
-    active: false
-  },
-  {
-    identifier: MarkType.RADIO,
-    icon: faCircleDot,
-    label: 'Radio',
-    active: false
-  },
-  {
-    identifier: MarkType.SELECT,
-    icon: faSquareCaretDown,
-    label: 'Select',
-    active: false
-  },
-  {
-    identifier: MarkType.CELLS,
-    icon: faTableCellsLarge,
-    label: 'Cells',
-    active: false
-  },
-  {
-    identifier: MarkType.STAMP,
-    icon: faStamp,
-    label: 'Stamp',
-    active: false
-  },
-  {
-    identifier: MarkType.PAYMENT,
-    icon: faCreditCard,
-    label: 'Payment',
-    active: false
-  },
-  {
-    identifier: MarkType.PHONE,
-    icon: faPhone,
-    label: 'Phone',
-    active: false
-  }
-]
-
-export const getToolboxLabelByMarkType = (markType: MarkType) => {
-  return DEFAULT_TOOLBOX.find((t) => t.identifier === markType)?.label
-}
-
 export {
   getCurrentUserMarks,
   filterMarksByPubkey,

src/utils/misc.ts

@@ -16,8 +16,6 @@ import { CreateSignatureEventContent, Meta } from '../types'
 import { hexToNpub, unixNow } from './nostr'
 import { parseJson } from './string'
 import { hexToBytes } from '@noble/hashes/utils'
-import { getHash } from './hash.ts'
-import { SIGIT_BLOSSOM } from './const.ts'
 
 /**
  * Uploads a file to a file storage service.
@@ -27,18 +25,12 @@ import { SIGIT_BLOSSOM } from './const.ts'
  */
 export const uploadToFileStorage = async (file: File) => {
   // Define event metadata for authorization
-  const hash = await getHash(await file.arrayBuffer())
-  if (!hash) {
-    throw new Error("Can't get file hash.")
-  }
-
   const event: EventTemplate = {
     kind: 24242,
     content: 'Authorize Upload',
     created_at: unixNow(),
     tags: [
       ['t', 'upload'],
-      ['x', hash],
       ['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
       ['name', file.name],
       ['size', String(file.size)]
@@ -55,8 +47,11 @@ export const uploadToFileStorage = async (file: File) => {
   // Sign the authorization event using the dedicated key stored in user app data
   const authEvent = finalizeEvent(event, hexToBytes(key))
 
+  // URL of the file storage service
+  const FILE_STORAGE_URL = 'https://blossom.sigit.io' // REFACTOR: should be an env
+
   // Upload the file to the file storage service using Axios
-  const response = await axios.put(`${SIGIT_BLOSSOM}/upload`, file, {
+  const response = await axios.put(`${FILE_STORAGE_URL}/upload`, file, {
     headers: {
       Authorization: 'Nostr ' + btoa(JSON.stringify(authEvent)), // Set authorization header
       'Content-Type': 'application/sigit' // Set content type header

src/utils/nostr.ts

@@ -35,7 +35,6 @@ import { getDefaultRelayMap } from './relays'
 import { parseJson, removeLeadingSlash } from './string'
 import { timeout } from './utils'
 import { getHash } from './hash'
-import { SIGIT_BLOSSOM } from './const.ts'
 
 /**
  * Generates a `d` tag for userAppData
@@ -366,7 +365,7 @@ export const getUsersAppData = async (): Promise<UserAppData | null> => {
   // Check if relayMap is undefined in the Redux store
   if (!relayMap) {
     // If relayMap is not present, fetch relay list metadata
-    const metadataController = MetadataController.getInstance()
+    const metadataController = new MetadataController()
     const relaySet = await metadataController
       .findRelayListMetadata(usersPubkey)
       .catch((err) => {
@@ -724,11 +723,6 @@ const uploadUserAppDataToBlossom = async (
     type: 'application/octet-stream'
   })
 
-  const hash = await getHash(await file.arrayBuffer())
-  if (!hash) {
-    throw new Error("Can't get file hash.")
-  }
-
   // Define event metadata for authorization
   const event: EventTemplate = {
     kind: 24242,
@@ -736,7 +730,6 @@ const uploadUserAppDataToBlossom = async (
     created_at: unixNow(),
     tags: [
       ['t', 'upload'],
-      ['x', hash],
       ['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
       ['name', file.name],
       ['size', String(file.size)]
@@ -746,8 +739,11 @@ const uploadUserAppDataToBlossom = async (
   // Finalize the event with the private key
   const authEvent = finalizeEvent(event, hexToBytes(privateKey))
 
+  // URL of the file storage service
+  const FILE_STORAGE_URL = 'https://blossom.sigit.io'
+
   // Upload the file to the file storage service using Axios
-  const response = await axios.put(`${SIGIT_BLOSSOM}/upload`, file, {
+  const response = await axios.put(`${FILE_STORAGE_URL}/upload`, file, {
     headers: {
       Authorization: 'Nostr ' + btoa(JSON.stringify(authEvent)) // Set authorization header
     }
@@ -839,7 +835,7 @@ const getUserAppDataFromBlossom = async (url: string, privateKey: string) => {
  */
 export const subscribeForSigits = async (pubkey: string) => {
   // Instantiate the MetadataController to retrieve relay list metadata
-  const metadataController = MetadataController.getInstance()
+  const metadataController = new MetadataController()
   const relaySet = await metadataController
     .findRelayListMetadata(pubkey)
     .catch((err) => {
@@ -943,7 +939,7 @@ export const sendNotification = async (receiver: string, meta: Meta) => {
   const wrappedEvent = createWrap(unsignedEvent, receiver)
 
   // Instantiate the MetadataController to retrieve relay list metadata
-  const metadataController = MetadataController.getInstance()
+  const metadataController = new MetadataController()
   const relaySet = await metadataController
     .findRelayListMetadata(receiver)
     .catch((err) => {

src/utils/pdf.ts

@@ -1,6 +1,7 @@
 import { PdfPage } from '../types/drawing.ts'
-import { PDFDocument, PDFFont, PDFPage, rgb } from 'pdf-lib'
+import { PDFDocument } from 'pdf-lib'
 import { Mark } from '../types/mark.ts'
+
 import * as PDFJS from 'pdfjs-dist'
 import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'
 if (!PDFJS.GlobalWorkerOptions.workerPort) {
@@ -9,23 +10,18 @@ if (!PDFJS.GlobalWorkerOptions.workerPort) {
   PDFJS.GlobalWorkerOptions.workerPort = worker
 }
 
-import fontkit from '@pdf-lib/fontkit'
-import defaultFont from '../assets/fonts/roboto-regular.ttf'
-
 /**
  * Defined font size used when generating a PDF. Currently it is difficult to fully
  * correlate font size used at the time of filling in / drawing on the PDF
  * because it is dynamically rendered, and the final size.
+ * This should be fixed going forward.
+ * Switching to PDF-Lib will most likely make this problem redundant.
  */
 export const FONT_SIZE: number = 16
 /**
  * Current font type used when generating a PDF.
  */
-export const FONT_TYPE: string = 'Roboto'
+export const FONT_TYPE: string = 'Arial'
-/**
- * Current line height used when generating a PDF.
- */
-export const FONT_LINE_HEIGHT: number = 1
 
 /**
  * A utility that transforms a drawing coordinate number into a CSS-compatible pixel string
@@ -119,28 +115,56 @@ export const pdfToImages = async (
 
 /**
  * Takes in individual pdf file and an object with Marks grouped by Page number
- * Returns a PDF blob with embedded, completed and signed marks from all users as text
+ * Returns an array of encoded images where each image is a representation
+ * of a PDF page with completed and signed marks from all users
  */
 export const addMarks = async (
   file: File,
   marksPerPage: { [key: string]: Mark[] }
 ) => {
   const p = await readPdf(file)
-  const pdf = await PDFDocument.load(p)
+  const pdf = await PDFJS.getDocument(p).promise
-  const robotoFont = await embedFont(pdf)
+  const canvas = document.createElement('canvas')
-  const pages = pdf.getPages()
 
-  for (let i = 0; i < pages.length; i++) {
+  const images: string[] = []
-    if (marksPerPage && Object.hasOwn(marksPerPage, i)) {
+
-      marksPerPage[i]?.forEach((mark) =>
+  for (let i = 0; i < pdf.numPages; i++) {
-        drawMarkText(mark, pages[i], robotoFont)
+    const page = await pdf.getPage(i + 1)
-      )
+    const viewport = page.getViewport({ scale: 1 })
+    const context = canvas.getContext('2d')
+    canvas.height = viewport.height
+    canvas.width = viewport.width
+    if (context) {
+      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())
     }
   }
 
-  const blob = await pdf.save()
+  canvas.remove()
 
-  return blob
+  return images
+}
+
+/**
+ * Utility to scale mark in line with the PDF-to-PNG scale
+ */
+export const scaleMark = (mark: Mark, scale: number): Mark => {
+  const { location } = mark
+  return {
+    ...mark,
+    location: {
+      ...location,
+      width: location.width * scale,
+      height: location.height * scale,
+      left: location.left * scale,
+      top: location.top * scale
+    }
+  }
 }
 
 /**
@@ -153,7 +177,6 @@ export const hasValue = (mark: Mark): boolean => !!mark.value
  * Draws a Mark on a Canvas representation of a PDF Page
  * @param mark to be drawn
  * @param ctx a Canvas representation of a specific PDF Page
- * @deprecated use drawMarkText
  */
 export const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
   const { location } = mark
@@ -168,37 +191,27 @@ export const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
 }
 
 /**
- * Draws a Mark on a PDF Page
+ * Takes an array of encoded PDF pages and returns a blob that is a complete PDF file
- * @param mark to be drawn
+ * @param markedPdfPages
- * @param page PDF Page
- * @param font embedded font
  */
-export const drawMarkText = (mark: Mark, page: PDFPage, font: PDFFont) => {
+export const convertToPdfBlob = async (
-  const { location } = mark
+  markedPdfPages: string[]
-  const { height } = page.getSize()
+): Promise<Blob> => {
+  const pdfDoc = await PDFDocument.create()
 
-  // Convert the mark location origin (top, left) to PDF origin (bottom, left)
+  for (const page of markedPdfPages) {
-  const x = location.left
+    const pngImage = await pdfDoc.embedPng(page)
-  const y = height - location.top
+    const p = pdfDoc.addPage([pngImage.width, pngImage.height])
+    p.drawImage(pngImage, {
+      x: 0,
+      y: 0,
+      width: pngImage.width,
+      height: pngImage.height
+    })
+  }
 
-  // Adjust y-coordinate for the text, drawText's y is the baseline for the font
+  const pdfBytes = await pdfDoc.save()
-  // We start from the y (top location border) and we need to bump it down
+  return new Blob([pdfBytes], { type: 'application/pdf' })
-  // We move font baseline by the difference between rendered height and actual height (gap)
-  // And finally move down by the height without descender to get the new baseline
-  const adjustedY =
-    y -
-    (font.heightAtSize(FONT_SIZE) - FONT_SIZE) -
-    font.heightAtSize(FONT_SIZE, { descender: false })
-
-  page.drawText(`${mark.value}`, {
-    x,
-    y: adjustedY,
-    size: FONT_SIZE,
-    font: font,
-    color: rgb(0, 0, 0),
-    maxWidth: location.width,
-    lineHeight: FONT_SIZE * FONT_LINE_HEIGHT
-  })
 }
 
 /**
@@ -236,12 +249,3 @@ export const byPage = (
     }
   }
 }
-
-async function embedFont(pdf: PDFDocument) {
-  const fontBytes = await fetch(defaultFont).then((res) => res.arrayBuffer())
-
-  pdf.registerFontkit(fontkit)
-
-  const embeddedFont = await pdf.embedFont(fontBytes)
-  return embeddedFont
-}

src/utils/utils.ts

@@ -1,4 +1,3 @@
-import { TimeoutError } from '../types/errors/TimeoutError.ts'
 import { CurrentUserFile } from '../types/file.ts'
 import { SigitFile } from './file.ts'
 
@@ -35,7 +34,7 @@ export const isOnline = async () => {
 
   try {
     // Define a URL to check the online status
-    const url = document.location.pathname + '?v=' + new Date().getTime()
+    const url = 'https://www.google.com'
 
     // Make a HEAD request to the URL with 'no-cors' mode
     // This mode is used to handle opaque responses which do not expose their content
@@ -64,7 +63,7 @@ export const timeout = (ms: number = 60000) => {
     // Set a timeout using setTimeout
     setTimeout(() => {
       // Reject the promise with an Error indicating a timeout
-      reject(new TimeoutError())
+      reject(new Error('Timeout'))
     }, ms) // Timeout duration in milliseconds
   })
 }