feat: MET-1963 add lifetime vote

src/commons/resources/index.ts

@@ -207,6 +207,10 @@ import DelegatorsDrepIcon from "./icons/delegatorsDrep.svg?react";
 import LifetimeVoteDrepIcon from "./icons/liifetimeVoteDrep.svg?react";
 import governanceVotesIcon from "./icons/governanceVotes.svg?react";
 import StakingLifecycleComponent from "./icons/menus/stakingLifecycle.svg?react";
+import VotesYesIcon from "./icons/voteYes.svg?react";
+import VotesNoIcon from "./icons/voteNo.svg?react";
+import VotesAbstainIcon from "./icons/voteAbstain.svg?react";
+import DropdownIcon from "./icons/dropdown.svg?react";
 // eslint-disable-next-line import/order
 import TotalOutput from "./icons/totalOutput.svg?react";
 export {
@@ -415,7 +419,11 @@ export {
   LiveStakeDrepIcon,
   DelegatorsDrepIcon,
   LifetimeVoteDrepIcon,
-  governanceVotesIcon
+  governanceVotesIcon,
+  VotesYesIcon,
+  VotesNoIcon,
+  VotesAbstainIcon,
+  DropdownIcon
 };
 
 import AIcon from "./icons/AIcon.svg?react";

src/components/DelegationDetail/DelegationDetailList/index.tsx

@@ -237,23 +237,21 @@ const DelegationCertificatesHistory = ({
   const renderAction = (type: POOL_ACTION_TYPE | DREP_ACTION_TYPE) => {
     if (type === POOL_ACTION_TYPE.POOL_REGISTRATION || type === DREP_ACTION_TYPE.REG_DREP_CERT) {
       return (
-        <CustomTooltip title={type === POOL_ACTION_TYPE.POOL_REGISTRATION ? "Pool Registration" : "Drep Registration"}>
+        <CustomTooltip title={type === POOL_ACTION_TYPE.POOL_REGISTRATION ? "Pool Registration" : "Registration"}>
           {theme.isDark ? <PoolResgistrationHistoryDark /> : <PoolResgistrationHistory />}
         </CustomTooltip>
       );
     }
     if (type === POOL_ACTION_TYPE.POOL_UPDATE || type === DREP_ACTION_TYPE.UPDATE_DREP_CERT) {
       return (
-        <CustomTooltip title={type === POOL_ACTION_TYPE.POOL_UPDATE ? "Pool Update" : "Drep Update"}>
+        <CustomTooltip title={type === POOL_ACTION_TYPE.POOL_UPDATE ? "Pool Update" : "Delegation"}>
           {theme.isDark ? <PoolUpdateHistoryDark /> : <PoolUpdateHistory />}
         </CustomTooltip>
       );
     }
     if (type === POOL_ACTION_TYPE.POOL_DE_REGISTRATION || type === DREP_ACTION_TYPE.UNREG_DREP_CERT) {
       return (
-        <CustomTooltip
-          title={type === POOL_ACTION_TYPE.POOL_DE_REGISTRATION ? "Pool Deregistration" : "Drep Deregistration"}
-        >
+        <CustomTooltip title={type === POOL_ACTION_TYPE.POOL_DE_REGISTRATION ? "Pool Deregistration" : "Retirement"}>
           {theme.isDark ? <PoolDeresgistrationHistoryDark /> : <PoolDeresgistrationHistory />}
         </CustomTooltip>
       );

src/locales/en/translation.json

@@ -558,6 +558,7 @@
   "common.poolSize": "Pool size",
   "common.yes": "Yes",
   "common.no": "No",
+  "common.abstain": "Abstain",
   "common.poolReportByEvent": "Pool Report by event",
   "common.select as required": "Select as required",
   "common.all": "All",

src/pages/DrepDetail/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { IoIosArrowDown } from "react-icons/io";
 import { useHistory, useLocation, useParams } from "react-router-dom";
 import { useSelector } from "react-redux";
@@ -27,7 +27,11 @@ import {
   LifetimeVoteDrepIcon,
   StakingDelegators,
   TimelineIconComponent,
-  governanceVotesIcon
+  governanceVotesIcon,
+  VotesYesIcon,
+  VotesAbstainIcon,
+  VotesNoIcon,
+  DropdownIcon
 } from "src/commons/resources";
 import {
   DelegationCertificatesHistory,
@@ -46,14 +50,32 @@ import {
 } from "src/components/DelegationDetail/DelegationDetailInfo/styles";
 import { CommonSkeleton } from "src/components/commons/CustomSkeleton";
 
-import { StyledContainer, TimeDuration, TitleCard, TitleTab, ValueCard } from "./styles";
+import { StyledContainer, StyledMenuItem, StyledSelect, TimeDuration, TitleCard, TitleTab, ValueCard } from "./styles";
+
+const voteOption = [
+  { title: "Action Type", value: "ALL" },
+  { title: "Motion of No-Confidence", value: "NO_CONFIDENCE" },
+  { title: "Constitutional Committe Updates", value: "UPDATE_COMMITTEE" },
+  { title: "Update to the Constitution", value: "NEW_CONSTITUTION" },
+  { title: "Hard-Fork Initiation", value: "HARD_FORK_INITIATION_ACTION" },
+  { title: "Protocol Parameter Changes", value: "PARAMETER_CHANGE_ACTION" },
+  { title: "Treasury Withdrawals", value: "TREASURY_WITHDRAWALS_ACTION" },
+  { title: "Info", value: "INFO_ACTION" }
+];
 
 const DrepDetail = () => {
   const { drepId } = useParams<{ drepId: string }>();
   const theme = useTheme();
   const history = useHistory();
-  const { data, loading } = useFetch<DrepOverview>(API.DREP_OVERVIEW.replace(":drepId", drepId));
 
+  const [typeVote, setTypeVote] = useState("ALL");
+  const handleChange = (event) => {
+    setTypeVote(event.target.value);
+  };
+  const { data, loading } = useFetch<DrepOverview>(API.DREP_OVERVIEW.replace(":drepId", drepId));
+  const { data: dataChard, loading: loadingChard } = useFetch<DrepOverviewChart>(
+    `${API.DREP_OVERVIEW_CHART.replace(":drepId", drepId)}?govActionType=${typeVote}`
+  );
   const listOverview = [
     {
       icon: DescriptonDrepIcon,
@@ -119,13 +141,50 @@ const DrepDetail = () => {
       icon: LifetimeVoteDrepIcon,
       sizeIcon: 26,
       title: (
-        <TitleCard display={"flex"} alignItems="center">
-          {t("drep.lifetimeVotes")}
-        </TitleCard>
+        <Box display={"flex"} alignItems={"center"} gap={2} justifyContent={"space-between"} flexWrap={"wrap"}>
+          <TitleCard display={"flex"} alignItems="center">
+            {t("drep.lifetimeVotes")}
+          </TitleCard>
+          <StyledSelect
+            value={typeVote}
+            onChange={handleChange}
+            size="small"
+            IconComponent={DropdownIcon}
+            sx={{
+              maxWidth: "200px",
+              [theme.breakpoints.down("md")]: { maxWidth: 140 }
+            }}
+            MenuProps={{
+              style: { zIndex: 1303 },
+              MenuListProps: {
+                sx: {
+                  bgcolor: ({ palette }) => `${palette.secondary[0]} !important`
+                }
+              },
+              PaperProps: {
+                sx: {
+                  bgcolor: ({ palette }) => `${palette.secondary[0]} !important`
+                }
+              }
+            }}
+          >
+            {voteOption.map((voteType, idx) => (
+              <Box
+                component={StyledMenuItem}
+                key={idx}
+                fontSize={12}
+                color={theme.palette.secondary.light}
+                value={voteType.value}
+              >
+                {voteType.title}
+              </Box>
+            ))}
+          </StyledSelect>
+        </Box>
       ),
       value: (
         <Box>
-          <VoteRate />
+          <VoteRate data={dataChard} loading={loadingChard} />
         </Box>
       )
     }
@@ -322,27 +381,44 @@ const DrepAccordion = () => {
   );
 };
 
-const VoteRate = () => {
+const VoteRate = ({ data, loading }: { data: DrepOverviewChart | null; loading: boolean }) => {
   const theme = useTheme();
+  const totalVote = useMemo(() => {
+    if (data) {
+      return (data?.numberOfAbstainVotes || 0) + (data?.numberOfNoVotes || 0) + (data?.numberOfYesVote || 0);
+    }
+    return 0;
+  }, [JSON.stringify(data)]);
+
+  if (loading) {
+    return (
+      <Box borderRadius={4} overflow="hidden" height={150}>
+        <CommonSkeleton variant="rectangular" height={250} width="100%" />
+      </Box>
+    );
+  }
 
   return (
-    <Box display="flex" alignItems="end" justifyContent="space-between" width="100%">
+    <Box display="flex" alignItems="end" justifyContent="space-between" width="100%" minHeight={150}>
       <VoteBar
-        percentage={93}
+        percentage={totalVote > 0 ? ((data?.numberOfYesVote || 0) / totalVote) * 100 : 0}
         color={theme.palette.success[700]}
-        // icon={<VotesYesIcon />}
+        numberVote={data?.numberOfYesVote || 0}
+        icon={<VotesYesIcon />}
         label={t("common.yes")}
       />
       <VoteBar
-        percentage={7}
+        percentage={totalVote > 0 ? ((data?.numberOfAbstainVotes || 0) / totalVote) * 100 : 0}
         color={theme.palette.warning[700]}
-        // icon={<VotesAbstainIcon />}
+        numberVote={data?.numberOfAbstainVotes || 0}
+        icon={<VotesAbstainIcon />}
         label={t("common.abstain")}
       />
       <VoteBar
-        percentage={0}
+        percentage={totalVote > 0 ? ((data?.numberOfNoVotes || 0) / totalVote) * 100 : 0}
         color={theme.palette.error[700]}
-        //  icon={<VotesNoIcon />}
+        numberVote={data?.numberOfNoVotes || 0}
+        icon={<VotesNoIcon />}
         label={t("common.no")}
       />
     </Box>
@@ -353,9 +429,11 @@ const VoteBar = ({
   percentage,
   color,
   icon,
-  label
+  label,
+  numberVote
 }: {
   percentage: number;
+  numberVote: number;
   color: string;
   icon?: JSX.Element;
   label: string;
@@ -369,7 +447,7 @@ const VoteBar = ({
         <Box height="39px" display="flex" alignItems="center" gap="8px">
           {icon}
           <Typography fontSize="12px" fontWeight={600}>
-            3,443,875.343 ADA (94%)
+            {numberVote} ({percentage}%)
           </Typography>
         </Box>
       }

src/pages/DrepDetail/styles.ts

@@ -1,4 +1,4 @@
-import { styled, Container, Box } from "@mui/material";
+import { styled, Container, Box, MenuItem, Select } from "@mui/material";
 
 export const StyledContainer = styled(Container)`
   @media screen and (max-width: ${(props) => props.theme.breakpoints.values.sm}px) {
@@ -31,3 +31,36 @@ export const TimeDuration = styled("small")(({ theme }) => ({
   textAlign: "left",
   margin: "15px 0px 0px"
 }));
+
+export const StyledSelect = styled(Select)(({ theme }) => ({
+  fontFamily: "var(--font-family-title)",
+  border: `1px solid ${theme.palette.secondary[600]} !important`,
+  background: "transparent",
+  color: theme.palette.secondary[600],
+  borderRadius: "8px",
+  "& > div": {
+    padding: "6px 12px",
+    fontWeight: 500,
+    fontSize: 12,
+    cursor: "pointer",
+    color: theme.isDark ? theme.palette.secondary.light : theme.palette.secondary[600]
+  },
+  "& > fieldset": {
+    top: 0,
+    border: "none !important"
+  },
+  "& > svg": {
+    fill: theme.isDark ? theme.palette.secondary.light : theme.palette.secondary[600],
+    fontSize: "20px"
+  }
+}));
+
+export const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
+  color: theme.palette.secondary[600],
+  "&.Mui-selected": {
+    backgroundColor: theme.palette.primary[200]
+  },
+  "&:hover": {
+    backgroundColor: theme.palette.primary[200] + " !important"
+  }
+}));

src/types/drep.d.ts

@@ -10,3 +10,19 @@ interface DrepOverview {
   votingParticipation: number;
   type: string;
 }
+
+interface DrepOverviewChart {
+  drepHash: string;
+  govActionType:
+    | "PARAMETER_CHANGE_ACTION"
+    | "HARD_FORK_INITIATION_ACTION"
+    | "TREASURY_WITHDRAWALS_ACTION"
+    | "NO_CONFIDENCE"
+    | "UPDATE_COMMITTEE"
+    | "NEW_CONSTITUTION"
+    | "INFO_ACTION"
+    | "ALL";
+  numberOfAbstainVotes: number | null;
+  numberOfNoVotes: number | null;
+  numberOfYesVote: number | null;
+}