wip: nsecbunker

src/app/auth/create.tsx

@@ -132,7 +132,7 @@ export function CreateAccountScreen() {
       </div>
       <div className="mx-auto flex w-full max-w-md flex-col gap-10">
         <h1 className="text-center text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-          Let&apos;s set up your Nostr account.
+          Let&apos;s set up your account.
         </h1>
         <div className="flex flex-col gap-3">
           {!keys ? (

src/app/auth/import.tsx

@@ -1,3 +1,4 @@
+import { NDKNip46Signer, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
 import { readText } from '@tauri-apps/plugin-clipboard-manager';
 import { motion } from 'framer-motion';
 import { nip19 } from 'nostr-tools';
@@ -6,30 +7,52 @@ import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import { twMerge } from 'tailwind-merge';
 
+import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
 
 import { ArrowLeftIcon } from '@shared/icons';
 import { User } from '@shared/user';
 
 export function ImportAccountScreen() {
-  const { db } = useStorage();
   const navigate = useNavigate();
 
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+
   const [npub, setNpub] = useState<string>('');
   const [nsec, setNsec] = useState<string>('');
   const [pubkey, setPubkey] = useState<undefined | string>(undefined);
-  const [created, setCreated] = useState(false);
+  const [created, setCreated] = useState({ ok: false, remote: false });
   const [savedPrivkey, setSavedPrivkey] = useState(false);
 
   const submitNpub = async () => {
-    if (npub.length < 6) return toast('You must enter valid npub');
+    if (npub.length < 6) return toast.error('You must enter valid npub');
-    if (!npub.startsWith('npub1')) return toast('npub must be starts with npub1');
+    if (!npub.startsWith('npub1')) return toast.error('npub must be starts with npub1');
 
     try {
       const pubkey = nip19.decode(npub).data as string;
       setPubkey(pubkey);
     } catch (e) {
-      return toast(`npub invalid: ${e}`);
+      return toast.error(`npub invalid: ${e}`);
+    }
+  };
+
+  const connectNsecBunker = async () => {
+    if (npub.length < 6) return toast.error('You must enter valid npub');
+    if (!npub.startsWith('npub1')) return toast.error('npub must be starts with npub1');
+
+    try {
+      const pubkey = nip19.decode(npub.split('#')[0]).data as string;
+      const localSigner = NDKPrivateKeySigner.generate();
+      await db.secureSave(pubkey + '-bunker', localSigner.privateKey);
+
+      const remoteSigner = new NDKNip46Signer(ndk, npub, localSigner);
+      ndk.signer = remoteSigner;
+
+      setPubkey(pubkey);
+      setCreated({ ok: false, remote: true });
+    } catch (e) {
+      return toast.error(e);
     }
   };
 
@@ -41,7 +64,9 @@ export function ImportAccountScreen() {
   const createAccount = async () => {
     try {
       await db.createAccount(npub, pubkey);
-      setCreated(true);
+      setCreated((prev) => ({ ...prev, ok: true }));
+
+      if (created.remote) navigate('/auth/onboarding', { state: { newuser: false } });
     } catch (e) {
       return toast(`Create account failed: ${e}`);
     }
@@ -82,7 +107,7 @@ export function ImportAccountScreen() {
       </div>
       <div className="mx-auto flex w-full max-w-md flex-col gap-10">
         <h1 className="text-center text-2xl font-semibold text-neutral-900 dark:text-neutral-100">
-          Import your Nostr account.
+          Import your account.
         </h1>
         <div className="flex flex-col gap-3">
           <div className="rounded-xl bg-neutral-100 p-3 text-neutral-800 dark:bg-neutral-900 dark:text-neutral-200">
@@ -90,7 +115,7 @@ export function ImportAccountScreen() {
               <label htmlFor="npub" className="font-semibold">
                 Enter your public key:
               </label>
-              <div className="inline-flex w-full items-center gap-2">
+              <div className="flex w-full flex-col gap-2">
                 <input
                   name="npub"
                   type="text"
@@ -101,16 +126,25 @@ export function ImportAccountScreen() {
                   autoCorrect="off"
                   autoCapitalize="off"
                   placeholder="npub1"
-                  className="h-11 flex-1 rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
+                  className="h-11 w-full rounded-lg bg-neutral-200 px-3 placeholder:text-neutral-500 dark:bg-neutral-800 dark:placeholder:text-neutral-400"
                 />
                 {!pubkey ? (
+                  <div className="flex flex-col gap-2">
                     <button
                       type="button"
                       onClick={submitNpub}
-                    className="h-11 w-24 shrink-0 rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
+                      className="h-9 w-full shrink-0 rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
                     >
                       Continue
                     </button>
+                    <button
+                      type="button"
+                      onClick={connectNsecBunker}
+                      className="h-9 w-full shrink-0 rounded-lg bg-neutral-200 font-semibold text-neutral-900 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-100 dark:hover:bg-neutral-700"
+                    >
+                      Continue with nsecBunker
+                    </button>
+                  </div>
                 ) : null}
               </div>
             </div>
@@ -126,32 +160,31 @@ export function ImportAccountScreen() {
             >
               <h5 className="mb-1.5 font-semibold">Account found</h5>
               <div className="flex w-full flex-col gap-2">
-                <div className="inline-flex h-full flex-1 items-center rounded-lg bg-neutral-200 p-2">
+                <div className="flex h-full w-full items-center justify-between rounded-lg bg-neutral-200 p-2">
                   <User pubkey={pubkey} variant="simple" />
-                </div>
-                {!created ? (
-                  <div className="flex gap-2">
                   <button
                     type="button"
                     onClick={changeAccount}
-                      className="h-9 flex-1 shrink-0 rounded-lg bg-neutral-200 font-semibold text-neutral-800 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-200 dark:hover:bg-neutral-700"
+                    className="h-8 w-20 shrink-0 rounded-lg bg-neutral-300 text-sm font-medium text-neutral-800 hover:bg-neutral-400 dark:bg-neutral-700 dark:text-neutral-200 dark:hover:bg-neutral-600"
                   >
-                      Change account
+                    Change
                   </button>
+                </div>
+                {!created.ok ? (
                   <button
                     type="button"
                     onClick={createAccount}
-                      className="h-9 flex-1 shrink-0 rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
+                    className="h-9 w-full shrink-0 rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
                   >
                     Continue
                   </button>
-                  </div>
                 ) : null}
               </div>
             </motion.div>
           ) : null}
-          {created ? (
+          {created.ok ? (
             <>
+              {!created.remote ? (
                 <motion.div
                   initial={{ opacity: 0, y: 50 }}
                   animate={{
@@ -209,8 +242,8 @@ export function ImportAccountScreen() {
                   <div className="mt-3 select-text">
                     <p className="text-sm">
                       <b>Private Key</b> is used to sign your event. For example, if you
-                    want to make a new post or send a message to your contact, you need to
+                      want to make a new post or send a message to your contact, you need
-                    use your private key to sign this event.
+                      to use your private key to sign this event.
                     </p>
                     <h5 className="mt-2 font-semibold">
                       1. In case you store private key in Lume
@@ -230,12 +263,13 @@ export function ImportAccountScreen() {
                       2. In case you do not store private key in Lume
                     </h5>
                     <p className="text-sm">
-                    When you make an event that requires a sign by your private key, Lume
+                      When you make an event that requires a sign by your private key,
-                    will show a prompt for you to enter private key. It will be cleared
+                      Lume will show a prompt for you to enter private key. It will be
-                    after signing and not stored anywhere.
+                      cleared after signing and not stored anywhere.
                     </p>
                   </div>
                 </motion.div>
+              ) : null}
               <motion.button
                 initial={{ opacity: 0, y: 80 }}
                 animate={{
@@ -248,7 +282,7 @@ export function ImportAccountScreen() {
                   navigate('/auth/onboarding', { state: { newuser: false } })
                 }
               >
-                Finish
+                Continue
               </motion.button>
             </>
           ) : null}

src/app/auth/welcome.tsx

@@ -15,13 +15,13 @@ export function WelcomeScreen() {
             to="/auth/create"
             className="inline-flex h-10 w-full items-center justify-center rounded-lg bg-blue-500 font-medium text-white hover:bg-blue-600"
           >
-            Create new Nostr account
+            Create new account
           </Link>
           <Link
             to="/auth/import"
             className="inline-flex h-10 w-full items-center justify-center rounded-lg font-medium text-neutral-900 hover:bg-neutral-100 dark:text-neutral-100 dark:hover:bg-neutral-900"
           >
-            Log in with key
+            Log in
           </Link>
         </div>
       </div>

src/libs/ndk/instance.ts

@@ -1,4 +1,4 @@
-import NDK from '@nostr-dev-kit/ndk';
+import NDK, { NDKNip46Signer, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
 import NDKCacheAdapterDexie from '@nostr-dev-kit/ndk-cache-dexie';
 import { ndkAdapter } from '@nostr-fetch/adapter-ndk';
 import { message } from '@tauri-apps/plugin-dialog';
@@ -52,9 +52,30 @@ export const NDKInstance = () => {
     }
   }
 
+  async function getSigner(instance: NDK) {
+    if (!db.account) return null;
+
+    // NIP-46 Signer
+    const localSignerPrivkey = await db.secureLoad(db.account.pubkey + '-bunker');
+    if (localSignerPrivkey) {
+      const localSigner = new NDKPrivateKeySigner(localSignerPrivkey);
+      const remoteSigner = new NDKNip46Signer(instance, db.account.id, localSigner);
+      // await remoteSigner.blockUntilReady();
+
+      return remoteSigner;
+    }
+
+    // Privkey Signer
+    const userPrivkey = await db.secureLoad(db.account.pubkey);
+    if (userPrivkey) return new NDKPrivateKeySigner(userPrivkey);
+
+    return null;
+  }
+
   async function initNDK() {
-    const explicitRelayUrls = await getExplicitRelays();
     const outboxSetting = await db.getSettingValue('outbox');
+    const explicitRelayUrls = await getExplicitRelays();
+
     const dexieAdapter = new NDKCacheAdapterDexie({ dbName: 'lume_ndkcache' });
     const instance = new NDK({
       explicitRelayUrls,
@@ -64,7 +85,11 @@ export const NDKInstance = () => {
     });
 
     try {
-      await instance.connect();
+      // connect
+      await instance.connect(2000);
+      // add signer
+      const signer = await getSigner(instance);
+      instance.signer = signer;
     } catch (error) {
       await message(`NDK instance init failed: ${error}`, {
         title: 'Lume',

src/shared/composer/composer.tsx

@@ -1,3 +1,4 @@
+import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { message } from '@tauri-apps/plugin-dialog';
 import Image from '@tiptap/extension-image';
 import Placeholder from '@tiptap/extension-placeholder';
@@ -7,20 +8,19 @@ import { convert } from 'html-to-text';
 import { useState } from 'react';
 import { twMerge } from 'tailwind-merge';
 
+import { useNDK } from '@libs/ndk/provider';
+
 import { MediaUploader, MentionPopup } from '@shared/composer';
 import { CancelIcon, LoaderIcon } from '@shared/icons';
 import { MentionNote } from '@shared/notes';
 
 import { useComposer } from '@stores/composer';
 
-import { useNostr } from '@utils/hooks/useNostr';
-import { sendNativeNotification } from '@utils/notification';
-
 export function Composer() {
   const [loading, setLoading] = useState<boolean>(false);
   const [reply, clearReply] = useComposer((state) => [state.reply, state.clearReply]);
 
-  const { publish } = useNostr();
+  const { ndk } = useNDK();
 
   const expand = useComposer((state) => state.expand);
   const editor = useEditor({
@@ -92,11 +92,13 @@ export function Composer() {
       });
 
       // publish message
-      await publish({ content: serializedContent, kind: 1, tags });
+      const event = new NDKEvent(ndk);
-
+      event.content = serializedContent;
-      // send native notifiation
+      event.kind = NDKKind.Text;
-      await sendNativeNotification('Post has been published successfully.');
+      event.tags = tags;
 
+      const publish = event.publish();
+      if (publish) {
         // update state
         setLoading(false);
         // reset editor
@@ -105,6 +107,7 @@ export function Composer() {
         if (reply.id) {
           clearReply();
         }
+      }
     } catch {
       setLoading(false);
       await message('Publishing post failed.', { title: 'Lume', type: 'error' });

src/utils/hooks/useNostr.ts

@@ -304,20 +304,14 @@ export function useNostr() {
     kind: NDKKind | number;
     tags: string[][];
   }): Promise<NDKEvent> => {
-    const privkey: string = await db.secureLoad(db.account.pubkey);
-    // #TODO: show prompt
-    if (!privkey) return;
-
     const event = new NDKEvent(ndk);
-    const signer = new NDKPrivateKeySigner(privkey);
-
     event.content = content;
     event.kind = kind;
     event.created_at = Math.floor(Date.now() / 1000);
     event.pubkey = db.account.pubkey;
     event.tags = tags;
 
-    await event.sign(signer);
+    await event.sign();
     await event.publish();
 
     return event;

src/utils/types.d.ts

@@ -22,8 +22,7 @@ export interface DBEvent {
 }
 
 export interface Account extends NDKUserProfile {
-  id: number;
+  id: string;
-  npub: string;
   pubkey: string;
   follows: null | string[];
   circles: null | string[];