feat(create): add counterpart component for drawing field

This commit is contained in:
enes 2024-12-21 17:02:13 +01:00
parent 671bb0561a
commit 4131eb5de1
2 changed files with 49 additions and 0 deletions

View File

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

View File

@ -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
}
)