From 2c99350a142afcc4a84ea31d02b5f369bd6b2543 Mon Sep 17 00:00:00 2001
From: Aleksandar Djordjevic
Date: Fri, 22 Nov 2019 02:27:35 +0100
Subject: [PATCH] [DDW-1080] - Wallet ada displays in several lines when number
format is selected without any separators
---
.../renderer/app/components/layout/TopBar.js | 2 +-
.../wallets/SidebarWalletMenuItem.scss | 4 +-
.../DelegationStepsActivationDialog.js | 6 +--
.../DelegationStepsConfirmationDialog.js | 2 +-
.../wallet/transactions/Transaction.js | 2 +-
.../TransferFundsStep1Dialog.js | 2 +-
.../TransferFundsStep2Dialog.js | 5 ++-
.../widgets/forms/WalletsDropdown.js | 2 +-
source/renderer/app/stores/WalletsStore.js | 6 ++-
source/renderer/app/utils/formatters.js | 37 ++++++++++++++++++-
10 files changed, 54 insertions(+), 14 deletions(-)
diff --git a/source/renderer/app/components/layout/TopBar.js b/source/renderer/app/components/layout/TopBar.js
index 984b7a459a..52f2f69f7f 100644
--- a/source/renderer/app/components/layout/TopBar.js
+++ b/source/renderer/app/components/layout/TopBar.js
@@ -68,7 +68,7 @@ export default class TopBar extends Component {
{// show currency and use long format
- formattedWalletAmount(activeWallet.amount, true)}
+ formattedWalletAmount(activeWallet.amount, true, true)}
) : null;
diff --git a/source/renderer/app/components/sidebar/wallets/SidebarWalletMenuItem.scss b/source/renderer/app/components/sidebar/wallets/SidebarWalletMenuItem.scss
index 8ab29817c3..368088e51c 100644
--- a/source/renderer/app/components/sidebar/wallets/SidebarWalletMenuItem.scss
+++ b/source/renderer/app/components/sidebar/wallets/SidebarWalletMenuItem.scss
@@ -20,6 +20,9 @@
}
.legacyItem {
+ .title {
+ padding-right: 58.5px;
+ }
.meta {
padding-right: 8px;
@@ -65,7 +68,6 @@
font-size: 18px;
line-height: 1.5em;
margin-top: -5.5px;
- padding-right: 58.5px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
diff --git a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsActivationDialog.js b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsActivationDialog.js
index 0ccb9e0e32..c553d59efa 100644
--- a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsActivationDialog.js
+++ b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsActivationDialog.js
@@ -248,7 +248,7 @@ export default class DelegationStepsActivationDialog extends Component {
{intl.formatMessage(messages.amountLabel)}
- {formattedWalletAmount(amount, false)}
+ {formattedWalletAmount(amount, false, true)}
ADA
@@ -258,7 +258,7 @@ export default class DelegationStepsActivationDialog extends Component {
{intl.formatMessage(messages.feesLabel)}
- + {formattedWalletAmount(fees, false)}
+ + {formattedWalletAmount(fees, false, true)}
ADA
@@ -269,7 +269,7 @@ export default class DelegationStepsActivationDialog extends Component {
{intl.formatMessage(messages.totalLabel)}
- {formattedWalletAmount(amount.add(fees), false)}
+ {formattedWalletAmount(amount.add(fees), false, true)}
ADA
diff --git a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js
index e7c4997de5..5b6d375231 100644
--- a/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js
+++ b/source/renderer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js
@@ -205,7 +205,7 @@ export default class DelegationStepsConfirmationDialog extends Component
{intl.formatMessage(messages.feesLabel)}
- {formattedWalletAmount(fees, false)}
+ {formattedWalletAmount(fees, false, true)}
ADA
diff --git a/source/renderer/app/components/wallet/transactions/Transaction.js b/source/renderer/app/components/wallet/transactions/Transaction.js
index 3cdb671abb..c899fd756c 100644
--- a/source/renderer/app/components/wallet/transactions/Transaction.js
+++ b/source/renderer/app/components/wallet/transactions/Transaction.js
@@ -405,7 +405,7 @@ export default class Transaction extends Component {
{// hide currency (we are showing symbol instead)
- formattedWalletAmount(data.amount, false)}
+ formattedWalletAmount(data.amount, false, true)}
diff --git a/source/renderer/app/components/wallet/transfer-funds/TransferFundsStep1Dialog.js b/source/renderer/app/components/wallet/transfer-funds/TransferFundsStep1Dialog.js
index b4300f2b79..9abe3721eb 100644
--- a/source/renderer/app/components/wallet/transfer-funds/TransferFundsStep1Dialog.js
+++ b/source/renderer/app/components/wallet/transfer-funds/TransferFundsStep1Dialog.js
@@ -78,7 +78,7 @@ export default class TransferFundsStep1Dialog extends Component {
diff --git a/source/renderer/app/components/wallet/transfer-funds/TransferFundsStep2Dialog.js b/source/renderer/app/components/wallet/transfer-funds/TransferFundsStep2Dialog.js
index 6a94ddb53a..17a8efe6c1 100644
--- a/source/renderer/app/components/wallet/transfer-funds/TransferFundsStep2Dialog.js
+++ b/source/renderer/app/components/wallet/transfer-funds/TransferFundsStep2Dialog.js
@@ -95,7 +95,7 @@ export default class TransferFundsStep2Dialog extends Component {
};
state = {
- total: formattedWalletAmount(this.props.sourceWallet.amount, false),
+ total: formattedWalletAmount(this.props.sourceWallet.amount, false, true),
fees: null,
amount: null,
};
@@ -107,7 +107,8 @@ export default class TransferFundsStep2Dialog extends Component {
const fees = transferFundsFee.toFormat(DECIMAL_PLACES_IN_ADA);
const amount = formattedWalletAmount(
sourceWallet.amount.minus(transferFundsFee),
- false
+ false,
+ true
);
this.setState({ fees, amount });
}
diff --git a/source/renderer/app/components/widgets/forms/WalletsDropdown.js b/source/renderer/app/components/widgets/forms/WalletsDropdown.js
index cb1b79599f..0f9b3f75d7 100644
--- a/source/renderer/app/components/widgets/forms/WalletsDropdown.js
+++ b/source/renderer/app/components/widgets/forms/WalletsDropdown.js
@@ -57,7 +57,7 @@ export default class WalletsDropdown extends Component {
const { wallets, ...props } = this.props;
const walletsData = wallets.map(
({ name: label, id: value, amount }: Wallet) => {
- const detail = formattedWalletAmount(amount);
+ const detail = formattedWalletAmount(amount, true, true);
return {
detail,
label,
diff --git a/source/renderer/app/stores/WalletsStore.js b/source/renderer/app/stores/WalletsStore.js
index ad23dc2120..6c008347af 100644
--- a/source/renderer/app/stores/WalletsStore.js
+++ b/source/renderer/app/stores/WalletsStore.js
@@ -782,7 +782,11 @@ export default class WalletsStore extends Store {
// Active wallet has been replaced or removed
this.active = newActiveWallet || null;
if (this.active) {
- this.activeValue = formattedWalletAmount(this.active.amount);
+ this.activeValue = formattedWalletAmount(
+ this.active.amount,
+ true,
+ true
+ );
}
} else if (hasActiveWalletBeenUpdated) {
// Active wallet has been updated
diff --git a/source/renderer/app/utils/formatters.js b/source/renderer/app/utils/formatters.js
index 55f3506409..8e3bca4937 100644
--- a/source/renderer/app/utils/formatters.js
+++ b/source/renderer/app/utils/formatters.js
@@ -7,9 +7,42 @@ import {
export const formattedWalletAmount = (
amount: BigNumber,
- withCurrency: boolean = true
+ withCurrency: boolean = true,
+ long: boolean = false
) => {
- let formattedAmount = amount.toFormat(DECIMAL_PLACES_IN_ADA);
+ let formattedAmount = '';
+ if (long) {
+ formattedAmount = amount.toFormat(DECIMAL_PLACES_IN_ADA);
+ } else if (amount.isZero()) {
+ formattedAmount = '0';
+ } else if (amount.lessThan(0.000001)) {
+ formattedAmount = '< 0.000001';
+ } else if (amount.lessThan(1)) {
+ formattedAmount = amount.round(6, BigNumber.ROUND_DOWN);
+ } else if (amount.lessThan(1000)) {
+ formattedAmount = amount.round(1, BigNumber.ROUND_DOWN);
+ } else if (amount.lessThan(1000000)) {
+ formattedAmount = `${amount
+ .dividedBy(1000)
+ .round(1, BigNumber.ROUND_DOWN)}K`;
+ } else if (amount.lessThan(1000000000)) {
+ formattedAmount = `${amount
+ .dividedBy(1000000)
+ .round(1, BigNumber.ROUND_DOWN)}M`;
+ } else if (amount.lessThan(1000000000000)) {
+ formattedAmount = `${amount
+ .dividedBy(1000000000)
+ .round(1, BigNumber.ROUND_DOWN)}B`;
+ } else if (amount.lessThan(1000000000000000)) {
+ formattedAmount = `${amount
+ .dividedBy(1000000000000)
+ .round(1, BigNumber.ROUND_DOWN)}T`;
+ } else if (amount.lessThan(1000000000000000000)) {
+ formattedAmount = `${amount
+ .dividedBy(1000000000000000)
+ .round(1, BigNumber.ROUND_DOWN)}Q`;
+ }
+
if (withCurrency) formattedAmount += ' ADA';
return formattedAmount.toString();
};