src/components/AppBar/AppBar.tsx

@@ -28,9 +28,9 @@ import {
 } from '../../routes'
 import {
   clearAuthToken,
-  getProfileUsername,
   hexToNpub,
-  saveNsecBunkerDelegatedKey
+  saveNsecBunkerDelegatedKey,
+  shorten
 } from '../../utils'
 import styles from './style.module.scss'
 import { setUserRobotImage } from '../../store/userRobotImage/action'
@@ -58,8 +58,9 @@ export const AppBar = () => {
   useEffect(() => {
     if (metadataState) {
       if (metadataState.content) {
-        const profileMetadata = JSON.parse(metadataState.content)
+        const { picture, display_name, name } = JSON.parse(
-        const { picture } = profileMetadata
+          metadataState.content
+        )
 
         if (picture || userRobotImage) {
           setUserAvatar(picture || userRobotImage)
@@ -69,7 +70,7 @@ export const AppBar = () => {
           ? hexToNpub(authState.usersPubkey)
           : ''
 
-        setUsername(getProfileUsername(npub, profileMetadata))
+        setUsername(shorten(display_name || name || npub, 7))
       } else {
         setUserAvatar(userRobotImage || '')
         setUsername('')
@@ -132,10 +133,8 @@ export const AppBar = () => {
         <div className={styles.banner}>
           <Container>
             <div className={styles.bannerInner}>
-              <p className={styles.bannerText}>
+              SIGit is currently Alpha software (available for internal
-                SIGit is currently Alpha software (available for internal
+              testing), use at your own risk!
-                testing), use at your own risk!
-              </p>
               <Button
                 aria-label={`close banner`}
                 variant="text"

src/components/AppBar/style.module.scss

@@ -67,9 +67,3 @@
     }
   }
 }
-
-.bannerText {
-  margin-left: 54px;
-  flex-grow: 1;
-  text-align: center;
-}

src/components/DrawPDFFields/index.tsx

@@ -11,16 +11,16 @@ import styles from './style.module.scss'
 import React, { useEffect, useState } from 'react'
 import { ProfileMetadata, User, UserRole } from '../../types'
 import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
-import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
+import { truncate } from 'lodash'
-import { SigitFile } from '../../utils/file'
+import { settleAllFullfilfedPromises, hexToNpub, npubToHex } from '../../utils'
+import { getSigitFile, SigitFile } from '../../utils/file'
 import { getToolboxLabelByMarkType } from '../../utils/mark'
 import { FileDivider } from '../FileDivider'
 import { ExtensionFileBox } from '../ExtensionFileBox'
 import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf'
 import { useScale } from '../../hooks/useScale'
 import { AvatarIconButton } from '../UserAvatarIconButton'
-import { UserAvatar } from '../UserAvatar'
+import { LoadingSpinner } from '../LoadingSpinner'
-import _ from 'lodash'
 
 const DEFAULT_START_SIZE = {
   width: 140,
@@ -28,50 +28,52 @@ const DEFAULT_START_SIZE = {
 } as const
 
 interface Props {
+  selectedFiles: File[]
   users: User[]
   metadata: { [key: string]: ProfileMetadata }
-  sigitFiles: SigitFile[]
+  onDrawFieldsChange: (sigitFiles: SigitFile[]) => void
-  setSigitFiles: React.Dispatch<React.SetStateAction<SigitFile[]>>
   selectedTool?: DrawTool
 }
 
 export const DrawPDFFields = (props: Props) => {
-  const { selectedTool, sigitFiles, setSigitFiles, users } = props
+  const { selectedFiles, selectedTool, onDrawFieldsChange, users } = props
-
-  const signers = users.filter((u) => u.role === UserRole.signer)
-  const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
-  const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
-  /**
-   * Return first pubkey that is present in the signers list
-   * @param pubkeys
-   * @returns available pubkey or empty string
-   */
-  const getAvailableSigner = (...pubkeys: string[]) => {
-    const availableSigner: string | undefined = pubkeys.find((pubkey) =>
-      signers.some((s) => s.pubkey === npubToHex(pubkey))
-    )
-    return availableSigner || ''
-  }
-
   const { to, from } = useScale()
 
+  const [sigitFiles, setSigitFiles] = useState<SigitFile[]>([])
+  const [parsingPdf, setIsParsing] = useState<boolean>(false)
+
   const [mouseState, setMouseState] = useState<MouseState>({
     clicked: false
   })
 
-  const [activeDrawnField, setActiveDrawnField] = useState<{
+  const [activeDrawField, setActiveDrawField] = useState<number>()
-    fileIndex: number
+
-    pageIndex: number
+  useEffect(() => {
-    drawnFieldIndex: number
+    if (selectedFiles) {
-  }>()
+      /**
-  const isActiveDrawnField = (
+       * Reads the binary files and converts to internal file type
-    fileIndex: number,
+       * and sets to a state (adds images if it's a PDF)
-    pageIndex: number,
+       */
-    drawnFieldIndex: number
+      const parsePages = async () => {
-  ) =>
+        const files = await settleAllFullfilfedPromises(
-    activeDrawnField?.fileIndex === fileIndex &&
+          selectedFiles,
-    activeDrawnField?.pageIndex === pageIndex &&
+          getSigitFile
-    activeDrawnField?.drawnFieldIndex === drawnFieldIndex
+        )
+
+        setSigitFiles(files)
+      }
+
+      setIsParsing(true)
+
+      parsePages().finally(() => {
+        setIsParsing(false)
+      })
+    }
+  }, [selectedFiles])
+
+  useEffect(() => {
+    if (sigitFiles) onDrawFieldsChange(sigitFiles)
+  }, [onDrawFieldsChange, sigitFiles])
 
   /**
    * Drawing events
@@ -98,12 +100,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Pointer event
    * @param page PdfPage where press happened
    */
-  const handlePointerDown = (
+  const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
-    event: React.PointerEvent,
-    page: PdfPage,
-    fileIndex: number,
-    pageIndex: number
-  ) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
@@ -118,17 +115,12 @@ export const DrawPDFFields = (props: Props) => {
       top: to(page.width, y),
       width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
       height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
-      counterpart: getAvailableSigner(lastSigner, defaultSignerNpub),
+      counterpart: '',
       type: selectedTool.identifier
     }
 
     page.drawnFields.push(newField)
 
-    setActiveDrawnField({
-      fileIndex,
-      pageIndex,
-      drawnFieldIndex: page.drawnFields.length - 1
-    })
     setMouseState((prev) => {
       return {
         ...prev,
@@ -197,8 +189,6 @@ export const DrawPDFFields = (props: Props) => {
    */
   const handleDrawnFieldPointerDown = (
     event: React.PointerEvent,
-    fileIndex: number,
-    pageIndex: number,
     drawnFieldIndex: number
   ) => {
     event.stopPropagation()
@@ -208,7 +198,7 @@ export const DrawPDFFields = (props: Props) => {
 
     const drawingRectangleCoords = getPointerCoordinates(event)
 
-    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
+    setActiveDrawField(drawnFieldIndex)
     setMouseState({
       dragging: true,
       clicked: false,
@@ -264,15 +254,13 @@ export const DrawPDFFields = (props: Props) => {
    */
   const handleResizePointerDown = (
     event: React.PointerEvent,
-    fileIndex: number,
-    pageIndex: number,
     drawnFieldIndex: number
   ) => {
     // Proceed only if left click
     if (event.button !== 0) return
     event.stopPropagation()
 
-    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
+    setActiveDrawField(drawnFieldIndex)
     setMouseState({
       resizing: true
     })
@@ -381,7 +369,7 @@ export const DrawPDFFields = (props: Props) => {
                   handlePointerMove(event, page)
                 }}
                 onPointerDown={(event) => {
-                  handlePointerDown(event, page, fileIndex, pageIndex)
+                  handlePointerDown(event, page)
                 }}
                 draggable="false"
                 src={page.image}
@@ -393,12 +381,7 @@ export const DrawPDFFields = (props: Props) => {
                   <div
                     key={drawnFieldIndex}
                     onPointerDown={(event) =>
-                      handleDrawnFieldPointerDown(
+                      handleDrawnFieldPointerDown(event, drawnFieldIndex)
-                        event,
-                        fileIndex,
-                        pageIndex,
-                        drawnFieldIndex
-                      )
                     }
                     onPointerMove={(event) => {
                       handleDrawnFieldPointerMove(event, drawnField, page.width)
@@ -419,11 +402,7 @@ export const DrawPDFFields = (props: Props) => {
                       touchAction: 'none',
                       opacity:
                         mouseState.dragging &&
-                        isActiveDrawnField(
+                        activeDrawField === drawnFieldIndex
-                          fileIndex,
-                          pageIndex,
-                          drawnFieldIndex
-                        )
                           ? 0.8
                           : undefined
                     }}
@@ -440,12 +419,7 @@ export const DrawPDFFields = (props: Props) => {
                     </div>
                     <span
                       onPointerDown={(event) =>
-                        handleResizePointerDown(
+                        handleResizePointerDown(event, drawnFieldIndex)
-                          event,
-                          fileIndex,
-                          pageIndex,
-                          drawnFieldIndex
-                        )
                       }
                       onPointerMove={(event) => {
                         handleResizePointerMove(event, drawnField, page.width)
@@ -454,11 +428,7 @@ export const DrawPDFFields = (props: Props) => {
                       style={{
                         background:
                           mouseState.resizing &&
-                          isActiveDrawnField(
+                          activeDrawField === drawnFieldIndex
-                            fileIndex,
-                            pageIndex,
-                            drawnFieldIndex
-                          )
                             ? 'var(--primary-main)'
                             : undefined
                       }}
@@ -476,59 +446,56 @@ export const DrawPDFFields = (props: Props) => {
                     >
                       <Close fontSize="small" />
                     </span>
-                    {!isActiveDrawnField(
+                    <div
-                      fileIndex,
+                      onPointerDown={handleUserSelectPointerDown}
-                      pageIndex,
+                      className={styles.userSelect}
-                      drawnFieldIndex
+                    >
-                    ) &&
+                      <FormControl fullWidth size="small">
-                      !!drawnField.counterpart && (
+                        <InputLabel id="counterparts">Counterpart</InputLabel>
-                        <div className={styles.counterpartAvatar}>
+                        <Select
-                          <UserAvatar
+                          value={drawnField.counterpart}
-                            pubkey={npubToHex(drawnField.counterpart)!}
+                          onChange={(event) => {
-                          />
+                            drawnField.counterpart = event.target.value
-                        </div>
+                            refreshPdfFiles()
-                      )}
+                          }}
-                    {isActiveDrawnField(
+                          labelId="counterparts"
-                      fileIndex,
+                          label="Counterparts"
-                      pageIndex,
+                          sx={{
-                      drawnFieldIndex
+                            background: 'white'
-                    ) && (
+                          }}
-                      <div
+                          renderValue={(value) => renderCounterpartValue(value)}
-                        onPointerDown={handleUserSelectPointerDown}
+                        >
-                        className={styles.userSelect}
+                          {users
-                      >
+                            .filter((u) => u.role === UserRole.signer)
-                        <FormControl fullWidth size="small">
+                            .map((user, index) => {
-                          <InputLabel id="counterparts">Counterpart</InputLabel>
+                              const npub = hexToNpub(user.pubkey)
-                          <Select
+                              let displayValue = truncate(npub, {
-                            value={getAvailableSigner(drawnField.counterpart)}
+                                length: 16
-                            onChange={(event) => {
+                              })
-                              drawnField.counterpart = event.target.value
+
-                              setLastSigner(event.target.value)
+                              const metadata = props.metadata[user.pubkey]
-                              refreshPdfFiles()
+
-                            }}
+                              if (metadata) {
-                            labelId="counterparts"
+                                displayValue = truncate(
-                            label="Counterparts"
+                                  metadata.name ||
-                            sx={{
+                                    metadata.display_name ||
-                              background: 'white'
+                                    metadata.username ||
-                            }}
+                                    npub,
-                            renderValue={(value) =>
+                                  {
-                              renderCounterpartValue(value)
+                                    length: 16
-                            }
+                                  }
-                          >
+                                )
-                            {signers.map((signer, index) => {
+                              }
-                              const npub = hexToNpub(signer.pubkey)
-                              const metadata = props.metadata[signer.pubkey]
-                              const displayValue = getProfileUsername(
-                                npub,
-                                metadata
-                              )
 
                               return (
-                                <MenuItem key={index} value={npub}>
+                                <MenuItem
+                                  key={index}
+                                  value={hexToNpub(user.pubkey)}
+                                >
                                   <ListItemIcon>
                                     <AvatarIconButton
                                       src={metadata?.picture}
-                                      hexKey={signer.pubkey}
+                                      hexKey={user.pubkey}
                                       aria-label={`account of user ${displayValue}`}
                                       color="inherit"
                                       sx={{
@@ -544,10 +511,9 @@ export const DrawPDFFields = (props: Props) => {
                                 </MenuItem>
                               )
                             })}
-                          </Select>
+                        </Select>
-                        </FormControl>
+                      </FormControl>
-                      </div>
+                    </div>
-                    )}
                   </div>
                 )
               })}
@@ -558,19 +524,28 @@ export const DrawPDFFields = (props: Props) => {
     )
   }
 
-  const renderCounterpartValue = (npub: string) => {
+  const renderCounterpartValue = (value: string) => {
-    let displayValue = _.truncate(npub, { length: 16 })
+    const user = users.find((u) => u.pubkey === npubToHex(value))
+    if (user) {
+      let displayValue = truncate(value, {
+        length: 16
+      })
 
-    const signer = signers.find((u) => u.pubkey === npubToHex(npub))
+      const metadata = props.metadata[user.pubkey]
-    if (signer) {
-      const metadata = props.metadata[signer.pubkey]
-      displayValue = getProfileUsername(npub, metadata)
 
+      if (metadata) {
+        displayValue = truncate(
+          metadata.name || metadata.display_name || metadata.username || value,
+          {
+            length: 16
+          }
+        )
+      }
       return (
-        <div className={styles.counterpartSelectValue}>
+        <>
           <AvatarIconButton
-            src={props.metadata[signer.pubkey]?.picture}
+            src={props.metadata[user.pubkey]?.picture}
-            hexKey={signer.pubkey || undefined}
+            hexKey={npubToHex(user.pubkey) || undefined}
             sx={{
               padding: 0,
               marginRight: '6px',
@@ -581,11 +556,19 @@ export const DrawPDFFields = (props: Props) => {
             }}
           />
           {displayValue}
-        </div>
+        </>
       )
     }
 
-    return displayValue
+    return value
+  }
+
+  if (parsingPdf) {
+    return <LoadingSpinner variant="small" />
+  }
+
+  if (!sigitFiles.length) {
+    return ''
   }
 
   return (
@@ -606,7 +589,7 @@ export const DrawPDFFields = (props: Props) => {
                 <ExtensionFileBox extension={file.extension} />
               )}
             </div>
-            {i < sigitFiles.length - 1 && <FileDivider />}
+            {i < selectedFiles.length - 1 && <FileDivider />}
           </React.Fragment>
         )
       })}

src/components/DrawPDFFields/style.module.scss

@@ -84,14 +84,3 @@
     padding: 5px 0;
   }
 }
-
-.counterpartSelectValue {
-  display: flex;
-}
-
-.counterpartAvatar {
-  img {
-    width: 21px;
-    height: 21px;
-  }
-}

src/components/UserAvatar/index.tsx

@@ -5,7 +5,7 @@ import { AvatarIconButton } from '../UserAvatarIconButton'
 import { Link } from 'react-router-dom'
 import { useProfileMetadata } from '../../hooks/useProfileMetadata'
 import { Tooltip } from '@mui/material'
-import { getProfileUsername } from '../../utils'
+import { shorten } from '../../utils'
 import { TooltipChild } from '../TooltipChild'
 
 interface UserAvatarProps {
@@ -22,7 +22,7 @@ export const UserAvatar = ({
   isNameVisible = false
 }: UserAvatarProps) => {
   const profile = useProfileMetadata(pubkey)
-  const name = getProfileUsername(pubkey, profile)
+  const name = profile?.display_name || profile?.name || shorten(pubkey)
   const image = profile?.picture
 
   return (

src/hooks/useSigitMeta.tsx

@@ -3,8 +3,7 @@ import {
   CreateSignatureEventContent,
   DocSignatureEvent,
   Meta,
-  SignedEventContent,
+  SignedEventContent
-  OpenTimestamp
 } from '../types'
 import { Mark } from '../types/mark'
 import {
@@ -60,8 +59,6 @@ export interface FlatMeta
   signersStatus: {
     [signer: `npub1${string}`]: SignStatus
   }
-
-  timestamps?: OpenTimestamp[]
 }
 
 /**
@@ -166,6 +163,7 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
             setEncryptionKey(decrypted)
           }
         }
+
         // Temp. map to hold events and signers
         const parsedSignatureEventsMap = new Map<
           `npub1${string}`,
@@ -279,7 +277,6 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
     createSignature: meta?.createSignature,
     docSignatures: meta?.docSignatures,
     keys: meta?.keys,
-    timestamps: meta?.timestamps,
     isValid,
     kind,
     tags,

src/pages/create/index.tsx

@@ -40,8 +40,7 @@ import {
   signEventForMetaFile,
   updateUsersAppData,
   uploadToFileStorage,
-  DEFAULT_TOOLBOX,
+  DEFAULT_TOOLBOX
-  settleAllFullfilfedPromises
 } from '../../utils'
 import { Container } from '../../components/Container'
 import fileListStyles from '../../components/FileList/style.module.scss'
@@ -62,8 +61,7 @@ import {
   faTrash,
   faUpload
 } from '@fortawesome/free-solid-svg-icons'
-import { getSigitFile, SigitFile } from '../../utils/file.ts'
+import { SigitFile } from '../../utils/file.ts'
-import _ from 'lodash'
 import { generateTimestamp } from '../../utils/opentimestamps.ts'
 
 export const CreatePage = () => {
@@ -110,31 +108,9 @@ export const CreatePage = () => {
     {}
   )
   const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
-  const [parsingPdf, setIsParsing] = useState<boolean>(false)
-  useEffect(() => {
-    if (selectedFiles) {
-      /**
-       * Reads the binary files and converts to internal file type
-       * and sets to a state (adds images if it's a PDF)
-       */
-      const parsePages = async () => {
-        const files = await settleAllFullfilfedPromises(
-          selectedFiles,
-          getSigitFile
-        )
-
-        setDrawnFiles(files)
-      }
-
-      setIsParsing(true)
-
-      parsePages().finally(() => {
-        setIsParsing(false)
-      })
-    }
-  }, [selectedFiles])
 
   const [selectedTool, setSelectedTool] = useState<DrawTool>()
+  const [toolbox] = useState<DrawTool[]>(DEFAULT_TOOLBOX)
 
   /**
    * Changes the drawing tool
@@ -308,19 +284,6 @@ export const CreatePage = () => {
 
   const handleRemoveUser = (pubkey: string) => {
     setUsers((prev) => prev.filter((user) => user.pubkey !== pubkey))
-
-    // Set counterpart to ''
-    const drawnFilesCopy = _.cloneDeep(drawnFiles)
-    drawnFilesCopy.forEach((s) => {
-      s.pages?.forEach((p) => {
-        p.drawnFields.forEach((d) => {
-          if (d.counterpart === hexToNpub(pubkey)) {
-            d.counterpart = ''
-          }
-        })
-      })
-    })
-    setDrawnFiles(drawnFilesCopy)
   }
 
   /**
@@ -691,8 +654,6 @@ export const CreatePage = () => {
         const keys = await generateKeys(pubkeys, encryptionKey)
         if (!keys) return
 
-        setLoadingSpinnerDesc('Generating an open timestamp.')
-
         const timestamp = await generateTimestamp(
           extractNostrId(createSignature)
         )
@@ -778,6 +739,10 @@ export const CreatePage = () => {
     }
   }
 
+  const onDrawFieldsChange = (sigitFiles: SigitFile[]) => {
+    setDrawnFiles(sigitFiles)
+  }
+
   if (authUrl) {
     return (
       <iframe
@@ -891,36 +856,28 @@ export const CreatePage = () => {
               </div>
 
               <div className={`${styles.paperGroup} ${styles.toolbox}`}>
-                {DEFAULT_TOOLBOX.filter((drawTool) => !drawTool.isHidden).map(
+                {toolbox.map((drawTool: DrawTool, index: number) => {
-                  (drawTool: DrawTool, index: number) => {
+                  return (
-                    return (
+                    <div
-                      <div
+                      key={index}
-                        key={index}
+                      {...(drawTool.active && {
-                        {...(!drawTool.isComingSoon && {
+                        onClick: () => handleToolSelect(drawTool)
-                          onClick: () => handleToolSelect(drawTool)
+                      })}
-                        })}
+                      className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
-                        className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${drawTool.isComingSoon ? styles.comingSoon : ''}
                       `}
-                      >
+                    >
-                        <FontAwesomeIcon
+                      <FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
-                          fontSize={'15px'}
+                      {drawTool.label}
-                          icon={drawTool.icon}
+                      {drawTool.active ? (
-                        />
+                        <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
-                        {drawTool.label}
+                      ) : (
-                        {!drawTool.isComingSoon ? (
+                        <span className={styles.comingSoonPlaceholder}>
-                          <FontAwesomeIcon
+                          Coming soon
-                            fontSize={'15px'}
+                        </span>
-                            icon={faEllipsis}
+                      )}
-                          />
+                    </div>
-                        ) : (
+                  )
-                          <span className={styles.comingSoonPlaceholder}>
+                })}
-                            Coming soon
-                          </span>
-                        )}
-                      </div>
-                    )
-                  }
-                )}
               </div>
 
               <Button onClick={handleCreate} variant="contained">
@@ -936,17 +893,13 @@ export const CreatePage = () => {
           centerIcon={faFile}
           rightIcon={faToolbox}
         >
-          {parsingPdf ? (
+          <DrawPDFFields
-            <LoadingSpinner variant="small" />
+            metadata={metadata}
-          ) : (
+            users={users}
-            <DrawPDFFields
+            selectedFiles={selectedFiles}
-              users={users}
+            onDrawFieldsChange={onDrawFieldsChange}
-              metadata={metadata}
+            selectedTool={selectedTool}
-              selectedTool={selectedTool}
+          />
-              sigitFiles={drawnFiles}
-              setSigitFiles={setDrawnFiles}
-            />
-          )}
         </StickySideColumns>
       </Container>
     </>

src/pages/profile/index.tsx

@@ -1,6 +1,7 @@
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import EditIcon from '@mui/icons-material/Edit'
 import { Box, IconButton, SxProps, Theme, Typography } from '@mui/material'
+import { truncate } from 'lodash'
 import { Event, VerifiedEvent, kinds, nip19 } from 'nostr-tools'
 import { useEffect, useMemo, useState } from 'react'
 import { useSelector } from 'react-redux'
@@ -13,7 +14,6 @@ import { State } from '../../store/rootReducer'
 import { NostrJoiningBlock, ProfileMetadata } from '../../types'
 import {
   getNostrJoiningBlockNumber,
-  getProfileUsername,
   getRoboHashPicture,
   hexToNpub,
   shorten
@@ -42,7 +42,15 @@ export const ProfilePage = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc] = useState('Fetching metadata')
 
-  const profileName = pubkey && getProfileUsername(pubkey, profileMetadata)
+  const profileName =
+    pubkey &&
+    profileMetadata &&
+    truncate(
+      profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
+      {
+        length: 16
+      }
+    )
 
   useEffect(() => {
     if (npub) {

src/pages/sign/index.tsx

@@ -550,8 +550,6 @@ 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]

src/pages/verify/index.tsx

@@ -5,13 +5,7 @@ import { useEffect, useRef, useState } from 'react'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { NostrController } from '../../controllers'
-import {
+import { DocSignatureEvent, Meta } from '../../types'
-  DocSignatureEvent,
-  Meta,
-  SignedEvent,
-  OpenTimestamp,
-  OpenTimestampUpgradeVerifyResponse
-} from '../../types'
 import {
   decryptArrayBuffer,
   extractMarksFromSignedMeta,
@@ -21,10 +15,7 @@ import {
   parseJson,
   readContentOfZipEntry,
   signEventForMetaFile,
-  getCurrentUserFiles,
+  getCurrentUserFiles
-  updateUsersAppData,
-  npubToHex,
-  sendNotification
 } from '../../utils'
 import styles from './style.module.scss'
 import { useLocation } from 'react-router-dom'
@@ -43,7 +34,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'
+import { UsersDetails } from '../../components/UsersDetails.tsx/index.tsx'
 import FileList from '../../components/FileList'
 import { CurrentUserFile } from '../../types/file.ts'
 import { Mark } from '../../types/mark.ts'
@@ -57,8 +48,6 @@ import {
   faFile,
   faFileDownload
 } from '@fortawesome/free-solid-svg-icons'
-import { upgradeAndVerifyTimestamp } from '../../utils/opentimestamps.ts'
-import _ from 'lodash'
 
 interface PdfViewProps {
   files: CurrentUserFile[]
@@ -191,8 +180,7 @@ export const VerifyPage = () => {
     signers,
     viewers,
     fileHashes,
-    parsedSignatureEvents,
+    parsedSignatureEvents
-    timestamps
   } = useSigitMeta(meta)
 
   const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
@@ -202,16 +190,6 @@ 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)
@@ -220,115 +198,6 @@ export const VerifyPage = () => {
   }, [currentFileHashes, fileHashes, files])
 
   useEffect(() => {
-    console.log('timestamps: ', timestamps)
-    if (timestamps && timestamps.length > 0) {
-      console.log(timestamps.every((t) => !!t.verification))
-      if (timestamps.every((t) => !!t.verification)) {
-        toast.success('All of your timestamps are fully verified on Bitcoin.')
-        return
-      }
-      const upgradeT = async (timestamps: OpenTimestamp[]) => {
-        try {
-          setLoadingSpinnerDesc('Upgrading and verifying your timestamps.')
-          const verifiedResults = await Promise.all(
-            timestamps.map(upgradeAndVerifyTimestamp)
-          )
-
-          /**
-           * 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 upgradedTimestamps = verifiedResults
-            .filter((t) => t.upgraded || isNewlyVerified(t, timestamps))
-            .map((t) => {
-              const timestamp = t.timestamp
-              if (t.verified) {
-                timestamp.verification = t.verification
-              }
-              return timestamp
-            })
-
-          if (upgradedTimestamps.length === 0) {
-            toast.success('No timestamp upgrades found.')
-            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)
-    }
-  }, [timestamps])
-
-  useEffect(() => {
-    console.log('this runs')
     if (metaInNavState && encryptionKey) {
       const processSigit = async () => {
         setIsLoading(true)

src/types/core.ts

@@ -18,7 +18,7 @@ export interface Meta {
   docSignatures: { [key: `npub1${string}`]: string }
   exportSignature?: string
   keys?: { sender: string; keys: { [user: `npub1${string}`]: string } }
-  timestamps?: OpenTimestamp[]
+  timestamps?: Timestamp[]
 }
 
 export interface CreateSignatureEventContent {
@@ -40,23 +40,9 @@ export interface Sigit {
   meta: Meta
 }
 
-export interface OpenTimestamp {
+export interface Timestamp {
   nostrId: string
-  value: string
+  timestamp: 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 {

src/types/drawing.ts

@@ -31,10 +31,7 @@ export interface DrawTool {
   icon: IconDefinition
   defaultValue?: string
   selected?: boolean
-  /** show or hide the toolbox item */
+  active?: boolean
-  isHidden?: boolean
-  /** show or hide "coming soon" message on the toolbox item */
-  isComingSoon?: boolean
 }
 
 export enum MarkType {

src/types/opentimestamps.d.ts

@@ -3,17 +3,13 @@ interface OpenTimestamps {
   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(
+  verify(file: any): Promise<void>
-    ots: string,
-    file: string
-  ): Promise<TimestampVerficiationResponse | Record<string, never>>
 
   // Other utilities or operations (like OpSHA256, serialization)
   Ops: {
@@ -29,9 +25,5 @@ interface OpenTimestamps {
   deserialize(bytes: Uint8Array): any
 
   // Other potential methods based on repo functions
-  upgrade(file: any): Promise<boolean>
+  upgrade(file: any): Promise<void>
-}
-
-interface TimestampVerficiationResponse {
-  bitcoin: { timestamp: number; height: number }
 }

src/types/profile.ts

@@ -1,7 +1,6 @@
 export interface ProfileMetadata {
   name?: string
   display_name?: string
-  /** @deprecated use name instead */
   username?: string
   picture?: string
   banner?: string

src/utils/mark.ts

@@ -3,26 +3,26 @@ import { hexToNpub } from './nostr.ts'
 import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
 import { EMPTY } from './const.ts'
-import { DrawTool, MarkType } from '../types/drawing.ts'
+import { MarkType } from '../types/drawing.ts'
 import {
   faT,
   faSignature,
   faBriefcase,
   faIdCard,
-  faClock,
-  fa1,
-  faCalendarDays,
-  faCheckDouble,
-  faCircleDot,
-  faCreditCard,
   faHeading,
+  faClock,
+  faCalendarDays,
+  fa1,
   faImage,
-  faPaperclip,
-  faPhone,
-  faSquareCaretDown,
   faSquareCheck,
+  faCheckDouble,
+  faPaperclip,
+  faCircleDot,
+  faSquareCaretDown,
+  faTableCellsLarge,
   faStamp,
-  faTableCellsLarge
+  faCreditCard,
+  faPhone
 } from '@fortawesome/free-solid-svg-icons'
 
 /**
@@ -152,113 +152,114 @@ const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
   return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
 }
 
-export const DEFAULT_TOOLBOX: DrawTool[] = [
+export const DEFAULT_TOOLBOX = [
   {
-    identifier: MarkType.FULLNAME,
+    identifier: MarkType.TEXT,
-    icon: faIdCard,
+    icon: faT,
-    label: 'Full Name',
+    label: 'Text',
-    isComingSoon: true
+    active: true
-  },
-  {
-    identifier: MarkType.JOBTITLE,
-    icon: faBriefcase,
-    label: 'Job Title',
-    isComingSoon: true
   },
   {
     identifier: MarkType.SIGNATURE,
     icon: faSignature,
     label: 'Signature',
-    isComingSoon: true
+    active: false
   },
   {
-    identifier: MarkType.DATETIME,
+    identifier: MarkType.JOBTITLE,
-    icon: faClock,
+    icon: faBriefcase,
-    label: 'Date Time',
+    label: 'Job Title',
-    isComingSoon: true
+    active: false
   },
   {
-    identifier: MarkType.TEXT,
+    identifier: MarkType.FULLNAME,
-    icon: faT,
+    icon: faIdCard,
-    label: 'Text'
+    label: 'Full Name',
-  },
+    active: false
-  {
-    identifier: MarkType.NUMBER,
-    icon: fa1,
-    label: 'Number',
-    isComingSoon: true
   },
   {
     identifier: MarkType.INITIALS,
     icon: faHeading,
     label: 'Initials',
-    isHidden: true
+    active: false
+  },
+  {
+    identifier: MarkType.DATETIME,
+    icon: faClock,
+    label: 'Date Time',
+    active: false
   },
   {
     identifier: MarkType.DATE,
     icon: faCalendarDays,
     label: 'Date',
-    isHidden: true
+    active: false
+  },
+  {
+    identifier: MarkType.NUMBER,
+    icon: fa1,
+    label: 'Number',
+    active: false
   },
   {
     identifier: MarkType.IMAGES,
     icon: faImage,
     label: 'Images',
-    isHidden: true
+    active: false
   },
   {
     identifier: MarkType.CHECKBOX,
     icon: faSquareCheck,
     label: 'Checkbox',
-    isHidden: true
+    active: false
   },
   {
     identifier: MarkType.MULTIPLE,
     icon: faCheckDouble,
     label: 'Multiple',
-    isHidden: true
+    active: false
   },
   {
     identifier: MarkType.FILE,
     icon: faPaperclip,
     label: 'File',
-    isHidden: true
+    active: false
   },
   {
     identifier: MarkType.RADIO,
     icon: faCircleDot,
     label: 'Radio',
-    isHidden: true
+    active: false
   },
   {
     identifier: MarkType.SELECT,
     icon: faSquareCaretDown,
     label: 'Select',
-    isHidden: true
+    active: false
   },
   {
     identifier: MarkType.CELLS,
     icon: faTableCellsLarge,
     label: 'Cells',
-    isHidden: true
+    active: false
   },
   {
     identifier: MarkType.STAMP,
     icon: faStamp,
     label: 'Stamp',
-    isHidden: true
+    active: false
   },
   {
     identifier: MarkType.PAYMENT,
     icon: faCreditCard,
     label: 'Payment',
-    isHidden: true
+    active: false
   },
   {
     identifier: MarkType.PHONE,
     icon: faPhone,
     label: 'Phone',
-    isHidden: true
+    active: false
   }
 ]
 

src/utils/nostr.ts

@@ -1,6 +1,6 @@
 import { bytesToHex, hexToBytes } from '@noble/hashes/utils'
 import axios from 'axios'
-import _, { truncate } from 'lodash'
+import _ from 'lodash'
 import {
   Event,
   EventTemplate,
@@ -30,7 +30,7 @@ import {
 import { AuthState, Keys } from '../store/auth/types'
 import { RelaysState } from '../store/relays/types'
 import store from '../store/store'
-import { Meta, ProfileMetadata, SignedEvent, UserAppData } from '../types'
+import { Meta, SignedEvent, UserAppData } from '../types'
 import { getDefaultRelayMap } from './relays'
 import { parseJson, removeLeadingSlash } from './string'
 import { timeout } from './utils'
@@ -974,16 +974,3 @@ export const sendNotification = async (receiver: string, meta: Meta) => {
     throw err
   })
 }
-
-/**
- * Show user's name, first available in order: display_name, name, or npub as fallback
- * @param npub User identifier, it can be either pubkey or npub1 (we only show npub)
- * @param profile User profile
- */
-export const getProfileUsername = (
-  npub: `npub1${string}` | string,
-  profile?: ProfileMetadata
-) =>
-  truncate(profile?.display_name || profile?.name || hexToNpub(npub), {
-    length: 16
-  })

src/utils/opentimestamps.ts

@@ -1,8 +1,7 @@
-import { OpenTimestamp, OpenTimestampUpgradeVerifyResponse } from '../types'
+import { Timestamp } 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.
@@ -10,10 +9,10 @@ import { hexStringToUint8Array } from './string.ts'
  */
 export const generateTimestamp = async (
   nostrId: string
-): Promise<OpenTimestamp | undefined> => {
+): Promise<Timestamp | undefined> => {
   try {
     return {
-      value: await retry(() => timestamp(nostrId)),
+      timestamp: await retry(() => timestamp(nostrId)),
       nostrId: nostrId
     }
   } catch (error) {
@@ -22,89 +21,6 @@ export const generateTimestamp = async (
   }
 }
 
-/**
- * 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
- */
-const upgrade = async (
-  t: OpenTimestamp
-): Promise<OpenTimestampUpgradeVerifyResponse> => {
-  console.log('timestamp: ', t)
-  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(