From 74dc56e82d83bd854f079ed92e2c5e621611cf2c Mon Sep 17 00:00:00 2001
From: Jaco Greeff <jacogr@gmail.com>
Date: Sat, 20 Mar 2021 14:16:02 +0100
Subject: [PATCH] Add expander to proposals (#4878)

* Add expander to proposals

* Update packages/page-parachains/src/Proposals/Proposals.tsx
---
 .../src/Proposals/Proposal.tsx                | 30 +++++++++++++------
 .../src/Proposals/Proposals.tsx               |  2 +-
 2 files changed, 22 insertions(+), 10 deletions(-)

diff --git a/packages/page-parachains/src/Proposals/Proposal.tsx b/packages/page-parachains/src/Proposals/Proposal.tsx
index 1c540bbfa1..e40c59c12b 100644
--- a/packages/page-parachains/src/Proposals/Proposal.tsx
+++ b/packages/page-parachains/src/Proposals/Proposal.tsx
@@ -4,9 +4,9 @@
 import type { ParaId } from '@polkadot/types/interfaces';
 import type { ScheduledProposals } from '../types';
 
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 
-import { AddressMini, AddressSmall, Badge, ParaLink, TxButton } from '@polkadot/react-components';
+import { AddressMini, AddressSmall, Badge, Expander, ParaLink, TxButton } from '@polkadot/react-components';
 import { useAccounts, useApi, useSudo } from '@polkadot/react-hooks';
 import { FormatBalance } from '@polkadot/react-query';
 import { formatNumber } from '@polkadot/util';
@@ -47,6 +47,16 @@ function Proposal ({ approvedIds, id, scheduled }: Props): React.ReactElement<Pr
     [proposal]
   );
 
+  const renderVals = useCallback(
+    () => proposal.proposal?.validators.map((validatorId) => (
+      <AddressMini
+        key={validatorId.toString()}
+        value={validatorId}
+      />
+    )),
+    [proposal.proposal]
+  );
+
   return (
     <tr>
       <td className='number together'><h1>{formatNumber(id)}</h1></td>
@@ -60,15 +70,17 @@ function Proposal ({ approvedIds, id, scheduled }: Props): React.ReactElement<Pr
       </td>
       <td className='badge together'><ParaLink id={id} /></td>
       <td className='start together'>{proposal.proposal?.name.toUtf8()}</td>
+      <td className='address'>
+        {proposal.proposal?.validators && (
+          <Expander
+            renderChildren={renderVals}
+            summary={t<string>('Validators ({{count}})', { replace: { count: formatNumber(proposal.proposal?.validators.length) } })}
+          />
+        )}
+      </td>
       <td className='address'>{proposal.proposal && <AddressSmall value={proposal.proposal.proposer} />}</td>
       <td className='number media--1100'>{proposal.proposal && <FormatBalance value={proposal.proposal.balance} />}</td>
-      <td className='start hash together media--1400'>{initialHex}</td>
-      <td className='address all'>{proposal.proposal?.validators.map((validatorId) => (
-        <AddressMini
-          key={validatorId.toString()}
-          value={validatorId}
-        />
-      ))}</td>
+      <td className='start hash together all'>{initialHex}</td>
       <td className='button'>
         {!(proposal.isApproved || proposal.isScheduled) && (
           <>
diff --git a/packages/page-parachains/src/Proposals/Proposals.tsx b/packages/page-parachains/src/Proposals/Proposals.tsx
index 098bba9be1..6f01ba2cb9 100644
--- a/packages/page-parachains/src/Proposals/Proposals.tsx
+++ b/packages/page-parachains/src/Proposals/Proposals.tsx
@@ -25,10 +25,10 @@ function Proposals ({ proposals }: Props): React.ReactElement<Props> {
   const headerRef = useRef([
     [t('proposals'), 'start', 3],
     [],
+    [],
     [t('proposer'), 'address'],
     [t('balance'), 'media--1100'],
     [t('initial state'), 'start media--1400'],
-    [t('validators'), 'start'],
     []
   ]);