post card looking nice, and added mine PoW

client/package.json

@@ -11,7 +11,7 @@
     "@types/node": "^17.0.45",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
-    "nostr-tools": "^1.14.2",
+    "nostr-tools": "latest",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.15.0",

client/src/App.tsx

@@ -4,6 +4,12 @@ import './App.css';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import Home from './components/Home';
 
+declare global {
+  interface Window {
+    nostr?: any;
+  }
+}
+
 function App() {
   return (
     <Router>

client/src/components/Home.tsx

@@ -12,7 +12,7 @@ interface Event {
   // Add other fields if necessary
 }
 
-const relay = relayInit('wss://relay.damus.io');
+const relay = relayInit('wss://nostr.lu.ke');
 
 const Home = () => {
   // Define the type of the state variable
@@ -24,7 +24,7 @@ const Home = () => {
 
       const eventList = await relay.list([
         {
-          ids: ['0000'],
+          ids: ['00'],
           kinds: [1],
           limit: 10,
         },
@@ -46,12 +46,12 @@ const Home = () => {
     <main className="bg-black text-white min-h-screen">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
         <NewThreadCard />
-        {events.map((event, index) => (
+        {events.sort((a, b) => a.created_at - b.created_at).map((event, index) => (
           <PostCard key={index} content={event.content} />
         ))}
       </div>
     </main>
-    <Header />
+    {/* <Header /> */}
     </>
   );
 };

client/src/components/PostCard/NewThreadCard.tsx

@@ -1,7 +1,65 @@
 import CardContainer from './CardContainer';
 import { ArrowUpTrayIcon } from '@heroicons/react/24/outline';
+import { useState } from 'react';
+import { generatePrivateKey, getPublicKey, finishEvent, relayInit} from 'nostr-tools';
+import { minePow } from '../../func/mine';
+
+const difficulty = 10
 
 const NewThreadCard = () => {
+  const [comment, setComment] = useState("");
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    let sk = generatePrivateKey()
+    let pk = getPublicKey(sk)
+
+    const relay = relayInit('wss://nostr.lu.ke')
+    relay.on('connect', () => {
+      console.log(`connected to ${relay.url}`)
+    })
+    relay.on('error', () => {
+      console.log(`failed to connect to ${relay.url}`)
+    })
+
+    await relay.connect()
+
+    try {
+      const event = minePow({
+        kind: 1,
+        tags: [],
+        content: 'Hello, world!',
+        created_at: Math.floor(Date.now() / 1000), //needs to be date To Unix
+        pubkey: pk,
+      }, difficulty)
+
+      const signedEvent = finishEvent(event, sk)
+      await relay.publish(signedEvent)
+      console.log(signedEvent.id)
+
+    } catch (error) {
+      setComment(comment + " " + error);
+    }
+    relay.close()
+  };
+
+  // async function attachFile(file_input: File | null) {
+  //   try {
+  //     if (file_input) {
+  //       const rx = await NostrImg(file_input);
+  //       if (rx.url) {
+  //         setComment(comment + " " + rx.url);
+  //       } else if (rx?.error) {
+  //         setComment(comment + " " + rx.error);
+  //       }
+  //     }
+  //   } catch (error: unknown) {
+  //     if (error instanceof Error) {
+  //       setComment(comment + " " + error?.message);
+  //     }
+  //   }
+  // }
+
   return (
     <>
       <CardContainer>
@@ -10,6 +68,7 @@ const NewThreadCard = () => {
             method="post" 
             encType="multipart/form-data"
             className=""
+            onSubmit={handleSubmit}
           >
             <input type="hidden" name="MAX_FILE_SIZE" defaultValue={4194304} />
             <div id="togglePostFormLink" className="text-lg font-semibold">

client/src/components/PostCard/PostCard.tsx

@@ -1,11 +1,42 @@
 import CardContainer from './CardContainer';
 
+const colorCombos = [
+  'from-red-400 to-yellow-500',
+  'from-green-400 to-blue-500',
+  'from-purple-400 to-pink-500',
+  'from-yellow-400 to-orange-500',
+  'from-indigo-400 to-purple-500',
+  'from-pink-400 to-red-500',
+  'from-blue-400 to-indigo-500',
+  'from-orange-400 to-red-500',
+  'from-teal-400 to-green-500',
+  'from-cyan-400 to-teal-500',
+  'from-lime-400 to-green-500',
+  'from-amber-400 to-orange-500',
+  'from-rose-400 to-pink-500',
+  'from-violet-400 to-purple-500',
+  'from-sky-400 to-cyan-500'
+];
+
+function getRandomElement(array: string[]): string {
+  const index = Math.floor(Math.random() * array.length);
+  return array[index];
+}
+const randomCombo = getRandomElement(colorCombos);
+
 const PostCard = ({ content }: { content: string }) => {
 
   return (
     <>
       <CardContainer>
         <div className="flex flex-col">
+          <div className="flex justify-between items-center">
+            <div className="flex items-center">
+            <div className={`h-6 w-6 bg-gradient-to-r ${getRandomElement(colorCombos)} rounded-full`} />
+              <div className="ml-2 text-lg font-semibold">Anonymous</div>
+            </div>
+            <div className="text-sm font-semibold">1 day ago</div>
+            </div>
           <div className="mr-2 flex flex-col break-words">
             {content}
           </div>

client/src/func/mine.ts

@@ -0,0 +1,52 @@
+import { type UnsignedEvent, type Event, getEventHash } from 'nostr-tools'
+
+/** Get POW difficulty from a Nostr hex ID. */
+export function getPow(hex: string): number {
+  let count = 0
+
+  for (let i = 0; i < hex.length; i++) {
+    const nibble = parseInt(hex[i], 16)
+    if (nibble === 0) {
+      count += 4
+    } else {
+      count += Math.clz32(nibble) - 28
+      break
+    }
+  }
+
+  return count
+}
+
+/**
+ * Mine an event with the desired POW. This function mutates the event.
+ * Note that this operation is synchronous and should be run in a worker context to avoid blocking the main thread.
+ *
+ * Adapted from Snort: https://git.v0l.io/Kieran/snort/src/commit/4df6c19248184218c4c03728d61e94dae5f2d90c/packages/system/src/pow-util.ts#L14-L36
+ */
+export function minePow<K extends number>(unsigned: UnsignedEvent<K>, difficulty: number): Omit<Event<K>, 'sig'> {
+  let count = 0
+
+  const event = unsigned as Omit<Event<K>, 'sig'>
+  const tag = ['nonce', count.toString(), difficulty.toString()]
+
+  event.tags.push(tag)
+
+  while (true) {
+    const now = Math.floor(new Date().getTime() / 1000)
+
+    if (now !== event.created_at) {
+      count = 0
+      event.created_at = now
+    }
+
+    tag[1] = (++count).toString()
+
+    event.id = getEventHash(event)
+
+    if (getPow(event.id) >= difficulty) {
+      break
+    }
+  }
+
+  return event
+}