added gala demo

ATXDAO · Dec 9, 2023 · 8a26dd0 · 8a26dd0
1 parent 3df98b6
commit 8a26dd0
Show file tree

Hide file tree

Showing 20 changed files with 845 additions and 38 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -32,6 +32,11 @@ export const menuLinks: HeaderMenuLink[] = [
     href: "/hats-demo-day",
     icon: <SparklesIcon className="h-4 w-4" />,
   },
+  {
+    label: "Gala Rep Claim",
+    href: "/gala",
+    icon: <SparklesIcon className="h-4 w-4" />,
+  },
 ];
 
 export const HeaderMenuLinks = () => {

diff --git a/packages/nextjs/components/gala/ContractData.tsx b/packages/nextjs/components/gala/ContractData.tsx
@@ -0,0 +1,50 @@
+import Image from "next/image";
+import memberParty from "./assets/member-party.png";
+import { useClaimReputation, useGetRemainingTime } from "./hooks/CadentReputationDistributorHooks";
+import { useERC1155Information } from "./tokens/TokenInteractions";
+import { useAccount } from "wagmi";
+
+export const ContractData = () => {
+  const { address } = useAccount();
+
+  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/");
+
+  let remainingTimeOutput;
+  if (remainingTime !== undefined) {
+    if (remainingTime.toString() > "0") {
+      remainingTimeOutput = <span className="text-2xl text-white">Please check back later to redeem more tokens!</span>;
+    } else {
+      remainingTimeOutput = (
+        <button
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded my-1"
+          onClick={async () => {
+            await claimReputation();
+          }}
+        >
+          Claim 100 Tokens!
+        </button>
+      );
+    }
+  } else {
+    remainingTimeOutput = <div></div>;
+  }
+
+  return (
+    <>
+      <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] ">
+        <Image src={memberParty} alt="Image" width="800" height="800" />
+        <p className="text-2xl text-white">
+          Thank you for attending ATX DAOs Gala event. You can claim some Reputation Tokens as a thank you for your
+          attendance!
+        </p>
+        <p className="text-2xl text-white">You can claim some Reputation Tokens as a thank you for your attendance!</p>
+        {remainingTimeOutput}
+      </div>
+    </>
+  );
+};
diff --git a/packages/nextjs/components/gala/ContractInteraction.tsx b/packages/nextjs/components/gala/ContractInteraction.tsx
@@ -0,0 +1,90 @@
+// import { useState } from "react";
+// import { CopyIcon } from "./assets/CopyIcon";
+// import { DiamondIcon } from "./assets/DiamondIcon";
+// import { HareIcon } from "./assets/HareIcon";
+// import { ArrowSmallRightIcon, XMarkIcon } from "@heroicons/react/24/outline";
+// import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+
+// export const ContractInteraction = () => {
+//   const [visible, setVisible] = useState(true);
+//   const [newGreeting, setNewGreeting] = useState("");
+
+//   const { writeAsync, isLoading } = useScaffoldContractWrite({
+//     contractName: "YourContract",
+//     functionName: "setGreeting",
+//     args: [newGreeting],
+//     value: "0.01",
+//     onBlockConfirmation: txnReceipt => {
+//       console.log("📦 Transaction blockHash", txnReceipt.blockHash);
+//     },
+//   });
+
+//   return (
+//     <div className="flex bg-base-300 relative pb-10">
+//       <DiamondIcon className="absolute top-24" />
+//       <CopyIcon className="absolute bottom-0 left-36" />
+//       <HareIcon className="absolute right-0 bottom-24" />
+//       <div className="flex flex-col w-full mx-5 sm:mx-8 2xl:mx-20">
+//         <div className={`mt-10 flex gap-2 ${visible ? "" : "invisible"} max-w-2xl`}>
+//           <div className="flex gap-5 bg-base-200 bg-opacity-80 z-0 p-7 rounded-2xl shadow-lg">
+//             <span className="text-3xl">👋🏻</span>
+//             <div>
+//               <div>
+//                 In this page you can see how some of our <strong>hooks & components</strong> work, and how you can bring
+//                 them to life with your own design! Have fun and try it out!
+//               </div>
+//               <div className="mt-2">
+//                 Check out{" "}
+//                 <code className="italic bg-base-300 text-base font-bold [word-spacing:-0.5rem]">
+//                   packages / nextjs/pages / example-ui.tsx
+//                 </code>{" "}
+//                 and its underlying components.
+//               </div>
+//             </div>
+//           </div>
+//           <button
+//             className="btn btn-circle btn-ghost h-6 w-6 bg-base-200 bg-opacity-80 z-0 min-h-0 drop-shadow-md"
+//             onClick={() => setVisible(false)}
+//           >
+//             <XMarkIcon className="h-4 w-4" />
+//           </button>
+//         </div>
+
+//         <div className="flex flex-col mt-6 px-7 py-8 bg-base-200 opacity-80 rounded-2xl shadow-lg border-2 border-primary">
+//           <span className="text-4xl sm:text-6xl text-black">Set a Greeting_</span>
+
+//           <div className="mt-8 flex flex-col sm:flex-row items-start sm:items-center gap-2 sm:gap-5">
+//             <input
+//               type="text"
+//               placeholder="Write your greeting here"
+//               className="input font-bai-jamjuree w-full px-5 bg-[url('/assets/gradient-bg.png')] bg-[length:100%_100%] border border-primary text-lg sm:text-2xl placeholder-white uppercase"
+//               onChange={e => setNewGreeting(e.target.value)}
+//             />
+//             <div className="flex rounded-full border border-primary p-1 flex-shrink-0">
+//               <div className="flex rounded-full border-2 border-primary p-1">
+//                 <button
+//                   className="btn btn-primary rounded-full capitalize font-normal font-white w-24 flex items-center gap-1 hover:gap-2 transition-all tracking-widest"
+//                   onClick={() => writeAsync()}
+//                   disabled={isLoading}
+//                 >
+//                   {isLoading ? (
+//                     <span className="loading loading-spinner loading-sm"></span>
+//                   ) : (
+//                     <>
+//                       Send <ArrowSmallRightIcon className="w-3 h-3 mt-0.5" />
+//                     </>
+//                   )}
+//                 </button>
+//               </div>
+//             </div>
+//           </div>
+
+//           <div className="mt-4 flex gap-2 items-start">
+//             <span className="text-sm leading-tight">Price:</span>
+//             <div className="badge badge-warning">0.01 ETH + Gas</div>
+//           </div>
+//         </div>
+//       </div>
+//     </div>
+//   );
+// };
diff --git a/packages/nextjs/components/gala/assets/CopyIcon.tsx b/packages/nextjs/components/gala/assets/CopyIcon.tsx
@@ -0,0 +1,24 @@
+export const CopyIcon = ({ className }: { className: string }) => {
+  return (
+    <svg
+      className={className}
+      width="125"
+      height="117"
+      viewBox="0 0 125 117"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M124.054 21.9365H116.774V145.99H124.054V21.9365Z" fill="#B5B5B5" />
+      <path d="M116.774 14.6089H109.446V21.9372H116.774V14.6089Z" fill="#B5B5B5" />
+      <path d="M109.446 7.3291H102.165V14.6095H109.446V7.3291Z" fill="#B5B5B5" />
+      <path
+        d="M109.436 36.4979H102.155V29.2415H94.8749V21.9372H87.5466V14.6089H0V153.295H109.436V36.4979ZM102.155 145.991H7.28039V21.9372H72.9475V51.1066H102.165L102.155 145.991Z"
+        fill="#B5B5B5"
+      />
+      <path d="M102.165 0H7.28052V7.32828H102.165V0Z" fill="#B5B5B5" />
+      <path d="M87.5566 94.8843H21.8894V102.213H87.5566V94.8843Z" fill="#B5B5B5" />
+      <path d="M87.5566 65.7144H21.8894V72.9947H87.5566V65.7144Z" fill="#B5B5B5" />
+      <path d="M51.0588 36.4971H21.8894V43.8254H51.0588V36.4971Z" fill="#B5B5B5" />
+    </svg>
+  );
+};
diff --git a/packages/nextjs/components/gala/assets/DiamondIcon.tsx b/packages/nextjs/components/gala/assets/DiamondIcon.tsx
@@ -0,0 +1,40 @@
+export const DiamondIcon = ({ className }: { className: string }) => {
+  return (
+    <svg
+      className={className}
+      width="118"
+      height="162"
+      viewBox="0 0 118 162"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M117.274 107.499H109.563V115.21H117.274V107.499Z" fill="#B5B5B5" />
+      <path
+        d="M109.563 69.146H78.8706V38.4032H86.5311V30.7426H78.8706V23.0317H-5.59664V30.7426H-13.3075V38.4032H-20.9681V46.0637H-28.6286V53.7746H-36.3395V61.4351H-44V84.467H-36.3395V76.8065H2.06388V92.178H9.72439V107.499H17.4353V122.87H25.0958V138.242H32.8067V76.8065H63.4992V92.178H55.8387V107.499H48.1278V122.87H40.4672V138.242H32.8067V145.902H25.0958V153.613H32.8067V161.274H40.4672V153.613H48.1278V145.902H55.8387V138.242H63.4992V130.581H71.2101V122.87H78.8706V115.21H86.5311V107.499H94.242V99.8385H101.903V92.178H109.563V84.467H117.274V61.4351H109.563V69.146ZM63.4992 69.146H9.72439V61.4351H2.06388V30.7426H32.8067V38.4032H40.4672V46.0637H48.1278V53.7746H55.8387V61.4351H63.4992V69.146Z"
+        fill="#B5B5B5"
+      />
+      <path d="M109.563 130.581H101.902V138.242H109.563V130.581Z" fill="#B5B5B5" />
+      <path d="M109.563 53.7744H101.902V61.4349H109.563V53.7744Z" fill="#B5B5B5" />
+      <path d="M101.903 138.242H94.2422V145.902H101.903V138.242Z" fill="#B5B5B5" />
+      <path d="M101.903 122.871H94.2422V130.582H101.903V122.871Z" fill="#B5B5B5" />
+      <path d="M101.903 46.0635H94.2422V53.7744H101.903V46.0635Z" fill="#B5B5B5" />
+      <path
+        d="M94.2419 15.3711H86.531V23.0316H94.2419V30.7425H101.902V23.0316H109.563V15.3711H101.902V7.66016H94.2419V15.3711Z"
+        fill="#B5B5B5"
+      />
+      <path d="M94.2419 130.581H86.531V138.242H94.2419V130.581Z" fill="#B5B5B5" />
+      <path d="M94.2419 38.4033H86.531V46.0638H94.2419V38.4033Z" fill="#B5B5B5" />
+      <path d="M78.8705 153.613H71.21V161.274H78.8705V153.613Z" fill="#B5B5B5" />
+      <path d="M78.8705 0H71.21V7.66051H78.8705V0Z" fill="#B5B5B5" />
+      <path d="M32.8072 38.4033H25.0963V46.0638H32.8072V38.4033Z" fill="#B5B5B5" />
+      <path d="M32.8072 7.66016H25.0963V15.3711H32.8072V7.66016Z" fill="#B5B5B5" />
+      <path d="M25.0958 138.242H17.4353V145.902H25.0958V138.242Z" fill="#B5B5B5" />
+      <path d="M25.0958 46.0635H17.4353V53.7744H25.0958V46.0635Z" fill="#B5B5B5" />
+      <path d="M17.4353 130.581H9.72437V138.242H17.4353V130.581Z" fill="#B5B5B5" />
+      <path d="M17.4353 53.7744H9.72437V61.4349H17.4353V53.7744Z" fill="#B5B5B5" />
+      <path d="M9.72423 145.902H2.06372V153.613H9.72423V145.902Z" fill="#B5B5B5" />
+      <path d="M9.72423 122.871H2.06372V130.582H9.72423V122.871Z" fill="#B5B5B5" />
+      <path d="M2.06353 115.21H-5.59698V122.871H2.06353V115.21Z" fill="#B5B5B5" />
+    </svg>
+  );
+};
diff --git a/packages/nextjs/components/gala/assets/HareIcon.tsx b/packages/nextjs/components/gala/assets/HareIcon.tsx
@@ -0,0 +1,33 @@
+export const HareIcon = ({ className }: { className: string }) => {
+  return (
+    <svg
+      className={className}
+      width="159"
+      height="175"
+      viewBox="0 0 159 175"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M158.293 66.5229H149.998V83.166H141.649V74.8718H133.355V66.5229H149.998V58.2287H133.355V49.8799H125.061V83.166H116.712V91.4603H41.9002V83.166H33.5514V49.8799H25.2844V58.2287H8.61407V66.5229H25.2844V74.8718H16.9629V83.166H8.61407V66.5229H0.319824V91.4603H8.61407V99.8091H25.2844V157.978H33.5787V166.327H41.9275V174.621H116.739V166.327H125.088V157.978H133.383V99.8091H150.026V91.4603H158.32L158.293 66.5229ZM125.061 116.452H33.5514V108.103H125.061V116.452Z"
+        fill="#B5B5B5"
+      />
+      <path d="M125.061 41.5859H116.712V49.8802H125.061V41.5859Z" fill="#B5B5B5" />
+      <path d="M125.061 8.354H116.712V24.9425H125.061V8.354Z" fill="#B5B5B5" />
+      <path d="M116.712 24.9429H108.418V41.5859H116.712V24.9429Z" fill="#B5B5B5" />
+      <path d="M116.712 0.00537109H100.069V8.35419H116.712V0.00537109Z" fill="#B5B5B5" />
+      <path d="M108.418 58.2285H100.069V66.5228H108.418V58.2285Z" fill="#B5B5B5" />
+      <path d="M100.069 8.354H91.7745V24.9425H100.069V8.354Z" fill="#B5B5B5" />
+      <path d="M91.7745 24.9429H83.4802V33.2917H91.7745V24.9429Z" fill="#B5B5B5" />
+      <path d="M75.1317 83.166H83.4805V74.8718H91.7747V66.5229H66.8374V74.8718H75.1317V83.166Z" fill="#B5B5B5" />
+      <path d="M83.4808 33.2915H75.132V41.5858H83.4808V33.2915Z" fill="#B5B5B5" />
+      <path d="M75.1317 24.9429H66.8374V33.2917H75.1317V24.9429Z" fill="#B5B5B5" />
+      <path d="M66.8375 8.354H58.4886V24.9425H66.8375V8.354Z" fill="#B5B5B5" />
+      <path d="M58.4886 58.2285H50.1943V66.5228H58.4886V58.2285Z" fill="#B5B5B5" />
+      <path d="M58.4888 0.00537109H41.9003V8.35419H58.4888V0.00537109Z" fill="#B5B5B5" />
+      <path d="M50.1945 24.9429H41.9003V41.5859H50.1945V24.9429Z" fill="#B5B5B5" />
+      <path d="M41.8997 41.5859H33.5509V49.8802H41.8997V41.5859Z" fill="#B5B5B5" />
+      <path d="M41.8997 8.354H33.5509V24.9425H41.8997V8.354Z" fill="#B5B5B5" />
+    </svg>
+  );
+};
diff --git a/packages/nextjs/components/gala/assets/member-party.png b/packages/nextjs/components/gala/assets/member-party.png
diff --git a/packages/nextjs/components/gala/hooks/CadentReputationDistributorHooks.tsx b/packages/nextjs/components/gala/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;
+}
diff --git a/packages/nextjs/components/gala/hooks/hatsHooks.tsx b/packages/nextjs/components/gala/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);
+//     }
+// }