Mint attestations bug fixes

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

@@ -25,6 +25,8 @@ type MintProgressModalBodyProps = {
   previewBackground?: string;
   selectedColor?: string;
   attestationFee: bigint;
+  heading?: string;
+  subheading?: string;
 };
 
 // MintProgressModalBodyThankYou component
@@ -39,6 +41,8 @@ export function MintProgressModalBodyThankYou(
     notEnoughFunds,
     handleAttest,
     isLoading,
+    heading,
+    subheading,
   } = props;
 
   const { address, isConnected } = useAccount();
@@ -49,7 +53,15 @@ export function MintProgressModalBodyThankYou(
   const { data: attestationFee } = useAttestationFee();
 
   return (
-    <div className="min-w-full min-h-full">
+    <div
+      className={`w-[450px] min-h-full flex flex-col justify-center text-black p-6 gap-8`}
+    >
+      <div className={`flex flex-col gap-2`}>
+        <div className={`text-3xl/[34px] font-modern-era-bold`}>{heading}</div>
+        <div className={`text-[16px]/[26px] font-modern-era-regular`}>
+          {subheading}
+        </div>
+      </div>
       <MintingProcessContent
         status={status}
         balance={balance?.value}
@@ -84,6 +96,8 @@ export function MintProgressModalBodyHistory(
     selectedColor,
     previewBackground,
     impactImageCid,
+    heading,
+    subheading,
   } = props;
 
   const [attestationLink, setAttestationLink] = useState<string | undefined>(
@@ -99,26 +113,41 @@ export function MintProgressModalBodyHistory(
     chainId: AttestationChainId,
     address,
   });
-  const [nextStep, setNextStep] = useState(false);
+
+  const isOnAction =
+    status !== ProgressStatus.SELECTING_COLOR &&
+    status !== ProgressStatus.IS_SUCCESS;
 
   return (
-    <div className="min-w-full min-h-full">
-      {!nextStep ? (
-        <div className="flex flex-col items-center justify-center">
-          <PreviewFrameHistoryPage
-            selectBackground={selectBackground as () => void}
-            nextStep={() => {
-              toggleStartAction?.();
-              setNextStep(true);
-            }}
-            previewBackground={previewBackground as string}
-            selectedColor={selectedColor as string}
-          />
+    <div
+      className={`min-w-full max-w-[710px] min-h-full flex flex-col justify-center text-black ${!isOnAction ? "p-10 items-center text-center gap-6" : "p-6 gap-8"}`}
+    >
+      <div className={`flex flex-col ${isOnAction ? "gap-2" : "gap-6"}`}>
+        <div
+          className={`${isOnAction ? "text-3xl/[34px]" : "text-5xl/[39px]"} font-modern-era-bold`}
+        >
+          {heading}
         </div>
+        <div
+          className={`${isOnAction ? "text-[16px]/[26px]" : "text-[20px]/[26px]"} font-modern-era-regular`}
+        >
+          {subheading}
+        </div>
+      </div>
+      {status === ProgressStatus.SELECTING_COLOR ? (
+        <PreviewFrameHistoryPage
+          selectBackground={selectBackground as () => void}
+          nextStep={() => {
+            toggleStartAction?.();
+          }}
+          previewBackground={previewBackground as string}
+          selectedColor={selectedColor as string}
+        />
       ) : status === ProgressStatus.IS_SUCCESS ? (
         <ImpactMintingSuccess
           impactImageCid={impactImageCid as string}
           attestationLink={attestationLink ?? ""}
+          isShareButtonsAbove={false}
         />
       ) : (
         <MintingProcessContent

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

@@ -259,56 +259,47 @@ export const PreviewFrameHistoryPage = ({
   const { defaultColor, colorMapper } = useColorAndBackground();
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex flex-col items-center gap-6">
       <div
         className="flex flex-col w-auto items-center relative rounded-3xl"
         style={{
           backgroundImage: `url(${previewBackground})`,
           backgroundSize: "cover",
           backgroundPosition: "center",
           backgroundRepeat: "no-repeat",
-          width: "300px",
-          height: "300px",
+          width: "400px",
+          height: "400px",
         }}
       ></div>
-      <div className="flex flex-wrap gap-3 items-center  p-2">
-        <div className="flex flex-col items-center">
-          <div className="flex flex-wrap items-center space-x-2 z-30">
-            <div className="text-2xl font-modern-era-regular">
-              Pick your color
-            </div>
-
-            {Object.keys(colorMapper).map((key, index) => (
-              <div
-                key={index}
-                onClick={() => selectBackground(key)}
-                className={`w-5 h-5 rounded-full cursor-pointer ${
-                  selectedColor === key ? "border-1 border-black" : ""
-                }`}
-                style={{
-                  backgroundColor:
-                    selectedColor === key
-                      ? colorMapper[key as unknown as keyof typeof colorMapper]
-                      : defaultColor,
-                }}
-              />
-            ))}
-          </div>
-          <div className="mt-2 z-40">
-            <div
-              className={`flex align-center justify-center border-[1px] rounded-[8px] bg-rainbow-gradient border-transparent`}
-            >
-              <Button
-                type="button"
-                className={`px-4 py-1 rounded-[8px] bg-white font-medium font-mono text-base text-black h-8 whitespace-nowrap border-[2px] border-transparent hover:shadow-md`}
-                onClick={nextStep}
-                data-testid="mint-donation-button"
-              >
-                Mint donation
-              </Button>
-            </div>
-          </div>
-        </div>
+      <div className="flex flex-wrap items-center space-x-2 z-30">
+        <div className="text-lg font-modern-era-regular">Pick your color</div>
+        {Object.keys(colorMapper).map((key, index) => (
+          <div
+            key={index}
+            onClick={() => selectBackground(key)}
+            className={`w-5 h-5 rounded-full cursor-pointer ${
+              selectedColor === key ? "border-1 border-black" : ""
+            }`}
+            style={{
+              backgroundColor:
+                selectedColor === key
+                  ? colorMapper[key as unknown as keyof typeof colorMapper]
+                  : defaultColor,
+            }}
+          />
+        ))}
+      </div>
+      <div
+        className={`flex align-center justify-center border-[1px] rounded-[8px] bg-rainbow-gradient border-transparent`}
+      >
+        <Button
+          type="button"
+          className={`px-4 py-1 rounded-[8px] bg-white font-medium font-mono text-base text-black h-8 whitespace-nowrap border-transparent hover:shadow-md`}
+          onClick={nextStep}
+          data-testid="mint-donation-button"
+        >
+          Mint your donation
+        </Button>
       </div>
     </div>
   );
@@ -358,43 +349,42 @@ export const HiddenAttestationFrame = ({
     </div>
   );
 };
-import bgImage from "../../assets/mint-your-impact-background.svg";
 import { ImageWithLoading } from "../common/components/ImageWithLoading";
 
 export const ImpactMintingSuccess = ({
   attestationLink,
   impactImageCid,
-  containerSize = "w-[430px] h-[430px]",
-  imageSize = "w-[400px] h-[400px]",
+  imageSize = "size-[400px]",
+  isShareButtonsAbove = true,
 }: {
   attestationLink: string;
   impactImageCid?: string;
-  containerSize?: string;
   imageSize?: string;
+  isShareButtonsAbove?: boolean;
 }) => {
   const {
     data: image,
     isLoading,
     isFetching,
   } = useGetImages(impactImageCid ? [impactImageCid] : [], !!impactImageCid);
 
-  return (
-    <div
-      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 ${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>
+  return isShareButtonsAbove ? (
+    <>
       <ShareButtons attestationLink={attestationLink} />
-    </div>
+      <ImageWithLoading
+        src={image?.[0]}
+        isLoading={isLoading || !image || !impactImageCid || isFetching}
+        sizeClass={imageSize}
+      />
+    </>
+  ) : (
+    <>
+      <ImageWithLoading
+        src={image?.[0]}
+        isLoading={isLoading || !image || !impactImageCid || isFetching}
+        sizeClass={imageSize}
+      />
+      <ShareButtons attestationLink={attestationLink} />
+    </>
   );
 };