feat: added profile view
This commit is contained in:
Davinci
parent
d356f6d8b8
commit
5d0076dd62
@ -1,50 +1,43 @@
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||
import {
|
||||
Box,
|
||||
IconButton,
|
||||
InputProps,
|
||||
List,
|
||||
ListItem,
|
||||
ListSubheader,
|
||||
TextField,
|
||||
Tooltip,
|
||||
SxProps,
|
||||
Typography,
|
||||
useTheme
|
||||
useTheme,
|
||||
Theme
|
||||
} from '@mui/material'
|
||||
import { UnsignedEvent, nip19, kinds, VerifiedEvent } from 'nostr-tools'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { Link, useParams } from 'react-router-dom'
|
||||
import { nip19, VerifiedEvent } from 'nostr-tools'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
import { MetadataController, NostrController } from '../../controllers'
|
||||
import { MetadataController } from '../../controllers'
|
||||
import { NostrJoiningBlock, ProfileMetadata } from '../../types'
|
||||
import styles from './style.module.scss'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { useSelector } from 'react-redux'
|
||||
import { State } from '../../store/rootReducer'
|
||||
import { LoadingButton } from '@mui/lab'
|
||||
import { Dispatch } from '../../store/store'
|
||||
import { setMetadataEvent } from '../../store/actions'
|
||||
import { getRoboHashPicture, shorten } from '../../utils'
|
||||
import { truncate } from 'lodash'
|
||||
import { getProfileSettingsRoute } from '../../routes'
|
||||
import EditIcon from '@mui/icons-material/Edit';
|
||||
import LinkIcon from '@mui/icons-material/Link';
|
||||
import RestoreIcon from '@mui/icons-material/Restore';
|
||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||
import { LoginMethods } from '../../store/auth/types'
|
||||
import { SmartToy } from '@mui/icons-material'
|
||||
import { getRoboHashPicture } from '../../utils'
|
||||
|
||||
export const ProfilePage = () => {
|
||||
const navigate = useNavigate()
|
||||
const theme = useTheme()
|
||||
|
||||
const { npub } = useParams()
|
||||
|
||||
const dispatch: Dispatch = useDispatch()
|
||||
|
||||
const metadataController = useMemo(() => new MetadataController(), [])
|
||||
const nostrController = NostrController.getInstance()
|
||||
|
||||
const [pubkey, setPubkey] = useState<string>()
|
||||
const [nostrJoiningBlock, setNostrJoiningBlock] =
|
||||
useState<NostrJoiningBlock | null>(null)
|
||||
const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
|
||||
const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
|
||||
const metadataState = useSelector((state: State) => state.metadata)
|
||||
const keys = useSelector((state: State) => state.auth?.keyPair)
|
||||
const { usersPubkey, loginMethod } = useSelector((state: State) => state.auth)
|
||||
const { usersPubkey } = useSelector((state: State) => state.auth)
|
||||
const userRobotImage = useSelector((state: State) => state.userRobotImage)
|
||||
|
||||
const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
|
||||
@ -52,8 +45,6 @@ export const ProfilePage = () => {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
||||
|
||||
const robotSet = useRef(1)
|
||||
|
||||
useEffect(() => {
|
||||
if (npub) {
|
||||
try {
|
||||
@ -116,133 +107,30 @@ export const ProfilePage = () => {
|
||||
}
|
||||
}, [isUsersOwnProfile, metadataState, pubkey, metadataController])
|
||||
|
||||
const editItem = (
|
||||
key: keyof ProfileMetadata,
|
||||
label: string,
|
||||
multiline = false,
|
||||
rows = 1,
|
||||
inputProps?: InputProps
|
||||
) => (
|
||||
<ListItem sx={{ marginTop: 1 }}>
|
||||
<TextField
|
||||
label={label}
|
||||
id={label.split(' ').join('-')}
|
||||
value={profileMetadata![key] || ''}
|
||||
size="small"
|
||||
multiline={multiline}
|
||||
rows={rows}
|
||||
className={styles.textField}
|
||||
disabled={!isUsersOwnProfile}
|
||||
InputProps={inputProps}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { value } = event.target
|
||||
const textElementWithCopyIcon = (text: string) => {
|
||||
const onClick = () => {
|
||||
navigator.clipboard.writeText(text)
|
||||
|
||||
setProfileMetadata((prev) => ({
|
||||
...prev,
|
||||
[key]: value
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
)
|
||||
|
||||
const copyItem = (
|
||||
value: string,
|
||||
label: string,
|
||||
copyValue?: string,
|
||||
isPassword = false
|
||||
) => (
|
||||
<ListItem
|
||||
sx={{ marginTop: 1 }}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(copyValue || value)
|
||||
|
||||
toast.success('Copied to clipboard', {
|
||||
autoClose: 1000,
|
||||
hideProgressBar: true
|
||||
})
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label={label}
|
||||
id={label.split(' ').join('-')}
|
||||
defaultValue={value}
|
||||
size="small"
|
||||
className={styles.textField}
|
||||
disabled
|
||||
type={isPassword ? 'password' : 'text'}
|
||||
InputProps={{
|
||||
endAdornment: <ContentCopyIcon className={styles.copyItem} />
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
)
|
||||
|
||||
const handleSaveMetadata = async () => {
|
||||
setSavingProfileMetadata(true)
|
||||
|
||||
const content = JSON.stringify(profileMetadata)
|
||||
|
||||
// We need to omit cachedAt and create new event
|
||||
// Relay will reject if created_at is too late
|
||||
const updatedMetadataState: UnsignedEvent = {
|
||||
content: content,
|
||||
created_at: Math.round(Date.now() / 1000),
|
||||
kind: kinds.Metadata,
|
||||
pubkey: pubkey!,
|
||||
tags: metadataState?.tags || []
|
||||
}
|
||||
|
||||
const signedEvent = await nostrController
|
||||
.signEvent(updatedMetadataState)
|
||||
.catch((error) => {
|
||||
toast.error(`Error saving profile metadata. ${error}`)
|
||||
toast.success('Copied to clipboard', {
|
||||
autoClose: 1000,
|
||||
hideProgressBar: true
|
||||
})
|
||||
|
||||
if (signedEvent) {
|
||||
if (!metadataController.validate(signedEvent)) {
|
||||
toast.error(`Metadata is not valid.`)
|
||||
}
|
||||
|
||||
await metadataController.publishMetadataEvent(signedEvent)
|
||||
|
||||
dispatch(setMetadataEvent(signedEvent))
|
||||
}
|
||||
|
||||
setSavingProfileMetadata(false)
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by clicking on the robot icon inside Picture URL input
|
||||
* On every click, next robohash set will be generated.
|
||||
* There are 5 sets at the moment, after 5th set function will start over from set 1.
|
||||
*/
|
||||
const generateRobotAvatar = () => {
|
||||
robotSet.current++
|
||||
if (robotSet.current > 5) robotSet.current = 1
|
||||
|
||||
const robotAvatarLink = getRoboHashPicture(npub!, robotSet.current)
|
||||
|
||||
setProfileMetadata((prev) => ({
|
||||
...prev,
|
||||
picture: robotAvatarLink
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns robohash generate button, loading spinner or no button
|
||||
*/
|
||||
const robohashButton = () => {
|
||||
return (
|
||||
<Tooltip title="Generate a robohash avatar">
|
||||
<IconButton onClick={generateRobotAvatar}>
|
||||
<SmartToy />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<Typography variant="caption" className={styles.npubNipItem}>
|
||||
<span onClick={onClick}>{shorten(text)}</span>
|
||||
<ContentCopyIcon onClick={onClick} className={styles.copyIcon} />
|
||||
</Typography>
|
||||
)
|
||||
}
|
||||
|
||||
const titleElement = (text: string, sx?: SxProps<Theme>) => (
|
||||
<Typography sx={sx} variant="h6" className={styles.bold}>
|
||||
{text}
|
||||
</Typography>
|
||||
)
|
||||
|
||||
/**
|
||||
* Handles the logic for Image URL.
|
||||
* If no picture in kind 0 found - use robohash avatar
|
||||
@ -250,6 +138,8 @@ export const ProfilePage = () => {
|
||||
* @returns robohash image url
|
||||
*/
|
||||
const getProfileImage = (metadata: ProfileMetadata) => {
|
||||
if (!metadata) return ''
|
||||
|
||||
if (!isUsersOwnProfile) {
|
||||
return metadata.picture || getRoboHashPicture(npub!)
|
||||
}
|
||||
@ -262,96 +152,101 @@ export const ProfilePage = () => {
|
||||
return (
|
||||
<>
|
||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||
<div className={styles.container}>
|
||||
<List
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
marginTop: 2
|
||||
}}
|
||||
subheader={
|
||||
<ListSubheader
|
||||
sx={{
|
||||
paddingBottom: 1,
|
||||
paddingTop: 1,
|
||||
fontSize: '1.5rem'
|
||||
}}
|
||||
className={styles.subHeader}
|
||||
>
|
||||
Profile Settings
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
{profileMetadata && (
|
||||
<div>
|
||||
<ListItem
|
||||
sx={{
|
||||
marginTop: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
{pubkey && (
|
||||
<Box className={styles.container}>
|
||||
<Box className={styles.upper}>
|
||||
<Box className={styles.left}>
|
||||
<div
|
||||
style={{
|
||||
borderWidth: '2px',
|
||||
borderStyle: pubkey ? 'solid' : 'none',
|
||||
borderColor: `#${pubkey?.substring(0, 6)}`
|
||||
}}
|
||||
className={styles.imageWrapper}
|
||||
>
|
||||
<img
|
||||
onError={(event: any) => {
|
||||
event.target.src = getRoboHashPicture(npub!)
|
||||
}}
|
||||
className={styles.img}
|
||||
src={getProfileImage(profileMetadata)}
|
||||
alt="Profile Image"
|
||||
className={styles['image-placeholder']}
|
||||
src={getProfileImage(profileMetadata!)}
|
||||
/>
|
||||
|
||||
{nostrJoiningBlock && (
|
||||
<Typography
|
||||
</div>
|
||||
</Box>
|
||||
<Box>
|
||||
<Box className={styles.head}>
|
||||
<Box className={styles.npubNip}>
|
||||
<Box
|
||||
sx={{
|
||||
color: theme.palette.getContrastText(
|
||||
theme.palette.background.paper
|
||||
)
|
||||
display: 'flex'
|
||||
}}
|
||||
component={Link}
|
||||
to={`https://njump.me/${nostrJoiningBlock.encodedEventPointer}`}
|
||||
target="_blank"
|
||||
>
|
||||
On nostr since {nostrJoiningBlock.block.toLocaleString()}
|
||||
</Typography>
|
||||
)}
|
||||
</ListItem>
|
||||
{profileMetadata &&
|
||||
titleElement(
|
||||
truncate(
|
||||
profileMetadata.display_name ||
|
||||
profileMetadata.name ||
|
||||
pubkey,
|
||||
{
|
||||
length: 16
|
||||
}
|
||||
),
|
||||
{ marginRight: 1 }
|
||||
)}
|
||||
</Box>
|
||||
<Box>
|
||||
{textElementWithCopyIcon(pubkey || '')}
|
||||
</Box>
|
||||
<Box>
|
||||
{profileMetadata?.nip05 &&
|
||||
textElementWithCopyIcon(profileMetadata.nip05)}
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{editItem('picture', 'Picture URL', undefined, undefined, {
|
||||
endAdornment: isUsersOwnProfile ? robohashButton() : undefined
|
||||
})}
|
||||
<Box>
|
||||
{profileMetadata?.website && (
|
||||
<Typography sx={{ marginTop: '10px' }} variant='caption' className={`${styles.website} ${styles.captionWrapper}`}>
|
||||
<LinkIcon className={styles.captionIcon}/>
|
||||
{profileMetadata.website}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
|
||||
{editItem('name', 'Username')}
|
||||
{editItem('display_name', 'Display Name')}
|
||||
{editItem('nip05', 'Nostr Address (nip05)')}
|
||||
{editItem('lud16', 'Lightning Address (lud16)')}
|
||||
{editItem('about', 'About', true, 4)}
|
||||
{editItem('website', 'Website')}
|
||||
<Box>
|
||||
{nostrJoiningBlock && (
|
||||
<Typography
|
||||
variant='caption'
|
||||
sx={{
|
||||
color: theme.palette.getContrastText(
|
||||
theme.palette.background.paper
|
||||
)
|
||||
}}
|
||||
className={styles.captionWrapper}
|
||||
component={Link}
|
||||
to={`https://njump.me/${nostrJoiningBlock.encodedEventPointer}`}
|
||||
target="_blank"
|
||||
>
|
||||
<RestoreIcon className={styles.captionIcon}/>
|
||||
On nostr since {nostrJoiningBlock.block.toLocaleString()}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box className={styles.right}>
|
||||
{isUsersOwnProfile && (
|
||||
<>
|
||||
{usersPubkey &&
|
||||
copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
|
||||
{loginMethod === LoginMethods.privateKey &&
|
||||
keys &&
|
||||
keys.private &&
|
||||
copyItem(
|
||||
'••••••••••••••••••••••••••••••••••••••••••••••••••',
|
||||
'Private Key',
|
||||
keys.private
|
||||
)}
|
||||
</>
|
||||
<IconButton onClick={() => navigate(getProfileSettingsRoute(pubkey))}>
|
||||
<EditIcon/>
|
||||
</IconButton>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
{isUsersOwnProfile && (
|
||||
<LoadingButton
|
||||
loading={savingProfileMetadata}
|
||||
variant="contained"
|
||||
onClick={handleSaveMetadata}
|
||||
>
|
||||
SAVE
|
||||
</LoadingButton>
|
||||
)}
|
||||
</div>
|
||||
</Box>
|
||||
</Box>
|
||||
<Box>
|
||||
{profileMetadata?.about && (
|
||||
<Typography mt={1} className={styles.about}>
|
||||
{profileMetadata.about}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -1,23 +1,51 @@
|
||||
.container {
|
||||
.upper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
padding-top: 15px;
|
||||
}
|
||||
|
||||
.textField {
|
||||
width: 100%;
|
||||
.container {
|
||||
color: black
|
||||
}
|
||||
|
||||
.subHeader {
|
||||
border-bottom: 0.5px solid;
|
||||
.left {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.img {
|
||||
max-height: 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.copyItem {
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
color: #34495e;
|
||||
}
|
||||
|
||||
.imageWrapper {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-placeholder {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.copyIcon {
|
||||
font-size: 1.1rem !important;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.website {
|
||||
// margin-top: 10px !important;
|
||||
margin-bottom: 15px 0 !important;
|
||||
}
|
||||
|
||||
.captionWrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.captionIcon {
|
||||
color: #15999b;
|
||||
margin-right: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
357
src/pages/settings/profile/index.tsx
Normal file
357
src/pages/settings/profile/index.tsx
Normal file
@ -0,0 +1,357 @@
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||
import {
|
||||
IconButton,
|
||||
InputProps,
|
||||
List,
|
||||
ListItem,
|
||||
ListSubheader,
|
||||
TextField,
|
||||
Tooltip,
|
||||
Typography,
|
||||
useTheme
|
||||
} from '@mui/material'
|
||||
import { UnsignedEvent, nip19, kinds, VerifiedEvent } from 'nostr-tools'
|
||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
||||
import { Link, useParams } from 'react-router-dom'
|
||||
import { toast } from 'react-toastify'
|
||||
import { MetadataController, NostrController } from '../../../controllers'
|
||||
import { NostrJoiningBlock, ProfileMetadata } from '../../../types'
|
||||
import styles from './style.module.scss'
|
||||
import { useDispatch, useSelector } from 'react-redux'
|
||||
import { State } from '../../../store/rootReducer'
|
||||
import { LoadingButton } from '@mui/lab'
|
||||
import { Dispatch } from '../../../store/store'
|
||||
import { setMetadataEvent } from '../../../store/actions'
|
||||
import { LoadingSpinner } from '../../../components/LoadingSpinner'
|
||||
import { LoginMethods } from '../../../store/auth/types'
|
||||
import { SmartToy } from '@mui/icons-material'
|
||||
import { getRoboHashPicture } from '../../../utils'
|
||||
|
||||
export const ProfileSettingsPage = () => {
|
||||
const theme = useTheme()
|
||||
|
||||
const { npub } = useParams()
|
||||
|
||||
const dispatch: Dispatch = useDispatch()
|
||||
|
||||
const metadataController = useMemo(() => new MetadataController(), [])
|
||||
const nostrController = NostrController.getInstance()
|
||||
|
||||
const [pubkey, setPubkey] = useState<string>()
|
||||
const [nostrJoiningBlock, setNostrJoiningBlock] =
|
||||
useState<NostrJoiningBlock | null>(null)
|
||||
const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
|
||||
const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
|
||||
const metadataState = useSelector((state: State) => state.metadata)
|
||||
const keys = useSelector((state: State) => state.auth?.keyPair)
|
||||
const { usersPubkey, loginMethod } = useSelector((state: State) => state.auth)
|
||||
const userRobotImage = useSelector((state: State) => state.userRobotImage)
|
||||
|
||||
const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
|
||||
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
||||
|
||||
const robotSet = useRef(1)
|
||||
|
||||
useEffect(() => {
|
||||
if (npub) {
|
||||
try {
|
||||
const hexPubkey = nip19.decode(npub).data as string
|
||||
setPubkey(hexPubkey)
|
||||
|
||||
if (hexPubkey === usersPubkey) setIsUsersOwnProfile(true)
|
||||
} catch (error) {
|
||||
toast.error('Error occurred in decoding npub' + error)
|
||||
}
|
||||
}
|
||||
}, [npub, usersPubkey])
|
||||
|
||||
useEffect(() => {
|
||||
if (pubkey) {
|
||||
metadataController
|
||||
.getNostrJoiningBlockNumber(pubkey)
|
||||
.then((res) => {
|
||||
setNostrJoiningBlock(res)
|
||||
})
|
||||
.catch((err) => {
|
||||
// todo: handle error
|
||||
console.log('err :>> ', err)
|
||||
})
|
||||
}
|
||||
|
||||
if (isUsersOwnProfile && metadataState) {
|
||||
const metadataContent = metadataController.extractProfileMetadataContent(
|
||||
metadataState as VerifiedEvent
|
||||
)
|
||||
if (metadataContent) {
|
||||
setProfileMetadata(metadataContent)
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
return
|
||||
}
|
||||
|
||||
if (pubkey) {
|
||||
const getMetadata = async (pubkey: string) => {
|
||||
const metadataEvent = await metadataController
|
||||
.findMetadata(pubkey)
|
||||
.catch((err) => {
|
||||
toast.error(err)
|
||||
return null
|
||||
})
|
||||
|
||||
if (metadataEvent) {
|
||||
const metadataContent =
|
||||
metadataController.extractProfileMetadataContent(metadataEvent)
|
||||
if (metadataContent) {
|
||||
setProfileMetadata(metadataContent)
|
||||
}
|
||||
}
|
||||
|
||||
setIsLoading(false)
|
||||
}
|
||||
|
||||
getMetadata(pubkey)
|
||||
}
|
||||
}, [isUsersOwnProfile, metadataState, pubkey, metadataController])
|
||||
|
||||
const editItem = (
|
||||
key: keyof ProfileMetadata,
|
||||
label: string,
|
||||
multiline = false,
|
||||
rows = 1,
|
||||
inputProps?: InputProps
|
||||
) => (
|
||||
<ListItem sx={{ marginTop: 1 }}>
|
||||
<TextField
|
||||
label={label}
|
||||
id={label.split(' ').join('-')}
|
||||
value={profileMetadata![key] || ''}
|
||||
size="small"
|
||||
multiline={multiline}
|
||||
rows={rows}
|
||||
className={styles.textField}
|
||||
disabled={!isUsersOwnProfile}
|
||||
InputProps={inputProps}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { value } = event.target
|
||||
|
||||
setProfileMetadata((prev) => ({
|
||||
...prev,
|
||||
[key]: value
|
||||
}))
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
)
|
||||
|
||||
const copyItem = (
|
||||
value: string,
|
||||
label: string,
|
||||
copyValue?: string,
|
||||
isPassword = false
|
||||
) => (
|
||||
<ListItem
|
||||
sx={{ marginTop: 1 }}
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(copyValue || value)
|
||||
|
||||
toast.success('Copied to clipboard', {
|
||||
autoClose: 1000,
|
||||
hideProgressBar: true
|
||||
})
|
||||
}}
|
||||
>
|
||||
<TextField
|
||||
label={label}
|
||||
id={label.split(' ').join('-')}
|
||||
defaultValue={value}
|
||||
size="small"
|
||||
className={styles.textField}
|
||||
disabled
|
||||
type={isPassword ? 'password' : 'text'}
|
||||
InputProps={{
|
||||
endAdornment: <ContentCopyIcon className={styles.copyItem} />
|
||||
}}
|
||||
/>
|
||||
</ListItem>
|
||||
)
|
||||
|
||||
const handleSaveMetadata = async () => {
|
||||
setSavingProfileMetadata(true)
|
||||
|
||||
const content = JSON.stringify(profileMetadata)
|
||||
|
||||
// We need to omit cachedAt and create new event
|
||||
// Relay will reject if created_at is too late
|
||||
const updatedMetadataState: UnsignedEvent = {
|
||||
content: content,
|
||||
created_at: Math.round(Date.now() / 1000),
|
||||
kind: kinds.Metadata,
|
||||
pubkey: pubkey!,
|
||||
tags: metadataState?.tags || []
|
||||
}
|
||||
|
||||
const signedEvent = await nostrController
|
||||
.signEvent(updatedMetadataState)
|
||||
.catch((error) => {
|
||||
toast.error(`Error saving profile metadata. ${error}`)
|
||||
})
|
||||
|
||||
if (signedEvent) {
|
||||
if (!metadataController.validate(signedEvent)) {
|
||||
toast.error(`Metadata is not valid.`)
|
||||
}
|
||||
|
||||
await metadataController.publishMetadataEvent(signedEvent)
|
||||
|
||||
dispatch(setMetadataEvent(signedEvent))
|
||||
}
|
||||
|
||||
setSavingProfileMetadata(false)
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by clicking on the robot icon inside Picture URL input
|
||||
* On every click, next robohash set will be generated.
|
||||
* There are 5 sets at the moment, after 5th set function will start over from set 1.
|
||||
*/
|
||||
const generateRobotAvatar = () => {
|
||||
robotSet.current++
|
||||
if (robotSet.current > 5) robotSet.current = 1
|
||||
|
||||
const robotAvatarLink = getRoboHashPicture(npub!, robotSet.current)
|
||||
|
||||
setProfileMetadata((prev) => ({
|
||||
...prev,
|
||||
picture: robotAvatarLink
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns robohash generate button, loading spinner or no button
|
||||
*/
|
||||
const robohashButton = () => {
|
||||
return (
|
||||
<Tooltip title="Generate a robohash avatar">
|
||||
<IconButton onClick={generateRobotAvatar}>
|
||||
<SmartToy />
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles the logic for Image URL.
|
||||
* If no picture in kind 0 found - use robohash avatar
|
||||
*
|
||||
* @returns robohash image url
|
||||
*/
|
||||
const getProfileImage = (metadata: ProfileMetadata) => {
|
||||
if (!isUsersOwnProfile) {
|
||||
return metadata.picture || getRoboHashPicture(npub!)
|
||||
}
|
||||
|
||||
// userRobotImage is used only when visiting own profile
|
||||
// while kind 0 picture is not set
|
||||
return metadata.picture || userRobotImage || getRoboHashPicture(npub!)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||
<div className={styles.container}>
|
||||
<List
|
||||
sx={{
|
||||
bgcolor: 'background.paper',
|
||||
marginTop: 2
|
||||
}}
|
||||
subheader={
|
||||
<ListSubheader
|
||||
sx={{
|
||||
paddingBottom: 1,
|
||||
paddingTop: 1,
|
||||
fontSize: '1.5rem'
|
||||
}}
|
||||
className={styles.subHeader}
|
||||
>
|
||||
Profile Settings
|
||||
</ListSubheader>
|
||||
}
|
||||
>
|
||||
{profileMetadata && (
|
||||
<div>
|
||||
<ListItem
|
||||
sx={{
|
||||
marginTop: 1,
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
}}
|
||||
>
|
||||
<img
|
||||
onError={(event: any) => {
|
||||
event.target.src = getRoboHashPicture(npub!)
|
||||
}}
|
||||
className={styles.img}
|
||||
src={getProfileImage(profileMetadata)}
|
||||
alt="Profile Image"
|
||||
/>
|
||||
|
||||
{nostrJoiningBlock && (
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.getContrastText(
|
||||
theme.palette.background.paper
|
||||
)
|
||||
}}
|
||||
component={Link}
|
||||
to={`https://njump.me/${nostrJoiningBlock.encodedEventPointer}`}
|
||||
target="_blank"
|
||||
>
|
||||
On nostr since {nostrJoiningBlock.block.toLocaleString()}
|
||||
</Typography>
|
||||
)}
|
||||
</ListItem>
|
||||
|
||||
{editItem('picture', 'Picture URL', undefined, undefined, {
|
||||
endAdornment: isUsersOwnProfile ? robohashButton() : undefined
|
||||
})}
|
||||
|
||||
{editItem('name', 'Username')}
|
||||
{editItem('display_name', 'Display Name')}
|
||||
{editItem('nip05', 'Nostr Address (nip05)')}
|
||||
{editItem('lud16', 'Lightning Address (lud16)')}
|
||||
{editItem('about', 'About', true, 4)}
|
||||
{editItem('website', 'Website')}
|
||||
{isUsersOwnProfile && (
|
||||
<>
|
||||
{usersPubkey &&
|
||||
copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
|
||||
{loginMethod === LoginMethods.privateKey &&
|
||||
keys &&
|
||||
keys.private &&
|
||||
copyItem(
|
||||
'••••••••••••••••••••••••••••••••••••••••••••••••••',
|
||||
'Private Key',
|
||||
keys.private
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</List>
|
||||
{isUsersOwnProfile && (
|
||||
<LoadingButton
|
||||
loading={savingProfileMetadata}
|
||||
variant="contained"
|
||||
onClick={handleSaveMetadata}
|
||||
>
|
||||
SAVE
|
||||
</LoadingButton>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
23
src/pages/settings/profile/style.module.scss
Normal file
23
src/pages/settings/profile/style.module.scss
Normal file
@ -0,0 +1,23 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 25px;
|
||||
}
|
||||
|
||||
.textField {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.subHeader {
|
||||
border-bottom: 0.5px solid;
|
||||
}
|
||||
|
||||
.img {
|
||||
max-height: 40%;
|
||||
max-width: 40%;
|
||||
}
|
||||
|
||||
.copyItem {
|
||||
margin-left: 10px;
|
||||
color: #34495e;
|
||||
}
|
||||
@ -6,12 +6,14 @@ import { ProfilePage } from '../pages/profile'
|
||||
import { hexToNpub } from '../utils'
|
||||
import { SignPage } from '../pages/sign'
|
||||
import { VerifyPage } from '../pages/verify'
|
||||
import { ProfileSettingsPage } from '../pages/settings/profile'
|
||||
|
||||
export const appPrivateRoutes = {
|
||||
homePage: '/',
|
||||
create: '/create',
|
||||
sign: '/sign',
|
||||
verify: '/verify'
|
||||
verify: '/verify',
|
||||
profileSettings: '/settings/profile/:npub'
|
||||
}
|
||||
|
||||
export const appPublicRoutes = {
|
||||
@ -24,6 +26,9 @@ export const appPublicRoutes = {
|
||||
export const getProfileRoute = (hexKey: string) =>
|
||||
appPublicRoutes.profile.replace(':npub', hexToNpub(hexKey))
|
||||
|
||||
export const getProfileSettingsRoute = (hexKey: string) =>
|
||||
appPrivateRoutes.profileSettings.replace(':npub', hexToNpub(hexKey))
|
||||
|
||||
export const publicRoutes = [
|
||||
{
|
||||
path: appPublicRoutes.landingPage,
|
||||
@ -57,5 +62,9 @@ export const privateRoutes = [
|
||||
{
|
||||
path: appPrivateRoutes.verify,
|
||||
element: <VerifyPage />
|
||||
},
|
||||
{
|
||||
path: appPrivateRoutes.profileSettings,
|
||||
element: <ProfileSettingsPage />
|
||||
}
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue
Block a user