wip: zap

src/app/auth/create/step-4.tsx

@@ -12,9 +12,9 @@ import { usePublish } from '@utils/hooks/usePublish';
 
 export function CreateStep4Screen() {
   const navigate = useNavigate();
-  const publish = usePublish();
   const profile = useOnboarding((state) => state.profile);
 
+  const { publish } = usePublish();
   const { account } = useAccount();
 
   const [username, setUsername] = useState('');

src/app/auth/create/step-5.tsx

@@ -114,11 +114,11 @@ const INITIAL_LIST = [
 export function CreateStep5Screen() {
   const queryClient = useQueryClient();
   const navigate = useNavigate();
-  const publish = usePublish();
 
   const [loading, setLoading] = useState(false);
   const [follows, setFollows] = useState([]);
 
+  const { publish } = usePublish();
   const { account } = useAccount();
   const { status, data } = useQuery(['trending-profiles'], async () => {
     const res = await fetch('https://api.nostr.band/v0/trending/profiles');

src/app/auth/onboarding.tsx

@@ -9,10 +9,11 @@ import { useAccount } from '@utils/hooks/useAccount';
 import { usePublish } from '@utils/hooks/usePublish';
 
 export function OnboardingScreen() {
-  const publish = usePublish();
   const navigate = useNavigate();
 
+  const { publish } = usePublish();
   const { status, account } = useAccount();
+
   const [loading, setLoading] = useState(false);
 
   const submit = async () => {

src/app/chat/components/messages/form.tsx

@@ -14,7 +14,7 @@ export function ChatMessageForm({
   userPubkey: string;
   userPrivkey: string;
 }) {
-  const publish = usePublish();
+  const { publish } = usePublish();
   const [value, setValue] = useState('');
 
   const encryptMessage = useCallback(async () => {

src/app/space/components/addImage.tsx

@@ -19,7 +19,7 @@ import { usePublish } from '@utils/hooks/usePublish';
 
 export function AddImageBlock() {
   const queryClient = useQueryClient();
-  const publish = usePublish();
+  const { publish } = usePublish();
 
   const [loading, setLoading] = useState(false);
   const [isOpen, setIsOpen] = useState(false);

src/app/space/index.tsx

@@ -1,13 +1,13 @@
 import { useQuery } from '@tanstack/react-query';
 import { useCallback } from 'react';
 
-import { UserBlock } from '@app/space//components/blocks/user';
 import { AddBlock } from '@app/space/components/add';
 import { FeedBlock } from '@app/space/components/blocks/feed';
 import { FollowingBlock } from '@app/space/components/blocks/following';
 import { HashtagBlock } from '@app/space/components/blocks/hashtag';
 import { ImageBlock } from '@app/space/components/blocks/image';
 import { ThreadBlock } from '@app/space/components/blocks/thread';
+import { UserBlock } from '@app/space/components/blocks/user';
 
 import { getBlocks } from '@libs/storage';
 

src/shared/composer/composer.tsx

@@ -57,7 +57,7 @@ export function Composer() {
   });
 
   const upload = useImageUploader();
-  const publish = usePublish();
+  const { publish } = usePublish();
 
   const uploadImage = async (file?: string) => {
     const image = await upload(file);

src/shared/editProfileModal.tsx

@@ -17,7 +17,6 @@ import { usePublish } from '@utils/hooks/usePublish';
 
 export function EditProfileModal() {
   const queryClient = useQueryClient();
-  const publish = usePublish();
 
   const [isOpen, setIsOpen] = useState(false);
   const [loading, setLoading] = useState(false);
@@ -25,6 +24,7 @@ export function EditProfileModal() {
   const [banner, setBanner] = useState('');
   const [nip05, setNIP05] = useState({ verified: false, text: '' });
 
+  const { publish } = usePublish();
   const { account } = useAccount();
   const {
     register,

src/shared/notes/actions.tsx

@@ -28,7 +28,7 @@ export function NoteActions({
           <NoteReply id={id} pubkey={pubkey} />
           <NoteReaction id={id} pubkey={pubkey} />
           <NoteRepost id={id} pubkey={pubkey} />
-          <NoteZap />
+          <NoteZap id={id} />
         </div>
         {!noOpenThread && (
           <>

src/shared/notes/actions/reaction.tsx

@@ -32,7 +32,7 @@ export function NoteReaction({ id, pubkey }: { id: string; pubkey: string }) {
   const [open, setOpen] = useState(false);
   const [reaction, setReaction] = useState<string | null>(null);
 
-  const publish = usePublish();
+  const { publish } = usePublish();
 
   const getReactionImage = (content: string) => {
     const reaction: { img: string } = REACTIONS.find((el) => el.content === content);

src/shared/notes/actions/repost.tsx

@@ -7,7 +7,7 @@ import { FULL_RELAYS } from '@stores/constants';
 import { usePublish } from '@utils/hooks/usePublish';
 
 export function NoteRepost({ id, pubkey }: { id: string; pubkey: string }) {
-  const publish = usePublish();
+  const { publish } = usePublish();
 
   const submit = async () => {
     const tags = [

src/shared/notes/actions/zap.tsx

@@ -1,13 +1,26 @@
+import { NostrEvent } from '@nostr-dev-kit/ndk';
 import * as Tooltip from '@radix-ui/react-tooltip';
 
 import { ZapIcon } from '@shared/icons';
 
-export function NoteZap() {
+import { useEvent } from '@utils/hooks/useEvent';
+import { usePublish } from '@utils/hooks/usePublish';
+
+export function NoteZap({ id }: { id: string }) {
+  const { createZap } = usePublish();
+  const { data: event } = useEvent(id);
+
+  const submit = async () => {
+    const res = await createZap(event as NostrEvent, 21000);
+    console.log(res);
+  };
+
   return (
     <Tooltip.Root delayDuration={150}>
       <Tooltip.Trigger asChild>
         <button
           type="button"
+          onClick={() => submit()}
           className="group inline-flex h-7 w-7 items-center justify-center"
         >
           <ZapIcon className="h-5 w-5 text-zinc-300 group-hover:text-orange-400" />

src/shared/notes/replies/form.tsx

@@ -10,9 +10,9 @@ import { usePublish } from '@utils/hooks/usePublish';
 import { displayNpub } from '@utils/shortenKey';
 
 export function NoteReplyForm({ id, pubkey }: { id: string; pubkey: string }) {
-  const publish = usePublish();
-
+  const { publish } = usePublish();
   const { status, user } = useProfile(pubkey);
+
   const [value, setValue] = useState('');
 
   const submit = () => {

src/utils/hooks/useEvent.tsx

@@ -4,16 +4,18 @@ import { useNDK } from '@libs/ndk/provider';
 import { createNote, getNoteByID } from '@libs/storage';
 
 import { parser } from '@utils/parser';
+import { LumeEvent } from '@utils/types';
 
 export function useEvent(id: string, fallback?: string) {
   const { ndk } = useNDK();
   const { status, data, error, isFetching } = useQuery(['note', id], async () => {
     const result = await getNoteByID(id);
     if (result) {
-      return result;
+      return result as LumeEvent;
     } else {
       if (fallback) {
-        const embed = JSON.parse(fallback);
+        const embed: LumeEvent = JSON.parse(fallback);
+        embed['event_id'] = embed.id;
         await createNote(
           embed.id,
           embed.pubkey,
@@ -40,7 +42,7 @@ export function useEvent(id: string, fallback?: string) {
             // @ts-ignore
             event['content'] = parser(event);
           }
-          return event;
+          return event as LumeEvent;
         } else {
           throw new Error('Event not found');
         }

src/utils/hooks/usePublish.tsx

@@ -1,4 +1,5 @@
-import { NDKEvent, NDKKind, NDKPrivateKeySigner } from '@nostr-dev-kit/ndk';
+import { NDKEvent, NDKKind, NDKPrivateKeySigner, NostrEvent } from '@nostr-dev-kit/ndk';
+import destr from 'destr';
 
 import { useNDK } from '@libs/ndk/provider';
 
@@ -38,5 +39,17 @@ export function usePublish() {
     return event;
   };
 
-  return publish;
+  const createZap = async (event: NostrEvent, amount: number) => {
+    if (!privkey) throw new Error('Private key not found');
+    if (typeof event.tags === 'string') event.tags = destr(event.tags);
+
+    const signer = new NDKPrivateKeySigner(privkey);
+    ndk.signer = signer;
+
+    const ndkEvent = new NDKEvent(ndk, event);
+    const res = await ndkEvent.zap(amount, 'test zap from lume');
+    return res;
+  };
+
+  return { publish, createZap };
 }

src/utils/hooks/useSocial.tsx

@@ -10,8 +10,8 @@ import { nip02ToArray } from '@utils/transform';
 
 export function useSocial() {
   const queryClient = useQueryClient();
-  const publish = usePublish();
 
+  const { publish } = usePublish();
   const { fetcher, relayUrls } = useNDK();
   const { account } = useAccount();
   const { status, data: userFollows } = useQuery(