feat: consolidate original changes up to 92c5d89

Co-Authored-By: devin.riot152@passmail.net <devin.riot152@passmail.net>

globals.d.ts

@@ -1,6 +1,6 @@
 // General Types ---------------------------------------------------------------
 
-export type SUBPROTOCOLS = "STAMP" | "SRC-20" | "SRC-721";
+export type SUBPROTOCOLS = "STAMP" | "SRC-20" | "SRC-721" | "SRC-101";
 export type STAMP_TYPES = // These just reformat to variations of SUBPROTOCOLS
   | "all"
   | "stamps"

islands/Wallet/details/WalletContent.tsx

@@ -13,6 +13,7 @@ import { Dispenser } from "$types/index.d.ts";
 import { formatBTCAmount } from "$lib/utils/formatUtils.ts";
 import { getStampImageSrc } from "$lib/utils/imageUtils.ts";
 import { NOT_AVAILABLE_IMAGE } from "$lib/utils/constants.ts";
+import { StampRow } from "$globals";
 
 const ItemHeader = ({
   title = "STAMP",
@@ -234,6 +235,18 @@ function DispenserRow(
   const imageSize = view === "mobile"
     ? "w-[146px] h-[146px]"
     : "w-[172px] h-[172px]";
+  const [src, setSrc] = useState(NOT_AVAILABLE_IMAGE);
+
+  const fetchStampImage = async () => {
+    const res = await getStampImageSrc(dispenser.stamp as StampRow);
+    if (res) {
+      setSrc(res);
+    } else setSrc(NOT_AVAILABLE_IMAGE);
+  };
+
+  useEffect(() => {
+    fetchStampImage();
+  }, []);
 
   if (!dispenser.stamp) {
     return null;
@@ -254,7 +267,7 @@ function DispenserRow(
                   height="100%"
                   loading="lazy"
                   class="max-w-none w-full h-full object-contain rounded pixelart stamp-image"
-                  src={getStampImageSrc(dispenser.stamp)}
+                  src={src}
                   alt={`Stamp ${dispenser.stamp.stamp}`}
                   onError={(e) => {
                     (e.target as HTMLImageElement).src = NOT_AVAILABLE_IMAGE;

islands/Wallet/details/WalletDetails.tsx

@@ -574,7 +574,7 @@ function TokenStats(
       class="flex justify-between w-full dark-gradient rounded-lg p-3 mobileMd:p-6 gap-6"
       onClick={() => handleType("token")}
     >
-      <StatItem label="TOKENS" value={src20Total.toString()} />
+      <StatItem label="TOKENS" value={src20Total?.toString()} />
       <StatItem
         label="VALUE"
         value={

islands/Wallet/details/WalletSendStampModal.tsx

@@ -8,6 +8,7 @@ import { useTransactionForm } from "$client/hooks/useTransactionForm.ts";
 import type { StampRow } from "$globals";
 import { getStampImageSrc, handleImageError } from "$lib/utils/imageUtils.ts";
 import { logger } from "$lib/utils/logger.ts";
+import { NOT_AVAILABLE_IMAGE } from "$lib/utils/constants.ts";
 
 interface Props {
   fee: number;
@@ -243,9 +244,16 @@ function WalletSendStampModal({
     }
   };
 
+  const fetchStampImage = async () => {
+    const res = await getStampImageSrc(selectedStamp as StampRow);
+    if (res) {
+      setImgSrc(res);
+    } else setImgSrc(NOT_AVAILABLE_IMAGE);
+  };
+
   useEffect(() => {
     getMaxQuantity();
-    setImgSrc(getStampImageSrc(selectedStamp as StampRow));
+    fetchStampImage();
   }, [selectedStamp]);
 
   useEffect(() => {

islands/stamp/StampCard.tsx

@@ -119,7 +119,7 @@ export function StampCard({
 }) {
   // Add window size hook
   const { width } = useWindowSize();
-
+  const [src, setSrc] = useState<string>("");
   // Function to get current abbreviation length based on screen size
   const getAbbreviationLength = () => {
     if (width >= BREAKPOINTS.desktop) return ABBREVIATION_LENGTHS.desktop;
@@ -129,7 +129,16 @@ export function StampCard({
     return ABBREVIATION_LENGTHS.mobileSm;
   };
 
-  const src = getStampImageSrc(stamp as StampRow);
+  const fetchStampImage = async () => {
+    const res = await getStampImageSrc(stamp as StampRow);
+    if (res) {
+      setSrc(res);
+    } else setSrc(NOT_AVAILABLE_IMAGE);
+  };
+
+  useEffect(() => {
+    fetchStampImage();
+  }, []);
 
   // Add state for validated content
   const [validatedContent, setValidatedContent] = useState<preact.VNode | null>(
@@ -174,8 +183,9 @@ export function StampCard({
         }
       }
     };
-
-    validateContent();
+    if (src) {
+      validateContent();
+    }
   }, [src, stamp.stamp_mimetype]);
 
   const renderContent = () => {

islands/stamp/StampSection.tsx

@@ -105,7 +105,6 @@ export default function StampSection({
   const handlePageChange = (page: number) => {
     pagination?.onPageChange?.(page);
   };
-
   return (
     <div class="w-full">
       {title && (

islands/stamp/details/StampImage.tsx

@@ -393,6 +393,7 @@ export function StampImage(
   const [isCodeModalOpen, setIsCodeModalOpen] = useState(false);
   const imgScopeRef = useRef<HTMLDivElement | null>(null);
   const [transform, setTransform] = useState("");
+  const [src, setSrc] = useState(NOT_AVAILABLE_IMAGE);
 
   const updateTransform = () => {
     if (!imgScopeRef.current) return;
@@ -430,7 +431,17 @@ export function StampImage(
     setIsFullScreenModalOpen(!isFullScreenModalOpen);
   };
 
-  const src = getStampImageSrc(stamp);
+  const fetchStampImage = async () => {
+    const res = await getStampImageSrc(stamp);
+    if (res) {
+      setSrc(res);
+    } else setSrc(NOT_AVAILABLE_IMAGE);
+  };
+
+  useEffect(() => {
+    fetchStampImage();
+  }, []);
+
   const isHtml = stamp.stamp_mimetype === "text/html";
   const isPlainText = stamp.stamp_mimetype === "text/plain";
   const isAudio = stamp.stamp_mimetype?.startsWith("audio/");

islands/stamp/details/StampInfo.tsx

@@ -210,15 +210,15 @@ export function StampInfo({ stamp, lowestPriceDispenser }: StampInfoProps) {
     setAllowUnlockedTooltip(true);
   };
 
-  useEffect(() => {
+  const handleContent = async () => {
     if (isSrc20Stamp()) {
       // Calculate size of JSON data for SRC-20 stamps
       const jsonData = stamp.stamp_base64;
       const blob = new Blob([jsonData], { type: "application/json" });
       setFileSize(blob.size);
     } else if (stamp.stamp_mimetype?.startsWith("image/")) {
       // Handle images
-      const src = getStampImageSrc(stamp);
+      const src = await getStampImageSrc(stamp);
       const img = new Image();
       img.onload = () => {
         setImageDimensions({
@@ -381,6 +381,10 @@ export function StampInfo({ stamp, lowestPriceDispenser }: StampInfoProps) {
       });
       return;
     }
+  };
+
+  useEffect(() => {
+    handleContent();
   }, [stamp.stamp_mimetype, stamp.stamp_url, fileExtension]);
 
   // Format file size

lib/utils/imageUtils.ts

@@ -59,19 +59,25 @@ export const mimeTypeToSuffix = Object.entries(mimeTypes).reduce(
   {} as { [key: string]: string },
 );
 
-export const getStampImageSrc = (stamp: StampRow) => {
+export const getStampImageSrc = async (stamp: StampRow): Promise<string> => {
   if (!stamp.stamp_url) {
     return NOT_AVAILABLE_IMAGE;
   }
 
-  // Extract filename from full URL if present
-  const urlParts = stamp.stamp_url.split("/stamps/");
-  const filename = urlParts.length > 1
-    ? urlParts[1].replace(".html", "")
-    : stamp.stamp_url;
-
-  // Use relative path
-  return `/content/${filename}`;
+  if (stamp.stamp_url.includes("json")) {
+    const res = await fetch(stamp.stamp_url);
+    const jsonData = await res.json();
+    return jsonData?.img.length ? jsonData.img[0] : "";
+  } else {
+    // Extract filename from full URL if present
+    const urlParts = stamp.stamp_url.split("/stamps/");
+    const filename = urlParts.length > 1
+      ? urlParts[1].replace(".html", "")
+      : stamp.stamp_url;
+
+    // Use relative path
+    return `/content/${filename}`;
+  }
 };
 
 export const getMimeType = (extension: string): string => {

server/controller/collectionController.ts

@@ -75,7 +75,7 @@ export class CollectionController {
       const stampsByCollection = new Map<string, string[]>();
 
       // Group stamps by collection ID
-      stampResults.data.forEach((stamp: { 
+      stampResults.data.forEach(async (stamp: { 
         collection_id: string; 
         tx_hash: string;
         stamp_mimetype: string;
@@ -94,7 +94,7 @@ export class CollectionController {
         }
 
         const stamps = stampsByCollection.get(collectionId)!;
-        const imageUrl = getStampImageSrc(stamp);
+        const imageUrl = await getStampImageSrc(stamp);
         if (stamps.length < 12 && !stamps.includes(imageUrl)) {
           stamps.push(imageUrl);
         }