src/index.css

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

src/pages/profile/index.tsx

@@ -1,42 +1,50 @@
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import {
-  Box,
   IconButton,
-  SxProps,
+  InputProps,
+  List,
+  ListItem,
+  ListSubheader,
+  TextField,
+  Tooltip,
   Typography,
-  useTheme,
-  Theme
+  useTheme
 } from '@mui/material'
-import { nip19, VerifiedEvent } from 'nostr-tools'
-import { useEffect, useMemo, useState } from 'react'
-import { Link, useNavigate, useParams } from 'react-router-dom'
+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 } from '../../controllers'
+import { MetadataController, NostrController } from '../../controllers'
 import { NostrJoiningBlock, ProfileMetadata } from '../../types'
 import styles from './style.module.scss'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 import { State } from '../../store/rootReducer'
-import { getRoboHashPicture, hexToNpub, shorten } from '../../utils'
-import { truncate } from 'lodash'
-import { getProfileSettingsRoute } from '../../routes'
-import EditIcon from '@mui/icons-material/Edit'
-import LinkIcon from '@mui/icons-material/Link'
+import { 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 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 { usersPubkey } = useSelector((state: State) => state.auth)
+  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)
@@ -44,6 +52,8 @@ export const ProfilePage = () => {
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc] = useState('Fetching metadata')
 
+  const robotSet = useRef(1)
+
   useEffect(() => {
     if (npub) {
       try {
@@ -106,31 +116,130 @@ export const ProfilePage = () => {
     }
   }, [isUsersOwnProfile, metadataState, pubkey, metadataController])
 
-  /**
-   * Rendering text with button which copies the provided text
-   * @param text to be visible
-   * @param sx props (MUI) to customize style
-   * @returns HTML rendered text
-   */
-  const textElementWithCopyIcon = (
-    text: string,
-    sx?: SxProps<Theme>,
-    shortenOffset?: number
-  ) => {
-    const onClick = () => {
-      navigator.clipboard.writeText(text)
+  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 (
-      <Typography variant="caption" sx={sx} className={styles.npubNipItem}>
-        <span onClick={onClick}>{shorten(text, shortenOffset)}</span>
-        <ContentCopyIcon onClick={onClick} className={styles.copyIcon} />
-      </Typography>
+      <Tooltip title="Generate a robohash avatar">
+        <IconButton onClick={generateRobotAvatar}>
+          <SmartToy />
+        </IconButton>
+      </Tooltip>
     )
   }
 
@@ -141,8 +250,6 @@ export const ProfilePage = () => {
    * @returns robohash image url
    */
   const getProfileImage = (metadata: ProfileMetadata) => {
-    if (!metadata) return ''
-
     if (!isUsersOwnProfile) {
       return metadata.picture || getRoboHashPicture(npub!)
     }
@@ -155,124 +262,96 @@ export const ProfilePage = () => {
   return (
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
-      {pubkey && (
-        <Box className={styles.container}>
-          <Box
-            className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
-          >
-            {profileMetadata && profileMetadata.banner ? (
-              <img src={profileMetadata.banner} />
-            ) : (
-              ''
-            )}
-          </Box>
-
-          <Box className={styles.belowBanner}>
-            <Box className={styles.upper}>
-              <Box className={styles.left}>
-                <div
-                  style={{
-                    borderWidth: '2px',
-                    borderStyle: pubkey ? 'solid' : 'none',
-                    borderColor: `#${pubkey?.substring(0, 6)}`
-                  }}
-                  className={styles.imageWrapper}
-                >
-                  <img
-                    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))}
-                  >
-                    <EditIcon />
-                  </IconButton>
-                )}
-              </Box>
-            </Box>
-            <Box className={styles.head}>
-              <Box sx={{lineHeight: 1}} className={styles.npubNip}>
-                <Box
+      <div className={styles.container}>
+        <List
           sx={{
-                    display: 'flex'
+            bgcolor: 'background.paper',
+            marginTop: 2
           }}
+          subheader={
+            <ListSubheader
+              sx={{
+                paddingBottom: 1,
+                paddingTop: 1,
+                fontSize: '1.5rem'
+              }}
+              className={styles.subHeader}
+            >
+              Profile Settings
+            </ListSubheader>
+          }
         >
           {profileMetadata && (
-                    <Typography
-                      sx={{ margin: '5px 0 5px 0'}}
-                      variant="h6"
-                      className={styles.bold}
+            <div>
+              <ListItem
+                sx={{
+                  marginTop: 1,
+                  display: 'flex',
+                  flexDirection: 'column'
+                }}
               >
-                      {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>
+                <img
+                  onError={(event: any) => {
+                    event.target.src = getRoboHashPicture(npub!)
+                  }}
+                  className={styles.img}
+                  src={getProfileImage(profileMetadata)}
+                  alt="Profile Image"
+                />
 
-              <Box>
-                {profileMetadata?.website && (
+                {nostrJoiningBlock && (
                   <Typography
-                    sx={{ marginTop: '10px' }}
-                    variant="caption"
+                    sx={{
+                      color: theme.palette.getContrastText(
+                        theme.palette.background.paper
+                      )
+                    }}
                     component={Link}
-                    to={profileMetadata.website}
+                    to={`https://njump.me/${nostrJoiningBlock.encodedEventPointer}`}
                     target="_blank"
-                    className={`${styles.website} ${styles.link} ${styles.captionWrapper}`}
                   >
-                    {profileMetadata.website}
+                    On nostr since {nostrJoiningBlock.block.toLocaleString()}
                   </Typography>
                 )}
-              </Box>
-            </Box>
-            <Box>
-              {profileMetadata?.about && (
-                <Typography mt={1} className={styles.about}>
-                  {profileMetadata.about}
-                </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
                     )}
-            </Box>
-          </Box>
-        </Box>
+                </>
               )}
+            </div>
+          )}
+        </List>
+        {isUsersOwnProfile && (
+          <LoadingButton
+            loading={savingProfileMetadata}
+            variant="contained"
+            onClick={handleSaveMetadata}
+          >
+            SAVE
+          </LoadingButton>
+        )}
+      </div>
     </>
   )
 }

src/pages/profile/style.module.scss

@@ -1,102 +1,23 @@
-.banner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  min-height: 210px;
-
-  img {
-    width: 100%;
-  }
-
-  &.noImage {
-    background-color: rgb(219, 219, 219);
-  }
-}
-
-.belowBanner {
-  padding: 0 15px;
-}
-
-.upper {
-  width: 100%;
-  display: flex;
-}
-
 .container {
-  color: black
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
 }
 
-.left {
-  margin-right: 10px;
-  margin-top: -35px;
+.textField {
+  width: 100%;
 }
 
-.middle {
-  flex: 1;
+.subHeader {
+  border-bottom: 0.5px solid;
 }
 
-.right {
+.img {
+  max-height: 40%;
+  max-width: 40%;
+}
+
+.copyItem {
   margin-left: 10px;
-}
-
-.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;
-  }
+  color: #34495e;
 }

src/pages/settings/profile/index.tsx

@@ -1,378 +0,0 @@
-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>
-    </>
-  )
-}

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

@@ -1,37 +0,0 @@
-.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%;
-}

src/routes/index.tsx

@@ -6,14 +6,12 @@ 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',
-  profileSettings: '/settings/profile/:npub'
+  verify: '/verify'
 }
 
 export const appPublicRoutes = {
@@ -26,9 +24,6 @@ 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,
@@ -62,9 +57,5 @@ export const privateRoutes = [
   {
     path: appPrivateRoutes.verify,
     element: <VerifyPage />
-  },
-  {
-    path: appPrivateRoutes.profileSettings,
-    element: <ProfileSettingsPage />
   }
 ]

src/types/profile.ts

@@ -2,7 +2,6 @@ export interface ProfileMetadata {
   name?: string
   display_name?: string
   picture?: string
-  banner?: string
   about?: string
   website?: string
   nip05?: string

src/utils/string.ts

@@ -1,10 +1,3 @@
-/**
- * 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) => {
   // return original string if it is not long enough
   if (str.length < offset * 2 + 4) return str