following

app/(app)/(profile)/[npub]/_components/MySubscription.tsx

@@ -10,20 +10,25 @@ type MySubscription = {
 };
 
 export default function MySubscription({ pubkey }: MySubscription) {
-  const { fetchEvents } = useNDK();
+  const { ndk, fetchEvents } = useNDK();
   const { currentUser, mySubscription, follows } = useCurrentUser();
   const [subscriptionTiers, setSubscriptionTiers] = useState<NDKEvent[]>([]);
 
   useEffect(() => {
+    if (ndk) {
       void handleFetchSubscriptionTiers();
-  }, [pubkey]);
+    }
+  }, [pubkey, ndk]);
 
   async function handleFetchSubscriptionTiers() {
     try {
+      console.log("FETCHING", pubkey);
       const events = await fetchEvents({
         kinds: [30044 as NDKKind],
         authors: [pubkey],
       });
+      console.log("events", events);
+
       setSubscriptionTiers(events);
     } catch (err) {
       console.log("error", err);

components/SubscriptionCard/index.tsx

@@ -9,15 +9,16 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
-import { cn } from "@/lib/utils";
+import { cn, log } from "@/lib/utils";
-import { NDKEvent, NDKUser, NostrEvent } from "@nostr-dev-kit/ndk";
+import { NDKEvent, NDKUser, NDKNip07Signer } from "@nostr-dev-kit/ndk";
 import { useNDK } from "@/app/_providers/ndk";
 import useCurrentUser from "@/lib/hooks/useCurrentUser";
 import { toast } from "sonner";
 import { getTagValues, getTagsValues } from "@/lib/nostr/utils";
 import { sendZap, checkPayment } from "@/lib/actions/zap";
 import { btcToSats, formatNumber } from "@/lib/utils";
-
+import { BANNER } from "@/constants";
+import { follow } from "@/lib/actions/create";
 export default function SubscriptionCard({ event }: { event: NDKEvent }) {
   const { currentUser } = useCurrentUser();
   const { ndk } = useNDK();
@@ -27,20 +28,20 @@ export default function SubscriptionCard({ event }: { event: NDKEvent }) {
   const rawEvent = event.rawEvent();
   const title = getTagValues("title", tags) ?? getTagValues("name", tags) ?? "";
   const image =
-    getTagValues("image", tags) ?? getTagValues("picture", tags) ?? "";
+    getTagValues("image", tags) ?? getTagValues("picture", tags) ?? BANNER;
   const description =
     getTagValues("description", tags) ?? getTagValues("summary", tags) ?? "";
   const delegate = getTagValues("delegate", tags);
   const priceInBTC = parseFloat(getTagValues("price", rawEvent.tags) ?? "0");
 
   async function handleSubscribe() {
+    log("func", "handleSubscribe");
     try {
-      if (!currentUser) return;
+      if (!currentUser || !ndk?.signer) return;
-      await currentUser.follow(
+      if (delegate) {
-        new NDKUser({
+        await follow(ndk, currentUser, delegate);
-          hexpubkey: delegate,
+        log("info", "followed");
-        }),
+      }
-      );
       const result = await sendZap(
         ndk!,
         btcToSats(priceInBTC),
@@ -76,9 +77,15 @@ export default function SubscriptionCard({ event }: { event: NDKEvent }) {
       setCheckingPayment(false);
     }
   }
+  useEffect(() => {
+    if (!currentUser) return;
+    if (!checkingPayment && !hasValidPayment) {
+      void handleCheckPayment();
+    }
+  }, [currentUser]);
   return (
-    <Card className="group sm:flex">
+    <Card className="group sm:flex sm:items-stretch">
-      <div className="overflow-hidden max-sm:h-[100px] max-sm:rounded-t-md sm:w-[250px] sm:rounded-l-md">
+      <div className="max-h-full overflow-hidden max-sm:h-[100px] max-sm:rounded-t-md sm:w-[250px] sm:rounded-l-md">
         <Image
           width={250}
           height={150}
@@ -86,18 +93,18 @@ export default function SubscriptionCard({ event }: { event: NDKEvent }) {
           alt={title}
           unoptimized
           className={cn(
-            "w-auto object-cover object-center transition-all group-hover:scale-105 sm:h-full",
+            "h-full w-full object-cover object-center transition-all group-hover:scale-105 sm:h-full sm:w-auto",
           )}
         />
       </div>
-      <div className="">
+      <div className="h-full flex-1">
         <CardHeader className="">
           <CardTitle className="line-clamp-2">{title}</CardTitle>
           <CardDescription className="line-clamp-3">
             {description}
           </CardDescription>
         </CardHeader>
-        <CardContent className="items-strech flex w-full flex-col items-center gap-2 sm:max-w-md sm:flex-row sm:gap-4">
+        <CardContent className="items-strech mt-auto flex w-full flex-col items-center gap-2 sm:max-w-md sm:flex-row sm:gap-4">
           {hasValidPayment ? (
             <Button disabled={true} variant={"ghost"} className="w-full">
               Pending sync
@@ -111,7 +118,7 @@ export default function SubscriptionCard({ event }: { event: NDKEvent }) {
               >
                 Join now
               </Button>
-              <Link href={`/sub/${event.encode()}`}>
+              <Link href={`/sub/${event.encode()}`} className="w-full">
                 <Button variant={"secondary"} className="w-full">
                   Details
                 </Button>

lib/actions/create.ts

@@ -280,3 +280,18 @@ export async function unlockEvent(
   await deleteEvent(ndk, [["e", event.id ?? ""]], "Content unlocked");
   return publishedEvent;
 }
+
+export async function follow(ndk: NDK, currentUser: NDKUser, pubkey: string) {
+  const userContacts = await ndk.fetchEvent({
+    kinds: [3],
+    authors: [currentUser.pubkey],
+  });
+  if (!userContacts) return;
+  const newEvent = {
+    kind: 3,
+    ...userContacts.rawEvent(),
+    tags: [...userContacts.tags, ["p", pubkey]],
+  };
+  const newContacts = await createEvent(ndk, newEvent);
+  return newContacts;
+}