removed nostr-react

package.json

@@ -26,7 +26,6 @@
     "nanostores": "^0.7.4",
     "next": "^13.2.1",
     "next-remove-imports": "^1.0.10",
-    "nostr-react": "^0.6.4",
     "nostr-relaypool": "^0.5.3",
     "nostr-tools": "^1.7.1",
     "qrcode.react": "^3.1.0",

pnpm-lock.yaml

@@ -32,7 +32,6 @@ specifiers:
   nanostores: ^0.7.4
   next: ^13.2.1
   next-remove-imports: ^1.0.10
-  nostr-react: ^0.6.4
   nostr-relaypool: ^0.5.3
   nostr-tools: ^1.7.1
   postcss: ^8.4.21
@@ -67,7 +66,6 @@ dependencies:
   nanostores: 0.7.4
   next: 13.2.1_biqbaboplfbrettd7655fr4n2y
   next-remove-imports: 1.0.10
-  nostr-react: 0.6.4_react@18.2.0
   nostr-relaypool: 0.5.3_ws@8.12.1
   nostr-tools: 1.7.1
   qrcode.react: 3.1.0_react@18.2.0
@@ -3201,49 +3199,6 @@ packages:
     resolution: { integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw== }
     dev: true
 
-  /jotai/1.13.1_react@18.2.0:
-    resolution: { integrity: sha512-RUmH1S4vLsG3V6fbGlKzGJnLrDcC/HNb5gH2AeA9DzuJknoVxSGvvg8OBB7lke+gDc4oXmdVsaKn/xDUhWZ0vw== }
-    engines: { node: '>=12.20.0' }
-    peerDependencies:
-      '@babel/core': '*'
-      '@babel/template': '*'
-      jotai-devtools: '*'
-      jotai-immer: '*'
-      jotai-optics: '*'
-      jotai-redux: '*'
-      jotai-tanstack-query: '*'
-      jotai-urql: '*'
-      jotai-valtio: '*'
-      jotai-xstate: '*'
-      jotai-zustand: '*'
-      react: '>=16.8'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      '@babel/template':
-        optional: true
-      jotai-devtools:
-        optional: true
-      jotai-immer:
-        optional: true
-      jotai-optics:
-        optional: true
-      jotai-redux:
-        optional: true
-      jotai-tanstack-query:
-        optional: true
-      jotai-urql:
-        optional: true
-      jotai-valtio:
-        optional: true
-      jotai-xstate:
-        optional: true
-      jotai-zustand:
-        optional: true
-    dependencies:
-      react: 18.2.0
-    dev: false
-
   /js-sdsl/4.3.0:
     resolution: { integrity: sha512-mifzlm2+5nZ+lEcLJMoBK0/IH/bDg8XnJfd/Wq6IP+xoCjLZsTOnV2QpxlVbX9bMnkl5PdEjNtBJ9Cj1NjifhQ== }
     dev: true
@@ -3970,29 +3925,6 @@ packages:
     engines: { node: '>=0.10.0' }
     dev: true
 
-  /nostr-react/0.6.4_react@18.2.0:
-    resolution: { integrity: sha512-esRgmhTP5kPQ8ufs8cFAQxxJtMmzuba/k2QfXevG/ejHP3IMa41pb82qi8V0aPzY3KJ0Nr54x0OSa39d2InKzA== }
-    engines: { node: '>=12' }
-    peerDependencies:
-      react: '>=16'
-    dependencies:
-      jotai: 1.13.1_react@18.2.0
-      nostr-tools: 1.7.1
-      react: 18.2.0
-    transitivePeerDependencies:
-      - '@babel/core'
-      - '@babel/template'
-      - jotai-devtools
-      - jotai-immer
-      - jotai-optics
-      - jotai-redux
-      - jotai-tanstack-query
-      - jotai-urql
-      - jotai-valtio
-      - jotai-xstate
-      - jotai-zustand
-    dev: false
-
   /nostr-relaypool/0.5.3_ws@8.12.1:
     resolution: { integrity: sha512-1INGKleOTuUTFUs3RnnZrew4+G/idLUewh44WBtmTTJ9g+kRiQtMMaBGTVUpf9621nBNleEVOB8p3XSNcaX3FQ== }
     dependencies:

src/components/navigatorBar/createPost.tsx

@@ -1,18 +1,23 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { RelayContext } from '@components/contexts/relay';
+
+import { dateToUnix } from '@utils/getDate';
+
 import * as Dialog from '@radix-ui/react-dialog';
 import { useLocalStorage } from '@rehooks/local-storage';
 import * as commands from '@uiw/react-md-editor/lib/commands';
 import dynamic from 'next/dynamic';
-import { dateToUnix, useNostr } from 'nostr-react';
 import { getEventHash, signEvent } from 'nostr-tools';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 
 const MDEditor = dynamic(() => import('@uiw/react-md-editor').then((mod) => mod.default), {
   ssr: false,
 });
 
 export default function CreatePost() {
-  const { publish } = useNostr();
+  const relayPool: any = useContext(RelayContext);
+  const [relays]: any = useLocalStorage('relays');
+
   const [value, setValue] = useState('');
 
   const [currentUser]: any = useLocalStorage('current-user');
@@ -40,11 +45,10 @@ export default function CreatePost() {
           pubkey: pubkey,
           tags: [],
         };
-
         event.id = getEventHash(event);
         event.sig = signEvent(event, privkey);
 
-        publish(event);
+        relayPool.publish(event, relays);
         setValue('');
       }
     },

src/components/note/atoms/reaction.tsx

@@ -1,12 +1,17 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { RelayContext } from '@components/contexts/relay';
+
+import { dateToUnix } from '@utils/getDate';
+
 import { HeartFilledIcon, HeartIcon } from '@radix-ui/react-icons';
 import { useLocalStorage } from '@rehooks/local-storage';
-import { dateToUnix, useNostr, useNostrEvents } from 'nostr-react';
 import { getEventHash, signEvent } from 'nostr-tools';
-import { useState } from 'react';
+import { useContext, useState } from 'react';
 
 export default function Reaction({ eventID, eventPubkey }: { eventID: string; eventPubkey: string }) {
-  const { publish } = useNostr();
+  const relayPool: any = useContext(RelayContext);
+  const [relays]: any = useLocalStorage('relays');
+
   const [reaction, setReaction] = useState(0);
   const [isReact, setIsReact] = useState(false);
 
@@ -14,25 +19,26 @@ export default function Reaction({ eventID, eventPubkey }: { eventID: string; ev
   const pubkey = currentUser.pubkey;
   const privkey = currentUser.privkey;
 
-  const { onEvent } = useNostrEvents({
-    filter: {
-      '#e': [eventID],
-      since: 0,
-      kinds: [7],
-      limit: 20,
-    },
-  });
-
-  onEvent((rawMetadata) => {
-    try {
-      const content = rawMetadata.content;
-      if (content === '🤙' || content === '+') {
-        setReaction(reaction + 1);
+  relayPool.subscribe(
+    [
+      {
+        '#e': [eventID],
+        since: 0,
+        kinds: [7],
+        limit: 10,
+      },
+    ],
+    relays,
+    (event: any) => {
+      if (event.content === '🤙' || event.content === '+') {
+        //setReaction(reaction + 1);
       }
-    } catch (err) {
-      console.error(err, rawMetadata);
+    },
+    undefined,
+    (events: any, relayURL: any) => {
+      console.log(events, relayURL);
     }
-  });
+  );
 
   const handleReaction = (e: any) => {
     e.stopPropagation();
@@ -50,7 +56,7 @@ export default function Reaction({ eventID, eventPubkey }: { eventID: string; ev
     event.id = getEventHash(event);
     event.sig = signEvent(event, privkey);
 
-    publish(event);
+    relayPool.publish(event, relays);
 
     setIsReact(true);
     setReaction(reaction + 1);

src/components/note/atoms/reply.tsx

@@ -1,22 +1,17 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ChatBubbleIcon } from '@radix-ui/react-icons';
-import { useNostrEvents } from 'nostr-react';
+import { useState } from 'react';
 
 export default function Reply({ eventID }: { eventID: string }) {
-  const { events } = useNostrEvents({
-    filter: {
-      '#e': [eventID],
-      since: 0,
-      kinds: [1],
-      limit: 10,
-    },
-  });
+  console.log(eventID);
+  const [count] = useState(0);
 
   return (
     <button className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
       <div className="rounded-lg p-1 group-hover:bg-zinc-600">
         <ChatBubbleIcon className="h-4 w-4 group-hover:text-orange-400" />
       </div>
-      <span>{events.length || 0}</span>
+      <span>{count}</span>
     </button>
   );
 }

src/components/note/atoms/user.tsx

@@ -1,42 +1,18 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { DatabaseContext } from '@components/contexts/database';
-import { RelayContext } from '@components/contexts/relay';
 import { ImageWithFallback } from '@components/imageWithFallback';
 
 import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
-import useLocalStorage from '@rehooks/local-storage';
 import Avatar from 'boring-avatars';
 import { memo, useCallback, useContext, useEffect, useState } from 'react';
 import Moment from 'react-moment';
 
 export const User = memo(function User({ pubkey, time }: { pubkey: string; time: any }) {
   const { db }: any = useContext(DatabaseContext);
-  const relayPool: any = useContext(RelayContext);
-
-  const [relays] = useLocalStorage('relays');
   const [profile, setProfile] = useState({ picture: null, name: null, username: null });
 
-  relayPool.subscribe(
-    [
-      {
-        authors: [pubkey],
-        kinds: [0],
-      },
-    ],
-    relays,
-    (event: any) => {
-      if (profile.picture === null || profile.name === null) {
-        insertCacheProfile(event);
-      }
-    },
-    undefined,
-    (events: any, relayURL: any) => {
-      console.log(events, relayURL);
-    }
-  );
-
   const insertCacheProfile = useCallback(
     async (event) => {
       const metadata: any = JSON.parse(event.content);
@@ -57,10 +33,19 @@ export const User = memo(function User({ pubkey, time }: { pubkey: string; time:
       .then((res) => {
         if (res[0] !== undefined) {
           setProfile(JSON.parse(res[0].metadata));
+        } else {
+          fetch(`https://rbr.bio/${pubkey}/metadata.json`).then((res) =>
+            res.json().then((res) => {
+              // update state
+              setProfile(JSON.parse(res.content));
+              // save profile to database
+              insertCacheProfile(res);
+            })
+          );
         }
       })
       .catch(console.error);
-  }, [getCacheProfile]);
+  }, [getCacheProfile, insertCacheProfile, pubkey]);
 
   return (
     <div className="relative flex items-start gap-4">

src/components/note/atoms/userRepost.tsx

@@ -1,30 +1,19 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { truncate } from '@utils/truncate';
 
-import { useNostrEvents } from 'nostr-react';
-import { memo, useState } from 'react';
+import { memo, useEffect, useState } from 'react';
 
 export const UserRepost = memo(function UserRepost({ pubkey }: { pubkey: string }) {
   const [profile, setProfile] = useState({ picture: null, name: null });
 
-  const { onEvent } = useNostrEvents({
-    filter: {
-      authors: [pubkey],
-      kinds: [0],
-    },
-  });
-
-  // #TODO: save response to DB
-  onEvent((rawMetadata) => {
-    try {
-      const metadata: any = JSON.parse(rawMetadata.content);
-      if (metadata) {
-        setProfile(metadata);
-      }
-    } catch (err) {
-      console.error(err, rawMetadata);
-    }
-  });
+  useEffect(() => {
+    fetch(`https://rbr.bio/${pubkey}/metadata.json`).then((res) =>
+      res.json().then((res) => {
+        // update state
+        setProfile(JSON.parse(res.content));
+      })
+    );
+  }, [pubkey]);
 
   return (
     <div className="text-zinc-400">

src/components/note/atoms/userWithUsername.tsx

@@ -5,49 +5,18 @@ import { truncate } from '@utils/truncate';
 
 import { DotsHorizontalIcon } from '@radix-ui/react-icons';
 import Avatar from 'boring-avatars';
-import { useNostrEvents } from 'nostr-react';
 import { memo, useEffect, useState } from 'react';
-import Database from 'tauri-plugin-sql-api';
-
-const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
 
 export const UserWithUsername = memo(function UserWithUsername({ pubkey }: { pubkey: string }) {
   const [profile, setProfile] = useState({ picture: null, name: null, username: null });
 
-  const { onEvent } = useNostrEvents({
-    filter: {
-      authors: [pubkey],
-      kinds: [0],
-    },
-  });
-
-  onEvent(async (rawMetadata) => {
-    try {
-      const metadata: any = JSON.parse(rawMetadata.content);
-      if (profile.picture === null || profile.name === null) {
-        setProfile(metadata);
-        await db.execute(`INSERT OR IGNORE INTO cache_profiles (pubkey, metadata) VALUES ("${pubkey}", '${JSON.stringify(metadata)}')`);
-      } else {
-        return;
-      }
-    } catch (err) {
-      console.error(err, rawMetadata);
-    }
-  });
-
   useEffect(() => {
-    const initialProfile = async () => {
-      const result: any = await db.select(`SELECT metadata FROM cache_profiles WHERE pubkey = "${pubkey}"`);
-      return result;
-    };
-
-    initialProfile()
-      .then((res) => {
-        if (res[0] !== undefined) {
-          setProfile(JSON.parse(res[0].metadata));
-        }
+    fetch(`https://rbr.bio/${pubkey}/metadata.json`).then((res) =>
+      res.json().then((res) => {
+        // update state
+        setProfile(JSON.parse(res.content));
       })
-      .catch(console.error);
+    );
   }, [pubkey]);
 
   return (

src/components/note/modal/index.tsx

@@ -1,18 +1,33 @@
+import { RelayContext } from '@components/contexts/relay';
 import { Content } from '@components/note/content';
 import NoteReply from '@components/note/modal/noteReply';
 
-import { useNostrEvents } from 'nostr-react';
-import { memo } from 'react';
+import useLocalStorage from '@rehooks/local-storage';
+import { memo, useContext, useState } from 'react';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 const Modal = ({ event }: { event: any }) => {
-  const { events } = useNostrEvents({
-    filter: {
-      '#e': [event.id],
-      since: event.created_at,
-      kinds: [1],
+  const relayPool: any = useContext(RelayContext);
+  const [relays]: any = useLocalStorage('relays');
+  const [events, setEvents] = useState([]);
+
+  relayPool.subscribe(
+    [
+      {
+        '#e': [event.id],
+        since: event.created_at,
+        kinds: [1],
+      },
+    ],
+    relays,
+    (event: any) => {
+      setEvents((events) => [event, ...events]);
     },
-  });
+    undefined,
+    (events: any, relayURL: any) => {
+      console.log(events, relayURL);
+    }
+  );
 
   return (
     <div className="flex min-h-full items-center justify-center p-4">

src/components/note/repost.tsx

@@ -1,13 +1,14 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { RelayContext } from '@components/contexts/relay';
 import { UserRepost } from '@components/note/atoms/userRepost';
 import { Content } from '@components/note/content';
 import { Placeholder } from '@components/note/placeholder';
 
 import * as Dialog from '@radix-ui/react-dialog';
 import { LoopIcon } from '@radix-ui/react-icons';
+import useLocalStorage from '@rehooks/local-storage';
 import dynamic from 'next/dynamic';
-import { useNostrEvents } from 'nostr-react';
-import { memo } from 'react';
+import { memo, useContext, useState } from 'react';
 
 const Modal = dynamic(() => import('@components/note/modal'), {
   ssr: false,
@@ -15,13 +16,27 @@ const Modal = dynamic(() => import('@components/note/modal'), {
 });
 
 export const Repost = memo(function Repost({ root, user }: { root: any; user: string }) {
-  const { events } = useNostrEvents({
-    filter: {
-      ids: [root[0][1]],
-      since: 0,
-      kinds: [1],
+  const relayPool: any = useContext(RelayContext);
+  const [relays]: any = useLocalStorage('relays');
+  const [events, setEvents] = useState([]);
+
+  relayPool.subscribe(
+    [
+      {
+        ids: [root[0][1]],
+        since: 0,
+        kinds: [1],
+      },
+    ],
+    relays,
+    (event: any) => {
+      setEvents((events) => [event, ...events]);
     },
-  });
+    undefined,
+    (events: any, relayURL: any) => {
+      console.log(events, relayURL);
+    }
+  );
 
   if (events !== null && Object.keys(events).length > 0) {
     return (
@@ -38,9 +53,7 @@ export const Repost = memo(function Repost({ root, user }: { root: any; user: st
           </div>
           <Dialog.Portal>
             <Dialog.Overlay className="fixed inset-0 bg-black bg-opacity-30 backdrop-blur-sm data-[state=open]:animate-overlayShow" />
-            <Dialog.Content className="fixed inset-0 overflow-y-auto">
-              {events[0].content && <Modal event={events[0]} />}
-            </Dialog.Content>
+            <Dialog.Content className="fixed inset-0 overflow-y-auto">{events[0].content && <Modal event={events[0]} />}</Dialog.Content>
           </Dialog.Portal>
         </Dialog.Trigger>
       </Dialog.Root>

src/pages/profile/update.tsx

@@ -2,11 +2,14 @@
 import BaseLayout from '@layouts/baseLayout';
 import UserLayout from '@layouts/userLayout';
 
+import { RelayContext } from '@components/contexts/relay';
+
+import { dateToUnix } from '@utils/getDate';
+
 import { useLocalStorage } from '@rehooks/local-storage';
 import { useRouter } from 'next/router';
-import { dateToUnix, useNostr } from 'nostr-react';
 import { getEventHash, signEvent } from 'nostr-tools';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useState } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useState } from 'react';
 import { useForm } from 'react-hook-form';
 import Database from 'tauri-plugin-sql-api';
 
@@ -22,8 +25,10 @@ type FormValues = {
 
 // TODO: update the design
 export default function Page() {
+  const relayPool: any = useContext(RelayContext);
+  const [relays]: any = useLocalStorage('relays');
+
   const router = useRouter();
-  const { publish } = useNostr();
   const [loading, setLoading] = useState(false);
 
   const [currentUser]: any = useLocalStorage('current-user');
@@ -46,9 +51,11 @@ export default function Page() {
       pubkey: currentUser.pubkey,
       tags: [],
     };
+
     event.id = getEventHash(event);
     event.sig = signEvent(event, currentUser.privkey);
-    publish(event);
+
+    relayPool.publish(event, relays);
 
     // save account to database
     const db = await Database.load('sqlite:lume.db');