add zap button to emoji packs

src/services/event-zaps.ts

@@ -3,8 +3,7 @@ import { Kind } from "nostr-tools";
 import NostrRequest from "../classes/nostr-request";
 import Subject from "../classes/subject";
 import SuperMap from "../classes/super-map";
-import { getReferences } from "../helpers/nostr/events";
-import { NostrEvent } from "../types/nostr-event";
+import { NostrEvent, isATag, isETag } from "../types/nostr-event";
 import { NostrRequestFilter } from "../types/nostr-query";
 import { isHexKey } from "../helpers/nip19";
 
@@ -29,11 +28,10 @@ class EventZapsService {
 
   handleEvent(event: NostrEvent) {
     if (event.kind !== Kind.Zap) return;
-    const refs = getReferences(event);
-    const id = refs.events[0];
-    if (!id) return;
+    const eventUID = event.tags.find(isETag)?.[1] ?? event.tags.find(isATag)?.[1];
+    if (!eventUID) return;
 
-    const subject = this.subjects.get(id);
+    const subject = this.subjects.get(eventUID);
     if (!subject.value) {
       subject.next([event]);
     } else if (!subject.value.some((e) => e.id === event.id)) {
@@ -74,6 +72,11 @@ class EventZapsService {
 
 const eventZapsService = new EventZapsService();
 
+if (import.meta.env.DEV) {
+  // @ts-ignore
+  window.eventZapsService = eventZapsService;
+}
+
 setInterval(() => {
   eventZapsService.batchRequests();
 }, 1000 * 2);

src/views/emoji-packs/components/emoji-pack-card.tsx

@@ -10,7 +10,6 @@ import {
   Flex,
   Heading,
   Image,
-  Link,
   Text,
 } from "@chakra-ui/react";
 
@@ -23,7 +22,8 @@ import EmojiPackFavoriteButton from "./emoji-pack-favorite-button";
 import { getEventUID } from "../../../helpers/nostr/events";
 import { getEmojisFromPack, getPackName } from "../../../helpers/nostr/emoji-packs";
 import EmojiPackMenu from "./emoji-pack-menu";
-import Timestamp from "../../../components/timestamp";
+import NoteZapButton from "../../../components/note/note-zap-button";
+import HoverLinkOverlay from "../../../components/hover-link-overlay";
 
 export default function EmojiPackCard({ pack, ...props }: Omit<CardProps, "children"> & { pack: NostrEvent }) {
   const emojis = getEmojisFromPack(pack);
@@ -37,17 +37,13 @@ export default function EmojiPackCard({ pack, ...props }: Omit<CardProps, "child
     <Card ref={ref} variant="outline" {...props}>
       <CardHeader display="flex" gap="2" alignItems="center" p="2" pb="0" flexWrap="wrap">
         <Heading size="md">
-          <Link as={RouterLink} to={`/emojis/${naddr}`}>
+          <HoverLinkOverlay as={RouterLink} to={`/emojis/${naddr}`}>
             {getPackName(pack)}
-          </Link>
+          </HoverLinkOverlay>
         </Heading>
         <Text>by</Text>
         <UserAvatarLink pubkey={pack.pubkey} size="xs" />
         <UserLink pubkey={pack.pubkey} isTruncated fontWeight="bold" fontSize="md" />
-        <ButtonGroup size="sm" ml="auto">
-          <EmojiPackFavoriteButton pack={pack} />
-          <EmojiPackMenu pack={pack} aria-label="emoji pack menu" />
-        </ButtonGroup>
       </CardHeader>
       <CardBody p="2">
         {emojis.length > 0 && (
@@ -59,9 +55,13 @@ export default function EmojiPackCard({ pack, ...props }: Omit<CardProps, "child
         )}
       </CardBody>
       <CardFooter p="2" display="flex" pt="0">
-        <Text>
-          Updated: <Timestamp timestamp={pack.created_at} />
-        </Text>
+        <ButtonGroup size="sm" variant="ghost">
+          <NoteZapButton event={pack} />
+          <EmojiPackFavoriteButton pack={pack} />
+        </ButtonGroup>
+        <ButtonGroup size="sm" ml="auto" variant="ghost">
+          <EmojiPackMenu pack={pack} aria-label="emoji pack menu" />
+        </ButtonGroup>
       </CardFooter>
     </Card>
   );

src/views/emoji-packs/emoji-pack.tsx

@@ -18,6 +18,7 @@ import {
   Tag,
   TagCloseButton,
   TagLabel,
+  Text,
 } from "@chakra-ui/react";
 
 import { UserLink } from "../../components/user-link";
@@ -34,6 +35,10 @@ import clientRelaysService from "../../services/client-relays";
 import replaceableEventLoaderService from "../../services/replaceable-event-requester";
 import { DraftNostrEvent, NostrEvent } from "../../types/nostr-event";
 import VerticalPageLayout from "../../components/vertical-page-layout";
+import UserAvatarLink from "../../components/user-avatar-link";
+import NoteZapButton from "../../components/note/note-zap-button";
+import { QuoteRepostButton } from "../../components/note/components/quote-repost-button";
+import Timestamp from "../../components/timestamp";
 
 function AddEmojiForm({ onAdd }: { onAdd: (values: { name: string; url: string }) => void }) {
   const { register, handleSubmit, watch, getValues, reset } = useForm({
@@ -127,11 +132,6 @@ function EmojiPackPage({ pack }: { pack: NostrEvent }) {
           Back
         </Button>
 
-        <Heading size="md" isTruncated>
-          {getPackName(pack)}
-        </Heading>
-        <EmojiPackFavoriteButton pack={pack} size="sm" />
-
         <Spacer />
 
         <ButtonGroup>
@@ -151,6 +151,28 @@ function EmojiPackPage({ pack }: { pack: NostrEvent }) {
         </ButtonGroup>
       </Flex>
 
+      <Flex gap="2" alignItems="center">
+        <Heading size="lg" isTruncated>
+          {getPackName(pack)}
+        </Heading>
+        <EmojiPackFavoriteButton pack={pack} size="sm" />
+      </Flex>
+
+      <Flex gap="2" alignItems="center">
+        <Text>Created by:</Text>
+        <UserAvatarLink pubkey={pack.pubkey} size="sm" />
+        <UserLink pubkey={pack.pubkey} fontWeight="bold" />
+      </Flex>
+      <Text>
+        Updated: <Timestamp timestamp={pack.created_at} />
+      </Text>
+
+      <ButtonGroup variant="ghost">
+        <NoteZapButton event={pack} />
+        <QuoteRepostButton event={pack} />
+        <EmojiPackFavoriteButton pack={pack} />
+      </ButtonGroup>
+
       {emojis.length > 0 && (
         <>
           {!editing && (
@@ -169,7 +191,6 @@ function EmojiPackPage({ pack }: { pack: NostrEvent }) {
               </ButtonGroup>
             </Flex>
           )}
-          <Divider />
           <SimpleGrid columns={{ base: 2, sm: 3, md: 2, lg: 4, xl: 6 }} gap="2">
             {(editing ? draftEmojis : emojis).map(({ name, url }) => (
               <EmojiTag

src/views/emoji-packs/index.tsx

@@ -40,10 +40,9 @@ function UserEmojiPackMangerPage() {
     <>
       {favorites.length > 0 && (
         <>
-          <Heading size="md" mt="2">
+          <Heading size="lg" mt="2">
             Favorite packs
           </Heading>
-          <Divider />
           <SimpleGrid columns={{ base: 1, lg: 2 }} spacing="2">
             {favorites.map((event) => (
               <EmojiPackCard key={getEventUID(event)} pack={event} />
@@ -53,10 +52,9 @@ function UserEmojiPackMangerPage() {
       )}
       {packs.length > 0 && (
         <>
-          <Heading size="md" mt="2">
+          <Heading size="lg" mt="2">
             Emoji packs
           </Heading>
-          <Divider />
           <SimpleGrid columns={{ base: 1, lg: 2 }} spacing="2">
             {packs.map((event) => (
               <EmojiPackCard key={getEventUID(event)} pack={event} />

src/views/user/index.tsx

@@ -59,7 +59,7 @@ const tabs = [
   { label: "Relays", path: "relays" },
   { label: "Goals", path: "goals" },
   { label: "Tracks", path: "tracks" },
-  { label: "Emoji Packs", path: "emojis" },
+  { label: "Emojis", path: "emojis" },
   { label: "Torrents", path: "torrents" },
   { label: "Reports", path: "reports" },
   { label: "Followers", path: "followers" },