feat: Fixes #390. Show shortened version if account name over 25 chars

openethereum · Jan 24, 2019 · 48d64e4 · 48d64e4
1 parent 1fd1b98
commit 48d64e4
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/fether-react/src/assets/sass/components/_account.scss b/packages/fether-react/src/assets/sass/components/_account.scss
@@ -38,6 +38,7 @@
     color: $black;
     font-weight: 500;
     margin-bottom: 0.1rem;
+    white-space: nowrap;
 
     /**
      * Information component when used with components

diff --git a/packages/fether-ui/src/AccountCard/Name/Name.js b/packages/fether-ui/src/AccountCard/Name/Name.js
@@ -8,12 +8,16 @@ import PropTypes from 'prop-types';
 
 import { Placeholder } from '../../Placeholder';
 
+const MAX_ACCOUNT_NAME_LENGTH = 25;
+
 export const Name = ({ name, screen, ...otherProps }) => (
   <div
     className={`account_name ${screen !== 'accounts' ? '-header' : ''}`}
     {...otherProps}
   >
-    {name || <Placeholder height={18} width={100} />}
+    {name.length > MAX_ACCOUNT_NAME_LENGTH
+      ? `${name.substring(0, MAX_ACCOUNT_NAME_LENGTH)}...`
+      : name || <Placeholder height={14} width={100} />}
   </div>
 );