refectored rendering for new event btn and list page

app/(app)/app/_components/NewEventButton.tsx

@@ -0,0 +1,17 @@
+import { useModal } from "@/app/_providers/modal/provider";
+import NewEventModal from "@/components/Modals/NewEvent";
+import { RiAddFill } from "react-icons/ri";
+import { Button } from "@/components/ui/button";
+
+export default function NewEventButton() {
+  const modal = useModal();
+  return (
+    <Button
+      onClick={() => modal?.show(<NewEventModal />)}
+      size={"icon"}
+      className="h-[50px] w-[50px]"
+    >
+      <RiAddFill className="h-[32px] w-[32px]" />
+    </Button>
+  );
+}

app/(app)/app/page.tsx

@@ -1,10 +1,8 @@
 import dynamic from "next/dynamic";
-import Link from "next/link";
 import ExploreCreators from "./_sections/ExploreCreators";
 import LongFormContentSection from "./_sections/LongFormContent";
 import BecomeACreator from "./_sections/BecomeACreator";
-import { RiAddFill } from "react-icons/ri";
-import { Button } from "@/components/ui/button";
+
 const LiveStreamingSection = dynamic(
   () => import("./_sections/LiveStreaming"),
   {
@@ -17,6 +15,10 @@ const FeaturedListsSection = dynamic(
     ssr: false,
   },
 );
+const NewEventButton = dynamic(() => import("./_components/NewEventButton"), {
+  ssr: false,
+});
+
 export default function Page() {
   return (
     <div className="relative space-y-6 px-5 pt-5 sm:pt-7">
@@ -26,11 +28,7 @@ export default function Page() {
       <LiveStreamingSection />
       <FeaturedListsSection />
       <div className="z-overlay- fixed bottom-[calc(var(--bottom-nav-height)_+_20px)] right-[20px] sm:hidden">
-        <Link href="/article/new">
-          <Button size={"icon"} className="h-[50px] w-[50px]">
-            <RiAddFill className="h-[32px] w-[32px]" />
-          </Button>
-        </Link>
+        <NewEventButton />
       </div>
     </div>
   );

app/(app)/list/[naddr]/_components/Header.tsx

@@ -18,6 +18,7 @@ import {
   updateListUsersFromZaps,
 } from "@/lib/actions/zap";
 import { useModal } from "@/app/_providers/modal/provider";
+import { type NDKEvent } from "@nostr-dev-kit/ndk";
 
 const EditListModal = dynamic(() => import("@/components/Modals/EditList"), {
   ssr: false,
@@ -26,7 +27,7 @@ const CreateEventModal = dynamic(() => import("@/components/Modals/NewEvent"), {
   ssr: false,
 });
 
-export default function Header({ naddr }: { naddr: string }) {
+export default function Header({ event }: { event: NDKEvent }) {
   const { currentUser } = useCurrentUser();
   const modal = useModal();
   const { ndk } = useNDK();
@@ -34,30 +35,9 @@ export default function Header({ naddr }: { naddr: string }) {
   const [checkingPayment, setCheckingPayment] = useState(false);
   const [hasValidPayment, setHasValidPayment] = useState(false);
   const [syncingUsers, setSyncingUsers] = useState(false);
-  const { type, data } = nip19.decode(naddr);
-  console.log("PASSED", naddr, data);
-  if (type !== "naddr") {
-    throw new Error("Invalid list");
-  }
-  const { identifier, kind, pubkey } = data;
+  const pubkey = event.pubkey;
   const { profile } = useProfile(pubkey);
-  const { events } = useEvents({
-    filter: {
-      authors: [pubkey],
-      kinds: [kind],
-      ["#d"]: [identifier],
-      limit: 1,
-    },
-  });
-  const event = events[0];
 
-  if (!event) {
-    return (
-      <div className="center pt-20 text-primary">
-        <Spinner />
-      </div>
-    );
-  }
   const noteIds = getTagsValues("e", event.tags).filter(Boolean);
   console.log("notes", event.tags);
   const title =
@@ -86,14 +66,14 @@ export default function Header({ naddr }: { naddr: string }) {
   }, [isMember, currentUser]);
 
   async function handleCheckPayment() {
-    if (!event) return;
+    if (!event || !currentUser) return;
     setCheckingPayment(true);
     console.log("Checking payment");
     try {
       const result = await checkPayment(
         ndk!,
         event.tagId(),
-        currentUser!.hexpubkey,
+        currentUser.pubkey,
         rawEvent,
       );
       console.log("Payment result", result);
@@ -119,6 +99,13 @@ export default function Header({ naddr }: { naddr: string }) {
       setSyncingUsers(false);
     }
   }
+  if (!event) {
+    return (
+      <div className="center pt-20 text-primary">
+        <Spinner />
+      </div>
+    );
+  }
   return (
     <div className="relative overflow-hidden rounded-[1rem] border bg-muted p-[0.5rem] @container">
       <div className="overflow-hidden rounded-[0.5rem] p-0">

app/(app)/list/[naddr]/page.tsx

@@ -50,7 +50,7 @@ export default function ListPage({
 
   return (
     <div className="relative mx-auto max-w-5xl space-y-4 p-2 sm:p-4">
-      <Header naddr={naddr} />
+      <Header event={event} />
       <div className="relative overflow-hidden rounded-[1rem] border bg-muted p-[0.5rem] @container">
         <div className="space-y-3 overflow-hidden rounded-[0.5rem] p-0">
           <Feed