refactor: useSigitProfiles removed, per user profile hook in avatar, refactor name tooltip

src/components/DisplaySigit/index.tsx

@@ -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 &&
+        {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
+                key={pubkey}
                 status={signersStatus[signer]}
-                    profile={profile}
                 pubkey={pubkey}
               />
-                </TooltipChild>
-              </Tooltip>
             )
           })}
         </UserAvatarGroup>
       </div>
-      <div className={`${styles.details} ${styles.date} ${styles.iconLabel}`}>
+      <div className={`${styles.details} ${styles.iconLabel}`}>
         <FontAwesomeIcon icon={faCalendar} />
         {createdAt ? formatTimestamp(createdAt) : null}
       </div>

src/components/DisplaySigner/index.tsx

@@ -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,17 +14,11 @@ import { SignStatus } from '../../utils'
 import { Spinner } from '../Spinner'
 
 type DisplaySignerProps = {
-  profile: ProfileMetadata
   pubkey: string
   status: SignStatus
 }
 
-export const DisplaySigner = ({
+const getStatusIcon = (status: SignStatus) => {
-  status,
-  profile,
-  pubkey
-}: DisplaySignerProps) => {
-  const getStatusIcon = (status: SignStatus) => {
   switch (status) {
     case SignStatus.Signed:
       return <FontAwesomeIcon icon={faCheck} />
@@ -45,8 +38,9 @@ export const DisplaySigner = ({
     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>
   )
 }

src/components/UserAvatar/index.tsx

@@ -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}
     >
+      <Tooltip
+        key={pubkey}
+        title={name}
+        placement="top"
+        arrow
+        disableInteractive
+      >
+        <TooltipChild>
           <AvatarIconButton
             src={image}
             hexKey={pubkey}
-        aria-label={`account of user ${name || pubkey}`}
+            aria-label={`account of user ${name}`}
             color="inherit"
             sx={{
               padding: 0
             }}
           />
-      {name ? <span className={styles.username}>{name}</span> : null}
+        </TooltipChild>
+      </Tooltip>
+      {isNameVisible && name ? (
+        <span className={styles.username}>{name}</span>
+      ) : null}
     </Link>
   )
 }

src/components/UsersDetails.tsx/index.tsx

@@ -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 &&
+          {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 />
@@ -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
+                <DisplaySigner status={signersStatus[signer]} pubkey={pubkey} />
-                  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>
@@ -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
+                    <DisplaySigner status={SignStatus.Viewer} pubkey={pubkey} />
-                      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>
                   )
                 })}
               </UserAvatarGroup>
             </div>
           </>
         )}
+
+        {exportedBy && (
+          <>
+            <p>Exported By</p>
+            <div className={styles.users}>
+              <UserAvatar pubkey={exportedBy} />
+            </div>
+          </>
+        )}
       </div>
       <div className={styles.section}>
         <p>Details</p>

src/hooks/useProfileMetadata.tsx

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

src/hooks/useSigitProfiles.tsx

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

src/pages/create/index.tsx

@@ -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
+        <UserAvatar pubkey={user.pubkey} />
-          pubkey={user.pubkey}
-          name={
-            userMeta?.display_name ||
-            userMeta?.name ||
-            shorten(hexToNpub(user.pubkey))
-          }
-          image={userMeta?.picture}
-        />
       </div>
       <Tooltip title="Toggle User Role" arrow disableInteractive>
         <Button

src/pages/sign/internal/displayMeta.tsx

@@ -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 () {
+        <UserAvatar pubkey={submittedBy} isNameVisible={true} />
-          const profile = metadata[submittedBy]
-          return (
-            <UserAvatar
-              pubkey={submittedBy}
-              name={
-                profile?.display_name ||
-                profile?.name ||
-                shorten(hexToNpub(submittedBy))
-              }
-              image={profile?.picture}
-            />
-          )
-        })()}
       </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
+        <UserAvatar pubkey={user.pubkey} />
-          pubkey={user.pubkey}
-          name={
-            userMeta?.display_name ||
-            userMeta?.name ||
-            shorten(hexToNpub(user.pubkey))
-          }
-          image={userMeta?.picture}
-        />
       </TableCell>
       <TableCell className={styles.tableCell}>{user.role}</TableCell>
       <TableCell>