Feature: Move NostrProvider to Layout (#27)

* update global feed to use kind 20 and kind 20 cards (NIP-68 Picture-first feeds) * update profile quick view feed to use kind 20 and kind 20 cards (NIP-68 Picture-first feeds) * refactor: move getImageUrl function to utils for better modularity * show kind 20 notes on note subpage * also show comments on kind 20 events * update follower feed and follower quick view feed to use kind 20 and kind 20 cards (NIP-68 Picture-first feeds) * update profile feed to use kind 20 and kind 20 cards (NIP-68 Picture-first feeds) * update search feed to use kind 20 and kind 20 cards (NIP-68 Picture-first feeds) * update tag feed to use kind 20 and kind 20 cards (NIP-68 Picture-first feeds) * add relay.damus.io * mv NostrProvider to layout
2026-04-17 10:56:48 +02:00 · 2025-01-18 02:26:22 +01:00
parent 2c9bae18f0
commit 5729fd2818
17 changed files with 96 additions and 248 deletions
--- a/lumina/app/dashboard/[pubkey]/page.tsx
+++ b/lumina/app/dashboard/[pubkey]/page.tsx
@@ -2,10 +2,9 @@

 import { useParams } from 'next/navigation'
 import { nip19 } from "nostr-tools";
-import { NostrProvider } from "nostr-react";
 import Statistics from '@/components/dashboard/Statistics';

-const DashboardPage: React.FC= ({ }) => {
+const DashboardPage: React.FC = ({ }) => {

  const params = useParams()
  let pubkey = params.pubkey
@@ -16,16 +15,9 @@ const DashboardPage: React.FC= ({ }) => {
    pubkey = nip19.decode(pubkey.toString()).data.toString()
  }

-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
-        <Statistics pubkey={pubkey.toString()} />
-      </NostrProvider>
+      <Statistics pubkey={pubkey.toString()} />
    </>
  );
 }
--- a/lumina/app/feed/page.tsx
+++ b/lumina/app/feed/page.tsx
@@ -8,7 +8,6 @@ import { nip19 } from "nostr-tools";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { SectionIcon, GridIcon } from '@radix-ui/react-icons'
 import TagFeed from "@/components/TagFeed";
-import { NostrProvider } from "nostr-react";
 import FollowerFeed from "@/components/FollowerFeed";
 import ProfileQuickViewFeed from "@/components/ProfileQuickViewFeed";
 import FollowerQuickViewFeed from "@/components/FollowerQuickViewFeed";
@@ -27,36 +26,29 @@ export default function FeedPage() {
  //   pubkey = nip19.decode(pubkey.toString()).data.toString()
  // }

-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
-        <Head>
-          <title>LUMINA.rocks - {pubkey}</title>
-          <meta name="description" content="Yet another nostr web ui" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-        <div className="py-6 px-6">
-          <h2>Follower Feed</h2>
-          <Tabs defaultValue="QuickView">
-            <TabsList>
-              <TabsTrigger value="QuickView"><GridIcon /></TabsTrigger>
-              <TabsTrigger value="ProfileFeed"><SectionIcon /></TabsTrigger>
-            </TabsList>
-            <TabsContent value="QuickView">
-              <FollowerQuickViewFeed pubkey={pubkey || ''} />
-            </TabsContent>
-            <TabsContent value="ProfileFeed">
-              <FollowerFeed pubkey={pubkey || ''} />
-            </TabsContent>
-          </Tabs>
-        </div>
-      </NostrProvider>
+      <Head>
+        <title>LUMINA.rocks - {pubkey}</title>
+        <meta name="description" content="Yet another nostr web ui" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="py-6 px-6">
+        <h2>Follower Feed</h2>
+        <Tabs defaultValue="QuickView">
+          <TabsList>
+            <TabsTrigger value="QuickView"><GridIcon /></TabsTrigger>
+            <TabsTrigger value="ProfileFeed"><SectionIcon /></TabsTrigger>
+          </TabsList>
+          <TabsContent value="QuickView">
+            <FollowerQuickViewFeed pubkey={pubkey || ''} />
+          </TabsContent>
+          <TabsContent value="ProfileFeed">
+            <FollowerFeed pubkey={pubkey || ''} />
+          </TabsContent>
+        </Tabs>
+      </div>
    </>
  );
 }
--- a/lumina/app/global/page.tsx
+++ b/lumina/app/global/page.tsx
@@ -1,33 +1,11 @@
 "use client";

 import GlobalFeed from "@/components/GlobalFeed";
-import { NostrProvider } from "nostr-react";
-
-export default function Home() {
-
-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];

+export default function GlobalFeedPage() {
  return (
-    // <main className="flex min-h-screen flex-col items-center justify-between p-24">
-    // </main>
-    // <NavigationMenu>
-    //   <NavigationMenuList>
-    //     <NavigationMenuItem>
-    //       <Link href="/" legacyBehavior passHref>
-    //         <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-    //           Home
-    //         </NavigationMenuLink>
-    //       </Link>
-    //     </NavigationMenuItem>
-    //   </NavigationMenuList>
-    // </NavigationMenu>
-    <NostrProvider relayUrls={relayUrls} debug={false}>
-      <div className="py-6 px-6">
-        <GlobalFeed />
-      </div>
-    </NostrProvider>
+    <div className="py-6 px-6">
+      <GlobalFeed />
+    </div>
  );
 }
--- a/lumina/app/layout.tsx
+++ b/lumina/app/layout.tsx
@@ -1,7 +1,8 @@
+'use client';
+
 import { Metadata } from "next";
 import "./globals.css";
 import { NostrProvider } from "nostr-react";
-import Head from "next/head";
 import { ThemeProvider } from "@/components/theme-provider";
 import { TopNavigation } from "@/components/headerComponents/TopNavigation";
 import BottomBar from "@/components/BottomBar";
@@ -10,12 +11,6 @@ import { Toaster } from "@/components/ui/toaster"
 import Script from "next/script";
 import Umami from "@/components/Umami";

-export const metadata: Metadata = {
-  title: "LUMINA",
-  description: "An effortless, enjoyable, and innovative way to capture, enhance, and share moments with everyone, decentralized and boundless.",
-  manifest: "/manifest.json",
-};
-
 const inter = Inter({ subsets: ["latin"] });

 export default function RootLayout({
@@ -23,12 +18,20 @@ export default function RootLayout({
 }: Readonly<{
  children: React.ReactNode;
 }>) {
+
+  const relayUrls = [
+    "wss://relay.nostr.band",
+    "wss://relay.damus.io",
+  ];
+
  return (
    <html lang="en">
-      <Head>
+      <head>
        <link rel="icon" href="/icon?<generated>" type="image/png" sizes="32x32" />
        <link rel="manifest" href="/manifest.json" />
-      </Head>
+        <title>LUMINA</title>
+        <meta name="description" content="An effortless, enjoyable, and innovative way to capture, enhance, and share moments with everyone, decentralized and boundless." />
+      </head>
      <body className={inter.className}>
        <ThemeProvider
          attribute="class"
@@ -40,11 +43,13 @@ export default function RootLayout({
          <Toaster />
          <Umami />
          <div className="main-content pb-14">
-            {children}
+            <NostrProvider relayUrls={relayUrls} debug={false}>
+              {children}
+            </NostrProvider>
          </div>
          <BottomBar />
        </ThemeProvider>
      </body>
    </html>
  );
-}
+}
--- a/lumina/app/note/[id]/page.tsx
+++ b/lumina/app/note/[id]/page.tsx
@@ -4,7 +4,6 @@ import Head from "next/head";
 import { useParams } from 'next/navigation'
 import NotePageComponent from "@/components/NotePageComponent";
 import { nip19 } from "nostr-tools";
-import { NostrProvider } from "nostr-react";

 export default function NotePage() {

@@ -14,15 +13,9 @@ export default function NotePage() {
  if (id.includes("note1")) {
    id = nip19.decode(id.toString()).data.toString()
  }
-
-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
+  
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
        <Head>
          <title>LUMINA.rocks - {id}</title>
          <meta name="description" content="Yet another nostr web ui" />
@@ -34,7 +27,6 @@ export default function NotePage() {
            <NotePageComponent id={id.toString()} />
          </div>
        </div>
-      </NostrProvider>
    </>
  );
 }
--- a/lumina/app/notifications/page.tsx
+++ b/lumina/app/notifications/page.tsx
@@ -1,14 +1,13 @@
 'use client';

 import { nip19 } from "nostr-tools";
-import { NostrProvider } from "nostr-react";
 import Notifications from '@/components/Notifications';

-const NotificationsPage: React.FC= ({ }) => {
+const NotificationsPage: React.FC = ({ }) => {
  let pubkey = '';

  if (typeof window !== 'undefined') {
-      pubkey = window.localStorage.getItem("pubkey") ?? '';
+    pubkey = window.localStorage.getItem("pubkey") ?? '';
  }

  // check if pubkey contains "npub"
@@ -18,16 +17,9 @@ const NotificationsPage: React.FC= ({ }) => {
    pubkey = nip19.decode(pubkey.toString()).data.toString()
  }

-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
-        <Notifications pubkey={pubkey.toString()} />
-      </NostrProvider>
+      <Notifications pubkey={pubkey.toString()} />
    </>
  );
 }
--- a/lumina/app/onboarding/createProfile/page.tsx
+++ b/lumina/app/onboarding/createProfile/page.tsx
@@ -1,24 +1,14 @@
 "use client";

 import { UpdateProfileForm } from "@/components/UpdateProfileForm";
-import { NostrProvider } from "nostr-react";
-

 export default function OnboardingCreateProfile() {
-
-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
-        <div className="flex flex-col items-center py-6 px-6">
-          <h1>Step 2: Create Profile</h1>
-          <UpdateProfileForm />
-        </div>
-      </NostrProvider>
+      <div className="flex flex-col items-center py-6 px-6">
+        <h1>Step 2: Create Profile</h1>
+        <UpdateProfileForm />
+      </div>
    </>
  );
 }
--- a/lumina/app/onboarding/page.tsx
+++ b/lumina/app/onboarding/page.tsx
@@ -1,25 +1,14 @@
 "use client";

 import { CreateSecretKeyForm } from "@/components/onboarding/createSecretKeyForm";
-import { Button } from "@/components/ui/button";
-import { NostrProvider } from "nostr-react";
-

 export default function OnboardingHome() {
-
-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
-        <div className="flex flex-col items-center py-6 px-6">
-          <h1>Step 1: Create your secret key</h1>
-          <CreateSecretKeyForm />
-        </div>
-      </NostrProvider>
+      <div className="flex flex-col items-center py-6 px-6">
+        <h1>Step 1: Create your secret key</h1>
+        <CreateSecretKeyForm />
+      </div>
    </>
  );
 }
--- a/lumina/app/page.tsx
+++ b/lumina/app/page.tsx
@@ -3,25 +3,16 @@
 import { Search } from "@/components/Search";
 import { TrendingAccounts } from "@/components/TrendingAccounts";
 import { TrendingImages } from "@/components/TrendingImages";
-import { NostrProvider } from "nostr-react";


 export default function Home() {
-
-  const relayUrls = [
-    // "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-  
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
        <div className="flex flex-col items-center py-6 px-6">
          <Search />
        </div>
        {/* <TrendingAccounts /> */}
        <TrendingImages />
-      </NostrProvider>
    </>
  );
 }
--- a/lumina/app/profile/[pubkey]/page.tsx
+++ b/lumina/app/profile/[pubkey]/page.tsx
@@ -8,7 +8,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { SectionIcon, GridIcon } from '@radix-ui/react-icons'
 import ProfileQuickViewFeed from "@/components/ProfileQuickViewFeed";
 import ProfileTextFeed from "@/components/ProfileTextFeed";
-import { NostrProvider } from "nostr-react";
 import ProfileGalleryViewFeed from "@/components/ProfileGalleryViewFeed";

 export default function ProfilePage() {
@@ -22,14 +21,8 @@ export default function ProfilePage() {
    pubkey = nip19.decode(pubkey.toString()).data.toString()
  }

-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
        <div className="md:px-6">
          <div>
            <ProfileInfoCard pubkey={pubkey.toString()} />
@@ -55,7 +48,6 @@ export default function ProfilePage() {
            </TabsContent> */}
          </Tabs>
        </div>
-      </NostrProvider>
    </>
  );
 }
--- a/lumina/app/profile/settings/page.tsx
+++ b/lumina/app/profile/settings/page.tsx
@@ -2,7 +2,6 @@

 import { useParams } from 'next/navigation'
 import { nip19 } from "nostr-tools";
-import { NostrProvider } from "nostr-react";
 import { UpdateProfileForm } from "@/components/UpdateProfileForm";

 export default function ProfileSettingsPage() {
@@ -10,7 +9,7 @@ export default function ProfileSettingsPage() {
  let pubkey = null;
  if (typeof window !== 'undefined') {
    pubkey = window.localStorage.getItem('pubkey');
-  } 
+  }
  // check if pubkey is not null and contains "npub"
  // if so, then we need to convert it to a pubkey
  if (pubkey && pubkey.includes("npub")) {
@@ -18,18 +17,11 @@ export default function ProfileSettingsPage() {
    pubkey = nip19.decode(pubkey.toString()).data.toString()
  }

-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
-        <div className="flex flex-col items-center py-6 px-6">
-          <UpdateProfileForm />
-        </div>
-      </NostrProvider>
+      <div className="flex flex-col items-center py-6 px-6">
+        <UpdateProfileForm />
+      </div>
    </>
  );
 }
--- a/lumina/app/reel/page.tsx
+++ b/lumina/app/reel/page.tsx
@@ -1,32 +1,11 @@
 "use client";

 import ReelFeed from "@/components/ReelFeed"
-import { NostrProvider } from "nostr-react";

 export default function ReelPage() {
-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
  return (
-    // <main className="flex min-h-screen flex-col items-center justify-between p-24">
-    // </main>
-    // <NavigationMenu>
-    //   <NavigationMenuList>
-    //     <NavigationMenuItem>
-    //       <Link href="/" legacyBehavior passHref>
-    //         <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-    //           Home
-    //         </NavigationMenuLink>
-    //       </Link>
-    //     </NavigationMenuItem>
-    //   </NavigationMenuList>
-    // </NavigationMenu>
-    <NostrProvider relayUrls={relayUrls} debug={false}>
-      <div className="py-6 px-6">
-        <ReelFeed />
-      </div>
-    </NostrProvider>
+    <div className="py-6 px-6">
+      <ReelFeed />
+    </div>
  );
 }
--- a/lumina/app/search/[searchTag]/page.tsx
+++ b/lumina/app/search/[searchTag]/page.tsx
@@ -8,7 +8,6 @@ import { nip19 } from "nostr-tools";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { SectionIcon, GridIcon } from '@radix-ui/react-icons'
 import TagFeed from "@/components/TagFeed";
-import { NostrProvider } from "nostr-react";
 import FollowerFeed from "@/components/FollowerFeed";
 import ProfileQuickViewFeed from "@/components/ProfileQuickViewFeed";
 import FollowerQuickViewFeed from "@/components/FollowerQuickViewFeed";
@@ -32,27 +31,20 @@ export default function SearchPage() {
  //   pubkey = nip19.decode(pubkey.toString()).data.toString()
  // }

-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
-        <Head>
-          <title>LUMINA.rocks</title>
-          <meta name="description" content="Yet another nostr web ui" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-        <div className="py-6 px-6">
-          <div className='grid grid-cols-1 gap-6' >
-            <SearchProfilesBox searchTag={searchTag.toString()} />
-            <SearchNotesBox searchTag={searchTag.toString()} />
-          </div>
+      <Head>
+        <title>LUMINA.rocks</title>
+        <meta name="description" content="Yet another nostr web ui" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="py-6 px-6">
+        <div className='grid grid-cols-1 gap-6' >
+          <SearchProfilesBox searchTag={searchTag.toString()} />
+          <SearchNotesBox searchTag={searchTag.toString()} />
        </div>
-      </NostrProvider>
+      </div>
    </>
  );
 }
--- a/lumina/app/search/page.tsx
+++ b/lumina/app/search/page.tsx
@@ -1,25 +1,13 @@
 "use client";

 import { Search } from "@/components/Search";
-import { TrendingAccounts } from "@/components/TrendingAccounts";
-import { TrendingImages } from "@/components/TrendingImages";
-import { NostrProvider } from "nostr-react";
-

 export default function SearchMainPage() {
-
-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-  
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
-        <div className="flex flex-col items-center py-6 px-6">
-          <Search />
-        </div>
-      </NostrProvider>
+      <div className="flex flex-col items-center py-6 px-6">
+        <Search />
+      </div>
    </>
  );
 }
--- a/lumina/app/tag/[tag]/page.tsx
+++ b/lumina/app/tag/[tag]/page.tsx
@@ -8,7 +8,6 @@ import { nip19 } from "nostr-tools";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { SectionIcon, GridIcon } from '@radix-ui/react-icons'
 import TagFeed from "@/components/TagFeed";
-import { NostrProvider } from "nostr-react";

 export default function Home() {

@@ -21,24 +20,17 @@ export default function Home() {
  //   pubkey = nip19.decode(pubkey.toString()).data.toString()
  // }

-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
-        <Head>
-          <title>LUMINA.rocks - {tag}</title>
-          <meta name="description" content="Yet another nostr web ui" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-        <div className="py-6 px-6">
-          <TagFeed tag={tag.toString()} />
-        </div>
-      </NostrProvider>
+      <Head>
+        <title>LUMINA.rocks - {tag}</title>
+        <meta name="description" content="Yet another nostr web ui" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="py-6 px-6">
+        <TagFeed tag={tag.toString()} />
+      </div>
    </>
  );
 }
--- a/lumina/app/upload/page.tsx
+++ b/lumina/app/upload/page.tsx
@@ -8,7 +8,6 @@ import { Event, NostrEvent, finalizeEvent, nip19 } from "nostr-tools";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { SectionIcon, GridIcon } from '@radix-ui/react-icons'
 import TagFeed from "@/components/TagFeed";
-import { NostrProvider, useNostr } from "nostr-react";
 import { FormEvent } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
@@ -23,25 +22,18 @@ export default function UploadPage() {
  //   // convert npub to pubkey
  //   pubkey = nip19.decode(pubkey.toString()).data.toString()
  // }
-  
-  const relayUrls = [
-    "wss://relay.nostr.band",
-    "wss://relay.damus.io",
-  ];
-  
+
  return (
    <>
-      <NostrProvider relayUrls={relayUrls} debug={false}>
-        <Head>
-          <title>LUMINA.rocks</title>
-          <meta name="description" content="Yet another nostr web ui" />
-          <meta name="viewport" content="width=device-width, initial-scale=1" />
-          <link rel="icon" href="/favicon.ico" />
-        </Head>
-        <div className="py-6 px-6">
-          <UploadComponent />
-        </div>
-      </NostrProvider>
+      <Head>
+        <title>LUMINA.rocks</title>
+        <meta name="description" content="Yet another nostr web ui" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <div className="py-6 px-6">
+        <UploadComponent />
+      </div>
    </>
  );
 }
--- a/lumina/utils/utils.ts
+++ b/lumina/utils/utils.ts
@@ -21,4 +21,4 @@ export function extractDimensions(event: NostrEvent): { width: number; height: n
    }
  }
  return { width: 500, height: 300 }; // Default dimensions if not found
-}
+}