fix/73-strange-governance-actions-appear

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

@@ -14,7 +14,7 @@ import { tooltips } from "@/consts/texts";
 
 export const VotingPowerChips = () => {
   const { dRep, stakeKey, isDrepLoading } = useCardano();
-  const { data: drepVotingPower, isLoading: drepPowerIsLoading } =
+  const { dRepVotingPower, isDRepVotingPowerLoading } =
     useGetDRepVotingPowerQuery();
   const { votingPower, powerIsLoading } =
     useGetAdaHolderVotingPowerQuery(stakeKey);
@@ -54,7 +54,7 @@ export const VotingPowerChips = () => {
           Voting power:
         </Typography>
       )}
-      {(dRep?.isRegistered && drepPowerIsLoading) ||
+      {(dRep?.isRegistered && isDRepVotingPowerLoading) ||
       (!dRep?.isRegistered && powerIsLoading) ||
       isDrepLoading ? (
         <CircularProgress size={20} color="primary" />
@@ -67,7 +67,7 @@ export const VotingPowerChips = () => {
         >
           ₳{" "}
           {dRep?.isRegistered
-            ? correctAdaFormat(drepVotingPower) ?? 0
+            ? correctAdaFormat(dRepVotingPower) ?? 0
             : correctAdaFormat(votingPower) ?? 0}
         </Typography>
       )}

govtool/frontend/src/components/organisms/DashboardCards.tsx

@@ -11,17 +11,17 @@ import { correctAdaFormat, formHexToBech32, openInNewTab } from "@utils";
 
 export const DashboardCards = () => {
   const {
-    dRepIDBech32: drepId,
-    dRepID,
-    dRep,
-    stakeKey,
-    buildSignSubmitConwayCertTx,
-    delegateTransaction,
     buildDRepRetirementCert,
-    registerTransaction,
+    buildSignSubmitConwayCertTx,
     delegateTo,
-    isPendingTransaction,
+    delegateTransaction,
+    dRep,
+    dRepID,
+    dRepIDBech32,
     isDrepLoading,
+    isPendingTransaction,
+    registerTransaction,
+    stakeKey,
   } = useCardano();
   const navigate = useNavigate();
   const { currentDelegation, isCurrentDelegationLoading } =
@@ -120,7 +120,7 @@ export const DashboardCards = () => {
         </>
       );
     }
-  }, [currentDelegation, drepId, votingPower]);
+  }, [currentDelegation, dRepID, votingPower]);
 
   const delegationStatusTestForId = useMemo(() => {
     if (currentDelegation === dRepID) {
@@ -134,7 +134,7 @@ export const DashboardCards = () => {
     } else {
       return "not_delegated";
     }
-  }, [currentDelegation, drepId, votingPower]);
+  }, [currentDelegation, dRepID, votingPower]);
 
   const progressDescription = useMemo(() => {
     const correctAdaRepresentation = (
@@ -174,7 +174,7 @@ export const DashboardCards = () => {
         </>
       );
     }
-  }, [delegateTo, votingPower]);
+  }, [delegateTo, dRepID, votingPower]);
 
   const navigateTo = useCallback(
     (path: string) => {
@@ -341,7 +341,7 @@ export const DashboardCards = () => {
               : "outlined"
           }
           dataTestidSecondButton={
-            dRep?.isRegistered && drepId
+            dRep?.isRegistered
               ? "change-metadata-button"
               : "register-learn-more-button"
           }
@@ -376,7 +376,7 @@ export const DashboardCards = () => {
           secondButtonAction={
             registerTransaction?.transactionHash
               ? () => openInNewTab("https://adanordic.com/latest_transactions")
-              : dRep?.isRegistered && drepId
+              : dRep?.isRegistered
               ? () => {
                   navigateTo(PATHS.updateMetadata);
                 }
@@ -392,7 +392,7 @@ export const DashboardCards = () => {
               ? "Change metadata"
               : "Learn more"
           }
-          cardId={dRep?.isRegistered || dRep?.wasRegistered ? drepId : ""}
+          cardId={dRep?.isRegistered || dRep?.wasRegistered ? dRepIDBech32 : ""}
           cardTitle={
             dRep?.isRegistered || dRep?.wasRegistered ? "My DRep ID" : ""
           }

govtool/frontend/src/components/organisms/DashboardGovernanceActions.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from "react";
-import { Box, Tab, Tabs, styled } from "@mui/material";
+import { Box, CircularProgress, Tab, Tabs, styled } from "@mui/material";
 import { useLocation } from "react-router-dom";
 
 import { useCardano } from "@context";
@@ -65,7 +65,7 @@ export const DashboardGovernanceActions = () => {
     state && state.isVotedListOnLoad ? 1 : 0
   );
 
-  const { dRep } = useCardano();
+  const { dRep, isDrepLoading } = useCardano();
   const { isMobile } = useScreenDimension();
 
   const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
@@ -92,69 +92,83 @@ export const DashboardGovernanceActions = () => {
       display="flex"
       flexDirection="column"
     >
-      <DataActionsBar
-        chosenFilters={chosenFilters}
-        chosenFiltersLength={chosenFilters.length}
-        chosenSorting={chosenSorting}
-        closeFilters={closeFilters}
-        closeSorts={closeSorts}
-        filtersOpen={filtersOpen}
-        searchText={searchText}
-        setChosenFilters={setChosenFilters}
-        setChosenSorting={setChosenSorting}
-        setFiltersOpen={setFiltersOpen}
-        setSearchText={setSearchText}
-        setSortOpen={setSortOpen}
-        sortingActive={Boolean(chosenSorting)}
-        sortOpen={sortOpen}
-      />
-      {dRep?.isRegistered && (
-        <Tabs
-          sx={{
-            marginTop: 3,
-            display: "flex",
-            fontSize: 16,
-            fontWeight: 500,
-          }}
-          value={content}
-          indicatorColor="secondary"
-          onChange={handleChange}
-          aria-label="basic tabs example"
+      {isDrepLoading ? (
+        <Box
+          alignItems="center"
+          display="flex"
+          flex={1}
+          height="100%"
+          justifyContent="center"
         >
-          <StyledTab
-            data-testid="to-vote-tab"
-            label="To vote"
-            sx={{
-              textTransform: "none",
-              width: !isMobile ? "auto" : "50%",
-            }}
+          <CircularProgress />
+        </Box>
+      ) : (
+        <>
+          <DataActionsBar
+            chosenFilters={chosenFilters}
+            chosenFiltersLength={chosenFilters.length}
+            chosenSorting={chosenSorting}
+            closeFilters={closeFilters}
+            closeSorts={closeSorts}
+            filtersOpen={filtersOpen}
+            searchText={searchText}
+            setChosenFilters={setChosenFilters}
+            setChosenSorting={setChosenSorting}
+            setFiltersOpen={setFiltersOpen}
+            setSearchText={setSearchText}
+            setSortOpen={setSortOpen}
+            sortingActive={Boolean(chosenSorting)}
+            sortOpen={sortOpen}
           />
-          <StyledTab
-            data-testid="voted-tab"
-            label="Voted"
-            sx={{
-              textTransform: "none",
-              width: !isMobile ? "auto" : "50%",
-            }}
-          />
-        </Tabs>
+          {dRep?.isRegistered && (
+            <Tabs
+              sx={{
+                marginTop: 3,
+                display: "flex",
+                fontSize: 16,
+                fontWeight: 500,
+              }}
+              value={content}
+              indicatorColor="secondary"
+              onChange={handleChange}
+              aria-label="basic tabs example"
+            >
+              <StyledTab
+                data-testid="to-vote-tab"
+                label="To vote"
+                sx={{
+                  textTransform: "none",
+                  width: !isMobile ? "auto" : "50%",
+                }}
+              />
+              <StyledTab
+                data-testid="voted-tab"
+                label="Voted"
+                sx={{
+                  textTransform: "none",
+                  width: !isMobile ? "auto" : "50%",
+                }}
+              />
+            </Tabs>
+          )}
+          <Box height={isMobile ? 24 : 60} />
+          <CustomTabPanel value={content} index={0}>
+            <GovernanceActionsToVote
+              filters={chosenFilters}
+              onDashboard
+              searchPhrase={searchText}
+              sorting={chosenSorting}
+            />
+          </CustomTabPanel>
+          <CustomTabPanel value={content} index={1}>
+            <DashboardGovernanceActionsVotedOn
+              filters={chosenFilters}
+              searchPhrase={searchText}
+              sorting={chosenSorting}
+            />
+          </CustomTabPanel>
+        </>
       )}
-      <Box height={isMobile ? 24 : 60} />
-      <CustomTabPanel value={content} index={0}>
-        <GovernanceActionsToVote
-          filters={chosenFilters}
-          onDashboard
-          searchPhrase={searchText}
-          sorting={chosenSorting}
-        />
-      </CustomTabPanel>
-      <CustomTabPanel value={content} index={1}>
-        <DashboardGovernanceActionsVotedOn
-          filters={chosenFilters}
-          searchPhrase={searchText}
-          sorting={chosenSorting}
-        />
-      </CustomTabPanel>
     </Box>
   );
 };

govtool/frontend/src/components/organisms/DashboardGovernanceActionsVotedOn.tsx

@@ -19,7 +19,7 @@ export const DashboardGovernanceActionsVotedOn = ({
   searchPhrase,
   sorting,
 }: DashboardGovernanceActionsVotedOnProps) => {
-  const { data, dRepVotesAreLoading } = useGetDRepVotesQuery(filters, sorting);
+  const { data, areDRepVotesLoading } = useGetDRepVotesQuery(filters, sorting);
   const { isMobile } = useScreenDimension();
   const { voteTransaction } = useCardano();
 
@@ -45,7 +45,7 @@ export const DashboardGovernanceActionsVotedOn = ({
     }
   }, [data, searchPhrase, voteTransaction.transactionHash]);
 
-  return dRepVotesAreLoading ? (
+  return areDRepVotesLoading ? (
     <Box py={4} display="flex" justifyContent="center">
       <CircularProgress />
     </Box>

govtool/frontend/src/components/organisms/DelegateTodRepStepTwo.tsx

@@ -82,7 +82,7 @@ export const DelegateTodRepStepTwo = ({ setStep }: DelegateProps) => {
         <Box display="flex" justifyContent="center">
           <Input
             control={control}
-            formFieldName="dRepId"
+            formFieldName="dRepID"
             placeholder="Paste DRep ID"
             dataTestId="dRep-id-input"
             width={"100%"}

govtool/frontend/src/components/organisms/GovernanceActionsToVote.tsx

@@ -5,11 +5,7 @@ import { Box, CircularProgress } from "@mui/material";
 import { Slider } from "./Slider";
 
 import { Typography } from "@atoms";
-import {
-  useGetDRepVotesQuery,
-  useGetProposalsQuery,
-  useScreenDimension,
-} from "@hooks";
+import { useGetProposalsQuery, useScreenDimension } from "@hooks";
 import { GovernanceActionCard } from "@molecules";
 import { GOVERNANCE_ACTIONS_FILTERS, PATHS } from "@consts";
 import { useCardano } from "@context";
@@ -32,14 +28,16 @@ export const GovernanceActionsToVote = ({
   searchPhrase = "",
   sorting,
 }: GovernanceActionsToVoteProps) => {
-  const { dRep, voteTransaction } = useCardano();
-  const { data: dRepVotes, dRepVotesAreLoading } = useGetDRepVotesQuery([], "");
+  const { voteTransaction } = useCardano();
   const navigate = useNavigate();
   const { isMobile } = useScreenDimension();
 
   const queryFilters = filters.length > 0 ? filters : defaultCategories;
 
-  const { proposals, isLoading } = useGetProposalsQuery(queryFilters, sorting);
+  const { proposals, isProposalsLoading } = useGetProposalsQuery({
+    filters: queryFilters,
+    sorting,
+  });
 
   const groupedByType = (data?: ActionType[]) => {
     return data?.reduce((groups, item) => {
@@ -59,20 +57,6 @@ export const GovernanceActionsToVote = ({
   };
 
   const mappedData = useMemo(() => {
-    if (onDashboard && dRep?.isRegistered && dRepVotes) {
-      const filteredBySearchPhrase = proposals?.filter((i) =>
-        getFullGovActionId(i.txHash, i.index)
-          .toLowerCase()
-          .includes(searchPhrase.toLowerCase())
-      );
-      const filteredData = filteredBySearchPhrase?.filter((i) => {
-        return !dRepVotes
-          .flatMap((item) => item.actions.map((item) => item.proposal.id))
-          .includes(i.id);
-      });
-      const groupedData = groupedByType(filteredData);
-      return Object.values(groupedData ?? []) as ToVoteDataType;
-    }
     const groupedData = groupedByType(
       proposals?.filter((i) =>
         getFullGovActionId(i.txHash, i.index)
@@ -81,16 +65,9 @@ export const GovernanceActionsToVote = ({
       )
     );
     return Object.values(groupedData ?? []) as ToVoteDataType;
-  }, [
-    proposals,
-    onDashboard,
-    dRep?.isRegistered,
-    dRepVotes,
-    searchPhrase,
-    voteTransaction.proposalId,
-  ]);
+  }, [proposals, searchPhrase]);
 
-  return !isLoading && !dRepVotesAreLoading ? (
+  return !isProposalsLoading ? (
     <>
       {!mappedData.length ? (
         <Typography fontWeight={300} sx={{ py: 4 }}>
@@ -156,13 +133,13 @@ export const GovernanceActionsToVote = ({
                     );
                   })}
                   dataLength={item.actions.slice(0, 6).length}
-                  notSlicedDataLength={item.actions.length}
                   filters={filters}
+                  navigateKey={item.title}
+                  notSlicedDataLength={item.actions.length}
                   onDashboard={onDashboard}
                   searchPhrase={searchPhrase}
                   sorting={sorting}
                   title={getProposalTypeLabel(item.title)}
-                  navigateKey={item.title}
                 />
                 {index < mappedData.length - 1 && (
                   <Box height={isMobile ? 40 : 52} />
@@ -180,7 +157,6 @@ export const GovernanceActionsToVote = ({
       flex={1}
       height="100%"
       justifyContent="center"
-      py={4}
     >
       <CircularProgress />
     </Box>