|
@@ -7,34 +7,35 @@ import { AccountId, Balance } from '@polkadot/types/interfaces';
|
|
|
import React from 'react';
|
|
|
import { AddressMini, Expander } from '@polkadot/react-components';
|
|
|
import { FormatBalance } from '@polkadot/react-query';
|
|
|
+import { formatNumber } from '@polkadot/util';
|
|
|
|
|
|
interface Props {
|
|
|
balance?: Balance;
|
|
|
voters?: AccountId[];
|
|
|
}
|
|
|
|
|
|
-function Voters ({ balance, voters }: Props): React.ReactElement<Props> | null {
|
|
|
+function Voters ({ balance, voters }: Props): React.ReactElement<Props> {
|
|
|
if (!balance || !voters || !voters.length) {
|
|
|
- return null;
|
|
|
+ return <><td className='all number' /><td className='number' /></>;
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
- <Expander
|
|
|
- summary={
|
|
|
- <FormatBalance
|
|
|
- labelPost={` (${voters.length})`}
|
|
|
- value={balance}
|
|
|
- />
|
|
|
- }
|
|
|
- >
|
|
|
- {voters.map((who): React.ReactNode =>
|
|
|
- <AddressMini
|
|
|
- key={who.toString()}
|
|
|
- value={who}
|
|
|
- withLockedVote
|
|
|
- />
|
|
|
- )}
|
|
|
- </Expander>
|
|
|
+ <>
|
|
|
+ <td className='all number'>
|
|
|
+ <Expander summary={<FormatBalance value={balance} />} >
|
|
|
+ {voters.map((who): React.ReactNode =>
|
|
|
+ <AddressMini
|
|
|
+ key={who.toString()}
|
|
|
+ value={who}
|
|
|
+ withLockedVote
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </Expander>
|
|
|
+ </td>
|
|
|
+ <td className='number'>
|
|
|
+ {formatNumber(voters.length)}
|
|
|
+ </td>
|
|
|
+ </>
|
|
|
);
|
|
|
}
|
|
|
|