added database provider & refactor sql execute

src/components/contexts/database.tsx

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { createContext } from 'react';
+import Database from 'tauri-plugin-sql-api';
+
+export const DatabaseContext = createContext({});
+
+const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
+
+export default function DatabaseProvider({ children }: { children: React.ReactNode }) {
+  const value = db;
+
+  return <DatabaseContext.Provider value={value}>{children}</DatabaseContext.Provider>;
+}

src/pages/_app.tsx

@@ -1,5 +1,7 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import RelayProvider from '@stores/context';
+import DatabaseProvider from '@components/contexts/database';
+import RelayProvider from '@components/contexts/relay';
+
 import { relays } from '@stores/relays';
 
 import { useStore } from '@nanostores/react';
@@ -24,5 +26,9 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   // Get all relays
   const $relays = useStore(relays);
 
-  return <RelayProvider relays={$relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>;
+  return (
+    <DatabaseProvider>
+      <RelayProvider relays={$relays}>{getLayout(<Component {...pageProps} />)}</RelayProvider>
+    </DatabaseProvider>
+  );
 }

src/pages/feed/following.tsx

@@ -2,37 +2,59 @@
 import BaseLayout from '@layouts/baseLayout';
 import NewsFeedLayout from '@layouts/newsfeedLayout';
 
+import { RelayContext } from '@components/contexts/relay';
+
 import { hoursAgo } from '@utils/getDate';
 
-import { RelayContext } from '@stores/context';
+import { currentUser } from '@stores/currentUser';
 import { follows } from '@stores/follows';
 import { relays } from '@stores/relays';
 
 import { useStore } from '@nanostores/react';
 import { dateToUnix } from 'nostr-react';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef, useState } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useRef } from 'react';
 
 export default function Page() {
   const relayPool: any = useContext(RelayContext);
-
-  const [data, setData] = useState([]);
   const now = useRef(new Date());
 
   const $follows = useStore(follows);
   const $relays = useStore(relays);
+  const $currentUser = useStore(currentUser);
 
   useEffect(() => {
     const unsub = relayPool.subscribe(
       [
         {
-          kinds: [1],
+          kinds: [0, 1, 3, 5, 7],
           authors: $follows,
           since: dateToUnix(hoursAgo(12, now.current)),
         },
       ],
       $relays,
-      (event: any) => {
+      async (event: any) => {
-        setData((data) => [event, ...data]);
+        switch (event.kind) {
+          case 0:
+            //await db.execute(`INSERT OR IGNORE INTO cache_profiles (id, metadata) VALUES ("${event.pubkey}", '${JSON.stringify(event.content)}')`);
+            break;
+          case 3:
+            //await db.execute(`INSERT OR IGNORE INTO follows (pubkey, account, kind) VALUES ("${event.pubkey}", "${$currentUser.pubkey}", "1")`);
+            break;
+          case 1:
+          case 5:
+          case 7:
+            /*
+            const isMulti = event.tags.length > 0;
+            await db.execute(
+              `INSERT OR IGNORE INTO cache_notes (id, note, kind, is_multi) VALUES ("${event.pubkey}", '${JSON.stringify(event)}', "${
+                event.kind
+              }", "${isMulti}")`
+            );
+            */
+            break;
+          default:
+            break;
+        }
       },
       undefined,
       (events: any, relayURL: any) => {
@@ -41,15 +63,9 @@ export default function Page() {
     );
 
     return () => unsub();
-  }, [$follows, $relays, relayPool]);
+  }, [$currentUser.pubkey, $follows, $relays, relayPool]);
 
-  return (
+  return <div className="h-full w-full"></div>;
-    <div className="h-full w-full">
-      {data.map((item, index) => (
-        <p key={index}>{item.id}</p>
-      ))}
-    </div>
-  );
 }
 
 Page.getLayout = function getLayout(

src/pages/index.tsx

@@ -2,6 +2,8 @@
 import BaseLayout from '@layouts/baseLayout';
 import FullLayout from '@layouts/fullLayout';
 
+import { DatabaseContext } from '@components/contexts/database';
+
 import { currentUser } from '@stores/currentUser';
 import { follows } from '@stores/follows';
 
@@ -10,12 +12,11 @@ import LumeSymbol from '@assets/icons/Lume';
 import { isPermissionGranted, requestPermission, sendNotification } from '@tauri-apps/api/notification';
 import { motion } from 'framer-motion';
 import { useRouter } from 'next/router';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useCallback, useEffect, useState } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useCallback, useContext, useEffect, useState } from 'react';
-import Database from 'tauri-plugin-sql-api';
-
-const db = typeof window !== 'undefined' ? await Database.load('sqlite:lume.db') : null;
 
 export default function Page() {
+  const db: any = useContext(DatabaseContext);
+
   const router = useRouter();
   const [loading, setLoading] = useState(true);
 
@@ -36,20 +37,22 @@ export default function Page() {
 
   const getAccount = useCallback(async () => {
     const result = await db.select(`SELECT * FROM accounts ASC LIMIT 1`);
-
     return result;
-  }, []);
+  }, [db]);
 
-  const getFollows = useCallback(async (account: { id: string }) => {
+  const getFollows = useCallback(
-    const arr = [];
+    async (account: { id: string }) => {
-    const result: any = await db.select(`SELECT pubkey FROM follows WHERE account = "${account.id}"`);
+      const arr = [];
+      const result: any = await db.select(`SELECT pubkey FROM follows WHERE account = "${account.id}"`);
 
-    result.forEach((item: { pubkey: string }) => {
+      result.forEach((item: { pubkey: string }) => {
-      arr.push(item.pubkey);
+        arr.push(item.pubkey);
-    });
+      });
 
-    return arr;
+      return arr;
-  }, []);
+    },
+    [db]
+  );
 
   // Explain:
   // Step 1: request allow notification from system

src/pages/onboarding/create.tsx

@@ -2,84 +2,79 @@
 import BaseLayout from '@layouts/baseLayout';
 import OnboardingLayout from '@layouts/onboardingLayout';
 
-import { currentUser } from '@stores/currentUser';
+import { DatabaseContext } from '@components/contexts/database';
+import { RelayContext } from '@components/contexts/relay';
 
+import { currentUser } from '@stores/currentUser';
+import { relays } from '@stores/relays';
+
+import { useStore } from '@nanostores/react';
 import { EyeClosedIcon, EyeOpenIcon } from '@radix-ui/react-icons';
 import { motion } from 'framer-motion';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
-import { dateToUnix, useNostr } from 'nostr-react';
 import { generatePrivateKey, getEventHash, getPublicKey, nip19, signEvent } from 'nostr-tools';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useState } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useState } from 'react';
-import Database from 'tauri-plugin-sql-api';
 import { Config, names, uniqueNamesGenerator } from 'unique-names-generator';
 
 const config: Config = {
   dictionaries: [names],
 };
 
-const defaultAvatars = [
-  'https://bafybeidfsbrzqbvontmucteomoz2rkrxugu462l5hyhh6uioslkfzzs4oq.ipfs.w3s.link/avatar-11.png',
-  'https://bafybeid7mrvznbnd6r2ju2iu7lsxkcikufys6z6ssy5ldxrxq5qh3yqf4u.ipfs.w3s.link/avatar-12.png',
-  'https://bafybeih5gpwu53ohui6p7scekjpxjk2d4lusq2jqohqhjsvhfkeu56ea4e.ipfs.w3s.link/avatar-13.png',
-  'https://bafybeibpbvrpuphkerjygdbnh26av5brqggzunbbbmfl3ozlvcn2mj6zxa.ipfs.w3s.link/avatar-14.png',
-  'https://bafybeia4ue4loinuflu7y5q3xu6hcvt653mzw5yorw25oarf2wqksig4ma.ipfs.w3s.link/avatar-15.png',
-  'https://bafybeib3gzl6n2bebiru2cpkdljmlzbtqfsl6xcnqtabxt6jrpj7l7ltm4.ipfs.w3s.link/avatar-16.png',
-];
-
-const defaultBanners = [
-  'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg',
-  'https://bafybeiderllqadxsikh3envikobmyka3uwgojriwh6epctqartq2loswyi.ipfs.w3s.link/banner-2.jpg',
-  'https://bafybeiba4tifde2kczvd26vxhbb5jpqi3wmgvccpkcrle4hse2cqrwlwiy.ipfs.w3s.link/banner-3.jpg',
-  'https://bafybeifqpny2eom7ccvmaguxxxfajutmn5h3fotaasga7gce2xfx37p6oy.ipfs.w3s.link/banner-4.jpg',
-];
-
 export default function Page() {
+  const db: any = useContext(DatabaseContext);
   const router = useRouter();
-  const { publish } = useNostr();
+
+  const relayPool: any = useContext(RelayContext);
+  const $relays = useStore(relays);
 
   const [type, setType] = useState('password');
   const [loading, setLoading] = useState(false);
 
   const [privKey] = useState(() => generatePrivateKey());
   const [name] = useState(() => uniqueNamesGenerator(config).toString());
-  const [avatar] = useState(() => defaultAvatars[Math.floor(Math.random() * defaultAvatars.length)]);
-  const [banner] = useState(() => defaultBanners[Math.floor(Math.random() * defaultBanners.length)]);
 
   const pubKey = getPublicKey(privKey);
   const npub = nip19.npubEncode(pubKey);
   const nsec = nip19.nsecEncode(privKey);
 
+  const showPrivateKey = () => {
+    if (type === 'password') {
+      setType('text');
+    } else {
+      setType('password');
+    }
+  };
+
   // auto-generated profile
   const data = {
     display_name: name,
     name: name,
     username: name.toLowerCase(),
-    picture: avatar,
+    picture: 'https://bafybeidfsbrzqbvontmucteomoz2rkrxugu462l5hyhh6uioslkfzzs4oq.ipfs.w3s.link/avatar-11.png',
-    banner: banner,
+    banner: 'https://bafybeiacwit7hjmdefqggxqtgh6ht5dhth7ndptwn2msl5kpkodudsr7py.ipfs.w3s.link/banner-1.jpg',
   };
 
   const createAccount = async () => {
     setLoading(true);
 
-    // publish account to relays
+    // build event
     const event: any = {
       content: JSON.stringify(data),
-      created_at: dateToUnix(),
+      created_at: Math.floor(Date.now() / 1000),
       kind: 0,
       pubkey: pubKey,
       tags: [],
     };
     event.id = getEventHash(event);
     event.sig = signEvent(event, privKey);
-    publish(event);
+    // publish to relays
+    relayPool.publish(event, $relays);
 
     // save account to database
-    const db = await Database.load('sqlite:lume.db');
     await db.execute(
       `INSERT INTO accounts (id, privkey, npub, nsec, metadata) VALUES ("${pubKey}", "${privKey}", "${npub}", "${nsec}", '${JSON.stringify(data)}')`
     );
-    await db.close();
 
     // set currentUser in global state
     currentUser.set({
@@ -96,14 +91,6 @@ export default function Page() {
     }, 1500);
   };
 
-  const showNsec = () => {
-    if (type === 'password') {
-      setType('text');
-    } else {
-      setType('password');
-    }
-  };
-
   return (
     <div className="flex h-full flex-col justify-between px-8">
       <div>{/* spacer */}</div>
@@ -137,7 +124,9 @@ export default function Page() {
                 value={nsec}
                 className="relative w-full rounded-lg border border-black/5 px-3.5 py-2 shadow-input shadow-black/5 !outline-none placeholder:text-zinc-400 dark:bg-zinc-800 dark:text-zinc-200 dark:shadow-black/10 dark:placeholder:text-zinc-600"
               />
-              <button onClick={() => showNsec()} className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700">
+              <button
+                onClick={() => showPrivateKey()}
+                className="group absolute right-2 top-1/2 -translate-y-1/2 transform rounded p-1 hover:bg-zinc-700">
                 {type === 'password' ? (
                   <EyeClosedIcon className="h-5 w-5 text-zinc-500 group-hover:text-zinc-200" />
                 ) : (

src/pages/onboarding/fetch-follows.tsx

@@ -2,42 +2,52 @@
 import BaseLayout from '@layouts/baseLayout';
 import OnboardingLayout from '@layouts/onboardingLayout';
 
+import { DatabaseContext } from '@components/contexts/database';
+import { RelayContext } from '@components/contexts/relay';
+
+import { relays } from '@stores/relays';
+
+import { useStore } from '@nanostores/react';
 import { motion } from 'framer-motion';
 import { useRouter } from 'next/router';
-import { useNostrEvents } from 'nostr-react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useEffect, useState } from 'react';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useEffect, useState } from 'react';
-import Database from 'tauri-plugin-sql-api';
 
 export default function Page() {
-  const [follows, setFollows] = useState([null]);
+  const db: any = useContext(DatabaseContext);
-  const [loading, setLoading] = useState(false);
+  const relayPool: any = useContext(RelayContext);
+  const $relays = useStore(relays);
 
   const router = useRouter();
   const { pubkey }: any = router.query;
 
-  const { onEvent } = useNostrEvents({
+  const [follows, setFollows] = useState([null]);
-    filter: {
+  const [loading, setLoading] = useState(false);
-      authors: [pubkey],
-      kinds: [3],
-    },
-  });
 
-  onEvent((rawMetadata) => {
+  relayPool.subscribe(
-    try {
+    [
-      setFollows(rawMetadata.tags);
+      {
-    } catch (err) {
+        authors: [pubkey],
-      console.error(err, rawMetadata);
+        kinds: [0],
+        since: 0,
+      },
+    ],
+    $relays,
+    (event: any) => {
+      setFollows(event.tags);
+    },
+    undefined,
+    (events: any, relayURL: any) => {
+      console.log(events, relayURL);
     }
-  });
+  );
 
   useEffect(() => {
     setLoading(true);
 
     const insertDB = async () => {
-      const db = await Database.load('sqlite:lume.db');
       follows.forEach(async (item) => {
         if (item) {
-          await db.execute(`INSERT OR IGNORE INTO follows (pubkey, account) VALUES ("${item[1]}", "${pubkey}")`);
+          await db.execute(`INSERT OR IGNORE INTO follows (pubkey, account, kind) VALUES ("${item[1]}", "${pubkey}", "0")`);
         }
       });
     };
@@ -52,7 +62,7 @@ export default function Page() {
         })
         .catch(console.error);
     }
-  }, [follows, pubkey, router]);
+  }, [db, follows, pubkey, router]);
 
   return (
     <div className="flex h-full flex-col justify-between px-8">

src/pages/onboarding/fetch-profile.tsx

@@ -2,14 +2,22 @@
 import BaseLayout from '@layouts/baseLayout';
 import OnboardingLayout from '@layouts/onboardingLayout';
 
+import { DatabaseContext } from '@components/contexts/database';
+import { RelayContext } from '@components/contexts/relay';
+
+import { relays } from '@stores/relays';
+
+import { useStore } from '@nanostores/react';
 import { motion } from 'framer-motion';
 import { useRouter } from 'next/router';
-import { useNostrEvents } from 'nostr-react';
 import { getPublicKey, nip19 } from 'nostr-tools';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useCallback, useEffect, useState } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useCallback, useContext, useEffect, useState } from 'react';
-import Database from 'tauri-plugin-sql-api';
 
 export default function Page() {
+  const db: any = useContext(DatabaseContext);
+  const relayPool: any = useContext(RelayContext);
+  const $relays = useStore(relays);
+
   const router = useRouter();
   const { privkey }: any = router.query;
 
@@ -20,31 +28,32 @@ export default function Page() {
   const npub = privkey ? nip19.npubEncode(pubkey) : null;
   const nsec = privkey ? nip19.nsecEncode(privkey) : null;
 
-  const { onEvent } = useNostrEvents({
+  relayPool.subscribe(
-    filter: {
+    [
-      authors: [pubkey],
+      {
-      kinds: [0],
+        authors: [pubkey],
-    },
+        kinds: [0],
-  });
+      },
-
+    ],
-  onEvent((rawMetadata) => {
+    $relays,
-    try {
+    (event: any) => {
-      const metadata: any = JSON.parse(rawMetadata.content);
+      const metadata = JSON.parse(event.content);
       setAccount(metadata);
-    } catch (err) {
+    },
-      console.error(err, rawMetadata);
+    undefined,
+    (events: any, relayURL: any) => {
+      console.log(events, relayURL);
     }
-  });
+  );
 
   const insertDB = useCallback(async () => {
     // save account to database
-    const db = await Database.load('sqlite:lume.db');
     const metadata = JSON.stringify(account);
     await db.execute(
       `INSERT INTO accounts (id, privkey, npub, nsec, metadata) VALUES ("${pubkey}", "${privkey}", "${npub}", "${nsec}", '${metadata}')`
     );
     await db.close();
-  }, [account, npub, nsec, privkey, pubkey]);
+  }, [account, db, npub, nsec, privkey, pubkey]);
 
   useEffect(() => {
     setLoading(true);

src/pages/onboarding/following.tsx

@@ -2,6 +2,8 @@
 import BaseLayout from '@layouts/baseLayout';
 import OnboardingLayout from '@layouts/onboardingLayout';
 
+import { DatabaseContext } from '@components/contexts/database';
+
 import { truncate } from '@utils/truncate';
 
 import { currentUser } from '@stores/currentUser';
@@ -14,11 +16,12 @@ import { motion } from 'framer-motion';
 import Image from 'next/image';
 import { useRouter } from 'next/router';
 import { nip19 } from 'nostr-tools';
-import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useState } from 'react';
+import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal, useContext, useState } from 'react';
-import Database from 'tauri-plugin-sql-api';
 
 export default function Page() {
+  const db: any = useContext(DatabaseContext);
   const router = useRouter();
+
   const shuffle = (arr) => [...arr].sort(() => Math.random() - 0.5);
 
   const [follow, setFollow] = useState([]);
@@ -32,13 +35,12 @@ export default function Page() {
   };
 
   const insertDB = async () => {
-    const db = await Database.load('sqlite:lume.db');
     // self follow
-    await db.execute(`INSERT INTO follows (pubkey, account) VALUES ("${$currentUser.pubkey}", "${$currentUser.pubkey}")`);
+    await db.execute(`INSERT INTO follows (pubkey, account, kind) VALUES ("${$currentUser.pubkey}", "${$currentUser.pubkey}", "0")`);
     // follow selected
     follow.forEach(async (npub) => {
       const { data } = nip19.decode(npub);
-      await db.execute(`INSERT INTO follows (pubkey, account) VALUES ("${data}", "${$currentUser.pubkey}")`);
+      await db.execute(`INSERT INTO follows (pubkey, account, kind) VALUES ("${data}", "${$currentUser.pubkey}", "0")`);
     });
   };