Merge pull request 'Create page: search users' (#259 ) from issue-56 into staging

Reviewed-on: #259
fix: removed viewer/signer button
2024-11-21 10:18:32 +00:00 · 2024-11-21 11:06:31 +01:00 · 2024-11-21 09:20:20 +01:00 · 2024-11-19 12:03:41 +01:00 · 2024-11-04 07:43:58 +00:00 · 2024-11-04 10:42:55 +03:00
41 changed files with 2944 additions and 471 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/assets/images/nostr-logo.png
+++ b/src/assets/images/nostr-logo.png
--- 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
@ -1,10 +1,17 @@
 import styles from './style.module.scss'
-import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
+import {
+  Box,
+  Button,
+  CircularProgress,
+  FormHelperText,
+  TextField,
+  Tooltip
+} from '@mui/material'
 import type { Identifier, XYCoord } from 'dnd-core'
 import saveAs from 'file-saver'
 import JSZip from 'jszip'
 import { Event, kinds } from 'nostr-tools'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { DndProvider, useDrag, useDrop } from 'react-dnd'
 import { MultiBackend } from 'react-dnd-multi-backend'
 import { HTML5toTouch } from 'rdndmb-html5-to-touch'
@ -13,12 +20,18 @@ import { useLocation, useNavigate } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { UserAvatar } from '../../components/UserAvatar'
-import { MetadataController, NostrController } from '../../controllers'
+import {
+  MetadataController,
+  NostrController,
+  RelayController
+} from '../../controllers'
 import { appPrivateRoutes } from '../../routes'
 import {
  CreateSignatureEventContent,
+  KeyboardCode,
  Meta,
  ProfileMetadata,
+  SignedEvent,
  User,
  UserRole
 } from '../../types'
@ -39,9 +52,7 @@ import {
  updateUsersAppData,
  uploadToFileStorage,
  DEFAULT_TOOLBOX,
-  settleAllFullfilfedPromises,
-  sendPrivateDirectMessage,
-  parseNostrEvent
+  settleAllFullfilfedPromises
 } from '../../utils'
 import { Container } from '../../components/Container'
 import fileListStyles from '../../components/FileList/style.module.scss'
@ -58,13 +69,19 @@ import {
  faGripLines,
  faPen,
  faPlus,
+  faSearch,
  faToolbox,
  faTrash,
  faUpload
 } from '@fortawesome/free-solid-svg-icons'
 import { getSigitFile, SigitFile } from '../../utils/file.ts'
-import _ from 'lodash'
-import { SendDMError } from '../../types/errors/SendDMError.ts'
+import { generateTimestamp } from '../../utils/opentimestamps.ts'
+import { Autocomplete } from '@mui/lab'
+import _, { truncate } from 'lodash'
+import * as React from 'react'
+import { AvatarIconButton } from '../../components/UserAvatarIconButton'
+
+type FoundUser = Event & { npub: string }

 export const CreatePage = () => {
  const navigate = useNavigate()
@ -87,20 +104,16 @@ export const CreatePage = () => {
  }

  const [userInput, setUserInput] = useState('')
-  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (event.code === 'Enter' || event.code === 'NumpadEnter') {
-      event.preventDefault()
-      handleAddUser()
-    }
-  }
-  const [userRole, setUserRole] = useState<UserRole>(UserRole.signer)
+  const [userSearchInput, setUserSearchInput] = useState('')
+
+  const [userRole] = useState<UserRole>(UserRole.signer)
  const [error, setError] = useState<string>()

  const [users, setUsers] = useState<User[]>([])
  const signers = users.filter((u) => u.role === UserRole.signer)
  const viewers = users.filter((u) => u.role === UserRole.viewer)

-  const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)
+  const usersPubkey = useAppSelector((state) => state.auth.usersPubkey)!

  const nostrController = NostrController.getInstance()

@ -109,10 +122,129 @@ export const CreatePage = () => {
  )
  const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
  const [parsingPdf, setIsParsing] = useState<boolean>(false)
+
+  const searchFieldRef = useRef<HTMLInputElement>(null)
+
+  const [selectedTool, setSelectedTool] = useState<DrawTool>()
+
+  const [foundUsers, setFoundUsers] = useState<FoundUser[]>([])
+  const [searchUsersLoading, setSearchUsersLoading] = useState<boolean>(false)
+  const [pastedUserNpubOrNip05, setPastedUserNpubOrNip05] = useState<
+    string | undefined
+  >()
+
+  /**
+   * Fired when user select
+   */
+  const handleSearchUserChange = useCallback(
+    (_event: React.SyntheticEvent, value: string | FoundUser | null) => {
+      if (typeof value === 'object') {
+        const ndkEvent = value as FoundUser
+        if (ndkEvent?.pubkey) {
+          setUserInput(hexToNpub(ndkEvent.pubkey))
+        }
+      }
+    },
+    [setUserInput]
+  )
+
+  const handleSearchUsers = async (searchValue?: string) => {
+    const searchString = searchValue || userSearchInput || undefined
+
+    if (!searchString) return
+
+    setSearchUsersLoading(true)
+
+    const relayController = RelayController.getInstance()
+    const metadataController = MetadataController.getInstance()
+
+    const relaySet = await metadataController.findRelayListMetadata(usersPubkey)
+    const searchTerm = searchString.trim()
+
+    relayController
+      .fetchEvents(
+        {
+          kinds: [0],
+          search: searchTerm
+        },
+        [...relaySet.write]
+      )
+      .then((events) => {
+        console.log('events', events)
+
+        const fineFilteredEvents: FoundUser[] = events
+          .filter((event) => {
+            const lowercaseContent = event.content.toLowerCase()
+
+            return (
+              lowercaseContent.includes(
+                `"name":"${searchTerm.toLowerCase()}"`
+              ) ||
+              lowercaseContent.includes(
+                `"display_name":"${searchTerm.toLowerCase()}"`
+              ) ||
+              lowercaseContent.includes(
+                `"username":"${searchTerm.toLowerCase()}"`
+              ) ||
+              lowercaseContent.includes(`"nip05":"${searchTerm.toLowerCase()}"`)
+            )
+          })
+          .reduce((uniqueEvents: FoundUser[], event: Event) => {
+            if (!uniqueEvents.some((e: Event) => e.pubkey === event.pubkey)) {
+              uniqueEvents.push({
+                ...event,
+                npub: hexToNpub(event.pubkey)
+              })
+            }
+            return uniqueEvents
+          }, [])
+
+        console.log('fineFilteredEvents', fineFilteredEvents)
+        setFoundUsers(fineFilteredEvents)
+      })
+      .catch((error) => {
+        console.error(error)
+      })
+      .finally(() => {
+        setSearchUsersLoading(false)
+      })
+  }
+
+  useEffect(() => {
+    setTimeout(() => {
+      if (foundUsers.length) {
+        if (searchFieldRef.current) {
+          searchFieldRef.current.blur()
+          searchFieldRef.current.focus()
+        }
+      }
+    })
+  }, [foundUsers])
+
+  const handleInputKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (
+      event.code === KeyboardCode.Enter ||
+      event.code === KeyboardCode.NumpadEnter
+    ) {
+      event.preventDefault()
+
+      // If pasted user npub of nip05 is present, we just add the user to the counterparts list
+      if (pastedUserNpubOrNip05) {
+        setUserInput(pastedUserNpubOrNip05)
+        setPastedUserNpubOrNip05(undefined)
+      } else {
+        // Otherwize if search already provided some results, user must manually click the search button
+        if (!foundUsers.length) {
+          handleSearchUsers()
+        }
+      }
+    }
+  }
+
  useEffect(() => {
    if (selectedFiles) {
      /**
-       * Reads the binary files and converts to internal file type
+       * Reads the binary files and converts to an internal file type
       * and sets to a state (adds images if it's a PDF)
       */
      const parsePages = async () => {
@ -132,8 +264,6 @@ export const CreatePage = () => {
    }
  }, [selectedFiles])

-  const [selectedTool, setSelectedTool] = useState<DrawTool>()
-
  /**
   * Changes the drawing tool
   * @param drawTool to draw with
@ -206,7 +336,7 @@ export const CreatePage = () => {
    }
  }, [usersPubkey])

-  const handleAddUser = async () => {
+  const handleAddUser = useCallback(async () => {
    setError(undefined)

    const addUser = (pubkey: string) => {
@ -248,6 +378,8 @@ export const CreatePage = () => {

    const input = userInput.toLowerCase()

+    setUserSearchInput('')
+
    if (input.startsWith('npub')) {
      return handleAddNpubUser(input)
    }
@ -297,7 +429,20 @@ export const CreatePage = () => {
      }
      return
    }
-  }
+  }, [
+    userInput,
+    userRole,
+    setError,
+    setUsers,
+    setUserSearchInput,
+    setIsLoading,
+    setLoadingSpinnerDesc,
+    setUserInput
+  ])
+
+  useEffect(() => {
+    if (userInput?.length > 0) handleAddUser()
+  }, [handleAddUser, userInput])

  const handleUserRoleChange = (role: UserRole, pubkey: string) => {
    setUsers((prevUsers) =>
@ -645,6 +790,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
@ -694,6 +844,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,
@ -701,6 +857,10 @@ export const CreatePage = () => {
          docSignatures: {}
        }

+        if (timestamp) {
+          meta.timestamps = [timestamp]
+        }
+
        setLoadingSpinnerDesc('Updating user app data')
        const event = await updateUsersAppData(meta)
        if (!event) return
@ -716,31 +876,6 @@ export const CreatePage = () => {
            toast.error('Failed to publish notifications')
          })

-        // Send DM to the next signer
-        setLoadingSpinnerDesc('Sending DMs')
-        if (signers.length > 0 && signers[0].pubkey !== usersPubkey) {
-          // No need to send notification to self so remove it from the list
-          const nextSigner = signers[0].pubkey
-
-          if (nextSigner) {
-            const createSignatureEvent = await parseNostrEvent(
-              meta.createSignature
-            )
-            const { id } = createSignatureEvent
-            try {
-              await sendPrivateDirectMessage(
-                `Sigit created, visit ${window.location.origin}/#/sign/${id}`,
-                npubToHex(nextSigner)!
-              )
-            } catch (error) {
-              if (error instanceof SendDMError) {
-                toast.error(error.message)
-              }
-              console.error(error)
-            }
-          }
-        }
-
        navigate(appPrivateRoutes.sign, { state: { meta } })
      } else {
        const zip = new JSZip()
@ -796,6 +931,61 @@ export const CreatePage = () => {
    }
  }

+  /**
+   * Handles the user search textfield change
+   * If it's not valid npub or nip05, search will be automatically triggered
+   */
+  const handleSearchAutocompleteTextfieldChange = async (
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
+  ) => {
+    const value = e.target.value
+
+    const disarmAddOnEnter = () => {
+      setPastedUserNpubOrNip05(undefined)
+    }
+
+    // Seems like it's npub format
+    if (value.startsWith('npub')) {
+      // We will try to convert npub to hex and if it's successfull that means
+      // npub is valid
+      const validHexPubkey = npubToHex(value)
+
+      if (validHexPubkey) {
+        // Arm the manual user npub add after enter is hit, we don't want to trigger search
+        setPastedUserNpubOrNip05(value)
+      } else {
+        disarmAddOnEnter()
+      }
+    } else if (value.includes('@')) {
+      // Seems like it's nip05 format
+      const { pubkey } = await queryNip05(value).catch((err) => {
+        console.error(err)
+        return { pubkey: null }
+      })
+
+      if (pubkey) {
+        // Arm the manual user npub add after enter is hit, we don't want to trigger search
+        setPastedUserNpubOrNip05(hexToNpub(pubkey))
+      } else {
+        disarmAddOnEnter()
+      }
+    } else {
+      // Disarm the add user on enter hit, and trigger search after 1 second
+      disarmAddOnEnter()
+    }
+
+    setUserSearchInput(value)
+  }
+
+  const parseContent = (event: Event) => {
+    try {
+      return JSON.parse(event.content)
+    } catch (e) {
+      return undefined
+      console.error(e)
+    }
+  }
+
  return (
    <>
      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
@ -859,42 +1049,108 @@ export const CreatePage = () => {
                  moveSigner={moveSigner}
                />
              </div>
+
              <div className={styles.addCounterpart}>
                <div className={styles.inputWrapper}>
-                  <TextField
-                    fullWidth
-                    placeholder="Add counterpart"
-                    value={userInput}
-                    onChange={(e) => setUserInput(e.target.value)}
-                    onKeyDown={handleInputKeyDown}
-                    error={!!error}
+                  <Autocomplete
+                    sx={{ width: 300 }}
+                    options={foundUsers}
+                    onChange={handleSearchUserChange}
+                    inputValue={userSearchInput}
+                    disableClearable
+                    openOnFocus
+                    autoHighlight
+                    freeSolo
+                    filterOptions={(x) => x}
+                    getOptionLabel={(option) => {
+                      let label: string = (option as FoundUser).npub
+
+                      const contentJson = parseContent(option as FoundUser)
+
+                      if (contentJson?.name) {
+                        label = contentJson.name
+                      } else {
+                        label = option as string
+                      }
+
+                      return label
+                    }}
+                    renderOption={(props, option) => {
+                      const { ...optionProps } = props
+
+                      const contentJson = parseContent(option)
+
+                      return (
+                        <Box
+                          component="li"
+                          sx={{ '& > img': { mr: 2, flexShrink: 0 } }}
+                          {...optionProps}
+                          key={option.pubkey}
+                        >
+                          <AvatarIconButton
+                            src={contentJson.picture}
+                            hexKey={option.pubkey}
+                            color="inherit"
+                            sx={{
+                              padding: '0 10px 0 0'
+                            }}
+                          />
+
+                          <div>
+                            {contentJson.name}{' '}
+                            {usersPubkey === option.pubkey ? (
+                              <span
+                                style={{
+                                  color: '#4c82a3',
+                                  fontWeight: 'bold'
+                                }}
+                              >
+                                Me
+                              </span>
+                            ) : (
+                              ''
+                            )}{' '}
+                            ({truncate(option.npub, { length: 16 })})
+                          </div>
+                        </Box>
+                      )
+                    }}
+                    renderInput={(params) => (
+                      <TextField
+                        {...params}
+                        key={params.id}
+                        inputRef={searchFieldRef}
+                        label="Add/Search counterpart"
+                        onKeyDown={handleInputKeyDown}
+                        onChange={handleSearchAutocompleteTextfieldChange}
+                      />
+                    )}
                  />
                </div>
-                <Button
-                  onClick={() =>
-                    setUserRole(
-                      userRole === UserRole.signer
-                        ? UserRole.viewer
-                        : UserRole.signer
-                    )
-                  }
-                  variant="contained"
-                  aria-label="Toggle User Role"
-                  className={styles.counterpartToggleButton}
-                >
-                  <FontAwesomeIcon
-                    icon={userRole === UserRole.signer ? faPen : faEye}
-                  />
-                </Button>
-                <Button
-                  disabled={!userInput}
-                  onClick={handleAddUser}
-                  variant="contained"
-                  aria-label="Add"
-                  className={styles.counterpartToggleButton}
-                >
-                  <FontAwesomeIcon icon={faPlus} />
-                </Button>
+                {!pastedUserNpubOrNip05 ? (
+                  <Button
+                    disabled={!userSearchInput || searchUsersLoading}
+                    onClick={() => handleSearchUsers()}
+                    variant="contained"
+                    aria-label="Add"
+                    className={styles.counterpartToggleButton}
+                  >
+                    {searchUsersLoading ? (
+                      <CircularProgress size={14} />
+                    ) : (
+                      <FontAwesomeIcon icon={faSearch} />
+                    )}
+                  </Button>
+                ) : (
+                  <Button
+                    onClick={handleAddUser}
+                    variant="contained"
+                    aria-label="Add"
+                    className={styles.counterpartToggleButton}
+                  >
+                    <FontAwesomeIcon icon={faPlus} />
+                  </Button>
+                )}
              </div>

              <div className={`${styles.paperGroup} ${styles.toolbox}`}>
--- a/src/pages/landing/index.tsx
+++ b/src/pages/landing/index.tsx
@ -69,8 +69,8 @@ export const LandingPage = () => {
      title: <>Verifiable</>,
      description: (
        <>
-          Thanks to Schnorr Signatures and Web of Trust, SIGit is far more
-          auditable than traditional server-based offerings.
+          SIGit Agreements can be directly verified - unlike traditional,
+          server-based offerings.
        </>
      )
    },
@ -84,8 +84,8 @@ export const LandingPage = () => {
      title: <>Works Offline</>,
      description: (
        <>
-          Presuming you have a hardware signing device, it is possible to
-          complete a SIGit round without an internet connection.
+          It is possible to complete a SIGit round without an internet
+          connection.
        </>
      )
    },
@ -94,8 +94,8 @@ export const LandingPage = () => {
      title: <>Multi-Party Signing</>,
      description: (
        <>
-          Choose any number of Signers and Viewers, track the signature status,
-          send reminders, get notifications on completion.
+          Choose any number of Signers and Viewers, track status, get
+          notifications on completion.
        </>
      )
    }
--- 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
@ -33,9 +33,7 @@ import {
  signEventForMetaFile,
  updateUsersAppData,
  findOtherUserMarks,
-  timeout,
-  sendPrivateDirectMessage,
-  parseNostrEvent
+  timeout
 } from '../../utils'
 import { Container } from '../../components/Container'
 import { DisplayMeta } from './internal/displayMeta'
@ -55,7 +53,7 @@ import {
  SigitFile
 } from '../../utils/file.ts'
 import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
-import { SendDMError } from '../../types/errors/SendDMError.ts'
+import { generateTimestamp } from '../../utils/opentimestamps.ts'

 enum SignedStatus {
  Fully_Signed,
@ -539,7 +537,11 @@ export const SignPage = () => {
    setIsLoading(true)
    const arrayBuffer = await decrypt(selectedFile)

-    if (!arrayBuffer) return
+    if (!arrayBuffer) {
+      setIsLoading(false)
+      toast.error('Error decrypting file')
+      return
+    }

    handleDecryptedArrayBuffer(arrayBuffer)
  }
@ -565,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 {
@ -723,65 +733,6 @@ export const SignPage = () => {
        toast.error('Failed to publish notifications')
      })

-    // Send DMs
-    setLoadingSpinnerDesc('Sending DMs')
-    const createSignatureEvent = await parseNostrEvent(meta.createSignature)
-    const { id } = createSignatureEvent
-
-    if (isLastSigner) {
-      // Final sign sends to everyone (creator, signers, viewers - /verify)
-      const areSent: boolean[] = Array(users.length).fill(false)
-      for (let i = 0; i < users.length; i++) {
-        try {
-          areSent[i] = await sendPrivateDirectMessage(
-            `Sigit completed, visit ${window.location.origin}/#/verify/${id}`,
-            npubToHex(users[i])!
-          )
-        } catch (error) {
-          if (error instanceof SendDMError) {
-            toast.error(error.message)
-          }
-          console.error(error)
-        }
-      }
-
-      if (areSent.some((r) => r)) {
-        toast.success(
-          `DMs sent ${areSent.filter((r) => r).length}/${users.length}`
-        )
-      }
-    } else {
-      // Notify the creator and the next signer (/sign).
-      try {
-        await sendPrivateDirectMessage(
-          `Sigit signed by ${usersNpub}, visit ${window.location.origin}/#/sign/${id}`,
-          npubToHex(submittedBy!)!
-        )
-      } catch (error) {
-        if (error instanceof SendDMError) {
-          toast.error(error.message)
-        }
-        console.error(error)
-      }
-
-      // No need to notify creator twice, skipping
-      const currentSignerIndex = signers.indexOf(usersNpub)
-      const nextSigner = signers[currentSignerIndex + 1]
-      if (nextSigner !== submittedBy) {
-        try {
-          await sendPrivateDirectMessage(
-            `You're the next signer, visit ${window.location.origin}/#/sign/${id}`,
-            npubToHex(nextSigner)!
-          )
-        } catch (error) {
-          if (error instanceof SendDMError) {
-            toast.error(error.message)
-          }
-          console.error(error)
-        }
-      }
-    }
-
    setIsLoading(false)
  }

@ -833,14 +784,9 @@ export const SignPage = () => {
      2
    )

-    const zip = new JSZip()
-
+    const zip = await getZipWithFiles(meta, files)
    zip.file('meta.json', stringifiedMeta)

-    for (const [fileName, file] of Object.entries(files)) {
-      zip.file(`files/${fileName}`, await file.arrayBuffer())
-    }
-
    const arrayBuffer = await zip
      .generateAsync({
        type: 'arraybuffer',
@ -869,16 +815,11 @@ export const SignPage = () => {
  const handleEncryptedExport = async () => {
    if (Object.entries(files).length === 0 || !meta) return

-    const zip = new JSZip()
-
    const stringifiedMeta = JSON.stringify(meta, null, 2)
+    const zip = await getZipWithFiles(meta, files)

    zip.file('meta.json', stringifiedMeta)

-    for (const [fileName, file] of Object.entries(files)) {
-      zip.file(`files/${fileName}`, await file.arrayBuffer())
-    }
-
    const arrayBuffer = await zip
      .generateAsync({
        type: 'arraybuffer',
--- 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 } from 'react-router-dom'
@ -26,7 +35,7 @@ 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 { UsersDetails } from '../../components/UsersDetails.tsx'
 import FileList from '../../components/FileList'
 import { CurrentUserFile } from '../../types/file.ts'
 import { Mark } from '../../types/mark.ts'
@ -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>
                          )
                        })}
@ -176,7 +192,8 @@ export const VerifyPage = () => {
    signers,
    viewers,
    fileHashes,
-    parsedSignatureEvents
+    parsedSignatureEvents,
+    timestamps
  } = useSigitMeta(meta)

  const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
@ -186,6 +203,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)
@ -193,6 +220,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/errors/SendDMError.ts
+++ b/src/types/errors/SendDMError.ts
@ -1,24 +0,0 @@
-import { Jsonable } from '.'
-
-export enum SendDMErrorType {
-  'METADATA_FETCH_FAILED' = 'Sending DM failed. An error occured while fetching user metadata.',
-  'RELAY_READ_EMPTY' = `Sending DM failed. The user's relay read set is empty.`,
-  'ENCRYPTION_FAILED' = 'Sending DM failed. An error occurred in encrypting dm message.',
-  'RELAY_PUBLISH_FAILED' = 'Sending DM failed. Publishing events failed.'
-}
-
-export class SendDMError 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
-  }
-}
--- 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/file.ts
+++ b/src/utils/file.ts
@ -20,7 +20,7 @@ export const getZipWithFiles = async (

  for (const [fileName, file] of Object.entries(files)) {
    // Handle PDF Files, add marks
-    if (file.isPdf) {
+    if (file.isPdf && fileName in marksByFileNamePage) {
      const blob = await addMarks(file, marksByFileNamePage[fileName])
      zip.file(`marked/${fileName}`, blob)
    }
--- 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/nostr.ts
+++ b/src/utils/nostr.ts
@ -6,7 +6,6 @@ import {
  EventTemplate,
  Filter,
  UnsignedEvent,
-  VerifiedEvent,
  finalizeEvent,
  generateSecretKey,
  getEventHash,
@ -22,8 +21,7 @@ import { NIP05_REGEX } from '../constants'
 import {
  MetadataController,
  NostrController,
-  relayController,
-  RelayController
+  relayController
 } from '../controllers'
 import {
  updateProcessedGiftWraps,
@ -37,7 +35,6 @@ import { parseJson, removeLeadingSlash } from './string'
 import { timeout } from './utils'
 import { getHash } from './hash'
 import { SIGIT_BLOSSOM } from './const.ts'
-import { SendDMError, SendDMErrorType } from '../types/errors/SendDMError.ts'

 /**
 * Generates a `d` tag for userAppData
@ -251,12 +248,6 @@ export const toUnixTimestamp = (date: number | Date) => {
 export const fromUnixTimestamp = (unix: number) => {
  return unix * 1000
 }
-export const randomTimeUpTo2DaysInThePast = (): number => {
-  const now = Date.now()
-  const twoDaysInMilliseconds = 2 * 24 * 60 * 60 * 1000
-  const randomPastTime = now - Math.floor(Math.random() * twoDaysInMilliseconds)
-  return toUnixTimestamp(randomPastTime)
-}

 /**
 * Generate nip44 conversation key
@ -306,21 +297,19 @@ export const countLeadingZeroes = (hex: string) => {

 /**
 * Function to create a wrapped event with PoW
- * @param event  Original event to be wrapped (can be unsigned or verified)
+ * @param event Original event to be wrapped
 * @param receiver Public key of the receiver
+ * @param difficulty PoW difficulty level (default is 20)
 * @returns
 */
 //
-export const createWrap = (
-  event: UnsignedEvent | VerifiedEvent,
-  receiver: string
-) => {
+export const createWrap = (unsignedEvent: UnsignedEvent, receiver: string) => {
  // Generate a random secret key and its corresponding public key
  const randomKey = generateSecretKey()
  const pubkey = getPublicKey(randomKey)

  // Encrypt the event content using nip44 encryption
-  const content = nip44Encrypt(event, randomKey, receiver)
+  const content = nip44Encrypt(unsignedEvent, randomKey, receiver)

  // Initialize nonce and leadingZeroes for PoW calculation
  let nonce = 0
@ -331,12 +320,11 @@ export const createWrap = (
  // eslint-disable-next-line no-constant-condition
  while (true) {
    // Create an unsigned event with the necessary fields
-    // TODO: kinds.GiftWrap (wrong kind number in nostr-tools 10/11/2024 at v2.7.2)
    const event: UnsignedEvent = {
      kind: 1059, // Event kind
      content, // Encrypted content
      pubkey, // Public key of the creator
-      created_at: randomTimeUpTo2DaysInThePast(),
+      created_at: unixNow(), // Current timestamp
      tags: [
        // Tags including receiver and nonce
        ['p', receiver],
@ -1001,145 +989,3 @@ export const getProfileUsername = (
  truncate(profile?.display_name || profile?.name || hexToNpub(npub), {
    length: 16
  })
-
-/**
- * Modified {@link UnsignedEvent Unsigned Event} that includes an id
- *
- * Fields id and created_at are required.
- * @see {@link UnsignedEvent}
- * @see {@link https://github.com/nostr-protocol/nips/blob/master/17.md#direct-message-kind}
- */
-type UnsignedEventWithId = UnsignedEvent & {
-  id?: string
-}
-export const sendPrivateDirectMessage = async (
-  message: string,
-  receiver: string,
-  subject?: string
-) => {
-  // Instantiate the MetadataController to retrieve relay list metadata to look for preferred DM relays
-  const metadataController = MetadataController.getInstance()
-  const relaySet = await metadataController
-    .findRelayListMetadata(receiver)
-    .catch((err) => {
-      // Log an error if retrieving relay list metadata fails
-      console.log(
-        `An error occurred while finding relay list metadata for ${hexToNpub(receiver)}`,
-        err
-      )
-      return null
-    })
-
-  // Throw if metadata retrieval failed
-  if (!relaySet) {
-    throw new SendDMError(SendDMErrorType.METADATA_FETCH_FAILED, {
-      context: {
-        receiver
-      }
-    })
-  }
-
-  // Ensure relay list is not empty
-  if (relaySet.read.length === 0) {
-    throw new SendDMError(SendDMErrorType.RELAY_READ_EMPTY, {
-      context: {
-        receiver,
-        relaySet: JSON.stringify(relaySet)
-      }
-    })
-  }
-  // Get the direct message preferred relays list
-  // TODO: kinds.DirectMessageRelaysList  (unavailabe in nostr-tools 10/10/2024 at v2.7.0)
-  // https://github.com/nostr-protocol/nips/blob/master/17.md#publishing
-  const eventFilter: Filter = {
-    kinds: [10050],
-    authors: [receiver]
-  }
-  const preferredRelaysListEvents =
-    await RelayController.getInstance().fetchEvents(eventFilter, relaySet.read)
-
-  const isRelayTag = (tag: string[]): boolean => tag[0] === 'relay'
-  const preferredRelaysList = preferredRelaysListEvents.reduce(
-    (previous: string[], current: Event) => {
-      const relaysList = current.tags
-        .filter((t) => isRelayTag(t) && !previous.includes(t[1]))
-        .map((t) => t[1])
-
-      return [...previous, ...relaysList]
-    },
-    []
-  )
-  // Empty preferred relays list
-  const finalRelaysList: string[] =
-    preferredRelaysList?.length > 0 ? preferredRelaysList : [...relaySet.write]
-
-  // Generate "sender"
-  const senderSecret = generateSecretKey()
-  const senderPubkey = getPublicKey(senderSecret)
-
-  // Prepare tags for the message
-  const tags: string[][] = [['p', receiver]]
-
-  // Conversation title
-  if (subject) tags.push(['subject', subject])
-
-  // Create private DM event containing the message and relevant metadata
-  // TODO: kinds.PrivateDirectMessage (unavailabe in nostr-tools 10/10/2024 at v2.7.0)
-  const dm: UnsignedEventWithId = {
-    pubkey: senderPubkey,
-    created_at: unixNow(),
-    kind: 14,
-    tags,
-    content: message
-  }
-
-  // Calculate the hash based on the UnverifiedEvent
-  dm.id = getEventHash(dm)
-
-  // Encrypt the private dm using the sender secret and the receiver's public key
-  const encryptedDm = nip44Encrypt(dm, senderSecret, receiver)
-  if (!encryptedDm) {
-    throw new SendDMError(SendDMErrorType.ENCRYPTION_FAILED, {
-      context: {
-        receiver,
-        message,
-        kind: dm.kind
-      }
-    })
-  }
-
-  // Seal the message
-  // TODO: kinds.Seal (unavailabe in nostr-tools 10/10/2024 at v2.7.0)
-  const sealedMessage: UnsignedEvent = {
-    kind: 13, // seal
-    pubkey: senderPubkey,
-    content: encryptedDm,
-    created_at: randomTimeUpTo2DaysInThePast(),
-    tags: [] // no tags
-  }
-
-  // Finalize and sign the sealed event
-  const finalizedSeal = finalizeEvent(sealedMessage, senderSecret)
-
-  // Encrypt the seal and gift wrap
-  const finalizedGiftWrap = createWrap(finalizedSeal, receiver)
-
-  // Publish the finalized gift wrap event (the encrypted DM) to the relays
-  const publishedOnRelays = await relayController.publish(
-    finalizedGiftWrap,
-    finalRelaysList
-  )
-
-  // Handle cases where publishing to the relays failed
-  if (publishedOnRelays.length === 0) {
-    throw new SendDMError(SendDMErrorType.ENCRYPTION_FAILED, {
-      context: {
-        receiver,
-        count: publishedOnRelays.length
-      }
-    })
-  }
-
-  // Return true indicating that the DM was successfully sent
-  return true
-}
--- 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/relays.ts
+++ b/src/utils/relays.ts
@ -97,23 +97,20 @@ const isOlderThanOneDay = (cachedAt: number) => {
 }

 const isRelayTag = (tag: string[]): boolean => tag[0] === 'r'
-const addRelay = (list: string[], relay: string) => {
-  // Only add if the list doesn't already include the relay
-  if (!list.includes(relay)) list.push(relay)
-}
+
 const toRelaySet = (obj: RelaySet, tag: string[]): RelaySet => {
  if (tag.length >= 3) {
    const marker = tag[2]

    if (marker === READ_MARKER) {
-      addRelay(obj.read, tag[1])
+      obj.read.push(tag[1])
    } else if (marker === WRITE_MARKER) {
-      addRelay(obj.write, tag[1])
+      obj.write.push(tag[1])
    }
  }
  if (tag.length === 2) {
-    addRelay(obj.read, tag[1])
-    addRelay(obj.write, tag[1])
+    obj.read.push(tag[1])
+    obj.write.push(tag[1])
  }

  return obj
--- 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
@ -2,6 +2,18 @@ import { TimeoutError } from '../types/errors/TimeoutError.ts'
 import { CurrentUserFile } from '../types/file.ts'
 import { SigitFile } from './file.ts'

+export const debounceCustom = <T extends (...args: never[]) => void>(
+  fn: T,
+  delay: number
+): ((...args: Parameters<T>) => void) => {
+  let timerId: ReturnType<typeof setTimeout>
+
+  return (...args: Parameters<T>) => {
+    clearTimeout(timerId)
+    timerId = setTimeout(() => fn(...args), delay)
+  }
+}
+
 export const compareObjects = (
  obj1: object | null | undefined,
  obj2: object | null | undefined
@ -119,3 +131,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'
  }
Author	SHA1	Message	Date
Stixx	82376838bd	Merge pull request 'Create page: search users' (#259 ) from issue-56 into staging All checks were successful Release to Staging / build_and_release (push) Successful in 1m39s Details Reviewed-on: #259	2024-11-21 10:18:32 +00:00
Stixx	2f9017b840	fix: removed viewer/signer button All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 43s Details	2024-11-21 11:06:31 +01:00
Stixx	6c7cac2336	feat: search users by nip05, npub and filter: serach, improved UX All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 43s Details	2024-11-21 09:20:20 +01:00
Stixx	4af28abcb6	feat: create page search users All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 37s Details	2024-11-19 12:03:41 +01:00
Otto	4cb6f07a68	Merge pull request 'issue-236-fixed' (#239 ) from issue-236-fixed into staging All checks were successful Release to Staging / build_and_release (push) Successful in 1m22s Details Reviewed-on: #239 Reviewed-by: enes <enes@noreply.git.nostrdev.com>	2024-11-04 07:43:58 +00:00
NostrDev	5b1654c341	chore: added handleEscapeButtonDown description All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 35s Details	2024-11-04 10:42:55 +03:00
.	02f651acc7	chore: revert (wrong site) All checks were successful Release to Staging / build_and_release (push) Successful in 1m25s Details	2024-11-02 11:40:20 +00:00
.	cd0e4523e1	chore: goat@nostrdev.com Some checks failed Release to Staging / build_and_release (push) Has been cancelled Details	2024-11-02 11:39:36 +00:00
NostrDev	76b1fa792c	feat(signers-dropdown): improved hiding/displaying logic All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 31s Details	2024-11-01 17:00:46 +03:00
NostrDev	3a94fbc0ae	chore(types): used KeyboardCode enum All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 31s Details	2024-11-01 11:23:05 +03:00
NostrDev	e37f90d6db	feat(pdf-fields): add logic to hide signers on ESC	2024-11-01 11:22:31 +03:00
b	cc059f6cb4	Merge pull request 'feat: signature squiggle' (#237 ) from feat/signature into staging All checks were successful Release to Staging / build_and_release (push) Successful in 1m33s Details Reviewed-on: #237 Reviewed-by: b <b@4j.cx>	2024-10-28 16:23:28 +00:00
enes	de44370a96	feat: add squiggle support All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 36s Details	2024-10-25 18:42:16 +02:00
enes	dfa2832e8d	feat: add MarkConfig and components	2024-10-25 18:40:50 +02:00
enes	9286e4304f	feat: add SVGO, enable signature	2024-10-25 18:38:47 +02:00
eugene	aae11589a4	Merge pull request 'issue-166-open-timestamps' (#220 ) from issue-166-open-timestamps into staging All checks were successful Release to Staging / build_and_release (push) Successful in 1m16s Details Reviewed-on: #220 Reviewed-by: enes <enes@noreply.git.nostrdev.com>	2024-10-25 11:18:46 +00:00
Eugene	69f67fc812	chore: disables rules for specific parts of code All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 30s Details	2024-10-25 14:15:12 +03:00
Eugene	38cd88fd86	fix: moves styling to SVG Some checks failed Open PR on Staging / audit_and_check (pull_request) Failing after 32s Details	2024-10-25 13:13:22 +03:00
Eugene	dbcd54cec0	chore: merge branch 'main' into issue-166-open-timestamps Some checks failed Open PR on Staging / audit_and_check (pull_request) Failing after 27s Details	2024-10-24 15:58:39 +03:00
Eugene	2d0212fd6c	fix: redundant updates Some checks failed Open PR on Staging / audit_and_check (pull_request) Failing after 32s Details	2024-10-24 12:54:47 +03:00
Eugene	19b815e528	feat(opentimestamps): updates tooltip Some checks failed Open PR on Staging / audit_and_check (pull_request) Failing after 27s Details	2024-10-24 12:42:21 +03:00
b	33e7fc7771	Merge pull request 'Release' (#233 ) from staging into main All checks were successful Release to Production / build_and_release (push) Successful in 1m9s Details Reviewed-on: #233	2024-10-18 15:09:39 +00:00
enes	97d9857bef	Merge branch 'main' into staging All checks were successful Release to Staging / build_and_release (push) Successful in 1m18s Details	2024-10-18 14:59:01 +00:00
enes	4465b8c3ac	refactor(landing): cards description All checks were successful Release to Staging / build_and_release (push) Successful in 1m19s Details	2024-10-18 16:54:31 +02:00
Eugene	54047740f9	chore: updates packages	2024-10-18 11:26:25 +03:00
Eugene	7f411f09a7	chore: merge branch 'main' into issue-166-open-timestamps	2024-10-18 11:24:31 +03:00
Eugene	849e47da00	chore: updates packages	2024-10-18 11:03:51 +03:00
b	bb323be87c	Merge pull request 'Release' (#228 ) from staging into main All checks were successful Release to Production / build_and_release (push) Successful in 1m8s Details Reviewed-on: #228	2024-10-14 09:02:41 +00:00
b	fd2f179273	Merge branch 'main' into staging All checks were successful Release to Staging / build_and_release (push) Successful in 1m18s Details	2024-10-14 09:02:14 +00:00
b	4559f16d86	Merge pull request 'fix: add files and marked to sign page exports' (#226 ) from fixes-10-11 into staging Some checks failed Release to Staging / build_and_release (push) Has been cancelled Details Reviewed-on: #226	2024-10-14 09:01:42 +00:00
enes	d6f92accb0	chore(git): merge branch 'origin/fixes-10-11' into fixes-10-11 All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 34s Details	2024-10-14 09:56:22 +02:00
b	ee03cc545e	Merge branch 'staging' into fixes-10-11 All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 33s Details	2024-10-13 12:47:38 +00:00
b	3eed2964a0	Merge branch 'staging' into fixes-10-11 All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 33s Details	2024-10-12 11:19:14 +00:00
enes	cc382f0726	fix: show error if decrypt fails	2024-10-11 16:43:55 +02:00
enes	9dd190d65b	fix: add files and marked to sign page exports All checks were successful Open PR on Staging / audit_and_check (pull_request) Successful in 34s Details Skip marked if the file contains no marks	2024-10-11 16:16:59 +02:00
b	ed90168e5d	Merge pull request 'staging' (#223 ) from staging into main All checks were successful Release to Production / build_and_release (push) Successful in 1m8s Details Reviewed-on: #223	2024-10-09 13:50:23 +00:00
Eugene	b7bd922af3	fix: removes unneeded notification Some checks failed Open PR on Staging / audit_and_check (pull_request) Failing after 31s Details	2024-10-08 17:04:07 +02:00
Eugene	f12aaf1c2b	feat(opentimestamps): amends to flow to only upgrade users timestamps Some checks failed Open PR on Staging / audit_and_check (pull_request) Failing after 32s Details	2024-10-08 17:01:51 +02:00
Eugene	3d5006a715	fix: removes retrier and updates notification Some checks failed Open PR on Staging / audit_and_check (pull_request) Failing after 30s Details	2024-10-07 17:24:25 +02:00
Eugene	f38344b9ac	fix: adds notifications	2024-10-07 17:20:00 +02:00
Eugene	2b630c94b6	feat(opentimestamps): updates the flow and adds notifications	2024-10-07 17:19:32 +02:00
Eugene	edeb22fb37	chore: updates namings	2024-10-07 17:18:27 +02:00
Eugene	a2138f1de1	feat(opentimestamps): updates utils and adds comments	2024-10-07 17:18:06 +02:00
Eugene	85bf907f54	feat(opentimestamps): updates data model	2024-10-07 17:17:37 +02:00
Eugene	3b447dcf6a	chore: merge branch 'main' into issue-166-open-timestamps	2024-10-07 16:18:29 +02:00
Eugene	21aa25a42a	feat(opentimestamps): update the full flow	2024-10-06 15:37:04 +02:00
Eugene	edbe708b65	feat(opentimestamps): updates data model and useSigitMeta hook	2024-10-02 14:47:32 +02:00
Eugene	b92790ceed	feat(opentimestamps): updates opentimestamps type	2024-09-27 16:03:40 +03:00
Eugene	7f00f9e8bf	feat(opentimestamps): updates signing flow	2024-09-27 16:00:48 +03:00
Eugene	07f1a15aa1	feat(opentimestamps): refactors to timestamp the nostr event id	2024-09-27 14:18:26 +03:00
Eugene	85bcfac2e0	feat(opentimestamps): adds timestamps to create flow	2024-09-26 15:54:06 +03:00
Eugene	edfe9a2954	feat(opentimestamps): adds OTS library and retrier function	2024-09-26 15:50:28 +03:00