Lookup nicknames (#1793)

packages/app-council/src/Overview/Vote.tsx

@@ -165,8 +165,6 @@ class Vote extends TxModal<Props, State> {
       ? members.map((accountId): [AccountId, boolean] => [accountId, true]).concat(_candidates)
       : _candidates;
 
-    console.log('content', votes);
-
     return (
       <>
         {api.tx.electionsPhragmen && (

packages/app-staking/src/Actions/Accounts.tsx

@@ -12,8 +12,8 @@ import { withCalls, withMulti } from '@polkadot/react-api/with';
 import React, { useState } from 'react';
 import styled from 'styled-components';
 import { Button, CardGrid } from '@polkadot/react-components';
+import { AccountName } from '@polkadot/react-query';
 import createOption from '@polkadot/ui-keyring/options/item';
-import { getAddressName } from '@polkadot/react-components/util';
 
 import Account from './Account';
 import StartStaking from './NewStake';
@@ -43,7 +43,7 @@ function Accounts ({ allAccounts, allStashes, className, myControllers, recently
   const [isNewStakeOpen, setIsNewStateOpen] = useState(false);
   const myStashes = getMyStashes(myControllers, allAccounts);
   const stashOptions = allStashes.map((stashId): KeyringSectionOption =>
-    createOption(stashId, getAddressName(stashId, 'account') as string)
+    createOption(stashId, (<AccountName params={stashId} />) as any)
   );
   const isEmpty = !isNewStakeOpen && (!myStashes || myStashes.length === 0);
 

packages/react-components/src/AddressMini.tsx

@@ -8,9 +8,10 @@ import { BareProps } from './types';
 import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
+import { AccountName } from '@polkadot/react-query';
 import { KeyringItemType } from '@polkadot/ui-keyring/types';
 
-import { classes, getAddressName, toShortAddress } from './util';
+import { classes } from './util';
 import BalanceDisplay from './Balance';
 import BondedDisplay from './Bonded';
 import IdentityIcon from './IdentityIcon';
@@ -31,26 +32,8 @@ interface Props extends BareProps {
   withLockedVote?: boolean;
 }
 
-function renderAddressOrName ({ isShort = true, withAddress = true, type }: Props, address: string): React.ReactNode {
-  if (!withAddress) {
-    return null;
-  }
-
-  const name = getAddressName(address, type);
-
-  return (
-    <div className={`ui--AddressMini-address ${name ? 'withName' : 'withAddr'}`}>{
-      name || (
-        isShort
-          ? toShortAddress(address)
-          : address
-      )
-    }</div>
-  );
-}
-
 function AddressMini (props: Props): React.ReactElement<Props> | null {
-  const { balance, bonded, children, className, iconInfo, isPadded = true, style, value, withBalance = false, withBonded = false, withLockedVote = false } = props;
+  const { balance, bonded, children, className, iconInfo, isPadded = true, style, value, withAddress = true, withBalance = false, withBonded = false, withLockedVote = false } = props;
 
   if (!value) {
     return null;
@@ -64,7 +47,11 @@ function AddressMini (props: Props): React.ReactElement<Props> | null {
       style={style}
     >
       <div className='ui--AddressMini-info'>
-        {renderAddressOrName(props, address)}
+        {withAddress && (
+          <div className='ui--AddressMini-address'>
+            <AccountName params={address} />
+          </div>
+        )}
         {children}
       </div>
       <div className='ui--AddressMini-icon'>
@@ -116,19 +103,12 @@ export default styled(AddressMini)`
   }
 
   .ui--AddressMini-address {
-    &.withAddr,
-    &.withName {
-      font-family: monospace;
-      max-width: 9rem;
-      min-width: 9em;
-      overflow: hidden;
-      text-align: right;
-      text-overflow: ellipsis;
-    }
-
-    &.withName {
-      text-transform: uppercase;
-    }
+    font-family: monospace;
+    max-width: 9rem;
+    min-width: 9em;
+    overflow: hidden;
+    text-align: right;
+    text-overflow: ellipsis;
   }
 
   .ui--AddressMini-balances {

packages/react-components/src/AddressRow.tsx

@@ -3,19 +3,17 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { DeriveAccountInfo } from '@polkadot/api-derive/types';
 import { ApiProps } from '@polkadot/react-api/types';
 import { I18nProps } from '@polkadot/react-components/types';
-import { AccountId, AccountIndex, Address, Balance } from '@polkadot/types/interfaces';
-import { Codec } from '@polkadot/types/types';
+import { AccountId, AccountIndex, Address } from '@polkadot/types/interfaces';
 
 import BN from 'bn.js';
 import React from 'react';
 import styled from 'styled-components';
 import { withCalls, withMulti } from '@polkadot/react-api';
 import BaseIdentityIcon from '@polkadot/react-identicon';
-import { Bytes, Option } from '@polkadot/types';
 import keyring from '@polkadot/ui-keyring';
-import { u8aToString } from '@polkadot/util';
 
 import AddressInfo, { BalanceActiveType, ValidatorPrefsType } from './AddressInfo';
 import { classes, getAddressName, getAddressTags, toShortAddress } from './util';
@@ -29,7 +27,7 @@ export interface Props extends I18nProps, RowProps {
   isContract?: boolean;
   isValid?: boolean;
   label?: string;
-  nicks_nameOf?: Option<[Bytes, Balance] & Codec>;
+  accounts_info?: DeriveAccountInfo;
   noDefaultNameOpacity?: boolean;
   value: AccountId | AccountIndex | Address | string | null;
   withAddressOrName?: boolean;
@@ -51,17 +49,18 @@ class AddressRow extends Row<ApiProps & Props, State> {
     this.state = this.createState();
   }
 
-  public static getDerivedStateFromProps ({ accounts_idAndIndex = [], defaultName, nicks_nameOf, noDefaultNameOpacity, type, value }: Props, prevState: State): State | null {
+  public static getDerivedStateFromProps ({ accounts_idAndIndex = [], accounts_info, defaultName, isEditable, noDefaultNameOpacity, type, value }: Props, prevState: State): State | null {
     const [_accountId] = accounts_idAndIndex;
     const accountId = _accountId || value;
     const address = accountId
       ? accountId.toString()
       : DEFAULT_ADDR;
-    const nickName = nicks_nameOf && nicks_nameOf.isSome
-      ? u8aToString(nicks_nameOf.unwrap()[0])
-      : undefined;
-    const nameHolder = defaultName || '<unknown>';
-    const name = nickName || getAddressName(address, type, false, noDefaultNameOpacity ? nameHolder : <span className='ui--Row-placeholder'>{nameHolder}</span>) || '';
+    const [, isDefault, nameInner] = accounts_info && accounts_info.nickname
+      ? [true, false, accounts_info.nickname]
+      : getAddressName(address, type, defaultName || '<unknown>');
+    const name = isDefault && !noDefaultNameOpacity && !isEditable
+      ? <div className='ui--Row-placeholder'>{nameInner}</div>
+      : nameInner;
     const tags = getAddressTags(address, type);
     const state: Partial<State> = { tags };
     let hasChanged = false;
@@ -114,13 +113,13 @@ class AddressRow extends Row<ApiProps & Props, State> {
     const address = accountId
       ? accountId.toString()
       : DEFAULT_ADDR;
-    const name = getAddressName(address, type, false, defaultName || '<unknown>') || '';
+    const [, , name] = getAddressName(address, type, defaultName || '<unknown>');
     const tags = getAddressTags(address, type);
 
     return {
       ...this.state,
       address,
-      name: name as string,
+      name,
       tags
     };
   }
@@ -297,6 +296,6 @@ export default withMulti(
   translate,
   withCalls<Props>(
     ['derive.accounts.idAndIndex', { paramName: 'value' }],
-    ['query.nicks.nameOf', { paramName: 'value' }]
+    ['derive.accounts.info', { paramName: 'value' }]
   )
 );

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

@@ -10,12 +10,13 @@ import React from 'react';
 import store from 'store';
 import styled from 'styled-components';
 import { withMulti, withObservable } from '@polkadot/react-api';
+import { AccountName } from '@polkadot/react-query';
 import keyring from '@polkadot/ui-keyring';
 import keyringOption from '@polkadot/ui-keyring/options';
 import createKeyringItem from '@polkadot/ui-keyring/options/item';
 import { isUndefined } from '@polkadot/util';
 
-import { classes, getAddressName } from '../util';
+import { classes } from '../util';
 import addressToAddress from '../util/toAddress';
 import Dropdown from '../Dropdown';
 import createHeader from './createHeader';
@@ -198,13 +199,8 @@ class InputAddress extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderLabel = ({ value }: KeyringSectionOption): React.ReactNode => {
-    if (!value) {
-      return undefined;
-    }
-
-    return getAddressName(value, null, true);
-  }
+  private renderLabel = ({ value }: KeyringSectionOption): React.ReactNode =>
+    <AccountName params={value} />;
 
   private getLastOptionValue (): KeyringSectionOption | undefined {
     const { optionsAll, type = DEFAULT_TYPE } = this.props;

packages/react-components/src/util/getAddressName.ts

@@ -4,16 +4,16 @@
 
 import { KeyringItemType } from '@polkadot/ui-keyring/types';
 
-import React from 'react';
-
 import getAddressMeta from './getAddressMeta';
 import toShortAddress from './toShortAddress';
 
-export default function getAddressName (address: string, type: KeyringItemType | null = null, withShort?: boolean, defaultName?: React.ReactNode): React.ReactNode | string | undefined {
+// isName, isDefault, name
+export default function getAddressName (address: string, type: KeyringItemType | null = null, defaultName?: string): [boolean, boolean, string] {
   const meta = getAddressMeta(address, type);
-  const name = meta.name || defaultName;
 
-  return !name && withShort
-    ? toShortAddress(address)
-    : name;
+  return meta.name
+    ? [false, false, meta.name]
+    : defaultName
+      ? [false, true, defaultName]
+      : [true, false, toShortAddress(address)];
 }

packages/react-query/src/AccountName.tsx

@@ -0,0 +1,57 @@
+// Copyright 2017-2019 @polkadot/react-query 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 { DeriveAccountInfo } from '@polkadot/api-derive/types';
+import { BareProps, CallProps } from '@polkadot/react-api/types';
+import { AccountId, AccountIndex } from '@polkadot/types/interfaces';
+
+import React, { useState, useEffect } from 'react';
+import { withCalls } from '@polkadot/react-api';
+import { getAddressName, toShortAddress } from '@polkadot/react-components/util';
+
+interface Props extends BareProps, CallProps {
+  children?: React.ReactNode;
+  defaultName?: React.ReactNode;
+  idAndIndex?: [AccountId?, AccountIndex?];
+  info?: DeriveAccountInfo;
+  label?: React.ReactNode;
+  params?: string | null;
+  withShort?: boolean;
+}
+
+export function AccountName ({ children, className, defaultName, idAndIndex, info, label = '', params, style }: Props): React.ReactElement<Props> {
+  const [name, setName] = useState<React.ReactNode>(defaultName || '');
+
+  useEffect((): void => {
+    const [accountId, accountIndex] = idAndIndex || [];
+
+    if (info && info.nickname) {
+      setName(info.nickname.toUpperCase());
+    } else if (accountId) {
+      const [isAddress, , extracted] = getAddressName(accountId.toString());
+
+      setName(
+        isAddress
+          ? (accountIndex && accountIndex.toString()) || extracted
+          : extracted.toUpperCase()
+      );
+    } else {
+      setName(defaultName || toShortAddress(params));
+    }
+  }, [idAndIndex, info]);
+
+  return (
+    <div
+      className={className}
+      style={style}
+    >
+      {label}{name}{children}
+    </div>
+  );
+}
+
+export default withCalls<Props>(
+  ['derive.accounts.idAndIndex', { paramName: 'params', propName: 'idAndIndex' }],
+  ['derive.accounts.info', { paramName: 'params', propName: 'info' }]
+)(AccountName);

packages/react-query/src/Balance.tsx

@@ -25,7 +25,7 @@ export function BalanceDisplay ({ children, className, label = '', balances_all
       {label}{
         balances_all
           ? formatBalance(balances_all.freeBalance)
-          : '0'
+          : '-'
       }{children}
     </div>
   );

packages/react-query/src/Bonded.tsx

@@ -24,7 +24,7 @@ export function BondedDisplay ({ children, className, label = '', staking_ledger
       {label}{
         staking_ledger
           ? formatBalance(staking_ledger.active)
-          : '0'
+          : '-'
       }{children}
     </div>
   );

packages/react-query/src/LockedVote.tsx

@@ -24,7 +24,7 @@ export function LockedVote ({ children, className, electionsPhragmen_stakeOf, la
       {label}{
         electionsPhragmen_stakeOf
           ? formatBalance(electionsPhragmen_stakeOf)
-          : '0'
+          : '-'
       }{children}
     </div>
   );

packages/react-query/src/index.ts

@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 export { default as AccountIndex } from './AccountIndex';
+export { default as AccountName } from './AccountName';
 export { default as Available } from './Available';
 export { default as Balance } from './Balance';
 export { default as Bonded } from './Bonded';