Addresses in nominate (#1794)

* Addresses in nominate

* Align uppercase

packages/react-components/src/AddressRow.tsx

@@ -56,7 +56,7 @@ class AddressRow extends Row<ApiProps & Props, State> {
       ? accountId.toString()
       : DEFAULT_ADDR;
     const [, isDefault, nameInner] = accounts_info && accounts_info.nickname
-      ? [true, false, accounts_info.nickname]
+      ? [true, false, accounts_info.nickname.toUpperCase()]
       : getAddressName(address, type, defaultName || '<unknown>');
     const name = isDefault && !noDefaultNameOpacity && !isEditable
       ? <div className='ui--Row-placeholder'>{nameInner}</div>

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

@@ -4,6 +4,7 @@
 
 import React from 'react';
 import styled from 'styled-components';
+import { AccountName } from '@polkadot/react-query';
 
 import IdentityIcon from '../IdentityIcon';
 
@@ -15,7 +16,7 @@ interface Props {
   style?: Record<string, string>;
 }
 
-function KeyPair ({ address, className, isUppercase, name, style }: Props): React.ReactElement<Props> {
+function KeyPair ({ address, className, style }: Props): React.ReactElement<Props> {
   return (
     <div
       className={['ui--KeyPair', className].join(' ')}
@@ -26,8 +27,8 @@ function KeyPair ({ address, className, isUppercase, name, style }: Props): Reac
         size={32}
         value={address}
       />
-      <div className={`name ${isUppercase ? 'uppercase' : 'normalcase'}`}>
-        {name}
+      <div className='name'>
+        <AccountName params={address} />
       </div>
       <div className='address'>
         {address}

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

@@ -16,7 +16,7 @@ export default function createItem (option: KeyringSectionOption, isUppercase =
       <KeyPair
         address={option.key || ''}
         isUppercase={isUppercase}
-        name={option.name}
+        name={name}
       />
     )
   };

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

@@ -10,13 +10,12 @@ 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 } from '../util';
+import { classes, getAddressName } from '../util';
 import addressToAddress from '../util/toAddress';
 import Dropdown from '../Dropdown';
 import createHeader from './createHeader';
@@ -199,8 +198,13 @@ class InputAddress extends React.PureComponent<Props, State> {
     );
   }
 
-  private renderLabel = ({ value }: KeyringSectionOption): React.ReactNode =>
-    <AccountName params={value} />;
+  private renderLabel = ({ value }: KeyringSectionOption): React.ReactNode => {
+    if (!value) {
+      return undefined;
+    }
+
+    return getAddressName(value);
+  }
 
   private getLastOptionValue (): KeyringSectionOption | undefined {
     const { optionsAll, type = DEFAULT_TYPE } = this.props;

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

@@ -12,8 +12,8 @@ export default function getAddressName (address: string, type: KeyringItemType |
   const meta = getAddressMeta(address, type);
 
   return meta.name
-    ? [false, false, meta.name]
+    ? [false, false, meta.name.toUpperCase()]
     : defaultName
-      ? [false, true, defaultName]
+      ? [false, true, defaultName.toUpperCase()]
       : [true, false, toShortAddress(address)];
 }

packages/react-query/src/AccountName.tsx

@@ -12,7 +12,7 @@ import { getAddressName, toShortAddress } from '@polkadot/react-components/util'
 
 interface Props extends BareProps, CallProps {
   children?: React.ReactNode;
-  defaultName?: React.ReactNode;
+  defaultName?: string;
   idAndIndex?: [AccountId?, AccountIndex?];
   info?: DeriveAccountInfo;
   label?: React.ReactNode;
@@ -20,8 +20,8 @@ interface Props extends BareProps, CallProps {
   withShort?: boolean;
 }
 
-export function AccountName ({ children, className, defaultName, idAndIndex, info, label = '', params, style }: Props): React.ReactElement<Props> {
-  const [name, setName] = useState<React.ReactNode>(defaultName || '');
+export function AccountName ({ children, className, defaultName = '', idAndIndex, info, label = '', params, style }: Props): React.ReactElement<Props> {
+  const [name, setName] = useState<React.ReactNode>(defaultName.toUpperCase());
 
   useEffect((): void => {
     const [accountId, accountIndex] = idAndIndex || [];
@@ -34,10 +34,10 @@ export function AccountName ({ children, className, defaultName, idAndIndex, inf
       setName(
         isAddress
           ? (accountIndex && accountIndex.toString()) || extracted
-          : extracted.toUpperCase()
+          : extracted
       );
     } else {
-      setName(defaultName || toShortAddress(params));
+      setName(defaultName.toUpperCase() || toShortAddress(params));
     }
   }, [idAndIndex, info]);