patch PR 2 of week ending 8/27/24

packages/react-app-revamp/components/_pages/ProposalContent/components/ImageWithFallback/index.tsx

@@ -1,57 +1,80 @@
 import NextImage from "next/image";
-import { useEffect, useState } from "react";
+import { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
 
 interface ImageWithFallbackProps {
-  src: string;
-  fallbackSrc: string;
+  mediumSrc: string;
+  fullSrc: string;
   alt: string;
   containerWidth: number;
 }
 
-const ImageWithFallback: React.FC<ImageWithFallbackProps> = ({ src, fallbackSrc, alt, containerWidth }) => {
+interface ImageData {
+  img: HTMLImageElement;
+  width: number;
+  height: number;
+}
+
+const preloadImage = async (src: string): Promise<ImageData> => {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.src = src;
+    img.onload = () => resolve({ img, width: img.width, height: img.height });
+    img.onerror = reject;
+  });
+};
+
+const ImageWithFallback: React.FC<ImageWithFallbackProps> = ({ mediumSrc, fullSrc, alt, containerWidth }) => {
   const [isExpanded, setIsExpanded] = useState(false);
-  const [imgSrc, setImgSrc] = useState(src);
   const [showResizeButton, setShowResizeButton] = useState(false);
+  const [useMediumImage, setUseMediumImage] = useState(true);
 
-  useEffect(() => {
-    const mediumImg = new Image();
-    mediumImg.src = src;
+  const { data: mediumImage, isLoading: isMediumLoading } = useQuery({
+    queryKey: ["image", mediumSrc, "medium"],
+    queryFn: () => preloadImage(mediumSrc),
+    staleTime: Infinity,
+  });
+
+  const { data: fullImage, isLoading: isFullLoading } = useQuery({
+    queryKey: ["image", fullSrc, "full"],
+    queryFn: () => preloadImage(fullSrc),
+    staleTime: Infinity,
+  });
 
-    const checkSize = () => {
-      if (containerWidth > 0) {
-        // compare medium image width to container width
-        const widthDifference = Math.abs(mediumImg.width - containerWidth);
+  useEffect(() => {
+    if (mediumImage && fullImage) {
+      const isMediumLarger = mediumImage.width > fullImage.width || mediumImage.height > fullImage.height;
+      setUseMediumImage(!isMediumLarger);
 
-        // Uue a percentage threshold for comparison
+      if (!isMediumLarger && containerWidth > 0) {
+        const widthDifference = Math.abs(mediumImage.width - containerWidth);
         const threshold = 0.1; // 10% difference
         const significantDifference = widthDifference / containerWidth > threshold;
-
         setShowResizeButton(significantDifference);
-        setImgSrc(mediumImg.complete ? src : fallbackSrc);
-      }
-    };
-
-    if (mediumImg.complete) {
-      checkSize();
-    } else {
-      mediumImg.onload = checkSize;
-      mediumImg.onerror = () => {
-        setImgSrc(fallbackSrc);
+      } else {
         setShowResizeButton(false);
-      };
+      }
     }
-  }, [src, fallbackSrc, containerWidth]);
+  }, [mediumImage, fullImage, containerWidth]);
 
   const toggleExpand = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
     setIsExpanded(!isExpanded);
-    setImgSrc(isExpanded ? src : fallbackSrc);
   };
 
+  const currentImage = isExpanded || !useMediumImage ? fullImage : mediumImage;
+  const isLoading = isExpanded || !useMediumImage ? isFullLoading : isMediumLoading;
+
   return (
     <div className="relative inline-block">
-      <img src={imgSrc} alt={alt} className="rounded-[16px] max-w-full" />
+      <img
+        src={isLoading ? fullSrc : currentImage?.img.src || fullSrc}
+        alt={alt}
+        className={`rounded-[16px] max-w-full ${isExpanded ? "w-full" : ""}`}
+        width={currentImage?.width}
+        height={currentImage?.height}
+      />
       {showResizeButton && (
         <div className="absolute top-0 right-0 p-1">
           <button

packages/react-app-revamp/components/_pages/ProposalContent/index.tsx

@@ -165,8 +165,8 @@ const ProposalContent: FC<ProposalContentProps> = ({
     if (element === "img") {
       return (
         <ImageWithFallback
-          src={`${src}-medium`}
-          fallbackSrc={src}
+          mediumSrc={`${src}-medium`}
+          fullSrc={src}
           alt={node.getAttribute("alt") ?? ""}
           containerWidth={containerWidth}
         />

packages/react-app-revamp/helpers/timeout.ts

@@ -1,4 +1,4 @@
-export const MAX_TIME_TO_WAIT_FOR_RPC = 30000;
+export const MAX_TIME_TO_WAIT_FOR_RPC = 60000;
 
 // https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value
 export const MAX_MS_TIMEOUT = 2147483647;

packages/react-app-revamp/package.json

@@ -8,8 +8,8 @@
     "build": "next build"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "3.633.0",
-    "@aws-sdk/s3-request-presigner": "3.633.0",
+    "@aws-sdk/client-s3": "3.635.0",
+    "@aws-sdk/s3-request-presigner": "3.635.0",
     "@babel/core": "7.25.2",
     "@babel/preset-env": "7.25.3",
     "@clustersxyz/sdk": "0.4.3",
@@ -22,7 +22,7 @@
     "@supabase/supabase-js": "2.45.1",
     "@tailwindcss/line-clamp": "0.4.4",
     "@tailwindcss/typography": "0.5.14",
-    "@tanstack/react-query": "5.51.24",
+    "@tanstack/react-query": "5.52.0",
     "@tiptap/core": "2.4.0",
     "@tiptap/extension-image": "2.4.0",
     "@tiptap/extension-link": "2.4.0",
@@ -34,7 +34,7 @@
     "@types/lodash": "4.17.7",
     "@types/node": "20.16.1",
     "@types/papaparse": "5.3.14",
-    "@types/react": "18.3.3",
+    "@types/react": "18.3.4",
     "@types/react-csv": "1.1.10",
     "@types/react-dom": "18.3.0",
     "@types/react-virtualized": "9.21.30",
@@ -43,7 +43,7 @@
     "@types/uuid": "10.0.0",
     "@typescript-eslint/parser": "7.18.0",
     "@vercel/node": "3.2.8",
-    "@wagmi/connectors": "5.1.6",
+    "@wagmi/connectors": "5.1.7",
     "@wagmi/core": "2.13.4",
     "autoprefixer": "10.4.20",
     "cheerio": "1.0.0",
@@ -55,7 +55,7 @@
     "ethers": "5.7.2",
     "frog": "0.11.4",
     "fuse.js": "7.0.0",
-    "hono": "4.5.6",
+    "hono": "4.5.7",
     "i18next": "23.14.0",
     "interweave": "13.1.0",
     "interweave-autolink": "5.1.1",
@@ -75,7 +75,7 @@
     "postcss-100vh-fix": "1.0.2",
     "rc-slider": "11.1.5",
     "react": "18.3.1",
-    "react-aria": "3.34.2",
+    "react-aria": "3.34.3",
     "react-confetti": "6.1.0",
     "react-countdown": "2.3.6",
     "react-csv": "2.2.2",
@@ -106,7 +106,7 @@
     "uuid": "10.0.0",
     "valibot": "0.38.0",
     "viem": "2.19.8",
-    "wagmi": "2.12.6",
+    "wagmi": "2.12.7",
     "webpack": "5.93.0",
     "zod": "3.23.8",
     "zustand": "4.5.5"