.eslintrc.cjs

@@ -6,7 +6,7 @@ module.exports = {
     'plugin:@typescript-eslint/recommended',
     'plugin:react-hooks/recommended'
   ],
-  ignorePatterns: ['dist', '.eslintrc.cjs', 'licenseChecker.cjs'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
   plugins: ['react-refresh'],
   rules: {

.git-hooks/commit-msg

@@ -1,19 +0,0 @@
-#!/bin/sh
-# Get the commit message (the parameter we're given is just the path to the
-# temporary file which holds the message).
-commit_message=$(cat "$1")
-
-if (echo "$commit_message" | grep -Eq "^(build|chore|ci|docs|feat|fix|perf|refactor|revert|style|test)(\([a-z0-9 \-]+\))?!?: .+$") then
-   tput setaf 2;
-   echo "✔ Commit message meets Conventional Commit standards"
-   tput sgr0;
-   exit 0
-fi
-
-tput setaf 1;
-echo "❌ Commit message does not meet the Conventional Commit standard!"
-tput sgr0;
-echo "An example of a valid message is:"
-echo "  feat(login): add the 'remember me' button"
-echo "📝 More details at: https://www.conventionalcommits.org/en/v1.0.0/#summary"
-exit 1

.git-hooks/pre-commit

@@ -1,13 +0,0 @@
-#!/bin/sh
-
-# Avoid commits to the master branch
-BRANCH=`git rev-parse --abbrev-ref HEAD`
-REGEX="^(master|main|staging|development)$"
-
-if [[ "$BRANCH" =~ $REGEX ]]; then
-  echo "You are on branch $BRANCH. Are you sure you want to commit to this branch?"
-  echo "If so, commit with -n to bypass the pre-commit hook."
-  exit 1
-fi
-
-npm run lint-staged

.gitea/workflows/release-staging.yaml

@@ -17,21 +17,9 @@ jobs:
         with:
           node-version: 18
 
-      - name: Audit
-        run: npm audit
-
       - name: Install Dependencies
         run: npm ci
 
-      - name: License check
-        run: npm run license-checker
-
-      - name: Lint check
-        run: npm run lint
-
-      - name: Formatter check
-        run: npm run formatter:check
-
       - name: Create .env File
         run: echo "VITE_MOST_POPULAR_RELAYS=${{ vars.VITE_MOST_POPULAR_RELAYS }}" > .env
 

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

@@ -1,34 +0,0 @@
-name: Open PR on Staging
-on:
-  pull_request:
-    types: [opened, edited, synchronize]
-    branches:
-      - staging
-
-jobs:
-  audit_and_check:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup Node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 18
-
-      - name: Audit
-        run: npm audit
-
-      - name: Install Dependencies
-        run: npm ci
-
-      - name: License check
-        run: npm run license-checker
-
-      - name: Lint check
-        run: npm run lint
-
-      - name: Formatter check
-        run: npm run formatter:check

licenseChecker.cjs

@@ -1,28 +0,0 @@
-const process = require('node:process')
-const licenseChecker = require('license-checker')
-
-const check = (cwd) => {
-  return new Promise((resolve, reject) => {
-    licenseChecker.init(
-      {
-        production: true,
-        start: cwd,
-        excludePrivatePackages: true,
-        onlyAllow:
-          'AFLv2.1;Apache 2.0;Apache-2.0;Apache*;Artistic-2.0;0BSD;BSD*;BSD-2-Clause;BSD-3-Clause;BSD 3-Clause;CC0-1.0;CC-BY-3.0;CC-BY-4.0;ISC;MIT;MPL-2.0;ODC-By-1.0;Python-2.0;Unlicense;',
-        excludePackages: ''
-      },
-      (error, json) => {
-        if (error) {
-          reject(error)
-        } else {
-          resolve(json)
-        }
-      }
-    )
-  })
-}
-
-check(process.cwd(), true)
-  .then(() => console.log('All packages are licensed properly'))
-  .catch((err) => console.log('license checker err', err))

package.json

@@ -7,16 +7,11 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 25",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "lint:fix": "eslint . --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "lint:staged": "eslint --fix --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "formatter:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
     "formatter:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}\"",
-    "formatter:staged": "prettier --write --ignore-unknown",
+    "preview": "vite preview"
-    "preview": "vite preview",
-    "preinstall": "git config core.hooksPath .git-hooks",
-    "license-checker": "node licenseChecker.cjs",
-    "lint-staged": "lint-staged"
   },
   "dependencies": {
     "@emotion/react": "11.11.4",
@@ -31,7 +26,7 @@
     "@noble/hashes": "^1.4.0",
     "@nostr-dev-kit/ndk": "2.5.0",
     "@reduxjs/toolkit": "2.2.1",
-    "axios": "^1.7.4",
+    "axios": "1.6.7",
     "crypto-hash": "3.0.0",
     "crypto-js": "^4.2.0",
     "dnd-core": "16.0.1",
@@ -47,7 +42,6 @@
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "16.0.1",
     "react-dom": "^18.2.0",
-    "react-dropzone": "^14.2.3",
     "react-redux": "9.1.0",
     "react-router-dom": "6.22.1",
     "react-toastify": "10.0.4",
@@ -67,18 +61,10 @@
     "eslint": "^8.56.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
-    "license-checker": "^25.0.1",
-    "lint-staged": "^15.2.8",
     "prettier": "3.2.5",
     "ts-css-modules-vite-plugin": "1.0.20",
     "typescript": "^5.2.2",
     "vite": "^5.1.4",
     "vite-tsconfig-paths": "4.3.2"
-  },
-  "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "npm run lint:staged"
-    ],
-    "*.{ts,tsx,js,jsx,html,css,sass,less,yml,md,graphql}": "npm run formatter:staged"
   }
 }

src/App.scss

@@ -56,16 +56,10 @@ a {
   text-decoration: none;
   text-decoration-color: inherit;
   transition: ease 0.4s;
-  outline: none;
 
-  &:focus,
   &:hover {
     color: $primary-light;
     text-decoration: underline;
     text-decoration-color: inherit;
   }
 }
-
-input {
-  font-family: inherit;
-}

src/components/Container/index.tsx

@@ -6,18 +6,6 @@ interface ContainerProps {
   className?: string
 }
 
-/**
- * Container component with pre-defined width, padding and margins for top level layout.
- *
- * **Important:** To avoid conflicts with `defaultStyle` (changing the `width`, `max-width`, `padding-inline`, and/or `margin-inline`) make sure to either:
- * - When using *className* override, that styles are imported after the actual `Container` component
- * ```
- * import { Container } from './components/Container'
- * import styles from './style.module.scss'
- * ```
- * - or add *!important* to imported styles
- * - or override styles with *CSSProperties* object
- */
 export const Container = ({
   style = {},
   className = '',

src/components/DisplaySigit/index.tsx

@@ -1,158 +0,0 @@
-import { Meta } from '../../types'
-import { SigitCardDisplayInfo, SigitStatus } from '../../utils'
-import { Link } from 'react-router-dom'
-import { formatTimestamp, hexToNpub, npubToHex, shorten } from '../../utils'
-import { appPublicRoutes, appPrivateRoutes } from '../../routes'
-import { Button, Divider, Tooltip } from '@mui/material'
-import { DisplaySigner } from '../DisplaySigner'
-import {
-  faArchive,
-  faCalendar,
-  faCopy,
-  faEye,
-  faFile
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { UserAvatar } from '../UserAvatar'
-import { UserAvatarGroup } from '../UserAvatarGroup'
-
-import styles from './style.module.scss'
-import { TooltipChild } from '../TooltipChild'
-import { getExtensionIconLabel } from '../getExtensionIconLabel'
-import { useSigitProfiles } from '../../hooks/useSigitProfiles'
-import { useSigitMeta } from '../../hooks/useSigitMeta'
-
-type SigitProps = {
-  meta: Meta
-  parsedMeta: SigitCardDisplayInfo
-}
-
-export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
-  const {
-    title,
-    createdAt,
-    submittedBy,
-    signers,
-    signedStatus,
-    fileExtensions
-  } = parsedMeta
-
-  const { signersStatus } = useSigitMeta(meta)
-
-  const profiles = useSigitProfiles([
-    ...(submittedBy ? [submittedBy] : []),
-    ...signers
-  ])
-
-  return (
-    <div className={styles.itemWrapper}>
-      <Link
-        to={
-          signedStatus === SigitStatus.Complete
-            ? appPublicRoutes.verify
-            : appPrivateRoutes.sign
-        }
-        state={{ meta }}
-        className={styles.insetLink}
-      ></Link>
-      <p className={`line-clamp-2 ${styles.title}`}>{title}</p>
-      <div className={styles.users}>
-        {submittedBy &&
-          (function () {
-            const profile = profiles[submittedBy]
-            return (
-              <Tooltip
-                title={
-                  profile?.display_name ||
-                  profile?.name ||
-                  shorten(hexToNpub(submittedBy))
-                }
-                placement="top"
-                arrow
-                disableInteractive
-              >
-                <TooltipChild>
-                  <UserAvatar pubkey={submittedBy} image={profile?.picture} />
-                </TooltipChild>
-              </Tooltip>
-            )
-          })()}
-        {submittedBy && signers.length ? (
-          <Divider orientation="vertical" flexItem />
-        ) : null}
-        <UserAvatarGroup max={7}>
-          {signers.map((signer) => {
-            const pubkey = npubToHex(signer)!
-            const profile = profiles[pubkey]
-
-            return (
-              <Tooltip
-                key={signer}
-                title={
-                  profile?.display_name || profile?.name || shorten(pubkey)
-                }
-                placement="top"
-                arrow
-                disableInteractive
-              >
-                <TooltipChild>
-                  <DisplaySigner
-                    status={signersStatus[signer]}
-                    profile={profile}
-                    pubkey={pubkey}
-                  />
-                </TooltipChild>
-              </Tooltip>
-            )
-          })}
-        </UserAvatarGroup>
-      </div>
-      <div className={`${styles.details} ${styles.date} ${styles.iconLabel}`}>
-        <FontAwesomeIcon icon={faCalendar} />
-        {createdAt ? formatTimestamp(createdAt) : null}
-      </div>
-      <div className={`${styles.details} ${styles.status}`}>
-        <span className={styles.iconLabel}>
-          <FontAwesomeIcon icon={faEye} /> {signedStatus}
-        </span>
-        {fileExtensions.length > 0 ? (
-          <span className={styles.iconLabel}>
-            {fileExtensions.length > 1 ? (
-              <>
-                <FontAwesomeIcon icon={faFile} /> Multiple File Types
-              </>
-            ) : (
-              getExtensionIconLabel(fileExtensions[0])
-            )}
-          </span>
-        ) : null}
-      </div>
-      <div className={styles.itemActions}>
-        <Tooltip title="Duplicate" arrow placement="top" disableInteractive>
-          <Button
-            sx={{
-              color: 'var(--primary-main)',
-              minWidth: '34px',
-              padding: '10px'
-            }}
-            variant={'text'}
-          >
-            <FontAwesomeIcon icon={faCopy} />
-          </Button>
-        </Tooltip>
-        <Tooltip title="Archive" arrow placement="top" disableInteractive>
-          <Button
-            sx={{
-              color: 'var(--primary-main)',
-              minWidth: '34px',
-              padding: '10px'
-            }}
-            variant={'text'}
-          >
-            <FontAwesomeIcon icon={faArchive} />
-          </Button>
-        </Tooltip>
-      </div>
-    </div>
-  )
-}

src/components/DisplaySigit/style.module.scss

@@ -1,114 +0,0 @@
-@import '../../styles/colors.scss';
-
-.itemWrapper {
-  position: relative;
-  overflow: hidden;
-  background-color: $overlay-background-color;
-  border-radius: 4px;
-
-  display: flex;
-  padding: 15px;
-  gap: 15px;
-  flex-direction: column;
-
-  &:only-child {
-    max-width: 600px;
-  }
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    transition: opacity ease 0.2s;
-    opacity: 0;
-    width: 4px;
-    background-color: $primary-main;
-    pointer-events: none;
-  }
-
-  &:hover,
-  &:focus-within {
-    &::before {
-      opacity: 1;
-    }
-
-    .itemActions {
-      transform: translateX(0);
-    }
-  }
-}
-
-.insetLink {
-  position: absolute;
-  inset: 0;
-  outline: none;
-}
-
-.itemActions {
-  display: flex;
-  gap: 10px;
-  padding: 10px;
-
-  > * {
-    flex-grow: 1;
-  }
-
-  @media (hover: hover) {
-    transition: ease 0.2s;
-    transform: translateX(100%);
-    position: absolute;
-    right: 0;
-    top: 0;
-    bottom: 0;
-
-    flex-direction: column;
-    background: $overlay-background-color;
-    border-left: solid 1px rgba(0, 0, 0, 0.1);
-
-    &:hover,
-    &:focus-within {
-      transform: translateX(0);
-    }
-  }
-
-  @media (hover: none) {
-    border-top: solid 1px rgba(0, 0, 0, 0.1);
-    padding-top: 10px;
-    margin-inline: -15px;
-    margin-bottom: -15px;
-  }
-}
-
-.title {
-  font-size: 20px;
-  color: $text-color;
-}
-
-.users {
-  margin-top: auto;
-
-  display: flex;
-  grid-gap: 10px;
-}
-
-.details {
-  color: rgba(0, 0, 0, 0.3);
-  font-size: 14px;
-}
-
-.iconLabel {
-  display: flex;
-  grid-gap: 10px;
-  align-items: center;
-}
-
-.status {
-  display: flex;
-  grid-gap: 25px;
-}
-
-a.itemWrapper:hover {
-  text-decoration: none;
-}

src/components/DisplaySigner/index.tsx

@@ -1,62 +0,0 @@
-import { Badge } from '@mui/material'
-import { ProfileMetadata } from '../../types'
-import styles from './style.module.scss'
-import { UserAvatar } from '../UserAvatar'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faCheck,
-  faEllipsis,
-  faExclamation,
-  faEye,
-  faHourglass,
-  faQuestion
-} from '@fortawesome/free-solid-svg-icons'
-import { SignStatus } from '../../utils'
-import { Spinner } from '../Spinner'
-
-type DisplaySignerProps = {
-  profile: ProfileMetadata
-  pubkey: string
-  status: SignStatus
-}
-
-export const DisplaySigner = ({
-  status,
-  profile,
-  pubkey
-}: DisplaySignerProps) => {
-  const getStatusIcon = (status: SignStatus) => {
-    switch (status) {
-      case SignStatus.Signed:
-        return <FontAwesomeIcon icon={faCheck} />
-      case SignStatus.Awaiting:
-        return (
-          <Spinner>
-            <FontAwesomeIcon icon={faHourglass} />
-          </Spinner>
-        )
-      case SignStatus.Pending:
-        return <FontAwesomeIcon icon={faEllipsis} />
-      case SignStatus.Invalid:
-        return <FontAwesomeIcon icon={faExclamation} />
-      case SignStatus.Viewer:
-        return <FontAwesomeIcon icon={faEye} />
-
-      default:
-        return <FontAwesomeIcon icon={faQuestion} />
-    }
-  }
-
-  return (
-    <Badge
-      className={styles.signer}
-      overlap="circular"
-      anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
-      badgeContent={
-        <div className={styles.statusBadge}>{getStatusIcon(status)}</div>
-      }
-    >
-      <UserAvatar pubkey={pubkey} image={profile?.picture} />
-    </Badge>
-  )
-}

src/components/DisplaySigner/style.module.scss

@@ -1,23 +0,0 @@
-@import '../../styles/colors.scss';
-
-.statusBadge {
-  width: 22px;
-  height: 22px;
-  border-radius: 50%;
-
-  color: white;
-
-  display: flex;
-  align-items: center;
-  justify-content: center;
-
-  font-size: 10px;
-
-  background-color: $primary-main;
-}
-
-.signer {
-  background-color: white;
-  border-radius: 50%;
-  z-index: 1;
-}

src/components/DrawPDFFields/index.tsx

@@ -1,45 +1,15 @@
-import {
+import { AccessTime, CalendarMonth, ExpandMore, Gesture, PictureAsPdf, Badge, Work, Close } from '@mui/icons-material'
-  AccessTime,
+import { Box, Typography, Accordion, AccordionDetails, AccordionSummary, CircularProgress, FormControl, InputLabel, MenuItem, Select } from '@mui/material'
-  CalendarMonth,
-  ExpandMore,
-  Gesture,
-  PictureAsPdf,
-  Badge,
-  Work,
-  Close
-} from '@mui/icons-material'
-import {
-  Box,
-  Typography,
-  Accordion,
-  AccordionDetails,
-  AccordionSummary,
-  CircularProgress,
-  FormControl,
-  InputLabel,
-  MenuItem,
-  Select
-} from '@mui/material'
 import styles from './style.module.scss'
 import { useEffect, useState } from 'react'
 
-import * as PDFJS from 'pdfjs-dist'
+import * as PDFJS from "pdfjs-dist";
-import { ProfileMetadata, User } from '../../types'
+import { ProfileMetadata, User } from '../../types';
-import {
+import { PdfFile, DrawTool, MouseState, PdfPage, DrawnField, MarkType } from '../../types/drawing';
-  PdfFile,
+import { truncate } from 'lodash';
-  DrawTool,
+import { hexToNpub } from '../../utils';
-  MouseState,
-  PdfPage,
-  DrawnField,
-  MarkType
-} from '../../types/drawing'
-import { truncate } from 'lodash'
-import { hexToNpub } from '../../utils'
 import { toPdfFiles } from '../../utils/pdf.ts'
-PDFJS.GlobalWorkerOptions.workerSrc = new URL(
+PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
-  'pdfjs-dist/build/pdf.worker.min.mjs',
-  import.meta.url
-).toString()
 
 interface Props {
   selectedFiles: File[]
@@ -59,34 +29,35 @@ export const DrawPDFFields = (props: Props) => {
   const [toolbox] = useState<DrawTool[]>([
     {
       identifier: MarkType.SIGNATURE,
-      icon: <Gesture />,
+      icon: <Gesture/>,
       label: 'Signature',
       active: false
+  
     },
     {
       identifier: MarkType.FULLNAME,
-      icon: <Badge />,
+      icon: <Badge/>,
       label: 'Full Name',
       active: true
     },
     {
       identifier: MarkType.JOBTITLE,
-      icon: <Work />,
+      icon: <Work/>,
       label: 'Job Title',
       active: false
     },
     {
       identifier: MarkType.DATE,
-      icon: <CalendarMonth />,
+      icon: <CalendarMonth/>,
       label: 'Date',
       active: false
     },
     {
       identifier: MarkType.DATETIME,
-      icon: <AccessTime />,
+      icon: <AccessTime/>,
       label: 'Datetime',
       active: false
-    }
+    },
   ])
 
   const [mouseState, setMouseState] = useState<MouseState>({
@@ -112,11 +83,11 @@ export const DrawPDFFields = (props: Props) => {
    */
   useEffect(() => {  
     // window.addEventListener('mousedown', onMouseDown);
-    window.addEventListener('mouseup', onMouseUp)
+    window.addEventListener('mouseup', onMouseUp);
     
     return () => {
       // window.removeEventListener('mousedown', onMouseDown);
-      window.removeEventListener('mouseup', onMouseUp)
+      window.removeEventListener('mouseup', onMouseUp);
     }
   }, [])
 
@@ -187,7 +158,7 @@ export const DrawPDFFields = (props: Props) => {
    */
   const onMouseMove = (event: any, page: PdfPage) => {
     if (mouseState.clicked && selectedTool) {
-      const lastElementIndex = page.drawnFields.length - 1
+      const lastElementIndex = page.drawnFields.length -1
       const lastDrawnField = page.drawnFields[lastElementIndex]
 
       const { mouseX, mouseY } = getMouseCoordinates(event)
@@ -241,10 +212,7 @@ export const DrawPDFFields = (props: Props) => {
    */
   const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => {
     if (mouseState.dragging) {
-      const { mouseX, mouseY, rect } = getMouseCoordinates(
+      const { mouseX, mouseY, rect } = getMouseCoordinates(event, event.target.parentNode)
-        event,
-        event.target.parentNode
-      )
       const coordsOffset = mouseState.coordsInWrapper
 
       if (coordsOffset) {
@@ -290,10 +258,7 @@ export const DrawPDFFields = (props: Props) => {
    */
   const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
     if (mouseState.resizing) {
-      const { mouseX, mouseY } = getMouseCoordinates(
+      const { mouseX, mouseY } = getMouseCoordinates(event, event.target.parentNode.parentNode)
-        event,
-        event.target.parentNode.parentNode
-      )
       
       const width = mouseX - drawnField.left
       const height = mouseY - drawnField.top
@@ -312,18 +277,10 @@ export const DrawPDFFields = (props: Props) => {
    * @param pdfPageIndex pdf page index
    * @param drawnFileIndex drawn file index
    */
-  const onRemoveHandleMouseDown = (
+  const onRemoveHandleMouseDown = (event: any, pdfFileIndex: number, pdfPageIndex: number, drawnFileIndex: number) => {
-    event: any,
-    pdfFileIndex: number,
-    pdfPageIndex: number,
-    drawnFileIndex: number
-  ) => {
     event.stopPropagation()
     
-    pdfFiles[pdfFileIndex].pages[pdfPageIndex].drawnFields.splice(
+    pdfFiles[pdfFileIndex].pages[pdfPageIndex].drawnFields.splice(drawnFileIndex, 1)
-      drawnFileIndex,
-      1
-    )
   }
 
   /**
@@ -343,9 +300,9 @@ export const DrawPDFFields = (props: Props) => {
    */
   const getMouseCoordinates = (event: any, customTarget?: any) => {
     const target = customTarget ? customTarget : event.target
-    const rect = target.getBoundingClientRect()
+    const rect = target.getBoundingClientRect();
-    const mouseX = event.clientX - rect.left //x position within the element.
+    const mouseX = event.clientX - rect.left; //x position within the element.
-    const mouseY = event.clientY - rect.top //y position within the element.
+    const mouseY = event.clientY - rect.top;  //y position within the element.
 
     return {
       mouseX,
@@ -359,7 +316,7 @@ export const DrawPDFFields = (props: Props) => {
    * creates the pdfFiles object and sets to a state
    */
   const parsePdfPages = async () => {
-    const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
+    const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles);
     
     setPdfFiles(pdfFiles)
   }
@@ -369,7 +326,7 @@ export const DrawPDFFields = (props: Props) => {
    * @returns if expanded pdf accordion is present
    */
   const hasExpandedPdf = () => {
-    return !!pdfFiles.filter((pdfFile) => !!pdfFile.expanded).length
+    return !!pdfFiles.filter(pdfFile => !!pdfFile.expanded).length
   }
 
   const handleAccordionExpandChange = (expanded: boolean, pdfFile: PdfFile) => {
@@ -398,11 +355,9 @@ export const DrawPDFFields = (props: Props) => {
    */
   const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
     return (
-      <Box
+      <Box sx={{
-        sx={{
+        width: '100%'
-          width: '100%'
+      }}>
-        }}
-      >
         {pdfFile.pages.map((page, pdfPageIndex: number) => {
           return (
             <div
@@ -412,27 +367,17 @@ export const DrawPDFFields = (props: Props) => {
                 marginBottom: '10px'
               }}
               className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
-              onMouseMove={(event) => {
+              onMouseMove={(event) => {onMouseMove(event, page)}}
-                onMouseMove(event, page)
+              onMouseDown={(event) => {onMouseDown(event, page)}}
-              }}
-              onMouseDown={(event) => {
-                onMouseDown(event, page)
-              }}
             >
-              <img
+              <img draggable="false" style={{ width: '100%' }} src={page.image}/>
-                draggable="false"
-                style={{ width: '100%' }}
-                src={page.image}
-              />
 
               {page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
                 return (
                   <div
                     key={drawnFieldIndex}
                     onMouseDown={onDrawnFieldMouseDown}
-                    onMouseMove={(event) => {
+                    onMouseMove={(event) => { onDranwFieldMouseMove(event, drawnField)}}
-                      onDranwFieldMouseMove(event, drawnField)
-                    }}
                     className={styles.drawingRectangle}
                     style={{
                       left: `${drawnField.left}px`,
@@ -444,68 +389,41 @@ export const DrawPDFFields = (props: Props) => {
                   >
                     <span
                       onMouseDown={onResizeHandleMouseDown}
-                      onMouseMove={(event) => {
+                      onMouseMove={(event) => {onResizeHandleMouseMove(event, drawnField)}}
-                        onResizeHandleMouseMove(event, drawnField)
-                      }}
                       className={styles.resizeHandle}
                     ></span>
                     <span
-                      onMouseDown={(event) => {
+                      onMouseDown={(event) => {onRemoveHandleMouseDown(event, pdfFileIndex, pdfPageIndex, drawnFieldIndex)}}
-                        onRemoveHandleMouseDown(
-                          event,
-                          pdfFileIndex,
-                          pdfPageIndex,
-                          drawnFieldIndex
-                        )
-                      }}
                       className={styles.removeHandle}
                     >
-                      <Close fontSize="small" />
+                      <Close fontSize='small'/>
                     </span>
                     <div 
                       onMouseDown={onUserSelectHandleMouseDown}
                       className={styles.userSelect}
                     >
-                      <FormControl fullWidth size="small">
+                      <FormControl fullWidth size='small'>
                         <InputLabel id="counterparts">Counterpart</InputLabel>
                         <Select
                           value={drawnField.counterpart}
-                          onChange={(event) => {
+                          onChange={(event) => { drawnField.counterpart = event.target.value; refreshPdfFiles() }}
-                            drawnField.counterpart = event.target.value
-                            refreshPdfFiles()
-                          }}
                           labelId="counterparts"
                           label="Counterparts"
                         >
                           {props.users.map((user, index) => {
-                            let displayValue = truncate(
+                            let displayValue = truncate(hexToNpub(user.pubkey), {
-                              hexToNpub(user.pubkey),
+                              length: 16
-                              {
+                            })
-                                length: 16
-                              }
-                            )
 
                             const metadata = props.metadata[user.pubkey]
 
                             if (metadata) {
-                              displayValue = truncate(
+                              displayValue = truncate(metadata.name || metadata.display_name || metadata.username, {
-                                metadata.name ||
+                                length: 16
-                                  metadata.display_name ||
+                              })
-                                  metadata.username,
-                                {
-                                  length: 16
-                                }
-                              )
                             }
 
-                            return (
+                            return <MenuItem key={index} value={hexToNpub(user.pubkey)}>{displayValue}</MenuItem>
-                              <MenuItem
-                                key={index}
-                                value={hexToNpub(user.pubkey)}
-                              >
-                                {displayValue}
-                              </MenuItem>
-                            )
                           })}
                         </Select>
                       </FormControl>
@@ -523,7 +441,7 @@ export const DrawPDFFields = (props: Props) => {
   if (parsingPdf) {
     return (
       <Box sx={{ width: '100%', textAlign: 'center' }}>
-        <CircularProgress />
+        <CircularProgress/>
       </Box>
     )
   }
@@ -539,25 +457,19 @@ export const DrawPDFFields = (props: Props) => {
         
         {pdfFiles.map((pdfFile, pdfFileIndex: number) => {
           return (
-            <Accordion
+            <Accordion key={pdfFileIndex} expanded={pdfFile.expanded} onChange={(_event, expanded) => {handleAccordionExpandChange(expanded, pdfFile)}}>
-              key={pdfFileIndex}
-              expanded={pdfFile.expanded}
-              onChange={(_event, expanded) => {
-                handleAccordionExpandChange(expanded, pdfFile)
-              }}
-            >
               <AccordionSummary
                 expandIcon={<ExpandMore />}
                 aria-controls={`panel${pdfFileIndex}-content`}
                 id={`panel${pdfFileIndex}header`}
               >
-                <PictureAsPdf sx={{ mr: 1 }} />
+                <PictureAsPdf sx={{ mr: 1 }}/>
                 {pdfFile.file.name}
               </AccordionSummary>
               <AccordionDetails>
                 {getPdfPages(pdfFile, pdfFileIndex)}
               </AccordionDetails>
-            </Accordion>
+          </Accordion>
           )
         })}
       </Box>
@@ -565,22 +477,16 @@ export const DrawPDFFields = (props: Props) => {
       {showDrawToolBox && (
         <Box className={styles.drawToolBoxContainer}>
           <Box className={styles.drawToolBox}>
-            {toolbox
+            {toolbox.filter(drawTool => drawTool.active).map((drawTool: DrawTool, index: number) => {
-              .filter((drawTool) => drawTool.active)
+              return (
-              .map((drawTool: DrawTool, index: number) => {
+                <Box
-                return (
+                  key={index} 
-                  <Box
+                  onClick={() => {handleToolSelect(drawTool)}} className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''}`}>
-                    key={index}
+                  { drawTool.icon }
-                    onClick={() => {
+                  { drawTool.label }
-                      handleToolSelect(drawTool)
+                </Box>
-                    }}
+              )
-                    className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''}`}
+            })}
-                  >
-                    {drawTool.icon}
-                    {drawTool.label}
-                  </Box>
-                )
-              })}
           </Box>
         </Box>
       )}

src/components/DrawPDFFields/style.module.scss

@@ -30,7 +30,6 @@
       border: 1px solid rgba(0, 0, 0, 0.137);
       padding: 5px;
       cursor: pointer;
-      -webkit-user-select: none;
       user-select: none;
 
       &.selected {
@@ -43,23 +42,16 @@
           border-color: #01aaad79;
         }
       }
+
     }
   }
 }
 
 .pdfImageWrapper {
   position: relative;
-  -webkit-user-select: none;
   user-select: none;
   margin-bottom: 10px;
   
-  > img {
-    display: block;
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain; /* Ensure the image fits within the container */
-  }
-
   &.drawing {
     cursor: crosshair;
   }
@@ -107,7 +99,7 @@
     background-color: #fff;
     border: 1px solid rgb(160, 160, 160);
     border-radius: 50%;
-    color: #e74c3c;
+    color: #E74C3C;
     font-size: 10px;
     cursor: pointer;
   }

src/components/FileList/style.module.scss

@@ -23,6 +23,8 @@ ul {
 
 
 .wrap {
+  position: sticky;
+  top: 15px;
   display: flex;
   flex-direction: column;
   grid-gap: 15px;
@@ -54,6 +56,10 @@ ul {
   cursor: grab;
 }
 
+.wrap {
+  margin-top: 5px;
+}
+
 .fileItem {
   transition: ease 0.2s;
   display: flex;

src/components/MarkFormField/style.module.scss

@@ -7,7 +7,6 @@
   right: 0;
   left: 0;
   align-items: center;
-  z-index: 1000;
 }
 
 .actions {

src/components/PDFView/PdfMarking.tsx

@@ -81,8 +81,8 @@ const PdfMarking = (props: PdfMarkingProps) => {
   }
 
   const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+    event.preventDefault()
-    if (!selectedMarkValue || !selectedMark) return;
+    if (!selectedMarkValue || !selectedMark) return
 
     const updatedMark: CurrentUserMark = getUpdatedMark(
       selectedMark,

src/components/PDFView/index.tsx

@@ -1,4 +1,4 @@
-import { Divider } from '@mui/material'
+import { Box, Divider } from '@mui/material'
 import PdfItem from './PdfItem.tsx'
 import { CurrentUserMark } from '../../types/mark.ts'
 import { CurrentUserFile } from '../../types/file.ts'

src/components/Select/index.tsx

@@ -1,113 +0,0 @@
-import {
-  FormControl,
-  MenuItem,
-  Select as SelectMui,
-  SelectChangeEvent,
-  styled,
-  SelectProps as SelectMuiProps,
-  MenuItemProps
-} from '@mui/material'
-
-const SelectCustomized = styled(SelectMui)<SelectMuiProps>(() => ({
-  backgroundColor: 'var(--primary-main)',
-  fontSize: '14px',
-  fontWeight: '500',
-  color: 'white',
-  ':hover': {
-    backgroundColor: 'var(--primary-light)'
-  },
-  '& .MuiSelect-select:focus': {
-    backgroundColor: 'var(--primary-light)'
-  },
-  '& .MuiSvgIcon-root': {
-    color: 'white'
-  },
-  '& .MuiOutlinedInput-notchedOutline': {
-    border: 'none'
-  }
-}))
-
-const MenuItemCustomized = styled(MenuItem)<MenuItemProps>(() => ({
-  marginInline: '5px',
-  borderRadius: '4px',
-  '&:hover': {
-    background: 'var(--primary-light)',
-    color: 'white'
-  },
-  '&.Mui-selected': {
-    background: 'var(--primary-dark)',
-    color: 'white'
-  },
-  '&.Mui-selected:hover': {
-    background: 'var(--primary-light)'
-  },
-  '&.Mui-selected.Mui-focusVisible': {
-    background: 'var(--primary-light)',
-    color: 'white'
-  },
-  '&.Mui-focusVisible': {
-    background: 'var(--primary-light)',
-    color: 'white'
-  },
-  '& + *': {
-    marginTop: '5px'
-  }
-}))
-
-interface SelectItemProps<T extends string> {
-  value: T
-  label: string
-}
-
-interface SelectProps<T extends string> {
-  value: T
-  setValue: React.Dispatch<React.SetStateAction<T>>
-  options: SelectItemProps<T>[]
-  name?: string
-  id?: string
-}
-
-export function Select<T extends string>({
-  value,
-  setValue,
-  options,
-  name,
-  id
-}: SelectProps<T>) {
-  const handleChange = (event: SelectChangeEvent<unknown>) => {
-    setValue(event.target.value as T)
-  }
-
-  return (
-    <FormControl>
-      <SelectCustomized
-        id={id}
-        name={name}
-        size="small"
-        variant="outlined"
-        value={value}
-        onChange={handleChange}
-        MenuProps={{
-          MenuListProps: {
-            sx: {
-              paddingBlock: '5px'
-            }
-          },
-          PaperProps: {
-            sx: {
-              boxShadow: '0 0 4px 0 rgb(0, 0, 0, 0.1)'
-            }
-          }
-        }}
-      >
-        {options.map((o) => {
-          return (
-            <MenuItemCustomized key={o.label} value={o.value as string}>
-              {o.label}
-            </MenuItemCustomized>
-          )
-        })}
-      </SelectCustomized>
-    </FormControl>
-  )
-}

src/components/Spinner/index.tsx

@@ -1,6 +0,0 @@
-import { PropsWithChildren } from 'react'
-import styles from './style.module.scss'
-
-export const Spinner = ({ children }: PropsWithChildren) => (
-  <div className={styles.spin}>{children}</div>
-)

src/components/Spinner/style.module.scss

@@ -1,12 +0,0 @@
-.spin {
-  animation: spin 5s linear infinite;
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

src/components/TooltipChild.tsx

@@ -1,16 +0,0 @@
-import { forwardRef, PropsWithChildren } from 'react'
-
-/**
- * Helper wrapper for custom child components when using `@mui/material/tooltips`.
- * Mui Tooltip works out-the-box with other `@mui` components but when using custom they require ref.
- * @source https://mui.com/material-ui/react-tooltip/#custom-child-element
- */
-export const TooltipChild = forwardRef<HTMLSpanElement, PropsWithChildren>(
-  ({ children, ...rest }, ref) => {
-    return (
-      <span ref={ref} {...rest}>
-        {children}
-      </span>
-    )
-  }
-)

src/components/UserAvatar/index.tsx

@@ -1,11 +1,12 @@
+import { useNavigate } from 'react-router-dom'
 import { getProfileRoute } from '../../routes'
 
 import styles from './styles.module.scss'
+import React from 'react'
 import { AvatarIconButton } from '../UserAvatarIconButton'
-import { Link } from 'react-router-dom'
 
 interface UserAvatarProps {
-  name?: string
+  name: string
   pubkey: string
   image?: string
 }
@@ -15,22 +16,27 @@ interface UserAvatarProps {
  *  Clicking will navigate to the user's profile.
  */
 export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
+  const navigate = useNavigate()
+
+  const handleClick = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
+    e.stopPropagation()
+    navigate(getProfileRoute(pubkey))
+  }
+
   return (
-    <Link
+    <div className={styles.container}>
-      to={getProfileRoute(pubkey)}
-      className={styles.container}
-      tabIndex={-1}
-    >
       <AvatarIconButton
         src={image}
         hexKey={pubkey}
-        aria-label={`account of user ${name || pubkey}`}
+        aria-label={`account of user ${name}`}
         color="inherit"
-        sx={{
+        onClick={handleClick}
-          padding: 0
-        }}
       />
-      {name ? <label className={styles.username}>{name}</label> : null}
+      {name ? (
-    </Link>
+        <label onClick={handleClick} className={styles.username}>
+          {name}
+        </label>
+      ) : null}
+    </div>
   )
 }

src/components/UserAvatar/styles.module.scss

@@ -2,7 +2,7 @@
   display: flex;
   align-items: center;
   gap: 10px;
-  // flex-grow: 1;
+  flex-grow: 1;
 }
 
 .username {

src/components/UserAvatarGroup/index.tsx

@@ -1,38 +0,0 @@
-import { Children, PropsWithChildren } from 'react'
-
-import styles from './style.module.scss'
-
-interface UserAvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-  max: number
-  renderSurplus?: ((surplus: number) => React.ReactNode) | undefined
-}
-
-const defaultSurplus = (surplus: number) => {
-  return <span className={styles.icon}>+{surplus}</span>
-}
-
-/**
- * Renders children with the `max` limit (including surplus if available).
- * The children are wrapped with a `div` (accepts standard `HTMLDivElement` attributes)
- * @param max The maximum number of children rendered in a div.
- * @param renderSurplus Custom render for surplus children (accepts surplus number).
- */
-export const UserAvatarGroup = ({
-  max,
-  renderSurplus = defaultSurplus,
-  children,
-  ...rest
-}: PropsWithChildren<UserAvatarGroupProps>) => {
-  const total = Children.count(children)
-  const surplus = total - max + 1
-
-  const childrenArray = Children.toArray(children)
-  return (
-    <div className={styles.container} {...rest}>
-      {surplus > 1
-        ? childrenArray.slice(0, surplus * -1).map((c) => c)
-        : children}
-      {surplus > 1 && renderSurplus(surplus)}
-    </div>
-  )
-}

src/components/UserAvatarGroup/style.module.scss

@@ -1,39 +0,0 @@
-@import '../../styles/colors.scss';
-
-.container {
-  padding: 0 0 0 10px;
-
-  > * {
-    transition: margin ease 0.2s;
-    margin: 0 0 0 -10px;
-    position: relative;
-    z-index: 1;
-    &:first-child {
-      margin-left: -10px !important;
-    }
-  }
-
-  > *:hover,
-  > *:focus-within {
-    margin: 0 15px 0 5px;
-    z-index: 2;
-  }
-}
-
-.icon {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  border-width: 2px;
-  overflow: hidden;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  background: white;
-  color: rgba(0, 0, 0, 0.5);
-  font-weight: bold;
-  font-size: 14px;
-  border: solid 2px $primary-main;
-}

src/components/UserAvatarIconButton/style.module.scss

@@ -2,6 +2,6 @@
   width: 40px;
   height: 40px;
   border-radius: 50%;
-  border-width: 2px;
+  border-width: 3px;
   overflow: hidden;
 }

src/components/UsersDetails.tsx/index.tsx

@@ -1,217 +0,0 @@
-import { Divider, Tooltip } from '@mui/material'
-import { useSigitProfiles } from '../../hooks/useSigitProfiles'
-import {
-  extractFileExtensions,
-  formatTimestamp,
-  fromUnixTimestamp,
-  hexToNpub,
-  npubToHex,
-  shorten,
-  SignStatus
-} from '../../utils'
-import { UserAvatar } from '../UserAvatar'
-import { useSigitMeta } from '../../hooks/useSigitMeta'
-import { UserAvatarGroup } from '../UserAvatarGroup'
-
-import styles from './style.module.scss'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import {
-  faCalendar,
-  faCalendarCheck,
-  faCalendarPlus,
-  faEye,
-  faFile,
-  faFileCircleExclamation
-} from '@fortawesome/free-solid-svg-icons'
-import { getExtensionIconLabel } from '../getExtensionIconLabel'
-import { useSelector } from 'react-redux'
-import { State } from '../../store/rootReducer'
-import { TooltipChild } from '../TooltipChild'
-import { DisplaySigner } from '../DisplaySigner'
-import { Meta } from '../../types'
-
-interface UsersDetailsProps {
-  meta: Meta
-}
-
-export const UsersDetails = ({ meta }: UsersDetailsProps) => {
-  const {
-    submittedBy,
-    signers,
-    viewers,
-    fileHashes,
-    signersStatus,
-    createdAt,
-    completedAt,
-    parsedSignatureEvents,
-    signedStatus
-  } = useSigitMeta(meta)
-  const { usersPubkey } = useSelector((state: State) => state.auth)
-  const profiles = useSigitProfiles([
-    ...(submittedBy ? [submittedBy] : []),
-    ...signers,
-    ...viewers
-  ])
-  const userCanSign =
-    typeof usersPubkey !== 'undefined' &&
-    signers.includes(hexToNpub(usersPubkey))
-
-  const ext = extractFileExtensions(Object.keys(fileHashes))
-
-  return submittedBy ? (
-    <div className={styles.container}>
-      <div className={styles.section}>
-        <p>Signers</p>
-        <div className={styles.users}>
-          {submittedBy &&
-            (function () {
-              const profile = profiles[submittedBy]
-              return (
-                <Tooltip
-                  title={
-                    profile?.display_name ||
-                    profile?.name ||
-                    shorten(hexToNpub(submittedBy))
-                  }
-                  placement="top"
-                  arrow
-                  disableInteractive
-                >
-                  <TooltipChild>
-                    <UserAvatar pubkey={submittedBy} image={profile?.picture} />
-                  </TooltipChild>
-                </Tooltip>
-              )
-            })()}
-
-          {submittedBy && signers.length ? (
-            <Divider orientation="vertical" flexItem />
-          ) : null}
-
-          <UserAvatarGroup max={20}>
-            {signers.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={signersStatus[signer]}
-                      profile={profile}
-                      pubkey={pubkey}
-                    />
-                  </TooltipChild>
-                </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>
-      </div>
-      <div className={styles.section}>
-        <p>Details</p>
-
-        <Tooltip
-          title={'Publication date'}
-          placement="top"
-          arrow
-          disableInteractive
-        >
-          <span className={styles.detailsItem}>
-            <FontAwesomeIcon icon={faCalendarPlus} />{' '}
-            {createdAt ? formatTimestamp(createdAt) : <>&mdash;</>}
-          </span>
-        </Tooltip>
-
-        <Tooltip
-          title={'Completion date'}
-          placement="top"
-          arrow
-          disableInteractive
-        >
-          <span className={styles.detailsItem}>
-            <FontAwesomeIcon icon={faCalendarCheck} />{' '}
-            {completedAt ? formatTimestamp(completedAt) : <>&mdash;</>}
-          </span>
-        </Tooltip>
-
-        {/* User signed date */}
-        {userCanSign ? (
-          <Tooltip
-            title={'Your signature date'}
-            placement="top"
-            arrow
-            disableInteractive
-          >
-            <span className={styles.detailsItem}>
-              <FontAwesomeIcon icon={faCalendar} />{' '}
-              {hexToNpub(usersPubkey) in parsedSignatureEvents ? (
-                parsedSignatureEvents[hexToNpub(usersPubkey)].created_at ? (
-                  formatTimestamp(
-                    fromUnixTimestamp(
-                      parsedSignatureEvents[hexToNpub(usersPubkey)].created_at
-                    )
-                  )
-                ) : (
-                  <>&mdash;</>
-                )
-              ) : (
-                <>&mdash;</>
-              )}
-            </span>
-          </Tooltip>
-        ) : null}
-        <span className={styles.detailsItem}>
-          <FontAwesomeIcon icon={faEye} /> {signedStatus}
-        </span>
-        {ext.length > 0 ? (
-          <span className={styles.detailsItem}>
-            {ext.length > 1 ? (
-              <>
-                <FontAwesomeIcon icon={faFile} /> Multiple File Types
-              </>
-            ) : (
-              getExtensionIconLabel(ext[0])
-            )}
-          </span>
-        ) : (
-          <>
-            <FontAwesomeIcon icon={faFileCircleExclamation} /> &mdash;
-          </>
-        )}
-      </div>
-    </div>
-  ) : undefined
-}

src/components/UsersDetails.tsx/style.module.scss

@@ -1,46 +0,0 @@
-@import '../../styles/colors.scss';
-
-.container {
-  border-radius: 4px;
-  background: $overlay-background-color;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-  grid-gap: 25px;
-
-  font-size: 14px;
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  grid-gap: 10px;
-}
-
-.users {
-  display: flex;
-  grid-gap: 10px;
-}
-
-.detailsItem {
-  transition: ease 0.2s;
-  color: rgba(0, 0, 0, 0.5);
-  font-size: 14px;
-  align-items: center;
-  border-radius: 4px;
-  padding: 5px;
-
-  display: flex;
-  align-items: center;
-  justify-content: start;
-
-  > :first-child {
-    padding: 5px;
-    margin-right: 10px;
-  }
-
-  &:hover {
-    background: $primary-main;
-    color: white;
-  }
-}

src/components/getExtensionIconLabel.tsx

@@ -1,78 +0,0 @@
-import {
-  faFilePdf,
-  faFileExcel,
-  faFileWord,
-  faFilePowerpoint,
-  faFileZipper,
-  faFileCsv,
-  faFileLines,
-  faFileImage,
-  faFile,
-  IconDefinition
-} from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-
-export const getExtensionIconLabel = (extension: string) => {
-  let icon: IconDefinition
-  switch (extension.toLowerCase()) {
-    case 'pdf':
-      icon = faFilePdf
-      break
-    case 'json':
-      icon = faFilePdf
-      break
-
-    case 'xlsx':
-    case 'xls':
-    case 'xlsb':
-    case 'xlsm':
-      icon = faFileExcel
-      break
-
-    case 'doc':
-    case 'docx':
-      icon = faFileWord
-      break
-
-    case 'ppt':
-    case 'pptx':
-      icon = faFilePowerpoint
-      break
-
-    case 'zip':
-    case '7z':
-    case 'rar':
-    case 'tar':
-    case 'gz':
-      icon = faFileZipper
-      break
-
-    case 'csv':
-      icon = faFileCsv
-      break
-
-    case 'txt':
-      icon = faFileLines
-      break
-
-    case 'png':
-    case 'jpg':
-    case 'jpeg':
-    case 'gif':
-    case 'svg':
-    case 'bmp':
-    case 'ico':
-      icon = faFileImage
-      break
-
-    default:
-      icon = faFile
-      return
-  }
-
-  return (
-    <>
-      <FontAwesomeIcon icon={icon} /> {extension.toUpperCase()}
-    </>
-  )
-}

src/controllers/AuthController.ts

@@ -12,8 +12,7 @@ import {
   getAuthToken,
   getVisitedLink,
   saveAuthToken,
-  compareObjects,
+  compareObjects
-  unixNow
 } from '../utils'
 import { appPrivateRoutes } from '../routes'
 import { SignedEvent } from '../types'
@@ -55,7 +54,7 @@ export class AuthController {
       })
 
     // Nostr uses unix timestamps
-    const timestamp = unixNow()
+    const timestamp = Math.floor(Date.now() / 1000)
     const { hostname } = window.location
 
     const authEvent: EventTemplate = {

src/controllers/MetadataController.ts

@@ -12,17 +12,10 @@ import {
 import { NostrJoiningBlock, ProfileMetadata, RelaySet } from '../types'
 import { NostrController } from '.'
 import { toast } from 'react-toastify'
-import { queryNip05, unixNow } from '../utils'
+import { queryNip05 } from '../utils'
 import NDK, { NDKEvent, NDKSubscription } from '@nostr-dev-kit/ndk'
 import { EventEmitter } from 'tseep'
 import { localCache } from '../services'
-import {
-  findRelayListAndUpdateCache,
-  findRelayListInCache,
-  getDefaultRelaySet,
-  getUserRelaySet,
-  isOlderThanOneWeek
-} from '../utils/relays.ts'
 
 export class MetadataController extends EventEmitter {
   private nostrController: NostrController
@@ -134,8 +127,10 @@ export class MetadataController extends EventEmitter {
 
     // If cached metadata is found, check its validity
     if (cachedMetadataEvent) {
+      const oneWeekInMS = 7 * 24 * 60 * 60 * 1000 // Number of milliseconds in one week
+
       // Check if the cached metadata is older than one week
-      if (isOlderThanOneWeek(cachedMetadataEvent.cachedAt)) {
+      if (Date.now() - cachedMetadataEvent.cachedAt > oneWeekInMS) {
         // If older than one week, find the metadata from relays in background
 
         this.checkForMoreRecentMetadata(hexKey, cachedMetadataEvent.event)
@@ -149,32 +144,100 @@ export class MetadataController extends EventEmitter {
     return this.checkForMoreRecentMetadata(hexKey, null)
   }
 
-  /**
+  public findRelayListMetadata = async (hexKey: string) => {
-   * Based on the hexKey of the current user, this method attempts to retrieve a relay set.
+    let relayEvent: Event | null = null
-   * @func findRelayListInCache first checks if there is already an up-to-date
-   * relay list available in cache; if not -
-   * @func findRelayListAndUpdateCache checks if the relevant relay event is available from
-   * the purple pages relay;
-   * @func findRelayListAndUpdateCache will run again if the previous two calls return null and
-   * check if the relevant relay event can be obtained from 'most popular relays'
-   * If relay event is found, it will be saved in cache for future use
-   * @param hexKey of the current user
-   * @return RelaySet which will contain either relays extracted from the user Relay Event
-   * or a fallback RelaySet with Sigit's Relay
-   */
-  public findRelayListMetadata = async (hexKey: string): Promise<RelaySet> => {
-    const relayEvent =
-      (await findRelayListInCache(hexKey)) ||
-      (await findRelayListAndUpdateCache(
-        [this.specialMetadataRelay],
-        hexKey
-      )) ||
-      (await findRelayListAndUpdateCache(
-        await this.nostrController.getMostPopularRelays(),
-        hexKey
-      ))
 
-    return relayEvent ? getUserRelaySet(relayEvent.tags) : getDefaultRelaySet()
+    // Attempt to retrieve the metadata event from the local cache
+    const cachedRelayListMetadataEvent =
+      await localCache.getUserRelayListMetadata(hexKey)
+
+    if (cachedRelayListMetadataEvent) {
+      const oneWeekInMS = 7 * 24 * 60 * 60 * 1000 // Number of milliseconds in one week
+
+      // Check if the cached event is not older than one week
+      if (Date.now() - cachedRelayListMetadataEvent.cachedAt < oneWeekInMS) {
+        relayEvent = cachedRelayListMetadataEvent.event
+      }
+    }
+
+    // define filter for relay list
+    const eventFilter: Filter = {
+      kinds: [kinds.RelayList],
+      authors: [hexKey]
+    }
+
+    const pool = new SimplePool()
+
+    // Try to get the relayList event from a special relay (wss://purplepag.es)
+    if (!relayEvent) {
+      relayEvent = await pool
+        .get([this.specialMetadataRelay], eventFilter)
+        .then((event) => {
+          if (event) {
+            // update the event in local cache
+            localCache.addUserRelayListMetadata(event)
+          }
+          return event
+        })
+        .catch((err) => {
+          console.error(err)
+          return null
+        })
+    }
+
+    if (!relayEvent) {
+      // If no valid relayList event is found from the special relay, get the most popular relays
+      const mostPopularRelays =
+        await this.nostrController.getMostPopularRelays()
+
+      // Query the most popular relays for relayList event
+      relayEvent = await pool
+        .get(mostPopularRelays, eventFilter)
+        .then((event) => {
+          if (event) {
+            // update the event in local cache
+            localCache.addUserRelayListMetadata(event)
+          }
+          return event
+        })
+        .catch((err) => {
+          console.error(err)
+          return null
+        })
+    }
+
+    if (relayEvent) {
+      const relaySet: RelaySet = {
+        read: [],
+        write: []
+      }
+
+      // a list of r tags with relay URIs and a read or write marker.
+      const relayTags = relayEvent.tags.filter((tag) => tag[0] === 'r')
+
+      // Relays marked as read / write are called READ / WRITE relays, respectively
+      relayTags.forEach((tag) => {
+        if (tag.length >= 3) {
+          const marker = tag[2]
+
+          if (marker === 'read') {
+            relaySet.read.push(tag[1])
+          } else if (marker === 'write') {
+            relaySet.write.push(tag[1])
+          }
+        }
+
+        // If the marker is omitted, the relay is used for both purposes
+        if (tag.length === 2) {
+          relaySet.read.push(tag[1])
+          relaySet.write.push(tag[1])
+        }
+      })
+
+      return relaySet
+    }
+
+    throw new Error('No relay list metadata found.')
   }
 
   public extractProfileMetadataContent = (event: Event) => {
@@ -194,7 +257,7 @@ export class MetadataController extends EventEmitter {
     let signedMetadataEvent = event
 
     if (event.sig.length < 1) {
-      const timestamp = unixNow()
+      const timestamp = Math.floor(Date.now() / 1000)
 
       // Metadata event to publish to the wss://purplepag.es relay
       const newMetadataEvent: Event = {
@@ -265,7 +328,7 @@ export class MetadataController extends EventEmitter {
       // initialize job request
       const jobEventTemplate: EventTemplate = {
         content: '',
-        created_at: unixNow(),
+        created_at: Math.round(Date.now() / 1000),
         kind: 68001,
         tags: [
           ['i', `${created_at * 1000}`],

src/controllers/NostrController.ts

@@ -42,10 +42,8 @@ import {
 import {
   compareObjects,
   getNsecBunkerDelegatedKey,
-  unixNow,
   verifySignedEvent
 } from '../utils'
-import { getDefaultRelayMap } from '../utils/relays.ts'
 
 export class NostrController extends EventEmitter {
   private static instance: NostrController
@@ -245,7 +243,7 @@ export class NostrController extends EventEmitter {
 
     if (!firstSuccessfulPublish) {
       // If no publish was successful, collect the reasons for failures
-      const failedPublishes: unknown[] = []
+      const failedPublishes: any[] = []
       const fallbackRejectionReason =
         'Attempt to publish an event has been rejected with unknown reason.'
 
@@ -505,13 +503,11 @@ export class NostrController extends EventEmitter {
     } else if (loginMethod === LoginMethods.extension) {
       const nostr = this.getNostrObject()
 
-      return (await nostr
+      return (await nostr.signEvent(event as NostrEvent).catch((err: any) => {
-        .signEvent(event as NostrEvent)
+        console.log('Error while signing event: ', err)
-        .catch((err: unknown) => {
-          console.log('Error while signing event: ', err)
 
-          throw err
+        throw err
-        })) as Event
+      })) as Event
     } else {
       return Promise.reject(
         `We could not sign the event, none of the signing methods are available`
@@ -628,12 +624,8 @@ export class NostrController extends EventEmitter {
    */
   capturePublicKey = async (): Promise<string> => {
     const nostr = this.getNostrObject()
-    const pubKey = await nostr.getPublicKey().catch((err: unknown) => {
+    const pubKey = await nostr.getPublicKey().catch((err: any) => {
-      if (err instanceof Error) {
+      return Promise.reject(err.message)
-        return Promise.reject(err.message)
-      } else {
-        return Promise.reject(JSON.stringify(err))
-      }
     })
 
     if (!pubKey) {
@@ -658,7 +650,7 @@ export class NostrController extends EventEmitter {
    */
   getRelayMap = async (
     npub: string
-  ): Promise<{ map: RelayMap; mapUpdated?: number }> => {
+  ): Promise<{ map: RelayMap; mapUpdated: number }> => {
     const mostPopularRelays = await this.getMostPopularRelays()
 
     const pool = new SimplePool()
@@ -699,7 +691,7 @@ export class NostrController extends EventEmitter {
 
       return Promise.resolve({ map: relaysMap, mapUpdated: event.created_at })
     } else {
-      return Promise.resolve({ map: getDefaultRelayMap() })
+      return Promise.reject('User relays were not found.')
     }
   }
 
@@ -715,7 +707,7 @@ export class NostrController extends EventEmitter {
     npub: string,
     extraRelaysToPublish?: string[]
   ): Promise<string> => {
-    const timestamp = unixNow()
+    const timestamp = Math.floor(Date.now() / 1000)
     const relayURIs = Object.keys(relayMap)
 
     // More info about this kind of event available https://github.com/nostr-protocol/nips/blob/master/65.md
@@ -817,7 +809,7 @@ export class NostrController extends EventEmitter {
     // initialize job request
     const jobEventTemplate: EventTemplate = {
       content: '',
-      created_at: unixNow(),
+      created_at: Math.round(Date.now() / 1000),
       kind: 68001,
       tags: [
         ['i', `${JSON.stringify(relayURIs)}`],

src/hooks/useSigitMeta.tsx

@@ -1,269 +0,0 @@
-import { useEffect, useState } from 'react'
-import { CreateSignatureEventContent, Meta, SignedEventContent } from '../types'
-import { Mark } from '../types/mark'
-import {
-  fromUnixTimestamp,
-  hexToNpub,
-  parseNostrEvent,
-  parseCreateSignatureEventContent,
-  SigitMetaParseError,
-  SigitStatus,
-  SignStatus
-} from '../utils'
-import { toast } from 'react-toastify'
-import { verifyEvent } from 'nostr-tools'
-import { Event } from 'nostr-tools'
-import store from '../store/store'
-import { AuthState } from '../store/auth/types'
-import { NostrController } from '../controllers'
-
-/**
- * Flattened interface that combines properties `Meta`, `CreateSignatureEventContent`,
- * and `Event` (event's fields are made optional and pubkey and created_at replaced with our versions)
- */
-export interface FlatMeta
-  extends Meta,
-    CreateSignatureEventContent,
-    Partial<Omit<Event, 'pubkey' | 'created_at'>> {
-  // Remove pubkey and use submittedBy as `npub1${string}`
-  submittedBy?: `npub1${string}`
-
-  // Remove created_at and replace with createdAt
-  createdAt?: number
-
-  // Validated create signature event
-  isValid: boolean
-
-  // Decryption
-  encryptionKey: string | null
-
-  // Parsed Document Signatures
-  parsedSignatureEvents: { [signer: `npub1${string}`]: Event }
-
-  // Calculated completion time
-  completedAt?: number
-
-  // Calculated status fields
-  signedStatus: SigitStatus
-  signersStatus: {
-    [signer: `npub1${string}`]: SignStatus
-  }
-}
-
-/**
- * Custom use hook for parsing the Sigit Meta
- * @param meta Sigit Meta
- * @returns flattened Meta object with calculated signed status
- */
-export const useSigitMeta = (meta: Meta): FlatMeta => {
-  const [isValid, setIsValid] = useState(false)
-  const [kind, setKind] = useState<number>()
-  const [tags, setTags] = useState<string[][]>()
-  const [createdAt, setCreatedAt] = useState<number>()
-  const [submittedBy, setSubmittedBy] = useState<`npub1${string}`>() // submittedBy, pubkey from nostr event
-  const [id, setId] = useState<string>()
-  const [sig, setSig] = useState<string>()
-
-  const [signers, setSigners] = useState<`npub1${string}`[]>([])
-  const [viewers, setViewers] = useState<`npub1${string}`[]>([])
-  const [fileHashes, setFileHashes] = useState<{
-    [user: `npub1${string}`]: string
-  }>({})
-  const [markConfig, setMarkConfig] = useState<Mark[]>([])
-  const [title, setTitle] = useState<string>('')
-  const [zipUrl, setZipUrl] = useState<string>('')
-
-  const [parsedSignatureEvents, setParsedSignatureEvents] = useState<{
-    [signer: `npub1${string}`]: Event
-  }>({})
-
-  const [completedAt, setCompletedAt] = useState<number>()
-
-  const [signedStatus, setSignedStatus] = useState<SigitStatus>(
-    SigitStatus.Partial
-  )
-  const [signersStatus, setSignersStatus] = useState<{
-    [signer: `npub1${string}`]: SignStatus
-  }>({})
-
-  const [encryptionKey, setEncryptionKey] = useState<string | null>(null)
-
-  useEffect(() => {
-    if (!meta) return
-    ;(async function () {
-      try {
-        const createSignatureEvent = await parseNostrEvent(meta.createSignature)
-
-        const { kind, tags, created_at, pubkey, id, sig, content } =
-          createSignatureEvent
-
-        setIsValid(verifyEvent(createSignatureEvent))
-        setKind(kind)
-        setTags(tags)
-        // created_at in nostr events are stored in seconds
-        setCreatedAt(fromUnixTimestamp(created_at))
-        setSubmittedBy(pubkey as `npub1${string}`)
-        setId(id)
-        setSig(sig)
-
-        const { title, signers, viewers, fileHashes, markConfig, zipUrl } =
-          await parseCreateSignatureEventContent(content)
-
-        setTitle(title)
-        setSigners(signers)
-        setViewers(viewers)
-        setFileHashes(fileHashes)
-        setMarkConfig(markConfig)
-        setZipUrl(zipUrl)
-
-        if (meta.keys) {
-          const { sender, keys } = meta.keys
-          // Retrieve the user's public key from the state
-          const usersPubkey = (store.getState().auth as AuthState).usersPubkey!
-          const usersNpub = hexToNpub(usersPubkey)
-
-          // Check if the user's public key is in the keys object
-          if (usersNpub in keys) {
-            // Instantiate the NostrController to decrypt the encryption key
-            const nostrController = NostrController.getInstance()
-            const decrypted = await nostrController
-              .nip04Decrypt(sender, keys[usersNpub])
-              .catch((err) => {
-                console.log(
-                  'An error occurred in decrypting encryption key',
-                  err
-                )
-                return null
-              })
-
-            setEncryptionKey(decrypted)
-          }
-        }
-
-        // Temp. map to hold events and signers
-        const parsedSignatureEventsMap = new Map<`npub1${string}`, Event>()
-        const signerStatusMap = new Map<`npub1${string}`, SignStatus>()
-
-        const getPrevSignerSig = (npub: `npub1${string}`) => {
-          if (signers[0] === npub) {
-            return sig
-          }
-
-          // find the index of signer
-          const currentSignerIndex = signers.findIndex(
-            (signer) => signer === npub
-          )
-          // return if could not found user in signer's list
-          if (currentSignerIndex === -1) return
-          // find prev signer
-          const prevSigner = signers[currentSignerIndex - 1]
-
-          // get the signature of prev signer
-          return parsedSignatureEventsMap.get(prevSigner)?.sig
-        }
-
-        for (const npub in meta.docSignatures) {
-          try {
-            // Parse each signature event
-            const event = await parseNostrEvent(
-              meta.docSignatures[npub as `npub1${string}`]
-            )
-
-            // Save events to a map, to save all at once outside loop
-            // We need the object to find completedAt
-            // Avoided using parsedSignatureEvents due to useEffect deps
-            parsedSignatureEventsMap.set(npub as `npub1${string}`, event)
-          } catch (error) {
-            signerStatusMap.set(npub as `npub1${string}`, SignStatus.Invalid)
-          }
-        }
-
-        parsedSignatureEventsMap.forEach((event, npub) => {
-          const isValidSignature = verifyEvent(event)
-          if (isValidSignature) {
-            // get the signature of prev signer from the content of current signers signedEvent
-            const prevSignersSig = getPrevSignerSig(npub)
-
-            try {
-              const obj: SignedEventContent = JSON.parse(event.content)
-              if (
-                obj.prevSig &&
-                prevSignersSig &&
-                obj.prevSig === prevSignersSig
-              ) {
-                signerStatusMap.set(npub as `npub1${string}`, SignStatus.Signed)
-              }
-            } catch (error) {
-              signerStatusMap.set(npub as `npub1${string}`, SignStatus.Invalid)
-            }
-          }
-        })
-
-        signers
-          .filter((s) => !parsedSignatureEventsMap.has(s))
-          .forEach((s) => signerStatusMap.set(s, SignStatus.Pending))
-
-        // Get the first signer that hasn't signed
-        const nextSigner = signers.find((s) => !parsedSignatureEventsMap.has(s))
-        if (nextSigner) {
-          signerStatusMap.set(nextSigner, SignStatus.Awaiting)
-        }
-
-        setSignersStatus(Object.fromEntries(signerStatusMap))
-        setParsedSignatureEvents(Object.fromEntries(parsedSignatureEventsMap))
-
-        const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
-        const isCompletelySigned = signers.every((signer) =>
-          signedBy.includes(signer)
-        )
-        setSignedStatus(
-          isCompletelySigned ? SigitStatus.Complete : SigitStatus.Partial
-        )
-
-        // Check if all signers signed
-        if (isCompletelySigned) {
-          setCompletedAt(
-            fromUnixTimestamp(
-              signedBy.reduce((p, c) => {
-                return Math.max(
-                  p,
-                  parsedSignatureEventsMap.get(c)?.created_at || 0
-                )
-              }, 0)
-            )
-          )
-        }
-      } catch (error) {
-        if (error instanceof SigitMetaParseError) {
-          toast.error(error.message)
-        }
-        console.error(error)
-      }
-    })()
-  }, [meta])
-
-  return {
-    modifiedAt: meta?.modifiedAt,
-    createSignature: meta?.createSignature,
-    docSignatures: meta?.docSignatures,
-    keys: meta?.keys,
-    isValid,
-    kind,
-    tags,
-    createdAt,
-    submittedBy,
-    id,
-    sig,
-    signers,
-    viewers,
-    fileHashes,
-    markConfig,
-    title,
-    zipUrl,
-    parsedSignatureEvents,
-    completedAt,
-    signedStatus,
-    signersStatus,
-    encryptionKey
-  }
-}

src/hooks/useSigitProfiles.tsx

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

src/index.css

@@ -101,15 +101,6 @@ button:disabled {
   color: inherit !important;
 }
 
-.line-clamp-2 {
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-}
-
 .profile-image {
   width: 40px;
   height: 40px;
@@ -120,9 +111,7 @@ button:disabled {
 /* Fonts */
 @font-face {
   font-family: 'Roboto';
-  src:
+  src: local('Roboto Medium'), local('Roboto-Medium'),
-    local('Roboto Medium'),
-    local('Roboto-Medium'),
     url('assets/fonts/roboto-medium.woff2') format('woff2'),
     url('assets/fonts/roboto-medium.woff') format('woff');
   font-weight: 500;
@@ -132,9 +121,7 @@ button:disabled {
 
 @font-face {
   font-family: 'Roboto';
-  src:
+  src: local('Roboto Light'), local('Roboto-Light'),
-    local('Roboto Light'),
-    local('Roboto-Light'),
     url('assets/fonts/roboto-light.woff2') format('woff2'),
     url('assets/fonts/roboto-light.woff') format('woff');
   font-weight: 300;
@@ -144,9 +131,7 @@ button:disabled {
 
 @font-face {
   font-family: 'Roboto';
-  src:
+  src: local('Roboto Bold'), local('Roboto-Bold'),
-    local('Roboto Bold'),
-    local('Roboto-Bold'),
     url('assets/fonts/roboto-bold.woff2') format('woff2'),
     url('assets/fonts/roboto-bold.woff') format('woff');
   font-weight: bold;
@@ -156,9 +141,7 @@ button:disabled {
 
 @font-face {
   font-family: 'Roboto';
-  src:
+  src: local('Roboto'), local('Roboto-Regular'),
-    local('Roboto'),
-    local('Roboto-Regular'),
     url('assets/fonts/roboto-regular.woff2') format('woff2'),
     url('assets/fonts/roboto-regular.woff') format('woff');
   font-weight: normal;

src/layouts/Main.tsx

@@ -136,7 +136,7 @@ export const MainLayout = () => {
       }
 
       setIsLoading(true)
-      setLoadingSpinnerDesc(`Loading SIGit history...`)
+      setLoadingSpinnerDesc(`Loading SIGit History`)
       getUsersAppData()
         .then((appData) => {
           if (appData) {
@@ -145,7 +145,7 @@ export const MainLayout = () => {
         })
         .finally(() => setIsLoading(false))
     }
-  }, [authState, dispatch])
+  }, [authState])
 
   if (isLoading) return <LoadingSpinner desc={loadingSpinnerDesc} />
 

src/layouts/modal/style.module.scss

@@ -5,7 +5,7 @@ $default-modal-padding: 15px 25px;
 .modal {
   position: absolute;
   top: 0;
-  left: calc(50% - 10px);
+  left: 50%;
   transform: translate(-50%, 0);
 
   background-color: $overlay-background-color;
@@ -16,8 +16,6 @@ $default-modal-padding: 15px 25px;
   flex-direction: column;
 
   border-radius: 4px;
-
-  margin: 25px 10px;
 }
 
 .header {

src/pages/create/index.tsx

@@ -50,7 +50,7 @@ import {
   getHash,
   hexToNpub,
   isOnline,
-  unixNow,
+  now,
   npubToHex,
   queryNip05,
   sendNotification,
@@ -68,7 +68,7 @@ import { Mark } from '../../types/mark.ts'
 export const CreatePage = () => {
   const navigate = useNavigate()
   const location = useLocation()
-  const { uploadedFiles } = location.state || {}
+  const { uploadedFile } = location.state || {}
 
   const [isLoading, setIsLoading] = useState(false)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@@ -127,17 +127,17 @@ export const CreatePage = () => {
           })
       }
     })
-  }, [metadata, users])
+  }, [])
   // Set up event listener for authentication event
   nostrController.on('nsecbunker-auth', (url) => {
     setAuthUrl(url)
   })
 
   useEffect(() => {
-    if (uploadedFiles) {
+    if (uploadedFile) {
-      setSelectedFiles([...uploadedFiles])
+      setSelectedFiles([uploadedFile])
     }
-  }, [uploadedFiles])
+  }, [uploadedFile])
 
   useEffect(() => {
     if (usersPubkey) {
@@ -309,16 +309,14 @@ export const CreatePage = () => {
   }
 
   // Handle errors during file arrayBuffer conversion
-  const handleFileError = (file: File) => (err: unknown) => {
+  const handleFileError = (file: File) => (err: any) => {
     console.log(
       `Error while getting arrayBuffer of file ${file.name} :>> `,
       err
     )
-    if (err instanceof Error) {
+    toast.error(
-      toast.error(
+      err.message || `Error while getting arrayBuffer of file ${file.name}`
-        err.message || `Error while getting arrayBuffer of file ${file.name}`
+    )
-      )
-    }
     return null
   }
 
@@ -340,6 +338,8 @@ export const CreatePage = () => {
       fileHashes[file.name] = hash
     }
 
+    console.log('file hashes: ', fileHashes)
+
     return fileHashes
   }
 
@@ -371,12 +371,10 @@ export const CreatePage = () => {
   }
 
   // Handle errors during zip file generation
-  const handleZipError = (err: unknown) => {
+  const handleZipError = (err: any) => {
     console.log('Error in zip:>> ', err)
     setIsLoading(false)
-    if (err instanceof Error) {
+    toast.error(err.message || 'Error occurred in generating zip file')
-      toast.error(err.message || 'Error occurred in generating zip file')
-    }
     return null
   }
 
@@ -408,6 +406,7 @@ export const CreatePage = () => {
     encryptionKey: string
   ): Promise<File | null> => {
     // Get the current timestamp in seconds
+    const unixNow = now()
     const blob = new Blob([encryptedArrayBuffer])
     // Create a File object with the Blob data
     const file = new File([blob], `compressed.sigit`, {
@@ -442,12 +441,10 @@ export const CreatePage = () => {
   }
 
   // Handle errors during file upload
-  const handleUploadError = (err: unknown) => {
+  const handleUploadError = (err: any) => {
     console.log('Error in upload:>> ', err)
     setIsLoading(false)
-    if (err instanceof Error) {
+    toast.error(err.message || 'Error occurred in uploading file')
-      toast.error(err.message || 'Error occurred in uploading file')
-    }
     return null
   }
 
@@ -455,9 +452,10 @@ export const CreatePage = () => {
   const uploadFile = async (
     arrayBuffer: ArrayBuffer
   ): Promise<string | null> => {
+    const unixNow = now()
     const blob = new Blob([arrayBuffer])
     // Create a File object with the Blob data
-    const file = new File([blob], `compressed-${unixNow()}.sigit`, {
+    const file = new File([blob], `compressed-${unixNow}.sigit`, {
       type: 'application/sigit'
     })
 
@@ -479,13 +477,9 @@ export const CreatePage = () => {
       encryptionKey
     )
 
-    if (!finalZipFile) {
+    if (!finalZipFile) return
-      setIsLoading(false)
-      return
-    }
 
-    saveAs(finalZipFile, `request-${unixNow()}.sigit.zip`)
+    saveAs(finalZipFile, 'request.sigit.zip')
-    setIsLoading(false)
   }
 
   const generateFilesZip = async (): Promise<ArrayBuffer | null> => {
@@ -614,7 +608,7 @@ export const CreatePage = () => {
       const meta: Meta = {
         createSignature,
         keys,
-        modifiedAt: unixNow(),
+        modifiedAt: now(),
         docSignatures: {}
       }
 
@@ -653,7 +647,7 @@ export const CreatePage = () => {
 
       const meta: Meta = {
         createSignature,
-        modifiedAt: unixNow(),
+        modifiedAt: now(),
         docSignatures: {}
       }
 
@@ -668,10 +662,7 @@ export const CreatePage = () => {
       }
 
       const arrayBuffer = await generateZipFile(zip)
-      if (!arrayBuffer) {
+      if (!arrayBuffer) return
-        setIsLoading(false)
-        return
-      }
 
       setLoadingSpinnerDesc('Encrypting zip file')
       const encryptedArrayBuffer = await encryptZipFile(
@@ -979,7 +970,7 @@ const SignerRow = ({
     item: () => {
       return { id: user.pubkey, index }
     },
-    collect: (monitor) => ({
+    collect: (monitor: any) => ({
       isDragging: monitor.isDragging()
     })
   })

src/pages/home/index.tsx

@@ -1,267 +1,384 @@
-import { Button, TextField } from '@mui/material'
+import { CalendarMonth, Description, Upload } from '@mui/icons-material'
+import { Box, Button, Tooltip, Typography } from '@mui/material'
 import JSZip from 'jszip'
-import { useCallback, useEffect, useState } from 'react'
+import { Event, kinds, verifyEvent } from 'nostr-tools'
-import { useNavigate, useSearchParams } from 'react-router-dom'
+import { Dispatch, SetStateAction, useEffect, useRef, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
+import { UserAvatar } from '../../components/UserAvatar'
+import { MetadataController } from '../../controllers'
 import { useAppSelector } from '../../hooks'
 import { appPrivateRoutes, appPublicRoutes } from '../../routes'
-import { Meta } from '../../types'
+import { CreateSignatureEventContent, Meta, ProfileMetadata } from '../../types'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faSearch } from '@fortawesome/free-solid-svg-icons'
-import { Select } from '../../components/Select'
-import { DisplaySigit } from '../../components/DisplaySigit'
-import { useDropzone } from 'react-dropzone'
-import { Container } from '../../components/Container'
-import styles from './style.module.scss'
 import {
-  extractSigitCardDisplayInfo,
+  formatTimestamp,
-  SigitCardDisplayInfo,
+  hexToNpub,
-  SigitStatus
+  npubToHex,
+  parseJson,
+  shorten
 } from '../../utils'
-
+import styles from './style.module.scss'
-// Unsupported Filter options are commented
+import { Container } from '../../components/Container'
-const FILTERS = [
-  'Show all',
-  // 'Drafts',
-  'In-progress',
-  'Completed'
-  // 'Archived'
-] as const
-type Filter = (typeof FILTERS)[number]
-
-const SORT_BY = [
-  {
-    label: 'Newest',
-    value: 'desc'
-  },
-  { label: 'Oldest', value: 'asc' }
-] as const
-type Sort = (typeof SORT_BY)[number]['value']
 
 export const HomePage = () => {
   const navigate = useNavigate()
-  const [searchParams, setSearchParams] = useSearchParams()
+  const fileInputRef = useRef<HTMLInputElement>(null)
-  const q = searchParams.get('q') ?? ''
+  const [sigits, setSigits] = useState<Meta[]>([])
-
+  const [profiles, setProfiles] = useState<{ [key: string]: ProfileMetadata }>(
-  useEffect(() => {
+    {}
-    const searchInput = document.getElementById('q') as HTMLInputElement | null
+  )
-    if (searchInput) {
-      searchInput.value = q
-    }
-  }, [q])
-
-  const [sigits, setSigits] = useState<{ [key: string]: Meta }>({})
-  const [parsedSigits, setParsedSigits] = useState<{
-    [key: string]: SigitCardDisplayInfo
-  }>({})
   const usersAppData = useAppSelector((state) => state.userAppData)
 
   useEffect(() => {
     if (usersAppData) {
-      const getSigitInfo = async () => {
+      setSigits(Object.values(usersAppData.sigits))
-        const parsedSigits: { [key: string]: SigitCardDisplayInfo } = {}
-        for (const key in usersAppData.sigits) {
-          if (Object.prototype.hasOwnProperty.call(usersAppData.sigits, key)) {
-            const sigitInfo = await extractSigitCardDisplayInfo(
-              usersAppData.sigits[key]
-            )
-            if (sigitInfo) {
-              parsedSigits[key] = sigitInfo
-            }
-          }
-        }
-
-        setParsedSigits({
-          ...parsedSigits
-        })
-      }
-
-      setSigits(usersAppData.sigits)
-      getSigitInfo()
     }
   }, [usersAppData])
 
-  const onDrop = useCallback(
+  const handleUploadClick = () => {
-    async (acceptedFiles: File[]) => {
+    if (fileInputRef.current) {
-      // When uploading single file check if it's .sigit.zip
+      fileInputRef.current.click()
-      if (acceptedFiles.length === 1) {
+    }
-        const file = acceptedFiles[0]
+  }
 
-        // Check if the file extension is .sigit.zip
+  const handleFileChange = async (
-        const fileName = file.name
+    event: React.ChangeEvent<HTMLInputElement>
-        const fileExtension = fileName.slice(-10) // ".sigit.zip" has 10 characters
+  ) => {
-        if (fileExtension === '.sigit.zip') {
+    const file = event.target.files?.[0]
-          const zip = await JSZip.loadAsync(file).catch((err) => {
+    if (file) {
-            console.log('err in loading zip file :>> ', err)
+      // Check if the file extension is .sigit.zip
-            toast.error(err.message || 'An error occurred in loading zip file.')
+      const fileName = file.name
-            return null
+      const fileExtension = fileName.slice(-10) // ".sigit.zip" has 10 characters
+      if (fileExtension === '.sigit.zip') {
+        const zip = await JSZip.loadAsync(file).catch((err) => {
+          console.log('err in loading zip file :>> ', err)
+          toast.error(err.message || 'An error occurred in loading zip file.')
+          return null
+        })
+
+        if (!zip) return
+
+        // navigate to sign page if zip contains keys.json
+        if ('keys.json' in zip.files) {
+          return navigate(appPrivateRoutes.sign, {
+            state: { uploadedZip: file }
           })
-
-          if (!zip) return
-
-          // navigate to sign page if zip contains keys.json
-          if ('keys.json' in zip.files) {
-            return navigate(appPrivateRoutes.sign, {
-              state: { uploadedZip: file }
-            })
-          }
-
-          // navigate to verify page if zip contains meta.json
-          if ('meta.json' in zip.files) {
-            return navigate(appPublicRoutes.verify, {
-              state: { uploadedZip: file }
-            })
-          }
-
-          toast.error('Invalid SiGit zip file')
-          return
         }
+
+        // navigate to verify page if zip contains meta.json
+        if ('meta.json' in zip.files) {
+          return navigate(appPublicRoutes.verify, {
+            state: { uploadedZip: file }
+          })
+        }
+
+        toast.error('Invalid zip file')
+        return
       }
 
       // navigate to create page
-      navigate(appPrivateRoutes.create, {
+      navigate(appPrivateRoutes.create, { state: { uploadedFile: file } })
-        state: { uploadedFiles: acceptedFiles }
+    }
-      })
+  }
-    },
-    [navigate]
-  )
-
-  const { getRootProps, getInputProps, isDragActive, open } = useDropzone({
-    onDrop,
-    noClick: true
-  })
-
-  const [filter, setFilter] = useState<Filter>('Show all')
-  const [sort, setSort] = useState<Sort>('desc')
 
   return (
-    <div {...getRootProps()} tabIndex={-1}>
+    <Container className={styles.container}>
-      <Container className={styles.container}>
+      <Box className={styles.header}>
-        <div className={styles.header}>
+        <Typography variant="h3" className={styles.title}>
-          <div className={styles.filters}>
+          Sigits
-            <Select
+        </Typography>
-              name={'filter-select'}
+        {/* This is for desktop view */}
-              value={filter}
+        <Box
-              setValue={setFilter}
+          className={styles.actionButtons}
-              options={FILTERS.map((f) => {
+          sx={{
-                return {
+            display: {
-                  label: f,
+              xs: 'none',
-                  value: f
+              md: 'flex'
-                }
+            }
-              })}
+          }}
-            />
-            <Select
-              name={'sort-select'}
-              value={sort}
-              setValue={setSort}
-              options={SORT_BY.map((s) => {
-                return { ...s }
-              })}
-            />
-          </div>
-          <div className={styles.actionButtons}>
-            <form
-              className={styles.search}
-              onSubmit={(e) => {
-                e.preventDefault()
-                const searchInput = e.currentTarget.elements.namedItem(
-                  'q'
-                ) as HTMLInputElement
-                searchParams.set('q', searchInput.value)
-                setSearchParams(searchParams)
-              }}
-            >
-              <TextField
-                id="q"
-                name="q"
-                placeholder="Search"
-                size="small"
-                type="search"
-                defaultValue={q}
-                onChange={(e) => {
-                  // Handle the case when users click native search input's clear or x
-                  if (e.currentTarget.value === '') {
-                    searchParams.delete('q')
-                    setSearchParams(searchParams)
-                  }
-                }}
-                sx={{
-                  width: '100%',
-                  fontSize: '16px',
-                  borderTopLeftRadius: 'var(----mui-shape-borderRadius)',
-                  borderBottomLeftRadius: 'var(----mui-shape-borderRadius)',
-                  '& .MuiInputBase-root': {
-                    borderTopRightRadius: 0,
-                    borderBottomRightRadius: 0
-                  },
-                  '& .MuiInputBase-input': {
-                    padding: '7px 14px'
-                  },
-                  '& .MuiOutlinedInput-notchedOutline': {
-                    display: 'none'
-                  }
-                }}
-              />
-              <Button
-                type="submit"
-                sx={{
-                  minWidth: '44px',
-                  padding: '11.5px 12px',
-                  borderTopLeftRadius: 0,
-                  borderBottomLeftRadius: 0
-                }}
-                variant={'contained'}
-                aria-label="submit search"
-              >
-                <FontAwesomeIcon icon={faSearch} />
-              </Button>
-            </form>
-          </div>
-        </div>
-        <button
-          className={`${styles.dropzone} ${isDragActive ? styles.isDragActive : ''}`}
-          tabIndex={0}
-          onClick={open}
-          type="button"
-          aria-label="upload files"
         >
-          <input {...getInputProps()} />
+          <input
-          {isDragActive ? (
+            type="file"
-            <p>Drop the files here ...</p>
+            ref={fileInputRef}
-          ) : (
+            style={{ display: 'none' }}
-            <p>Click or drag files to upload!</p>
+            onChange={handleFileChange}
-          )}
+          />
-        </button>
+          <Button
-        <div className={styles.submissions}>
+            variant="outlined"
-          {Object.keys(parsedSigits)
+            startIcon={<Upload />}
-            .filter((s) => {
+            onClick={handleUploadClick}
-              const { title, signedStatus } = parsedSigits[s]
+          >
-              const isMatch = title?.toLowerCase().includes(q.toLowerCase())
+            Upload
-              switch (filter) {
+          </Button>
-                case 'Completed':
+        </Box>
-                  return signedStatus === SigitStatus.Complete && isMatch
+        {/* This is for mobile view */}
-                case 'In-progress':
+        <Box
-                  return signedStatus === SigitStatus.Partial && isMatch
+          className={styles.actionButtons}
-                case 'Show all':
+          sx={{
-                  return isMatch
+            display: {
-                default:
+              xs: 'flex',
-                  console.error('Filter case not handled.')
+              md: 'none'
-              }
+            }
-            })
+          }}
-            .sort((a, b) => {
+        >
-              const x = parsedSigits[a].createdAt ?? 0
+          <Tooltip title="Upload" arrow>
-              const y = parsedSigits[b].createdAt ?? 0
+            <Button variant="outlined" onClick={handleUploadClick}>
-              return sort === 'desc' ? y - x : x - y
+              <Upload />
-            })
+            </Button>
-            .map((key) => (
+          </Tooltip>
-              <DisplaySigit
+        </Box>
-                key={`sigit-${key}`}
+      </Box>
-                parsedMeta={parsedSigits[key]}
+      <Box className={styles.submissions}>
-                meta={sigits[key]}
+        {sigits.map((sigit, index) => (
-              />
+          <DisplaySigit
-            ))}
+            key={`sigit-${index}`}
-        </div>
+            meta={sigit}
-      </Container>
+            profiles={profiles}
-    </div>
+            setProfiles={setProfiles}
+          />
+        ))}
+      </Box>
+    </Container>
+  )
+}
+
+type SigitProps = {
+  meta: Meta
+  profiles: { [key: string]: ProfileMetadata }
+  setProfiles: Dispatch<SetStateAction<{ [key: string]: ProfileMetadata }>>
+}
+
+enum SignedStatus {
+  Partial = 'Partially Signed',
+  Complete = 'Completely Signed'
+}
+
+const DisplaySigit = ({ meta, profiles, setProfiles }: SigitProps) => {
+  const navigate = useNavigate()
+
+  const [title, setTitle] = useState<string>()
+  const [createdAt, setCreatedAt] = useState('')
+  const [submittedBy, setSubmittedBy] = useState<string>()
+  const [signers, setSigners] = useState<`npub1${string}`[]>([])
+  const [signedStatus, setSignedStatus] = useState<SignedStatus>(
+    SignedStatus.Partial
+  )
+
+  useEffect(() => {
+    const extractInfo = async () => {
+      const createSignatureEvent = await parseJson<Event>(
+        meta.createSignature
+      ).catch((err) => {
+        console.log('err in parsing the createSignature event:>> ', err)
+        toast.error(
+          err.message || 'error occurred in parsing the create signature event'
+        )
+        return null
+      })
+
+      if (!createSignatureEvent) return
+
+      // created_at in nostr events are stored in seconds
+      // convert it to ms before formatting
+      setCreatedAt(formatTimestamp(createSignatureEvent.created_at * 1000))
+
+      const createSignatureContent =
+        await parseJson<CreateSignatureEventContent>(
+          createSignatureEvent.content
+        ).catch((err) => {
+          console.log(
+            `err in parsing the createSignature event's content :>> `,
+            err
+          )
+          return null
+        })
+
+      if (!createSignatureContent) return
+
+      setTitle(createSignatureContent.title)
+      setSubmittedBy(createSignatureEvent.pubkey)
+      setSigners(createSignatureContent.signers)
+
+      const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
+      const isCompletelySigned = createSignatureContent.signers.every(
+        (signer) => signedBy.includes(signer)
+      )
+      if (isCompletelySigned) {
+        setSignedStatus(SignedStatus.Complete)
+      }
+    }
+    extractInfo()
+  }, [meta])
+
+  useEffect(() => {
+    const hexKeys: string[] = []
+
+    if (submittedBy) {
+      hexKeys.push(npubToHex(submittedBy)!)
+    }
+    hexKeys.push(...signers.map((signer) => npubToHex(signer)!))
+
+    const metadataController = new MetadataController()
+    hexKeys.forEach((key) => {
+      if (!(key in profiles)) {
+        const handleMetadataEvent = (event: Event) => {
+          const metadataContent =
+            metadataController.extractProfileMetadataContent(event)
+
+          if (metadataContent)
+            setProfiles((prev) => ({
+              ...prev,
+              [key]: metadataContent
+            }))
+        }
+
+        metadataController.on(key, (kind: number, event: Event) => {
+          if (kind === kinds.Metadata) {
+            handleMetadataEvent(event)
+          }
+        })
+
+        metadataController
+          .findMetadata(key)
+          .then((metadataEvent) => {
+            if (metadataEvent) handleMetadataEvent(metadataEvent)
+          })
+          .catch((err) => {
+            console.error(`error occurred in finding metadata for: ${key}`, err)
+          })
+      }
+    })
+  }, [submittedBy, signers])
+
+  const handleNavigation = () => {
+    if (signedStatus === SignedStatus.Complete) {
+      navigate(appPublicRoutes.verify, { state: { meta } })
+    } else {
+      navigate(appPrivateRoutes.sign, { state: { meta } })
+    }
+  }
+
+  return (
+    <Box
+      className={styles.item}
+      sx={{
+        flexDirection: {
+          xs: 'column',
+          md: 'row'
+        }
+      }}
+      onClick={handleNavigation}
+    >
+      <Box
+        className={styles.titleBox}
+        sx={{
+          borderBottomLeftRadius: {
+            xs: 'initial',
+            md: 'inherit'
+          },
+          borderTopRightRadius: {
+            xs: 'inherit',
+            md: 'initial'
+          }
+        }}
+      >
+        <Typography variant="body1" className={styles.title}>
+          <Description />
+          {title}
+        </Typography>
+        {submittedBy &&
+          (function () {
+            const profile = profiles[submittedBy]
+            return (
+              <UserAvatar
+                pubkey={submittedBy}
+                name={
+                  profile?.display_name ||
+                  profile?.name ||
+                  shorten(hexToNpub(submittedBy))
+                }
+                image={profile?.picture}
+              />
+            )
+          })()}
+        <Typography variant="body2" className={styles.date}>
+          <CalendarMonth />
+          {createdAt}
+        </Typography>
+      </Box>
+      <Box className={styles.signers}>
+        {signers.map((signer) => {
+          const pubkey = npubToHex(signer)!
+          const profile = profiles[pubkey]
+
+          return (
+            <DisplaySigner
+              key={signer}
+              meta={meta}
+              profile={profile}
+              pubkey={pubkey}
+            />
+          )
+        })}
+      </Box>
+    </Box>
+  )
+}
+
+enum SignStatus {
+  Signed = 'Signed',
+  Pending = 'Pending',
+  Invalid = 'Invalid Sign'
+}
+
+type DisplaySignerProps = {
+  meta: Meta
+  profile: ProfileMetadata
+  pubkey: string
+}
+
+const DisplaySigner = ({ meta, profile, pubkey }: DisplaySignerProps) => {
+  const [signStatus, setSignedStatus] = useState<SignStatus>()
+
+  useEffect(() => {
+    const updateSignStatus = async () => {
+      const npub = hexToNpub(pubkey)
+      if (npub in meta.docSignatures) {
+        parseJson<Event>(meta.docSignatures[npub])
+          .then((event) => {
+            const isValidSignature = verifyEvent(event)
+            if (isValidSignature) {
+              setSignedStatus(SignStatus.Signed)
+            } else {
+              setSignedStatus(SignStatus.Invalid)
+            }
+          })
+          .catch((err) => {
+            console.log(`err in parsing the docSignatures for ${npub}:>> `, err)
+            setSignedStatus(SignStatus.Invalid)
+          })
+      } else {
+        setSignedStatus(SignStatus.Pending)
+      }
+    }
+
+    updateSignStatus()
+  }, [meta, pubkey])
+
+  return (
+    <Box className={styles.signerItem}>
+      <Typography variant="button" className={styles.status}>
+        {signStatus}
+      </Typography>
+      <UserAvatar
+        pubkey={pubkey}
+        name={
+          profile?.display_name ||
+          profile?.name ||
+          shorten(hexToNpub(pubkey), 5)
+        }
+        image={profile?.picture}
+      />
+    </Box>
   )
 }

src/pages/home/style.module.scss

@@ -1,101 +1,94 @@
-@import '../../styles/colors.scss';
-
 .container {
   display: flex;
   flex-direction: column;
   gap: 25px;
-  container-type: inline-size;
 }
 
 .header {
   display: flex;
-  gap: 10px;
 
-  @container (width < 610px) {
+  .title {
-    flex-direction: column-reverse;
+    color: var(--mui-palette-primary-light);
-  }
+    flex: 1;
-}
-
-.filters {
-  display: flex;
-  gap: 10px;
-}
-
-.actionButtons {
-  display: flex;
-  justify-content: end;
-  align-items: center;
-  gap: 10px;
-  padding: 1.5px 0;
-  flex-grow: 1;
-}
-
-.search {
-  display: flex;
-  align-items: center;
-  justify-content: end;
-
-  height: 34px;
-  overflow: hidden;
-  border-radius: 4px;
-  outline: solid 1px #dddddd;
-  background: white;
-
-  width: 100%;
-
-  @container (width >= 610px) {
-    max-width: 246px;
   }
 
-  &:focus-within {
+  .actionButtons {
-    outline-color: $primary-main;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
   }
 }
 
-.dropzone {
-  position: relative;
-
-  font-size: 16px;
-  background-color: $overlay-background-color;
-  height: 250px;
-  color: rgba(0, 0, 0, 0.25);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-
-  &::before {
-    content: '';
-    position: absolute;
-    transition:
-      background-color ease 0.2s,
-      inset ease 0.2s;
-    background: rgba(0, 0, 0, 0.1);
-    border-radius: 2px;
-    border: dashed 3px rgba(0, 0, 0, 0.1);
-    inset: 15px;
-  }
-
-  &:focus,
-  &.isDragActive,
-  &:hover {
-    &::before {
-      inset: 10px;
-      background: rgba(0, 0, 0, 0.15);
-    }
-  }
-
-  // Override button styles
-  padding: 0;
-  border: none;
-  outline: none;
-  letter-spacing: 1px;
-  font-weight: 500;
-  font-family: inherit;
-}
-
 .submissions {
-  display: grid;
+  display: flex;
-  gap: 25px;
+  flex-direction: column;
-  grid-template-columns: repeat(auto-fit, minmax(365px, 1fr));
+  gap: 10px;
+
+  .item {
+    display: flex;
+    gap: 10px;
+    background-color: #efeae6;
+    border-radius: 1rem;
+    cursor: pointer;
+
+    .titleBox {
+      display: flex;
+      flex: 4;
+      flex-direction: column;
+      align-items: center;
+      overflow-wrap: anywhere;
+      gap: 10px;
+      padding: 10px;
+      background-color: #cdc8c499;
+      border-top-left-radius: inherit;
+
+      .title {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--mui-palette-primary-light);
+        font-size: 1.5rem;
+
+        svg {
+          font-size: 1.5rem;
+        }
+      }
+
+      .date {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: var(--mui-palette-primary-light);
+        font-size: 1rem;
+
+        svg {
+          font-size: 1rem;
+        }
+      }
+    }
+
+    .signers {
+      display: flex;
+      flex-direction: column;
+      flex: 6;
+      justify-content: center;
+      gap: 10px;
+      padding: 10px;
+      color: var(--mui-palette-primary-light);
+
+      .signerItem {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 10px;
+
+        .status {
+          border-radius: 2rem;
+          width: 100px;
+          text-align: center;
+          background-color: var(--mui-palette-info-light);
+        }
+      }
+    }
+  }
 }

src/pages/nostr/index.tsx

@@ -51,7 +51,7 @@ export const Nostr = () => {
   /**
    * Call login function when enter is pressed
    */
-  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+  const handleInputKeyDown = (event: any) => {
     if (event.code === 'Enter' || event.code === 'NumpadEnter') {
       event.preventDefault()
       login()

src/pages/settings/profile/index.tsx

@@ -12,7 +12,7 @@ import {
   useTheme
 } from '@mui/material'
 import { UnsignedEvent, nip19, kinds, VerifiedEvent, Event } from 'nostr-tools'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
 import { Link, useParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { MetadataController, NostrController } from '../../../controllers'
@@ -26,7 +26,7 @@ import { setMetadataEvent } from '../../../store/actions'
 import { LoadingSpinner } from '../../../components/LoadingSpinner'
 import { LoginMethods } from '../../../store/auth/types'
 import { SmartToy } from '@mui/icons-material'
-import { getRoboHashPicture, unixNow } from '../../../utils'
+import { getRoboHashPicture } from '../../../utils'
 import { Container } from '../../../components/Container'
 
 export const ProfileSettingsPage = () => {
@@ -197,7 +197,7 @@ export const ProfileSettingsPage = () => {
     // Relay will reject if created_at is too late
     const updatedMetadataState: UnsignedEvent = {
       content: content,
-      created_at: unixNow(),
+      created_at: Math.round(Date.now() / 1000),
       kind: kinds.Metadata,
       pubkey: pubkey!,
       tags: metadataState?.tags || []
@@ -321,8 +321,8 @@ export const ProfileSettingsPage = () => {
                 }}
               >
                 <img
-                  onError={(event: React.SyntheticEvent<HTMLImageElement>) => {
+                  onError={(event: any) => {
-                    event.currentTarget.src = getRoboHashPicture(npub!)
+                    event.target.src = getRoboHashPicture(npub!)
                   }}
                   className={styles.img}
                   src={getProfileImage(profileMetadata)}

src/pages/settings/relays/index.tsx

@@ -91,8 +91,7 @@ export const RelaysPage = () => {
         if (isMounted) {
           if (
             !relaysState?.mapUpdated ||
-            (newRelayMap?.mapUpdated !== undefined &&
+            newRelayMap.mapUpdated > relaysState?.mapUpdated
-              newRelayMap?.mapUpdated > relaysState?.mapUpdated)
           ) {
             if (
               !relaysState?.map ||

src/pages/sign/index.tsx

@@ -5,7 +5,7 @@ import JSZip from 'jszip'
 import _ from 'lodash'
 import { MuiFileInput } from 'mui-file-input'
 import { Event, verifyEvent } from 'nostr-tools'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
@@ -26,7 +26,7 @@ import {
   hexToNpub,
   isOnline,
   loadZip,
-  unixNow,
+  now,
   npubToHex,
   parseJson,
   readContentOfZipEntry,
@@ -210,6 +210,7 @@ export const SignPage = () => {
         const signedMarks = extractMarksFromSignedMeta(meta)
         const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
         setCurrentUserMarks(currentUserMarks)
+        // setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null)
         setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
       }
 
@@ -219,100 +220,7 @@ export const SignPage = () => {
     if (meta) {
       handleUpdatedMeta(meta)
     }
-  }, [meta, usersPubkey])
+  }, [meta])
-
-  const handleDownload = async () => {
-    if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
-    setLoadingSpinnerDesc('Generating file')
-    try {
-      const zip = await getZipWithFiles(meta, files)
-      const arrayBuffer = await zip.generateAsync({
-        type: ARRAY_BUFFER,
-        compression: DEFLATE,
-        compressionOptions: {
-          level: 6
-        }
-      })
-      if (!arrayBuffer) return
-      const blob = new Blob([arrayBuffer])
-      saveAs(blob, `exported-${unixNow()}.sigit.zip`)
-    } catch (error: any) {
-      console.log('error in zip:>> ', error)
-      toast.error(error.message || 'Error occurred in generating zip file')
-    }
-  }
-
-  const decrypt = useCallback(
-    async (file: File) => {
-      setLoadingSpinnerDesc('Decrypting file')
-
-      const zip = await loadZip(file)
-      if (!zip) return
-
-      const parsedKeysJson = await parseKeysJson(zip)
-      if (!parsedKeysJson) return
-
-      const encryptedArrayBuffer = await readContentOfZipEntry(
-        zip,
-        'compressed.sigit',
-        'arraybuffer'
-      )
-
-      if (!encryptedArrayBuffer) return
-
-      const { keys, sender } = parsedKeysJson
-
-      for (const key of keys) {
-        // Set up event listener for authentication event
-        nostrController.on('nsecbunker-auth', (url) => {
-          setAuthUrl(url)
-        })
-
-        // Set up timeout promise to handle encryption timeout
-        const timeoutPromise = new Promise<never>((_, reject) => {
-          setTimeout(() => {
-            reject(new Error('Timeout occurred'))
-          }, 60000) // Timeout duration = 60 seconds
-        })
-
-        // decrypt the encryptionKey, with timeout
-        const encryptionKey = await Promise.race([
-          nostrController.nip04Decrypt(sender, key),
-          timeoutPromise
-        ])
-          .then((res) => {
-            return res
-          })
-          .catch((err) => {
-            console.log('err :>> ', err)
-            return null
-          })
-          .finally(() => {
-            setAuthUrl(undefined) // Clear authentication URL
-          })
-
-        // Return if encryption failed
-        if (!encryptionKey) continue
-
-        const arrayBuffer = await decryptArrayBuffer(
-          encryptedArrayBuffer,
-          encryptionKey
-        )
-          .catch((err) => {
-            console.log('err in decryption:>> ', err)
-            return null
-          })
-          .finally(() => {
-            setIsLoading(false)
-          })
-
-        if (arrayBuffer) return arrayBuffer
-      }
-
-      return null
-    },
-    [nostrController]
-  )
 
   useEffect(() => {
     // online mode - from create and home page views
@@ -370,7 +278,7 @@ export const SignPage = () => {
       setIsLoading(false)
       setDisplayInput(true)
     }
-  }, [decryptedArrayBuffer, uploadedZip, metaInNavState, decrypt])
+  }, [decryptedArrayBuffer, uploadedZip, metaInNavState])
 
   const handleArrayBufferFromBlossom = async (
     arrayBuffer: ArrayBuffer,
@@ -448,6 +356,96 @@ export const SignPage = () => {
     })
   }
 
+  const decrypt = async (file: File) => {
+    setLoadingSpinnerDesc('Decrypting file')
+
+    const zip = await loadZip(file)
+    if (!zip) return
+
+    const parsedKeysJson = await parseKeysJson(zip)
+    if (!parsedKeysJson) return
+
+    const encryptedArrayBuffer = await readContentOfZipEntry(
+      zip,
+      'compressed.sigit',
+      'arraybuffer'
+    )
+
+    if (!encryptedArrayBuffer) return
+
+    const { keys, sender } = parsedKeysJson
+
+    for (const key of keys) {
+      // Set up event listener for authentication event
+      nostrController.on('nsecbunker-auth', (url) => {
+        setAuthUrl(url)
+      })
+
+      // Set up timeout promise to handle encryption timeout
+      const timeoutPromise = new Promise<never>((_, reject) => {
+        setTimeout(() => {
+          reject(new Error('Timeout occurred'))
+        }, 60000) // Timeout duration = 60 seconds
+      })
+
+      // decrypt the encryptionKey, with timeout
+      const encryptionKey = await Promise.race([
+        nostrController.nip04Decrypt(sender, key),
+        timeoutPromise
+      ])
+        .then((res) => {
+          return res
+        })
+        .catch((err) => {
+          console.log('err :>> ', err)
+          return null
+        })
+        .finally(() => {
+          setAuthUrl(undefined) // Clear authentication URL
+        })
+
+      // Return if encryption failed
+      if (!encryptionKey) continue
+
+      const arrayBuffer = await decryptArrayBuffer(
+        encryptedArrayBuffer,
+        encryptionKey
+      )
+        .catch((err) => {
+          console.log('err in decryption:>> ', err)
+          return null
+        })
+        .finally(() => {
+          setIsLoading(false)
+        })
+
+      if (arrayBuffer) return arrayBuffer
+    }
+
+    return null
+  }
+
+  const handleDownload = async () => {
+    if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
+    setLoadingSpinnerDesc('Generating file')
+    try {
+      const zip = await getZipWithFiles(meta, files)
+      const arrayBuffer = await zip.generateAsync({
+        type: ARRAY_BUFFER,
+        compression: DEFLATE,
+        compressionOptions: {
+          level: 6
+        }
+      })
+      if (!arrayBuffer) return
+      const blob = new Blob([arrayBuffer])
+      saveAs(blob, `exported-${now()}.sigit.zip`)
+    } catch (error: any) {
+      console.log('error in zip:>> ', error)
+      toast.error(error.message || 'Error occurred in generating zip file')
+    }
+  }
+
   const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
     const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
 
@@ -577,7 +575,7 @@ export const SignPage = () => {
       ...metaCopy.docSignatures,
       [hexToNpub(signedEvent.pubkey)]: JSON.stringify(signedEvent, null, 2)
     }
-    metaCopy.modifiedAt = unixNow()
+    metaCopy.modifiedAt = now()
     return metaCopy
   }
 
@@ -587,6 +585,7 @@ export const SignPage = () => {
     encryptionKey: string
   ): Promise<File | null> => {
     // Get the current timestamp in seconds
+    const unixNow = now()
     const blob = new Blob([encryptedArrayBuffer])
     // Create a File object with the Blob data
     const file = new File([blob], `compressed.sigit`, {
@@ -636,18 +635,16 @@ export const SignPage = () => {
 
     if (!arraybuffer) return null
 
-    return new File([new Blob([arraybuffer])], `${unixNow()}.sigit.zip`, {
+    return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
       type: 'application/zip'
     })
   }
 
   // Handle errors during zip file generation
-  const handleZipError = (err: unknown) => {
+  const handleZipError = (err: any) => {
     console.log('Error in zip:>> ', err)
     setIsLoading(false)
-    if (err instanceof Error) {
+    toast.error(err.message || 'Error occurred in generating zip file')
-      toast.error(err.message || 'Error occurred in generating zip file')
-    }
     return null
   }
 
@@ -780,7 +777,8 @@ export const SignPage = () => {
     if (!arrayBuffer) return
 
     const blob = new Blob([arrayBuffer])
-    saveAs(blob, `exported-${unixNow()}.sigit.zip`)
+    const unixNow = now()
+    saveAs(blob, `exported-${unixNow}.sigit.zip`)
 
     setIsLoading(false)
 
@@ -825,7 +823,8 @@ export const SignPage = () => {
     const finalZipFile = await createFinalZipFile(encryptedArrayBuffer, key)
 
     if (!finalZipFile) return
-    saveAs(finalZipFile, `exported-${unixNow()}.sigit.zip`)
+    const unixNow = now()
+    saveAs(finalZipFile, `exported-${unixNow}.sigit.zip`)
   }
 
   /**

src/pages/verify/index.tsx

@@ -1,22 +1,39 @@
-import { Box, Button, Tooltip, Typography, useTheme } from '@mui/material'
+import {
+  Box,
+  Button,
+  List,
+  ListItem,
+  ListSubheader,
+  Tooltip,
+  Typography,
+  useTheme
+} from '@mui/material'
 import JSZip from 'jszip'
 import { MuiFileInput } from 'mui-file-input'
-import { Event, verifyEvent } from 'nostr-tools'
+import { Event, kinds, verifyEvent } from 'nostr-tools'
 import { useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
-import { NostrController } from '../../controllers'
+import { UserAvatar } from '../../components/UserAvatar'
-import { CreateSignatureEventContent, Meta } from '../../types'
+import { MetadataController, NostrController } from '../../controllers'
+import {
+  CreateSignatureEventContent,
+  Meta,
+  ProfileMetadata,
+  SignedEventContent
+} from '../../types'
 import {
   decryptArrayBuffer,
   extractMarksFromSignedMeta,
+  extractZipUrlAndEncryptionKey,
   getHash,
   hexToNpub,
-  unixNow,
+  now,
+  npubToHex,
   parseJson,
   readContentOfZipEntry,
-  signEventForMetaFile,
+  shorten,
-  shorten
+  signEventForMetaFile
 } from '../../utils'
 import styles from './style.module.scss'
 import { Cancel, CheckCircle } from '@mui/icons-material'
@@ -34,12 +51,6 @@ import { useSelector } from 'react-redux'
 import { getLastSignersSig } from '../../utils/sign.ts'
 import { saveAs } from 'file-saver'
 import { Container } from '../../components/Container'
-import { useSigitMeta } from '../../hooks/useSigitMeta.tsx'
-import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
-import { UsersDetails } from '../../components/UsersDetails.tsx/index.tsx'
-import { UserAvatar } from '../../components/UserAvatar/index.tsx'
-import { useSigitProfiles } from '../../hooks/useSigitProfiles.tsx'
-import { TooltipChild } from '../../components/TooltipChild.tsx'
 
 export const VerifyPage = () => {
   const theme = useTheme()
@@ -52,36 +63,52 @@ export const VerifyPage = () => {
    * uploadedZip will be received from home page when a user uploads a sigit zip wrapper that contains meta.json
    * meta will be received in navigation from create & home page in online mode
    */
-  const { uploadedZip, meta } = location.state || {}
+  const { uploadedZip, meta: metaInNavState } = location.state || {}
-
-  const { submittedBy, zipUrl, encryptionKey, signers, viewers, fileHashes } =
-    useSigitMeta(meta)
-
-  const profiles = useSigitProfiles([
-    ...(submittedBy ? [submittedBy] : []),
-    ...signers,
-    ...viewers
-  ])
 
   const [isLoading, setIsLoading] = useState(false)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
 
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
+  const [meta, setMeta] = useState<Meta | null>(null)
 
+  const [submittedBy, setSubmittedBy] = useState<string>()
+
+  const [signers, setSigners] = useState<`npub1${string}`[]>([])
+  const [viewers, setViewers] = useState<`npub1${string}`[]>([])
+  const [creatorFileHashes, setCreatorFileHashes] = useState<{
+    [key: string]: string
+  }>({})
   const [currentFileHashes, setCurrentFileHashes] = useState<{
     [key: string]: string | null
-  }>(fileHashes)
+  }>({})
   const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
 
+  const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
+    {}
+  )
   const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
   const nostrController = NostrController.getInstance()
 
   useEffect(() => {
     if (uploadedZip) {
       setSelectedFile(uploadedZip)
-    } else if (meta && encryptionKey) {
+    } else if (metaInNavState) {
       const processSigit = async () => {
         setIsLoading(true)
+        setLoadingSpinnerDesc('Extracting zipUrl and encryption key from meta')
+
+        const res = await extractZipUrlAndEncryptionKey(metaInNavState)
+        if (!res) {
+          setIsLoading(false)
+          return
+        }
+
+        const {
+          zipUrl,
+          encryptionKey,
+          createSignatureEvent,
+          createSignatureContent
+        } = res
 
         setLoadingSpinnerDesc('Fetching file from file server')
         axios
@@ -148,6 +175,12 @@ export const VerifyPage = () => {
               setCurrentFileHashes(fileHashes)
               setFiles(files)
 
+              setSigners(createSignatureContent.signers)
+              setViewers(createSignatureContent.viewers)
+              setCreatorFileHashes(createSignatureContent.fileHashes)
+              setSubmittedBy(createSignatureEvent.pubkey)
+
+              setMeta(metaInNavState)
               setIsLoading(false)
             }
           })
@@ -164,7 +197,49 @@ export const VerifyPage = () => {
 
       processSigit()
     }
-  }, [encryptionKey, meta, uploadedZip, zipUrl])
+  }, [uploadedZip, metaInNavState])
+
+  useEffect(() => {
+    if (submittedBy) {
+      const metadataController = new MetadataController()
+
+      const users = [submittedBy, ...signers, ...viewers]
+
+      users.forEach((user) => {
+        const pubkey = npubToHex(user)!
+
+        if (!(pubkey in metadata)) {
+          const handleMetadataEvent = (event: Event) => {
+            const metadataContent =
+              metadataController.extractProfileMetadataContent(event)
+            if (metadataContent)
+              setMetadata((prev) => ({
+                ...prev,
+                [pubkey]: metadataContent
+              }))
+          }
+
+          metadataController.on(pubkey, (kind: number, event: Event) => {
+            if (kind === kinds.Metadata) {
+              handleMetadataEvent(event)
+            }
+          })
+
+          metadataController
+            .findMetadata(pubkey)
+            .then((metadataEvent) => {
+              if (metadataEvent) handleMetadataEvent(metadataEvent)
+            })
+            .catch((err) => {
+              console.error(
+                `error occurred in finding metadata for: ${user}`,
+                err
+              )
+            })
+        }
+      })
+    }
+  }, [submittedBy, signers, viewers])
 
   const handleVerify = async () => {
     if (!selectedFile) return
@@ -270,9 +345,44 @@ export const VerifyPage = () => {
 
     if (!createSignatureContent) return
 
+    setSigners(createSignatureContent.signers)
+    setViewers(createSignatureContent.viewers)
+    setCreatorFileHashes(createSignatureContent.fileHashes)
+    setSubmittedBy(createSignatureEvent.pubkey)
+
+    setMeta(parsedMetaJson)
     setIsLoading(false)
   }
 
+  const getPrevSignersSig = (npub: string) => {
+    if (!meta) return null
+
+    // if user is first signer then use creator's signature
+    if (signers[0] === npub) {
+      try {
+        const createSignatureEvent: Event = JSON.parse(meta.createSignature)
+        return createSignatureEvent.sig
+      } catch (error) {
+        return null
+      }
+    }
+
+    // find the index of signer
+    const currentSignerIndex = signers.findIndex((signer) => signer === npub)
+    // return null if could not found user in signer's list
+    if (currentSignerIndex === -1) return null
+    // find prev signer
+    const prevSigner = signers[currentSignerIndex - 1]
+
+    // get the signature of prev signer
+    try {
+      const prevSignersEvent: Event = JSON.parse(meta.docSignatures[prevSigner])
+      return prevSignersEvent.sig
+    } catch (error) {
+      return null
+    }
+  }
+
   const handleExport = async () => {
     if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
 
@@ -333,11 +443,81 @@ export const VerifyPage = () => {
     if (!arrayBuffer) return
 
     const blob = new Blob([arrayBuffer])
-    saveAs(blob, `exported-${unixNow()}.sigit.zip`)
+    saveAs(blob, `exported-${now()}.sigit.zip`)
 
     setIsLoading(false)
   }
 
+  const displayUser = (pubkey: string, verifySignature = false) => {
+    const profile = metadata[pubkey]
+
+    let isValidSignature = false
+
+    if (verifySignature) {
+      const npub = hexToNpub(pubkey)
+      const signedEventString = meta ? meta.docSignatures[npub] : null
+      if (signedEventString) {
+        try {
+          const signedEvent = JSON.parse(signedEventString)
+          const isVerifiedEvent = verifyEvent(signedEvent)
+
+          if (isVerifiedEvent) {
+            // get the actual signature of prev signer
+            const prevSignersSig = getPrevSignersSig(npub)
+
+            // get the signature of prev signer from the content of current signers signedEvent
+
+            try {
+              const obj: SignedEventContent = JSON.parse(signedEvent.content)
+              if (
+                obj.prevSig &&
+                prevSignersSig &&
+                obj.prevSig === prevSignersSig
+              ) {
+                isValidSignature = true
+              }
+            } catch (error) {
+              isValidSignature = false
+            }
+          }
+        } catch (error) {
+          console.error(
+            `An error occurred in parsing and verifying the signature event for ${pubkey}`,
+            error
+          )
+        }
+      }
+    }
+
+    return (
+      <>
+        <UserAvatar
+          pubkey={pubkey}
+          name={
+            profile?.display_name || profile?.name || shorten(hexToNpub(pubkey))
+          }
+          image={profile?.picture}
+        />
+
+        {verifySignature && (
+          <>
+            {isValidSignature && (
+              <Tooltip title="Valid signature">
+                <CheckCircle sx={{ color: theme.palette.success.light }} />
+              </Tooltip>
+            )}
+
+            {!isValidSignature && (
+              <Tooltip title="Invalid signature">
+                <Cancel sx={{ color: theme.palette.error.main }} />
+              </Tooltip>
+            )}
+          </>
+        )}
+      </>
+    )
+  }
+
   const displayExportedBy = () => {
     if (!meta || !meta.exportSignature) return null
 
@@ -347,24 +527,7 @@ export const VerifyPage = () => {
       const exportSignatureEvent = JSON.parse(exportSignatureString) as Event
 
       if (verifyEvent(exportSignatureEvent)) {
-        const exportedBy = exportSignatureEvent.pubkey
+        return displayUser(exportSignatureEvent.pubkey)
-        const profile = profiles[exportedBy]
-        return (
-          <Tooltip
-            title={
-              profile?.display_name ||
-              profile?.name ||
-              shorten(hexToNpub(exportedBy))
-            }
-            placement="top"
-            arrow
-            disableInteractive
-          >
-            <TooltipChild>
-              <UserAvatar pubkey={exportedBy} image={profile?.picture} />
-            </TooltipChild>
-          </Tooltip>
-        )
       } else {
         toast.error(`Invalid export signature!`)
         return (
@@ -411,13 +574,113 @@ export const VerifyPage = () => {
         )}
 
         {meta && (
-          <StickySideColumns
+          <>
-            left={
+            <List
-              <>
+              sx={{
+                bgcolor: 'background.paper',
+                marginTop: 2
+              }}
+              subheader={
+                <ListSubheader className={styles.subHeader}>
+                  Meta Info
+                </ListSubheader>
+              }
+            >
+              {submittedBy && (
+                <ListItem
+                  sx={{
+                    marginTop: 1,
+                    gap: '15px'
+                  }}
+                >
+                  <Typography variant="h6" sx={{ color: textColor }}>
+                    Submitted By
+                  </Typography>
+                  {displayUser(submittedBy)}
+                </ListItem>
+              )}
+
+              <ListItem
+                sx={{
+                  marginTop: 1,
+                  gap: '15px'
+                }}
+              >
+                <Typography variant="h6" sx={{ color: textColor }}>
+                  Exported By
+                </Typography>
+                {displayExportedBy()}
+                <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+                  <Button onClick={handleExport} variant="contained">
+                    Export Sigit
+                  </Button>
+                </Box>
+              </ListItem>
+
+              {signers.length > 0 && (
+                <ListItem
+                  sx={{
+                    marginTop: 1,
+                    flexDirection: 'column',
+                    alignItems: 'flex-start'
+                  }}
+                >
+                  <Typography variant="h6" sx={{ color: textColor }}>
+                    Signers
+                  </Typography>
+                  <ul className={styles.usersList}>
+                    {signers.map((signer) => (
+                      <li
+                        key={signer}
+                        style={{
+                          color: textColor,
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '15px'
+                        }}
+                      >
+                        {displayUser(npubToHex(signer)!, true)}
+                      </li>
+                    ))}
+                  </ul>
+                </ListItem>
+              )}
+
+              {viewers.length > 0 && (
+                <ListItem
+                  sx={{
+                    marginTop: 1,
+                    flexDirection: 'column',
+                    alignItems: 'flex-start'
+                  }}
+                >
+                  <Typography variant="h6" sx={{ color: textColor }}>
+                    Viewers
+                  </Typography>
+                  <ul className={styles.usersList}>
+                    {viewers.map((viewer) => (
+                      <li key={viewer} style={{ color: textColor }}>
+                        {displayUser(npubToHex(viewer)!)}
+                      </li>
+                    ))}
+                  </ul>
+                </ListItem>
+              )}
+
+              <ListItem
+                sx={{
+                  marginTop: 1,
+                  flexDirection: 'column',
+                  alignItems: 'flex-start'
+                }}
+              >
+                <Typography variant="h6" sx={{ color: textColor }}>
+                  Files
+                </Typography>
                 <Box className={styles.filesWrapper}>
                   {Object.entries(currentFileHashes).map(
                     ([filename, hash], index) => {
-                      const isValidHash = fileHashes[filename] === hash
+                      const isValidHash = creatorFileHashes[filename] === hash
 
                       return (
                         <Box key={`file-${index}`} className={styles.file}>
@@ -449,16 +712,9 @@ export const VerifyPage = () => {
                     }
                   )}
                 </Box>
-                {displayExportedBy()}
+              </ListItem>
-                <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+            </List>
-                  <Button onClick={handleExport} variant="contained">
+          </>
-                    Export Sigit
-                  </Button>
-                </Box>
-              </>
-            }
-            right={<UsersDetails meta={meta} />}
-          />
         )}
       </Container>
     </>

src/theme/index.ts

@@ -23,6 +23,14 @@ export const theme = extendTheme({
     }
   },
   components: {
+    MuiModal: {
+      styleOverrides: {
+        root: {
+          insetBlock: '25px',
+          insetInline: '10px'
+        }
+      }
+    },
     MuiButton: {
       styleOverrides: {
         root: {
@@ -33,9 +41,6 @@ export const theme = extendTheme({
           boxShadow: 'unset',
           lineHeight: 'inherit',
           borderRadius: '4px',
-          ':focus': {
-            textDecoration: 'none'
-          },
           ':hover': {
             background: 'var(--primary-light)',
             boxShadow: 'unset'

src/types/drawing.ts

@@ -9,7 +9,7 @@ export interface MouseState {
 }
 
 export interface PdfFile {
-  file: File
+  file: File,
   pages: PdfPage[]
   expanded?: boolean
 }
@@ -34,7 +34,7 @@ export interface DrawnField {
 export interface DrawTool {
   identifier: MarkType
   label: string
-  icon: JSX.Element
+  icon: JSX.Element,
   defaultValue?: string
   selected?: boolean
   active?: boolean

src/types/mark.ts

@@ -1,4 +1,4 @@
-import { MarkType } from "./drawing";
+import { MarkType } from './drawing'
 
 export interface CurrentUserMark {
   id: number

src/types/zip.ts

@@ -1,4 +1,4 @@
-export interface OutputByType {
+  export interface OutputByType {
   base64: string
   string: string
   text: string
@@ -11,18 +11,16 @@ export interface OutputByType {
 }
 
 interface InputByType {
-  base64: string
+  base64: string;
-  string: string
+  string: string;
-  text: string
+  text: string;
-  binarystring: string
+  binarystring: string;
-  array: number[]
+  array: number[];
-  uint8array: Uint8Array
+  uint8array: Uint8Array;
-  arraybuffer: ArrayBuffer
+  arraybuffer: ArrayBuffer;
-  blob: Blob
+  blob: Blob;
-  stream: NodeJS.ReadableStream
+  stream: NodeJS.ReadableStream;
 }
 
 export type OutputType = keyof OutputByType
-export type InputFileFormat =
+export type InputFileFormat = InputByType[keyof InputByType] | Promise<InputByType[keyof InputByType]>;
-  | InputByType[keyof InputByType]
-  | Promise<InputByType[keyof InputByType]>

src/utils/const.ts

@@ -8,10 +8,3 @@ export const SIGN: string = 'Sign'
 export const NEXT: string = 'Next'
 export const ARRAY_BUFFER = 'arraybuffer'
 export const DEFLATE = 'DEFLATE'
-
-/**
- * Number of milliseconds in one week.
- * Calc based on: 7 * 24 * 60 * 60 * 1000
- */
-export const ONE_WEEK_IN_MS: number = 604800000
-export const SIGIT_RELAY: string = 'wss://relay.sigit.io'

src/utils/index.ts

@@ -7,4 +7,3 @@ export * from './string'
 export * from './zip'
 export * from './utils'
 export * from './mark'
-export * from './meta'

src/utils/meta.ts

@@ -1,182 +0,0 @@
-import { CreateSignatureEventContent, Meta } from '../types'
-import { fromUnixTimestamp, parseJson } from '.'
-import { Event } from 'nostr-tools'
-import { toast } from 'react-toastify'
-
-export enum SignStatus {
-  Signed = 'Signed',
-  Awaiting = 'Awaiting',
-  Pending = 'Pending',
-  Invalid = 'Invalid',
-  Viewer = 'Viewer'
-}
-
-export enum SigitStatus {
-  Partial = 'In-Progress',
-  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
-  submittedBy?: `npub1${string}`
-  signers: `npub1${string}`[]
-  fileExtensions: string[]
-  signedStatus: SigitStatus
-}
-
-/**
- * Wrapper for event parser that throws custom SigitMetaParseError with cause and context
- * @param raw Raw string for parsing
- * @returns parsed Event
- */
-export const parseNostrEvent = async (raw: string): Promise<Event> => {
-  try {
-    const event = await parseJson<Event>(raw)
-    return event
-  } catch (error) {
-    throw new SigitMetaParseError(SigitMetaParseErrorType.PARSE_ERROR_EVENT, {
-      cause: handleError(error),
-      context: raw
-    })
-  }
-}
-
-/**
- * Wrapper for event content parser that throws custom SigitMetaParseError with cause and context
- * @param raw Raw string for parsing
- * @returns parsed CreateSignatureEventContent
- */
-export const parseCreateSignatureEventContent = async (
-  raw: string
-): Promise<CreateSignatureEventContent> => {
-  try {
-    const createSignatureEventContent =
-      await parseJson<CreateSignatureEventContent>(raw)
-    return createSignatureEventContent
-  } catch (error) {
-    throw new SigitMetaParseError(
-      SigitMetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
-      {
-        cause: handleError(error),
-        context: raw
-      }
-    )
-  }
-}
-
-/**
- * Extracts only necessary metadata for the card display
- * @param meta Sigit metadata
- * @returns SigitCardDisplayInfo
- */
-export const extractSigitCardDisplayInfo = async (meta: Meta) => {
-  if (!meta?.createSignature) return
-
-  const sigitInfo: SigitCardDisplayInfo = {
-    signers: [],
-    fileExtensions: [],
-    signedStatus: SigitStatus.Partial
-  }
-
-  try {
-    const createSignatureEvent = await parseNostrEvent(meta.createSignature)
-
-    // created_at in nostr events are stored in seconds
-    sigitInfo.createdAt = fromUnixTimestamp(createSignatureEvent.created_at)
-
-    const createSignatureContent = await parseCreateSignatureEventContent(
-      createSignatureEvent.content
-    )
-
-    const files = Object.keys(createSignatureContent.fileHashes)
-    const extensions = extractFileExtensions(files)
-
-    const signedBy = Object.keys(meta.docSignatures) as `npub1${string}`[]
-    const isCompletelySigned = createSignatureContent.signers.every((signer) =>
-      signedBy.includes(signer)
-    )
-
-    sigitInfo.title = createSignatureContent.title
-    sigitInfo.submittedBy = createSignatureEvent.pubkey as `npub1${string}`
-    sigitInfo.signers = createSignatureContent.signers
-    sigitInfo.fileExtensions = extensions
-
-    if (isCompletelySigned) {
-      sigitInfo.signedStatus = SigitStatus.Complete
-    }
-
-    return sigitInfo
-  } catch (error) {
-    if (error instanceof SigitMetaParseError) {
-      toast.error(error.message)
-      console.error(error.name, error.message, error.cause, error.context)
-    } else {
-      console.error('Unexpected error', error)
-    }
-  }
-}
-
-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
-  }, [])
-
-  return extensions
-}

src/utils/misc.ts

@@ -13,7 +13,7 @@ import { NostrController } from '../controllers'
 import { AuthState } from '../store/auth/types'
 import store from '../store/store'
 import { CreateSignatureEventContent, Meta } from '../types'
-import { hexToNpub, unixNow } from './nostr'
+import { hexToNpub, now } from './nostr'
 import { parseJson } from './string'
 import { hexToBytes } from '@noble/hashes/utils'
 
@@ -28,10 +28,10 @@ export const uploadToFileStorage = async (file: File) => {
   const event: EventTemplate = {
     kind: 24242,
     content: 'Authorize Upload',
-    created_at: unixNow(),
+    created_at: Math.floor(Date.now() / 1000),
     tags: [
       ['t', 'upload'],
-      ['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
+      ['expiration', String(now() + 60 * 5)], // Set expiration time to 5 minutes from now
       ['name', file.name],
       ['size', String(file.size)]
     ]
@@ -78,7 +78,7 @@ export const signEventForMetaFile = async (
   const event: EventTemplate = {
     kind: 27235, // Event type for meta file
     content: content, // content for event
-    created_at: unixNow(), // Current timestamp
+    created_at: Math.floor(Date.now() / 1000), // Current timestamp
     tags: [['-']] // For understanding why "-" tag is used here see: https://github.com/nostr-protocol/nips/blob/protected-events-tag/70.md
   }
 

src/utils/nostr.ts

@@ -120,8 +120,7 @@ export const queryNip05 = async (
   if (!match) throw new Error('Invalid nip05')
 
   // Destructure the match result, assigning default value '_' to name if not provided
-  // First variable from the match destructuring is ignored
+  const [name = '_', domain] = match
-  const [, name = '_', domain] = match
 
   // Construct the URL to query the NIP-05 data
   const url = `https://${domain}/.well-known/nostr.json?name=${name}`
@@ -211,22 +210,7 @@ export const getRoboHashPicture = (
   return `https://robohash.org/${npub}.png?set=set${set}`
 }
 
-export const unixNow = () => Math.round(Date.now() / 1000)
+export const now = () => Math.round(Date.now() / 1000)
-export const toUnixTimestamp = (date: number | Date) => {
-  let time
-  if (typeof date === 'number') {
-    time = Math.round(date / 1000)
-  } else if (date instanceof Date) {
-    time = Math.round(date.getTime() / 1000)
-  } else {
-    throw Error('Unsupported type when converting to unix timestamp')
-  }
-
-  return time
-}
-export const fromUnixTimestamp = (unix: number) => {
-  return unix * 1000
-}
 
 /**
  * Generate nip44 conversation key
@@ -303,7 +287,7 @@ export const createWrap = (unsignedEvent: UnsignedEvent, receiver: string) => {
       kind: 1059, // Event kind
       content, // Encrypted content
       pubkey, // Public key of the creator
-      created_at: unixNow(), // Current timestamp
+      created_at: now(), // Current timestamp
       tags: [
         // Tags including receiver and nonce
         ['p', receiver],
@@ -557,7 +541,7 @@ export const updateUsersAppData = async (meta: Meta) => {
   const updatedEvent: UnsignedEvent = {
     kind: kinds.Application,
     pubkey: usersPubkey!,
-    created_at: unixNow(),
+    created_at: now(),
     tags: [['d', hash]],
     content: encryptedContent
   }
@@ -623,10 +607,10 @@ const deleteBlossomFile = async (url: string, privateKey: string) => {
   const event: EventTemplate = {
     kind: 24242,
     content: 'Authorize Upload',
-    created_at: unixNow(),
+    created_at: now(),
     tags: [
       ['t', 'delete'],
-      ['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
+      ['expiration', String(now() + 60 * 5)], // Set expiration time to 5 minutes from now
       ['x', hash]
     ]
   }
@@ -682,10 +666,10 @@ const uploadUserAppDataToBlossom = async (
   const event: EventTemplate = {
     kind: 24242,
     content: 'Authorize Upload',
-    created_at: unixNow(),
+    created_at: now(),
     tags: [
       ['t', 'upload'],
-      ['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
+      ['expiration', String(now() + 60 * 5)], // Set expiration time to 5 minutes from now
       ['name', file.name],
       ['size', String(file.size)]
     ]
@@ -890,7 +874,7 @@ export const sendNotification = async (receiver: string, meta: Meta) => {
     pubkey: usersPubkey,
     content: JSON.stringify(meta),
     tags: [],
-    created_at: unixNow()
+    created_at: now()
   }
 
   // Wrap the unsigned event with the receiver's information

src/utils/pdf.ts

@@ -3,10 +3,8 @@ import * as PDFJS from 'pdfjs-dist'
 import { PDFDocument } from 'pdf-lib'
 import { Mark } from '../types/mark.ts'
 
-PDFJS.GlobalWorkerOptions.workerSrc = new URL(
+PDFJS.GlobalWorkerOptions.workerSrc =
-  'pdfjs-dist/build/pdf.worker.min.mjs',
+  'node_modules/pdfjs-dist/build/pdf.worker.mjs'
-  import.meta.url
-).toString()
 
 /**
  * Scale between the PDF page's natural size and rendered size

src/utils/relays.ts

@@ -1,116 +0,0 @@
-import { Filter, SimplePool } from 'nostr-tools'
-import { RelayList } from 'nostr-tools/kinds'
-import { Event } from 'nostr-tools'
-import { localCache } from '../services'
-import { ONE_WEEK_IN_MS, SIGIT_RELAY } from './const.ts'
-import { RelayMap, RelaySet } from '../types'
-
-const READ_MARKER = 'read'
-const WRITE_MARKER = 'write'
-
-/**
- * Attempts to find a relay list from the provided lookUpRelays.
- * If the relay list is found, it will be added to the user relay list metadata.
- * @param lookUpRelays
- * @param hexKey
- * @return found relay list or null
- */
-const findRelayListAndUpdateCache = async (
-  lookUpRelays: string[],
-  hexKey: string
-): Promise<Event | null> => {
-  try {
-    const eventFilter: Filter = {
-      kinds: [RelayList],
-      authors: [hexKey]
-    }
-    const pool = new SimplePool()
-    const event = await pool.get(lookUpRelays, eventFilter)
-    if (event) {
-      await localCache.addUserRelayListMetadata(event)
-    }
-    return event
-  } catch (error) {
-    console.error(error)
-    return null
-  }
-}
-
-/**
- * Attempts to find a relay list in cache. If it is present, it will check that the cached event is not
- * older than one week.
- * @param hexKey
- * @return RelayList event if it's not older than a week; otherwise null
- */
-const findRelayListInCache = async (hexKey: string): Promise<Event | null> => {
-  try {
-    // Attempt to retrieve the metadata event from the local cache
-    const cachedRelayListMetadataEvent =
-      await localCache.getUserRelayListMetadata(hexKey)
-
-    // Check if the cached event is not older than one week
-    if (
-      cachedRelayListMetadataEvent &&
-      isOlderThanOneWeek(cachedRelayListMetadataEvent.cachedAt)
-    ) {
-      return cachedRelayListMetadataEvent.event
-    }
-
-    return null
-  } catch (error) {
-    console.error(error)
-    return null
-  }
-}
-
-/**
- * Transforms a list of relay tags from a Nostr Event to a RelaySet.
- * @param tags
- */
-const getUserRelaySet = (tags: string[][]): RelaySet => {
-  return tags
-    .filter(isRelayTag)
-    .reduce<RelaySet>(toRelaySet, getDefaultRelaySet())
-}
-
-const getDefaultRelaySet = (): RelaySet => ({
-  read: [SIGIT_RELAY],
-  write: [SIGIT_RELAY]
-})
-
-const getDefaultRelayMap = (): RelayMap => ({
-  [SIGIT_RELAY]: { write: true, read: true }
-})
-
-const isOlderThanOneWeek = (cachedAt: number) => {
-  return Date.now() - cachedAt < ONE_WEEK_IN_MS
-}
-
-const isRelayTag = (tag: string[]): boolean => tag[0] === 'r'
-
-const toRelaySet = (obj: RelaySet, tag: string[]): RelaySet => {
-  if (tag.length >= 3) {
-    const marker = tag[2]
-
-    if (marker === READ_MARKER) {
-      obj.read.push(tag[1])
-    } else if (marker === WRITE_MARKER) {
-      obj.write.push(tag[1])
-    }
-  }
-  if (tag.length === 2) {
-    obj.read.push(tag[1])
-    obj.write.push(tag[1])
-  }
-
-  return obj
-}
-
-export {
-  findRelayListAndUpdateCache,
-  findRelayListInCache,
-  getUserRelaySet,
-  getDefaultRelaySet,
-  getDefaultRelayMap,
-  isOlderThanOneWeek
-}

src/utils/sign.ts

@@ -5,10 +5,7 @@ import { Meta } from '../types'
  * This function returns the signature of last signer
  * It will be used in the content of export signature's signedEvent
  */
-const getLastSignersSig = (
+const getLastSignersSig = (meta: Meta, signers: `npub1${string}`[]): string | null => {
-  meta: Meta,
-  signers: `npub1${string}`[]
-): string | null => {
   // if there're no signers then use creator's signature
   if (signers.length === 0) {
     try {
@@ -24,7 +21,9 @@ const getLastSignersSig = (
 
   // get the signature of last signer
   try {
-    const lastSignatureEvent: Event = JSON.parse(meta.docSignatures[lastSigner])
+    const lastSignatureEvent: Event = JSON.parse(
+      meta.docSignatures[lastSigner]
+    )
     return lastSignatureEvent.sig
   } catch (error) {
     return null

src/utils/zip.ts

@@ -36,12 +36,17 @@ const readContentOfZipEntry = async <T extends OutputType>(
 
 const loadZip = async (data: InputFileFormat): Promise<JSZip | null> => {
   try {
-    return await JSZip.loadAsync(data)
+    return await JSZip.loadAsync(data);
   } catch (err: any) {
     console.log('err in loading zip file :>> ', err)
     toast.error(err.message || 'An error occurred in loading zip file.')
-    return null
+    return null;
   }
 }
 
-export { readContentOfZipEntry, loadZip }
+export {
+  readContentOfZipEntry,
+  loadZip
+}
+
+