feat(tagged posts): Nostr posts made with this app are tagged for easy tracking in a global feed

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

@@ -51,7 +51,7 @@ function PublicPost (props) {
       const eventTemplate = {
         kind: 1,
         created_at: Math.floor(Date.now() / 1000),
-        tags: [],
+        tags: [['t', 'slpdex-socialmedia']],
         content: formData.content
       }
       console.log(`eventTemplate: ${JSON.stringify(eventTemplate, null, 2)}`)

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

@@ -3,26 +3,18 @@ Component for read nostr information.
 */
 
 // Global npm libraries
-import React from 'react'
+import React, { useState } from 'react'
 import { Container } from 'react-bootstrap'
 import ProfileRead from './profile-read.js'
 import PublicRead from './public-read.js'
 
 function NostrRead (props) {
+  const [profile, setProfile] = useState(false)
   return (
     <>
       <Container>
-        <h2 style={{
-          textAlign: 'center',
-          margin: '20px 0',
-          padding: '10px',
-          borderBottom: '2px solid #ccc'
-        }}
-        >
-          Nostr Read
-        </h2>
-        <ProfileRead {...props} />
-        <PublicRead {...props} />
+        <ProfileRead {...props} setProfile={setProfile} />
+        <PublicRead {...props} profile={profile} />
       </Container>
     </>
   )

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

@@ -3,28 +3,27 @@
  */
 // Global npm libraries
 import React, { useEffect, useState } from 'react'
-import { Container } from 'react-bootstrap'
-
-import Accordion from 'react-bootstrap/Accordion'
+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 { RelayPool } from 'nostr'
 
 function ProfileRead (props) {
   const { bchWalletState } = props.appData
-  const [posts, setPosts] = useState([])
-  const [accordionKey, setAccordionKey] = useState(null)
+  const { setProfile } = props
+  const [post, setPost] = useState({})
   const [loaded, setLoaded] = useState(false)
 
   useEffect(() => {
-    // Get Last post from a author
     const start = () => {
       const { nostrKeyPair } = bchWalletState
-
       const psf = 'wss://nostr-relay.psfoundation.info'
 
       const pool = RelayPool([psf])
       pool.on('open', relay => {
-        relay.subscribe('subid', { limit: 10, kinds: [0], authors: [nostrKeyPair.pubHex] })
+        relay.subscribe('subid', { limit: 5, kinds: [0], authors: [nostrKeyPair.pubHex] })
       })
 
       pool.on('eose', relay => {
@@ -34,7 +33,9 @@ function ProfileRead (props) {
 
       pool.on('event', (relay, subId, ev) => {
         console.log('Received event:', ev)
-        setPosts(currentPosts => [...currentPosts, ev])
+        const profile = JSON.parse(ev.content)
+        setPost(profile)
+        setProfile(profile)
       })
 
       setLoaded(true)
@@ -43,29 +44,57 @@ function ProfileRead (props) {
     if (!loaded) {
       start()
     }
-  }, [bchWalletState, loaded])
-
-  const handleAccordionChange = (key) => {
-    setAccordionKey(key)
-  }
+  }, [bchWalletState, loaded, setProfile])
 
   return (
-    <Container className='mt-4'>
-      <Accordion activeKey={accordionKey} onSelect={handleAccordionChange}>
-        <Accordion.Item eventKey='0'>
-          <Accordion.Header>Profile </Accordion.Header>
-          <Accordion.Body style={{ wordBreak: 'break-word' }}>
-            {posts.map((post, index) => (
-              <div key={index}>
-                <span>{post.content}</span>
-              </div>
-            ))}
-            {!posts.length && loaded && (
-              <span>Posts not found</span>
-            )}
-          </Accordion.Body>
-        </Accordion.Item>
-      </Accordion>
+    <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>
+        </div>
+        <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>
+          <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'>
+                {`${bchWalletState.nostrKeyPair.npub.slice(0, 8)}...${bchWalletState.nostrKeyPair.npub.slice(-5)}`}
+              </span>
+              <span className='d-none d-md-inline'>
+                {bchWalletState.nostrKeyPair.npub}
+              </span>
+            </span>
+            <CopyOnClick walletProp='npub' appData={props.appData} value={bchWalletState.nostrKeyPair.npub} />
+          </div>
+          <div className='fs-6 text-secondary'>{post.about}</div>
+        </div>
+        <div className='d-flex gap-2 align-items-center flex-wrap justify-content-center'>
+          <Button
+            variant='outline-danger'
+            className='px-3 px-md-4 py-2 rounded-pill fw-semibold'
+            style={{ minWidth: '120px' }}
+          >
+            <i className='bi bi-person-plus me-2' />
+            Follow
+          </Button>
+          <Button
+            variant='primary'
+            className='px-3 px-md-4 py-2 rounded-pill fw-semibold'
+            style={{ minWidth: '120px' }}
+          >
+            <i className='bi bi-chat-dots me-2' />
+            Message
+          </Button>
+        </div>
+      </div>
     </Container>
   )
 }

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

@@ -3,16 +3,15 @@
  */
 // Global npm libraries
 import React, { useEffect, useState } from 'react'
-import { Container } from 'react-bootstrap'
-
-import Accordion from 'react-bootstrap/Accordion'
+import { Container, Card } from 'react-bootstrap'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faUser } from '@fortawesome/free-solid-svg-icons'
 
 import { RelayPool } from 'nostr'
 
 function PublicRead (props) {
   const { bchWalletState } = props.appData
   const [posts, setPosts] = useState([])
-  const [accordionKey, setAccordionKey] = useState(null)
   const [loaded, setLoaded] = useState(false)
 
   useEffect(() => {
@@ -45,28 +44,48 @@ function PublicRead (props) {
     }
   }, [bchWalletState, loaded])
 
-  const handleAccordionChange = (key) => {
-    setAccordionKey(key)
-  }
-
   return (
     <Container className='mt-4'>
-      <Accordion activeKey={accordionKey} onSelect={handleAccordionChange}>
-        <Accordion.Item eventKey='0'>
-          <Accordion.Header>Public Post   (  {posts.length} post found  )</Accordion.Header>
-          <Accordion.Body style={{ wordBreak: 'break-word' }}>
-            {posts.map((post, index) => (
-              <div key={index}>
-                <span>{post.content}</span>
-                <hr />
+      <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'>{props.profile?.name}</div>
+                  <small className='text-muted'>
+                    {`${bchWalletState.nostrKeyPair.npub.slice(0, 8)}...${bchWalletState.nostrKeyPair.npub.slice(-5)}`}
+                  </small>
+                </div>
+                <small className='text-muted'>
+                  {new Date(post.created_at * 1000).toLocaleString()}
+                </small>
               </div>
-            ))}
-            {!posts.length && loaded && (
-              <span>Not Post Found!</span>
-            )}
-          </Accordion.Body>
-        </Accordion.Item>
-      </Accordion>
+              <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>
+        )}
+      </div>
     </Container>
   )
 }