35 changed files with 2592 additions and 117 deletions
--- a/.eslintrc.cjs
+++ b/.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', 'licenseChecker.cjs', "*.min.js"],
  parser: '@typescript-eslint/parser',
  plugins: ['react-refresh'],
  rules: {
--- a/index.html
+++ b/index.html
@ -8,6 +8,7 @@
  </head>
  <body>
    <div id="root"></div>
+    <script src="/opentimestamps.min.js"></script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -57,6 +57,7 @@
    "react-singleton-hook": "^4.0.1",
    "react-toastify": "10.0.4",
    "redux": "5.0.1",
+    "svgo": "^3.3.2",
    "tseep": "1.2.1"
  },
  "devDependencies": {
@ -66,6 +67,7 @@
    "@types/pdfjs-dist": "^2.10.378",
    "@types/react": "^18.2.56",
    "@types/react-dom": "^18.2.19",
+    "@types/svgo": "^3.0.0",
    "@typescript-eslint/eslint-plugin": "^7.0.2",
    "@typescript-eslint/parser": "^7.0.2",
    "@vitejs/plugin-react": "^4.2.1",
@ -78,6 +80,7 @@
    "ts-css-modules-vite-plugin": "1.0.20",
    "typescript": "^5.2.2",
    "vite": "^5.1.4",
+    "vite-plugin-node-polyfills": "^0.22.0",
    "vite-tsconfig-paths": "4.3.2"
  },
  "lint-staged": {
--- a/public/.well-known/nostr.json
+++ b/public/.well-known/nostr.json
@ -1,15 +1,15 @@
 {
-    "names": {
-        "_": "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90"
-    },
-    "relays": {
-        "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90": [
-            "wss://brb.io",
-            "wss://nostr.v0l.io",
-            "wss://nostr.coinos.io",
-            "wss://rsslay.nostr.net",
-            "wss://relay.current.fyi",
-            "wss://nos.io"
-        ]
-    }
+  "names": {
+    "_": "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90"
+  },
+  "relays": {
+    "6bf1024c6336093b632db2da21b65a44c7d82830454fb4d75634ba281e161c90": [
+      "wss://brb.io",
+      "wss://nostr.v0l.io",
+      "wss://nostr.coinos.io",
+      "wss://rsslay.nostr.net",
+      "wss://relay.current.fyi",
+      "wss://nos.io"
+    ]
+  }
 }
--- a/public/opentimestamps.min.js
+++ b/public/opentimestamps.min.js
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@ -9,7 +9,7 @@ import {
 } from '@mui/material'
 import styles from './style.module.scss'
 import React, { useEffect, useState } from 'react'
-import { ProfileMetadata, User, UserRole } from '../../types'
+import { ProfileMetadata, User, UserRole, KeyboardCode } from '../../types'
 import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
 import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
 import { SigitFile } from '../../utils/file'
@ -27,6 +27,10 @@ const DEFAULT_START_SIZE = {
  height: 40
 } as const

+interface HideSignersForDrawnField {
+  [key: number]: boolean
+}
+
 interface Props {
  users: User[]
  metadata: { [key: string]: ProfileMetadata }
@ -41,6 +45,9 @@ export const DrawPDFFields = (props: Props) => {
  const signers = users.filter((u) => u.role === UserRole.signer)
  const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
  const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
+  const [hideSignersForDrawnField, setHideSignersForDrawnField] =
+    useState<HideSignersForDrawnField>({})
+
  /**
   * Return first pubkey that is present in the signers list
   * @param pubkeys
@ -217,6 +224,12 @@ export const DrawPDFFields = (props: Props) => {
        y: drawingRectangleCoords.y
      }
    })
+
+    // make signers dropdown visible
+    setHideSignersForDrawnField((prev) => ({
+      ...prev,
+      [drawnFieldIndex]: false
+    }))
  }

  /**
@ -338,6 +351,32 @@ export const DrawPDFFields = (props: Props) => {
    event.stopPropagation()
  }

+  /**
+   * Handles Escape button-down event and hides all signers dropdowns
+   * @param event SyntheticEvent event
+   */
+  const handleEscapeButtonDown = (event: React.SyntheticEvent) => {
+    // get native event
+    const { nativeEvent } = event
+
+    //check if event is a keyboard event
+    if (nativeEvent instanceof KeyboardEvent) {
+      // check if event code is Escape
+      if (nativeEvent.code === KeyboardCode.Escape) {
+        // hide all signers dropdowns
+        const newHideSignersForDrawnField: HideSignersForDrawnField = {}
+
+        Object.keys(hideSignersForDrawnField).forEach((key) => {
+          // Object.keys always returns an array of strings,
+          // that is why unknown type is used below
+          newHideSignersForDrawnField[key as unknown as number] = true
+        })
+
+        setHideSignersForDrawnField(newHideSignersForDrawnField)
+      }
+    }
+  }
+
  /**
   * Gets the pointer coordinates relative to a element in the `event` param
   * @param event PointerEvent
@ -361,6 +400,7 @@ export const DrawPDFFields = (props: Props) => {
      rect
    }
  }
+
  /**
   * Renders the pdf pages and drawing elements
   */
@ -375,6 +415,8 @@ export const DrawPDFFields = (props: Props) => {
            <div
              key={pageIndex}
              className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
+              tabIndex={-1}
+              onKeyDown={(event) => handleEscapeButtonDown(event)}
            >
              <img
                onPointerMove={(event) => {
@ -492,62 +534,78 @@ export const DrawPDFFields = (props: Props) => {
                      fileIndex,
                      pageIndex,
                      drawnFieldIndex
-                    ) && (
-                      <div
-                        onPointerDown={handleUserSelectPointerDown}
-                        className={styles.userSelect}
-                      >
-                        <FormControl fullWidth size="small">
-                          <InputLabel id="counterparts">Counterpart</InputLabel>
-                          <Select
-                            value={getAvailableSigner(drawnField.counterpart)}
-                            onChange={(event) => {
-                              drawnField.counterpart = event.target.value
-                              setLastSigner(event.target.value)
-                              refreshPdfFiles()
-                            }}
-                            labelId="counterparts"
-                            label="Counterparts"
-                            sx={{
-                              background: 'white'
-                            }}
-                            renderValue={(value) =>
-                              renderCounterpartValue(value)
-                            }
-                          >
-                            {signers.map((signer, index) => {
-                              const npub = hexToNpub(signer.pubkey)
-                              const metadata = props.metadata[signer.pubkey]
-                              const displayValue = getProfileUsername(
-                                npub,
-                                metadata
-                              )
+                    ) &&
+                      (!hideSignersForDrawnField ||
+                        !hideSignersForDrawnField[drawnFieldIndex]) && (
+                        <div
+                          onPointerDown={handleUserSelectPointerDown}
+                          className={styles.userSelect}
+                        >
+                          <FormControl fullWidth size="small">
+                            <InputLabel id="counterparts">
+                              Counterpart
+                            </InputLabel>
+                            <Select
+                              value={getAvailableSigner(drawnField.counterpart)}
+                              onChange={(event) => {
+                                drawnField.counterpart = event.target.value
+                                setLastSigner(event.target.value)
+                                refreshPdfFiles()
+                              }}
+                              labelId="counterparts"
+                              label="Counterparts"
+                              sx={{
+                                background: 'white'
+                              }}
+                              renderValue={(value) =>
+                                renderCounterpartValue(value)
+                              }
+                            >
+                              {signers.map((signer, index) => {
+                                const npub = hexToNpub(signer.pubkey)
+                                const metadata = props.metadata[signer.pubkey]
+                                const displayValue = getProfileUsername(
+                                  npub,
+                                  metadata
+                                )
+                                // make current signers dropdown visible
+                                if (
+                                  hideSignersForDrawnField[drawnFieldIndex] ===
+                                    undefined ||
+                                  hideSignersForDrawnField[drawnFieldIndex] ===
+                                    true
+                                ) {
+                                  setHideSignersForDrawnField((prev) => ({
+                                    ...prev,
+                                    [drawnFieldIndex]: false
+                                  }))
+                                }

-                              return (
-                                <MenuItem key={index} value={npub}>
-                                  <ListItemIcon>
-                                    <AvatarIconButton
-                                      src={metadata?.picture}
-                                      hexKey={signer.pubkey}
-                                      aria-label={`account of user ${displayValue}`}
-                                      color="inherit"
-                                      sx={{
-                                        padding: 0,
-                                        '> img': {
-                                          width: '30px',
-                                          height: '30px'
-                                        }
-                                      }}
-                                    />
-                                  </ListItemIcon>
-                                  <ListItemText>{displayValue}</ListItemText>
-                                </MenuItem>
-                              )
-                            })}
-                          </Select>
-                        </FormControl>
-                      </div>
-                    )}
+                                return (
+                                  <MenuItem key={index} value={npub}>
+                                    <ListItemIcon>
+                                      <AvatarIconButton
+                                        src={metadata?.picture}
+                                        hexKey={signer.pubkey}
+                                        aria-label={`account of user ${displayValue}`}
+                                        color="inherit"
+                                        sx={{
+                                          padding: 0,
+                                          '> img': {
+                                            width: '30px',
+                                            height: '30px'
+                                          }
+                                        }}
+                                      />
+                                    </ListItemIcon>
+                                    <ListItemText>{displayValue}</ListItemText>
+                                  </MenuItem>
+                                )
+                              })}
+                            </Select>
+                          </FormControl>
+                        </div>
+                      )}
                  </div>
                )
              })}
--- a/src/components/DrawPDFFields/style.module.scss
+++ b/src/components/DrawPDFFields/style.module.scss
@ -13,6 +13,10 @@
  }
 }

+.pdfImageWrapper:focus {
+  outline: none;
+}
+
 .placeholder {
  position: absolute;
  opacity: 0.5;
--- a/src/components/MarkFormField/index.tsx
+++ b/src/components/MarkFormField/index.tsx
@ -7,13 +7,12 @@ import {
  isCurrentValueLast
 } from '../../utils'
 import React, { useState } from 'react'
+import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'

 interface MarkFormFieldProps {
  currentUserMarks: CurrentUserMark[]
  handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
-  handleSelectedMarkValueChange: (
-    event: React.ChangeEvent<HTMLInputElement>
-  ) => void
+  handleSelectedMarkValueChange: (value: string) => void
  handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
  selectedMark: CurrentUserMark
  selectedMarkValue: string
@ -53,6 +52,8 @@ const MarkFormField = ({
  }
  const toggleActions = () => setDisplayActions(!displayActions)
  const markLabel = getToolboxLabelByMarkType(selectedMark.mark.type)
+  const { input: MarkInputComponent } =
+    MARK_TYPE_CONFIG[selectedMark.mark.type] || {}
  return (
    <div className={styles.container}>
      <div className={styles.trigger}>
@ -83,12 +84,14 @@ const MarkFormField = ({
          </div>
          <div className={styles.inputWrapper}>
            <form onSubmit={(e) => handleFormSubmit(e)}>
-              <input
-                className={styles.input}
-                placeholder={markLabel}
-                onChange={handleSelectedMarkValueChange}
-                value={selectedMarkValue}
-              />
+              {typeof MarkInputComponent !== 'undefined' && (
+                <MarkInputComponent
+                  value={selectedMarkValue}
+                  placeholder={markLabel}
+                  handler={handleSelectedMarkValueChange}
+                  userMark={selectedMark}
+                />
+              )}
              <div className={styles.actionsBottom}>
                <button type="submit" className={styles.submitButton}>
                  NEXT
--- a/src/components/MarkInputs/Signature.module.scss
+++ b/src/components/MarkInputs/Signature.module.scss
@ -0,0 +1,44 @@
+@import '../../styles/colors.scss';
+
+$padding: 5px;
+
+.wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: $padding;
+}
+
+.relative {
+  position: relative;
+}
+
+.canvas {
+  outline: 1px solid black;
+  background-color: $body-background-color;
+  cursor: crosshair;
+
+  // Disable panning/zooming when touching canvas element
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.absolute {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.reset {
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: $padding;
+  color: $primary-main;
+
+  &:hover {
+    color: $primary-dark;
+  }
+}
--- a/src/components/MarkInputs/Signature.tsx
+++ b/src/components/MarkInputs/Signature.tsx
@ -0,0 +1,101 @@
+import { useRef, useState } from 'react'
+import { MarkInputProps } from '../../types/mark'
+import { getOptimizedPaths, optimizeSVG } from '../../utils'
+import { faEraser } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import styles from './Signature.module.scss'
+import { MarkRenderSignature } from '../MarkRender/Signature'
+
+export const MarkInputSignature = ({
+  value,
+  handler,
+  userMark
+}: MarkInputProps) => {
+  const location = userMark?.mark.location
+
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+  const [drawing, setDrawing] = useState(false)
+  const [paths, setPaths] = useState<string[]>(value ? JSON.parse(value) : [])
+
+  function update() {
+    if (location && paths) {
+      if (paths.length) {
+        const optimizedSvg = optimizeSVG(location, paths)
+        const extractedPaths = getOptimizedPaths(optimizedSvg)
+        handler(JSON.stringify(extractedPaths))
+      } else {
+        handler('')
+      }
+    }
+  }
+
+  const handlePointerDown = (event: React.PointerEvent) => {
+    const rect = event.currentTarget.getBoundingClientRect()
+    const x = event.clientX - rect.left
+    const y = event.clientY - rect.top
+
+    const ctx = canvasRef.current?.getContext('2d')
+    ctx?.beginPath()
+    ctx?.moveTo(x, y)
+    setPaths([...paths, `M ${x} ${y}`])
+    setDrawing(true)
+  }
+  const handlePointerUp = () => {
+    setDrawing(false)
+    update()
+    const ctx = canvasRef.current?.getContext('2d')
+    ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
+  }
+  const handlePointerMove = (event: React.PointerEvent) => {
+    if (!drawing) return
+    const ctx = canvasRef.current?.getContext('2d')
+    const rect = canvasRef.current?.getBoundingClientRect()
+    const x = event.clientX - rect!.left
+    const y = event.clientY - rect!.top
+
+    ctx?.lineTo(x, y)
+    ctx?.stroke()
+
+    // Collect the path data
+    setPaths((prevPaths) => {
+      const newPaths = [...prevPaths]
+      newPaths[newPaths.length - 1] += ` L ${x} ${y}`
+      return newPaths
+    })
+  }
+
+  const handleReset = () => {
+    setPaths([])
+    setDrawing(false)
+    update()
+    const ctx = canvasRef.current?.getContext('2d')
+    ctx?.clearRect(0, 0, canvasRef.current!.width, canvasRef.current!.height)
+  }
+
+  return (
+    <>
+      <div className={styles.wrapper}>
+        <div className={styles.relative}>
+          <canvas
+            height={location?.height}
+            width={location?.width}
+            ref={canvasRef}
+            className={styles.canvas}
+            onPointerDown={handlePointerDown}
+            onPointerUp={handlePointerUp}
+            onPointerMove={handlePointerMove}
+            onPointerOut={handlePointerUp}
+          ></canvas>
+          {typeof userMark?.mark !== 'undefined' && (
+            <div className={styles.absolute}>
+              <MarkRenderSignature value={value} mark={userMark.mark} />
+            </div>
+          )}
+          <div className={styles.reset}>
+            <FontAwesomeIcon size="sm" icon={faEraser} onClick={handleReset} />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}
--- a/src/components/MarkInputs/Text.tsx
+++ b/src/components/MarkInputs/Text.tsx
@ -0,0 +1,19 @@
+import { MarkInputProps } from '../../types/mark'
+import styles from '../MarkFormField/style.module.scss'
+
+export const MarkInputText = ({
+  value,
+  handler,
+  placeholder
+}: MarkInputProps) => {
+  return (
+    <input
+      className={styles.input}
+      placeholder={placeholder}
+      onChange={(e) => {
+        handler(e.currentTarget.value)
+      }}
+      value={value}
+    />
+  )
+}
--- a/src/components/MarkRender/Signature.tsx
+++ b/src/components/MarkRender/Signature.tsx
@ -0,0 +1,13 @@
+import { MarkRenderProps } from '../../types/mark'
+
+export const MarkRenderSignature = ({ value, mark }: MarkRenderProps) => {
+  const paths = value ? JSON.parse(value) : []
+
+  return (
+    <svg viewBox={`0 0 ${mark.location.width} ${mark.location.height}`}>
+      {paths.map((path: string) => (
+        <path d={path} stroke="black" fill="none" />
+      ))}
+    </svg>
+  )
+}
--- a/src/components/PDFView/PdfMarkItem.tsx
+++ b/src/components/PDFView/PdfMarkItem.tsx
@ -4,6 +4,7 @@ import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
 import { useScale } from '../../hooks/useScale.tsx'
 import { forwardRef } from 'react'
 import { npubToHex } from '../../utils/nostr.ts'
+import { MARK_TYPE_CONFIG } from '../getMarkComponents.tsx'

 interface PdfMarkItemProps {
  userMark: CurrentUserMark
@ -27,6 +28,8 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
    const getMarkValue = () =>
      isEdited() ? selectedMarkValue : userMark.currentValue
    const { from } = useScale()
+    const { render: MarkRenderComponent } =
+      MARK_TYPE_CONFIG[userMark.mark.type] || {}
    return (
      <div
        ref={ref}
@ -47,7 +50,9 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
          fontSize: inPx(from(pageWidth, FONT_SIZE))
        }}
      >
-        {getMarkValue()}
+        {typeof MarkRenderComponent !== 'undefined' && (
+          <MarkRenderComponent value={getMarkValue()} mark={userMark.mark} />
+        )}
      </div>
    )
  }
--- a/src/components/PDFView/PdfMarking.tsx
+++ b/src/components/PDFView/PdfMarking.tsx
@ -117,8 +117,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
  //   setCurrentUserMarks(updatedCurrentUserMarks)
  // }

-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
-    setSelectedMarkValue(event.target.value)
+  const handleChange = (value: string) => setSelectedMarkValue(value)

  return (
    <>
--- a/src/components/UsersDetails.tsx/index.tsx
+++ b/src/components/UsersDetails.tsx/index.tsx
@ -4,6 +4,7 @@ import {
  fromUnixTimestamp,
  hexToNpub,
  npubToHex,
+  SigitStatus,
  SignStatus
 } from '../../utils'
 import { useSigitMeta } from '../../hooks/useSigitMeta'
@ -15,6 +16,8 @@ import {
  faCalendar,
  faCalendarCheck,
  faCalendarPlus,
+  faCheck,
+  faClock,
  faEye,
  faFile,
  faFileCircleExclamation
@ -22,7 +25,7 @@ import {
 import { getExtensionIconLabel } from '../getExtensionIconLabel'
 import { useAppSelector } from '../../hooks/store'
 import { DisplaySigner } from '../DisplaySigner'
-import { Meta } from '../../types'
+import { Meta, OpenTimestamp } from '../../types'
 import { extractFileExtensions } from '../../utils/file'
 import { UserAvatar } from '../UserAvatar'

@ -42,7 +45,9 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
    completedAt,
    parsedSignatureEvents,
    signedStatus,
-    isValid
+    isValid,
+    id,
+    timestamps
  } = useSigitMeta(meta)
  const { usersPubkey } = useAppSelector((state) => state.auth)
  const userCanSign =
@ -51,6 +56,50 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {

  const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))

+  const isTimestampVerified = (
+    timestamps: OpenTimestamp[],
+    nostrId: string
+  ): boolean => {
+    const matched = timestamps.find((t) => t.nostrId === nostrId)
+    return !!(matched && matched.verification)
+  }
+
+  const getOpenTimestampsInfo = (
+    timestamps: OpenTimestamp[],
+    nostrId: string
+  ) => {
+    if (isTimestampVerified(timestamps, nostrId)) {
+      return <FontAwesomeIcon className={styles.ticket} icon={faCheck} />
+    } else {
+      return <FontAwesomeIcon className={styles.ticket} icon={faClock} />
+    }
+  }
+
+  const getCompletedOpenTimestampsInfo = (timestamp: OpenTimestamp) => {
+    if (timestamp.verification) {
+      return <FontAwesomeIcon className={styles.ticket} icon={faCheck} />
+    } else {
+      return <FontAwesomeIcon className={styles.ticket} icon={faClock} />
+    }
+  }
+
+  const getTimestampTooltipTitle = (label: string, isVerified: boolean) => {
+    return `${label} / Open Timestamp ${isVerified ? 'Verified' : 'Pending'}`
+  }
+
+  const isUserSignatureTimestampVerified = () => {
+    if (
+      userCanSign &&
+      hexToNpub(usersPubkey) in parsedSignatureEvents &&
+      timestamps &&
+      timestamps.length > 0
+    ) {
+      const nostrId = parsedSignatureEvents[hexToNpub(usersPubkey)].id
+      return isTimestampVerified(timestamps, nostrId)
+    }
+    return false
+  }
+
  return submittedBy ? (
    <div className={styles.container}>
      <div className={styles.section}>
@ -115,19 +164,35 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
        <p>Details</p>

        <Tooltip
-          title={'Publication date'}
+          title={getTimestampTooltipTitle(
+            'Publication date',
+            !!(timestamps && id && isTimestampVerified(timestamps, id))
+          )}
          placement="top"
          arrow
          disableInteractive
        >
          <span className={styles.detailsItem}>
            <FontAwesomeIcon icon={faCalendarPlus} />{' '}
-            {createdAt ? formatTimestamp(createdAt) : <>&mdash;</>}
+            {createdAt ? formatTimestamp(createdAt) : <>&mdash;</>}{' '}
+            {timestamps &&
+              timestamps.length > 0 &&
+              id &&
+              getOpenTimestampsInfo(timestamps, id)}
          </span>
        </Tooltip>

        <Tooltip
-          title={'Completion date'}
+          title={getTimestampTooltipTitle(
+            'Completion date',
+            !!(
+              signedStatus === SigitStatus.Complete &&
+              completedAt &&
+              timestamps &&
+              timestamps.length > 0 &&
+              timestamps[timestamps.length - 1].verification
+            )
+          )}
          placement="top"
          arrow
          disableInteractive
@ -135,13 +200,26 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
          <span className={styles.detailsItem}>
            <FontAwesomeIcon icon={faCalendarCheck} />{' '}
            {completedAt ? formatTimestamp(completedAt) : <>&mdash;</>}
+            {signedStatus === SigitStatus.Complete &&
+              completedAt &&
+              timestamps &&
+              timestamps.length > 0 && (
+                <span className={styles.ticket}>
+                  {getCompletedOpenTimestampsInfo(
+                    timestamps[timestamps.length - 1]
+                  )}
+                </span>
+              )}
          </span>
        </Tooltip>

        {/* User signed date */}
        {userCanSign ? (
          <Tooltip
-            title={'Your signature date'}
+            title={getTimestampTooltipTitle(
+              'Your signature date',
+              isUserSignatureTimestampVerified()
+            )}
            placement="top"
            arrow
            disableInteractive
@ -161,6 +239,16 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
              ) : (
                <>&mdash;</>
              )}
+              {hexToNpub(usersPubkey) in parsedSignatureEvents &&
+                timestamps &&
+                timestamps.length > 0 && (
+                  <span className={styles.ticket}>
+                    {getOpenTimestampsInfo(
+                      timestamps,
+                      parsedSignatureEvents[hexToNpub(usersPubkey)].id
+                    )}
+                  </span>
+                )}
            </span>
          </Tooltip>
        ) : null}
--- a/src/components/UsersDetails.tsx/style.module.scss
+++ b/src/components/UsersDetails.tsx/style.module.scss
@ -31,8 +31,6 @@
  padding: 5px;

  display: flex;
-  align-items: center;
-  justify-content: start;

  > :first-child {
    padding: 5px;
@ -44,3 +42,7 @@
    color: white;
  }
 }
+
+.ticket {
+  margin-left: auto;
+}
--- a/src/components/getMarkComponents.tsx
+++ b/src/components/getMarkComponents.tsx
@ -0,0 +1,16 @@
+import { MarkType } from '../types/drawing'
+import { MarkConfigs } from '../types/mark'
+import { MarkInputSignature } from './MarkInputs/Signature'
+import { MarkInputText } from './MarkInputs/Text'
+import { MarkRenderSignature } from './MarkRender/Signature'
+
+export const MARK_TYPE_CONFIG: MarkConfigs = {
+  [MarkType.TEXT]: {
+    input: MarkInputText,
+    render: ({ value }) => <>{value}</>
+  },
+  [MarkType.SIGNATURE]: {
+    input: MarkInputSignature,
+    render: MarkRenderSignature
+  }
+}
--- a/src/hooks/useSigitMeta.tsx
+++ b/src/hooks/useSigitMeta.tsx
@ -3,7 +3,8 @@ import {
  CreateSignatureEventContent,
  DocSignatureEvent,
  Meta,
-  SignedEventContent
+  SignedEventContent,
+  OpenTimestamp
 } from '../types'
 import { Mark } from '../types/mark'
 import {
@ -58,6 +59,8 @@ export interface FlatMeta
  signersStatus: {
    [signer: `npub1${string}`]: SignStatus
  }
+
+  timestamps?: OpenTimestamp[]
 }

 /**
@ -162,7 +165,6 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
            setEncryptionKey(decrypted)
          }
        }
-
        // Temp. map to hold events and signers
        const parsedSignatureEventsMap = new Map<
          `npub1${string}`,
@ -276,6 +278,7 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
    createSignature: meta?.createSignature,
    docSignatures: meta?.docSignatures,
    keys: meta?.keys,
+    timestamps: meta?.timestamps,
    isValid,
    kind,
    tags,
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@ -19,8 +19,10 @@ import {
  CreateSignatureEventContent,
  Meta,
  ProfileMetadata,
+  SignedEvent,
  User,
-  UserRole
+  UserRole,
+  KeyboardCode
 } from '../../types'
 import {
  encryptArrayBuffer,
@ -62,6 +64,7 @@ import {
 } from '@fortawesome/free-solid-svg-icons'
 import { getSigitFile, SigitFile } from '../../utils/file.ts'
 import _ from 'lodash'
+import { generateTimestamp } from '../../utils/opentimestamps.ts'

 export const CreatePage = () => {
  const navigate = useNavigate()
@ -85,7 +88,10 @@ export const CreatePage = () => {

  const [userInput, setUserInput] = useState('')
  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+    if (
+      event.code === KeyboardCode.Enter ||
+      event.code === KeyboardCode.NumpadEnter
+    ) {
      event.preventDefault()
      handleAddUser()
    }
@ -642,6 +648,11 @@ export const CreatePage = () => {
    return receivers.map((receiver) => sendNotification(receiver, meta))
  }

+  const extractNostrId = (stringifiedEvent: string): string => {
+    const e = JSON.parse(stringifiedEvent) as SignedEvent
+    return e.id
+  }
+
  const handleCreate = async () => {
    try {
      if (!validateInputs()) return
@ -691,6 +702,12 @@ export const CreatePage = () => {
        const keys = await generateKeys(pubkeys, encryptionKey)
        if (!keys) return

+        setLoadingSpinnerDesc('Generating an open timestamp.')
+
+        const timestamp = await generateTimestamp(
+          extractNostrId(createSignature)
+        )
+
        const meta: Meta = {
          createSignature,
          keys,
@ -698,6 +715,10 @@ export const CreatePage = () => {
          docSignatures: {}
        }

+        if (timestamp) {
+          meta.timestamps = [timestamp]
+        }
+
        setLoadingSpinnerDesc('Updating user app data')
        const event = await updateUsersAppData(meta)
        if (!event) return
--- a/src/pages/nostr/index.tsx
+++ b/src/pages/nostr/index.tsx
@ -9,6 +9,7 @@ import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { AuthController } from '../../controllers'
 import { updateKeyPair, updateLoginMethod } from '../../store/actions'
+import { KeyboardCode } from '../../types'
 import { LoginMethod } from '../../store/auth/types'
 import { hexToBytes } from '@noble/hashes/utils'

@ -52,7 +53,10 @@ export const Nostr = () => {
   * Call login function when enter is pressed
   */
  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
+    if (
+      event.code === KeyboardCode.Enter ||
+      event.code === KeyboardCode.NumpadEnter
+    ) {
      event.preventDefault()
      login()
    }
--- a/src/pages/sign/index.tsx
+++ b/src/pages/sign/index.tsx
@ -53,6 +53,7 @@ import {
  SigitFile
 } from '../../utils/file.ts'
 import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
+import { generateTimestamp } from '../../utils/opentimestamps.ts'

 enum SignedStatus {
  Fully_Signed,
@ -566,6 +567,14 @@ export const SignPage = () => {

    const updatedMeta = updateMetaSignatures(meta, signedEvent)

+    setLoadingSpinnerDesc('Generating an open timestamp.')
+
+    const timestamp = await generateTimestamp(signedEvent.id)
+    if (timestamp) {
+      updatedMeta.timestamps = [...(updatedMeta.timestamps || []), timestamp]
+      updatedMeta.modifiedAt = unixNow()
+    }
+
    if (await isOnline()) {
      await handleOnlineFlow(updatedMeta)
    } else {
--- a/src/pages/verify/index.tsx
+++ b/src/pages/verify/index.tsx
@ -5,7 +5,13 @@ import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { NostrController } from '../../controllers'
-import { DocSignatureEvent, Meta } from '../../types'
+import {
+  DocSignatureEvent,
+  Meta,
+  SignedEvent,
+  OpenTimestamp,
+  OpenTimestampUpgradeVerifyResponse
+} from '../../types'
 import {
  decryptArrayBuffer,
  getHash,
@ -14,7 +20,10 @@ import {
  parseJson,
  readContentOfZipEntry,
  signEventForMetaFile,
-  getCurrentUserFiles
+  getCurrentUserFiles,
+  updateUsersAppData,
+  npubToHex,
+  sendNotification
 } from '../../utils'
 import styles from './style.module.scss'
 import { useLocation, useParams } from 'react-router-dom'
@ -44,6 +53,9 @@ import {
  faFile,
  faFileDownload
 } from '@fortawesome/free-solid-svg-icons'
+import { upgradeAndVerifyTimestamp } from '../../utils/opentimestamps.ts'
+import _ from 'lodash'
+import { MARK_TYPE_CONFIG } from '../../components/getMarkComponents.tsx'

 interface PdfViewProps {
  files: CurrentUserFile[]
@ -103,6 +115,8 @@ const SlimPdfView = ({
                          alt={`page ${i} of ${file.name}`}
                        />
                        {marks.map((m) => {
+                          const { render: MarkRenderComponent } =
+                            MARK_TYPE_CONFIG[m.type] || {}
                          return (
                            <div
                              className={`file-mark ${styles.mark}`}
@ -118,7 +132,9 @@ const SlimPdfView = ({
                                fontSize: inPx(from(page.width, FONT_SIZE))
                              }}
                            >
-                              {m.value}
+                              {typeof MarkRenderComponent !== 'undefined' && (
+                                <MarkRenderComponent value={m.value} mark={m} />
+                              )}
                            </div>
                          )
                        })}
@ -194,7 +210,8 @@ export const VerifyPage = () => {
    signers,
    viewers,
    fileHashes,
-    parsedSignatureEvents
+    parsedSignatureEvents,
+    timestamps
  } = useSigitMeta(meta)

  const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
@ -204,6 +221,16 @@ export const VerifyPage = () => {
    [key: string]: string | null
  }>({})

+  const signTimestampEvent = async (signerContent: {
+    timestamps: OpenTimestamp[]
+  }): Promise<SignedEvent | null> => {
+    return await signEventForMetaFile(
+      JSON.stringify(signerContent),
+      nostrController,
+      setIsLoading
+    )
+  }
+
  useEffect(() => {
    if (Object.entries(files).length > 0) {
      const tmp = getCurrentUserFiles(files, currentFileHashes, fileHashes)
@ -211,6 +238,147 @@ export const VerifyPage = () => {
    }
  }, [currentFileHashes, fileHashes, files])

+  useEffect(() => {
+    if (
+      timestamps &&
+      timestamps.length > 0 &&
+      usersPubkey &&
+      submittedBy &&
+      parsedSignatureEvents
+    ) {
+      if (timestamps.every((t) => !!t.verification)) {
+        return
+      }
+      const upgradeT = async (timestamps: OpenTimestamp[]) => {
+        try {
+          setLoadingSpinnerDesc('Upgrading your timestamps.')
+
+          const findCreatorTimestamp = (timestamps: OpenTimestamp[]) => {
+            if (usersPubkey === submittedBy) {
+              return timestamps[0]
+            }
+          }
+
+          const findSignerTimestamp = (timestamps: OpenTimestamp[]) => {
+            const parsedEvent = parsedSignatureEvents[hexToNpub(usersPubkey)]
+            if (parsedEvent?.id) {
+              return timestamps.find((t) => t.nostrId === parsedEvent.id)
+            }
+          }
+
+          /**
+           * Checks if timestamp verification has been achieved for the first time.
+           * Note that the upgrade flag is separate from verification. It is possible for a timestamp
+           * to not be upgraded, but to be verified for the first time.
+           * @param upgradedTimestamp
+           * @param timestamps
+           */
+          const isNewlyVerified = (
+            upgradedTimestamp: OpenTimestampUpgradeVerifyResponse,
+            timestamps: OpenTimestamp[]
+          ) => {
+            if (!upgradedTimestamp.verified) return false
+            const oldT = timestamps.find(
+              (t) => t.nostrId === upgradedTimestamp.timestamp.nostrId
+            )
+            if (!oldT) return false
+            if (!oldT.verification && upgradedTimestamp.verified) return true
+          }
+
+          const userTimestamps: OpenTimestamp[] = []
+
+          const creatorTimestamp = findCreatorTimestamp(timestamps)
+          if (creatorTimestamp) {
+            userTimestamps.push(creatorTimestamp)
+          }
+
+          const signerTimestamp = findSignerTimestamp(timestamps)
+          if (signerTimestamp) {
+            userTimestamps.push(signerTimestamp)
+          }
+
+          if (userTimestamps.every((t) => !!t.verification)) {
+            return
+          }
+
+          const upgradedUserTimestamps = await Promise.all(
+            userTimestamps.map(upgradeAndVerifyTimestamp)
+          )
+
+          const upgradedTimestamps = upgradedUserTimestamps
+            .filter((t) => t.upgraded || isNewlyVerified(t, userTimestamps))
+            .map((t) => {
+              const timestamp: OpenTimestamp = { ...t.timestamp }
+              if (t.verified) {
+                timestamp.verification = t.verification
+              }
+              return timestamp
+            })
+
+          if (upgradedTimestamps.length === 0) {
+            return
+          }
+
+          setLoadingSpinnerDesc('Signing a timestamp upgrade event.')
+
+          const signedEvent = await signTimestampEvent({
+            timestamps: upgradedTimestamps
+          })
+          if (!signedEvent) return
+
+          const finalTimestamps = timestamps.map((t) => {
+            const upgraded = upgradedTimestamps.find(
+              (tu) => tu.nostrId === t.nostrId
+            )
+            if (upgraded) {
+              return {
+                ...upgraded,
+                signature: JSON.stringify(signedEvent, null, 2)
+              }
+            }
+            return t
+          })
+
+          const updatedMeta = _.cloneDeep(meta)
+          updatedMeta.timestamps = [...finalTimestamps]
+          updatedMeta.modifiedAt = unixNow()
+
+          const updatedEvent = await updateUsersAppData(updatedMeta)
+          if (!updatedEvent) return
+
+          const userSet = new Set<`npub1${string}`>()
+          signers.forEach((signer) => {
+            if (signer !== usersPubkey) {
+              userSet.add(signer)
+            }
+          })
+
+          viewers.forEach((viewer) => {
+            userSet.add(viewer)
+          })
+
+          const users = Array.from(userSet)
+          const promises = users.map((user) =>
+            sendNotification(npubToHex(user)!, updatedMeta)
+          )
+
+          await Promise.all(promises)
+
+          toast.success('Timestamp updates have been sent successfully.')
+
+          setMeta(meta)
+        } catch (err) {
+          console.error(err)
+          toast.error(
+            'There was an error upgrading or verifying your timestamps!'
+          )
+        }
+      }
+      upgradeT(timestamps)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [timestamps, submittedBy, parsedSignatureEvents])
+
  useEffect(() => {
    if (metaInNavState && encryptionKey) {
      const processSigit = async () => {
--- a/src/types/core.ts
+++ b/src/types/core.ts
@ -18,6 +18,7 @@ export interface Meta {
  docSignatures: { [key: `npub1${string}`]: string }
  exportSignature?: string
  keys?: { sender: string; keys: { [user: `npub1${string}`]: string } }
+  timestamps?: OpenTimestamp[]
 }

 export interface CreateSignatureEventContent {
@ -39,6 +40,25 @@ export interface Sigit {
  meta: Meta
 }

+export interface OpenTimestamp {
+  nostrId: string
+  value: string
+  verification?: OpenTimestampVerification
+  signature?: string
+}
+
+export interface OpenTimestampVerification {
+  height: number
+  timestamp: number
+}
+
+export interface OpenTimestampUpgradeVerifyResponse {
+  timestamp: OpenTimestamp
+  upgraded: boolean
+  verified?: boolean
+  verification?: OpenTimestampVerification
+}
+
 export interface UserAppData {
  /**
   * Key will be id of create signature
--- a/src/types/event.ts
+++ b/src/types/event.ts
@ -0,0 +1,5 @@
+export enum KeyboardCode {
+  Escape = 'Escape',
+  Enter = 'Enter',
+  NumpadEnter = 'NumpadEnter'
+}
--- a/src/types/index.ts
+++ b/src/types/index.ts
@ -4,3 +4,4 @@ export * from './nostr'
 export * from './profile'
 export * from './relay'
 export * from './zip'
+export * from './event'
--- a/src/types/mark.ts
+++ b/src/types/mark.ts
@ -28,3 +28,24 @@ export interface MarkRect {
  width: number
  height: number
 }
+
+export interface MarkInputProps {
+  value: string
+  handler: (value: string) => void
+  placeholder?: string
+  userMark?: CurrentUserMark
+}
+
+export interface MarkRenderProps {
+  value?: string
+  mark: Mark
+}
+
+export interface MarkConfig {
+  input: React.FC<MarkInputProps>
+  render?: React.FC<MarkRenderProps>
+}
+
+export type MarkConfigs = {
+  [key in MarkType]?: MarkConfig
+}
--- a/src/types/opentimestamps.d.ts
+++ b/src/types/opentimestamps.d.ts
@ -0,0 +1,38 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+interface OpenTimestamps {
+  // Create a detached timestamp file from a buffer or file hash
+  DetachedTimestampFile: {
+    fromHash(op: any, hash: Uint8Array): any
+    fromBytes(op: any, buffer: Uint8Array): any
+    deserialize(buffer: any): any
+  }
+
+  // Stamp the provided timestamp file and return a Promise
+  stamp(file: any): Promise<void>
+
+  // Verify the provided timestamp proof file
+  verify(
+    ots: string,
+    file: string
+  ): Promise<TimestampVerficiationResponse | Record<string, never>>
+
+  // Other utilities or operations (like OpSHA256, serialization)
+  Ops: {
+    OpSHA256: any
+    OpSHA1?: any
+  }
+
+  Context: {
+    StreamSerialization: any
+  }
+
+  // Load a timestamp file from a buffer
+  deserialize(bytes: Uint8Array): any
+
+  // Other potential methods based on repo functions
+  upgrade(file: any): Promise<boolean>
+}
+
+interface TimestampVerficiationResponse {
+  bitcoin: { timestamp: number; height: number }
+}
--- a/src/types/system/index.d.ts
+++ b/src/types/system/index.d.ts
@ -3,5 +3,6 @@ import type { WindowNostr } from 'nostr-tools/nip07'
 declare global {
  interface Window {
    nostr?: WindowNostr
+    OpenTimestamps: OpenTimestamps
  }
 }
--- a/src/utils/mark.ts
+++ b/src/utils/mark.ts
@ -1,4 +1,4 @@
-import { CurrentUserMark, Mark } from '../types/mark.ts'
+import { CurrentUserMark, Mark, MarkLocation } from '../types/mark.ts'
 import { hexToNpub } from './nostr.ts'
 import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
@ -24,6 +24,7 @@ import {
  faStamp,
  faTableCellsLarge
 } from '@fortawesome/free-solid-svg-icons'
+import { Config, optimize } from 'svgo'

 /**
 * Takes in an array of Marks already filtered by User.
@ -158,6 +159,11 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
    icon: faT,
    label: 'Text'
  },
+  {
+    identifier: MarkType.SIGNATURE,
+    icon: faSignature,
+    label: 'Signature'
+  },
  {
    identifier: MarkType.FULLNAME,
    icon: faIdCard,
@ -170,12 +176,6 @@ export const DEFAULT_TOOLBOX: DrawTool[] = [
    label: 'Job Title',
    isComingSoon: true
  },
-  {
-    identifier: MarkType.SIGNATURE,
-    icon: faSignature,
-    label: 'Signature',
-    isComingSoon: true
-  },
  {
    identifier: MarkType.DATETIME,
    icon: faClock,
@ -266,6 +266,24 @@ export const getToolboxLabelByMarkType = (markType: MarkType) => {
  return DEFAULT_TOOLBOX.find((t) => t.identifier === markType)?.label
 }

+export const optimizeSVG = (location: MarkLocation, paths: string[]) => {
+  const svgContent = `<svg xmlns="http://www.w3.org/2000/svg" width="${location.width}" height="${location.height}">${paths.map((path) => `<path d="${path}" stroke="black" fill="none" />`).join('')}</svg>`
+  const optimizedSVG = optimize(svgContent, {
+    multipass: true, // Optimize multiple times if needed
+    floatPrecision: 2 // Adjust precision
+  } as Config)
+
+  return optimizedSVG.data
+}
+
+export const getOptimizedPaths = (svgString: string) => {
+  const regex = / d="([^"]*)"/g
+  const matches = [...svgString.matchAll(regex)]
+  const pathValues = matches.map((match) => match[1])
+
+  return pathValues
+}
+
 export {
  getCurrentUserMarks,
  filterMarksByPubkey,
--- a/src/utils/opentimestamps.ts
+++ b/src/utils/opentimestamps.ts
@ -0,0 +1,119 @@
+import { OpenTimestamp, OpenTimestampUpgradeVerifyResponse } from '../types'
+import { retry } from './retry.ts'
+import { bytesToHex } from '@noble/hashes/utils'
+import { utf8Encoder } from 'nostr-tools/utils'
+import { hexStringToUint8Array } from './string.ts'
+
+/**
+ * Generates a timestamp for the provided nostr event ID.
+ * @returns Timestamp with its value and the nostr event ID.
+ */
+export const generateTimestamp = async (
+  nostrId: string
+): Promise<OpenTimestamp | undefined> => {
+  try {
+    return {
+      value: await retry(() => timestamp(nostrId)),
+      nostrId: nostrId
+    }
+  } catch (error) {
+    console.error(error)
+    return
+  }
+}
+
+/**
+ * Attempts to upgrade (i.e. add Bitcoin blockchain attestations) and verify the provided timestamp.
+ * Returns the same timestamp, alongside additional information required to decide if any further
+ * timestamp updates are required.
+ * @param timestamp
+ */
+export const upgradeAndVerifyTimestamp = async (
+  timestamp: OpenTimestamp
+): Promise<OpenTimestampUpgradeVerifyResponse> => {
+  const upgradedResult = await upgrade(timestamp)
+  return await verify(upgradedResult)
+}
+
+/**
+ * Attempts to upgrade a timestamp. If an upgrade is available,
+ * it will add new data to detachedTimestamp.
+ * The upgraded flag indicates if an upgrade has been performed.
+ * @param t - timestamp
+ */
+export const upgrade = async (
+  t: OpenTimestamp
+): Promise<OpenTimestampUpgradeVerifyResponse> => {
+  const detachedTimestamp =
+    window.OpenTimestamps.DetachedTimestampFile.deserialize(
+      hexStringToUint8Array(t.value)
+    )
+
+  const changed: boolean =
+    await window.OpenTimestamps.upgrade(detachedTimestamp)
+  if (changed) {
+    const updated = detachedTimestamp.serializeToBytes()
+
+    const value = {
+      ...t,
+      timestamp: bytesToHex(updated)
+    }
+
+    return {
+      timestamp: value,
+      upgraded: true
+    }
+  }
+  return {
+    timestamp: t,
+    upgraded: false
+  }
+}
+
+/**
+ * Attempts to verify a timestamp. If verification is available,
+ * it will be included in the returned object.
+ * @param t - timestamp
+ */
+export const verify = async (
+  t: OpenTimestampUpgradeVerifyResponse
+): Promise<OpenTimestampUpgradeVerifyResponse> => {
+  const detachedNostrId = window.OpenTimestamps.DetachedTimestampFile.fromBytes(
+    new window.OpenTimestamps.Ops.OpSHA256(),
+    utf8Encoder.encode(t.timestamp.nostrId)
+  )
+
+  const detachedTimestamp =
+    window.OpenTimestamps.DetachedTimestampFile.deserialize(
+      hexStringToUint8Array(t.timestamp.value)
+    )
+
+  const res = await window.OpenTimestamps.verify(
+    detachedTimestamp,
+    detachedNostrId
+  )
+
+  return {
+    ...t,
+    verified: !!res.bitcoin,
+    verification: res?.bitcoin || null
+  }
+}
+
+/**
+ * Timestamps a nostrId.
+ * @param nostrId
+ */
+const timestamp = async (nostrId: string): Promise<string> => {
+  const detachedTimestamp =
+    window.OpenTimestamps.DetachedTimestampFile.fromBytes(
+      new window.OpenTimestamps.Ops.OpSHA256(),
+      utf8Encoder.encode(nostrId)
+    )
+
+  await window.OpenTimestamps.stamp(detachedTimestamp)
+  const ctx = new window.OpenTimestamps.Context.StreamSerialization()
+  detachedTimestamp.serialize(ctx)
+  const timestampBytes = ctx.getOutput()
+  return bytesToHex(timestampBytes)
+}
--- a/src/utils/pdf.ts
+++ b/src/utils/pdf.ts
@ -1,4 +1,4 @@
-import { PdfPage } from '../types/drawing.ts'
+import { MarkType, PdfPage } from '../types/drawing.ts'
 import { PDFDocument, PDFFont, PDFPage, rgb } from 'pdf-lib'
 import { Mark } from '../types/mark.ts'
 import * as PDFJS from 'pdfjs-dist'
@ -132,9 +132,17 @@ export const addMarks = async (

  for (let i = 0; i < pages.length; i++) {
    if (marksPerPage && Object.hasOwn(marksPerPage, i)) {
-      marksPerPage[i]?.forEach((mark) =>
-        drawMarkText(mark, pages[i], robotoFont)
-      )
+      marksPerPage[i]?.forEach((mark) => {
+        switch (mark.type) {
+          case MarkType.SIGNATURE:
+            drawSignatureText(mark, pages[i])
+            break
+
+          default:
+            drawMarkText(mark, pages[i], robotoFont)
+            break
+        }
+      })
    }
  }

@ -245,3 +253,19 @@ async function embedFont(pdf: PDFDocument) {
  const embeddedFont = await pdf.embedFont(fontBytes)
  return embeddedFont
 }
+
+const drawSignatureText = (mark: Mark, page: PDFPage) => {
+  const { location } = mark
+  const { height } = page.getSize()
+
+  // Convert the mark location origin (top, left) to PDF origin (bottom, left)
+  const x = location.left
+  const y = height - location.top
+
+  if (hasValue(mark)) {
+    const paths = JSON.parse(mark.value!)
+    paths.forEach((d: string) => {
+      page.drawSvgPath(d, { x, y })
+    })
+  }
+}
--- a/src/utils/retry.ts
+++ b/src/utils/retry.ts
@ -0,0 +1,25 @@
+export const retryAll = async <T>(
+  promises: (() => Promise<T>)[],
+  retries: number = 3,
+  delay: number = 1000
+) => {
+  const wrappedPromises = promises.map((fn) => retry(fn, retries, delay))
+  return Promise.allSettled(wrappedPromises)
+}
+
+export const retry = async <T>(
+  fn: () => Promise<T>,
+  retries: number = 3,
+  delay: number = 1000
+): Promise<T> => {
+  try {
+    return await fn()
+  } catch (err) {
+    if (retries === 0) {
+      return Promise.reject(err)
+    }
+    return new Promise((resolve) =>
+      setTimeout(() => resolve(retry(fn, retries - 1)), delay)
+    )
+  }
+}
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@ -119,3 +119,15 @@ export const settleAllFullfilfedPromises = async <Item, FulfilledItem = Item>(
    return acc
  }, [])
 }
+
+export const isPromiseFulfilled = <T>(
+  result: PromiseSettledResult<T>
+): result is PromiseFulfilledResult<T> => {
+  return result.status === 'fulfilled'
+}
+
+export const isPromiseRejected = <T>(
+  result: PromiseSettledResult<T>
+): result is PromiseRejectedResult => {
+  return result.status === 'rejected'
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@ -1,9 +1,16 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import { nodePolyfills } from 'vite-plugin-node-polyfills'

 export default defineConfig({
-  plugins: [react(), tsconfigPaths()],
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    nodePolyfills({
+      include: ['os']
+    })
+  ],
  build: {
    target: 'ES2022'
  }