chore: show the html on stamping tool & change the oninput to onchang…

components/shared/fee/FeeCalculatorBase.tsx

@@ -170,8 +170,10 @@ export function FeeCalculatorBase({
           min="1"
           max="264"
           step="1"
-          onInput={(e) =>
+          onChange={(e) =>
             handleChangeFee(parseInt((e.target as HTMLInputElement).value, 10))}
+          // onInput={(e) =>
+          //   handleChangeFee(parseInt((e.target as HTMLInputElement).value, 10))}
           className="w-full h-1 mobileLg:h-1.5 rounded-lg appearance-none cursor-pointer bg-stamp-grey [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:mobileLg:w-[22px] [&::-webkit-slider-thumb]:mobileLg:h-[22px] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:bg-stamp-purple-dark [&::-webkit-slider-thumb]:hover:bg-stamp-purple [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:cursor-pointer [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:mobileLg:w-[22px] [&::-moz-range-thumb]:mobileLg:h-[22px] [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:bg-stamp-purple-dark [&::-moz-range-thumb]:hover:bg-stamp-purple-dark [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer"
         />
         <div

islands/stamping/stamp/OlgaContent.tsx

@@ -13,6 +13,7 @@ import { Config } from "$globals";
 import { logger } from "$lib/utils/logger.ts";
 import StampImageFullScreen from "$islands/stamp/details/StampImageFullScreen.tsx";
 import { NOT_AVAILABLE_IMAGE } from "$lib/utils/constants.ts";
+import { handleImageError } from "$lib/utils/imageUtils.ts";
 
 const log = (message: string, data?: unknown) => {
   logger.debug("stamps", {
@@ -299,34 +300,6 @@ export function OlgaContent() {
   // Add new state and refs for tooltips
   const [tooltipPosition, setTooltipPosition] = useState({ x: 0, y: 0 });
   const [isUploadTooltipVisible, setIsUploadTooltipVisible] = useState(false);
-  const uploadTooltipTimeoutRef = useRef<number | null>(null);
-
-  // Add tooltip handlers
-  const handleMouseMove = (e: MouseEvent) => {
-    setTooltipPosition({
-      x: e.clientX,
-      y: e.clientY,
-    });
-  };
-
-  const handleUploadMouseEnter = () => {
-    setIsUploadTooltipVisible(true);
-
-    if (uploadTooltipTimeoutRef.current) {
-      globalThis.clearTimeout(uploadTooltipTimeoutRef.current);
-    }
-
-    uploadTooltipTimeoutRef.current = globalThis.setTimeout(() => {
-      setIsUploadTooltipVisible(false);
-    }, 1500);
-  };
-
-  const handleUploadMouseLeave = () => {
-    if (uploadTooltipTimeoutRef.current) {
-      globalThis.clearTimeout(uploadTooltipTimeoutRef.current);
-    }
-    setIsUploadTooltipVisible(false);
-  };
 
   useEffect(() => {
     if (fees && !loading) {
@@ -882,7 +855,10 @@ export function OlgaContent() {
         message: "Unexpected minting error",
         error,
       });
-      setApiError("An unexpected error occurred");
+      setApiError(
+        error.message || error.response.data.error ||
+          "An unexpected error occurred",
+      );
       setSubmissionMessage(null);
     }
   };
@@ -1015,10 +991,6 @@ export function OlgaContent() {
     <div
       id="image-preview"
       class={`relative rounded items-center mx-auto text-center cursor-pointer ${PREVIEW_SIZE_CLASSES} content-center bg-stamp-purple-dark group hover:bg-[#8800CC] transition duration-300`}
-      onMouseMove={handleMouseMove}
-      onMouseEnter={handleUploadMouseEnter}
-      onMouseLeave={handleUploadMouseLeave}
-      onMouseDown={() => setIsUploadTooltipVisible(false)}
       onClick={() => setIsUploadTooltipVisible(false)}
     >
       <input
@@ -1044,6 +1016,31 @@ export function OlgaContent() {
                       message: "Image preview failed to load",
                       error: e,
                     });
+                    handleImageError(e);
+                  }}
+                />
+              )
+              : file.name.match(/\.(html)$/i)
+              ? (
+                <iframe
+                  width="100%"
+                  height="100%"
+                  scrolling="no"
+                  loading="lazy"
+                  sandbox="allow-scripts allow-same-origin"
+                  src={URL.createObjectURL(file)}
+                  class={`${PREVIEW_SIZE_CLASSES} object-contain rounded bg-black [image-rendering:pixelated]`}
+                  onError={(e) => {
+                    console.error("iframe error (detailed):", {
+                      error: e,
+                      target: e.target,
+                      src: (e.target as HTMLIFrameElement).src,
+                      contentWindow:
+                        (e.target as HTMLIFrameElement).contentWindow
+                          ? "present"
+                          : "missing",
+                    });
+                    handleImageError(e);
                   }}
                 />
               )

lib/utils/formatUtils.ts

@@ -90,7 +90,7 @@ export function formatDate(
 ): string {
   // Check for invalid date
   if (!date || isNaN(date.getTime())) {
-    return "Invalid Date";
+    return "INVALID";
   }
 
   const locale = navigator.language || "en-US";

routes/api/v2/olga/mint.ts

@@ -180,13 +180,14 @@ export const handler: Handlers<TX | TXError> = {
       } as NormalizedMintResponse, { forceNoCache: true });
     } catch (error: unknown) {
       console.error("Minting error:", error);
+
       const errorMessage = error instanceof Error
         ? error.message
-        : "An unexpected error occurred during minting";
+        : error as string || "An unexpected error occurred during minting";
 
       // Client errors (400)
       if (
-        errorMessage.includes("insufficient funds") ||
+        errorMessage.toLowerCase().includes("insufficient funds") ||
         errorMessage.includes("UTXO selection failed") ||
         errorMessage.includes("Invalid satsPerKB parameter")
       ) {

server/services/stamp/stampMintService.ts

@@ -486,7 +486,8 @@ export class StampMintService {
         if (response.error.message?.includes('invalid base58')) {
           throw new Error(`Invalid wallet address format: ${sourceWallet}. Only P2PKH (1), P2WPKH (bc1q), and P2SH (3) addresses are supported.`);
         }
-        throw new Error(`API Error: ${response.error.message || 'Unknown error'}`);
+
+        throw new Error(`API Error: ${response.error || 'Unknown error'}`);
       }
 
       // Check for nested result and rawtransaction

server/services/xcpService.ts

@@ -83,9 +83,9 @@ export async function fetchXcpV2WithCache<T>(
   return await dbManager.handleCache(
     cacheKey,
     async () => {
+      let errorMessage = null;
       for (const node of xcp_v2_nodes) {
         const url = `${node.url}${endpoint}?${queryParams.toString()}`;
-
         await logger.debug("api", {
           message: "Attempting XCP node fetch",
           node: node.name,
@@ -114,6 +114,7 @@ export async function fetchXcpV2WithCache<T>(
               errorBody,
               url
             });
+            errorMessage = errorBody
             continue; // Try the next node
           }
 
@@ -132,6 +133,7 @@ export async function fetchXcpV2WithCache<T>(
             url,
             stack: error.stack
           });
+          errorMessage = error.message
           // Continue to the next node
         }
       }
@@ -140,13 +142,15 @@ export async function fetchXcpV2WithCache<T>(
       await logger.warn("api", {
         message: "All XCP nodes failed, returning minimal data structure",
         endpoint,
-        queryParams: queryParams.toString()
+        queryParams: queryParams.toString(),
+        error: errorMessage
       });
 
       return {
         result: [],
         next_cursor: null,
         result_count: 0,
+        error: errorMessage
       } as T;
     },
     cacheTimeout,