fix: profiles matadata and verify page offline flow #202
@ -1,7 +1,7 @@
|
||||
import { Meta } from '../../types'
|
||||
import { SigitCardDisplayInfo, SigitStatus, SignStatus } from '../../utils'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { formatTimestamp, hexToNpub, npubToHex, shorten } from '../../utils'
|
||||
import { formatTimestamp, npubToHex } from '../../utils'
|
||||
import { appPublicRoutes, appPrivateRoutes } from '../../routes'
|
||||
import { Button, Divider, Tooltip } from '@mui/material'
|
||||
import { DisplaySigner } from '../DisplaySigner'
|
||||
@ -17,9 +17,7 @@ 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'
|
||||
|
||||
@ -33,12 +31,6 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
|
||||
parsedMeta
|
||||
|
||||
const { signersStatus, fileHashes } = useSigitMeta(meta)
|
||||
|
||||
const profiles = useSigitProfiles([
|
||||
...(submittedBy ? [submittedBy] : []),
|
||||
...signers
|
||||
])
|
||||
|
||||
const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
|
||||
|
||||
return (
|
||||
@ -54,62 +46,29 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
|
||||
></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 && (
|
||||
<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)!
|
||||
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>
|
||||
<DisplaySigner
|
||||
key={pubkey}
|
||||
status={signersStatus[signer]}
|
||||
pubkey={pubkey}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</UserAvatarGroup>
|
||||
</div>
|
||||
<div className={`${styles.details} ${styles.date} ${styles.iconLabel}`}>
|
||||
<div className={`${styles.details} ${styles.iconLabel}`}>
|
||||
<FontAwesomeIcon icon={faCalendar} />
|
||||
{createdAt ? formatTimestamp(createdAt) : null}
|
||||
</div>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
import { Badge } from '@mui/material'
|
||||
import { ProfileMetadata } from '../../types'
|
||||
import styles from './style.module.scss'
|
||||
import { UserAvatar } from '../UserAvatar'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
@ -15,38 +14,33 @@ import { SignStatus } from '../../utils'
|
||||
import { Spinner } from '../Spinner'
|
||||
|
||||
type DisplaySignerProps = {
|
||||
profile: ProfileMetadata
|
||||
pubkey: string
|
||||
status: SignStatus
|
||||
}
|
||||
|
||||
export const DisplaySigner = ({
|
||||
status,
|
||||
profile,
|
||||
pubkey
|
||||
}: DisplaySignerProps) => {
|
||||
const getStatusIcon = (status: SignStatus) => {
|
||||
switch (status) {
|
||||
case SignStatus.Signed:
|
||||
return <FontAwesomeIcon icon={faCheck} />
|
||||
case SignStatus.Awaiting:
|
||||
return (
|
||||
<Spinner>
|
||||
<FontAwesomeIcon icon={faHourglass} />
|
||||
</Spinner>
|
||||
)
|
||||
case SignStatus.Pending:
|
||||
return <FontAwesomeIcon icon={faEllipsis} />
|
||||
case SignStatus.Invalid:
|
||||
return <FontAwesomeIcon icon={faExclamation} />
|
||||
case SignStatus.Viewer:
|
||||
return <FontAwesomeIcon icon={faEye} />
|
||||
const getStatusIcon = (status: SignStatus) => {
|
||||
switch (status) {
|
||||
case SignStatus.Signed:
|
||||
return <FontAwesomeIcon icon={faCheck} />
|
||||
case SignStatus.Awaiting:
|
||||
return (
|
||||
<Spinner>
|
||||
<FontAwesomeIcon icon={faHourglass} />
|
||||
</Spinner>
|
||||
)
|
||||
case SignStatus.Pending:
|
||||
return <FontAwesomeIcon icon={faEllipsis} />
|
||||
case SignStatus.Invalid:
|
||||
return <FontAwesomeIcon icon={faExclamation} />
|
||||
case SignStatus.Viewer:
|
||||
return <FontAwesomeIcon icon={faEye} />
|
||||
|
||||
default:
|
||||
return <FontAwesomeIcon icon={faQuestion} />
|
||||
}
|
||||
default:
|
||||
return <FontAwesomeIcon icon={faQuestion} />
|
||||
}
|
||||
}
|
||||
|
||||
export const DisplaySigner = ({ status, pubkey }: DisplaySignerProps) => {
|
||||
return (
|
||||
<Badge
|
||||
className={styles.signer}
|
||||
@ -56,7 +50,7 @@ export const DisplaySigner = ({
|
||||
<div className={styles.statusBadge}>{getStatusIcon(status)}</div>
|
||||
}
|
||||
>
|
||||
<UserAvatar pubkey={pubkey} image={profile?.picture} />
|
||||
<UserAvatar pubkey={pubkey} />
|
||||
</Badge>
|
||||
)
|
||||
}
|
||||
|
||||
@ -3,34 +3,56 @@ import { getProfileRoute } from '../../routes'
|
||||
import styles from './styles.module.scss'
|
||||
import { AvatarIconButton } from '../UserAvatarIconButton'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useProfileMetadata } from '../../hooks/useProfileMetadata'
|
||||
import { Tooltip } from '@mui/material'
|
||||
import { shorten } from '../../utils'
|
||||
import { TooltipChild } from '../TooltipChild'
|
||||
|
||||
interface UserAvatarProps {
|
||||
name?: string
|
||||
pubkey: string
|
||||
image?: string
|
||||
isNameVisible?: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* This component will be used for the displaying username and profile picture.
|
||||
* Clicking will navigate to the user's profile.
|
||||
*/
|
||||
export const UserAvatar = ({ pubkey, name, image }: UserAvatarProps) => {
|
||||
export const UserAvatar = ({
|
||||
pubkey,
|
||||
isNameVisible = false
|
||||
}: UserAvatarProps) => {
|
||||
const profile = useProfileMetadata(pubkey)
|
||||
const name = profile?.display_name || profile?.name || shorten(pubkey)
|
||||
const image = profile?.picture
|
||||
|
||||
return (
|
||||
<Link
|
||||
to={getProfileRoute(pubkey)}
|
||||
className={styles.container}
|
||||
tabIndex={-1}
|
||||
>
|
||||
<AvatarIconButton
|
||||
src={image}
|
||||
hexKey={pubkey}
|
||||
aria-label={`account of user ${name || pubkey}`}
|
||||
color="inherit"
|
||||
sx={{
|
||||
padding: 0
|
||||
}}
|
||||
/>
|
||||
{name ? <span className={styles.username}>{name}</span> : null}
|
||||
<Tooltip
|
||||
key={pubkey}
|
||||
title={name}
|
||||
placement="top"
|
||||
arrow
|
||||
disableInteractive
|
||||
>
|
||||
<TooltipChild>
|
||||
<AvatarIconButton
|
||||
src={image}
|
||||
hexKey={pubkey}
|
||||
aria-label={`account of user ${name}`}
|
||||
color="inherit"
|
||||
sx={{
|
||||
padding: 0
|
||||
}}
|
||||
/>
|
||||
</TooltipChild>
|
||||
</Tooltip>
|
||||
{isNameVisible && name ? (
|
||||
<span className={styles.username}>{name}</span>
|
||||
) : null}
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,11 +1,9 @@
|
||||
import { Divider, Tooltip } from '@mui/material'
|
||||
import { useSigitProfiles } from '../../hooks/useSigitProfiles'
|
||||
import {
|
||||
formatTimestamp,
|
||||
fromUnixTimestamp,
|
||||
hexToNpub,
|
||||
npubToHex,
|
||||
shorten,
|
||||
SignStatus
|
||||
} from '../../utils'
|
||||
import { useSigitMeta } from '../../hooks/useSigitMeta'
|
||||
@ -24,10 +22,10 @@ import {
|
||||
import { getExtensionIconLabel } from '../getExtensionIconLabel'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { State } from '../../store/rootReducer'
|
||||
import { TooltipChild } from '../TooltipChild'
|
||||
import { DisplaySigner } from '../DisplaySigner'
|
||||
import { Meta } from '../../types'
|
||||
import { extractFileExtensions } from '../../utils/file'
|
||||
import { UserAvatar } from '../UserAvatar'
|
||||
|
||||
interface UsersDetailsProps {
|
||||
meta: Meta
|
||||
@ -36,6 +34,7 @@ interface UsersDetailsProps {
|
||||
export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
||||
const {
|
||||
submittedBy,
|
||||
exportedBy,
|
||||
signers,
|
||||
viewers,
|
||||
fileHashes,
|
||||
@ -47,11 +46,6 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
||||
isValid
|
||||
} = useSigitMeta(meta)
|
||||
const { usersPubkey } = useSelector((state: State) => state.auth)
|
||||
const profiles = useSigitProfiles([
|
||||
...(submittedBy ? [submittedBy] : []),
|
||||
...signers,
|
||||
...viewers
|
||||
])
|
||||
const userCanSign =
|
||||
typeof usersPubkey !== 'undefined' &&
|
||||
signers.includes(hexToNpub(usersPubkey))
|
||||
@ -63,31 +57,12 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
||||
<div className={styles.section}>
|
||||
<p>Signers</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 && (
|
||||
<DisplaySigner
|
||||
status={isValid ? SignStatus.Signed : SignStatus.Invalid}
|
||||
pubkey={submittedBy}
|
||||
/>
|
||||
)}
|
||||
|
||||
{submittedBy && signers.length ? (
|
||||
<Divider orientation="vertical" flexItem />
|
||||
@ -96,26 +71,8 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
||||
<UserAvatarGroup max={20}>
|
||||
{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>
|
||||
<DisplaySigner status={signersStatus[signer]} pubkey={pubkey} />
|
||||
)
|
||||
})}
|
||||
</UserAvatarGroup>
|
||||
@ -128,34 +85,24 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
||||
<UserAvatarGroup max={20}>
|
||||
{viewers.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={SignStatus.Viewer}
|
||||
profile={profile}
|
||||
pubkey={pubkey}
|
||||
/>
|
||||
</TooltipChild>
|
||||
</Tooltip>
|
||||
<DisplaySigner status={SignStatus.Viewer} pubkey={pubkey} />
|
||||
)
|
||||
})}
|
||||
</UserAvatarGroup>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{exportedBy && (
|
||||
<>
|
||||
<p>Exported By</p>
|
||||
<div className={styles.users}>
|
||||
<UserAvatar pubkey={exportedBy} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles.section}>
|
||||
<p>Details</p>
|
||||
|
||||
46
src/hooks/useProfileMetadata.tsx
Normal file
46
src/hooks/useProfileMetadata.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ProfileMetadata } from '../types/profile'
|
||||
import { MetadataController } from '../controllers/MetadataController'
|
||||
import { Event, kinds } from 'nostr-tools'
|
||||
|
||||
export const useProfileMetadata = (pubkey: string) => {
|
||||
const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
|
||||
|
||||
useEffect(() => {
|
||||
const metadataController = MetadataController.getInstance()
|
||||
const handleMetadataEvent = (event: Event) => {
|
||||
const metadataContent =
|
||||
metadataController.extractProfileMetadataContent(event)
|
||||
|
||||
if (metadataContent) {
|
||||
setProfileMetadata(metadataContent)
|
||||
}
|
||||
}
|
||||
|
||||
if (pubkey) {
|
||||
metadataController.on(pubkey, (kind: number, event: Event) => {
|
||||
if (kind === kinds.Metadata) {
|
||||
handleMetadataEvent(event)
|
||||
}
|
||||
})
|
||||
|
||||
metadataController
|
||||
.findMetadata(pubkey)
|
||||
.then((metadataEvent) => {
|
||||
if (metadataEvent) handleMetadataEvent(metadataEvent)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`error occurred in finding metadata for: ${pubkey}`,
|
||||
err
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
return () => {
|
||||
metadataController.off(pubkey, handleMetadataEvent)
|
||||
}
|
||||
}, [pubkey])
|
||||
|
||||
return profileMetadata
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import { ProfileMetadata } from '../types'
|
||||
import { MetadataController } from '../controllers'
|
||||
import { npubToHex } from '../utils'
|
||||
import { Event, kinds } from 'nostr-tools'
|
||||
|
||||
/**
|
||||
* Extracts profiles from metadata events
|
||||
* @param pubkeys Array of npubs to check
|
||||
* @returns ProfileMetadata
|
||||
*/
|
||||
export const useSigitProfiles = (
|
||||
pubkeys: `npub1${string}`[]
|
||||
): { [key: string]: ProfileMetadata } => {
|
||||
const [profileMetadata, setProfileMetadata] = useState<{
|
||||
[key: string]: ProfileMetadata
|
||||
}>({})
|
||||
|
||||
useEffect(() => {
|
||||
if (pubkeys.length) {
|
||||
const metadataController = new MetadataController()
|
||||
|
||||
// Remove duplicate keys
|
||||
const users = new Set<string>([...pubkeys])
|
||||
|
||||
const handleMetadataEvent = (key: string) => (event: Event) => {
|
||||
const metadataContent =
|
||||
metadataController.extractProfileMetadataContent(event)
|
||||
|
||||
if (metadataContent) {
|
||||
setProfileMetadata((prev) => ({
|
||||
...prev,
|
||||
[key]: metadataContent
|
||||
}))
|
||||
}
|
||||
}
|
||||
|
||||
users.forEach((user) => {
|
||||
const hexKey = npubToHex(user)
|
||||
if (hexKey && !(hexKey in profileMetadata)) {
|
||||
metadataController.on(hexKey, (kind: number, event: Event) => {
|
||||
if (kind === kinds.Metadata) {
|
||||
handleMetadataEvent(hexKey)(event)
|
||||
}
|
||||
})
|
||||
|
||||
metadataController
|
||||
.findMetadata(hexKey)
|
||||
.then((metadataEvent) => {
|
||||
if (metadataEvent) handleMetadataEvent(hexKey)(metadataEvent)
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error(
|
||||
`error occurred in finding metadata for: ${user}`,
|
||||
err
|
||||
)
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
return () => {
|
||||
users.forEach((key) => {
|
||||
metadataController.off(key, handleMetadataEvent(key))
|
||||
})
|
||||
}
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [pubkeys])
|
||||
|
||||
return profileMetadata
|
||||
}
|
||||
@ -36,7 +36,6 @@ import {
|
||||
npubToHex,
|
||||
queryNip05,
|
||||
sendNotification,
|
||||
shorten,
|
||||
signEventForMetaFile,
|
||||
updateUsersAppData,
|
||||
uploadToFileStorage
|
||||
@ -113,6 +112,8 @@ export const CreatePage = () => {
|
||||
const [error, setError] = useState<string>()
|
||||
|
||||
const [users, setUsers] = useState<User[]>([])
|
||||
const signers = users.filter((u) => u.role === UserRole.signer)
|
||||
const viewers = users.filter((u) => u.role === UserRole.viewer)
|
||||
|
||||
const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
|
||||
|
||||
@ -252,7 +253,7 @@ export const CreatePage = () => {
|
||||
useEffect(() => {
|
||||
users.forEach((user) => {
|
||||
if (!(user.pubkey in metadata)) {
|
||||
const metadataController = new MetadataController()
|
||||
const metadataController = MetadataController.getInstance()
|
||||
|
||||
const handleMetadataEvent = (event: Event) => {
|
||||
const metadataContent =
|
||||
@ -647,6 +648,11 @@ export const CreatePage = () => {
|
||||
}
|
||||
|
||||
saveAs(finalZipFile, `request-${unixNow()}.sigit.zip`)
|
||||
|
||||
// If user is the next signer, we can navigate directly to sign page
|
||||
if (signers[0].pubkey === usersPubkey) {
|
||||
navigate(appPrivateRoutes.sign, { state: { uploadedZip: finalZipFile } })
|
||||
}
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
@ -672,9 +678,6 @@ export const CreatePage = () => {
|
||||
},
|
||||
zipUrl: string
|
||||
) => {
|
||||
const signers = users.filter((user) => user.role === UserRole.signer)
|
||||
const viewers = users.filter((user) => user.role === UserRole.viewer)
|
||||
|
||||
const content: CreateSignatureEventContent = {
|
||||
signers: signers.map((signer) => hexToNpub(signer.pubkey)),
|
||||
viewers: viewers.map((viewer) => hexToNpub(viewer.pubkey)),
|
||||
@ -703,9 +706,6 @@ export const CreatePage = () => {
|
||||
|
||||
// Send notifications to signers and viewers
|
||||
const sendNotifications = (meta: Meta) => {
|
||||
const signers = users.filter((user) => user.role === UserRole.signer)
|
||||
const viewers = users.filter((user) => user.role === UserRole.viewer)
|
||||
|
||||
// no need to send notification to self so remove it from the list
|
||||
const receivers = (
|
||||
signers.length > 0
|
||||
@ -787,7 +787,7 @@ export const CreatePage = () => {
|
||||
toast.error('Failed to publish notifications')
|
||||
})
|
||||
|
||||
navigate(appPrivateRoutes.sign, { state: { meta: meta } })
|
||||
navigate(appPrivateRoutes.sign, { state: { meta } })
|
||||
} else {
|
||||
const zip = new JSZip()
|
||||
|
||||
@ -914,7 +914,6 @@ export const CreatePage = () => {
|
||||
<div className={styles.flexWrap}>
|
||||
<div className={`${styles.paperGroup} ${styles.users}`}>
|
||||
<DisplayUser
|
||||
metadata={metadata}
|
||||
users={users}
|
||||
handleUserRoleChange={handleUserRoleChange}
|
||||
handleRemoveUser={handleRemoveUser}
|
||||
@ -1010,7 +1009,6 @@ export const CreatePage = () => {
|
||||
}
|
||||
|
||||
type DisplayUsersProps = {
|
||||
metadata: { [key: string]: ProfileMetadata }
|
||||
users: User[]
|
||||
handleUserRoleChange: (role: UserRole, pubkey: string) => void
|
||||
handleRemoveUser: (pubkey: string) => void
|
||||
@ -1018,7 +1016,6 @@ type DisplayUsersProps = {
|
||||
}
|
||||
|
||||
const DisplayUser = ({
|
||||
metadata,
|
||||
users,
|
||||
handleUserRoleChange,
|
||||
handleRemoveUser,
|
||||
@ -1032,7 +1029,6 @@ const DisplayUser = ({
|
||||
.map((user, index) => (
|
||||
<SignerCounterpart
|
||||
key={`signer-${user.pubkey}`}
|
||||
userMeta={metadata[user.pubkey]}
|
||||
user={user}
|
||||
index={index}
|
||||
moveSigner={moveSigner}
|
||||
@ -1047,7 +1043,6 @@ const DisplayUser = ({
|
||||
return (
|
||||
<div className={styles.user} key={`viewer-${user.pubkey}`}>
|
||||
<Counterpart
|
||||
userMeta={metadata[user.pubkey]}
|
||||
user={user}
|
||||
handleUserRoleChange={handleUserRoleChange}
|
||||
handleRemoveUser={handleRemoveUser}
|
||||
@ -1066,7 +1061,6 @@ interface DragItem {
|
||||
}
|
||||
|
||||
type CounterpartProps = {
|
||||
userMeta: ProfileMetadata
|
||||
user: User
|
||||
handleUserRoleChange: (role: UserRole, pubkey: string) => void
|
||||
handleRemoveUser: (pubkey: string) => void
|
||||
@ -1078,7 +1072,6 @@ type SignerCounterpartProps = CounterpartProps & {
|
||||
}
|
||||
|
||||
const SignerCounterpart = ({
|
||||
userMeta,
|
||||
user,
|
||||
index,
|
||||
moveSigner,
|
||||
@ -1171,7 +1164,6 @@ const SignerCounterpart = ({
|
||||
<FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
|
||||
<Counterpart
|
||||
user={user}
|
||||
userMeta={userMeta}
|
||||
handleRemoveUser={handleRemoveUser}
|
||||
handleUserRoleChange={handleUserRoleChange}
|
||||
/>
|
||||
@ -1180,7 +1172,6 @@ const SignerCounterpart = ({
|
||||
}
|
||||
|
||||
const Counterpart = ({
|
||||
userMeta,
|
||||
user,
|
||||
handleUserRoleChange,
|
||||
handleRemoveUser
|
||||
@ -1188,15 +1179,7 @@ const Counterpart = ({
|
||||
return (
|
||||
<>
|
||||
<div className={styles.avatar}>
|
||||
<UserAvatar
|
||||
pubkey={user.pubkey}
|
||||
name={
|
||||
userMeta?.display_name ||
|
||||
userMeta?.name ||
|
||||
shorten(hexToNpub(user.pubkey))
|
||||
}
|
||||
image={userMeta?.picture}
|
||||
/>
|
||||
<UserAvatar pubkey={user.pubkey} />
|
||||
</div>
|
||||
<Tooltip title="Toggle User Role" arrow disableInteractive>
|
||||
<Button
|
||||
|
||||
@ -32,7 +32,7 @@ import { useState, useEffect } from 'react'
|
||||
import { toast } from 'react-toastify'
|
||||
import { UserAvatar } from '../../../components/UserAvatar'
|
||||
import { MetadataController } from '../../../controllers'
|
||||
import { npubToHex, shorten, hexToNpub, parseJson } from '../../../utils'
|
||||
import { npubToHex, hexToNpub, parseJson } from '../../../utils'
|
||||
import styles from '../style.module.scss'
|
||||
import { SigitFile } from '../../../utils/file'
|
||||
|
||||
@ -105,7 +105,7 @@ export const DisplayMeta = ({
|
||||
}, [signers, viewers])
|
||||
|
||||
useEffect(() => {
|
||||
const metadataController = new MetadataController()
|
||||
const metadataController = MetadataController.getInstance()
|
||||
|
||||
const hexKeys: string[] = [
|
||||
npubToHex(submittedBy)!,
|
||||
@ -167,20 +167,7 @@ export const DisplayMeta = ({
|
||||
<Typography variant="h6" sx={{ color: textColor }}>
|
||||
Submitted By
|
||||
</Typography>
|
||||
{(function () {
|
||||
const profile = metadata[submittedBy]
|
||||
return (
|
||||
<UserAvatar
|
||||
pubkey={submittedBy}
|
||||
name={
|
||||
profile?.display_name ||
|
||||
profile?.name ||
|
||||
shorten(hexToNpub(submittedBy))
|
||||
}
|
||||
image={profile?.picture}
|
||||
/>
|
||||
)
|
||||
})()}
|
||||
<UserAvatar pubkey={submittedBy} isNameVisible={true} />
|
||||
</ListItem>
|
||||
<ListItem
|
||||
sx={{
|
||||
@ -280,14 +267,12 @@ type DisplayUserProps = {
|
||||
const DisplayUser = ({
|
||||
meta,
|
||||
user,
|
||||
metadata,
|
||||
signedBy,
|
||||
nextSigner,
|
||||
getPrevSignersSig
|
||||
}: DisplayUserProps) => {
|
||||
const theme = useTheme()
|
||||
|
||||
const userMeta = metadata[user.pubkey]
|
||||
const [userStatus, setUserStatus] = useState<UserStatus>(UserStatus.Pending)
|
||||
const [prevSignatureStatus, setPreviousSignatureStatus] =
|
||||
useState<PrevSignatureValidationEnum>(PrevSignatureValidationEnum.Pending)
|
||||
@ -370,15 +355,7 @@ const DisplayUser = ({
|
||||
return (
|
||||
<TableRow>
|
||||
<TableCell className={styles.tableCell}>
|
||||
<UserAvatar
|
||||
pubkey={user.pubkey}
|
||||
name={
|
||||
userMeta?.display_name ||
|
||||
userMeta?.name ||
|
||||
shorten(hexToNpub(user.pubkey))
|
||||
}
|
||||
image={userMeta?.picture}
|
||||
/>
|
||||
<UserAvatar pubkey={user.pubkey} />
|
||||
</TableCell>
|
||||
<TableCell className={styles.tableCell}>{user.role}</TableCell>
|
||||
<TableCell>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user