Retrieve prime as part of collective members (#7926)

* Retrieve prime as part of collective members

* Adjust

packages/page-tech-comm/src/App.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2022 @polkadot/app-tech-comm authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AccountId, Hash } from '@polkadot/types/interfaces';
+import type { Hash } from '@polkadot/types/interfaces';
 
 import React, { useMemo } from 'react';
 import { Route, Switch } from 'react-router';
@@ -25,8 +25,7 @@ const HIDDEN_PROPOSALS: string[] = ['proposals'];
 function TechCommApp ({ basePath, className, type }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
-  const { isMember, members } = useCollectiveMembers(type);
-  const prime = useCall<AccountId | null>(api.derive[type].prime);
+  const { isMember, members, prime } = useCollectiveMembers(type);
   const hasProposals = useCall<boolean>(api.derive[type].hasProposals);
   const proposalHashes = useCall<Hash[]>(api.derive[type].proposalHashes);
 

packages/page-tech-comm/src/Overview/Members.tsx

@@ -1,8 +1,6 @@
 // Copyright 2017-2022 @polkadot/app-tech-comm authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AccountId } from '@polkadot/types/interfaces';
-
 import React, { useRef } from 'react';
 
 import { AddressSmall, Table, Tag } from '@polkadot/react-components';
@@ -12,7 +10,7 @@ import { useTranslation } from '../translate';
 interface Props {
   className?: string;
   members?: string[];
-  prime?: AccountId | null;
+  prime?: string | null;
 }
 
 function Members ({ className = '', members, prime }: Props): React.ReactElement<Props> {
@@ -29,12 +27,12 @@ function Members ({ className = '', members, prime }: Props): React.ReactElement
       header={headerRef.current}
     >
       {members?.map((accountId): React.ReactNode => (
-        <tr key={accountId.toString()}>
+        <tr key={accountId}>
           <td className='address'>
             <AddressSmall value={accountId} />
           </td>
           <td>
-            {prime?.eq(accountId) && (
+            {prime === accountId && (
               <Tag
                 color='green'
                 hover={t<string>('Committee prime member, default voting')}

packages/page-tech-comm/src/Proposals/Proposal.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { DeriveCollectiveProposal } from '@polkadot/api-derive/types';
-import type { AccountId, Hash } from '@polkadot/types/interfaces';
+import type { Hash } from '@polkadot/types/interfaces';
 
 import React from 'react';
 
@@ -20,7 +20,7 @@ interface Props {
   imageHash: Hash;
   isMember: boolean;
   members: string[];
-  prime?: AccountId | null;
+  prime?: string | null;
   type: 'membership' | 'technicalCommittee';
 }
 

packages/page-tech-comm/src/Proposals/Voting.tsx

@@ -1,7 +1,7 @@
 // Copyright 2017-2022 @polkadot/app-tech-comm authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AccountId, Hash } from '@polkadot/types/interfaces';
+import type { Hash } from '@polkadot/types/interfaces';
 import type { BN } from '@polkadot/util';
 
 import React, { useState } from 'react';
@@ -15,7 +15,7 @@ interface Props {
   hash: Hash | string;
   isMember: boolean;
   members: string[];
-  prime?: AccountId | null;
+  prime?: string | null;
   proposalId: BN | number;
   type: 'membership' | 'technicalCommittee';
 }
@@ -45,7 +45,7 @@ function Voting ({ hash, isMember, members, prime, proposalId, type }: Props): R
               filter={members}
               onChange={setAccountId}
             />
-            {(accountId === prime?.toString()) && (
+            {accountId === prime && (
               <MarkWarning content={t<string>('You are voting with this collective\'s prime account. The vote will be the default outcome in case of any abstentions.')} />
             )}
           </Modal.Content>

packages/page-tech-comm/src/types.ts

@@ -1,12 +1,12 @@
 // Copyright 2017-2022 @polkadot/app-tech-comm authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { AccountId, Hash } from '@polkadot/types/interfaces';
+import type { Hash } from '@polkadot/types/interfaces';
 
 export interface ComponentProps {
   className?: string;
   isMember: boolean;
-  prime?: AccountId | null;
+  prime?: string | null;
   proposalHashes?: Hash[];
   members: string[];
   type: 'membership' | 'technicalCommittee';

packages/react-hooks/src/useCollectiveMembers.ts

@@ -14,24 +14,32 @@ import { useCall } from './useCall';
 interface Result {
   isMember: boolean;
   members: string[];
+  prime?: string | null;
 }
 
-const OPT = {
-  transform: (accounts: AccountId[]) =>
-    accounts.map((accountId) => accountId.toString())
+const OPT_MEM = {
+  transform: (accounts: AccountId[]): string[] =>
+    accounts.map((a) => a.toString())
+};
+
+const OPT_PRM = {
+  transform: (accountId: AccountId | null): string | null =>
+    accountId && accountId.toString()
 };
 
 function useCollectiveMembersImpl (collective: CollectiveType): Result {
   const { api } = useApi();
-  const { allAccounts, hasAccounts } = useAccounts();
-  const retrieved = useCall<string[]>(hasAccounts && api.derive[collective as 'council']?.members, undefined, OPT);
+  const { allAccounts } = useAccounts();
+  const members = useCall(api.derive[collective as 'council']?.members, [], OPT_MEM);
+  const prime = useCall(api.derive[collective as 'council']?.prime, [], OPT_PRM);
 
   return useMemo(
     () => ({
-      isMember: (retrieved || []).some((accountId) => allAccounts.includes(accountId)),
-      members: (retrieved || [])
+      isMember: (members || []).some((a) => allAccounts.includes(a)),
+      members: (members || []),
+      prime
     }),
-    [allAccounts, retrieved]
+    [allAccounts, members, prime]
   );
 }