Merge pull request #9 from Vota-Protocol/register_ui

Register UI

packages/nextjs/.gitignore

@@ -30,6 +30,7 @@ yarn-error.log*
 .env.development.local
 .env.test.local
 .env.production.local
+.env.example
 
 # typescript
 *.tsbuildinfo

packages/nextjs/app/home/page.tsx

@@ -6,13 +6,18 @@ import HoverBorderCard from "~~/components/card/HoverBorderCard";
 import LoaderPage from "~~/components/loader/loader";
 import { listOfMockPolls } from "~~/components/poll/PollDataModel";
 import { usePollStore } from "~~/services/store/polldata_store";
+import useUserRegisteredStore from "~~/services/store/user_registered_store";
 
 const VoterPage = () => {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(true);
   const { pollData, setPollData } = usePollStore();
+  const { isRegistered } = useUserRegisteredStore();
 
   useEffect(() => {
+    if (!isRegistered) {
+      router.push("/register");
+    }
     setTimeout(() => {
       setPollData(listOfMockPolls);
       setIsLoading(false);

packages/nextjs/app/register/page.tsx

@@ -1,19 +1,29 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
 import { Keypair, PubKey } from "@se-2/hardhat/domainobjs";
 import { IDKitWidget, ISuccessResult } from "@worldcoin/idkit";
+import Lottie from "lottie-react";
 import { encodeAbiParameters, parseAbiParameters } from "viem";
-import { useAccount } from "wagmi";
+import { useAccount, useConnect } from "wagmi";
+import walletAnimation from "~~/components/assets/wallet.json";
+import walletConnectedAnimation from "~~/components/assets/wallet_connected.json";
+import worldCoinGif from "~~/components/assets/worldcoin.gif";
+import HoverBorderCard from "~~/components/card/HoverBorderCard";
 import { useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 import { decode } from "~~/lib/wld";
+import useUserRegisteredStore from "~~/services/store/user_registered_store";
 import { fetchOrCreateUserKeyPair } from "~~/utils/crypto";
 
 export default function RegisterPage() {
+  const router = useRouter();
   const { address } = useAccount();
   const [keypair, setKeyPair] = useState<Keypair | null>(null);
   const [proof, setProof] = useState<ISuccessResult | null>(null);
   const [encodedProof, setEncodedProof] = useState<`0x${string}` | undefined>();
+  const { setIsRegistered } = useUserRegisteredStore();
 
   useEffect(() => {
     setKeyPair(fetchOrCreateUserKeyPair(address));
@@ -53,6 +63,8 @@ export default function RegisterPage() {
     return { x: BigInt(p.x), y: BigInt(p.y) };
   }
 
+  const { connect, connectors } = useConnect();
+
   const { writeAsync } = useScaffoldContractWrite({
     contractName: "MACI",
     functionName: "signUp",
@@ -65,22 +77,49 @@ export default function RegisterPage() {
 
   useEffect(() => {
     writeAsync();
+    //TODO ; add a way to make it rgisteration true
+    setIsRegistered(true);
+    router.push("/home");
   }, [encodedProof]);
 
+  const style = {
+    height: 120,
+    width: 120,
+  };
+
   return (
-    <main>
-      {address ? (
+    <div className="flex flex-col bg-gradient-to-r from-[#181436] to-[#19244F] h-screen p-7">
+      <div>
+        <div className="mb-10">
+          <HoverBorderCard disabled={address != null} click={() => connect({ connector: connectors[0] })}>
+            <div className="flex justify-center w-full text-xl flex-col items-center">
+              <div className="my-2">{address ? "Wallet Connected" : "Connect to"}</div>
+              {address ? (
+                <Lottie animationData={walletConnectedAnimation} loop={false} style={style} />
+              ) : (
+                <Lottie animationData={walletAnimation} style={style} />
+              )}
+            </div>
+          </HoverBorderCard>
+        </div>
         <IDKitWidget
           signal={address}
           action="register"
           onSuccess={setProof}
           app_id={process.env.NEXT_PUBLIC_APP_ID! as `app_${string}`}
         >
-          {({ open }) => <button onClick={open}>verify with world id</button>}
+          {({ open }) => (
+            <div>
+              <HoverBorderCard click={open} disabled={address == null}>
+                <div className="flex justify-center w-full text-xl flex-col items-center ">
+                  Register with
+                  <Image className="rounded-full my-10" src={worldCoinGif} alt="my gif" height={100} width={100} />
+                </div>
+              </HoverBorderCard>
+            </div>
+          )}
         </IDKitWidget>
-      ) : (
-        <div>Connect First</div>
-      )}
-    </main>
+      </div>
+    </div>
   );
 }

packages/nextjs/components/card/HoverBorderCard.tsx

@@ -4,16 +4,22 @@ interface HoverBorderProps {
   children: React.ReactNode;
   showArrow?: boolean;
   click?: () => void;
+  disabled?: boolean;
 }
 
-const HoverBorderCard: React.FC<HoverBorderProps> = ({ children, showArrow = false, click }) => {
+const HoverBorderCard: React.FC<HoverBorderProps> = ({ children, showArrow = false, click, disabled = false }) => {
   return (
     <div
-      className={`p-5 border-2  border-transparent rounded-lg shadow  cursor-pointer 
-     bg-[#030710]
-     hover:bg-[#090F21] 
-     hover:border-[#3647A4] flex flex-row justify-between items-center`}
-      onClick={click}
+      className={`p-5 border-2  border-transparent rounded-lg shadow 
+      ${disabled ? "cursor-not-allowed opacity-70" : "cursor-pointer"} 
+      bg-[#030710]
+      hover:bg-[#090F21] 
+      hover:border-[#3647A4] flex flex-row justify-between items-center`}
+      onClick={() => {
+        if (!disabled && click) {
+          click();
+        }
+      }}
     >
       {children}
       {showArrow && (

packages/nextjs/services/store/user_registered_store.ts

@@ -0,0 +1,13 @@
+import create from "zustand";
+
+interface UserRegisteredStore {
+  isRegistered: boolean;
+  setIsRegistered: (data: boolean) => void;
+}
+
+const useUserRegisteredStore = create<UserRegisteredStore>(set => ({
+  isRegistered: true,
+  setIsRegistered: data => set({ isRegistered: data }),
+}));
+
+export default useUserRegisteredStore;