Short address length, uppercase option (#121)

* Short address length, uppercase option

* Update CHANGELOG

packages/ui-keyring/src/options/KeyPair.tsx

@@ -9,6 +9,7 @@ import IdentityIcon from '@polkadot/ui-identicon';
 type Props = {
   address: string,
   className?: string,
+  isUppercase: boolean,
   name: string,
   style?: {
     [index: string]: string
@@ -44,14 +45,17 @@ const Wrapper = styled.div`
     flex: 1 0;
     margin-left: 3rem;
     overflow: hidden;
-    text-transform: uppercase;
     text-overflow: ellipsis;
+
+    &.uppercase {
+      text-transform: uppercase;
+    }
   }
 `;
 
 export default class KeyPair extends React.PureComponent<Props> {
   render () {
-    const { address, className, name, style } = this.props;
+    const { address, className, isUppercase, name, style } = this.props;
 
     return (
       <Wrapper
@@ -63,7 +67,7 @@ export default class KeyPair extends React.PureComponent<Props> {
           size={32}
           value={address}
         />
-        <div className='name'>
+        <div className={`name ${isUppercase ? 'uppercase' : 'normalcase'}`}>
           {name}
         </div>
         <div className='address'>

packages/ui-keyring/src/options/item.tsx

@@ -9,11 +9,11 @@ import { isUndefined } from '@polkadot/util';
 
 import KeyPair from './KeyPair';
 
-export default function createItem (address: string, _name?: string): KeyringSectionOption {
+export default function createItem (address: string, _name?: string, isUppercase: boolean = true): KeyringSectionOption {
   const name = isUndefined(_name)
     ? (
       (address.length > 15)
-        ? `${address.slice(0, 7)}…${address.slice(-7)}`
+        ? `${address.slice(0, 6)}…${address.slice(-6)}`
         : address
     )
     : _name;
@@ -24,6 +24,7 @@ export default function createItem (address: string, _name?: string): KeyringSec
     text: (
       <KeyPair
         address={address}
+        isUppercase={isUppercase}
         name={name}
       />
     ),