feat: implement signup with hats

packages/interface/package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@ethereum-attestation-service/eas-sdk": "^1.5.0",
+    "@hatsprotocol/sdk-v1-core": "^0.10.0",
     "@hookform/resolvers": "^3.3.4",
     "@nivo/boxplot": "^0.84.0",
     "@nivo/line": "^0.84.0",
@@ -64,9 +65,9 @@
     "siwe": "^2.1.4",
     "sonner": "^1.4.0",
     "superjson": "^2.2.1",
-    "tailwindcss": "^3.4.1",
     "tailwind-merge": "^2.2.1",
     "tailwind-variants": "^0.1.20",
+    "tailwindcss": "^3.4.1",
     "viem": "^2.7.15",
     "wagmi": "^2.9.8",
     "zod": "3.22.4"

packages/interface/src/contexts/Maci.tsx

@@ -12,13 +12,15 @@ import {
   genKeyPair,
   GatekeeperTrait,
   getGatekeeperTrait,
+  getHatsSingleGatekeeperData,
 } from "maci-cli/sdk";
 import React, { createContext, useContext, useCallback, useEffect, useMemo, useState } from "react";
 import { useAccount, useSignMessage } from "wagmi";
 
 import { config } from "~/config";
 import { useEthersSigner } from "~/hooks/useEthersSigner";
 import { api } from "~/utils/api";
+import { getHatsClient } from "~/utils/hatsProtocol";
 import { getSemaphoreProof } from "~/utils/semaphore";
 
 import type { IVoteArgs, MaciContextType, MaciProviderProps } from "./types";
@@ -122,6 +124,27 @@ export const MaciProvider: React.FC<MaciProviderProps> = ({ children }: MaciProv
         setSgData(attestationId);
         setIsLoading(false);
         break;
+      case GatekeeperTrait.Hats:
+        if (!signer) {
+          return;
+        }
+        getHatsSingleGatekeeperData({
+          maciAddress: config.maciAddress!,
+          signer,
+        }).then(({ criterionHat }) => {
+          // we need to check if we are allowed to signup
+          const hatsClient = getHatsClient();
+          hatsClient.isWearerOfHat({ wearer: address!, hatId: BigInt(criterionHat.at(0)!) }).then((res) => {
+            if (res) {
+              // we don't need any specific value here, as it will check based on the address
+              setSgData("0x0000000000000000000000000000000000000000000000000000000000000000");
+            } else {
+              setSgData(undefined);
+            }
+          });
+        });
+        setIsLoading(false);
+        break;
       default:
         break;
     }

packages/interface/src/utils/hatsProtocol.ts

@@ -0,0 +1,22 @@
+import { HatsClient } from "@hatsprotocol/sdk-v1-core";
+import { createPublicClient, http, type PublicClient } from "viem";
+
+import { config } from "~/config";
+
+/**
+ * Get an HatsClient instance to check whether the connected wallet owns the required hat
+ * @returns An HatsClient instance
+ */
+export const getHatsClient = (): HatsClient => {
+  const client = createPublicClient({
+    chain: config.network,
+    transport: http(),
+  });
+
+  const hatsClient = new HatsClient({
+    chainId: client.chain.id,
+    publicClient: client as unknown as PublicClient,
+  });
+
+  return hatsClient;
+};