Use useCollectiveModule for all collective locations (#5762)

* Use useCollectiveModule for all collective locations

* staking useCollectiveModule

* Bounties useCollectiveModule

* Mock collective

* Adjust

* useMember -> useCollectiveMembers

Author: jacogr

packages/page-bounties/src/Bounties.spec.ts

@@ -27,8 +27,12 @@ jest.mock('@polkadot/react-hooks/useTreasury', () => ({
   useTreasury: () => mockHooks.treasury
 }));
 
-jest.mock('@polkadot/react-hooks/useMembers', () => ({
-  useMembers: () => mockHooks.members
+jest.mock('@polkadot/react-hooks/useCollectiveInstance', () => ({
+  useCollectiveInstance: () => 'council'
+}));
+
+jest.mock('@polkadot/react-hooks/useCollectiveMembers', () => ({
+  useCollectiveMembers: () => mockHooks.members
 }));
 
 jest.mock('@polkadot/react-hooks/useBlockTime', () => ({

packages/page-bounties/src/BountyActions/BountyInitiateVoting.tsx

@@ -9,7 +9,7 @@ import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import { getTreasuryProposalThreshold } from '@polkadot/apps-config';
 import { Button, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useMembers, useToggle } from '@polkadot/react-hooks';
+import { useApi, useCollectiveInstance, useCollectiveMembers, useToggle } from '@polkadot/react-hooks';
 
 import { truncateTitle } from '../helpers';
 import { useBounties } from '../hooks';
@@ -26,7 +26,8 @@ const BOUNTY_METHODS = ['approveBounty', 'closeBounty'];
 function BountyInitiateVoting ({ description, index, proposals }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const { isMember, members } = useMembers('council');
+  const { isMember, members } = useCollectiveMembers('council');
+  const councilMod = useCollectiveInstance('council');
   const { approveBounty, closeBounty } = useBounties();
   const [isOpen, toggleOpen] = useToggle();
   const [accountId, setAccountId] = useState<string | null>(null);
@@ -43,7 +44,7 @@ function BountyInitiateVoting ({ description, index, proposals }: Props): React.
 
   const isVotingInitiated = useMemo(() => proposals?.filter(({ proposal }) => BOUNTY_METHODS.includes(proposal.method)).length !== 0, [proposals]);
 
-  return isMember && !isVotingInitiated
+  return isMember && !isVotingInitiated && councilMod
     ? (
       <>
         <Button
@@ -77,7 +78,7 @@ function BountyInitiateVoting ({ description, index, proposals }: Props): React.
                 label={t<string>('Approve')}
                 onStart={toggleOpen}
                 params={[threshold, approveBountyProposal.current, approveBountyProposal.current.length]}
-                tx={api.tx.council.propose}
+                tx={api.tx[councilMod].propose}
               />
               <TxButton
                 accountId={accountId}
@@ -86,7 +87,7 @@ function BountyInitiateVoting ({ description, index, proposals }: Props): React.
                 label={t<string>('Reject')}
                 onStart={toggleOpen}
                 params={[threshold, closeBountyProposal.current, closeBountyProposal.current.length]}
-                tx={api.tx.council.propose}
+                tx={api.tx[councilMod].propose}
               />
             </Modal.Actions>
           </Modal>

packages/page-bounties/src/BountyActions/ProposeCuratorAction.tsx

@@ -9,7 +9,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { getTreasuryProposalThreshold } from '@polkadot/apps-config';
 import { Button, InputAddress, InputBalance, MarkError, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useMembers, useToggle } from '@polkadot/react-hooks';
+import { useApi, useCollectiveInstance, useCollectiveMembers, useToggle } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 
 import { truncateTitle } from '../helpers';
@@ -28,7 +28,8 @@ const BOUNTY_METHODS = ['proposeCurator'];
 function ProposeCuratorAction ({ description, index, proposals, value }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const { isMember, members } = useMembers('council');
+  const { isMember, members } = useCollectiveMembers('council');
+  const councilMod = useCollectiveInstance('council');
   const { proposeCurator } = useBounties();
   const [isOpen, toggleOpen] = useToggle();
   const [accountId, setAccountId] = useState<string | null>(null);
@@ -51,7 +52,7 @@ function ProposeCuratorAction ({ description, index, proposals, value }: Props):
     setIsFeeValid(!!value?.gt(fee));
   }, [value, fee]);
 
-  return isMember && !isVotingInitiated
+  return isMember && !isVotingInitiated && councilMod
     ? (
       <>
         <Button
@@ -107,7 +108,7 @@ function ProposeCuratorAction ({ description, index, proposals, value }: Props):
                 label={t<string>('Propose curator')}
                 onStart={toggleOpen}
                 params={[threshold, proposeCuratorProposal, proposeCuratorProposal?.length]}
-                tx={api.tx.council.propose}
+                tx={api.tx[councilMod].propose}
               />
             </Modal.Actions>
           </Modal>

packages/page-bounties/src/BountyExtraActions/CloseBounty.tsx

@@ -8,7 +8,7 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { getTreasuryProposalThreshold } from '@polkadot/apps-config';
 import { InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useMembers } from '@polkadot/react-hooks';
+import { useApi, useCollectiveInstance, useCollectiveMembers } from '@polkadot/react-hooks';
 
 import { truncateTitle } from '../helpers';
 import { useBounties } from '../hooks';
@@ -23,7 +23,8 @@ interface Props {
 function CloseBounty ({ description, index, toggleOpen }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const { members } = useMembers('council');
+  const { members } = useCollectiveMembers('council');
+  const councilMod = useCollectiveInstance('council');
   const { closeBounty } = useBounties();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [threshold, setThreshold] = useState<BN>();
@@ -36,6 +37,10 @@ function CloseBounty ({ description, index, toggleOpen }: Props): React.ReactEle
 
   const closeBountyProposal = useRef(closeBounty(index));
 
+  if (!councilMod) {
+    return null;
+  }
+
   return (
     <Modal
       header={`${t<string>('close bounty')} - "${truncateTitle(description, 30)}"`}
@@ -61,7 +66,7 @@ function CloseBounty ({ description, index, toggleOpen }: Props): React.ReactEle
           label={t<string>('Close Bounty')}
           onStart={toggleOpen}
           params={[threshold, closeBountyProposal.current, closeBountyProposal.current.length]}
-          tx={api.tx.council.propose}
+          tx={api.tx[councilMod].propose}
         />
       </Modal.Actions>
     </Modal>

packages/page-bounties/src/BountyExtraActions/SlashCurator.tsx

@@ -9,7 +9,7 @@ import React, { useEffect, useMemo, useState } from 'react';
 import { SubmittableExtrinsic } from '@polkadot/api/types';
 import { getTreasuryProposalThreshold } from '@polkadot/apps-config';
 import { InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import { useAccounts, useApi, useMembers } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useCollectiveInstance, useCollectiveMembers } from '@polkadot/react-hooks';
 
 import { truncateTitle } from '../helpers';
 import { useBounties } from '../hooks';
@@ -32,13 +32,14 @@ interface ActionProperties {
   proposingAccountTip: string;
   tip: string;
   title: string;
-  tx: ((...args: any[]) => SubmittableExtrinsic<'promise'>);
+  tx: null | ((...args: any[]) => SubmittableExtrinsic<'promise'>);
 }
 
 function SlashCurator ({ action, curatorId, description, index, toggleOpen }: Props): React.ReactElement<Props> | null {
   const { t } = useTranslation();
   const { api } = useApi();
-  const { members } = useMembers('council');
+  const { members } = useCollectiveMembers('council');
+  const councilMod = useCollectiveInstance('council');
   const { unassignCurator } = useBounties();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [threshold, setThreshold] = useState<BN>();
@@ -71,7 +72,7 @@ function SlashCurator ({ action, curatorId, description, index, toggleOpen }: Pr
       proposingAccountTip: t('The council member that will create the motion, submission equates to an "aye" vote.'),
       tip: t("If the motion is approved, Curator's deposit will be slashed and Curator will be unassigned. Bounty will return to the Funded state."),
       title: t('Slash curator'),
-      tx: api.tx.council.propose
+      tx: councilMod && api.tx[councilMod].propose
     },
     UnassignCurator: {
       filter: members,
@@ -81,12 +82,16 @@ function SlashCurator ({ action, curatorId, description, index, toggleOpen }: Pr
       proposingAccountTip: t('The council member that will create the motion, submission equates to an "aye" vote.'),
       tip: t('If the motion is approved, the current Curator will be unassigned and the Bounty will return to the Funded state.'),
       title: t('Unassign curator'),
-      tx: api.tx.council.propose
+      tx: councilMod && api.tx[councilMod].propose
     }
-  }), [t, index, unassignCurator, api.tx.council.propose, allAccounts, members, threshold, unassignCuratorProposal]);
+  }), [t, index, unassignCurator, api, allAccounts, councilMod, members, threshold, unassignCuratorProposal]);
 
   const { filter, helpMessage, params, proposingAccountTip, tip, title, tx } = actionProperties[action];
 
+  if (!tx) {
+    return null;
+  }
+
   return (
     <Modal
       header={`${title} - "${truncateTitle(description, 30)}"`}

packages/page-bounties/src/BountyExtraActions/index.tsx

@@ -5,7 +5,7 @@ import React, { useMemo, useRef, useState } from 'react';
 
 import { DeriveCollectiveProposal } from '@polkadot/api-derive/types';
 import { Button, Menu, Popup } from '@polkadot/react-components';
-import { useMembers, useToggle } from '@polkadot/react-hooks';
+import { useCollectiveMembers, useToggle } from '@polkadot/react-hooks';
 import { BlockNumber, BountyIndex, BountyStatus } from '@polkadot/types/interfaces';
 
 import { determineUnassignCuratorAction } from '../helpers';
@@ -36,7 +36,7 @@ function Index ({ bestNumber, className, description, index, proposals, status }
   const [isGiveUpCuratorOpen, toggleGiveUpCurator] = useToggle();
   const [selectedAction, setSlashAction] = useState<ValidUnassignCuratorAction>();
   const { t } = useTranslation();
-  const { isMember } = useMembers('council');
+  const { isMember } = useCollectiveMembers('council');
   const { curator, updateDue } = useBountyStatus(status);
 
   const blocksUntilUpdate = useMemo(() => updateDue?.sub(bestNumber), [bestNumber, updateDue]);

packages/page-bounties/src/BountyInfos/VotingSummary.tsx

@@ -8,7 +8,7 @@ import React, { useMemo } from 'react';
 import styled from 'styled-components';
 
 import VotingDescriptionInfo from '@polkadot/app-bounties/BountyInfos/VotingDescriptionInfo';
-import { useMembers } from '@polkadot/react-hooks';
+import { useCollectiveMembers } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import VotingLink from './VotingLink';
@@ -20,7 +20,7 @@ interface Props {
 }
 
 function VotingSummary ({ className, proposal, status }: Props): JSX.Element {
-  const { members } = useMembers('council');
+  const { members } = useCollectiveMembers('council');
   const { t } = useTranslation();
   const ayes = useMemo(() => proposal?.votes?.ayes?.length, [proposal]);
   const nays = useMemo(() => proposal?.votes?.nays?.length, [proposal]);

packages/page-bounties/src/hooks/useUserRole.ts

@@ -5,7 +5,7 @@ import type { AccountId } from '@polkadot/types/interfaces';
 
 import { useMemo } from 'react';
 
-import { useAccounts, useMembers } from '@polkadot/react-hooks';
+import { useAccounts, useCollectiveMembers } from '@polkadot/react-hooks';
 
 import { UserRole } from '../types';
 
@@ -14,7 +14,7 @@ export type UserRolesInfo = { roles: UserRole[], isCurator: boolean };
 export function useUserRole (curatorId?: AccountId): UserRolesInfo {
   const { allAccounts, hasAccounts } = useAccounts();
 
-  const { isMember } = useMembers('council');
+  const { isMember } = useCollectiveMembers('council');
 
   const isCurator = useMemo(() => curatorId && allAccounts.includes(curatorId.toString()), [allAccounts, curatorId]);
 

packages/page-council/src/Motions/Close.tsx

@@ -6,10 +6,9 @@ import type { Hash, Proposal, ProposalIndex } from '@polkadot/types/interfaces';
 import React, { useState } from 'react';
 
 import { Button, InputAddress, Modal, ProposedAction, TxButton } from '@polkadot/react-components';
-import { useApi, useToggle, useWeight } from '@polkadot/react-hooks';
+import { useApi, useCollectiveInstance, useToggle, useWeight } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
-import { useModuleCouncil } from '../useModuleCouncil';
 
 interface Props {
   hasFailed: boolean;
@@ -25,7 +24,7 @@ function Close ({ hasFailed, hash, idNumber, members, proposal }: Props): React.
   const [isOpen, toggleOpen] = useToggle();
   const [accountId, setAccountId] = useState<string | null>(null);
   const [proposalWeight, proposalLength] = useWeight(proposal);
-  const modLocation = useModuleCouncil();
+  const modLocation = useCollectiveInstance('council');
 
   // protect against older versions
   if (!modLocation) {

packages/page-council/src/Motions/Motion.tsx

@@ -8,12 +8,11 @@ import React, { useMemo } from 'react';
 
 import ProposalCell from '@polkadot/app-democracy/Overview/ProposalCell';
 import { Icon, LinkExternal, TxButton } from '@polkadot/react-components';
-import { useAccounts, useApi, useVotingStatus, useWeight } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useCollectiveInstance, useVotingStatus, useWeight } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
-import { useModuleCouncil } from '../useModuleCouncil';
 import Close from './Close';
 import Voters from './Voters';
 import Voting from './Voting';
@@ -37,7 +36,7 @@ function Motion ({ className = '', isMember, members, motion: { hash, proposal,
   const { allAccounts } = useAccounts();
   const { hasFailed, isCloseable, isVoteable, remainingBlocks } = useVotingStatus(votes, members.length, 'council');
   const [proposalWeight, proposalLength] = useWeight(proposal);
-  const modLocation = useModuleCouncil();
+  const modLocation = useCollectiveInstance('council');
 
   const [councilId, isMultiMembers] = useMemo(
     (): [string | null, boolean] => {

packages/page-council/src/Motions/ProposeExternal.tsx

@@ -7,11 +7,10 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { getProposalThreshold } from '@polkadot/apps-config';
 import { Button, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useToggle } from '@polkadot/react-hooks';
+import { useApi, useCollectiveInstance, useToggle } from '@polkadot/react-hooks';
 import { isHex } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
-import { useModuleCouncil } from '../useModuleCouncil';
 
 interface Props {
   className?: string;
@@ -36,7 +35,7 @@ function ProposeExternal ({ className = '', isMember, members }: Props): React.R
   const [accountId, setAcountId] = useState<string | null>(null);
   const [{ proposal, proposalLength }, setProposal] = useState<ProposalState>({ proposalLength: 0 });
   const [{ hash, isHashValid }, setHash] = useState<HashState>({ hash: '', isHashValid: false });
-  const modLocation = useModuleCouncil();
+  const modLocation = useCollectiveInstance('council');
 
   const threshold = Math.ceil((members.length || 0) * getProposalThreshold(api));
 

packages/page-council/src/Motions/ProposeMotion.tsx

@@ -8,11 +8,10 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 import { getProposalThreshold } from '@polkadot/apps-config';
 import { Button, Extrinsic, InputAddress, InputNumber, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useToggle } from '@polkadot/react-hooks';
+import { useApi, useCollectiveInstance, useToggle } from '@polkadot/react-hooks';
 import { BN_ZERO } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
-import { useModuleCouncil } from '../useModuleCouncil';
 
 interface Props {
   isMember: boolean;
@@ -36,7 +35,7 @@ function Propose ({ isMember, members }: Props): React.ReactElement<Props> | nul
   const [accountId, setAcountId] = useState<string | null>(null);
   const [{ proposal, proposalLength }, setProposal] = useState<ProposalState>({ proposalLength: 0 });
   const [{ isThresholdValid, threshold }, setThreshold] = useState<Threshold>({ isThresholdValid: false });
-  const modLocation = useModuleCouncil();
+  const modLocation = useCollectiveInstance('council');
 
   useEffect((): void => {
     members && setThreshold({

packages/page-council/src/Motions/Slashing.tsx

@@ -7,10 +7,9 @@ import React, { useEffect, useMemo, useState } from 'react';
 
 import { getSlashProposalThreshold } from '@polkadot/apps-config';
 import { Button, Dropdown, Input, InputAddress, Modal, TxButton } from '@polkadot/react-components';
-import { useApi, useAvailableSlashes, useToggle } from '@polkadot/react-hooks';
+import { useApi, useAvailableSlashes, useCollectiveInstance, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
-import { useModuleCouncil } from '../useModuleCouncil';
 
 interface Props {
   className?: string;
@@ -36,7 +35,7 @@ function Slashing ({ className = '', isMember, members }: Props): React.ReactEle
   const [accountId, setAcountId] = useState<string | null>(null);
   const [{ proposal, proposalLength }, setProposal] = useState<ProposalState>({ proposal: null, proposalLength: 0 });
   const [selectedEra, setSelectedEra] = useState(0);
-  const modLocation = useModuleCouncil();
+  const modLocation = useCollectiveInstance('council');
 
   const threshold = Math.ceil((members.length || 0) * getSlashProposalThreshold(api));
 

packages/page-council/src/Motions/Voting.tsx

@@ -6,10 +6,9 @@ import type { AccountId, Hash, Proposal, ProposalIndex } from '@polkadot/types/i
 import React, { useState } from 'react';
 
 import { Button, MarkWarning, Modal, ProposedAction, TxButton, VoteAccount } from '@polkadot/react-components';
-import { useAccounts, useApi, useToggle } from '@polkadot/react-hooks';
+import { useAccounts, useApi, useCollectiveInstance, useToggle } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
-import { useModuleCouncil } from '../useModuleCouncil';
 
 interface Props {
   hash: Hash;
@@ -26,7 +25,7 @@ function Voting ({ hash, idNumber, isDisabled, members, prime, proposal }: Props
   const { hasAccounts } = useAccounts();
   const [isVotingOpen, toggleVoting] = useToggle();
   const [accountId, setAccountId] = useState<string | null>(null);
-  const modLocation = useModuleCouncil();
+  const modLocation = useCollectiveInstance('council');
 
   if (!hasAccounts || !modLocation) {
     return null;

packages/page-council/src/Motions/index.tsx

@@ -7,7 +7,7 @@ import type { AccountId } from '@polkadot/types/interfaces';
 import React, { useRef } from 'react';
 
 import { Button, Table } from '@polkadot/react-components';
-import { useMembers } from '@polkadot/react-hooks';
+import { useCollectiveMembers } from '@polkadot/react-hooks';
 
 import { useTranslation } from '../translate';
 import Motion from './Motion';
@@ -23,7 +23,7 @@ interface Props {
 
 function Proposals ({ className = '', motions, prime }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
-  const { isMember, members } = useMembers('council');
+  const { isMember, members } = useCollectiveMembers('council');
 
   const headerRef = useRef([
     [t('motions'), 'start', 2],