@adland/react 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -1,10 +1,22 @@
 # @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
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adland/react",
-  "version": "0.8.0",
+  "version": "0.9.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.11.0"
+    "@adland/data": "0.12.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.13.1",

package/src/components/Ad.tsx

@@ -8,6 +8,8 @@ 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";
@@ -38,18 +40,17 @@ export function Ad({
   } = useFetch<AdData>(
     `ad-data-${owner}-${slotId}`,
     async () => {
-      const res = await fetch(
-        `${adlandApiUrl}/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",
         },
-      );
+      });
 
       if (!res.ok) {
-        throw new Error(AdDataQueryError.NO_AD);
+        throw new Error(AdDataQueryError.ERROR);
       }
 
       const data = await res.json();
@@ -148,6 +149,9 @@ export function Ad({
                 />
               );
             }
+            if (error.message === AdDataQueryError.ERROR) {
+              return <ErrorAdContent error={error} />;
+            }
           }
           return <ErrorAdContent error={error} />;
         }
@@ -159,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/types.ts

@@ -23,6 +23,7 @@ export interface AdProps extends React.HTMLAttributes<HTMLDivElement> {
 
 export enum AdDataQueryError {
   NO_AD = "NO_AD",
+  ERROR = "ERROR",
 }
 
 export interface AdDataQueryResponse {

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,6 +18,8 @@ export const adCardIcon: Record<
   link: Link,
   cast: MessageCircle,
   miniapp: LayoutGrid,
+  token: Coins,
+  farcasterProfile: User,
 };
 
 export const adlandApiUrl =