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 (
-
- );
-};
-
type Project = {
rank: number;
name: string;
@@ -71,7 +40,7 @@ export const AttestationFrame = ({
void;
+ handleGetAttestationPreview: () => Promise
;
};
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 (
<>
@@ -130,26 +166,24 @@ export default function ThankYou() {
{/* Main content */}
-
- {!flex &&
}
-
-
-
- Mint your Impact
-
-
- Create a unique onchain collectible that
-
-
- shows off your donations from this round!
-
+
+
+
+
+ Mint your Impact
+
+
+ Create a unique onchain collectible that
+
+
+ shows off your donations from this round!
+
+
+
-
@@ -169,26 +203,7 @@ export default function ThankYou() {
}
+ body={
+
+ }
+ />
+
+
>
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
+) => {
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",
}