From 3b2488e9c56d98c295f287cd726fa119591ce7e6 Mon Sep 17 00:00:00 2001 From: Aleksandar Djordjevic Date: Fri, 29 Jan 2021 13:19:15 -0400 Subject: [PATCH] DDW-500 Implement design for native tokens - fixing transaction screen ui issues --- .../wallet/WalletTokenSendConfirmationDialog.js | 2 +- .../app/components/wallet/WalletTokenSendForm.js | 7 +++++-- .../components/wallet/WalletTokenSendForm.scss | 2 +- .../wallet/transactions/Transaction.scss | 1 + .../components/widgets/forms/WalletsDropdown.js | 8 ++++++-- source/renderer/app/utils/formatters.js | 15 +++++++++++++++ 6 files changed, 29 insertions(+), 6 deletions(-) diff --git a/source/renderer/app/components/wallet/WalletTokenSendConfirmationDialog.js b/source/renderer/app/components/wallet/WalletTokenSendConfirmationDialog.js index 50bfc88f3b..00b395ca52 100644 --- a/source/renderer/app/components/wallet/WalletTokenSendConfirmationDialog.js +++ b/source/renderer/app/components/wallet/WalletTokenSendConfirmationDialog.js @@ -370,7 +370,7 @@ export default class WalletTokenSendConfirmationDialog extends Component<
{amount} -   {currencyUnit} +  {currencyUnit}
diff --git a/source/renderer/app/components/wallet/WalletTokenSendForm.js b/source/renderer/app/components/wallet/WalletTokenSendForm.js index 05aaadb8c3..979c0ee414 100755 --- a/source/renderer/app/components/wallet/WalletTokenSendForm.js +++ b/source/renderer/app/components/wallet/WalletTokenSendForm.js @@ -251,11 +251,13 @@ export default class WalletTokenSendForm extends Component { clearReceiverAddress = () => { const receiverField = this.form.$('receiver'); receiverField.clear(); + receiverField.focus(); }; clearAssetValue = () => { const assetField = this.form.$('asset'); assetField.clear(); + assetField.focus(); }; handleOnReset = () => { @@ -624,7 +626,7 @@ export default class WalletTokenSendForm extends Component { )} - {this.isReceiverValid && showReceiverField && ( + {this.hasReceiverValue && showReceiverField && ( <>
@@ -635,7 +637,7 @@ export default class WalletTokenSendForm extends Component { selectedNativeToken.amount, false )} -  {selectedNativeToken.currencyUnit} +  {selectedNativeToken.ticker}
)} { syncingLabel={intl.formatMessage( messages.syncingWallet )} + hasNativeTokens value={selectedWalletId} getStakePoolById={() => {}} errorPosition="bottom" diff --git a/source/renderer/app/components/wallet/WalletTokenSendForm.scss b/source/renderer/app/components/wallet/WalletTokenSendForm.scss index 7fe84a5388..ad11da10fe 100755 --- a/source/renderer/app/components/wallet/WalletTokenSendForm.scss +++ b/source/renderer/app/components/wallet/WalletTokenSendForm.scss @@ -90,7 +90,7 @@ } .clearReceiverContainer { - bottom: 0.5px; + bottom: 0; display: flex; height: 48px; line-height: 48px; diff --git a/source/renderer/app/components/wallet/transactions/Transaction.scss b/source/renderer/app/components/wallet/transactions/Transaction.scss index 7d96d9104e..ef9cfd67ab 100644 --- a/source/renderer/app/components/wallet/transactions/Transaction.scss +++ b/source/renderer/app/components/wallet/transactions/Transaction.scss @@ -257,6 +257,7 @@ h2 { display: flex; + margin-bottom: 10px; } .receiverRowItemAddresses { diff --git a/source/renderer/app/components/widgets/forms/WalletsDropdown.js b/source/renderer/app/components/widgets/forms/WalletsDropdown.js index 4bf0537f19..0ac0bc59c3 100644 --- a/source/renderer/app/components/widgets/forms/WalletsDropdown.js +++ b/source/renderer/app/components/widgets/forms/WalletsDropdown.js @@ -7,7 +7,7 @@ import { omit } from 'lodash'; import WalletsDropdownOption from './WalletsDropdownOption'; import styles from './WalletsDropdown.scss'; -import { formattedWalletAmount } from '../../../utils/formatters'; +import { formattedTokenWalletAmount, formattedWalletAmount } from '../../../utils/formatters'; import Wallet from '../../../domains/Wallet'; import StakePool from '../../../domains/StakePool'; @@ -52,6 +52,7 @@ type WalletOption = { syncing?: boolean, syncingLabel?: string, isHardwareWallet: boolean, + hasNativeTokens?: boolean, }; export default class WalletsDropdown extends Component { @@ -106,6 +107,7 @@ export default class WalletsDropdown extends Component { getStakePoolById, error, errorPosition, + hasNativeTokens, ...props } = this.props; const walletsData = wallets.map( @@ -118,6 +120,7 @@ export default class WalletsDropdown extends Component { pendingDelegations, isRestoring, isHardwareWallet, + ticker, }: Wallet) => { const hasPendingDelegations = pendingDelegations && pendingDelegations.length > 0; @@ -126,7 +129,8 @@ export default class WalletsDropdown extends Component { currentStakePoolId = lastDelegationStakePoolId; } const delegatedStakePool = getStakePoolById(currentStakePoolId); - const detail = !isRestoring ? formattedWalletAmount(amount) : null; + const formatedAmount = hasNativeTokens ? formattedTokenWalletAmount(amount, ticker) : formattedWalletAmount(amount); + const detail = !isRestoring ? formatedAmount : null; return { detail, syncing: isRestoring, diff --git a/source/renderer/app/utils/formatters.js b/source/renderer/app/utils/formatters.js index 6751a7ffd6..99c5431128 100644 --- a/source/renderer/app/utils/formatters.js +++ b/source/renderer/app/utils/formatters.js @@ -30,6 +30,21 @@ export const formattedWalletAmount = ( return formattedAmount.toString(); }; +export const formattedTokenWalletAmount = ( + amount: BigNumber, + currency: string, +) => { + let formattedAmount = amount.toFormat(DECIMAL_PLACES_IN_ADA); + const { decimalSeparator } = BigNumber.config().FORMAT; + if (decimalSeparator !== '.') { + // Only BigNumber.toFormat() method is applying correct separators. + // Since this method is not used for condensed format (long = false) + // the correct number format has to be applied manually. + formattedAmount = formattedAmount.split('.').join(decimalSeparator); + } + return `${formattedAmount} ${currency}`; +}; + // Symbol Name Scientific Notation // K Thousand 1.00E+03 // M Million 1.00E+06