cleaned up hats demo

packages/foundry/package.json

@@ -25,4 +25,4 @@
     "@types/prettier": "2",
     "@types/qrcode": "1"
   }
-}
+}

packages/nextjs/components/hats-demo-day/ContractData.tsx

@@ -1,3 +1,5 @@
+import { useClaimReputation, useGetRemainingTime } from "./hooks/CadentReputationDistributorHooks";
+import { useClaimHat, useHatsCanClaim, useHatsClient } from "./hooks/hatsHooks";
 import { useERC1155Information } from "./tokens/TokenInteractions";
 import { ImageProperties } from "./tokens/token-card/ImageCard";
 import { DefaultTokenGroupCard } from "./tokens/token-group-card/DefaultTokenGroupCard";
@@ -7,33 +9,20 @@ import {
   prettifyLoadingProps,
 } from "./tokens/token-group-card/TokenGroupCardConfig";
 import { useAccount } from "wagmi";
-import { useScaffoldContractRead, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 
 const hatId = "9921260784893851876474358771529355516659303059594999436885558443376640";
 
 export const ContractData = () => {
   const { address } = useAccount();
 
-  const { token0, token1 } = useERC1155Information(address);
-  const { writeAsync } = useScaffoldContractWrite({
-    contractName: "Hats",
-    functionName: "mintHat",
-    args: [BigInt(hatId), address],
-    blockConfirmations: 1,
-  });
-
-  const { data: remainingTime } = useScaffoldContractRead({
-    contractName: "CadentRepDistributor",
-    functionName: "getRemainingTime",
-    args: [address],
-  });
+  const { hatsClient } = useHatsClient(5);
+  const { canClaim, getCanClaim } = useHatsCanClaim(hatsClient, hatId, address);
+  const { claimHat } = useClaimHat(hatsClient, hatId, address);
 
-  const { writeAsync: writeClaimRep } = useScaffoldContractWrite({
-    contractName: "CadentRepDistributor",
-    functionName: "claim",
-    blockConfirmations: 1,
-  });
+  const remainingTime = useGetRemainingTime(address);
+  const claimReputation = useClaimReputation();
 
+  const { token0, token1 } = useERC1155Information(address);
   token0.image = token0.image?.replace("ipfs://", "https://ipfs.io/ipfs/");
   token1.image = token1.image?.replace("ipfs://", "https://ipfs.io/ipfs/");
 
@@ -47,12 +36,20 @@ export const ContractData = () => {
 
   let remainingTimeOutput;
   if (remainingTime !== undefined) {
-    if (remainingTime!.toString() > "0") {
+    if (remainingTime.toString() > "0") {
+      remainingTimeOutput = <span className="text-2xl text-white">Please check back later to redeem more tokens!</span>;
+    } else {
       remainingTimeOutput = (
-        <span className="text-2xl text-white">You can claim more rep in: {remainingTime?.toString()} seconds</span>
+        <button
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-1"
+          onClick={async () => {
+            await claimReputation();
+            await getCanClaim(hatsClient, hatId, address);
+          }}
+        >
+          Claim Rep
+        </button>
       );
-    } else {
-      remainingTimeOutput = <div></div>;
     }
   } else {
     remainingTimeOutput = <div></div>;
@@ -64,12 +61,6 @@ export const ContractData = () => {
         <p className="text-2xl text-white">Hats Demo Day</p>
 
         {remainingTimeOutput}
-        <button
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-1"
-          onClick={() => writeClaimRep()}
-        >
-          Claim Rep
-        </button>
 
         <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
           <div>
@@ -83,13 +74,19 @@ export const ContractData = () => {
             />
           </div>
         </div>
-
-        <button
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-1"
-          onClick={() => writeAsync()}
-        >
-          Mint Hat
-        </button>
+        {canClaim ? (
+          <button
+            className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-1"
+            onClick={async () => {
+              await claimHat();
+              await getCanClaim(hatsClient, hatId, address);
+            }}
+          >
+            Claim Hat
+          </button>
+        ) : (
+          <div></div>
+        )}
       </div>
     </>
   );

packages/nextjs/components/hats-demo-day/hooks/CadentReputationDistributorHooks.tsx

@@ -0,0 +1,21 @@
+import { useScaffoldContractRead, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+
+export function useGetRemainingTime(address?: string) {
+  const { data: remainingTime } = useScaffoldContractRead({
+    contractName: "CadentRepDistributor",
+    functionName: "getRemainingTime",
+    args: [address],
+  });
+
+  return remainingTime;
+}
+
+export function useClaimReputation() {
+  const { writeAsync: writeClaimRep } = useScaffoldContractWrite({
+    contractName: "CadentRepDistributor",
+    functionName: "claim",
+    blockConfirmations: 1,
+  });
+
+  return writeClaimRep;
+}

packages/nextjs/components/hats-demo-day/hooks/hatsHooks.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useState } from "react";
+import { HatsClient } from "@hatsprotocol/sdk-v1-core";
+import { PublicClient, WalletClient, usePublicClient, useWalletClient } from "wagmi";
+
+export function useHatsClient(chainId: number) {
+  const [hatsClient, setHatsClient] = useState<HatsClient>();
+
+  const { data: walletClient } = useWalletClient();
+  const publicClient = usePublicClient();
+
+  async function getHatsClient(walletClient: WalletClient, publicClient: PublicClient, chainId: number) {
+    const hatsClient = new HatsClient({
+      chainId,
+      publicClient,
+      walletClient,
+    });
+
+    setHatsClient(hatsClient);
+  }
+
+  useEffect(() => {
+    if (!walletClient) return;
+
+    getHatsClient(walletClient, publicClient, chainId);
+  }, [walletClient, publicClient, chainId]);
+
+  return { hatsClient, getHatsClient };
+}
+
+export function useHatsCanClaim(hatsClient: HatsClient | undefined, hatId: string, account: string | undefined) {
+  const [canClaim, setCanClaim] = useState(false);
+
+  async function getCanClaim(hatsClient: HatsClient | undefined, hatId: string, account: string | undefined) {
+    if (!hatsClient) return;
+
+    if (!account) return;
+
+    const canClaim = await hatsClient.accountCanClaim({
+      hatId: BigInt(hatId),
+      account,
+    });
+
+    setCanClaim(canClaim);
+  }
+
+  useEffect(() => {
+    getCanClaim(hatsClient, hatId, account);
+  }, [hatsClient, account, hatId]);
+
+  return { canClaim, getCanClaim };
+}
+
+export function useClaimHat(hatsClient: HatsClient | undefined, hatId: string, account: string | undefined) {
+  async function claimHat() {
+    if (!hatsClient) return;
+    if (!account) return;
+
+    await hatsClient.claimHat({
+      account,
+      hatId: BigInt(hatId),
+    });
+  }
+
+  return { claimHat };
+}
+
+// export function useHatsClientWrite(hatsClient: HatsClient, functionName: string, args: object[]) {
+//     async function clientWrite(hatsClient: HatsClient, functionName: string, args: object[]) {
+//         await hatsClient[functionName](args);
+//     }
+// }

packages/nextjs/components/hats-demo-day/tokens/TokenInteractions.tsx

@@ -28,32 +28,34 @@ export const useUri = (tokenId?: number) => {
 };
 
 export const useBalanceOf = (address?: string, tokenId?: number) => {
-  return useScaffoldContractRead({
+  const { data: balance } = useScaffoldContractRead({
     contractName: "RepTokensInstance",
     functionName: "balanceOf",
     args: [address, BigInt(Number(tokenId))],
   });
+
+  return balance;
 };
 
 export const useERC1155Information = (address?: string) => {
   const { data: uri0 } = useUri(0);
   const { data: uri1 } = useUri(1);
 
-  const { data: balanceOf0 } = useBalanceOf(address, 0);
-  const { data: balanceOf1 } = useBalanceOf(address, 1);
+  const balance0 = useBalanceOf(address, 0);
+  const balance1 = useBalanceOf(address, 1);
 
   const { data: json0 /* error: error0 */ } = useFetch<Nft>(uri0?.replace("ipfs://", "https://ipfs.io/ipfs/"));
   const { data: json1 /* error: error1 */ } = useFetch<Nft>(uri1?.replace("ipfs://", "https://ipfs.io/ipfs/"));
 
   return {
     token0: {
-      balance: balanceOf0,
+      balance: balance0,
       name: json0?.name,
       description: json0?.description,
       image: json0?.image,
     },
     token1: {
-      balance: balanceOf1,
+      balance: balance1,
       name: json1?.name,
       description: json1?.description,
       image: json1?.image,

packages/nextjs/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@ethersproject/providers": "~5.7.2",
+    "@hatsprotocol/sdk-v1-core": "^0.8.0",
     "@heroicons/react": "~2.0.11",
     "@rainbow-me/rainbowkit": "1.1.2",
     "@uniswap/sdk-core": "~4.0.1",
@@ -30,7 +31,7 @@
     "react-hot-toast": "~2.4.0",
     "use-debounce": "~8.0.4",
     "usehooks-ts": "~2.9.1",
-    "viem": "~1.16.6",
+    "viem": "^1.19.11",
     "wagmi": "1.4.4",
     "zustand": "~4.1.2"
   },