From 33905b48e26829e500bb3f1149b1ed37158f9dcd Mon Sep 17 00:00:00 2001
From: Jaco <jacogr@gmail.com>
Date: Tue, 20 Sep 2022 11:36:09 +0300
Subject: [PATCH] Adjust referenda display (#8148)

* Adjust referenda display

* Deposit
---
 .../page-referenda/src/Referenda/Deposit.tsx  |  4 +-
 .../src/Referenda/RefKilled.tsx               | 37 +++++++++++++++++++
 .../page-referenda/src/Referenda/RefOther.tsx | 19 ----------
 .../src/Referenda/Referendum.tsx              | 14 +++++--
 .../page-referenda/src/Referenda/Submit.tsx   |  9 +++--
 packages/page-referenda/src/Referenda/util.ts | 14 +++++++
 6 files changed, 69 insertions(+), 28 deletions(-)
 create mode 100644 packages/page-referenda/src/Referenda/RefKilled.tsx
 delete mode 100644 packages/page-referenda/src/Referenda/RefOther.tsx
 create mode 100644 packages/page-referenda/src/Referenda/util.ts

diff --git a/packages/page-referenda/src/Referenda/Deposit.tsx b/packages/page-referenda/src/Referenda/Deposit.tsx
index 990f804bca..6b3ac53f27 100644
--- a/packages/page-referenda/src/Referenda/Deposit.tsx
+++ b/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);
diff --git a/packages/page-referenda/src/Referenda/RefKilled.tsx b/packages/page-referenda/src/Referenda/RefKilled.tsx
new file mode 100644
index 0000000000..ecdd55ac0c
--- /dev/null
+++ b/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);
diff --git a/packages/page-referenda/src/Referenda/RefOther.tsx b/packages/page-referenda/src/Referenda/RefOther.tsx
deleted file mode 100644
index a6fadea0ae..0000000000
--- a/packages/page-referenda/src/Referenda/RefOther.tsx
+++ /dev/null
@@ -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);
diff --git a/packages/page-referenda/src/Referenda/Referendum.tsx b/packages/page-referenda/src/Referenda/Referendum.tsx
index 8c410266ff..501f064f63 100644
--- a/packages/page-referenda/src/Referenda/Referendum.tsx
+++ b/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
diff --git a/packages/page-referenda/src/Referenda/Submit.tsx b/packages/page-referenda/src/Referenda/Submit.tsx
index fe25c1fb28..62f4e88a89 100644
--- a/packages/page-referenda/src/Referenda/Submit.tsx
+++ b/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>}
diff --git a/packages/page-referenda/src/Referenda/util.ts b/packages/page-referenda/src/Referenda/util.ts
new file mode 100644
index 0000000000..422960bff3
--- /dev/null
+++ b/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(' ');
+}