All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 46s
387 lines
11 KiB
TypeScript
387 lines
11 KiB
TypeScript
import React, { useEffect, useRef, useState } from 'react'
|
|
import { useParams } from 'react-router-dom'
|
|
import { toast } from 'react-toastify'
|
|
|
|
import { SmartToy } from '@mui/icons-material'
|
|
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
|
import LaunchIcon from '@mui/icons-material/Launch'
|
|
import { LoadingButton } from '@mui/lab'
|
|
import {
|
|
Box,
|
|
IconButton,
|
|
InputProps,
|
|
List,
|
|
ListItem,
|
|
ListSubheader,
|
|
TextField,
|
|
Tooltip
|
|
} from '@mui/material'
|
|
|
|
import { NDKEvent, NDKUserProfile, serializeProfile } from '@nostr-dev-kit/ndk'
|
|
import { launch as launchNostrLoginDialog } from 'nostr-login'
|
|
import { kinds, nip19, UnsignedEvent } from 'nostr-tools'
|
|
|
|
import { NostrController } from '../../../controllers'
|
|
|
|
import { useNDKContext } from '../../../hooks'
|
|
import { useAppDispatch, useAppSelector } from '../../../hooks/store'
|
|
|
|
import { getRoboHashPicture, unixNow } from '../../../utils'
|
|
|
|
import { Container } from '../../../components/Container'
|
|
import { Footer } from '../../../components/Footer/Footer'
|
|
import { LoadingSpinner } from '../../../components/LoadingSpinner'
|
|
|
|
import { setUserProfile as updateUserProfile } from '../../../store/actions'
|
|
import { LoginMethod, NostrLoginAuthMethod } from '../../../store/auth/types'
|
|
import { Dispatch } from '../../../store/store'
|
|
|
|
import styles from './style.module.scss'
|
|
|
|
export const ProfileSettingsPage = () => {
|
|
const dispatch: Dispatch = useAppDispatch()
|
|
|
|
const { npub } = useParams()
|
|
const { ndk, findMetadata, publish } = useNDKContext()
|
|
|
|
const [pubkey, setPubkey] = useState<string>()
|
|
const [userProfile, setUserProfile] = useState<NDKUserProfile | null>(null)
|
|
|
|
const userRobotImage = useAppSelector((state) => state.user.robotImage)
|
|
const currentUserProfile = useAppSelector((state) => state.user.profile)
|
|
const keys = useAppSelector((state) => state.auth?.keyPair)
|
|
const { usersPubkey, loginMethod, nostrLoginAuthMethod } = useAppSelector(
|
|
(state) => state.auth
|
|
)
|
|
|
|
const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
|
|
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 (isUsersOwnProfile && currentUserProfile) {
|
|
setUserProfile(currentUserProfile)
|
|
|
|
setIsLoading(false)
|
|
|
|
return
|
|
}
|
|
|
|
if (pubkey) {
|
|
findMetadata(pubkey)
|
|
.then((profile) => {
|
|
setUserProfile(profile)
|
|
})
|
|
.catch((err) => {
|
|
toast.error(err)
|
|
})
|
|
.finally(() => {
|
|
setIsLoading(false)
|
|
})
|
|
}
|
|
}, [ndk, isUsersOwnProfile, currentUserProfile, pubkey, findMetadata])
|
|
|
|
const editItem = (
|
|
key: keyof NDKUserProfile,
|
|
label: string,
|
|
multiline = false,
|
|
rows = 1,
|
|
inputProps?: InputProps
|
|
) => (
|
|
<ListItem sx={{ marginTop: 1 }}>
|
|
<TextField
|
|
label={label}
|
|
id={label.split(' ').join('-')}
|
|
value={userProfile![key] || ''}
|
|
size="small"
|
|
multiline={multiline}
|
|
rows={rows}
|
|
className={styles.textField}
|
|
disabled={!isUsersOwnProfile}
|
|
InputProps={inputProps}
|
|
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const { value } = event.target
|
|
|
|
setUserProfile((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 () => {
|
|
if (!userProfile) return
|
|
|
|
setSavingProfileMetadata(true)
|
|
|
|
const serializedProfile = serializeProfile(userProfile)
|
|
|
|
const unsignedEvent: UnsignedEvent = {
|
|
content: serializedProfile,
|
|
created_at: unixNow(),
|
|
kind: kinds.Metadata,
|
|
pubkey: pubkey!,
|
|
tags: []
|
|
}
|
|
|
|
const nostrController = NostrController.getInstance()
|
|
const signedEvent = await nostrController
|
|
.signEvent(unsignedEvent)
|
|
.catch((error) => {
|
|
toast.error(`Error saving profile metadata. ${error}`)
|
|
return null
|
|
})
|
|
|
|
if (!signedEvent) {
|
|
setSavingProfileMetadata(false)
|
|
return
|
|
}
|
|
|
|
const ndkEvent = new NDKEvent(ndk, signedEvent)
|
|
const publishedOnRelays = await publish(ndkEvent)
|
|
|
|
// Handle cases where publishing failed or succeeded
|
|
if (publishedOnRelays.length === 0) {
|
|
toast.error('Failed to publish event on any relay')
|
|
} else {
|
|
toast.success(
|
|
`Event published successfully to the following relays\n\n${publishedOnRelays.join(
|
|
'\n'
|
|
)}`
|
|
)
|
|
|
|
dispatch(updateUserProfile(userProfile))
|
|
}
|
|
|
|
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)
|
|
|
|
setUserProfile((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 = (profile: NDKUserProfile) => {
|
|
if (!isUsersOwnProfile) {
|
|
return profile.image || getRoboHashPicture(npub!)
|
|
}
|
|
|
|
// userRobotImage is used only when visiting own profile
|
|
// while kind 0 picture is not set
|
|
return profile.image || userRobotImage || getRoboHashPicture(npub!)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
|
<Container className={styles.container}>
|
|
<List
|
|
sx={{
|
|
bgcolor: 'background.paper',
|
|
marginTop: 2
|
|
}}
|
|
subheader={
|
|
<ListSubheader
|
|
sx={{
|
|
paddingBottom: 1,
|
|
paddingTop: 1,
|
|
fontSize: '1.5rem',
|
|
zIndex: 2
|
|
}}
|
|
className={styles.subHeader}
|
|
>
|
|
Profile Settings
|
|
</ListSubheader>
|
|
}
|
|
>
|
|
{userProfile && (
|
|
<div>
|
|
<ListItem
|
|
sx={{
|
|
marginTop: 1,
|
|
display: 'flex',
|
|
flexDirection: 'column'
|
|
}}
|
|
>
|
|
{userProfile.banner ? (
|
|
<img
|
|
className={styles.bannerImg}
|
|
src={userProfile.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: React.SyntheticEvent<HTMLImageElement>) => {
|
|
event.currentTarget.src = getRoboHashPicture(npub!)
|
|
}}
|
|
className={styles.img}
|
|
src={getProfileImage(userProfile)}
|
|
alt="Profile Image"
|
|
/>
|
|
</ListItem>
|
|
|
|
{editItem('image', 'Picture URL', undefined, undefined, {
|
|
endAdornment: isUsersOwnProfile ? robohashButton() : undefined
|
|
})}
|
|
|
|
{editItem('name', 'Username')}
|
|
{editItem('displayName', '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 === LoginMethod.privateKey &&
|
|
keys &&
|
|
keys.private &&
|
|
copyItem(
|
|
'••••••••••••••••••••••••••••••••••••••••••••••••••',
|
|
'Private Key',
|
|
keys.private
|
|
)}
|
|
</>
|
|
)}
|
|
{isUsersOwnProfile && (
|
|
<>
|
|
{loginMethod === LoginMethod.nostrLogin &&
|
|
nostrLoginAuthMethod === NostrLoginAuthMethod.Local && (
|
|
<ListItem
|
|
sx={{ marginTop: 1 }}
|
|
onClick={() => {
|
|
launchNostrLoginDialog('import')
|
|
}}
|
|
>
|
|
<TextField
|
|
label="Private Key (nostr-login)"
|
|
defaultValue="••••••••••••••••••••••••••••••••••••••••••••••••••"
|
|
size="small"
|
|
className={styles.textField}
|
|
disabled
|
|
type={'password'}
|
|
InputProps={{
|
|
endAdornment: (
|
|
<LaunchIcon className={styles.copyItem} />
|
|
)
|
|
}}
|
|
/>
|
|
</ListItem>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
)}
|
|
</List>
|
|
{isUsersOwnProfile && (
|
|
<LoadingButton
|
|
loading={savingProfileMetadata}
|
|
variant="contained"
|
|
onClick={handleSaveMetadata}
|
|
>
|
|
SAVE
|
|
</LoadingButton>
|
|
)}
|
|
</Container>
|
|
<Footer />
|
|
</>
|
|
)
|
|
}
|