refactor: replace useNostrEvents with useSubscribe in GlobalFeed and update event type to NDKEvent in KIND20Card, ViewCopyButton, and ViewRawButton

components/GlobalFeed.tsx

@@ -3,17 +3,29 @@ import KIND20Card from "./KIND20Card";
 import { getImageUrl } from "@/utils/utils";
 import { useState, useRef } from "react";
 import { Button } from "@/components/ui/button";
+import { useSubscribe } from "@nostr-dev-kit/ndk-hooks";
 
 const GlobalFeed: React.FC = () => {
   const now = useRef(new Date());
   const [limit, setLimit] = useState(20);
 
-  const { events, isLoading } = useNostrEvents({
-    filter: {
-      limit: limit,
-      kinds: [20],
-    },
-  });
+  // const { events, isLoading } = useNostrEvents({
+  //   filter: {
+  //     limit: limit,
+  //     kinds: [20],
+  //   },
+  // });
+
+  const events = useSubscribe(
+    [
+      {
+        limit: limit,
+        kinds: [20],
+      }
+    ],
+    undefined,
+    [limit]
+  ).events;
 
   const loadMore = () => {
     setLimit(prevLimit => prevLimit + 20);
@@ -40,11 +52,9 @@ const GlobalFeed: React.FC = () => {
           );
         })}
       </div>
-      {!isLoading && (
-        <div className="flex justify-center p-4">
-          <Button className="w-full md:w-auto" onClick={loadMore}>Load More</Button>
-        </div>
-      )}
+      <div className="flex justify-center p-4">
+        <Button className="w-full md:w-auto" onClick={loadMore}>Load More</Button>
+      </div>
     </>
   );
 }

components/KIND20Card.tsx

@@ -14,7 +14,7 @@ import ViewCopyButton from "./ViewCopyButton"
 import type { Event as NostrEvent } from "nostr-tools"
 import ZapButton from "./ZapButton"
 import Image from "next/image"
-import { useProfileValue } from "@nostr-dev-kit/ndk-hooks"
+import { NDKEvent, useProfileValue } from "@nostr-dev-kit/ndk-hooks"
 
 interface KIND20CardProps {
   pubkey: string
@@ -22,7 +22,7 @@ interface KIND20CardProps {
   image: string
   eventId: string
   tags: string[][]
-  event: NostrEvent
+  event: NDKEvent
   showViewNoteCardButton: boolean
 }
 

components/ViewCopyButton.tsx

@@ -15,13 +15,13 @@ import { Input } from "./ui/input";
 import React, { useRef } from 'react';
 import { useToast } from "./ui/use-toast";
 import { Event as NostrEvent, nip19 } from "nostr-tools";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
 
 interface ViewCopyButtonProps {
-    event: NostrEvent;
+    event: NDKEvent;
 }
 
 export default function ViewCopyButton({ event }: ViewCopyButtonProps) {
-    const jsonEvent = JSON.stringify(event, null, 2);
     const inputRef = useRef(null);
     const inputRefID = useRef(null);
     const { toast } = useToast()

components/ViewRawButton.tsx

@@ -12,9 +12,10 @@ import {
 import { Textarea } from "./ui/textarea";
 import { CodeIcon } from "@radix-ui/react-icons";
 import { Event as NostrEvent } from "nostr-tools";
+import { NDKEvent } from "@nostr-dev-kit/ndk";
 
 interface ViewRawButtonProps {
-    event: NostrEvent;
+    event: NDKEvent;
 }
 
 export default function ViewRawButton({ event }: ViewRawButtonProps) {
@@ -28,7 +29,7 @@ export default function ViewRawButton({ event }: ViewRawButtonProps) {
                     <DrawerTitle>Raw Event</DrawerTitle>
                     <DrawerDescription>This shows the raw event data.</DrawerDescription>
                 </DrawerHeader>
-                <Textarea rows={20} disabled>{JSON.stringify(event, null, 2)}</Textarea>
+                <Textarea rows={20} disabled>{JSON.stringify(event.rawEvent(), null, 2)}</Textarea>
                 <DrawerFooter>
                     <DrawerClose asChild>
                         <div>