issue-40 #52
@ -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>
|
||||
)
|
||||
}
|
||||
|
@ -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,10 +489,6 @@ const DisplayUser = ({
|
||||
})
|
||||
}, [users])
|
||||
|
||||
const imageLoadError = (event: any, pubkey: string) => {
|
||||
event.target.src = getRoboHashPicture(pubkey)
|
||||
}
|
||||
|
||||
return (
|
||||
<TableContainer component={Paper} elevation={3} sx={{ marginTop: '20px' }}>
|
||||
<Table>
|
||||
@ -506,31 +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 ||
|
||||
<UserComponent
|
||||
pubkey={user.pubkey}
|
||||
name={
|
||||
userMeta?.display_name ||
|
||||
userMeta?.name ||
|
||||
shorten(npub)}
|
||||
</Typography>
|
||||
</Link>
|
||||
</Box>
|
||||
shorten(hexToNpub(user.pubkey))
|
||||
}
|
||||
image={userMeta?.picture}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={styles.tableCell}>
|
||||
<Select
|
||||
|
@ -21,12 +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 placeholderAvatar from '../../assets/images/nostr-logo.jpg'
|
||||
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 {
|
||||
@ -635,15 +635,6 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
|
||||
})
|
||||
}, [users, meta.submittedBy])
|
||||
|
||||
const imageLoadError = (event: any) => {
|
||||
event.target.src = placeholderAvatar
|
||||
}
|
||||
|
||||
const getRoboImageUrl = (pubkey: string) => {
|
||||
const npub = hexToNpub(pubkey)
|
||||
return `https://robohash.org/${npub}.png?set=set3`
|
||||
}
|
||||
|
||||
return (
|
||||
<List
|
||||
sx={{
|
||||
@ -673,29 +664,15 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
|
||||
<Typography variant="h6" sx={{ color: textColor }}>
|
||||
Submitted By
|
||||
</Typography>
|
||||
<Box className={styles.user}>
|
||||
<img
|
||||
onError={imageLoadError}
|
||||
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 ||
|
||||
<UserComponent
|
||||
pubkey={meta.submittedBy}
|
||||
name={
|
||||
metadata[meta.submittedBy]?.display_name ||
|
||||
metadata[meta.submittedBy]?.name ||
|
||||
shorten(hexToNpub(meta.submittedBy))}
|
||||
</Typography>
|
||||
</Link>
|
||||
</Box>
|
||||
shorten(hexToNpub(meta.submittedBy))
|
||||
}
|
||||
image={metadata[meta.submittedBy]?.picture}
|
||||
/>
|
||||
</ListItem>
|
||||
<ListItem
|
||||
sx={{
|
||||
@ -727,8 +704,6 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
|
||||
<TableBody>
|
||||
{users.map((user, index) => {
|
||||
const userMeta = metadata[user.pubkey]
|
||||
const npub = hexToNpub(user.pubkey)
|
||||
const roboUrl = `https://robohash.org/${npub}.png?set=set3`
|
||||
|
||||
let signedStatus = '-'
|
||||
|
||||
@ -746,26 +721,15 @@ const DisplayMeta = ({ meta, nextSigner }: DisplayMetaProps) => {
|
||||
return (
|
||||
<TableRow key={index}>
|
||||
<TableCell className={styles.tableCell}>
|
||||
<Box className={styles.user}>
|
||||
<img
|
||||
onError={imageLoadError}
|
||||
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 ||
|
||||
<UserComponent
|
||||
pubkey={user.pubkey}
|
||||
name={
|
||||
userMeta?.display_name ||
|
||||
userMeta?.name ||
|
||||
shorten(npub)}
|
||||
</Typography>
|
||||
</Link>
|
||||
</Box>
|
||||
shorten(hexToNpub(user.pubkey))
|
||||
}
|
||||
image={userMeta?.picture}
|
||||
/>
|
||||
</TableCell>
|
||||
<TableCell className={styles.tableCell}>
|
||||
{user.role}
|
||||
|
@ -9,22 +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 { 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()
|
||||
@ -113,15 +111,6 @@ export const VerifyPage = () => {
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
const imageLoadError = (event: any, pubkey: string) => {
|
||||
const npub = hexToNpub(pubkey)
|
||||
event.target.src = npub
|
||||
}
|
||||
|
||||
const getRoboImageUrl = (pubkey: string) => {
|
||||
return getRoboHashPicture(pubkey)
|
||||
}
|
||||
|
||||
const displayUser = (pubkey: string, verifySignature = false) => {
|
||||
const profile = metadata[pubkey]
|
||||
|
||||
@ -143,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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -276,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>
|
||||
))}
|
||||
|
Loading…
Reference in New Issue
Block a user