feat: added profile banner

src/index.css

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

src/pages/profile/index.tsx

@@ -16,12 +16,11 @@ import { NostrJoiningBlock, ProfileMetadata } from '../../types'
 import styles from './style.module.scss'
 import { useSelector } from 'react-redux'
 import { State } from '../../store/rootReducer'
-import { getRoboHashPicture, shorten } from '../../utils'
+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 RestoreIcon from '@mui/icons-material/Restore';
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 
 export const ProfilePage = () => {
@@ -107,7 +106,13 @@ export const ProfilePage = () => {
     }
   }, [isUsersOwnProfile, metadataState, pubkey, metadataController])
 
-  const textElementWithCopyIcon = (text: string) => {
+  /**
+   * 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)
 
@@ -118,19 +123,13 @@ export const ProfilePage = () => {
     }
 
     return (
-      <Typography variant="caption" className={styles.npubNipItem}>
+      <Typography variant="caption" sx={sx} className={styles.npubNipItem}>
-        <span onClick={onClick}>{shorten(text)}</span>
+        <span onClick={onClick}>{shorten(text, shortenOffset)}</span>
         <ContentCopyIcon onClick={onClick} className={styles.copyIcon} />
       </Typography>
     )
   }
 
-  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
@@ -154,97 +153,94 @@ export const ProfilePage = () => {
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       {pubkey && (
         <Box className={styles.container}>
-          <Box className={styles.upper}>
+          <Box className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}>
-            <Box className={styles.left}>
+            {profileMetadata && profileMetadata.banner ? <img src={profileMetadata.banner}/> : ''}
-              <div
+          </Box>
-                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>
-              <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>
+          <Box className={styles.belowBanner}>
-                  {profileMetadata?.website && (
+            <Box className={styles.upper}>
-                    <Typography sx={{ marginTop: '10px' }} variant='caption' className={`${styles.website} ${styles.captionWrapper}`}>
+              <Box className={styles.left}>
-                      <LinkIcon className={styles.captionIcon}/>
+                <div
-                      {profileMetadata.website}
+                  style={{
-                    </Typography>
+                    borderWidth: '2px',
-                  )}
+                    borderStyle: pubkey ? 'solid' : 'none',
-                </Box>
+                    borderColor: `#${pubkey?.substring(0, 6)}`
-
+                  }}
-                <Box>
+                  className={styles.imageWrapper}
-                  {nostrJoiningBlock && (
+                >
-                    <Typography
+                  <img
-                      variant='caption'
+                    className={styles['image-placeholder']}
-                      sx={{
+                    src={getProfileImage(profileMetadata!)}
-                        color: theme.palette.getContrastText(
+                  />
-                          theme.palette.background.paper
+                </div>
-                        )
+              </Box>
-                      }}
+              <Box className={styles.middle}>
-                      className={styles.captionWrapper}
+                <Typography 
-                      component={Link}
+                  component={Link}
-                      to={`https://njump.me/${nostrJoiningBlock.encodedEventPointer}`}
+                  to={`https://njump.me/${nostrJoiningBlock?.encodedEventPointer || ''}`}
-                      target="_blank"
+                  target="_blank" 
-                    >
+                  sx={{ color: '#7b7b7b', marginTop: '15px', display: 'block' }} 
-                      <RestoreIcon className={styles.captionIcon}/>
+                  variant='caption'>
-                      On nostr since {nostrJoiningBlock.block.toLocaleString()}
+                    {nostrJoiningBlock ? `On nostr since ${nostrJoiningBlock.block.toLocaleString()}` : 'On nostr since: unknown'}
-                    </Typography>
+                </Typography>
-                  )}
+              </Box>
-                </Box>
+              <Box className={styles.right}>
+                {isUsersOwnProfile && (
+                  <IconButton onClick={() => navigate(getProfileSettingsRoute(pubkey))}>
+                    <EditIcon/>
+                  </IconButton>
+                )}
               </Box>
             </Box>
-            <Box className={styles.right}>
+            <Box className={styles.head}>
-              {isUsersOwnProfile && (
+                  <Box className={styles.npubNip}>
-                <IconButton onClick={() => navigate(getProfileSettingsRoute(pubkey))}>
+                    <Box
-                  <EditIcon/>
+                      sx={{
-                </IconButton>
+                        display: 'flex'
+                      }}
+                    >
+                      {profileMetadata &&
+                        <Typography sx={{ marginRight: 1 }} variant="h6" className={styles.bold}>
+                          {truncate(
+                            profileMetadata.display_name ||
+                              profileMetadata.name ||
+                              hexToNpub(pubkey),
+                            {
+                              length: 16
+                            }
+                          )}
+                        </Typography>}
+                    </Box>
+                    <Box>
+                      {textElementWithCopyIcon(hexToNpub(pubkey) || '', { color: '#5e5e5e' }, 5)}
+                    </Box>
+                    <Box>
+                      {profileMetadata?.nip05 &&
+                        textElementWithCopyIcon(profileMetadata.nip05, { color: '#5e5e5e' })}
+                    </Box>
+                    <Box>
+                      {profileMetadata?.lud16 &&
+                        textElementWithCopyIcon(profileMetadata.lud16, { color: '#5e5e5e' })}
+                    </Box>
+                  </Box>
+
+                  <Box>
+                    {profileMetadata?.website && (
+                      <Typography sx={{ marginTop: '10px' }} variant='caption' className={`${styles.website} ${styles.captionWrapper}`}>
+                        <Typography variant="caption" sx={{color: '#5e5e5e'}} className={styles.npubNipItem}>{profileMetadata.website}</Typography>
+                        <LinkIcon className={styles.captionIcon}/>
+                      </Typography>
+                    )}
+                  </Box>
+                </Box>
+            <Box>
+              {profileMetadata?.about && (
+                <Typography mt={1} className={styles.about}>
+                  {profileMetadata.about}
+                </Typography>
               )}
             </Box>
           </Box>
-          <Box>
-            {profileMetadata?.about && (
-              <Typography mt={1} className={styles.about}>
-                {profileMetadata.about}
-              </Typography>
-            )}
-          </Box>
         </Box>
       )}
     </>

src/pages/profile/style.module.scss

@@ -1,6 +1,26 @@
-.upper {
+.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;
-  padding-top: 15px;
 }
 
 .container {
@@ -9,6 +29,11 @@
 
 .left {
   margin-right: 10px;
+  margin-top: -35px;
+}
+
+.middle {
+  flex: 1;
 }
 
 .right {
@@ -35,7 +60,6 @@
 }
 
 .website {
-  // margin-top: 10px !important;
   margin-bottom: 15px 0 !important;
 }
 
@@ -46,6 +70,6 @@
 
 .captionIcon {
   color: #15999b;
-  margin-right: 10px;
+  margin-left: 5px;
   font-size: 12px;
 }

src/pages/settings/profile/index.tsx

@@ -1,5 +1,6 @@
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import {
+  Box,
   IconButton,
   InputProps,
   List,
@@ -283,6 +284,24 @@ export const ProfileSettingsPage = () => {
         >
           {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,

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

@@ -21,3 +21,17 @@
   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/types/profile.ts

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

src/utils/string.ts

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