neptune/ghost-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add expander to proposals (#4878)

Browse Source 
* Add expander to proposals

* Update packages/page-parachains/src/Proposals/Proposals.tsx
This commit is contained in:
Jaco Greeff 2021-03-20 14:16:02 +01:00 committed by GitHub
parent f6c56af294
commit 74dc56e82d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
packages/page-parachains/src/Proposals/Proposal.tsx
View File

@ -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) && (
<>

2
packages/page-parachains/src/Proposals/Proposals.tsx
View File

@ -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'],
[]
]);