Adjust referenda display (#8148)

* Adjust referenda display

* Deposit

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

@@ -13,7 +13,7 @@ interface Props {
   submit: PalletReferendaDeposit | null;
 }
 
-function Tuple ({ decision, submit }: Props): React.ReactElement<Props> {
+function Deposit ({ decision, submit }: Props): React.ReactElement<Props> {
   const [first, second] = useMemo(
     () => [submit, decision && decision.unwrapOr(null)],
     [decision, submit]
@@ -39,4 +39,4 @@ function Tuple ({ decision, submit }: Props): React.ReactElement<Props> {
   );
 }
 
-export default React.memo(Tuple);
+export default React.memo(Deposit);

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

@@ -0,0 +1,37 @@
+// Copyright 2017-2022 @polkadot/app-referenda authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { ReferendumProps as Props } from '../types';
+
+import React, { useMemo } from 'react';
+
+function RefOther ({ value: { info } }: Props): React.ReactElement<Props> {
+  const when = useMemo(
+    () => info.isKilled
+      ? new Date(info.asKilled.toNumber())
+      : null,
+    [info]
+  );
+
+  return (
+    <>
+      <td
+        className='number'
+        colSpan={2}
+      />
+      <td
+        className='number'
+        colSpan={2}
+      >
+        {when && (
+          when.toUTCString()
+        )}
+      </td>
+      <td className='number'>
+        {info.type}
+      </td>
+    </>
+  );
+}
+
+export default React.memo(RefOther);

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

@@ -1,19 +0,0 @@
-// Copyright 2017-2022 @polkadot/app-referenda authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { ReferendumProps as Props } from '../types';
-
-import React from 'react';
-
-function RefOther ({ value: { info: { type } } }: Props): React.ReactElement<Props> {
-  return (
-    <td
-      className='number'
-      colSpan={5}
-    >
-      {type}
-    </td>
-  );
-}
-
-export default React.memo(RefOther);

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

@@ -7,10 +7,13 @@ import React, { useMemo } from 'react';
 
 import { formatNumber } from '@polkadot/util';
 
+import Killed from './RefKilled';
 import Ongoing from './RefOngoing';
-import Other from './RefOther';
+import Tuple from './RefTuple';
+import { getTrackName } from './util';
 
 const Components: Record<string, React.ComponentType<Props>> = {
+  Killed,
   Ongoing
 };
 
@@ -18,17 +21,22 @@ function Referendum (props: Props): React.ReactElement<Props> {
   const { className, value: { id, info, track } } = props;
 
   const Component = useMemo(
-    () => Components[info.type] || Other,
+    () => Components[info.type] || Tuple,
     [info]
   );
 
+  const trackName = useMemo(
+    () => track && getTrackName(track),
+    [track]
+  );
+
   return (
     <tr className={className}>
       <td className='number'>
         <h1>{formatNumber(id)}</h1>
       </td>
       <td className='number'>
-        {track && track.name.toString()}
+        {trackName}
       </td>
       {/* <td>
         <textarea

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

@@ -16,9 +16,10 @@ import { useApi, useBestNumber } from '@polkadot/react-hooks';
 import Params from '@polkadot/react-params';
 import { Available } from '@polkadot/react-query';
 import { getTypeDef } from '@polkadot/types/create';
-import { formatNumber, isHex, stringPascalCase } from '@polkadot/util';
+import { formatNumber, isHex } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
+import { getTrackName } from './util';
 
 interface Props {
   className?: string;
@@ -101,7 +102,7 @@ function Submit ({ className = '', members, onClose, palletReferenda, tracks }:
 
   const trackOpts = useMemo(
     () => tracks.map(([id, track]) => ({
-      text: track.name.toString().replace(/_/g, ' ').split(' ').map(stringPascalCase).join(' '),
+      text: getTrackName(track),
       value: id.toNumber()
     })),
     [tracks]
@@ -136,8 +137,8 @@ function Submit ({ className = '', members, onClose, palletReferenda, tracks }:
         <Modal.Columns hint={t<string>('The proposal will be registered from this account and the balance lock will be applied here.')}>
           <InputAddress
             filter={members}
-            help={t<string>('The account you want to register the proposal from')}
-            label={t<string>('send from account')}
+            help={t<string>('The account you want to propose from')}
+            label={t<string>('propose from account')}
             labelExtra={
               <Available
                 label={<span className='label'>{t<string>('transferrable')}</span>}

packages/page-referenda/src/Referenda/util.ts

@@ -0,0 +1,14 @@
+// Copyright 2017-2022 @polkadot/app-referenda authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { PalletReferendaTrackInfo } from '@polkadot/types/lookup';
+
+import { stringPascalCase } from '@polkadot/util';
+
+export function getTrackName ({ name }: PalletReferendaTrackInfo): string {
+  return name
+    .replace(/_/g, ' ')
+    .split(' ')
+    .map(stringPascalCase)
+    .join(' ');
+}