diff --git a/packages/app-staking/src/Targets/Validator.tsx b/packages/app-staking/src/Targets/Validator.tsx
index e2a5025a95..cb5b7bf5f0 100644
--- a/packages/app-staking/src/Targets/Validator.tsx
+++ b/packages/app-staking/src/Targets/Validator.tsx
@@ -6,8 +6,8 @@ import { I18nProps } from '@polkadot/react-components/types';
import { ValidatorInfo } from './types';
import React from 'react';
-import { AddressMini, Icon } from '@polkadot/react-components';
-import { FormatBalance } from '@polkadot/react-query';
+import { Icon, IdentityIcon } from '@polkadot/react-components';
+import { AccountName, FormatBalance } from '@polkadot/react-query';
import { formatNumber } from '@polkadot/util';
import translate from '../translate';
@@ -33,7 +33,10 @@ function Validator ({ info: { accountId, bondOther, bondOwn, bondTotal, commissi
/>
{formatNumber(rankOverall)} |
- |
+
+
+
+ |
{
isCommission
diff --git a/packages/app-staking/src/Targets/index.tsx b/packages/app-staking/src/Targets/index.tsx
index 82e8ffc53f..1e666fd7cb 100644
--- a/packages/app-staking/src/Targets/index.tsx
+++ b/packages/app-staking/src/Targets/index.tsx
@@ -260,6 +260,24 @@ export default translate(
td {
padding: 0.5rem 0.75rem;
+ &.address {
+ white-space: nowrap;
+ text-align: left;
+ text-overflow: ellipsis;
+
+ > div {
+ display: inline-block;
+ vertical-align: middle;
+ }
+
+ > div+div {
+ margin-left: 0.75rem;
+ max-width: 16rem;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
&.number{
text-align: right;
}
diff --git a/packages/react-query/src/FormatBalance.tsx b/packages/react-query/src/FormatBalance.tsx
index adc16d107a..100f73a3f9 100644
--- a/packages/react-query/src/FormatBalance.tsx
+++ b/packages/react-query/src/FormatBalance.tsx
@@ -19,14 +19,15 @@ interface Props extends BareProps {
// for million, 2 * 3-grouping + comma
const M_LENGTH = 6 + 1;
-function format (value: Compact | BN | string, currency: string): string {
+function format (value: Compact | BN | string, currency: string): React.ReactNode {
const [prefix, postfix] = formatBalance(value, { forceUnit: '-', withSi: false }).split('.');
if (prefix.length > M_LENGTH) {
+ // TODO Format with balance-postfix
return formatBalance(value);
}
- return `${prefix}.${`000${postfix || ''}`.slice(-3)} ${currency}`;
+ return <>{prefix}.{`000${postfix || ''}`.slice(-3)} {currency}>;
}
export function FormatBalance ({ children, className, label = '', value }: Props): React.ReactElement {
@@ -48,7 +49,7 @@ export default styled(FormatBalance)`
vertical-align: baseline;
* {
- vertical-align: baseline;
+ vertical-align: baseline !important;
}
> label,
@@ -57,4 +58,10 @@ export default styled(FormatBalance)`
margin-right: 0.25rem;
vertical-align: baseline;
}
+
+ > .balance-postfix {
+ font-weight: 100;
+ opacity: 0.75;
+ vertical-align: baseline;
+ }
`;
|