Merge pull request #13 from ostyjs/update-deps

enhancements

package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-osty",
-  "version": "0.3.18",
+  "version": "0.3.20",
   "type": "module",
   "license": "MIT",
   "author": "Sepehr Safari",

templates/react-shadcn/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.3.4",
-    "@nostr-dev-kit/ndk": "^2.8.2",
-    "@nostr-dev-kit/ndk-cache-dexie": "^2.4.2",
+    "@nostr-dev-kit/ndk": "^2.10.0",
+    "@nostr-dev-kit/ndk-cache-dexie": "^2.5.1",
     "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-aspect-ratio": "^1.0.3",
@@ -49,7 +49,7 @@
     "embla-carousel-react": "^8.0.0-rc19",
     "lucide-react": "^0.314.0",
     "next-themes": "^0.2.1",
-    "nostr-hooks": "^2.8.4",
+    "nostr-hooks": "^2.9.4",
     "nostr-tools": "^2.7.0",
     "react": "^18.2.0",
     "react-day-picker": "^8.10.0",

templates/react-shadcn/src/features/login-modal/hooks/index.ts

@@ -4,14 +4,15 @@ import { generateSecretKey } from 'nostr-tools/pure';
 import { useState } from 'react';
 
 import { useToast } from '@/shared/components/ui/use-toast';
-import { useLoginParam } from '@/shared/hooks';
+
+import { useLoginModalState } from '@/shared/hooks';
 
 export const useLoginModal = () => {
   const [nip46Input, setNip46Input] = useState('');
   const [nsecInput, setNsecInput] = useState('');
   const [loading, setLoading] = useState(false);
 
-  const { isLoginModalOpen, closeLoginModal, openLoginModal } = useLoginParam();
+  const { isLoginModalOpen, closeLoginModal, setIsLoginModalOpen } = useLoginModalState();
 
   const { loginWithExtention, loginWithRemoteSigner, loginWithSecretKey } = useLogin();
 
@@ -85,7 +86,6 @@ export const useLoginModal = () => {
     handleSecretKeySigner,
     handleSecretKeyGenerate,
     isLoginModalOpen,
-    closeLoginModal,
-    openLoginModal,
+    setIsLoginModalOpen,
   };
 };

templates/react-shadcn/src/features/login-modal/index.tsx

@@ -23,16 +23,12 @@ export const LoginModal = () => {
     handleSecretKeySigner,
     handleSecretKeyGenerate,
     isLoginModalOpen,
-    openLoginModal,
-    closeLoginModal,
+    setIsLoginModalOpen,
   } = useLoginModal();
 
   return (
     <>
-      <Dialog
-        open={isLoginModalOpen}
-        onOpenChange={(open) => (open ? openLoginModal() : closeLoginModal())}
-      >
+      <Dialog open={isLoginModalOpen} onOpenChange={(open) => setIsLoginModalOpen(open)}>
         <DialogContent className="sm:max-w-[425px]">
           <DialogHeader>
             <DialogTitle>Login</DialogTitle>

templates/react-shadcn/src/features/zap/zap-modal/hooks/index.ts

@@ -1,44 +1,31 @@
-import { useNdk, useProfiles } from 'nostr-hooks';
+import { NDKEvent, NDKTag } from '@nostr-dev-kit/ndk';
+import { useNdk, useProfile } from 'nostr-hooks';
 import { useState } from 'react';
 
 import { useToast } from '@/shared/components/ui/use-toast';
-import { useLoginParam } from '@/shared/hooks';
+
+import { useLoginModalState, useZapModalState } from '@/shared/hooks';
 
 import { ZAP_AMOUNTS } from '../config';
-import { ZapTarget } from '../types';
 import { payInvoiceByWebln } from '../utils';
 
-// TODO: add support for other payment methods rather than just webln
-
-export const useZapModal = ({ target }: { target: ZapTarget }) => {
+export const useZapModal = () => {
   const [selectedAmount, setSelectedAmount] = useState(ZAP_AMOUNTS[0]);
   const [comment, setComment] = useState('');
   const [processing, setProcessing] = useState(false);
 
   const { toast } = useToast();
 
   const { ndk } = useNdk();
-  const { openLoginModal } = useLoginParam();
 
-  const { events, users } = useProfiles(
-    target.type == 'event' ? { events: [target.event] } : { users: [target.user] },
-  );
+  const { openLoginModal } = useLoginModalState();
+  const { zapTarget, setZapTarget, isZapModalOpen, setIsZapModalOpen } = useZapModalState();
 
-  let name = '';
-  let image = '';
-  if (target.type == 'event') {
-    if (events.length > 0) {
-      name = events[0].author.profile?.name || '';
-      image = events[0].author.profile?.image || '';
-    }
-  } else {
-    if (users.length > 0) {
-      name = users[0].profile?.name || '';
-      image = users[0].profile?.image || '';
-    }
-  }
+  const { profile } = useProfile({ pubkey: zapTarget?.pubkey });
+
+  const process = () => {
+    if (!zapTarget) return;
 
-  const process = (target: ZapTarget) => {
     setProcessing(true);
 
     if (!ndk.signer) {
@@ -48,35 +35,40 @@ export const useZapModal = ({ target }: { target: ZapTarget }) => {
       return;
     }
 
-    const _target = target.type == 'event' ? target.event : target.user;
+    const extraTags: NDKTag[] | undefined =
+      zapTarget instanceof NDKEvent ? [['e', zapTarget.id]] : undefined;
 
-    _target
-      .zap(selectedAmount.amount * 1000, comment)
-      .then((invoice) => {
-        invoice &&
-          payInvoiceByWebln(invoice)
-            .then((res) =>
-              res
-                ? toast({ title: 'Success' })
-                : toast({ title: 'Failed', variant: 'destructive' }),
-            )
-            .finally(() => setProcessing(false));
-      })
-      .catch(() => {
+    const ndkUser = ndk.getUser({ pubkey: zapTarget.pubkey });
+    ndkUser.zap(selectedAmount.amount * 1000, comment, extraTags).then((invoice) => {
+      if (typeof invoice === 'string') {
+        payInvoiceByWebln(invoice)
+          .then((res) => {
+            if (res) {
+              toast({ title: 'Successful ⚡️⚡️⚡️' });
+              setZapTarget(undefined);
+              setIsZapModalOpen(false);
+            } else {
+              toast({ title: 'Failed', variant: 'destructive' });
+            }
+          })
+          .finally(() => setProcessing(false));
+      } else {
         toast({ title: 'Failed', variant: 'destructive' });
-
         setProcessing(false);
-      });
+      }
+    });
   };
 
   return {
     selectedAmount,
     setSelectedAmount,
     comment,
     setComment,
-    name,
-    image,
     processing,
     process,
+    isZapModalOpen,
+    setIsZapModalOpen,
+    displayName: profile?.displayName,
+    image: profile?.image,
   };
 };

templates/react-shadcn/src/features/zap/zap-modal/index.tsx

@@ -8,49 +8,40 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
 } from '@/shared/components/ui/dialog';
 import { Input } from '@/shared/components/ui/input';
 import { Small } from '@/shared/components/ui/typography/small';
 
 import { ZAP_AMOUNTS } from './config';
 import { useZapModal } from './hooks';
-import { ZapTarget } from './types';
 
 // Check out the `example-components` folder to see how to use this component
 
-export const ZapModal = ({
-  children,
-  target,
-}: {
-  children: React.ReactNode;
-  target: ZapTarget;
-}) => {
+export const ZapModal = () => {
   const {
     comment,
     image,
-    name,
+    displayName,
     selectedAmount,
     setComment,
     setSelectedAmount,
     processing,
     process,
-  } = useZapModal({
-    target,
-  });
+    isZapModalOpen,
+    setIsZapModalOpen,
+  } = useZapModal();
 
   return (
-    <Dialog>
-      <DialogTrigger asChild>{children}</DialogTrigger>
+    <Dialog open={isZapModalOpen} onOpenChange={(open) => setIsZapModalOpen(open)}>
       <DialogContent className="sm:max-w-[425px]">
         <DialogHeader>
           <DialogTitle className="flex gap-4 items-center">
             <Avatar>
               <AvatarImage src={image} />
-              <AvatarFallback>{name?.[0]}</AvatarFallback>
+              <AvatarFallback>{displayName?.[0]}</AvatarFallback>
             </Avatar>
 
-            <span>Send sats to {name}</span>
+            <span>Send sats to {displayName}</span>
           </DialogTitle>
         </DialogHeader>
 
@@ -102,7 +93,7 @@ export const ZapModal = ({
             className="w-full"
             disabled={!selectedAmount.amount || processing}
             onClick={() => {
-              process(target);
+              process();
             }}
           >
             {processing ? (

templates/react-shadcn/src/pages/home/example-components/login.tsx

@@ -1,17 +1,14 @@
 import { useActiveUser, useLogin } from 'nostr-hooks';
-import { useEffect } from 'react';
 
 import { Button } from '@/shared/components/ui/button';
-import { useLoginParam } from '@/shared/hooks';
+
+import { useLoginModalState } from '@/shared/hooks';
 
 export const Login = () => {
   const { activeUser } = useActiveUser();
-  const { openLoginModal } = useLoginParam();
-  const { loginFromLocalStorage, logout } = useLogin();
+  const { logout } = useLogin();
 
-  useEffect(() => {
-    loginFromLocalStorage({});
-  }, [loginFromLocalStorage]);
+  const { openLoginModal } = useLoginModalState();
 
   if (activeUser) {
     return <Button onClick={() => logout()}>Logout</Button>;

templates/react-shadcn/src/pages/home/example-components/zap-me.tsx

@@ -1,10 +1,12 @@
 import { useNdk } from 'nostr-hooks';
 
-import { ZapModal } from '@/features/zap';
-
 import { Button } from '@/shared/components/ui/button';
 
+import { useZapModalState } from '@/shared/hooks';
+
 export const ZapMe = () => {
+  const { openZapModal, setZapTarget } = useZapModalState();
+
   const { ndk } = useNdk();
 
   const user = ndk.getUser({
@@ -14,8 +16,13 @@ export const ZapMe = () => {
   if (!ndk) return null;
 
   return (
-    <ZapModal target={{ type: 'user', user }}>
-      <Button>Zap me!</Button>
-    </ZapModal>
+    <Button
+      onClick={() => {
+        setZapTarget(user);
+        openZapModal();
+      }}
+    >
+      Zap me!
+    </Button>
   );
 };

templates/react-shadcn/src/pages/index.tsx

@@ -1,13 +1,15 @@
 import { Outlet, createBrowserRouter } from 'react-router-dom';
 
 import { LoginModal } from '@/features/login-modal';
+import { ZapModal } from '@/features/zap';
 
 const Layout = () => {
   return (
     <>
       <Outlet />
 
       <LoginModal />
+      <ZapModal />
     </>
   );
 };

templates/react-shadcn/src/shared/hooks/index.ts

@@ -1 +1,2 @@
-export { useLoginParam } from './use-login-param';
+export { useLoginModalState } from './use-login-modal-state';
+export { useZapModalState } from './use-zap-modal-state';

templates/react-shadcn/src/shared/hooks/use-login-modal-state/index.ts

@@ -0,0 +1,31 @@
+import { useStore } from '@/shared/store';
+
+/**
+ * Custom hook for managing the login modal state.
+ *
+ * @returns An object containing functions and state variables related to the login modal.
+ */
+export const useLoginModalState = () => {
+  const isLoginModalOpen = useStore((state) => state.isLoginModalOpen);
+  const setIsLoginModalOpen = useStore((state) => state.setIsLoginModalOpen);
+
+  const openLoginModal = () => {
+    setIsLoginModalOpen(true);
+  };
+
+  const closeLoginModal = () => {
+    setIsLoginModalOpen(false);
+  };
+
+  const toggleLoginModal = () => {
+    setIsLoginModalOpen(!isLoginModalOpen);
+  };
+
+  return {
+    isLoginModalOpen,
+    openLoginModal,
+    closeLoginModal,
+    setIsLoginModalOpen,
+    toggleLoginModal,
+  };
+};