@adland/react 0.13.1 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @adland/react
 
+## 0.14.0
+
+### Minor Changes
+
+- bd79045: update empty state & props
+
 ## 0.13.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adland/react",
-  "version": "0.13.1",
+  "version": "0.14.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -34,8 +34,8 @@
     "lucide-react": "0.561.0",
     "tsup": "^8.0.1",
     "viem": "^2.0.0",
-    "@adland/data": "0.14.1",
-    "@0xslots/sdk": "0.10.1"
+    "@0xslots/sdk": "0.10.1",
+    "@adland/data": "0.14.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.13.1",

package/src/components/Ad.tsx

@@ -6,7 +6,7 @@ import { createReadClient, fetchAdFromURI, fetchMetadataURI } from "../fetch";
 import { AdContext, useAd } from "../hooks/useAdContext";
 import { useFetch } from "../hooks/useFetch";
 import { AdDataQueryError, type AdProps } from "../types";
-import { performAdAction } from "../utils/ad-actions";
+import { performAdAction, performEmptyAdAction } from "../utils/ad-actions";
 import { getAdDescription, getAdImage, getAdTitle, getAdType } from "../utils/ad-fields";
 import { adCardIcon, adCardLabel } from "../utils/constants";
 
@@ -30,6 +30,7 @@ export function Ad({
   data: staticData,
   chainId = SlotsChain.BASE,
   rpcUrl,
+  baseLinkUrl = "https://app.0xslots.org",
   children,
   ...props
 }: AdProps) {
@@ -72,11 +73,15 @@ export function Ad({
         target.tagName === "BUTTON" ||
         target.closest("a") !== null ||
         target.closest("button") !== null;
-      if (!isInteractive && adData) {
+      if (isInteractive) return;
+
+      if (adData) {
         performAdAction(adData);
+      } else if (isEmpty && slot) {
+        performEmptyAdAction(slot, chainId, baseLinkUrl);
       }
     },
-    [adData],
+    [adData, isEmpty, slot, chainId, baseLinkUrl],
   );
 
   return (
@@ -87,6 +92,8 @@ export function Ad({
         error,
         isEmpty,
         slot,
+        baseLinkUrl,
+        chainId,
       }}
     >
       <div ref={ref} onClick={onClick} {...props}>
@@ -172,7 +179,7 @@ export function AdLoading({ children, ...props }: AdStatusProps) {
 export function AdEmpty({ children, ...props }: AdStatusProps) {
   const { isEmpty } = useAd();
   if (!isEmpty) return null;
-  return <div {...props}>{children ?? "No ad"}</div>;
+  return <div {...props}>{children ?? "Your ad here"}</div>;
 }
 
 export function AdError({ children, ...props }: AdStatusProps) {

package/src/hooks/useAdContext.ts

@@ -1,3 +1,4 @@
+import type { SlotsChain } from "@0xslots/sdk";
 import type { AdData } from "@adland/data";
 import { createContext, useContext } from "react";
 
@@ -7,6 +8,8 @@ export interface AdContextValue {
   error: unknown;
   isEmpty: boolean;
   slot?: string;
+  baseLinkUrl: string;
+  chainId: SlotsChain;
 }
 
 export const AdContext = createContext<AdContextValue | null>(null);

package/src/types.ts

@@ -19,6 +19,12 @@ export interface AdProps extends React.HTMLAttributes<HTMLDivElement> {
    * Optional RPC URL override. If not provided, uses public RPC for the chain.
    */
   rpcUrl?: string;
+  /**
+   * Base URL for the "Your ad here" CTA link.
+   * Empty-state click navigates to `${baseLinkUrl}/slots/${slot}?chain=${chainId}`.
+   * Defaults to "https://app.0xslots.org".
+   */
+  baseLinkUrl?: string;
   /**
    * Compound children (AdImage, AdTitle, etc.)
    */

package/src/utils/ad-actions.ts

@@ -1,6 +1,19 @@
+import type { SlotsChain } from "@0xslots/sdk";
 import type { AdData } from "@adland/data";
 import sdk from "@farcaster/miniapp-sdk";
 
+async function isMiniApp(): Promise<boolean> {
+  try {
+    const context = await Promise.race([
+      sdk.context,
+      new Promise((r) => setTimeout(r, 500)),
+    ]);
+    return !!context;
+  } catch {
+    return false;
+  }
+}
+
 export function performAdAction(adData: AdData) {
   try {
     switch (adData.type) {
@@ -17,10 +30,30 @@ export function performAdAction(adData: AdData) {
         sdk.actions.viewToken({ token: adData.data.address });
         break;
       case "farcasterProfile":
-        sdk.actions.viewProfile({ fid: Number.parseInt(adData.data.fid, 10) });
+        sdk.actions.viewProfile({
+          fid: Number.parseInt(adData.data.fid, 10),
+        });
         break;
     }
   } catch (err) {
-    console.error("[@adland/react] Failed to perform ad action:", err);
+    // Fallback for web (non-miniapp) context
+    if (adData.type === "link" || adData.type === "miniapp") {
+      window.open(adData.data.url, "_blank");
+    } else {
+      console.error("[@adland/react] Failed to perform ad action:", err);
+    }
+  }
+}
+
+export async function performEmptyAdAction(
+  slot: string,
+  chainId: SlotsChain,
+  baseLinkUrl: string,
+) {
+  const url = `${baseLinkUrl}/slots/${slot}?chain=${chainId}`;
+  if (await isMiniApp()) {
+    sdk.actions.openMiniApp({ url });
+  } else {
+    window.open(url, "_blank");
   }
 }