import { Meta } from '../../types' import { SigitCardDisplayInfo, SigitStatus, SignStatus } from '../../utils' import { Link } from 'react-router-dom' import { formatTimestamp, hexToNpub, npubToHex, shorten } from '../../utils' import { appPublicRoutes, appPrivateRoutes } from '../../routes' import { Button, Divider, Tooltip } from '@mui/material' import { DisplaySigner } from '../DisplaySigner' import { faArchive, faCalendar, faCopy, faEye, faFile, faFileCircleExclamation } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { UserAvatarGroup } from '../UserAvatarGroup' import styles from './style.module.scss' import { TooltipChild } from '../TooltipChild' import { getExtensionIconLabel } from '../getExtensionIconLabel' import { useSigitProfiles } from '../../hooks/useSigitProfiles' import { useSigitMeta } from '../../hooks/useSigitMeta' import { extractFileExtensions } from '../../utils/file' type SigitProps = { sigitCreateId: string meta: Meta parsedMeta: SigitCardDisplayInfo } export const DisplaySigit = ({ meta, parsedMeta, sigitCreateId: sigitCreateId }: SigitProps) => { const { title, createdAt, submittedBy, signers, signedStatus, isValid } = parsedMeta const { signersStatus, fileHashes } = useSigitMeta(meta) const profiles = useSigitProfiles([ ...(submittedBy ? [submittedBy] : []), ...signers ]) const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes)) return ( <div className={styles.itemWrapper}> <Link to={ signedStatus === SigitStatus.Complete ? appPublicRoutes.verify : `${appPrivateRoutes.sign}/${sigitCreateId}` } className={styles.insetLink} ></Link> <p className={`line-clamp-2 ${styles.title}`}>{title}</p> <div className={styles.users}> {submittedBy && (function () { const profile = profiles[submittedBy] return ( <Tooltip key={submittedBy} title={ profile?.display_name || profile?.name || shorten(hexToNpub(submittedBy)) } placement="top" arrow disableInteractive > <TooltipChild> <DisplaySigner status={isValid ? SignStatus.Signed : SignStatus.Invalid} profile={profile} pubkey={submittedBy} /> </TooltipChild> </Tooltip> ) })()} {submittedBy && signers.length ? ( <Divider orientation="vertical" flexItem /> ) : null} <UserAvatarGroup max={7}> {signers.map((signer) => { const pubkey = npubToHex(signer)! const profile = profiles[pubkey] return ( <Tooltip key={signer} title={ profile?.display_name || profile?.name || shorten(pubkey) } placement="top" arrow disableInteractive > <TooltipChild> <DisplaySigner status={signersStatus[signer]} profile={profile} pubkey={pubkey} /> </TooltipChild> </Tooltip> ) })} </UserAvatarGroup> </div> <div className={`${styles.details} ${styles.date} ${styles.iconLabel}`}> <FontAwesomeIcon icon={faCalendar} /> {createdAt ? formatTimestamp(createdAt) : null} </div> <div className={`${styles.details} ${styles.status}`}> <span className={styles.iconLabel}> <FontAwesomeIcon icon={faEye} /> {signedStatus} </span> {extensions.length > 0 ? ( <span className={styles.iconLabel}> {!isSame ? ( <> <FontAwesomeIcon icon={faFile} /> Multiple File Types </> ) : ( getExtensionIconLabel(extensions[0]) )} </span> ) : ( <> <FontAwesomeIcon icon={faFileCircleExclamation} /> — </> )} </div> <div className={styles.itemActions}> <Tooltip title="Duplicate" arrow placement="top" disableInteractive> <Button sx={{ color: 'var(--primary-main)', minWidth: '34px', padding: '10px' }} variant={'text'} > <FontAwesomeIcon icon={faCopy} /> </Button> </Tooltip> <Tooltip title="Archive" arrow placement="top" disableInteractive> <Button sx={{ color: 'var(--primary-main)', minWidth: '34px', padding: '10px' }} variant={'text'} > <FontAwesomeIcon icon={faArchive} /> </Button> </Tooltip> </div> </div> ) }