Merge pull request #14 from ostyjs/update

Update with new Nostr-Hooks
ostyjs · Nov 21, 2024 · e11af41 · e11af41
2 parents f07d50a + d05ace7
commit e11af41
Show file tree

Hide file tree

Showing 22 changed files with 180 additions and 262 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "create-osty",
-  "version": "0.3.24",
+  "version": "0.4.0",
   "type": "module",
   "license": "MIT",
   "author": "Sepehr Safari",

diff --git a/templates/react-shadcn/package.json b/templates/react-shadcn/package.json
@@ -11,73 +11,73 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.9.0",
-    "@nostr-dev-kit/ndk": "^2.10.1",
-    "@nostr-dev-kit/ndk-cache-dexie": "^2.5.2",
-    "@radix-ui/react-accordion": "^1.1.2",
-    "@radix-ui/react-alert-dialog": "^1.0.5",
-    "@radix-ui/react-aspect-ratio": "^1.0.3",
-    "@radix-ui/react-avatar": "^1.0.4",
-    "@radix-ui/react-checkbox": "^1.0.4",
-    "@radix-ui/react-collapsible": "^1.0.3",
-    "@radix-ui/react-context-menu": "^2.1.5",
-    "@radix-ui/react-dialog": "^1.0.5",
-    "@radix-ui/react-dropdown-menu": "^2.0.6",
-    "@radix-ui/react-hover-card": "^1.0.7",
-    "@radix-ui/react-icons": "^1.3.0",
-    "@radix-ui/react-label": "^2.0.2",
-    "@radix-ui/react-menubar": "^1.0.4",
-    "@radix-ui/react-navigation-menu": "^1.1.4",
-    "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-progress": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.1.3",
-    "@radix-ui/react-scroll-area": "^1.0.5",
-    "@radix-ui/react-select": "^2.0.0",
-    "@radix-ui/react-separator": "^1.0.3",
-    "@radix-ui/react-slider": "^1.1.2",
-    "@radix-ui/react-slot": "^1.0.2",
-    "@radix-ui/react-switch": "^1.0.3",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@radix-ui/react-toast": "^1.1.5",
-    "@radix-ui/react-toggle": "^1.0.3",
-    "@radix-ui/react-toggle-group": "^1.0.4",
-    "@radix-ui/react-tooltip": "^1.0.7",
+    "@hookform/resolvers": "^3.9.1",
+    "@nostr-dev-kit/ndk": "^2.10.6",
+    "@nostr-dev-kit/ndk-cache-dexie": "^2.5.7",
+    "@radix-ui/react-accordion": "^1.2.1",
+    "@radix-ui/react-alert-dialog": "^1.1.2",
+    "@radix-ui/react-aspect-ratio": "^1.1.0",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-context-menu": "^2.2.2",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-hover-card": "^1.1.2",
+    "@radix-ui/react-icons": "^1.3.2",
+    "@radix-ui/react-label": "^2.1.0",
+    "@radix-ui/react-menubar": "^1.1.2",
+    "@radix-ui/react-navigation-menu": "^1.2.1",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-progress": "^1.1.0",
+    "@radix-ui/react-radio-group": "^1.2.1",
+    "@radix-ui/react-scroll-area": "^1.2.1",
+    "@radix-ui/react-select": "^2.1.2",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.1",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@radix-ui/react-switch": "^1.1.1",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-toggle": "^1.1.0",
+    "@radix-ui/react-toggle-group": "^1.1.0",
+    "@radix-ui/react-tooltip": "^1.1.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
+    "cmdk": "^1.0.4",
     "date-fns": "^4.1.0",
-    "embla-carousel-react": "^8.2.1",
-    "lucide-react": "^0.439.0",
-    "next-themes": "^0.3.0",
-    "nostr-hooks": "^2.9.12",
-    "nostr-tools": "^2.8.1",
+    "embla-carousel-react": "^8.4.0",
+    "lucide-react": "^0.460.0",
+    "next-themes": "^0.4.3",
+    "nostr-hooks": "^3.0.0",
+    "nostr-tools": "^2.10.3",
     "react": "^18.3.1",
-    "react-day-picker": "^9.0.9",
+    "react-day-picker": "^9.3.2",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.0",
-    "react-resizable-panels": "^2.1.2",
-    "react-router-dom": "^6.26.2",
-    "sonner": "^1.5.0",
-    "tailwind-merge": "^2.5.2",
+    "react-hook-form": "^7.53.2",
+    "react-resizable-panels": "^2.1.7",
+    "react-router-dom": "^6.28.0",
+    "sonner": "^1.7.0",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "vaul": "^1.1.0",
+    "vaul": "^1.1.1",
     "zod": "^3.23.8",
-    "zustand": "^5.0.0"
+    "zustand": "^5.0.1"
   },
   "devDependencies": {
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^8.5.0",
-    "@typescript-eslint/parser": "^8.5.0",
-    "@vitejs/plugin-react": "^4.3.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "@vitejs/plugin-react": "^4.3.3",
     "autoprefixer": "^10.4.20",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
-    "postcss": "^8.4.45",
+    "eslint": "^9.15.0",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "postcss": "^8.4.49",
     "prettier": "^3.3.3",
-    "tailwindcss": "^3.4.10",
-    "typescript": "^5.6.2",
-    "vite": "^5.4.3"
+    "tailwindcss": "^3.4.15",
+    "typescript": "^5.6.3",
+    "vite": "^5.4.11"
   }
 }
diff --git a/templates/react-shadcn/src/app/index.tsx b/templates/react-shadcn/src/app/index.tsx
@@ -1,4 +1,4 @@
-import { useNostrHooks } from 'nostr-hooks';
+import { useEffect } from 'react';
 import { RouterProvider } from 'react-router-dom';
 
 import './index.css';
@@ -8,8 +8,22 @@ import { router } from '@/pages';
 import { ThemeProvider } from '@/shared/components/theme-provider';
 import { Toaster } from '@/shared/components/ui/toaster';
 
+import { useNdk } from '@/shared/hooks';
+
 export const App = () => {
-  useNostrHooks();
+  const { initNdk, ndk, loginFromLocalStorage } = useNdk();
+
+  useEffect(() => {
+    initNdk({ explicitRelayUrls: ['wss://nos.lol'] });
+  }, [initNdk]);
+
+  useEffect(() => {
+    ndk?.connect();
+  }, [ndk]);
+
+  useEffect(() => {
+    loginFromLocalStorage();
+  }, [loginFromLocalStorage]);
 
   return (
     <>

diff --git a/...n/src/features/login-modal/hooks/index.ts → .../src/features/login-widget/hooks/index.ts b/...n/src/features/login-modal/hooks/index.ts → .../src/features/login-widget/hooks/index.ts
@@ -1,20 +1,19 @@
-import { useLogin } from 'nostr-hooks';
 import { nsecEncode } from 'nostr-tools/nip19';
 import { generateSecretKey } from 'nostr-tools/pure';
 import { useState } from 'react';
 
 import { useToast } from '@/shared/components/ui/use-toast';
 
-import { useLoginModalState } from '@/shared/hooks';
+import { useNdk } from '@/shared/hooks';
 
-export const useLoginModal = () => {
+export const useLoginWidget = () => {
   const [nip46Input, setNip46Input] = useState('');
   const [nsecInput, setNsecInput] = useState('');
   const [loading, setLoading] = useState(false);
 
-  const { isLoginModalOpen, closeLoginModal, setIsLoginModalOpen } = useLoginModalState();
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
-  const { loginWithExtension, loginWithRemoteSigner, loginWithSecretKey } = useLogin();
+  const { loginWithExtension, loginWithRemoteSigner, loginWithPrivateKey } = useNdk();
 
   const { toast } = useToast();
 
@@ -28,7 +27,7 @@ export const useLoginModal = () => {
         setLoading(false);
       },
       onSuccess: () => {
-        closeLoginModal();
+        setIsModalOpen(false);
         setLoading(false);
       },
     });
@@ -45,31 +44,31 @@ export const useLoginModal = () => {
         setLoading(false);
       },
       onSuccess: () => {
-        closeLoginModal();
+        setIsModalOpen(false);
         setLoading(false);
       },
     });
   };
 
-  const handleSecretKeySigner = () => {
+  const handlePrivateKeySigner = () => {
     setLoading(true);
 
-    loginWithSecretKey({
-      secretKey: nsecInput,
+    loginWithPrivateKey({
+      privateKey: nsecInput,
       onError: (e) => {
         console.error(e);
         toast({ title: 'Error', description: String(e), variant: 'destructive' });
         setLoading(false);
       },
       onSuccess: () => {
-        closeLoginModal();
+        setIsModalOpen(false);
         setLoading(false);
         setNsecInput('');
       },
     });
   };
 
-  const handleSecretKeyGenerate = () => {
+  const handlePrivateKeyGenerate = () => {
     const sk = generateSecretKey();
     const nsec = nsecEncode(sk);
     setNsecInput(nsec);
@@ -83,9 +82,9 @@ export const useLoginModal = () => {
     setNsecInput,
     handleRemoteSigner,
     handleExtensionSigner,
-    handleSecretKeySigner,
-    handleSecretKeyGenerate,
-    isLoginModalOpen,
-    setIsLoginModalOpen,
+    handlePrivateKeySigner,
+    handlePrivateKeyGenerate,
+    isModalOpen,
+    setIsModalOpen,
   };
 };
diff --git a/...shadcn/src/features/login-modal/index.tsx → ...hadcn/src/features/login-widget/index.tsx b/...shadcn/src/features/login-modal/index.tsx → ...hadcn/src/features/login-widget/index.tsx
@@ -1,17 +1,23 @@
 import { Loader2 } from 'lucide-react';
 
 import { Button } from '@/shared/components/ui/button';
-import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/shared/components/ui/dialog';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/shared/components/ui/dialog';
 import { Input } from '@/shared/components/ui/input';
 import { Label } from '@/shared/components/ui/label';
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/shared/components/ui/tabs';
 import { Muted } from '@/shared/components/ui/typography/muted';
 
-import { useLoginModal } from './hooks';
+import { useLoginWidget } from './hooks';
 
 // Check out the `example-components` folder to see how to use this component
 
-export const LoginModal = () => {
+export const LoginWidget = () => {
   const {
     loading,
     nip46Input,
@@ -20,15 +26,19 @@ export const LoginModal = () => {
     setNsecInput,
     handleRemoteSigner,
     handleExtensionSigner,
-    handleSecretKeySigner,
-    handleSecretKeyGenerate,
-    isLoginModalOpen,
-    setIsLoginModalOpen,
-  } = useLoginModal();
+    handlePrivateKeySigner,
+    handlePrivateKeyGenerate,
+    isModalOpen,
+    setIsModalOpen,
+  } = useLoginWidget();
 
   return (
     <>
-      <Dialog open={isLoginModalOpen} onOpenChange={(open) => setIsLoginModalOpen(open)}>
+      <Dialog open={isModalOpen} onOpenChange={(open) => setIsModalOpen(open)}>
+        <DialogTrigger asChild>
+          <Button>Login</Button>
+        </DialogTrigger>
+
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Login</DialogTitle>
@@ -118,10 +128,10 @@ export const LoginModal = () => {
                   placeholder="nsec..."
                   value={nsecInput}
                   onChange={(e) => setNsecInput(e.target.value)}
-                  onKeyPress={(e) => e.key === 'Enter' && handleSecretKeySigner()}
+                  onKeyPress={(e) => e.key === 'Enter' && handlePrivateKeySigner()}
                 />
 
-                <Button className="mt-4 w-full" disabled={loading} onClick={handleSecretKeySigner}>
+                <Button className="mt-4 w-full" disabled={loading} onClick={handlePrivateKeySigner}>
                   {loading ? <Loader2 className="animate-spin" /> : `Login With Secret Key`}
                 </Button>
 
@@ -132,7 +142,7 @@ export const LoginModal = () => {
                     <Button
                       variant="link"
                       className="p-0 text-blue-600"
-                      onClick={handleSecretKeyGenerate}
+                      onClick={handlePrivateKeyGenerate}
                     >
                       Generate a new secret key
                     </Button>

diff --git a/templates/react-shadcn/src/features/logout-widget/index.tsx b/templates/react-shadcn/src/features/logout-widget/index.tsx
@@ -0,0 +1,9 @@
+import { Button } from '@/shared/components/ui/button';
+
+import { useNdk } from '@/shared/hooks';
+
+export const LogoutWidget = () => {
+  const { logout } = useNdk();
+
+  return <Button onClick={() => logout()}>Logout</Button>;
+};
diff --git a/...rc/features/zap/zap-modal/config/index.ts → ...n/src/features/zap-widget/config/index.ts b/...rc/features/zap/zap-modal/config/index.ts → ...n/src/features/zap-widget/config/index.ts