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(); };