From eab5f7a1617fd5614f2922ace6b6aa0795c51399 Mon Sep 17 00:00:00 2001
From: MK- Turiz <143194249+turizspace@users.noreply.github.com>
Date: Fri, 18 Oct 2024 17:05:55 +0300
Subject: [PATCH] Problem: can't zap notes

---
 src/lib/components/UserLud16.svelte       | 265 ++++++++++++++++++++++
 src/lib/views/messages/RenderKind1.svelte |  16 +-
 src/lib/zapUtils.ts                       |  93 ++++++++
 3 files changed, 368 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/UserLud16.svelte
 create mode 100644 src/lib/zapUtils.ts

diff --git a/src/lib/components/UserLud16.svelte b/src/lib/components/UserLud16.svelte
new file mode 100644
index 0000000..7bacda7
--- /dev/null
+++ b/src/lib/components/UserLud16.svelte
@@ -0,0 +1,265 @@
+<script lang="ts">
+  import { FrontendDataStore } from '@/snort_workers/main';
+  import { kind0 } from '@/stores/user';
+  import { System } from '@/views/messages/snort';
+  import { RequestBuilder, type QueryLike } from '@snort/system';
+  import { nip19 } from 'nostr-tools';
+  import { onDestroy, onMount } from 'svelte';
+  import { writable } from 'svelte/store';
+  import { getZapEndpoint, makeZapRequest } from '@/zapUtils';
+
+  export let pubkey: string;
+
+  let q: QueryLike;
+  const profileLud16 = writable('');
+  const customZapAmountSats = writable(0);
+  const customZapComment = writable('');
+  const showModal = writable(false);
+
+
+  onMount(() => {
+    if (pubkey && pubkey.length == 64) {
+      if (!$kind0.get(pubkey)) {
+        const rb = new RequestBuilder(pubkey);
+        rb.withFilter().authors([pubkey]).kinds([0]);
+        rb.withOptions({ leaveOpen: false });
+        q = System.Query(rb);
+        q.on('event', (evs) => {
+          if (evs.length > 0) {
+            kind0.update((existing) => {
+              for (let e of evs) {
+                let _existing = existing.get(e.pubkey);
+                if (!_existing || (_existing && _existing.created_at <= e.created_at)) {
+                  existing.set(e.pubkey, e);
+                }
+              }
+              return existing;
+            });
+          }
+        });
+      }
+    }
+
+
+    showModal.set(true);
+  });
+
+  // Cleanup on destroy
+  onDestroy(() => {
+    if (q) {
+      q.cancel();
+    }
+  });
+
+
+  $: {
+    const content = $kind0.get(pubkey)?.content;
+    let lud16 = '';
+    if (content) {
+      try {
+        const json = JSON.parse(content);
+        if (json.lud16 && json.lud16.length > 6) {
+          lud16 = json.lud16;
+        }
+      } catch (error) {
+        console.log('Error parsing content', error);
+      }
+    }
+    profileLud16.set(lud16);
+  }
+
+
+  const closeModal = () => showModal.set(false);
+
+
+  async function handleZap() {
+  const lud16 = $profileLud16;
+  const comment = $customZapComment;
+
+  const metadata = {
+    content: JSON.stringify({ lud16, comment })
+  };
+
+  try {
+    const callback = await getZapEndpoint(metadata);
+
+    if (callback) {
+      const amountToSend = $customZapAmountSats * 1000;
+
+      if (!amountToSend) {
+        console.error('No zap amount entered.');
+        alert('Please enter a valid zap amount.');
+        return;
+      }
+
+      // Fetch the invoice using the callback URL
+      const response = await fetch(`${callback}?amount=${amountToSend}`);
+      if (!response.ok) {
+        console.error('Failed to fetch invoice:', response.statusText);
+        alert('Error fetching invoice. Please try again later.');
+        return;
+      }
+
+      const { pr: invoice } = await response.json();
+      console.log('Invoice received:', invoice);
+
+      try {
+        if (window.webln) {
+          await window.webln.enable();
+          await window.webln.sendPayment(invoice);
+          console.log('Payment sent successfully via WebLN!');
+          alert('Payment sent successfully!');
+        } else {
+          console.error('WebLN not available.');
+          alert('WebLN is not available. Please use a WebLN-compatible browser.');
+        }
+      } catch (err) {
+        console.error('WebLN payment error:', err);
+        alert(`Failed to send payment via WebLN. Error: ${err.message}`);
+      }
+    } else {
+      console.error('Failed to retrieve zap endpoint.');
+      alert('Unable to retrieve zap endpoint. Please try again later.');
+    }
+  } catch (err) {
+    console.error('Error in zap process:', err);
+    alert(`An error occurred while processing the zap. Error: ${err.message}`);
+  }
+
+  closeModal();
+}
+
+</script>
+
+
+
+  {#if $showModal}
+    <div class="modal">
+      <div class="modal-content">
+        <h3>Send Zap</h3>
+
+
+        <label for="comment">Comment:</label>
+        <input
+          type="text"
+          id="comment"
+          bind:value={$customZapComment}
+          placeholder="Enter zap comment"
+        />
+
+
+        <label for="amount">Amount (in sats):</label>
+        <input
+          type="number"
+          id="amount"
+          bind:value={$customZapAmountSats}
+          placeholder="Enter amount in sats"
+        />
+
+
+        <button on:click={handleZap}>Send Zap</button>
+        <button class="cancel" on:click={closeModal}>Cancel</button>
+      </div>
+    </div>
+  {/if}
+
+
+  <style>
+    .modal {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.7);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 9999;
+      overflow: hidden;
+      backdrop-filter: blur(8px);
+      transition: opacity 0.3s ease;
+    }
+
+    .modal-content {
+      background-color: #fff;
+      padding: 25px;
+      border-radius: 12px;
+      width: 320px;
+      text-align: center;
+      z-index: 10000;
+      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+      transform: scale(0.9);
+      animation: showModal 0.3s ease forwards;
+    }
+
+    .modal h3 {
+      font-family: 'Poppins', sans-serif;
+      font-size: 1.5rem;
+      margin-bottom: 15px;
+      color: #333;
+    }
+
+    .modal label {
+      display: block;
+      margin-bottom: 5px;
+      font-size: 0.9rem;
+      color: #666;
+      text-align: left;
+    }
+
+    .modal input {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 15px;
+      border-radius: 8px;
+      border: 1px solid #ddd;
+      font-size: 1rem;
+      font-family: 'Poppins', sans-serif;
+      outline: none;
+      transition: border-color 0.2s ease;
+    }
+
+    .modal input:focus {
+      border-color: #007bff;
+    }
+
+    .modal button {
+      width: 100%;
+      padding: 10px;
+      margin-top: 10px;
+      border-radius: 8px;
+      border: none;
+      background-color: #007bff;
+      color: white;
+      font-size: 1rem;
+      font-family: 'Poppins', sans-serif;
+      cursor: pointer;
+      transition: background-color 0.2s ease, transform 0.1s ease;
+    }
+
+    .modal button:hover {
+      background-color: #0056b3;
+      transform: translateY(-2px);
+    }
+
+    .modal button:active {
+      transform: translateY(0);
+    }
+
+    .modal button.cancel {
+    background-color: #ccc;
+    color: #333;
+    }
+
+    @keyframes showModal {
+      0% {
+        opacity: 0;
+        transform: scale(0.9);
+      }
+      100% {
+        opacity: 1;
+        transform: scale(1);
+      }
+    }
+  </style>
diff --git a/src/lib/views/messages/RenderKind1.svelte b/src/lib/views/messages/RenderKind1.svelte
index 061cf10..c800a2b 100644
--- a/src/lib/views/messages/RenderKind1.svelte
+++ b/src/lib/views/messages/RenderKind1.svelte
@@ -2,6 +2,7 @@
 	import RenderNoteContent from '@/components/RenderNoteContent.svelte';
 	import UserDisplayName from '@/components/UserDisplayName.svelte';
 	import UserProfilePic from '@/components/UserProfilePic.svelte';
+	import UserLud16 from '@/components/UserLud16.svelte';
 	import { viewed } from '@/snort_workers/main';
 	import type { FrontendData } from '@/snort_workers/types';
 	import { formatTimeAgo } from '@/utils';
@@ -23,6 +24,9 @@
 	let top: HTMLDivElement;
 	let messageViewController: HTMLDivElement;
 
+	// Declare showLud16 to toggle visibility of UserLud16
+	let showLud16 = false;
+
 	function updateDistance() {
 		const rect = messageViewController.getBoundingClientRect();
 		if (isTop && rect.top < 120 && $threadParentID === 'root') {
@@ -60,11 +64,6 @@
 	<div class="grid">
 		<div class="flex gap-2">
 			<UserProfilePic pubkey={note.pubkey} />
-			<!-- <img
-				class="w-8 h-8 rounded-full"
-				src="https://zenquotes.io/img/marcus-aurelius.jpg"
-				alt="profile pic"
-			/> -->
 			<div class="grid">
 				<h5 class="text-gray-900 dark:text-orange-600 font-semibold leading-snug pb-1">
 					<UserDisplayName pubkey={note.pubkey} />
@@ -89,10 +88,14 @@
 							<div>
 								<Zap
 									onclick={() => {
-										alert('implement me!');
+										showLud16 = !showLud16;  // Toggle visibility of UserLud16 on click
 									}}
 									{note}
 								/>
+								<!-- Conditionally display the UserLud16 component based on showLud16 state -->
+								{#if showLud16}
+									<UserLud16 pubkey={note.pubkey} />
+								{/if}
 								<Reply onclick={onClickReply} {childrenCount} />
 							</div>
 						</div>
@@ -111,6 +114,7 @@
 		</div>
 	</div>
 </div>
+
 <!-- SCROLL OUT OF VIEW todo: change the location of this (in the DOM) so that we can use an animation to make it clear that the note has been "viewed" and can't be seen again -->
 <div
 	bind:this={messageViewController}
diff --git a/src/lib/zapUtils.ts b/src/lib/zapUtils.ts
new file mode 100644
index 0000000..4c85e67
--- /dev/null
+++ b/src/lib/zapUtils.ts
@@ -0,0 +1,93 @@
+import { bech32 } from '@scure/base';
+
+let _fetch = fetch;
+const utf8Decoder = new TextDecoder("utf-8");
+
+
+export function useFetchImplementation(fetchImplementation) {
+  _fetch = fetchImplementation;
+}
+
+export async function getZapEndpoint(metadata: { content?: string}): Promise<string | null> {
+  try {
+    let lnurl = '';
+    const { lud06, lud16 } = JSON.parse(metadata.content || '{}'); // Add fallback for missing content
+
+    if (lud06) {
+      const { words } = bech32.decode(lud06, 1000);
+      const data = bech32.fromWords(words);
+      lnurl = utf8Decoder.decode(data);
+    } else if (lud16) {
+      if (!lud16.includes('@')) {
+        throw new Error('Invalid LUD16 format');
+    }
+      // Extract domain and name from the LUD16 address
+      const [name, domain] = lud16.split('@');
+      // Build the LNURL service URL dynamically based on the domain
+      lnurl = new URL(`/.well-known/lnurlp/${name}`, `https://${domain}`).toString();
+    } else {
+      return null; // Handle missing LNURL case
+    }
+
+
+    const res = await _fetch(lnurl);
+
+    if (!res.ok) { // Handle non-200 response codes
+      console.error(`Error fetching LNURL: ${res.statusText}`);
+      return null;
+    }
+
+    const body = await res.json();
+
+    if (body.allowsNostr && body.nostrPubkey) {
+      return body.callback;
+    }
+  } catch (err) {
+    console.error("Error in getZapEndpoint:", err);
+  }
+
+  return null;
+}
+
+
+export function makeZapRequest({
+  profile,
+  event,
+  amount,
+  relays = [],
+  comment = ''
+}: {
+  profile: string;
+  event?: string;
+  amount: number;
+  relays?: string[];
+  comment?: string;
+}): {
+  created_at: number;
+  content: string;
+  tags: string[][]
+} {
+  if (!amount) throw new Error('Amount not given');
+  if (amount <= 0) throw new Error('Amount must be a positive number');
+  if (!profile) throw new Error('Profile not given');
+
+  const zapRequest = {
+    created_at: Math.round(Date.now() / 1000),
+    content: comment,
+    tags: [
+      ['amount', amount.toString()],
+      ['p', profile], // Include profile pubkey
+    ] as string[][] // Explicitly typing the array as string[][]
+  };
+
+  if (event) {
+    zapRequest.tags.push(['e', event]);
+  }
+
+  if (relays.length > 0) {
+    for (const relay of relays) {
+      zapRequest.tags.push(['relays', relay]);
+  }  }
+
+  return zapRequest;
+}