Show multiple pubkeys on badge award event

.changeset/polite-points-retire.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": patch
+---
+
+Show multiple pubkeys on badge award event

src/helpers/nostr/badges.ts

@@ -1,4 +1,5 @@
 import { NostrEvent, isATag, isPTag } from "../../types/nostr-event";
+import { getPubkeysFromList } from "./lists";
 
 export const PROFILE_BADGES_IDENTIFIER = "profile_badges";
 
@@ -30,9 +31,7 @@ export function getBadgeThumbnails(event: NostrEvent) {
 }
 
 export function getBadgeAwardPubkey(event: NostrEvent) {
-  const pubkey = event.tags.find(isPTag)?.[1];
-  if (!pubkey) throw new Error("Missing pubkey");
-  return pubkey;
+  return getPubkeysFromList(event);
 }
 export function getBadgeAwardBadge(event: NostrEvent) {
   const badgeCord = event.tags.find(isATag)?.[1];

src/views/badges/badge-details.tsx

@@ -6,7 +6,7 @@ import { ArrowLeftSIcon } from "../../components/icons";
 import { useDeleteEventContext } from "../../providers/delete-event-provider";
 import useReplaceableEvent from "../../hooks/use-replaceable-event";
 import { EventRelays } from "../../components/note/note-relays";
-import { getBadgeDescription, getBadgeImage, getBadgeName } from "../../helpers/nostr/badges";
+import { getBadgeAwardPubkey, getBadgeDescription, getBadgeImage, getBadgeName } from "../../helpers/nostr/badges";
 import BadgeMenu from "./components/badge-menu";
 import BadgeAwardCard from "./components/award-card";
 import useTimelineLoader from "../../hooks/use-timeline-loader";
@@ -45,7 +45,6 @@ function BadgeDetailsPage({ badge }: { badge: NostrEvent }) {
 
   const isAuthor = account?.pubkey === badge.pubkey;
   return (
-    <IntersectionObserverProvider callback={callback}>
     <VerticalPageLayout>
       <Flex gap="2" alignItems="center" wrap="wrap">
         <Button onClick={() => navigate(-1)} leftIcon={<ArrowLeftSIcon />}>
@@ -86,19 +85,22 @@ function BadgeDetailsPage({ badge }: { badge: NostrEvent }) {
 
       {awards.length > 0 && (
         <>
+          <IntersectionObserverProvider callback={callback}>
             <Heading size="md">Awarded to</Heading>
             <Divider />
             <SimpleGrid columns={{ base: 1, lg: 2, xl: 3 }} spacing="2">
               {awards.map((award) => (
-                <ErrorBoundary>
-                  <BadgeAwardCard award={award} />
-                </ErrorBoundary>
+                <>
+                  {getBadgeAwardPubkey(award).map(({ pubkey }) => (
+                    <BadgeAwardCard award={award} pubkey={pubkey} />
+                  ))}
+                </>
               ))}
             </SimpleGrid>
+          </IntersectionObserverProvider>
         </>
       )}
     </VerticalPageLayout>
-    </IntersectionObserverProvider>
   );
 }
 

src/views/badges/components/award-card.tsx

@@ -1,16 +1,23 @@
+import { useRef } from "react";
 import { Card, CardBody, CardProps, Flex, Heading } from "@chakra-ui/react";
 
 import { UserAvatar } from "../../../components/user-avatar";
 import { UserDnsIdentityIcon } from "../../../components/user-dns-identity-icon";
 import { NostrEvent } from "../../../types/nostr-event";
-import { getBadgeAwardPubkey } from "../../../helpers/nostr/badges";
 import { UserLink } from "../../../components/user-link";
+import { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
+import { getEventUID } from "../../../helpers/nostr/events";
 
-export default function BadgeAwardCard({ award, ...props }: Omit<CardProps, "children"> & { award: NostrEvent }) {
-  const pubkey = getBadgeAwardPubkey(award);
+export default function BadgeAwardCard({
+  pubkey,
+  award,
+  ...props
+}: Omit<CardProps, "children"> & { award: NostrEvent; pubkey: string }) {
+  const ref = useRef<HTMLDivElement | null>(null);
+  useRegisterIntersectionEntity(ref, getEventUID(award));
 
   return (
-    <Card {...props}>
+    <Card {...props} ref={ref}>
       <CardBody p="2" display="flex" alignItems="center" overflow="hidden" gap="2">
         <UserAvatar pubkey={pubkey} />
         <Flex direction="column" flex={1} overflow="hidden">