@adland/react 0.6.2 → 0.7.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @adland/react
 
+## 0.7.0
+
+### Minor Changes
+
+- 0225dd5: export new types & display metadata in ad react component
+
+### Patch Changes
+
+- Updated dependencies [0225dd5]
+  - @adland/data@0.9.0
+
 ## 0.6.2
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adland/react",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -28,7 +28,7 @@
     "@types/react-dom": "^18.3.1",
     "lucide-react": "0.561.0",
     "tsup": "^8.0.1",
-    "@adland/data": "0.8.0"
+    "@adland/data": "0.9.0"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^7.13.1",

package/src/components/Ad.tsx

@@ -1,10 +1,13 @@
 import { useEffect, useRef, useCallback } from "react";
 import { sendTrackRequest } from "../utils/sdk";
 import sdk from "@farcaster/miniapp-sdk";
-import { adCardIcon } from "../utils/constants";
 import { Loader, SquareDashed } from "lucide-react";
 import { type AdData } from "@adland/data";
 import { useFetch } from "../hooks/useFetch";
+import BasicAdBody from "./BasicAdBody";
+import LinkAdContent from "./content/LinkAdContent";
+import MiniappAdContent from "./content/MiniappAdContent";
+import CastAdContent from "./content/CastAdContent";
 
 type Network = "testnet" | "mainnet";
 
@@ -167,13 +170,11 @@ export function Ad({
         if (adData) {
           return (
             <>
-              {adData.type === "link" && <LinkAdContent data={adData.data} />}
+              {adData.type === "link" && <LinkAdContent data={adData} />}
 
-              {adData.type === "cast" && <CastAdContent data={adData.data} />}
+              {adData.type === "cast" && <CastAdContent data={adData} />}
 
-              {adData.type === "miniapp" && (
-                <MiniAppAdContent data={adData.data} />
-              )}
+              {adData.type === "miniapp" && <MiniappAdContent data={adData} />}
             </>
           );
         } else {
@@ -188,23 +189,6 @@ export function Ad({
   );
 }
 
-const BasicAdBody = ({
-  children,
-  ...rest
-}: { children: React.ReactNode } & React.HTMLAttributes<HTMLDivElement>) => {
-  return (
-    <div
-      className="border p-2 md:p-4 flex hover:cursor-pointer hover:bg-primary/10 flex-row rounded-md justify-between items-center gap-2 relative border-b-2 border-b-primary"
-      {...rest}
-    >
-      {children}
-      <div className="inline-flex items-center border p-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
-        AD
-      </div>
-    </div>
-  );
-};
-
 function ErrorAdContent({ error }: { error: unknown }) {
   return (
     <BasicAdBody>
@@ -243,58 +227,3 @@ function EmtpyAdContent({ data }: { data: { url: string } }) {
     </BasicAdBody>
   );
 }
-
-// Link Ad Component
-function LinkAdContent({ data }: { data: { url: string } }) {
-  const Icon = adCardIcon["link"];
-  return (
-    <BasicAdBody
-      onClick={() => {
-        sdk.actions.openUrl(data.url);
-      }}
-    >
-      <div className="flex flex-row items-center gap-2">
-        <Icon className="w-5 h-5 md:w-7 md:h-7" />
-        <p className="font-bold text-primary">LINK</p>
-      </div>
-    </BasicAdBody>
-  );
-}
-
-// Cast Ad Component
-function CastAdContent({ data }: { data: { hash: string } }) {
-  const Icon = adCardIcon["cast"];
-  return (
-    <BasicAdBody
-      onClick={() => {
-        sdk.actions.viewCast({
-          hash: data.hash,
-        });
-      }}
-    >
-      <div className="flex flex-row items-center gap-2">
-        <Icon className="w-5 h-5 md:w-7 md:h-7" />
-        <p className="font-bold text-primary">CAST</p>
-      </div>
-    </BasicAdBody>
-  );
-}
-
-// MiniApp Ad Component
-function MiniAppAdContent({ data }: { data: { url: string } }) {
-  const Icon = adCardIcon["miniapp"];
-  return (
-    <BasicAdBody
-      onClick={() => {
-        sdk.actions.openMiniApp({
-          url: data.url,
-        });
-      }}
-    >
-      <div className="flex flex-row items-center gap-2">
-        <Icon className="w-5 h-5 md:w-7 md:h-7" />
-        <p className="font-bold text-primary">MINIAPP</p>
-      </div>
-    </BasicAdBody>
-  );
-}

package/src/components/BasicAdBody.tsx

@@ -0,0 +1,27 @@
+const BasicAdBody = ({
+  name,
+  children,
+  ...rest
+}: {
+  children: React.ReactNode;
+  name?: string;
+} & React.HTMLAttributes<HTMLDivElement>) => {
+  return (
+    <div
+      className="border p-2 md:p-4 flex hover:cursor-pointer hover:bg-primary/10 flex-row rounded-md justify-between items-center gap-2 relative border-b-2 border-b-primary"
+      {...rest}
+    >
+      {children}
+      <div className="flex flex-row items-center border-2 border-primary">
+        {name && (
+          <div className="text-xs font-semibold text-primary px-1">{name}</div>
+        )}
+        <div className="inline-flex items-center border p-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-primary text-primary-foreground hover:bg-primary/80">
+          AD
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BasicAdBody;

package/src/components/content/CastAdContent.tsx

@@ -0,0 +1,56 @@
+import { adCardIcon } from "../../utils/constants";
+import { formatRelativeTime } from "../../utils/relativeTime";
+import sdk from "@farcaster/miniapp-sdk";
+import BasicAdBody from "../BasicAdBody";
+import { CastAd } from "@adland/data";
+
+// Cast Ad Component
+const CastAdContent = ({ data }: { data: CastAd }) => {
+  const { data: castData, metadata: castMetadata } = data;
+  const Icon = adCardIcon["cast"];
+  return (
+    <BasicAdBody
+      name={"CAST"}
+      onClick={() => {
+        sdk.actions.viewCast({
+          hash: castData.hash,
+        });
+      }}
+    >
+      <div className="flex flex-row items-center gap-2">
+        {castMetadata?.pfpUrl ? (
+          <img
+            src={castMetadata.pfpUrl}
+            alt="Cast pfp"
+            className="w-10 h-10 rounded-md"
+          />
+        ) : (
+          <Icon className="w-5 h-5 md:w-7 md:h-7" />
+        )}
+        <div className="flex flex-col gap-0">
+          {castMetadata?.username ? (
+            <div className="flex flex-row items-center gap-1">
+              <p className="font-bold text-primary">{castMetadata.username}</p>
+              {castMetadata.timestamp && (
+                <p className="text-xs text-muted-foreground/80">
+                  {formatRelativeTime(
+                    new Date(castMetadata.timestamp).getTime(),
+                  )}
+                </p>
+              )}
+            </div>
+          ) : (
+            <p className="font-bold text-primary">CAST</p>
+          )}
+          {castMetadata?.text ? (
+            <p className="text-black">{castMetadata.text}</p>
+          ) : (
+            <p className="text-muted-foreground/80">cast</p>
+          )}
+        </div>
+      </div>
+    </BasicAdBody>
+  );
+};
+
+export default CastAdContent;

package/src/components/content/LinkAdContent.tsx

@@ -0,0 +1,49 @@
+import sdk from "@farcaster/miniapp-sdk";
+import BasicAdBody from "../BasicAdBody";
+import { adCardIcon } from "../../utils/constants";
+import { LinkAd } from "@adland/data";
+
+// Link Ad Component
+const LinkAdContent = ({ data }: { data: LinkAd }) => {
+  const Icon = adCardIcon["link"];
+  const { data: linkData, metadata: linkMetadata } = data;
+
+  return (
+    <BasicAdBody
+      name={"LINK"}
+      onClick={() => {
+        sdk.actions.openUrl(linkData.url);
+      }}
+    >
+      <div className="flex flex-row items-center gap-2 flex-1 min-w-0">
+        {linkMetadata?.image && (
+          <img
+            src={linkMetadata.image}
+            alt={linkMetadata.title || "Link preview"}
+            className="w-10 h-10 md:w-12 md:h-12 rounded object-cover flex-shrink-0"
+          />
+        )}
+        <div className="flex flex-col gap-1 min-w-0 flex-1">
+          {!Boolean(linkMetadata) && (
+            <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">LINK</p>
+            </div>
+          )}
+          {linkMetadata?.title && (
+            <p className="text-sm text-muted-foreground truncate">
+              {linkMetadata.title}
+            </p>
+          )}
+          {linkMetadata?.description && (
+            <p className="text-xs text-muted-foreground/80 line-clamp-1">
+              {linkMetadata.description}
+            </p>
+          )}
+        </div>
+      </div>
+    </BasicAdBody>
+  );
+};
+
+export default LinkAdContent;

package/src/components/content/MiniappAdContent.tsx

@@ -0,0 +1,48 @@
+import { MiniAppAd } from "@adland/data";
+import sdk from "@farcaster/miniapp-sdk";
+import BasicAdBody from "../BasicAdBody";
+import { adCardIcon } from "../../utils/constants";
+
+const MiniappAdContent = ({ data }: { data: MiniAppAd }) => {
+  const Icon = adCardIcon["miniapp"];
+  const { data: miniappData, metadata: miniappMetadata } = data;
+  console.log({ miniappMetadata });
+  return (
+    <BasicAdBody
+      name={"MINIAPP"}
+      onClick={() => {
+        sdk.actions.openMiniApp({
+          url: miniappData.url,
+        });
+      }}
+    >
+      <div className="flex flex-row items-center gap-2">
+        {miniappMetadata?.icon ? (
+          <img
+            src={miniappMetadata.icon}
+            alt="Miniapp icon"
+            className="w-10 h-10 rounded-md"
+          />
+        ) : (
+          <Icon className="w-5 h-5 md:w-7 md:h-7" />
+        )}
+        <div className="flex flex-col gap-0">
+          {miniappMetadata?.title ? (
+            <p className="font-bold text-primary">{miniappMetadata.title}</p>
+          ) : (
+            <p className="font-bold text-primary">MINIAPP</p>
+          )}
+          {miniappMetadata?.description ? (
+            <p className="text-xs text-muted-foreground/80">
+              {miniappMetadata.description}
+            </p>
+          ) : (
+            <p className="text-xs text-muted-foreground/80">miniapp</p>
+          )}
+        </div>
+      </div>
+    </BasicAdBody>
+  );
+};
+
+export default MiniappAdContent;

package/src/utils/relativeTime.ts

@@ -0,0 +1,44 @@
+/**
+ * Formats a timestamp as a relative time string (e.g., "2 days ago", "55 minutes ago")
+ * @param timestamp - Unix timestamp in seconds or milliseconds
+ * @returns Formatted relative time string
+ */
+export function formatRelativeTime(timestamp: number): string {
+  // Convert to milliseconds if timestamp is in seconds (less than year 2000 in ms)
+  const timestampMs = timestamp < 946684800000 ? timestamp * 1000 : timestamp;
+  const now = Date.now();
+  const diffMs = now - timestampMs;
+  const diffSeconds = Math.floor(diffMs / 1000);
+  const diffMinutes = Math.floor(diffSeconds / 60);
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+  const diffWeeks = Math.floor(diffDays / 7);
+  const diffMonths = Math.floor(diffDays / 30);
+  const diffYears = Math.floor(diffDays / 365);
+
+  if (diffSeconds < 60) {
+    return diffSeconds <= 1 ? "just now" : `${diffSeconds} seconds ago`;
+  }
+
+  if (diffMinutes < 60) {
+    return diffMinutes === 1 ? "1 minute ago" : `${diffMinutes} minutes ago`;
+  }
+
+  if (diffHours < 24) {
+    return diffHours === 1 ? "1 hour ago" : `${diffHours} hours ago`;
+  }
+
+  if (diffDays < 7) {
+    return diffDays === 1 ? "1 day ago" : `${diffDays} days ago`;
+  }
+
+  if (diffWeeks < 4) {
+    return diffWeeks === 1 ? "1 week ago" : `${diffWeeks} weeks ago`;
+  }
+
+  if (diffMonths < 12) {
+    return diffMonths === 1 ? "1 month ago" : `${diffMonths} months ago`;
+  }
+
+  return diffYears === 1 ? "1 year ago" : `${diffYears} years ago`;
+}