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 } = profileMetadata
+        const { picture, display_name, name } = JSON.parse(
+          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('')

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 { SigitFile } from '../../utils/file'
+import { truncate } from 'lodash'
+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 _ from 'lodash'
+import { LoadingSpinner } from '../LoadingSpinner'
 
 const DEFAULT_START_SIZE = {
   width: 140,
@@ -28,50 +28,55 @@ const DEFAULT_START_SIZE = {
 } as const
 
 interface Props {
+  selectedFiles: File[]
   users: User[]
   metadata: { [key: string]: ProfileMetadata }
-  sigitFiles: SigitFile[]
-  setSigitFiles: React.Dispatch<React.SetStateAction<SigitFile[]>>
+  onDrawFieldsChange: (sigitFiles: SigitFile[]) => void
   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<{
-    fileIndex: number
-    pageIndex: number
-    drawnFieldIndex: number
-  }>()
-  const isActiveDrawnField = (
-    fileIndex: number,
-    pageIndex: number,
-    drawnFieldIndex: number
-  ) =>
-    activeDrawnField?.fileIndex === fileIndex &&
-    activeDrawnField?.pageIndex === pageIndex &&
-    activeDrawnField?.drawnFieldIndex === drawnFieldIndex
+  const [activeDrawField, setActiveDrawField] = useState<number>()
+
+  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
+        )
+
+        setSigitFiles(files)
+      }
+
+      setIsParsing(true)
+
+      parsePages().finally(() => {
+        setIsParsing(false)
+      })
+    }
+  }, [selectedFiles])
+
+  useEffect(() => {
+    if (sigitFiles) onDrawFieldsChange(sigitFiles)
+  }, [onDrawFieldsChange, sigitFiles])
 
   /**
    * Drawing events
@@ -98,12 +103,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Pointer event
    * @param page PdfPage where press happened
    */
-  const handlePointerDown = (
-    event: React.PointerEvent,
-    page: PdfPage,
-    fileIndex: number,
-    pageIndex: number
-  ) => {
+  const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
@@ -118,17 +118,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: lastSigner,
       type: selectedTool.identifier
     }
 
     page.drawnFields.push(newField)
 
-    setActiveDrawnField({
-      fileIndex,
-      pageIndex,
-      drawnFieldIndex: page.drawnFields.length - 1
-    })
     setMouseState((prev) => {
       return {
         ...prev,
@@ -197,8 +192,6 @@ export const DrawPDFFields = (props: Props) => {
    */
   const handleDrawnFieldPointerDown = (
     event: React.PointerEvent,
-    fileIndex: number,
-    pageIndex: number,
     drawnFieldIndex: number
   ) => {
     event.stopPropagation()
@@ -208,7 +201,7 @@ export const DrawPDFFields = (props: Props) => {
 
     const drawingRectangleCoords = getPointerCoordinates(event)
 
-    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
+    setActiveDrawField(drawnFieldIndex)
     setMouseState({
       dragging: true,
       clicked: false,
@@ -264,15 +257,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 +372,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 +384,7 @@ export const DrawPDFFields = (props: Props) => {
                   <div
                     key={drawnFieldIndex}
                     onPointerDown={(event) =>
-                      handleDrawnFieldPointerDown(
-                        event,
-                        fileIndex,
-                        pageIndex,
-                        drawnFieldIndex
-                      )
+                      handleDrawnFieldPointerDown(event, drawnFieldIndex)
                     }
                     onPointerMove={(event) => {
                       handleDrawnFieldPointerMove(event, drawnField, page.width)
@@ -419,11 +405,7 @@ export const DrawPDFFields = (props: Props) => {
                       touchAction: 'none',
                       opacity:
                         mouseState.dragging &&
-                        isActiveDrawnField(
-                          fileIndex,
-                          pageIndex,
-                          drawnFieldIndex
-                        )
+                        activeDrawField === drawnFieldIndex
                           ? 0.8
                           : undefined
                     }}
@@ -440,12 +422,7 @@ export const DrawPDFFields = (props: Props) => {
                     </div>
                     <span
                       onPointerDown={(event) =>
-                        handleResizePointerDown(
-                          event,
-                          fileIndex,
-                          pageIndex,
-                          drawnFieldIndex
-                        )
+                        handleResizePointerDown(event, drawnFieldIndex)
                       }
                       onPointerMove={(event) => {
                         handleResizePointerMove(event, drawnField, page.width)
@@ -454,11 +431,7 @@ export const DrawPDFFields = (props: Props) => {
                       style={{
                         background:
                           mouseState.resizing &&
-                          isActiveDrawnField(
-                            fileIndex,
-                            pageIndex,
-                            drawnFieldIndex
-                          )
+                          activeDrawField === drawnFieldIndex
                             ? 'var(--primary-main)'
                             : undefined
                       }}
@@ -476,23 +449,6 @@ export const DrawPDFFields = (props: Props) => {
                     >
                       <Close fontSize="small" />
                     </span>
-                    {!isActiveDrawnField(
-                      fileIndex,
-                      pageIndex,
-                      drawnFieldIndex
-                    ) &&
-                      !!drawnField.counterpart && (
-                        <div className={styles.counterpartAvatar}>
-                          <UserAvatar
-                            pubkey={npubToHex(drawnField.counterpart)!}
-                          />
-                        </div>
-                      )}
-                    {isActiveDrawnField(
-                      fileIndex,
-                      pageIndex,
-                      drawnFieldIndex
-                    ) && (
                     <div
                       onPointerDown={handleUserSelectPointerDown}
                       className={styles.userSelect}
@@ -500,7 +456,12 @@ export const DrawPDFFields = (props: Props) => {
                       <FormControl fullWidth size="small">
                         <InputLabel id="counterparts">Counterpart</InputLabel>
                         <Select
-                            value={getAvailableSigner(drawnField.counterpart)}
+                          value={
+                            drawnField.counterpart ||
+                            lastSigner ||
+                            defaultSignerNpub ||
+                            ''
+                          }
                           onChange={(event) => {
                             drawnField.counterpart = event.target.value
                             setLastSigner(event.target.value)
@@ -511,17 +472,27 @@ export const DrawPDFFields = (props: Props) => {
                           sx={{
                             background: 'white'
                           }}
-                            renderValue={(value) =>
-                              renderCounterpartValue(value)
-                            }
+                          renderValue={(value) => renderCounterpartValue(value)}
                         >
                           {signers.map((signer, index) => {
                             const npub = hexToNpub(signer.pubkey)
+                            let displayValue = truncate(npub, {
+                              length: 16
+                            })
+
                             const metadata = props.metadata[signer.pubkey]
-                              const displayValue = getProfileUsername(
+
+                            if (metadata) {
+                              displayValue = truncate(
+                                metadata.name ||
+                                  metadata.display_name ||
+                                  metadata.username ||
                                   npub,
-                                metadata
+                                {
+                                  length: 16
+                                }
                               )
+                            }
 
                             return (
                               <MenuItem key={index} value={npub}>
@@ -547,7 +518,6 @@ export const DrawPDFFields = (props: Props) => {
                         </Select>
                       </FormControl>
                     </div>
-                    )}
                   </div>
                 )
               })}
@@ -559,15 +529,24 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   const renderCounterpartValue = (npub: string) => {
-    let displayValue = _.truncate(npub, { length: 16 })
+    let displayValue = truncate(npub, {
+      length: 16
+    })
 
     const signer = signers.find((u) => u.pubkey === npubToHex(npub))
     if (signer) {
       const metadata = props.metadata[signer.pubkey]
-      displayValue = getProfileUsername(npub, metadata)
+      if (metadata) {
+        displayValue = truncate(
+          metadata.display_name || metadata.name || npub,
+          {
+            length: 16
+          }
+        )
+      }
 
       return (
-        <div className={styles.counterpartSelectValue}>
+        <>
           <AvatarIconButton
             src={props.metadata[signer.pubkey]?.picture}
             hexKey={signer.pubkey || undefined}
@@ -581,13 +560,21 @@ export const DrawPDFFields = (props: Props) => {
             }}
           />
           {displayValue}
-        </div>
+        </>
       )
     }
 
     return displayValue
   }
 
+  if (parsingPdf) {
+    return <LoadingSpinner variant="small" />
+  }
+
+  if (!sigitFiles.length) {
+    return ''
+  }
+
   return (
     <div className="files-wrapper">
       {sigitFiles.map((file, i) => {
@@ -606,7 +593,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/pages/create/index.tsx

@@ -39,8 +39,7 @@ import {
   signEventForMetaFile,
   updateUsersAppData,
   uploadToFileStorage,
-  DEFAULT_TOOLBOX,
-  settleAllFullfilfedPromises
+  DEFAULT_TOOLBOX
 } from '../../utils'
 import { Container } from '../../components/Container'
 import fileListStyles from '../../components/FileList/style.module.scss'
@@ -61,8 +60,7 @@ import {
   faTrash,
   faUpload
 } from '@fortawesome/free-solid-svg-icons'
-import { getSigitFile, SigitFile } from '../../utils/file.ts'
-import _ from 'lodash'
+import { SigitFile } from '../../utils/file.ts'
 
 export const CreatePage = () => {
   const navigate = useNavigate()
@@ -108,29 +106,6 @@ 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>()
 
@@ -306,19 +281,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)
   }
 
   /**
@@ -761,6 +723,10 @@ export const CreatePage = () => {
     }
   }
 
+  const onDrawFieldsChange = (sigitFiles: SigitFile[]) => {
+    setDrawnFiles(sigitFiles)
+  }
+
   if (authUrl) {
     return (
       <iframe
@@ -919,17 +885,13 @@ export const CreatePage = () => {
           centerIcon={faFile}
           rightIcon={faToolbox}
         >
-          {parsingPdf ? (
-            <LoadingSpinner variant="small" />
-          ) : (
           <DrawPDFFields
-              users={users}
             metadata={metadata}
+            users={users}
+            selectedFiles={selectedFiles}
+            onDrawFieldsChange={onDrawFieldsChange}
             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/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/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
-  })