Display trackId + name consistently (#8420)

packages/page-referenda/src/Referenda/Submit.tsx

@@ -135,7 +135,7 @@ function Submit ({ className = '', isMember, members, palletReferenda, tracks }:
 
   const trackOpts = useMemo(
     () => tracks && tracks.map(([id, track]) => ({
-      text: getTrackName(track),
+      text: getTrackName(id, track),
       value: id.toNumber()
     })),
     [tracks]

packages/page-referenda/src/Referenda/index.tsx

@@ -8,7 +8,6 @@ import React, { useMemo } from 'react';
 import AddPreimage from '@polkadot/app-preimages/Preimages/Add';
 import { Button, Table } from '@polkadot/react-components';
 import { useAccounts } from '@polkadot/react-hooks';
-import { formatNumber } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 import useReferenda from '../useReferenda';
@@ -49,11 +48,11 @@ function Referenda ({ className, members, palletReferenda, palletVote }: Props):
           tracks={tracks}
         />
       </Button.Group>
-      {grouped.map(({ referenda, trackId, trackName }: ReferendaGroup) => (
+      {grouped.map(({ referenda, trackName }: ReferendaGroup) => (
         <Table
           empty={referenda && t<string>('No active referenda')}
           header={[
-            [trackName ? `${formatNumber(trackId)} / ${trackName}` : t('referenda'), 'start', 2],
+            [trackName || t('referenda'), 'start', 2],
             [undefined, undefined, 6]
           ]}
           key={

packages/page-referenda/src/useReferenda.ts

@@ -122,7 +122,7 @@ function group (referenda?: Referendum[], tracks?: [BN, PalletReferendaTrackInfo
           referenda: [ref],
           track: ref.track,
           trackId: ref.trackId,
-          trackName: getTrackName(ref.track)
+          trackName: getTrackName(ref.trackId, ref.track)
         });
       } else {
         // existing group, just add the referendum

packages/page-referenda/src/util.ts

@@ -2,13 +2,18 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { PalletReferendaTrackInfo } from '@polkadot/types/lookup';
+import type { BN } from '@polkadot/util';
 
-import { stringPascalCase } from '@polkadot/util';
+import { formatNumber, stringPascalCase } from '@polkadot/util';
 
-export function getTrackName ({ name }: PalletReferendaTrackInfo): string {
-  return name
-    .replace(/_/g, ' ')
-    .split(' ')
-    .map(stringPascalCase)
-    .join(' ');
+export function getTrackName (trackId: BN, { name }: PalletReferendaTrackInfo): string {
+  return `${
+    formatNumber(trackId)
+  } / ${
+    name
+      .replace(/_/g, ' ')
+      .split(' ')
+      .map(stringPascalCase)
+      .join(' ')
+  }`;
 }