feat: added profile view #64
@ -71,7 +71,7 @@ button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
padding: 64px 0;
|
padding: 60px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.hide-mobile {
|
.hide-mobile {
|
||||||
|
@ -1,50 +1,42 @@
|
|||||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||||
import {
|
import {
|
||||||
|
Box,
|
||||||
IconButton,
|
IconButton,
|
||||||
InputProps,
|
SxProps,
|
||||||
List,
|
|
||||||
ListItem,
|
|
||||||
ListSubheader,
|
|
||||||
TextField,
|
|
||||||
Tooltip,
|
|
||||||
Typography,
|
Typography,
|
||||||
useTheme
|
useTheme,
|
||||||
|
Theme
|
||||||
} from '@mui/material'
|
} from '@mui/material'
|
||||||
import { UnsignedEvent, nip19, kinds, VerifiedEvent } from 'nostr-tools'
|
import { nip19, VerifiedEvent } from 'nostr-tools'
|
||||||
import { useEffect, useMemo, useRef, useState } from 'react'
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
import { Link, useParams } from 'react-router-dom'
|
import { Link, useNavigate, useParams } from 'react-router-dom'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
import { MetadataController, NostrController } from '../../controllers'
|
import { MetadataController } from '../../controllers'
|
||||||
import { NostrJoiningBlock, ProfileMetadata } from '../../types'
|
import { NostrJoiningBlock, ProfileMetadata } from '../../types'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { useDispatch, useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
import { State } from '../../store/rootReducer'
|
import { State } from '../../store/rootReducer'
|
||||||
import { LoadingButton } from '@mui/lab'
|
import { getRoboHashPicture, hexToNpub, shorten } from '../../utils'
|
||||||
import { Dispatch } from '../../store/store'
|
import { truncate } from 'lodash'
|
||||||
import { setMetadataEvent } from '../../store/actions'
|
import { getProfileSettingsRoute } from '../../routes'
|
||||||
|
import EditIcon from '@mui/icons-material/Edit'
|
||||||
|
import LinkIcon from '@mui/icons-material/Link'
|
||||||
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
import { LoadingSpinner } from '../../components/LoadingSpinner'
|
||||||
import { LoginMethods } from '../../store/auth/types'
|
|
||||||
import { SmartToy } from '@mui/icons-material'
|
|
||||||
import { getRoboHashPicture } from '../../utils'
|
|
||||||
|
|
||||||
export const ProfilePage = () => {
|
export const ProfilePage = () => {
|
||||||
|
const navigate = useNavigate()
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
|
|
||||||
const { npub } = useParams()
|
const { npub } = useParams()
|
||||||
|
|
||||||
const dispatch: Dispatch = useDispatch()
|
|
||||||
|
|
||||||
const metadataController = useMemo(() => new MetadataController(), [])
|
const metadataController = useMemo(() => new MetadataController(), [])
|
||||||
const nostrController = NostrController.getInstance()
|
|
||||||
|
|
||||||
const [pubkey, setPubkey] = useState<string>()
|
const [pubkey, setPubkey] = useState<string>()
|
||||||
const [nostrJoiningBlock, setNostrJoiningBlock] =
|
const [nostrJoiningBlock, setNostrJoiningBlock] =
|
||||||
useState<NostrJoiningBlock | null>(null)
|
useState<NostrJoiningBlock | null>(null)
|
||||||
const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
|
const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
|
||||||
const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
|
|
||||||
const metadataState = useSelector((state: State) => state.metadata)
|
const metadataState = useSelector((state: State) => state.metadata)
|
||||||
const keys = useSelector((state: State) => state.auth?.keyPair)
|
const { usersPubkey } = useSelector((state: State) => state.auth)
|
||||||
const { usersPubkey, loginMethod } = useSelector((state: State) => state.auth)
|
|
||||||
const userRobotImage = useSelector((state: State) => state.userRobotImage)
|
const userRobotImage = useSelector((state: State) => state.userRobotImage)
|
||||||
|
|
||||||
const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
|
const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
|
||||||
@ -52,8 +44,6 @@ export const ProfilePage = () => {
|
|||||||
const [isLoading, setIsLoading] = useState(true)
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
||||||
|
|
||||||
const robotSet = useRef(1)
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (npub) {
|
if (npub) {
|
||||||
try {
|
try {
|
||||||
@ -116,130 +106,31 @@ export const ProfilePage = () => {
|
|||||||
}
|
}
|
||||||
}, [isUsersOwnProfile, metadataState, pubkey, metadataController])
|
}, [isUsersOwnProfile, metadataState, pubkey, metadataController])
|
||||||
|
|
||||||
const editItem = (
|
/**
|
||||||
key: keyof ProfileMetadata,
|
* Rendering text with button which copies the provided text
|
||||||
label: string,
|
* @param text to be visible
|
||||||
multiline = false,
|
* @param sx props (MUI) to customize style
|
||||||
rows = 1,
|
* @returns HTML rendered text
|
||||||
inputProps?: InputProps
|
*/
|
||||||
) => (
|
const textElementWithCopyIcon = (
|
||||||
<ListItem sx={{ marginTop: 1 }}>
|
text: string,
|
||||||
<TextField
|
sx?: SxProps<Theme>,
|
||||||
label={label}
|
shortenOffset?: number
|
||||||
id={label.split(' ').join('-')}
|
) => {
|
||||||
value={profileMetadata![key] || ''}
|
const onClick = () => {
|
||||||
size="small"
|
navigator.clipboard.writeText(text)
|
||||||
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', {
|
toast.success('Copied to clipboard', {
|
||||||
autoClose: 1000,
|
autoClose: 1000,
|
||||||
hideProgressBar: true
|
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 (
|
return (
|
||||||
<Tooltip title="Generate a robohash avatar">
|
<Typography variant="caption" sx={sx} className={styles.npubNipItem}>
|
||||||
<IconButton onClick={generateRobotAvatar}>
|
<span onClick={onClick}>{shorten(text, shortenOffset)}</span>
|
||||||
<SmartToy />
|
<ContentCopyIcon onClick={onClick} className={styles.copyIcon} />
|
||||||
</IconButton>
|
</Typography>
|
||||||
</Tooltip>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -250,6 +141,8 @@ export const ProfilePage = () => {
|
|||||||
* @returns robohash image url
|
* @returns robohash image url
|
||||||
*/
|
*/
|
||||||
const getProfileImage = (metadata: ProfileMetadata) => {
|
const getProfileImage = (metadata: ProfileMetadata) => {
|
||||||
|
if (!metadata) return ''
|
||||||
|
|
||||||
if (!isUsersOwnProfile) {
|
if (!isUsersOwnProfile) {
|
||||||
return metadata.picture || getRoboHashPicture(npub!)
|
return metadata.picture || getRoboHashPicture(npub!)
|
||||||
}
|
}
|
||||||
@ -262,96 +155,124 @@ export const ProfilePage = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||||
<div className={styles.container}>
|
{pubkey && (
|
||||||
<List
|
<Box className={styles.container}>
|
||||||
sx={{
|
<Box
|
||||||
bgcolor: 'background.paper',
|
className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
|
||||||
marginTop: 2
|
|
||||||
}}
|
|
||||||
subheader={
|
|
||||||
<ListSubheader
|
|
||||||
sx={{
|
|
||||||
paddingBottom: 1,
|
|
||||||
paddingTop: 1,
|
|
||||||
fontSize: '1.5rem'
|
|
||||||
}}
|
|
||||||
className={styles.subHeader}
|
|
||||||
>
|
>
|
||||||
Profile Settings
|
{profileMetadata && profileMetadata.banner ? (
|
||||||
</ListSubheader>
|
<img src={profileMetadata.banner} />
|
||||||
}
|
) : (
|
||||||
>
|
''
|
||||||
{profileMetadata && (
|
)}
|
||||||
<div>
|
</Box>
|
||||||
<ListItem
|
|
||||||
sx={{
|
<Box className={styles.belowBanner}>
|
||||||
marginTop: 1,
|
<Box className={styles.upper}>
|
||||||
display: 'flex',
|
<Box className={styles.left}>
|
||||||
flexDirection: 'column'
|
<div
|
||||||
|
style={{
|
||||||
|
borderWidth: '2px',
|
||||||
|
borderStyle: pubkey ? 'solid' : 'none',
|
||||||
|
borderColor: `#${pubkey?.substring(0, 6)}`
|
||||||
}}
|
}}
|
||||||
|
className={styles.imageWrapper}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
onError={(event: any) => {
|
className={styles['image-placeholder']}
|
||||||
event.target.src = getRoboHashPicture(npub!)
|
src={getProfileImage(profileMetadata!)}
|
||||||
}}
|
|
||||||
className={styles.img}
|
|
||||||
src={getProfileImage(profileMetadata)}
|
|
||||||
alt="Profile Image"
|
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
{nostrJoiningBlock && (
|
</Box>
|
||||||
|
<Box className={styles.middle}>
|
||||||
<Typography
|
<Typography
|
||||||
sx={{
|
|
||||||
color: theme.palette.getContrastText(
|
|
||||||
theme.palette.background.paper
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
component={Link}
|
component={Link}
|
||||||
to={`https://njump.me/${nostrJoiningBlock.encodedEventPointer}`}
|
to={`https://njump.me/${nostrJoiningBlock?.encodedEventPointer || ''}`}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
|
className={`${styles.nostrSince} ${styles.link}`}
|
||||||
|
variant="caption"
|
||||||
>
|
>
|
||||||
On nostr since {nostrJoiningBlock.block.toLocaleString()}
|
{nostrJoiningBlock
|
||||||
|
? `On nostr since ${nostrJoiningBlock.block.toLocaleString()}`
|
||||||
|
: 'On nostr since: unknown'}
|
||||||
|
</Typography>
|
||||||
|
</Box>
|
||||||
|
<Box className={styles.right}>
|
||||||
|
{isUsersOwnProfile && (
|
||||||
|
<IconButton
|
||||||
|
onClick={() => navigate(getProfileSettingsRoute(pubkey))}
|
||||||
|
>
|
||||||
|
<EditIcon />
|
||||||
|
</IconButton>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box className={styles.head}>
|
||||||
|
<Box sx={{lineHeight: 1}} className={styles.npubNip}>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
display: 'flex'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{profileMetadata && (
|
||||||
|
<Typography
|
||||||
|
sx={{ margin: '5px 0 5px 0'}}
|
||||||
|
variant="h6"
|
||||||
|
className={styles.bold}
|
||||||
|
>
|
||||||
|
{truncate(
|
||||||
|
profileMetadata.display_name ||
|
||||||
|
profileMetadata.name ||
|
||||||
|
hexToNpub(pubkey),
|
||||||
|
{
|
||||||
|
length: 16
|
||||||
|
}
|
||||||
|
)}
|
||||||
</Typography>
|
</Typography>
|
||||||
)}
|
)}
|
||||||
</ListItem>
|
</Box>
|
||||||
|
<Box>
|
||||||
|
{textElementWithCopyIcon(
|
||||||
|
hexToNpub(pubkey) || '',
|
||||||
|
undefined,
|
||||||
|
15
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
{profileMetadata?.nip05 &&
|
||||||
|
textElementWithCopyIcon(profileMetadata.nip05, undefined, 15)}
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
{profileMetadata?.lud16 &&
|
||||||
|
textElementWithCopyIcon(profileMetadata.lud16, undefined, 15)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
|
||||||
{editItem('picture', 'Picture URL', undefined, undefined, {
|
<Box>
|
||||||
endAdornment: isUsersOwnProfile ? robohashButton() : undefined
|
{profileMetadata?.website && (
|
||||||
})}
|
<Typography
|
||||||
|
sx={{ marginTop: '10px' }}
|
||||||
{editItem('name', 'Username')}
|
variant="caption"
|
||||||
{editItem('display_name', 'Display Name')}
|
component={Link}
|
||||||
{editItem('nip05', 'Nostr Address (nip05)')}
|
to={profileMetadata.website}
|
||||||
{editItem('lud16', 'Lightning Address (lud16)')}
|
target="_blank"
|
||||||
{editItem('about', 'About', true, 4)}
|
className={`${styles.website} ${styles.link} ${styles.captionWrapper}`}
|
||||||
{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
|
{profileMetadata.website}
|
||||||
</LoadingButton>
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
<Box>
|
||||||
|
{profileMetadata?.about && (
|
||||||
|
<Typography mt={1} className={styles.about}>
|
||||||
|
{profileMetadata.about}
|
||||||
|
</Typography>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
|
</Box>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,23 +1,102 @@
|
|||||||
.container {
|
.banner {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
align-items: center;
|
||||||
gap: 25px;
|
justify-content: center;
|
||||||
}
|
|
||||||
|
|
||||||
.textField {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-height: 210px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.noImage {
|
||||||
|
background-color: rgb(219, 219, 219);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.subHeader {
|
.belowBanner {
|
||||||
border-bottom: 0.5px solid;
|
padding: 0 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img {
|
.upper {
|
||||||
max-height: 40%;
|
width: 100%;
|
||||||
max-width: 40%;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.copyItem {
|
.container {
|
||||||
|
color: black
|
||||||
|
}
|
||||||
|
|
||||||
|
.left {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-top: -35px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.middle {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
margin-left: 10px;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.link {
|
||||||
|
&:hover {
|
||||||
|
color: #3a3a3a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nostrSince {
|
||||||
|
color: #5c5c5c;
|
||||||
|
margin-top: 15px !important;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: #3a3a3a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.website {
|
||||||
|
margin-top: 8px !important;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-color: #3e3e3e;
|
||||||
|
color: #3e3e3e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.captionWrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.captionIcon {
|
||||||
|
color: #15999b;
|
||||||
|
margin-left: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.npubNipItem {
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: #3e3e3e;
|
||||||
|
line-height: 1.3;
|
||||||
|
|
||||||
|
.copyIcon {
|
||||||
|
font-size: 0.9rem !important;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
}
|
}
|
378
src/pages/settings/profile/index.tsx
Normal file
378
src/pages/settings/profile/index.tsx
Normal file
@ -0,0 +1,378 @@
|
|||||||
|
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
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'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{profileMetadata.banner ? (
|
||||||
|
<img
|
||||||
|
className={styles.bannerImg}
|
||||||
|
src={profileMetadata.banner}
|
||||||
|
alt="Banner Image"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<Box className={styles.noBanner}> No banner found </Box>
|
||||||
|
)}
|
||||||
|
</ListItem>
|
||||||
|
|
||||||
|
{editItem('banner', 'Banner URL', undefined, undefined)}
|
||||||
|
|
||||||
|
<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>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
37
src/pages/settings/profile/style.module.scss
Normal file
37
src/pages/settings/profile/style.module.scss
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noBanner {
|
||||||
|
width: 100%;
|
||||||
|
height: 180px;
|
||||||
|
background: rgb(219, 219, 219);
|
||||||
|
color: rgb(88, 88, 88);
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bannerImg {
|
||||||
|
width: 100%;
|
||||||
|
}
|
@ -6,12 +6,14 @@ import { ProfilePage } from '../pages/profile'
|
|||||||
import { hexToNpub } from '../utils'
|
import { hexToNpub } from '../utils'
|
||||||
import { SignPage } from '../pages/sign'
|
import { SignPage } from '../pages/sign'
|
||||||
import { VerifyPage } from '../pages/verify'
|
import { VerifyPage } from '../pages/verify'
|
||||||
|
import { ProfileSettingsPage } from '../pages/settings/profile'
|
||||||
|
|
||||||
export const appPrivateRoutes = {
|
export const appPrivateRoutes = {
|
||||||
homePage: '/',
|
homePage: '/',
|
||||||
create: '/create',
|
create: '/create',
|
||||||
sign: '/sign',
|
sign: '/sign',
|
||||||
verify: '/verify'
|
verify: '/verify',
|
||||||
|
profileSettings: '/settings/profile/:npub'
|
||||||
}
|
}
|
||||||
|
|
||||||
export const appPublicRoutes = {
|
export const appPublicRoutes = {
|
||||||
@ -24,6 +26,9 @@ export const appPublicRoutes = {
|
|||||||
export const getProfileRoute = (hexKey: string) =>
|
export const getProfileRoute = (hexKey: string) =>
|
||||||
appPublicRoutes.profile.replace(':npub', hexToNpub(hexKey))
|
appPublicRoutes.profile.replace(':npub', hexToNpub(hexKey))
|
||||||
|
|
||||||
|
export const getProfileSettingsRoute = (hexKey: string) =>
|
||||||
|
appPrivateRoutes.profileSettings.replace(':npub', hexToNpub(hexKey))
|
||||||
|
|
||||||
export const publicRoutes = [
|
export const publicRoutes = [
|
||||||
{
|
{
|
||||||
path: appPublicRoutes.landingPage,
|
path: appPublicRoutes.landingPage,
|
||||||
@ -57,5 +62,9 @@ export const privateRoutes = [
|
|||||||
{
|
{
|
||||||
path: appPrivateRoutes.verify,
|
path: appPrivateRoutes.verify,
|
||||||
element: <VerifyPage />
|
element: <VerifyPage />
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: appPrivateRoutes.profileSettings,
|
||||||
|
element: <ProfileSettingsPage />
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
@ -2,6 +2,7 @@ export interface ProfileMetadata {
|
|||||||
name?: string
|
name?: string
|
||||||
display_name?: string
|
display_name?: string
|
||||||
picture?: string
|
picture?: string
|
||||||
|
banner?: string
|
||||||
about?: string
|
about?: string
|
||||||
website?: string
|
website?: string
|
||||||
nip05?: string
|
nip05?: string
|
||||||
|
@ -1,3 +1,10 @@
|
|||||||
|
/**
|
||||||
|
* Function will replace the middle of the string with 3 dots if length greater then
|
||||||
|
* offset value
|
||||||
|
* @param str string to shorten
|
||||||
|
* @param offset of how many chars to keep in the beginning and the end
|
||||||
|
* eg. 3 will keep first 3 chars and last 3 chars between the dots
|
||||||
|
*/
|
||||||
export const shorten = (str: string, offset = 9) => {
|
export const shorten = (str: string, offset = 9) => {
|
||||||
// return original string if it is not long enough
|
// return original string if it is not long enough
|
||||||
if (str.length < offset * 2 + 4) return str
|
if (str.length < offset * 2 + 4) return str
|
||||||
|
Loading…
Reference in New Issue
Block a user