From 727caf3aee37d072f37b86f137aab8708106aa9c Mon Sep 17 00:00:00 2001 From: DinhTran Date: Mon, 1 Apr 2024 10:59:44 +0700 Subject: [PATCH 1/3] feat: integrate api chart pools --- src/commons/resources/icons/history.svg | 3 + src/commons/resources/icons/repeatVote.svg | 3 + src/commons/resources/index.ts | 4 + src/components/GovernanceVotes/index.tsx | 566 ++++++++++++------ src/components/GovernanceVotes/styles.ts | 16 + .../commons/CardGovernanceVotes/index.tsx | 40 +- .../commons/CardGovernanceVotes/styles.ts | 16 +- src/locales/en/translation.json | 1 + src/pages/NativeScriptsAndSC/styles.ts | 16 +- 9 files changed, 449 insertions(+), 216 deletions(-) create mode 100644 src/commons/resources/icons/history.svg create mode 100644 src/commons/resources/icons/repeatVote.svg create mode 100644 src/components/GovernanceVotes/styles.ts diff --git a/src/commons/resources/icons/history.svg b/src/commons/resources/icons/history.svg new file mode 100644 index 0000000000..cc2e854e2d --- /dev/null +++ b/src/commons/resources/icons/history.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/commons/resources/icons/repeatVote.svg b/src/commons/resources/icons/repeatVote.svg new file mode 100644 index 0000000000..266d26d0d4 --- /dev/null +++ b/src/commons/resources/icons/repeatVote.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/commons/resources/index.ts b/src/commons/resources/index.ts index a603ac5f8a..861cb3358a 100644 --- a/src/commons/resources/index.ts +++ b/src/commons/resources/index.ts @@ -226,6 +226,8 @@ import AnchorTextIcon from "./icons/anchor-text.svg?react"; import BlackWarningIcon from "./icons/warning-black.svg?react"; import BlackCircleIcon from "./icons/black-cirle-copy.svg?react"; import RepeatVotesIcon from "./icons/repeat-votes.svg?react"; +import historyIcon from "./icons/history.svg?react"; +import repeatVoteIcon from "./icons/repeatVote.svg?react"; // eslint-disable-next-line import/order import TotalOutput from "./icons/totalOutput.svg?react"; export { @@ -446,12 +448,14 @@ export { GovernanceIdIcon, ActionTypeIcon, VoteIcon, + historyIcon, CurrentStatusIcon, VotingPowerIcon, SubmissionDateIcon, ExpiryIcon, AnchorTextIcon, BlackWarningIcon, + repeatVoteIcon, BlackCircleIcon, RepeatVotesIcon }; diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx index 0801236d27..ba5cfb7043 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, @@ -10,7 +10,6 @@ import { Chip, FormControlLabel, Grid, - Popper, Radio, RadioGroup, Skeleton, @@ -42,6 +41,7 @@ import { BlackCircleIcon, BlackWarningIcon, CurrentStatusIcon, + DisclaimerIcon, ExpiryIcon, FilterIcon, GovernanceIdIcon, @@ -52,12 +52,17 @@ import { VotesAbstainIcon, VotesNoIcon, VotesYesIcon, - VotingPowerIcon + VotingPowerIcon, + historyIcon } from "src/commons/resources"; import { API } from "src/commons/utils/api"; import { POOLS_ACTION_TYPE, VOTE_TYPE, STATUS_VOTE } from "src/commons/utils/constants"; -import { formatDate, formatDateTime, getShortHash, getShortNumber } 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 { formatDateTime, getShortHash, getShortNumber } from "src/commons/utils/helper"; import CopyButton from "src/components/commons/CopyButton"; import CustomIcon from "src/components/commons/CustomIcon"; import CustomModal from "src/components/commons/CustomModal"; @@ -69,13 +74,16 @@ import { AccordionDetailsFilter, ApplyFilterButton, ButtonSort, - FilterContainer + FilterContainer, + FilterWrapper } from "src/pages/NativeScriptsAndSC/styles"; import { StyledInput } from "src/components/share/styled"; import { TextareaAutosize } from "src/pages/DelegationDetail/styles"; import DateRangeModal, { DATETIME_PARTTEN } from "src/components/commons/CustomFilter/DateRangeModal"; +import { ChipContainer } from "src/pages/NativeScriptsAndSC/Card"; import FormNowMessage from "src/components/commons/FormNowMessage"; import useFetch from "src/commons/hooks/useFetch"; +import { useScreen } from "src/commons/hooks/useScreen"; import { DataContainer, @@ -87,7 +95,9 @@ import { } from "../DelegationDetail/DelegationDetailInfo/styles"; import { TimeDuration } from "../TransactionLists/styles"; import NoRecord from "../commons/NoRecord"; +import DynamicEllipsisText from "../DynamicEllipsisText"; import { ViewJson } from "../ScriptModal/styles"; +import { HashName } from "./styles"; interface DelegationGovernanceVotesProps { hash: string; @@ -123,7 +133,7 @@ const DelegationGovernanceVotes: React.FC = ({ h actionStatus: (query.actionStatus as string) || "ANY", voteType: (query.voteType as string) || "ANY", isRepeatVote: query?.isRepeatVote === "true" ? (query.isRepeatVote as string) : undefined, - governanceActionTxHash: (query.id as string) || undefined, + governanceActionTxHash: (query.governanceActionTxHash as string) || undefined, anchorText: (query.anchorText as string) || undefined, fromDate: (query.fromDate as string) || undefined, toDate: (query.toDate as string) || undefined, @@ -190,19 +200,21 @@ const DelegationGovernanceVotes: React.FC = ({ h return ( <> - + - + {renderCard()} history.replace({ search: stringify({ ...query, page, voteSize: size }) }) }} + total={{ count: total || 0, title: "" }} loading={false} optionList={[6, 9, 12]} /> @@ -220,7 +232,12 @@ const GovernanceVotesDetail: React.FC<{ const theme = useTheme(); const [openHistoryVoteModal, setOpenHistoryVoteModal] = useState(false); const [openActionMetadataModal, setOpenActionMetadataModal] = useState(false); + const [openModal, setOpenModal] = useState(false); + const { t } = useTranslation(); + const { isGalaxyFoldSmall, isMobile } = useScreen(); + const { drepId, poolId } = useParams<{ drepId: string; poolId: string }>(); + const history = useHistory(); // eslint-disable-next-line @typescript-eslint/no-explicit-any const setQuery = (query: any) => { @@ -228,7 +245,7 @@ const GovernanceVotesDetail: React.FC<{ }; const [selectVote, setSelectVote] = useState(""); - const { data } = useFetch( + const { data, loading, initialized } = useFetch( `${API.POOL_CERTIFICATE.POOL_DETAIL(hash || "")}?${stringify({ txHash: voteId, index: 0, @@ -247,7 +264,7 @@ const GovernanceVotesDetail: React.FC<{ switch (selectVote) { case "SPOs": return dataChart?.votingChartsList.filter((i) => i.voterType === "STAKING_POOL_KEY_HASH")[0]; - case "DRops": + case "DReps": return dataChart?.votingChartsList.filter((i) => i.voterType === "DREP_KEY_HASH")[0]; case "CC": return dataChart?.votingChartsList.filter((i) => i.voterType === "CONSTITUTIONAL_COMMITTEE_HOT_KEY_HASH")[0]; @@ -257,34 +274,18 @@ const GovernanceVotesDetail: React.FC<{ } }; - 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; - } - }; - const [tab, setTab] = useState("pool"); const handleTabChange = (newTab: string) => { setTab(newTab); }; - - const TabButton: React.FC = ({ tabName, title }) => { + const TabButton: React.FC = ({ tabName, title, children }) => { return ( handleTabChange(tabName)} > <>{title} + <>{children} ); }; const listVotes = ["SPOs", "DRops", "CC"]; + + if (loading || !initialized) { + return ; + } + return ( - - - - {actionType(data?.govActionType || "")} #{data?.index} - - - - - - - - - - {tab === "pool" ? t("pool.tabPool") : t("pool.overall")} - + + + + + {actionTypeListDrep.find((action) => action.value === data?.govActionType)?.text} + + + + + + {data?.poolName && data.poolName.length < 10 ? ( + data.poolName + ) : ( + + )} + + + + + + + {tab === "pool" + ? type === VOTE_TYPE.DREP_KEY_HASH + ? t("pool.tabPoolDrep") + : t("pool.tabPool") + : t("pool.overall")} + + + + - + @@ -367,7 +390,7 @@ const GovernanceVotesDetail: React.FC<{ gap="8px" borderRadius="20px" sx={{ - background: theme.palette.primary[100], + background: theme.isDark ? theme.palette.primary[500] : theme.palette.primary[100], border: `1px solid ${theme.palette.secondary[600]}`, width: "fit-content", p: "3px 2px 3px 12px" @@ -378,27 +401,38 @@ const GovernanceVotesDetail: React.FC<{ fontSize="12px" fontWeight="500" lineHeight="14.52px" - color={theme.palette.secondary[600]} + color={theme.isDark ? theme.palette.secondary.light : theme.palette.secondary[600]} > - {getShortHash(data?.txHash)} + {isGalaxyFoldSmall + ? getShortHash(data?.txHash, 1, 1) + : isMobile + ? getShortHash(data?.txHash, 5, 4) + : getShortHash(data?.txHash)} + #{data?.index} - + - + {t("pool.actionType")} - {actionType(data?.govActionType || "")} + {actionTypeListDrep.find((action) => action.value === data?.govActionType)?.text} - + @@ -411,14 +445,16 @@ const GovernanceVotesDetail: React.FC<{ > {tab === "pool" ? t("pool.vote") : t("pool.votes")} {tab !== "pool" && ( - + {(selectVote ? listVotes.slice(0, 1) : listVotes).map((i) => ( setSelectVote(selectVote ? "" : i)} @@ -429,7 +465,7 @@ const GovernanceVotesDetail: React.FC<{ sx={{ background: theme.palette.primary[100], border: `1px solid ${theme.palette.secondary[600]}`, - color: theme.isDark ? theme.palette.secondary.main : theme.palette.secondary.light + color: theme.palette.secondary[600] }} onClick={() => setSelectVote("")} label="x" @@ -440,21 +476,38 @@ const GovernanceVotesDetail: React.FC<{ {tab === "pool" ? ( - { - setOpenHistoryVoteModal(true); - }} - > - + + + + + {data?.historyVotes && data?.historyVotes.length > 1 && ( + { + setOpenHistoryVoteModal(true); + }} + > + + History + + } + variant={"gray"} + /> + + )} ) : ( - + + + )} - + @@ -469,37 +522,50 @@ const GovernanceVotesDetail: React.FC<{ - + + + + {t("pool.votingPowerADA")} + {data?.votingPower ? `${data?.votingPower} ADA` : "N/A"}{" "} - + + + + {t("pool.submission")} {formatDateTime(data?.submissionDate || "")} - + + + + {t("pool.expiryDate")} - {formatDate(data?.expiryDate || "")} + {formatDateTime(data?.expiryDate || "")} - + + + + - {t("pool.anchorText")} + {t("pool.actionMetadata")} From 7145f5d1186c509cb31c95221a39962eaadad88e Mon Sep 17 00:00:00 2001 From: DinhTran Date: Mon, 1 Apr 2024 11:03:24 +0700 Subject: [PATCH 3/3] chore: fix text --- src/components/GovernanceVotes/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx index ba5cfb7043..5e4e597fe7 100644 --- a/src/components/GovernanceVotes/index.tsx +++ b/src/components/GovernanceVotes/index.tsx @@ -301,7 +301,7 @@ const GovernanceVotesDetail: React.FC<{ ); }; - const listVotes = ["SPOs", "DRops", "CC"]; + const listVotes = ["SPOs", "DReps", "CC"]; if (loading || !initialized) { return ;