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; + } `;