src/components/DrawPDFFields/internal/Counterpart.module.scss

@@ -0,0 +1,3 @@
+.counterpartSelectValue {
+  display: flex;
+}

src/components/DrawPDFFields/internal/Counterpart.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+import { ProfileMetadata, User } from '../../../types'
+import _ from 'lodash'
+import { npubToHex, getProfileUsername } from '../../../utils'
+import { AvatarIconButton } from '../../UserAvatarIconButton'
+import styles from './Counterpart.module.scss'
+
+interface CounterpartProps {
+  npub: string
+  metadata: {
+    [key: string]: ProfileMetadata
+  }
+  signers: User[]
+}
+
+export const Counterpart = React.memo(
+  ({ npub, metadata, signers }: CounterpartProps) => {
+    let displayValue = _.truncate(npub, { length: 16 })
+
+    const signer = signers.find((u) => u.pubkey === npubToHex(npub))
+    if (signer) {
+      const signerMetadata = metadata[signer.pubkey]
+      displayValue = getProfileUsername(npub, signerMetadata)
+
+      return (
+        <div className={styles.counterpartSelectValue}>
+          <AvatarIconButton
+            src={signerMetadata.picture}
+            hexKey={signer.pubkey || undefined}
+            sx={{
+              padding: 0,
+              marginRight: '6px',
+              '> img': {
+                width: '21px',
+                height: '21px'
+              }
+            }}
+          />
+          {displayValue}
+        </div>
+      )
+    }
+
+    return displayValue
+  }
+)