init ndk in layout component

src/lib/db.js

@@ -73,16 +73,73 @@ export const userBoards = derived([user, boards], ([$user, $boards]) => {
 
 export const db = writable({
 	user: null,
-	ndk: initNDK(),
 	currentBoardId: null
 });
 
-async function initNDK() {
+// Create a writable store for the NDK instance
-	const ndk = new NDK({
+const createNDKStore = () => {
-		explicitRelayUrls: ['ws://localhost:10547']
+	const { subscribe, set, update } = writable(null);
-	});
-	await ndk.connect();
 
+	return {
+		subscribe,
+		init: async (
+			// FIXME use a defualt relay list from config
+			relayUrls = [
+				// 'wss://relay.damus.io'
+				// 'wss://relay.nostr.band',
+				// 'wss://nos.lol',
+				// 'ws://localhost:10547'
+				'wss://relay-k12.edufeed.org'
+				// Add more default relays here
+			]
+		) => {
+			try {
+				const ndk = new NDK({
+					explicitRelayUrls: relayUrls,
+					autoConnectUserRelays: true
+				});
+
+				// Connect to relays
+				await ndk.connect();
+				console.log('NDK Connected to relays');
+
+				// Update the store with the connected instance
+				set(ndk);
+				return ndk;
+			} catch (error) {
+				console.error('Failed to initialize NDK:', error);
+				throw error;
+			}
+		}
+
+		// // Method to sign in with extension (NIP-07)
+		// signInWithExtension: async () => {
+		// 	return update((ndk) => {
+		// 		if (!ndk) throw new Error('NDK not initialized');
+
+		// 		const signer = new NDKNip07Signer();
+		// 		ndk.signer = signer;
+		// 		return ndk;
+		// 	});
+		// },
+
+		// // Method to disconnect/cleanup
+		// disconnect: () => {
+		// 	update((ndk) => {
+		// 		if (ndk) {
+		// 			// Perform any cleanup if needed
+		// 		}
+		// 		return null;
+		// 	});
+		// }
+	};
+};
+
+// Export the NDK store
+export const ndkStore = createNDKStore();
+
+export async function initNDK() {
+	const ndk = get(ndkStore);
 	const sub = ndk.subscribe({ kinds: [30043, 30044, 30045] }); // listen for boards, columns indexes
 	sub.on('event', async (event) => {
 		events.update((events) => [...events, event]);

src/lib/ndk.js

@@ -7,12 +7,13 @@ import {
 	currentBoardAddress,
 	currentBoard,
 	selectedColumn,
-	user as userStore
+	user as userStore,
+	ndkStore
 } from '$lib/db';
 
 export async function login(method) {
 	const nip07signer = new NDKNip07Signer();
-	const ndk = get(db).ndk;
+	const ndk = get(ndkStore);
 	ndk.signer = nip07signer;
 
 	let user = {};
@@ -29,8 +30,12 @@ export async function login(method) {
 	}
 }
 
+function getNdk() {
+	return get(ndkStore);
+}
+
 export function addBoard(board) {
-	const ndk = get(db).ndk;
+	const ndk = get(ndkStore);
 	const event = new NDKEvent(ndk, { kind: 30043, content: 'Board Event' });
 	const tags = [['title', board.title]];
 	event.tags = tags;
@@ -38,7 +43,7 @@ export function addBoard(board) {
 }
 
 export async function addColumn(column) {
-	const ndk = get(db).ndk;
+	const ndk = getNdk();
 	const user = get(userStore);
 	const columnEvent = new NDKEvent(ndk, { kind: 30044, content: 'Column Event' });
 	columnEvent.tags = [['title', column.title]];
@@ -58,7 +63,7 @@ export async function addColumn(column) {
 }
 
 export async function addCard(card) {
-	const ndk = get(db).ndk;
+	const ndk = getNdk();
 	const cardEvent = new NDKEvent(ndk, { kind: 30045, content: card.title });
 	await cardEvent.publish();
 
@@ -72,7 +77,7 @@ export async function addCard(card) {
 }
 
 async function eventTagToCard(eventTag) {
-	const ndk = get(db).ndk;
+	const ndk = getNdk();
 	const [kind, pubkey, d] = eventTag.split(':');
 	const event = await ndk.fetchEvent({
 		kinds: [30045],
@@ -83,7 +88,7 @@ async function eventTagToCard(eventTag) {
 }
 
 async function eventTagToColumn(eventTag) {
-	const ndk = get(db).ndk;
+	const ndk = getNdk();
 	const [kind, pubkey, d] = eventTag.split(':');
 	const event = await ndk.fetchEvent({
 		kind,
@@ -129,7 +134,7 @@ async function eventToBoard(event) {
 }
 
 export async function getBoards() {
-	const ndk = get(db).ndk;
+	const ndk = get(ndkStore);
 	const sub = ndk.subscribe({ kinds: [30043, 30044, 30045] }); // listen for boards, columns indexes
 	sub.on('event', async (event) => {
 		eventStore.update((events) => [...events, event]);
@@ -147,7 +152,7 @@ export function columnAddressesFromBoard(board) {
 /* @param {NDKEvent} event 
  */
 async function addressedEvents(event) {
-	const ndk = get(db).ndk;
+	const ndk = getNdk();
 	let columnAddresses = columnAddressesFromBoard(event);
 	const cols = await Promise.all(
 		columnAddresses.map(async (c) => {
@@ -168,7 +173,7 @@ async function addressedEvents(event) {
 }
 
 export async function publishBoard(board) {
-	const ndk = get(db).ndk;
+	const ndk = getNdk();
 	console.log(get(currentBoardAddress));
 	const existingBoard = get(currentBoard);
 	// const existingBoard = await ndk.fetchEvent({
@@ -188,7 +193,7 @@ export async function publishBoard(board) {
 }
 
 export async function publishCards(column) {
-	const ndk = get(db).ndk;
+	const ndk = getNdk();
 	const existingColumn = await ndk.fetchEvent({
 		kinds: [30044],
 		// authors: [column.pubkey],
@@ -224,7 +229,7 @@ function forkTags(tags, pubkey) {
  * @param {NDKEvent} board
  */
 export async function forkBoard(board) {
-	const ndk = get(db).ndk;
+	const ndk = getNdk();
 	const user = get(userStore);
 
 	const userBoard = new NDKEvent(ndk, {
@@ -272,6 +277,6 @@ export async function forkBoard(board) {
  * @param {NDKEvent} board
  */
 export async function deleteBoard(board) {
-	const ndk = get(db).ndk;
+	const ndk = getNdk();
 	await new NDKEvent(ndk, board).delete('user said so', true);
 }

src/routes/+layout.svelte

@@ -2,6 +2,20 @@
 	import '../app.css';
 	import Navbar from '$lib/components/Navbar.svelte';
 	let { children } = $props();
+
+	import { onMount } from 'svelte';
+	import { ndkStore, initNDK } from '$lib/db';
+
+	onMount(async () => {
+		try {
+			await ndkStore.init();
+			// You could auto-sign in here if you have stored credentials
+			// or let the user explicitly sign in from a component
+			initNDK();
+		} catch (error) {
+			console.error('Failed to initialize NDK:', error);
+		}
+	});
 </script>
 
 <Navbar />

src/routes/+page.svelte

@@ -10,10 +10,6 @@
 	function openModal() {
 		addBoardModal.showModal();
 	}
-
-	onMount(async () => {
-		await getBoards();
-	});
 </script>
 
 <div class="flex w-full">