Merge branch 'master' into ct-unstable

src/components/app-body/index.js

@@ -25,6 +25,7 @@ import SignMessage from './sign/index.js'
 import ServerSelectView from './configuration/select-server-view'
 import NostrPost from './nostr/nostr-post/index.js'
 import NostrRead from './nostr/nostr-read/index.js'
+import GlobalFeed from './nostr/global-feed/index.js'
 import UserDataReview from './user-data-review'
 function AppBody (props) {
   // Dependency injection through props
@@ -47,6 +48,7 @@ function AppBody (props) {
         <Route path='/configuration' element={<ServerSelectView appData={appData} />} />
         <Route path='/nostr-post' element={<NostrPost appData={appData} />} />
         <Route path='/nostr-read' element={<NostrRead appData={appData} />} />
+        <Route path='/global-feed' element={<GlobalFeed appData={appData} />} />
         <Route path='/user-data/:cid' element={<UserDataReview appData={appData} />} />
       </Routes>
       {/** Show in all paths except the servers view */}

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

@@ -0,0 +1,98 @@
+/**
+ * Component for reading global nostr posts
+ */
+// Global npm libraries
+import React, { useEffect, useState } from 'react'
+import { Container, Card, Spinner } from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+
+import { RelayPool } from 'nostr'
+
+function Feed (props) {
+  const { bchWalletState } = props.appData
+  const [posts, setPosts] = useState([])
+  const [loaded, setLoaded] = useState(false)
+
+  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', (relay, subId, ev) => {
+        console.log('Received event:', ev)
+        // const profile = JSON.parse(ev.content)
+        setPosts(currentPosts => [...currentPosts, ev])
+      })
+    }
+
+    if (!loaded) {
+      start()
+    }
+  }, [bchWalletState, loaded])
+
+  return (
+    <Container className='mt-4 mb-5' style={{ marginBottom: '50px' }}>
+      <div>
+        {posts.map((post, index) => (
+          <Card key={index} className='mb-4 bg-light rounded-4 shadow-sm border-0'>
+            <Card.Body className='p-3'>
+              <div className='d-flex align-items-center gap-3 mb-3'>
+                <div
+                  className='rounded-circle bg-gradient shadow d-flex align-items-center justify-content-center'
+                  style={{
+                    width: '48px',
+                    height: '48px',
+                    background: 'linear-gradient(45deg, #6c757d, #495057)'
+                  }}
+                >
+                  <FontAwesomeIcon icon={faUser} size='1x' color='#7c7c7d' />
+                </div>
+                <div className='flex-grow-1'>
+                  <div className='fw-bold mb-1'>
+                    {post.pubkey.slice(0, 8) + '...'}
+                  </div>
+                  <small className='text-muted'>
+                    {`${post.pubkey.slice(0, 8)}...${post.pubkey.slice(-5)}`}
+                  </small>
+                </div>
+                <small className='text-muted'>
+                  {new Date(post.created_at * 1000).toLocaleString()}
+                </small>
+              </div>
+              <div className='mb-4'>
+                <div className='fs-5 ms-5 text-dark' style={{ lineHeight: '1.3' }}>
+                  {post.content}
+                </div>
+              </div>
+            </Card.Body>
+          </Card>
+        ))}
+        {!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

@@ -0,0 +1,31 @@
+/*
+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-read/public-read.js

@@ -3,7 +3,7 @@
  */
 // Global npm libraries
 import React, { useEffect, useState } from 'react'
-import { Container, Card } from 'react-bootstrap'
+import { Container, Card, Spinner } from 'react-bootstrap'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faUser } from '@fortawesome/free-solid-svg-icons'
 
@@ -28,6 +28,7 @@ function PublicRead (props) {
 
       pool.on('eose', relay => {
         console.log('Closing Relay')
+        setLoaded(true)
         relay.close()
       })
 
@@ -35,8 +36,6 @@ function PublicRead (props) {
         console.log('Received event:', ev)
         setPosts(currentPosts => [...currentPosts, ev])
       })
-
-      setLoaded(true)
     }
 
     if (!loaded) {
@@ -85,6 +84,11 @@ function PublicRead (props) {
             <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>
   )

src/components/nav-menu/index.js

@@ -114,6 +114,13 @@ function NavMenu (props) {
             >
               Nostr Profile
             </NavLink>
+            <NavLink
+              className={currentPath === '/global-feed' ? 'nav-link-active' : 'nav-link-inactive'}
+              to='/global-feed'
+              onClick={handleClickEvent}
+            >
+              Global Feed
+            </NavLink>
           </Nav>
         </Navbar.Collapse>
       </Navbar>