@adland/react 0.10.0 → 0.11.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @adland/react
 
+## 0.11.1
+
+### Patch Changes
+
+- 830019b: add symbols in ad for token & profile
+
+## 0.11.0
+
+### Minor Changes
+
+- 99431e5: fix fetching ad
+
 ## 0.10.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adland/react",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "private": false,
   "publishConfig": {
     "access": "public"

package/src/components/Ad.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useCallback } from "react";
 import { sendTrackRequest } from "../utils/sdk";
 import sdk from "@farcaster/miniapp-sdk";
-import { Loader, SquareDashed } from "lucide-react";
+import { FileWarningIcon, Loader, SquareDashed } from "lucide-react";
 import { type AdData } from "@adland/data";
 import { useFetch } from "../hooks/useFetch";
 import BasicAdBody from "./BasicAdBody";
@@ -13,6 +13,7 @@ import FarcasterProfileAdContent from "./content/FarcasterProfileAdContent";
 import { AdDataQueryError, AdProps } from "../types";
 import { getBaseUrl } from "../utils";
 import { adlandApiUrl } from "../utils/constants";
+import { fetchAd } from "../fetch";
 
 /**
  * Simple Ad component with built-in view and click tracking
@@ -39,36 +40,13 @@ export function Ad({
     error,
   } = useFetch<AdData>(
     `ad-data-${owner}-${slotId}`,
-    async () => {
-      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.ERROR);
-      }
-
-      const data = await res.json();
-
-      if (data.error) {
-        throw new Error(data.error);
-      }
-
-      return data;
-    },
+    () => fetchAd(owner, slotId),
     {
       enabled: !!owner && !!slotId,
     },
   );
   const networkBaseUrl = baseUrl ?? getBaseUrl(network);
 
-  console.log({ error, adData });
-
   const send = useCallback(
     (type: "view" | "click") => {
       const trackEndpoint = `${networkBaseUrl}/api/analytics/track`;
@@ -187,7 +165,7 @@ function ErrorAdContent({ error }: { error: unknown }) {
   return (
     <BasicAdBody>
       <div className="flex flex-row items-center gap-2">
-        <SquareDashed className="w-5 h-5 md:w-7 md:h-7" />
+        <FileWarningIcon className="w-5 h-5 md:w-7 md:h-7" />
         <p className="font-bold text-primary">ERROR</p>
       </div>
     </BasicAdBody>
@@ -216,7 +194,12 @@ function EmtpyAdContent({ data }: { data: { url: string } }) {
     >
       <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</p>
+        <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>
   );

package/src/components/content/FarcasterProfileAdContent.tsx

@@ -36,7 +36,7 @@ const FarcasterProfileAdContent = ({ data }: { data: FarcasterProfileAd }) => {
           <div className="flex flex-row items-center gap-1">
             {profileMetadata?.username ? (
               <p className="text-sm font-bold text-primary truncate">
-                {profileMetadata.username}
+                @{profileMetadata.username}
               </p>
             ) : (
               <p className="text-sm font-bold text-primary">FID: {fid}</p>

package/src/components/content/TokenAdContent.tsx

@@ -3,33 +3,10 @@ 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"}
@@ -56,7 +33,7 @@ const TokenAdContent = ({ data }: { data: TokenAd }) => {
           )}
           {tokenMetadata?.symbol ? (
             <p className="text-sm font-bold text-primary truncate">
-              {tokenMetadata.symbol.toUpperCase()}
+              ${tokenMetadata.symbol.toUpperCase()}
             </p>
           ) : (
             <p className="text-sm font-bold text-primary">TOKEN</p>

package/src/fetch.ts

@@ -0,0 +1,28 @@
+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 res = await fetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!res.ok) {
+    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);
+  }
+
+  return data;
+};