@adland/react 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @adland/react
 
+## 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
+
+- c56a65d: change of profile ad display name
+
 ## 0.12.0
 
 ### Minor Changes
@@ -115,7 +134,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.0",
+  "version": "0.13.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -33,7 +33,7 @@
     "@types/react-dom": "^18.3.1",
     "lucide-react": "0.561.0",
     "tsup": "^8.0.1",
-    "@adland/data": "0.13.0"
+    "@adland/data": "0.14.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.13.1",

package/src/components/Ad.tsx

@@ -12,40 +12,44 @@ 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 { fetchAdFromURI, fetchMetadataURI } from "../fetch";
+
+const DEFAULT_RPC = "https://sepolia.base.org";
+const DEFAULT_METADATA_MODULE = "0x6c5A8A7f061bEd94b1b88CFAd4e1a1a8C5c4e527";
 
 /**
- * Simple Ad component with built-in view and click tracking
- * Uses Farcaster MiniApp SDK for authenticated tracking requests
+ * Ad component powered by 0xSlots v3 MetadataModule.
+ * Fetches ad content URI from on-chain, then fetches content from IPFS/HTTP.
  *
  * @example
  * ```tsx
- * <Ad owner="0x123..." adId="ad-1" network="testnet">
- *   <img src="ad-image.jpg" alt="Advertisement" />
- * </Ad>
+ * <Ad slot="0xabc...123" />
  * ```
  */
 export function Ad({
-  owner,
-  slotId,
+  slot,
+  metadataModule = DEFAULT_METADATA_MODULE,
   network = "testnet",
   baseUrl,
+  rpcUrl = DEFAULT_RPC,
   ...props
 }: AdProps) {
   const ref = useRef<HTMLDivElement>(null);
+  const networkBaseUrl = baseUrl ?? getBaseUrl(network);
+
   const {
     data: adData,
     isLoading,
     error,
   } = useFetch<AdData>(
-    `ad-data-${owner}-${slotId}`,
-    () => fetchAd(owner, slotId),
-    {
-      enabled: !!owner && !!slotId,
+    `ad-data-${slot}`,
+    async () => {
+      const uri = await fetchMetadataURI(rpcUrl, metadataModule, slot);
+      if (!uri) throw new Error(AdDataQueryError.NO_AD);
+      return fetchAdFromURI(uri);
     },
+    { enabled: !!slot },
   );
-  const networkBaseUrl = baseUrl ?? getBaseUrl(network);
 
   const send = useCallback(
     (type: "view" | "click") => {
@@ -53,20 +57,19 @@ export function Ad({
 
       sendTrackRequest(trackEndpoint, {
         type,
-        adId: slotId,
-        adOwner: owner,
+        slot,
       }).catch((error: unknown) => {
         console.error(`[@adland/react] Failed to track ${type}:`, error);
       });
     },
-    [slotId, owner, networkBaseUrl],
+    [slot, networkBaseUrl],
   );
 
   useEffect(() => {
     const el = ref.current;
     if (!el) return;
 
-    const key = `ad_view_${slotId}`;
+    const key = `ad_view_${slot}`;
 
     const obs = new IntersectionObserver(
       (entries) => {
@@ -83,20 +86,15 @@ export function Ad({
         send("view");
         obs.unobserve(el);
       },
-      {
-        threshold: 0.15, // more forgiving
-      },
+      { threshold: 0.15 },
     );
 
     obs.observe(el);
     return () => obs.disconnect();
-  }, [slotId, send]);
+  }, [slot, send]);
 
-  // CLICK tracking
-  // 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" ||
@@ -114,21 +112,11 @@ export function Ad({
   return (
     <div ref={ref} onClick={onClick} {...props}>
       {(() => {
-        if (isLoading) {
-          return <LoadingAdContent />;
-        }
+        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 <EmtpyAdContent slot={slot} baseUrl={networkBaseUrl} />;
             }
           }
           return <ErrorAdContent error={error} />;
@@ -137,25 +125,16 @@ export function Ad({
           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}` }}
-            />
-          );
         }
+        return <EmtpyAdContent slot={slot} baseUrl={networkBaseUrl} />;
       })()}
     </div>
   );
@@ -183,12 +162,12 @@ function LoadingAdContent() {
   );
 }
 
-function EmtpyAdContent({ data }: { data: { url: string } }) {
+function EmtpyAdContent({ slot, baseUrl }: { slot: string; baseUrl: string }) {
   return (
     <BasicAdBody
       onClick={() => {
         sdk.actions.openMiniApp({
-          url: data.url,
+          url: `${baseUrl}/slots/${slot}`,
         });
       }}
     >

package/src/components/content/FarcasterProfileAdContent.tsx

@@ -34,24 +34,18 @@ const FarcasterProfileAdContent = ({ data }: { data: FarcasterProfileAd }) => {
             </div>
           )}
           <div className="flex flex-row items-center gap-1">
-            {profileMetadata?.displayName || profileMetadata?.username ? (
-              <p className="text-sm font-bold text-primary truncate">
-                {profileMetadata.displayName || `@${profileMetadata.username}`}
-              </p>
-            ) : (
-              <p className="text-sm font-bold text-primary">FID: {fid}</p>
-            )}
+            <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?.displayName && profileMetadata?.username && (
-            <p className="text-xs text-muted-foreground/80 truncate">
-              @{profileMetadata.username}
-            </p>
-          )}
           {profileMetadata?.bio ? (
             <p className="text-xs text-muted-foreground/80 line-clamp-1">
               {profileMetadata.bio}

package/src/fetch.ts

@@ -1,28 +1,80 @@
 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/";
+
+/**
+ * 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 from the MetadataModule contract via RPC
+ */
+export const fetchMetadataURI = async (
+  rpcUrl: string,
+  metadataModuleAddress: string,
+  slotAddress: string,
+): Promise<string> => {
+  // tokenURI(address) selector = 0xc2bc2efc (keccak of tokenURI(address))
+  // Actually, tokenURI takes address param, need proper encoding
+  const paddedSlot = slotAddress.slice(2).toLowerCase().padStart(64, "0");
+  // tokenURI(address) = 0xc87b56dd... no, it's a custom function
+  // bytes4(keccak256("tokenURI(address)"))
+  const selector = "0xe9dc6375"; // we'll compute it properly
+
+  const res = await fetch(rpcUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({
+      jsonrpc: "2.0",
+      method: "eth_call",
+      id: 1,
+      params: [
+        {
+          to: metadataModuleAddress,
+          data: `0x93702f33${paddedSlot}`, // tokenURI(address)
+        },
+        "latest",
+      ],
+    }),
+  });
+
+  const json = await res.json();
+  if (!json.result || json.result === "0x") return "";
+
+  // Decode ABI-encoded string
+  try {
+    const hex = json.result.slice(2);
+    const offset = parseInt(hex.slice(0, 64), 16) * 2;
+    const length = parseInt(hex.slice(offset, offset + 64), 16);
+    const strHex = hex.slice(offset + 64, offset + 64 + length * 2);
+    let str = "";
+    for (let i = 0; i < strHex.length; i += 2) {
+      str += String.fromCharCode(parseInt(strHex.slice(i, i + 2), 16));
+    }
+    return str;
+  } catch {
+    return "";
+  }
+};

package/src/types.ts

@@ -4,13 +4,13 @@ export type Network = "testnet" | "mainnet";
 
 export interface AdProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   * The owner/creator of the ad
+   * The slot contract address (0xSlots v3)
    */
-  owner: string;
+  slot: string;
   /**
-   * Unique identifier for the ad
+   * MetadataModule contract address (to fetch ad content URI)
    */
-  slotId: string;
+  metadataModule?: string;
   /**
    * Network to use for tracking requests (currently only "testnet" is supported)
    */
@@ -19,6 +19,10 @@ export interface AdProps extends React.HTMLAttributes<HTMLDivElement> {
    * Optional base URL override. If not provided, uses relative URL in browser or production URL in SSR
    */
   baseUrl?: string;
+  /**
+   * RPC URL for reading MetadataModule on-chain
+   */
+  rpcUrl?: string;
 }
 
 export enum AdDataQueryError {

package/src/utils/sdk.ts

@@ -33,8 +33,7 @@ export async function sendTrackRequest(
   url: string,
   data: {
     type: "view" | "click";
-    adOwner: string;
-    adId: string;
+    slot: string;
   },
 ): Promise<Response> {
   if (!isSdkReady()) {

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.