feat: add login modal

ui/summit-2024/src/common/api/voteService.ts

@@ -57,19 +57,22 @@ export const buildCanonicalVoteInputJson = ({
   });
 };
 
-const submitVoteWithDigitalSignature = async (jsonRequest: SignedWeb3Request, walletType: string) => {
+const submitVoteWithDigitalSignature = async (
+  jsonRequest: SignedWeb3Request,
+  walletType: string,
+) => {
   return await doRequest<Problem | Vote>(
-      HttpMethods.POST,
-      CAST_VOTE_URL,
-      DEFAULT_CONTENT_TYPE_HEADERS,
-      JSON.stringify({
-        ...jsonRequest,
-        walletType
-      }),
-      undefined,
-      true,
+    HttpMethods.POST,
+    CAST_VOTE_URL,
+    DEFAULT_CONTENT_TYPE_HEADERS,
+    JSON.stringify({
+      ...jsonRequest,
+      walletType,
+    }),
+    undefined,
+    true,
   );
-}
+};
 
 const getSlotNumber = async () => {
   return await doRequest<ChainTip>(

ui/summit-2024/src/components/Header/Header.tsx

@@ -18,6 +18,7 @@ import { RightMenu } from "./RightMenu/RightMenu";
 import theme from "../../common/styles/theme";
 import { useAppDispatch } from "../../store/hooks";
 import { resetUser } from "../../store/reducers/userCache";
+import {LoginModal} from "../LoginModal/LoginModal";
 
 const Header = () => {
   const dispatch = useAppDispatch();
@@ -267,6 +268,7 @@ const Header = () => {
           setShowConnectWalletModal(open ? open : false)
         }
       />
+      <LoginModal />
       <VerifyWalletModal />
       <Toast
         isOpen={toastOpen}

ui/summit-2024/src/components/LoginModal/LoginModal.tsx

@@ -0,0 +1,100 @@
+import React, {useEffect, useState} from "react";
+import { Box, Typography } from "@mui/material";
+import { CustomButton } from "../common/CustomButton/CustomButton";
+import Modal from "../common/Modal/Modal";
+import { useIsPortrait } from "../../common/hooks/useIsPortrait";
+import theme from "../../common/styles/theme";
+import {eventBus, EventName} from "../../utils/EventBus";
+
+const LoginModal: React.FC = () => {
+  const isMobile = useIsPortrait();
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+  const [isLogging, setIsLogging] = useState<boolean>(false);
+
+    useEffect(() => {
+        const openLoginModal = () => {
+            setIsOpen(true);
+        };
+        const closeVerifyWalletModal = () => {
+            setIsOpen(false);
+        };
+        eventBus.subscribe(EventName.OpenLoginModal, openLoginModal);
+        eventBus.subscribe(
+            EventName.CloseLoginModal,
+            closeVerifyWalletModal,
+        );
+
+        return () => {
+            eventBus.unsubscribe(
+                EventName.OpenLoginModal,
+                openLoginModal,
+            );
+            eventBus.unsubscribe(
+                EventName.CloseLoginModal,
+                closeVerifyWalletModal,
+            );
+        };
+    }, []);
+
+  const handleLogin = () => {
+    setIsLogging(true);
+  };
+  const handleCloseModal= () => {
+    setIsOpen(false);
+    setIsLogging(false);
+  };
+
+  return (
+    <>
+      <Modal
+        id="login-modal"
+        isOpen={isOpen}
+        name="login-modal"
+        title="Login"
+        onClose={() => handleCloseModal()}
+        width={isMobile ? "100%" : "450px"}
+      >
+        <Box
+          component="div"
+          sx={{
+            width: {
+              xs: "100%",
+              sm: "450px",
+            },
+            display: "flex",
+            justifyContent: "center",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          <Typography
+            sx={{
+              color: theme.palette.text.neutralLightest,
+              textAlign: "center",
+              fontSize: "16px",
+              fontStyle: "normal",
+              fontWeight: "500",
+              lineHeight: "24px",
+            }}
+          >
+            Login in order to see your vote receipts
+          </Typography>
+          <CustomButton
+            onClick={() => handleLogin()}
+            colorVariant="primary"
+            sx={{
+              minWidth: "256px",
+              mt: "50px",
+              mb: "20px",
+            }}
+            disabled={isLogging}
+          >
+            Login
+          </CustomButton>
+        </Box>
+      </Modal>
+    </>
+  );
+};
+
+export { LoginModal };

ui/summit-2024/src/components/VerifyWalletModal/VerifyWalletModal.tsx

@@ -213,8 +213,8 @@ const VerifyWalletModal = () => {
     );
 
     if ("error" in verifyDiscordResult && verifyDiscordResult.error) {
-        console.log("verifyDiscordResult");
-        console.log(verifyDiscordResult);
+      console.log("verifyDiscordResult");
+      console.log(verifyDiscordResult);
       eventBus.publish(
         "showToast",
         verifyDiscordResult.message || "Error while verifying",

ui/summit-2024/src/pages/Categories/Categories.tsx

@@ -144,8 +144,6 @@ const Categories: React.FC<CategoriesProps> = ({ embedded }) => {
   };
 
   const submitVote = async () => {
-
-    console.log("submitVote");
     if (eventCache?.finished) {
       eventBus.publish(EventName.ShowToast, "The event already ended", "error");
       return;
@@ -154,11 +152,6 @@ const Categories: React.FC<CategoriesProps> = ({ embedded }) => {
     const categoryId = categoryToRender?.id;
     const proposalId = nomineeToVote?.id;
 
-    console.log("categoryId");
-    console.log(categoryId);
-    console.log("proposalId");
-    console.log(proposalId);
-
     if (!categoryId || !proposalId) {
       eventBus.publish(EventName.ShowToast, "Nominee not selected", "error");
       return;
@@ -167,8 +160,6 @@ const Categories: React.FC<CategoriesProps> = ({ embedded }) => {
     try {
       // @ts-ignore
       const absoluteSlot = (await getSlotNumber())?.absoluteSlot;
-      console.log("absoluteSlot");
-      console.log(absoluteSlot);
       const canonicalVoteInput = buildCanonicalVoteInputJson({
         voteId: uuidv4(),
         categoryId: categoryId,
@@ -178,9 +169,6 @@ const Categories: React.FC<CategoriesProps> = ({ embedded }) => {
         slotNumber: absoluteSlot.toString(),
       });
 
-      console.log("canonicalVoteInput");
-      console.log(canonicalVoteInput);
-
       const requestVoteResult = await signWithWallet(
         canonicalVoteInput,
         connectedWallet.address,
@@ -196,29 +184,26 @@ const Categories: React.FC<CategoriesProps> = ({ embedded }) => {
         return;
       }
 
-      console.log("requestVoteResult");
-      console.log(requestVoteResult);
-
       const submitVoteResult = await submitVoteWithDigitalSignature(
         // @ts-ignore
         requestVoteResult.result,
-        resolveWalletType(connectedWallet.address)
+        resolveWalletType(connectedWallet.address),
       );
-      console.log("submitVoteResult");
-      console.log(submitVoteResult);
 
       // @ts-ignore
       if (submitVoteResult.error && submitVoteResult.message) {
         eventBus.publish(
           EventName.ShowToast,
-            // @ts-ignore
-            submitVoteResult.message || "Error while voting",
+          // @ts-ignore
+          submitVoteResult.message || "Error while voting",
           ToastType.Error,
         );
         return;
       }
       eventBus.publish(EventName.ShowToast, "Vote submitted successfully");
 
+      console.log("session");
+      console.log(session);
       if (session && !tokenIsExpired(session?.expiresAt)) {
         // @ts-ignore
         getVoteReceipt(categoryId, session?.accessToken)
@@ -254,6 +239,7 @@ const Categories: React.FC<CategoriesProps> = ({ embedded }) => {
             }
           });
       } else {
+        console.log("open login modal");
         eventBus.publish(
           EventName.OpenLoginModal,
           "Login to see your vote receipt.",