Various small UI fixes (incl. AddressMini names) (#1291)

* Various small UI fixes

* Types for getAddress defaults

packages/ui-app/src/AddressMini.tsx

@@ -68,13 +68,13 @@ class AddressMini extends React.PureComponent<Props> {
   }
 
   private renderAddressOrName (address: string) {
-    const { isShort = true, withAddress = true, type = 'address' } = this.props;
+    const { isShort = true, withAddress = true, type } = this.props;
 
     if (!withAddress) {
       return null;
     }
 
-    const name = getAddressName(address, type, true);
+    const name = getAddressName(address, type);
 
     return (
       <div className={`ui--AddressMini-address ${name ? 'withName' : 'withAddr'}`}>{
@@ -135,14 +135,18 @@ export default styled(AddressMini)`
   }
 
   .ui--AddressMini-address {
-    &.withAddr {
+    &.withAddr,
+    &.withName {
       font-family: monospace;
+      max-width: 9rem;
+      min-width: 4em;
+      overflow: hidden;
+      text-align: right;
+      text-overflow: ellipsis;
     }
 
     &.withName {
-      text-align: right;
       text-transform: uppercase;
-      min-width: 4em;
     }
   }
 

packages/ui-app/src/AddressRow.tsx

@@ -53,7 +53,7 @@ class AddressRow extends Row<Props, State> {
     const address = accountId
       ? accountId.toString()
       : DEFAULT_ADDR;
-    const name = getAddressName(address, type, false, defaultName) || '';
+    const name = getAddressName(address, type, false, defaultName || '<unknown>') || '';
     const tags = getAddressTags(address, type);
     const state = { tags } as State;
     let hasChanged = false;
@@ -106,7 +106,7 @@ class AddressRow extends Row<Props, State> {
     const address = accountId
       ? accountId.toString()
       : DEFAULT_ADDR;
-    const name = getAddressName(address, type, false, defaultName) || '';
+    const name = getAddressName(address, type, false, defaultName || '<unknown>') || '';
     const tags = getAddressTags(address, type);
 
     return {

packages/ui-app/src/Messages.tsx

@@ -8,9 +8,9 @@ import { Button } from '@polkadot/ui-app';
 
 import React from 'react';
 import styled from 'styled-components';
-import classNames from 'classnames';
 
 import translate from './translate';
+import { classes } from './util';
 
 export type Props = I18nProps & {
   address?: string,
@@ -20,44 +20,12 @@ export type Props = I18nProps & {
   onSelect?: (callAddress?: string, callMethod?: string) => void
 };
 
-const Wrapper = styled.div`
-  font-size: 0.9rem;
-  min-height: 3.5rem;
-  padding: 0;
-  margin: 0;
-  display: inline-flex;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: wrap;
-
-  & > .message {
-    font-family: monospace;
-    font-weight: normal;
-    margin-bottom: 0;
-    margin-right: 0;
-    padding: 0.5rem;
-    margin: 0;
-    border-radius: 0.7rem;
-
-    &.disabled {
-      opacity: 1 !important;
-      background: #eee !important;
-      color: #555 !important;
-    }
-
-    &:not(:last-of-type) {
-      margin-right: 1rem;
-    }
-  }
-`;
-
 class Messages extends React.PureComponent<Props> {
-
   render () {
-    const { contractAbi: { abi: { messages } }, isRemovable, onRemove = () => null, onSelect, t } = this.props;
+    const { className, contractAbi: { abi: { messages } }, isRemovable, onRemove = () => null, onSelect, t } = this.props;
 
     return (
-      <Wrapper className={onSelect && 'select'}>
+      <div className={classes(className, onSelect && 'select')}>
         {messages.map((_, index) => {
           return this.renderMessage(index);
         })}
@@ -71,7 +39,7 @@ class Messages extends React.PureComponent<Props> {
             tooltip={t('Remove ABI')}
           />
         )}
-      </Wrapper>
+      </div>
     );
   }
 
@@ -87,14 +55,14 @@ class Messages extends React.PureComponent<Props> {
     return (
       <Button
         key={name}
-        className={classNames('message', !onSelect && 'exempt-hover')}
+        className={classes('message', !onSelect && 'exempt-hover')}
         isDisabled={!onSelect}
         onClick={this.onSelect(index)}
         isPrimary={!!onSelect}
       >
         {name}
         (
-        {args.map(({ name: argName, type }) => `${argName}: ${type}`).join(', ')}
+          {args.map(({ name, type }) => `${name}: ${type}`).join(', ')}
         )
         {returnType && `: ${returnType}`}
       </Button>
@@ -114,4 +82,33 @@ class Messages extends React.PureComponent<Props> {
   }
 }
 
-export default translate(Messages);
+export default translate(styled(Messages)`
+  font-size: 0.9rem;
+  min-height: 3.5rem;
+  padding: 0;
+  margin: 0;
+  display: inline-flex;
+  justify-content: flex-start;
+  align-items: center;
+  flex-wrap: wrap;
+
+  & > .message {
+    font-family: monospace;
+    font-weight: normal;
+    margin-bottom: 0;
+    margin-right: 0;
+    padding: 0.5rem;
+    margin: 0;
+    /* border-radius: 0.7rem; */
+
+    &.disabled {
+      opacity: 1 !important;
+      background: #eee !important;
+      color: #555 !important;
+    }
+
+    &:not(:last-of-type) {
+      margin-right: 0.5rem;
+    }
+  }
+`);

packages/ui-app/src/Row.tsx

@@ -68,8 +68,12 @@ export const styles = `
 
   .ui--Row-buttons {
     flex: 0;
-    margin: -0.75rem -0.75rem 0 0;
+    margin: -0.75rem -1rem 0 0;
     white-space: nowrap;
+
+    button.ui.button:last-child {
+      margin-right: 0;
+    }
   }
 
   .ui--Row-children {

packages/ui-app/src/util/getAddressName.ts

@@ -6,7 +6,7 @@ import keyring from '@polkadot/ui-keyring';
 import { KeyringItemType } from '@polkadot/ui-keyring/types';
 import toShortAddress from './toShortAddress';
 
-export default function getAddressName (address: string, type: KeyringItemType | null = null, withShort?: boolean, defaultName?: string | null): string | undefined {
+export default function getAddressName (address: string, type: KeyringItemType | null = null, withShort?: boolean, defaultName?: string): string | undefined {
   let pair;
 
   try {
@@ -17,9 +17,9 @@ export default function getAddressName (address: string, type: KeyringItemType |
 
   const name = pair && pair.isValid()
     ? pair.getMeta().name
-    : (defaultName || null);
+    : defaultName;
 
   return !name && withShort
     ? toShortAddress(address)
-    : (name || '<unknown>');
+    : name;
 }

packages/ui-app/src/util/getAddressTags.ts

@@ -5,7 +5,7 @@
 import keyring from '@polkadot/ui-keyring';
 import { KeyringItemType } from '@polkadot/ui-keyring/types';
 
-export default function getAddressTags (address: string, type: KeyringItemType = 'account'): Array<string> {
+export default function getAddressTags (address: string, type: KeyringItemType | null = null): Array<string> {
   let pair;
 
   try {