diff --git a/packages/page-council/src/Motions/Motion.tsx b/packages/page-council/src/Motions/Motion.tsx index 7ad584e761..762cbcf0c1 100644 --- a/packages/page-council/src/Motions/Motion.tsx +++ b/packages/page-council/src/Motions/Motion.tsx @@ -5,10 +5,10 @@ import { AccountId } from '@polkadot/types/interfaces'; import { DeriveCollectiveProposal } from '@polkadot/api-derive/types'; -import React from 'react'; +import React, { useEffect, useState } from 'react'; import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell'; -import { LinkExternal } from '@polkadot/react-components'; -import { useVotingStatus } from '@polkadot/react-hooks'; +import { Icon, LinkExternal } from '@polkadot/react-components'; +import { useAccounts, useVotingStatus } from '@polkadot/react-hooks'; import { BlockToTime } from '@polkadot/react-query'; import { formatNumber } from '@polkadot/util'; @@ -24,8 +24,26 @@ interface Props { prime: AccountId | null; } +interface VoterState { + hasVoted: boolean; + hasVotedAye: boolean; +} + function Motion ({ className = '', isMember, members, motion: { hash, proposal, votes }, prime }: Props): React.ReactElement | null { + const { allAccounts } = useAccounts(); const { hasFailed, isCloseable, isVoteable, remainingBlocks } = useVotingStatus(votes, members.length, 'council'); + const [{ hasVoted, hasVotedAye }, setIsVoter] = useState({ hasVoted: false, hasVotedAye: false }); + + useEffect((): void => { + if (votes) { + const hasVotedAye = allAccounts.some((address) => votes.ayes.some((accountId) => accountId.eq(address))); + + setIsVoter({ + hasVoted: hasVotedAye || allAccounts.some((address) => votes.nays.some((accountId) => accountId.eq(address))), + hasVotedAye + }); + } + }, [allAccounts, votes]); if (!votes) { return null; @@ -41,7 +59,7 @@ function Motion ({ className = '', isMember, members, motion: { hash, proposal, proposal={proposal} /> - {formatNumber(ayes.length)}/{formatNumber(threshold)} + {formatNumber(threshold)} {remainingBlocks && end && ( @@ -51,8 +69,17 @@ function Motion ({ className = '', isMember, members, motion: { hash, proposal, )} - - + + {isVoteable && !isCloseable && ( )} + + {isVoteable && ( + + )} + { +function Votes ({ isAye, members, threshold, votes }: Props): React.ReactElement { + const { t } = useTranslation(); + const [counter, setCounter] = useState(''); + + useEffect((): void => { + const max = isAye + ? threshold.toNumber() + : members.length - threshold.toNumber(); + + setCounter(`${votes.length}/${max}`); + }, [isAye, members, threshold, votes]); + return ( - {votes.map((address): React.ReactNode => ( - - ))} + {counter && votes.length !== 0 && ( + ('Aye {{counter}}', { replace: { counter } }) + : t('Nay {{counter}}', { replace: { counter } }) + } + > + {votes.map((address): React.ReactNode => ( + + ))} + + )} ); } diff --git a/packages/page-council/src/Motions/index.tsx b/packages/page-council/src/Motions/index.tsx index bfdb4eb63a..2b89494e4a 100644 --- a/packages/page-council/src/Motions/index.tsx +++ b/packages/page-council/src/Motions/index.tsx @@ -29,9 +29,10 @@ function Proposals ({ className = '', motions, prime }: Props): React.ReactEleme [t('motions'), 'start', 2], [t('threshold')], [t('voting end')], - [t('aye'), 'address'], - [t('nay'), 'address'], + [undefined, 'address'], + [undefined, 'address'], [], + [undefined, 'badge'], [undefined, 'mini'] ], [t]);