update attestation

Author: 0xKurt

packages/grant-explorer/src/assets/preview_alt_3.svg

@@ -165,7 +165,7 @@ export function MintProgressModalBodyHistory(
           impactImageCid={impactImageCid as string}
           attestationLink={attestationLink ?? ""}
           isShareButtonsAbove={false}
-          imageSize="size-[288px] sm:size-[400px]"
+          // imageSize="size-[288px] sm:size-[400px]"
         />
       ) : (
         <MintingProcessContent

packages/grant-explorer/src/features/attestations/MintProgressModalBody.tsx

@@ -33,8 +33,8 @@ export const PreviewFrame = ({
           backgroundSize: "cover",
           backgroundPosition: "center",
           backgroundRepeat: "no-repeat",
-          width: "400px",
-          height: "400px",
+          width: "690px",
+          height: "344px",
         }}
       ></div>
       <div className="flex flex-wrap gap-3 items-center mt-3   p-2">
@@ -142,7 +142,7 @@ import { ImageWithLoading } from "../common/components/ImageWithLoading";
 export const ImpactMintingSuccess = ({
   attestationLink,
   impactImageCid,
-  imageSize = "size-[400px]",
+  imageSize = "w-full max-w-[700px] relative",
   isShareButtonsAbove = true,
 }: {
   attestationLink: string;

packages/grant-explorer/src/features/attestations/MintYourImpactComponents.tsx

@@ -1,24 +1,50 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 
 export const ImageWithLoading = ({
   src,
-  sizeClass = "w-[400px] h-[400px]",
+  sizeClass = "size-[400px]",
   isLoading,
+  style,
+  onAspectRatioChange,
   ...props
 }: {
   src: string | undefined;
   sizeClass?: string;
   isLoading: boolean;
+  style?: React.CSSProperties;
+  onAspectRatioChange?: (ratio: string) => void;
 } & React.HTMLProps<HTMLDivElement>) => {
-  // Handle loading and blur states
+  const [aspectRatio, setAspectRatio] = useState("2/1");
   const loadingClass = isLoading ? "animate-pulse bg-gray-100" : "";
   const blurClass = !src ? "blur-[40px]" : "";
 
+  useEffect(() => {
+    if (src) {
+      const img = new Image();
+      img.onload = () => {
+        console.log("img.width", img.width);
+        console.log("img.height", img.height);
+
+        const ratio = `${img.width}/${img.height}`;
+        console.log("ratio", ratio);
+        setAspectRatio(ratio);
+        onAspectRatioChange?.(ratio);
+      };
+      img.src = src;
+    }
+  }, [src, onAspectRatioChange]);
+
   return (
     <div
       {...props}
-      className={`bg-cover bg-center bg-transparent  ${sizeClass} ${blurClass} ${loadingClass}`}
-      style={{ backgroundImage: `url("${src || ""}")` }} // Use src if available, otherwise keep it empty
+      className={`bg-cover bg-center bg-no-repeat bg-transparent ${sizeClass} ${blurClass} ${loadingClass}`}
+      style={{
+        backgroundImage: `url("${src || ""}")`,
+        aspectRatio,
+        objectFit: "contain",
+        height: "300px",
+        ...style,
+      }}
     />
   );
 };

packages/grant-explorer/src/features/common/components/ImageWithLoading.tsx

@@ -19,7 +19,7 @@ export function ViewAttestationImage({
 
   return (
     <ImageWithLoading
-      sizeClass="w-full max-w-[400px] aspect-square relative"
+      sizeClass="w-full max-w-[700px] relative"
       src={imageSrc}
       isLoading={isLoading}
     />

packages/grant-explorer/src/features/contributors/components/ViewAttestationModal/ViewAttestationImage.tsx

@@ -31,7 +31,7 @@ export function ViewAttestationModal({
 
   return (
     <Modal isOpen={isOpen} onClose={onClose}>
-      <div className="flex flex-col items-center gap-6 mx-auto w-full h-full overflow-x-auto max-w-full md:w-[625px]">
+      <div className="flex flex-col items-center gap-6 mx-auto w-full h-full overflow-x-auto max-w-full md:w-[725px]">
         <h2 className="text-black text-3xl sm:text-4xl md:text-5xl/[52px] text-center font-medium font-sans  text-[clamp(1.5rem, 2vw + 1rem, 2rem)]">
           {title}
         </h2>
@@ -40,7 +40,7 @@ export function ViewAttestationModal({
           onClick={() => window.open(transactionUrl, "_blank")}
         />
         <ImageWithLoading
-          sizeClass="w-full max-w-[400px] aspect-square relative"
+          sizeClass={`w-full max-w-[700px] relative`}
           src={imageSrc}
           isLoading={isLoading}
         />

packages/grant-explorer/src/features/contributors/components/ViewAttestationModal/ViewAttestationModal.tsx

@@ -193,7 +193,7 @@ export default function ThankYou() {
               <div className="w-full lg:w-1/2  ">
                 <div className="flex flex-col items-center justify-center">
                   {/* Main content */}
-                  <div className="w-full max-w-[800px] min-h-svh overflow-hidden bg-gradient-to-b from-[#EBEBEB] to-transparent rounded-t-[400px] flex flex-col items-center justify-center pt-20 px-4 mx-auto">
+                  <div className="w-full max-w-[900px] min-h-svh overflow-hidden bg-gradient-to-b from-[#EBEBEB] to-transparent rounded-t-[400px] flex flex-col items-center justify-center pt-20 px-4 mx-auto">
                     <div className="flex flex-col items-center">
                       <div className="relative max-w-[500px] z-10 text-center">
                         <h1 className="text-5xl mb-2 font-modern-era-bold">
@@ -222,7 +222,7 @@ export default function ThankYou() {
               </div>
             </div>
           ) : minted ? (
-            <div className="rounded-xl absolute top-20 flex flex-col items-center text-center gap-6 px-[64px] py-8 backdrop-blur-xl">
+            <div className="rounded-xl absolute top-20 flex flex-col items-center text-center gap-6 py-8 backdrop-blur-xl">
               <div className="flex flex-col gap-2">
                 <div className="relative text-center font-modern-era-medium text-[48px]/[52px]">
                   Your donation impact
@@ -235,7 +235,7 @@ export default function ThankYou() {
               </div>
               <ImpactMintingSuccess
                 impactImageCid={impactImageCid}
-                imageSize="size-[520px]"
+                imageSize="w-full max-w-[700px]"
                 attestationLink={attestationLink ?? ""}
               />
               <div className="flex flex-wrap gap-6 my-2 z-50">

packages/grant-explorer/src/features/round/ThankYou.tsx

@@ -59,6 +59,7 @@ export const useEASAttestation = (
       updateStatus(ProgressStatus.IS_SUCCESS);
       return attestationLink;
     } catch (error) {
+      console.error("Error in handleAttest", error);
       updateStatus(ProgressStatus.IS_ERROR);
     }
   };

packages/grant-explorer/src/hooks/attestations/useEASAttestation.ts

@@ -30,7 +30,7 @@ export const useGetAttestationData = (
 
       try {
         const response = await fetch(
-          `https://attestation.gitcoin.co/api/getAttestation`,
+          `https://gitcoin-server-api-git-card-update-grants-stack.vercel.app/api/getAttestation`,
           {
             method: "POST",
             headers: {