@nektarlabs/adsterix-widget 1.0.1 → 1.0.2

package/dist/index.d.mts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+interface AdsterixWidgetProps {
+    castHash?: string;
+    onClose?: () => void;
+}
+declare const AdsterixWidget: React.FC<AdsterixWidgetProps>;
+
+export { AdsterixWidget, type AdsterixWidgetProps };

package/dist/index.mjs

@@ -0,0 +1,306 @@
+import * as React from 'react';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X, ShoppingBag, ExternalLink, Sparkles } from 'lucide-react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/AdsterixWidget.tsx
+var CtaButton = ({ label, icon, onClick, showLabel }) => /* @__PURE__ */ jsxs(
+  motion.div,
+  {
+    onClick,
+    style: {
+      display: "flex",
+      alignItems: "center",
+      gap: showLabel ? 6 : 0,
+      padding: showLabel ? "8px 14px" : "8px",
+      borderRadius: 20,
+      background: "rgba(255,255,255,0.9)",
+      backdropFilter: "blur(8px)",
+      color: "#0f172a",
+      fontSize: 13,
+      fontWeight: 600,
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+      cursor: "pointer"
+    },
+    whileHover: {
+      y: -2,
+      background: "rgba(255,255,255,0.98)",
+      boxShadow: "0 8px 20px rgba(0,0,0,0.2)"
+    },
+    transition: { type: "spring", stiffness: 400, damping: 15 },
+    children: [
+      showLabel && label,
+      /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          style: { display: "flex", alignItems: "center" },
+          whileHover: { x: showLabel ? 2 : 0 },
+          transition: { type: "spring", stiffness: 400, damping: 15 },
+          children: icon
+        }
+      )
+    ]
+  }
+);
+var AdsterixWidget = ({ castHash, onClose }) => {
+  const [ctaDetails, setCtaDetails] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [loading, setLoading] = React.useState(false);
+  const [imageLoaded, setImageLoaded] = React.useState(false);
+  const [visible, setVisible] = React.useState(true);
+  const [isSmall, setIsSmall] = React.useState(true);
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!castHash) return;
+    const fetchCtaDetails = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const response = await fetch(`https://www.adsterix.xyz/api/ads/cta-details/${castHash}`);
+        if (!response.ok) {
+          throw new Error(`Failed to fetch: ${response.status}`);
+        }
+        const data = await response.json();
+        setCtaDetails(data);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : "Unknown error");
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchCtaDetails();
+  }, [castHash]);
+  React.useEffect(() => {
+    if (!containerRef.current) return;
+    const checkSize = (entries) => {
+      for (const entry of entries) {
+        const width = entry.contentRect.width;
+        setIsSmall(width < 270);
+      }
+    };
+    const resizeObserver = new ResizeObserver(checkSize);
+    resizeObserver.observe(containerRef.current);
+    if (containerRef.current) {
+      const width = containerRef.current.offsetWidth;
+      setIsSmall(width < 400);
+    }
+    return () => resizeObserver.disconnect();
+  }, [loading, ctaDetails]);
+  const handleAdClick = () => {
+    if (ctaDetails == null ? void 0 : ctaDetails.url) {
+      window.open(ctaDetails.url, "_blank", "noopener,noreferrer");
+    }
+  };
+  const handleBuySlotClick = (e) => {
+    e.stopPropagation();
+    if (ctaDetails == null ? void 0 : ctaDetails.buySlotUrl) window.open(ctaDetails.buySlotUrl, "_blank", "noopener,noreferrer");
+  };
+  const handleClose = (e) => {
+    e.stopPropagation();
+    setVisible(false);
+    onClose == null ? void 0 : onClose();
+  };
+  if (!visible) return null;
+  if (error) {
+    return /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: { opacity: 0, y: 10 },
+        animate: { opacity: 1, y: 0 },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 16,
+          borderRadius: 12,
+          background: "linear-gradient(135deg, #0f172a 0%, #1e293b 100%)",
+          color: "#f87171",
+          fontSize: 14,
+          fontWeight: 500,
+          fontFamily: "system-ui, -apple-system, sans-serif"
+        },
+        children: "Unable to load ad"
+      }
+    );
+  }
+  if (loading || !ctaDetails) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: containerRef,
+        style: {
+          position: "relative",
+          width: "100%",
+          aspectRatio: "3 / 2",
+          borderRadius: 12,
+          background: "linear-gradient(135deg, #0f172a 0%, #1e293b 100%)",
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%)"
+            },
+            animate: { x: ["-100%", "100%"] },
+            transition: { duration: 1.5, repeat: Infinity, ease: "linear" }
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref: containerRef,
+      onClick: handleAdClick,
+      initial: { opacity: 0, scale: 0.95 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.95 },
+      whileHover: { scale: 1.02 },
+      whileTap: { scale: 0.98 },
+      transition: { type: "spring", stiffness: 300, damping: 20 },
+      style: {
+        position: "relative",
+        width: "100%",
+        aspectRatio: "3 / 2",
+        borderRadius: 12,
+        overflow: "hidden",
+        cursor: "pointer",
+        boxShadow: "0 10px 30px rgba(0,0,0,0.2)"
+      },
+      children: [
+        /* @__PURE__ */ jsx(AnimatePresence, { children: imageLoaded && /* @__PURE__ */ jsx(
+          motion.img,
+          {
+            src: ctaDetails.image,
+            alt: "Advertisement",
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            transition: { duration: 0.4 },
+            style: {
+              position: "absolute",
+              inset: 0,
+              width: "100%",
+              height: "100%",
+              objectFit: "cover"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsx("img", { src: ctaDetails.image, alt: "", onLoad: () => setImageLoaded(true), style: { display: "none" } }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              background: "linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%)"
+            },
+            whileHover: {
+              background: "linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%)"
+            },
+            transition: { duration: 0.3 }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            onClick: handleClose,
+            style: {
+              position: "absolute",
+              top: 10,
+              right: 10,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 28,
+              height: 28,
+              borderRadius: "50%",
+              background: "rgba(0,0,0,0.5)",
+              backdropFilter: "blur(8px)",
+              color: "rgba(255,255,255,0.8)",
+              cursor: "pointer"
+            },
+            whileHover: {
+              background: "rgba(0,0,0,0.7)",
+              color: "rgba(255,255,255,1)",
+              scale: 1.1
+            },
+            whileTap: { scale: 0.95 },
+            transition: { type: "spring", stiffness: 400, damping: 15 },
+            children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 2.5 })
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              bottom: 12,
+              right: 12,
+              display: "flex",
+              gap: 8
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                CtaButton,
+                {
+                  label: "Buy Slot",
+                  icon: /* @__PURE__ */ jsx(ShoppingBag, { size: 14, strokeWidth: 2.5 }),
+                  onClick: handleBuySlotClick,
+                  showLabel: !isSmall
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CtaButton,
+                {
+                  label: "Learn More",
+                  icon: /* @__PURE__ */ jsx(ExternalLink, { size: 14, strokeWidth: 2.5 }),
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleAdClick();
+                  },
+                  showLabel: !isSmall
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 10,
+              left: 10,
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+              padding: "4px 8px",
+              borderRadius: 6,
+              background: "rgba(0,0,0,0.5)",
+              backdropFilter: "blur(8px)",
+              color: "rgba(255,255,255,0.8)",
+              fontSize: 10,
+              fontWeight: 500,
+              fontFamily: "system-ui, -apple-system, sans-serif",
+              letterSpacing: "0.5px",
+              textTransform: "uppercase"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Sparkles, { size: 10 }),
+              "Ad"
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+export { AdsterixWidget };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AdsterixWidget.tsx"],"names":[],"mappings":"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","file":"index.mjs","sourcesContent":["import * as React from \"react\"\nimport { motion, AnimatePresence } from \"framer-motion\"\nimport { ExternalLink, Sparkles, ShoppingBag, X } from \"lucide-react\"\n\nexport interface AdsterixWidgetProps {\n  castHash?: string\n  onClose?: () => void\n}\n\ninterface CtaDetails {\n  image: string\n  url: string\n  buySlotUrl: string\n}\n\nconst CtaButton: React.FC<{\n  label: string\n  icon: React.ReactNode\n  onClick: (e: React.MouseEvent) => void\n  showLabel: boolean\n}> = ({ label, icon, onClick, showLabel }) => (\n  <motion.div\n    onClick={onClick}\n    style={{\n      display: \"flex\",\n      alignItems: \"center\",\n      gap: showLabel ? 6 : 0,\n      padding: showLabel ? \"8px 14px\" : \"8px\",\n      borderRadius: 20,\n      background: \"rgba(255,255,255,0.9)\",\n      backdropFilter: \"blur(8px)\",\n      color: \"#0f172a\",\n      fontSize: 13,\n      fontWeight: 600,\n      fontFamily: \"system-ui, -apple-system, sans-serif\",\n      boxShadow: \"0 4px 12px rgba(0,0,0,0.15)\",\n      cursor: \"pointer\",\n    }}\n    whileHover={{\n      y: -2,\n      background: \"rgba(255,255,255,0.98)\",\n      boxShadow: \"0 8px 20px rgba(0,0,0,0.2)\",\n    }}\n    transition={{ type: \"spring\", stiffness: 400, damping: 15 }}\n  >\n    {showLabel && label}\n    <motion.span\n      style={{ display: \"flex\", alignItems: \"center\" }}\n      whileHover={{ x: showLabel ? 2 : 0 }}\n      transition={{ type: \"spring\", stiffness: 400, damping: 15 }}\n    >\n      {icon}\n    </motion.span>\n  </motion.div>\n)\n\nexport const AdsterixWidget: React.FC<AdsterixWidgetProps> = ({ castHash, onClose }) => {\n  const [ctaDetails, setCtaDetails] = React.useState<CtaDetails | null>(null)\n  const [error, setError] = React.useState<string | null>(null)\n  const [loading, setLoading] = React.useState(false)\n  const [imageLoaded, setImageLoaded] = React.useState(false)\n  const [visible, setVisible] = React.useState(true)\n  const [isSmall, setIsSmall] = React.useState(true) // Start with true to avoid flash\n  const containerRef = React.useRef<HTMLDivElement>(null)\n\n  React.useEffect(() => {\n    if (!castHash) return\n\n    const fetchCtaDetails = async () => {\n      setLoading(true)\n      setError(null)\n\n      try {\n        const response = await fetch(`https://www.adsterix.xyz/api/ads/cta-details/${castHash}`)\n\n        if (!response.ok) {\n          throw new Error(`Failed to fetch: ${response.status}`)\n        }\n\n        const data = await response.json()\n        setCtaDetails(data)\n      } catch (err) {\n        setError(err instanceof Error ? err.message : \"Unknown error\")\n      } finally {\n        setLoading(false)\n      }\n    }\n\n    fetchCtaDetails()\n  }, [castHash])\n\n  React.useEffect(() => {\n    if (!containerRef.current) return\n\n    const checkSize = (entries: ResizeObserverEntry[]) => {\n      for (const entry of entries) {\n        const width = entry.contentRect.width\n        setIsSmall(width < 270)\n      }\n    }\n\n    const resizeObserver = new ResizeObserver(checkSize)\n    resizeObserver.observe(containerRef.current)\n\n    // Initial check\n    if (containerRef.current) {\n      const width = containerRef.current.offsetWidth\n      setIsSmall(width < 400)\n    }\n\n    return () => resizeObserver.disconnect()\n  }, [loading, ctaDetails]) // Re-run when content changes\n\n  const handleAdClick = () => {\n    if (ctaDetails?.url) {\n      window.open(ctaDetails.url, \"_blank\", \"noopener,noreferrer\")\n    }\n  }\n\n  const handleBuySlotClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    if (ctaDetails?.buySlotUrl) window.open(ctaDetails.buySlotUrl, \"_blank\", \"noopener,noreferrer\")\n  }\n\n  const handleClose = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    setVisible(false)\n    onClose?.()\n  }\n\n  if (!visible) return null\n\n  if (error) {\n    return (\n      <motion.div\n        initial={{ opacity: 0, y: 10 }}\n        animate={{ opacity: 1, y: 0 }}\n        style={{\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          padding: 16,\n          borderRadius: 12,\n          background: \"linear-gradient(135deg, #0f172a 0%, #1e293b 100%)\",\n          color: \"#f87171\",\n          fontSize: 14,\n          fontWeight: 500,\n          fontFamily: \"system-ui, -apple-system, sans-serif\",\n        }}\n      >\n        Unable to load ad\n      </motion.div>\n    )\n  }\n\n  if (loading || !ctaDetails) {\n    return (\n      <div\n        ref={containerRef}\n        style={{\n          position: \"relative\",\n          width: \"100%\",\n          aspectRatio: \"3 / 2\",\n          borderRadius: 12,\n          background: \"linear-gradient(135deg, #0f172a 0%, #1e293b 100%)\",\n          overflow: \"hidden\",\n        }}\n      >\n        <motion.div\n          style={{\n            position: \"absolute\",\n            inset: 0,\n            background: \"linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 50%, transparent 100%)\",\n          }}\n          animate={{ x: [\"-100%\", \"100%\"] }}\n          transition={{ duration: 1.5, repeat: Infinity, ease: \"linear\" }}\n        />\n      </div>\n    )\n  }\n\n  return (\n    <motion.div\n      ref={containerRef}\n      onClick={handleAdClick}\n      initial={{ opacity: 0, scale: 0.95 }}\n      animate={{ opacity: 1, scale: 1 }}\n      exit={{ opacity: 0, scale: 0.95 }}\n      whileHover={{ scale: 1.02 }}\n      whileTap={{ scale: 0.98 }}\n      transition={{ type: \"spring\", stiffness: 300, damping: 20 }}\n      style={{\n        position: \"relative\",\n        width: \"100%\",\n        aspectRatio: \"3 / 2\",\n        borderRadius: 12,\n        overflow: \"hidden\",\n        cursor: \"pointer\",\n        boxShadow: \"0 10px 30px rgba(0,0,0,0.2)\",\n      }}\n    >\n      <AnimatePresence>\n        {imageLoaded && (\n          <motion.img\n            src={ctaDetails.image}\n            alt=\"Advertisement\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: 1 }}\n            transition={{ duration: 0.4 }}\n            style={{\n              position: \"absolute\",\n              inset: 0,\n              width: \"100%\",\n              height: \"100%\",\n              objectFit: \"cover\",\n            }}\n          />\n        )}\n      </AnimatePresence>\n\n      <img src={ctaDetails.image} alt=\"\" onLoad={() => setImageLoaded(true)} style={{ display: \"none\" }} />\n\n      <motion.div\n        style={{\n          position: \"absolute\",\n          inset: 0,\n          background: \"linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 50%)\",\n        }}\n        whileHover={{\n          background: \"linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%)\",\n        }}\n        transition={{ duration: 0.3 }}\n      />\n\n      {/* Close button */}\n      <motion.div\n        onClick={handleClose}\n        style={{\n          position: \"absolute\",\n          top: 10,\n          right: 10,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          width: 28,\n          height: 28,\n          borderRadius: \"50%\",\n          background: \"rgba(0,0,0,0.5)\",\n          backdropFilter: \"blur(8px)\",\n          color: \"rgba(255,255,255,0.8)\",\n          cursor: \"pointer\",\n        }}\n        whileHover={{\n          background: \"rgba(0,0,0,0.7)\",\n          color: \"rgba(255,255,255,1)\",\n          scale: 1.1,\n        }}\n        whileTap={{ scale: 0.95 }}\n        transition={{ type: \"spring\", stiffness: 400, damping: 15 }}\n      >\n        <X size={14} strokeWidth={2.5} />\n      </motion.div>\n\n      <div\n        style={{\n          position: \"absolute\",\n          bottom: 12,\n          right: 12,\n          display: \"flex\",\n          gap: 8,\n        }}\n      >\n        <CtaButton\n          label=\"Buy Slot\"\n          icon={<ShoppingBag size={14} strokeWidth={2.5} />}\n          onClick={handleBuySlotClick}\n          showLabel={!isSmall}\n        />\n        <CtaButton\n          label=\"Learn More\"\n          icon={<ExternalLink size={14} strokeWidth={2.5} />}\n          onClick={(e) => {\n            e.stopPropagation()\n            handleAdClick()\n          }}\n          showLabel={!isSmall}\n        />\n      </div>\n\n      <div\n        style={{\n          position: \"absolute\",\n          top: 10,\n          left: 10,\n          display: \"flex\",\n          alignItems: \"center\",\n          gap: 4,\n          padding: \"4px 8px\",\n          borderRadius: 6,\n          background: \"rgba(0,0,0,0.5)\",\n          backdropFilter: \"blur(8px)\",\n          color: \"rgba(255,255,255,0.8)\",\n          fontSize: 10,\n          fontWeight: 500,\n          fontFamily: \"system-ui, -apple-system, sans-serif\",\n          letterSpacing: \"0.5px\",\n          textTransform: \"uppercase\",\n        }}\n      >\n        <Sparkles size={10} />\n        Ad\n      </div>\n    </motion.div>\n  )\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nektarlabs/adsterix-widget",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": false,
   "repository": {
     "type": "git",