From f8a4480994085b56bbda28b72f2a6d75b0c555d7 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 17 Sep 2024 15:04:54 +0200
Subject: [PATCH 01/10] refactor(toolbox): reduce number of mark types

Closes #201
---
 src/utils/mark.ts | 178 +++++++++++++++++++++-------------------------
 1 file changed, 83 insertions(+), 95 deletions(-)

diff --git a/src/utils/mark.ts b/src/utils/mark.ts
index ac80623..258dc51 100644
--- a/src/utils/mark.ts
+++ b/src/utils/mark.ts
@@ -9,20 +9,8 @@ import {
   faSignature,
   faBriefcase,
   faIdCard,
-  faHeading,
   faClock,
-  faCalendarDays,
-  fa1,
-  faImage,
-  faSquareCheck,
-  faCheckDouble,
-  faPaperclip,
-  faCircleDot,
-  faSquareCaretDown,
-  faTableCellsLarge,
-  faStamp,
-  faCreditCard,
-  faPhone
+  fa1
 } from '@fortawesome/free-solid-svg-icons'
 
 /**
@@ -154,15 +142,9 @@ const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
 
 export const DEFAULT_TOOLBOX = [
   {
-    identifier: MarkType.TEXT,
-    icon: faT,
-    label: 'Text',
-    active: true
-  },
-  {
-    identifier: MarkType.SIGNATURE,
-    icon: faSignature,
-    label: 'Signature',
+    identifier: MarkType.FULLNAME,
+    icon: faIdCard,
+    label: 'Full Name',
     active: false
   },
   {
@@ -172,15 +154,9 @@ export const DEFAULT_TOOLBOX = [
     active: false
   },
   {
-    identifier: MarkType.FULLNAME,
-    icon: faIdCard,
-    label: 'Full Name',
-    active: false
-  },
-  {
-    identifier: MarkType.INITIALS,
-    icon: faHeading,
-    label: 'Initials',
+    identifier: MarkType.SIGNATURE,
+    icon: faSignature,
+    label: 'Signature',
     active: false
   },
   {
@@ -190,77 +166,89 @@ export const DEFAULT_TOOLBOX = [
     active: false
   },
   {
-    identifier: MarkType.DATE,
-    icon: faCalendarDays,
-    label: 'Date',
-    active: false
+    identifier: MarkType.TEXT,
+    icon: faT,
+    label: 'Text',
+    active: true
   },
   {
     identifier: MarkType.NUMBER,
     icon: fa1,
     label: 'Number',
     active: false
-  },
-  {
-    identifier: MarkType.IMAGES,
-    icon: faImage,
-    label: 'Images',
-    active: false
-  },
-  {
-    identifier: MarkType.CHECKBOX,
-    icon: faSquareCheck,
-    label: 'Checkbox',
-    active: false
-  },
-  {
-    identifier: MarkType.MULTIPLE,
-    icon: faCheckDouble,
-    label: 'Multiple',
-    active: false
-  },
-  {
-    identifier: MarkType.FILE,
-    icon: faPaperclip,
-    label: 'File',
-    active: false
-  },
-  {
-    identifier: MarkType.RADIO,
-    icon: faCircleDot,
-    label: 'Radio',
-    active: false
-  },
-  {
-    identifier: MarkType.SELECT,
-    icon: faSquareCaretDown,
-    label: 'Select',
-    active: false
-  },
-  {
-    identifier: MarkType.CELLS,
-    icon: faTableCellsLarge,
-    label: 'Cells',
-    active: false
-  },
-  {
-    identifier: MarkType.STAMP,
-    icon: faStamp,
-    label: 'Stamp',
-    active: false
-  },
-  {
-    identifier: MarkType.PAYMENT,
-    icon: faCreditCard,
-    label: 'Payment',
-    active: false
-  },
-  {
-    identifier: MarkType.PHONE,
-    icon: faPhone,
-    label: 'Phone',
-    active: false
   }
+  // {
+  //   identifier: MarkType.INITIALS,
+  //   icon: faHeading,
+  //   label: 'Initials',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.DATE,
+  //   icon: faCalendarDays,
+  //   label: 'Date',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.IMAGES,
+  //   icon: faImage,
+  //   label: 'Images',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.CHECKBOX,
+  //   icon: faSquareCheck,
+  //   label: 'Checkbox',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.MULTIPLE,
+  //   icon: faCheckDouble,
+  //   label: 'Multiple',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.FILE,
+  //   icon: faPaperclip,
+  //   label: 'File',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.RADIO,
+  //   icon: faCircleDot,
+  //   label: 'Radio',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.SELECT,
+  //   icon: faSquareCaretDown,
+  //   label: 'Select',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.CELLS,
+  //   icon: faTableCellsLarge,
+  //   label: 'Cells',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.STAMP,
+  //   icon: faStamp,
+  //   label: 'Stamp',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.PAYMENT,
+  //   icon: faCreditCard,
+  //   label: 'Payment',
+  //   active: false
+  // },
+  // {
+  //   identifier: MarkType.PHONE,
+  //   icon: faPhone,
+  //   label: 'Phone',
+  //   active: false
+  // }
 ]
 
 export const getToolboxLabelByMarkType = (markType: MarkType) => {

From dfdcb8419d5b3c8ca34c6f9590107ce120a53174 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Tue, 17 Sep 2024 17:21:30 +0200
Subject: [PATCH 02/10] fix(marks): add default signer

---
 src/components/DrawPDFFields/index.tsx | 113 ++++++++++++-------------
 1 file changed, 56 insertions(+), 57 deletions(-)

diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index 7c1227d..aa6b0e5 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@@ -37,6 +37,8 @@ interface Props {
 
 export const DrawPDFFields = (props: 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 { to, from } = useScale()
 
   const [sigitFiles, setSigitFiles] = useState<SigitFile[]>([])
@@ -115,7 +117,7 @@ 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: '',
+      counterpart: defaultSignerNpub,
       type: selectedTool.identifier
     }
 
@@ -453,7 +455,9 @@ export const DrawPDFFields = (props: Props) => {
                       <FormControl fullWidth size="small">
                         <InputLabel id="counterparts">Counterpart</InputLabel>
                         <Select
-                          value={drawnField.counterpart}
+                          value={
+                            drawnField.counterpart || defaultSignerNpub || ''
+                          }
                           onChange={(event) => {
                             drawnField.counterpart = event.target.value
                             refreshPdfFiles()
@@ -465,52 +469,47 @@ export const DrawPDFFields = (props: Props) => {
                           }}
                           renderValue={(value) => renderCounterpartValue(value)}
                         >
-                          {users
-                            .filter((u) => u.role === UserRole.signer)
-                            .map((user, index) => {
-                              const npub = hexToNpub(user.pubkey)
-                              let displayValue = truncate(npub, {
-                                length: 16
-                              })
+                          {signers.map((signer, index) => {
+                            const npub = hexToNpub(signer.pubkey)
+                            let displayValue = truncate(npub, {
+                              length: 16
+                            })
 
-                              const metadata = props.metadata[user.pubkey]
+                            const metadata = props.metadata[signer.pubkey]
 
-                              if (metadata) {
-                                displayValue = truncate(
-                                  metadata.name ||
-                                    metadata.display_name ||
-                                    metadata.username ||
-                                    npub,
-                                  {
-                                    length: 16
-                                  }
-                                )
-                              }
-
-                              return (
-                                <MenuItem
-                                  key={index}
-                                  value={hexToNpub(user.pubkey)}
-                                >
-                                  <ListItemIcon>
-                                    <AvatarIconButton
-                                      src={metadata?.picture}
-                                      hexKey={user.pubkey}
-                                      aria-label={`account of user ${displayValue}`}
-                                      color="inherit"
-                                      sx={{
-                                        padding: 0,
-                                        '> img': {
-                                          width: '30px',
-                                          height: '30px'
-                                        }
-                                      }}
-                                    />
-                                  </ListItemIcon>
-                                  <ListItemText>{displayValue}</ListItemText>
-                                </MenuItem>
+                            if (metadata) {
+                              displayValue = truncate(
+                                metadata.name ||
+                                  metadata.display_name ||
+                                  metadata.username ||
+                                  npub,
+                                {
+                                  length: 16
+                                }
                               )
-                            })}
+                            }
+
+                            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>
@@ -524,28 +523,28 @@ export const DrawPDFFields = (props: Props) => {
     )
   }
 
-  const renderCounterpartValue = (value: string) => {
-    const user = users.find((u) => u.pubkey === npubToHex(value))
-    if (user) {
-      let displayValue = truncate(value, {
-        length: 16
-      })
-
-      const metadata = props.metadata[user.pubkey]
+  const renderCounterpartValue = (npub: string) => {
+    let displayValue = truncate(npub, {
+      length: 16
+    })
 
+    const signer = signers.find((u) => u.pubkey === npubToHex(npub))
+    if (signer) {
+      const metadata = props.metadata[signer.pubkey]
       if (metadata) {
         displayValue = truncate(
-          metadata.name || metadata.display_name || metadata.username || value,
+          metadata.display_name || metadata.name || npub,
           {
             length: 16
           }
         )
       }
+
       return (
         <>
           <AvatarIconButton
-            src={props.metadata[user.pubkey]?.picture}
-            hexKey={npubToHex(user.pubkey) || undefined}
+            src={props.metadata[signer.pubkey]?.picture}
+            hexKey={signer.pubkey || undefined}
             sx={{
               padding: 0,
               marginRight: '6px',
@@ -560,7 +559,7 @@ export const DrawPDFFields = (props: Props) => {
       )
     }
 
-    return value
+    return displayValue
   }
 
   if (parsingPdf) {

From 39934f59c375d774f1fb4f7a97676304f5e9fd41 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 19 Sep 2024 11:46:34 +0200
Subject: [PATCH 03/10] fix: last signer as default next

---
 src/components/DrawPDFFields/index.tsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index aa6b0e5..194291f 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@@ -39,6 +39,7 @@ export const DrawPDFFields = (props: 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)
   const { to, from } = useScale()
 
   const [sigitFiles, setSigitFiles] = useState<SigitFile[]>([])
@@ -117,7 +118,7 @@ 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: defaultSignerNpub,
+      counterpart: lastSigner,
       type: selectedTool.identifier
     }
 
@@ -456,10 +457,14 @@ export const DrawPDFFields = (props: Props) => {
                         <InputLabel id="counterparts">Counterpart</InputLabel>
                         <Select
                           value={
-                            drawnField.counterpart || defaultSignerNpub || ''
+                            drawnField.counterpart ||
+                            lastSigner ||
+                            defaultSignerNpub ||
+                            ''
                           }
                           onChange={(event) => {
                             drawnField.counterpart = event.target.value
+                            setLastSigner(event.target.value)
                             refreshPdfFiles()
                           }}
                           labelId="counterparts"

From f81f2b05230cb9038d24a1303edccda84b74b533 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 19 Sep 2024 13:15:54 +0200
Subject: [PATCH 04/10] refactor: better variable names

---
 src/pages/create/index.tsx |  51 ++++++-----
 src/types/drawing.ts       |   5 +-
 src/utils/mark.ts          | 175 ++++++++++++++++++++-----------------
 3 files changed, 126 insertions(+), 105 deletions(-)

diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index dd17450..5c207fc 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -108,7 +108,6 @@ export const CreatePage = () => {
   const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
 
   const [selectedTool, setSelectedTool] = useState<DrawTool>()
-  const [toolbox] = useState<DrawTool[]>(DEFAULT_TOOLBOX)
 
   /**
    * Changes the drawing tool
@@ -833,28 +832,36 @@ export const CreatePage = () => {
               </div>
 
               <div className={`${styles.paperGroup} ${styles.toolbox}`}>
-                {toolbox.map((drawTool: DrawTool, index: number) => {
-                  return (
-                    <div
-                      key={index}
-                      {...(drawTool.active && {
-                        onClick: () => handleToolSelect(drawTool)
-                      })}
-                      className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
+                {DEFAULT_TOOLBOX.filter((drawTool) => !drawTool.isHidden).map(
+                  (drawTool: DrawTool, index: number) => {
+                    return (
+                      <div
+                        key={index}
+                        {...(!drawTool.isComingSoon && {
+                          onClick: () => handleToolSelect(drawTool)
+                        })}
+                        className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${drawTool.isComingSoon ? styles.comingSoon : ''}
                       `}
-                    >
-                      <FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
-                      {drawTool.label}
-                      {drawTool.active ? (
-                        <FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
-                      ) : (
-                        <span className={styles.comingSoonPlaceholder}>
-                          Coming soon
-                        </span>
-                      )}
-                    </div>
-                  )
-                })}
+                      >
+                        <FontAwesomeIcon
+                          fontSize={'15px'}
+                          icon={drawTool.icon}
+                        />
+                        {drawTool.label}
+                        {!drawTool.isComingSoon ? (
+                          <FontAwesomeIcon
+                            fontSize={'15px'}
+                            icon={faEllipsis}
+                          />
+                        ) : (
+                          <span className={styles.comingSoonPlaceholder}>
+                            Coming soon
+                          </span>
+                        )}
+                      </div>
+                    )
+                  }
+                )}
               </div>
 
               <Button onClick={handleCreate} variant="contained">
diff --git a/src/types/drawing.ts b/src/types/drawing.ts
index eac2c21..c5c230c 100644
--- a/src/types/drawing.ts
+++ b/src/types/drawing.ts
@@ -31,7 +31,10 @@ export interface DrawTool {
   icon: IconDefinition
   defaultValue?: string
   selected?: boolean
-  active?: boolean
+  /** show or hide the toolbox item */
+  isHidden?: boolean
+  /** show or hide "coming soon" message on the toolbox item */
+  isComingSoon?: boolean
 }
 
 export enum MarkType {
diff --git a/src/utils/mark.ts b/src/utils/mark.ts
index 258dc51..0f437c4 100644
--- a/src/utils/mark.ts
+++ b/src/utils/mark.ts
@@ -3,14 +3,26 @@ import { hexToNpub } from './nostr.ts'
 import { Meta, SignedEventContent } from '../types'
 import { Event } from 'nostr-tools'
 import { EMPTY } from './const.ts'
-import { MarkType } from '../types/drawing.ts'
+import { DrawTool, MarkType } from '../types/drawing.ts'
 import {
   faT,
   faSignature,
   faBriefcase,
   faIdCard,
   faClock,
-  fa1
+  fa1,
+  faCalendarDays,
+  faCheckDouble,
+  faCircleDot,
+  faCreditCard,
+  faHeading,
+  faImage,
+  faPaperclip,
+  faPhone,
+  faSquareCaretDown,
+  faSquareCheck,
+  faStamp,
+  faTableCellsLarge
 } from '@fortawesome/free-solid-svg-icons'
 
 /**
@@ -140,115 +152,114 @@ const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
   return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
 }
 
-export const DEFAULT_TOOLBOX = [
+export const DEFAULT_TOOLBOX: DrawTool[] = [
   {
     identifier: MarkType.FULLNAME,
     icon: faIdCard,
     label: 'Full Name',
-    active: false
+    isComingSoon: true
   },
   {
     identifier: MarkType.JOBTITLE,
     icon: faBriefcase,
     label: 'Job Title',
-    active: false
+    isComingSoon: true
   },
   {
     identifier: MarkType.SIGNATURE,
     icon: faSignature,
     label: 'Signature',
-    active: false
+    isComingSoon: true
   },
   {
     identifier: MarkType.DATETIME,
     icon: faClock,
     label: 'Date Time',
-    active: false
+    isComingSoon: true
   },
   {
     identifier: MarkType.TEXT,
     icon: faT,
-    label: 'Text',
-    active: true
+    label: 'Text'
   },
   {
     identifier: MarkType.NUMBER,
     icon: fa1,
     label: 'Number',
-    active: false
+    isComingSoon: true
+  },
+  {
+    identifier: MarkType.INITIALS,
+    icon: faHeading,
+    label: 'Initials',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.DATE,
+    icon: faCalendarDays,
+    label: 'Date',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.IMAGES,
+    icon: faImage,
+    label: 'Images',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.CHECKBOX,
+    icon: faSquareCheck,
+    label: 'Checkbox',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.MULTIPLE,
+    icon: faCheckDouble,
+    label: 'Multiple',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.FILE,
+    icon: faPaperclip,
+    label: 'File',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.RADIO,
+    icon: faCircleDot,
+    label: 'Radio',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.SELECT,
+    icon: faSquareCaretDown,
+    label: 'Select',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.CELLS,
+    icon: faTableCellsLarge,
+    label: 'Cells',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.STAMP,
+    icon: faStamp,
+    label: 'Stamp',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.PAYMENT,
+    icon: faCreditCard,
+    label: 'Payment',
+    isHidden: true
+  },
+  {
+    identifier: MarkType.PHONE,
+    icon: faPhone,
+    label: 'Phone',
+    isHidden: true
   }
-  // {
-  //   identifier: MarkType.INITIALS,
-  //   icon: faHeading,
-  //   label: 'Initials',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.DATE,
-  //   icon: faCalendarDays,
-  //   label: 'Date',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.IMAGES,
-  //   icon: faImage,
-  //   label: 'Images',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.CHECKBOX,
-  //   icon: faSquareCheck,
-  //   label: 'Checkbox',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.MULTIPLE,
-  //   icon: faCheckDouble,
-  //   label: 'Multiple',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.FILE,
-  //   icon: faPaperclip,
-  //   label: 'File',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.RADIO,
-  //   icon: faCircleDot,
-  //   label: 'Radio',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.SELECT,
-  //   icon: faSquareCaretDown,
-  //   label: 'Select',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.CELLS,
-  //   icon: faTableCellsLarge,
-  //   label: 'Cells',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.STAMP,
-  //   icon: faStamp,
-  //   label: 'Stamp',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.PAYMENT,
-  //   icon: faCreditCard,
-  //   label: 'Payment',
-  //   active: false
-  // },
-  // {
-  //   identifier: MarkType.PHONE,
-  //   icon: faPhone,
-  //   label: 'Phone',
-  //   active: false
-  // }
 ]
 
 export const getToolboxLabelByMarkType = (markType: MarkType) => {

From 70cca9dd1003ea593b60bd9f29575716aa2b1ea2 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 19 Sep 2024 14:46:22 +0200
Subject: [PATCH 05/10] refactor: add getProfileUsername utility func

---
 src/components/AppBar/AppBar.tsx    | 11 +++++------
 src/components/UserAvatar/index.tsx |  4 ++--
 src/pages/profile/index.tsx         | 12 ++----------
 src/types/profile.ts                |  1 +
 src/utils/nostr.ts                  | 17 +++++++++++++++--
 5 files changed, 25 insertions(+), 20 deletions(-)

diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
index 4176a42..495e9dc 100644
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@@ -28,9 +28,9 @@ import {
 } from '../../routes'
 import {
   clearAuthToken,
+  getProfileUsername,
   hexToNpub,
-  saveNsecBunkerDelegatedKey,
-  shorten
+  saveNsecBunkerDelegatedKey
 } from '../../utils'
 import styles from './style.module.scss'
 import { setUserRobotImage } from '../../store/userRobotImage/action'
@@ -58,9 +58,8 @@ export const AppBar = () => {
   useEffect(() => {
     if (metadataState) {
       if (metadataState.content) {
-        const { picture, display_name, name } = JSON.parse(
-          metadataState.content
-        )
+        const profileMetadata = JSON.parse(metadataState.content)
+        const { picture } = profileMetadata
 
         if (picture || userRobotImage) {
           setUserAvatar(picture || userRobotImage)
@@ -70,7 +69,7 @@ export const AppBar = () => {
           ? hexToNpub(authState.usersPubkey)
           : ''
 
-        setUsername(shorten(display_name || name || npub, 7))
+        setUsername(getProfileUsername(npub, profileMetadata))
       } else {
         setUserAvatar(userRobotImage || '')
         setUsername('')
diff --git a/src/components/UserAvatar/index.tsx b/src/components/UserAvatar/index.tsx
index 0ea1fc1..4c49e33 100644
--- a/src/components/UserAvatar/index.tsx
+++ b/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 { shorten } from '../../utils'
+import { getProfileUsername } from '../../utils'
 import { TooltipChild } from '../TooltipChild'
 
 interface UserAvatarProps {
@@ -22,7 +22,7 @@ export const UserAvatar = ({
   isNameVisible = false
 }: UserAvatarProps) => {
   const profile = useProfileMetadata(pubkey)
-  const name = profile?.display_name || profile?.name || shorten(pubkey)
+  const name = getProfileUsername(pubkey, profile)
   const image = profile?.picture
 
   return (
diff --git a/src/pages/profile/index.tsx b/src/pages/profile/index.tsx
index 905e7d0..4405f1f 100644
--- a/src/pages/profile/index.tsx
+++ b/src/pages/profile/index.tsx
@@ -1,7 +1,6 @@
 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'
@@ -14,6 +13,7 @@ import { State } from '../../store/rootReducer'
 import { NostrJoiningBlock, ProfileMetadata } from '../../types'
 import {
   getNostrJoiningBlockNumber,
+  getProfileUsername,
   getRoboHashPicture,
   hexToNpub,
   shorten
@@ -42,15 +42,7 @@ export const ProfilePage = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc] = useState('Fetching metadata')
 
-  const profileName =
-    pubkey &&
-    profileMetadata &&
-    truncate(
-      profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
-      {
-        length: 16
-      }
-    )
+  const profileName = pubkey && getProfileUsername(pubkey, profileMetadata)
 
   useEffect(() => {
     if (npub) {
diff --git a/src/types/profile.ts b/src/types/profile.ts
index 122fbf6..1dcfa6f 100644
--- a/src/types/profile.ts
+++ b/src/types/profile.ts
@@ -1,6 +1,7 @@
 export interface ProfileMetadata {
   name?: string
   display_name?: string
+  /** @deprecated use name instead */
   username?: string
   picture?: string
   banner?: string
diff --git a/src/utils/nostr.ts b/src/utils/nostr.ts
index ec42325..1082328 100644
--- a/src/utils/nostr.ts
+++ b/src/utils/nostr.ts
@@ -1,6 +1,6 @@
 import { bytesToHex, hexToBytes } from '@noble/hashes/utils'
 import axios from 'axios'
-import _ from 'lodash'
+import _, { truncate } 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, SignedEvent, UserAppData } from '../types'
+import { Meta, ProfileMetadata, SignedEvent, UserAppData } from '../types'
 import { getDefaultRelayMap } from './relays'
 import { parseJson, removeLeadingSlash } from './string'
 import { timeout } from './utils'
@@ -974,3 +974,16 @@ 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 userId User identifier, it can be either pubkey or npub1 (we only show npub)
+ * @param profile User profile
+ */
+export const getProfileUsername = (
+  userId: `npub1${string}` | string,
+  profile?: ProfileMetadata
+) =>
+  truncate(profile?.display_name || profile?.name || hexToNpub(userId), {
+    length: 16
+  })

From 5f92906032ab0ea6a09ae9d104a64f81fd10c095 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 19 Sep 2024 15:02:19 +0200
Subject: [PATCH 06/10] fix: add file and page index, hide select if not active

---
 src/components/DrawPDFFields/index.tsx | 199 +++++++++++++++----------
 1 file changed, 123 insertions(+), 76 deletions(-)

diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index 194291f..f2e962e 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@@ -49,7 +49,19 @@ export const DrawPDFFields = (props: Props) => {
     clicked: false
   })
 
-  const [activeDrawField, setActiveDrawField] = useState<number>()
+  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
 
   useEffect(() => {
     if (selectedFiles) {
@@ -103,7 +115,12 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Pointer event
    * @param page PdfPage where press happened
    */
-  const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
+  const handlePointerDown = (
+    event: React.PointerEvent,
+    page: PdfPage,
+    fileIndex: number,
+    pageIndex: number
+  ) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
@@ -124,6 +141,11 @@ export const DrawPDFFields = (props: Props) => {
 
     page.drawnFields.push(newField)
 
+    setActiveDrawnField({
+      fileIndex,
+      pageIndex,
+      drawnFieldIndex: page.drawnFields.length - 1
+    })
     setMouseState((prev) => {
       return {
         ...prev,
@@ -192,6 +214,8 @@ export const DrawPDFFields = (props: Props) => {
    */
   const handleDrawnFieldPointerDown = (
     event: React.PointerEvent,
+    fileIndex: number,
+    pageIndex: number,
     drawnFieldIndex: number
   ) => {
     event.stopPropagation()
@@ -201,7 +225,7 @@ export const DrawPDFFields = (props: Props) => {
 
     const drawingRectangleCoords = getPointerCoordinates(event)
 
-    setActiveDrawField(drawnFieldIndex)
+    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
     setMouseState({
       dragging: true,
       clicked: false,
@@ -257,13 +281,15 @@ 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()
 
-    setActiveDrawField(drawnFieldIndex)
+    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
     setMouseState({
       resizing: true
     })
@@ -372,7 +398,7 @@ export const DrawPDFFields = (props: Props) => {
                   handlePointerMove(event, page)
                 }}
                 onPointerDown={(event) => {
-                  handlePointerDown(event, page)
+                  handlePointerDown(event, page, fileIndex, pageIndex)
                 }}
                 draggable="false"
                 src={page.image}
@@ -384,7 +410,12 @@ export const DrawPDFFields = (props: Props) => {
                   <div
                     key={drawnFieldIndex}
                     onPointerDown={(event) =>
-                      handleDrawnFieldPointerDown(event, drawnFieldIndex)
+                      handleDrawnFieldPointerDown(
+                        event,
+                        fileIndex,
+                        pageIndex,
+                        drawnFieldIndex
+                      )
                     }
                     onPointerMove={(event) => {
                       handleDrawnFieldPointerMove(event, drawnField, page.width)
@@ -405,7 +436,11 @@ export const DrawPDFFields = (props: Props) => {
                       touchAction: 'none',
                       opacity:
                         mouseState.dragging &&
-                        activeDrawField === drawnFieldIndex
+                        isActiveDrawnField(
+                          fileIndex,
+                          pageIndex,
+                          drawnFieldIndex
+                        )
                           ? 0.8
                           : undefined
                     }}
@@ -422,7 +457,12 @@ export const DrawPDFFields = (props: Props) => {
                     </div>
                     <span
                       onPointerDown={(event) =>
-                        handleResizePointerDown(event, drawnFieldIndex)
+                        handleResizePointerDown(
+                          event,
+                          fileIndex,
+                          pageIndex,
+                          drawnFieldIndex
+                        )
                       }
                       onPointerMove={(event) => {
                         handleResizePointerMove(event, drawnField, page.width)
@@ -431,7 +471,11 @@ export const DrawPDFFields = (props: Props) => {
                       style={{
                         background:
                           mouseState.resizing &&
-                          activeDrawField === drawnFieldIndex
+                          isActiveDrawnField(
+                            fileIndex,
+                            pageIndex,
+                            drawnFieldIndex
+                          )
                             ? 'var(--primary-main)'
                             : undefined
                       }}
@@ -449,75 +493,78 @@ export const DrawPDFFields = (props: Props) => {
                     >
                       <Close fontSize="small" />
                     </span>
-                    <div
-                      onPointerDown={handleUserSelectPointerDown}
-                      className={styles.userSelect}
-                    >
-                      <FormControl fullWidth size="small">
-                        <InputLabel id="counterparts">Counterpart</InputLabel>
-                        <Select
-                          value={
-                            drawnField.counterpart ||
-                            lastSigner ||
-                            defaultSignerNpub ||
-                            ''
-                          }
-                          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)
-                            let displayValue = truncate(npub, {
-                              length: 16
-                            })
-
-                            const metadata = props.metadata[signer.pubkey]
-
-                            if (metadata) {
-                              displayValue = truncate(
-                                metadata.name ||
-                                  metadata.display_name ||
-                                  metadata.username ||
-                                  npub,
-                                {
-                                  length: 16
-                                }
-                              )
+                    {isActiveDrawnField(
+                      fileIndex,
+                      pageIndex,
+                      drawnFieldIndex
+                    ) && (
+                      <div
+                        onPointerDown={handleUserSelectPointerDown}
+                        className={styles.userSelect}
+                      >
+                        <FormControl fullWidth size="small">
+                          <InputLabel id="counterparts">Counterpart</InputLabel>
+                          <Select
+                            value={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)
+                              let displayValue = truncate(npub, {
+                                length: 16
+                              })
 
-                            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>
+                              const metadata = props.metadata[signer.pubkey]
+
+                              if (metadata) {
+                                displayValue = truncate(
+                                  metadata.name ||
+                                    metadata.display_name ||
+                                    metadata.username ||
+                                    npub,
+                                  {
+                                    length: 16
+                                  }
+                                )
+                              }
+
+                              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>
                 )
               })}

From d8d51be603a9817ffc449eb2ffd81382cba47ec8 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 19 Sep 2024 15:05:03 +0200
Subject: [PATCH 07/10] fix: add small avatar when select is not showing

---
 src/components/DrawPDFFields/index.tsx         | 13 +++++++++++++
 src/components/DrawPDFFields/style.module.scss | 11 +++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index f2e962e..bad5d3a 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@@ -21,6 +21,7 @@ import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf'
 import { useScale } from '../../hooks/useScale'
 import { AvatarIconButton } from '../UserAvatarIconButton'
 import { LoadingSpinner } from '../LoadingSpinner'
+import { UserAvatar } from '../UserAvatar'
 
 const DEFAULT_START_SIZE = {
   width: 140,
@@ -493,6 +494,18 @@ 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,
diff --git a/src/components/DrawPDFFields/style.module.scss b/src/components/DrawPDFFields/style.module.scss
index 13afb9f..8c0b3b8 100644
--- a/src/components/DrawPDFFields/style.module.scss
+++ b/src/components/DrawPDFFields/style.module.scss
@@ -84,3 +84,14 @@
     padding: 5px 0;
   }
 }
+
+.counterpartSelectValue {
+  display: flex;
+}
+
+.counterpartAvatar {
+  img {
+    width: 21px;
+    height: 21px;
+  }
+}

From e05d3e53a2b663973adf2e02296b3a5bbfa8ee78 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Fri, 20 Sep 2024 10:26:32 +0200
Subject: [PATCH 08/10] fix: remove duplicate states and fix default signer

---
 src/components/DrawPDFFields/index.tsx | 107 +++++++------------------
 src/pages/create/index.tsx             |  64 ++++++++++++---
 2 files changed, 81 insertions(+), 90 deletions(-)

diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index bad5d3a..076c6fb 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@@ -11,17 +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 { truncate } from 'lodash'
-import { settleAllFullfilfedPromises, hexToNpub, npubToHex } from '../../utils'
-import { getSigitFile, SigitFile } from '../../utils/file'
+import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
+import { 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 { LoadingSpinner } from '../LoadingSpinner'
 import { UserAvatar } from '../UserAvatar'
+import _ from 'lodash'
 
 const DEFAULT_START_SIZE = {
   width: 140,
@@ -29,22 +28,32 @@ const DEFAULT_START_SIZE = {
 } as const
 
 interface Props {
-  selectedFiles: File[]
   users: User[]
   metadata: { [key: string]: ProfileMetadata }
-  onDrawFieldsChange: (sigitFiles: SigitFile[]) => void
+  sigitFiles: SigitFile[]
+  setSigitFiles: React.Dispatch<React.SetStateAction<SigitFile[]>>
   selectedTool?: DrawTool
 }
 
 export const DrawPDFFields = (props: Props) => {
-  const { selectedFiles, selectedTool, onDrawFieldsChange, users } = props
+  const { selectedTool, sigitFiles, setSigitFiles, users } = props
+
   const signers = users.filter((u) => u.role === UserRole.signer)
   const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
   const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
-  const { to, from } = useScale()
+  /**
+   * 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 [sigitFiles, setSigitFiles] = useState<SigitFile[]>([])
-  const [parsingPdf, setIsParsing] = useState<boolean>(false)
+  const { to, from } = useScale()
 
   const [mouseState, setMouseState] = useState<MouseState>({
     clicked: false
@@ -64,33 +73,6 @@ export const DrawPDFFields = (props: Props) => {
     activeDrawnField?.pageIndex === pageIndex &&
     activeDrawnField?.drawnFieldIndex === drawnFieldIndex
 
-  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
    */
@@ -136,7 +118,7 @@ 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: lastSigner,
+      counterpart: getAvailableSigner(lastSigner, defaultSignerNpub),
       type: selectedTool.identifier
     }
 
@@ -518,7 +500,7 @@ export const DrawPDFFields = (props: Props) => {
                         <FormControl fullWidth size="small">
                           <InputLabel id="counterparts">Counterpart</InputLabel>
                           <Select
-                            value={drawnField.counterpart}
+                            value={getAvailableSigner(drawnField.counterpart)}
                             onChange={(event) => {
                               drawnField.counterpart = event.target.value
                               setLastSigner(event.target.value)
@@ -535,23 +517,11 @@ export const DrawPDFFields = (props: Props) => {
                           >
                             {signers.map((signer, index) => {
                               const npub = hexToNpub(signer.pubkey)
-                              let displayValue = truncate(npub, {
-                                length: 16
-                              })
-
                               const metadata = props.metadata[signer.pubkey]
-
-                              if (metadata) {
-                                displayValue = truncate(
-                                  metadata.name ||
-                                    metadata.display_name ||
-                                    metadata.username ||
-                                    npub,
-                                  {
-                                    length: 16
-                                  }
-                                )
-                              }
+                              const displayValue = getProfileUsername(
+                                npub,
+                                metadata
+                              )
 
                               return (
                                 <MenuItem key={index} value={npub}>
@@ -589,24 +559,15 @@ 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]
-      if (metadata) {
-        displayValue = truncate(
-          metadata.display_name || metadata.name || npub,
-          {
-            length: 16
-          }
-        )
-      }
+      displayValue = getProfileUsername(npub, metadata)
 
       return (
-        <>
+        <div className={styles.counterpartSelectValue}>
           <AvatarIconButton
             src={props.metadata[signer.pubkey]?.picture}
             hexKey={signer.pubkey || undefined}
@@ -620,21 +581,13 @@ 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) => {
@@ -653,7 +606,7 @@ export const DrawPDFFields = (props: Props) => {
                 <ExtensionFileBox extension={file.extension} />
               )}
             </div>
-            {i < selectedFiles.length - 1 && <FileDivider />}
+            {i < sigitFiles.length - 1 && <FileDivider />}
           </React.Fragment>
         )
       })}
diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx
index 1e457b9..59fdb4f 100644
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@@ -39,7 +39,8 @@ import {
   signEventForMetaFile,
   updateUsersAppData,
   uploadToFileStorage,
-  DEFAULT_TOOLBOX
+  DEFAULT_TOOLBOX,
+  settleAllFullfilfedPromises
 } from '../../utils'
 import { Container } from '../../components/Container'
 import fileListStyles from '../../components/FileList/style.module.scss'
@@ -60,7 +61,8 @@ import {
   faTrash,
   faUpload
 } from '@fortawesome/free-solid-svg-icons'
-import { SigitFile } from '../../utils/file.ts'
+import { getSigitFile, SigitFile } from '../../utils/file.ts'
+import _ from 'lodash'
 
 export const CreatePage = () => {
   const navigate = useNavigate()
@@ -106,6 +108,29 @@ 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>()
 
@@ -281,6 +306,19 @@ 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)
   }
 
   /**
@@ -723,10 +761,6 @@ export const CreatePage = () => {
     }
   }
 
-  const onDrawFieldsChange = (sigitFiles: SigitFile[]) => {
-    setDrawnFiles(sigitFiles)
-  }
-
   if (authUrl) {
     return (
       <iframe
@@ -885,13 +919,17 @@ export const CreatePage = () => {
           centerIcon={faFile}
           rightIcon={faToolbox}
         >
-          <DrawPDFFields
-            metadata={metadata}
-            users={users}
-            selectedFiles={selectedFiles}
-            onDrawFieldsChange={onDrawFieldsChange}
-            selectedTool={selectedTool}
-          />
+          {parsingPdf ? (
+            <LoadingSpinner variant="small" />
+          ) : (
+            <DrawPDFFields
+              users={users}
+              metadata={metadata}
+              selectedTool={selectedTool}
+              sigitFiles={drawnFiles}
+              setSigitFiles={setDrawnFiles}
+            />
+          )}
         </StickySideColumns>
       </Container>
     </>

From 2e1d48168a93471cae72db9c5c78287809b23f58 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Fri, 20 Sep 2024 11:13:48 +0200
Subject: [PATCH 09/10] refactor: rename userId to npub

---
 src/utils/nostr.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/utils/nostr.ts b/src/utils/nostr.ts
index 1082328..248f71a 100644
--- a/src/utils/nostr.ts
+++ b/src/utils/nostr.ts
@@ -977,13 +977,13 @@ export const sendNotification = async (receiver: string, meta: Meta) => {
 
 /**
  * Show user's name, first available in order: display_name, name, or npub as fallback
- * @param userId User identifier, it can be either pubkey or npub1 (we only show npub)
+ * @param npub User identifier, it can be either pubkey or npub1 (we only show npub)
  * @param profile User profile
  */
 export const getProfileUsername = (
-  userId: `npub1${string}` | string,
+  npub: `npub1${string}` | string,
   profile?: ProfileMetadata
 ) =>
-  truncate(profile?.display_name || profile?.name || hexToNpub(userId), {
+  truncate(profile?.display_name || profile?.name || hexToNpub(npub), {
     length: 16
   })

From 633c23e4595ec3287d95427b1b461f78c6ae2259 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Fri, 20 Sep 2024 11:29:35 +0200
Subject: [PATCH 10/10] refactor: center banner notice text

---
 src/components/AppBar/AppBar.tsx        | 6 ++++--
 src/components/AppBar/style.module.scss | 6 ++++++
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/components/AppBar/AppBar.tsx b/src/components/AppBar/AppBar.tsx
index 495e9dc..ff68469 100644
--- a/src/components/AppBar/AppBar.tsx
+++ b/src/components/AppBar/AppBar.tsx
@@ -132,8 +132,10 @@ export const AppBar = () => {
         <div className={styles.banner}>
           <Container>
             <div className={styles.bannerInner}>
-              SIGit is currently Alpha software (available for internal
-              testing), use at your own risk!
+              <p className={styles.bannerText}>
+                SIGit is currently Alpha software (available for internal
+                testing), use at your own risk!
+              </p>
               <Button
                 aria-label={`close banner`}
                 variant="text"
diff --git a/src/components/AppBar/style.module.scss b/src/components/AppBar/style.module.scss
index 07cfe31..d8c202f 100644
--- a/src/components/AppBar/style.module.scss
+++ b/src/components/AppBar/style.module.scss
@@ -67,3 +67,9 @@
     }
   }
 }
+
+.bannerText {
+  margin-left: 54px;
+  flex-grow: 1;
+  text-align: center;
+}