add new private key screen

src/app.tsx

@@ -7,13 +7,13 @@ import { OnboardingScreen } from '@app/auth/onboarding';
 import { ChatsScreen } from '@app/chats';
 import { ErrorScreen } from '@app/error';
 import { ExploreScreen } from '@app/explore';
-import { NewScreen } from '@app/new';
 
 import { useStorage } from '@libs/storage/provider';
 
 import { LoaderIcon } from '@shared/icons';
 import { AppLayout } from '@shared/layouts/app';
 import { AuthLayout } from '@shared/layouts/auth';
+import { NewLayout } from '@shared/layouts/new';
 import { NoteLayout } from '@shared/layouts/note';
 import { SettingsLayout } from '@shared/layouts/settings';
 
@@ -115,7 +115,7 @@ export default function App() {
     },
     {
       path: '/new',
-      element: <NewScreen />,
+      element: <NewLayout />,
       errorElement: <ErrorScreen />,
       children: [
         {
@@ -139,6 +139,13 @@ export default function App() {
             return { Component: NewFileScreen };
           },
         },
+        {
+          path: 'privkey',
+          async lazy() {
+            const { NewPrivkeyScreen } = await import('@app/new/privkey');
+            return { Component: NewPrivkeyScreen };
+          },
+        },
       ],
     },
     {

src/app/auth/create.tsx

@@ -45,6 +45,8 @@ export function CreateAccountScreen() {
 
   const onSubmit = async (data: { name: string; about: string }) => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       setLoading(true);
 
       const profile = {

src/app/auth/onboarding/enrich.tsx

@@ -47,7 +47,6 @@ export function OnboardEnrichScreen() {
       setLoading(true);
 
       const tags = arrayToNIP02(follows);
-
       const event = new NDKEvent(ndk);
       event.content = '';
       event.kind = NDKKind.Contacts;

src/app/new/article.tsx

@@ -5,6 +5,7 @@ import Placeholder from '@tiptap/extension-placeholder';
 import { EditorContent, FloatingMenu, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import { twMerge } from 'tailwind-merge';
 import { Markdown } from 'tiptap-markdown';
@@ -31,6 +32,7 @@ export function NewArticleScreen() {
   const [summary, setSummary] = useState({ open: false, content: '' });
   const [cover, setCover] = useState('');
 
+  const navigate = useNavigate();
   const ident = useMemo(() => String(Date.now()), []);
   const editor = useEditor({
     extensions: [
@@ -65,6 +67,8 @@ export function NewArticleScreen() {
 
   const submit = async () => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       setLoading(true);
 
       // get markdown content

src/app/new/file.tsx

@@ -2,6 +2,7 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 import { message, open } from '@tauri-apps/plugin-dialog';
 import { readBinaryFile } from '@tauri-apps/plugin-fs';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
 import { useNDK } from '@libs/ndk/provider';
@@ -10,6 +11,7 @@ import { LoaderIcon } from '@shared/icons';
 
 export function NewFileScreen() {
   const { ndk } = useNDK();
+  const navigate = useNavigate();
 
   const [loading, setLoading] = useState(false);
   const [isPublish, setIsPublish] = useState(false);
@@ -84,6 +86,8 @@ export function NewFileScreen() {
 
   const submit = async () => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       setIsPublish(true);
 
       const event = new NDKEvent(ndk);

src/app/new/index.tsx

@@ -1,77 +0,0 @@
-import { Link, NavLink, Outlet } from 'react-router-dom';
-import { twMerge } from 'tailwind-merge';
-import { WindowTitlebar } from 'tauri-controls';
-
-import { useStorage } from '@libs/storage/provider';
-
-import { ArrowLeftIcon } from '@shared/icons';
-
-export function NewScreen() {
-  const { db } = useStorage();
-
-  return (
-    <div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
-      {db.platform !== 'macos' ? (
-        <WindowTitlebar />
-      ) : (
-        <div data-tauri-drag-region className="h-9" />
-      )}
-      <div data-tauri-drag-region className="h-6" />
-      <div className="flex h-full min-h-0 w-full">
-        <div className="container mx-auto grid grid-cols-8 px-4">
-          <div className="col-span-1">
-            <Link
-              to="/"
-              className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900"
-            >
-              <ArrowLeftIcon className="h-5 w-5" />
-            </Link>
-          </div>
-          <div className="relative col-span-6 flex flex-col">
-            <div className="mb-8 flex h-10 shrink-0 items-center gap-3">
-              <div className="flex h-10 items-center gap-2 rounded-lg bg-neutral-100 px-0.5 dark:bg-neutral-800">
-                <NavLink
-                  to="/new/"
-                  className={({ isActive }) =>
-                    twMerge(
-                      'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
-                      isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent'
-                    )
-                  }
-                >
-                  Post
-                </NavLink>
-                <NavLink
-                  to="/new/article"
-                  className={({ isActive }) =>
-                    twMerge(
-                      'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
-                      isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent'
-                    )
-                  }
-                >
-                  Article
-                </NavLink>
-                <NavLink
-                  to="/new/file"
-                  className={({ isActive }) =>
-                    twMerge(
-                      'inline-flex h-9 w-28 items-center justify-center rounded-lg text-sm font-medium',
-                      isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent'
-                    )
-                  }
-                >
-                  File Sharing
-                </NavLink>
-              </div>
-            </div>
-            <div className="h-full min-h-0 w-full">
-              <Outlet />
-            </div>
-          </div>
-          <div className="col-span-1" />
-        </div>
-      </div>
-    </div>
-  );
-}

src/app/new/post.tsx

@@ -6,7 +6,7 @@ import { EditorContent, useEditor } from '@tiptap/react';
 import StarterKit from '@tiptap/starter-kit';
 import { convert } from 'html-to-text';
 import { useEffect, useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { toast } from 'sonner';
 
 import { MediaUploader, MentionPopup } from '@app/new/components';
@@ -27,6 +27,7 @@ export function NewPostScreen() {
   const [loading, setLoading] = useState(false);
   const [searchParams, setSearchParams] = useSearchParams();
 
+  const navigate = useNavigate();
   const editor = useEditor({
     extensions: [
       StarterKit.configure(),
@@ -54,6 +55,8 @@ export function NewPostScreen() {
 
   const submit = async () => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       setLoading(true);
 
       // get plaintext content

src/app/new/privkey.tsx

@@ -0,0 +1,86 @@
+import { NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
+import { getPublicKey, nip19 } from 'nostr-tools';
+import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+
+import { useNDK } from '@libs/ndk/provider';
+import { useStorage } from '@libs/storage/provider';
+
+export function NewPrivkeyScreen() {
+  const { db } = useStorage();
+  const { ndk } = useNDK();
+
+  const [nsec, setNsec] = useState('');
+  const navigate = useNavigate();
+
+  const save = async (content: string) => {
+    return await db.secureSave(db.account.pubkey, content);
+  };
+
+  const submit = async (isSave?: boolean) => {
+    try {
+      if (!nsec.startsWith('nsec1'))
+        return toast.info('You must enter a private key starts with nsec');
+
+      const decoded = nip19.decode(nsec);
+
+      if (decoded.type !== 'nsec') return toast.info('You must enter a valid nsec');
+
+      const privkey = decoded.data;
+      const pubkey = getPublicKey(privkey);
+
+      if (pubkey !== db.account.pubkey)
+        return toast.info(
+          'Your nsec is not match your current public key, please make sure you enter right nsec'
+        );
+
+      const signer = new NDKPrivateKeySigner(privkey);
+      ndk.signer = signer;
+
+      if (isSave) await save(privkey);
+
+      navigate(-1);
+    } catch (e) {
+      toast.error(e);
+    }
+  };
+
+  return (
+    <div className="flex h-full w-full items-center justify-center">
+      <div className="mb-16 flex flex-col gap-3">
+        <h1 className="text-center font-semibold text-neutral-900 dark:text-neutral-100">
+          You need to provide private key to sign nostr event.
+        </h1>
+        <input
+          name="privkey"
+          placeholder="nsec..."
+          type="password"
+          value={nsec}
+          onChange={(e) => setNsec(e.target.value)}
+          spellCheck={false}
+          autoComplete="off"
+          autoCorrect="off"
+          autoCapitalize="off"
+          className="h-11 w-full rounded-lg bg-neutral-100 px-3 py-2 placeholder:text-neutral-500 dark:bg-neutral-900 dark:placeholder:text-neutral-400"
+        />
+        <div className="mt-2 flex flex-col gap-2">
+          <button
+            type="button"
+            onClick={() => submit()}
+            className="inline-flex h-9 w-full shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600"
+          >
+            Submit
+          </button>
+          <button
+            type="button"
+            onClick={() => submit(true)}
+            className="inline-flex h-9 w-full shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium text-neutral-900 hover:bg-neutral-200 dark:bg-neutral-900 dark:text-neutral-100 dark:hover:bg-neutral-800"
+          >
+            Submit and Save
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/settings/editProfile.tsx

@@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query';
 import { message } from '@tauri-apps/plugin-dialog';
 import { useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { useNavigate } from 'react-router-dom';
 
 import { useNDK } from '@libs/ndk/provider';
 import { useStorage } from '@libs/storage/provider';
@@ -13,6 +14,7 @@ import { useNostr } from '@utils/hooks/useNostr';
 
 export function EditProfileScreen() {
   const queryClient = useQueryClient();
+  const navigate = useNavigate();
 
   const [loading, setLoading] = useState(false);
   const [picture, setPicture] = useState('');
@@ -46,10 +48,11 @@ export function EditProfileScreen() {
 
   const uploadAvatar = async () => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       setLoading(true);
 
       const image = await upload();
-
       if (image) {
         setPicture(image);
         setLoading(false);

src/app/users/components/profile.tsx

@@ -2,7 +2,7 @@ import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
 import * as Avatar from '@radix-ui/react-avatar';
 import { minidenticon } from 'minidenticons';
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
 import { UserStats } from '@app/users/components/stats';
@@ -21,6 +21,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
   const { user } = useProfile(pubkey);
 
   const [followed, setFollowed] = useState(false);
+  const navigate = useNavigate();
 
   const svgURI =
     'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50));
@@ -43,6 +44,8 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
 
   const unfollow = async (pubkey: string) => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       const user = ndk.getUser({ pubkey: db.account.pubkey });
       const contacts = await user.follows();
       contacts.delete(new NDKUser({ pubkey: pubkey }));

src/shared/layouts/new.tsx

@@ -0,0 +1,80 @@
+import { Link, NavLink, Outlet, useLocation } from 'react-router-dom';
+import { twMerge } from 'tailwind-merge';
+import { WindowTitlebar } from 'tauri-controls';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { ArrowLeftIcon } from '@shared/icons';
+
+export function NewLayout() {
+  const { db } = useStorage();
+  const location = useLocation();
+
+  return (
+    <div className="flex h-screen w-screen flex-col bg-neutral-50 dark:bg-neutral-950">
+      {db.platform !== 'macos' ? (
+        <WindowTitlebar />
+      ) : (
+        <div data-tauri-drag-region className="h-9" />
+      )}
+      <div data-tauri-drag-region className="h-6" />
+      <div className="flex h-full min-h-0 w-full">
+        <div className="container mx-auto grid grid-cols-8 px-4">
+          <div className="col-span-1">
+            <Link
+              to="/"
+              className="inline-flex h-10 w-10 items-center justify-center rounded-lg bg-neutral-100 hover:bg-neutral-200 dark:bg-neutral-900"
+            >
+              <ArrowLeftIcon className="h-5 w-5" />
+            </Link>
+          </div>
+          <div className="relative col-span-6 flex flex-col">
+            <div className="mb-8 flex h-10 shrink-0 items-center gap-3">
+              {location.pathname !== '/new/privkey' ? (
+                <div className="flex h-10 items-center gap-2 rounded-lg bg-neutral-100 px-0.5 dark:bg-neutral-800">
+                  <NavLink
+                    to="/new/"
+                    className={({ isActive }) =>
+                      twMerge(
+                        'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
+                        isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent'
+                      )
+                    }
+                  >
+                    Post
+                  </NavLink>
+                  <NavLink
+                    to="/new/article"
+                    className={({ isActive }) =>
+                      twMerge(
+                        'inline-flex h-9 w-20 items-center justify-center rounded-lg text-sm font-medium',
+                        isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent'
+                      )
+                    }
+                  >
+                    Article
+                  </NavLink>
+                  <NavLink
+                    to="/new/file"
+                    className={({ isActive }) =>
+                      twMerge(
+                        'inline-flex h-9 w-28 items-center justify-center rounded-lg text-sm font-medium',
+                        isActive ? 'bg-white shadow dark:bg-black' : 'bg-transparent'
+                      )
+                    }
+                  >
+                    File Sharing
+                  </NavLink>
+                </div>
+              ) : null}
+            </div>
+            <div className="h-full min-h-0 w-full">
+              <Outlet />
+            </div>
+          </div>
+          <div className="col-span-1" />
+        </div>
+      </div>
+    </div>
+  );
+}

src/shared/notes/actions/reaction.tsx

@@ -1,8 +1,11 @@
 import { NDKEvent } from '@nostr-dev-kit/ndk';
 import * as Popover from '@radix-ui/react-popover';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
+import { useNDK } from '@libs/ndk/provider';
+
 import { ReactionIcon } from '@shared/icons';
 
 const REACTIONS = [
@@ -32,6 +35,9 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
   const [open, setOpen] = useState(false);
   const [reaction, setReaction] = useState<string | null>(null);
 
+  const { ndk } = useNDK();
+  const navigate = useNavigate();
+
   const getReactionImage = (content: string) => {
     const reaction: { img: string } = REACTIONS.find((el) => el.content === content);
     return reaction.img;
@@ -39,6 +45,8 @@ export function NoteReaction({ event }: { event: NDKEvent }) {
 
   const react = async (content: string) => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       setReaction(content);
 
       // react

src/shared/notes/actions/repost.tsx

@@ -2,9 +2,12 @@ import { NDKEvent } from '@nostr-dev-kit/ndk';
 import * as AlertDialog from '@radix-ui/react-alert-dialog';
 import * as Tooltip from '@radix-ui/react-tooltip';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 import { twMerge } from 'tailwind-merge';
 
+import { useNDK } from '@libs/ndk/provider';
+
 import { LoaderIcon, RepostIcon } from '@shared/icons';
 
 export function NoteRepost({ event }: { event: NDKEvent }) {
@@ -12,8 +15,13 @@ export function NoteRepost({ event }: { event: NDKEvent }) {
   const [isLoading, setIsLoading] = useState(false);
   const [isRepost, setIsRepost] = useState(false);
 
+  const { ndk } = useNDK();
+  const navigate = useNavigate();
+
   const submit = async () => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       setIsLoading(true);
 
       // repsot

src/shared/notes/actions/zap.tsx

@@ -7,6 +7,9 @@ import { message } from '@tauri-apps/plugin-dialog';
 import { QRCodeSVG } from 'qrcode.react';
 import { useEffect, useRef, useState } from 'react';
 import CurrencyInput from 'react-currency-input-field';
+import { useNavigate } from 'react-router-dom';
+
+import { useNDK } from '@libs/ndk/provider';
 
 import { CancelIcon, ZapIcon } from '@shared/icons';
 
@@ -16,6 +19,9 @@ import { compactNumber } from '@utils/number';
 
 export function NoteZap({ event }: { event: NDKEvent }) {
   const nwc = useRef(null);
+  const navigate = useNavigate();
+
+  const { ndk } = useNDK();
   const { user } = useProfile(event.pubkey);
 
   const [walletConnectURL, setWalletConnectURL] = useState<string>(null);
@@ -28,6 +34,8 @@ export function NoteZap({ event }: { event: NDKEvent }) {
 
   const createZapRequest = async () => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       const zapAmount = parseInt(amount) * 1000;
       const res = await event.zap(zapAmount, zapMessage);
 

src/shared/notes/replies/form.tsx

@@ -1,5 +1,6 @@
 import { NDKEvent, NDKKind } from '@nostr-dev-kit/ndk';
 import { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
 import { useNDK } from '@libs/ndk/provider';
@@ -9,12 +10,15 @@ import { ReplyMediaUploader } from '@shared/notes';
 
 export function NoteReplyForm({ rootEvent }: { rootEvent: NDKEvent }) {
   const { ndk } = useNDK();
+  const navigate = useNavigate();
 
   const [value, setValue] = useState('');
   const [loading, setLoading] = useState(false);
 
   const submit = async () => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       setLoading(true);
 
       const event = new NDKEvent(ndk);

src/shared/userProfile.tsx

@@ -1,6 +1,6 @@
 import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
 import { useEffect, useState } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
 import { useNDK } from '@libs/ndk/provider';
@@ -17,6 +17,7 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
   const { user } = useProfile(pubkey);
 
   const [followed, setFollowed] = useState(false);
+  const navigate = useNavigate();
 
   const follow = async (pubkey: string) => {
     try {
@@ -36,6 +37,8 @@ export function UserProfile({ pubkey }: { pubkey: string }) {
 
   const unfollow = async (pubkey: string) => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       const user = ndk.getUser({ pubkey: db.account.pubkey });
       const contacts = await user.follows();
       contacts.delete(new NDKUser({ pubkey: pubkey }));

src/shared/widgets/other/nostrBandUserProfile.tsx

@@ -1,5 +1,6 @@
 import { NDKEvent, NDKKind, NDKUser } from '@nostr-dev-kit/ndk';
 import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { toast } from 'sonner';
 
 import { useNDK } from '@libs/ndk/provider';
@@ -22,6 +23,7 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
   const { ndk } = useNDK();
 
   const [followed, setFollowed] = useState(false);
+  const navigate = useNavigate();
 
   const follow = async (pubkey: string) => {
     try {
@@ -41,6 +43,8 @@ export function NostrBandUserProfile({ data }: { data: Profile }) {
 
   const unfollow = async (pubkey: string) => {
     try {
+      if (!ndk.signer) return navigate('/new/privkey');
+
       const user = ndk.getUser({ pubkey: db.account.pubkey });
       const contacts = await user.follows();
       contacts.delete(new NDKUser({ pubkey: pubkey }));