src/components/DrawPDFFields/index.tsx

@@ -37,9 +37,6 @@ 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 [lastSigner, setLastSigner] = useState(defaultSignerNpub)
   const { to, from } = useScale()
 
   const [sigitFiles, setSigitFiles] = useState<SigitFile[]>([])
@@ -118,7 +115,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: '',
       type: selectedTool.identifier
     }
 
@@ -456,15 +453,9 @@ export const DrawPDFFields = (props: Props) => {
                       <FormControl fullWidth size="small">
                         <InputLabel id="counterparts">Counterpart</InputLabel>
                         <Select
-                          value={
-                            drawnField.counterpart ||
-                            lastSigner ||
-                            defaultSignerNpub ||
-                            ''
-                          }
+                          value={drawnField.counterpart}
                           onChange={(event) => {
                             drawnField.counterpart = event.target.value
-                            setLastSigner(event.target.value)
                             refreshPdfFiles()
                           }}
                           labelId="counterparts"
@@ -474,13 +465,15 @@ export const DrawPDFFields = (props: Props) => {
                           }}
                           renderValue={(value) => renderCounterpartValue(value)}
                         >
-                          {signers.map((signer, index) => {
-                            const npub = hexToNpub(signer.pubkey)
+                          {users
+                            .filter((u) => u.role === UserRole.signer)
+                            .map((user, index) => {
+                              const npub = hexToNpub(user.pubkey)
                               let displayValue = truncate(npub, {
                                 length: 16
                               })
 
-                            const metadata = props.metadata[signer.pubkey]
+                              const metadata = props.metadata[user.pubkey]
 
                               if (metadata) {
                                 displayValue = truncate(
@@ -495,11 +488,14 @@ export const DrawPDFFields = (props: Props) => {
                               }
 
                               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={{
@@ -528,28 +524,28 @@ export const DrawPDFFields = (props: Props) => {
     )
   }
 
-  const renderCounterpartValue = (npub: string) => {
-    let displayValue = truncate(npub, {
+  const renderCounterpartValue = (value: string) => {
+    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))
-    if (signer) {
-      const metadata = props.metadata[signer.pubkey]
+      const metadata = props.metadata[user.pubkey]
+
       if (metadata) {
         displayValue = truncate(
-          metadata.display_name || metadata.name || npub,
+          metadata.name || metadata.display_name || metadata.username || value,
           {
             length: 16
           }
         )
       }
-
       return (
         <>
           <AvatarIconButton
-            src={props.metadata[signer.pubkey]?.picture}
-            hexKey={signer.pubkey || undefined}
+            src={props.metadata[user.pubkey]?.picture}
+            hexKey={npubToHex(user.pubkey) || undefined}
             sx={{
               padding: 0,
               marginRight: '6px',
@@ -564,7 +560,7 @@ export const DrawPDFFields = (props: Props) => {
       )
     }
 
-    return displayValue
+    return value
   }
 
   if (parsingPdf) {