getting round names for attestation frame for thank you page

packages/grant-explorer/src/context/RoundContext.tsx

@@ -158,3 +158,43 @@ export const useRoundById = (
     getRoundByIdError: context.state.getRoundByIdError,
   };
 };
+
+import { useQuery } from "@tanstack/react-query";
+
+export const useRoundNamesByIds = (rounds: Record<number, string>) => {
+  const dataLayer = useDataLayer();
+
+  return useQuery({
+    queryKey: ["roundNamesByIds", rounds], // Query key
+    enabled: !!rounds && Object.keys(rounds).length > 0, // Only fetch if there are rounds
+    queryFn: async () => {
+      if (!rounds) {
+        return {};
+      }
+      // Create an empty object to store chainId -> roundId -> roundName
+      const roundNames: Record<number, Record<string, string>> = {};
+
+      await Promise.all(
+        Object.entries(rounds).map(async ([chainId, roundId]) => {
+          // If the name is missing, fetch the round data
+          const fetchedRound = (
+            await dataLayer.getRoundForExplorer({
+              roundId,
+              chainId: Number(chainId),
+            })
+          )?.round;
+
+          // Store the fetched round name in the result object
+          if (fetchedRound?.roundMetadata?.name) {
+            if (!roundNames[Number(chainId)]) {
+              roundNames[Number(chainId)] = {};
+            }
+            roundNames[Number(chainId)][roundId] =
+              fetchedRound.roundMetadata.name;
+          }
+        })
+      );
+      return roundNames;
+    },
+  });
+};

packages/grant-explorer/src/features/api/types.ts

@@ -85,10 +85,16 @@ export type AttestationProject = {
   round: string;
   image: string;
   amount?: number;
+  chainId?: number;
+  roundId?: string;
 };
 
 export type AttestationFrameProps = {
-  topRound: string;
+  topRound?: {
+    roundId: string;
+    chainId: number;
+  };
+  topRoundName?: string;
   projectsFunded: number;
   roundsSupported: number;
   checkedOutChains: number;

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

@@ -364,7 +364,7 @@ export const HiddenAttestationFrame = ({
         checkedOutChains={FrameProps.checkedOutChains}
         projectsFunded={FrameProps.projectsFunded}
         roundsSupported={FrameProps.roundsSupported}
-        topRound={FrameProps.topRound}
+        topRound={FrameProps.topRoundName ?? ""}
         address={address}
         ensName={name}
       />
@@ -376,8 +376,12 @@ import { ImageWithLoading } from "../common/components/ImageWithLoading";
 
 export const ImpactMintingSuccess = ({
   impactImageCid,
+  containerSize = "w-[430px] h-[430px]",
+  imageSize = "w-[400px] h-[400px]",
 }: {
   impactImageCid?: string;
+  containerSize?: string;
+  imageSize?: string;
 }) => {
   const {
     data: image,
@@ -390,11 +394,14 @@ export const ImpactMintingSuccess = ({
       className="flex flex-col items-center text-center w-full relative bg-bottom bg-cover "
       style={{ backgroundImage: `url(${bgImage})` }}
     >
-      <div className="flex flex-col items-center justify-center gap-4 px-8 py-6 bg-[#ffffff66] rounded-3xl w-[430px] h-[430px]">
+      <div
+        className={`flex flex-col items-center justify-center gap-4 px-8 py-6 bg-[#ffffff66] rounded-3xl ${containerSize}`}
+      >
         <div className="flex flex-col items-center justify-center w-full ">
           <ImageWithLoading
             src={image?.[0]}
             isLoading={isLoading || !image || !impactImageCid || isFetching}
+            sizeClass={imageSize}
           />
         </div>
       </div>

packages/grant-explorer/src/features/attestations/utils/getRoundsToFetchNames.ts

@@ -0,0 +1,15 @@
+import { AttestationFrameProps } from "../../api/types";
+
+export const getRoundsToFetchNames = (props: AttestationFrameProps) => {
+  if (props.projects.length === 0) {
+    return {};
+  }
+  const roundsToFetchNames: Record<number, string> = {};
+  props.projects.forEach((project) => {
+    roundsToFetchNames[project?.chainId ?? 0] = project.roundId ?? "";
+  });
+  roundsToFetchNames[props.topRound?.chainId ?? 0] =
+    props.topRound?.roundId ?? "";
+
+  return roundsToFetchNames;
+};

packages/grant-explorer/src/features/contributors/utils/getContributionFrameProps.ts

@@ -56,10 +56,24 @@ export const getContributionFrameProps = (
     )[0]?.roundName || "";
 
   return {
-    topRound,
+    topRoundName: topRound,
     projectsFunded: allProjects.length,
     roundsSupported: roundsSet.size,
     checkedOutChains: chainsSet.size,
     projects: topProjects,
   };
 };
+
+export const getRoundsToFetchNames = (props: AttestationFrameProps) => {
+  if (props.projects.length === 0) {
+    return {};
+  }
+  const roundsToFetchNames: Record<number, string> = {};
+  props.projects.forEach((project) => {
+    roundsToFetchNames[project?.chainId ?? 0] = project.roundId ?? "";
+  });
+  roundsToFetchNames[props.topRound?.chainId ?? 0] =
+    props.topRound?.roundId ?? "";
+
+  return roundsToFetchNames;
+};

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

@@ -6,16 +6,17 @@ import Navbar from "../common/Navbar";
 import { useCartStorage } from "../../store";
 import { useCheckoutStore } from "../../checkoutStore";
 import { ProgressStatus } from "../api/types";
-import { useRoundById } from "../../context/RoundContext";
+import { useRoundById, useRoundNamesByIds } from "../../context/RoundContext";
 import image from "../../assets/gitcoinlogo-black.svg";
 import alt1 from "../../assets/alt1.svg";
 import { useWindowSize } from "react-use";
-import { ShareButtons, ThankYouSectionButtons } from "../common/ShareButtons";
+import { ThankYouSectionButtons } from "../common/ShareButtons";
 import {
-  AttestationFrame,
   HiddenAttestationFrame,
+  ImpactMintingSuccess,
   PreviewFrame,
 } from "../attestations/MintYourImpactComponents";
+import { getRoundsToFetchNames } from "../attestations/utils/getRoundsToFetchNames";
 import MintAttestationProgressModal from "../attestations/MintAttestationProgressModal"; // Adjust the import path as needed
 import { MintProgressModalBodyThankYou } from "../attestations/MintProgressModalBody"; // We'll define this next
 import { useGetAttestationData } from "../../hooks/attestations/useGetAttestationData";
@@ -30,6 +31,7 @@ import {
   AttestationFee,
 } from "../attestations/utils/constants";
 import { ethers } from "ethers";
+import { useAttestationStore } from "../../attestationStore";
 
 export default function ThankYou() {
   datadogLogs.logger.info(
@@ -39,6 +41,7 @@ export default function ThankYou() {
 
   const cart = useCartStorage();
   const checkoutStore = useCheckoutStore();
+  const attestationStore = useAttestationStore();
 
   /** Fetch round data for tweet */
   const checkedOutProjects = useCheckoutStore((state) =>
@@ -100,48 +103,18 @@ export default function ThankYou() {
     window.scrollTo(0, 100);
   }, []);
 
-  // const transactions = useCheckoutStore((state) =>
-  //   state.getCheckedOutTransactions()
-  // );
-
-  // const ImpactFrameProps = useCheckoutStore((state) => {
-  //   return state.getFrameProps(transactions);
-  // });
-
-  // For testing out otherwise comment till transaction and uncomment the above { transactions } and { ImpactFrameProps }
-  const projectsData = [
-    {
-      rank: 1,
-      name: "Saving forests around the world",
-      round: "Climate Round",
-      image: image,
-    },
-    {
-      rank: 2,
-      name: "Funding schools in Mexico",
-      round: "Education Round",
-      image: image,
-    },
-    {
-      rank: 3,
-      name: "Accessible software for everyone",
-      round: "OSS Round",
-      image: image,
-    },
-  ];
-
-  const ImpactFrameProps = {
-    topRound: round?.roundMetadata?.name ?? "",
-    projectsFunded: 20,
-    roundsSupported: 5,
-    checkedOutChains: 6,
-    projects: projectsData,
-  };
+  const transactions = useAttestationStore((state) =>
+    state.getCheckedOutTransactions()
+  );
+
+  const ImpactFrameProps = useAttestationStore((state) => {
+    return state.getFrameProps(transactions);
+  });
+
+  const roundsToFetchName = getRoundsToFetchNames(ImpactFrameProps);
 
-  // For testing add one or multiple test transaction hash/es
-  const transactions = [
-    "0x9c058fb124c2899602f923afe8e4f61a86a4901435460272bf16939cfb719f3d",
-  ];
+  const { data: roundNames, isLoading: isLoadingRoundNames } =
+    useRoundNamesByIds(roundsToFetchName);
 
   const [minted, setMinted] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -158,7 +131,7 @@ export default function ThankYou() {
   const handleSetMinted = () => {
     setMinted(true);
     setIsModalOpen(false);
-    checkoutStore.cleanCheckedOutProjects();
+    attestationStore.cleanCheckedOutProjects();
   };
 
   const { width } = useWindowSize();
@@ -173,20 +146,21 @@ export default function ThankYou() {
     isModalOpen
   );
 
-  // const { data, isLoading, isRefetching } = useGetAttestationData(
-  //   transactions,
-  //   handleGetAttestationPreview,
-  //   isLoadingENS || isLoadingImages || !isModalOpen,
-  //   selectedBackground
-  // );
-
-  // For testing out otherwise comment and uncomment the above
   const { data, isLoading } = useGetAttestationData(
     transactions,
     handleGetAttestationPreview,
-    isLoadingENS,
+    isLoadingENS || isLoadingImages || !isModalOpen || isLoadingRoundNames,
     selectedBackground
   );
+
+  const [impactImageCid, setImpactImageCid] = useState<string | undefined>();
+
+  useEffect(() => {
+    if (data?.impactImageCid) {
+      setImpactImageCid(data.impactImageCid);
+    }
+  }, [data]);
+
   const frameId = ethers.utils.solidityKeccak256(["string[]"], [transactions]);
 
   const {
@@ -211,6 +185,24 @@ export default function ThankYou() {
       ? balance.value <= AttestationFee + gasEstimation
       : false;
 
+  const topRoundName = roundNames
+    ? roundNames[ImpactFrameProps?.topRound?.chainId ?? 0][
+        ImpactFrameProps?.topRound?.roundId ?? ""
+      ]
+    : "";
+
+  const ImpactFramePropsWithNames = {
+    ...ImpactFrameProps,
+    topRoundName,
+    projects: ImpactFrameProps.projects.map((project) => ({
+      ...project,
+      round: roundNames
+        ? (roundNames[project?.chainId ?? 0][project?.roundId ?? ""] ??
+          project.round)
+        : project.round,
+    })),
+  };
+
   return (
     <>
       <Navbar />
@@ -270,21 +262,14 @@ export default function ThankYou() {
                         Share with your friends!
                       </div>
                     </div>
-                    <AttestationFrame
-                      selectedBackground={selectedBackground}
-                      projects={ImpactFrameProps.projects}
-                      checkedOutChains={ImpactFrameProps.checkedOutChains}
-                      projectsFunded={ImpactFrameProps.projectsFunded}
-                      roundsSupported={ImpactFrameProps.roundsSupported}
-                      topRound={ImpactFrameProps.topRound}
-                      address={address}
-                      ensName={name}
-                      frameId={frameId}
+                    <ImpactMintingSuccess
+                      impactImageCid={impactImageCid}
+                      containerSize="w-[630px] h-[630px]"
+                      imageSize="w-[600px] h-[600px]"
                     />
                   </div>
                 </div>
               </div>
-              <ShareButtons />
             </div>
           ) : (
             <div className={`w-full h-full flex flex-col items-center`}>
@@ -321,7 +306,7 @@ export default function ThankYou() {
               }
             />
             <HiddenAttestationFrame
-              FrameProps={ImpactFrameProps}
+              FrameProps={ImpactFramePropsWithNames}
               selectedBackground={selectedBackground}
               address={address}
               name={name}