Merge pull request #38 from Permissionless-Software-Foundation/dh-extra-data

feat(nostr): Implemented extra profile data

src/components/app-body/index.js

@@ -25,7 +25,7 @@ import SignMessage from './sign/index.js'
 import ServerSelectView from './configuration/select-server-view'
 import NostrPost from './nostr/nostr-post/index.js'
 import Profile from './nostr/profile/index.js'
-import GlobalFeed from './nostr/global-feed/index.js'
+import Feeds from './nostr/feeds/index.js'
 import ContentCreators from './nostr/content-creators/index.js'
 import UserDataReview from './user-data-review'
 import Offers from './offers'
@@ -50,7 +50,7 @@ function AppBody (props) {
         <Route path='/configuration' element={<ServerSelectView appData={appData} />} />
         <Route path='/nostr-post' element={<NostrPost appData={appData} />} />
         <Route path='/profile/:npub' element={<Profile appData={appData} />} />
-        <Route path='/global-feed' element={<GlobalFeed appData={appData} />} />
+        <Route path='/feeds' element={<Feeds appData={appData} />} />
         <Route path='/content-creators' element={<ContentCreators appData={appData} />} />
         <Route path='/user-data/:tokenId' element={<UserDataReview appData={appData} />} />
         <Route path='/offers' element={<Offers appData={appData} />} />

src/components/app-body/nostr/feeds/feed-card.js

@@ -1,5 +1,5 @@
 /**
- * Component for reading global nostr posts
+ * Component for displaying nostr posts
  */
 // Global npm libraries
 import React, { useCallback, useEffect, useState } from 'react'
@@ -61,7 +61,7 @@ function FeedCard (props) {
               {!profile?.name && (
                 <span>
                   {post.pubkey.slice(0, 8) + '...'}
-                  <Spinner animation='border' size='sm' className='ms-2' />
+                  {!profile?.loaded && <Spinner animation='border' size='sm' className='ms-2' />}
                 </span>
               )}
             </div>

src/components/app-body/nostr/feeds/feed.js

@@ -0,0 +1,30 @@
+/**
+ * Component for displaying global nostr posts
+ */
+// Global npm libraries
+import React from 'react'
+import { Container } from 'react-bootstrap'
+
+import FeedCard from './feed-card'
+
+function Feed (props) {
+  const { posts, profiles } = props
+
+  return (
+    <Container className='mt-4 mb-5' style={{ marginBottom: '50px' }}>
+      <div>
+        {posts.map((post, index) => (
+          <FeedCard key={index} post={post} appData={props.appData} profiles={profiles} />
+        ))}
+        {!posts.length && (
+          <div className='text-center text-muted py-5 bg-light rounded-4 shadow-sm'>
+            <i className='bi bi-inbox-fill fs-1 mb-3 d-block opacity-50' />
+            <div>No posts found</div>
+          </div>
+        )}
+      </div>
+    </Container>
+  )
+}
+
+export default Feed

src/components/app-body/nostr/feeds/following.js

@@ -0,0 +1,82 @@
+/**
+ * Component for displaying following nostr posts
+ */
+// Global npm libraries
+import React, { useEffect, useState } from 'react'
+import { Container, Spinner } from 'react-bootstrap'
+
+import { RelayPool } from 'nostr'
+
+import FeedCard from './feed-card'
+
+function Following (props) {
+  const { appData, posts, profiles } = props
+  const [followingPosts, setFollowingPosts] = useState([])
+  const [loaded, setLoaded] = useState(false)
+
+  useEffect(() => {
+    const getFollowingPosts = async () => {
+      const followingList = await new Promise((resolve, reject) => {
+        let list = []
+        const { nostrKeyPair } = appData.bchWalletState
+        const psf = 'wss://nostr-relay.psfoundation.info'
+
+        const pool = RelayPool([psf])
+        pool.on('open', relay => {
+          relay.subscribe('subid', { limit: 1, kinds: [3], authors: [nostrKeyPair.pubHex] })
+        })
+
+        pool.on('eose', relay => {
+          relay.close()
+          /** This ensures to return an empty array if no records are found!
+           *  Applies for new users that don't have a follow list
+          */
+          resolve(list)
+        })
+
+        pool.on('event', (relay, subId, ev) => {
+          list = ev.tags
+          resolve(list)
+        })
+      })
+
+      // Filter posts by following list
+      let filteredPosts = []
+      for (let i = 0; i < followingList.length; i++) {
+        const following = followingList[i]
+        const filtered = posts.filter(post => {
+          return following.includes(post.pubkey)
+        })
+        filteredPosts = [...filteredPosts, ...filtered]
+      }
+      // Sort filtered posts by created_at
+      filteredPosts.sort((a, b) => new Date(b.created_at) - new Date(a.created_at))
+      setFollowingPosts(filteredPosts)
+      setLoaded(true)
+    }
+    getFollowingPosts()
+  }, [appData, posts])
+
+  return (
+    <Container className='mt-4 mb-5' style={{ marginBottom: '50px' }}>
+      <div>
+        {loaded && followingPosts.map((post, index) => (
+          <FeedCard key={index} post={post} appData={props.appData} profiles={profiles} />
+        ))}
+        {loaded && !followingPosts.length && (
+          <div className='text-center text-muted py-5 bg-light rounded-4 shadow-sm'>
+            <i className='bi bi-inbox-fill fs-1 mb-3 d-block opacity-50' />
+            <div>No posts found</div>
+          </div>
+        )}
+        {!loaded && (
+          <div className='text-center text-muted py-5 bg-light rounded-4 shadow-sm'>
+            <Spinner animation='border' />
+          </div>
+        )}
+      </div>
+    </Container>
+  )
+}
+
+export default Following

src/components/app-body/nostr/feeds/index.js

@@ -0,0 +1,152 @@
+/*
+Component for reading the nostr feeds.
+*/
+
+// Global npm libraries
+import React, { useState, useEffect, useCallback } from 'react'
+import { Container, Nav, Tab, Spinner } from 'react-bootstrap'
+import Feed from './feed'
+import Following from './following'
+import { RelayPool } from 'nostr'
+
+function Feeds (props) {
+  const { appData } = props
+  const [activeTab, setActiveTab] = useState(appData.lastFeedTab)
+
+  const { bchWalletState } = appData
+  const [posts, setPosts] = useState([])
+  const [loaded, setLoaded] = useState(false)
+  const [profiles, setProfiles] = useState({})
+
+  // function to fetch profile and set it to profiles state
+  const fetchProfile = useCallback((pubkey) => {
+    // no fetch profile again if it exist
+    setProfiles(currentProfiles => {
+      if (currentProfiles[pubkey]) {
+        return currentProfiles
+      }
+      return currentProfiles
+    })
+
+    const psf = 'wss://nostr-relay.psfoundation.info'
+
+    const pool = RelayPool([psf])
+    pool.on('open', relay => {
+      relay.subscribe('subid', { limit: 5, kinds: [0], authors: [pubkey] })
+    })
+
+    pool.on('eose', relay => {
+      relay.close()
+      try {
+      // Mark unknown profiles. From this way we can know which profile was fetched and not found.
+        setProfiles(currentProfiles => {
+          if (!currentProfiles[pubkey]) {
+            const newProfiles = { ...currentProfiles }
+            newProfiles[pubkey] = { loaded: true }
+            return newProfiles
+          }
+          return currentProfiles
+        })
+      } catch (error) {
+        // skip error
+      }
+    })
+
+    pool.on('event', (relay, subId, ev) => {
+      try {
+        // update profiles data
+        const profile = JSON.parse(ev.content)
+        setProfiles(currentProfiles => {
+          const newProfiles = { ...currentProfiles }
+          newProfiles[pubkey] = profile
+          return newProfiles
+        })
+      } catch (error) {
+        // skip error
+      }
+    })
+  }, [])
+
+  // Get global feed posts
+  useEffect(() => {
+    const start = () => {
+      const psf = 'wss://nostr-relay.psfoundation.info'
+
+      const pool = RelayPool([psf])
+      pool.on('open', relay => {
+        relay.subscribe('REQ', { limit: 10, kinds: [1], '#t': ['slpdex-socialmedia'] })
+      })
+
+      pool.on('eose', relay => {
+        setLoaded(true)
+        relay.close()
+      })
+
+      pool.on('event', async (relay, subId, ev) => {
+        setPosts(currentPosts => [...currentPosts, ev])
+        // fetch post profile and set it to profiles state
+        fetchProfile(ev.pubkey)
+      })
+    }
+
+    if (!loaded) {
+      start()
+    }
+  }, [bchWalletState, loaded, fetchProfile])
+
+  const onChangeTab = (tab) => {
+    setActiveTab(tab)
+    appData.setLastFeedTab(tab)
+    appData.updateLocalStorage({ lastFeedTab: tab })
+  }
+
+  return (
+    <>
+      <Container>
+        <h2 style={{
+          textAlign: 'center',
+          margin: '20px 0 30px 0',
+          padding: '10px',
+          borderBottom: '2px solid #ccc'
+        }}
+        >
+          Feeds
+        </h2>
+
+        {loaded && (
+          <Tab.Container activeKey={activeTab} onSelect={onChangeTab}>
+            <Nav variant='tabs' className='mb-4'>
+              <Nav.Item>
+                <Nav.Link eventKey='feed' className={activeTab === 'feed' ? 'active' : ''}>
+                  Feeds
+                </Nav.Link>
+              </Nav.Item>
+              <Nav.Item>
+                <Nav.Link eventKey='following' className={activeTab === 'following' ? 'active' : ''}>
+                  Following
+                </Nav.Link>
+              </Nav.Item>
+            </Nav>
+
+            <Tab.Content>
+              <Tab.Pane eventKey='feed'>
+                <Feed appData={appData} posts={posts} profiles={profiles} />
+              </Tab.Pane>
+              <Tab.Pane eventKey='following'>
+                <Following appData={appData} posts={posts} profiles={profiles} />
+              </Tab.Pane>
+            </Tab.Content>
+          </Tab.Container>
+        )}
+
+        {!loaded && (
+          <div className='text-center text-muted py-5 bg-light rounded-4 shadow-sm'>
+            <Spinner animation='border' />
+          </div>
+        )}
+      </Container>
+    </>
+  )
+}
+
+export default Feeds

src/components/app-body/nostr/global-feed/feed.js

@@ -1,104 +0,0 @@
-/**
- * Component for reading global nostr posts
- */
-// Global npm libraries
-import React, { useEffect, useState, useCallback } from 'react'
-import { Container, Spinner } from 'react-bootstrap'
-
-import { RelayPool } from 'nostr'
-
-import FeedCard from './feed-card'
-
-function Feed (props) {
-  const { appData } = props
-  const { bchWalletState } = appData
-  const [posts, setPosts] = useState([])
-  const [loaded, setLoaded] = useState(false)
-  const [profiles, setProfiles] = useState({})
-
-  // function to fetch profile and set it to profiles state
-  const fetchProfile = useCallback((pubkey) => {
-    // no fetch profile again if it exist
-    if (profiles[pubkey]) {
-      console.log('profile exists', profiles[pubkey])
-      return profiles[pubkey]
-    }
-
-    const psf = 'wss://nostr-relay.psfoundation.info'
-
-    const pool = RelayPool([psf])
-    pool.on('open', relay => {
-      relay.subscribe('subid', { limit: 5, kinds: [0], authors: [pubkey] })
-    })
-
-    pool.on('eose', relay => {
-      console.log('Closing Relay')
-      relay.close()
-    })
-
-    pool.on('event', (relay, subId, ev) => {
-      try {
-        const profile = JSON.parse(ev.content)
-        const newProfiles = { ...profiles }
-        newProfiles[pubkey] = profile
-        setProfiles(newProfiles)
-      } catch (error) {
-        console.log('Error parsing profile', error)
-      }
-    })
-  }, [profiles])
-
-  // Get global feed posts
-  useEffect(() => {
-    const start = () => {
-      const psf = 'wss://nostr-relay.psfoundation.info'
-
-      const pool = RelayPool([psf])
-      pool.on('open', relay => {
-        relay.subscribe('REQ', { limit: 10, kinds: [1], '#t': ['slpdex-socialmedia'] })
-      })
-
-      pool.on('eose', relay => {
-        console.log('Closing Relay')
-        setLoaded(true)
-        relay.close()
-      })
-
-      pool.on('event', async (relay, subId, ev) => {
-        console.log('Received event:', ev)
-
-        setPosts(currentPosts => [...currentPosts, ev])
-        // fetch post profile and set it to profiles state
-        fetchProfile(ev.pubkey)
-      })
-    }
-
-    if (!loaded) {
-      start()
-    }
-  }, [bchWalletState, loaded, fetchProfile])
-
-  return (
-    <Container className='mt-4 mb-5' style={{ marginBottom: '50px' }}>
-      <div>
-        {posts.map((post, index) => (
-          <FeedCard key={index} post={post} appData={props.appData} profiles={profiles} />
-        ))}
-        {!posts.length && loaded && (
-          <div className='text-center text-muted py-5 bg-light rounded-4 shadow-sm'>
-            <i className='bi bi-inbox-fill fs-1 mb-3 d-block opacity-50' />
-            <div>No posts found</div>
-          </div>
-        )}
-
-        {!loaded && (
-          <div className='text-center text-muted py-5 bg-light rounded-4 shadow-sm'>
-            <Spinner animation='border' />
-          </div>
-        )}
-      </div>
-    </Container>
-  )
-}
-
-export default Feed

src/components/app-body/nostr/global-feed/index.js

@@ -1,31 +0,0 @@
-/*
-Component for reading the nostr global feed.
-*/
-
-// Global npm libraries
-import React from 'react'
-import { Container } from 'react-bootstrap'
-import Feed from './feed'
-
-function GlobalFeed (props) {
-  const { appData } = props
-
-  return (
-    <>
-      <Container>
-        <h2 style={{
-          textAlign: 'center',
-          margin: '20px 0 50px 0',
-          padding: '10px',
-          borderBottom: '2px solid #ccc'
-        }}
-        >
-          Global Feed
-        </h2>
-        <Feed appData={appData} />
-      </Container>
-    </>
-  )
-}
-
-export default GlobalFeed

src/components/app-body/nostr/nostr-post/profile-post.js

@@ -3,17 +3,19 @@ Component for posting nostr information on kind 0.
 */
 
 // Global npm libraries
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import { Container, Form, Button, Spinner } from 'react-bootstrap'
 import Accordion from 'react-bootstrap/Accordion'
 import { finalizeEvent } from 'nostr-tools/pure'
 import { Relay } from 'nostr-tools/relay'
 import { hexToBytes } from '@noble/hashes/utils' // already an installed dependency
+import { RelayPool } from 'nostr'
 
 function ProfilePost (props) {
+  const { bchWalletState } = props.appData
   const [accordionKey, setAccordionKey] = useState(null)
   const [onFetch, setOnFetch] = useState(false)
-  const { bchWalletState } = props.appData
+  const [formLoaded, setFormLoaded] = useState(false)
   const [formData, setFormData] = useState({
     name: '',
     about: '',
@@ -27,6 +29,43 @@ function ProfilePost (props) {
   const [errorMsg, setErrorMsg] = useState('')
   const [successMsg, setSuccessMsg] = useState('')
 
+  useEffect(() => {
+    // Get Last post from
+    const getLastPost = () => {
+      const { nostrKeyPair } = bchWalletState
+
+      const psf = 'wss://nostr-relay.psfoundation.info'
+
+      const pool = RelayPool([psf])
+      pool.on('open', relay => {
+        relay.subscribe('subid', { limit: 1, kinds: [0], authors: [nostrKeyPair.pubHex] })
+        setFormLoaded(true)
+      })
+
+      pool.on('eose', relay => {
+        console.log('Closing Relay')
+        setFormLoaded(true)
+        relay.close()
+      })
+
+      pool.on('event', (relay, subId, ev) => {
+        console.log('Received event:', ev)
+        // setPosts(currentPosts => [...currentPosts, ev])
+        try {
+          const data = JSON.parse(ev.content)
+          console.log('data', data)
+          setFormData(data)
+        } catch (error) {
+
+        }
+      })
+    }
+
+    if (!formLoaded) {
+      getLastPost()
+    }
+  }, [bchWalletState, formLoaded])
+
   const handleInputChange = (e) => {
     const { name, value } = e.target
     setFormData({
@@ -78,7 +117,6 @@ function ProfilePost (props) {
 
       // Close the connection to the relay.
       relay.close()
-      resetForm()
       setSuccessMsg('Post successfully published!')
       setOnFetch(false)
     } catch (error) {
@@ -92,18 +130,6 @@ function ProfilePost (props) {
     setAccordionKey(key)
   }
 
-  const resetForm = () => {
-    setFormData({
-      name: '',
-      about: '',
-      picture: '',
-      display_name: '',
-      website: '',
-      banner: '',
-      bot: false
-    })
-  }
-
   return (
     <>
       <Container className='mt-4'>
@@ -121,103 +147,111 @@ function ProfilePost (props) {
                   {successMsg}
                 </div>
               )}
-              <Form onSubmit={handleSubmit}>
-                <Form.Group className='mb-3'>
-                  <Form.Label>Name</Form.Label>
-                  <Form.Control
-                    type='text'
-                    placeholder='Enter your name'
-                    name='name'
-                    value={formData.name}
-                    onChange={handleInputChange}
-                    required
-                  />
-                </Form.Group>
+              {formLoaded && (
+                <Form onSubmit={handleSubmit}>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>Name</Form.Label>
+                    <Form.Control
+                      type='text'
+                      placeholder='Enter your name'
+                      name='name'
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      required
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Label>About</Form.Label>
-                  <Form.Control
-                    as='textarea'
-                    rows={3}
-                    placeholder='Tell us about yourself'
-                    name='about'
-                    value={formData.about}
-                    onChange={handleInputChange}
-                    required
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>About</Form.Label>
+                    <Form.Control
+                      as='textarea'
+                      rows={3}
+                      placeholder='Tell us about yourself'
+                      name='about'
+                      value={formData.about}
+                      onChange={handleInputChange}
+                      required
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Label>Profile Picture URL</Form.Label>
-                  <Form.Control
-                    type='url'
-                    placeholder='Enter URL to your profile picture'
-                    name='picture'
-                    value={formData.picture}
-                    onChange={handleInputChange}
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>Profile Picture URL</Form.Label>
+                    <Form.Control
+                      type='url'
+                      placeholder='Enter URL to your profile picture'
+                      name='picture'
+                      value={formData.picture}
+                      onChange={handleInputChange}
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Label>Display Name</Form.Label>
-                  <Form.Control
-                    type='text'
-                    placeholder='Enter your display name'
-                    name='display_name'
-                    value={formData.display_name}
-                    onChange={handleInputChange}
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>Display Name</Form.Label>
+                    <Form.Control
+                      type='text'
+                      placeholder='Enter your display name'
+                      name='display_name'
+                      value={formData.display_name}
+                      onChange={handleInputChange}
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Label>Website</Form.Label>
-                  <Form.Control
-                    type='url'
-                    placeholder='Enter your website URL'
-                    name='website'
-                    value={formData.website}
-                    onChange={handleInputChange}
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>Website</Form.Label>
+                    <Form.Control
+                      type='url'
+                      placeholder='Enter your website URL'
+                      name='website'
+                      value={formData.website}
+                      onChange={handleInputChange}
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Label>Banner URL</Form.Label>
-                  <Form.Control
-                    type='url'
-                    placeholder='Enter URL to your banner picture (1024x768 pixels)'
-                    name='banner'
-                    value={formData.banner}
-                    onChange={handleInputChange}
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Label>Banner URL</Form.Label>
+                    <Form.Control
+                      type='url'
+                      placeholder='Enter URL to your banner picture (1024x768 pixels)'
+                      name='banner'
+                      value={formData.banner}
+                      onChange={handleInputChange}
+                    />
+                  </Form.Group>
 
-                <Form.Group className='mb-3'>
-                  <Form.Check
-                    type='checkbox'
-                    label='This account is for a bot'
-                    name='bot'
-                    checked={formData.bot}
-                    onChange={(e) => {
-                      setFormData({
-                        ...formData,
-                        bot: e.target.checked
-                      })
-                      setSuccessMsg('')
-                      setErrorMsg('')
-                    }}
-                  />
-                </Form.Group>
+                  <Form.Group className='mb-3'>
+                    <Form.Check
+                      type='checkbox'
+                      label='This account is for a bot'
+                      name='bot'
+                      checked={formData.bot}
+                      onChange={(e) => {
+                        setFormData({
+                          ...formData,
+                          bot: e.target.checked
+                        })
+                        setSuccessMsg('')
+                        setErrorMsg('')
+                      }}
+                    />
+                  </Form.Group>
 
-                <div className='d-flex justify-content-center'>
-                  {!onFetch && (
-                    <Button variant='primary' type='submit' disabled={onFetch}>
-                      Post
-                    </Button>
-                  )}
-                  {onFetch && <Spinner animation='border' variant='primary' />}
+                  <div className='d-flex justify-content-center'>
+                    {!onFetch && (
+                      <Button variant='primary' type='submit' disabled={onFetch}>
+                        Post
+                      </Button>
+                    )}
+                    {onFetch && <Spinner animation='border' variant='primary' />}
+                  </div>
+
+                </Form>
+              )}
+              {!formLoaded && (
+                <div className='text-center'>
+                  <Spinner animation='border' variant='primary' />
                 </div>
+              )}
 
-              </Form>
             </Accordion.Body>
           </Accordion.Item>
         </Accordion>

src/components/app-body/nostr/profile/profile-read.js

@@ -6,7 +6,7 @@ import React, { useEffect, useState } from 'react'
 import { Container, Button } from 'react-bootstrap'
 import CopyOnClick from '../../bch-wallet/copy-on-click.js'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { faUser, faGlobe } from '@fortawesome/free-solid-svg-icons'
 import NostrFormat from '../nostr-format'
 import { RelayPool } from 'nostr'
 import * as nip19 from 'nostr-tools/nip19'
@@ -18,6 +18,7 @@ function ProfileRead (props) {
   const { setProfile } = props
   const [post, setPost] = useState({})
   const [loaded, setLoaded] = useState(false)
+  const [imageError, setImageError] = useState({ picture: false, banner: false })
 
   useEffect(() => {
     const start = () => {
@@ -39,10 +40,14 @@ function ProfileRead (props) {
 
       pool.on('event', (relay, subId, ev) => {
         console.log('Received event:', ev)
-        const profile = JSON.parse(ev.content)
-        console.log('Profile:', profile)
-        setPost(profile)
-        setProfile(profile)
+        try {
+          const profile = JSON.parse(ev.content)
+          console.log('Profile:', profile)
+          setPost(profile)
+          setProfile(profile)
+        } catch (error) {
+          console.error('Error parsing profile:', error)
+        }
       })
 
       setLoaded(true)
@@ -53,23 +58,62 @@ function ProfileRead (props) {
     }
   }, [bchWalletState, loaded, setProfile, npub])
 
+  const handleImageError = (type) => {
+    setImageError(prev => ({ ...prev, [type]: true }))
+  }
+
+  const handleImageLoad = (type) => {
+    setImageError(prev => ({ ...prev, [type]: false }))
+  }
+
   return (
     <Container>
-      <div className='d-flex flex-column flex-md-row align-items-center gap-4 mb-5 p-3 p-md-5 bg-light rounded-4 shadow-sm'>
-        <div style={{ width: '100px', height: '100px' }} className='mb-3 mb-md-0'>
-          <div
-            className='rounded-circle bg-gradient shadow d-flex align-items-center justify-content-center'
-            style={{
-              width: '100%',
-              height: '100%',
-              background: 'linear-gradient(45deg, #6c757d, #495057)'
-            }}
-          >
-            <FontAwesomeIcon icon={faUser} size='3x' color='#7c7c7d' />
-          </div>
+      {/* Banner Section */}
+      {post.banner && !imageError.banner && (
+        <div className='position-relative'>
+          <img
+            src={post.banner}
+            alt='Profile banner'
+            className='w-100 rounded-4 shadow-sm'
+            style={{ height: '200px', objectFit: 'cover' }}
+            onError={() => handleImageError('banner')}
+            onLoad={() => handleImageLoad('banner')}
+          />
         </div>
+      )}
+
+      <div className='d-flex flex-column flex-md-row align-items-center gap-4 mb-5 p-3 p-md-5 bg-light rounded-4 shadow-sm'>
+        {/* Profile Picture */}
+        <div style={{ width: '120px', height: '120px' }} className='mb-3 mb-md-0'>
+          {post.picture && !imageError.picture
+            ? (
+              <img
+                src={post.picture}
+                alt='Profile picture'
+                className='rounded-circle shadow w-100 h-100'
+                style={{ objectFit: 'cover' }}
+                onError={() => handleImageError('picture')}
+                onLoad={() => handleImageLoad('picture')}
+              />
+              )
+            : (
+              <div
+                className='rounded-circle bg-gradient shadow d-flex align-items-center justify-content-center'
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  background: 'linear-gradient(45deg, #6c757d, #495057)'
+                }}
+              >
+                <FontAwesomeIcon icon={faUser} size='3x' color='#7c7c7d' />
+              </div>
+              )}
+        </div>
+
+        {/* Profile Information */}
         <div className='flex-grow-1 text-center text-md-start mb-3 mb-md-0 d-flex flex-column align-items-center align-items-md-start'>
-          <h3 className='mb-2 fw-bold'>{post.name}</h3>
+          <h3 className='mb-2 fw-bold'>{post.name || 'username'}</h3>
+
           <div className='text-muted small mb-3 d-flex align-items-center flex-column flex-md-row'>
             <span className='text-truncate me-2 mb-2 mb-md-0'>
               <span className='d-md-none'>
@@ -81,10 +125,32 @@ function ProfileRead (props) {
             </span>
             <CopyOnClick walletProp='npub' appData={props.appData} value={bchWalletState.nostrKeyPair.npub} />
           </div>
-          <div className='fs-6 text-secondary'>
-            <NostrFormat content={post.about} />
-          </div>
+
+          {/* About Section */}
+          {post.about && (
+            <div className='fs-6 text-secondary'>
+              <NostrFormat content={post.about} />
+            </div>
+          )}
+
+          {/* Website Link */}
+          {post.website && (
+            <div className='mb-3 d-flex align-items-center gap-2'>
+              <FontAwesomeIcon icon={faGlobe} className='text-muted' size='sm' />
+              <a
+                href={post.website.startsWith('http') ? post.website : `https://${post.website}`}
+                target='_blank'
+                rel='noopener noreferrer'
+                className='text-decoration-none text-muted small'
+                style={{ wordBreak: 'break-all' }}
+              >
+                {post.website}
+              </a>
+            </div>
+          )}
         </div>
+
+        {/* Action Buttons */}
         <div className='d-flex gap-2 align-items-center flex-wrap justify-content-center'>
           <Button
             variant='outline-danger'

src/components/nav-menu/index.js

@@ -58,10 +58,10 @@ function NavMenu (props) {
 
             <NavLink
               className={currentPath === '/global-feed' ? 'nav-link-active' : 'nav-link-inactive'}
-              to='/global-feed'
+              to='/feeds'
               onClick={handleClickEvent}
             >
-              Global Feed
+              Feeds
             </NavLink>
             <NavLink
               className={currentPath === '/nostr-post' ? 'nav-link-active' : 'nav-link-inactive'}

src/hooks/state.js

@@ -14,7 +14,8 @@ function useAppState () {
     defaultValue: {
       serverUrl: 'https://free-bch.fullstack.cash' // Default server
     },
-    nftData: {}
+    nftData: {},
+    lastFeedTab: 'feed'
   })
 
   console.log('lsState: ', lsState)
@@ -26,6 +27,7 @@ function useAppState () {
   const [servers, setServers] = useState([])
   const [dexLib, setDexLib] = useState(false)
   const [nostr, setNostr] = useState(false)
+  const [lastFeedTab, setLastFeedTab] = useState(lsState.lastFeedTab || 'feed')
 
   // Startup state management
   const [asyncInitStarted, setAsyncInitStarted] = useState(false)
@@ -53,7 +55,7 @@ function useAppState () {
   // console.log('lsState: ', lsState)
   const removeLocalStorageItem = removeItem
   const updateLocalStorage = (lsObj) => {
-    // console.log(`updateLocalStorage() input: ${JSON.stringify(lsObj, null, 2)}`)
+    console.log(`updateLocalStorage() input: ${JSON.stringify(lsObj, null, 2)}`)
 
     // Progressively overwrite the LocalStorage state.
     const newObj = Object.assign({}, lsState, lsObj)
@@ -149,7 +151,9 @@ function useAppState () {
     setNostr,
     nftForSaleCacheData,
     setNftForSaleCacheData,
-    updateNFTCachedData
+    updateNFTCachedData,
+    lastFeedTab,
+    setLastFeedTab
   }
 }