chore: added go to attestation transaction page functionality

packages/grant-explorer/src/features/attestations/utils/generateTransactionUrl.ts

@@ -0,0 +1,17 @@
+export const generateTransactionUrl = ({
+  chainId,
+  attestationUid,
+}: {
+  chainId?: number;
+  attestationUid?: string;
+}) => {
+  if (!chainId || !attestationUid) return "";
+  switch (chainId) {
+    case 11155111:
+      return `https://sepolia.easscan.org/attestation/view/${attestationUid}`;
+    case 42161:
+      return `https://arbitrum.easscan.org/attestation/view/${attestationUid}`;
+    default:
+      return "";
+  }
+};

packages/grant-explorer/src/features/contributors/components/Buttons/MintingActionButton.tsx

@@ -5,6 +5,7 @@ import useColorAndBackground from "../../../../hooks/attestations/useColorAndBac
 import { MintDonationButton } from "./MintDonationButton";
 import { MintDonationImpactAction } from "./MintDonationImpactAction";
 import { ViewAttestationModal } from "../ViewAttestationModal/ViewAttestationModal";
+import { generateTransactionUrl } from "../../../attestations/utils/generateTransactionUrl";
 
 export function MintingActionButton({
   transaction,
@@ -58,12 +59,19 @@ export function MintingActionButton({
     selectedBackground,
   } = useColorAndBackground();
 
+  const { attestationChainId: chainId, attestationUid = "" } =
+    attestation ?? {};
+
   return isMinted ? (
     <>
       <ViewAttestationModal
         isOpen={isOpen.viewAttestationModal}
         onClose={toggleViewAttestationModal}
         impactImageCid={impactImageCid}
+        transactionUrl={generateTransactionUrl({
+          attestationUid,
+          chainId: Number(chainId),
+        })}
       />
       <ViewAttestationButton onClick={toggleViewAttestationModal} />
     </>

packages/grant-explorer/src/features/contributors/components/ViewAttestationModal/ViewAttestationModal.tsx

@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import { useGetImages } from "../../../../hooks/attestations/useGetImages";
 import { ImageWithLoading } from "../../../common/components/ImageWithLoading";
 import Modal from "../../../common/components/Modal";
@@ -8,14 +9,14 @@ export type ViewAttestationModalProps = {
   isOpen: boolean;
   onClose: () => void;
   impactImageCid?: string;
-  onViewTransaction?: () => void;
+  transactionUrl?: string;
 };
 
 export function ViewAttestationModal({
   isOpen,
   onClose,
   impactImageCid,
-  onViewTransaction,
+  transactionUrl = "",
 }: ViewAttestationModalProps) {
   const {
     data: image,
@@ -33,7 +34,9 @@ export function ViewAttestationModal({
         <h2 className="text-black text-3xl sm:text-4xl md:text-5xl/[52px] text-center font-medium font-sans  text-[clamp(1.5rem, 2vw + 1rem, 2rem)]">
           {title}
         </h2>
-        <ViewTransactionButton onClick={onViewTransaction} />
+        <Link to={transactionUrl}>
+          <ViewTransactionButton disabled={!transactionUrl} />
+        </Link>
         <ImageWithLoading
           sizeClass="w-full max-w-[400px] aspect-square relative"
           src={imageSrc}

packages/grant-explorer/src/features/contributors/hooks/useMintingAttestations.tsx

@@ -1,9 +1,12 @@
 import { useMemo } from "react";
 
-import { useAccount } from "wagmi";
 import { MintingAttestationIdsData, useDataLayer } from "data-layer";
 import { useQuery, UseQueryResult } from "@tanstack/react-query";
-import { AttestationChainId, AttestationFee, FeeExemptAttestationsLimit } from "../../attestations/utils/constants";
+import {
+  AttestationChainId,
+  AttestationFee,
+  FeeExemptAttestationsLimit,
+} from "../../attestations/utils/constants";
 
 export type MintingAttestationsResponse = Omit<
   UseQueryResult<MintingAttestationIdsData[], Error>,
@@ -57,27 +60,27 @@ export const useMintingAttestations = (
 };
 
 export const useAttestationFee = () => {
-
   const dataLayer = useDataLayer();
 
   const exisitingAttestations = useQuery({
-    queryKey :[],
+    queryKey: [],
     queryFn: async () => {
       const response = await dataLayer.getAttestationCount({
-        attestationChainIds: [AttestationChainId]
+        attestationChainIds: [AttestationChainId],
       });
       return response;
     },
-  })
+  });
 
   const fee = useMemo<bigint>(() => {
     if (
       !exisitingAttestations.data ||
       exisitingAttestations.data >= FeeExemptAttestationsLimit
-    ) return AttestationFee;
+    )
+      return AttestationFee;
 
     return BigInt(0);
   }, [exisitingAttestations.data]);
 
   return { data: fee };
-};
+};