From 5dce9c217aab5422928c30d1ee9ba64de9119a15 Mon Sep 17 00:00:00 2001 From: "tai.truong" Date: Thu, 28 Mar 2024 10:35:57 +0700 Subject: [PATCH 1/5] feat: MET-1963 update filter, map actiontype --- src/commons/utils/constants.ts | 5 +- src/components/GovernanceVotes/index.tsx | 47 +++++++++---------- .../commons/CardGovernanceVotes/index.tsx | 31 ++++++------ src/locales/en/translation.json | 3 ++ src/pages/DrepDetail/index.tsx | 4 +- 5 files changed, 47 insertions(+), 43 deletions(-) diff --git a/src/commons/utils/constants.ts b/src/commons/utils/constants.ts index f42482cdcd..1d6406018e 100644 --- a/src/commons/utils/constants.ts +++ b/src/commons/utils/constants.ts @@ -299,7 +299,10 @@ export enum POOLS_ACTION_TYPE { UPDATE_COMMITTEE = "UPDATE_COMMITTEE", HARD_FORK_INITIATION_ACTION = "HARD_FORK_INITIATION_ACTION", NO_CONFIDENCE = "NO_CONFIDENCE", - INFO_ACTION = "INFO_ACTION" + INFO_ACTION = "INFO_ACTION", + NEW_CONSTITUTION = "NEW_CONSTITUTION", + TREASURY_WITHDRAWALS_ACTION = "TREASURY_WITHDRAWALS_ACTION", + PARAMETER_CHANGE_ACTION = "PARAMETER_CHANGE_ACTION" } export enum VOTE_TYPE { diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx index 3c2dddcf95..1a23040687 100644 --- a/src/components/GovernanceVotes/index.tsx +++ b/src/components/GovernanceVotes/index.tsx @@ -55,7 +55,11 @@ import { import { API } from "src/commons/utils/api"; import { POOLS_ACTION_TYPE, VOTE_TYPE, STATUS_VOTE } from "src/commons/utils/constants"; import { getShortHash } from "src/commons/utils/helper"; -import CardGovernanceVotes, { GovernanceStatus, VoteStatus } from "src/components/commons/CardGovernanceVotes"; +import CardGovernanceVotes, { + GovernanceStatus, + VoteStatus, + actionTypeListDrep +} from "src/components/commons/CardGovernanceVotes"; import CopyButton from "src/components/commons/CopyButton"; import CustomIcon from "src/components/commons/CustomIcon"; import CustomModal from "src/components/commons/CustomModal"; @@ -173,7 +177,7 @@ const DelegationGovernanceVotes: React.FC = ({ h - + {renderCard()} { - switch (type) { - case POOLS_ACTION_TYPE.UPDATE_COMMITTEE: - return t("pool.normalState"); - case POOLS_ACTION_TYPE.HARD_FORK_INITIATION_ACTION: - return t("pool.harkFork"); - case POOLS_ACTION_TYPE.NO_CONFIDENCE: - return t("pool.typeMotion"); - case POOLS_ACTION_TYPE.INFO_ACTION: - return t("pool.Infor"); - - default: - break; - } - }; - const TabButton: React.FC = ({ tabName, title }) => { return ( - {actionType(data?.govActionType || "")} #{data?.index} + {actionTypeListDrep.find((action) => action.value === data?.govActionType)?.text} @@ -350,7 +338,7 @@ const GovernanceVotesDetail: React.FC<{ {t("pool.actionType")} - {data?.govActionType} + {actionTypeListDrep.find((action) => action.value === data?.govActionType)?.text} @@ -669,6 +657,7 @@ interface FilterGovernanceVotes { query: ParsedQs; // eslint-disable-next-line @typescript-eslint/no-explicit-any setQuery: (query: any) => void; + voterType: string; } export interface FilterParams { sort?: string; @@ -682,7 +671,7 @@ export interface FilterParams { currentStatus?: string; vote?: string; } -const FilterGovernanceVotes: React.FC = ({ query, setQuery }) => { +const FilterGovernanceVotes: React.FC = ({ query, setQuery, voterType }) => { const theme = useTheme(); const { t } = useTranslation(); const history = useHistory(); @@ -717,7 +706,7 @@ const FilterGovernanceVotes: React.FC = ({ query, setQuer actionType: STATUS_VOTE.ALL, actionStatus: STATUS_VOTE.ANY, voteType: STATUS_VOTE.ANY, - voterType: VOTE_TYPE.STAKING_POOL_KEY_HASH + voterType: voterType }) }); }; @@ -756,7 +745,17 @@ const FilterGovernanceVotes: React.FC = ({ query, setQuer { value: STATUS_VOTE.NONE, text: t("pool.none") } ]; - const actionTypeList = [ + const actionTypeListDrep = [ + { value: POOLS_ACTION_TYPE.ALL, text: t("pool.any") }, + { value: POOLS_ACTION_TYPE.NO_CONFIDENCE, text: t("pool.typeMotion") }, + { value: POOLS_ACTION_TYPE.UPDATE_COMMITTEE, text: t("pool.typeConstitutional") }, + { value: POOLS_ACTION_TYPE.NEW_CONSTITUTION, text: t("drep.updateConstitution") }, + { value: POOLS_ACTION_TYPE.HARD_FORK_INITIATION_ACTION, text: t("pool.typeHardFork") }, + { value: POOLS_ACTION_TYPE.PARAMETER_CHANGE_ACTION, text: t("drep.protocolChange") }, + { value: POOLS_ACTION_TYPE.TREASURY_WITHDRAWALS_ACTION, text: t("drep.treasuryWithdrawals") }, + { value: POOLS_ACTION_TYPE.INFO_ACTION, text: t("pool.typeInfo") } + ]; + const actionTypeListPools = [ { value: POOLS_ACTION_TYPE.ALL, text: t("pool.any") }, { value: POOLS_ACTION_TYPE.NO_CONFIDENCE, text: t("pool.typeMotion") }, { value: POOLS_ACTION_TYPE.UPDATE_COMMITTEE, text: t("pool.typeConstitutional") }, @@ -906,7 +905,7 @@ const FilterGovernanceVotes: React.FC = ({ query, setQuer value={params?.actionType} onChange={(e) => setParams({ ...params, actionType: e.target.value })} > - {actionTypeList.map((i) => ( + {(voterType === VOTE_TYPE.DREP_KEY_HASH ? actionTypeListDrep : actionTypeListPools).map((i) => ( = ({ data }) => { const { index, status, txHash, type, vote, votingPower } = data; const theme = useTheme(); const { t } = useTranslation(); - const actionType = (type: string) => { - switch (type) { - case POOLS_ACTION_TYPE.UPDATE_COMMITTEE: - return t("pool.normalState"); - case POOLS_ACTION_TYPE.HARD_FORK_INITIATION_ACTION: - return t("pool.harkFork"); - case POOLS_ACTION_TYPE.NO_CONFIDENCE: - return t("pool.typeMotion"); - case POOLS_ACTION_TYPE.INFO_ACTION: - return t("pool.Infor"); - default: - break; - } - }; return ( @@ -45,7 +42,7 @@ const CardGovernanceVotes: React.FC = ({ data }) => { lineHeight="28px" color={theme.isDark ? theme.palette.secondary.main : theme.palette.secondary.main} > - {actionType(type)} #{index} + {actionTypeListDrep.find((action) => action.value === type)?.text} #{index} @@ -65,7 +62,7 @@ const CardGovernanceVotes: React.FC = ({ data }) => { {t("pool.actionType")}: - {actionType(type)} + {actionTypeListDrep.find((action) => action.value === type)?.text} diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index 93962111af..e68081332c 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -1017,6 +1017,9 @@ "pool.typeConstitutional": "Constitutional Committee", "pool.typeUpdate": "Update to the Constitutional or proposal policy", "pool.typeHardFork": "Hard-Fork Initiation", + "drep.updateConstitution": "Update to the Constitution", + "drep.protocolChange": "Protocol Parameter Changes", + "drep.treasuryWithdrawals": "Treasury Withdrawals", "pool.typeProtocol": "Protocol Parameter Changes", "pool.typeTreasury": "Treasury Withdrawals", "pool.typeInfo": "Info", diff --git a/src/pages/DrepDetail/index.tsx b/src/pages/DrepDetail/index.tsx index 40d615d01f..2e3101a237 100644 --- a/src/pages/DrepDetail/index.tsx +++ b/src/pages/DrepDetail/index.tsx @@ -190,7 +190,9 @@ const DrepDetail = () => { {t("drep.votingParticipation")} ), - value: {data?.votingParticipation}% + value: ( + {data?.votingParticipation !== null ? `${data?.votingParticipation}%` : t("common.N/A")} + ) }, { icon: LifetimeVoteDrepIcon, From 4a47d465c73cb27264b00ee8421952751876452c Mon Sep 17 00:00:00 2001 From: "tai.truong" Date: Thu, 28 Mar 2024 11:19:29 +0700 Subject: [PATCH 2/5] feat: MET-1963 update drep page --- src/components/GovernanceVotes/index.tsx | 31 ++++++++++++++++++------ src/components/share/styled.ts | 1 + src/locales/en/translation.json | 2 +- 3 files changed, 25 insertions(+), 9 deletions(-) diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx index 1a23040687..34902e6e80 100644 --- a/src/components/GovernanceVotes/index.tsx +++ b/src/components/GovernanceVotes/index.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { ParsedQs, parse, stringify } from "qs"; -import { useHistory, useLocation } from "react-router-dom"; +import { useHistory, useLocation, useParams } from "react-router-dom"; import { useTranslation } from "react-i18next"; import { AccordionSummary, @@ -89,6 +89,7 @@ import { } from "../DelegationDetail/DelegationDetailInfo/styles"; import { TimeDuration } from "../TransactionLists/styles"; import NoRecord from "../commons/NoRecord"; +import DynamicEllipsisText from "../DynamicEllipsisText"; interface DelegationGovernanceVotesProps { hash: string; @@ -203,6 +204,8 @@ const GovernanceVotesDetail: React.FC<{ const theme = useTheme(); const [openHistoryVoteModal, setOpenHistoryVoteModal] = useState(false); const { t } = useTranslation(); + const { drepId, poolId } = useParams<{ drepId: string; poolId: string }>(); + const history = useHistory(); // eslint-disable-next-line @typescript-eslint/no-explicit-any const setQuery = (query: any) => { @@ -222,7 +225,7 @@ const GovernanceVotesDetail: React.FC<{ setTab(newTab); }; - const TabButton: React.FC = ({ tabName, title }) => { + const TabButton: React.FC = ({ tabName, title, children }) => { return ( handleTabChange(tabName)} > <>{title} + <>{children} ); }; @@ -277,7 +281,16 @@ const GovernanceVotesDetail: React.FC<{ - + + + + + @@ -406,7 +419,7 @@ const GovernanceVotesDetail: React.FC<{ {t("pool.currentStatus")} - + @@ -560,6 +573,7 @@ export interface GovernanceVoteDetail { status: string | null; votingPower: number | null; submissionDate: string; + poolName: string | null; expiryDate: string; historyVotes: { no: number | null; @@ -651,7 +665,8 @@ const VoteHistoryModal: React.FC = ({ onClose, open, data }) = interface TabButtonProps { tabName: string; - title: string; + title?: string; + children?: React.ReactNode; } interface FilterGovernanceVotes { query: ParsedQs; @@ -748,8 +763,8 @@ const FilterGovernanceVotes: React.FC = ({ query, setQuer const actionTypeListDrep = [ { value: POOLS_ACTION_TYPE.ALL, text: t("pool.any") }, { value: POOLS_ACTION_TYPE.NO_CONFIDENCE, text: t("pool.typeMotion") }, - { value: POOLS_ACTION_TYPE.UPDATE_COMMITTEE, text: t("pool.typeConstitutional") }, - { value: POOLS_ACTION_TYPE.NEW_CONSTITUTION, text: t("drep.updateConstitution") }, + { value: POOLS_ACTION_TYPE.UPDATE_COMMITTEE, text: t("pool.updateConstitution") }, + { value: POOLS_ACTION_TYPE.NEW_CONSTITUTION, text: t("drep.typeConstitutional") }, { value: POOLS_ACTION_TYPE.HARD_FORK_INITIATION_ACTION, text: t("pool.typeHardFork") }, { value: POOLS_ACTION_TYPE.PARAMETER_CHANGE_ACTION, text: t("drep.protocolChange") }, { value: POOLS_ACTION_TYPE.TREASURY_WITHDRAWALS_ACTION, text: t("drep.treasuryWithdrawals") }, @@ -758,7 +773,7 @@ const FilterGovernanceVotes: React.FC = ({ query, setQuer const actionTypeListPools = [ { value: POOLS_ACTION_TYPE.ALL, text: t("pool.any") }, { value: POOLS_ACTION_TYPE.NO_CONFIDENCE, text: t("pool.typeMotion") }, - { value: POOLS_ACTION_TYPE.UPDATE_COMMITTEE, text: t("pool.typeConstitutional") }, + { value: POOLS_ACTION_TYPE.UPDATE_COMMITTEE, text: t("pool.updateConstitution") }, { value: POOLS_ACTION_TYPE.HARD_FORK_INITIATION_ACTION, text: t("pool.typeHardFork") }, { value: POOLS_ACTION_TYPE.INFO_ACTION, text: t("pool.typeInfo") } ]; diff --git a/src/components/share/styled.ts b/src/components/share/styled.ts index b8ed2e684e..1ae0b69f24 100644 --- a/src/components/share/styled.ts +++ b/src/components/share/styled.ts @@ -73,6 +73,7 @@ export const FlexCenter = styled(Box)` export const TruncateSubTitleContainer = styled(Box)(({ theme }) => ({ maxWidth: "70vw", + textTransform: "lowercase", [theme.breakpoints.up("sm")]: { maxWidth: "60vw" }, diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index e68081332c..5a3858a4f8 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -1014,7 +1014,7 @@ "pool.abstain": "Abstain", "pool.none": "None", "pool.typeMotion": "Motion of No-Confidence", - "pool.typeConstitutional": "Constitutional Committee", + "pool.typeConstitutional": "Constitutional Committe Updates", "pool.typeUpdate": "Update to the Constitutional or proposal policy", "pool.typeHardFork": "Hard-Fork Initiation", "drep.updateConstitution": "Update to the Constitution", From 9a9c2cdddf97bd4a3ae38a63be124b49a097e198 Mon Sep 17 00:00:00 2001 From: "tai.truong" Date: Thu, 28 Mar 2024 16:08:22 +0700 Subject: [PATCH 3/5] feat: MET-1963 update page size --- src/components/GovernanceVotes/index.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx index 34902e6e80..649586c8e9 100644 --- a/src/components/GovernanceVotes/index.tsx +++ b/src/components/GovernanceVotes/index.tsx @@ -185,8 +185,10 @@ const DelegationGovernanceVotes: React.FC = ({ h pagination={{ size: Number(query.voteSize || 6), total, + page: query.page ? Number(query.page || 1) - 1 : 0, onChange: (page, size) => history.replace({ search: stringify({ ...query, page, voteSize: size }) }) }} + total={{ count: total || 0, title: "" }} loading={false} optionList={[6, 9, 12]} /> @@ -763,8 +765,8 @@ const FilterGovernanceVotes: React.FC = ({ query, setQuer const actionTypeListDrep = [ { value: POOLS_ACTION_TYPE.ALL, text: t("pool.any") }, { value: POOLS_ACTION_TYPE.NO_CONFIDENCE, text: t("pool.typeMotion") }, - { value: POOLS_ACTION_TYPE.UPDATE_COMMITTEE, text: t("pool.updateConstitution") }, - { value: POOLS_ACTION_TYPE.NEW_CONSTITUTION, text: t("drep.typeConstitutional") }, + { value: POOLS_ACTION_TYPE.UPDATE_COMMITTEE, text: t("drep.updateConstitution") }, + { value: POOLS_ACTION_TYPE.NEW_CONSTITUTION, text: t("pool.typeConstitutional") }, { value: POOLS_ACTION_TYPE.HARD_FORK_INITIATION_ACTION, text: t("pool.typeHardFork") }, { value: POOLS_ACTION_TYPE.PARAMETER_CHANGE_ACTION, text: t("drep.protocolChange") }, { value: POOLS_ACTION_TYPE.TREASURY_WITHDRAWALS_ACTION, text: t("drep.treasuryWithdrawals") }, @@ -773,7 +775,7 @@ const FilterGovernanceVotes: React.FC = ({ query, setQuer const actionTypeListPools = [ { value: POOLS_ACTION_TYPE.ALL, text: t("pool.any") }, { value: POOLS_ACTION_TYPE.NO_CONFIDENCE, text: t("pool.typeMotion") }, - { value: POOLS_ACTION_TYPE.UPDATE_COMMITTEE, text: t("pool.updateConstitution") }, + { value: POOLS_ACTION_TYPE.UPDATE_COMMITTEE, text: t("drep.updateConstitution") }, { value: POOLS_ACTION_TYPE.HARD_FORK_INITIATION_ACTION, text: t("pool.typeHardFork") }, { value: POOLS_ACTION_TYPE.INFO_ACTION, text: t("pool.typeInfo") } ]; From 1d85157b6b5ba73a5d2eaa0799ba37a4e2fec414 Mon Sep 17 00:00:00 2001 From: "tai.truong" Date: Thu, 28 Mar 2024 16:16:58 +0700 Subject: [PATCH 4/5] feat: MET-1963 update show voting participation --- src/pages/DrepDetail/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/pages/DrepDetail/index.tsx b/src/pages/DrepDetail/index.tsx index 2e3101a237..92a5b16ca9 100644 --- a/src/pages/DrepDetail/index.tsx +++ b/src/pages/DrepDetail/index.tsx @@ -191,7 +191,9 @@ const DrepDetail = () => { ), value: ( - {data?.votingParticipation !== null ? `${data?.votingParticipation}%` : t("common.N/A")} + + {data?.votingParticipation !== null ? `${formatPercent(data?.votingParticipation)}` : t("common.N/A")} + ) }, { From df6696634309cd5d4dc4f699dc0a28942512df69 Mon Sep 17 00:00:00 2001 From: "tai.truong" Date: Fri, 29 Mar 2024 14:11:14 +0700 Subject: [PATCH 5/5] fix: show pool name --- src/components/GovernanceVotes/index.tsx | 16 ++++++++++------ 1 file changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx index 649586c8e9..74521702d3 100644 --- a/src/components/GovernanceVotes/index.tsx +++ b/src/components/GovernanceVotes/index.tsx @@ -285,12 +285,16 @@ const GovernanceVotesDetail: React.FC<{ - + {data?.poolName && data.poolName.length < 10 ? ( + data.poolName + ) : ( + + )}