chore: finish previous store refactor

packages/react-app-revamp/components/Share/index.tsx

@@ -23,6 +23,11 @@ interface ShareDropdownProps {
 
 const ShareDropdown: FC<ShareDropdownProps> = ({ contestName, contestAddress, chain, onMenuStateChange }) => {
   const [isCopied, setIsCopied] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    onMenuStateChange?.(isOpen);
+  }, [isOpen, onMenuStateChange]);
 
   useEffect(() => {
     if (isCopied) {
@@ -42,8 +47,9 @@ const ShareDropdown: FC<ShareDropdownProps> = ({ contestName, contestAddress, ch
   return (
     <Menu as="div" className="relative inline-block text-left">
       {({ open }) => {
-        onMenuStateChange?.(open);
-
+        if (open !== isOpen) {
+          setIsOpen(open);
+        }
         return (
           <>
             <MediaQuery maxWidth={768}>

packages/react-app-revamp/components/Sort/index.tsx

@@ -26,6 +26,11 @@ const Sort: FC<SortProps> = ({ sortOptions, onSortChange, onMenuStateChange }) =
   const pathname = usePathname();
   const router = useRouter();
   const sortByFromQuery = query?.get("sortBy");
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    onMenuStateChange?.(isOpen);
+  }, [isOpen, onMenuStateChange]);
 
   useEffect(() => {
     if (sortByFromQuery) {
@@ -79,7 +84,9 @@ const Sort: FC<SortProps> = ({ sortOptions, onSortChange, onMenuStateChange }) =
   return (
     <Menu as="div" className="relative inline-block text-left w-full md:w-[220px] text-[16px]">
       {({ open }) => {
-        onMenuStateChange?.(open);
+        if (open !== isOpen) {
+          setIsOpen(open);
+        }
 
         return (
           <>

packages/react-app-revamp/components/TokenSearchModal/components/ChainDropdown/index.tsx

@@ -2,7 +2,7 @@ import { chainsImages } from "@config/wagmi";
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
-import { FC, Fragment, useState } from "react";
+import { FC, Fragment, useEffect, useState } from "react";
 
 export interface Option {
   value: string;
@@ -25,6 +25,11 @@ const TokenSearchModalChainDropdown: FC<ChainDropdownProps> = ({
   onMenuStateChange,
 }) => {
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    onMenuStateChange?.(isOpen);
+  }, [isOpen, onMenuStateChange]);
 
   const handleOptionClick = (option: Option) => {
     setSelectedOption(option);
@@ -43,7 +48,9 @@ const TokenSearchModalChainDropdown: FC<ChainDropdownProps> = ({
   return (
     <Menu as="div" className="relative inline-block text-left">
       {({ open }) => {
-        onMenuStateChange?.(open);
+        if (open !== isOpen) {
+          setIsOpen(open);
+        }
 
         return (
           <>

packages/react-app-revamp/components/_pages/Contest/Contest/index.tsx

@@ -12,9 +12,10 @@ import { useConnectModal } from "@rainbow-me/rainbowkit";
 import { useState } from "react";
 import { useMediaQuery } from "react-responsive";
 import { useAccount } from "wagmi";
+import { useShallow } from "zustand/react/shallow";
 import ContestPrompt from "../components/Prompt";
-import ProposalStatistics from "../components/ProposalStatistics";
 import ContestStickyCards from "../components/StickyCards";
+import ProposalStatistics from "../components/ProposalStatistics";
 
 const ContestTab = () => {
   const contestPrompt = useContestStore(state => state.contestPrompt);
@@ -26,14 +27,32 @@ const ContestTab = () => {
     currentUserQualifiedToSubmit,
     currentUserProposalCount,
     isCurrentUserSubmitQualificationLoading,
-  } = useUserStore(state => state);
-  const { isListProposalsLoading, isListProposalsSuccess } = useProposalStore(state => state);
+  } = useUserStore(
+    useShallow(state => ({
+      contestMaxNumberSubmissionsPerUser: state.contestMaxNumberSubmissionsPerUser,
+      currentUserQualifiedToSubmit: state.currentUserQualifiedToSubmit,
+      currentUserProposalCount: state.currentUserProposalCount,
+      isCurrentUserSubmitQualificationLoading: state.isCurrentUserSubmitQualificationLoading,
+    })),
+  );
+  const { isListProposalsLoading, isListProposalsSuccess } = useProposalStore(
+    useShallow(state => ({
+      isListProposalsLoading: state.isListProposalsLoading,
+      isListProposalsSuccess: state.isListProposalsSuccess,
+    })),
+  );
   const { isLoading: isContestLoading, isSuccess: isContestSuccess } = useContest();
   const {
     isModalOpen: isSubmitProposalModalOpen,
     setIsModalOpen: setIsSubmitProposalModalOpen,
     setIsSuccess: setIsSubmitProposalSuccess,
-  } = useSubmitProposalStore(state => state);
+  } = useSubmitProposalStore(
+    useShallow(state => ({
+      isModalOpen: state.isModalOpen,
+      setIsModalOpen: state.setIsModalOpen,
+      setIsSuccess: state.setIsSuccess,
+    })),
+  );
   const qualifiedToSubmit =
     currentUserQualifiedToSubmit && currentUserProposalCount < contestMaxNumberSubmissionsPerUser;
   const isMobile = useMediaQuery({ maxWidth: 768 });

packages/react-app-revamp/components/_pages/Contest/Parameters/index.tsx

@@ -53,7 +53,14 @@ const ContestParameters = () => {
     currentUserQualifiedToSubmit,
     currentUserAvailableVotesAmount,
     currentUserTotalVotesAmount,
-  } = useUserStore(state => state);
+  } = useUserStore(
+    useShallow(state => ({
+      contestMaxNumberSubmissionsPerUser: state.contestMaxNumberSubmissionsPerUser,
+      currentUserQualifiedToSubmit: state.currentUserQualifiedToSubmit,
+      currentUserAvailableVotesAmount: state.currentUserAvailableVotesAmount,
+      currentUserTotalVotesAmount: state.currentUserTotalVotesAmount,
+    })),
+  );
   const formattedSubmissionsOpen = moment(submissionsOpen).format("MMMM Do, h:mm a");
   const formattedVotesOpen = moment(votesOpen).format("MMMM Do, h:mm a");
   const formattedVotesClosing = moment(votesClose).format("MMMM Do, h:mm a");

packages/react-app-revamp/components/_pages/Contest/Rewards/components/Create/steps/CreatePool/components/Dropdown/index.tsx

@@ -20,6 +20,11 @@ const CreateRewardsPoolRecipientsDropdown: FC<CreateRewardsPoolRecipientsDropdow
   onMenuStateChange,
 }) => {
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    onMenuStateChange?.(isOpen);
+  }, [isOpen, onMenuStateChange]);
 
   useEffect(() => {
     setSelectedOption(defaultOption);
@@ -33,7 +38,9 @@ const CreateRewardsPoolRecipientsDropdown: FC<CreateRewardsPoolRecipientsDropdow
   return (
     <Menu as="div" className="relative inline-block">
       {({ open }) => {
-        onMenuStateChange?.(open);
+        if (open !== isOpen) {
+          setIsOpen(open);
+        }
 
         return (
           <>

packages/react-app-revamp/components/_pages/Contest/Rewards/index.tsx

@@ -52,7 +52,13 @@ const ContestRewards = () => {
   );
   const [isFundRewardsOpen, setIsFundRewardsOpen] = useState(false);
   const [isWithdrawRewardsOpen, setIsWithdrawRewardsOpen] = useState(false);
-  const rewardsStore = useRewardsStore(state => state);
+  const rewardsStore = useRewardsStore(
+    useShallow(state => ({
+      isLoading: state.isLoading,
+      isSuccess: state.isSuccess,
+      rewards: state.rewards,
+    })),
+  );
   const { getContestRewardsModule } = useRewardsModule();
   const { address: accountAddress } = useAccount();
   const creator = contestAuthorEthereumAddress === accountAddress;

packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/components/SortDropdown/index.tsx

@@ -1,6 +1,6 @@
 import { Menu, MenuButton, MenuItem, MenuItems, Transition } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
-import { FC, Fragment, useRef, useState } from "react";
+import { FC, Fragment, useEffect, useRef, useState } from "react";
 
 function classNames(...classes: string[]) {
   return classes.filter(Boolean).join(" ");
@@ -22,6 +22,11 @@ interface SortProposalsDropdownProps {
 const SortProposalsDropdown: FC<SortProposalsDropdownProps> = ({ defaultValue, onChange, onMenuStateChange }) => {
   const [selectedValue, setSelectedValue] = useState(defaultValue);
   const menuRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    onMenuStateChange?.(isOpen);
+  }, [isOpen, onMenuStateChange]);
 
   const handleSelectionChange = (value: string) => {
     setSelectedValue(value);
@@ -33,7 +38,9 @@ const SortProposalsDropdown: FC<SortProposalsDropdownProps> = ({ defaultValue, o
   return (
     <Menu as="div" className="relative inline-block text-left" ref={menuRef}>
       {({ open }) => {
-        onMenuStateChange?.(open);
+        if (open !== isOpen) {
+          setIsOpen(open);
+        }
 
         return (
           <>

packages/react-app-revamp/components/_pages/Contest/components/ProposalStatistics/index.tsx

@@ -1,14 +1,15 @@
+import { chains } from "@config/wagmi";
+import { extractPathSegments } from "@helpers/extractPath";
+import { useContestStore } from "@hooks/useContest/store";
+import { ContestStateEnum, useContestStateStore } from "@hooks/useContestState/store";
 import { ContestStatus } from "@hooks/useContestStatus/store";
 import useProposal from "@hooks/useProposal";
 import { SortOptions, useProposalStore } from "@hooks/useProposal/store";
+import { usePathname } from "next/navigation";
 import { FC, useMemo } from "react";
+import { useShallow } from "zustand/react/shallow";
 import ProposalStatisticsPanel from "./components/Panel";
 import SortProposalsDropdown from "./components/SortDropdown";
-import { ContestStateEnum, useContestStateStore } from "@hooks/useContestState/store";
-import { useContestStore } from "@hooks/useContest/store";
-import { usePathname } from "next/navigation";
-import { extractPathSegments } from "@helpers/extractPath";
-import { chains } from "@config/wagmi";
 
 interface ProposalStatisticsProps {
   contestStatus: ContestStatus;
@@ -19,9 +20,19 @@ const ProposalStatistics: FC<ProposalStatisticsProps> = ({ contestStatus, onMenu
   const asPath = usePathname();
   const { chainName, address } = extractPathSegments(asPath ?? "");
   const chainId = chains.filter(chain => chain.name.toLowerCase() === chainName.toLowerCase())[0]?.id;
-  const { sortBy, submissionsCount } = useProposalStore(state => state);
+  const { sortBy, submissionsCount } = useProposalStore(
+    useShallow(state => ({
+      sortBy: state.sortBy,
+      submissionsCount: state.submissionsCount,
+    })),
+  );
   const { sortProposalData } = useProposal();
-  const { contestAbi: abi, version } = useContestStore(state => state);
+  const { contestAbi: abi, version } = useContestStore(
+    useShallow(state => ({
+      contestAbi: state.contestAbi,
+      version: state.version,
+    })),
+  );
   const isSubmissionOrVotingOpen =
     contestStatus === ContestStatus.SubmissionOpen || contestStatus === ContestStatus.VotingOpen;
   const contestState = useContestStateStore(state => state.contestState);

packages/react-app-revamp/components/_pages/Contest/components/StickyCards/components/VotingQualifier/index.tsx

@@ -1,12 +1,8 @@
 /* eslint-disable react/no-unescaped-entities */
-import ButtonV3, { ButtonSize } from "@components/UI/ButtonV3";
 import { chains } from "@config/wagmi";
 import { extractPathSegments } from "@helpers/extractPath";
-import { useAccountChange } from "@hooks/useAccountChange";
-import { ContractConfig } from "@hooks/useContest";
 import { useContestStore } from "@hooks/useContest/store";
 import { useContestStatusStore } from "@hooks/useContestStatus/store";
-import useUser from "@hooks/useUser";
 import { useUserStore } from "@hooks/useUser/store";
 import { useConnectModal } from "@rainbow-me/rainbowkit";
 import Image from "next/image";
@@ -15,8 +11,8 @@ import Skeleton from "react-loading-skeleton";
 import { useMediaQuery } from "react-responsive";
 import { formatEther } from "viem";
 import { useAccount } from "wagmi";
-import VotingQualifierMessage from "./components/VotingQualifierMessage";
 import { useShallow } from "zustand/react/shallow";
+import VotingQualifierMessage from "./components/VotingQualifierMessage";
 
 const VotingContestQualifier = () => {
   const { anyoneCanVote, charge, isReadOnly } = useContestStore(
@@ -33,7 +29,14 @@ const VotingContestQualifier = () => {
     currentUserTotalVotesAmount,
     isCurrentUserVoteQualificationLoading,
     isCurrentUserVoteQualificationError,
-  } = useUserStore(state => state);
+  } = useUserStore(
+    useShallow(state => ({
+      currentUserAvailableVotesAmount: state.currentUserAvailableVotesAmount,
+      currentUserTotalVotesAmount: state.currentUserTotalVotesAmount,
+      isCurrentUserVoteQualificationLoading: state.isCurrentUserVoteQualificationLoading,
+      isCurrentUserVoteQualificationError: state.isCurrentUserVoteQualificationError,
+    })),
+  );
   const contestStatus = useContestStatusStore(state => state.contestStatus);
   const isMobile = useMediaQuery({ maxWidth: 768 });
   const costToVoteFormatted = formatEther(BigInt(charge?.type.costToVote ?? 0));

packages/react-app-revamp/components/_pages/Create/components/DefaultDropdown/index.tsx

@@ -24,6 +24,11 @@ const CreateDefaultDropdown: FC<CreateDefaultDropdownProps> = ({
   onMenuStateChange,
 }) => {
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    onMenuStateChange?.(isOpen);
+  }, [isOpen, onMenuStateChange]);
 
   useEffect(() => {
     setSelectedOption(defaultOption);
@@ -37,7 +42,9 @@ const CreateDefaultDropdown: FC<CreateDefaultDropdownProps> = ({
   return (
     <Menu as="div" className="relative inline-block">
       {({ open }) => {
-        onMenuStateChange?.(open);
+        if (open !== isOpen) {
+          setIsOpen(open);
+        }
 
         return (
           <>

packages/react-app-revamp/components/_pages/Create/components/TemplateDropdown/index.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import React, { FC, useEffect, useState } from "react";
 import { Menu, MenuButton, MenuItem, MenuItems } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/24/outline";
 import { TemplateType } from "../../templates/types";
@@ -23,6 +23,11 @@ const CreateTemplateDropdown: FC<CreateTemplateDropdownProps> = ({
   onMenuStateChange,
 }) => {
   const [selectedOption, setSelectedOption] = useState<TemplateOption | null>(null);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    onMenuStateChange?.(isOpen);
+  }, [isOpen, onMenuStateChange]);
 
   const handleOptionChange = (option: TemplateOption) => {
     setSelectedOption(option);
@@ -32,7 +37,9 @@ const CreateTemplateDropdown: FC<CreateTemplateDropdownProps> = ({
   return (
     <Menu as="div" className="relative inline-block w-full md:w-[240px]">
       {({ open }) => {
-        onMenuStateChange?.(open);
+        if (open !== isOpen) {
+          setIsOpen(open);
+        }
 
         return (
           <>

packages/react-app-revamp/components/_pages/Create/pages/ContestParams/components/Metadata/components/Dropdown/index.tsx

@@ -19,6 +19,11 @@ const ContestParamsMetadataFieldsDropdown: FC<ContestParamsMetadataFieldsDropdow
   onMenuStateChange,
 }) => {
   const [selectedOption, setSelectedOption] = useState<Option>(defaultOption);
+  const [isOpen, setIsOpen] = useState(false);
+
+  useEffect(() => {
+    onMenuStateChange?.(isOpen);
+  }, [isOpen, onMenuStateChange]);
 
   useEffect(() => {
     setSelectedOption(defaultOption);
@@ -32,7 +37,9 @@ const ContestParamsMetadataFieldsDropdown: FC<ContestParamsMetadataFieldsDropdow
   return (
     <Menu as="div" className="relative inline-block">
       {({ open }) => {
-        onMenuStateChange?.(open);
+        if (open !== isOpen) {
+          setIsOpen(open);
+        }
 
         return (
           <>

packages/react-app-revamp/components/_pages/DialogModalProposal/index.tsx

@@ -17,6 +17,7 @@ import { COMMENTS_VERSION, ProposalData } from "lib/proposal";
 import Image from "next/image";
 import { FC, useEffect } from "react";
 import { useAccount } from "wagmi";
+import { useShallow } from "zustand/react/shallow";
 import ListProposalVotes from "../ListProposalVotes";
 
 interface DialogModalProposalProps {
@@ -58,12 +59,17 @@ const DialogModalProposal: FC<DialogModalProposalProps> = ({
   const contestStatus = useContestStatusStore(state => state.contestStatus);
   const { isConnected } = useAccount();
   const { isSuccess } = useCastVotes();
-  const { listProposalsIds } = useProposalStore(state => state);
+  const listProposalsIds = useProposalStore(state => state.listProposalsIds);
   const stringifiedProposalsIds = listProposalsIds.map(id => id.toString());
   const currentIndex = stringifiedProposalsIds.indexOf(proposalId);
   const totalProposals = listProposalsIds.length;
   const downvotingAllowed = useContestStore(state => state.downvotingAllowed);
-  const { currentUserAvailableVotesAmount, currentUserTotalVotesAmount } = useUserStore(state => state);
+  const { currentUserAvailableVotesAmount, currentUserTotalVotesAmount } = useUserStore(
+    useShallow(state => ({
+      currentUserAvailableVotesAmount: state.currentUserAvailableVotesAmount,
+      currentUserTotalVotesAmount: state.currentUserTotalVotesAmount,
+    })),
+  );
   const outOfVotes = currentUserAvailableVotesAmount === 0 && currentUserTotalVotesAmount > 0;
   const commentsAllowed = compareVersions(contestInfo.version, COMMENTS_VERSION) == -1 ? false : true;