feat(@cockpit/explorer): display truncated account balances

Display a truncated account balance if the balance is greater than 20
characters in length. This keeps the "Balance", "Tx Count", and "Index" fields
well-aligned in lists of accounts.

In the account details page continue to show the full balance.

packages/embark-ui/src/components/Accounts.js

@@ -6,6 +6,23 @@ import Pagination from './Pagination';
 
 import CardTitleIdenticon from './CardTitleIdenticon';
 
+function displayTruncatedBalance (balance) {
+  const maxDisplayLength = 20;
+  if (balance.toString().length <= maxDisplayLength) {
+    return balance;
+  }
+  const [whole, fraction] = balance.toString().split('.');
+  if (whole.length >= maxDisplayLength) {
+    balance = '9'.repeat(maxDisplayLength - 1) + '+';
+  } else if (whole.length >= maxDisplayLength - 2) {
+    balance = whole + '+';
+  } else {
+    balance = whole + '.' +
+      fraction.slice(0, maxDisplayLength - (whole.length + 2)) + '+';
+  }
+  return balance;
+}
+
 const Accounts = ({accounts, changePage, currentPage, numberOfPages}) => (
   <Row>
     <Col>
@@ -23,7 +40,7 @@ const Accounts = ({accounts, changePage, currentPage, numberOfPages}) => (
               <Row>
                 <Col>
                   <strong>Balance</strong>
-                  <div>{account.balance} Ether</div>
+                  <div>{displayTruncatedBalance(account.balance)} Ether</div>
                 </Col>
                 <Col>
                   <strong>Tx Count</strong>