@adland/react 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @adland/react
 
+## 0.5.0
+
+### Minor Changes
+
+- c2df20a: Add `useFetch` hook with global in-memory cache and improve Ad component:
+
+  - Add `useFetch` hook with React Query-like global cache that persists across component lifecycles
+  - Add `fetchCache` utility for global cache management
+  - Improve Ad component to use relative URLs for local development
+  - Add loading and error states to Ad component
+  - Prevent loader flicker when switching tabs by using persistent cache
+
+## 0.4.0
+
+### Minor Changes
+
+- 5cee97e: add different ad types
+
 ## 0.3.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adland/react",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -22,19 +22,21 @@
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "dependencies": {
-    "@farcaster/miniapp-sdk": "0.2.1"
-  },
-  "devDependencies": {
+    "@adland/data": "^0.4.0",
+    "@farcaster/miniapp-sdk": "0.2.1",
     "@types/node": "^20",
     "@types/react": "^19.1.16",
     "@types/react-dom": "^18.3.1",
+    "lucide-react": "0.561.0",
+    "tsup": "^8.0.1"
+  },
+  "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.13.1",
     "@typescript-eslint/parser": "^7.13.1",
     "@vercel/style-guide": "^6.0.0",
     "eslint": "^8",
     "eslint-config-turbo": "2.0.6",
     "eslint-plugin-only-warn": "^1.1.0",
-    "tsup": "^8.0.1",
     "typescript": "^5.4.5"
   },
   "scripts": {

package/src/components/Ad.tsx

@@ -1,11 +1,23 @@
 import { useEffect, useRef, useCallback } from "react";
 import { sendTrackRequest } from "../utils/sdk";
+import sdk from "@farcaster/miniapp-sdk";
+import { adCardIcon } from "../utils/constants";
+import { Loader, SquareDashed } from "lucide-react";
+import { type AdData } from "@adland/data";
+import { useFetch } from "../hooks/useFetch";
 
 /**
  * Get the base URL for the network
- * Currently only testnet is supported
+ * Uses relative URL in browser (for local dev), otherwise defaults to production
  */
-const NETWORK_BASE_URL = "https://testnet.adland.space";
+const getBaseUrl = (): string => {
+  if (typeof window !== "undefined") {
+    // In browser - use relative URL for local development
+    return "";
+  }
+  // SSR fallback - use production URL
+  return "https://testnet.adland.space";
+};
 
 export interface AdProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
@@ -15,15 +27,15 @@ export interface AdProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Unique identifier for the ad
    */
-  adId: string;
-  /**
-   * The content to display in the ad
-   */
-  children: React.ReactNode;
+  slotId: string;
   /**
    * Network to use for tracking requests (currently only "testnet" is supported)
    */
   network?: "testnet";
+  /**
+   * Optional base URL override. If not provided, uses relative URL in browser or production URL in SSR
+   */
+  baseUrl?: string;
 }
 
 /**
@@ -39,33 +51,56 @@ export interface AdProps extends React.HTMLAttributes<HTMLDivElement> {
  */
 export function Ad({
   owner,
-  adId,
-  children,
+  slotId,
   network = "testnet",
+  baseUrl,
   ...props
 }: AdProps) {
   const ref = useRef<HTMLDivElement>(null);
+  const {
+    data: adData,
+    isLoading,
+    error,
+  } = useFetch<AdData>(
+    `ad-data-${owner}-${slotId}`,
+    async () => {
+      const res = await fetch(
+        `${networkBaseUrl}/api/data/owner/${owner.toLowerCase()}/slot/${slotId}`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+          },
+        },
+      );
+      return res.json();
+    },
+    {
+      enabled: !!owner && !!slotId,
+    },
+  );
+  const networkBaseUrl = baseUrl ?? getBaseUrl();
 
   const send = useCallback(
     (type: "view" | "click") => {
-      const trackEndpoint = `${NETWORK_BASE_URL}/api/analytics/track`;
+      const trackEndpoint = `${networkBaseUrl}/api/analytics/track`;
 
       sendTrackRequest(trackEndpoint, {
         type,
-        adId,
+        adId: slotId,
         adOwner: owner,
       }).catch((error: unknown) => {
         console.error(`[@adland/react] Failed to track ${type}:`, error);
       });
     },
-    [adId, owner],
+    [slotId, owner, networkBaseUrl],
   );
 
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
 
-    const key = `ad_view_${adId}`;
+    const key = `ad_view_${slotId}`;
 
     const obs = new IntersectionObserver(
       (entries) => {
@@ -89,16 +124,167 @@ export function Ad({
 
     obs.observe(el);
     return () => obs.disconnect();
-  }, [adId, send]);
+  }, [slotId, send]);
 
   // CLICK tracking
-  const onClick = useCallback(() => {
-    send("click");
-  }, [send]);
+  // Only track clicks that aren't on links or buttons (let those handle their own navigation)
+  const onClick = useCallback(
+    (e: React.MouseEvent<HTMLDivElement>) => {
+      // Don't track if clicking on a link, button, or other interactive element
+      const target = e.target as HTMLElement;
+      const isInteractiveElement =
+        target.tagName === "A" ||
+        target.tagName === "BUTTON" ||
+        target.closest("a") !== null ||
+        target.closest("button") !== null;
+
+      if (!isInteractiveElement) {
+        send("click");
+      }
+    },
+    [send],
+  );
 
   return (
     <div ref={ref} onClick={onClick} {...props}>
+      {(() => {
+        if (isLoading) {
+          return <LoadingAdContent />;
+        }
+        if (error) {
+          return <ErrorAdContent error={error} />;
+        }
+        if (adData) {
+          return (
+            <>
+              {adData.type === "link" && <LinkAdContent data={adData.data} />}
+
+              {adData.type === "cast" && <CastAdContent data={adData.data} />}
+
+              {adData.type === "miniapp" && (
+                <MiniAppAdContent data={adData.data} />
+              )}
+            </>
+          );
+        } else {
+          return (
+            <EmtpyAdContent
+              data={{ url: networkBaseUrl + `${owner}/${slotId}` }}
+            />
+          );
+        }
+      })()}
+    </div>
+  );
+}
+
+const BasicAdBody = ({
+  children,
+  ...rest
+}: { children: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className="border p-2 md:p-4 flex hover:cursor-pointer hover:bg-primary/10 flex-row rounded-md justify-between items-center gap-2 relative border-b-2 border-b-primary"
+      {...rest}
+    >
       {children}
+      <div className="inline-flex items-center border p-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
+        AD
+      </div>
     </div>
   );
+};
+
+function ErrorAdContent({ error }: { error: unknown }) {
+  return (
+    <BasicAdBody>
+      <div className="flex flex-row items-center gap-2">
+        <SquareDashed className="w-5 h-5 md:w-7 md:h-7" />
+        <p className="font-bold text-primary">ERROR</p>
+      </div>
+    </BasicAdBody>
+  );
+}
+
+function LoadingAdContent() {
+  return (
+    <BasicAdBody>
+      <div className="flex flex-row items-center gap-2">
+        <Loader className="w-5 h-5 md:w-7 md:h-7 animate-spin" />
+        <p className="font-bold text-primary">LOADING...</p>
+      </div>
+    </BasicAdBody>
+  );
+}
+
+function EmtpyAdContent({ data }: { data: { url: string } }) {
+  return (
+    <BasicAdBody
+      onClick={() => {
+        sdk.actions.openMiniApp({
+          url: data.url,
+        });
+      }}
+    >
+      <div className="flex flex-row items-center gap-2">
+        <SquareDashed className="w-5 h-5 md:w-7 md:h-7" />
+        <p className="font-bold text-primary">NO AD</p>
+      </div>
+    </BasicAdBody>
+  );
+}
+
+// Link Ad Component
+function LinkAdContent({ data }: { data: { url: string } }) {
+  const Icon = adCardIcon["link"];
+  return (
+    <BasicAdBody
+      onClick={() => {
+        sdk.actions.openUrl(data.url);
+      }}
+    >
+      <div className="flex flex-row items-center gap-2">
+        <Icon className="w-5 h-5 md:w-7 md:h-7" />
+        <p className="font-bold text-primary">LINK</p>
+      </div>
+    </BasicAdBody>
+  );
+}
+
+// Cast Ad Component
+function CastAdContent({ data }: { data: { hash: string } }) {
+  const Icon = adCardIcon["cast"];
+  return (
+    <BasicAdBody
+      onClick={() => {
+        sdk.actions.viewCast({
+          hash: data.hash,
+        });
+      }}
+    >
+      <div className="flex flex-row items-center gap-2">
+        <Icon className="w-5 h-5 md:w-7 md:h-7" />
+        <p className="font-bold text-primary">CAST</p>
+      </div>
+    </BasicAdBody>
+  );
+}
+
+// MiniApp Ad Component
+function MiniAppAdContent({ data }: { data: { url: string } }) {
+  const Icon = adCardIcon["miniapp"];
+  return (
+    <BasicAdBody
+      onClick={() => {
+        sdk.actions.openMiniApp({
+          url: data.url,
+        });
+      }}
+    >
+      <div className="flex flex-row items-center gap-2">
+        <Icon className="w-5 h-5 md:w-7 md:h-7" />
+        <p className="font-bold text-primary">MINIAPP</p>
+      </div>
+    </BasicAdBody>
+  );
 }

package/src/hooks/useFetch.ts

@@ -0,0 +1,133 @@
+import { useEffect, useState } from "react";
+import FetchCache from "../utils/fetchCache";
+
+type Status = "idle" | "loading" | "success" | "error";
+
+const globalCache = new FetchCache();
+
+export const fetchCache = {
+  clear: () => globalCache.clear(),
+};
+
+export function useFetch<T>(
+  key: string,
+  fetcher: () => Promise<T>,
+  opts?: {
+    enabled?: boolean;
+    ttl?: number; // ms
+  },
+) {
+  const { enabled = true, ttl = 0 } = opts ?? {};
+
+  // Get cached data from global cache
+  const getCachedData = (): T | null => {
+    return globalCache.get<T>(key, ttl || undefined);
+  };
+
+  const hasCachedData = () => {
+    return globalCache.has(key, ttl || undefined);
+  };
+
+  // Check if there's an active fetch for this key (dedupe concurrent requests)
+  const getActiveFetch = (): Promise<T> | undefined => {
+    return globalCache.getActiveFetch<T>(key);
+  };
+
+  const cachedData = getCachedData();
+  const [data, setData] = useState<T | null>(cachedData);
+  const [error, setError] = useState<unknown>(null);
+  // If we have cached data, start with success status to avoid showing loader
+  const [status, setStatus] = useState<Status>(cachedData ? "success" : "idle");
+
+  const refetch = async () => {
+    // ALWAYS check cache first - never show loading if we have valid cached data
+    const cached = getCachedData();
+    if (cached) {
+      // Already have valid cached data, ensure state is correct
+      setData(cached);
+      setStatus("success");
+      return cached;
+    }
+
+    // Check if there's already an active fetch for this key (dedupe)
+    const activeFetch = getActiveFetch();
+    if (activeFetch) {
+      try {
+        const res = await activeFetch;
+        setData(res);
+        setStatus("success");
+        return res;
+      } catch (e) {
+        setError(e);
+        setStatus("error");
+        throw e;
+      }
+    }
+
+    // Only set loading if we actually need to fetch
+    setStatus("loading");
+    setError(null);
+
+    try {
+      // Create fetch promise and store it for deduplication
+      const fetchPromise = fetcher();
+      globalCache.setActiveFetch(key, fetchPromise);
+
+      const res = await fetchPromise;
+      globalCache.set(key, res);
+      setData(res);
+      setStatus("success");
+      return res;
+    } catch (e) {
+      setError(e);
+      setStatus("error");
+      throw e;
+    }
+  };
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    const cached = getCachedData();
+
+    if (cached) {
+      setData(cached);
+      setStatus("success");
+      return;
+    }
+
+    const activeFetch = getActiveFetch();
+    if (activeFetch) {
+      setStatus("loading");
+      activeFetch
+        .then((res) => {
+          setData(res);
+          setStatus("success");
+        })
+        .catch((e) => {
+          setError(e);
+          setStatus("error");
+        });
+      return;
+    }
+
+    if (status !== "loading" && status !== "success") {
+      refetch();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [key, enabled]);
+
+  const hasValidCache = hasCachedData();
+  const isLoading = status === "loading" && !hasValidCache;
+
+  return {
+    data,
+    error,
+    status,
+    isIdle: status === "idle",
+    isLoading,
+    isSuccess: status === "success",
+    isError: status === "error",
+    refetch,
+  };
+}

package/src/index.ts

@@ -8,3 +8,6 @@ export {
   sendTrackRequest,
   checkSdkActionsReady,
 } from "./utils/sdk";
+
+// Constants exports
+export { adCardIcon } from "./utils/constants";

package/src/utils/constants.ts

@@ -0,0 +1,14 @@
+import { AdType } from "@adland/data";
+import { ForwardRefExoticComponent, RefAttributes } from "react";
+import { Link, MessageCircle, LayoutGrid, LucideProps } from "lucide-react";
+
+export const adCardIcon: Record<
+  AdType,
+  ForwardRefExoticComponent<
+    Omit<LucideProps, "ref"> & RefAttributes<SVGSVGElement>
+  >
+> = {
+  link: Link,
+  cast: MessageCircle,
+  miniapp: LayoutGrid,
+};

package/src/utils/fetchCache.ts

@@ -0,0 +1,51 @@
+class FetchCache {
+  private cache = new Map<string, { data: unknown; ts: number }>();
+  private activeFetches = new Map<string, Promise<unknown>>();
+
+  get<T>(key: string, ttl?: number): T | null {
+    const cached = this.cache.get(key);
+    if (!cached) return null;
+
+    if (ttl && Date.now() - cached.ts > ttl) {
+      // Cache expired, remove it
+      this.cache.delete(key);
+      return null;
+    }
+
+    return cached.data as T;
+  }
+
+  has(key: string, ttl?: number): boolean {
+    const cached = this.cache.get(key);
+    if (!cached) return false;
+
+    if (ttl && Date.now() - cached.ts > ttl) {
+      this.cache.delete(key);
+      return false;
+    }
+
+    return true;
+  }
+
+  set<T>(key: string, data: T): void {
+    this.cache.set(key, { data, ts: Date.now() });
+  }
+
+  getActiveFetch<T>(key: string): Promise<T> | undefined {
+    return this.activeFetches.get(key) as Promise<T> | undefined;
+  }
+
+  setActiveFetch<T>(key: string, promise: Promise<T>): void {
+    this.activeFetches.set(key, promise);
+    promise.finally(() => {
+      this.activeFetches.delete(key);
+    });
+  }
+
+  clear(): void {
+    this.cache.clear();
+    this.activeFetches.clear();
+  }
+}
+
+export default FetchCache;

package/src/utils/sdk.ts

@@ -53,16 +53,74 @@ export async function sendTrackRequest(
       throw new Error("[@adland/react] SDK quickAuth is not available");
     }
 
-    return await sdk.quickAuth.fetch(url, {
+    const requestOptions = {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
         "x-auth-type": "farcaster",
       },
       body: JSON.stringify(data),
+    };
+
+    // Log request details for debugging
+    console.log("[@adland/react] Sending track request:", {
+      url,
+      method: requestOptions.method,
+      headers: requestOptions.headers,
+      body: data,
     });
+
+    const response = await sdk.quickAuth.fetch(url, requestOptions);
+
+    // Check if response is ok
+    if (!response.ok) {
+      const statusText = response.statusText;
+      const status = response.status;
+
+      // Try to get error body if available
+      let errorBody = null;
+      try {
+        const contentType = response.headers.get("content-type");
+        if (contentType?.includes("application/json")) {
+          errorBody = await response.clone().json();
+        } else {
+          errorBody = await response.clone().text();
+        }
+      } catch (e) {
+        // Ignore errors when reading response body
+      }
+
+      console.error("[@adland/react] Track request failed:", {
+        url,
+        status,
+        statusText,
+        errorBody,
+        requestBody: data,
+      });
+
+      throw new Error(
+        `[@adland/react] Track request failed: ${status} ${statusText}${errorBody ? ` - ${JSON.stringify(errorBody)}` : ""}`,
+      );
+    }
+
+    return response;
   } catch (error) {
-    console.error("[@adland/react] Error sending track request:", error);
+    // Enhanced error logging
+    if (error instanceof Error) {
+      console.error("[@adland/react] Error sending track request:", {
+        message: error.message,
+        name: error.name,
+        stack: error.stack,
+        url,
+        requestData: data,
+      });
+    } else {
+      console.error("[@adland/react] Unknown error sending track request:", {
+        error,
+        url,
+        requestData: data,
+      });
+    }
     throw error;
   }
 }