[#522] chore: refactor pending transaction

govtool/frontend/.eslintrc.cjs

@@ -44,6 +44,7 @@ module.exports = {
     "no-nested-ternary": "off",
 
     "no-unused-vars": "off",
+    "no-use-before-define": "off",
     "comma-dangle": "off",
     "operator-linebreak": "off",
     "implicit-arrow-linebreak": "off",

govtool/frontend/src/App.tsx

@@ -30,14 +30,13 @@ import {
   removeItemFromLocalStorage,
 } from "@utils";
 import { SetupInterceptors } from "./services";
-import { useGetVoterInfo, useWalletConnectionListener } from "./hooks";
+import { useWalletConnectionListener } from "./hooks";
 import { RegisterAsSoleVoter } from "./pages/RegisterAsSoleVoter";
 import { CreateGovernanceAction } from "./pages/CreateGovernanceAction";
 
 export default () => {
-  const { enable, setVoter, setIsDrepLoading } = useCardano();
+  const { enable } = useCardano();
   const navigate = useNavigate();
-  const { data } = useGetVoterInfo();
   const { modal, openModal, modals } = useModal();
 
   useWalletConnectionListener();
@@ -46,14 +45,6 @@ export default () => {
     SetupInterceptors(navigate);
   }, []);
 
-  useEffect(() => {
-    setIsDrepLoading(true);
-    setVoter(data);
-    const timer = setTimeout(() => setIsDrepLoading(false), 1000);
-
-    return () => clearTimeout(timer);
-  }, [data?.isRegisteredAsDRep, data?.isRegisteredAsSoleVoter]);
-
   const checkTheWalletIsActive = useCallback(() => {
     const hrefCondition =
       window.location.pathname === PATHS.home ||
@@ -135,8 +126,8 @@ export default () => {
           handleClose={
             !modals[modal.type].preventDismiss
               ? callAll(modals[modal.type]?.onClose, () =>
-                  openModal({ type: "none", state: null }),
-                )
+                openModal({ type: "none", state: null }),
+              )
               : undefined
           }
         >

govtool/frontend/src/components/atoms/VotingPowerChips.tsx

@@ -6,31 +6,33 @@ import { useCardano } from "@context";
 import {
   useGetAdaHolderVotingPowerQuery,
   useGetDRepVotingPowerQuery,
+  useGetVoterInfo,
   useScreenDimension,
   useTranslation,
 } from "@hooks";
 import { correctAdaFormat } from "@utils";
 
 export const VotingPowerChips = () => {
-  const { voter, stakeKey, isDrepLoading } = useCardano();
-  const { dRepVotingPower, isDRepVotingPowerLoading } =
-    useGetDRepVotingPowerQuery();
-  const { votingPower, powerIsLoading } =
-    useGetAdaHolderVotingPowerQuery(stakeKey);
+  const { stakeKey, isEnableLoading } = useCardano();
+  const { dRepVotingPower } = useGetDRepVotingPowerQuery();
+  const { votingPower } = useGetAdaHolderVotingPowerQuery(stakeKey);
   const { isMobile, screenWidth } = useScreenDimension();
   const { t } = useTranslation();
+  const { voter } = useGetVoterInfo();
 
   return (
     <Box
-      bgcolor="black"
-      px={2}
-      py={isMobile ? 1 : 1.5}
-      display="flex"
-      border={isMobile ? 2 : 0}
-      borderColor="#FBFBFF"
-      borderRadius={100}
-      alignItems="center"
-      maxHeight={isMobile ? undefined : 48}
+      sx={{
+        alignItems: 'center',
+        bgcolor: 'textBlack',
+        border: isMobile ? 2 : 0,
+        borderColor: '#FBFBFF',
+        borderRadius: 100,
+        display: 'flex',
+        height: isMobile ? 16 : 24,
+        px: 2,
+        py: isMobile ? 1 : 1.5,
+      }}
     >
       {voter?.isRegisteredAsDRep && (
         <Tooltip
@@ -54,10 +56,11 @@ export const VotingPowerChips = () => {
           {t("votingPower")}
         </Typography>
       )}
-      {(voter?.isRegisteredAsDRep && isDRepVotingPowerLoading) ||
-      (!voter?.isRegisteredAsDRep && powerIsLoading) ||
-      isDrepLoading ? (
-        <CircularProgress size={20} color="primary" />
+      {(voter?.isRegisteredAsDRep && dRepVotingPower === undefined) ||
+        (!voter?.isRegisteredAsDRep && votingPower === undefined) ||
+        isEnableLoading ||
+        !voter ? (
+          <CircularProgress size={20} color="primary" />
       ) : (
         <Typography
           color="white"

govtool/frontend/src/components/molecules/VoteActionForm.tsx

@@ -4,8 +4,13 @@ import { Box, Link } from "@mui/material";
 
 import { Button, LoadingButton, Radio, Spacer, Typography } from "@atoms";
 import { ICONS } from "@consts";
-import { useCardano, useModal } from "@context";
-import { useScreenDimension, useVoteActionForm, useTranslation } from "@hooks";
+import { useModal } from "@context";
+import {
+  useScreenDimension,
+  useVoteActionForm,
+  useTranslation,
+  useGetVoterInfo,
+} from "@hooks";
 import { openInNewTab } from "@utils";
 
 import { ControlledField } from "../organisms";
@@ -25,8 +30,8 @@ export const VoteActionForm = ({
   const [isContext, setIsContext] = useState<boolean>(false);
   const { isMobile, screenWidth } = useScreenDimension();
   const { openModal } = useModal();
-  const { voter } = useCardano();
   const { t } = useTranslation();
+  const { voter } = useGetVoterInfo();
 
   const {
     areFormErrors,
@@ -74,28 +79,27 @@ export const VoteActionForm = ({
     [state],
   );
 
-  const renderChangeVoteButton = useMemo(
-    () => (
-      <LoadingButton
-        data-testid="change-vote"
-        onClick={confirmVote}
-        disabled={
-          (!areFormErrors && voteFromEP === vote) ||
-          areFormErrors ||
-          (!isContext && voteFromEP === vote)
-        }
-        isLoading={isVoteLoading}
-        variant="contained"
-        sx={{
-          borderRadius: 50,
-          textTransform: "none",
-          width: "100%",
-          height: 48,
-        }}
-      >
-        {t("govActions.changeVote")}
-      </LoadingButton>
-    ),
+  const renderChangeVoteButton = useMemo(() => (
+    <LoadingButton
+      data-testid="change-vote"
+      onClick={confirmVote}
+      disabled={
+        (!areFormErrors && voteFromEP === vote) ||
+        areFormErrors ||
+        (!isContext && voteFromEP === vote)
+      }
+      isLoading={isVoteLoading}
+      variant="contained"
+      sx={{
+        borderRadius: 50,
+        textTransform: 'none',
+        width: '100%',
+        height: 48,
+      }}
+    >
+      {t('govActions.changeVote')}
+    </LoadingButton>
+  ),
     [confirmVote, areFormErrors, vote, isVoteLoading],
   );
 
@@ -247,16 +251,16 @@ export const VoteActionForm = ({
         {t("govActions.selectDifferentOption")}
       </Typography>
       {(state?.vote && state?.vote !== vote) ||
-      (voteFromEP && voteFromEP !== vote) ? (
-        <Box
-          display="flex"
-          flexDirection={isMobile ? "column" : "row"}
-          justifyContent="space-between"
-        >
-          {isMobile ? renderChangeVoteButton : renderCancelButton}
-          <Box px={1} py={isMobile ? 1.5 : 0} />
-          {isMobile ? renderCancelButton : renderChangeVoteButton}
-        </Box>
+        (voteFromEP && voteFromEP !== vote) ? (
+          <Box
+            display="flex"
+            flexDirection={isMobile ? "column" : "row"}
+            justifyContent="space-between"
+          >
+            {isMobile ? renderChangeVoteButton : renderCancelButton}
+            <Box px={1} py={isMobile ? 1.5 : 0} />
+            {isMobile ? renderCancelButton : renderChangeVoteButton}
+          </Box>
       ) : (
         <LoadingButton
           data-testid="vote-button"