diff --git a/packages/page-democracy/src/Overview/Referendum.tsx b/packages/page-democracy/src/Overview/Referendum.tsx
index 95c316e50d..d40d853a12 100644
--- a/packages/page-democracy/src/Overview/Referendum.tsx
+++ b/packages/page-democracy/src/Overview/Referendum.tsx
@@ -7,7 +7,7 @@ import { BlockNumber } from '@polkadot/types/interfaces';
import React, { useMemo } from 'react';
import styled from 'styled-components';
-import { AddressMini, Button, Expander, LinkExternal, Tag } from '@polkadot/react-components';
+import { Button, Expander, LinkExternal, Tag } from '@polkadot/react-components';
import { useApi, useCall } from '@polkadot/react-hooks';
import { FormatBalance, BlockToTime } from '@polkadot/react-query';
import { formatNumber, isBoolean } from '@polkadot/util';
@@ -15,6 +15,7 @@ import { formatNumber, isBoolean } from '@polkadot/util';
import { useTranslation } from '../translate';
import PreImageButton from './PreImageButton';
import ProposalCell from './ProposalCell';
+import ReferendumVote from './ReferendumVote';
import Voting from './Voting';
interface Props {
@@ -55,20 +56,20 @@ function Referendum ({ className, value: { allAye, allNay, image, imageHash, ind
{voteCountAye ? ` (${formatNumber(voteCountAye)})` : '' }>}>
- {allAye.map(({ accountId }) =>
-
+
)}
|
{voteCountNay ? ` (${formatNumber(voteCountNay)})` : '' }>}>
- {allNay.map(({ accountId }) =>
-
+
)}
diff --git a/packages/page-democracy/src/Overview/ReferendumVote.tsx b/packages/page-democracy/src/Overview/ReferendumVote.tsx
new file mode 100644
index 0000000000..f2e05195e0
--- /dev/null
+++ b/packages/page-democracy/src/Overview/ReferendumVote.tsx
@@ -0,0 +1,32 @@
+// Copyright 2017-2020 @polkadot/app-democracy authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { DeriveReferendumVote } from '@polkadot/api-derive/types';
+import { Vote } from '@polkadot/types/interfaces';
+
+import React from 'react';
+import { AddressMini } from '@polkadot/react-components';
+
+interface Props {
+ vote: DeriveReferendumVote;
+}
+
+const sizing = ['0.1x', '1x', '2x', '3x', '4x', '5x'];
+
+function voteLabel (vote: Vote): string {
+ return `${sizing[vote.conviction.toNumber()]} - `;
+}
+
+function ReferendumVote ({ vote: { accountId, balance, vote } }: Props): React.ReactElement {
+ return (
+
+ );
+}
+
+export default React.memo(ReferendumVote);
diff --git a/packages/page-explorer/src/BlockInfo/ByHash.tsx b/packages/page-explorer/src/BlockInfo/ByHash.tsx
index b05e455d55..ac840bf1f2 100644
--- a/packages/page-explorer/src/BlockInfo/ByHash.tsx
+++ b/packages/page-explorer/src/BlockInfo/ByHash.tsx
@@ -35,7 +35,7 @@ function BlockByHash ({ className, value }: Props): React.ReactElement {
- {formatNumber(blockNumber)} |
+ {blockNumber ? formatNumber(blockNumber) : '...'} |
{getHeader && (
<>
{t('hash')} |
diff --git a/packages/react-components/src/AddressMini.tsx b/packages/react-components/src/AddressMini.tsx
index a02151119e..525a409638 100644
--- a/packages/react-components/src/AddressMini.tsx
+++ b/packages/react-components/src/AddressMini.tsx
@@ -25,6 +25,7 @@ interface Props extends BareProps {
isPadded?: boolean;
isShort?: boolean;
label?: React.ReactNode;
+ labelBalance?: React.ReactNode;
type?: KeyringItemType;
value?: AccountId | AccountIndex | Address | string | null | Uint8Array;
withAddress?: boolean;
@@ -35,7 +36,7 @@ interface Props extends BareProps {
withShrink?: boolean;
}
-function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, style, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false }: Props): React.ReactElement | null {
+function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded = true, label, labelBalance, style, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false, withName = true, withShrink = false }: Props): React.ReactElement | null {
if (!value) {
return null;
}
@@ -74,6 +75,7 @@ function AddressMini ({ balance, bonded, children, className, iconInfo, isPadded
{withBalance && (
)}
diff --git a/packages/react-components/src/Expander.tsx b/packages/react-components/src/Expander.tsx
index c521bb3318..438cfecc5d 100644
--- a/packages/react-components/src/Expander.tsx
+++ b/packages/react-components/src/Expander.tsx
@@ -83,7 +83,6 @@ export default React.memo(styled(Expander)`
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
- width: 100%;
&:not(.isExpanded) .ui--Expander-content {
display: none;
|