@adland/react 0.7.2 → 0.9.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @adland/react
 
+## 0.9.0
+
+### Minor Changes
+
+- 447cc7b: add profile & token type
+
+### Patch Changes
+
+- Updated dependencies [447cc7b]
+  - @adland/data@0.12.0
+
+## 0.8.0
+
+### Minor Changes
+
+- df8ba42: handle errors from api for no ad
+- d6712f4: fix wrong api url ad path
+
 ## 0.7.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adland/react",
-  "version": "0.7.2",
+  "version": "0.9.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -15,6 +15,11 @@
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./types": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/types.js",
+      "require": "./dist/types.cjs"
+    },
     "./package.json": "./package.json"
   },
   "peerDependencies": {
@@ -28,7 +33,7 @@
     "@types/react-dom": "^18.3.1",
     "lucide-react": "0.561.0",
     "tsup": "^8.0.1",
-    "@adland/data": "0.11.0"
+    "@adland/data": "0.12.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.13.1",

package/src/components/Ad.tsx

@@ -8,48 +8,11 @@ import BasicAdBody from "./BasicAdBody";
 import LinkAdContent from "./content/LinkAdContent";
 import MiniappAdContent from "./content/MiniappAdContent";
 import CastAdContent from "./content/CastAdContent";
-
-type Network = "testnet" | "mainnet";
-
-/**
- * Get the base URL for the network
- * Uses relative URL in browser (for local dev), otherwise defaults to production
- */
-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 "";
-};
-
-export interface AdProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * The owner/creator of the ad
-   */
-  owner: string;
-  /**
-   * Unique identifier for the ad
-   */
-  slotId: string;
-  /**
-   * Network to use for tracking requests (currently only "testnet" is supported)
-   */
-  network?: Network;
-  /**
-   * Optional base URL override. If not provided, uses relative URL in browser or production URL in SSR
-   */
-  baseUrl?: string;
-}
+import TokenAdContent from "./content/TokenAdContent";
+import FarcasterProfileAdContent from "./content/FarcasterProfileAdContent";
+import { AdDataQueryError, AdProps } from "../types";
+import { getBaseUrl } from "../utils";
+import { adlandApiUrl } from "../utils/constants";
 
 /**
  * Simple Ad component with built-in view and click tracking
@@ -77,16 +40,26 @@ export function Ad({
   } = 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",
-          },
+      const url = `${adlandApiUrl}/ad/owner/${owner.toLowerCase()}/slot/${slotId}`;
+
+      const res = await fetch(url, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
         },
-      );
-      return res.json();
+      });
+
+      if (!res.ok) {
+        throw new Error(AdDataQueryError.ERROR);
+      }
+
+      const data = await res.json();
+
+      if (data.error) {
+        throw new Error(data.error);
+      }
+
+      return data;
     },
     {
       enabled: !!owner && !!slotId,
@@ -94,6 +67,8 @@ export function Ad({
   );
   const networkBaseUrl = baseUrl ?? getBaseUrl(network);
 
+  console.log({ error, adData });
+
   const send = useCallback(
     (type: "view" | "click") => {
       const trackEndpoint = `${networkBaseUrl}/api/analytics/track`;
@@ -165,6 +140,19 @@ export function Ad({
           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) {
@@ -175,6 +163,12 @@ export function Ad({
               {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 {

package/src/components/content/FarcasterProfileAdContent.tsx

@@ -0,0 +1,80 @@
+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">
+            {profileMetadata?.username ? (
+              <p className="text-sm font-bold text-primary truncate">
+                {profileMetadata.username}
+              </p>
+            ) : (
+              <p className="text-sm font-bold text-primary">FID: {fid}</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/TokenAdContent.tsx

@@ -0,0 +1,79 @@
+import { TokenAd } from "@adland/data";
+import sdk from "@farcaster/miniapp-sdk";
+import BasicAdBody from "../BasicAdBody";
+import { adCardIcon } from "../../utils/constants";
+
+// Token Ad Component
+const TokenAdContent = ({ data }: { data: TokenAd }) => {
+  const Icon = adCardIcon["token"];
+  const { data: tokenData, metadata: tokenMetadata } = data;
+
+  // Build block explorer URL based on chainId
+  const getTokenUrl = () => {
+    const address = tokenData.address;
+    const chainId = tokenData.chainId;
+
+    // Common block explorers by chainId
+    const explorers: Record<number, string> = {
+      1: "https://etherscan.io/token/",
+      8453: "https://basescan.org/token/",
+      42161: "https://arbiscan.io/token/",
+      10: "https://optimistic.etherscan.io/token/",
+      137: "https://polygonscan.com/token/",
+    };
+
+    const baseUrl = explorers[chainId];
+    if (baseUrl) {
+      return `${baseUrl}${address}`;
+    }
+    // Fallback to Etherscan if chain not recognized
+    return `https://etherscan.io/token/${address}`;
+  };
+
+  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/index.ts

@@ -1,6 +1,6 @@
 // Main exports
 export { Ad } from "./components/Ad";
-export type { AdProps } from "./components/Ad";
+export type { AdProps, AdDataQueryResponse, AdDataQueryError } from "./types";
 
 // Utility exports
 export {

package/src/types.ts

@@ -0,0 +1,32 @@
+import { AdData } from "@adland/data";
+
+export type Network = "testnet" | "mainnet";
+
+export interface AdProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * The owner/creator of the ad
+   */
+  owner: string;
+  /**
+   * Unique identifier for the ad
+   */
+  slotId: string;
+  /**
+   * Network to use for tracking requests (currently only "testnet" is supported)
+   */
+  network?: Network;
+  /**
+   * Optional base URL override. If not provided, uses relative URL in browser or production URL in SSR
+   */
+  baseUrl?: string;
+}
+
+export enum AdDataQueryError {
+  NO_AD = "NO_AD",
+  ERROR = "ERROR",
+}
+
+export interface AdDataQueryResponse {
+  error?: AdDataQueryError;
+  data?: AdData;
+}

package/src/utils/constants.ts

@@ -1,6 +1,13 @@
 import { AdType } from "@adland/data";
 import { ForwardRefExoticComponent, RefAttributes } from "react";
-import { Link, MessageCircle, LayoutGrid, LucideProps } from "lucide-react";
+import {
+  Link,
+  MessageCircle,
+  LayoutGrid,
+  LucideProps,
+  Coins,
+  User,
+} from "lucide-react";
 
 export const adCardIcon: Record<
   AdType,
@@ -11,4 +18,11 @@ export const adCardIcon: Record<
   link: Link,
   cast: MessageCircle,
   miniapp: LayoutGrid,
+  token: Coins,
+  farcasterProfile: User,
 };
+
+export const adlandApiUrl =
+  process.env.NODE_ENV === "development"
+    ? "http://localhost:3069"
+    : "https://api.adland.space";

package/src/utils/index.ts

@@ -0,0 +1,22 @@
+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/tsup.config.ts

@@ -1,7 +1,10 @@
 import { defineConfig } from "tsup";
 
 export default defineConfig({
-  entry: ["src/index.ts"],
+  entry: {
+    index: "src/index.ts",
+    types: "src/types.ts",
+  },
   format: ["cjs", "esm"],
   dts: true,
   splitting: false,