src/pages/profile/index.tsx

@@ -1,50 +1,43 @@
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import {
+  Box,
   IconButton,
-  InputProps,
+  SxProps,
-  List,
-  ListItem,
-  ListSubheader,
-  TextField,
-  Tooltip,
   Typography,
-  useTheme
+  useTheme,
+  Theme
 } 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 { 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 { getRoboHashPicture, 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 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 } = useSelector((state: State) => state.auth)
-  const { usersPubkey, loginMethod } = 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 = (
+  const textElementWithCopyIcon = (text: string) => {
-    key: keyof ProfileMetadata,
+    const onClick = () => {
-    label: string,
+      navigator.clipboard.writeText(text)
-    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">
+      <Typography variant="caption" className={styles.npubNipItem}>
-        <IconButton onClick={generateRobotAvatar}>
+        <span onClick={onClick}>{shorten(text)}</span>
-          <SmartToy />
+        <ContentCopyIcon onClick={onClick} className={styles.copyIcon} />
-        </IconButton>
+      </Typography>
-      </Tooltip>
     )
   }
 
+  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}>
+      {pubkey && (
-        <List
+        <Box className={styles.container}>
-          sx={{
+          <Box className={styles.upper}>
-            bgcolor: 'background.paper',
+            <Box className={styles.left}>
-            marginTop: 2
+              <div
-          }}
+                style={{
-          subheader={
+                  borderWidth: '2px',
-            <ListSubheader
+                  borderStyle: pubkey ? 'solid' : 'none',
-              sx={{
+                  borderColor: `#${pubkey?.substring(0, 6)}`
-                paddingBottom: 1,
-                paddingTop: 1,
-                fontSize: '1.5rem'
-              }}
-              className={styles.subHeader}
-            >
-              Profile Settings
-            </ListSubheader>
-          }
-        >
-          {profileMetadata && (
-            <div>
-              <ListItem
-                sx={{
-                  marginTop: 1,
-                  display: 'flex',
-                  flexDirection: 'column'
                 }}
+                className={styles.imageWrapper}
               >
                 <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>
+            </Box>
+            <Box>
+              <Box className={styles.head}>
+                <Box className={styles.npubNip}>
+                  <Box
+                    sx={{
+                      display: 'flex'
+                    }}
+                  >
+                    {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>
 
+                <Box>
+                  {profileMetadata?.website && (
+                    <Typography sx={{ marginTop: '10px' }} variant='caption' className={`${styles.website} ${styles.captionWrapper}`}>
+                      <LinkIcon className={styles.captionIcon}/>
+                      {profileMetadata.website}
+                    </Typography>
+                  )}
+                </Box>
+
+                <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>
                   )}
-              </ListItem>
+                </Box>
-
+              </Box>
-              {editItem('picture', 'Picture URL', undefined, undefined, {
+            </Box>
-                endAdornment: isUsersOwnProfile ? robohashButton() : undefined
+            <Box className={styles.right}>
-              })}
-
-              {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 && (
-                <>
+                <IconButton onClick={() => navigate(getProfileSettingsRoute(pubkey))}>
-                  {usersPubkey &&
+                  <EditIcon/>
-                    copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
+                </IconButton>
-                  {loginMethod === LoginMethods.privateKey &&
-                    keys &&
-                    keys.private &&
-                    copyItem(
-                      '••••••••••••••••••••••••••••••••••••••••••••••••••',
-                      'Private Key',
-                      keys.private
               )}
-                </>
+            </Box>
+          </Box>
+          <Box>
+            {profileMetadata?.about && (
+              <Typography mt={1} className={styles.about}>
+                {profileMetadata.about}
+              </Typography>
             )}
-            </div>
+          </Box>
+        </Box>
       )}
-        </List>
-        {isUsersOwnProfile && (
-          <LoadingButton
-            loading={savingProfileMetadata}
-            variant="contained"
-            onClick={handleSaveMetadata}
-          >
-            SAVE
-          </LoadingButton>
-        )}
-      </div>
     </>
   )
 }

src/pages/profile/style.module.scss

@@ -1,23 +1,51 @@
-.container {
+.upper {
   display: flex;
-  flex-direction: column;
+  padding-top: 15px;
-  gap: 25px;
 }
 
-.textField {
+.container {
-  width: 100%;
+  color: black
 }
 
-.subHeader {
+.left {
-  border-bottom: 0.5px solid;
+  margin-right: 10px;
 }
 
-.img {
+.right {
-  max-height: 40%;
-  max-width: 40%;
-}
-
-.copyItem {
   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;
 }

src/pages/settings/profile/index.tsx

@@ -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>
+    </>
+  )
+}

src/pages/settings/profile/style.module.scss

@@ -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;
+}

src/routes/index.tsx

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