Short address length, uppercase option (#121)

* Short address length, uppercase option

* Update CHANGELOG

packages/ui-identicon/package.json

@@ -24,8 +24,8 @@
     "react": "*"
   },
   "devDependencies": {
-    "@polkadot/keyring": "^0.90.0-beta.1",
-    "@polkadot/util-crypto": "^0.90.0-beta.1",
+    "@polkadot/keyring": "^0.90.0-beta.4",
+    "@polkadot/util-crypto": "^0.90.0-beta.4",
     "xmlserializer": "^0.6.1"
   }
 }

packages/ui-keyring/package.json

@@ -16,9 +16,9 @@
     "styled-components": "^4.2.0"
   },
   "devDependencies": {
-    "@polkadot/keyring": "^0.90.0-beta.1",
-    "@polkadot/types": "^0.78.0-beta.1",
-    "@polkadot/util": "^0.90.0-beta.1"
+    "@polkadot/keyring": "^0.90.0-beta.4",
+    "@polkadot/types": "^0.78.0-beta.13",
+    "@polkadot/util": "^0.90.0-beta.4"
   },
   "peerDependencies": {
     "@polkadot/keyring": "*",

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}
       />
     ),

packages/ui-settings/package.json

@@ -14,7 +14,7 @@
     "store": "^2.0.12"
   },
   "devDependencies": {
-    "@polkadot/util": "^0.90.0-beta.1"
+    "@polkadot/util": "^0.90.0-beta.4"
   },
   "peerDependencies": {
     "@polkadot/util": "*"

packages/ui-util/package.json

@@ -12,7 +12,7 @@
     "@babel/runtime": "^7.4.4"
   },
   "devDependencies": {
-    "@polkadot/types": "^0.78.0-beta.1"
+    "@polkadot/types": "^0.78.0-beta.13"
   },
   "peerDependencies": {
     "@polkadot/types": "*"