chore(refactor): use NDKContext in profile page

src/contexts/NDKContext.tsx

@@ -198,7 +198,9 @@ export const NDKContextProvider = ({ children }: { children: ReactNode }) => {
     const user = new NDKUser({ npub })
     user.ndk = ndk
 
-    return await user.fetchProfile()
+    return await user.fetchProfile({
+      cacheUsage: NDKSubscriptionCacheUsage.PARALLEL
+    })
   }
 
   const publish = async (

src/pages/profile/index.tsx

@@ -1,48 +1,49 @@
+import { useEffect, useState } from 'react'
+import { Link, useNavigate, useParams } from 'react-router-dom'
+import { toast } from 'react-toastify'
+
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import EditIcon from '@mui/icons-material/Edit'
 import { Box, IconButton, SxProps, Theme, Typography } from '@mui/material'
-import { Event, VerifiedEvent, kinds, nip19 } from 'nostr-tools'
+
-import { useEffect, useMemo, useState } from 'react'
+import { nip19 } from 'nostr-tools'
-import { useAppSelector } from '../../hooks/store'
+
-import { Link, useNavigate, useParams } from 'react-router-dom'
+import { Container } from '../../components/Container'
-import { toast } from 'react-toastify'
+import { Footer } from '../../components/Footer/Footer'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
-import { MetadataController } from '../../controllers'
+import { useAppSelector } from '../../hooks/store'
+
 import { getProfileSettingsRoute } from '../../routes'
-import { NostrJoiningBlock, ProfileMetadata } from '../../types'
+
 import {
-  getNostrJoiningBlockNumber,
   getProfileUsername,
   getRoboHashPicture,
   hexToNpub,
   shorten
 } from '../../utils'
+
+import { NDKEvent, NDKUserProfile, profileFromEvent } from '@nostr-dev-kit/ndk'
+import { useNDKContext } from '../../hooks'
 import styles from './style.module.scss'
-import { Container } from '../../components/Container'
-import { Footer } from '../../components/Footer/Footer'
 
 export const ProfilePage = () => {
   const navigate = useNavigate()
 
   const { npub } = useParams()
-
+  const { ndk, findMetadata } = useNDKContext()
-  const metadataController = useMemo(() => MetadataController.getInstance(), [])
 
   const [pubkey, setPubkey] = useState<string>()
-  const [nostrJoiningBlock, setNostrJoiningBlock] =
+  const [userProfile, setUserProfile] = useState<NDKUserProfile | null>(null)
-    useState<NostrJoiningBlock | null>(null)
+
-  const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
+  const userRobotImage = useAppSelector((state) => state.userRobotImage)
   const metadataState = useAppSelector((state) => state.metadata)
   const { usersPubkey } = useAppSelector((state) => state.auth)
-  const userRobotImage = useAppSelector((state) => state.userRobotImage)
 
   const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
 
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc] = useState('Fetching metadata')
 
-  const profileName = pubkey && getProfileUsername(pubkey, profileMetadata)
-
   useEffect(() => {
     if (npub) {
       try {
@@ -57,60 +58,30 @@ export const ProfilePage = () => {
   }, [npub, usersPubkey])
 
   useEffect(() => {
-    if (pubkey) {
-      getNostrJoiningBlockNumber(pubkey)
-        .then((res) => {
-          setNostrJoiningBlock(res)
-        })
-        .catch((err) => {
-          // todo: handle error
-          console.log('err :>> ', err)
-        })
-    }
-
     if (isUsersOwnProfile && metadataState) {
-      const metadataContent = metadataController.extractProfileMetadataContent(
+      const ndkEvent = new NDKEvent(ndk, metadataState)
-        metadataState as VerifiedEvent
+      const profile = profileFromEvent(ndkEvent)
-      )
+
-      if (metadataContent) {
+      setUserProfile(profile)
-        setProfileMetadata(metadataContent)
+
-        setIsLoading(false)
+      setIsLoading(false)
-      }
 
       return
     }
 
     if (pubkey) {
-      const getMetadata = async (pubkey: string) => {
+      findMetadata(pubkey)
-        const handleMetadataEvent = (event: Event) => {
+        .then((profile) => {
-          const metadataContent =
+          setUserProfile(profile)
-            metadataController.extractProfileMetadataContent(event)
+        })
-          if (metadataContent) {
+        .catch((err) => {
-            setProfileMetadata(metadataContent)
+          toast.error(err)
-          }
+        })
-        }
+        .finally(() => {
-
+          setIsLoading(false)
-        metadataController.on(pubkey, (kind: number, event: Event) => {
-          if (kind === kinds.Metadata) {
-            handleMetadataEvent(event)
-          }
         })
-
-        const metadataEvent = await metadataController
-          .findMetadata(pubkey)
-          .catch((err) => {
-            toast.error(err)
-            return null
-          })
-
-        if (metadataEvent) handleMetadataEvent(metadataEvent)
-
-        setIsLoading(false)
-      }
-
-      getMetadata(pubkey)
     }
-  }, [isUsersOwnProfile, metadataState, pubkey, metadataController])
+  }, [ndk, isUsersOwnProfile, metadataState, pubkey, findMetadata])
 
   /**
    * Rendering text with button which copies the provided text
@@ -146,29 +117,32 @@ export const ProfilePage = () => {
    *
    * @returns robohash image url
    */
-  const getProfileImage = (metadata: ProfileMetadata) => {
+  const getProfileImage = (profile: NDKUserProfile | null) => {
-    if (!metadata) return ''
+    if (!profile) return getRoboHashPicture(npub)
 
     if (!isUsersOwnProfile) {
-      return metadata.picture || getRoboHashPicture(npub!)
+      return profile.image || getRoboHashPicture(npub!)
     }
 
     // userRobotImage is used only when visiting own profile
     // while kind 0 picture is not set
-    return metadata.picture || userRobotImage || getRoboHashPicture(npub!)
+    return profile.image || userRobotImage || getRoboHashPicture(npub!)
   }
 
+  const profileName =
+    pubkey && getProfileUsername(pubkey, userProfile || undefined)
+
   return (
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       {pubkey && (
         <Container className={styles.container}>
           <Box
-            className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
+            className={`${styles.banner} ${!userProfile || !userProfile.banner ? styles.noImage : ''}`}
           >
-            {profileMetadata && profileMetadata.banner ? (
+            {userProfile && userProfile.banner ? (
               <img
-                src={profileMetadata.banner}
+                src={userProfile.banner}
                 alt={`banner image for ${profileName}`}
               />
             ) : (
@@ -189,24 +163,12 @@ export const ProfilePage = () => {
                 >
                   <img
                     className={styles['image-placeholder']}
-                    src={getProfileImage(profileMetadata!)}
+                    src={getProfileImage(userProfile)}
                     alt={profileName}
                   />
                 </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
@@ -224,15 +186,13 @@ export const ProfilePage = () => {
                     display: 'flex'
                   }}
                 >
-                  {profileMetadata && (
+                  <Typography
-                    <Typography
+                    sx={{ margin: '5px 0 5px 0' }}
-                      sx={{ margin: '5px 0 5px 0' }}
+                    variant="h6"
-                      variant="h6"
+                    className={styles.bold}
-                      className={styles.bold}
+                  >
-                    >
+                    {profileName}
-                      {profileName}
+                  </Typography>
-                    </Typography>
-                  )}
                 </Box>
                 <Box>
                   {textElementWithCopyIcon(
@@ -242,42 +202,34 @@ export const ProfilePage = () => {
                   )}
                 </Box>
                 <Box>
-                  {profileMetadata?.nip05 &&
+                  {userProfile?.nip05 &&
-                    textElementWithCopyIcon(
+                    textElementWithCopyIcon(userProfile.nip05, undefined, 15)}
-                      profileMetadata.nip05,
-                      undefined,
-                      15
-                    )}
                 </Box>
                 <Box>
-                  {profileMetadata?.lud16 &&
+                  {userProfile?.lud16 &&
-                    textElementWithCopyIcon(
+                    textElementWithCopyIcon(userProfile.lud16, undefined, 15)}
-                      profileMetadata.lud16,
-                      undefined,
-                      15
-                    )}
                 </Box>
               </Box>
 
               <Box>
-                {profileMetadata?.website && (
+                {userProfile?.website && (
                   <Typography
                     sx={{ marginTop: '10px' }}
                     variant="caption"
                     component={Link}
-                    to={profileMetadata.website}
+                    to={userProfile.website}
                     target="_blank"
                     className={`${styles.website} ${styles.link} ${styles.captionWrapper}`}
                   >
-                    {profileMetadata.website}
+                    {userProfile.website}
                   </Typography>
                 )}
               </Box>
             </Box>
             <Box>
-              {profileMetadata?.about && (
+              {userProfile?.about && (
                 <Typography mt={1} className={styles.about}>
-                  {profileMetadata.about}
+                  {userProfile.about}
                 </Typography>
               )}
             </Box>

src/pages/settings/profile/index.tsx

@@ -1,4 +1,11 @@
+import React, { useEffect, useRef, useState } from 'react'
+import { useParams } from 'react-router-dom'
+import { toast } from 'react-toastify'
+
+import { SmartToy } from '@mui/icons-material'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
+import LaunchIcon from '@mui/icons-material/Launch'
+import { LoadingButton } from '@mui/lab'
 import {
   Box,
   IconButton,
@@ -7,59 +14,53 @@ import {
   ListItem,
   ListSubheader,
   TextField,
-  Tooltip,
+  Tooltip
-  Typography,
-  useTheme
 } from '@mui/material'
-import { UnsignedEvent, nip19, kinds, VerifiedEvent, Event } from 'nostr-tools'
+
-import React, { useEffect, useRef, useState } from 'react'
+import {
-import { Link, useParams } from 'react-router-dom'
+  NDKEvent,
-import { toast } from 'react-toastify'
+  NDKUserProfile,
-import { MetadataController, NostrController } from '../../../controllers'
+  profileFromEvent,
-import { NostrJoiningBlock, ProfileMetadata } from '../../../types'
+  serializeProfile
-import styles from './style.module.scss'
+} from '@nostr-dev-kit/ndk'
+import { launch as launchNostrLoginDialog } from 'nostr-login'
+import { kinds, nip19, UnsignedEvent } from 'nostr-tools'
+
+import { NostrController } from '../../../controllers'
+
+import { useNDKContext } from '../../../hooks'
 import { useAppDispatch, useAppSelector } from '../../../hooks/store'
 
-import { LoadingButton } from '@mui/lab'
+import { getRoboHashPicture, unixNow } from '../../../utils'
-import { Dispatch } from '../../../store/store'
+
-import { setMetadataEvent } from '../../../store/actions'
-import { LoadingSpinner } from '../../../components/LoadingSpinner'
-import { LoginMethod, NostrLoginAuthMethod } from '../../../store/auth/types'
-import { SmartToy } from '@mui/icons-material'
-import {
-  getNostrJoiningBlockNumber,
-  getRoboHashPicture,
-  unixNow
-} from '../../../utils'
 import { Container } from '../../../components/Container'
 import { Footer } from '../../../components/Footer/Footer'
-import LaunchIcon from '@mui/icons-material/Launch'
+import { LoadingSpinner } from '../../../components/LoadingSpinner'
-import { launch as launchNostrLoginDialog } from 'nostr-login'
+
+import { setMetadataEvent } from '../../../store/actions'
+import { LoginMethod, NostrLoginAuthMethod } from '../../../store/auth/types'
+import { Dispatch } from '../../../store/store'
+
+import styles from './style.module.scss'
 
 export const ProfileSettingsPage = () => {
-  const theme = useTheme()
-
-  const { npub } = useParams()
-
   const dispatch: Dispatch = useAppDispatch()
 
-  const metadataController = MetadataController.getInstance()
+  const { npub } = useParams()
-  const nostrController = NostrController.getInstance()
+  const { ndk, findMetadata, publish } = useNDKContext()
 
   const [pubkey, setPubkey] = useState<string>()
-  const [nostrJoiningBlock, setNostrJoiningBlock] =
+  const [userProfile, setUserProfile] = useState<NDKUserProfile | null>(null)
-    useState<NostrJoiningBlock | null>(null)
+
-  const [profileMetadata, setProfileMetadata] = useState<ProfileMetadata>()
+  const userRobotImage = useAppSelector((state) => state.userRobotImage)
-  const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
   const metadataState = useAppSelector((state) => state.metadata)
   const keys = useAppSelector((state) => state.auth?.keyPair)
   const { usersPubkey, loginMethod, nostrLoginAuthMethod } = useAppSelector(
     (state) => state.auth
   )
-  const userRobotImage = useAppSelector((state) => state.userRobotImage)
 
+  const [savingProfileMetadata, setSavingProfileMetadata] = useState(false)
   const [isUsersOwnProfile, setIsUsersOwnProfile] = useState(false)
-
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc] = useState('Fetching metadata')
 
@@ -79,63 +80,33 @@ export const ProfileSettingsPage = () => {
   }, [npub, usersPubkey])
 
   useEffect(() => {
-    if (pubkey) {
-      getNostrJoiningBlockNumber(pubkey)
-        .then((res) => {
-          setNostrJoiningBlock(res)
-        })
-        .catch((err) => {
-          // todo: handle error
-          console.log('err :>> ', err)
-        })
-    }
-
     if (isUsersOwnProfile && metadataState) {
-      const metadataContent = metadataController.extractProfileMetadataContent(
+      const ndkEvent = new NDKEvent(ndk, metadataState)
-        metadataState as VerifiedEvent
+      const profile = profileFromEvent(ndkEvent)
-      )
+
-      if (metadataContent) {
+      setUserProfile(profile)
-        setProfileMetadata(metadataContent)
+
-        setIsLoading(false)
+      setIsLoading(false)
-      }
 
       return
     }
 
     if (pubkey) {
-      const getMetadata = async (pubkey: string) => {
+      findMetadata(pubkey)
-        const handleMetadataEvent = (event: Event) => {
+        .then((profile) => {
-          const metadataContent =
+          setUserProfile(profile)
-            metadataController.extractProfileMetadataContent(event)
+        })
-          if (metadataContent) {
+        .catch((err) => {
-            setProfileMetadata(metadataContent)
+          toast.error(err)
-          }
+        })
-        }
+        .finally(() => {
-
+          setIsLoading(false)
-        metadataController.on(pubkey, (kind: number, event: Event) => {
-          if (kind === kinds.Metadata) {
-            handleMetadataEvent(event)
-          }
         })
-
-        const metadataEvent = await metadataController
-          .findMetadata(pubkey)
-          .catch((err) => {
-            toast.error(err)
-            return null
-          })
-
-        if (metadataEvent) handleMetadataEvent(metadataEvent)
-
-        setIsLoading(false)
-      }
-
-      getMetadata(pubkey)
     }
-  }, [isUsersOwnProfile, metadataState, pubkey, metadataController])
+  }, [ndk, isUsersOwnProfile, metadataState, pubkey, findMetadata])
 
   const editItem = (
-    key: keyof ProfileMetadata,
+    key: keyof NDKUserProfile,
     label: string,
     multiline = false,
     rows = 1,
@@ -145,7 +116,7 @@ export const ProfileSettingsPage = () => {
       <TextField
         label={label}
         id={label.split(' ').join('-')}
-        value={profileMetadata![key] || ''}
+        value={userProfile![key] || ''}
         size="small"
         multiline={multiline}
         rows={rows}
@@ -155,7 +126,7 @@ export const ProfileSettingsPage = () => {
         onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
           const { value } = event.target
 
-          setProfileMetadata((prev) => ({
+          setUserProfile((prev) => ({
             ...prev,
             [key]: value
           }))
@@ -197,32 +168,45 @@ export const ProfileSettingsPage = () => {
   )
 
   const handleSaveMetadata = async () => {
+    if (!userProfile) return
+
     setSavingProfileMetadata(true)
 
-    const content = JSON.stringify(profileMetadata)
+    const serializedProfile = serializeProfile(userProfile)
 
-    // We need to omit cachedAt and create new event
+    const unsignedEvent: UnsignedEvent = {
-    // Relay will reject if created_at is too late
+      content: serializedProfile,
-    const updatedMetadataState: UnsignedEvent = {
-      content: content,
       created_at: unixNow(),
       kind: kinds.Metadata,
       pubkey: pubkey!,
-      tags: metadataState?.tags || []
+      tags: []
     }
 
+    const nostrController = NostrController.getInstance()
     const signedEvent = await nostrController
-      .signEvent(updatedMetadataState)
+      .signEvent(unsignedEvent)
       .catch((error) => {
         toast.error(`Error saving profile metadata. ${error}`)
+        return null
       })
 
-    if (signedEvent) {
+    if (!signedEvent) {
-      if (!metadataController.validate(signedEvent)) {
+      setSavingProfileMetadata(false)
-        toast.error(`Metadata is not valid.`)
+      return
-      }
+    }
 
-      await metadataController.publishMetadataEvent(signedEvent)
+    const ndkEvent = new NDKEvent(ndk, signedEvent)
+    const publishedOnRelays = await publish(ndkEvent)
+
+    // Handle cases where publishing failed or succeeded
+    if (publishedOnRelays.length === 0) {
+      toast.error('Failed to publish event on any relay')
+    } else {
+      toast.success(
+        `Event published successfully to the following relays\n\n${publishedOnRelays.join(
+          '\n'
+        )}`
+      )
 
       dispatch(setMetadataEvent(signedEvent))
     }
@@ -241,7 +225,7 @@ export const ProfileSettingsPage = () => {
 
     const robotAvatarLink = getRoboHashPicture(npub!, robotSet.current)
 
-    setProfileMetadata((prev) => ({
+    setUserProfile((prev) => ({
       ...prev,
       picture: robotAvatarLink
     }))
@@ -267,14 +251,14 @@ export const ProfileSettingsPage = () => {
    *
    * @returns robohash image url
    */
-  const getProfileImage = (metadata: ProfileMetadata) => {
+  const getProfileImage = (profile: NDKUserProfile) => {
     if (!isUsersOwnProfile) {
-      return metadata.picture || getRoboHashPicture(npub!)
+      return profile.image || getRoboHashPicture(npub!)
     }
 
     // userRobotImage is used only when visiting own profile
     // while kind 0 picture is not set
-    return metadata.picture || userRobotImage || getRoboHashPicture(npub!)
+    return profile.image || userRobotImage || getRoboHashPicture(npub!)
   }
 
   return (
@@ -300,7 +284,7 @@ export const ProfileSettingsPage = () => {
             </ListSubheader>
           }
         >
-          {profileMetadata && (
+          {userProfile && (
             <div>
               <ListItem
                 sx={{
@@ -309,10 +293,10 @@ export const ProfileSettingsPage = () => {
                   flexDirection: 'column'
                 }}
               >
-                {profileMetadata.banner ? (
+                {userProfile.banner ? (
                   <img
                     className={styles.bannerImg}
-                    src={profileMetadata.banner}
+                    src={userProfile.banner}
                     alt="Banner Image"
                   />
                 ) : (
@@ -334,24 +318,9 @@ export const ProfileSettingsPage = () => {
                     event.currentTarget.src = getRoboHashPicture(npub!)
                   }}
                   className={styles.img}
-                  src={getProfileImage(profileMetadata)}
+                  src={getProfileImage(userProfile)}
                   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, {
@@ -368,6 +337,7 @@ export const ProfileSettingsPage = () => {
                 <>
                   {usersPubkey &&
                     copyItem(nip19.npubEncode(usersPubkey), 'Public Key')}
+
                   {loginMethod === LoginMethod.privateKey &&
                     keys &&
                     keys.private &&