2025-04-02 12:16:11 -05:00
|
|
|
import React, { useEffect, useRef } from "react";
|
2024-04-23 18:52:55 -05:00
|
|
|
|
2025-04-02 12:16:11 -05:00
|
|
|
const ZapThreadsWrapper = ({
|
|
|
|
|
anchor,
|
|
|
|
|
user,
|
|
|
|
|
relays,
|
|
|
|
|
disable,
|
|
|
|
|
className,
|
|
|
|
|
isAuthorized,
|
|
|
|
|
}) => {
|
2024-04-23 18:52:55 -05:00
|
|
|
// Create a ref to store the reference to the <div> element
|
|
|
|
|
const zapRef = useRef(null);
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
2025-04-02 12:16:11 -05:00
|
|
|
// Only load the script if the user is authorized
|
|
|
|
|
if (!isAuthorized) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2024-04-23 18:52:55 -05:00
|
|
|
// Create a new <script> element
|
2025-04-02 12:16:11 -05:00
|
|
|
const script = document.createElement("script");
|
2024-04-23 18:52:55 -05:00
|
|
|
// Set the source URL of the script to load the ZapThreads library
|
2025-04-02 12:16:11 -05:00
|
|
|
script.src = "https://unpkg.com/zapthreads/dist/zapthreads.iife.js";
|
2024-04-23 18:52:55 -05:00
|
|
|
// Set the script to load asynchronously
|
|
|
|
|
script.async = true;
|
|
|
|
|
|
|
|
|
|
// Function to handle the script load event
|
|
|
|
|
const handleScriptLoad = () => {
|
|
|
|
|
// Create a new <zap-threads> element
|
2025-04-02 12:16:11 -05:00
|
|
|
const zapElement = document.createElement("zap-threads");
|
|
|
|
|
zapElement.setAttribute("anchor", anchor);
|
|
|
|
|
|
|
|
|
|
// Only set user if it exists and is not null
|
|
|
|
|
if (user) {
|
|
|
|
|
zapElement.setAttribute("user", user);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Clean up relay URLs
|
|
|
|
|
const cleanRelays = relays
|
|
|
|
|
.split(",")
|
|
|
|
|
.map((relay) => relay.trim())
|
|
|
|
|
.filter((relay) => relay)
|
|
|
|
|
.join(",");
|
|
|
|
|
zapElement.setAttribute("relays", cleanRelays);
|
|
|
|
|
|
|
|
|
|
// Always set disable attribute, even if empty
|
|
|
|
|
zapElement.setAttribute("disable", disable || "");
|
|
|
|
|
|
|
|
|
|
// Add error handling
|
|
|
|
|
zapElement.addEventListener("error", (e) => {
|
|
|
|
|
console.error("ZapThreads error:", e);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// Remove any existing <zap-threads> element
|
|
|
|
|
if (zapRef.current) {
|
|
|
|
|
while (zapRef.current.firstChild) {
|
|
|
|
|
zapRef.current.removeChild(zapRef.current.firstChild);
|
|
|
|
|
}
|
2024-04-23 18:52:55 -05:00
|
|
|
}
|
|
|
|
|
|
2025-04-02 12:16:11 -05:00
|
|
|
// Append the new element
|
2024-04-23 18:52:55 -05:00
|
|
|
if (zapRef.current) {
|
|
|
|
|
zapRef.current.appendChild(zapElement);
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// Attach the handleScriptLoad function to the script's load event
|
2025-04-02 12:16:11 -05:00
|
|
|
script.addEventListener("load", handleScriptLoad);
|
|
|
|
|
script.addEventListener("error", (e) => {
|
|
|
|
|
console.error("Failed to load ZapThreads script:", e);
|
|
|
|
|
});
|
2024-04-23 18:52:55 -05:00
|
|
|
|
|
|
|
|
// Append the <script> element to the <body> of the document
|
|
|
|
|
document.body.appendChild(script);
|
|
|
|
|
|
|
|
|
|
// Cleanup function to remove the <zap-threads> element and the <script> element when the component is unmounted
|
|
|
|
|
return () => {
|
2025-04-02 12:16:11 -05:00
|
|
|
if (zapRef.current) {
|
|
|
|
|
while (zapRef.current.firstChild) {
|
|
|
|
|
zapRef.current.removeChild(zapRef.current.firstChild);
|
|
|
|
|
}
|
2024-04-23 18:52:55 -05:00
|
|
|
}
|
|
|
|
|
// Remove the <script> element from the <body> of the document
|
|
|
|
|
document.body.removeChild(script);
|
|
|
|
|
// Remove the load event listener from the script
|
2025-04-02 12:16:11 -05:00
|
|
|
script.removeEventListener("load", handleScriptLoad);
|
2024-04-23 18:52:55 -05:00
|
|
|
};
|
2025-04-02 12:16:11 -05:00
|
|
|
}, [anchor, user, relays, disable, isAuthorized]);
|
|
|
|
|
|
|
|
|
|
if (!isAuthorized) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
2024-04-23 18:52:55 -05:00
|
|
|
|
|
|
|
|
// Render a <div> element and attach the zapRef to it
|
2025-04-02 12:16:11 -05:00
|
|
|
return (
|
|
|
|
|
<div className={`overflow-x-hidden ${className || ""}`} ref={zapRef} />
|
|
|
|
|
);
|
2024-04-23 18:52:55 -05:00
|
|
|
};
|
|
|
|
|
|
2025-04-02 17:47:30 -05:00
|
|
|
export default ZapThreadsWrapper;
|
