From c1da7dbb391401b52cde35fb959775c16cef27f8 Mon Sep 17 00:00:00 2001
From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
Date: Thu, 25 Sep 2025 18:36:18 -0400
Subject: [PATCH] Add zap button placeholder on channel profiles

---
 assets/svg/lightning-bolt.svg | 13 +++++++++++++
 js/channelProfile.js          | 18 ++++++++++++++++++
 views/channel-profile.html    | 16 +++++++++++++++-
 3 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 assets/svg/lightning-bolt.svg

diff --git a/assets/svg/lightning-bolt.svg b/assets/svg/lightning-bolt.svg
new file mode 100644
index 00000000..db4c7623
--- /dev/null
+++ b/assets/svg/lightning-bolt.svg
@@ -0,0 +1,13 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="white"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2" />
+</svg>
diff --git a/js/channelProfile.js b/js/channelProfile.js
index aa552426..8922b649 100644
--- a/js/channelProfile.js
+++ b/js/channelProfile.js
@@ -47,6 +47,8 @@ export async function initChannelProfileView() {
     if (btn) btn.classList.add("hidden");
   }
 
+  setupZapButton();
+
   // 4) Load user’s profile (banner, avatar, etc.)
   await loadUserProfile(hexPub);
 
@@ -54,6 +56,22 @@ export async function initChannelProfileView() {
   await loadUserVideos(hexPub);
 }
 
+function setupZapButton() {
+  const zapButton = document.getElementById("zapButton");
+  if (!zapButton) {
+    return;
+  }
+
+  if (zapButton.dataset.initialized === "true") {
+    return;
+  }
+
+  zapButton.addEventListener("click", () => {
+    window.alert("Zaps coming soon.");
+  });
+  zapButton.dataset.initialized = "true";
+}
+
 /**
  * Renders a Subscribe / Unsubscribe button with an icon,
  * using color #fe0032 and the subscribe-button-icon.svg on the left.
diff --git a/views/channel-profile.html b/views/channel-profile.html
index 693c7dd5..845e08e1 100644
--- a/views/channel-profile.html
+++ b/views/channel-profile.html
@@ -43,7 +43,21 @@
 
   <!-- Area for Subscribe/Unsubscribe button -->
   <div class="px-4 my-4">
-    <div id="subscribeBtnArea" class="hidden"></div>
+    <div class="flex items-center gap-3">
+      <button
+        id="zapButton"
+        type="button"
+        class="icon-button"
+        aria-label="Send a zap"
+      >
+        <img
+          src="assets/svg/lightning-bolt.svg"
+          alt="Zap"
+          class="icon-image"
+        />
+      </button>
+      <div id="subscribeBtnArea" class="hidden"></div>
+    </div>
   </div>
 
   <hr class="my-6" />