Rework status name display (#1949)

* Rework status name display

* Fix props

packages/react-components/src/Status/index.tsx

@@ -67,10 +67,6 @@ function signerIconName (status: QueueTxStatus): any {
 }
 
 function renderStatus ({ account, action, id, message, removeItem, status }: QueueStatus): React.ReactNode {
-  const addressRendered = account
-    ? <AddressMini value={account} withName={false} />
-    : undefined;
-
   return (
     <div
       className={classes('item', status)}
@@ -89,7 +85,9 @@ function renderStatus ({ account, action, id, message, removeItem, status }: Que
             <div className='header'>
               {action}
             </div>
-            {addressRendered}
+            {account && (
+              <AddressMini value={account} />
+            )}
             <div className='status'>
               {message}
             </div>
@@ -176,7 +174,6 @@ function Status ({ className, stqueue = [], txqueue = [], t }: Props): React.Rea
           />
         </div>
       )}
-
       {alltx.map(renderItem)}
       {allst.map(renderStatus)}
     </div>
@@ -220,10 +217,22 @@ export default translate(
           .status {
             font-weight: 700;
           }
+
+          .ui--AddressMini {
+            .ui--AddressMini-address {
+              min-width: 0;
+              text-align: left;
+            }
+          }
+        }
+
+        .header {
+          opacity: 0.66;
         }
 
         .short {
           font-size: 2.5rem;
+          opacity:  0.75;
           padding: 0.5rem;
 
           i.icon {

packages/react-query/src/AccountName.tsx

@@ -3,17 +3,16 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { DeriveAccountInfo } from '@polkadot/api-derive/types';
-import { BareProps, CallProps } from '@polkadot/react-api/types';
+import { BareProps } from '@polkadot/react-api/types';
 import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 
 import React, { useState, useEffect } from 'react';
-import { withCalls } from '@polkadot/react-api';
 import { getAddressName } from '@polkadot/react-components/util';
+import { trackStream, useApi } from '@polkadot/react-hooks';
 
-interface Props extends BareProps, CallProps {
+interface Props extends BareProps {
   children?: React.ReactNode;
   defaultName?: string;
-  info?: DeriveAccountInfo;
   label?: React.ReactNode;
   params?: AccountId | AccountIndex | Address | string | null;
   withShort?: boolean;
@@ -41,7 +40,9 @@ function defaultOrAddr (defaultName = '', _address?: AccountId | AccountIndex |
   return extracted;
 }
 
-export function AccountName ({ children, className, defaultName, info, label = '', params, style }: Props): React.ReactElement<Props> {
+export default function AccountName ({ children, className, defaultName, label = '', params, style }: Props): React.ReactElement<Props> {
+  const { api } = useApi();
+  const info = trackStream<DeriveAccountInfo>(api.derive.accounts.info as any, [params]);
   const [name, setName] = useState(defaultOrAddr(defaultName, params));
 
   useEffect((): void => {
@@ -66,7 +67,3 @@ export function AccountName ({ children, className, defaultName, info, label = '
     </div>
   );
 }
-
-export default withCalls<Props>(
-  ['derive.accounts.info', { paramName: 'params', propName: 'info' }]
-)(AccountName);