Fix infinite loop

Author: shad-k

ts/pages/governance/modal_vote.tsx

@@ -89,7 +89,7 @@ export const ModalVote: React.FC<ModalVoteProps> = ({ zeipId, isOpen, onDismiss,
                 logUtils.warn(err);
                 errorReporter.report(err);
             });
-    }, [account.address, apiClient, networkId, providerState.web3Wrapper, isFetchingVotingPowerData]);
+    }, [account.address, apiClient, networkId, providerState.web3Wrapper]);
 
     const onToggleConnectWalletDialog = React.useCallback(
         (open: boolean) => {
@@ -229,15 +229,15 @@ export const ModalTreasuryVote: React.FC<ModalVoteProps> = ({
         if (!account.address || isFetchingVotingPowerData) {
             return;
         }
-
+        setIsFetchingVotingPowerData(true);
         fetchVotingPower()
             .then(() => setIsFetchingVotingPowerData(false))
             .catch((err) => {
                 setIsFetchingVotingPowerData(false);
                 logUtils.warn(err);
                 errorReporter.report(err);
             });
-    }, [account.address, apiClient, contract, isFetchingVotingPowerData]);
+    }, [account.address, apiClient, contract]);
 
     const onToggleConnectWalletDialog = React.useCallback(
         (open: boolean) => {

ts/pages/governance/treasury.tsx

@@ -1,3 +1,4 @@
+import { ZrxTreasuryContract } from '@0x/contracts-treasury';
 import { BigNumber } from '@0x/utils';
 import { gql, request } from 'graphql-request';
 import * as _ from 'lodash';
@@ -7,6 +8,7 @@ import moment from 'moment';
 import * as React from 'react';
 import ReactMarkdown from 'react-markdown';
 import { useQuery } from 'react-query';
+import { useSelector } from 'react-redux';
 import { Redirect, useParams } from 'react-router-dom';
 import styled from 'styled-components';
 
@@ -23,9 +25,10 @@ import { TreasuryProposal } from 'ts/pages/governance/data';
 import { ModalTreasuryVote } from 'ts/pages/governance/modal_vote';
 import { VoteInfo, VoteValue } from 'ts/pages/governance/vote_form';
 import { VoteStats } from 'ts/pages/governance/vote_stats';
+import { State } from 'ts/redux/reducer';
 import { colors } from 'ts/style/colors';
 import { WebsitePaths } from 'ts/types';
-import { configs, GOVERNANCE_THEGRAPH_ENDPOINT } from 'ts/utils/configs';
+import { configs, GOVERNANCE_THEGRAPH_ENDPOINT, GOVERNOR_CONTRACT_ADDRESS } from 'ts/utils/configs';
 import { documentConstants } from 'ts/utils/document_meta_constants';
 import { utils } from 'ts/utils/utils';
 
@@ -62,6 +65,7 @@ export const Treasury: React.FC<{}> = () => {
     const [isVoteModalOpen, setIsVoteModalOpen] = React.useState<boolean>(false);
     const [quorumThreshold, setQuorumThreshold] = React.useState<BigNumber>();
     const { id: proposalId } = useParams();
+    const providerState = useSelector((state: State) => state.providerState);
 
     const { data } = useQuery('proposal', async () => {
         const { proposal: proposalFromGraph } = await request(GOVERNANCE_THEGRAPH_ENDPOINT, FETCH_PROPOSAL, {
@@ -72,15 +76,16 @@ export const Treasury: React.FC<{}> = () => {
     });
 
     React.useEffect(() => {
-        // tslint:disable-next-line:no-floating-promises
+        const contract = new ZrxTreasuryContract(GOVERNOR_CONTRACT_ADDRESS.ZRX, providerState.provider);
+        // tslint:disable-next-line: no-floating-promises
         (async () => {
-            // const qThreshold = await contract.quorumThreshold().callAsync();
-            // setQuorumThreshold(qThreshold);
-            const hardCodeQuorumThreshold = new BigNumber('10000000');
-            setQuorumThreshold(hardCodeQuorumThreshold);
+            const qThreshold = await contract.quorumThreshold().callAsync();
+            setQuorumThreshold(qThreshold);
         })();
+    }, [providerState]);
 
-        if (data) {
+    React.useEffect(() => {
+        if (data && quorumThreshold) {
             // Disabling linter to allow for shadowed variables
             // tslint:disable no-shadowed-variable
             const {

ts/pages/governance/vote_index.tsx

@@ -1,12 +1,12 @@
-// import { ZrxTreasuryContract } from '@0x/contracts-treasury';
+import { ZrxTreasuryContract } from '@0x/contracts-treasury';
 import { BigNumber } from '@0x/utils';
 import { gql, request } from 'graphql-request';
 import * as _ from 'lodash';
 import CircularProgress from 'material-ui/CircularProgress';
 import moment from 'moment';
 import * as React from 'react';
 import { useQuery } from 'react-query';
-// import { useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import styled from 'styled-components';
 
 import { Button } from 'ts/components/button';
@@ -18,10 +18,10 @@ import { Heading, Paragraph } from 'ts/components/text';
 import { Text } from 'ts/components/ui/text';
 import { Proposal, proposals as prodProposals, stagingProposals, TreasuryProposal } from 'ts/pages/governance/data';
 import { VoteIndexCard } from 'ts/pages/governance/vote_index_card';
-// import { State } from 'ts/redux/reducer';
+import { State } from 'ts/redux/reducer';
 import { colors } from 'ts/style/colors';
 import { OnChainProposal, TallyInterface, VotingCardType } from 'ts/types';
-import { configs, GOVERNANCE_THEGRAPH_ENDPOINT } from 'ts/utils/configs';
+import { configs, GOVERNANCE_THEGRAPH_ENDPOINT, GOVERNOR_CONTRACT_ADDRESS } from 'ts/utils/configs';
 import { constants } from 'ts/utils/constants';
 import { documentConstants } from 'ts/utils/document_meta_constants';
 import { environments } from 'ts/utils/environments';
@@ -147,29 +147,34 @@ export const VoteIndex: React.FC<VoteIndexProps> = () => {
     const [filter, setFilter] = React.useState<string>('all');
     const [tallys, setTallys] = React.useState<ZeipTallyMap>(undefined);
     const [proposals, setProposals] = React.useState<ProposalWithOrder[]>([]);
-    const [isLoading, setLoading] = React.useState<boolean>(true);
     const [quorumThreshold, setQuorumThreshold] = React.useState<BigNumber>();
     const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
-    // const providerState = useSelector((state: State) => state.providerState);
+    const providerState = useSelector((state: State) => state.providerState);
 
-    const { data, isLoading: isQueryLoading } = useQuery('proposals', async () => {
+    const { data, isLoading } = useQuery('proposals', async () => {
         const { proposals: treasuryProposals } = await request(GOVERNANCE_THEGRAPH_ENDPOINT, FETCH_PROPOSALS);
         return treasuryProposals;
     });
 
-    // const contract = new ZrxTreasuryContract(GOVERNOR_CONTRACT_ADDRESS.ZRX, providerState.provider);
-
     React.useEffect(() => {
         // tslint:disable-next-line: no-floating-promises
         (async () => {
-            // const qThreshold = await contract.quorumThreshold().callAsync();
-            const hardCodeQuorumThreshold = new BigNumber('10000000');
-            setQuorumThreshold(hardCodeQuorumThreshold);
             const tallyMap: ZeipTallyMap = await fetchTallysAsync();
             setTallys(tallyMap);
         })();
+    }, []);
 
-        if (data) {
+    React.useEffect(() => {
+        const contract = new ZrxTreasuryContract(GOVERNOR_CONTRACT_ADDRESS.ZRX, providerState.provider);
+        // tslint:disable-next-line: no-floating-promises
+        (async () => {
+            const qThreshold = await contract.quorumThreshold().callAsync();
+            setQuorumThreshold(qThreshold);
+        })();
+    }, [providerState]);
+
+    React.useEffect(() => {
+        if (data && quorumThreshold) {
             const onChainProposals = data.map((proposal: OnChainProposal) => {
                 const { id, votesAgainst, votesFor, description, executionTimestamp, voteEpoch } = proposal;
                 const againstVotes = new BigNumber(votesAgainst);
@@ -203,11 +208,10 @@ export const VoteIndex: React.FC<VoteIndexProps> = () => {
                     endDate,
                 };
             });
-            setLoading(isQueryLoading);
             sortProposals(onChainProposals.reverse(), ZEIP_PROPOSALS);
             setProposals(onChainProposals);
         }
-    }, [data, isQueryLoading, quorumThreshold]);
+    }, [data, quorumThreshold]);
 
     const applyFilter = (value: string) => {
         setFilter(value);