Merge pull request #699 from LiskHQ/646-approximation-symbol

Add approximation symbol to imprecise values - Closes #646
LiskArchive · Jun 11, 2018 · 6affc10 · 6affc10
2 parents 850c436 + 33df9f3
commit 6affc10
Show file tree

Hide file tree

Showing 13 changed files with 82 additions and 47 deletions.
diff --git a/features/delegateMonitor.feature b/features/delegateMonitor.feature
@@ -41,7 +41,7 @@ Feature: Delegate Monitor
     And I should see "total forged" element with content that matches:
       """
       TOTAL FORGED \(LSK\)
-      \d{1,3},\d{3}\
+      ~\d{1,3},\d{3}\
       between 101 active delegates
       """
     And I should see "best forger" element with content that matches:

diff --git a/features/footer.feature b/features/footer.feature
@@ -11,24 +11,24 @@ Feature: Footer
     When I click "decimal places menu"
     And I click "show all 8"
     And I should see table "latest transactions" with 20 rows starting with:
-      | Id                   | Timestamp                 | Sender      | Recipient             | Amount           | Fee       |
-      |----------------------|---------------------------|-------------|-----------------------|------------------|-----------|
-      | 292176566870988581   | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | 123.45000000 LSK | 0.1 LSK   |
-      | 4629979183209290127  | /2017\/06\/19 \d\d:17:59/ | standby_301 | 18234943547133247982L | 100.00000000 LSK | 0.1 LSK   |
-      | 16747360986039780565 | /2017\/06\/19 \d\d:17:49/ | standby_301 | 18234943547133247982L | 100.12345678 LSK | 0.1 LSK   |
-      | 2799279669192005501  | /2017\/06\/19 \d\d:17:39/ | standby_301 | 18234943547133247982L |   0.12345600 LSK | 0.1 LSK   |
+      | Id                   | Timestamp                 | Sender      | Recipient             | Amount           | Fee              |
+      |----------------------|---------------------------|-------------|-----------------------|------------------|------------------|
+      | 292176566870988581   | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | 123.45000000 LSK | 0.10000000 LSK   |
+      | 4629979183209290127  | /2017\/06\/19 \d\d:17:59/ | standby_301 | 18234943547133247982L | 100.00000000 LSK | 0.10000000 LSK   |
+      | 16747360986039780565 | /2017\/06\/19 \d\d:17:49/ | standby_301 | 18234943547133247982L | 100.12345678 LSK | 0.10000000 LSK   |
+      | 2799279669192005501  | /2017\/06\/19 \d\d:17:39/ | standby_301 | 18234943547133247982L |   0.12345600 LSK | 0.10000000 LSK   |
 
   Scenario: allows to round to 4 decimal places
     Given I'm on page "/"
     When I click "decimal places menu"
     And I click "round to 4"
     And I should see table "latest transactions" with 20 rows starting with:
-      | Id                   | Timestamp                 | Sender      | Recipient             | Amount       | Fee       |
-      |----------------------|---------------------------|-------------|-----------------------|--------------|-----------|
-      | 292176566870988581   | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | 123.4500 LSK | 0.1 LSK   |
-      | 4629979183209290127  | /2017\/06\/19 \d\d:17:59/ | standby_301 | 18234943547133247982L | 100.0000 LSK | 0.1 LSK   |
-      | 16747360986039780565 | /2017\/06\/19 \d\d:17:49/ | standby_301 | 18234943547133247982L | 100.1235 LSK | 0.1 LSK   |
-      | 2799279669192005501  | /2017\/06\/19 \d\d:17:39/ | standby_301 | 18234943547133247982L |   0.1235 LSK | 0.1 LSK   |
+      | Id                   | Timestamp                 | Sender      | Recipient             | Amount       | Fee          |
+      |----------------------|---------------------------|-------------|-----------------------|--------------|--------------|
+      | 292176566870988581   | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L |  123.4500 LSK | 0.1000 LSK  |
+      | 4629979183209290127  | /2017\/06\/19 \d\d:17:59/ | standby_301 | 18234943547133247982L |  100.0000 LSK | 0.1000 LSK  |
+      | 16747360986039780565 | /2017\/06\/19 \d\d:17:49/ | standby_301 | 18234943547133247982L | ~100.1235 LSK | 0.1000 LSK  |
+      | 2799279669192005501  | /2017\/06\/19 \d\d:17:39/ | standby_301 | 18234943547133247982L |   ~0.1235 LSK | 0.1000 LSK  |
 
   Scenario: allows to round to whole number
     Given I'm on page "/"
@@ -37,10 +37,10 @@ Feature: Footer
     And I should see table "latest transactions" with 20 rows starting with:
       | Id                   | Timestamp                 | Sender      | Recipient             | Amount           | Fee       |
       |----------------------|---------------------------|-------------|-----------------------|------------------|-----------|
-      | 292176566870988581   | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | 123 LSK          | 0.1 LSK   |
-      | 4629979183209290127  | /2017\/06\/19 \d\d:17:59/ | standby_301 | 18234943547133247982L | 100 LSK          | 0.1 LSK   |
-      | 16747360986039780565 | /2017\/06\/19 \d\d:17:49/ | standby_301 | 18234943547133247982L | 100 LSK          | 0.1 LSK   |
-      | 2799279669192005501  | /2017\/06\/19 \d\d:17:39/ | standby_301 | 18234943547133247982L | 0 LSK            | 0.1 LSK   |
+      | 292176566870988581   | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | ~123 LSK         | ~0 LSK    |
+      | 4629979183209290127  | /2017\/06\/19 \d\d:17:59/ | standby_301 | 18234943547133247982L | 100 LSK          | ~0 LSK    |
+      | 16747360986039780565 | /2017\/06\/19 \d\d:17:49/ | standby_301 | 18234943547133247982L | ~100 LSK         | ~0 LSK    |
+      | 2799279669192005501  | /2017\/06\/19 \d\d:17:39/ | standby_301 | 18234943547133247982L | ~0 LSK           | ~0 LSK    |
 
   Scenario: allows to trim floating points 
     Given I'm on page "/"

diff --git a/features/menu.feature b/features/menu.feature
@@ -36,47 +36,47 @@ Feature: Top menu
     When I click "LSK menu"
     And I click "BTC"
     And I should see table "latest transactions" with 20 rows starting with:
-      | Id                 | Timestamp                 | Sender      | Recipient             | Amount                 | Fee           |
-      |--------------------|---------------------------|-------------|-----------------------|------------------------|---------------|
-      | 292176566870988581 | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | /\d+(,\d{3})?(\.\d+)? BTC/ | /\d+(\.\d+)? BTC/ |
+      | Id                 | Timestamp                 | Sender      | Recipient             | Amount                      | Fee                |
+      |--------------------|---------------------------|-------------|-----------------------|-----------------------------|--------------------|
+      | 292176566870988581 | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | /~\d+(,\d{3})?(\.\d+)? BTC/ | /~\d+(\.\d+)? BTC/ |
 
   @ignore
   Scenario: should allow to switch currency to CNY
     Given I'm on page "/"
     When I click "LSK menu"
     And I click "CNY"
     And I should see table "latest transactions" with 20 rows starting with:
-      | Id                 | Timestamp                 | Sender      | Recipient             | Amount                     | Fee               |
-      |--------------------|---------------------------|-------------|-----------------------|----------------------------|-------------------|
-      | 292176566870988581 | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | /\d+(,\d{3})?(\.\d+)? CNY/ | /\d+(\.\d+)? CNY/ |
+      | Id                 | Timestamp                 | Sender      | Recipient             | Amount                      | Fee                |
+      |--------------------|---------------------------|-------------|-----------------------|-----------------------------|--------------------|
+      | 292176566870988581 | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | /~\d+(,\d{3})?(\.\d+)? CNY/ | /~\d+(\.\d+)? CNY/ |
 
   Scenario: should allow to switch currency to USD
     Given I'm on page "/"
     When I click "LSK menu"
     And I click "USD"
     And I should see table "latest transactions" with 20 rows starting with:
-      | Id                 | Timestamp                 | Sender      | Recipient             | Amount                     | Fee               |
-      |--------------------|---------------------------|-------------|-----------------------|----------------------------|-------------------|
-      | 292176566870988581 | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | /\d+(,\d{3})?(\.\d+)? USD/ | /\d+(\.\d+)? USD/ |
+      | Id                 | Timestamp                 | Sender      | Recipient             | Amount                      | Fee                |
+      |--------------------|---------------------------|-------------|-----------------------|-----------------------------|--------------------|
+      | 292176566870988581 | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | /~\d+(,\d{3})?(\.\d+)? USD/ | /~\d+(\.\d+)? USD/ |
 
   Scenario: should allow to switch currency to EUR
     Given I'm on page "/"
     When I click "LSK menu"
     And I click "EUR"
     And I should see table "latest transactions" with 20 rows starting with:
-      | Id                 | Timestamp                 | Sender      | Recipient             | Amount                     | Fee               |
-      |--------------------|---------------------------|-------------|-----------------------|----------------------------|-------------------|
-      | 292176566870988581 | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | /\d+(,\d{3})?(\.\d+)? EUR/ | /\d+(\.\d+)? EUR/ |
+      | Id                 | Timestamp                 | Sender      | Recipient             | Amount                      | Fee                |
+      |--------------------|---------------------------|-------------|-----------------------|-----------------------------|--------------------|
+      | 292176566870988581 | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | /~\d+(,\d{3})?(\.\d+)? EUR/ | /~\d+(\.\d+)? EUR/ |
 
   @ignore
   Scenario: should allow to switch currency to RUB
     Given I'm on page "/"
     When I click "LSK menu"
     And I click "RUB"
     And I should see table "latest transactions" with 20 rows starting with:
-      | Id                 | Timestamp                 | Sender      | Recipient             | Amount                     | Fee               |
-      |--------------------|---------------------------|-------------|-----------------------|----------------------------|-------------------|
-      | 292176566870988581 | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | /\d+(,\d{3})?(\.\d+)? RUB/ | /\d+(\.\d+)? RUB/ |
+      | Id                 | Timestamp                 | Sender      | Recipient             | Amount                      | Fee                |
+      |--------------------|---------------------------|-------------|-----------------------|-----------------------------|--------------------|
+      | 292176566870988581 | /2017\/06\/19 \d\d:18:09/ | standby_301 | 18234943547133247982L | /~\d+(,\d{3})?(\.\d+)? RUB/ | /~\d+(\.\d+)? RUB/ |
 
   Scenario: should allow to switch currency to LSK
     Given I'm on page "/"

diff --git a/features/topAccounts.feature b/features/topAccounts.feature
@@ -4,7 +4,7 @@ Feature: Top Accounts page
     Then I should see "Top Accounts" in "h1" html element
     And I should see "Home Top Accounts" in "breadcrumb" element
     And I should see table "top accounts" with 50 rows starting with:
-      | Rank | Address               | ~ Balance             | Supply       | Owner          |
+      | Rank | Address               | Balance               | Supply       | Owner          |
       |------|-----------------------|-----------------------|--------------|----------------|
       | 1    | 16313739661670634666L | 99,675,450.108366 LSK | /99\.\d{2}%/ | N/A            |
       | 2    | 4401082358022424760L  | 9,971 LSK             | /0\.\d{2}%/  | gottavoteemall |

diff --git a/src/components/blocks/block.html b/src/components/blocks/block.html
@@ -48,7 +48,7 @@ <h1>
 							</tr>
 							<tr>
 								<td class='left-padding-xs left-padding-s left-padding-m left-padding-l double'><strong>Total Fee</strong></td>
-								<td class="right-padding-xs right-padding-s right-padding-m right-padding-l double text-right">{{vm.block.totalFee | currency:$root.currency}} <span class="text-muted">{{$root.currency.symbol}}</span></td>
+								<td class="right-padding-xs right-padding-s right-padding-m right-padding-l double text-right">{{vm.block.totalFee | currencyFee:$root.currency:$root.decimalPlaces}} <span class="text-muted">{{$root.currency.symbol}}</span></td>
 							</tr>
 							<tr>
 								<td class='left-padding-xs left-padding-s left-padding-m left-padding-l double'><strong>Total Forged</strong></td>

diff --git a/src/components/top-accounts/top-accounts.html b/src/components/top-accounts/top-accounts.html
@@ -26,7 +26,7 @@ <h1>Top Accounts</h1>
 							<tr>
 								<th class="left-padding-s left-padding-m left-padding-l double hidden-xs" width="5%">Rank</th>
 								<th class="left-padding-xs address-cell">Address</th>
-								<th class="right-padding-xs text-right">~ Balance</th>
+								<th class="right-padding-xs text-right">Balance</th>
 								<th class="right-padding-s text-right">Supply</th>
 								<th class="right-padding-m right-padding-l double text-right hidden-xs hidden-sm">Owner</th>
 							</tr>

diff --git a/src/components/transactions/transactions.html b/src/components/transactions/transactions.html
@@ -57,7 +57,7 @@ <h1>Transaction <small>{{vm.tx.id}}</small>&nbsp;<span class="btn-copy" clip-cop
 					</tr>
 					<tr>
 						<td class="left-padding-xs left-padding-s left-padding-m left-padding-l double"><strong>Fee</strong></td>
-						<td class="right-padding-xs right-padding-s right-padding-m right-padding-l double text-right">{{vm.tx.fee | currency:$root.currency}} <span class="text-muted">{{$root.currency.symbol}}</span></td>
+						<td class="right-padding-xs right-padding-s right-padding-m right-padding-l double text-right">{{vm.tx.fee | currencyFee:$root.currency:$root.decimalPlaces}} <span class="text-muted">{{$root.currency.symbol}}</span></td>
 					</tr>
 					<tr>
 						<td class="left-padding-xs left-padding-s left-padding-m left-padding-l double"><strong>Timestamp</strong></td>

diff --git a/src/filters/currency.js b/src/filters/currency.js
@@ -15,11 +15,11 @@
  */
 import AppFilters from './filters.module';
 
-AppFilters.filter('currency', (numberFilter, liskFilter) => (amount, currency, decimalPlacesCrypto, decimalPlacesFiat) => {
-	const lisk = liskFilter(amount);
-	let factor = 1;
+AppFilters.filter('currency', (numberFilter, liskFilter, fiatFilter, isFiat) => (amount, currency, decimalPlacesCrypto, decimalPlacesFiat) => {
+	if (amount === 0) return amount;
 
-	if (!decimalPlacesFiat && decimalPlacesFiat !== 0) decimalPlacesFiat = 2;
+	let factor = 1;
+	let equivalent = false;
 
 	if (currency.tickers && currency.tickers.LSK && currency.tickers.LSK[currency.symbol]) {
 		factor = currency.tickers.LSK[currency.symbol];
@@ -28,9 +28,23 @@ AppFilters.filter('currency', (numberFilter, liskFilter) => (amount, currency, d
 		return 'N/A';
 	}
 
-	const decimals = (currency.symbol === 'LSK' || currency.symbol === 'BTC') ? decimalPlacesCrypto : decimalPlacesFiat;
-	if (typeof decimals === 'number' && lisk > 0) {
-		return numberFilter((lisk * factor), decimals);
+	if (isFiat(currency)) {
+		amount = fiatFilter(amount);
+		if (typeof decimalPlacesFiat !== 'number') decimalPlacesFiat = 2;
+		return `~${numberFilter(amount * factor, decimalPlacesFiat)}`;
+	}
+
+	amount = liskFilter(amount);
+
+	if (typeof decimalPlacesCrypto === 'undefined') {
+		amount = numberFilter((amount * factor), 8).replace(/\.?0+$/, '');
+		return factor === 1 ? amount : `~${amount}`;
+	}
+
+	if (currency.symbol === 'LSK') {
+		equivalent = Number(amount) === Number(numberFilter((amount * factor), decimalPlacesCrypto));
 	}
-	return numberFilter((lisk * factor), 8).replace(/\.?0+$/, '');
+
+	amount = numberFilter((amount * factor), decimalPlacesCrypto);
+	return (factor !== 1 || decimalPlacesCrypto !== 8) && !equivalent ? `~${amount}` : amount;
 });
diff --git a/src/filters/currencyFee.js b/src/filters/currencyFee.js
@@ -16,7 +16,7 @@
 import AppFilters from './filters.module';
 
 AppFilters.filter('currencyFee', currencyFilter => (amount, currency, decimalPlacesCrypto, decimalPlacesFiat) => {
-	if (currency.symbol === 'LSK') {
+	if (currency.symbol === 'LSK' && typeof decimalPlacesCrypto === 'undefined') {
 		decimalPlacesCrypto = 1;
 	}
 

diff --git a/src/filters/lisk.js b/src/filters/lisk.js
@@ -19,5 +19,5 @@ AppFilters.filter('lisk', () => (amount) => {
 	if (isNaN(amount)) {
 		return (0).toFixed(8);
 	}
-	return (parseInt(amount, 10) / 1e8).toFixed(8).replace(/\.?0+$/, '');
+	return (parseInt(amount, 10) / 1e8).toFixed(8);
 });
diff --git a/src/services/index.js b/src/services/index.js
@@ -19,6 +19,7 @@ import './block-txs';
 import './forging-monitor';
 import './forging-status';
 import './global';
+import './is-fiat';
 import './less-more';
 import './order-by';
 import './socket';

diff --git a/src/services/is-fiat.js b/src/services/is-fiat.js
@@ -0,0 +1,20 @@
+/*
+ * LiskHQ/lisk-explorer
+ * Copyright © 2018 Lisk Foundation
+ *
+ * See the LICENSE file at the top-level directory of this distribution
+ * for licensing information.
+ *
+ * Unless otherwise agreed in a custom licensing agreement with the Lisk Foundation,
+ * no part of this software, including this file, may be copied, modified,
+ * propagated, or distributed except according to the terms contained in the
+ * LICENSE file.
+ *
+ * Removal or modification of this copyright notice is prohibited.
+ *
+ */
+import AppServices from './services.module';
+
+
+AppServices.factory('isFiat',
+	() => currency => (currency.symbol !== 'LSK' && currency.symbol !== 'BTC'));
diff --git a/src/shared/transaction-item/transaction-item.html b/src/shared/transaction-item/transaction-item.html
@@ -45,7 +45,7 @@
 	}">{{tx.amount | currency:$root.currency:$root.decimalPlaces}} {{$root.currency.symbol}}
 	</span>
 </td>
-<td data-title="Fee" class="text-nowrap text-right"><span>{{tx.fee | currencyFee:$root.currency}} {{$root.currency.symbol}}</span></td>
+<td data-title="Fee" class="text-nowrap text-right"><span>{{tx.fee | currencyFee:$root.currency:$root.decimalPlaces}} {{$root.currency.symbol}}</span></td>
 <td data-title="Confirmations" class="text-right right-padding-m right-padding-l double">
 	<span class="hidden-md">
 		<span data-ng-if="!block.confirmations && !tx.confirmations" class="text-danger">