.gitea/workflows/release-staging.yaml

@@ -18,7 +18,7 @@ jobs:
           node-version: 18
 
       - name: Audit
-        run: npm audit --omit=dev
+        run: npm audit
 
       - name: Install Dependencies
         run: npm ci

.gitea/workflows/staging-pull-request.yaml

@@ -19,7 +19,7 @@ jobs:
           node-version: 18
 
       - name: Audit
-        run: npm audit --omit=dev
+        run: npm audit
 
       - name: Install Dependencies
         run: npm ci

package-lock.json

@@ -1,14 +1,13 @@
 {
-  "name": "sigit",
+  "name": "web",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "sigit",
+      "name": "web",
       "version": "0.0.0",
       "hasInstallScript": true,
-      "license": "AGPL-3.0-or-later ",
       "dependencies": {
         "@emotion/react": "11.11.4",
         "@emotion/styled": "11.11.0",
@@ -34,15 +33,13 @@
         "nostr-tools": "2.7.0",
         "pdf-lib": "^1.17.1",
         "pdfjs-dist": "^4.4.168",
-        "rdndmb-html5-to-touch": "^8.0.3",
         "react": "^18.2.0",
-        "react-dnd": "^16.0.1",
+        "react-dnd": "16.0.1",
-        "react-dnd-multi-backend": "^8.0.3",
+        "react-dnd-html5-backend": "16.0.1",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
         "react-redux": "9.1.0",
         "react-router-dom": "6.22.1",
-        "react-singleton-hook": "^4.0.1",
         "react-toastify": "10.0.4",
         "redux": "5.0.1",
         "tseep": "1.2.1"
@@ -3268,19 +3265,6 @@
         "@babel/runtime": "^7.9.2"
       }
     },
-    "node_modules/dnd-multi-backend": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/dnd-multi-backend/-/dnd-multi-backend-8.0.3.tgz",
-      "integrity": "sha512-yFFARotr+OEJk787Fsj+V52pi6j7+Pt/CRp3IR2Ai3fnxA/z6J54T7+gxkXzXu4cvxTNE7NiBzzAaJ2f7JjFTw==",
-      "license": "MIT",
-      "funding": {
-        "type": "individual",
-        "url": "https://github.com/sponsors/LouisBrunner"
-      },
-      "peerDependencies": {
-        "dnd-core": "^16.0.1"
-      }
-    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -5701,21 +5685,6 @@
         }
       ]
     },
-    "node_modules/rdndmb-html5-to-touch": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/rdndmb-html5-to-touch/-/rdndmb-html5-to-touch-8.0.3.tgz",
-      "integrity": "sha512-VfIbLjlL9NAnZzc2M5fGPCNkDyK12+ahgILGO5RjS7jkgUlxwB0c/XvxVQNfY/2ocg7isTY/G7tqxJk5fSTZAA==",
-      "license": "MIT",
-      "dependencies": {
-        "dnd-multi-backend": "^8.0.3",
-        "react-dnd-html5-backend": "^16.0.1",
-        "react-dnd-touch-backend": "^16.0.1"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://github.com/sponsors/LouisBrunner"
-      }
-    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -5731,7 +5700,6 @@
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
       "integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
-      "license": "MIT",
       "dependencies": {
         "@react-dnd/invariant": "^4.0.1",
         "@react-dnd/shallowequal": "^4.0.1",
@@ -5761,55 +5729,10 @@
       "version": "16.0.1",
       "resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
       "integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
-      "license": "MIT",
       "dependencies": {
         "dnd-core": "^16.0.1"
       }
     },
-    "node_modules/react-dnd-multi-backend": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/react-dnd-multi-backend/-/react-dnd-multi-backend-8.0.3.tgz",
-      "integrity": "sha512-IwH7Mf6R05KIFohX0hHMTluoAvuUD8SO15KCD+9fY0nJ4nc1FGCMCSyMZw8R1XNStKp+JnNg3ZMtiaf5DebSUg==",
-      "license": "MIT",
-      "dependencies": {
-        "dnd-multi-backend": "^8.0.3",
-        "react-dnd-preview": "^8.0.3"
-      },
-      "funding": {
-        "type": "individual",
-        "url": "https://github.com/sponsors/LouisBrunner"
-      },
-      "peerDependencies": {
-        "dnd-core": "^16.0.1",
-        "react": "^16.14.0 || ^17.0.2 || ^18.0.0",
-        "react-dnd": "^16.0.1",
-        "react-dom": "^16.14.0 || ^17.0.2 || ^18.0.0"
-      }
-    },
-    "node_modules/react-dnd-preview": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/react-dnd-preview/-/react-dnd-preview-8.0.3.tgz",
-      "integrity": "sha512-s69Ro47QYDthDhj73iQ0VioMCjtlZ1AytKBDkQaHKm5DTjA8D2bIaFKCBQd330QEW0SIzqLJrZGCSlIY2xraJg==",
-      "license": "MIT",
-      "funding": {
-        "type": "individual",
-        "url": "https://github.com/sponsors/LouisBrunner"
-      },
-      "peerDependencies": {
-        "react": "^16.14.0 || ^17.0.2 || ^18.0.0",
-        "react-dnd": "^16.0.1"
-      }
-    },
-    "node_modules/react-dnd-touch-backend": {
-      "version": "16.0.1",
-      "resolved": "https://registry.npmjs.org/react-dnd-touch-backend/-/react-dnd-touch-backend-16.0.1.tgz",
-      "integrity": "sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==",
-      "license": "MIT",
-      "dependencies": {
-        "@react-dnd/invariant": "^4.0.1",
-        "dnd-core": "^16.0.1"
-      }
-    },
     "node_modules/react-dom": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
@@ -5909,23 +5832,6 @@
         "react-dom": ">=16.8"
       }
     },
-    "node_modules/react-singleton-hook": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/react-singleton-hook/-/react-singleton-hook-4.0.1.tgz",
-      "integrity": "sha512-fWuk8VxcZPChrkQasDLM8pgd/7kyi+Cr/5FfCiD99FicjEru+JmtEZNnN4lJ8Z7KbqAST5CYPlpz6lmNsZFGNw==",
-      "license": "MIT",
-      "peerDependencies": {
-        "react": "18"
-      },
-      "peerDependenciesMeta": {
-        "react-dom": {
-          "optional": true
-        },
-        "react-native": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/react-toastify": {
       "version": "10.0.4",
       "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.4.tgz",

package.json

@@ -44,15 +44,13 @@
     "nostr-tools": "2.7.0",
     "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^4.4.168",
-    "rdndmb-html5-to-touch": "^8.0.3",
     "react": "^18.2.0",
-    "react-dnd": "^16.0.1",
+    "react-dnd": "16.0.1",
-    "react-dnd-multi-backend": "^8.0.3",
+    "react-dnd-html5-backend": "16.0.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-redux": "9.1.0",
     "react-router-dom": "6.22.1",
-    "react-singleton-hook": "^4.0.1",
     "react-toastify": "10.0.4",
     "redux": "5.0.1",
     "tseep": "1.2.1"
@@ -84,4 +82,4 @@
     ],
     "*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}": "npm run formatter:staged"
   }
-}
+}

src/App.scss

@@ -41,7 +41,6 @@ p {
 
 body {
   color: $text-color;
-  background: $body-background-color;
   font-family: $font-familiy;
   letter-spacing: $letter-spacing;
   font-size: $body-font-size;
@@ -70,96 +69,3 @@ a {
 input {
   font-family: inherit;
 }
-
-ul {
-  list-style-type: none; /* Removes bullet points */
-  margin: 0; /* Removes default margin */
-  padding: 0; /* Removes default padding */
-}
-
-li {
-  list-style-type: none; /* Removes the bullets */
-  margin: 0; /* Removes any default margin */
-  padding: 0; /* Removes any default padding */
-}
-
-// Shared styles for center content (Create, Sign, Verify)
-.files-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 25px;
-}
-
-.file-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-  position: relative;
-
-  // CSS, scroll position when scrolling to the files is adjusted by
-  // - first-child Header height, default body padding, and center content border (10px) and padding (10px)
-  // - others We don't include border and padding and scroll to the top of the image
-  &:first-child {
-    scroll-margin-top: $header-height + $body-vertical-padding + 20px;
-  }
-  &:not(:first-child) {
-    scroll-margin-top: $header-height + $body-vertical-padding;
-  }
-}
-
-// For pdf marks
-.image-wrapper {
-  position: relative;
-  -webkit-user-select: none;
-  user-select: none;
-
-  > img {
-    display: block;
-    width: 100%;
-    height: auto;
-    object-fit: contain; /* Ensure the image fits within the container */
-  }
-}
-
-// For image rendering (uploaded image as a file)
-.file-image {
-  -webkit-user-select: none;
-  user-select: none;
-
-  display: block;
-  width: 100%;
-  height: auto;
-  object-fit: contain; /* Ensure the image fits within the container */
-}
-
-// Consistent styling for every file mark
-// Reverts some of the design defaults for font
-.file-mark {
-  font-family: Arial;
-  font-size: 16px;
-  font-weight: normal;
-  color: black;
-  letter-spacing: normal;
-  border: 1px solid transparent;
-
-  scroll-margin-top: $header-height + $body-vertical-padding;
-}
-
-[data-dev='true'] {
-  .image-wrapper {
-    // outline: 1px solid #ccc; /* Optional: for visual debugging */
-    background-color: #e0f7fa; /* Optional: for visual debugging */
-  }
-}
-
-.extension-file-box {
-  border-radius: 4px;
-  background: rgba(255, 255, 255, 0.5);
-  height: 100px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  color: rgba(0, 0, 0, 0.25);
-  font-size: 14px;
-}

src/components/DisplaySigit/index.tsx

@@ -10,8 +10,7 @@ import {
   faCalendar,
   faCopy,
   faEye,
-  faFile,
+  faFile
-  faFileCircleExclamation
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { UserAvatarGroup } from '../UserAvatarGroup'
@@ -21,7 +20,6 @@ import { TooltipChild } from '../TooltipChild'
 import { getExtensionIconLabel } from '../getExtensionIconLabel'
 import { useSigitProfiles } from '../../hooks/useSigitProfiles'
 import { useSigitMeta } from '../../hooks/useSigitMeta'
-import { extractFileExtensions } from '../../utils/file'
 
 type SigitProps = {
   meta: Meta
@@ -29,18 +27,23 @@ type SigitProps = {
 }
 
 export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
-  const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
+  const {
-    parsedMeta
+    title,
+    createdAt,
+    submittedBy,
+    signers,
+    signedStatus,
+    fileExtensions,
+    isValid
+  } = parsedMeta
 
-  const { signersStatus, fileHashes } = useSigitMeta(meta)
+  const { signersStatus } = useSigitMeta(meta)
 
   const profiles = useSigitProfiles([
     ...(submittedBy ? [submittedBy] : []),
     ...signers
   ])
 
-  const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
-
   return (
     <div className={styles.itemWrapper}>
       <Link
@@ -117,21 +120,17 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
         <span className={styles.iconLabel}>
           <FontAwesomeIcon icon={faEye} /> {signedStatus}
         </span>
-        {extensions.length > 0 ? (
+        {fileExtensions.length > 0 ? (
           <span className={styles.iconLabel}>
-            {!isSame ? (
+            {fileExtensions.length > 1 ? (
               <>
                 <FontAwesomeIcon icon={faFile} /> Multiple File Types
               </>
             ) : (
-              getExtensionIconLabel(extensions[0])
+              getExtensionIconLabel(fileExtensions[0])
             )}
           </span>
-        ) : (
+        ) : null}
-          <>
-            <FontAwesomeIcon icon={faFileCircleExclamation} /> &mdash;
-          </>
-        )}
       </div>
       <div className={styles.itemActions}>
         <Tooltip title="Duplicate" arrow placement="top" disableInteractive>

src/components/DrawPDFFields/index.tsx

@@ -1,105 +1,104 @@
 import { Close } from '@mui/icons-material'
 import {
+  Box,
+  CircularProgress,
+  Divider,
   FormControl,
   InputLabel,
-  ListItemIcon,
-  ListItemText,
   MenuItem,
   Select
 } from '@mui/material'
 import styles from './style.module.scss'
 import React, { useEffect, useState } from 'react'
-import { ProfileMetadata, User, UserRole } from '../../types'
-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 { FileDivider } from '../FileDivider'
-import { ExtensionFileBox } from '../ExtensionFileBox'
-import { inPx } from '../../utils/pdf'
-import { useScale } from '../../hooks/useScale'
-import { AvatarIconButton } from '../UserAvatarIconButton'
-import { LoadingSpinner } from '../LoadingSpinner'
 
-const DEFAULT_START_SIZE = {
+import * as PDFJS from 'pdfjs-dist'
-  width: 140,
+import { ProfileMetadata, User, UserRole } from '../../types'
-  height: 40
+import {
-} as const
+  PdfFile,
+  MouseState,
+  PdfPage,
+  DrawnField,
+  DrawTool
+} from '../../types/drawing'
+import { truncate } from 'lodash'
+import { extractFileExtension, hexToNpub } from '../../utils'
+import { toPdfFiles } from '../../utils/pdf.ts'
+PDFJS.GlobalWorkerOptions.workerSrc = new URL(
+  'pdfjs-dist/build/pdf.worker.min.mjs',
+  import.meta.url
+).toString()
 
 interface Props {
   selectedFiles: File[]
   users: User[]
   metadata: { [key: string]: ProfileMetadata }
-  onDrawFieldsChange: (sigitFiles: SigitFile[]) => void
+  onDrawFieldsChange: (pdfFiles: PdfFile[]) => void
   selectedTool?: DrawTool
 }
 
 export const DrawPDFFields = (props: Props) => {
   const { selectedFiles, selectedTool, onDrawFieldsChange, users } = props
-  const { to, from } = useScale()
 
-  const [sigitFiles, setSigitFiles] = useState<SigitFile[]>([])
+  const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([])
-  const [parsingPdf, setIsParsing] = useState<boolean>(false)
+  const [parsingPdf, setParsingPdf] = useState<boolean>(false)
 
   const [mouseState, setMouseState] = useState<MouseState>({
     clicked: false
   })
 
-  const [activeDrawField, setActiveDrawField] = useState<number>()
-
   useEffect(() => {
     if (selectedFiles) {
       /**
-       * Reads the binary files and converts to internal file type
+       * Reads the pdf binary files and converts it's pages to images
-       * and sets to a state (adds images if it's a PDF)
+       * creates the pdfFiles object and sets to a state
        */
-      const parsePages = async () => {
+      const parsePdfPages = async () => {
-        const files = await settleAllFullfilfedPromises(
+        const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
-          selectedFiles,
-          getSigitFile
-        )
 
-        setSigitFiles(files)
+        setPdfFiles(pdfFiles)
       }
 
-      setIsParsing(true)
+      setParsingPdf(true)
 
-      parsePages().finally(() => {
+      parsePdfPages().finally(() => {
-        setIsParsing(false)
+        setParsingPdf(false)
       })
     }
   }, [selectedFiles])
 
   useEffect(() => {
-    if (sigitFiles) onDrawFieldsChange(sigitFiles)
+    if (pdfFiles) onDrawFieldsChange(pdfFiles)
-  }, [onDrawFieldsChange, sigitFiles])
+  }, [onDrawFieldsChange, pdfFiles])
 
   /**
    * Drawing events
    */
   useEffect(() => {
-    window.addEventListener('pointerup', handlePointerUp)
+    // window.addEventListener('mousedown', onMouseDown);
-    window.addEventListener('pointercancel', handlePointerUp)
+    window.addEventListener('mouseup', onMouseUp)
 
     return () => {
-      window.removeEventListener('pointerup', handlePointerUp)
+      // window.removeEventListener('mousedown', onMouseDown);
-      window.removeEventListener('pointercancel', handlePointerUp)
+      window.removeEventListener('mouseup', onMouseUp)
     }
   }, [])
 
   const refreshPdfFiles = () => {
-    setSigitFiles([...sigitFiles])
+    setPdfFiles([...pdfFiles])
   }
 
   /**
-   * Fired only on when left (primary pointer interaction) clicking page image
+   * Fired only when left click and mouse over pdf page
    * Creates new drawnElement and pushes in the array
    * It is re rendered and visible right away
    *
-   * @param event Pointer event
+   * @param event Mouse event
    * @param page PdfPage where press happened
    */
-  const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
+  const onMouseDown = (
+    event: React.MouseEvent<HTMLDivElement>,
+    page: PdfPage
+  ) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
@@ -107,13 +106,13 @@ export const DrawPDFFields = (props: Props) => {
       return
     }
 
-    const { x, y } = getPointerCoordinates(event)
+    const { mouseX, mouseY } = getMouseCoordinates(event)
 
     const newField: DrawnField = {
-      left: to(page.width, x),
+      left: mouseX,
-      top: to(page.width, y),
+      top: mouseY,
-      width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
+      width: 0,
-      height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
+      height: 0,
       counterpart: '',
       type: selectedTool.identifier
     }
@@ -130,9 +129,9 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Drawing is finished, resets all the variables used to draw
-   * @param event Pointer event
+   * @param event Mouse event
    */
-  const handlePointerUp = () => {
+  const onMouseUp = () => {
     setMouseState((prev) => {
       return {
         ...prev,
@@ -144,13 +143,16 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   /**
-   * After {@link handlePointerDown} create an drawing element, this function gets called on every pixel moved
+   * After {@link onMouseDown} create an drawing element, this function gets called on every pixel moved
-   * which alters the newly created drawing element, resizing it while pointer moves
+   * which alters the newly created drawing element, resizing it while mouse move
-   * @param event Pointer event
+   * @param event Mouse event
    * @param page PdfPage where moving is happening
    */
-  const handlePointerMove = (event: React.PointerEvent, page: PdfPage) => {
+  const onMouseMove = (
-    if (mouseState.clicked && selectedTool && event.pointerType === 'mouse') {
+    event: React.MouseEvent<HTMLDivElement>,
+    page: PdfPage
+  ) => {
+    if (mouseState.clicked && selectedTool) {
       const lastElementIndex = page.drawnFields.length - 1
 
       const lastDrawnField = page.drawnFields[lastElementIndex]
@@ -160,10 +162,10 @@ export const DrawPDFFields = (props: Props) => {
       // to the page below (without releaseing mouse click)
       if (!lastDrawnField) return
 
-      const { x, y } = getPointerCoordinates(event)
+      const { mouseX, mouseY } = getMouseCoordinates(event)
 
-      const width = to(page.width, x) - lastDrawnField.left
+      const width = mouseX - lastDrawnField.left
-      const height = to(page.width, y) - lastDrawnField.top
+      const height = mouseY - lastDrawnField.top
 
       lastDrawnField.width = width
       lastDrawnField.height = height
@@ -178,60 +180,54 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Fired when event happens on the drawn element which will be moved
-   * pointer coordinates relative to drawn element will be stored
+   * mouse coordinates relative to drawn element will be stored
    * so when we start moving, offset can be calculated
-   * x - offsetX
+   * mouseX - offsetX
-   * y - offsetY
+   * mouseY - offsetY
    *
-   * @param event Pointer event
+   * @param event Mouse event
-   * @param drawnFieldIndex Which we are moving
+   * @param drawnField Which we are moving
    */
-  const handleDrawnFieldPointerDown = (
+  const onDrawnFieldMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
-    event: React.PointerEvent,
-    drawnFieldIndex: number
-  ) => {
     event.stopPropagation()
 
     // Proceed only if left click
     if (event.button !== 0) return
 
-    const drawingRectangleCoords = getPointerCoordinates(event)
+    const drawingRectangleCoords = getMouseCoordinates(event)
 
-    setActiveDrawField(drawnFieldIndex)
     setMouseState({
       dragging: true,
       clicked: false,
       coordsInWrapper: {
-        x: drawingRectangleCoords.x,
+        mouseX: drawingRectangleCoords.mouseX,
-        y: drawingRectangleCoords.y
+        mouseY: drawingRectangleCoords.mouseY
       }
     })
   }
 
   /**
-   * Moves the drawnElement by the pointer position (pointer can grab anywhere on the drawn element)
+   * Moves the drawnElement by the mouse position (mouse can grab anywhere on the drawn element)
-   * @param event Pointer event
+   * @param event Mouse event
    * @param drawnField which we are moving
-   * @param pageWidth pdf value which is used to calculate scaled offset
    */
-  const handleDrawnFieldPointerMove = (
+  const onDrawnFieldMouseMove = (
-    event: React.PointerEvent,
+    event: React.MouseEvent<HTMLDivElement>,
-    drawnField: DrawnField,
+    drawnField: DrawnField
-    pageWidth: number
   ) => {
     if (mouseState.dragging) {
-      const { x, y, rect } = getPointerCoordinates(
+      const { mouseX, mouseY, rect } = getMouseCoordinates(
         event,
         event.currentTarget.parentElement
       )
       const coordsOffset = mouseState.coordsInWrapper
 
       if (coordsOffset) {
-        let left = to(pageWidth, x - coordsOffset.x)
+        let left = mouseX - coordsOffset.mouseX
-        let top = to(pageWidth, y - coordsOffset.y)
+        let top = mouseY - coordsOffset.mouseY
 
-        const rightLimit = to(pageWidth, rect.width) - drawnField.width
+        const rightLimit = rect.width - drawnField.width - 3
-        const bottomLimit = to(pageWidth, rect.height) - drawnField.height
+        const bottomLimit = rect.height - drawnField.height - 3
 
         if (left < 0) left = 0
         if (top < 0) top = 0
@@ -248,18 +244,17 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Fired when clicked on the resize handle, sets the state for a resize action
-   * @param event Pointer event
+   * @param event Mouse event
-   * @param drawnFieldIndex which we are resizing
+   * @param drawnField which we are resizing
    */
-  const handleResizePointerDown = (
+  const onResizeHandleMouseDown = (
-    event: React.PointerEvent,
+    event: React.MouseEvent<HTMLSpanElement>
-    drawnFieldIndex: number
   ) => {
     // Proceed only if left click
     if (event.button !== 0) return
+
     event.stopPropagation()
 
-    setActiveDrawField(drawnFieldIndex)
     setMouseState({
       resizing: true
     })
@@ -267,17 +262,15 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Resizes the drawn element by the mouse position
-   * @param event Pointer event
+   * @param event Mouse event
    * @param drawnField which we are resizing
-   * @param pageWidth pdf value which is used to calculate scaled offset
    */
-  const handleResizePointerMove = (
+  const onResizeHandleMouseMove = (
-    event: React.PointerEvent,
+    event: React.MouseEvent<HTMLSpanElement>,
-    drawnField: DrawnField,
+    drawnField: DrawnField
-    pageWidth: number
   ) => {
     if (mouseState.resizing) {
-      const { x, y } = getPointerCoordinates(
+      const { mouseX, mouseY } = getMouseCoordinates(
         event,
         // currentTarget = span handle
         // 1st parent = drawnField
@@ -285,8 +278,8 @@ export const DrawPDFFields = (props: Props) => {
         event.currentTarget.parentElement?.parentElement
       )
 
-      const width = to(pageWidth, x) - drawnField.left
+      const width = mouseX - drawnField.left
-      const height = to(pageWidth, y) - drawnField.top
+      const height = mouseY - drawnField.top
 
       drawnField.width = width
       drawnField.height = height
@@ -297,137 +290,111 @@ export const DrawPDFFields = (props: Props) => {
 
   /**
    * Removes the drawn element using the indexes in the params
-   * @param event Pointer event
+   * @param event Mouse event
    * @param pdfFileIndex pdf file index
    * @param pdfPageIndex pdf page index
    * @param drawnFileIndex drawn file index
    */
-  const handleRemovePointerDown = (
+  const onRemoveHandleMouseDown = (
-    event: React.PointerEvent,
+    event: React.MouseEvent<HTMLSpanElement>,
     pdfFileIndex: number,
     pdfPageIndex: number,
     drawnFileIndex: number
   ) => {
     event.stopPropagation()
 
-    const pages = sigitFiles[pdfFileIndex]?.pages
+    pdfFiles[pdfFileIndex].pages[pdfPageIndex].drawnFields.splice(
-    if (pages) {
+      drawnFileIndex,
-      pages[pdfPageIndex]?.drawnFields?.splice(drawnFileIndex, 1)
+      1
-    }
+    )
   }
 
   /**
-   * Used to stop pointer click propagating to the parent elements
+   * Used to stop mouse click propagating to the parent elements
    * so select can work properly
-   * @param event Pointer event
+   * @param event Mouse event
    */
-  const handleUserSelectPointerDown = (event: React.PointerEvent) => {
+  const onUserSelectHandleMouseDown = (
+    event: React.MouseEvent<HTMLDivElement>
+  ) => {
     event.stopPropagation()
   }
 
   /**
-   * Gets the pointer coordinates relative to a element in the `event` param
+   * Gets the mouse coordinates relative to a element in the `event` param
-   * @param event PointerEvent
+   * @param event MouseEvent
-   * @param customTarget coordinates relative to this element, if not provided
+   * @param customTarget mouse coordinates relative to this element, if not provided
    * event.target will be used
    */
-  const getPointerCoordinates = (
+  const getMouseCoordinates = (
-    event: React.PointerEvent,
+    event: React.MouseEvent<HTMLElement>,
     customTarget?: HTMLElement | null
   ) => {
     const target = customTarget ? customTarget : event.currentTarget
     const rect = target.getBoundingClientRect()
-
+    const mouseX = event.clientX - rect.left //x position within the element.
-    // Clamp X Y within the target
+    const mouseY = event.clientY - rect.top //y position within the element.
-    const x = Math.min(event.clientX, rect.right) - rect.left //x position within the element.
-    const y = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
 
     return {
-      x,
+      mouseX,
-      y,
+      mouseY,
       rect
     }
   }
+
   /**
    * Renders the pdf pages and drawing elements
    */
-  const getPdfPages = (file: SigitFile, fileIndex: number) => {
+  const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
-    // Early return if this is not a pdf
-    if (!file.isPdf) return null
-
     return (
       <>
-        {file.pages?.map((page, pageIndex: number) => {
+        {pdfFile.pages.map((page, pdfPageIndex: number) => {
           return (
             <div
-              key={pageIndex}
+              key={pdfPageIndex}
-              className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
+              className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
             >
               <img
-                onPointerMove={(event) => {
+                onMouseMove={(event) => {
-                  handlePointerMove(event, page)
+                  onMouseMove(event, page)
                 }}
-                onPointerDown={(event) => {
+                onMouseDown={(event) => {
-                  handlePointerDown(event, page)
+                  onMouseDown(event, page)
                 }}
                 draggable="false"
                 src={page.image}
-                alt={`page ${pageIndex + 1} of ${file.name}`}
               />
 
               {page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
                 return (
                   <div
                     key={drawnFieldIndex}
-                    onPointerDown={(event) =>
+                    onMouseDown={onDrawnFieldMouseDown}
-                      handleDrawnFieldPointerDown(event, drawnFieldIndex)
+                    onMouseMove={(event) => {
-                    }
+                      onDrawnFieldMouseMove(event, drawnField)
-                    onPointerMove={(event) => {
-                      handleDrawnFieldPointerMove(event, drawnField, page.width)
                     }}
                     className={styles.drawingRectangle}
                     style={{
-                      backgroundColor: drawnField.counterpart
+                      left: `${drawnField.left}px`,
-                        ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}4b`
+                      top: `${drawnField.top}px`,
-                        : undefined,
+                      width: `${drawnField.width}px`,
-                      borderColor: drawnField.counterpart
+                      height: `${drawnField.height}px`,
-                        ? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}`
+                      pointerEvents: mouseState.clicked ? 'none' : 'all'
-                        : undefined,
-                      left: inPx(from(page.width, drawnField.left)),
-                      top: inPx(from(page.width, drawnField.top)),
-                      width: inPx(from(page.width, drawnField.width)),
-                      height: inPx(from(page.width, drawnField.height)),
-                      pointerEvents: mouseState.clicked ? 'none' : 'all',
-                      touchAction: 'none',
-                      opacity:
-                        mouseState.dragging &&
-                        activeDrawField === drawnFieldIndex
-                          ? 0.8
-                          : undefined
                     }}
                   >
                     <span
-                      onPointerDown={(event) =>
+                      onMouseDown={onResizeHandleMouseDown}
-                        handleResizePointerDown(event, drawnFieldIndex)
+                      onMouseMove={(event) => {
-                      }
+                        onResizeHandleMouseMove(event, drawnField)
-                      onPointerMove={(event) => {
-                        handleResizePointerMove(event, drawnField, page.width)
                       }}
                       className={styles.resizeHandle}
-                      style={{
-                        background:
-                          mouseState.resizing &&
-                          activeDrawField === drawnFieldIndex
-                            ? 'var(--primary-main)'
-                            : undefined
-                      }}
                     ></span>
                     <span
-                      onPointerDown={(event) => {
+                      onMouseDown={(event) => {
-                        handleRemovePointerDown(
+                        onRemoveHandleMouseDown(
                           event,
-                          fileIndex,
+                          pdfFileIndex,
-                          pageIndex,
+                          pdfPageIndex,
                           drawnFieldIndex
                         )
                       }}
@@ -436,7 +403,7 @@ export const DrawPDFFields = (props: Props) => {
                       <Close fontSize="small" />
                     </span>
                     <div
-                      onPointerDown={handleUserSelectPointerDown}
+                      onMouseDown={onUserSelectHandleMouseDown}
                       className={styles.userSelect}
                     >
                       <FormControl fullWidth size="small">
@@ -449,10 +416,6 @@ export const DrawPDFFields = (props: Props) => {
                           }}
                           labelId="counterparts"
                           label="Counterparts"
-                          sx={{
-                            background: 'white'
-                          }}
-                          renderValue={(value) => renderCounterpartValue(value)}
                         >
                           {users
                             .filter((u) => u.role === UserRole.signer)
@@ -481,22 +444,7 @@ export const DrawPDFFields = (props: Props) => {
                                   key={index}
                                   value={hexToNpub(user.pubkey)}
                                 >
-                                  <ListItemIcon>
+                                  {displayValue}
-                                    <AvatarIconButton
-                                      src={metadata?.picture}
-                                      hexKey={user.pubkey}
-                                      aria-label={`account of user ${displayValue}`}
-                                      color="inherit"
-                                      sx={{
-                                        padding: 0,
-                                        '> img': {
-                                          width: '30px',
-                                          height: '30px'
-                                        }
-                                      }}
-                                    />
-                                  </ListItemIcon>
-                                  <ListItemText>{displayValue}</ListItemText>
                                 </MenuItem>
                               )
                             })}
@@ -513,72 +461,48 @@ export const DrawPDFFields = (props: Props) => {
     )
   }
 
-  const renderCounterpartValue = (value: string) => {
-    const user = users.find((u) => u.pubkey === npubToHex(value))
-    if (user) {
-      let displayValue = truncate(value, {
-        length: 16
-      })
-
-      const metadata = props.metadata[user.pubkey]
-
-      if (metadata) {
-        displayValue = truncate(
-          metadata.name || metadata.display_name || metadata.username || value,
-          {
-            length: 16
-          }
-        )
-      }
-      return (
-        <>
-          <AvatarIconButton
-            src={props.metadata[user.pubkey]?.picture}
-            hexKey={npubToHex(user.pubkey) || undefined}
-            sx={{
-              padding: 0,
-              marginRight: '6px',
-              '> img': {
-                width: '21px',
-                height: '21px'
-              }
-            }}
-          />
-          {displayValue}
-        </>
-      )
-    }
-
-    return value
-  }
-
   if (parsingPdf) {
-    return <LoadingSpinner variant="small" />
+    return (
+      <Box sx={{ width: '100%', textAlign: 'center' }}>
+        <CircularProgress />
+      </Box>
+    )
   }
 
-  if (!sigitFiles.length) {
+  if (!pdfFiles.length) {
     return ''
   }
 
   return (
-    <div className="files-wrapper">
+    <div className={styles.view}>
-      {sigitFiles.map((file, i) => {
+      {selectedFiles.map((file, i) => {
+        const name = file.name
+        const extension = extractFileExtension(name)
+        const pdfFile = pdfFiles.find((pdf) => pdf.file.name === name)
         return (
-          <React.Fragment key={file.name}>
+          <React.Fragment key={name}>
-            <div className="file-wrapper" id={`file-${file.name}`}>
+            <div
-              {file.isPdf && getPdfPages(file, i)}
+              className={`${styles.fileWrapper} ${styles.scrollTarget}`}
-              {file.isImage && (
+              id={`file-${name}`}
-                <img
+            >
-                  className="file-image"
+              {pdfFile ? (
-                  src={file.objectUrl}
+                getPdfPages(pdfFile, i)
-                  alt={file.name}
+              ) : (
-                />
+                <div className={styles.otherFile}>
-              )}
+                  This is a {extension} file
-              {!(file.isPdf || file.isImage) && (
+                </div>
-                <ExtensionFileBox extension={file.extension} />
               )}
             </div>
-            {i < selectedFiles.length - 1 && <FileDivider />}
+            {i < selectedFiles.length - 1 && (
+              <Divider
+                sx={{
+                  fontSize: '12px',
+                  color: 'rgba(0,0,0,0.15)'
+                }}
+              >
+                File Separator
+              </Divider>
+            )}
           </React.Fragment>
         )
       })}

src/components/DrawPDFFields/style.module.scss

@@ -8,6 +8,17 @@
 }
 
 .pdfImageWrapper {
+  position: relative;
+  -webkit-user-select: none;
+  user-select: none;
+
+  > img {
+    display: block;
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain; /* Ensure the image fits within the container */
+  }
+
   &.drawing {
     cursor: crosshair;
   }
@@ -73,8 +84,35 @@
     justify-content: center;
     align-items: center;
     bottom: -60px;
-    min-width: 193px;
+    min-width: 170px;
     min-height: 30px;
+    background: #fff;
     padding: 5px 0;
   }
 }
+
+.fileWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  position: relative;
+  scroll-margin-top: $header-height + $body-vertical-padding;
+}
+
+.view {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.otherFile {
+  border-radius: 4px;
+  background: rgba(255, 255, 255, 0.5);
+  height: 100px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: rgba(0, 0, 0, 0.25);
+  font-size: 14px;
+}

src/components/ExtensionFileBox.tsx

@@ -1,6 +0,0 @@
-interface ExtensionFileBoxProps {
-  extension: string
-}
-export const ExtensionFileBox = ({ extension }: ExtensionFileBoxProps) => (
-  <div className="extension-file-box">This is a {extension} file</div>
-)

src/components/FileDivider.tsx

@@ -1,12 +0,0 @@
-import Divider from '@mui/material/Divider/Divider'
-
-export const FileDivider = () => (
-  <Divider
-    sx={{
-      fontSize: '12px',
-      color: 'rgba(0,0,0,0.15)'
-    }}
-  >
-    File Separator
-  </Divider>
-)

src/components/FileList/index.tsx

@@ -22,26 +22,26 @@ const FileList = ({
   const isActive = (file: CurrentUserFile) => file.id === currentFile.id
   return (
     <div className={styles.wrap}>
-      <ul className={styles.files}>
+      <div className={styles.container}>
-        {files.map((currentUserFile: CurrentUserFile) => (
+        <ul className={styles.files}>
-          <li
+          {files.map((file: CurrentUserFile) => (
-            key={currentUserFile.id}
+            <li
-            className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
+              key={file.id}
-            onClick={() => setCurrentFile(currentUserFile)}
+              className={`${styles.fileItem} ${isActive(file) && styles.active}`}
-          >
+              onClick={() => setCurrentFile(file)}
-            <div className={styles.fileNumber}>{currentUserFile.id}</div>
+            >
-            <div className={styles.fileInfo}>
+              <div className={styles.fileNumber}>{file.id}</div>
-              <div className={styles.fileName}>{currentUserFile.file.name}</div>
+              <div className={styles.fileInfo}>
-            </div>
+                <div className={styles.fileName}>{file.filename}</div>
+              </div>
 
-            <div className={styles.fileVisual}>
+              <div className={styles.fileVisual}>
-              {currentUserFile.isHashValid && (
+                {file.isHashValid && <FontAwesomeIcon icon={faCheck} />}
-                <FontAwesomeIcon icon={faCheck} />
+              </div>
-              )}
+            </li>
-            </div>
+          ))}
-          </li>
+        </ul>
-        ))}
+      </div>
-      </ul>
       <Button variant="contained" fullWidth onClick={handleDownload}>
         {downloadLabel || 'Download Files'}
       </Button>

src/components/FileList/style.module.scss

@@ -1,3 +1,12 @@
+.container {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  grid-gap: 0px;
+}
+
 .filesPageContainer {
   width: 100%;
   display: grid;
@@ -6,6 +15,18 @@
   flex-grow: 1;
 }
 
+ul {
+  list-style-type: none; /* Removes bullet points */
+  margin: 0; /* Removes default margin */
+  padding: 0; /* Removes default padding */
+}
+
+li {
+  list-style-type: none; /* Removes the bullets */
+  margin: 0; /* Removes any default margin */
+  padding: 0; /* Removes any default padding */
+}
+
 .wrap {
   display: flex;
   flex-direction: column;
@@ -13,16 +34,14 @@
 }
 
 .files {
-  border-radius: 4px;
-  background: white;
-  padding: 15px;
-
   display: flex;
   flex-direction: column;
   width: 100%;
   grid-gap: 15px;
-  overflow-y: auto;
+  max-height: 350px;
-  overflow-x: none;
+  overflow: auto;
+  padding: 0 5px 0 0;
+  margin: 0 -5px 0 0;
 }
 
 .files::-webkit-scrollbar {

src/components/Footer/Footer.tsx

@@ -4,128 +4,125 @@ import styles from './style.module.scss'
 import { Container } from '../Container'
 import nostrImage from '../../assets/images/nostr.gif'
 import { appPublicRoutes } from '../../routes'
-import { createPortal } from 'react-dom'
 
-export const Footer = () =>
+export const Footer = () => (
-  createPortal(
+  <footer className={`${styles.borderTop} ${styles.footer}`}>
-    <footer className={`${styles.borderTop} ${styles.footer}`}>
+    <Container
-      <Container
+      style={{
-        style={{
+        paddingBlock: '50px'
-          paddingBlock: '50px'
+      }}
+    >
+      <Box
+        display={'grid'}
+        sx={{
+          gridTemplateColumns: {
+            xs: '1fr',
+            md: '0.5fr 2fr 0.5fr'
+          },
+          alignItems: {
+            xs: 'center',
+            md: 'start'
+          }
         }}
+        gap={'50px'}
       >
-        <Box
+        <LinkMui
-          display={'grid'}
           sx={{
-            gridTemplateColumns: {
+            justifySelf: {
-              xs: '1fr',
-              md: '0.5fr 2fr 0.5fr'
-            },
-            alignItems: {
               xs: 'center',
               md: 'start'
             }
           }}
-          gap={'50px'}
+          component={Link}
+          to={'/'}
+          className={styles.logo}
         >
-          <LinkMui
+          <img src="/logo.svg" alt="Logo" />
+        </LinkMui>
+        <Box
+          display={'grid'}
+          sx={{
+            gap: '15px',
+            gridTemplateColumns: {
+              xs: '1fr',
+              sm: 'repeat(2, 1fr)',
+              xl: 'repeat(3, 1fr)'
+            },
+            borderBlock: {
+              xs: 'solid 1px rgba(0, 0, 0, 0.1)',
+              md: 'unset'
+            },
+            paddingY: {
+              xs: '10px',
+              md: 'unset'
+            }
+          }}
+          component={'nav'}
+          className={styles.nav}
+        >
+          <Button
             sx={{
-              justifySelf: {
+              justifyContent: 'center'
-                xs: 'center',
-                md: 'start'
-              }
             }}
             component={Link}
             to={'/'}
-            className={styles.logo}
+            variant={'text'}
           >
-            <img src="/logo.svg" alt="Logo" />
+            Home
-          </LinkMui>
+          </Button>
-          <Box
+          <Button
-            display={'grid'}
             sx={{
-              gap: '15px',
+              justifyContent: 'center'
-              gridTemplateColumns: {
-                xs: '1fr',
-                sm: 'repeat(2, 1fr)',
-                xl: 'repeat(3, 1fr)'
-              },
-              borderBlock: {
-                xs: 'solid 1px rgba(0, 0, 0, 0.1)',
-                md: 'unset'
-              },
-              paddingY: {
-                xs: '10px',
-                md: 'unset'
-              }
             }}
-            component={'nav'}
+            component={LinkMui}
-            className={styles.nav}
+            href={appPublicRoutes.docs}
+            target="_blank"
+            variant={'text'}
           >
-            <Button
+            Documentation
-              sx={{
+          </Button>
-                justifyContent: 'center'
+          <Button
-              }}
-              component={Link}
-              to={'/'}
-              variant={'text'}
-            >
-              Home
-            </Button>
-            <Button
-              sx={{
-                justifyContent: 'center'
-              }}
-              component={LinkMui}
-              href={appPublicRoutes.docs}
-              target="_blank"
-              variant={'text'}
-            >
-              Documentation
-            </Button>
-            <Button
-              sx={{
-                justifyContent: 'center'
-              }}
-              component={LinkMui}
-              href={appPublicRoutes.source}
-              target="_blank"
-              variant={'text'}
-            >
-              Source
-            </Button>
-          </Box>
-          <Box
-            className={styles.links}
             sx={{
-              justifySelf: {
+              justifyContent: 'center'
-                xs: 'center',
-                md: 'end'
-              }
             }}
+            component={LinkMui}
+            href={appPublicRoutes.source}
+            target="_blank"
+            variant={'text'}
           >
-            <Button
+            Source
-              component={LinkMui}
+          </Button>
-              href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
-              target="_blank"
-              sx={{
-                minWidth: '45px',
-                padding: '10px'
-              }}
-              variant={'contained'}
-            >
-              <img src={nostrImage} width="25" alt="nostr logo" height="25" />
-            </Button>
-          </Box>
         </Box>
-      </Container>
+        <Box
-      <div className={`${styles.borderTop} ${styles.credits}`}>
+          className={styles.links}
-        Built by&nbsp;
+          sx={{
-        <a href="https://nostrdev.com/" target="_blank">
+            justifySelf: {
-          Nostr Dev
+              xs: 'center',
-        </a>{' '}
+              md: 'end'
-        2024.
+            }
-      </div>
+          }}
-    </footer>,
+        >
-    document.getElementById('root')!
+          <Button
-  )
+            component={LinkMui}
+            href="https://snort.social/npub1yay8e9sqk94jfgdlkpgeelj2t5ddsj2eu0xwt4kh4xw5ses2rauqnstrdv"
+            target="_blank"
+            sx={{
+              minWidth: '45px',
+              padding: '10px'
+            }}
+            variant={'contained'}
+          >
+            <img src={nostrImage} width="25" alt="nostr logo" height="25" />
+          </Button>
+        </Box>
+      </Box>
+    </Container>
+    <div className={`${styles.borderTop} ${styles.credits}`}>
+      Built by&nbsp;
+      <a href="https://nostrdev.com/" target="_blank">
+        Nostr Dev
+      </a>{' '}
+      2024.
+    </div>
+  </footer>
+)

src/components/LoadingSpinner/index.tsx

@@ -1,35 +1,18 @@
 import styles from './style.module.scss'
 
 interface Props {
-  desc?: string
+  desc: string
-  variant?: 'small' | 'default'
 }
 
 export const LoadingSpinner = (props: Props) => {
-  const { desc, variant = 'default' } = props
+  const { desc } = props
 
-  switch (variant) {
+  return (
-    case 'small':
+    <div className={styles.loadingSpinnerOverlay}>
-      return (
+      <div className={styles.loadingSpinnerContainer}>
-        <div
+        <div className={styles.loadingSpinner}></div>
-          className={`${styles.loadingSpinnerContainer}`}
+        {desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
-          data-variant={variant}
+      </div>
-        >
+    </div>
-          <div className={styles.loadingSpinner}></div>
+  )
-        </div>
-      )
-
-    default:
-      return (
-        <div className={styles.loadingSpinnerOverlay}>
-          <div
-            className={styles.loadingSpinnerContainer}
-            data-variant={variant}
-          >
-            <div className={styles.loadingSpinner}></div>
-            {desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>}
-          </div>
-        </div>
-      )
-  }
 }

src/components/LoadingSpinner/style.module.scss

@@ -2,48 +2,34 @@
 
 .loadingSpinnerOverlay {
   position: fixed;
-  inset: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 9999;
-  backdrop-filter: blur(10px);
-}
 
-.loadingSpinnerContainer {
+  .loadingSpinnerContainer {
-  display: flex;
+    display: flex;
-  flex-direction: column;
+    flex-direction: column;
-  align-items: center;
+    align-items: center;
-  justify-content: center;
+    justify-content: center;
-
-  &[data-variant='default'] {
-    width: 100%;
-    max-width: 500px;
-    margin: 25px 20px;
-    background: $overlay-background-color;
-    border-radius: 4px;
-    box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
   }
-  &[data-variant='small'] {
-    min-height: 250px;
-  }
-}
 
-.loadingSpinner {
+  .loadingSpinner {
-  background: url('/favicon.png') no-repeat center / cover;
+    background: url('/favicon.png') no-repeat center / cover;
-  margin: 40px 25px;
+    width: 40px;
-  width: 65px;
+    height: 40px;
-  height: 65px;
+    animation: spin 1s linear infinite;
-  animation: spin 1s linear infinite;
+  }
 }
 
 .loadingSpinnerDesc {
-  width: 100%;
+  color: white;
-  padding: 15px;
+  margin-top: 13px;
-  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;

src/components/MarkFormField/style.module.scss

@@ -1,19 +1,11 @@
-@import '../../styles/sizes.scss';
-
 .container {
+  width: 100%;
   display: flex;
   flex-direction: column;
   position: fixed;
-
+  bottom: 0;
-  @media only screen and (min-width: 768px) {
+  right: 0;
-    bottom: 0;
+  left: 0;
-    right: 0;
-    left: 0;
-  }
-  bottom: $tabs-height + 5px;
-  right: 5px;
-  left: 5px;
-
   align-items: center;
   z-index: 1000;
 
@@ -115,7 +107,7 @@
 .actions {
   background: white;
   width: 100%;
-  border-radius: 5px;
+  border-radius: 4px;
   padding: 10px 20px;
   display: none;
   flex-direction: column;

src/components/PDFView/PdfItem.tsx

@@ -1,13 +1,12 @@
+import { PdfFile } from '../../types/drawing.ts'
 import { CurrentUserMark, Mark } from '../../types/mark.ts'
-import { SigitFile } from '../../utils/file.ts'
-import { ExtensionFileBox } from '../ExtensionFileBox.tsx'
 import PdfPageItem from './PdfPageItem.tsx'
 
 interface PdfItemProps {
   currentUserMarks: CurrentUserMark[]
   handleMarkClick: (id: number) => void
   otherUserMarks: Mark[]
-  file: SigitFile
+  pdfFile: PdfFile
   selectedMark: CurrentUserMark | null
   selectedMarkValue: string
 }
@@ -16,7 +15,7 @@ interface PdfItemProps {
  * Responsible for displaying pages of a single Pdf File.
  */
 const PdfItem = ({
-  file,
+  pdfFile,
   currentUserMarks,
   handleMarkClick,
   selectedMarkValue,
@@ -32,27 +31,19 @@ const PdfItem = ({
   const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
     return marks.filter((mark) => mark.location.page === page)
   }
-  if (file.isPdf) {
+  return pdfFile.pages.map((page, i) => {
-    return file.pages?.map((page, i) => {
+    return (
-      return (
+      <PdfPageItem
-        <PdfPageItem
+        page={page}
-          fileName={file.name}
+        key={i}
-          pageIndex={i}
+        currentUserMarks={filterByPage(currentUserMarks, i)}
-          page={page}
+        handleMarkClick={handleMarkClick}
-          key={i}
+        selectedMarkValue={selectedMarkValue}
-          currentUserMarks={filterByPage(currentUserMarks, i)}
+        selectedMark={selectedMark}
-          handleMarkClick={handleMarkClick}
+        otherUserMarks={filterMarksByPage(otherUserMarks, i)}
-          selectedMarkValue={selectedMarkValue}
+      />
-          selectedMark={selectedMark}
+    )
-          otherUserMarks={filterMarksByPage(otherUserMarks, i)}
+  })
-        />
-      )
-    })
-  } else if (file.isImage) {
-    return <img className="file-image" src={file.objectUrl} alt={file.name} />
-  } else {
-    return <ExtensionFileBox extension={file.extension} />
-  }
 }
 
 export default PdfItem

src/components/PDFView/PdfMarkItem.tsx

@@ -1,56 +1,42 @@
 import { CurrentUserMark } from '../../types/mark.ts'
 import styles from '../DrawPDFFields/style.module.scss'
-import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
+import { inPx } from '../../utils/pdf.ts'
-import { useScale } from '../../hooks/useScale.tsx'
-import { forwardRef } from 'react'
-import { npubToHex } from '../../utils/nostr.ts'
 
 interface PdfMarkItemProps {
   userMark: CurrentUserMark
   handleMarkClick: (id: number) => void
   selectedMarkValue: string
   selectedMark: CurrentUserMark | null
-  pageWidth: number
 }
 
 /**
  * Responsible for display an individual Pdf Mark.
  */
-const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
+const PdfMarkItem = ({
-  (
+  selectedMark,
-    { selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
+  handleMarkClick,
-    ref
+  selectedMarkValue,
-  ) => {
+  userMark
-    const { location } = userMark.mark
+}: PdfMarkItemProps) => {
-    const handleClick = () => handleMarkClick(userMark.mark.id)
+  const { location } = userMark.mark
-    const isEdited = () => selectedMark?.mark.id === userMark.mark.id
+  const handleClick = () => handleMarkClick(userMark.mark.id)
-    const getMarkValue = () =>
+  const isEdited = () => selectedMark?.mark.id === userMark.mark.id
-      isEdited() ? selectedMarkValue : userMark.currentValue
+  const getMarkValue = () =>
-    const { from } = useScale()
+    isEdited() ? selectedMarkValue : userMark.currentValue
-    return (
+  return (
-      <div
+    <div
-        ref={ref}
+      onClick={handleClick}
-        onClick={handleClick}
+      className={`${styles.drawingRectangle} ${isEdited() && styles.edited}`}
-        className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
+      style={{
-        style={{
+        left: inPx(location.left),
-          backgroundColor: selectedMark?.mark.npub
+        top: inPx(location.top),
-            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
+        width: inPx(location.width),
-            : undefined,
+        height: inPx(location.height)
-          borderColor: selectedMark?.mark.npub
+      }}
-            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
+    >
-            : undefined,
+      {getMarkValue()}
-          left: inPx(from(pageWidth, location.left)),
+    </div>
-          top: inPx(from(pageWidth, location.top)),
+  )
-          width: inPx(from(pageWidth, location.width)),
+}
-          height: inPx(from(pageWidth, location.height)),
-          fontFamily: FONT_TYPE,
-          fontSize: inPx(from(pageWidth, FONT_SIZE))
-        }}
-      >
-        {getMarkValue()}
-      </div>
-    )
-  }
-)
 
 export default PdfMarkItem

src/components/PDFView/PdfMarking.tsx

@@ -10,16 +10,12 @@ import {
 import { EMPTY } from '../../utils/const.ts'
 import { Container } from '../Container'
 import signPageStyles from '../../pages/sign/style.module.scss'
+import styles from './style.module.scss'
 import { CurrentUserFile } from '../../types/file.ts'
 import FileList from '../FileList'
 import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
 import { UsersDetails } from '../UsersDetails.tsx'
 import { Meta } from '../../types'
-import {
-  faCircleInfo,
-  faFileDownload,
-  faPen
-} from '@fortawesome/free-solid-svg-icons'
 
 interface PdfMarkingProps {
   currentUserMarks: CurrentUserMark[]
@@ -28,7 +24,7 @@ interface PdfMarkingProps {
   meta: Meta | null
   otherUserMarks: Mark[]
   setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
-  setIsMarksCompleted: (isMarksCompleted: boolean) => void
+  setIsReadyToSign: (isReadyToSign: boolean) => void
   setUpdatedMarks: (markToUpdate: Mark) => void
 }
 
@@ -42,7 +38,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
   const {
     files,
     currentUserMarks,
-    setIsMarksCompleted,
+    setIsReadyToSign,
     setCurrentUserMarks,
     setUpdatedMarks,
     handleDownload,
@@ -106,7 +102,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
     )
     setCurrentUserMarks(updatedCurrentUserMarks)
     setSelectedMark(null)
-    setIsMarksCompleted(true)
+    setIsReadyToSign(true)
     setUpdatedMarks(updatedMark.mark)
   }
 
@@ -137,21 +133,22 @@ const PdfMarking = (props: PdfMarkingProps) => {
             </div>
           }
           right={meta !== null && <UsersDetails meta={meta} />}
-          leftIcon={faFileDownload}
-          centerIcon={faPen}
-          rightIcon={faCircleInfo}
         >
-          {currentUserMarks?.length > 0 && (
+          <div className={styles.container}>
-            <PdfView
+            {currentUserMarks?.length > 0 && (
-              currentFile={currentFile}
+              <div className={styles.pdfView}>
-              files={files}
+                <PdfView
-              handleMarkClick={handleMarkClick}
+                  currentFile={currentFile}
-              selectedMarkValue={selectedMarkValue}
+                  files={files}
-              selectedMark={selectedMark}
+                  handleMarkClick={handleMarkClick}
-              currentUserMarks={currentUserMarks}
+                  selectedMarkValue={selectedMarkValue}
-              otherUserMarks={otherUserMarks}
+                  selectedMark={selectedMark}
-            />
+                  currentUserMarks={currentUserMarks}
-          )}
+                  otherUserMarks={otherUserMarks}
+                />
+              </div>
+            )}
+          </div>
         </StickySideColumns>
         {selectedMark !== null && (
           <MarkFormField

src/components/PDFView/PdfPageItem.tsx

@@ -4,11 +4,8 @@ import { CurrentUserMark, Mark } from '../../types/mark.ts'
 import PdfMarkItem from './PdfMarkItem.tsx'
 import { useEffect, useRef } from 'react'
 import pdfViewStyles from './style.module.scss'
-import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
+import { inPx } from '../../utils/pdf.ts'
-import { useScale } from '../../hooks/useScale.tsx'
 interface PdfPageProps {
-  fileName: string
-  pageIndex: number
   currentUserMarks: CurrentUserMark[]
   handleMarkClick: (id: number) => void
   otherUserMarks: Mark[]
@@ -21,8 +18,6 @@ interface PdfPageProps {
  * Responsible for rendering a single Pdf Page and its Marks
  */
 const PdfPageItem = ({
-  fileName,
-  pageIndex,
   page,
   currentUserMarks,
   handleMarkClick,
@@ -33,49 +28,45 @@ const PdfPageItem = ({
   useEffect(() => {
     if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
       markRefs.current[selectedMark.id]?.scrollIntoView({
-        behavior: 'smooth'
+        behavior: 'smooth',
+        block: 'end'
       })
     }
   }, [selectedMark])
   const markRefs = useRef<(HTMLDivElement | null)[]>([])
-  const { from } = useScale()
-
   return (
-    <div className={`image-wrapper ${styles.pdfImageWrapper}`}>
+    <div
-      <img
+      className={styles.pdfImageWrapper}
-        draggable="false"
+      style={{
-        src={page.image}
+        border: '1px solid #c4c4c4'
-        alt={`page ${pageIndex + 1} of ${fileName}`}
+      }}
-      />
+    >
+      <img draggable="false" src={page.image} style={{ width: '100%' }} />
       {currentUserMarks.map((m, i) => (
-        <PdfMarkItem
+        <div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
-          key={i}
+          <PdfMarkItem
-          ref={(el) => (markRefs.current[m.id] = el)}
-          handleMarkClick={handleMarkClick}
-          selectedMarkValue={selectedMarkValue}
-          userMark={m}
-          selectedMark={selectedMark}
-          pageWidth={page.width}
-        />
-      ))}
-      {otherUserMarks.map((m, i) => {
-        return (
-          <div
             key={i}
-            className={pdfViewStyles.otherUserMarksDisplay}
+            handleMarkClick={handleMarkClick}
-            style={{
+            selectedMarkValue={selectedMarkValue}
-              left: inPx(from(page.width, m.location.left)),
+            userMark={m}
-              top: inPx(from(page.width, m.location.top)),
+            selectedMark={selectedMark}
-              width: inPx(from(page.width, m.location.width)),
+          />
-              height: inPx(from(page.width, m.location.height)),
+        </div>
-              fontFamily: FONT_TYPE,
+      ))}
-              fontSize: inPx(from(page.width, FONT_SIZE))
+      {otherUserMarks.map((m, i) => (
-            }}
+        <div
-          >
+          key={i}
-            {m.value}
+          className={pdfViewStyles.otherUserMarksDisplay}
-          </div>
+          style={{
-        )
+            left: inPx(m.location.left),
-      })}
+            top: inPx(m.location.top),
+            width: inPx(m.location.width),
+            height: inPx(m.location.height)
+          }}
+        >
+          {m.value}
+        </div>
+      ))}
     </div>
   )
 }

src/components/PDFView/index.tsx

@@ -1,10 +1,8 @@
+import { Divider } from '@mui/material'
 import PdfItem from './PdfItem.tsx'
 import { CurrentUserMark, Mark } from '../../types/mark.ts'
 import { CurrentUserFile } from '../../types/file.ts'
 import { useEffect, useRef } from 'react'
-import { FileDivider } from '../FileDivider.tsx'
-import React from 'react'
-import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
 
 interface PdfViewProps {
   currentFile: CurrentUserFile | null
@@ -31,7 +29,10 @@ const PdfView = ({
   const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
   useEffect(() => {
     if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
-      pdfRefs.current[currentFile.id]?.scrollIntoView({ behavior: 'smooth' })
+      pdfRefs.current[currentFile.id]?.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end'
+      })
     }
   }, [currentFile])
   const filterByFile = (
@@ -48,36 +49,29 @@ const PdfView = ({
   const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
     index !== files.length - 1
   return (
-    <div className="files-wrapper">
+    <>
-      {files.length > 0 ? (
+      {files.map((currentUserFile, index, arr) => {
-        files.map((currentUserFile, index, arr) => {
+        const { hash, pdfFile, id } = currentUserFile
-          const { hash, file, id } = currentUserFile
+        if (!hash) return
-
+        return (
-          if (!hash) return
+          <div
-          return (
+            id={pdfFile.file.name}
-            <React.Fragment key={index}>
+            ref={(el) => (pdfRefs.current[id] = el)}
-              <div
+            key={index}
-                id={file.name}
+          >
-                className="file-wrapper"
+            <PdfItem
-                ref={(el) => (pdfRefs.current[id] = el)}
+              pdfFile={pdfFile}
-              >
+              currentUserMarks={filterByFile(currentUserMarks, hash)}
-                <PdfItem
+              selectedMark={selectedMark}
-                  file={file}
+              handleMarkClick={handleMarkClick}
-                  currentUserMarks={filterByFile(currentUserMarks, hash)}
+              selectedMarkValue={selectedMarkValue}
-                  selectedMark={selectedMark}
+              otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
-                  handleMarkClick={handleMarkClick}
+            />
-                  selectedMarkValue={selectedMarkValue}
+            {isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
-                  otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
+          </div>
-                />
+        )
-              </div>
+      })}
-              {isNotLastPdfFile(index, arr) && <FileDivider />}
+    </>
-            </React.Fragment>
-          )
-        })
-      ) : (
-        <LoadingSpinner variant="small" />
-      )}
-    </div>
   )
 }
 

src/components/PDFView/style.module.scss

@@ -1,7 +1,33 @@
+.imageWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%; /* Adjust as needed */
+  height: 100%; /* Adjust as needed */
+  overflow: hidden; /* Ensure no overflow */
+  border: 1px solid #ccc; /* Optional: for visual debugging */
+  background-color: #e0f7fa; /* Optional: for visual debugging */
+}
+
+.image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; /* Ensure the image fits within the container */
+}
+
 .container {
   display: flex;
   width: 100%;
   flex-direction: column;
+
+}
+
+.pdfView {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  gap: 10px;
 }
 
 .otherUserMarksDisplay {

src/components/UsersDetails.tsx/index.tsx

@@ -1,6 +1,7 @@
 import { Divider, Tooltip } from '@mui/material'
 import { useSigitProfiles } from '../../hooks/useSigitProfiles'
 import {
+  extractFileExtensions,
   formatTimestamp,
   fromUnixTimestamp,
   hexToNpub,
@@ -27,7 +28,6 @@ import { State } from '../../store/rootReducer'
 import { TooltipChild } from '../TooltipChild'
 import { DisplaySigner } from '../DisplaySigner'
 import { Meta } from '../../types'
-import { extractFileExtensions } from '../../utils/file'
 
 interface UsersDetailsProps {
   meta: Meta
@@ -118,44 +118,32 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
                 </Tooltip>
               )
             })}
+            {viewers.map((signer) => {
+              const pubkey = npubToHex(signer)!
+              const profile = profiles[pubkey]
+
+              return (
+                <Tooltip
+                  key={signer}
+                  title={
+                    profile?.display_name || profile?.name || shorten(pubkey)
+                  }
+                  placement="top"
+                  arrow
+                  disableInteractive
+                >
+                  <TooltipChild>
+                    <DisplaySigner
+                      status={SignStatus.Viewer}
+                      profile={profile}
+                      pubkey={pubkey}
+                    />
+                  </TooltipChild>
+                </Tooltip>
+              )
+            })}
           </UserAvatarGroup>
         </div>
-
-        {viewers.length > 0 && (
-          <>
-            <p>Viewers</p>
-            <div className={styles.users}>
-              <UserAvatarGroup max={20}>
-                {viewers.map((signer) => {
-                  const pubkey = npubToHex(signer)!
-                  const profile = profiles[pubkey]
-
-                  return (
-                    <Tooltip
-                      key={signer}
-                      title={
-                        profile?.display_name ||
-                        profile?.name ||
-                        shorten(pubkey)
-                      }
-                      placement="top"
-                      arrow
-                      disableInteractive
-                    >
-                      <TooltipChild>
-                        <DisplaySigner
-                          status={SignStatus.Viewer}
-                          profile={profile}
-                          pubkey={pubkey}
-                        />
-                      </TooltipChild>
-                    </Tooltip>
-                  )
-                })}
-              </UserAvatarGroup>
-            </div>
-          </>
-        )}
       </div>
       <div className={styles.section}>
         <p>Details</p>

src/controllers/RelayController.ts

@@ -1,9 +1,5 @@
 import { Event, Filter, Relay } from 'nostr-tools'
-import {
+import { normalizeWebSocketURL, timeout } from '../utils'
-  settleAllFullfilfedPromises,
-  normalizeWebSocketURL,
-  timeout
-} from '../utils'
 import { SIGIT_RELAY } from '../utils/const'
 
 /**
@@ -109,11 +105,24 @@ export class RelayController {
     }
 
     // connect to all specified relays
-    const relays = await settleAllFullfilfedPromises(
+    const relayPromises = relayUrls.map((relayUrl) =>
-      relayUrls,
+      this.connectRelay(relayUrl)
-      this.connectRelay
     )
 
+    // Use Promise.allSettled to wait for all promises to settle
+    const results = await Promise.allSettled(relayPromises)
+
+    // Extract non-null values from fulfilled promises in a single pass
+    const relays = results.reduce<Relay[]>((acc, result) => {
+      if (result.status === 'fulfilled') {
+        const value = result.value
+        if (value) {
+          acc.push(value)
+        }
+      }
+      return acc
+    }, [])
+
     // Check if any relays are connected
     if (relays.length === 0) {
       throw new Error('No relay is connected to fetch events!')
@@ -219,10 +228,23 @@ export class RelayController {
     }
 
     // connect to all specified relays
-    const relays = await settleAllFullfilfedPromises(
+    const relayPromises = relayUrls.map((relayUrl) => {
-      relayUrls,
+      return this.connectRelay(relayUrl)
-      this.connectRelay
+    })
-    )
+
+    // Use Promise.allSettled to wait for all promises to settle
+    const results = await Promise.allSettled(relayPromises)
+
+    // Extract non-null values from fulfilled promises in a single pass
+    const relays = results.reduce<Relay[]>((acc, result) => {
+      if (result.status === 'fulfilled') {
+        const value = result.value
+        if (value) {
+          acc.push(value)
+        }
+      }
+      return acc
+    }, [])
 
     // Check if any relays are connected
     if (relays.length === 0) {
@@ -270,11 +292,24 @@ export class RelayController {
     }
 
     // connect to all specified relays
-    const relays = await settleAllFullfilfedPromises(
+    const relayPromises = relayUrls.map((relayUrl) =>
-      relayUrls,
+      this.connectRelay(relayUrl)
-      this.connectRelay
     )
 
+    // Use Promise.allSettled to wait for all promises to settle
+    const results = await Promise.allSettled(relayPromises)
+
+    // Extract non-null values from fulfilled promises in a single pass
+    const relays = results.reduce<Relay[]>((acc, result) => {
+      if (result.status === 'fulfilled') {
+        const value = result.value
+        if (value) {
+          acc.push(value)
+        }
+      }
+      return acc
+    }, [])
+
     // Check if any relays are connected
     if (relays.length === 0) {
       throw new Error('No relay is connected to publish event!')

src/hooks/useScale.tsx

@@ -1,46 +0,0 @@
-import { useEffect, useState } from 'react'
-import { singletonHook } from 'react-singleton-hook'
-import { getInnerContentWidth } from '../utils/pdf'
-
-const noScaleInit = {
-  to: (_: number, v: number) => v,
-  from: (_: number, v: number) => v
-}
-
-const useScaleImpl = () => {
-  const [width, setWidth] = useState(getInnerContentWidth())
-
-  // Get the scale based on the original width
-  const scale = (originalWidth: number) => {
-    return width / originalWidth
-  }
-
-  // Get the original pixel value
-  const to = (originalWidth: number, value: number) => {
-    return value / scale(originalWidth)
-  }
-
-  // Get the scaled pixel value
-  const from = (originalWidth: number, value: number) => {
-    return value * scale(originalWidth)
-  }
-
-  const resize = () => {
-    setWidth(getInnerContentWidth())
-  }
-
-  useEffect(() => {
-    resize()
-
-    window.addEventListener('resize', resize)
-    return () => {
-      window.removeEventListener('resize', resize)
-    }
-  }, [])
-
-  return { to, from }
-}
-
-export const useScale = singletonHook(noScaleInit, useScaleImpl, {
-  unmountIfNoConsumers: true
-})

src/hooks/useSigitMeta.tsx

@@ -11,6 +11,7 @@ import {
   hexToNpub,
   parseNostrEvent,
   parseCreateSignatureEventContent,
+  SigitMetaParseError,
   SigitStatus,
   SignStatus
 } from '../utils'
@@ -20,7 +21,6 @@ import { Event } from 'nostr-tools'
 import store from '../store/store'
 import { AuthState } from '../store/auth/types'
 import { NostrController } from '../controllers'
-import { MetaParseError } from '../types/errors/MetaParseError'
 
 /**
  * Flattened interface that combines properties `Meta`, `CreateSignatureEventContent`,
@@ -247,7 +247,7 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
           )
         }
       } catch (error) {
-        if (error instanceof MetaParseError) {
+        if (error instanceof SigitMetaParseError) {
           toast.error(error.message)
         }
         console.error(error)

src/layouts/Main.tsx

@@ -26,6 +26,7 @@ import {
 } from '../utils'
 import { useAppSelector } from '../hooks'
 import styles from './style.module.scss'
+import { Footer } from '../components/Footer/Footer'
 
 export const MainLayout = () => {
   const dispatch: Dispatch = useDispatch()
@@ -159,6 +160,7 @@ export const MainLayout = () => {
       >
         <Outlet />
       </main>
+      <Footer />
     </>
   )
 }

src/layouts/StickySideColumns.module.scss

@@ -3,33 +3,9 @@
 
 .container {
   display: grid;
-
+  grid-template-columns: 0.75fr 1.5fr 0.75fr;
-  @media only screen and (max-width: 767px) {
+  grid-gap: 30px;
-    gap: 20px;
+  flex-grow: 1;
-    grid-auto-flow: column;
-    grid-auto-columns: 100%;
-
-    // Hide Scrollbar and let's use tabs to navigate
-    -ms-overflow-style: none; /* Internet Explorer 10+ */
-    scrollbar-width: none; /* Firefox */
-    &::-webkit-scrollbar {
-      display: none; /* Safari and Chrome */
-    }
-    overflow-x: auto;
-    overscroll-behavior-inline: contain;
-    scroll-snap-type: inline mandatory;
-
-    > * {
-      scroll-margin-top: $header-height + $body-vertical-padding;
-      scroll-snap-align: start;
-      scroll-snap-stop: always; // Touch devices will always stop on each element
-    }
-  }
-
-  @media only screen and (min-width: 768px) {
-    grid-template-columns: 0.75fr 1.5fr 0.75fr;
-    gap: 30px;
-  }
 }
 
 .sidesWrap {
@@ -40,58 +16,21 @@
 }
 
 .sides {
-  @media only screen and (min-width: 768px) {
+  position: sticky;
-    position: sticky;
+  top: $header-height + $body-vertical-padding;
-    top: $header-height + $body-vertical-padding;
-  }
-  > :first-child {
-    max-height: calc(
-      100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
-    );
-  }
 }
 
-.scrollAdjust {
+.files {
-  @media only screen and (max-width: 767px) {
+  display: flex;
-    max-height: calc(
+  flex-direction: column;
-      100svh - $header-height - $body-vertical-padding * 2 - $tabs-height
+  grid-gap: 15px;
-    );
-    overflow-y: auto;
-  }
 }
-
 .content {
-  @media only screen and (min-width: 768px) {
+  padding: 10px;
-    padding: 10px;
+  border: 10px solid $overlay-background-color;
-    border: 10px solid $overlay-background-color;
+  border-radius: 4px;
-    border-radius: 4px;
+
-  }
+  max-width: 590px;
-}
+  width: 590px;
-
+  margin: 0 auto;
-.navTabs {
-  display: none;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  height: $tabs-height;
-  z-index: 2;
-  background: $overlay-background-color;
-  box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
-
-  padding: 5px;
-  gap: 5px;
-
-  @media only screen and (max-width: 767px) {
-    display: flex;
-  }
-
-  > li {
-    flex-grow: 1;
-  }
-}
-
-.active {
-  background-color: $primary-main !important;
-  color: white !important;
 }

src/layouts/StickySideColumns.tsx

@@ -1,147 +1,26 @@
-import {
+import { PropsWithChildren, ReactNode } from 'react'
-  PropsWithChildren,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState
-} from 'react'
 
 import styles from './StickySideColumns.module.scss'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
-import { Button } from '@mui/material'
 
 interface StickySideColumnsProps {
-  left: ReactNode
+  left?: ReactNode
-  right: ReactNode
+  right?: ReactNode
-  leftIcon: IconDefinition
-  centerIcon: IconDefinition
-  rightIcon: IconDefinition
 }
 
-const DEFAULT_TAB = 'nav-content'
 export const StickySideColumns = ({
   left,
   right,
-  leftIcon,
-  centerIcon,
-  rightIcon,
   children
 }: PropsWithChildren<StickySideColumnsProps>) => {
-  const [tab, setTab] = useState(DEFAULT_TAB)
-  const ref = useRef<HTMLDivElement>(null)
-  const tabsRefs = useRef<{ [id: string]: HTMLDivElement | null }>({})
-  const handleNavClick = (id: string) => {
-    if (ref.current && tabsRefs.current) {
-      const x = tabsRefs.current[id]?.offsetLeft
-      ref.current.scrollTo({
-        left: x,
-        behavior: 'smooth'
-      })
-    }
-  }
-  const isActive = (id: string) => id === tab
-
-  useEffect(() => {
-    setTab(DEFAULT_TAB)
-    handleNavClick(DEFAULT_TAB)
-  }, [])
-
-  useEffect(() => {
-    const tabs = tabsRefs.current
-    // Set up the observer
-    const observer = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          if (entry.isIntersecting) {
-            setTab(entry.target.id)
-          }
-        })
-      },
-      {
-        root: ref.current,
-        threshold: 0.5,
-        rootMargin: '-20px'
-      }
-    )
-
-    if (tabs) {
-      Object.values(tabs).forEach((tab) => {
-        if (tab) observer.observe(tab)
-      })
-    }
-
-    return () => {
-      if (tabs) {
-        Object.values(tabs).forEach((tab) => {
-          if (tab) observer.unobserve(tab)
-        })
-      }
-    }
-  }, [])
-
   return (
-    <>
+    <div className={styles.container}>
-      <div className={styles.container} ref={ref}>
+      <div className={`${styles.sidesWrap} ${styles.files}`}>
-        <div
+        <div className={styles.sides}>{left}</div>
-          id="nav-left"
-          className={styles.sidesWrap}
-          ref={(tab) => (tabsRefs.current['nav-left'] = tab)}
-        >
-          <div className={styles.sides}>{left}</div>
-        </div>
-        <div
-          id="nav-content"
-          className={styles.scrollAdjust}
-          ref={(tab) => (tabsRefs.current['nav-content'] = tab)}
-        >
-          <div id="content-preview" className={styles.content}>
-            {children}
-          </div>
-        </div>
-        <div
-          id="nav-right"
-          className={styles.sidesWrap}
-          ref={(tab) => (tabsRefs.current['nav-right'] = tab)}
-        >
-          <div className={styles.sides}>{right}</div>
-        </div>
       </div>
-      <ul className={styles.navTabs}>
+      <div className={styles.content}>{children}</div>
-        <li>
+      <div className={styles.sidesWrap}>
-          <Button
+        <div className={styles.sides}>{right}</div>
-            fullWidth
+      </div>
-            variant="text"
+    </div>
-            onClick={() => handleNavClick('nav-left')}
-            className={`${isActive('nav-left') && styles.active}`}
-            aria-label="nav left"
-          >
-            <FontAwesomeIcon icon={leftIcon} />
-          </Button>
-        </li>
-        <li>
-          <Button
-            fullWidth
-            variant="text"
-            onClick={() => handleNavClick('nav-content')}
-            className={`${isActive('nav-content') && styles.active}`}
-            aria-label="nav middle"
-          >
-            <FontAwesomeIcon icon={centerIcon} />
-          </Button>
-        </li>
-        <li>
-          <Button
-            fullWidth
-            variant="text"
-            onClick={() => handleNavClick('nav-right')}
-            className={`${isActive('nav-right') && styles.active}`}
-            aria-label="nav right"
-          >
-            <FontAwesomeIcon icon={rightIcon} />
-          </Button>
-        </li>
-      </ul>
-    </>
   )
 }

src/layouts/style.module.scss

@@ -4,4 +4,5 @@
 .main {
   flex-grow: 1;
   padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
+  background-color: $body-background-color;
 }

src/pages/create/index.tsx

@@ -1,13 +1,20 @@
-import styles from './style.module.scss'
+import {
-import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
+  Button,
+  FormHelperText,
+  ListItemIcon,
+  ListItemText,
+  MenuItem,
+  Select,
+  TextField,
+  Tooltip
+} from '@mui/material'
 import type { Identifier, XYCoord } from 'dnd-core'
 import saveAs from 'file-saver'
 import JSZip from 'jszip'
 import { Event, kinds } from 'nostr-tools'
 import { useEffect, useRef, useState } from 'react'
 import { DndProvider, useDrag, useDrop } from 'react-dnd'
-import { MultiBackend } from 'react-dnd-multi-backend'
+import { HTML5Backend } from 'react-dnd-html5-backend'
-import { HTML5toTouch } from 'rdndmb-html5-to-touch'
 import { useSelector } from 'react-redux'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
@@ -42,8 +49,9 @@ import {
   uploadToFileStorage
 } from '../../utils'
 import { Container } from '../../components/Container'
+import styles from './style.module.scss'
 import fileListStyles from '../../components/FileList/style.module.scss'
-import { DrawTool, MarkType } from '../../types/drawing'
+import { DrawTool, MarkType, PdfFile } from '../../types/drawing'
 import { DrawPDFFields } from '../../components/DrawPDFFields'
 import { Mark } from '../../types/mark.ts'
 import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
@@ -58,8 +66,6 @@ import {
   faCreditCard,
   faEllipsis,
   faEye,
-  faFile,
-  faFileCirclePlus,
   faGripLines,
   faHeading,
   faIdCard,
@@ -74,11 +80,9 @@ import {
   faStamp,
   faT,
   faTableCellsLarge,
-  faToolbox,
   faTrash,
   faUpload
 } from '@fortawesome/free-solid-svg-icons'
-import { SigitFile } from '../../utils/file.ts'
 
 export const CreatePage = () => {
   const navigate = useNavigate()
@@ -121,115 +125,115 @@ export const CreatePage = () => {
   const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
     {}
   )
-  const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
+  const [drawnPdfs, setDrawnPdfs] = useState<PdfFile[]>([])
 
   const [selectedTool, setSelectedTool] = useState<DrawTool>()
   const [toolbox] = useState<DrawTool[]>([
     {
       identifier: MarkType.TEXT,
-      icon: faT,
+      icon: <FontAwesomeIcon icon={faT} />,
       label: 'Text',
       active: true
     },
     {
       identifier: MarkType.SIGNATURE,
-      icon: faSignature,
+      icon: <FontAwesomeIcon icon={faSignature} />,
       label: 'Signature',
       active: false
     },
     {
       identifier: MarkType.JOBTITLE,
-      icon: faBriefcase,
+      icon: <FontAwesomeIcon icon={faBriefcase} />,
       label: 'Job Title',
       active: false
     },
     {
       identifier: MarkType.FULLNAME,
-      icon: faIdCard,
+      icon: <FontAwesomeIcon icon={faIdCard} />,
       label: 'Full Name',
       active: false
     },
     {
       identifier: MarkType.INITIALS,
-      icon: faHeading,
+      icon: <FontAwesomeIcon icon={faHeading} />,
       label: 'Initials',
       active: false
     },
     {
       identifier: MarkType.DATETIME,
-      icon: faClock,
+      icon: <FontAwesomeIcon icon={faClock} />,
       label: 'Date Time',
       active: false
     },
     {
       identifier: MarkType.DATE,
-      icon: faCalendarDays,
+      icon: <FontAwesomeIcon icon={faCalendarDays} />,
       label: 'Date',
       active: false
     },
     {
       identifier: MarkType.NUMBER,
-      icon: fa1,
+      icon: <FontAwesomeIcon icon={fa1} />,
       label: 'Number',
       active: false
     },
     {
       identifier: MarkType.IMAGES,
-      icon: faImage,
+      icon: <FontAwesomeIcon icon={faImage} />,
       label: 'Images',
       active: false
     },
     {
       identifier: MarkType.CHECKBOX,
-      icon: faSquareCheck,
+      icon: <FontAwesomeIcon icon={faSquareCheck} />,
       label: 'Checkbox',
       active: false
     },
     {
       identifier: MarkType.MULTIPLE,
-      icon: faCheckDouble,
+      icon: <FontAwesomeIcon icon={faCheckDouble} />,
       label: 'Multiple',
       active: false
     },
     {
       identifier: MarkType.FILE,
-      icon: faPaperclip,
+      icon: <FontAwesomeIcon icon={faPaperclip} />,
       label: 'File',
       active: false
     },
     {
       identifier: MarkType.RADIO,
-      icon: faCircleDot,
+      icon: <FontAwesomeIcon icon={faCircleDot} />,
       label: 'Radio',
       active: false
     },
     {
       identifier: MarkType.SELECT,
-      icon: faSquareCaretDown,
+      icon: <FontAwesomeIcon icon={faSquareCaretDown} />,
       label: 'Select',
       active: false
     },
     {
       identifier: MarkType.CELLS,
-      icon: faTableCellsLarge,
+      icon: <FontAwesomeIcon icon={faTableCellsLarge} />,
       label: 'Cells',
       active: false
     },
     {
       identifier: MarkType.STAMP,
-      icon: faStamp,
+      icon: <FontAwesomeIcon icon={faStamp} />,
       label: 'Stamp',
       active: false
     },
     {
       identifier: MarkType.PAYMENT,
-      icon: faCreditCard,
+      icon: <FontAwesomeIcon icon={faCreditCard} />,
       label: 'Payment',
       active: false
     },
     {
       identifier: MarkType.PHONE,
-      icon: faPhone,
+      icon: <FontAwesomeIcon icon={faPhone} />,
       label: 'Phone',
       active: false
     }
@@ -452,8 +456,10 @@ export const CreatePage = () => {
       return false
     }
 
-    if (!users.some((u) => u.role === UserRole.signer)) {
+    if (users.length === 0) {
-      toast.error('No signer is provided. At least add one signer.')
+      toast.error(
+        'No signer/viewer is provided. At least add one signer or viewer.'
+      )
       return false
     }
 
@@ -501,31 +507,26 @@ export const CreatePage = () => {
   }
 
   const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
-    return drawnFiles
+    return drawnPdfs
-      .flatMap((file) => {
+      .flatMap((drawnPdf) => {
-        const fileHash = fileHashes[file.name]
+        const fileHash = fileHashes[drawnPdf.file.name]
-        return (
+        return drawnPdf.pages.flatMap((page, index) => {
-          file.pages?.flatMap((page, index) => {
+          return page.drawnFields.map((drawnField) => {
-            return page.drawnFields.map((drawnField) => {
+            return {
-              if (!drawnField.counterpart) {
+              type: drawnField.type,
-                throw new Error('Missing counterpart')
+              location: {
-              }
+                page: index,
-              return {
+                top: drawnField.top,
-                type: drawnField.type,
+                left: drawnField.left,
-                location: {
+                height: drawnField.height,
-                  page: index,
+                width: drawnField.width
-                  top: drawnField.top,
+              },
-                  left: drawnField.left,
+              npub: drawnField.counterpart,
-                  height: drawnField.height,
+              pdfFileHash: fileHash,
-                  width: drawnField.width
+              fileName: drawnPdf.file.name
-                },
+            }
-                npub: drawnField.counterpart,
+          })
-                pdfFileHash: fileHash,
+        })
-                fileName: file.name
-              }
-            })
-          }) || []
-        )
       })
       .map((mark, index) => {
         return { ...mark, id: index }
@@ -666,7 +667,6 @@ export const CreatePage = () => {
   }
 
   const generateCreateSignature = async (
-    markConfig: Mark[],
     fileHashes: {
       [key: string]: string
     },
@@ -674,6 +674,7 @@ export const CreatePage = () => {
   ) => {
     const signers = users.filter((user) => user.role === UserRole.signer)
     const viewers = users.filter((user) => user.role === UserRole.viewer)
+    const markConfig = createMarks(fileHashes)
 
     const content: CreateSignatureEventContent = {
       signers: signers.map((signer) => hexToNpub(signer.pubkey)),
@@ -717,133 +718,136 @@ export const CreatePage = () => {
   }
 
   const handleCreate = async () => {
-    try {
+    if (!validateInputs()) return
-      if (!validateInputs()) return
 
-      setIsLoading(true)
+    setIsLoading(true)
-      setLoadingSpinnerDesc('Generating file hashes')
+    setLoadingSpinnerDesc('Generating file hashes')
-      const fileHashes = await generateFileHashes()
+    const fileHashes = await generateFileHashes()
-      if (!fileHashes) return
+    if (!fileHashes) {
+      setIsLoading(false)
+      return
+    }
 
-      setLoadingSpinnerDesc('Generating encryption key')
+    setLoadingSpinnerDesc('Generating encryption key')
-      const encryptionKey = await generateEncryptionKey()
+    const encryptionKey = await generateEncryptionKey()
 
-      if (await isOnline()) {
+    if (await isOnline()) {
-        setLoadingSpinnerDesc('generating files.zip')
+      setLoadingSpinnerDesc('generating files.zip')
-        const arrayBuffer = await generateFilesZip()
+      const arrayBuffer = await generateFilesZip()
-        if (!arrayBuffer) return
+      if (!arrayBuffer) {
+        setIsLoading(false)
+        return
+      }
 
-        setLoadingSpinnerDesc('Encrypting files.zip')
+      setLoadingSpinnerDesc('Encrypting files.zip')
-        const encryptedArrayBuffer = await encryptZipFile(
+      const encryptedArrayBuffer = await encryptZipFile(
-          arrayBuffer,
+        arrayBuffer,
-          encryptionKey
+        encryptionKey
-        )
+      )
 
-        const markConfig = createMarks(fileHashes)
+      setLoadingSpinnerDesc('Uploading files.zip to file storage')
+      const fileUrl = await uploadFile(encryptedArrayBuffer)
+      if (!fileUrl) {
+        setIsLoading(false)
+        return
+      }
 
-        setLoadingSpinnerDesc('Uploading files.zip to file storage')
+      setLoadingSpinnerDesc('Generating create signature')
-        const fileUrl = await uploadFile(encryptedArrayBuffer)
+      const createSignature = await generateCreateSignature(fileHashes, fileUrl)
-        if (!fileUrl) return
+      if (!createSignature) {
+        setIsLoading(false)
+        return
+      }
 
-        setLoadingSpinnerDesc('Generating create signature')
+      setLoadingSpinnerDesc('Generating keys for decryption')
-        const createSignature = await generateCreateSignature(
-          markConfig,
-          fileHashes,
-          fileUrl
-        )
-        if (!createSignature) return
 
-        setLoadingSpinnerDesc('Generating keys for decryption')
+      // generate key pairs for decryption
+      const pubkeys = users.map((user) => user.pubkey)
+      // also add creator in the list
+      if (pubkeys.includes(usersPubkey!)) {
+        pubkeys.push(usersPubkey!)
+      }
 
-        // generate key pairs for decryption
+      const keys = await generateKeys(pubkeys, encryptionKey)
-        const pubkeys = users.map((user) => user.pubkey)
-        // also add creator in the list
-        if (pubkeys.includes(usersPubkey!)) {
-          pubkeys.push(usersPubkey!)
-        }
 
-        const keys = await generateKeys(pubkeys, encryptionKey)
+      if (!keys) {
-        if (!keys) return
+        setIsLoading(false)
+        return
+      }
+      const meta: Meta = {
+        createSignature,
+        keys,
+        modifiedAt: unixNow(),
+        docSignatures: {}
+      }
 
-        const meta: Meta = {
+      setLoadingSpinnerDesc('Updating user app data')
-          createSignature,
+      const event = await updateUsersAppData(meta)
-          keys,
+      if (!event) {
-          modifiedAt: unixNow(),
+        setIsLoading(false)
-          docSignatures: {}
+        return
-        }
+      }
 
-        setLoadingSpinnerDesc('Updating user app data')
+      setLoadingSpinnerDesc('Sending notifications to counterparties')
-        const event = await updateUsersAppData(meta)
+      const promises = sendNotifications(meta)
-        if (!event) return
 
-        setLoadingSpinnerDesc('Sending notifications to counterparties')
+      await Promise.all(promises)
-        const promises = sendNotifications(meta)
+        .then(() => {
-
+          toast.success('Notifications sent successfully')
-        await Promise.all(promises)
+        })
-          .then(() => {
+        .catch(() => {
-            toast.success('Notifications sent successfully')
+          toast.error('Failed to publish notifications')
-          })
-          .catch(() => {
-            toast.error('Failed to publish notifications')
-          })
-
-        navigate(appPrivateRoutes.sign, { state: { meta: meta } })
-      } else {
-        const zip = new JSZip()
-
-        selectedFiles.forEach((file) => {
-          zip.file(`files/${file.name}`, file)
         })
 
-        const markConfig = createMarks(fileHashes)
+      navigate(appPrivateRoutes.sign, { state: { meta: meta } })
+    } else {
+      const zip = new JSZip()
 
-        setLoadingSpinnerDesc('Generating create signature')
+      selectedFiles.forEach((file) => {
-        const createSignature = await generateCreateSignature(
+        zip.file(`files/${file.name}`, file)
-          markConfig,
+      })
-          fileHashes,
-          ''
-        )
-        if (!createSignature) return
 
-        const meta: Meta = {
+      setLoadingSpinnerDesc('Generating create signature')
-          createSignature,
+      const createSignature = await generateCreateSignature(fileHashes, '')
-          modifiedAt: unixNow(),
+      if (!createSignature) {
-          docSignatures: {}
+        setIsLoading(false)
-        }
+        return
-
-        // add meta to zip
-        try {
-          const stringifiedMeta = JSON.stringify(meta, null, 2)
-          zip.file('meta.json', stringifiedMeta)
-        } catch (err) {
-          console.error(err)
-          toast.error('An error occurred in converting meta json to string')
-          return null
-        }
-
-        const arrayBuffer = await generateZipFile(zip)
-        if (!arrayBuffer) return
-
-        setLoadingSpinnerDesc('Encrypting zip file')
-        const encryptedArrayBuffer = await encryptZipFile(
-          arrayBuffer,
-          encryptionKey
-        )
-
-        await handleOfflineFlow(encryptedArrayBuffer, encryptionKey)
       }
-    } catch (error) {
+
-      if (error instanceof Error) {
+      const meta: Meta = {
-        toast.error(error.message)
+        createSignature,
+        modifiedAt: unixNow(),
+        docSignatures: {}
       }
-      console.error(error)
+
-    } finally {
+      // add meta to zip
-      setIsLoading(false)
+      try {
+        const stringifiedMeta = JSON.stringify(meta, null, 2)
+        zip.file('meta.json', stringifiedMeta)
+      } catch (err) {
+        console.error(err)
+        toast.error('An error occurred in converting meta json to string')
+        return null
+      }
+
+      const arrayBuffer = await generateZipFile(zip)
+      if (!arrayBuffer) {
+        setIsLoading(false)
+        return
+      }
+
+      setLoadingSpinnerDesc('Encrypting zip file')
+      const encryptedArrayBuffer = await encryptZipFile(
+        arrayBuffer,
+        encryptionKey
+      )
+
+      await handleOfflineFlow(encryptedArrayBuffer, encryptionKey)
     }
   }
 
-  const onDrawFieldsChange = (sigitFiles: SigitFile[]) => {
+  const onDrawFieldsChange = (pdfFiles: PdfFile[]) => {
-    setDrawnFiles(sigitFiles)
+    setDrawnPdfs(pdfFiles)
   }
 
   if (authUrl) {
@@ -866,18 +870,27 @@ export const CreatePage = () => {
             <div className={styles.flexWrap}>
               <div className={styles.inputWrapper}>
                 <TextField
-                  fullWidth
                   placeholder="Title"
                   size="small"
                   type="text"
                   value={title}
                   onChange={(e) => setTitle(e.target.value)}
+                  sx={{
+                    width: '100%',
+                    fontSize: '16px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px'
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      display: 'none'
+                    }
+                  }}
                 />
               </div>
               <ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
                 {selectedFiles.length > 0 &&
                   selectedFiles.map((file, index) => (
-                    <li
+                    <div
                       key={index}
                       className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
                       onClick={() => {
@@ -885,34 +898,107 @@ export const CreatePage = () => {
                         setCurrentFile(file)
                       }}
                     >
-                      <span className={styles.fileName}>{file.name}</span>
+                      <>
-                      <Button
+                        <span className={styles.fileName}>{file.name}</span>
-                        aria-label={`delete ${file.name}`}
+                        <Button
-                        variant="text"
+                          variant="text"
-                        onClick={(event) => handleRemoveFile(event, file)}
+                          onClick={(event) => handleRemoveFile(event, file)}
-                      >
+                          sx={{
-                        <FontAwesomeIcon icon={faTrash} />
+                            minWidth: '44px'
-                      </Button>
+                          }}
-                    </li>
+                        >
+                          <FontAwesomeIcon icon={faTrash} />
+                        </Button>
+                      </>
+                    </div>
                   ))}
               </ol>
               <Button variant="contained" onClick={handleUploadButtonClick}>
                 <FontAwesomeIcon icon={faUpload} />
                 <span className={styles.uploadFileText}>Upload new files</span>
+                <input
+                  ref={fileInputRef}
+                  hidden={true}
+                  multiple={true}
+                  type="file"
+                  onChange={handleSelectFiles}
+                />
               </Button>
-              <input
-                ref={fileInputRef}
-                hidden={true}
-                multiple={true}
-                type="file"
-                aria-label="file-upload"
-                onChange={handleSelectFiles}
-              />
             </div>
           }
           right={
             <div className={styles.flexWrap}>
-              <div className={`${styles.paperGroup} ${styles.users}`}>
+              <div className={styles.inputWrapper}>
+                <TextField
+                  placeholder="Add user"
+                  value={userInput}
+                  onChange={(e) => setUserInput(e.target.value)}
+                  onKeyDown={handleInputKeyDown}
+                  error={!!error}
+                  fullWidth
+                  sx={{
+                    fontSize: '16px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px'
+                    },
+                    '& .MuiOutlinedInput-notchedOutline': {
+                      display: 'none'
+                    }
+                  }}
+                />
+                <Select
+                  name="add-user-role"
+                  aria-label="role"
+                  value={userRole}
+                  variant="filled"
+                  // Hide arrow for dropdown
+                  IconComponent={() => null}
+                  renderValue={(value) => (
+                    <FontAwesomeIcon
+                      color="var(--primary-main)"
+                      icon={value === UserRole.signer ? faPen : faEye}
+                    />
+                  )}
+                  onChange={(e) => setUserRole(e.target.value as UserRole)}
+                  sx={{
+                    fontSize: '16px',
+                    minWidth: '44px',
+                    '& .MuiInputBase-input': {
+                      padding: '7px 14px!important',
+                      textOverflow: 'unset!important'
+                    }
+                  }}
+                >
+                  <MenuItem value={UserRole.signer}>
+                    <ListItemIcon>
+                      <FontAwesomeIcon icon={faPen} />
+                    </ListItemIcon>
+                    <ListItemText>{UserRole.signer}</ListItemText>
+                  </MenuItem>
+                  <MenuItem value={UserRole.viewer} sx={{}}>
+                    <ListItemIcon>
+                      <FontAwesomeIcon icon={faEye} />
+                    </ListItemIcon>
+                    <ListItemText>{UserRole.viewer}</ListItemText>
+                  </MenuItem>
+                </Select>
+                <Button
+                  disabled={!userInput}
+                  onClick={handleAddUser}
+                  variant="contained"
+                  aria-label="Add"
+                  sx={{
+                    minWidth: '44px',
+                    padding: '11.5px 12px',
+                    borderTopLeftRadius: 0,
+                    borderBottomLeftRadius: 0
+                  }}
+                >
+                  <FontAwesomeIcon icon={faPlus} />
+                </Button>
+              </div>
+
+              <div className={styles.paperGroup}>
                 <DisplayUser
                   metadata={metadata}
                   users={users}
@@ -921,43 +1007,7 @@ export const CreatePage = () => {
                   moveSigner={moveSigner}
                 />
               </div>
-              <div className={styles.addCounterpart}>
+
-                <div className={styles.inputWrapper}>
-                  <TextField
-                    fullWidth
-                    placeholder="Add counterpart"
-                    value={userInput}
-                    onChange={(e) => setUserInput(e.target.value)}
-                    onKeyDown={handleInputKeyDown}
-                    error={!!error}
-                  />
-                </div>
-                <Button
-                  onClick={() =>
-                    setUserRole(
-                      userRole === UserRole.signer
-                        ? UserRole.viewer
-                        : UserRole.signer
-                    )
-                  }
-                  variant="contained"
-                  aria-label="Toggle User Role"
-                  className={styles.counterpartToggleButton}
-                >
-                  <FontAwesomeIcon
-                    icon={userRole === UserRole.signer ? faPen : faEye}
-                  />
-                </Button>
-                <Button
-                  disabled={!userInput}
-                  onClick={handleAddUser}
-                  variant="contained"
-                  aria-label="Add"
-                  className={styles.counterpartToggleButton}
-                >
-                  <FontAwesomeIcon icon={faPlus} />
-                </Button>
-              </div>
               <Button onClick={handleCreate} variant="contained">
                 Publish
               </Button>
@@ -967,18 +1017,26 @@ export const CreatePage = () => {
                   return (
                     <div
                       key={index}
-                      {...(drawTool.active && {
+                      onClick={
-                        onClick: () => handleToolSelect(drawTool)
+                        drawTool.active
-                      })}
+                          ? () => {
+                              handleToolSelect(drawTool)
+                            }
+                          : () => null
+                      }
                       className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
                       `}
                     >
-                      <FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
+                      {drawTool.icon}
                       {drawTool.label}
                       {drawTool.active ? (
-                        <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
+                        <FontAwesomeIcon icon={faEllipsis} />
                       ) : (
-                        <span className={styles.comingSoonPlaceholder}>
+                        <span
+                          style={{
+                            fontSize: '10px'
+                          }}
+                        >
                           Coming soon
                         </span>
                       )}
@@ -992,9 +1050,6 @@ export const CreatePage = () => {
               )}
             </div>
           }
-          leftIcon={faFileCirclePlus}
-          centerIcon={faFile}
-          rightIcon={faToolbox}
         >
           <DrawPDFFields
             metadata={metadata}
@@ -1026,12 +1081,12 @@ const DisplayUser = ({
 }: DisplayUsersProps) => {
   return (
     <>
-      <DndProvider backend={MultiBackend} options={HTML5toTouch}>
+      <DndProvider backend={HTML5Backend}>
         {users
           .filter((user) => user.role === UserRole.signer)
           .map((user, index) => (
-            <SignerCounterpart
+            <SignerRow
-              key={`signer-${user.pubkey}`}
+              key={`signer-${index}`}
               userMeta={metadata[user.pubkey]}
               user={user}
               index={index}
@@ -1043,15 +1098,71 @@ const DisplayUser = ({
       </DndProvider>
       {users
         .filter((user) => user.role === UserRole.viewer)
-        .map((user) => {
+        .map((user, index) => {
+          const userMeta = metadata[user.pubkey]
           return (
-            <div className={styles.user} key={`viewer-${user.pubkey}`}>
+            <div className={styles.user} key={index}>
-              <Counterpart
+              <div className={styles.avatar}>
-                userMeta={metadata[user.pubkey]}
+                <UserAvatar
-                user={user}
+                  pubkey={user.pubkey}
-                handleUserRoleChange={handleUserRoleChange}
+                  name={
-                handleRemoveUser={handleRemoveUser}
+                    userMeta?.display_name ||
-              />
+                    userMeta?.name ||
+                    shorten(hexToNpub(user.pubkey))
+                  }
+                  image={userMeta?.picture}
+                />
+              </div>
+              <Select
+                name={`change-user-role-${user.pubkey}`}
+                aria-label="role"
+                value={user.role}
+                variant="outlined"
+                IconComponent={() => null}
+                renderValue={(value) => (
+                  <FontAwesomeIcon
+                    fontSize={'14px'}
+                    color="var(--primary-main)"
+                    icon={value === UserRole.signer ? faPen : faEye}
+                  />
+                )}
+                onChange={(e) =>
+                  handleUserRoleChange(e.target.value as UserRole, user.pubkey)
+                }
+                sx={{
+                  fontSize: '16px',
+                  minWidth: '34px',
+                  maxWidth: '34px',
+                  minHeight: '34px',
+                  maxHeight: '34px',
+                  '& .MuiInputBase-input': {
+                    padding: '10px !important',
+                    textOverflow: 'unset!important'
+                  },
+                  '& .MuiOutlinedInput-notchedOutline': {
+                    display: 'none'
+                  }
+                }}
+              >
+                <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
+                <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
+              </Select>
+              <Tooltip title="Remove User" arrow>
+                <Button
+                  onClick={() => handleRemoveUser(user.pubkey)}
+                  sx={{
+                    minWidth: '34px',
+                    height: '34px',
+                    padding: 0,
+                    color: 'rgba(0, 0, 0, 0.35)',
+                    '&:hover': {
+                      color: 'white'
+                    }
+                  }}
+                >
+                  <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
+                </Button>
+              </Tooltip>
             </div>
           )
         })}
@@ -1065,26 +1176,23 @@ interface DragItem {
   type: string
 }
 
-type CounterpartProps = {
+type SignerRowProps = {
   userMeta: ProfileMetadata
   user: User
+  index: number
+  moveSigner: (dragIndex: number, hoverIndex: number) => void
   handleUserRoleChange: (role: UserRole, pubkey: string) => void
   handleRemoveUser: (pubkey: string) => void
 }
 
-type SignerCounterpartProps = CounterpartProps & {
+const SignerRow = ({
-  index: number
-  moveSigner: (dragIndex: number, hoverIndex: number) => void
-}
-
-const SignerCounterpart = ({
   userMeta,
   user,
   index,
   moveSigner,
   handleUserRoleChange,
   handleRemoveUser
-}: SignerCounterpartProps) => {
+}: SignerRowProps) => {
   const ref = useRef<HTMLTableRowElement>(null)
 
   const [{ handlerId }, drop] = useDrop<
@@ -1158,7 +1266,7 @@ const SignerCounterpart = ({
     })
   })
 
-  const opacity = isDragging ? 0.2 : 1
+  const opacity = isDragging ? 0 : 1
   drag(drop(ref))
 
   return (
@@ -1169,24 +1277,6 @@ const SignerCounterpart = ({
       ref={ref}
     >
       <FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
-      <Counterpart
-        user={user}
-        userMeta={userMeta}
-        handleRemoveUser={handleRemoveUser}
-        handleUserRoleChange={handleUserRoleChange}
-      />
-    </div>
-  )
-}
-
-const Counterpart = ({
-  userMeta,
-  user,
-  handleUserRoleChange,
-  handleRemoveUser
-}: CounterpartProps) => {
-  return (
-    <>
       <div className={styles.avatar}>
         <UserAvatar
           pubkey={user.pubkey}
@@ -1198,31 +1288,56 @@ const Counterpart = ({
           image={userMeta?.picture}
         />
       </div>
-      <Tooltip title="Toggle User Role" arrow disableInteractive>
+      <Select
-        <Button
+        name={`change-user-role-${user.pubkey}`}
-          onClick={() =>
+        aria-label="role"
-            handleUserRoleChange(
+        value={user.role}
-              user.role === UserRole.signer ? UserRole.viewer : UserRole.signer,
+        variant="outlined"
-              user.pubkey
+        IconComponent={() => null}
-            )
+        renderValue={(value) => (
-          }
-          className={styles.counterpartRowToggleButton}
-          data-variant="primary"
-        >
           <FontAwesomeIcon
-            icon={user.role === UserRole.signer ? faPen : faEye}
+            fontSize={'14px'}
+            color="var(--primary-main)"
+            icon={value === UserRole.signer ? faPen : faEye}
           />
-        </Button>
+        )}
-      </Tooltip>
+        onChange={(e) =>
-      <Tooltip title="Remove User" arrow disableInteractive>
+          handleUserRoleChange(e.target.value as UserRole, user.pubkey)
+        }
+        sx={{
+          fontSize: '16px',
+          minWidth: '34px',
+          maxWidth: '34px',
+          minHeight: '34px',
+          maxHeight: '34px',
+          '& .MuiInputBase-input': {
+            padding: '10px !important',
+            textOverflow: 'unset!important'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            display: 'none'
+          }
+        }}
+      >
+        <MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
+        <MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
+      </Select>
+      <Tooltip title="Remove User" arrow>
         <Button
           onClick={() => handleRemoveUser(user.pubkey)}
-          className={styles.counterpartRowToggleButton}
+          sx={{
-          data-variant="secondary"
+            minWidth: '34px',
+            height: '34px',
+            padding: 0,
+            color: 'rgba(0, 0, 0, 0.35)',
+            '&:hover': {
+              color: 'white'
+            }
+          }}
         >
-          <FontAwesomeIcon icon={faTrash} />
+          <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
         </Button>
       </Tooltip>
-    </>
+    </div>
   )
 }

src/pages/create/style.module.scss

@@ -4,8 +4,6 @@
   display: flex;
   flex-direction: column;
   gap: 15px;
-
-  container-type: inline-size;
 }
 
 .orderedFilesList {
@@ -42,7 +40,6 @@
     }
 
     button {
-      min-width: 44px;
       color: $primary-main;
     }
 
@@ -70,6 +67,10 @@
   display: flex;
   flex-direction: column;
   gap: 15px;
+
+  // Automatic scrolling if paper-group gets large enough
+  // used for files on the left and users on the right
+  max-height: 350px;
   overflow-x: hidden;
   overflow-y: auto;
 }
@@ -77,9 +78,8 @@
 .inputWrapper {
   display: flex;
   align-items: center;
-  flex-shrink: 0;
 
-  height: 36px;
+  height: 34px;
   overflow: hidden;
   border-radius: 4px;
   outline: solid 1px #dddddd;
@@ -90,43 +90,6 @@
   &:focus-within {
     outline-color: $primary-main;
   }
-
-  // Override default MUI input styles only inside inputWrapepr
-  :global {
-    .MuiInputBase-input {
-      padding: 7px 14px;
-    }
-    .MuiOutlinedInput-notchedOutline {
-      display: none;
-    }
-  }
-}
-
-.addCounterpart {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: start;
-  gap: 10px;
-
-  > .inputWrapper {
-    flex-shrink: 1;
-  }
-
-  button {
-    min-width: 44px;
-    padding: 11px 12px;
-  }
-}
-
-.users {
-  flex-shrink: 0;
-  max-height: 33vh;
-
-  .counterpartToggleButton {
-    min-width: 44px;
-    padding: 11px 12px;
-  }
 }
 
 .user {
@@ -141,22 +104,6 @@
   a:hover {
     text-decoration: none;
   }
-
-  // Higher specificify to override default button styles
-  .counterpartRowToggleButton {
-    min-width: 34px;
-    height: 34px;
-    padding: 0;
-  }
-}
-
-.counterpartRowToggleButton {
-  &[data-variant='primary'] {
-    color: $primary-main;
-  }
-  &[data-variant='secondary'] {
-    color: rgba(0, 0, 0, 0.35);
-  }
 }
 
 .avatar {
@@ -183,35 +130,26 @@
 
 .toolbox {
   display: grid;
-  grid-template-columns: 1fr;
+  grid-template-columns: 1fr 1fr 1fr;
-
-  @container (min-width: 204px) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  @container (min-width: 309px) {
-    grid-template-columns: repeat(3, 1fr);
-  }
-
   gap: 15px;
 
+  max-height: 450px;
   overflow-x: hidden;
   overflow-y: auto;
-
-  container-type: inline-size;
 }
 
 .toolItem {
+  width: 90px;
+  height: 90px;
+
   transition: ease 0.2s;
-  display: flex;
+  display: inline-flex;
   flex-direction: column;
   gap: 5px;
   border-radius: 4px;
   padding: 10px 5px 5px 5px;
   background: rgba(0, 0, 0, 0.05);
   color: rgba(0, 0, 0, 0.5);
-
-  text-align: center;
   align-items: center;
   justify-content: center;
   font-size: 14px;
@@ -224,7 +162,7 @@
     color: white;
   }
 
-  &:not(.selected, .comingSoon) {
+  &:not(.selected) {
     &:hover {
       background: $primary-light;
       color: white;
@@ -236,7 +174,3 @@
     cursor: not-allowed;
   }
 }
-
-.comingSoonPlaceholder {
-  font-size: 10px;
-}

src/pages/home/index.tsx

@@ -18,7 +18,6 @@ import {
   SigitCardDisplayInfo,
   SigitStatus
 } from '../../utils'
-import { Footer } from '../../components/Footer/Footer'
 
 // Unsupported Filter options are commented
 const FILTERS = [
@@ -263,7 +262,6 @@ export const HomePage = () => {
             ))}
         </div>
       </Container>
-      <Footer />
     </div>
   )
 }

src/pages/landing/index.tsx

@@ -19,7 +19,6 @@ import {
   faWifi
 } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack'
-import { Footer } from '../../components/Footer/Footer'
 
 export const LandingPage = () => {
   const navigate = useNavigate()
@@ -163,7 +162,6 @@ export const LandingPage = () => {
 
         <Outlet />
       </Container>
-      <Footer />
     </div>
   )
 }

src/pages/profile/index.tsx

@@ -20,7 +20,6 @@ import {
 } from '../../utils'
 import styles from './style.module.scss'
 import { Container } from '../../components/Container'
-import { Footer } from '../../components/Footer/Footer'
 
 export const ProfilePage = () => {
   const navigate = useNavigate()
@@ -42,16 +41,6 @@ export const ProfilePage = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc] = useState('Fetching metadata')
 
-  const profileName =
-    pubkey &&
-    profileMetadata &&
-    truncate(
-      profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
-      {
-        length: 16
-      }
-    )
-
   useEffect(() => {
     if (npub) {
       try {
@@ -176,10 +165,7 @@ export const ProfilePage = () => {
             className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
           >
             {profileMetadata && profileMetadata.banner ? (
-              <img
+              <img src={profileMetadata.banner} />
-                src={profileMetadata.banner}
-                alt={`banner image for ${profileName}`}
-              />
             ) : (
               ''
             )}
@@ -199,7 +185,6 @@ export const ProfilePage = () => {
                   <img
                     className={styles['image-placeholder']}
                     src={getProfileImage(profileMetadata!)}
-                    alt={profileName}
                   />
                 </div>
               </Box>
@@ -239,7 +224,14 @@ export const ProfilePage = () => {
                       variant="h6"
                       className={styles.bold}
                     >
-                      {profileName}
+                      {truncate(
+                        profileMetadata.display_name ||
+                          profileMetadata.name ||
+                          hexToNpub(pubkey),
+                        {
+                          length: 16
+                        }
+                      )}
                     </Typography>
                   )}
                 </Box>
@@ -293,7 +285,6 @@ export const ProfilePage = () => {
           </Box>
         </Container>
       )}
-      <Footer />
     </>
   )
 }

src/pages/settings/Settings.tsx

@@ -13,7 +13,6 @@ import { useNavigate } from 'react-router-dom'
 import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
 import { State } from '../../store/rootReducer'
 import { Container } from '../../components/Container'
-import { Footer } from '../../components/Footer/Footer'
 
 export const SettingsPage = () => {
   const theme = useTheme()
@@ -44,59 +43,56 @@ export const SettingsPage = () => {
   }
 
   return (
-    <>
+    <Container>
-      <Container>
+      <List
-        <List
+        sx={{
-          sx={{
+          width: '100%',
-            width: '100%',
+          bgcolor: 'background.paper'
-            bgcolor: 'background.paper'
+        }}
+        subheader={
+          <ListSubheader
+            sx={{
+              fontSize: '1.5rem',
+              borderBottom: '0.5px solid',
+              paddingBottom: 2,
+              paddingTop: 2
+            }}
+          >
+            Settings
+          </ListSubheader>
+        }
+      >
+        <ListItemButton
+          onClick={() => {
+            navigate(getProfileSettingsRoute(usersPubkey!))
           }}
-          subheader={
-            <ListSubheader
-              sx={{
-                fontSize: '1.5rem',
-                borderBottom: '0.5px solid',
-                paddingBottom: 2,
-                paddingTop: 2
-              }}
-            >
-              Settings
-            </ListSubheader>
-          }
         >
-          <ListItemButton
+          <ListItemIcon>
-            onClick={() => {
+            <AccountCircleIcon />
-              navigate(getProfileSettingsRoute(usersPubkey!))
+          </ListItemIcon>
-            }}
+          {listItem('Profile')}
-          >
+        </ListItemButton>
-            <ListItemIcon>
+        <ListItemButton
-              <AccountCircleIcon />
+          onClick={() => {
-            </ListItemIcon>
+            navigate(appPrivateRoutes.relays)
-            {listItem('Profile')}
+          }}
-          </ListItemButton>
+        >
-          <ListItemButton
+          <ListItemIcon>
-            onClick={() => {
+            <RouterIcon />
-              navigate(appPrivateRoutes.relays)
+          </ListItemIcon>
-            }}
+          {listItem('Relays')}
-          >
+        </ListItemButton>
-            <ListItemIcon>
+        <ListItemButton
-              <RouterIcon />
+          onClick={() => {
-            </ListItemIcon>
+            navigate(appPrivateRoutes.cacheSettings)
-            {listItem('Relays')}
+          }}
-          </ListItemButton>
+        >
-          <ListItemButton
+          <ListItemIcon>
-            onClick={() => {
+            <CachedIcon />
-              navigate(appPrivateRoutes.cacheSettings)
+          </ListItemIcon>
-            }}
+          {listItem('Local Cache')}
-          >
+        </ListItemButton>
-            <ListItemIcon>
+      </List>
-              <CachedIcon />
+    </Container>
-            </ListItemIcon>
-            {listItem('Local Cache')}
-          </ListItemButton>
-        </List>
-      </Container>
-      <Footer />
-    </>
   )
 }

src/pages/settings/cache/index.tsx

@@ -14,7 +14,6 @@ import { toast } from 'react-toastify'
 import { localCache } from '../../../services'
 import { LoadingSpinner } from '../../../components/LoadingSpinner'
 import { Container } from '../../../components/Container'
-import { Footer } from '../../../components/Footer/Footer'
 
 export const CacheSettingsPage = () => {
   const theme = useTheme()
@@ -51,51 +50,48 @@ export const CacheSettingsPage = () => {
   }
 
   return (
-    <>
+    <Container>
-      <Container>
+      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-        {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
+      <List
-        <List
+        sx={{
-          sx={{
+          width: '100%',
-            width: '100%',
+          bgcolor: 'background.paper',
-            bgcolor: 'background.paper',
+          marginTop: 2
-            marginTop: 2
+        }}
-          }}
+        subheader={
-          subheader={
+          <ListSubheader
-            <ListSubheader
+            sx={{
-              sx={{
+              fontSize: '1.5rem',
-                fontSize: '1.5rem',
+              borderBottom: '0.5px solid',
-                borderBottom: '0.5px solid',
+              paddingBottom: 2,
-                paddingBottom: 2,
+              paddingTop: 2
-                paddingTop: 2
+            }}
-              }}
+          >
-            >
+            Cache Setting
-              Cache Setting
+          </ListSubheader>
-            </ListSubheader>
+        }
-          }
+      >
-        >
+        <ListItemButton disabled>
-          <ListItemButton disabled>
+          <ListItemIcon>
-            <ListItemIcon>
+            <IosShareIcon />
-              <IosShareIcon />
+          </ListItemIcon>
-            </ListItemIcon>
+          {listItem('Export (coming soon)')}
-            {listItem('Export (coming soon)')}
+        </ListItemButton>
-          </ListItemButton>
 
-          <ListItemButton disabled>
+        <ListItemButton disabled>
-            <ListItemIcon>
+          <ListItemIcon>
-              <InputIcon />
+            <InputIcon />
-            </ListItemIcon>
+          </ListItemIcon>
-            {listItem('Import (coming soon)')}
+          {listItem('Import (coming soon)')}
-          </ListItemButton>
+        </ListItemButton>
 
-          <ListItemButton onClick={handleClearData}>
+        <ListItemButton onClick={handleClearData}>
-            <ListItemIcon>
+          <ListItemIcon>
-              <ClearIcon sx={{ color: theme.palette.error.main }} />
+            <ClearIcon sx={{ color: theme.palette.error.main }} />
-            </ListItemIcon>
+          </ListItemIcon>
-            {listItem('Clear Cache')}
+          {listItem('Clear Cache')}
-          </ListItemButton>
+        </ListItemButton>
-        </List>
+      </List>
-      </Container>
+    </Container>
-      <Footer />
-    </>
   )
 }

src/pages/settings/profile/index.tsx

@@ -32,7 +32,6 @@ import {
   unixNow
 } from '../../../utils'
 import { Container } from '../../../components/Container'
-import { Footer } from '../../../components/Footer/Footer'
 
 export const ProfileSettingsPage = () => {
   const theme = useTheme()
@@ -386,7 +385,6 @@ export const ProfileSettingsPage = () => {
           </LoadingButton>
         )}
       </Container>
-      <Footer />
     </>
   )
 }

src/pages/settings/relays/index.tsx

@@ -27,7 +27,6 @@ import {
   shorten
 } from '../../../utils'
 import styles from './style.module.scss'
-import { Footer } from '../../../components/Footer/Footer'
 
 export const RelaysPage = () => {
   const usersPubkey = useAppSelector((state) => state.auth?.usersPubkey)
@@ -271,164 +270,161 @@ const RelayItem = ({
   })
 
   return (
-    <>
+    <Box className={styles.relay}>
-      <Box className={styles.relay}>
+      <List>
-        <List>
+        <ListItem>
-          <ListItem>
+          <span
-            <span
+            className={[
-              className={[
+              styles.connectionStatus,
-                styles.connectionStatus,
+              relayConnectionStatus
-                relayConnectionStatus
+                ? relayConnectionStatus === RelayConnectionState.Connected
-                  ? relayConnectionStatus === RelayConnectionState.Connected
+                  ? styles.connectionStatusConnected
-                    ? styles.connectionStatusConnected
+                  : styles.connectionStatusNotConnected
-                    : styles.connectionStatusNotConnected
+                : styles.connectionStatusUnknown
-                  : styles.connectionStatusUnknown
+            ].join(' ')}
-              ].join(' ')}
+          />
-            />
+          {relayInfo &&
-            {relayInfo &&
+            relayInfo.limitation &&
-              relayInfo.limitation &&
+            relayInfo.limitation?.payment_required && (
-              relayInfo.limitation?.payment_required && (
+              <Tooltip title="Paid Relay" arrow placement="top">
-                <Tooltip title="Paid Relay" arrow placement="top">
+                <ElectricBoltIcon
-                  <ElectricBoltIcon
+                  className={styles.lightningIcon}
-                    className={styles.lightningIcon}
+                  color="warning"
-                    color="warning"
+                  onClick={() => setDisplayRelayInfo((prev) => !prev)}
-                    onClick={() => setDisplayRelayInfo((prev) => !prev)}
+                />
-                  />
+              </Tooltip>
-                </Tooltip>
+            )}
-              )}
 
-            <ListItemText primary={relayURI} />
+          <ListItemText primary={relayURI} />
 
-            <Box
+          <Box
-              className={styles.leaveRelayContainer}
+            className={styles.leaveRelayContainer}
-              onClick={() => handleLeaveRelay(relayURI)}
+            onClick={() => handleLeaveRelay(relayURI)}
-            >
+          >
-              <LogoutIcon />
+            <LogoutIcon />
-              <span>Leave</span>
+            <span>Leave</span>
-            </Box>
+          </Box>
-          </ListItem>
+        </ListItem>
-          <Divider className={styles.relayDivider} />
+        <Divider className={styles.relayDivider} />
-          <ListItem>
+        <ListItem>
-            <ListItemText
+          <ListItemText
-              primary="Publish to this relay?"
+            primary="Publish to this relay?"
-              secondary={
+            secondary={
-                relayInfo ? (
+              relayInfo ? (
-                  <span
+                <span
-                    onClick={() => setDisplayRelayInfo((prev) => !prev)}
+                  onClick={() => setDisplayRelayInfo((prev) => !prev)}
-                    className={styles.showInfo}
+                  className={styles.showInfo}
-                  >
+                >
-                    Show info{' '}
+                  Show info{' '}
-                    {displayRelayInfo ? (
+                  {displayRelayInfo ? (
-                      <KeyboardArrowUpIcon className={styles.showInfoIcon} />
+                    <KeyboardArrowUpIcon className={styles.showInfoIcon} />
-                    ) : (
+                  ) : (
-                      <KeyboardArrowDownIcon className={styles.showInfoIcon} />
+                    <KeyboardArrowDownIcon className={styles.showInfoIcon} />
-                    )}
+                  )}
-                  </span>
+                </span>
-                ) : (
+              ) : (
-                  ''
+                ''
-                )
+              )
-              }
+            }
-            />
+          />
-            <Switch
+          <Switch
-              checked={isWriteRelay}
+            checked={isWriteRelay}
-              onChange={(event) => handleRelayWriteChange(relayURI, event)}
+            onChange={(event) => handleRelayWriteChange(relayURI, event)}
-            />
+          />
-          </ListItem>
+        </ListItem>
-          {displayRelayInfo && (
+        {displayRelayInfo && (
-            <>
+          <>
-              <Divider className={styles.relayDivider} />
+            <Divider className={styles.relayDivider} />
-              <ListItem>
+            <ListItem>
-                <Box className={styles.relayInfoContainer}>
+              <Box className={styles.relayInfoContainer}>
-                  {relayInfo &&
+                {relayInfo &&
-                    Object.keys(relayInfo).map((key: string) => {
+                  Object.keys(relayInfo).map((key: string) => {
-                      const infoTitle = capitalizeFirstLetter(
+                    const infoTitle = capitalizeFirstLetter(
-                        key.replace('_', ' ')
+                      key.replace('_', ' ')
-                      )
+                    )
-                      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                      let infoValue = (relayInfo as any)[key]
+                    let infoValue = (relayInfo as any)[key]
 
-                      switch (key) {
+                    switch (key) {
-                        case 'pubkey':
+                      case 'pubkey':
-                          infoValue = shorten(hexToNpub(infoValue), 15)
+                        infoValue = shorten(hexToNpub(infoValue), 15)
 
-                          break
+                        break
 
-                        case 'limitation':
+                      case 'limitation':
-                          infoValue = (
+                        infoValue = (
-                            <ul>
+                          <ul>
-                              {Object.keys(infoValue).map((valueKey) => (
+                            {Object.keys(infoValue).map((valueKey) => (
-                                <li key={`${relayURI}_${key}_${valueKey}`}>
+                              <li key={`${relayURI}_${key}_${valueKey}`}>
-                                  <span className={styles.relayInfoSubTitle}>
+                                <span className={styles.relayInfoSubTitle}>
-                                    {capitalizeFirstLetter(
+                                  {capitalizeFirstLetter(
-                                      valueKey.split('_').join(' ')
+                                    valueKey.split('_').join(' ')
-                                    )}
+                                  )}
-                                    :
+                                  :
-                                  </span>{' '}
+                                </span>{' '}
-                                  {`${infoValue[valueKey]}`}
+                                {`${infoValue[valueKey]}`}
-                                </li>
+                              </li>
-                              ))}
+                            ))}
-                            </ul>
+                          </ul>
-                          )
+                        )
 
-                          break
+                        break
 
-                        case 'fees':
+                      case 'fees':
-                          infoValue = (
+                        infoValue = (
-                            <ul>
+                          <ul>
-                              {Object.keys(infoValue).map((valueKey) => (
+                            {Object.keys(infoValue).map((valueKey) => (
-                                <li key={`${relayURI}_${key}_${valueKey}`}>
+                              <li key={`${relayURI}_${key}_${valueKey}`}>
-                                  <span className={styles.relayInfoSubTitle}>
+                                <span className={styles.relayInfoSubTitle}>
-                                    {capitalizeFirstLetter(
+                                  {capitalizeFirstLetter(
-                                      valueKey.split('_').join(' ')
+                                    valueKey.split('_').join(' ')
-                                    )}
+                                  )}
-                                    :
+                                  :
-                                  </span>{' '}
+                                </span>{' '}
-                                  {`${infoValue[valueKey].map((fee: RelayFee) => `${fee.amount} ${fee.unit}`)}`}
+                                {`${infoValue[valueKey].map((fee: RelayFee) => `${fee.amount} ${fee.unit}`)}`}
-                                </li>
+                              </li>
-                              ))}
+                            ))}
-                            </ul>
+                          </ul>
-                          )
+                        )
-                          break
+                        break
-                        default:
+                      default:
-                          break
+                        break
-                      }
+                    }
 
-                      if (Array.isArray(infoValue)) {
+                    if (Array.isArray(infoValue)) {
-                        infoValue = infoValue.join(', ')
+                      infoValue = infoValue.join(', ')
-                      }
+                    }
 
-                      return (
+                    return (
-                        <span key={`${relayURI}_${key}_container`}>
+                      <span key={`${relayURI}_${key}_container`}>
-                          <span className={styles.relayInfoTitle}>
+                        <span className={styles.relayInfoTitle}>
-                            {infoTitle}:
+                          {infoTitle}:
-                          </span>{' '}
+                        </span>{' '}
-                          {infoValue}
+                        {infoValue}
-                          {key === 'pubkey' ? (
+                        {key === 'pubkey' ? (
-                            <ContentCopyIcon
+                          <ContentCopyIcon
-                              className={styles.copyItem}
+                            className={styles.copyItem}
-                              onClick={() => {
+                            onClick={() => {
-                                navigator.clipboard.writeText(
+                              navigator.clipboard.writeText(
-                                  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                                // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                                  hexToNpub((relayInfo as any)[key])
+                                hexToNpub((relayInfo as any)[key])
-                                )
+                              )
 
-                                toast.success('Copied to clipboard', {
+                              toast.success('Copied to clipboard', {
-                                  autoClose: 1000,
+                                autoClose: 1000,
-                                  hideProgressBar: true
+                                hideProgressBar: true
-                                })
+                              })
-                              }}
+                            }}
-                            />
+                          />
-                          ) : null}
+                        ) : null}
-                        </span>
+                      </span>
-                      )
+                    )
-                    })}
+                  })}
-                </Box>
+              </Box>
-              </ListItem>
+            </ListItem>
-            </>
+          </>
-          )}
+        )}
-        </List>
+      </List>
-      </Box>
+    </Box>
-      <Footer />
-    </>
   )
 }

src/pages/sign/index.tsx

@@ -38,8 +38,10 @@ import {
 import { Container } from '../../components/Container'
 import { DisplayMeta } from './internal/displayMeta'
 import styles from './style.module.scss'
+import { PdfFile } from '../../types/drawing.ts'
+import { convertToPdfFile } from '../../utils/pdf.ts'
 import { CurrentUserMark, Mark } from '../../types/mark.ts'
-import { getLastSignersSig, isFullySigned } from '../../utils/sign.ts'
+import { getLastSignersSig } from '../../utils/sign.ts'
 import {
   filterMarksByPubkey,
   getCurrentUserMarks,
@@ -47,11 +49,7 @@ import {
   updateMarks
 } from '../../utils'
 import PdfMarking from '../../components/PDFView/PdfMarking.tsx'
-import {
+import { getZipWithFiles } from '../../utils/file.ts'
-  convertToSigitFile,
-  getZipWithFiles,
-  SigitFile
-} from '../../utils/file.ts'
 import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
 enum SignedStatus {
   Fully_Signed,
@@ -78,7 +76,7 @@ export const SignPage = () => {
 
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
 
-  const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
+  const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
 
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@@ -112,13 +110,13 @@ export const SignPage = () => {
   const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>(
     []
   )
-  const [isMarksCompleted, setIsMarksCompleted] = useState(false)
+  const [isReadyToSign, setIsReadyToSign] = useState(false)
   const [otherUserMarks, setOtherUserMarks] = useState<Mark[]>([])
 
   useEffect(() => {
     if (signers.length > 0) {
       // check if all signers have signed then its fully signed
-      if (isFullySigned(signers, signedBy)) {
+      if (signers.every((signer) => signedBy.includes(signer))) {
         setSignedStatus(SignedStatus.Fully_Signed)
       } else {
         for (const signer of signers) {
@@ -216,7 +214,7 @@ export const SignPage = () => {
         const otherUserMarks = findOtherUserMarks(signedMarks, usersPubkey!)
         setOtherUserMarks(otherUserMarks)
         setCurrentUserMarks(currentUserMarks)
-        setIsMarksCompleted(isCurrentUserMarksComplete(currentUserMarks))
+        setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
       }
 
       setSignedBy(Object.keys(meta.docSignatures) as `npub1${string}`[])
@@ -404,7 +402,7 @@ export const SignPage = () => {
       return
     }
 
-    const files: { [filename: string]: SigitFile } = {}
+    const files: { [filename: string]: PdfFile } = {}
     const fileHashes: { [key: string]: string | null } = {}
     const fileNames = Object.values(zip.files).map((entry) => entry.name)
 
@@ -418,7 +416,8 @@ export const SignPage = () => {
       )
 
       if (arrayBuffer) {
-        files[fileName] = await convertToSigitFile(arrayBuffer, fileName)
+        files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
+
         const hash = await getHash(arrayBuffer)
         if (hash) {
           fileHashes[fileName] = hash
@@ -463,7 +462,7 @@ export const SignPage = () => {
     const zip = await loadZip(decryptedZipFile)
     if (!zip) return
 
-    const files: { [filename: string]: SigitFile } = {}
+    const files: { [filename: string]: PdfFile } = {}
     const fileHashes: { [key: string]: string | null } = {}
     const fileNames = Object.values(zip.files)
       .filter((entry) => entry.name.startsWith('files/') && !entry.dir)
@@ -480,7 +479,7 @@ export const SignPage = () => {
       )
 
       if (arrayBuffer) {
-        files[fileName] = await convertToSigitFile(arrayBuffer, fileName)
+        files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
 
         const hash = await getHash(arrayBuffer)
         if (hash) {
@@ -542,13 +541,10 @@ export const SignPage = () => {
     setLoadingSpinnerDesc('Signing nostr event')
 
     const prevSig = getPrevSignersSig(hexToNpub(usersPubkey!))
-    if (!prevSig) {
+    if (!prevSig) return
-      setIsLoading(false)
-      toast.error('Previous signature is invalid')
-      return
-    }
 
-    const marks = getSignerMarksForMeta() || []
+    const marks = getSignerMarksForMeta()
+    if (!marks) return
 
     const signedEvent = await signEventForMeta({ prevSig, marks })
     if (!signedEvent) return
@@ -768,8 +764,8 @@ export const SignPage = () => {
 
     zip.file('meta.json', stringifiedMeta)
 
-    for (const [fileName, file] of Object.entries(files)) {
+    for (const [fileName, pdf] of Object.entries(files)) {
-      zip.file(`files/${fileName}`, await file.arrayBuffer())
+      zip.file(`files/${fileName}`, await pdf.file.arrayBuffer())
     }
 
     const arrayBuffer = await zip
@@ -806,8 +802,8 @@ export const SignPage = () => {
 
     zip.file('meta.json', stringifiedMeta)
 
-    for (const [fileName, file] of Object.entries(files)) {
+    for (const [fileName, pdf] of Object.entries(files)) {
-      zip.file(`files/${fileName}`, await file.arrayBuffer())
+      zip.file(`files/${fileName}`, await pdf.file.arrayBuffer())
     }
 
     const arrayBuffer = await zip
@@ -886,90 +882,90 @@ export const SignPage = () => {
     return <LoadingSpinner desc={loadingSpinnerDesc} />
   }
 
-  if (!isMarksCompleted && signedStatus === SignedStatus.User_Is_Next_Signer) {
+  if (isReadyToSign) {
     return (
-      <PdfMarking
+      <>
-        files={getCurrentUserFiles(files, currentFileHashes, creatorFileHashes)}
+        <Container className={styles.container}>
-        currentUserMarks={currentUserMarks}
+          {displayInput && (
-        setIsMarksCompleted={setIsMarksCompleted}
+            <>
-        setCurrentUserMarks={setCurrentUserMarks}
+              <Typography component="label" variant="h6">
-        setUpdatedMarks={setUpdatedMarks}
+                Select sigit file
-        handleDownload={handleDownload}
+              </Typography>
-        otherUserMarks={otherUserMarks}
+
-        meta={meta}
+              <Box className={styles.inputBlock}>
-      />
+                <MuiFileInput
+                  placeholder="Select file"
+                  inputProps={{ accept: '.sigit.zip' }}
+                  value={selectedFile}
+                  onChange={(value) => setSelectedFile(value)}
+                />
+              </Box>
+
+              {selectedFile && (
+                <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
+                  <Button onClick={handleDecrypt} variant="contained">
+                    Decrypt
+                  </Button>
+                </Box>
+              )}
+            </>
+          )}
+
+          {submittedBy && Object.entries(files).length > 0 && meta && (
+            <>
+              <DisplayMeta
+                meta={meta}
+                files={files}
+                submittedBy={submittedBy}
+                signers={signers}
+                viewers={viewers}
+                creatorFileHashes={creatorFileHashes}
+                currentFileHashes={currentFileHashes}
+                signedBy={signedBy}
+                nextSigner={nextSinger}
+                getPrevSignersSig={getPrevSignersSig}
+              />
+
+              {signedStatus === SignedStatus.Fully_Signed && (
+                <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+                  <Button onClick={handleExport} variant="contained">
+                    Export
+                  </Button>
+                </Box>
+              )}
+
+              {signedStatus === SignedStatus.User_Is_Next_Signer && (
+                <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+                  <Button onClick={handleSign} variant="contained">
+                    Sign
+                  </Button>
+                </Box>
+              )}
+
+              {isSignerOrCreator && (
+                <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+                  <Button onClick={handleExportSigit} variant="contained">
+                    Export Sigit
+                  </Button>
+                </Box>
+              )}
+            </>
+          )}
+        </Container>
+      </>
     )
   }
 
   return (
-    <>
+    <PdfMarking
-      <Container className={styles.container}>
+      files={getCurrentUserFiles(files, currentFileHashes, creatorFileHashes)}
-        {displayInput && (
+      currentUserMarks={currentUserMarks}
-          <>
+      setIsReadyToSign={setIsReadyToSign}
-            <Typography component="label" variant="h6">
+      setCurrentUserMarks={setCurrentUserMarks}
-              Select sigit file
+      setUpdatedMarks={setUpdatedMarks}
-            </Typography>
+      handleDownload={handleDownload}
-
+      otherUserMarks={otherUserMarks}
-            <Box className={styles.inputBlock}>
+      meta={meta}
-              <MuiFileInput
+    />
-                placeholder="Select file"
-                inputProps={{ accept: '.sigit.zip' }}
-                value={selectedFile}
-                onChange={(value) => setSelectedFile(value)}
-              />
-            </Box>
-
-            {selectedFile && (
-              <Box sx={{ mt: 2, display: 'flex', justifyContent: 'center' }}>
-                <Button onClick={handleDecrypt} variant="contained">
-                  Decrypt
-                </Button>
-              </Box>
-            )}
-          </>
-        )}
-
-        {submittedBy && Object.entries(files).length > 0 && meta && (
-          <>
-            <DisplayMeta
-              meta={meta}
-              files={files}
-              submittedBy={submittedBy}
-              signers={signers}
-              viewers={viewers}
-              creatorFileHashes={creatorFileHashes}
-              currentFileHashes={currentFileHashes}
-              signedBy={signedBy}
-              nextSigner={nextSinger}
-              getPrevSignersSig={getPrevSignersSig}
-            />
-
-            {signedStatus === SignedStatus.Fully_Signed && (
-              <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
-                <Button onClick={handleExport} variant="contained">
-                  Export
-                </Button>
-              </Box>
-            )}
-
-            {signedStatus === SignedStatus.User_Is_Next_Signer && (
-              <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
-                <Button onClick={handleSign} variant="contained">
-                  Sign
-                </Button>
-              </Box>
-            )}
-
-            {isSignerOrCreator && (
-              <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
-                <Button onClick={handleExportSigit} variant="contained">
-                  Export Sigit
-                </Button>
-              </Box>
-            )}
-          </>
-        )}
-      </Container>
-    </>
   )
 }

src/pages/sign/internal/displayMeta.tsx

@@ -34,11 +34,11 @@ import { UserAvatar } from '../../../components/UserAvatar'
 import { MetadataController } from '../../../controllers'
 import { npubToHex, shorten, hexToNpub, parseJson } from '../../../utils'
 import styles from '../style.module.scss'
-import { SigitFile } from '../../../utils/file'
+import { PdfFile } from '../../../types/drawing.ts'
 
 type DisplayMetaProps = {
   meta: Meta
-  files: { [fileName: string]: SigitFile }
+  files: { [filename: string]: PdfFile }
   submittedBy: string
   signers: `npub1${string}`[]
   viewers: `npub1${string}`[]
@@ -143,9 +143,12 @@ export const DisplayMeta = ({
     })
   }, [users, submittedBy, metadata])
 
-  const downloadFile = async (fileName: string) => {
+  const downloadFile = async (filename: string) => {
-    const file = files[fileName]
+    const arrayBuffer = await files[filename].file.arrayBuffer()
-    saveAs(file)
+    if (!arrayBuffer) return
+
+    const blob = new Blob([arrayBuffer])
+    saveAs(blob, filename)
   }
 
   return (

src/pages/sign/style.module.scss

@@ -2,6 +2,8 @@
 
 .container {
   color: $text-color;
+  //width: 550px;
+  //max-width: 550px;
 
   .inputBlock {
     position: relative;
@@ -65,7 +67,7 @@
     //z-index: 200;
   }
 
-  .fixedBottomForm input[type='text'] {
+  .fixedBottomForm input[type="text"] {
     width: 80%;
     padding: 10px;
     font-size: 16px;

src/pages/verify/index.tsx

@@ -1,4 +1,4 @@
-import { Box, Button, Tooltip, Typography } from '@mui/material'
+import { Box, Button, Divider, Tooltip, Typography } from '@mui/material'
 import JSZip from 'jszip'
 import { MuiFileInput } from 'mui-file-input'
 import { Event, verifyEvent } from 'nostr-tools'
@@ -26,11 +26,11 @@ import {
 import styles from './style.module.scss'
 import { useLocation } from 'react-router-dom'
 import axios from 'axios'
+import { PdfFile } from '../../types/drawing.ts'
 import {
   addMarks,
   convertToPdfBlob,
-  FONT_SIZE,
+  convertToPdfFile,
-  FONT_TYPE,
   groupMarksByFileNamePage,
   inPx
 } from '../../utils/pdf.ts'
@@ -49,15 +49,6 @@ import FileList from '../../components/FileList'
 import { CurrentUserFile } from '../../types/file.ts'
 import { Mark } from '../../types/mark.ts'
 import React from 'react'
-import { convertToSigitFile, SigitFile } from '../../utils/file.ts'
-import { FileDivider } from '../../components/FileDivider.tsx'
-import { ExtensionFileBox } from '../../components/ExtensionFileBox.tsx'
-import { useScale } from '../../hooks/useScale.tsx'
-import {
-  faCircleInfo,
-  faFile,
-  faFileDownload
-} from '@fortawesome/free-solid-svg-icons'
 
 interface PdfViewProps {
   files: CurrentUserFile[]
@@ -73,90 +64,77 @@ const SlimPdfView = ({
   parsedSignatureEvents
 }: PdfViewProps) => {
   const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
-  const { from } = useScale()
   useEffect(() => {
     if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
       pdfRefs.current[currentFile.id]?.scrollIntoView({
-        behavior: 'smooth'
+        behavior: 'smooth',
+        block: 'end'
       })
     }
   }, [currentFile])
   return (
-    <div className="files-wrapper">
+    <div className={styles.view}>
-      {files.length > 0 ? (
+      {files.map((currentUserFile, i) => {
-        files.map((currentUserFile, i) => {
+        const { hash, filename, pdfFile, id } = currentUserFile
-          const { hash, file, id } = currentUserFile
+        const signatureEvents = Object.keys(parsedSignatureEvents)
-          const signatureEvents = Object.keys(parsedSignatureEvents)
+        if (!hash) return
-          if (!hash) return
+        return (
-          return (
+          <React.Fragment key={filename}>
-            <React.Fragment key={file.name}>
+            <div
-              <div
+              id={filename}
-                id={file.name}
+              ref={(el) => (pdfRefs.current[id] = el)}
-                ref={(el) => (pdfRefs.current[id] = el)}
+              className={styles.fileWrapper}
-                className="file-wrapper"
+            >
-              >
+              {pdfFile.pages.map((page, i) => {
-                {file.isPdf &&
+                const marks: Mark[] = []
-                  file.pages?.map((page, i) => {
-                    const marks: Mark[] = []
 
-                    signatureEvents.forEach((e) => {
+                signatureEvents.forEach((e) => {
-                      const m = parsedSignatureEvents[
+                  const m = parsedSignatureEvents[
-                        e as `npub1${string}`
+                    e as `npub1${string}`
-                      ].parsedContent?.marks.filter(
+                  ].parsedContent?.marks.filter(
-                        (m) => m.pdfFileHash == hash && m.location.page == i
+                    (m) => m.pdfFileHash == hash && m.location.page == i
+                  )
+                  if (m) {
+                    marks.push(...m)
+                  }
+                })
+                return (
+                  <div className={styles.imageWrapper} key={i}>
+                    <img draggable="false" src={page.image} />
+                    {marks.map((m) => {
+                      return (
+                        <div
+                          className={styles.mark}
+                          key={m.id}
+                          style={{
+                            left: inPx(m.location.left),
+                            top: inPx(m.location.top),
+                            width: inPx(m.location.width),
+                            height: inPx(m.location.height)
+                          }}
+                        >
+                          {m.value}
+                        </div>
                       )
-                      if (m) {
+                    })}
-                        marks.push(...m)
+                  </div>
-                      }
+                )
-                    })
+              })}
-                    return (
+            </div>
-                      <div className="image-wrapper" key={i}>
+
-                        <img
+            {i < files.length - 1 && (
-                          draggable="false"
+              <Divider
-                          src={page.image}
+                sx={{
-                          alt={`page ${i} of ${file.name}`}
+                  fontSize: '12px',
-                        />
+                  color: 'rgba(0,0,0,0.15)'
-                        {marks.map((m) => {
+                }}
-                          return (
+              >
-                            <div
+                File Separator
-                              className={`file-mark ${styles.mark}`}
+              </Divider>
-                              key={m.id}
+            )}
-                              style={{
+          </React.Fragment>
-                                left: inPx(from(page.width, m.location.left)),
+        )
-                                top: inPx(from(page.width, m.location.top)),
+      })}
-                                width: inPx(from(page.width, m.location.width)),
-                                height: inPx(
-                                  from(page.width, m.location.height)
-                                ),
-                                fontFamily: FONT_TYPE,
-                                fontSize: inPx(from(page.width, FONT_SIZE))
-                              }}
-                            >
-                              {m.value}
-                            </div>
-                          )
-                        })}
-                      </div>
-                    )
-                  })}
-                {file.isImage && (
-                  <img
-                    className="file-image"
-                    src={file.objectUrl}
-                    alt={file.name}
-                  />
-                )}
-                {!(file.isPdf || file.isImage) && (
-                  <ExtensionFileBox extension={file.extension} />
-                )}
-              </div>
-              {i < files.length - 1 && <FileDivider />}
-            </React.Fragment>
-          )
-        })
-      ) : (
-        <LoadingSpinner variant="small" />
-      )}
     </div>
   )
 }
@@ -193,7 +171,7 @@ export const VerifyPage = () => {
   const [currentFileHashes, setCurrentFileHashes] = useState<{
     [key: string]: string | null
   }>({})
-  const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
+  const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
   const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
   const [signatureFileHashes, setSignatureFileHashes] = useState<{
     [key: string]: string
@@ -252,7 +230,7 @@ export const VerifyPage = () => {
 
               if (!zip) return
 
-              const files: { [fileName: string]: SigitFile } = {}
+              const files: { [filename: string]: PdfFile } = {}
               const fileHashes: { [key: string]: string | null } = {}
               const fileNames = Object.values(zip.files).map(
                 (entry) => entry.name
@@ -268,7 +246,7 @@ export const VerifyPage = () => {
                 )
 
                 if (arrayBuffer) {
-                  files[fileName] = await convertToSigitFile(
+                  files[fileName] = await convertToPdfFile(
                     arrayBuffer,
                     fileName!
                   )
@@ -445,15 +423,10 @@ export const VerifyPage = () => {
     const marks = extractMarksFromSignedMeta(updatedMeta)
     const marksByPage = groupMarksByFileNamePage(marks)
 
-    for (const [fileName, file] of Object.entries(files)) {
+    for (const [fileName, pdf] of Object.entries(files)) {
-      if (file.isPdf) {
+      const pages = await addMarks(pdf.file, marksByPage[fileName])
-        // Draw marks into PDF file and generate a brand new blob
+      const blob = await convertToPdfBlob(pages)
-        const pages = await addMarks(file, marksByPage[fileName])
+      zip.file(`files/${fileName}`, blob)
-        const blob = await convertToPdfBlob(pages)
-        zip.file(`files/${fileName}`, blob)
-      } else {
-        zip.file(`files/${fileName}`, file)
-      }
     }
 
     const arrayBuffer = await zip
@@ -572,9 +545,6 @@ export const VerifyPage = () => {
               </>
             }
             right={<UsersDetails meta={meta} />}
-            leftIcon={faFileDownload}
-            centerIcon={faFile}
-            rightIcon={faCircleInfo}
           >
             <SlimPdfView
               currentFile={currentFile}

src/pages/verify/style.module.scss

@@ -51,6 +51,30 @@
   }
 }
 
+.view {
+  width: 550px;
+  max-width: 550px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+}
+
+.imageWrapper {
+  position: relative;
+
+  img {
+    width: 100%;
+    display: block;
+  }
+}
+
+.fileWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
 .mark {
   position: absolute;
 

src/styles/sizes.scss

@@ -2,5 +2,3 @@ $header-height: 65px;
 $body-vertical-padding: 25px;
 
 $default-container-padding-inline: 10px;
-
-$tabs-height: 40px;

src/types/drawing.ts

@@ -1,23 +1,29 @@
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
-import { MarkRect } from './mark'
-
 export interface MouseState {
   clicked?: boolean
   dragging?: boolean
   resizing?: boolean
   coordsInWrapper?: {
-    x: number
+    mouseX: number
-    y: number
+    mouseY: number
   }
 }
 
+export interface PdfFile {
+  file: File
+  pages: PdfPage[]
+  expanded?: boolean
+}
+
 export interface PdfPage {
   image: string
-  width: number
   drawnFields: DrawnField[]
 }
 
-export interface DrawnField extends MarkRect {
+export interface DrawnField {
+  left: number
+  top: number
+  width: number
+  height: number
   type: MarkType
   /**
    * npub of a counter part
@@ -28,7 +34,7 @@ export interface DrawnField extends MarkRect {
 export interface DrawTool {
   identifier: MarkType
   label: string
-  icon: IconDefinition
+  icon: JSX.Element
   defaultValue?: string
   selected?: boolean
   active?: boolean

src/types/errors/MetaParseError.ts

@@ -1,23 +0,0 @@
-import { Jsonable } from '.'
-
-// Reuse common error messages for meta parsing
-export enum MetaParseErrorType {
-  'PARSE_ERROR_EVENT' = 'error occurred in parsing the create signature event',
-  'PARSE_ERROR_SIGNATURE_EVENT_CONTENT' = "err in parsing the createSignature event's content"
-}
-
-export class MetaParseError extends Error {
-  public readonly context?: Jsonable
-
-  constructor(
-    message: string,
-    options: { cause?: Error; context?: Jsonable } = {}
-  ) {
-    const { cause, context } = options
-
-    super(message, { cause })
-    this.name = this.constructor.name
-
-    this.context = context
-  }
-}

src/types/errors/index.ts

@@ -1,29 +0,0 @@
-export type Jsonable =
-  | string
-  | number
-  | boolean
-  | null
-  | undefined
-  | readonly Jsonable[]
-  | { readonly [key: string]: Jsonable }
-  | { toJSON(): Jsonable }
-
-/**
- * Handle errors
- * Wraps the errors without message property and stringify to a message so we can use it later
- * @param error
- * @returns
- */
-export function handleError(error: unknown): Error {
-  if (error instanceof Error) return error
-
-  // No message error, wrap it and stringify
-  let stringified = 'Unable to stringify the thrown value'
-  try {
-    stringified = JSON.stringify(error)
-  } catch (error) {
-    console.error(stringified, error)
-  }
-
-  return new Error(`Wrapped Error: ${stringified}`)
-}

src/types/file.ts

@@ -1,8 +1,9 @@
-import { SigitFile } from '../utils/file'
+import { PdfFile } from './drawing.ts'
 
 export interface CurrentUserFile {
   id: number
-  file: SigitFile
+  pdfFile: PdfFile
+  filename: string
   hash?: string
   isHashValid: boolean
 }

src/types/mark.ts

@@ -18,13 +18,10 @@ export interface Mark {
   value?: string
 }
 
-export interface MarkLocation extends MarkRect {
+export interface MarkLocation {
+  top: number
+  left: number
+  height: number
+  width: number
   page: number
 }
-
-export interface MarkRect {
-  left: number
-  top: number
-  width: number
-  height: number
-}

src/utils/const.ts

@@ -26,94 +26,3 @@ export const DEFAULT_LOOK_UP_RELAY_LIST = [
   'wss://user.kindpag.es',
   'wss://purplepag.es'
 ]
-
-// Uses the https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types list
-// Updated on 2024/08/22
-export const MOST_COMMON_MEDIA_TYPES = new Map([
-  ['aac', 'audio/aac'], // AAC audio
-  ['abw', 'application/x-abiword'], // AbiWord document
-  ['apng', 'image/apng'], // Animated Portable Network Graphics (APNG) image
-  ['arc', 'application/x-freearc'], // Archive document (multiple files embedded)
-  ['avif', 'image/avif'], // AVIF image
-  ['avi', 'video/x-msvideo'], // AVI: Audio Video Interleave
-  ['azw', 'application/vnd.amazon.ebook'], // Amazon Kindle eBook format
-  ['bin', 'application/octet-stream'], // Any kind of binary data
-  ['bmp', 'image/bmp'], // Windows OS/2 Bitmap Graphics
-  ['bz', 'application/x-bzip'], // BZip archive
-  ['bz2', 'application/x-bzip2'], // BZip2 archive
-  ['cda', 'application/x-cdf'], // CD audio
-  ['csh', 'application/x-csh'], // C-Shell script
-  ['css', 'text/css'], // Cascading Style Sheets (CSS)
-  ['csv', 'text/csv'], // Comma-separated values (CSV)
-  ['doc', 'application/msword'], // Microsoft Word
-  [
-    'docx',
-    'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
-  ], // Microsoft Word (OpenXML)
-  ['eot', 'application/vnd.ms-fontobject'], // MS Embedded OpenType fonts
-  ['epub', 'application/epub+zip'], // Electronic publication (EPUB)
-  ['gz', 'application/gzip'], // GZip Compressed Archive
-  ['gif', 'image/gif'], // Graphics Interchange Format (GIF)
-  ['htm', 'text/html'], // HyperText Markup Language (HTML)
-  ['html', 'text/html'], // HyperText Markup Language (HTML)
-  ['ico', 'image/vnd.microsoft.icon'], // Icon format
-  ['ics', 'text/calendar'], // iCalendar format
-  ['jar', 'application/java-archive'], // Java Archive (JAR)
-  ['jpeg', 'image/jpeg'], // JPEG images
-  ['jpg', 'image/jpeg'], // JPEG images
-  ['js', 'text/javascript'], // JavaScript
-  ['json', 'application/json'], // JSON format
-  ['jsonld', 'application/ld+json'], // JSON-LD format
-  ['mid', 'audio/midi'], // Musical Instrument Digital Interface (MIDI)
-  ['midi', 'audio/midi'], // Musical Instrument Digital Interface (MIDI)
-  ['mjs', 'text/javascript'], // JavaScript module
-  ['mp3', 'audio/mpeg'], // MP3 audio
-  ['mp4', 'video/mp4'], // MP4 video
-  ['mpeg', 'video/mpeg'], // MPEG Video
-  ['mpkg', 'application/vnd.apple.installer+xml'], // Apple Installer Package
-  ['odp', 'application/vnd.oasis.opendocument.presentation'], // OpenDocument presentation document
-  ['ods', 'application/vnd.oasis.opendocument.spreadsheet'], // OpenDocument spreadsheet document
-  ['odt', 'application/vnd.oasis.opendocument.text'], // OpenDocument text document
-  ['oga', 'audio/ogg'], // Ogg audio
-  ['ogv', 'video/ogg'], // Ogg video
-  ['ogx', 'application/ogg'], // Ogg
-  ['opus', 'audio/ogg'], // Opus audio in Ogg container
-  ['otf', 'font/otf'], // OpenType font
-  ['png', 'image/png'], // Portable Network Graphics
-  ['pdf', 'application/pdf'], // Adobe Portable Document Format (PDF)
-  ['php', 'application/x-httpd-php'], // Hypertext Preprocessor (Personal Home Page)
-  ['ppt', 'application/vnd.ms-powerpoint'], // Microsoft PowerPoint
-  [
-    'pptx',
-    'application/vnd.openxmlformats-officedocument.presentationml.presentation'
-  ], // Microsoft PowerPoint (OpenXML)
-  ['rar', 'application/vnd.rar'], // RAR archive
-  ['rtf', 'application/rtf'], // Rich Text Format (RTF)
-  ['sh', 'application/x-sh'], // Bourne shell script
-  ['svg', 'image/svg+xml'], // Scalable Vector Graphics (SVG)
-  ['tar', 'application/x-tar'], // Tape Archive (TAR)
-  ['tif', 'image/tiff'], // Tagged Image File Format (TIFF)
-  ['tiff', 'image/tiff'], // Tagged Image File Format (TIFF)
-  ['ts', 'video/mp2t'], // MPEG transport stream
-  ['ttf', 'font/ttf'], // TrueType Font
-  ['txt', 'text/plain'], // Text, (generally ASCII or ISO 8859-n)
-  ['vsd', 'application/vnd.visio'], // Microsoft Visio
-  ['wav', 'audio/wav'], // Waveform Audio Format
-  ['weba', 'audio/webm'], // WEBM audio
-  ['webm', 'video/webm'], // WEBM video
-  ['webp', 'image/webp'], // WEBP image
-  ['woff', 'font/woff'], // Web Open Font Format (WOFF)
-  ['woff2', 'font/woff2'], // Web Open Font Format (WOFF)
-  ['xhtml', 'application/xhtml+xml'], // XHTML
-  ['xls', 'application/vnd.ms-excel'], // Microsoft Excel
-  [
-    '.xlsx',
-    'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
-  ], // Microsoft Excel (OpenXML)
-  ['xml', 'application/xml'], // XML
-  ['xul', 'application/vnd.mozilla.xul+xml'], // XUL
-  ['zip', 'application/zip'], // ZIP archive
-  ['3gp', 'video/3gpp'], // 3GPP audio/video container
-  ['3g2', 'video/3gpp2'], // 3GPP2 audio/video container
-  ['7z', 'application/x-7z-compressed'] // 7-zip archive
-])

src/utils/file.ts

@@ -1,140 +1,24 @@
 import { Meta } from '../types'
-import { PdfPage } from '../types/drawing.ts'
-import { MOST_COMMON_MEDIA_TYPES } from './const.ts'
 import { extractMarksFromSignedMeta } from './mark.ts'
-import {
+import { addMarks, convertToPdfBlob, groupMarksByFileNamePage } from './pdf.ts'
-  addMarks,
-  convertToPdfBlob,
-  groupMarksByFileNamePage,
-  isPdf,
-  pdfToImages
-} from './pdf.ts'
 import JSZip from 'jszip'
+import { PdfFile } from '../types/drawing.ts'
 
-export const getZipWithFiles = async (
+const getZipWithFiles = async (
   meta: Meta,
-  files: { [filename: string]: SigitFile }
+  files: { [filename: string]: PdfFile }
 ): Promise<JSZip> => {
   const zip = new JSZip()
   const marks = extractMarksFromSignedMeta(meta)
   const marksByFileNamePage = groupMarksByFileNamePage(marks)
 
-  for (const [fileName, file] of Object.entries(files)) {
+  for (const [fileName, pdf] of Object.entries(files)) {
-    if (file.isPdf) {
+    const pages = await addMarks(pdf.file, marksByFileNamePage[fileName])
-      // Handle PDF Files
+    const blob = await convertToPdfBlob(pages)
-      const pages = await addMarks(file, marksByFileNamePage[fileName])
+    zip.file(`files/${fileName}`, blob)
-      const blob = await convertToPdfBlob(pages)
-      zip.file(`files/${fileName}`, blob)
-    } else {
-      // Handle other files
-      zip.file(`files/${fileName}`, file)
-    }
   }
 
   return zip
 }
 
-/**
+export { getZipWithFiles }
- * Converts a PDF ArrayBuffer to a generic PDF File
- * @param arrayBuffer of a PDF
- * @param fileName identifier of the pdf file
- * @param type optional file type (defaults to pdf)
- */
-export const toFile = (
-  arrayBuffer: ArrayBuffer,
-  fileName: string,
-  type: string = 'application/pdf'
-): File => {
-  const blob = new Blob([arrayBuffer], { type })
-  return new File([blob], fileName, { type })
-}
-
-export class SigitFile extends File {
-  extension: string
-  isPdf: boolean
-  isImage: boolean
-
-  pages?: PdfPage[]
-  objectUrl?: string
-
-  constructor(file: File) {
-    super([file], file.name, { type: file.type })
-    this.isPdf = isPdf(this)
-    this.isImage = isImage(this)
-    this.extension = extractFileExtension(this.name)
-  }
-
-  async process() {
-    if (this.isPdf) this.pages = await pdfToImages(await this.arrayBuffer())
-    if (this.isImage) this.objectUrl = URL.createObjectURL(this)
-  }
-}
-
-export const getSigitFile = async (file: File) => {
-  const sigitFile = new SigitFile(file)
-  // Process sigit file
-  // - generate pages for PDF files
-  // - generate ObjectRL for image files
-  await sigitFile.process()
-  return sigitFile
-}
-
-/**
- * Takes an ArrayBuffer and converts to Sigit's Internal File type
- * @param arrayBuffer
- * @param fileName
- */
-export const convertToSigitFile = async (
-  arrayBuffer: ArrayBuffer,
-  fileName: string
-): Promise<SigitFile> => {
-  const type = getMediaType(extractFileExtension(fileName))
-  const file = toFile(arrayBuffer, fileName, type)
-  const sigitFile = await getSigitFile(file)
-  return sigitFile
-}
-
-/**
- * @param fileNames - List of filenames to check
- * @returns List of extensions and if all are same
- */
-export const extractFileExtensions = (fileNames: string[]) => {
-  const extensions = fileNames.reduce((result: string[], file: string) => {
-    const extension = file.split('.').pop()
-    if (extension) {
-      result.push(extension)
-    }
-    return result
-  }, [])
-
-  const isSame = extensions.every((ext) => ext === extensions[0])
-
-  return { extensions, isSame }
-}
-
-/**
- * @param fileName - Filename to check
- * @returns Extension string
- */
-export const extractFileExtension = (fileName: string) => {
-  const parts = fileName.split('.')
-  return parts[parts.length - 1]
-}
-
-export const getMediaType = (extension: string) => {
-  return MOST_COMMON_MEDIA_TYPES.get(extension)
-}
-
-export const isImage = (file: File) => {
-  const validImageMediaTypes = [
-    'image/png',
-    'image/jpeg',
-    'image/jpg',
-    'image/gif',
-    'image/svg+xml',
-    'image/bmp',
-    'image/x-icon'
-  ]
-
-  return validImageMediaTypes.includes(file.type.toLowerCase())
-}

src/utils/mark.ts

@@ -47,7 +47,7 @@ const filterMarksByPubkey = (marks: Mark[], pubkey: string): Mark[] => {
 
 /**
  * Takes Signed Doc Signatures part of Meta and extracts
- * all Marks into one flat array, regardless of the user.
+ * all Marks into one flar array, regardless of the user.
  * @param meta
  */
 const extractMarksFromSignedMeta = (meta: Meta): Mark[] => {

src/utils/meta.ts

@@ -2,12 +2,6 @@ import { CreateSignatureEventContent, Meta } from '../types'
 import { fromUnixTimestamp, parseJson } from '.'
 import { Event, verifyEvent } from 'nostr-tools'
 import { toast } from 'react-toastify'
-import { extractFileExtensions } from './file'
-import { handleError } from '../types/errors'
-import {
-  MetaParseError,
-  MetaParseErrorType
-} from '../types/errors/MetaParseError'
 
 export enum SignStatus {
   Signed = 'Signed',
@@ -22,6 +16,58 @@ export enum SigitStatus {
   Complete = 'Completed'
 }
 
+type Jsonable =
+  | string
+  | number
+  | boolean
+  | null
+  | undefined
+  | readonly Jsonable[]
+  | { readonly [key: string]: Jsonable }
+  | { toJSON(): Jsonable }
+
+export class SigitMetaParseError extends Error {
+  public readonly context?: Jsonable
+
+  constructor(
+    message: string,
+    options: { cause?: Error; context?: Jsonable } = {}
+  ) {
+    const { cause, context } = options
+
+    super(message, { cause })
+    this.name = this.constructor.name
+
+    this.context = context
+  }
+}
+
+/**
+ * Handle meta errors
+ * Wraps the errors without message property and stringify to a message so we can use it later
+ * @param error
+ * @returns
+ */
+function handleError(error: unknown): Error {
+  if (error instanceof Error) return error
+
+  // No message error, wrap it and stringify
+  let stringified = 'Unable to stringify the thrown value'
+  try {
+    stringified = JSON.stringify(error)
+  } catch (error) {
+    console.error(stringified, error)
+  }
+
+  return new Error(`[SiGit Error]: ${stringified}`)
+}
+
+// Reuse common error messages for meta parsing
+export enum SigitMetaParseErrorType {
+  'PARSE_ERROR_EVENT' = 'error occurred in parsing the create signature event',
+  'PARSE_ERROR_SIGNATURE_EVENT_CONTENT' = "err in parsing the createSignature event's content"
+}
+
 export interface SigitCardDisplayInfo {
   createdAt?: number
   title?: string
@@ -42,7 +88,7 @@ export const parseNostrEvent = async (raw: string): Promise<Event> => {
     const event = await parseJson<Event>(raw)
     return event
   } catch (error) {
-    throw new MetaParseError(MetaParseErrorType.PARSE_ERROR_EVENT, {
+    throw new SigitMetaParseError(SigitMetaParseErrorType.PARSE_ERROR_EVENT, {
       cause: handleError(error),
       context: raw
     })
@@ -62,8 +108,8 @@ export const parseCreateSignatureEventContent = async (
       await parseJson<CreateSignatureEventContent>(raw)
     return createSignatureEventContent
   } catch (error) {
-    throw new MetaParseError(
+    throw new SigitMetaParseError(
-      MetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
+      SigitMetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
       {
         cause: handleError(error),
         context: raw
@@ -118,7 +164,7 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
 
     return sigitInfo
   } catch (error) {
-    if (error instanceof MetaParseError) {
+    if (error instanceof SigitMetaParseError) {
       toast.error(error.message)
       console.error(error.name, error.message, error.cause, error.context)
     } else {
@@ -126,3 +172,29 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
     }
   }
 }
+
+/**
+ * @param fileNames - List of filenames to check
+ * @returns List of extensions and if all are same
+ */
+export const extractFileExtensions = (fileNames: string[]) => {
+  const extensions = fileNames.reduce((result: string[], file: string) => {
+    const extension = file.split('.').pop()
+    if (extension) {
+      result.push(extension)
+    }
+    return result
+  }, [])
+
+  const isSame = extensions.every((ext) => ext === extensions[0])
+
+  return { extensions, isSame }
+}
+
+/**
+ * @param fileName - Filename to check
+ * @returns Extension string
+ */
+export const extractFileExtension = (fileName: string) => {
+  return fileName.split('.').pop()
+}

src/utils/nostr.ts

@@ -11,7 +11,6 @@ import {
   getEventHash,
   getPublicKey,
   kinds,
-  nip04,
   nip19,
   nip44,
   verifyEvent
@@ -31,26 +30,10 @@ import { AuthState, Keys } from '../store/auth/types'
 import { RelaysState } from '../store/relays/types'
 import store from '../store/store'
 import { Meta, SignedEvent, UserAppData } from '../types'
-import { getDefaultRelayMap } from './relays'
+import { getHash } from './hash'
 import { parseJson, removeLeadingSlash } from './string'
 import { timeout } from './utils'
-import { getHash } from './hash'
+import { getDefaultRelayMap } from './relays'
-
-/**
- * Generates a `d` tag for userAppData
- */
-const getDTagForUserAppData = async (): Promise<string | null> => {
-  const isLoggedIn = store.getState().auth?.loggedIn
-  const pubkey = store.getState().auth?.usersPubkey
-
-  if (!isLoggedIn || !pubkey) {
-    throw new Error(
-      'For generating d tag user must be logged in and a valid pubkey should exists in app Store'
-    )
-  }
-
-  return getHash(`938_${pubkey}`)
-}
 
 /**
  * @param hexKey hex private or public key
@@ -394,13 +377,13 @@ export const getUsersAppData = async (): Promise<UserAppData | null> => {
   }
 
   // Generate an identifier for the user's nip78
-  const dTag = await getDTagForUserAppData()
+  const hash = await getHash('938' + usersPubkey)
-  if (!dTag) return null
+  if (!hash) return null
 
   // Define a filter for fetching events
   const filter: Filter = {
     kinds: [kinds.Application],
-    '#d': [dTag]
+    '#d': [hash]
   }
 
   const encryptedContent = await relayController
@@ -595,14 +578,14 @@ export const updateUsersAppData = async (meta: Meta) => {
   if (!encryptedContent) return null
 
   // generate the identifier for user's appData event
-  const dTag = await getDTagForUserAppData()
+  const hash = await getHash('938' + usersPubkey)
-  if (!dTag) return null
+  if (!hash) return null
 
   const updatedEvent: UnsignedEvent = {
     kind: kinds.Application,
     pubkey: usersPubkey!,
     created_at: unixNow(),
-    tags: [['d', dTag]],
+    tags: [['d', hash]],
     content: encryptedContent
   }
 
@@ -710,10 +693,9 @@ const uploadUserAppDataToBlossom = async (
   // Convert the private key from hex to bytes
   const secretKey = hexToBytes(privateKey)
   // Encrypt the JSON string using the secret key
-  const encrypted = await nip04.encrypt(
+  const encrypted = nip44.v2.encrypt(
-    secretKey,
+    stringified,
-    getPublicKey(secretKey),
+    nip44ConversationKey(secretKey, getPublicKey(secretKey))
-    stringified
   )
 
   // Create a blob from the encrypted data
@@ -806,7 +788,10 @@ const getUserAppDataFromBlossom = async (url: string, privateKey: string) => {
   const pubkey = getPublicKey(secret)
 
   // Decrypt the encrypted data using the secret and public key
-  const decrypted = await nip04.decrypt(secret, pubkey, encrypted)
+  const decrypted = nip44.v2.decrypt(
+    encrypted,
+    nip44ConversationKey(secret, pubkey)
+  )
 
   // Parse the decrypted JSON content
   const parsedContent = await parseJson<{

src/utils/pdf.ts

@@ -1,15 +1,18 @@
-import { PdfPage } from '../types/drawing.ts'
+import { PdfFile, PdfPage } from '../types/drawing.ts'
+import * as PDFJS from 'pdfjs-dist'
 import { PDFDocument } from 'pdf-lib'
 import { Mark } from '../types/mark.ts'
 
-import * as PDFJS from 'pdfjs-dist'
+PDFJS.GlobalWorkerOptions.workerSrc = new URL(
-import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'
+  'pdfjs-dist/build/pdf.worker.min.mjs',
-if (!PDFJS.GlobalWorkerOptions.workerPort) {
+  import.meta.url
-  // Use workerPort and allow worker to be shared between all getDocument calls
+).toString()
-  const worker = new PDFJSWorker()
-  PDFJS.GlobalWorkerOptions.workerPort = worker
-}
 
+/**
+ * Scale between the PDF page's natural size and rendered size
+ * @constant {number}
+ */
+const SCALE: number = 3
 /**
  * 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
@@ -17,28 +20,58 @@ if (!PDFJS.GlobalWorkerOptions.workerPort) {
  * This should be fixed going forward.
  * Switching to PDF-Lib will most likely make this problem redundant.
  */
-export const FONT_SIZE: number = 16
+const FONT_SIZE: number = 40
 /**
  * Current font type used when generating a PDF.
  */
-export const FONT_TYPE: string = 'Arial'
+const FONT_TYPE: string = 'Arial'
 
 /**
- * A utility that transforms a drawing coordinate number into a CSS-compatible pixel string
+ * Converts a PDF ArrayBuffer to a generic PDF File
+ * @param arrayBuffer of a PDF
+ * @param fileName identifier of the pdf file
+ */
+const toFile = (arrayBuffer: ArrayBuffer, fileName: string): File => {
+  const blob = new Blob([arrayBuffer], { type: 'application/pdf' })
+  return new File([blob], fileName, { type: 'application/pdf' })
+}
+
+/**
+ * Converts a generic PDF File to Sigit's internal Pdf File type
+ * @param {File} file
+ * @return {PdfFile} Sigit's internal PDF File type
+ */
+const toPdfFile = async (file: File): Promise<PdfFile> => {
+  const data = await readPdf(file)
+  const pages = await pdfToImages(data)
+  return { file, pages, expanded: false }
+}
+/**
+ * Transforms an array of generic PDF Files into an array of Sigit's
+ * internal representation of Pdf Files
+ * @param selectedFiles - an array of generic PDF Files
+ * @return PdfFile[] - an array of Sigit's internal Pdf File type
+ */
+const toPdfFiles = async (selectedFiles: File[]): Promise<PdfFile[]> => {
+  return Promise.all(selectedFiles.filter(isPdf).map(toPdfFile))
+}
+
+/**
+ * A utility that transforms a drawing coordinate number into a CSS-compatible string
  * @param coordinate
  */
-export const inPx = (coordinate: number): string => `${coordinate}px`
+const inPx = (coordinate: number): string => `${coordinate}px`
 
 /**
  * A utility that checks if a given file is of the pdf type
  * @param file
  */
-export const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
+const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
 
 /**
  * Reads the pdf file binaries
  */
-export const readPdf = (file: File): Promise<string | ArrayBuffer> => {
+const readPdf = (file: File): Promise<string | ArrayBuffer> => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
 
@@ -62,55 +95,33 @@ export const readPdf = (file: File): Promise<string | ArrayBuffer> => {
   })
 }
 
-export const getInnerContentWidth = () => {
-  // Fetch the first container element we find
-  const element = document.querySelector('#content-preview')
-
-  if (element) {
-    const style = getComputedStyle(element)
-
-    // Calculate width without padding
-    const widthWithoutPadding =
-      element.clientWidth - parseFloat(style.padding) * 2
-
-    return widthWithoutPadding
-  }
-
-  // Default value
-  return 620
-}
-
 /**
  * Converts pdf to the images
  * @param data pdf file bytes
  */
-export const pdfToImages = async (
+const pdfToImages = async (data: string | ArrayBuffer): Promise<PdfPage[]> => {
-  data: string | ArrayBuffer
+  const images: string[] = []
-): Promise<PdfPage[]> => {
-  const pages: PdfPage[] = []
   const pdf = await PDFJS.getDocument(data).promise
   const canvas = document.createElement('canvas')
-  const width = getInnerContentWidth()
 
   for (let i = 0; i < pdf.numPages; i++) {
     const page = await pdf.getPage(i + 1)
-
+    const viewport = page.getViewport({ scale: SCALE })
-    const originalViewport = page.getViewport({ scale: 1 })
-    const scale = width / originalViewport.width
-    const viewport = page.getViewport({ scale: scale })
     const context = canvas.getContext('2d')
     canvas.height = viewport.height
     canvas.width = viewport.width
-
     await page.render({ canvasContext: context!, viewport: viewport }).promise
-    pages.push({
+    images.push(canvas.toDataURL())
-      image: canvas.toDataURL(),
-      width: originalViewport.width,
-      drawnFields: []
-    })
   }
 
-  return pages
+  return Promise.resolve(
+    images.map((image) => {
+      return {
+        image,
+        drawnFields: []
+      }
+    })
+  )
 }
 
 /**
@@ -118,7 +129,7 @@ export const pdfToImages = async (
  * 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 (
+const addMarks = async (
   file: File,
   marksPerPage: { [key: string]: Mark[] }
 ) => {
@@ -130,39 +141,34 @@ export const addMarks = async (
 
   for (let i = 0; i < pdf.numPages; i++) {
     const page = await pdf.getPage(i + 1)
-    const viewport = page.getViewport({ scale: 1 })
+    const viewport = page.getViewport({ scale: SCALE })
     const context = canvas.getContext('2d')
     canvas.height = viewport.height
     canvas.width = viewport.width
-    if (context) {
+    await page.render({ canvasContext: context!, viewport: viewport }).promise
-      await page.render({ canvasContext: context, viewport: viewport }).promise
 
-      if (marksPerPage && Object.hasOwn(marksPerPage, i)) {
+    if (marksPerPage && Object.hasOwn(marksPerPage, i))
-        marksPerPage[i]?.forEach((mark) => draw(mark, context))
+      marksPerPage[i]?.forEach((mark) => draw(mark, context!))
-      }
 
-      images.push(canvas.toDataURL())
+    images.push(canvas.toDataURL())
-    }
   }
 
-  canvas.remove()
+  return Promise.resolve(images)
-
-  return images
 }
 
 /**
  * Utility to scale mark in line with the PDF-to-PNG scale
  */
-export const scaleMark = (mark: Mark, scale: number): Mark => {
+const scaleMark = (mark: Mark): Mark => {
   const { location } = mark
   return {
     ...mark,
     location: {
       ...location,
-      width: location.width * scale,
+      width: location.width * SCALE,
-      height: location.height * scale,
+      height: location.height * SCALE,
-      left: location.left * scale,
+      left: location.left * SCALE,
-      top: location.top * scale
+      top: location.top * SCALE
     }
   }
 }
@@ -171,32 +177,29 @@ export const scaleMark = (mark: Mark, scale: number): Mark => {
  * Utility to check if a Mark has value
  * @param mark
  */
-export const hasValue = (mark: Mark): boolean => !!mark.value
+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
  */
-export const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
+const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
   const { location } = mark
-  ctx.font = FONT_SIZE + 'px ' + FONT_TYPE
+
-  ctx.fillStyle = 'black'
+  ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE
-  const textMetrics = ctx.measureText(mark.value!)
+  ctx!.fillStyle = 'black'
-  const textHeight =
+  const textMetrics = ctx!.measureText(mark.value!)
-    textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent
   const textX = location.left + (location.width - textMetrics.width) / 2
-  const textY = location.top + (location.height + textHeight) / 2
+  const textY = location.top + (location.height + parseInt(ctx!.font)) / 2
-  ctx.fillText(mark.value!, textX, textY)
+  ctx!.fillText(mark.value!, textX, textY)
 }
 
 /**
  * Takes an array of encoded PDF pages and returns a blob that is a complete PDF file
  * @param markedPdfPages
  */
-export const convertToPdfBlob = async (
+const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
-  markedPdfPages: string[]
-): Promise<Blob> => {
   const pdfDoc = await PDFDocument.create()
 
   for (const page of markedPdfPages) {
@@ -214,15 +217,30 @@ export const convertToPdfBlob = async (
   return new Blob([pdfBytes], { type: 'application/pdf' })
 }
 
+/**
+ * Takes an ArrayBuffer of a PDF file and converts to Sigit's Internal Pdf File type
+ * @param arrayBuffer
+ * @param fileName
+ */
+const convertToPdfFile = async (
+  arrayBuffer: ArrayBuffer,
+  fileName: string
+): Promise<PdfFile> => {
+  const file = toFile(arrayBuffer, fileName)
+  return toPdfFile(file)
+}
+
 /**
  * @param marks - an array of Marks
  * @function hasValue removes any Mark without a property
+ * @function scaleMark scales remaining marks in line with SCALE
  * @function byPage groups remaining Marks by their page marks.location.page
  */
-export const groupMarksByFileNamePage = (marks: Mark[]) => {
+const groupMarksByFileNamePage = (marks: Mark[]) => {
   return marks
     .filter(hasValue)
-    .reduce<{ [fileName: string]: { [page: number]: Mark[] } }>(byPage, {})
+    .map(scaleMark)
+    .reduce<{ [filename: string]: { [page: number]: Mark[] } }>(byPage, {})
 }
 
 /**
@@ -233,19 +251,30 @@ export const groupMarksByFileNamePage = (marks: Mark[]) => {
  * @param obj - accumulator in the reducer callback
  * @param mark - current value, i.e. Mark being examined
  */
-export const byPage = (
+const byPage = (
   obj: { [filename: string]: { [page: number]: Mark[] } },
   mark: Mark
 ) => {
-  const fileName = mark.fileName
+  const filename = mark.fileName
   const pageNumber = mark.location.page
-  const pages = obj[fileName] ?? {}
+  const pages = obj[filename] ?? {}
   const marks = pages[pageNumber] ?? []
   return {
     ...obj,
-    [fileName]: {
+    [filename]: {
       ...pages,
       [pageNumber]: [...marks, mark]
     }
   }
 }
+
+export {
+  toFile,
+  toPdfFile,
+  toPdfFiles,
+  inPx,
+  convertToPdfFile,
+  addMarks,
+  convertToPdfBlob,
+  groupMarksByFileNamePage
+}

src/utils/relays.ts

@@ -30,6 +30,7 @@ const findRelayListAndUpdateCache = async (
       authors: [hexKey]
     }
 
+    console.count('findRelayListAndUpdateCache')
     const event = await relayController.fetchEvent(eventFilter, lookUpRelays)
     if (event) {
       await localCache.addUserRelayListMetadata(event)

src/utils/sign.ts

@@ -31,16 +31,4 @@ const getLastSignersSig = (
   }
 }
 
-/**
+export { getLastSignersSig }
- * Checks if all signers have signed the sigit
- * @param signers - an array of npubs of all signers from the Sigit
- * @param signedBy - an array of npubs that have signed it already
- */
-const isFullySigned = (
-  signers: `npub1${string}`[],
-  signedBy: `npub1${string}`[]
-): boolean => {
-  return signers.every((signer) => signedBy.includes(signer))
-}
-
-export { getLastSignersSig, isFullySigned }

src/utils/string.ts

@@ -1,5 +1,5 @@
 /**
- * Function will replace the middle of the string with ellipsis if length greater then
+ * Function will replace the middle of the string with 3 dots if length greater then
  * offset value
  * @param str string to shorten
  * @param offset of how many chars to keep in the beginning and the end
@@ -9,7 +9,10 @@ export const shorten = (str: string, offset = 9) => {
   // return original string if it is not long enough
   if (str.length < offset * 2 + 4) return str
 
-  return `${str.slice(0, offset)}…${str.slice(str.length - offset, str.length)}`
+  return `${str.slice(0, offset)}...${str.slice(
+    str.length - offset,
+    str.length
+  )}`
 }
 
 export const stringToHex = (str: string) => {

src/utils/utils.ts

@@ -1,5 +1,5 @@
+import { PdfFile } from '../types/drawing.ts'
 import { CurrentUserFile } from '../types/file.ts'
-import { SigitFile } from './file.ts'
 
 export const compareObjects = (
   obj1: object | null | undefined,
@@ -75,13 +75,13 @@ export const timeout = (ms: number = 60000) => {
  * @param creatorFileHashes
  */
 export const getCurrentUserFiles = (
-  files: { [filename: string]: SigitFile },
+  files: { [filename: string]: PdfFile },
   fileHashes: { [key: string]: string | null },
   creatorFileHashes: { [key: string]: string }
 ): CurrentUserFile[] => {
-  return Object.entries(files).map(([filename, file], index) => {
+  return Object.entries(files).map(([filename, pdfFile], index) => {
     return {
-      file,
+      pdfFile,
       filename,
       id: index + 1,
       ...(!!fileHashes[filename] && { hash: fileHashes[filename]! }),
@@ -89,32 +89,3 @@ export const getCurrentUserFiles = (
     }
   })
 }
-
-/**
- * Utility function that generates a promise with a callback on each array item
- * and retuns only non-null fulfilled results
- * @param array
- * @param cb callback that generates a promise
- * @returns Array with the non-null results
- */
-export const settleAllFullfilfedPromises = async <Item, FulfilledItem = Item>(
-  array: Item[],
-  cb: (arg: Item) => Promise<FulfilledItem>
-) => {
-  // Run the callback on the array to get promises
-  const promises = array.map(cb)
-
-  // Use Promise.allSettled to wait for all promises to settle
-  const results = await Promise.allSettled(promises)
-
-  // Extract non-null values from fulfilled promises in a single pass
-  return results.reduce<NonNullable<FulfilledItem>[]>((acc, result) => {
-    if (result.status === 'fulfilled') {
-      const value = result.value
-      if (value) {
-        acc.push(value)
-      }
-    }
-    return acc
-  }, [])
-}