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,15 +469,13 @@ export const DrawPDFFields = (props: Props) => {
                           }}
                           renderValue={(value) => renderCounterpartValue(value)}
                         >
-                          {users
+                          {signers.map((signer, index) => {
-                            .filter((u) => u.role === UserRole.signer)
+                            const npub = hexToNpub(signer.pubkey)
-                            .map((user, index) => {
-                              const npub = hexToNpub(user.pubkey)
                             let displayValue = truncate(npub, {
                               length: 16
                             })
 
-                              const metadata = props.metadata[user.pubkey]
+                            const metadata = props.metadata[signer.pubkey]
 
                             if (metadata) {
                               displayValue = truncate(
@@ -488,14 +490,11 @@ export const DrawPDFFields = (props: Props) => {
                             }
 
                             return (
-                                <MenuItem
+                              <MenuItem key={index} value={npub}>
-                                  key={index}
-                                  value={hexToNpub(user.pubkey)}
-                                >
                                 <ListItemIcon>
                                   <AvatarIconButton
                                     src={metadata?.picture}
-                                      hexKey={user.pubkey}
+                                    hexKey={signer.pubkey}
                                     aria-label={`account of user ${displayValue}`}
                                     color="inherit"
                                     sx={{
@@ -524,28 +523,28 @@ export const DrawPDFFields = (props: Props) => {
     )
   }
 
-  const renderCounterpartValue = (value: string) => {
+  const renderCounterpartValue = (npub: string) => {
-    const user = users.find((u) => u.pubkey === npubToHex(value))
+    let displayValue = truncate(npub, {
-    if (user) {
-      let displayValue = truncate(value, {
       length: 16
     })
 
-      const metadata = props.metadata[user.pubkey]
+    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}
+            src={props.metadata[signer.pubkey]?.picture}
-            hexKey={npubToHex(user.pubkey) || undefined}
+            hexKey={signer.pubkey || undefined}
             sx={{
               padding: 0,
               marginRight: '6px',
@@ -560,7 +559,7 @@ export const DrawPDFFields = (props: Props) => {
       )
     }
 
-    return value
+    return displayValue
   }
 
   if (parsingPdf) {