Using council members from chain db rather than onchain.

front-end/package.json

@@ -18,6 +18,7 @@
     "Thibaut Sardan"
   ],
   "dependencies": {
+    "@ardatan/graphql-tools": "^4.1.0",
     "@polkadot/api": "^1.18.1",
     "@polkadot/extension-dapp": "^0.30.1",
     "@polkadot/extension-inject": "^0.30.1",

front-end/src/components/BlockCountdown.tsx

@@ -2,14 +2,13 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { ApiPromiseContext } from '@substrate/context';
 import styled from '@xstyled/styled-components';
 import BN from 'bn.js';
-import React, { useContext, useEffect, useState } from 'react';
+import React from 'react';
 import { Popup } from 'semantic-ui-react';
-import { chainProperties } from 'src/global/networkConstants';
+import { useBlockTime } from 'src/hooks';
+import useCurrentBlock from 'src/hooks/useCurrentBlock';
 import blockToTime from 'src/util/blockToTime';
-import getNetwork from 'src/util/getNetwork';
 
 interface Props {
 	className?: string
@@ -22,31 +21,10 @@ const DivContent = styled.div`
 `;
 
 const BlockCountdown = ({ className, endBlock }:Props ) => {
-	const network = getNetwork();
 	const ZERO = new BN(0);
-	const { api, isApiReady } = useContext(ApiPromiseContext);
-	const [currentBlock, setCurrentBlock] = useState(ZERO);
+	const currentBlock = useCurrentBlock() || ZERO;
 	const blocksRemaining = endBlock - currentBlock.toNumber();
-	const DEFAULT_TIME = chainProperties?.[network]?.blockTime;
-	const [blocktime, setBlocktime] = useState(DEFAULT_TIME);
-
-	useEffect(() => {
-		if (!isApiReady) {
-			return;
-		}
-
-		let unsubscribe: () => void;
-
-		setBlocktime(api.consts.babe?.expectedBlockTime.toNumber());
-
-		api.derive.chain.bestNumber((number) => {
-			setCurrentBlock(number);
-		})
-			.then(unsub => {unsubscribe = unsub;})
-			.catch(e => console.error(e));
-
-		return () => unsubscribe && unsubscribe();
-	}, [api, isApiReady]);
+	const { blocktime } = useBlockTime();
 
 	return (
 		<Popup
@@ -59,4 +37,4 @@ const BlockCountdown = ({ className, endBlock }:Props ) => {
 	);
 };
 
-export default BlockCountdown;
+export default BlockCountdown;

front-end/src/components/BlocksToTime.tsx

@@ -1,15 +1,13 @@
 // Copyright 2019-2020 @paritytech/polkassembly 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 { ApiPromiseContext } from '@substrate/context';
+
 import styled from '@xstyled/styled-components';
 import BN from 'bn.js';
-import React, { useContext, useState } from 'react';
-import { useEffect } from 'react';
+import React from 'react';
 import { Popup } from 'semantic-ui-react';
-import { chainProperties } from 'src/global/networkConstants';
+import { useBlockTime } from 'src/hooks';
 import blockToTime from 'src/util/blockToTime';
-import getNetwork from 'src/util/getNetwork';
 
 interface Props {
 	blocks: number | BN;
@@ -22,29 +20,17 @@ const DivContent = styled.div`
 `;
 
 const BlocksToTime = ({ blocks, className }:Props ) => {
-	const network = getNetwork();
-	const { api, isApiReady } = useContext(ApiPromiseContext);
-	const DEFAULT_TIME = chainProperties?.[network]?.blockTime;
-	const [blocktime, setBlocktime] = useState(DEFAULT_TIME);
-
-	useEffect(() => {
-
-		if (!isApiReady) {
-			return;
-		}
-
-		setBlocktime(api.consts.babe?.expectedBlockTime.toNumber());
-	}, [ api, isApiReady]);
+	const { blocktime } = useBlockTime();
 
 	return (
 		<Popup
 			className={className}
-			trigger={<div>{blockToTime(blocks , blocktime)}</div>}
+			trigger={<div>{blockToTime(blocks, blocktime)}</div>}
 			content={<DivContent>{`${blocks} blocks`}</DivContent>}
 			hoverable={true}
 			position='top left'
 		/>
 	);
 };
 
-export default BlocksToTime;
+export default BlocksToTime;

front-end/src/components/Post/Poll/CouncilSignals.tsx

@@ -2,14 +2,14 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
-import { DeriveElectionsInfo } from '@polkadot/api-derive/types';
-import { ApiPromiseContext } from '@substrate/context';
+import { QueryResult } from '@apollo/react-common';
 import styled from '@xstyled/styled-components';
-import React, { useContext, useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Grid, Icon } from 'semantic-ui-react';
+import useCurrentBlock from 'src/hooks/useCurrentBlock';
 import HelperTooltip from 'src/ui-components/HelperTooltip';
 
-import { PostVotesQuery } from '../../../generated/graphql';
+import { CouncilAtBlockNumberQuery, CouncilAtBlockNumberQueryVariables, PollVotesQuery, useCouncilAtBlockNumberQuery } from '../../../generated/graphql';
 import { OffchainVote, Vote } from '../../../types';
 import Address from '../../../ui-components/Address';
 import Card from '../../../ui-components/Card';
@@ -19,48 +19,51 @@ import getEncodedAddress from '../../../util/getEncodedAddress';
 
 interface Props {
 	className?: string
-	data?: PostVotesQuery | undefined
+	data?: PollVotesQuery | undefined
+	endBlock: number
 }
 
-const CouncilSignals = ({ className, data }: Props) => {
+const CouncilSignals = ({ className, endBlock, data }: Props) => {
 	const [ayes, setAyes] = useState(0);
 	const [nays, setNays] = useState(0);
 	const [memberSet, setMemberSet] = useState<Set<string>>(new Set<string>());
 	const [councilVotes, setCouncilVotes] = useState<OffchainVote[]>([]);
-	const { api, isApiReady } = useContext(ApiPromiseContext);
+	const currentBlockNumber = useCurrentBlock()?.toNumber() || endBlock;
 
-	useEffect(() => {
-		if (!isApiReady){
-			return;
-		}
-
-		let unsubscribe: () => void;
+	const councilAtPollEndBlockNumber = useCouncilAtBlockNumberQuery({ variables: { blockNumber: endBlock } });
+	const councilAtCurrentBlockNumber = useCouncilAtBlockNumberQuery({ variables: { blockNumber: currentBlockNumber } });
 
-		api.derive.elections.info((info: DeriveElectionsInfo) => {
-			const memberSet = new Set<string>();
+	const getCouncilMembers = (councilAtBlockNumber: QueryResult<CouncilAtBlockNumberQuery, CouncilAtBlockNumberQueryVariables>): Set<string> => {
+		const memberSet = new Set<string>();
+		councilAtBlockNumber?.data?.councils?.[0]?.members?.forEach((member) => {
+			const address = getEncodedAddress(member.address);
+			if (address) {
+				memberSet.add(address);
+			}
+		});
+		return memberSet;
+	};
 
-			info?.members.map(([accountId]) => {
-				const address = getEncodedAddress(accountId.toString());
-				if (address) {
-					memberSet.add(address);
-				}
-			});
+	useEffect(() => {
+		const pollClosingBlockNumber = endBlock;
+		let memberSet = new Set<string>();
 
-			setMemberSet(memberSet);
-		})
-			.then(unsub => { unsubscribe = unsub; })
-			.catch(e => console.error(e));
+		if (pollClosingBlockNumber > currentBlockNumber) {
+			memberSet = getCouncilMembers(councilAtCurrentBlockNumber);
+		} else {
+			memberSet = getCouncilMembers(councilAtPollEndBlockNumber);
+		}
 
-		return () => unsubscribe && unsubscribe();
-	}, [api, isApiReady]);
+		setMemberSet(memberSet);
+	}, [endBlock, currentBlockNumber, councilAtPollEndBlockNumber, councilAtCurrentBlockNumber]);
 
 	useEffect(() => {
 		let ayes = 0;
 		let nays = 0;
 		const defaultAddressField = getDefaultAddressField();
 		const councilVotes: OffchainVote[]  = [];
 
-		data?.post_votes?.forEach(({ vote, voter }) => {
+		data?.poll_votes?.forEach(({ vote, voter }) => {
 			const defaultAddress = voter?.[defaultAddressField];
 
 			if (defaultAddress && memberSet.has(defaultAddress)) {

front-end/src/components/Post/Poll/GeneralSignals.tsx

@@ -5,11 +5,12 @@
 import styled from '@xstyled/styled-components';
 import { ApolloQueryResult } from 'apollo-client';
 import React, { useCallback, useContext, useState } from 'react';
+import useCurrentBlock from 'src/hooks/useCurrentBlock';
 import ButtonLink from 'src/ui-components/ButtonLink';
 import HelperTooltip from 'src/ui-components/HelperTooltip';
 
 import { UserDetailsContext } from '../../../context/UserDetailsContext';
-import { PostVotesQuery, PostVotesQueryVariables, useAddPostVoteMutation, useDeleteVoteMutation } from '../../../generated/graphql';
+import { PollVotesQuery, PollVotesQueryVariables, useAddPollVoteMutation, useDeleteVoteMutation } from '../../../generated/graphql';
 import { Vote } from '../../../types';
 import AyeNayButtons from '../../../ui-components/AyeNayButtons';
 import Card from '../../../ui-components/Card';
@@ -20,17 +21,20 @@ import GeneralChainSignalBar from '../../../ui-components/GeneralChainSignalBar'
 interface Props {
 	ayes: number,
 	className?: string,
-	ownVote?: Vote | null,
+	endBlock: number
 	nays: number,
-	postId: number
-	refetch: (variables?: PostVotesQueryVariables | undefined) => Promise<ApolloQueryResult<PostVotesQuery>>
+	ownVote?: Vote | null,
+	pollId: number
+	refetch: (variables?: PollVotesQueryVariables | undefined) => Promise<ApolloQueryResult<PollVotesQuery>>
 }
 
-const CouncilSignals = ({ className, ayes, ownVote, nays, postId, refetch }: Props) => {
+const CouncilSignals = ({ ayes, className, endBlock, nays, ownVote, pollId, refetch }: Props) => {
 	const { id } = useContext(UserDetailsContext);
 	const [error, setErr] = useState<Error | null>(null);
-	const [addPostVoteMutation] = useAddPostVoteMutation();
+	const [addPollVoteMutation] = useAddPollVoteMutation();
 	const [deleteVoteMutation] = useDeleteVoteMutation();
+	const currentBlockNumber = useCurrentBlock()?.toNumber() || 0;
+	const canVote =  endBlock > currentBlockNumber;
 
 	const cancelVote = useCallback(async () => {
 		if (!id) {
@@ -40,7 +44,7 @@ const CouncilSignals = ({ className, ayes, ownVote, nays, postId, refetch }: Pro
 		try {
 			await deleteVoteMutation({
 				variables: {
-					postId,
+					pollId,
 					userId: id
 				}
 			});
@@ -49,17 +53,17 @@ const CouncilSignals = ({ className, ayes, ownVote, nays, postId, refetch }: Pro
 		} catch (error) {
 			setErr(error);
 		}
-	}, [id, deleteVoteMutation, postId, refetch]);
+	}, [id, deleteVoteMutation, pollId, refetch]);
 
 	const castVote = useCallback(async (vote: Vote) => {
 		if (!id) {
 			return;
 		}
 
 		try {
-			await addPostVoteMutation({
+			await addPollVoteMutation({
 				variables: {
-					postId,
+					pollId,
 					userId: id,
 					vote
 				}
@@ -69,7 +73,7 @@ const CouncilSignals = ({ className, ayes, ownVote, nays, postId, refetch }: Pro
 		} catch (error) {
 			setErr(error);
 		}
-	}, [id, addPostVoteMutation, postId, refetch]);
+	}, [id, addPollVoteMutation, pollId, refetch]);
 
 	return (
 		<Card className={className}>
@@ -84,11 +88,12 @@ const CouncilSignals = ({ className, ayes, ownVote, nays, postId, refetch }: Pro
 			<Form standalone={false}>
 				<AyeNayButtons
 					className={`signal-btns ${ownVote}`}
-					disabled={!id || !!ownVote}
+					disabled={!id || !!ownVote || !canVote}
 					onClickAye={() => castVote(Vote.AYE)}
 					onClickNay={() => castVote(Vote.NAY)}
 				/>
-				{ownVote &&
+				{!canVote && <span>Poll finished</span>}
+				{ownVote && canVote &&
 					<ButtonLink className='info text-muted' onClick={cancelVote}>Cancel {ownVote.toLowerCase()} vote</ButtonLink>
 				}
 			</Form>
@@ -122,4 +127,4 @@ export default styled(CouncilSignals)`
 			opacity: 1 !important;
 		}
 	}
-`;
+`;

front-end/src/components/Post/Poll/Poll.tsx

@@ -0,0 +1,56 @@
+// Copyright 2019-2020 @paritytech/polkassembly 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 React, { useContext } from 'react';
+
+import { UserDetailsContext } from '../../../context/UserDetailsContext';
+import { usePollVotesQuery } from '../../../generated/graphql';
+import { Vote } from '../../../types';
+import Card from '../../../ui-components/Card';
+import FilteredError from '../../../ui-components/FilteredError';
+import CouncilSignals from './CouncilSignals';
+import GeneralSignals from './GeneralSignals';
+
+interface Props {
+	pollId: number
+	endBlock: number
+}
+
+const Poll = ({ pollId, endBlock }: Props) => {
+	const { id } = useContext(UserDetailsContext);
+	const { data, error, refetch } = usePollVotesQuery({ variables: { pollId } });
+	let ayes = 0;
+	let nays = 0;
+	let ownVote: Vote | null = null;
+
+	data?.poll_votes?.forEach(({ vote, voter }) => {
+		if (voter?.id === id) {
+			ownVote = vote;
+		}
+		if (vote === Vote.AYE) {
+			ayes++;
+		}
+		if (vote === Vote.NAY) {
+			nays++;
+		}
+	});
+
+	if (error?.message) return <Card><FilteredError text={error.message}/></Card>;
+
+	return (
+		<>
+			<GeneralSignals
+				ayes={ayes}
+				endBlock={endBlock}
+				nays={nays}
+				ownVote={ownVote}
+				pollId={pollId}
+				refetch={refetch}
+			/>
+			<CouncilSignals data={data} endBlock={endBlock} />
+		</>
+	);
+};
+
+export default Poll;