Feat/74/attestation component

.husky/pre-commit

@@ -0,0 +1,2 @@
+npm run lint
+npx tsc

package.json

@@ -6,17 +6,23 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "prepare": "husky"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
     "@ethereum-attestation-service/eas-sdk": "^2.7.0",
+    "@hookform/error-message": "^2.0.1",
+    "@mui/material": "^6.2.1",
     "@rainbow-me/rainbowkit": "^2.2.0",
     "@tanstack/react-query": "^5.61.0",
     "autoprefixer": "^10.4.20",
     "ethers": "^6.13.4",
     "next": "14.2.5",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.54.1",
     "viem": "^2.21.48",
     "wagmi": "^2.13.0"
   },
@@ -26,6 +32,7 @@
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
+    "husky": "^9.1.7",
     "postcss": "^8.4.47",
     "tailwindcss": "^3.4.14",
     "typescript": "^5"

src/components/Attestation/index.tsx

@@ -1,30 +1,21 @@
 "use client";
+
 import { Transaction } from "@ethereum-attestation-service/eas-sdk";
 import { useState } from "react";
-import { attestOnChain } from "@/utils/blockchain/connectToEAS";
-import { Button } from "../common/Button";
 import { ExternalLink } from "../common/ExternalLink";
+import { AttestationDialog } from "../AttestationDialog";
 
 export const AttestationSection = () => {
   const [attestationUid, setAttestationUid] = useState("");
   const [transactionData, setTransactionData] =
     useState<Transaction<string> | null>(null);
 
-  const attestationHandler = async () => {
-    try {
-      const res = await attestOnChain();
-      if (res) {
-        setAttestationUid(res.newAttestationUID);
-        setTransactionData(res.transaction);
-      }
-    } catch (e) {
-      console.log("Error trying to make attestation:", e);
-    }
-  };
-
   return (
     <section>
-      <Button onClick={attestationHandler}>Make attestation</Button>
+      <AttestationDialog
+        setAttestationUid={setAttestationUid}
+        setTransactionData={setTransactionData}
+      />
       {transactionData && (
         <div>
           View on BaseScan&nbsp;

src/components/AttestationDialog/index.tsx

@@ -0,0 +1,151 @@
+import { Button, ButtonVariant } from "@/components/common/Button";
+import { attestOnChain } from "@/utils/blockchain/connectToEAS";
+import Dialog from "@mui/material/Dialog";
+import { useForm, SubmitHandler } from "react-hook-form";
+import { ErrorMessage } from "@hookform/error-message";
+import { Dispatch, SetStateAction, useState } from "react";
+import { useAccount } from "wagmi";
+import { Transaction } from "@ethereum-attestation-service/eas-sdk";
+
+const formLabelClass = "title-small mb-6";
+const formParagraphClass = "my-2";
+const formSection = "my-6";
+
+type Inputs = {
+  collaborators: string;
+  contributonData: string;
+};
+
+interface Props {
+  setAttestationUid: Dispatch<SetStateAction<string>>;
+  setTransactionData: Dispatch<SetStateAction<Transaction<string> | null>>;
+}
+
+export const AttestationDialog: React.FC<Props> = ({
+  setAttestationUid,
+  setTransactionData,
+}) => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    trigger,
+    reset,
+  } = useForm<Inputs>();
+  const [open, setOpen] = useState(false);
+
+  const [isFormValid, setIsFormValid] = useState({
+    collaborators: false,
+    contributionData: false,
+  });
+  const { address, isConnected } = useAccount();
+
+  const onSubmit: SubmitHandler<Inputs> = async (data) => {
+    const res = await attestOnChain(data.collaborators, data.contributonData);
+
+    if (res) {
+      setAttestationUid(res.newAttestationUID);
+      setTransactionData(res.transaction);
+    }
+    reset();
+    handleClose();
+  };
+
+  const handleClickOpen = async () => {
+    setOpen(true);
+  };
+
+  const handleClose = () => {
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <Button onClick={handleClickOpen}>Make attestation</Button>
+      <Dialog open={open} onClose={handleClose}>
+        <form className="body-medium p-12" onSubmit={handleSubmit(onSubmit)}>
+          <aside className="body-small">ADD CONTRIBUTION</aside>
+          <div className={formSection}>
+            <label className={formLabelClass}>Project</label>
+            <p className={formParagraphClass}>Open to the Public</p>
+          </div>
+          <div className={formSection}>
+            <label className="title-small">Collaborators</label>
+            <p className={formParagraphClass}>
+              Tag a collaborator, using their ethereum address.
+            </p>
+            <input
+              {...register("collaborators", {
+                required: "This field is required.",
+                pattern: {
+                  value: /^0x[a-fA-F0-9]{40}$/,
+                  message: "Input must be an Ethereum address",
+                },
+              })}
+              className="w-full pl-6 py-2 border"
+              placeholder="0xabc123..."
+              onBlur={async () => {
+                const isCollaboratorsValid = await trigger("collaborators");
+                setIsFormValid((prevState) => ({
+                  ...prevState,
+                  ["collaborators"]: isCollaboratorsValid,
+                }));
+              }}
+            />
+            <ErrorMessage
+              errors={errors}
+              name="collaborators"
+              render={({ message }) => <p className="text-red">{message}</p>}
+            />
+          </div>
+          <div className={formSection}>
+            <label className={formLabelClass}>Contribution</label>
+            <p className={formParagraphClass}>
+              Described what you worked on together.
+            </p>
+            <textarea
+              {...register("contributonData", {
+                required: "This field is required.",
+              })}
+              className="w-full pl-6 py-2 border"
+              placeholder="Built"
+              onBlur={async () => {
+                const isContributionDataValid = await trigger(
+                  "contributonData"
+                );
+                setIsFormValid((prevState) => ({
+                  ...prevState,
+                  ["contributionData"]: isContributionDataValid,
+                }));
+              }}
+            />
+            <ErrorMessage
+              errors={errors}
+              name="contributonData"
+              render={({ message }) => <p className="text-red">{message}</p>}
+            />
+          </div>
+          {isConnected && (
+            <div className={formSection}>
+              <p className={formParagraphClass}>
+                You are attesting from Ethereum address: {address}
+              </p>
+            </div>
+          )}
+          <p>By attesting you are confirming onchain.</p>
+          <Button
+            className="float-right"
+            variant={
+              isFormValid.collaborators && isFormValid.contributionData
+                ? ButtonVariant.MAIN
+                : ButtonVariant.IDLE
+            }
+            type="submit"
+          >
+            Attest
+          </Button>
+        </form>
+      </Dialog>
+    </>
+  );
+};

src/components/common/Button/index.tsx

@@ -1,18 +1,30 @@
 import { ButtonHTMLAttributes, PropsWithChildren } from "react";
 
+export enum ButtonVariant {
+  MAIN = "main",
+  IDLE = "idle",
+}
+
 interface Props
   extends PropsWithChildren<ButtonHTMLAttributes<HTMLButtonElement>> {
+  variant?: ButtonVariant;
   className?: string;
 }
 
-export const Button: React.FC<Props> = ({ children, className, ...props }) => {
+const base = "text-center px-12 py-3" + " ";
+const main = base + "bg-black text-white";
+const idle = base + "bg-gray-100 text-gray-400 cursor-not-allowed";
+
+export const Button: React.FC<Props> = ({
+  children,
+  className,
+  variant,
+  ...props
+}) => {
+  const variantStyles = variant === ButtonVariant.IDLE ? idle : main;
+
   return (
-    <button
-      className={`bg-black text-center text-white px-12 py-3 ${
-        className || ""
-      }`}
-      {...props}
-    >
+    <button className={`${variantStyles} ${className || ""}`} {...props}>
       {children}
     </button>
   );

src/components/providers/WagmiProviderClient.tsx

@@ -7,14 +7,21 @@ import {
   lightTheme,
 } from "@rainbow-me/rainbowkit";
 import { WagmiProvider } from "wagmi";
-import { mainnet, polygon, optimism, arbitrum, base } from "wagmi/chains";
+import {
+  mainnet,
+  polygon,
+  optimism,
+  arbitrum,
+  base,
+  baseSepolia,
+} from "wagmi/chains";
 import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
 import { PropsWithChildren } from "react";
 
 const rainbowKitConfig = getDefaultConfig({
   appName: "OTTP",
   projectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID as string, // For wallet connect
-  chains: [mainnet, polygon, optimism, arbitrum, base],
+  chains: [mainnet, polygon, optimism, arbitrum, base, baseSepolia],
   ssr: true, // If your dApp uses server side rendering (SSR)
 });
 

src/utils/blockchain/connectToEAS.ts

@@ -26,7 +26,10 @@ export const initializeEAS = async () => {
   }
 };
 
-export const attestOnChain = async () => {
+export const attestOnChain = async (
+  recipient: string,
+  contributionData: string
+) => {
   try {
     if (window.ethereum) {
       const eas = new EAS(EASBaseSepoliaContractAddress);
@@ -44,18 +47,19 @@ export const attestOnChain = async () => {
       const encodedData = schemaEncoder.encodeData([
         { name: "fid", value: toBigInt(2), type: "uint256" },
         { name: "action", value: 1, type: "uint256" },
-        { name: "data", value: "Testdata", type: "string" },
+        { name: "data", value: contributionData, type: "string" },
         { name: "label", value: 2, type: "uint8" },
         { name: "tags", value: "0x3039", type: "bytes" },
       ]);
 
       const schemaUID =
         "0x9e17d50ab0011c5816db3d3eb79866f1cf66e2933e6ce76199679225ab6cd811";
 
+      // Test wallet "0x65E0b133e2e1A28B2aC5130E8E2588D209C084CF";
       const transaction = await eas.attest({
         schema: schemaUID,
         data: {
-          recipient: "0x0000000000000000000000000000000000000000",
+          recipient: recipient,
           expirationTime: NO_EXPIRATION,
           revocable: true,
           data: encodedData,
@@ -68,6 +72,10 @@ export const attestOnChain = async () => {
         newAttestationUID,
         transaction,
       };
+    } else {
+      console.error(
+        "No ethereum provider found. Please install one (Metamask,Phantom,etc.) "
+      );
     }
   } catch (e) {
     console.error(e);