Reformat referendum columns (#8554)

packages/apps-config/src/api/params/tracks/kusama.ts

@@ -1,9 +1,37 @@
 // Copyright 2017-2022 @polkadot/app-config authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { BN } from '@polkadot/util';
 import type { TrackInfo } from './types';
 
+import { BN, formatBalance } from '@polkadot/util';
+
+// hardcoded here since this is static (hopefully no re-denomination anytime...)
+const FMT_OPTS = {
+  decimals: 12,
+  forceUnit: '-',
+  withSi: true,
+  withUnit: 'KSM'
+};
+
+// https://github.com/paritytech/polkadot/blob/6e3f2c5b4b6e6927915de2f784e1d831717760fa/runtime/kusama/constants/src/lib.rs#L28-L32
+const UNITS = new BN(1_000_000_000_000);
+const QUID = UNITS.divn(30);
+const GRAND = QUID.muln(1_000);
+
+// https://github.com/paritytech/polkadot/blob/6e3f2c5b4b6e6927915de2f784e1d831717760fa/runtime/kusama/src/governance/origins.rs#L170-L179
+const SPEND_LIMITS = {
+  BigSpender: formatSpend(1_000, GRAND),
+  BigTipper: formatSpend(1, GRAND),
+  MediumSpender: formatSpend(100, GRAND),
+  SmallSpender: formatSpend(10, GRAND),
+  SmallTipper: formatSpend(250, QUID),
+  Treasurer: formatSpend(10_000, GRAND)
+};
+
+function formatSpend (mul: number, value: BN): string {
+  return formatBalance(value.muln(mul), FMT_OPTS);
+}
+
 function compareFellowshipRank (trackId: number): (rank: BN) => boolean {
   return (rank: BN): boolean =>
     rank.gten(trackId);
@@ -156,31 +184,31 @@ export const kusama: Record<string, TrackInfo[]> = {
       id: 30,
       name: 'small_tipper',
       origin: { Origins: 'SmallTipper' },
-      text: 'Origin able to spend up to 1 KSM from the treasury at once'
+      text: `Origin able to spend up to ${SPEND_LIMITS.SmallTipper} from the treasury at once`
     },
     {
       id: 31,
       name: 'big_tipper',
       origin: { Origins: 'BigTipper' },
-      text: 'Origin able to spend up to 5 KSM from the treasury at once'
+      text: `Origin able to spend up to ${SPEND_LIMITS.BigTipper} from the treasury at once`
     },
     {
       id: 32,
       name: 'small_spender',
       origin: { Origins: 'SmallSpender' },
-      text: 'Origin able to spend up to 50 KSM from the treasury at once'
+      text: `Origin able to spend up to ${SPEND_LIMITS.SmallSpender} from the treasury at once`
     },
     {
       id: 33,
       name: 'medium_spender',
       origin: { Origins: 'MediumSpender' },
-      text: 'Origin able to spend up to 500 KSM from the treasury at once'
+      text: `Origin able to spend up to ${SPEND_LIMITS.MediumSpender} from the treasury at once`
     },
     {
       id: 34,
       name: 'big_spender',
       origin: { Origins: 'BigSpender' },
-      text: 'Origin able to spend up to 5,000 KSM from the treasury at once'
+      text: `Origin able to spend up to ${SPEND_LIMITS.BigSpender} from the treasury at once`
     }
   ]
 };

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

@@ -5,31 +5,28 @@ import type { ReferendumProps as Props } from '../types';
 
 import React, { useMemo } from 'react';
 
+import RefEnd from './RefEnd';
+
 function RefOther ({ value: { info } }: Props): React.ReactElement<Props> {
   const when = useMemo(
     () => info.isKilled
-      ? new Date(info.asKilled.toNumber())
+      ? info.asKilled
       : null,
     [info]
   );
 
   return (
     <>
-      <td
-        className='number'
-        colSpan={2}
+      <td className='all' />
+      <td className='address' />
+      <RefEnd
+        label={info.type}
+        when={when}
       />
       <td
         className='number'
-        colSpan={2}
-      >
-        {when && (
-          when.toUTCString()
-        )}
-      </td>
-      <td className='number'>
-        {info.type}
-      </td>
+        colSpan={4}
+      />
     </>
   );
 }

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

@@ -95,6 +95,14 @@ function Ongoing ({ isMember, members, palletReferenda, palletVote, ranks, track
           : t('preimage {{shortHash}}', { replace: { shortHash } })
         }
       </td>
+      <Deposits
+        canDeposit
+        decision={decisionDeposit}
+        id={id}
+        palletReferenda={palletReferenda}
+        submit={submissionDeposit}
+        track={track}
+      />
       <RefEnd
         label={
           confirmEnd
@@ -105,14 +113,6 @@ function Ongoing ({ isMember, members, palletReferenda, palletVote, ranks, track
         }
         when={periodEnd}
       />
-      <Deposits
-        canDeposit
-        decision={decisionDeposit}
-        id={id}
-        palletReferenda={palletReferenda}
-        submit={submissionDeposit}
-        track={track}
-      />
       <Votes
         id={id}
         isConvictionVote={isConvictionVote}

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

@@ -50,10 +50,6 @@ function Tuple ({ palletReferenda, value: { id, info, track } }: Props): React.R
   return (
     <>
       <td className='all' />
-      <RefEnd
-        label={info.type}
-        when={when}
-      />
       <Deposits
         canRefund
         decision={decision}
@@ -62,11 +58,14 @@ function Tuple ({ palletReferenda, value: { id, info, track } }: Props): React.R
         submit={submit}
         track={track}
       />
+      <RefEnd
+        label={info.type}
+        when={when}
+      />
       <td
         className='number'
-        colSpan={3}
+        colSpan={4}
       />
-      <td className='number' />
     </>
   );
 }