All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 40s
144 lines
4.3 KiB
TypeScript
144 lines
4.3 KiB
TypeScript
import { Meta } from '../../types'
|
|
import {
|
|
hexToNpub,
|
|
SigitCardDisplayInfo,
|
|
SigitStatus,
|
|
SignStatus
|
|
} from '../../utils'
|
|
import { Link } from 'react-router-dom'
|
|
import { formatTimestamp, npubToHex } 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 { getExtensionIconLabel } from '../getExtensionIconLabel'
|
|
import { useSigitMeta } from '../../hooks/useSigitMeta'
|
|
import { extractFileExtensions } from '../../utils/file'
|
|
import { useAppSelector } from '../../hooks'
|
|
|
|
type SigitProps = {
|
|
sigitCreateId: string
|
|
meta: Meta
|
|
parsedMeta: SigitCardDisplayInfo
|
|
}
|
|
|
|
export const DisplaySigit = ({
|
|
meta,
|
|
parsedMeta,
|
|
sigitCreateId: sigitCreateId
|
|
}: SigitProps) => {
|
|
const { usersPubkey } = useAppSelector((state) => state.auth)
|
|
|
|
const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
|
|
parsedMeta
|
|
|
|
const { signersStatus, fileHashes } = useSigitMeta(meta)
|
|
const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
|
|
|
|
const currentUserNpub: string = usersPubkey ? hexToNpub(usersPubkey) : ''
|
|
const currentUserSigned =
|
|
signersStatus[currentUserNpub as `npub1${string}`] === SignStatus.Signed
|
|
|
|
return (
|
|
<div className={styles.itemWrapper}>
|
|
{signedStatus === SigitStatus.Complete || currentUserSigned ? (
|
|
<Link
|
|
to={`${appPublicRoutes.verify}/${sigitCreateId}`}
|
|
className={styles.insetLink}
|
|
></Link>
|
|
) : (
|
|
<Link
|
|
to={`${appPrivateRoutes.sign}/${sigitCreateId}`}
|
|
className={styles.insetLink}
|
|
></Link>
|
|
)}
|
|
|
|
<p className={`line-clamp-2 ${styles.title}`}>{title}</p>
|
|
<div className={styles.users}>
|
|
{submittedBy && (
|
|
<DisplaySigner
|
|
status={isValid ? SignStatus.Signed : SignStatus.Invalid}
|
|
pubkey={submittedBy}
|
|
/>
|
|
)}
|
|
{submittedBy && signers.length ? (
|
|
<Divider orientation="vertical" flexItem />
|
|
) : null}
|
|
<UserAvatarGroup max={7}>
|
|
{signers.map((signer) => {
|
|
const pubkey = npubToHex(signer)!
|
|
return (
|
|
<DisplaySigner
|
|
key={pubkey}
|
|
status={signersStatus[signer]}
|
|
pubkey={pubkey}
|
|
/>
|
|
)
|
|
})}
|
|
</UserAvatarGroup>
|
|
</div>
|
|
<div className={`${styles.details} ${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>
|
|
)
|
|
}
|