ani-ads-sdk 1.0.0

package/README.md

@@ -0,0 +1,61 @@
+# Ani Ads SDK
+
+SDK für Mini App Creators um Werbung in ihren Apps anzuzeigen.
+
+## Installation
+
+```bash
+npm install @ani-ads/sdk
+# oder
+pnpm add @ani-ads/sdk
+```
+
+## Verwendung
+
+```tsx
+import { AniAds } from '@ani-ads/sdk'
+
+function MyApp() {
+  return (
+    <AniAds
+      creator_code="XYZ"
+      user_wallet_address="0x..."
+      ad_format={["16:9", "9:16"]}
+      api_url="https://your-domain.com" // Optional
+      onAdClick={(adId, url) => console.log('Ad clicked:', adId, url)} // Optional
+    />
+  )
+}
+```
+
+## Props
+
+- `creator_code` (string, required): Eindeutiger Code für deine App
+- `user_wallet_address` (string, required): Wallet-Adresse des aktuellen Users
+- `ad_format` (string[] | string, required): Gewünschte Bildformate (z.B. `["16:9", "9:16", "1:1"]`)
+- `api_url` (string, optional): API URL (Standard: Production URL)
+- `onAdClick` (function, optional): Callback wenn Ad geklickt wird
+
+## Bildformate
+
+- `"1:1"` oder `"11"` - Quadratisch (Square)
+- `"9:16"` oder `"916"` - Hochformat (Portrait)
+- `"16:9"` oder `"169"` - Querformat (Landscape)
+
+## Wie es funktioniert
+
+Die SDK kommuniziert mit der Ani Ads API, die dann:
+
+1. **Datenbank liest**: Prüft verfügbare Ads und ob User bereits geklickt hat (unique user check)
+2. **Datenbank schreibt**: Speichert Clicks und Earnings
+3. **Smart Contract schreibt**: Verarbeitet Zahlungen (0.005 USDC an Creator, 0.005 USDC an Platform)
+
+**Wichtig**: Die SDK kann nicht direkt auf Datenbank oder Smart Contract zugreifen, da:
+- Smart Contract Write-Operationen müssen vom Contract Creator signiert werden (Private Key im Backend)
+- Datenbank-Zugriff läuft über die API für Sicherheit und Validierung
+
+Bei jedem Click wird automatisch:
+- Geprüft ob unique user (nur einmal pro User bezahlt)
+- Zahlung im Smart Contract verarbeitet
+- Earnings in der Datenbank aktualisiert
+

package/dist/index.d.mts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface AniAdsProps {
+    creator_code: string;
+    user_wallet_address: string;
+    ad_format: string[] | string;
+    api_url?: string;
+    onAdClick?: (adId: string, destinationUrl: string) => void;
+}
+declare const AniAds: React.FC<AniAdsProps>;
+
+export { AniAds, type AniAdsProps, AniAds as default };

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+
+interface AniAdsProps {
+    creator_code: string;
+    user_wallet_address: string;
+    ad_format: string[] | string;
+    api_url?: string;
+    onAdClick?: (adId: string, destinationUrl: string) => void;
+}
+declare const AniAds: React.FC<AniAdsProps>;
+
+export { AniAds, type AniAdsProps, AniAds as default };

package/dist/index.js

@@ -0,0 +1,194 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  AniAds: () => AniAds,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var AniAds = ({
+  creator_code,
+  user_wallet_address,
+  ad_format,
+  api_url = "https://your-domain.com",
+  // Replace with your Ani Ads API domain
+  onAdClick
+}) => {
+  const [ad, setAd] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [error, setError] = (0, import_react.useState)(null);
+  const formats = Array.isArray(ad_format) ? ad_format : typeof ad_format === "string" ? ad_format.split(",").map((f) => f.trim()) : [];
+  const getImageUrl = (ad2, format) => {
+    const normalizedFormat = format.toLowerCase().replace(/[:\s]/g, "");
+    if (normalizedFormat === "11" || normalizedFormat === "1:1") {
+      return ad2.image_square || null;
+    } else if (normalizedFormat === "916" || normalizedFormat === "9:16") {
+      return ad2.image_portrait || null;
+    } else if (normalizedFormat === "169" || normalizedFormat === "16:9") {
+      return ad2.image_landscape || null;
+    }
+    return null;
+  };
+  const fetchAd = (0, import_react.useCallback)(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await fetch(`${api_url}/api/ads/sdk`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          creator_code,
+          formats
+        })
+      });
+      if (!response.ok) {
+        throw new Error("Failed to fetch ads");
+      }
+      const data = await response.json();
+      if (data.ad) {
+        setAd(data.ad);
+      } else {
+        setAd(null);
+      }
+    } catch (err) {
+      console.error("Error fetching ad:", err);
+      setError(err instanceof Error ? err.message : "Failed to load ad");
+      setAd(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [creator_code, formats, api_url]);
+  const handleClick = (0, import_react.useCallback)(async () => {
+    if (!ad || !user_wallet_address) return;
+    try {
+      const response = await fetch(`${api_url}/api/ads/click`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          ad_id: ad.id,
+          creator_code,
+          user_wallet_address: user_wallet_address.toLowerCase()
+        })
+      });
+      if (response.ok) {
+        if (onAdClick) {
+          onAdClick(ad.id, ad.destination_url);
+        }
+        window.open(ad.destination_url, "_blank", "noopener,noreferrer");
+        await fetchAd();
+      }
+    } catch (err) {
+      console.error("Error tracking click:", err);
+      window.open(ad.destination_url, "_blank", "noopener,noreferrer");
+    }
+  }, [ad, creator_code, user_wallet_address, api_url, onAdClick, fetchAd]);
+  const getBestImage = (ad2) => {
+    for (const format of formats) {
+      const imageUrl2 = getImageUrl(ad2, format);
+      if (imageUrl2) return imageUrl2;
+    }
+    return ad2.image_square || ad2.image_portrait || ad2.image_landscape || null;
+  };
+  (0, import_react.useEffect)(() => {
+    if (creator_code && formats.length > 0) {
+      fetchAd();
+    } else {
+      setLoading(false);
+    }
+  }, [creator_code, formats, fetchAd]);
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      display: "flex",
+      width: "100%",
+      minHeight: "100px",
+      backgroundColor: "#f3f4f6",
+      borderRadius: "8px",
+      alignItems: "center",
+      justifyContent: "center"
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#6b7280" }, children: "Loading ad..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      display: "flex",
+      width: "100%",
+      minHeight: "100px",
+      backgroundColor: "#fee2e2",
+      borderRadius: "8px",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "12px"
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#dc2626", fontSize: "14px" }, children: error }) });
+  }
+  if (!ad) {
+    return null;
+  }
+  const imageUrl = getBestImage(ad);
+  if (!imageUrl) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: {
+        display: "inline-block",
+        width: "100%",
+        cursor: "pointer",
+        borderRadius: "8px",
+        overflow: "hidden",
+        transition: "transform 0.2s, box-shadow 0.2s"
+      },
+      onClick: handleClick,
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.02)";
+        e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+        e.currentTarget.style.boxShadow = "none";
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "img",
+        {
+          src: imageUrl,
+          alt: ad.title,
+          style: {
+            width: "100%",
+            height: "auto",
+            display: "block"
+          },
+          loading: "lazy"
+        }
+      )
+    }
+  );
+};
+var index_default = AniAds;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AniAds
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import React, { useEffect, useState, useCallback } from 'react'\r\n\r\nexport interface AniAdsProps {\r\n  creator_code: string\r\n  user_wallet_address: string\r\n  ad_format: string[] | string // Can be array like [\"16:9\", \"9:16\"] or string like \"16:9,9:16\"\r\n  api_url?: string // Optional API URL, defaults to production\r\n  onAdClick?: (adId: string, destinationUrl: string) => void // Optional click handler\r\n}\r\n\r\ninterface Ad {\r\n  id: string\r\n  title: string\r\n  destination_url: string\r\n  image_square: string\r\n  image_portrait: string\r\n  image_landscape: string\r\n  status: 'active' | 'paused' | 'deleting'\r\n  remaining_budget: number\r\n}\r\n\r\nexport const AniAds: React.FC<AniAdsProps> = ({\r\n  creator_code,\r\n  user_wallet_address,\r\n  ad_format,\r\n  api_url = 'https://your-domain.com', // Replace with your Ani Ads API domain\r\n  onAdClick,\r\n}) => {\r\n  const [ad, setAd] = useState<Ad | null>(null)\r\n  const [loading, setLoading] = useState(true)\r\n  const [error, setError] = useState<string | null>(null)\r\n\r\n  // Parse ad format\r\n  const formats = Array.isArray(ad_format) \r\n    ? ad_format \r\n    : typeof ad_format === 'string' \r\n    ? ad_format.split(',').map(f => f.trim())\r\n    : []\r\n\r\n  // Map format strings to image keys\r\n  const getImageUrl = (ad: Ad, format: string): string | null => {\r\n    const normalizedFormat = format.toLowerCase().replace(/[:\\s]/g, '')\r\n    \r\n    if (normalizedFormat === '11' || normalizedFormat === '1:1') {\r\n      return ad.image_square || null\r\n    } else if (normalizedFormat === '916' || normalizedFormat === '9:16') {\r\n      return ad.image_portrait || null\r\n    } else if (normalizedFormat === '169' || normalizedFormat === '16:9') {\r\n      return ad.image_landscape || null\r\n    }\r\n    \r\n    return null\r\n  }\r\n\r\n  // Fetch available ads\r\n  const fetchAd = useCallback(async () => {\r\n    try {\r\n      setLoading(true)\r\n      setError(null)\r\n\r\n      const response = await fetch(`${api_url}/api/ads/sdk`, {\r\n        method: 'POST',\r\n        headers: {\r\n          'Content-Type': 'application/json',\r\n        },\r\n        body: JSON.stringify({\r\n          creator_code,\r\n          formats,\r\n        }),\r\n      })\r\n\r\n      if (!response.ok) {\r\n        throw new Error('Failed to fetch ads')\r\n      }\r\n\r\n      const data = await response.json()\r\n      \r\n      if (data.ad) {\r\n        setAd(data.ad)\r\n      } else {\r\n        setAd(null)\r\n      }\r\n    } catch (err) {\r\n      console.error('Error fetching ad:', err)\r\n      setError(err instanceof Error ? err.message : 'Failed to load ad')\r\n      setAd(null)\r\n    } finally {\r\n      setLoading(false)\r\n    }\r\n  }, [creator_code, formats, api_url])\r\n\r\n  // Track ad click\r\n  const handleClick = useCallback(async () => {\r\n    if (!ad || !user_wallet_address) return\r\n\r\n    try {\r\n      // Track click on backend\r\n      const response = await fetch(`${api_url}/api/ads/click`, {\r\n        method: 'POST',\r\n        headers: {\r\n          'Content-Type': 'application/json',\r\n        },\r\n        body: JSON.stringify({\r\n          ad_id: ad.id,\r\n          creator_code,\r\n          user_wallet_address: user_wallet_address.toLowerCase(),\r\n        }),\r\n      })\r\n\r\n      if (response.ok) {\r\n        // Call optional click handler\r\n        if (onAdClick) {\r\n          onAdClick(ad.id, ad.destination_url)\r\n        }\r\n\r\n        // Open destination URL\r\n        window.open(ad.destination_url, '_blank', 'noopener,noreferrer')\r\n\r\n        // Fetch new ad after click\r\n        await fetchAd()\r\n      }\r\n    } catch (err) {\r\n      console.error('Error tracking click:', err)\r\n      // Still open the URL even if tracking fails\r\n      window.open(ad.destination_url, '_blank', 'noopener,noreferrer')\r\n    }\r\n  }, [ad, creator_code, user_wallet_address, api_url, onAdClick, fetchAd])\r\n\r\n  // Find best matching image for formats\r\n  const getBestImage = (ad: Ad): string | null => {\r\n    for (const format of formats) {\r\n      const imageUrl = getImageUrl(ad, format)\r\n      if (imageUrl) return imageUrl\r\n    }\r\n    // Fallback to any available image\r\n    return ad.image_square || ad.image_portrait || ad.image_landscape || null\r\n  }\r\n\r\n  useEffect(() => {\r\n    if (creator_code && formats.length > 0) {\r\n      fetchAd()\r\n    } else {\r\n      setLoading(false)\r\n    }\r\n  }, [creator_code, formats, fetchAd])\r\n\r\n  if (loading) {\r\n    return (\r\n      <div style={{\r\n        display: 'flex',\r\n        width: '100%',\r\n        minHeight: '100px',\r\n        backgroundColor: '#f3f4f6',\r\n        borderRadius: '8px',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n      }}>\r\n        <span style={{ color: '#6b7280' }}>Loading ad...</span>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  if (error) {\r\n    return (\r\n      <div style={{\r\n        display: 'flex',\r\n        width: '100%',\r\n        minHeight: '100px',\r\n        backgroundColor: '#fee2e2',\r\n        borderRadius: '8px',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n        padding: '12px',\r\n      }}>\r\n        <span style={{ color: '#dc2626', fontSize: '14px' }}>{error}</span>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  if (!ad) {\r\n    return null // Don't render anything if no ad available\r\n  }\r\n\r\n  const imageUrl = getBestImage(ad)\r\n\r\n  if (!imageUrl) {\r\n    return null\r\n  }\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        display: 'inline-block',\r\n        width: '100%',\r\n        cursor: 'pointer',\r\n        borderRadius: '8px',\r\n        overflow: 'hidden',\r\n        transition: 'transform 0.2s, box-shadow 0.2s',\r\n      }}\r\n      onClick={handleClick}\r\n      onMouseEnter={(e) => {\r\n        e.currentTarget.style.transform = 'scale(1.02)'\r\n        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'\r\n      }}\r\n      onMouseLeave={(e) => {\r\n        e.currentTarget.style.transform = 'scale(1)'\r\n        e.currentTarget.style.boxShadow = 'none'\r\n      }}\r\n    >\r\n      <img\r\n        src={imageUrl}\r\n        alt={ad.title}\r\n        style={{\r\n          width: '100%',\r\n          height: 'auto',\r\n          display: 'block',\r\n        }}\r\n        loading=\"lazy\"\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default AniAds\r\n\r\n"],"mappings":"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","names":["ad","imageUrl"]}

package/dist/index.mjs

@@ -0,0 +1,169 @@
+// src/index.tsx
+import { useEffect, useState, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var AniAds = ({
+  creator_code,
+  user_wallet_address,
+  ad_format,
+  api_url = "https://your-domain.com",
+  // Replace with your Ani Ads API domain
+  onAdClick
+}) => {
+  const [ad, setAd] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const formats = Array.isArray(ad_format) ? ad_format : typeof ad_format === "string" ? ad_format.split(",").map((f) => f.trim()) : [];
+  const getImageUrl = (ad2, format) => {
+    const normalizedFormat = format.toLowerCase().replace(/[:\s]/g, "");
+    if (normalizedFormat === "11" || normalizedFormat === "1:1") {
+      return ad2.image_square || null;
+    } else if (normalizedFormat === "916" || normalizedFormat === "9:16") {
+      return ad2.image_portrait || null;
+    } else if (normalizedFormat === "169" || normalizedFormat === "16:9") {
+      return ad2.image_landscape || null;
+    }
+    return null;
+  };
+  const fetchAd = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const response = await fetch(`${api_url}/api/ads/sdk`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          creator_code,
+          formats
+        })
+      });
+      if (!response.ok) {
+        throw new Error("Failed to fetch ads");
+      }
+      const data = await response.json();
+      if (data.ad) {
+        setAd(data.ad);
+      } else {
+        setAd(null);
+      }
+    } catch (err) {
+      console.error("Error fetching ad:", err);
+      setError(err instanceof Error ? err.message : "Failed to load ad");
+      setAd(null);
+    } finally {
+      setLoading(false);
+    }
+  }, [creator_code, formats, api_url]);
+  const handleClick = useCallback(async () => {
+    if (!ad || !user_wallet_address) return;
+    try {
+      const response = await fetch(`${api_url}/api/ads/click`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          ad_id: ad.id,
+          creator_code,
+          user_wallet_address: user_wallet_address.toLowerCase()
+        })
+      });
+      if (response.ok) {
+        if (onAdClick) {
+          onAdClick(ad.id, ad.destination_url);
+        }
+        window.open(ad.destination_url, "_blank", "noopener,noreferrer");
+        await fetchAd();
+      }
+    } catch (err) {
+      console.error("Error tracking click:", err);
+      window.open(ad.destination_url, "_blank", "noopener,noreferrer");
+    }
+  }, [ad, creator_code, user_wallet_address, api_url, onAdClick, fetchAd]);
+  const getBestImage = (ad2) => {
+    for (const format of formats) {
+      const imageUrl2 = getImageUrl(ad2, format);
+      if (imageUrl2) return imageUrl2;
+    }
+    return ad2.image_square || ad2.image_portrait || ad2.image_landscape || null;
+  };
+  useEffect(() => {
+    if (creator_code && formats.length > 0) {
+      fetchAd();
+    } else {
+      setLoading(false);
+    }
+  }, [creator_code, formats, fetchAd]);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      width: "100%",
+      minHeight: "100px",
+      backgroundColor: "#f3f4f6",
+      borderRadius: "8px",
+      alignItems: "center",
+      justifyContent: "center"
+    }, children: /* @__PURE__ */ jsx("span", { style: { color: "#6b7280" }, children: "Loading ad..." }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      display: "flex",
+      width: "100%",
+      minHeight: "100px",
+      backgroundColor: "#fee2e2",
+      borderRadius: "8px",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "12px"
+    }, children: /* @__PURE__ */ jsx("span", { style: { color: "#dc2626", fontSize: "14px" }, children: error }) });
+  }
+  if (!ad) {
+    return null;
+  }
+  const imageUrl = getBestImage(ad);
+  if (!imageUrl) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        display: "inline-block",
+        width: "100%",
+        cursor: "pointer",
+        borderRadius: "8px",
+        overflow: "hidden",
+        transition: "transform 0.2s, box-shadow 0.2s"
+      },
+      onClick: handleClick,
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.02)";
+        e.currentTarget.style.boxShadow = "0 4px 12px rgba(0,0,0,0.15)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+        e.currentTarget.style.boxShadow = "none";
+      },
+      children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: imageUrl,
+          alt: ad.title,
+          style: {
+            width: "100%",
+            height: "auto",
+            display: "block"
+          },
+          loading: "lazy"
+        }
+      )
+    }
+  );
+};
+var index_default = AniAds;
+export {
+  AniAds,
+  index_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["import React, { useEffect, useState, useCallback } from 'react'\r\n\r\nexport interface AniAdsProps {\r\n  creator_code: string\r\n  user_wallet_address: string\r\n  ad_format: string[] | string // Can be array like [\"16:9\", \"9:16\"] or string like \"16:9,9:16\"\r\n  api_url?: string // Optional API URL, defaults to production\r\n  onAdClick?: (adId: string, destinationUrl: string) => void // Optional click handler\r\n}\r\n\r\ninterface Ad {\r\n  id: string\r\n  title: string\r\n  destination_url: string\r\n  image_square: string\r\n  image_portrait: string\r\n  image_landscape: string\r\n  status: 'active' | 'paused' | 'deleting'\r\n  remaining_budget: number\r\n}\r\n\r\nexport const AniAds: React.FC<AniAdsProps> = ({\r\n  creator_code,\r\n  user_wallet_address,\r\n  ad_format,\r\n  api_url = 'https://your-domain.com', // Replace with your Ani Ads API domain\r\n  onAdClick,\r\n}) => {\r\n  const [ad, setAd] = useState<Ad | null>(null)\r\n  const [loading, setLoading] = useState(true)\r\n  const [error, setError] = useState<string | null>(null)\r\n\r\n  // Parse ad format\r\n  const formats = Array.isArray(ad_format) \r\n    ? ad_format \r\n    : typeof ad_format === 'string' \r\n    ? ad_format.split(',').map(f => f.trim())\r\n    : []\r\n\r\n  // Map format strings to image keys\r\n  const getImageUrl = (ad: Ad, format: string): string | null => {\r\n    const normalizedFormat = format.toLowerCase().replace(/[:\\s]/g, '')\r\n    \r\n    if (normalizedFormat === '11' || normalizedFormat === '1:1') {\r\n      return ad.image_square || null\r\n    } else if (normalizedFormat === '916' || normalizedFormat === '9:16') {\r\n      return ad.image_portrait || null\r\n    } else if (normalizedFormat === '169' || normalizedFormat === '16:9') {\r\n      return ad.image_landscape || null\r\n    }\r\n    \r\n    return null\r\n  }\r\n\r\n  // Fetch available ads\r\n  const fetchAd = useCallback(async () => {\r\n    try {\r\n      setLoading(true)\r\n      setError(null)\r\n\r\n      const response = await fetch(`${api_url}/api/ads/sdk`, {\r\n        method: 'POST',\r\n        headers: {\r\n          'Content-Type': 'application/json',\r\n        },\r\n        body: JSON.stringify({\r\n          creator_code,\r\n          formats,\r\n        }),\r\n      })\r\n\r\n      if (!response.ok) {\r\n        throw new Error('Failed to fetch ads')\r\n      }\r\n\r\n      const data = await response.json()\r\n      \r\n      if (data.ad) {\r\n        setAd(data.ad)\r\n      } else {\r\n        setAd(null)\r\n      }\r\n    } catch (err) {\r\n      console.error('Error fetching ad:', err)\r\n      setError(err instanceof Error ? err.message : 'Failed to load ad')\r\n      setAd(null)\r\n    } finally {\r\n      setLoading(false)\r\n    }\r\n  }, [creator_code, formats, api_url])\r\n\r\n  // Track ad click\r\n  const handleClick = useCallback(async () => {\r\n    if (!ad || !user_wallet_address) return\r\n\r\n    try {\r\n      // Track click on backend\r\n      const response = await fetch(`${api_url}/api/ads/click`, {\r\n        method: 'POST',\r\n        headers: {\r\n          'Content-Type': 'application/json',\r\n        },\r\n        body: JSON.stringify({\r\n          ad_id: ad.id,\r\n          creator_code,\r\n          user_wallet_address: user_wallet_address.toLowerCase(),\r\n        }),\r\n      })\r\n\r\n      if (response.ok) {\r\n        // Call optional click handler\r\n        if (onAdClick) {\r\n          onAdClick(ad.id, ad.destination_url)\r\n        }\r\n\r\n        // Open destination URL\r\n        window.open(ad.destination_url, '_blank', 'noopener,noreferrer')\r\n\r\n        // Fetch new ad after click\r\n        await fetchAd()\r\n      }\r\n    } catch (err) {\r\n      console.error('Error tracking click:', err)\r\n      // Still open the URL even if tracking fails\r\n      window.open(ad.destination_url, '_blank', 'noopener,noreferrer')\r\n    }\r\n  }, [ad, creator_code, user_wallet_address, api_url, onAdClick, fetchAd])\r\n\r\n  // Find best matching image for formats\r\n  const getBestImage = (ad: Ad): string | null => {\r\n    for (const format of formats) {\r\n      const imageUrl = getImageUrl(ad, format)\r\n      if (imageUrl) return imageUrl\r\n    }\r\n    // Fallback to any available image\r\n    return ad.image_square || ad.image_portrait || ad.image_landscape || null\r\n  }\r\n\r\n  useEffect(() => {\r\n    if (creator_code && formats.length > 0) {\r\n      fetchAd()\r\n    } else {\r\n      setLoading(false)\r\n    }\r\n  }, [creator_code, formats, fetchAd])\r\n\r\n  if (loading) {\r\n    return (\r\n      <div style={{\r\n        display: 'flex',\r\n        width: '100%',\r\n        minHeight: '100px',\r\n        backgroundColor: '#f3f4f6',\r\n        borderRadius: '8px',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n      }}>\r\n        <span style={{ color: '#6b7280' }}>Loading ad...</span>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  if (error) {\r\n    return (\r\n      <div style={{\r\n        display: 'flex',\r\n        width: '100%',\r\n        minHeight: '100px',\r\n        backgroundColor: '#fee2e2',\r\n        borderRadius: '8px',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n        padding: '12px',\r\n      }}>\r\n        <span style={{ color: '#dc2626', fontSize: '14px' }}>{error}</span>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  if (!ad) {\r\n    return null // Don't render anything if no ad available\r\n  }\r\n\r\n  const imageUrl = getBestImage(ad)\r\n\r\n  if (!imageUrl) {\r\n    return null\r\n  }\r\n\r\n  return (\r\n    <div\r\n      style={{\r\n        display: 'inline-block',\r\n        width: '100%',\r\n        cursor: 'pointer',\r\n        borderRadius: '8px',\r\n        overflow: 'hidden',\r\n        transition: 'transform 0.2s, box-shadow 0.2s',\r\n      }}\r\n      onClick={handleClick}\r\n      onMouseEnter={(e) => {\r\n        e.currentTarget.style.transform = 'scale(1.02)'\r\n        e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.15)'\r\n      }}\r\n      onMouseLeave={(e) => {\r\n        e.currentTarget.style.transform = 'scale(1)'\r\n        e.currentTarget.style.boxShadow = 'none'\r\n      }}\r\n    >\r\n      <img\r\n        src={imageUrl}\r\n        alt={ad.title}\r\n        style={{\r\n          width: '100%',\r\n          height: 'auto',\r\n          display: 'block',\r\n        }}\r\n        loading=\"lazy\"\r\n      />\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default AniAds\r\n\r\n"],"mappings":"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","names":["ad","imageUrl"]}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "ani-ads-sdk",
+  "version": "1.0.0",
+  "description": "Ani Ads SDK for Mini App Creators to display ads in their apps",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch"
+  },
+  "keywords": [
+    "ads",
+    "worldchain",
+    "world-app",
+    "mini-app"
+  ],
+  "author": "",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "tsup": "^8.0.0",
+    "typescript": "^5"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  }
+}
+