embarklabs/embark
2
0
Fork 0
mirror of https://github.com/embarklabs/embark.git synced 2025-02-23 10:58:28 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
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.
This commit is contained in:
Michael Bradley, Jr 2019-04-03 09:27:49 -05:00 committed by Iuri Matias
parent 745edafee4
commit 6b2dc95fad
1 changed files with 18 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/embark-ui/src/components/Accounts.js
View File

@ -6,6 +6,23 @@ import Pagination from './Pagination';
import CardTitleIdenticon from './CardTitleIdenticon'; 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}) => ( const Accounts = ({accounts, changePage, currentPage, numberOfPages}) => (
<Row> <Row>
<Col> <Col>
@ -23,7 +40,7 @@ const Accounts = ({accounts, changePage, currentPage, numberOfPages}) => (
<Row> <Row>
<Col> <Col>
<strong>Balance</strong> <strong>Balance</strong>
<div>{account.balance} Ether</div> <div>{displayTruncatedBalance(account.balance)} Ether</div>
</Col> </Col>
<Col> <Col>
<strong>Tx Count</strong> <strong>Tx Count</strong>