src/pages/profile/index.tsx

@@ -19,8 +19,8 @@ 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 EditIcon from '@mui/icons-material/Edit'
-import LinkIcon from '@mui/icons-material/Link';
+import LinkIcon from '@mui/icons-material/Link'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 
 export const ProfilePage = () => {
@@ -112,7 +112,11 @@ export const ProfilePage = () => {
    * @param sx props (MUI) to customize style
    * @returns HTML rendered text
    */
-  const textElementWithCopyIcon = (text: string, sx?: SxProps<Theme>, shortenOffset?: number) => {
+  const textElementWithCopyIcon = (
+    text: string,
+    sx?: SxProps<Theme>,
+    shortenOffset?: number
+  ) => {
     const onClick = () => {
       navigator.clipboard.writeText(text)
 
@@ -153,8 +157,14 @@ export const ProfilePage = () => {
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       {pubkey && (
         <Box className={styles.container}>
-          <Box className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}>
+          <Box
-            {profileMetadata && profileMetadata.banner ? <img src={profileMetadata.banner}/> : ''}
+            className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
+          >
+            {profileMetadata && profileMetadata.banner ? (
+              <img src={profileMetadata.banner} />
+            ) : (
+              ''
+            )}
           </Box>
 
           <Box className={styles.belowBanner}>
@@ -180,13 +190,18 @@ export const ProfilePage = () => {
                   to={`https://njump.me/${nostrJoiningBlock?.encodedEventPointer || ''}`}
                   target="_blank"
                   sx={{ color: '#7b7b7b', marginTop: '15px', display: 'block' }}
-                  variant='caption'>
+                  variant="caption"
-                    {nostrJoiningBlock ? `On nostr since ${nostrJoiningBlock.block.toLocaleString()}` : 'On nostr since: unknown'}
+                >
+                  {nostrJoiningBlock
+                    ? `On nostr since ${nostrJoiningBlock.block.toLocaleString()}`
+                    : 'On nostr since: unknown'}
                 </Typography>
               </Box>
               <Box className={styles.right}>
                 {isUsersOwnProfile && (
-                  <IconButton onClick={() => navigate(getProfileSettingsRoute(pubkey))}>
+                  <IconButton
+                    onClick={() => navigate(getProfileSettingsRoute(pubkey))}
+                  >
                     <EditIcon />
                   </IconButton>
                 )}
@@ -199,8 +214,12 @@ export const ProfilePage = () => {
                     display: 'flex'
                   }}
                 >
-                      {profileMetadata &&
+                  {profileMetadata && (
-                        <Typography sx={{ marginRight: 1 }} variant="h6" className={styles.bold}>
+                    <Typography
+                      sx={{ marginRight: 1 }}
+                      variant="h6"
+                      className={styles.bold}
+                    >
                       {truncate(
                         profileMetadata.display_name ||
                           profileMetadata.name ||
@@ -209,25 +228,44 @@ export const ProfilePage = () => {
                           length: 16
                         }
                       )}
-                        </Typography>}
+                    </Typography>
+                  )}
                 </Box>
                 <Box>
-                      {textElementWithCopyIcon(hexToNpub(pubkey) || '', { color: '#5e5e5e' }, 5)}
+                  {textElementWithCopyIcon(
+                    hexToNpub(pubkey) || '',
+                    { color: '#5e5e5e' },
+                    5
+                  )}
                 </Box>
                 <Box>
                   {profileMetadata?.nip05 &&
-                        textElementWithCopyIcon(profileMetadata.nip05, { color: '#5e5e5e' })}
+                    textElementWithCopyIcon(profileMetadata.nip05, {
+                      color: '#5e5e5e'
+                    })}
                 </Box>
                 <Box>
                   {profileMetadata?.lud16 &&
-                        textElementWithCopyIcon(profileMetadata.lud16, { color: '#5e5e5e' })}
+                    textElementWithCopyIcon(profileMetadata.lud16, {
+                      color: '#5e5e5e'
+                    })}
                 </Box>
               </Box>
 
               <Box>
                 {profileMetadata?.website && (
-                      <Typography sx={{ marginTop: '10px' }} variant='caption' className={`${styles.website} ${styles.captionWrapper}`}>
+                  <Typography
-                        <Typography variant="caption" sx={{color: '#5e5e5e'}} className={styles.npubNipItem}>{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>
                 )}

src/pages/settings/profile/index.tsx

@@ -297,7 +297,9 @@ export const ProfileSettingsPage = () => {
                     src={profileMetadata.banner}
                     alt="Banner Image"
                   />
-                ): <Box className={styles.noBanner}> No banner found </Box>}
+                ) : (
+                  <Box className={styles.noBanner}> No banner found </Box>
+                )}
               </ListItem>
 
               {editItem('banner', 'Banner URL', undefined, undefined)}