Merge pull request 'new release' (#190) from staging into main

Reviewed-on: #190
Reviewed-by: enes <enes@noreply.git.nostrdev.com>
Reviewed-by: eugene <eugene@nostrdev.com>

.gitea/workflows/release-staging.yaml

@@ -18,7 +18,7 @@ jobs:
           node-version: 18
 
       - name: Audit
-        run: npm audit
+        run: npm audit --omit=dev
 
       - 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
+        run: npm audit --omit=dev
 
       - name: Install Dependencies
         run: npm ci

package-lock.json

@@ -1,13 +1,14 @@
 {
-  "name": "web",
+  "name": "sigit",
   "version": "0.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
-      "name": "web",
+      "name": "sigit",
       "version": "0.0.0",
       "hasInstallScript": true,
+      "license": "AGPL-3.0-or-later ",
       "dependencies": {
         "@emotion/react": "11.11.4",
         "@emotion/styled": "11.11.0",
@@ -33,13 +34,15 @@
         "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-html5-backend": "16.0.1",
+        "react-dnd-multi-backend": "^8.0.3",
         "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"
@@ -3265,6 +3268,19 @@
         "@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",
@@ -5685,6 +5701,21 @@
         }
       ]
     },
+    "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",
@@ -5700,6 +5731,7 @@
       "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",
@@ -5729,10 +5761,55 @@
       "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",
@@ -5832,6 +5909,23 @@
         "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,13 +44,15 @@
     "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-html5-backend": "16.0.1",
+    "react-dnd-multi-backend": "^8.0.3",
     "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"
@@ -82,4 +84,4 @@
     ],
     "*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}": "npm run formatter:staged"
   }
-}
+}

src/App.scss

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

src/components/DrawPDFFields/style.module.scss

@@ -8,17 +8,6 @@
 }
 
 .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;
   }
@@ -84,35 +73,8 @@
     justify-content: center;
     align-items: center;
     bottom: -60px;
-    min-width: 170px;
+    min-width: 193px;
     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

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

src/components/FileDivider.tsx

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

src/components/FileList/style.module.scss

@@ -1,12 +1,3 @@
-.container {
-  border-radius: 4px;
-  background: white;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  grid-gap: 0px;
-}
-
 .filesPageContainer {
   width: 100%;
   display: grid;
@@ -15,18 +6,6 @@
   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;
@@ -34,14 +13,16 @@ li {
 }
 
 .files {
+  border-radius: 4px;
+  background: white;
+  padding: 15px;
+
   display: flex;
   flex-direction: column;
   width: 100%;
   grid-gap: 15px;
-  max-height: 350px;
+  overflow-y: auto;
-  overflow: auto;
+  overflow-x: none;
-  padding: 0 5px 0 0;
-  margin: 0 -5px 0 0;
 }
 
 .files::-webkit-scrollbar {

src/components/Footer/Footer.tsx

@@ -4,125 +4,128 @@ 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 = () =>
-  <footer className={`${styles.borderTop} ${styles.footer}`}>
+  createPortal(
-    <Container
+    <footer className={`${styles.borderTop} ${styles.footer}`}>
-      style={{
+      <Container
-        paddingBlock: '50px'
+        style={{
-      }}
+          paddingBlock: '50px'
-    >
-      <Box
-        display={'grid'}
-        sx={{
-          gridTemplateColumns: {
-            xs: '1fr',
-            md: '0.5fr 2fr 0.5fr'
-          },
-          alignItems: {
-            xs: 'center',
-            md: 'start'
-          }
         }}
-        gap={'50px'}
       >
-        <LinkMui
+        <Box
+          display={'grid'}
           sx={{
-            justifySelf: {
+            gridTemplateColumns: {
+              xs: '1fr',
+              md: '0.5fr 2fr 0.5fr'
+            },
+            alignItems: {
               xs: 'center',
               md: 'start'
             }
           }}
-          component={Link}
+          gap={'50px'}
-          to={'/'}
-          className={styles.logo}
         >
-          <img src="/logo.svg" alt="Logo" />
+          <LinkMui
-        </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={{
-              justifyContent: 'center'
+              justifySelf: {
+                xs: 'center',
+                md: 'start'
+              }
             }}
             component={Link}
             to={'/'}
-            variant={'text'}
+            className={styles.logo}
           >
-            Home
+            <img src="/logo.svg" alt="Logo" />
-          </Button>
+          </LinkMui>
-          <Button
+          <Box
+            display={'grid'}
             sx={{
-              justifyContent: 'center'
+              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={LinkMui}
+            component={'nav'}
-            href={appPublicRoutes.docs}
+            className={styles.nav}
-            target="_blank"
-            variant={'text'}
           >
-            Documentation
+            <Button
-          </Button>
+              sx={{
-          <Button
+                justifyContent: 'center'
+              }}
+              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={{
-              justifyContent: 'center'
+              justifySelf: {
+                xs: 'center',
+                md: 'end'
+              }
             }}
-            component={LinkMui}
-            href={appPublicRoutes.source}
-            target="_blank"
-            variant={'text'}
           >
-            Source
+            <Button
-          </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>
-        <Box
+      </Container>
-          className={styles.links}
+      <div className={`${styles.borderTop} ${styles.credits}`}>
-          sx={{
+        Built by&nbsp;
-            justifySelf: {
+        <a href="https://nostrdev.com/" target="_blank">
-              xs: 'center',
+          Nostr Dev
-              md: 'end'
+        </a>{' '}
-            }
+        2024.
-          }}
+      </div>
-        >
+    </footer>,
-          <Button
+    document.getElementById('root')!
-            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,18 +1,35 @@
 import styles from './style.module.scss'
 
 interface Props {
-  desc: string
+  desc?: string
+  variant?: 'small' | 'default'
 }
 
 export const LoadingSpinner = (props: Props) => {
-  const { desc } = props
+  const { desc, variant = 'default' } = props
 
-  return (
+  switch (variant) {
-    <div className={styles.loadingSpinnerOverlay}>
+    case 'small':
-      <div className={styles.loadingSpinnerContainer}>
+      return (
-        <div className={styles.loadingSpinner}></div>
+        <div
-        {desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
+          className={`${styles.loadingSpinnerContainer}`}
-      </div>
+          data-variant={variant}
-    </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,34 +2,48 @@
 
 .loadingSpinnerOverlay {
   position: fixed;
-  top: 0;
+  inset: 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'] {
-  .loadingSpinner {
+    min-height: 250px;
-    background: url('/favicon.png') no-repeat center / cover;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
   }
 }
 
+.loadingSpinner {
+  background: url('/favicon.png') no-repeat center / cover;
+  margin: 40px 25px;
+  width: 65px;
+  height: 65px;
+  animation: spin 1s linear infinite;
+}
+
 .loadingSpinnerDesc {
-  color: white;
+  width: 100%;
-  margin-top: 13px;
+  padding: 15px;
+  border-top: solid 1px rgba(0, 0, 0, 0.1);
+  text-align: center;
+  color: rgba(0, 0, 0, 0.5);
 
   font-size: 16px;
   font-weight: 400;

src/components/MarkFormField/style.module.scss

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

src/components/PDFView/PdfItem.tsx

@@ -1,12 +1,13 @@
-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[]
-  pdfFile: PdfFile
+  file: SigitFile
   selectedMark: CurrentUserMark | null
   selectedMarkValue: string
 }
@@ -15,7 +16,7 @@ interface PdfItemProps {
  * Responsible for displaying pages of a single Pdf File.
  */
 const PdfItem = ({
-  pdfFile,
+  file,
   currentUserMarks,
   handleMarkClick,
   selectedMarkValue,
@@ -31,19 +32,27 @@ const PdfItem = ({
   const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
     return marks.filter((mark) => mark.location.page === page)
   }
-  return pdfFile.pages.map((page, i) => {
+  if (file.isPdf) {
-    return (
+    return file.pages?.map((page, i) => {
-      <PdfPageItem
+      return (
-        page={page}
+        <PdfPageItem
-        key={i}
+          fileName={file.name}
-        currentUserMarks={filterByPage(currentUserMarks, i)}
+          pageIndex={i}
-        handleMarkClick={handleMarkClick}
+          page={page}
-        selectedMarkValue={selectedMarkValue}
+          key={i}
-        selectedMark={selectedMark}
+          currentUserMarks={filterByPage(currentUserMarks, i)}
-        otherUserMarks={filterMarksByPage(otherUserMarks, i)}
+          handleMarkClick={handleMarkClick}
-      />
+          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,42 +1,56 @@
 import { CurrentUserMark } from '../../types/mark.ts'
 import styles from '../DrawPDFFields/style.module.scss'
-import { inPx } from '../../utils/pdf.ts'
+import { FONT_SIZE, FONT_TYPE, 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 = ({
+const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
-  selectedMark,
+  (
-  handleMarkClick,
+    { selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
-  selectedMarkValue,
+    ref
-  userMark
+  ) => {
-}: PdfMarkItemProps) => {
+    const { location } = userMark.mark
-  const { location } = userMark.mark
+    const handleClick = () => handleMarkClick(userMark.mark.id)
-  const handleClick = () => handleMarkClick(userMark.mark.id)
+    const isEdited = () => selectedMark?.mark.id === userMark.mark.id
-  const isEdited = () => selectedMark?.mark.id === userMark.mark.id
+    const getMarkValue = () =>
-  const getMarkValue = () =>
+      isEdited() ? selectedMarkValue : userMark.currentValue
-    isEdited() ? selectedMarkValue : userMark.currentValue
+    const { from } = useScale()
-  return (
+    return (
-    <div
+      <div
-      onClick={handleClick}
+        ref={ref}
-      className={`${styles.drawingRectangle} ${isEdited() && styles.edited}`}
+        onClick={handleClick}
-      style={{
+        className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
-        left: inPx(location.left),
+        style={{
-        top: inPx(location.top),
+          backgroundColor: selectedMark?.mark.npub
-        width: inPx(location.width),
+            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
-        height: inPx(location.height)
+            : undefined,
-      }}
+          borderColor: selectedMark?.mark.npub
-    >
+            ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
-      {getMarkValue()}
+            : undefined,
-    </div>
+          left: inPx(from(pageWidth, location.left)),
-  )
+          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,12 +10,16 @@ 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[]
@@ -24,7 +28,7 @@ interface PdfMarkingProps {
   meta: Meta | null
   otherUserMarks: Mark[]
   setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
-  setIsReadyToSign: (isReadyToSign: boolean) => void
+  setIsMarksCompleted: (isMarksCompleted: boolean) => void
   setUpdatedMarks: (markToUpdate: Mark) => void
 }
 
@@ -38,7 +42,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
   const {
     files,
     currentUserMarks,
-    setIsReadyToSign,
+    setIsMarksCompleted,
     setCurrentUserMarks,
     setUpdatedMarks,
     handleDownload,
@@ -102,7 +106,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
     )
     setCurrentUserMarks(updatedCurrentUserMarks)
     setSelectedMark(null)
-    setIsReadyToSign(true)
+    setIsMarksCompleted(true)
     setUpdatedMarks(updatedMark.mark)
   }
 
@@ -133,22 +137,21 @@ const PdfMarking = (props: PdfMarkingProps) => {
             </div>
           }
           right={meta !== null && <UsersDetails meta={meta} />}
+          leftIcon={faFileDownload}
+          centerIcon={faPen}
+          rightIcon={faCircleInfo}
         >
-          <div className={styles.container}>
+          {currentUserMarks?.length > 0 && (
-            {currentUserMarks?.length > 0 && (
+            <PdfView
-              <div className={styles.pdfView}>
+              currentFile={currentFile}
-                <PdfView
+              files={files}
-                  currentFile={currentFile}
+              handleMarkClick={handleMarkClick}
-                  files={files}
+              selectedMarkValue={selectedMarkValue}
-                  handleMarkClick={handleMarkClick}
+              selectedMark={selectedMark}
-                  selectedMarkValue={selectedMarkValue}
+              currentUserMarks={currentUserMarks}
-                  selectedMark={selectedMark}
+              otherUserMarks={otherUserMarks}
-                  currentUserMarks={currentUserMarks}
+            />
-                  otherUserMarks={otherUserMarks}
+          )}
-                />
-              </div>
-            )}
-          </div>
         </StickySideColumns>
         {selectedMark !== null && (
           <MarkFormField

src/components/PDFView/PdfPageItem.tsx

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

src/components/PDFView/index.tsx

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

src/components/PDFView/style.module.scss

@@ -1,33 +1,7 @@
-.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,7 +1,6 @@
 import { Divider, Tooltip } from '@mui/material'
 import { useSigitProfiles } from '../../hooks/useSigitProfiles'
 import {
-  extractFileExtensions,
   formatTimestamp,
   fromUnixTimestamp,
   hexToNpub,
@@ -28,6 +27,7 @@ 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,32 +118,44 @@ 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,5 +1,9 @@
 import { Event, Filter, Relay } from 'nostr-tools'
-import { normalizeWebSocketURL, timeout } from '../utils'
+import {
+  settleAllFullfilfedPromises,
+  normalizeWebSocketURL,
+  timeout
+} from '../utils'
 import { SIGIT_RELAY } from '../utils/const'
 
 /**
@@ -105,24 +109,11 @@ export class RelayController {
     }
 
     // connect to all specified relays
-    const relayPromises = relayUrls.map((relayUrl) =>
+    const relays = await settleAllFullfilfedPromises(
-      this.connectRelay(relayUrl)
+      relayUrls,
+      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!')
@@ -228,23 +219,10 @@ export class RelayController {
     }
 
     // connect to all specified relays
-    const relayPromises = relayUrls.map((relayUrl) => {
+    const relays = await settleAllFullfilfedPromises(
-      return this.connectRelay(relayUrl)
+      relayUrls,
-    })
+      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) {
@@ -292,24 +270,11 @@ export class RelayController {
     }
 
     // connect to all specified relays
-    const relayPromises = relayUrls.map((relayUrl) =>
+    const relays = await settleAllFullfilfedPromises(
-      this.connectRelay(relayUrl)
+      relayUrls,
+      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

@@ -0,0 +1,46 @@
+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,7 +11,6 @@ import {
   hexToNpub,
   parseNostrEvent,
   parseCreateSignatureEventContent,
-  SigitMetaParseError,
   SigitStatus,
   SignStatus
 } from '../utils'
@@ -21,6 +20,7 @@ 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 SigitMetaParseError) {
+        if (error instanceof MetaParseError) {
           toast.error(error.message)
         }
         console.error(error)

src/layouts/Main.tsx

@@ -26,7 +26,6 @@ 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()
@@ -160,7 +159,6 @@ export const MainLayout = () => {
       >
         <Outlet />
       </main>
-      <Footer />
     </>
   )
 }

src/layouts/StickySideColumns.module.scss

@@ -3,9 +3,33 @@
 
 .container {
   display: grid;
-  grid-template-columns: 0.75fr 1.5fr 0.75fr;
+
-  grid-gap: 30px;
+  @media only screen and (max-width: 767px) {
-  flex-grow: 1;
+    gap: 20px;
+    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 {
@@ -16,21 +40,58 @@
 }
 
 .sides {
-  position: sticky;
+  @media only screen and (min-width: 768px) {
-  top: $header-height + $body-vertical-padding;
+    position: sticky;
+    top: $header-height + $body-vertical-padding;
+  }
+  > :first-child {
+    max-height: calc(
+      100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
+    );
+  }
 }
 
-.files {
+.scrollAdjust {
-  display: flex;
+  @media only screen and (max-width: 767px) {
-  flex-direction: column;
+    max-height: calc(
-  grid-gap: 15px;
+      100svh - $header-height - $body-vertical-padding * 2 - $tabs-height
+    );
+    overflow-y: auto;
+  }
 }
+
 .content {
-  padding: 10px;
+  @media only screen and (min-width: 768px) {
-  border: 10px solid $overlay-background-color;
+    padding: 10px;
-  border-radius: 4px;
+    border: 10px solid $overlay-background-color;
-
+    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,26 +1,147 @@
-import { PropsWithChildren, ReactNode } from 'react'
+import {
+  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.sidesWrap} ${styles.files}`}>
+      <div className={styles.container} ref={ref}>
-        <div className={styles.sides}>{left}</div>
+        <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>
-      <div className={styles.content}>{children}</div>
+      <ul className={styles.navTabs}>
-      <div className={styles.sidesWrap}>
+        <li>
-        <div className={styles.sides}>{right}</div>
+          <Button
-      </div>
+            fullWidth
-    </div>
+            variant="text"
+            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,5 +4,4 @@
 .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,20 +1,13 @@
-import {
+import styles from './style.module.scss'
-  Button,
+import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
-  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 { HTML5Backend } from 'react-dnd-html5-backend'
+import { MultiBackend } from 'react-dnd-multi-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'
@@ -49,9 +42,8 @@ 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, PdfFile } from '../../types/drawing'
+import { DrawTool, MarkType } from '../../types/drawing'
 import { DrawPDFFields } from '../../components/DrawPDFFields'
 import { Mark } from '../../types/mark.ts'
 import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
@@ -66,6 +58,8 @@ import {
   faCreditCard,
   faEllipsis,
   faEye,
+  faFile,
+  faFileCirclePlus,
   faGripLines,
   faHeading,
   faIdCard,
@@ -80,9 +74,11 @@ 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()
@@ -125,115 +121,115 @@ export const CreatePage = () => {
   const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
     {}
   )
-  const [drawnPdfs, setDrawnPdfs] = useState<PdfFile[]>([])
+  const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
 
   const [selectedTool, setSelectedTool] = useState<DrawTool>()
   const [toolbox] = useState<DrawTool[]>([
     {
       identifier: MarkType.TEXT,
-      icon: <FontAwesomeIcon icon={faT} />,
+      icon: faT,
       label: 'Text',
       active: true
     },
     {
       identifier: MarkType.SIGNATURE,
-      icon: <FontAwesomeIcon icon={faSignature} />,
+      icon: faSignature,
       label: 'Signature',
       active: false
     },
     {
       identifier: MarkType.JOBTITLE,
-      icon: <FontAwesomeIcon icon={faBriefcase} />,
+      icon: faBriefcase,
       label: 'Job Title',
       active: false
     },
     {
       identifier: MarkType.FULLNAME,
-      icon: <FontAwesomeIcon icon={faIdCard} />,
+      icon: faIdCard,
       label: 'Full Name',
       active: false
     },
     {
       identifier: MarkType.INITIALS,
-      icon: <FontAwesomeIcon icon={faHeading} />,
+      icon: faHeading,
       label: 'Initials',
       active: false
     },
     {
       identifier: MarkType.DATETIME,
-      icon: <FontAwesomeIcon icon={faClock} />,
+      icon: faClock,
       label: 'Date Time',
       active: false
     },
     {
       identifier: MarkType.DATE,
-      icon: <FontAwesomeIcon icon={faCalendarDays} />,
+      icon: faCalendarDays,
       label: 'Date',
       active: false
     },
     {
       identifier: MarkType.NUMBER,
-      icon: <FontAwesomeIcon icon={fa1} />,
+      icon: fa1,
       label: 'Number',
       active: false
     },
     {
       identifier: MarkType.IMAGES,
-      icon: <FontAwesomeIcon icon={faImage} />,
+      icon: faImage,
       label: 'Images',
       active: false
     },
     {
       identifier: MarkType.CHECKBOX,
-      icon: <FontAwesomeIcon icon={faSquareCheck} />,
+      icon: faSquareCheck,
       label: 'Checkbox',
       active: false
     },
     {
       identifier: MarkType.MULTIPLE,
-      icon: <FontAwesomeIcon icon={faCheckDouble} />,
+      icon: faCheckDouble,
       label: 'Multiple',
       active: false
     },
     {
       identifier: MarkType.FILE,
-      icon: <FontAwesomeIcon icon={faPaperclip} />,
+      icon: faPaperclip,
       label: 'File',
       active: false
     },
     {
       identifier: MarkType.RADIO,
-      icon: <FontAwesomeIcon icon={faCircleDot} />,
+      icon: faCircleDot,
       label: 'Radio',
       active: false
     },
     {
       identifier: MarkType.SELECT,
-      icon: <FontAwesomeIcon icon={faSquareCaretDown} />,
+      icon: faSquareCaretDown,
       label: 'Select',
       active: false
     },
     {
       identifier: MarkType.CELLS,
-      icon: <FontAwesomeIcon icon={faTableCellsLarge} />,
+      icon: faTableCellsLarge,
       label: 'Cells',
       active: false
     },
     {
       identifier: MarkType.STAMP,
-      icon: <FontAwesomeIcon icon={faStamp} />,
+      icon: faStamp,
       label: 'Stamp',
       active: false
     },
     {
       identifier: MarkType.PAYMENT,
-      icon: <FontAwesomeIcon icon={faCreditCard} />,
+      icon: faCreditCard,
       label: 'Payment',
       active: false
     },
     {
       identifier: MarkType.PHONE,
-      icon: <FontAwesomeIcon icon={faPhone} />,
+      icon: faPhone,
       label: 'Phone',
       active: false
     }
@@ -456,10 +452,8 @@ export const CreatePage = () => {
       return false
     }
 
-    if (users.length === 0) {
+    if (!users.some((u) => u.role === UserRole.signer)) {
-      toast.error(
+      toast.error('No signer is provided. At least add one signer.')
-        'No signer/viewer is provided. At least add one signer or viewer.'
-      )
       return false
     }
 
@@ -507,26 +501,31 @@ export const CreatePage = () => {
   }
 
   const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
-    return drawnPdfs
+    return drawnFiles
-      .flatMap((drawnPdf) => {
+      .flatMap((file) => {
-        const fileHash = fileHashes[drawnPdf.file.name]
+        const fileHash = fileHashes[file.name]
-        return drawnPdf.pages.flatMap((page, index) => {
+        return (
-          return page.drawnFields.map((drawnField) => {
+          file.pages?.flatMap((page, index) => {
-            return {
+            return page.drawnFields.map((drawnField) => {
-              type: drawnField.type,
+              if (!drawnField.counterpart) {
-              location: {
+                throw new Error('Missing counterpart')
-                page: index,
+              }
-                top: drawnField.top,
+              return {
-                left: drawnField.left,
+                type: drawnField.type,
-                height: drawnField.height,
+                location: {
-                width: drawnField.width
+                  page: index,
-              },
+                  top: drawnField.top,
-              npub: drawnField.counterpart,
+                  left: drawnField.left,
-              pdfFileHash: fileHash,
+                  height: drawnField.height,
-              fileName: drawnPdf.file.name
+                  width: drawnField.width
-            }
+                },
-          })
+                npub: drawnField.counterpart,
-        })
+                pdfFileHash: fileHash,
+                fileName: file.name
+              }
+            })
+          }) || []
+        )
       })
       .map((mark, index) => {
         return { ...mark, id: index }
@@ -667,6 +666,7 @@ export const CreatePage = () => {
   }
 
   const generateCreateSignature = async (
+    markConfig: Mark[],
     fileHashes: {
       [key: string]: string
     },
@@ -674,7 +674,6 @@ 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)),
@@ -718,136 +717,133 @@ export const CreatePage = () => {
   }
 
   const handleCreate = async () => {
-    if (!validateInputs()) return
+    try {
+      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) {
+      if (!fileHashes) return
+
+      setLoadingSpinnerDesc('Generating encryption key')
+      const encryptionKey = await generateEncryptionKey()
+
+      if (await isOnline()) {
+        setLoadingSpinnerDesc('generating files.zip')
+        const arrayBuffer = await generateFilesZip()
+        if (!arrayBuffer) return
+
+        setLoadingSpinnerDesc('Encrypting files.zip')
+        const encryptedArrayBuffer = await encryptZipFile(
+          arrayBuffer,
+          encryptionKey
+        )
+
+        const markConfig = createMarks(fileHashes)
+
+        setLoadingSpinnerDesc('Uploading files.zip to file storage')
+        const fileUrl = await uploadFile(encryptedArrayBuffer)
+        if (!fileUrl) return
+
+        setLoadingSpinnerDesc('Generating create signature')
+        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!)
+        }
+
+        const keys = await generateKeys(pubkeys, encryptionKey)
+        if (!keys) return
+
+        const meta: Meta = {
+          createSignature,
+          keys,
+          modifiedAt: unixNow(),
+          docSignatures: {}
+        }
+
+        setLoadingSpinnerDesc('Updating user app data')
+        const event = await updateUsersAppData(meta)
+        if (!event) return
+
+        setLoadingSpinnerDesc('Sending notifications to counterparties')
+        const promises = sendNotifications(meta)
+
+        await Promise.all(promises)
+          .then(() => {
+            toast.success('Notifications sent successfully')
+          })
+          .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)
+
+        setLoadingSpinnerDesc('Generating create signature')
+        const createSignature = await generateCreateSignature(
+          markConfig,
+          fileHashes,
+          ''
+        )
+        if (!createSignature) return
+
+        const meta: Meta = {
+          createSignature,
+          modifiedAt: unixNow(),
+          docSignatures: {}
+        }
+
+        // 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) {
+        toast.error(error.message)
+      }
+      console.error(error)
+    } finally {
       setIsLoading(false)
-      return
-    }
-
-    setLoadingSpinnerDesc('Generating encryption key')
-    const encryptionKey = await generateEncryptionKey()
-
-    if (await isOnline()) {
-      setLoadingSpinnerDesc('generating files.zip')
-      const arrayBuffer = await generateFilesZip()
-      if (!arrayBuffer) {
-        setIsLoading(false)
-        return
-      }
-
-      setLoadingSpinnerDesc('Encrypting files.zip')
-      const encryptedArrayBuffer = await encryptZipFile(
-        arrayBuffer,
-        encryptionKey
-      )
-
-      setLoadingSpinnerDesc('Uploading files.zip to file storage')
-      const fileUrl = await uploadFile(encryptedArrayBuffer)
-      if (!fileUrl) {
-        setIsLoading(false)
-        return
-      }
-
-      setLoadingSpinnerDesc('Generating create signature')
-      const createSignature = await generateCreateSignature(fileHashes, fileUrl)
-      if (!createSignature) {
-        setIsLoading(false)
-        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!)
-      }
-
-      const keys = await generateKeys(pubkeys, encryptionKey)
-
-      if (!keys) {
-        setIsLoading(false)
-        return
-      }
-      const meta: Meta = {
-        createSignature,
-        keys,
-        modifiedAt: unixNow(),
-        docSignatures: {}
-      }
-
-      setLoadingSpinnerDesc('Updating user app data')
-      const event = await updateUsersAppData(meta)
-      if (!event) {
-        setIsLoading(false)
-        return
-      }
-
-      setLoadingSpinnerDesc('Sending notifications to counterparties')
-      const promises = sendNotifications(meta)
-
-      await Promise.all(promises)
-        .then(() => {
-          toast.success('Notifications sent successfully')
-        })
-        .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)
-      })
-
-      setLoadingSpinnerDesc('Generating create signature')
-      const createSignature = await generateCreateSignature(fileHashes, '')
-      if (!createSignature) {
-        setIsLoading(false)
-        return
-      }
-
-      const meta: Meta = {
-        createSignature,
-        modifiedAt: unixNow(),
-        docSignatures: {}
-      }
-
-      // 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) {
-        setIsLoading(false)
-        return
-      }
-
-      setLoadingSpinnerDesc('Encrypting zip file')
-      const encryptedArrayBuffer = await encryptZipFile(
-        arrayBuffer,
-        encryptionKey
-      )
-
-      await handleOfflineFlow(encryptedArrayBuffer, encryptionKey)
     }
   }
 
-  const onDrawFieldsChange = (pdfFiles: PdfFile[]) => {
+  const onDrawFieldsChange = (sigitFiles: SigitFile[]) => {
-    setDrawnPdfs(pdfFiles)
+    setDrawnFiles(sigitFiles)
   }
 
   if (authUrl) {
@@ -870,27 +866,18 @@ 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) => (
-                    <div
+                    <li
                       key={index}
                       className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
                       onClick={() => {
@@ -898,107 +885,34 @@ export const CreatePage = () => {
                         setCurrentFile(file)
                       }}
                     >
-                      <>
+                      <span className={styles.fileName}>{file.name}</span>
-                        <span className={styles.fileName}>{file.name}</span>
+                      <Button
-                        <Button
+                        aria-label={`delete ${file.name}`}
-                          variant="text"
+                        variant="text"
-                          onClick={(event) => handleRemoveFile(event, file)}
+                        onClick={(event) => handleRemoveFile(event, file)}
-                          sx={{
+                      >
-                            minWidth: '44px'
+                        <FontAwesomeIcon icon={faTrash} />
-                          }}
+                      </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.inputWrapper}>
+              <div className={`${styles.paperGroup} ${styles.users}`}>
-                <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}
@@ -1007,7 +921,43 @@ 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>
@@ -1017,26 +967,18 @@ export const CreatePage = () => {
                   return (
                     <div
                       key={index}
-                      onClick={
+                      {...(drawTool.active && {
-                        drawTool.active
+                        onClick: () => handleToolSelect(drawTool)
-                          ? () => {
+                      })}
-                              handleToolSelect(drawTool)
-                            }
-                          : () => null
-                      }
                       className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
                       `}
                     >
-                      {drawTool.icon}
+                      <FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
                       {drawTool.label}
                       {drawTool.active ? (
-                        <FontAwesomeIcon icon={faEllipsis} />
+                        <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
                       ) : (
-                        <span
+                        <span className={styles.comingSoonPlaceholder}>
-                          style={{
-                            fontSize: '10px'
-                          }}
-                        >
                           Coming soon
                         </span>
                       )}
@@ -1050,6 +992,9 @@ export const CreatePage = () => {
               )}
             </div>
           }
+          leftIcon={faFileCirclePlus}
+          centerIcon={faFile}
+          rightIcon={faToolbox}
         >
           <DrawPDFFields
             metadata={metadata}
@@ -1081,12 +1026,12 @@ const DisplayUser = ({
 }: DisplayUsersProps) => {
   return (
     <>
-      <DndProvider backend={HTML5Backend}>
+      <DndProvider backend={MultiBackend} options={HTML5toTouch}>
         {users
           .filter((user) => user.role === UserRole.signer)
           .map((user, index) => (
-            <SignerRow
+            <SignerCounterpart
-              key={`signer-${index}`}
+              key={`signer-${user.pubkey}`}
               userMeta={metadata[user.pubkey]}
               user={user}
               index={index}
@@ -1098,71 +1043,15 @@ const DisplayUser = ({
       </DndProvider>
       {users
         .filter((user) => user.role === UserRole.viewer)
-        .map((user, index) => {
+        .map((user) => {
-          const userMeta = metadata[user.pubkey]
           return (
-            <div className={styles.user} key={index}>
+            <div className={styles.user} key={`viewer-${user.pubkey}`}>
-              <div className={styles.avatar}>
+              <Counterpart
-                <UserAvatar
+                userMeta={metadata[user.pubkey]}
-                  pubkey={user.pubkey}
+                user={user}
-                  name={
+                handleUserRoleChange={handleUserRoleChange}
-                    userMeta?.display_name ||
+                handleRemoveUser={handleRemoveUser}
-                    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>
           )
         })}
@@ -1176,23 +1065,26 @@ interface DragItem {
   type: string
 }
 
-type SignerRowProps = {
+type CounterpartProps = {
   userMeta: ProfileMetadata
   user: User
-  index: number
-  moveSigner: (dragIndex: number, hoverIndex: number) => void
   handleUserRoleChange: (role: UserRole, pubkey: string) => void
   handleRemoveUser: (pubkey: string) => void
 }
 
-const SignerRow = ({
+type SignerCounterpartProps = CounterpartProps & {
+  index: number
+  moveSigner: (dragIndex: number, hoverIndex: number) => void
+}
+
+const SignerCounterpart = ({
   userMeta,
   user,
   index,
   moveSigner,
   handleUserRoleChange,
   handleRemoveUser
-}: SignerRowProps) => {
+}: SignerCounterpartProps) => {
   const ref = useRef<HTMLTableRowElement>(null)
 
   const [{ handlerId }, drop] = useDrop<
@@ -1266,7 +1158,7 @@ const SignerRow = ({
     })
   })
 
-  const opacity = isDragging ? 0 : 1
+  const opacity = isDragging ? 0.2 : 1
   drag(drop(ref))
 
   return (
@@ -1277,6 +1169,24 @@ const SignerRow = ({
       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}
@@ -1288,56 +1198,31 @@ const SignerRow = ({
           image={userMeta?.picture}
         />
       </div>
-      <Select
+      <Tooltip title="Toggle User Role" arrow disableInteractive>
-        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)}
+          onClick={() =>
-          sx={{
+            handleUserRoleChange(
-            minWidth: '34px',
+              user.role === UserRole.signer ? UserRole.viewer : UserRole.signer,
-            height: '34px',
+              user.pubkey
-            padding: 0,
+            )
-            color: 'rgba(0, 0, 0, 0.35)',
+          }
-            '&:hover': {
+          className={styles.counterpartRowToggleButton}
-              color: 'white'
+          data-variant="primary"
-            }
-          }}
         >
-          <FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
+          <FontAwesomeIcon
+            icon={user.role === UserRole.signer ? faPen : faEye}
+          />
         </Button>
       </Tooltip>
-    </div>
+      <Tooltip title="Remove User" arrow disableInteractive>
+        <Button
+          onClick={() => handleRemoveUser(user.pubkey)}
+          className={styles.counterpartRowToggleButton}
+          data-variant="secondary"
+        >
+          <FontAwesomeIcon icon={faTrash} />
+        </Button>
+      </Tooltip>
+    </>
   )
 }

src/pages/create/style.module.scss

@@ -4,6 +4,8 @@
   display: flex;
   flex-direction: column;
   gap: 15px;
+
+  container-type: inline-size;
 }
 
 .orderedFilesList {
@@ -40,6 +42,7 @@
     }
 
     button {
+      min-width: 44px;
       color: $primary-main;
     }
 
@@ -67,10 +70,6 @@
   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;
 }
@@ -78,8 +77,9 @@
 .inputWrapper {
   display: flex;
   align-items: center;
+  flex-shrink: 0;
 
-  height: 34px;
+  height: 36px;
   overflow: hidden;
   border-radius: 4px;
   outline: solid 1px #dddddd;
@@ -90,6 +90,43 @@
   &: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 {
@@ -104,6 +141,22 @@
   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 {
@@ -130,26 +183,35 @@
 
 .toolbox {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: 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: inline-flex;
+  display: 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;
@@ -162,7 +224,7 @@
     color: white;
   }
 
-  &:not(.selected) {
+  &:not(.selected, .comingSoon) {
     &:hover {
       background: $primary-light;
       color: white;
@@ -174,3 +236,7 @@
     cursor: not-allowed;
   }
 }
+
+.comingSoonPlaceholder {
+  font-size: 10px;
+}

src/pages/home/index.tsx

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

src/pages/landing/index.tsx

@@ -19,6 +19,7 @@ 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()
@@ -162,6 +163,7 @@ export const LandingPage = () => {
 
         <Outlet />
       </Container>
+      <Footer />
     </div>
   )
 }

src/pages/profile/index.tsx

@@ -20,6 +20,7 @@ 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()
@@ -41,6 +42,16 @@ 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 {
@@ -165,7 +176,10 @@ export const ProfilePage = () => {
             className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
           >
             {profileMetadata && profileMetadata.banner ? (
-              <img src={profileMetadata.banner} />
+              <img
+                src={profileMetadata.banner}
+                alt={`banner image for ${profileName}`}
+              />
             ) : (
               ''
             )}
@@ -185,6 +199,7 @@ export const ProfilePage = () => {
                   <img
                     className={styles['image-placeholder']}
                     src={getProfileImage(profileMetadata!)}
+                    alt={profileName}
                   />
                 </div>
               </Box>
@@ -224,14 +239,7 @@ export const ProfilePage = () => {
                       variant="h6"
                       className={styles.bold}
                     >
-                      {truncate(
+                      {profileName}
-                        profileMetadata.display_name ||
-                          profileMetadata.name ||
-                          hexToNpub(pubkey),
-                        {
-                          length: 16
-                        }
-                      )}
                     </Typography>
                   )}
                 </Box>
@@ -285,6 +293,7 @@ export const ProfilePage = () => {
           </Box>
         </Container>
       )}
+      <Footer />
     </>
   )
 }

src/pages/settings/Settings.tsx

@@ -13,6 +13,7 @@ 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()
@@ -43,56 +44,59 @@ export const SettingsPage = () => {
   }
 
   return (
-    <Container>
+    <>
-      <List
+      <Container>
-        sx={{
+        <List
-          width: '100%',
+          sx={{
-          bgcolor: 'background.paper'
+            width: '100%',
-        }}
+            bgcolor: 'background.paper'
-        subheader={
+          }}
-          <ListSubheader
+          subheader={
-            sx={{
+            <ListSubheader
-              fontSize: '1.5rem',
+              sx={{
-              borderBottom: '0.5px solid',
+                fontSize: '1.5rem',
-              paddingBottom: 2,
+                borderBottom: '0.5px solid',
-              paddingTop: 2
+                paddingBottom: 2,
+                paddingTop: 2
+              }}
+            >
+              Settings
+            </ListSubheader>
+          }
+        >
+          <ListItemButton
+            onClick={() => {
+              navigate(getProfileSettingsRoute(usersPubkey!))
             }}
           >
-            Settings
+            <ListItemIcon>
-          </ListSubheader>
+              <AccountCircleIcon />
-        }
+            </ListItemIcon>
-      >
+            {listItem('Profile')}
-        <ListItemButton
+          </ListItemButton>
-          onClick={() => {
+          <ListItemButton
-            navigate(getProfileSettingsRoute(usersPubkey!))
+            onClick={() => {
-          }}
+              navigate(appPrivateRoutes.relays)
-        >
+            }}
-          <ListItemIcon>
+          >
-            <AccountCircleIcon />
+            <ListItemIcon>
-          </ListItemIcon>
+              <RouterIcon />
-          {listItem('Profile')}
+            </ListItemIcon>
-        </ListItemButton>
+            {listItem('Relays')}
-        <ListItemButton
+          </ListItemButton>
-          onClick={() => {
+          <ListItemButton
-            navigate(appPrivateRoutes.relays)
+            onClick={() => {
-          }}
+              navigate(appPrivateRoutes.cacheSettings)
-        >
+            }}
-          <ListItemIcon>
+          >
-            <RouterIcon />
+            <ListItemIcon>
-          </ListItemIcon>
+              <CachedIcon />
-          {listItem('Relays')}
+            </ListItemIcon>
-        </ListItemButton>
+            {listItem('Local Cache')}
-        <ListItemButton
+          </ListItemButton>
-          onClick={() => {
+        </List>
-            navigate(appPrivateRoutes.cacheSettings)
+      </Container>
-          }}
+      <Footer />
-        >
+    </>
-          <ListItemIcon>
-            <CachedIcon />
-          </ListItemIcon>
-          {listItem('Local Cache')}
-        </ListItemButton>
-      </List>
-    </Container>
   )
 }

src/pages/settings/cache/index.tsx

@@ -14,6 +14,7 @@ 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()
@@ -50,48 +51,51 @@ export const CacheSettingsPage = () => {
   }
 
   return (
-    <Container>
+    <>
-      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
+      <Container>
-      <List
+        {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-        sx={{
+        <List
-          width: '100%',
+          sx={{
-          bgcolor: 'background.paper',
+            width: '100%',
-          marginTop: 2
+            bgcolor: 'background.paper',
-        }}
+            marginTop: 2
-        subheader={
+          }}
-          <ListSubheader
+          subheader={
-            sx={{
+            <ListSubheader
-              fontSize: '1.5rem',
+              sx={{
-              borderBottom: '0.5px solid',
+                fontSize: '1.5rem',
-              paddingBottom: 2,
+                borderBottom: '0.5px solid',
-              paddingTop: 2
+                paddingBottom: 2,
-            }}
+                paddingTop: 2
-          >
+              }}
-            Cache Setting
+            >
-          </ListSubheader>
+              Cache Setting
-        }
+            </ListSubheader>
-      >
+          }
-        <ListItemButton disabled>
+        >
-          <ListItemIcon>
+          <ListItemButton disabled>
-            <IosShareIcon />
+            <ListItemIcon>
-          </ListItemIcon>
+              <IosShareIcon />
-          {listItem('Export (coming soon)')}
+            </ListItemIcon>
-        </ListItemButton>
+            {listItem('Export (coming soon)')}
+          </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,6 +32,7 @@ import {
   unixNow
 } from '../../../utils'
 import { Container } from '../../../components/Container'
+import { Footer } from '../../../components/Footer/Footer'
 
 export const ProfileSettingsPage = () => {
   const theme = useTheme()
@@ -385,6 +386,7 @@ export const ProfileSettingsPage = () => {
           </LoadingButton>
         )}
       </Container>
+      <Footer />
     </>
   )
 }

src/pages/settings/relays/index.tsx

@@ -27,6 +27,7 @@ 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)
@@ -270,161 +271,164 @@ const RelayItem = ({
   })
 
   return (
-    <Box className={styles.relay}>
+    <>
-      <List>
+      <Box className={styles.relay}>
-        <ListItem>
+        <List>
-          <span
+          <ListItem>
-            className={[
+            <span
-              styles.connectionStatus,
+              className={[
-              relayConnectionStatus
+                styles.connectionStatus,
-                ? relayConnectionStatus === RelayConnectionState.Connected
+                relayConnectionStatus
-                  ? styles.connectionStatusConnected
+                  ? relayConnectionStatus === RelayConnectionState.Connected
-                  : styles.connectionStatusNotConnected
+                    ? styles.connectionStatusConnected
-                : styles.connectionStatusUnknown
+                    : styles.connectionStatusNotConnected
-            ].join(' ')}
+                  : styles.connectionStatusUnknown
-          />
+              ].join(' ')}
-          {relayInfo &&
+            />
-            relayInfo.limitation &&
+            {relayInfo &&
-            relayInfo.limitation?.payment_required && (
+              relayInfo.limitation &&
-              <Tooltip title="Paid Relay" arrow placement="top">
+              relayInfo.limitation?.payment_required && (
-                <ElectricBoltIcon
+                <Tooltip title="Paid Relay" arrow placement="top">
-                  className={styles.lightningIcon}
+                  <ElectricBoltIcon
-                  color="warning"
+                    className={styles.lightningIcon}
-                  onClick={() => setDisplayRelayInfo((prev) => !prev)}
+                    color="warning"
-                />
+                    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,10 +38,8 @@ 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 } from '../../utils/sign.ts'
+import { getLastSignersSig, isFullySigned } from '../../utils/sign.ts'
 import {
   filterMarksByPubkey,
   getCurrentUserMarks,
@@ -49,7 +47,11 @@ import {
   updateMarks
 } from '../../utils'
 import PdfMarking from '../../components/PDFView/PdfMarking.tsx'
-import { getZipWithFiles } from '../../utils/file.ts'
+import {
+  convertToSigitFile,
+  getZipWithFiles,
+  SigitFile
+} from '../../utils/file.ts'
 import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
 enum SignedStatus {
   Fully_Signed,
@@ -76,7 +78,7 @@ export const SignPage = () => {
 
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
 
-  const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
+  const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
 
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@@ -110,13 +112,13 @@ export const SignPage = () => {
   const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>(
     []
   )
-  const [isReadyToSign, setIsReadyToSign] = useState(false)
+  const [isMarksCompleted, setIsMarksCompleted] = useState(false)
   const [otherUserMarks, setOtherUserMarks] = useState<Mark[]>([])
 
   useEffect(() => {
     if (signers.length > 0) {
       // check if all signers have signed then its fully signed
-      if (signers.every((signer) => signedBy.includes(signer))) {
+      if (isFullySigned(signers, signedBy)) {
         setSignedStatus(SignedStatus.Fully_Signed)
       } else {
         for (const signer of signers) {
@@ -214,7 +216,7 @@ export const SignPage = () => {
         const otherUserMarks = findOtherUserMarks(signedMarks, usersPubkey!)
         setOtherUserMarks(otherUserMarks)
         setCurrentUserMarks(currentUserMarks)
-        setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
+        setIsMarksCompleted(isCurrentUserMarksComplete(currentUserMarks))
       }
 
       setSignedBy(Object.keys(meta.docSignatures) as `npub1${string}`[])
@@ -402,7 +404,7 @@ export const SignPage = () => {
       return
     }
 
-    const files: { [filename: string]: PdfFile } = {}
+    const files: { [filename: string]: SigitFile } = {}
     const fileHashes: { [key: string]: string | null } = {}
     const fileNames = Object.values(zip.files).map((entry) => entry.name)
 
@@ -416,8 +418,7 @@ export const SignPage = () => {
       )
 
       if (arrayBuffer) {
-        files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
+        files[fileName] = await convertToSigitFile(arrayBuffer, fileName)
-
         const hash = await getHash(arrayBuffer)
         if (hash) {
           fileHashes[fileName] = hash
@@ -462,7 +463,7 @@ export const SignPage = () => {
     const zip = await loadZip(decryptedZipFile)
     if (!zip) return
 
-    const files: { [filename: string]: PdfFile } = {}
+    const files: { [filename: string]: SigitFile } = {}
     const fileHashes: { [key: string]: string | null } = {}
     const fileNames = Object.values(zip.files)
       .filter((entry) => entry.name.startsWith('files/') && !entry.dir)
@@ -479,7 +480,7 @@ export const SignPage = () => {
       )
 
       if (arrayBuffer) {
-        files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
+        files[fileName] = await convertToSigitFile(arrayBuffer, fileName)
 
         const hash = await getHash(arrayBuffer)
         if (hash) {
@@ -541,10 +542,13 @@ export const SignPage = () => {
     setLoadingSpinnerDesc('Signing nostr event')
 
     const prevSig = getPrevSignersSig(hexToNpub(usersPubkey!))
-    if (!prevSig) return
+    if (!prevSig) {
+      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
@@ -764,8 +768,8 @@ export const SignPage = () => {
 
     zip.file('meta.json', stringifiedMeta)
 
-    for (const [fileName, pdf] of Object.entries(files)) {
+    for (const [fileName, file] of Object.entries(files)) {
-      zip.file(`files/${fileName}`, await pdf.file.arrayBuffer())
+      zip.file(`files/${fileName}`, await file.arrayBuffer())
     }
 
     const arrayBuffer = await zip
@@ -802,8 +806,8 @@ export const SignPage = () => {
 
     zip.file('meta.json', stringifiedMeta)
 
-    for (const [fileName, pdf] of Object.entries(files)) {
+    for (const [fileName, file] of Object.entries(files)) {
-      zip.file(`files/${fileName}`, await pdf.file.arrayBuffer())
+      zip.file(`files/${fileName}`, await file.arrayBuffer())
     }
 
     const arrayBuffer = await zip
@@ -882,90 +886,90 @@ export const SignPage = () => {
     return <LoadingSpinner desc={loadingSpinnerDesc} />
   }
 
-  if (isReadyToSign) {
+  if (!isMarksCompleted && signedStatus === SignedStatus.User_Is_Next_Signer) {
     return (
-      <>
+      <PdfMarking
-        <Container className={styles.container}>
+        files={getCurrentUserFiles(files, currentFileHashes, creatorFileHashes)}
-          {displayInput && (
+        currentUserMarks={currentUserMarks}
-            <>
+        setIsMarksCompleted={setIsMarksCompleted}
-              <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>
-      </>
     )
   }
 
   return (
-    <PdfMarking
+    <>
-      files={getCurrentUserFiles(files, currentFileHashes, creatorFileHashes)}
+      <Container className={styles.container}>
-      currentUserMarks={currentUserMarks}
+        {displayInput && (
-      setIsReadyToSign={setIsReadyToSign}
+          <>
-      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>
+    </>
   )
 }

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 { PdfFile } from '../../../types/drawing.ts'
+import { SigitFile } from '../../../utils/file'
 
 type DisplayMetaProps = {
   meta: Meta
-  files: { [filename: string]: PdfFile }
+  files: { [fileName: string]: SigitFile }
   submittedBy: string
   signers: `npub1${string}`[]
   viewers: `npub1${string}`[]
@@ -143,12 +143,9 @@ export const DisplayMeta = ({
     })
   }, [users, submittedBy, metadata])
 
-  const downloadFile = async (filename: string) => {
+  const downloadFile = async (fileName: string) => {
-    const arrayBuffer = await files[filename].file.arrayBuffer()
+    const file = files[fileName]
-    if (!arrayBuffer) return
+    saveAs(file)
-
-    const blob = new Blob([arrayBuffer])
-    saveAs(blob, filename)
   }
 
   return (

src/pages/sign/style.module.scss

@@ -2,8 +2,6 @@
 
 .container {
   color: $text-color;
-  //width: 550px;
-  //max-width: 550px;
 
   .inputBlock {
     position: relative;
@@ -67,7 +65,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, Divider, Tooltip, Typography } from '@mui/material'
+import { Box, Button, Tooltip, Typography } from '@mui/material'
 import JSZip from 'jszip'
 import { MuiFileInput } from 'mui-file-input'
 import { Event, verifyEvent } from 'nostr-tools'
@@ -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,
-  convertToPdfFile,
+  FONT_SIZE,
+  FONT_TYPE,
   groupMarksByFileNamePage,
   inPx
 } from '../../utils/pdf.ts'
@@ -49,6 +49,15 @@ 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[]
@@ -64,77 +73,90 @@ 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={styles.view}>
+    <div className="files-wrapper">
-      {files.map((currentUserFile, i) => {
+      {files.length > 0 ? (
-        const { hash, filename, pdfFile, id } = currentUserFile
+        files.map((currentUserFile, i) => {
-        const signatureEvents = Object.keys(parsedSignatureEvents)
+          const { hash, file, id } = currentUserFile
-        if (!hash) return
+          const signatureEvents = Object.keys(parsedSignatureEvents)
-        return (
+          if (!hash) return
-          <React.Fragment key={filename}>
+          return (
-            <div
+            <React.Fragment key={file.name}>
-              id={filename}
+              <div
-              ref={(el) => (pdfRefs.current[id] = el)}
+                id={file.name}
-              className={styles.fileWrapper}
+                ref={(el) => (pdfRefs.current[id] = el)}
-            >
+                className="file-wrapper"
-              {pdfFile.pages.map((page, i) => {
-                const marks: Mark[] = []
-
-                signatureEvents.forEach((e) => {
-                  const m = parsedSignatureEvents[
-                    e as `npub1${string}`
-                  ].parsedContent?.marks.filter(
-                    (m) => m.pdfFileHash == hash && m.location.page == i
-                  )
-                  if (m) {
-                    marks.push(...m)
-                  }
-                })
-                return (
-                  <div className={styles.imageWrapper} key={i}>
-                    <img draggable="false" src={page.image} />
-                    {marks.map((m) => {
-                      return (
-                        <div
-                          className={styles.mark}
-                          key={m.id}
-                          style={{
-                            left: inPx(m.location.left),
-                            top: inPx(m.location.top),
-                            width: inPx(m.location.width),
-                            height: inPx(m.location.height)
-                          }}
-                        >
-                          {m.value}
-                        </div>
-                      )
-                    })}
-                  </div>
-                )
-              })}
-            </div>
-
-            {i < files.length - 1 && (
-              <Divider
-                sx={{
-                  fontSize: '12px',
-                  color: 'rgba(0,0,0,0.15)'
-                }}
               >
-                File Separator
+                {file.isPdf &&
-              </Divider>
+                  file.pages?.map((page, i) => {
-            )}
+                    const marks: Mark[] = []
-          </React.Fragment>
+
-        )
+                    signatureEvents.forEach((e) => {
-      })}
+                      const m = parsedSignatureEvents[
+                        e as `npub1${string}`
+                      ].parsedContent?.marks.filter(
+                        (m) => m.pdfFileHash == hash && m.location.page == i
+                      )
+                      if (m) {
+                        marks.push(...m)
+                      }
+                    })
+                    return (
+                      <div className="image-wrapper" key={i}>
+                        <img
+                          draggable="false"
+                          src={page.image}
+                          alt={`page ${i} of ${file.name}`}
+                        />
+                        {marks.map((m) => {
+                          return (
+                            <div
+                              className={`file-mark ${styles.mark}`}
+                              key={m.id}
+                              style={{
+                                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>
   )
 }
@@ -171,7 +193,7 @@ export const VerifyPage = () => {
   const [currentFileHashes, setCurrentFileHashes] = useState<{
     [key: string]: string | null
   }>({})
-  const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
+  const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
   const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
   const [signatureFileHashes, setSignatureFileHashes] = useState<{
     [key: string]: string
@@ -230,7 +252,7 @@ export const VerifyPage = () => {
 
               if (!zip) return
 
-              const files: { [filename: string]: PdfFile } = {}
+              const files: { [fileName: string]: SigitFile } = {}
               const fileHashes: { [key: string]: string | null } = {}
               const fileNames = Object.values(zip.files).map(
                 (entry) => entry.name
@@ -246,7 +268,7 @@ export const VerifyPage = () => {
                 )
 
                 if (arrayBuffer) {
-                  files[fileName] = await convertToPdfFile(
+                  files[fileName] = await convertToSigitFile(
                     arrayBuffer,
                     fileName!
                   )
@@ -423,10 +445,15 @@ export const VerifyPage = () => {
     const marks = extractMarksFromSignedMeta(updatedMeta)
     const marksByPage = groupMarksByFileNamePage(marks)
 
-    for (const [fileName, pdf] of Object.entries(files)) {
+    for (const [fileName, file] of Object.entries(files)) {
-      const pages = await addMarks(pdf.file, marksByPage[fileName])
+      if (file.isPdf) {
-      const blob = await convertToPdfBlob(pages)
+        // Draw marks into PDF file and generate a brand new blob
-      zip.file(`files/${fileName}`, blob)
+        const pages = await addMarks(file, marksByPage[fileName])
+        const blob = await convertToPdfBlob(pages)
+        zip.file(`files/${fileName}`, blob)
+      } else {
+        zip.file(`files/${fileName}`, file)
+      }
     }
 
     const arrayBuffer = await zip
@@ -545,6 +572,9 @@ export const VerifyPage = () => {
               </>
             }
             right={<UsersDetails meta={meta} />}
+            leftIcon={faFileDownload}
+            centerIcon={faFile}
+            rightIcon={faCircleInfo}
           >
             <SlimPdfView
               currentFile={currentFile}

src/pages/verify/style.module.scss

@@ -51,30 +51,6 @@
   }
 }
 
-.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,3 +2,5 @@ $header-height: 65px;
 $body-vertical-padding: 25px;
 
 $default-container-padding-inline: 10px;
+
+$tabs-height: 40px;

src/types/drawing.ts

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

src/types/errors/MetaParseError.ts

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,29 @@
+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,9 +1,8 @@
-import { PdfFile } from './drawing.ts'
+import { SigitFile } from '../utils/file'
 
 export interface CurrentUserFile {
   id: number
-  pdfFile: PdfFile
+  file: SigitFile
-  filename: string
   hash?: string
   isHashValid: boolean
 }

src/types/mark.ts

@@ -18,10 +18,13 @@ export interface Mark {
   value?: string
 }
 
-export interface MarkLocation {
+export interface MarkLocation extends MarkRect {
-  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,3 +26,94 @@ 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,24 +1,140 @@
 import { Meta } from '../types'
+import { PdfPage } from '../types/drawing.ts'
+import { MOST_COMMON_MEDIA_TYPES } from './const.ts'
 import { extractMarksFromSignedMeta } from './mark.ts'
-import { addMarks, convertToPdfBlob, groupMarksByFileNamePage } from './pdf.ts'
+import {
+  addMarks,
+  convertToPdfBlob,
+  groupMarksByFileNamePage,
+  isPdf,
+  pdfToImages
+} from './pdf.ts'
 import JSZip from 'jszip'
-import { PdfFile } from '../types/drawing.ts'
 
-const getZipWithFiles = async (
+export const getZipWithFiles = async (
   meta: Meta,
-  files: { [filename: string]: PdfFile }
+  files: { [filename: string]: SigitFile }
 ): Promise<JSZip> => {
   const zip = new JSZip()
   const marks = extractMarksFromSignedMeta(meta)
   const marksByFileNamePage = groupMarksByFileNamePage(marks)
 
-  for (const [fileName, pdf] of Object.entries(files)) {
+  for (const [fileName, file] of Object.entries(files)) {
-    const pages = await addMarks(pdf.file, marksByFileNamePage[fileName])
+    if (file.isPdf) {
-    const blob = await convertToPdfBlob(pages)
+      // Handle PDF Files
-    zip.file(`files/${fileName}`, blob)
+      const pages = await addMarks(file, marksByFileNamePage[fileName])
+      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 flar array, regardless of the user.
+ * all Marks into one flat array, regardless of the user.
  * @param meta
  */
 const extractMarksFromSignedMeta = (meta: Meta): Mark[] => {

src/utils/meta.ts

@@ -2,6 +2,12 @@ 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',
@@ -16,58 +22,6 @@ 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
@@ -88,7 +42,7 @@ export const parseNostrEvent = async (raw: string): Promise<Event> => {
     const event = await parseJson<Event>(raw)
     return event
   } catch (error) {
-    throw new SigitMetaParseError(SigitMetaParseErrorType.PARSE_ERROR_EVENT, {
+    throw new MetaParseError(MetaParseErrorType.PARSE_ERROR_EVENT, {
       cause: handleError(error),
       context: raw
     })
@@ -108,8 +62,8 @@ export const parseCreateSignatureEventContent = async (
       await parseJson<CreateSignatureEventContent>(raw)
     return createSignatureEventContent
   } catch (error) {
-    throw new SigitMetaParseError(
+    throw new MetaParseError(
-      SigitMetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
+      MetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
       {
         cause: handleError(error),
         context: raw
@@ -164,7 +118,7 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
 
     return sigitInfo
   } catch (error) {
-    if (error instanceof SigitMetaParseError) {
+    if (error instanceof MetaParseError) {
       toast.error(error.message)
       console.error(error.name, error.message, error.cause, error.context)
     } else {
@@ -172,29 +126,3 @@ 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,6 +11,7 @@ import {
   getEventHash,
   getPublicKey,
   kinds,
+  nip04,
   nip19,
   nip44,
   verifyEvent
@@ -30,10 +31,26 @@ 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 { getHash } from './hash'
+import { getDefaultRelayMap } from './relays'
 import { parseJson, removeLeadingSlash } from './string'
 import { timeout } from './utils'
-import { getDefaultRelayMap } from './relays'
+import { getHash } from './hash'
+
+/**
+ * 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
@@ -377,13 +394,13 @@ export const getUsersAppData = async (): Promise<UserAppData | null> => {
   }
 
   // Generate an identifier for the user's nip78
-  const hash = await getHash('938' + usersPubkey)
+  const dTag = await getDTagForUserAppData()
-  if (!hash) return null
+  if (!dTag) return null
 
   // Define a filter for fetching events
   const filter: Filter = {
     kinds: [kinds.Application],
-    '#d': [hash]
+    '#d': [dTag]
   }
 
   const encryptedContent = await relayController
@@ -578,14 +595,14 @@ export const updateUsersAppData = async (meta: Meta) => {
   if (!encryptedContent) return null
 
   // generate the identifier for user's appData event
-  const hash = await getHash('938' + usersPubkey)
+  const dTag = await getDTagForUserAppData()
-  if (!hash) return null
+  if (!dTag) return null
 
   const updatedEvent: UnsignedEvent = {
     kind: kinds.Application,
     pubkey: usersPubkey!,
     created_at: unixNow(),
-    tags: [['d', hash]],
+    tags: [['d', dTag]],
     content: encryptedContent
   }
 
@@ -693,9 +710,10 @@ 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 = nip44.v2.encrypt(
+  const encrypted = await nip04.encrypt(
-    stringified,
+    secretKey,
-    nip44ConversationKey(secretKey, getPublicKey(secretKey))
+    getPublicKey(secretKey),
+    stringified
   )
 
   // Create a blob from the encrypted data
@@ -788,10 +806,7 @@ const getUserAppDataFromBlossom = async (url: string, privateKey: string) => {
   const pubkey = getPublicKey(secret)
 
   // Decrypt the encrypted data using the secret and public key
-  const decrypted = nip44.v2.decrypt(
+  const decrypted = await nip04.decrypt(secret, pubkey, encrypted)
-    encrypted,
-    nip44ConversationKey(secret, pubkey)
-  )
 
   // Parse the decrypted JSON content
   const parsedContent = await parseJson<{

src/utils/pdf.ts

@@ -1,18 +1,15 @@
-import { PdfFile, PdfPage } from '../types/drawing.ts'
+import { PdfPage } from '../types/drawing.ts'
-import * as PDFJS from 'pdfjs-dist'
 import { PDFDocument } from 'pdf-lib'
 import { Mark } from '../types/mark.ts'
 
-PDFJS.GlobalWorkerOptions.workerSrc = new URL(
+import * as PDFJS from 'pdfjs-dist'
-  'pdfjs-dist/build/pdf.worker.min.mjs',
+import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'
-  import.meta.url
+if (!PDFJS.GlobalWorkerOptions.workerPort) {
-).toString()
+  // Use workerPort and allow worker to be shared between all getDocument calls
+  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
@@ -20,58 +17,28 @@ const SCALE: number = 3
  * This should be fixed going forward.
  * Switching to PDF-Lib will most likely make this problem redundant.
  */
-const FONT_SIZE: number = 40
+export const FONT_SIZE: number = 16
 /**
  * Current font type used when generating a PDF.
  */
-const FONT_TYPE: string = 'Arial'
+export const FONT_TYPE: string = 'Arial'
 
 /**
- * Converts a PDF ArrayBuffer to a generic PDF File
+ * A utility that transforms a drawing coordinate number into a CSS-compatible pixel string
- * @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
  */
-const inPx = (coordinate: number): string => `${coordinate}px`
+export const inPx = (coordinate: number): string => `${coordinate}px`
 
 /**
  * A utility that checks if a given file is of the pdf type
  * @param file
  */
-const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
+export const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
 
 /**
  * Reads the pdf file binaries
  */
-const readPdf = (file: File): Promise<string | ArrayBuffer> => {
+export const readPdf = (file: File): Promise<string | ArrayBuffer> => {
   return new Promise((resolve, reject) => {
     const reader = new FileReader()
 
@@ -95,33 +62,55 @@ 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
  */
-const pdfToImages = async (data: string | ArrayBuffer): Promise<PdfPage[]> => {
+export const pdfToImages = async (
-  const images: string[] = []
+  data: string | ArrayBuffer
+): 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
-    images.push(canvas.toDataURL())
+    pages.push({
+      image: canvas.toDataURL(),
+      width: originalViewport.width,
+      drawnFields: []
+    })
   }
 
-  return Promise.resolve(
+  return pages
-    images.map((image) => {
-      return {
-        image,
-        drawnFields: []
-      }
-    })
-  )
 }
 
 /**
@@ -129,7 +118,7 @@ const pdfToImages = async (data: string | ArrayBuffer): Promise<PdfPage[]> => {
  * Returns an array of encoded images where each image is a representation
  * of a PDF page with completed and signed marks from all users
  */
-const addMarks = async (
+export const addMarks = async (
   file: File,
   marksPerPage: { [key: string]: Mark[] }
 ) => {
@@ -141,34 +130,39 @@ const addMarks = async (
 
   for (let i = 0; i < pdf.numPages; i++) {
     const page = await pdf.getPage(i + 1)
-    const viewport = page.getViewport({ scale: SCALE })
+    const viewport = page.getViewport({ scale: 1 })
     const context = canvas.getContext('2d')
     canvas.height = viewport.height
     canvas.width = viewport.width
-    await page.render({ canvasContext: context!, viewport: viewport }).promise
+    if (context) {
+      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())
+    }
   }
 
-  return Promise.resolve(images)
+  canvas.remove()
+
+  return images
 }
 
 /**
  * Utility to scale mark in line with the PDF-to-PNG scale
  */
-const scaleMark = (mark: Mark): Mark => {
+export const scaleMark = (mark: Mark, scale: number): 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
     }
   }
 }
@@ -177,29 +171,32 @@ const scaleMark = (mark: Mark): Mark => {
  * Utility to check if a Mark has value
  * @param mark
  */
-const hasValue = (mark: Mark): boolean => !!mark.value
+export const hasValue = (mark: Mark): boolean => !!mark.value
 
 /**
  * Draws a Mark on a Canvas representation of a PDF Page
  * @param mark to be drawn
  * @param ctx a Canvas representation of a specific PDF Page
  */
-const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
+export const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
   const { location } = mark
-
+  ctx.font = FONT_SIZE + 'px ' + FONT_TYPE
-  ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE
+  ctx.fillStyle = 'black'
-  ctx!.fillStyle = 'black'
+  const textMetrics = ctx.measureText(mark.value!)
-  const textMetrics = ctx!.measureText(mark.value!)
+  const textHeight =
+    textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent
   const textX = location.left + (location.width - textMetrics.width) / 2
-  const textY = location.top + (location.height + parseInt(ctx!.font)) / 2
+  const textY = location.top + (location.height + textHeight) / 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
  */
-const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
+export const convertToPdfBlob = async (
+  markedPdfPages: string[]
+): Promise<Blob> => {
   const pdfDoc = await PDFDocument.create()
 
   for (const page of markedPdfPages) {
@@ -217,30 +214,15 @@ const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
   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
  */
-const groupMarksByFileNamePage = (marks: Mark[]) => {
+export const groupMarksByFileNamePage = (marks: Mark[]) => {
   return marks
     .filter(hasValue)
-    .map(scaleMark)
+    .reduce<{ [fileName: string]: { [page: number]: Mark[] } }>(byPage, {})
-    .reduce<{ [filename: string]: { [page: number]: Mark[] } }>(byPage, {})
 }
 
 /**
@@ -251,30 +233,19 @@ const groupMarksByFileNamePage = (marks: Mark[]) => {
  * @param obj - accumulator in the reducer callback
  * @param mark - current value, i.e. Mark being examined
  */
-const byPage = (
+export 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,7 +30,6 @@ 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,4 +31,16 @@ 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 3 dots if length greater then
+ * Function will replace the middle of the string with ellipsis 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,10 +9,7 @@ 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(
+  return `${str.slice(0, offset)}…${str.slice(str.length - offset, str.length)}`
-    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]: PdfFile },
+  files: { [filename: string]: SigitFile },
   fileHashes: { [key: string]: string | null },
   creatorFileHashes: { [key: string]: string }
 ): CurrentUserFile[] => {
-  return Object.entries(files).map(([filename, pdfFile], index) => {
+  return Object.entries(files).map(([filename, file], index) => {
     return {
-      pdfFile,
+      file,
       filename,
       id: index + 1,
       ...(!!fileHashes[filename] && { hash: fileHashes[filename]! }),
@@ -89,3 +89,32 @@ 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
+  }, [])
+}