sigit/sigit.io
7
2
Fork 0
Code Issues 51 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

Merge pull request 'feat: added profile view' (#64) from issue-43 into main
Some checks failed
Release / build_and_release (push) Failing after 31s
Details

Browse Source 
Reviewed-on: https://git.sigit.io/sig/it/pulls/64
Reviewed-by: Y <yury@4gl.io>
This commit is contained in:
Y 2024-05-22 09:11:58 +00:00
commit bb28e47ff9
8 changed files with 677 additions and 245 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/index.css
View File

@ -71,7 +71,7 @@ button {
} }
.main { .main {
padding: 64px 0; padding: 60px 0;
} }
.hide-mobile { .hide-mobile {

381
src/pages/profile/index.tsx
View File

@ -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) => ({ toast.success('Copied to clipboard', {
...prev, autoClose: 1000,
[key]: value hideProgressBar: true
}))
}}
/>
</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 ( 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 >
}} {profileMetadata && profileMetadata.banner ? (
subheader={ <img src={profileMetadata.banner} />
<ListSubheader ) : (
sx={{ ''
paddingBottom: 1, )}
paddingTop: 1, </Box>
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 && ( <Box className={styles.belowBanner}>
<Typography <Box className={styles.upper}>
sx={{ <Box className={styles.left}>
color: theme.palette.getContrastText( <div
theme.palette.background.paper style={{
) borderWidth: '2px',
}} borderStyle: pubkey ? 'solid' : 'none',
component={Link} borderColor: `#${pubkey?.substring(0, 6)}`
to={`https://njump.me/${nostrJoiningBlock.encodedEventPointer}`} }}
target="_blank" className={styles.imageWrapper}
>
<img
className={styles['image-placeholder']}
src={getProfileImage(profileMetadata!)}
/>
</div>
</Box>
<Box className={styles.middle}>
<Typography
component={Link}
to={`https://njump.me/${nostrJoiningBlock?.encodedEventPointer || ''}`}
target="_blank"
className={`${styles.nostrSince} ${styles.link}`}
variant="caption"
>
{nostrJoiningBlock
? `On nostr since ${nostrJoiningBlock.block.toLocaleString()}`
: 'On nostr since: unknown'}
</Typography>
</Box>
<Box className={styles.right}>
{isUsersOwnProfile && (
<IconButton
onClick={() => navigate(getProfileSettingsRoute(pubkey))}
> >
On nostr since {nostrJoiningBlock.block.toLocaleString()} <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>
)}
</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>
<Box>
{profileMetadata?.website && (
<Typography
sx={{ marginTop: '10px' }}
variant="caption"
component={Link}
to={profileMetadata.website}
target="_blank"
className={`${styles.website} ${styles.link} ${styles.captionWrapper}`}
>
{profileMetadata.website}
</Typography> </Typography>
)} )}
</ListItem> </Box>
</Box>
{editItem('picture', 'Picture URL', undefined, undefined, { <Box>
endAdornment: isUsersOwnProfile ? robohashButton() : undefined {profileMetadata?.about && (
})} <Typography mt={1} className={styles.about}>
{profileMetadata.about}
{editItem('name', 'Username')} </Typography>
{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> </Box>
)} </Box>
</List> </Box>
{isUsersOwnProfile && ( )}
<LoadingButton
loading={savingProfileMetadata}
variant="contained"
onClick={handleSaveMetadata}
>
SAVE
</LoadingButton>
)}
</div>
</> </>
) )
} }

105
src/pages/profile/style.module.scss
View File

@ -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
View 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
View 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%;
}

11
src/routes/index.tsx
View File

@ -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 />
} }
] ]

1
src/types/profile.ts
View File

@ -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

7
src/utils/string.ts
View File

@ -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