Hrmp message count (#4990)

packages/page-parachains/src/Overview/Parachain.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Option, Vec } from '@polkadot/types';
-import type { AccountId, BlockNumber, CandidatePendingAvailability, HeadData, Header, ParaId, ParaInfo, ParaLifecycle } from '@polkadot/types/interfaces';
+import type { AccountId, BlockNumber, CandidatePendingAvailability, HeadData, Header, HrmpChannel, HrmpChannelId, ParaId, ParaInfo, ParaLifecycle } from '@polkadot/types/interfaces';
 import type { Codec } from '@polkadot/types/types';
 import type { EventMapInfo, QueuedAction, ValidatorInfo } from './types';
 
@@ -12,7 +12,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { AddressMini, Expander, ParaLink } from '@polkadot/react-components';
 import { useApi, useCall, useCallMulti, useParaApi } from '@polkadot/react-hooks';
 import { BlockToTime } from '@polkadot/react-query';
-import { formatNumber } from '@polkadot/util';
+import { BN_ZERO, formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import { sliceHex } from '../util';
@@ -20,6 +20,8 @@ import Lifecycle from './Lifecycle';
 
 interface Props {
   bestNumber?: BN;
+  channelDst?: [HrmpChannelId, HrmpChannel][];
+  channelSrc?: [HrmpChannelId, HrmpChannel][];
   className?: string;
   id: ParaId;
   isScheduled?: boolean;
@@ -88,7 +90,7 @@ function renderAddresses (list?: AccountId[]): JSX.Element[] | undefined {
   ));
 }
 
-function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion, lastTimeout, nextAction, sessionValidators, validators }: Props): React.ReactElement<Props> {
+function Parachain ({ bestNumber, channelDst, channelSrc, className = '', id, lastBacked, lastInclusion, lastTimeout, nextAction, sessionValidators, validators }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const { api } = useApi();
   const { api: paraApi } = useParaApi(id);
@@ -107,6 +109,14 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
   ], optionsMulti);
   const [nonBacked, setNonBacked] = useState<AccountId[]>([]);
 
+  const channelCounts = useMemo(
+    () => [
+      channelDst ? channelDst.reduce((count, [, channel]) => count.iadd(channel.msgCount), new BN(0)) : BN_ZERO,
+      channelSrc ? channelSrc.reduce((count, [, channel]) => count.iadd(channel.msgCount), new BN(0)) : BN_ZERO
+    ],
+    [channelDst, channelSrc]
+  );
+
   const blockDelay = useMemo(
     () => bestNumber && (
       lastInclusion
@@ -198,7 +208,7 @@ function Parachain ({ bestNumber, className = '', id, lastBacked, lastInclusion,
         )}
       </td>
       <td className='number media--1300'>
-        {formatNumber(paraInfo.qUmp)}&nbsp;/&nbsp;{formatNumber(paraInfo.qDmp)}&nbsp;/&nbsp;{formatNumber(paraInfo.qHrmpE)}&nbsp;/&nbsp;{formatNumber(paraInfo.qHrmpI)}
+        {formatNumber(paraInfo.qUmp)}&nbsp;/&nbsp;{formatNumber(paraInfo.qDmp)}&nbsp;/&nbsp;{formatNumber(paraInfo.qHrmpE)}&nbsp;/&nbsp;{formatNumber(paraInfo.qHrmpI)}&nbsp;({formatNumber(channelCounts[0])}&nbsp;/&nbsp;{formatNumber(channelCounts[1])})
       </td>
     </tr>
   );

packages/page-parachains/src/Overview/Parachains.tsx

@@ -3,10 +3,11 @@
 
 import type { ApiPromise } from '@polkadot/api';
 import type { SignedBlockExtended } from '@polkadot/api-derive/types';
-import type { AccountId, CandidateReceipt, Event, ParaId, ParaValidatorIndex } from '@polkadot/types/interfaces';
+import type { Option, StorageKey } from '@polkadot/types';
+import type { AccountId, CandidateReceipt, Event, HrmpChannel, HrmpChannelId, ParaId, ParaValidatorIndex } from '@polkadot/types/interfaces';
 import type { IEvent } from '@polkadot/types/types';
 import type { ScheduledProposals } from '../types';
-import type { EventMapInfo, QueuedAction, ValidatorInfo } from './types';
+import type { ChannelMap, EventMapInfo, QueuedAction, ValidatorInfo } from './types';
 
 import BN from 'bn.js';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
@@ -114,6 +115,29 @@ function extractEvents (api: ApiPromise, lastBlock: SignedBlockExtended, prev: L
     : prev;
 }
 
+const optChannelKeys = {
+  transform: (keys: StorageKey<[HrmpChannelId]>[]): HrmpChannelId[] =>
+    keys.map(({ args: [id] }) => id)
+};
+
+const optChannels = {
+  transform: ([[channelIds], channels]: [[HrmpChannelId[]], Option<HrmpChannel>[]]): [ChannelMap, ChannelMap] =>
+    channelIds
+      .map((id, index): [HrmpChannelId, Option<HrmpChannel>] => [id, channels[index]])
+      .filter(([, opt]) => opt.isSome)
+      .map(([id, opt]): [HrmpChannelId, HrmpChannel] => [id, opt.unwrap()])
+      .reduce(([src, dst]: [ChannelMap, ChannelMap], [id, channel]): [ChannelMap, ChannelMap] => {
+        dst[id.receiver.toNumber()] ||= [];
+        src[id.sender.toNumber()] ||= [];
+
+        dst[id.receiver.toNumber()].push([id, channel]);
+        src[id.sender.toNumber()].push([id, channel]);
+
+        return [src, dst];
+      }, [{}, {}]),
+  withParamsTransform: true
+};
+
 function extractActions (actionsQueue: QueuedAction[], knownIds?: [ParaId, string][]): Record<string, QueuedAction | undefined> {
   return actionsQueue && knownIds
     ? knownIds.reduce((all: Record<string, QueuedAction | undefined>, [id, key]) => ({
@@ -134,6 +158,8 @@ function Parachains ({ actionsQueue, ids, scheduled }: Props): React.ReactElemen
     api.query.paraScheduler?.validatorGroups || api.query.scheduler?.validatorGroups,
     api.query.shared?.activeValidatorIndices
   ], optionsMulti);
+  const channelIds = useCall<HrmpChannelId[]>(api.query.hrmp?.hrmpChannels.keys, undefined, optChannelKeys);
+  const allChannels = useCall<[ChannelMap, ChannelMap]>(channelIds && api.query.hrmp.hrmpChannels.multi, [channelIds], optChannels);
 
   const headerRef = useRef([
     [t('parachains'), 'start', 2],
@@ -183,6 +209,8 @@ function Parachains ({ actionsQueue, ids, scheduled }: Props): React.ReactElemen
       {knownIds?.map(([id, key], index): React.ReactNode => (
         <Parachain
           bestNumber={bestNumber}
+          channelDst={allChannels?.[1][id.toNumber()]}
+          channelSrc={allChannels?.[0][id.toNumber()]}
           id={id}
           isScheduled={scheduledIds[key]}
           key={key}

packages/page-parachains/src/Overview/types.ts

@@ -2,7 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type BN from 'bn.js';
-import type { AccountId, BalanceOf, ParaId, ParaValidatorIndex } from '@polkadot/types/interfaces';
+import type { AccountId, BalanceOf, HrmpChannel, HrmpChannelId, ParaId, ParaValidatorIndex } from '@polkadot/types/interfaces';
+
+export type ChannelMap = Record<number, [HrmpChannelId, HrmpChannel][]>;
 
 export interface LeaseInfo {
   accountId: AccountId;