DDW-500 Implement design for native tokens - fixing transaction scree…

…n ui issues
input-output-hk · Jan 29, 2021 · 3b2488e · 3b2488e
1 parent f441d02
commit 3b2488e
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 6 deletions.
diff --git 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<
                             <div className={styles.amountFeesWrapper}>
                               <div className={styles.amount}>
                                 {amount}
-                                &nbsp; {currencyUnit}
+                                &nbsp;{currencyUnit}
                               </div>
                             </div>
                           </div>

diff --git 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<Props, State> {
   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<Props, State> {
                       </div>
                     )}
                   </div>
-                  {this.isReceiverValid && showReceiverField && (
+                  {this.hasReceiverValue && showReceiverField && (
                     <>
                       <div className={styles.fieldsLine} />
                       <div className={styles.assetInput}>
@@ -635,7 +637,7 @@ export default class WalletTokenSendForm extends Component<Props, State> {
                               selectedNativeToken.amount,
                               false
                             )}
-                            &nbsp;{selectedNativeToken.currencyUnit}
+                            &nbsp;{selectedNativeToken.ticker}
                           </div>
                         )}
                         <NumericInput
@@ -690,6 +692,7 @@ export default class WalletTokenSendForm extends Component<Props, State> {
                             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
@@ -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
@@ -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
@@ -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<Props> {
@@ -106,6 +107,7 @@ export default class WalletsDropdown extends Component<Props> {
       getStakePoolById,
       error,
       errorPosition,
+      hasNativeTokens,
       ...props
     } = this.props;
     const walletsData = wallets.map(
@@ -118,6 +120,7 @@ export default class WalletsDropdown extends Component<Props> {
         pendingDelegations,
         isRestoring,
         isHardwareWallet,
+        ticker,
       }: Wallet) => {
         const hasPendingDelegations =
           pendingDelegations && pendingDelegations.length > 0;
@@ -126,7 +129,8 @@ export default class WalletsDropdown extends Component<Props> {
           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
@@ -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