4 changed files with 102 additions and 133 deletions
--- a/src/components/username.tsx
+++ b/src/components/username.tsx
@ -1,6 +1,9 @@
-import { Typography, IconButton } from '@mui/material'
+import { Typography, IconButton, Box, useTheme } from '@mui/material'
 import { useSelector } from 'react-redux'
 import { State } from '../store/rootReducer'
+import { hexToNpub } from '../utils'
+import { Link } from 'react-router-dom'
+import { getProfileRoute } from '../routes'

 type Props = {
  username: string
@ -44,3 +47,43 @@ const Username = ({ username, avatarContent, handleClick }: Props) => {
 }

 export default Username
+
+type UserProps = {
+  pubkey: string
+  name: string
+  image?: string
+}
+
+export const UserComponent = ({ pubkey, name, image }: UserProps) => {
+  const theme = useTheme()
+
+  const npub = hexToNpub(pubkey)
+  const roboImage = `https://robohash.org/${npub}.png?set=set3`
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
+      <img
+        src={image || roboImage}
+        alt="User Image"
+        className="profile-image"
+        style={{
+          borderWidth: '3px',
+          borderStyle: 'solid',
+          borderColor: `#${pubkey.substring(0, 6)}`
+        }}
+      />
+      <Link to={getProfileRoute(pubkey)}>
+        <Typography
+          component="label"
+          sx={{
+            textAlign: 'center',
+            cursor: 'pointer',
+            color: theme.palette.text.primary
+          }}
+        >
+          {name}
+        </Typography>
+      </Link>
+    </Box>
+  )
+}
--- a/src/pages/create/index.tsx
+++ b/src/pages/create/index.tsx
@ -18,18 +18,22 @@ import {
  Tooltip,
  Typography
 } from '@mui/material'
+import JSZip from 'jszip'
 import { MuiFileInput } from 'mui-file-input'
 import { useEffect, useState } from 'react'
-import { Link, useNavigate } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+import { useNavigate } from 'react-router-dom'
+import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
+import { UserComponent } from '../../components/username'
 import { MetadataController, NostrController } from '../../controllers'
-import { appPrivateRoutes, getProfileRoute } from '../../routes'
+import { appPrivateRoutes } from '../../routes'
+import { State } from '../../store/rootReducer'
 import { ProfileMetadata, User, UserRole } from '../../types'
 import {
  encryptArrayBuffer,
  generateEncryptionKey,
  getHash,
-  getRoboHashPicture,
  hexToNpub,
  pubToHex,
  queryNip05,
@ -39,10 +43,6 @@ import {
  uploadToFileStorage
 } from '../../utils'
 import styles from './style.module.scss'
-import { toast } from 'react-toastify'
-import JSZip from 'jszip'
-import { useSelector } from 'react-redux'
-import { State } from '../../store/rootReducer'

 export const CreatePage = () => {
  const navigate = useNavigate()
@ -489,15 +489,6 @@ const DisplayUser = ({
    })
  }, [users])

-  /**
-   * Use robohash if any of the users images fail to load
-   * @param event img tag onError event
-   * @param pubkey of the user
-   */
-  const imageLoadError = (event: any, pubkey: string) => {
-    event.target.src = getRoboHashPicture(pubkey)
-  }
-
  return (
    <TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}>
      <Table>
@ -511,33 +502,18 @@ const DisplayUser = ({
        <TableBody>
          {users.map((user, index) => {
            const userMeta = metadata[user.pubkey]
-            const npub = hexToNpub(user.pubkey)
-            const roboUrl = `https://robohash.org/${npub}.png?set=set3`
            return (
              <TableRow key={index}>
                <TableCell className={styles.tableCell}>
-                  <Box className={styles.user}>
-                    <img
-                      onError={(event) => {
-                        imageLoadError(event, user.pubkey)
-                      }}
-                      src={userMeta?.picture || roboUrl}
-                      alt="Profile Image"
-                      className="profile-image"
-                      style={{
-                        borderWidth: '3px',
-                        borderStyle: 'solid',
-                        borderColor: `#${user.pubkey.substring(0, 6)}`
-                      }}
-                    />
-                    <Link to={getProfileRoute(user.pubkey)}>
-                      <Typography component="label" className={styles.name}>
-                        {userMeta?.display_name ||
-                          userMeta?.name ||
-                          shorten(npub)}
-                      </Typography>
-                    </Link>
-                  </Box>
+                  <UserComponent
+                    pubkey={user.pubkey}
+                    name={
+                      userMeta?.display_name ||
+                      userMeta?.name ||
+                      shorten(hexToNpub(user.pubkey))
+                    }
+                    image={userMeta?.picture}
+                  />
                </TableCell>
                <TableCell className={styles.tableCell}>
                  <Select
--- a/src/pages/sign/index.tsx
+++ b/src/pages/sign/index.tsx
@ -21,11 +21,12 @@ import { MuiFileInput } from 'mui-file-input'
 import { EventTemplate } from 'nostr-tools'
 import { useEffect, useState } from 'react'
 import { useSelector } from 'react-redux'
-import { Link, useNavigate, useSearchParams } from 'react-router-dom'
+import { useNavigate, useSearchParams } from 'react-router-dom'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
+import { UserComponent } from '../../components/username'
 import { MetadataController, NostrController } from '../../controllers'
-import { appPrivateRoutes, getProfileRoute } from '../../routes'
+import { appPrivateRoutes } from '../../routes'
 import { State } from '../../store/rootReducer'
 import { Meta, ProfileMetadata, User, UserRole } from '../../types'
 import {
@ -639,15 +640,6 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
    })
  }, [users, meta.submittedBy])

-  const imageLoadError = (event: any, pubkey: string) => {
-    const npub = hexToNpub(pubkey)
-    event.target.src = npub
-  }
-
-  const getRoboImageUrl = (pubkey: string) => {
-    return getRoboHashPicture(pubkey)
-  }
-
  return (
    <List
      sx={{
@ -677,29 +669,15 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
        <Typography variant="h6" sx={{ color: textColor }}>
          Submitted By
        </Typography>
-        <Box className={styles.user}>
-          <img
-            onError={(event) => {imageLoadError(event, meta.submittedBy)}}
-            src={
-              metadata[meta.submittedBy]?.picture ||
-              getRoboImageUrl(meta.submittedBy)
-            }
-            alt="Profile Image"
-            className="profile-image"
-            style={{
-              borderWidth: '3px',
-              borderStyle: 'solid',
-              borderColor: `#${meta.submittedBy.substring(0, 6)}`
-            }}
-          />
-          <Link to={getProfileRoute(meta.submittedBy)}>
-            <Typography component="label" className={styles.name}>
-              {metadata[meta.submittedBy]?.display_name ||
-                metadata[meta.submittedBy]?.name ||
-                shorten(hexToNpub(meta.submittedBy))}
-            </Typography>
-          </Link>
-        </Box>
+        <UserComponent
+          pubkey={meta.submittedBy}
+          name={
+            metadata[meta.submittedBy]?.display_name ||
+            metadata[meta.submittedBy]?.name ||
+            shorten(hexToNpub(meta.submittedBy))
+          }
+          image={metadata[meta.submittedBy]?.picture}
+        />
      </ListItem>
      <ListItem
        sx={{
@ -731,8 +709,6 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
          <TableBody>
            {users.map((user, index) => {
              const userMeta = metadata[user.pubkey]
-              const npub = hexToNpub(user.pubkey)
-              const roboUrl = getRoboHashPicture(npub)

              let signedStatus = '-'

@ -750,26 +726,15 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
              return (
                <TableRow key={index}>
                  <TableCell className={styles.tableCell}>
-                    <Box className={styles.user}>
-                      <img
-                        onError={(event) => {imageLoadError(event, meta.submittedBy)}}
-                        src={userMeta?.picture || roboUrl}
-                        alt="Profile Image"
-                        className="profile-image"
-                        style={{
-                          borderWidth: '3px',
-                          borderStyle: 'solid',
-                          borderColor: `#${user.pubkey.substring(0, 6)}`
-                        }}
-                      />
-                      <Link to={getProfileRoute(user.pubkey)}>
-                        <Typography component="label" className={styles.name}>
-                          {userMeta?.display_name ||
-                            userMeta?.name ||
-                            shorten(npub)}
-                        </Typography>
-                      </Link>
-                    </Box>
+                    <UserComponent
+                      pubkey={user.pubkey}
+                      name={
+                        userMeta?.display_name ||
+                        userMeta?.name ||
+                        shorten(hexToNpub(user.pubkey))
+                      }
+                      image={userMeta?.picture}
+                    />
                  </TableCell>
                  <TableCell className={styles.tableCell}>
                    {user.role}
--- a/src/pages/verify/index.tsx
+++ b/src/pages/verify/index.tsx
@ -9,23 +9,20 @@ import {
 } from '@mui/material'
 import JSZip from 'jszip'
 import { MuiFileInput } from 'mui-file-input'
+import { Event, verifyEvent } from 'nostr-tools'
 import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
 import { toast } from 'react-toastify'
-import placeholderAvatar from '../../assets/images/nostr-logo.jpg'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
+import { UserComponent } from '../../components/username'
 import { MetadataController } from '../../controllers'
-import { getProfileRoute } from '../../routes'
 import { Meta, ProfileMetadata } from '../../types'
 import {
-  getRoboHashPicture,
  hexToNpub,
  parseJson,
  readContentOfZipEntry,
  shorten
 } from '../../utils'
 import styles from './style.module.scss'
-import { Event, verifyEvent } from 'nostr-tools'

 export const VerifyPage = () => {
  const theme = useTheme()
@ -114,16 +111,6 @@ export const VerifyPage = () => {
    setIsLoading(false)
  }

-  const imageLoadError = (event: any, pubkey: string) => {
-    const npub = hexToNpub(pubkey)
-    event.target.src = getRoboImageUrl(npub)
-  }
-
-  const getRoboImageUrl = (pubkey: string) => {
-    const npub = hexToNpub(pubkey)
-    return `https://robohash.org/${npub}.png?set=set3`
-  }
-
  const displayUser = (pubkey: string, verifySignature = false) => {
    const profile = metadata[pubkey]

@ -145,31 +132,21 @@ export const VerifyPage = () => {
    }

    return (
-      <Box className={styles.user}>
-        <img
-          onError={(event) => {imageLoadError(event, pubkey)}}
-          src={profile?.picture || getRoboImageUrl(pubkey)}
-          alt="Profile Image"
-          className="profile-image"
-          style={{
-            borderWidth: '3px',
-            borderStyle: 'solid',
-            borderColor: `#${pubkey.substring(0, 6)}`
-          }}
+      <>
+        <UserComponent
+          pubkey={pubkey}
+          name={
+            profile?.display_name || profile?.name || shorten(hexToNpub(pubkey))
+          }
+          image={profile?.picture}
        />
-        <Link to={getProfileRoute(pubkey)}>
-          <Typography component="label" className={styles.name}>
-            {profile?.display_name ||
-              profile?.name ||
-              shorten(hexToNpub(pubkey))}
-          </Typography>
-        </Link>
+
        {verifySignature && (
          <Typography component="label">
            ({isValidSignature ? 'Valid' : 'Not Valid'} Signature)
          </Typography>
        )}
-      </Box>
+      </>
    )
  }

@ -278,7 +255,15 @@ export const VerifyPage = () => {
                  </Typography>
                  <ul className={styles.usersList}>
                    {meta.signers.map((signer) => (
-                      <li key={signer} style={{ color: textColor }}>
+                      <li
+                        key={signer}
+                        style={{
+                          color: textColor,
+                          display: 'flex',
+                          alignItems: 'center',
+                          gap: '15px'
+                        }}
+                      >
                        {displayUser(signer, true)}
                      </li>
                    ))}