Adjust FormatBalance component (#1969)

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
         />
       </td>
       <td className='number'>{formatNumber(rankOverall)}</td>
-      <td className='address'><AddressMini value={accountId} /></td>
+      <td className='address'>
+        <IdentityIcon value={accountId} size={24} />
+        <AccountName params={accountId} />
+      </td>
       <td className='number'>
         {
           isCommission

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

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<any> | BN | string, currency: string): string {
+function format (value: Compact<any> | 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}.<span className='balance-postfix'>{`000${postfix || ''}`.slice(-3)}</span> {currency}</>;
 }
 
 export function FormatBalance ({ children, className, label = '', value }: Props): React.ReactElement<Props> {
@@ -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;
+  }
 `;