From b959ab32f0b28b6f3a37f5a92ca458ee70a2d343 Mon Sep 17 00:00:00 2001
From: nick-w3 <nicklioniss@gmail.com>
Date: Tue, 1 Oct 2024 21:58:56 +0300
Subject: [PATCH] ui-updates

---
 .../common/MintYourImpactComponents.tsx       |  34 +----
 .../features/round/MintProgressModalBody.tsx  |   7 +-
 .../src/features/round/ThankYou.tsx           | 124 ++++++++++++------
 .../attestations/useGetAttestationData.ts     |  13 +-
 4 files changed, 101 insertions(+), 77 deletions(-)

diff --git a/packages/grant-explorer/src/features/common/MintYourImpactComponents.tsx b/packages/grant-explorer/src/features/common/MintYourImpactComponents.tsx
index 3e84fa488..a2a731dbe 100755
--- a/packages/grant-explorer/src/features/common/MintYourImpactComponents.tsx
+++ b/packages/grant-explorer/src/features/common/MintYourImpactComponents.tsx
@@ -13,37 +13,6 @@ import preview_alt5 from "../../assets/preview_alt_5.svg";
 import React from "react";
 import { Button } from "common/src/styles";
 
-export const MintYourImpactShadowBg = () => {
-  return (
-    <svg
-      width="800"
-      height="790"
-      viewBox="0 0 800 790"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className="absolute my-auto mx-auto"
-    >
-      <path
-        d="M0 400C0 175 175 0 375 0H450C650 0 800 175 800 400V790H0V400Z"
-        fill="url(#paint0_linear_314_8370)"
-      />
-      <defs>
-        <linearGradient
-          id="paint0_linear_314_8370"
-          x1="400"
-          y1="0"
-          x2="400"
-          y2="790"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#EBEBEB" />
-          <stop offset="1" stopColor="#F1F1F1" stopOpacity="0" />
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-};
-
 type Project = {
   rank: number;
   name: string;
@@ -71,7 +40,7 @@ export const AttestationFrame = ({
     <div className="flex flex-col items-center">
       <div
         className="relative rounded-3xl overflow-hidden"
-        id="print"
+        id="attestation-impact-frame"
         style={{
           backgroundImage: `url(${selectedBackground})`,
           backgroundSize: "cover",
@@ -218,7 +187,6 @@ export const PreviewFrame = ({
     <div className="flex flex-col items-center">
       <div
         className="flex flex-col w-auto items-center relative rounded-3xl"
-        id="print"
         style={{
           backgroundImage: `url(${previewBackground})`,
           backgroundSize: "cover",
diff --git a/packages/grant-explorer/src/features/round/MintProgressModalBody.tsx b/packages/grant-explorer/src/features/round/MintProgressModalBody.tsx
index 18b592a24..de06ebf89 100755
--- a/packages/grant-explorer/src/features/round/MintProgressModalBody.tsx
+++ b/packages/grant-explorer/src/features/round/MintProgressModalBody.tsx
@@ -13,6 +13,7 @@ import { useGetAttestationData } from "../../hooks/attestations/useGetAttestatio
 
 type MintProgressModalBodyProps = {
   handleToggleModal: () => void;
+  handleGetAttestationPreview: () => Promise<string | undefined>;
 };
 
 function formatAmount(amount: bigint | undefined) {
@@ -22,6 +23,7 @@ function formatAmount(amount: bigint | undefined) {
 
 export function MintProgressModalBody({
   handleToggleModal,
+  handleGetAttestationPreview,
 }: MintProgressModalBodyProps) {
   // Update the chainId to the correct production chainId
   const chainId = 11155111;
@@ -29,7 +31,10 @@ export function MintProgressModalBody({
   const attestationFee = BigInt(0.001 * 10 ** 18);
   const { address } = useAccount();
 
-  const { data, isLoading } = useGetAttestationData(["0x1234567890"]);
+  const { data, isLoading } = useGetAttestationData(
+    ["0x1234567890"],
+    handleGetAttestationPreview
+  );
 
   const { handleAttest, handleSwitchChain, status, GasEstimation } =
     useEASAttestation(chainId, handleToggleModal, data);
diff --git a/packages/grant-explorer/src/features/round/ThankYou.tsx b/packages/grant-explorer/src/features/round/ThankYou.tsx
index 980b4b88e..09e61d903 100755
--- a/packages/grant-explorer/src/features/round/ThankYou.tsx
+++ b/packages/grant-explorer/src/features/round/ThankYou.tsx
@@ -10,11 +10,10 @@ import { useRoundById } from "../../context/RoundContext";
 import image from "../../assets/gitcoinlogo-black.svg";
 import alt1 from "../../assets/alt1.svg";
 import { useWindowSize } from "react-use";
-// import html2canvas from "html2canvas-pro";
+import html2canvas from "html2canvas-pro";
 import { ShareButtons, ThankYouSectionButtons } from "../common/ShareButtons";
 import {
   AttestationFrame,
-  MintYourImpactShadowBg,
   PreviewFrame,
 } from "../common/MintYourImpactComponents";
 import MintAttestationProgressModal from "../common/MintAttestationProgressModal"; // Adjust the import path as needed
@@ -62,6 +61,10 @@ export default function ThankYou() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    window.scrollTo(0, 100);
+  }, []);
+
   /** Fetch round data for tweet */
   const checkedOutProjects = useCheckoutStore((state) =>
     state.getCheckedOutProjects()
@@ -106,6 +109,39 @@ export default function ThankYou() {
 
   const flex = width <= 1280;
 
+  const handleGetAttestationPreview = async () => {
+    const element = document.getElementById("attestation-impact-frame");
+    if (element) {
+      const canvas = await html2canvas(element);
+      const data = canvas.toDataURL("image/png");
+      console.log(data);
+      return data;
+    }
+  };
+
+  // Mock data TODO: replace with real data Store the last
+  // attestation data based on the last created checkout transactions
+  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,
+    },
+  ];
+
   return (
     <>
       <Navbar />
@@ -130,26 +166,24 @@ export default function ThankYou() {
               <div className="w-full my-[5%] lg:w-1/2  ">
                 <div className="flex flex-col items-center justify-center">
                   {/* Main content */}
-                  <div
-                    className={`flex flex-col items-center text-center float-right ${flex && "bg-white"}`}
-                  >
-                    {!flex && <MintYourImpactShadowBg />}
-
-                    <div className="relative z-10 text-center mt-[15%]">
-                      <h1 className="text-5xl mb-2 font-modern-era-bold ">
-                        Mint your Impact
-                      </h1>
-                      <p className="mt-1 text-lg  font-modern-era-regular">
-                        Create a unique onchain collectible that
-                      </p>
-                      <p className="mb-2 text-lg font-modern-era-regular ">
-                        shows off your donations from this round!
-                      </p>
+                  <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="flex flex-col items-center">
+                      <div className="relative z-10 text-center">
+                        <h1 className="text-5xl mb-2 font-modern-era-bold">
+                          Mint your Impact
+                        </h1>
+                        <p className="mt-1 text-lg font-modern-era-regular">
+                          Create a unique onchain collectible that
+                        </p>
+                        <p className="mb-2 text-lg font-modern-era-regular">
+                          shows off your donations from this round!
+                        </p>
+                      </div>
+                      <PreviewFrame
+                        handleSelectBackground={handleSelectBackground}
+                        mint={mint}
+                      />
                     </div>
-                    <PreviewFrame
-                      handleSelectBackground={handleSelectBackground}
-                      mint={mint}
-                    />
                   </div>
                 </div>
               </div>
@@ -169,26 +203,7 @@ export default function ThankYou() {
                     </div>
                     <AttestationFrame
                       selectedBackground={selectedBackground}
-                      projects={[
-                        {
-                          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,
-                        },
-                      ]}
+                      projects={projectsData}
                       checkedOutChains={6}
                       projectsFunded={20}
                       roundsSupported={5}
@@ -211,7 +226,32 @@ export default function ThankYou() {
           onClose={mint}
           heading="Mint your impact"
           subheading="Your unique donation graphic will be generated after you mint."
-          body={<MintProgressModalBody handleToggleModal={handleToggleModal} />}
+          body={
+            <MintProgressModalBody
+              handleToggleModal={handleToggleModal}
+              handleGetAttestationPreview={handleGetAttestationPreview}
+            />
+          }
+        />
+      </div>
+      <div
+        id="hidden-attestation-frame"
+        style={{
+          position: "absolute",
+          top: "-9999px",
+          left: "-9999px",
+          width: "0",
+          height: "0",
+          overflow: "hidden",
+        }}
+      >
+        <AttestationFrame
+          selectedBackground={selectedBackground}
+          projects={projectsData}
+          checkedOutChains={6}
+          projectsFunded={20}
+          roundsSupported={5}
+          topRound={"OSS Round"}
         />
       </div>
     </>
diff --git a/packages/grant-explorer/src/hooks/attestations/useGetAttestationData.ts b/packages/grant-explorer/src/hooks/attestations/useGetAttestationData.ts
index ea3212925..98cde19c8 100644
--- a/packages/grant-explorer/src/hooks/attestations/useGetAttestationData.ts
+++ b/packages/grant-explorer/src/hooks/attestations/useGetAttestationData.ts
@@ -3,7 +3,10 @@ import { useQuery } from "@tanstack/react-query";
 /**
  * Hook to fetch attestation data based on a transaction hash.
  */
-export const useGetAttestationData = (transactionHashes: string[]) => {
+export const useGetAttestationData = (
+  transactionHashes: string[],
+  getFile: () => Promise<string | undefined>
+) => {
   return useQuery({
     queryKey: ["attestation", transactionHashes],
     queryFn: async () => {
@@ -11,6 +14,13 @@ export const useGetAttestationData = (transactionHashes: string[]) => {
         throw new Error("TransactionHashes are required");
       }
 
+      const image = await getFile();
+      console.log(image);
+
+      if (!image) {
+        throw new Error("Image is required");
+      }
+
       const hashesToUse = [
         "0x3e12de5018a441e56e460556f3583fa47eeabc4d547f2733457516dacd045186",
       ];
@@ -27,6 +37,7 @@ export const useGetAttestationData = (transactionHashes: string[]) => {
             body: JSON.stringify({
               transactionHashes: hashesToUse,
               chainId: chainIdToUse,
+              base64Image: image,
             }),
             mode: "cors",
           }