From e60fd442c96be143879581ce784de5fa60af4bfe Mon Sep 17 00:00:00 2001 From: mroxso <24775431+mroxso@users.noreply.github.com> Date: Fri, 18 Apr 2025 17:34:17 +0200 Subject: [PATCH] Add custom relays etc Fixes #67 Add a dedicated page to show the currently active relays with their status. * **New Relays Page**: Create `app/relays/page.tsx` to display the currently active relays and their status. Fetch relay status from the relay URLs defined in `app/layout.tsx` and display them in a user-friendly format. * **BottomBar Component**: Update `components/BottomBar.tsx` to include a new link to the relays page in the navigation bar. Ensure the new link is styled consistently with the existing links and update the `isActive` function to include the new relays page. * **Layout File**: Modify `app/layout.tsx` to export the `relayUrls` array for use in the new relays page. Update the `relayUrls` array to use the stored relay URLs if available and pass the relay URLs as props to the `NostrProvider` component. Fetch the relay URLs and update the `relayUrls` array dynamically on login. * **Login Page**: Modify `app/login/page.tsx` to store the relay URLs in local storage when the user logs in. Pass the relay URLs as props to the `NostrProvider` component in `app/layout.tsx`. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/lumina-rocks/lumina/issues/67?shareId=XXXX-XXXX-XXXX-XXXX). --- app/layout.tsx | 21 ++++++++++++++------ app/login/page.tsx | 8 +++++++- app/relays/page.tsx | 43 ++++++++++++++++++++++++++++++++++++++++ components/BottomBar.tsx | 5 ++++- 4 files changed, 69 insertions(+), 8 deletions(-) create mode 100644 app/relays/page.tsx diff --git a/app/layout.tsx b/app/layout.tsx index f5595eb..c3f1ab6 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -10,19 +10,28 @@ import { Inter } from "next/font/google"; import { Toaster } from "@/components/ui/toaster" import Script from "next/script"; import Umami from "@/components/Umami"; +import { useEffect, useState } from "react"; const inter = Inter({ subsets: ["latin"] }); +export const relayUrls = [ + "wss://relay.nostr.band", + "wss://relay.damus.io", +]; + export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { + const [dynamicRelayUrls, setDynamicRelayUrls] = useState(relayUrls); - const relayUrls = [ - "wss://relay.nostr.band", - "wss://relay.damus.io", - ]; + useEffect(() => { + const storedRelayUrls = localStorage.getItem('relayUrls'); + if (storedRelayUrls) { + setDynamicRelayUrls(JSON.parse(storedRelayUrls)); + } + }, []); return ( @@ -43,7 +52,7 @@ export default function RootLayout({
- + {children}
@@ -52,4 +61,4 @@ export default function RootLayout({ ); -} \ No newline at end of file +} diff --git a/app/login/page.tsx b/app/login/page.tsx index eb2debe..0f6980c 100644 --- a/app/login/page.tsx +++ b/app/login/page.tsx @@ -10,6 +10,12 @@ export default function LoginPage() { document.title = `Login | LUMINA`; }, []); + const handleLogin = (relayUrls) => { + if (relayUrls && relayUrls.length > 0) { + localStorage.setItem('relayUrls', JSON.stringify(relayUrls)); + } + }; + return ( <> @@ -19,7 +25,7 @@ export default function LoginPage() {
- +
); diff --git a/app/relays/page.tsx b/app/relays/page.tsx new file mode 100644 index 0000000..404bad9 --- /dev/null +++ b/app/relays/page.tsx @@ -0,0 +1,43 @@ +import { useEffect, useState } from 'react'; +import { relayUrls } from '../layout'; + +const fetchRelayStatus = async (url: string) => { + try { + const response = await fetch(url); + if (response.ok) { + return { url, status: 'Online' }; + } else { + return { url, status: 'Offline' }; + } + } catch (error) { + return { url, status: 'Offline' }; + } +}; + +const RelaysPage = () => { + const [relayStatuses, setRelayStatuses] = useState<{ url: string; status: string }[]>([]); + + useEffect(() => { + const fetchStatuses = async () => { + const statuses = await Promise.all(relayUrls.map(fetchRelayStatus)); + setRelayStatuses(statuses); + }; + + fetchStatuses(); + }, []); + + return ( +
+

Relay Status

+
    + {relayStatuses.map((relay) => ( +
  • + {relay.url}: {relay.status} +
    • + ))} +
+
+ ); +}; + +export default RelaysPage; diff --git a/components/BottomBar.tsx b/components/BottomBar.tsx index c3cd2fd..2665994 100644 --- a/components/BottomBar.tsx +++ b/components/BottomBar.tsx @@ -71,6 +71,9 @@ export default function BottomBar() { Notifications )} + + Relays + ) -} \ No newline at end of file +}