Skip to content

Commit

Permalink
ui-updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@nijoe1
nijoe1 committed Oct 1, 2024
1 parent 849c740 commit b959ab3
Show file tree
Hide file tree
Showing 4 changed files with 101 additions and 77 deletions.
34 changes: 1 addition & 33 deletions packages/grant-explorer/src/features/common/MintYourImpactComponents.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
7 changes: 6 additions & 1 deletion packages/grant-explorer/src/features/round/MintProgressModalBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { useGetAttestationData } from "../../hooks/attestations/useGetAttestatio

type MintProgressModalBodyProps = {
handleToggleModal: () => void;
handleGetAttestationPreview: () => Promise<string | undefined>;
};

function formatAmount(amount: bigint | undefined) {
Expand All @@ -22,14 +23,18 @@ function formatAmount(amount: bigint | undefined) {

export function MintProgressModalBody({
handleToggleModal,
handleGetAttestationPreview,
}: MintProgressModalBodyProps) {
// Update the chainId to the correct production chainId
const chainId = 11155111;
// Update the attestationFee to the correct production attestationFee
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);
Expand Down
124 changes: 82 additions & 42 deletions packages/grant-explorer/src/features/round/ThankYou.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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 />
Expand All @@ -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>
Expand All @@ -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}
Expand All @@ -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>
</>
Expand Down
13 changes: 12 additions & 1 deletion packages/grant-explorer/src/hooks/attestations/useGetAttestationData.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,24 @@ 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 () => {
if (!transactionHashes) {
throw new Error("TransactionHashes are required");
}

const image = await getFile();
console.log(image);

if (!image) {
throw new Error("Image is required");
}

const hashesToUse = [
"0x3e12de5018a441e56e460556f3583fa47eeabc4d547f2733457516dacd045186",
];
Expand All @@ -27,6 +37,7 @@ export const useGetAttestationData = (transactionHashes: string[]) => {
body: JSON.stringify({
transactionHashes: hashesToUse,
chainId: chainIdToUse,
base64Image: image,
}),
mode: "cors",
}
Expand Down

0 comments on commit b959ab3

Please sign in to comment.