chore: check transaction minting in history page

packages/data-layer/src/data-layer.ts

@@ -26,7 +26,6 @@ import {
   ExpandedApplicationRef,
   RoundApplicationPayout,
   ProjectApplicationWithRoundAndProgram,
-  BaseDonorValues,
   DirectDonationValues,
 } from "./data.types";
 import {
@@ -61,6 +60,10 @@ import {
   getDirectDonationsByProjectId,
 } from "./queries";
 import { mergeCanonicalAndLinkedProjects } from "./utils";
+import {
+  AttestationService,
+  type MintingAttestationIdsData,
+} from "./services/AttestationService";
 
 /**
  * DataLayer is a class that provides a unified interface to the various data sources.
@@ -85,6 +88,8 @@ export class DataLayer {
   private collectionsSource: collections.CollectionsSource;
   private gsIndexerEndpoint: string;
 
+  private attestationService: AttestationService;
+
   constructor({
     fetch,
     search,
@@ -121,6 +126,8 @@ export class DataLayer {
         ? { type: "hardcoded" }
         : { type: "google-sheet", url: collections.googleSheetsUrl };
     this.gsIndexerEndpoint = indexer.baseUrl;
+
+    this.attestationService = new AttestationService(this.gsIndexerEndpoint);
   }
 
   /**
@@ -501,7 +508,7 @@ export class DataLayer {
       return [];
     }
 
-    const applicationToFilter = (r: ExpandedApplicationRef) => {
+    const applicationToFilter = (r: ExpandedApplicationRef): string => {
       return `{
         and: {
           chainId: { equalTo: ${r.chainId} }
@@ -570,8 +577,8 @@ export class DataLayer {
         projectId: a.project.id,
         name: a.project?.metadata?.title,
         websiteUrl: a.project?.metadata?.website,
-        logoImageCid: a.project?.metadata?.logoImg!,
-        bannerImageCid: a.project?.metadata?.bannerImg!,
+        logoImageCid: a.project?.metadata?.logoImg ?? null,
+        bannerImageCid: a.project?.metadata?.bannerImg ?? null,
         summaryText: a.project?.metadata?.description,
         payoutWalletAddress: a.metadata?.application?.recipient,
         createdAtBlock: 123,
@@ -709,6 +716,7 @@ export class DataLayer {
 
     const projects: Project[] = round.applications.flatMap((application) => {
       if (application.project === null) {
+        // eslint-disable-next-line no-console
         console.error(`Project not found for application ${application.id}`);
         return [];
       }
@@ -978,15 +986,25 @@ export class DataLayer {
     projectId: string;
     chainIds: number[];
   }): Promise<DirectDonationValues[]> {
-    const response: { rounds: { donations: DirectDonationValues[] }[] }  = await request(
-      this.gsIndexerEndpoint,
-      getDirectDonationsByProjectId,
-      { projectId, chainIds }
-    );
-  
+    const response: { rounds: { donations: DirectDonationValues[] }[] } =
+      await request(this.gsIndexerEndpoint, getDirectDonationsByProjectId, {
+        projectId,
+        chainIds,
+      });
+
     // Flatten the donations from all rounds into a single array
-    const allDonations = response.rounds.flatMap(round => round.donations);
-  
+    const allDonations = response.rounds.flatMap((round) => round.donations);
+
     return allDonations;
-  }  
+  }
+
+  async getMintingAttestationIdsByTransactionHash({
+    transactionHashes,
+  }: {
+    transactionHashes: string[];
+  }): Promise<MintingAttestationIdsData[]> {
+    return this.attestationService.getMintingAttestationIdsByTransactionHash({
+      transactionHashes,
+    });
+  }
 }

packages/data-layer/src/index.ts

@@ -3,4 +3,5 @@ export { useDataLayer, DataLayerContext, DataLayerProvider } from "./react";
 export * from "./openapi-search-client/models/index";
 export * from "./data.types";
 export * from "./roundApplication.types";
-export * from "./utils";
+export * from "./services/AttestationService/types";
+export * from "./utils";

packages/data-layer/src/services/AttestationService/AttestationService.ts

@@ -0,0 +1,39 @@
+import { gql, request } from "graphql-request";
+import { MintingAttestationIdsData } from "./types";
+
+export class AttestationService {
+  private gsIndexerEndpoint: string;
+
+  constructor(gsIndexerEndpoint: string) {
+    this.gsIndexerEndpoint = gsIndexerEndpoint;
+  }
+
+  async getMintingAttestationIdsByTransactionHash({
+    transactionHashes,
+  }: {
+    transactionHashes: string[];
+  }): Promise<MintingAttestationIdsData[]> {
+    const query = gql`
+      query getMintingAttestationIdsByTransactionHash(
+        $transactionHashes: [String!]!
+      ) {
+        attestationTxns(filter: { txnHash: { in: $transactionHashes } }) {
+          txnHash
+          attestationUid
+          attestationChainId
+          attestation {
+            metadata
+            timestamp
+          }
+        }
+      }
+    `;
+
+    const response: { attestationTxns: MintingAttestationIdsData[] } =
+      await request(this.gsIndexerEndpoint, query, {
+        transactionHashes,
+      });
+
+    return response.attestationTxns;
+  }
+}

packages/data-layer/src/services/AttestationService/index.ts

@@ -0,0 +1,2 @@
+export { AttestationService } from "./AttestationService";
+export * from "./types";

packages/data-layer/src/services/AttestationService/types.ts

@@ -0,0 +1,11 @@
+export type MintingAttestationIdsData = {
+  txnHash: string;
+  attestationUid: string;
+  attestationChainId: string;
+  attestation: {
+    metadata: {
+      impactImageCid: string;
+    }[];
+    timestamp: string;
+  };
+};

packages/data-layer/src/services/__tests__/AttestationService.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi } from "vitest";
+import { request } from "graphql-request";
+import { AttestationService } from "../AttestationService/AttestationService";
+import {
+  mockEmptyResponse,
+  mockEmptyTransactionHashes,
+  mockResponse,
+  mockTransactionHashes,
+} from "./mocks";
+
+// Mock the request function from graphql-request
+vi.mock("graphql-request", async () => {
+  const actual = await vi.importActual("graphql-request");
+  return {
+    ...(actual ?? {}),
+    request: vi.fn(), // Mock the request function
+  };
+});
+
+describe("AttestationService", () => {
+  const gsIndexerEndpoint = "http://mock-endpoint.com/graphql";
+  const service = new AttestationService(gsIndexerEndpoint);
+
+  it("should fetch and return minting attestation IDs", async () => {
+    // Mock the request function to return the mock response
+    (request as ReturnType<typeof vi.fn>).mockResolvedValue(mockResponse);
+
+    const result = await service.getMintingAttestationIdsByTransactionHash({
+      transactionHashes: mockTransactionHashes,
+    });
+
+    expect(request).toHaveBeenCalledWith(
+      gsIndexerEndpoint,
+      expect.any(String),
+      {
+        transactionHashes: mockTransactionHashes,
+      },
+    );
+    expect(result).toEqual(mockResponse.attestationTxns);
+  });
+
+  it("should fetch and return an empty array if transactionHashes is an empty array", async () => {
+    // Mock the request function to return the mock response
+    (request as ReturnType<typeof vi.fn>).mockResolvedValue(mockEmptyResponse);
+
+    const result = await service.getMintingAttestationIdsByTransactionHash({
+      transactionHashes: mockEmptyTransactionHashes,
+    });
+
+    expect(request).toHaveBeenCalledWith(
+      gsIndexerEndpoint,
+      expect.any(String),
+      {
+        transactionHashes: mockEmptyTransactionHashes,
+      },
+    );
+    expect(result).toEqual(mockEmptyResponse.attestationTxns);
+  });
+});

packages/data-layer/src/services/__tests__/mocks.ts

@@ -0,0 +1,25 @@
+export const mockTransactionHashes = ["hash1", "hash2"];
+export const mockResponse = {
+  attestationTxns: [
+    {
+      txnHash: "hash1",
+      attestationUid: "uid1",
+      attestationChainId: "chain1",
+    },
+    {
+      txnHash: "hash1",
+      attestationUid: "uid2",
+      attestationChainId: "chain1",
+    },
+    {
+      txnHash: "hash2",
+      attestationUid: "uid3",
+      attestationChainId: "chain2",
+    },
+  ],
+};
+
+export const mockEmptyTransactionHashes = [];
+export const mockEmptyResponse = {
+  attestationTxns: [],
+};

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

@@ -372,6 +372,7 @@ export const HiddenAttestationFrame = ({
   );
 };
 import bgImage from "../../assets/mint-your-impact-background.svg";
+import { ImageWithLoading } from "../common/components/ImageWithLoading";
 
 export const ImpactMintingSuccess = ({
   impactImageCid,
@@ -401,27 +402,3 @@ export const ImpactMintingSuccess = ({
     </div>
   );
 };
-
-// ImageWithLoading component
-const ImageWithLoading = ({
-  src,
-  sizeClass = "w-[400px] h-[400px]",
-  isLoading,
-  ...props
-}: {
-  src: string | undefined;
-  sizeClass?: string;
-  isLoading: boolean;
-} & React.HTMLProps<HTMLDivElement>) => {
-  // Handle loading and blur states
-  const loadingClass = isLoading ? "animate-pulse bg-gray-100" : "";
-  const blurClass = !src ? "blur-[40px]" : "";
-
-  return (
-    <div
-      {...props}
-      className={`bg-cover bg-center bg-gray-200 dark:bg-gray-800 ${sizeClass} ${blurClass} ${loadingClass}`}
-      style={{ backgroundImage: `url("${src || ""}")` }} // Use src if available, otherwise keep it empty
-    />
-  );
-};

packages/grant-explorer/src/features/common/components/ImageWithLoading.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+
+export const ImageWithLoading = ({
+  src,
+  sizeClass = "w-[400px] h-[400px]",
+  isLoading,
+  ...props
+}: {
+  src: string | undefined;
+  sizeClass?: string;
+  isLoading: boolean;
+} & React.HTMLProps<HTMLDivElement>) => {
+  // Handle loading and blur states
+  const loadingClass = isLoading ? "animate-pulse bg-gray-100" : "";
+  const blurClass = !src ? "blur-[40px]" : "";
+
+  return (
+    <div
+      {...props}
+      className={`bg-cover bg-center bg-gray-200 dark:bg-gray-800 ${sizeClass} ${blurClass} ${loadingClass}`}
+      style={{ backgroundImage: `url("${src || ""}")` }} // Use src if available, otherwise keep it empty
+    />
+  );
+};

packages/grant-explorer/src/features/common/components/Modal.tsx

@@ -0,0 +1,72 @@
+import { ReactNode } from "react";
+import { Dialog } from "@headlessui/react";
+import { XMarkIcon } from "@heroicons/react/24/outline";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  heading?: string;
+  subheading?: string;
+  body?: JSX.Element;
+  redirectUrl?: string;
+  children?: ReactNode;
+}
+
+export default function Modal({
+  isOpen,
+  onClose,
+  heading,
+  subheading,
+  body,
+  children,
+  ...props
+}: ModalProps) {
+  return (
+    <Dialog
+      as="div"
+      open={isOpen}
+      data-testid="modal-dialog"
+      className="fixed inset-0 z-40 flex items-center justify-center overflow-y-auto"
+      style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+      onClose={onClose}
+    >
+      <div className="flex items-center justify-center min-h-screen p-4">
+        <Dialog.Panel
+          className="relative bg-white rounded-3xl px-6 pt-5 pb-4 text-left shadow-xl transform transition-all sm:max-w-md w-full max-h-[90vh] overflow-x-auto overflow-y-auto"
+          style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+        >
+          <div
+            className={`flex ${
+              heading ? "justify-between" : "justify-end"
+            } items-center`}
+          >
+            {heading && (
+              <Dialog.Title className="text-lg font-modern-era-bold text-grey-500">
+                {heading}
+              </Dialog.Title>
+            )}
+            <button
+              type="button"
+              className="text-grey-400 hover:text-grey-500"
+              onClick={() => {
+                if (props.redirectUrl) {
+                  window.location.href = props.redirectUrl;
+                }
+                onClose();
+              }}
+            >
+              <XMarkIcon className="h-6 w-6" />
+            </button>
+          </div>
+          {subheading && (
+            <div className="mt-2">
+              <p className="text-sm font-mona text-grey-400">{subheading}</p>
+            </div>
+          )}
+          {body && <div className="mt-4">{body}</div>}
+          {children}
+        </Dialog.Panel>
+      </div>
+    </Dialog>
+  );
+}