diff --git a/packages/page-council/src/Motions/Motion.tsx b/packages/page-council/src/Motions/Motion.tsx
index d7f0579630..6e6d7bb9a8 100644
--- a/packages/page-council/src/Motions/Motion.tsx
+++ b/packages/page-council/src/Motions/Motion.tsx
@@ -13,7 +13,7 @@ import { BlockToTime } from '@polkadot/react-query';
import { formatNumber } from '@polkadot/util';
import Close from './Close';
-import Voters from './Votes';
+import Voters from './Voters';
import Voting from './Voting';
interface Props {
@@ -69,17 +69,19 @@ function Motion ({ className = '', isMember, members, motion: { hash, proposal,
)}
-
-
+ |
+
+
+ |
{isVoteable && !isCloseable && (
| null {
+ const { t } = useTranslation();
+
+ const counter = useMemo(
+ (): string => {
+ const num = threshold.toNumber();
+ const max = isAye
+ ? num
+ : members?.length
+ ? (members.length - num) + 1
+ : 0;
+
+ return `${votes.length}${max ? `/${max}` : ''}`;
+ },
+ [isAye, members, threshold, votes]
+ );
+
+ if (!counter || !votes.length) {
+ return null;
+ }
+
+ return (
+ ('Aye {{counter}}', { replace: { counter } })
+ : t('Nay {{counter}}', { replace: { counter } })
+ }
+ >
+ {votes.map((address): React.ReactNode => (
+
+ ))}
+
+ );
+}
+
+export default React.memo(Voters);
diff --git a/packages/page-council/src/Motions/Votes.tsx b/packages/page-council/src/Motions/Votes.tsx
deleted file mode 100644
index 842df43a88..0000000000
--- a/packages/page-council/src/Motions/Votes.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { AccountId, MemberCount } from '@polkadot/types/interfaces';
-
-import React, { useEffect, useState } from 'react';
-import { AddressMini, Expander } from '@polkadot/react-components';
-
-import { useTranslation } from '../translate';
-
-interface Props {
- isAye?: boolean;
- members: string[];
- votes: AccountId[];
- threshold: MemberCount;
-}
-
-function Votes ({ isAye, members, threshold, votes }: Props): React.ReactElement {
- const { t } = useTranslation();
- const [counter, setCounter] = useState('');
-
- useEffect((): void => {
- const num = threshold.toNumber();
- const max = isAye
- ? num
- : members?.length
- ? (members.length - num) + 1
- : 0;
-
- setCounter(`${votes.length}${max ? `/${max}` : ''}`);
- }, [isAye, members, threshold, votes]);
-
- return (
- |
- {counter && votes.length !== 0 && (
- ('Aye {{counter}}', { replace: { counter } })
- : t('Nay {{counter}}', { replace: { counter } })
- }
- >
- {votes.map((address): React.ReactNode => (
-
- ))}
-
- )}
- |
- );
-}
-
-export default React.memo(Votes);
diff --git a/packages/page-council/src/Motions/index.tsx b/packages/page-council/src/Motions/index.tsx
index 9171e0538f..cb940cf601 100644
--- a/packages/page-council/src/Motions/index.tsx
+++ b/packages/page-council/src/Motions/index.tsx
@@ -29,8 +29,7 @@ function Proposals ({ className = '', motions, prime }: Props): React.ReactEleme
[t('motions'), 'start', 2],
[t('threshold')],
[t('voting end')],
- [undefined, 'address'],
- [undefined, 'address'],
+ [t('votes'), 'start'],
[],
[undefined, 'badge'],
[undefined, 'mini']
diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index 48dca4d67a..af56a53598 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@@ -6,7 +6,7 @@ import { DeriveReferendumExt } from '@polkadot/api-derive/types';
import { Balance, BlockNumber } from '@polkadot/types/interfaces';
import BN from 'bn.js';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
import styled from 'styled-components';
import { Badge, Button, Icon, LinkExternal } from '@polkadot/react-components';
import { useAccounts, useApi, useCall } from '@polkadot/react-hooks';
@@ -42,33 +42,40 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
const { allAccounts } = useAccounts();
const bestNumber = useCall(api.derive.chain.bestNumber);
const totalIssuance = useCall(api.query.balances.totalIssuance);
- const [percentages, setPercentages] = useState(null);
- const [{ hasVoted, hasVotedAye }, setHasVoted] = useState({ hasVoted: false, hasVotedAye: false });
const { changeAye, changeNay } = useChangeCalc(status.threshold, votedAye, votedNay, votedTotal);
const threshold = useMemo(
() => status.threshold.type.toString().replace('majority', ' majority '),
[status]
);
- useEffect((): void => {
- if (totalIssuance) {
- const aye = allAye.reduce((total: BN, { balance }) => total.add(balance), new BN(0));
- const nay = allNay.reduce((total: BN, { balance }) => total.add(balance), new BN(0));
- const hasVotedAye = allAye.some(({ accountId }) => allAccounts.includes(accountId.toString()));
- const hasVoted = hasVotedAye || allNay.some(({ accountId }) => allAccounts.includes(accountId.toString()));
+ const [percentages, { hasVoted, hasVotedAye }] = useMemo(
+ (): [Percentages | null, VoteType] => {
+ if (totalIssuance) {
+ const aye = allAye.reduce((total: BN, { balance }) => total.add(balance), new BN(0));
+ const nay = allNay.reduce((total: BN, { balance }) => total.add(balance), new BN(0));
+ const hasVotedAye = allAye.some(({ accountId }) => allAccounts.includes(accountId.toString()));
- setPercentages({
- aye: votedTotal.isZero()
- ? ''
- : `${(aye.muln(10000).div(votedTotal).toNumber() / 100).toFixed(2)}%`,
- nay: votedTotal.isZero()
- ? ''
- : `${(nay.muln(10000).div(votedTotal).toNumber() / 100).toFixed(2)}%`,
- turnout: `${((votedTotal.muln(10000).div(totalIssuance).toNumber()) / 100).toFixed(2)}%`
- });
- setHasVoted({ hasVoted, hasVotedAye });
- }
- }, [allAccounts, allAye, allNay, totalIssuance, votedTotal]);
+ return [
+ {
+ aye: votedTotal.isZero()
+ ? ''
+ : `${(aye.muln(10000).div(votedTotal).toNumber() / 100).toFixed(2)}%`,
+ nay: votedTotal.isZero()
+ ? ''
+ : `${(nay.muln(10000).div(votedTotal).toNumber() / 100).toFixed(2)}%`,
+ turnout: `${((votedTotal.muln(10000).div(totalIssuance).toNumber()) / 100).toFixed(2)}%`
+ },
+ {
+ hasVoted: hasVotedAye || allNay.some(({ accountId }) => allAccounts.includes(accountId.toString())),
+ hasVotedAye
+ }
+ ];
+ } else {
+ return [null, { hasVoted: false, hasVotedAye: false }];
+ }
+ },
+ [allAccounts, allAye, allNay, totalIssuance, votedTotal]
+ );
if (!bestNumber || status.end.sub(bestNumber).lten(0)) {
return null;
@@ -102,22 +109,6 @@ function Referendum ({ className = '', value: { allAye, allNay, image, imageHash
)}
|
-
-
{isBoolean(isPassing) && (
)}
|
+
+
+
+ |
{!image?.proposal && (
diff --git a/packages/page-democracy/src/Overview/ReferendumVotes.tsx b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
index ab8ff777eb..038cdeffe3 100644
--- a/packages/page-democracy/src/Overview/ReferendumVotes.tsx
+++ b/packages/page-democracy/src/Overview/ReferendumVotes.tsx
@@ -5,8 +5,7 @@
import { DeriveReferendumVote } from '@polkadot/api-derive/types';
import BN from 'bn.js';
-import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import React, { useMemo, useState } from 'react';
import { Expander, Icon, Tooltip } from '@polkadot/react-components';
import { FormatBalance } from '@polkadot/react-query';
import { formatNumber } from '@polkadot/util';
@@ -18,6 +17,7 @@ interface Props {
change: BN;
className?: string;
count: number;
+ isAye: boolean;
isWinning: boolean;
index: BN;
total: BN;
@@ -28,75 +28,67 @@ const LOCKS = [1, 10, 20, 30, 40, 50, 60];
let id = 0;
-function ReferendumVotes ({ change, className = '', count, index, isWinning, total, votes }: Props): React.ReactElement {
+function ReferendumVotes ({ change, className, count, index, isAye, isWinning, total, votes }: Props): React.ReactElement | null {
const { t } = useTranslation();
const [trigger] = useState(`votes-${index.toString()}-${++id}`);
- const [sorted, setSorted] = useState([]);
- useEffect((): void => {
- setSorted(
- votes.sort((a, b) => {
- const ta = a.balance.muln(LOCKS[a.vote.conviction.toNumber()]).divn(10);
- const tb = b.balance.muln(LOCKS[b.vote.conviction.toNumber()]).divn(10);
+ const sorted = useMemo(
+ () => votes.sort((a, b) => {
+ const ta = a.balance.muln(LOCKS[a.vote.conviction.toNumber()]).divn(10);
+ const tb = b.balance.muln(LOCKS[b.vote.conviction.toNumber()]).divn(10);
- return tb.cmp(ta);
- })
- );
- }, [votes]);
+ return tb.cmp(ta);
+ }),
+ [votes]
+ );
+
+ if (!count) {
+ return null;
+ }
return (
- |
-
- }
- summarySub={
- change.gtn(0)
- ? (
- <>
-
-
- ('The amount this total can be reduced by to change the referendum outcome. This assumes changes to the convictions of the existing votes, with no additional turnout.')
- : t('The amount this total should be increased by to change the referendum outcome. This assumes additional turnout with new votes at 1x conviction.')
- }
- trigger={trigger}
- />
-
- )
- : ''
- }
- >
- {sorted.map((vote) =>
-
- )}
-
- |
+
+ {isAye
+ ? t('Aye {{count}}', { replace: { count: ` (${formatNumber(count)})` } })
+ : t('Nay {{count}}', { replace: { count: ` (${formatNumber(count)})` } })
+ }
+
+
+ }
+ summarySub={
+
+ {change.gtn(0) && (
+
+
+
+ ('The amount this total can be reduced by to change the referendum outcome. This assumes changes to the convictions of the existing votes, with no additional turnout.')
+ : t('The amount this total should be increased by to change the referendum outcome. This assumes additional turnout with new votes at 1x conviction.')
+ }
+ trigger={trigger}
+ />
+
+ )}
+ |