@adland/react 0.12.1 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @adland/react
 
+## 0.13.1
+
+### Patch Changes
+
+- 71a90f5: Export AdContent component for rendering ad data without on-chain fetching
+- 8877133: refactor
+- Updated dependencies [8877133]
+  - @adland/data@0.14.1
+
+## 0.13.0
+
+### Minor Changes
+
+- c051bc3: repo migration
+
+### Patch Changes
+
+- 0d3484f: centralized packages
+- Updated dependencies [c051bc3]
+- Updated dependencies [0d3484f]
+  - @adland/data@0.14.0
+
 ## 0.12.1
 
 ### Patch Changes
@@ -121,7 +143,6 @@
 ### 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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adland/react",
-  "version": "0.12.1",
+  "version": "0.13.1",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -33,7 +33,9 @@
     "@types/react-dom": "^18.3.1",
     "lucide-react": "0.561.0",
     "tsup": "^8.0.1",
-    "@adland/data": "0.13.0"
+    "viem": "^2.0.0",
+    "@adland/data": "0.14.1",
+    "@0xslots/sdk": "0.10.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.13.1",

package/src/components/Ad.tsx

@@ -1,206 +1,188 @@
-import { useEffect, useRef, useCallback } from "react";
-import { sendTrackRequest } from "../utils/sdk";
-import sdk from "@farcaster/miniapp-sdk";
-import { FileWarningIcon, Loader, SquareDashed } from "lucide-react";
-import { type AdData } from "@adland/data";
+import { SlotsChain } from "@0xslots/sdk";
+import type { AdData } from "@adland/data";
+import { useCallback, useMemo, useRef } from "react";
+
+import { createReadClient, fetchAdFromURI, fetchMetadataURI } from "../fetch";
+import { AdContext, useAd } from "../hooks/useAdContext";
 import { useFetch } from "../hooks/useFetch";
-import BasicAdBody from "./BasicAdBody";
-import LinkAdContent from "./content/LinkAdContent";
-import MiniappAdContent from "./content/MiniappAdContent";
-import CastAdContent from "./content/CastAdContent";
-import TokenAdContent from "./content/TokenAdContent";
-import FarcasterProfileAdContent from "./content/FarcasterProfileAdContent";
-import { AdDataQueryError, AdProps } from "../types";
-import { getBaseUrl } from "../utils";
-import { adlandApiUrl } from "../utils/constants";
-import { fetchAd } from "../fetch";
+import { AdDataQueryError, type AdProps } from "../types";
+import { performAdAction } from "../utils/ad-actions";
+import { getAdDescription, getAdImage, getAdTitle, getAdType } from "../utils/ad-fields";
+import { adCardIcon, adCardLabel } from "../utils/constants";
+
+// ─── Root component ──────────────────────────────────────────────────────────
 
 /**
- * Simple Ad component with built-in view and click tracking
- * Uses Farcaster MiniApp SDK for authenticated tracking requests
+ * Root Ad component — compound pattern.
  *
  * @example
  * ```tsx
- * <Ad owner="0x123..." adId="ad-1" network="testnet">
- *   <img src="ad-image.jpg" alt="Advertisement" />
+ * <Ad slot="0xabc...123" className="rounded-md border p-3">
+ *   <AdImage className="size-10 rounded-md" />
+ *   <AdTitle className="text-sm font-medium" />
+ *   <AdDescription className="text-xs text-muted-foreground" />
+ *   <AdBadge />
  * </Ad>
  * ```
  */
 export function Ad({
-  owner,
-  slotId,
-  network = "testnet",
-  baseUrl,
+  slot,
+  data: staticData,
+  chainId = SlotsChain.BASE,
+  rpcUrl,
+  children,
   ...props
 }: AdProps) {
   const ref = useRef<HTMLDivElement>(null);
+
+  const client = useMemo(
+    () => (slot ? createReadClient(chainId, rpcUrl) : null),
+    [slot, chainId, rpcUrl],
+  );
+
   const {
-    data: adData,
+    data: fetchedData,
     isLoading,
     error,
   } = useFetch<AdData>(
-    `ad-data-${owner}-${slotId}`,
-    () => fetchAd(owner, slotId),
-    {
-      enabled: !!owner && !!slotId,
-    },
-  );
-  const networkBaseUrl = baseUrl ?? getBaseUrl(network);
-
-  const send = useCallback(
-    (type: "view" | "click") => {
-      const trackEndpoint = `${networkBaseUrl}/api/analytics/track`;
-
-      sendTrackRequest(trackEndpoint, {
-        type,
-        adId: slotId,
-        adOwner: owner,
-      }).catch((error: unknown) => {
-        console.error(`[@adland/react] Failed to track ${type}:`, error);
-      });
+    `ad-data-${slot}`,
+    async () => {
+      if (!client || !slot) throw new Error(AdDataQueryError.NO_AD);
+      const uri = await fetchMetadataURI(client, slot);
+      if (!uri) throw new Error(AdDataQueryError.NO_AD);
+      return fetchAdFromURI(uri);
     },
-    [slotId, owner, networkBaseUrl],
+    { enabled: !!slot && !staticData },
   );
 
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-
-    const key = `ad_view_${slotId}`;
-
-    const obs = new IntersectionObserver(
-      (entries) => {
-        const entry = entries[0];
-        if (!entry?.isIntersecting) return;
-
-        const already = sessionStorage.getItem(key);
-        if (already) {
-          obs.unobserve(el);
-          return;
-        }
-
-        sessionStorage.setItem(key, "1");
-        send("view");
-        obs.unobserve(el);
-      },
-      {
-        threshold: 0.15, // more forgiving
-      },
-    );
-
-    obs.observe(el);
-    return () => obs.disconnect();
-  }, [slotId, send]);
-
-  // CLICK tracking
-  // Only track clicks that aren't on links or buttons (let those handle their own navigation)
+  const adData = staticData ?? fetchedData;
+
+  const isEmpty =
+    !adData &&
+    !isLoading &&
+    (error instanceof Error
+      ? error.message === AdDataQueryError.NO_AD
+      : !error);
+
   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 =
+      const isInteractive =
         target.tagName === "A" ||
         target.tagName === "BUTTON" ||
         target.closest("a") !== null ||
         target.closest("button") !== null;
-
-      if (!isInteractiveElement) {
-        send("click");
+      if (!isInteractive && adData) {
+        performAdAction(adData);
       }
     },
-    [send],
+    [adData],
   );
 
   return (
-    <div ref={ref} onClick={onClick} {...props}>
-      {(() => {
-        if (isLoading) {
-          return <LoadingAdContent />;
-        }
-        if (error) {
-          // @ts-ignore
-          if (error instanceof Error) {
-            if (error.message === AdDataQueryError.NO_AD) {
-              return (
-                <EmtpyAdContent
-                  data={{ url: networkBaseUrl + `${owner}/${slotId}` }}
-                />
-              );
-            }
-            if (error.message === AdDataQueryError.ERROR) {
-              return <ErrorAdContent error={error} />;
-            }
-          }
-          return <ErrorAdContent error={error} />;
-        }
-        if (adData) {
-          return (
-            <>
-              {adData.type === "link" && <LinkAdContent data={adData} />}
-
-              {adData.type === "cast" && <CastAdContent data={adData} />}
-
-              {adData.type === "miniapp" && <MiniappAdContent data={adData} />}
-
-              {adData.type === "token" && <TokenAdContent data={adData} />}
-
-              {adData.type === "farcasterProfile" && (
-                <FarcasterProfileAdContent data={adData} />
-              )}
-            </>
-          );
-        } else {
-          return (
-            <EmtpyAdContent
-              data={{ url: networkBaseUrl + `${owner}/${slotId}` }}
-            />
-          );
-        }
-      })()}
-    </div>
+    <AdContext.Provider
+      value={{
+        data: adData ?? null,
+        isLoading: !!slot && !staticData && isLoading,
+        error,
+        isEmpty,
+        slot,
+      }}
+    >
+      <div ref={ref} onClick={onClick} {...props}>
+        {children}
+      </div>
+    </AdContext.Provider>
   );
 }
 
-function ErrorAdContent({ error }: { error: unknown }) {
-  return (
-    <BasicAdBody>
-      <div className="flex flex-row items-center gap-2">
-        <FileWarningIcon className="w-5 h-5 md:w-7 md:h-7" />
-        <p className="font-bold text-primary">ERROR</p>
-      </div>
-    </BasicAdBody>
-  );
+// ─── Sub-components ──────────────────────────────────────────────────────────
+
+export interface AdImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  fallback?: React.ReactNode;
 }
 
-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>
-  );
+export function AdImage({ fallback, ...props }: AdImageProps) {
+  const { data } = useAd();
+  const src = getAdImage(data);
+  if (!src) return fallback ? <>{fallback}</> : null;
+  return <img src={src} alt="" {...props} />;
+}
+
+export interface AdTitleProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  fallback?: React.ReactNode;
+}
+
+export function AdTitle({ fallback, children, ...props }: AdTitleProps) {
+  const { data } = useAd();
+  const title = getAdTitle(data);
+  if (!title) return fallback ? <>{fallback}</> : null;
+  return <p {...props}>{children ?? title}</p>;
+}
+
+export interface AdDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  fallback?: React.ReactNode;
 }
 
-function EmtpyAdContent({ data }: { data: { url: string } }) {
+export function AdDescription({ fallback, children, ...props }: AdDescriptionProps) {
+  const { data } = useAd();
+  const description = getAdDescription(data);
+  if (!description) return fallback ? <>{fallback}</> : null;
+  return <p {...props}>{children ?? description}</p>;
+}
+
+export interface AdBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {}
+
+export function AdBadge({ children, ...props }: AdBadgeProps) {
+  const { data } = useAd();
+  const type = getAdType(data);
+  if (!type) return null;
+  const Icon = adCardIcon[type];
+  const label = adCardLabel[type];
   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{" "}
-          <span className="text-xs text-muted-foreground/80 font-normal">
-            (Your ad here)
-          </span>
-        </p>
-      </div>
-    </BasicAdBody>
+    <span {...props}>
+      {children ?? (
+        <>
+          {Icon && <Icon className="size-3" />}
+          {label}
+        </>
+      )}
+    </span>
   );
 }
+
+export interface AdLabelProps extends React.HTMLAttributes<HTMLSpanElement> {}
+
+export function AdLabel({ children, ...props }: AdLabelProps) {
+  return <span {...props}>{children ?? "AD"}</span>;
+}
+
+// ─── State components ────────────────────────────────────────────────────────
+
+export interface AdStatusProps extends React.HTMLAttributes<HTMLDivElement> {
+  children?: React.ReactNode;
+}
+
+export function AdLoading({ children, ...props }: AdStatusProps) {
+  const { isLoading } = useAd();
+  if (!isLoading) return null;
+  return <div {...props}>{children ?? "Loading..."}</div>;
+}
+
+export function AdEmpty({ children, ...props }: AdStatusProps) {
+  const { isEmpty } = useAd();
+  if (!isEmpty) return null;
+  return <div {...props}>{children ?? "No ad"}</div>;
+}
+
+export function AdError({ children, ...props }: AdStatusProps) {
+  const { error, isEmpty } = useAd();
+  if (!error || isEmpty) return null;
+  return <div {...props}>{children ?? "Error loading ad"}</div>;
+}
+
+export function AdLoaded({ children, ...props }: AdStatusProps) {
+  const { data } = useAd();
+  if (!data) return null;
+  return <div {...props}>{children}</div>;
+}

package/src/fetch.ts

@@ -1,28 +1,79 @@
+import { SlotsClient, type SlotsChain } from "@0xslots/sdk";
+import { type Address, createPublicClient, http } from "viem";
+import { base, baseSepolia } from "viem/chains";
+
 import { AdDataQueryError } from "./types";
-import { adlandApiUrl } from "./utils/constants";
 
-export const fetchAd = async (owner: string, slotId: string) => {
-  const url = `${adlandApiUrl}/ad/owner/${owner.toLowerCase()}/slot/${slotId}`;
+const IPFS_GATEWAY = "https://gateway.pinata.cloud/ipfs/";
+
+const viemChains: Record<number, typeof base> = {
+  8453: base,
+  84532: baseSepolia,
+};
+
+/**
+ * Create a read-only SlotsClient for a given chain.
+ */
+export function createReadClient(
+  chainId: SlotsChain,
+  rpcUrl?: string,
+): SlotsClient {
+  const chain = viemChains[chainId];
+  if (!chain) throw new Error(`Unsupported chain: ${chainId}`);
+
+  const publicClient = createPublicClient({
+    chain,
+    transport: http(rpcUrl),
+  });
+
+  return new SlotsClient({ chainId, publicClient });
+}
+
+/**
+ * Fetch ad content from a metadata URI (IPFS or HTTP)
+ */
+export const fetchAdFromURI = async (uri: string) => {
+  if (!uri) throw new Error(AdDataQueryError.NO_AD);
+
+  const url = uri.startsWith("ipfs://")
+    ? `${IPFS_GATEWAY}${uri.slice(7)}`
+    : uri;
 
   const res = await fetch(url, {
     method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
+    headers: { Accept: "application/json" },
   });
 
   if (!res.ok) {
-    if (res.status === 404) {
-      throw new Error(AdDataQueryError.NO_AD);
-    }
+    if (res.status === 404) throw new Error(AdDataQueryError.NO_AD);
     throw new Error(AdDataQueryError.ERROR);
   }
 
   const data = await res.json();
+  if (data.error) throw new Error(data.error);
 
-  if (data.error) {
-    throw new Error(data.error);
+  return data;
+};
+
+/**
+ * Fetch the metadata URI for a slot using the SDK.
+ */
+export const fetchMetadataURI = async (
+  client: SlotsClient,
+  slotAddress: string,
+): Promise<string> => {
+  const info = await client.getSlotInfo(slotAddress as Address);
+  const moduleAddress = (info as { module: Address }).module;
+
+  if (
+    !moduleAddress ||
+    moduleAddress === "0x0000000000000000000000000000000000000000"
+  ) {
+    return "";
   }
 
-  return data;
+  return client.modules.metadata.getURI(
+    moduleAddress,
+    slotAddress as Address,
+  );
 };

package/src/hooks/useAdContext.ts

@@ -0,0 +1,18 @@
+import type { AdData } from "@adland/data";
+import { createContext, useContext } from "react";
+
+export interface AdContextValue {
+  data: AdData | null;
+  isLoading: boolean;
+  error: unknown;
+  isEmpty: boolean;
+  slot?: string;
+}
+
+export const AdContext = createContext<AdContextValue | null>(null);
+
+export function useAd(): AdContextValue {
+  const ctx = useContext(AdContext);
+  if (!ctx) throw new Error("useAd must be used within an <Ad> component");
+  return ctx;
+}

package/src/index.ts

@@ -1,13 +1,35 @@
-// Main exports
-export { Ad } from "./components/Ad";
-export type { AdProps, AdDataQueryResponse, AdDataQueryError } from "./types";
-
-// Utility exports
+// Compound Ad components
 export {
-  isSdkReady,
-  sendTrackRequest,
-  checkSdkActionsReady,
-} from "./utils/sdk";
+  Ad,
+  AdBadge,
+  AdDescription,
+  AdEmpty,
+  AdError,
+  AdImage,
+  AdLabel,
+  AdLoaded,
+  AdLoading,
+  AdTitle,
+} from "./components/Ad";
+
+export type {
+  AdBadgeProps,
+  AdDescriptionProps,
+  AdImageProps,
+  AdLabelProps,
+  AdStatusProps,
+  AdTitleProps,
+} from "./components/Ad";
+
+// Context hook
+export { useAd } from "./hooks/useAdContext";
+export type { AdContextValue } from "./hooks/useAdContext";
+
+// Field helpers
+export { getAdDescription, getAdImage, getAdTitle, getAdType } from "./utils/ad-fields";
+
+// Types
+export type { AdProps, AdDataQueryError } from "./types";
 
-// Constants exports
-export * from "./utils/constants";
+// Constants
+export { adCardIcon, adCardLabel } from "./utils/constants";

package/src/types.ts

@@ -1,32 +1,31 @@
-import { AdData } from "@adland/data";
-
-export type Network = "testnet" | "mainnet";
+import type { SlotsChain } from "@0xslots/sdk";
+import type { AdData } from "@adland/data";
 
 export interface AdProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * The owner/creator of the ad
+   * The slot contract address (0xSlots v3).
+   * Required when fetching from chain. Omit when passing static `data`.
+   */
+  slot?: string;
+  /**
+   * Static ad data. When provided, skips on-chain fetching.
    */
-  owner: string;
+  data?: AdData;
   /**
-   * Unique identifier for the ad
+   * Chain ID for on-chain reads. Defaults to BASE (8453).
    */
-  slotId: string;
+  chainId?: SlotsChain;
   /**
-   * Network to use for tracking requests (currently only "testnet" is supported)
+   * Optional RPC URL override. If not provided, uses public RPC for the chain.
    */
-  network?: Network;
+  rpcUrl?: string;
   /**
-   * Optional base URL override. If not provided, uses relative URL in browser or production URL in SSR
+   * Compound children (AdImage, AdTitle, etc.)
    */
-  baseUrl?: string;
+  children?: React.ReactNode;
 }
 
 export enum AdDataQueryError {
   NO_AD = "NO_AD",
   ERROR = "ERROR",
 }
-
-export interface AdDataQueryResponse {
-  error?: AdDataQueryError;
-  data?: AdData;
-}

package/src/utils/ad-actions.ts

@@ -0,0 +1,26 @@
+import type { AdData } from "@adland/data";
+import sdk from "@farcaster/miniapp-sdk";
+
+export function performAdAction(adData: AdData) {
+  try {
+    switch (adData.type) {
+      case "link":
+        sdk.actions.openUrl(adData.data.url);
+        break;
+      case "cast":
+        sdk.actions.viewCast({ hash: adData.data.hash });
+        break;
+      case "miniapp":
+        sdk.actions.openMiniApp({ url: adData.data.url });
+        break;
+      case "token":
+        sdk.actions.viewToken({ token: adData.data.address });
+        break;
+      case "farcasterProfile":
+        sdk.actions.viewProfile({ fid: Number.parseInt(adData.data.fid, 10) });
+        break;
+    }
+  } catch (err) {
+    console.error("[@adland/react] Failed to perform ad action:", err);
+  }
+}

package/src/utils/ad-fields.ts

@@ -0,0 +1,45 @@
+import type { AdData, AdType } from "@adland/data";
+
+const IMAGE_KEYS = ["image", "icon", "pfpUrl", "logoURI", "imageUrl"] as const;
+const TITLE_KEYS = ["title", "displayName", "username", "name", "symbol"] as const;
+const DESC_KEYS = ["description", "bio", "text", "name"] as const;
+
+function flatFields(data: AdData): Record<string, unknown> {
+  return { ...data.data, ...(data.metadata ?? {}) };
+}
+
+export function getAdImage(data: AdData | null): string | null {
+  if (!data) return null;
+  const fields = flatFields(data);
+  for (const key of IMAGE_KEYS) {
+    const v = fields[key];
+    if (typeof v === "string" && v) return v;
+  }
+  return null;
+}
+
+export function getAdTitle(data: AdData | null): string | null {
+  if (!data) return null;
+  const fields = flatFields(data);
+  for (const key of TITLE_KEYS) {
+    const v = fields[key];
+    if (typeof v === "string" && v) return v;
+  }
+  return null;
+}
+
+export function getAdDescription(data: AdData | null): string | null {
+  if (!data) return null;
+  const fields = flatFields(data);
+  const title = getAdTitle(data);
+  for (const key of DESC_KEYS) {
+    const v = fields[key];
+    if (typeof v === "string" && v && v !== title) return v;
+  }
+  return null;
+}
+
+export function getAdType(data: AdData | null): AdType | null {
+  if (!data) return null;
+  return data.type as AdType;
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2024 dan5py (git@dan5py.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/src/components/BasicAdBody.tsx

@@ -1,27 +0,0 @@
-const BasicAdBody = ({
-  name,
-  children,
-  ...rest
-}: {
-  children: React.ReactNode;
-  name?: string;
-} & 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="flex flex-row items-center border-2 border-primary">
-        {name && (
-          <div className="text-xs font-semibold text-primary px-1">{name}</div>
-        )}
-        <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>
-    </div>
-  );
-};
-
-export default BasicAdBody;

package/src/components/content/CastAdContent.tsx

@@ -1,56 +0,0 @@
-import { adCardIcon } from "../../utils/constants";
-import { formatRelativeTime } from "../../utils/relativeTime";
-import sdk from "@farcaster/miniapp-sdk";
-import BasicAdBody from "../BasicAdBody";
-import { CastAd } from "@adland/data";
-
-// Cast Ad Component
-const CastAdContent = ({ data }: { data: CastAd }) => {
-  const { data: castData, metadata: castMetadata } = data;
-  const Icon = adCardIcon["cast"];
-  return (
-    <BasicAdBody
-      name={"CAST"}
-      onClick={() => {
-        sdk.actions.viewCast({
-          hash: castData.hash,
-        });
-      }}
-    >
-      <div className="flex flex-row items-center gap-2">
-        {castMetadata?.pfpUrl ? (
-          <img
-            src={castMetadata.pfpUrl}
-            alt="Cast pfp"
-            className="w-10 h-10 rounded-md"
-          />
-        ) : (
-          <Icon className="w-5 h-5 md:w-7 md:h-7" />
-        )}
-        <div className="flex flex-col gap-0">
-          {castMetadata?.username ? (
-            <div className="flex flex-row items-center gap-1">
-              <p className="font-bold text-primary">{castMetadata.username}</p>
-              {castMetadata.timestamp && (
-                <p className="text-xs text-muted-foreground/80">
-                  {formatRelativeTime(
-                    new Date(castMetadata.timestamp).getTime(),
-                  )}
-                </p>
-              )}
-            </div>
-          ) : (
-            <p className="font-bold text-primary">CAST</p>
-          )}
-          {castMetadata?.text ? (
-            <p className="text-black">{castMetadata.text}</p>
-          ) : (
-            <p className="text-muted-foreground/80">cast</p>
-          )}
-        </div>
-      </div>
-    </BasicAdBody>
-  );
-};
-
-export default CastAdContent;

package/src/components/content/FarcasterProfileAdContent.tsx

@@ -1,79 +0,0 @@
-import { FarcasterProfileAd } from "@adland/data";
-import sdk from "@farcaster/miniapp-sdk";
-import BasicAdBody from "../BasicAdBody";
-import { adCardIcon } from "../../utils/constants";
-
-// Farcaster Profile Ad Component
-const FarcasterProfileAdContent = ({ data }: { data: FarcasterProfileAd }) => {
-  const Icon = adCardIcon["farcasterProfile"];
-  const { data: profileData, metadata: profileMetadata } = data;
-  const fid = profileData.fid;
-
-  return (
-    <BasicAdBody
-      name={"PROFILE"}
-      onClick={() => {
-        sdk.actions.viewProfile({ fid: parseInt(fid) });
-      }}
-    >
-      <div className="flex flex-row items-center gap-2 flex-1 min-w-0">
-        {profileMetadata?.pfpUrl ? (
-          <img
-            src={profileMetadata.pfpUrl}
-            alt={profileMetadata.username || "Profile picture"}
-            className="w-10 h-10 md:w-12 md:h-12 rounded-full object-cover flex-shrink-0"
-          />
-        ) : (
-          <Icon className="w-5 h-5 md:w-7 md:h-7 flex-shrink-0" />
-        )}
-        <div className="flex flex-col gap-1 min-w-0 flex-1">
-          {!Boolean(profileMetadata) && (
-            <div className="flex flex-row items-center gap-2">
-              <Icon className="w-5 h-5 md:w-7 md:h-7 flex-shrink-0" />
-              <p className="font-bold text-primary">PROFILE</p>
-            </div>
-          )}
-          <div className="flex flex-row items-center gap-1">
-            <p className="text-sm text-primary truncate">
-              <span className="font-bold">{profileMetadata?.displayName} </span>
-              <span className="text-xs font-light text-muted-foreground/80">
-                @{profileMetadata?.username}
-              </span>
-            </p>
-            {profileMetadata?.pro && (
-              <span className="text-xs bg-primary text-primary-foreground px-1 rounded">
-                PRO
-              </span>
-            )}
-          </div>
-          {profileMetadata?.bio ? (
-            <p className="text-xs text-muted-foreground/80 line-clamp-1">
-              {profileMetadata.bio}
-            </p>
-          ) : (
-            (profileMetadata?.followers !== undefined ||
-              profileMetadata?.following !== undefined) && (
-              <p className="text-xs text-muted-foreground/80">
-                {profileMetadata.followers !== undefined && (
-                  <span>
-                    {profileMetadata.followers.toLocaleString()} followers
-                  </span>
-                )}
-                {profileMetadata.followers !== undefined &&
-                  profileMetadata.following !== undefined &&
-                  " • "}
-                {profileMetadata.following !== undefined && (
-                  <span>
-                    {profileMetadata.following.toLocaleString()} following
-                  </span>
-                )}
-              </p>
-            )
-          )}
-        </div>
-      </div>
-    </BasicAdBody>
-  );
-};
-
-export default FarcasterProfileAdContent;

package/src/components/content/LinkAdContent.tsx

@@ -1,49 +0,0 @@
-import sdk from "@farcaster/miniapp-sdk";
-import BasicAdBody from "../BasicAdBody";
-import { adCardIcon } from "../../utils/constants";
-import { LinkAd } from "@adland/data";
-
-// Link Ad Component
-const LinkAdContent = ({ data }: { data: LinkAd }) => {
-  const Icon = adCardIcon["link"];
-  const { data: linkData, metadata: linkMetadata } = data;
-
-  return (
-    <BasicAdBody
-      name={"LINK"}
-      onClick={() => {
-        sdk.actions.openUrl(linkData.url);
-      }}
-    >
-      <div className="flex flex-row items-center gap-2 flex-1 min-w-0">
-        {linkMetadata?.image && (
-          <img
-            src={linkMetadata.image}
-            alt={linkMetadata.title || "Link preview"}
-            className="w-10 h-10 md:w-12 md:h-12 rounded object-cover flex-shrink-0"
-          />
-        )}
-        <div className="flex flex-col gap-1 min-w-0 flex-1">
-          {!Boolean(linkMetadata) && (
-            <div className="flex flex-row items-center gap-2">
-              <Icon className="w-5 h-5 md:w-7 md:h-7 flex-shrink-0" />
-              <p className="font-bold text-primary">LINK</p>
-            </div>
-          )}
-          {linkMetadata?.title && (
-            <p className="text-sm text-muted-foreground truncate">
-              {linkMetadata.title}
-            </p>
-          )}
-          {linkMetadata?.description && (
-            <p className="text-xs text-muted-foreground/80 line-clamp-1">
-              {linkMetadata.description}
-            </p>
-          )}
-        </div>
-      </div>
-    </BasicAdBody>
-  );
-};
-
-export default LinkAdContent;

package/src/components/content/MiniappAdContent.tsx

@@ -1,48 +0,0 @@
-import { MiniAppAd } from "@adland/data";
-import sdk from "@farcaster/miniapp-sdk";
-import BasicAdBody from "../BasicAdBody";
-import { adCardIcon } from "../../utils/constants";
-
-const MiniappAdContent = ({ data }: { data: MiniAppAd }) => {
-  const Icon = adCardIcon["miniapp"];
-  const { data: miniappData, metadata: miniappMetadata } = data;
-  console.log({ miniappMetadata });
-  return (
-    <BasicAdBody
-      name={"MINIAPP"}
-      onClick={() => {
-        sdk.actions.openMiniApp({
-          url: miniappData.url,
-        });
-      }}
-    >
-      <div className="flex flex-row items-center gap-2">
-        {miniappMetadata?.icon ? (
-          <img
-            src={miniappMetadata.icon}
-            alt="Miniapp icon"
-            className="w-10 h-10 rounded-md"
-          />
-        ) : (
-          <Icon className="w-5 h-5 md:w-7 md:h-7" />
-        )}
-        <div className="flex flex-col gap-0">
-          {miniappMetadata?.title ? (
-            <p className="font-bold text-primary">{miniappMetadata.title}</p>
-          ) : (
-            <p className="font-bold text-primary">MINIAPP</p>
-          )}
-          {miniappMetadata?.description ? (
-            <p className="text-xs text-muted-foreground/80">
-              {miniappMetadata.description}
-            </p>
-          ) : (
-            <p className="text-xs text-muted-foreground/80">miniapp</p>
-          )}
-        </div>
-      </div>
-    </BasicAdBody>
-  );
-};
-
-export default MiniappAdContent;

package/src/components/content/TokenAdContent.tsx

@@ -1,56 +0,0 @@
-import { TokenAd } from "@adland/data";
-import sdk from "@farcaster/miniapp-sdk";
-import BasicAdBody from "../BasicAdBody";
-import { adCardIcon } from "../../utils/constants";
-
-const TokenAdContent = ({ data }: { data: TokenAd }) => {
-  const Icon = adCardIcon["token"];
-  const { data: tokenData, metadata: tokenMetadata } = data;
-
-  return (
-    <BasicAdBody
-      name={"TOKEN"}
-      onClick={() => {
-        sdk.actions.viewToken({ token: tokenData.address });
-      }}
-    >
-      <div className="flex flex-row items-center gap-2 flex-1 min-w-0">
-        {tokenMetadata?.logoURI ? (
-          <img
-            src={tokenMetadata.logoURI}
-            alt={tokenMetadata.name || "Token logo"}
-            className="w-10 h-10 md:w-12 md:h-12 rounded object-cover flex-shrink-0"
-          />
-        ) : (
-          <Icon className="w-5 h-5 md:w-7 md:h-7 flex-shrink-0" />
-        )}
-        <div className="flex flex-col gap-1 min-w-0 flex-1">
-          {!Boolean(tokenMetadata) && (
-            <div className="flex flex-row items-center gap-2">
-              <Icon className="w-5 h-5 md:w-7 md:h-7 flex-shrink-0" />
-              <p className="font-bold text-primary">TOKEN</p>
-            </div>
-          )}
-          {tokenMetadata?.symbol ? (
-            <p className="text-sm font-bold text-primary truncate">
-              ${tokenMetadata.symbol.toUpperCase()}
-            </p>
-          ) : (
-            <p className="text-sm font-bold text-primary">TOKEN</p>
-          )}
-          {tokenMetadata?.name ? (
-            <p className="text-xs text-muted-foreground/80 line-clamp-1">
-              {tokenMetadata.name}
-            </p>
-          ) : (
-            <p className="text-xs text-muted-foreground/80 line-clamp-1">
-              {tokenData.address.slice(0, 6)}...{tokenData.address.slice(-4)}
-            </p>
-          )}
-        </div>
-      </div>
-    </BasicAdBody>
-  );
-};
-
-export default TokenAdContent;

package/src/utils/index.ts

@@ -1,22 +0,0 @@
-import { Network } from "../types";
-
-/**
- * Get the base URL for the network
- * Uses relative URL in browser (for local dev), otherwise defaults to production
- */
-export const getBaseUrl = (network: Network): string => {
-  if (typeof window !== "undefined") {
-    // In browser - use relative URL for local development
-    return "";
-  }
-
-  if (network === "testnet") {
-    return "https://testnet.adland.space";
-  }
-
-  if (network === "mainnet") {
-    return "https://app.adland.space";
-  }
-
-  return "";
-};

package/src/utils/relativeTime.ts

@@ -1,44 +0,0 @@
-/**
- * Formats a timestamp as a relative time string (e.g., "2 days ago", "55 minutes ago")
- * @param timestamp - Unix timestamp in seconds or milliseconds
- * @returns Formatted relative time string
- */
-export function formatRelativeTime(timestamp: number): string {
-  // Convert to milliseconds if timestamp is in seconds (less than year 2000 in ms)
-  const timestampMs = timestamp < 946684800000 ? timestamp * 1000 : timestamp;
-  const now = Date.now();
-  const diffMs = now - timestampMs;
-  const diffSeconds = Math.floor(diffMs / 1000);
-  const diffMinutes = Math.floor(diffSeconds / 60);
-  const diffHours = Math.floor(diffMinutes / 60);
-  const diffDays = Math.floor(diffHours / 24);
-  const diffWeeks = Math.floor(diffDays / 7);
-  const diffMonths = Math.floor(diffDays / 30);
-  const diffYears = Math.floor(diffDays / 365);
-
-  if (diffSeconds < 60) {
-    return diffSeconds <= 1 ? "just now" : `${diffSeconds} seconds ago`;
-  }
-
-  if (diffMinutes < 60) {
-    return diffMinutes === 1 ? "1 minute ago" : `${diffMinutes} minutes ago`;
-  }
-
-  if (diffHours < 24) {
-    return diffHours === 1 ? "1 hour ago" : `${diffHours} hours ago`;
-  }
-
-  if (diffDays < 7) {
-    return diffDays === 1 ? "1 day ago" : `${diffDays} days ago`;
-  }
-
-  if (diffWeeks < 4) {
-    return diffWeeks === 1 ? "1 week ago" : `${diffWeeks} weeks ago`;
-  }
-
-  if (diffMonths < 12) {
-    return diffMonths === 1 ? "1 month ago" : `${diffMonths} months ago`;
-  }
-
-  return diffYears === 1 ? "1 year ago" : `${diffYears} years ago`;
-}

package/src/utils/sdk.ts

@@ -1,159 +0,0 @@
-import { sdk } from "@farcaster/miniapp-sdk";
-
-/**
- * Checks if the SDK is ready and initialized
- */
-export function isSdkReady(): boolean {
-  try {
-    // Check if SDK exists
-    if (!sdk) {
-      console.error("[@adland/react] SDK is not available");
-      return false;
-    }
-
-    // Check if quickAuth is available
-    if (!sdk.quickAuth) {
-      console.error(
-        "[@adland/react] SDK quickAuth is not available. Make sure the SDK is properly initialized.",
-      );
-      return false;
-    }
-
-    return true;
-  } catch (error) {
-    console.error("[@adland/react] Error checking SDK readiness:", error);
-    return false;
-  }
-}
-
-/**
- * Sends a tracking request using the SDK's quickAuth
- */
-export async function sendTrackRequest(
-  url: string,
-  data: {
-    type: "view" | "click";
-    adOwner: string;
-    adId: string;
-  },
-): Promise<Response> {
-  if (!isSdkReady()) {
-    console.error(
-      "[@adland/react] SDK is not ready. Cannot send tracking request.",
-    );
-    return Promise.reject(
-      new Error(
-        "[@adland/react] SDK is not ready. Cannot send tracking request.",
-      ),
-    );
-  }
-
-  try {
-    if (!sdk.quickAuth) {
-      throw new Error("[@adland/react] SDK quickAuth is not available");
-    }
-
-    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) {
-    // 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;
-  }
-}
-
-/**
- * Checks if SDK actions are ready
- */
-export async function checkSdkActionsReady(): Promise<boolean> {
-  try {
-    if (!sdk) {
-      console.error("[@adland/react] SDK is not available");
-      return false;
-    }
-
-    if (!sdk.actions) {
-      console.error("[@adland/react] SDK actions are not available");
-      return false;
-    }
-
-    // Check if ready() function exists
-    if (typeof sdk.actions.ready !== "function") {
-      console.error(
-        "[@adland/react] SDK actions.ready() is not available. Make sure the SDK is properly initialized.",
-      );
-      return false;
-    }
-
-    return true;
-  } catch (error) {
-    console.error(
-      "[@adland/react] Error checking SDK actions readiness:",
-      error,
-    );
-    return false;
-  }
-}