[DDW-1080] - Wallet ada displays in several lines when number format …

…is selected without any separators
input-output-hk · Nov 22, 2019 · 2c99350 · 2c99350
1 parent 8abba6e
commit 2c99350
Show file tree

Hide file tree

Showing 10 changed files with 54 additions and 14 deletions.
diff --git 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<Props> {
         </span>
         <span className={styles.walletAmount}>
           {// show currency and use long format
-          formattedWalletAmount(activeWallet.amount, true)}
+          formattedWalletAmount(activeWallet.amount, true, true)}
         </span>
       </span>
     ) : null;

diff --git 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/...enderer/app/components/staking/delegation-setup-wizard/DelegationStepsActivationDialog.js b/...enderer/app/components/staking/delegation-setup-wizard/DelegationStepsActivationDialog.js
@@ -248,7 +248,7 @@ export default class DelegationStepsActivationDialog extends Component<Props> {
                 {intl.formatMessage(messages.amountLabel)}
               </p>
               <p className={styles.amount}>
-                {formattedWalletAmount(amount, false)}
+                {formattedWalletAmount(amount, false, true)}
                 <span> ADA</span>
               </p>
             </div>
@@ -258,7 +258,7 @@ export default class DelegationStepsActivationDialog extends Component<Props> {
                 {intl.formatMessage(messages.feesLabel)}
               </p>
               <p className={styles.amount}>
-                + {formattedWalletAmount(fees, false)}
+                + {formattedWalletAmount(fees, false, true)}
                 <span> ADA</span>
               </p>
             </div>
@@ -269,7 +269,7 @@ export default class DelegationStepsActivationDialog extends Component<Props> {
               {intl.formatMessage(messages.totalLabel)}
             </p>
             <p className={styles.amount}>
-              {formattedWalletAmount(amount.add(fees), false)}
+              {formattedWalletAmount(amount.add(fees), false, true)}
               <span> ADA</span>
             </p>
           </div>

diff --git a/...derer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js b/...derer/app/components/staking/delegation-setup-wizard/DelegationStepsConfirmationDialog.js
@@ -205,7 +205,7 @@ export default class DelegationStepsConfirmationDialog extends Component<Props>
               {intl.formatMessage(messages.feesLabel)}
             </p>
             <p className={styles.feesAmount}>
-              {formattedWalletAmount(fees, false)}
+              {formattedWalletAmount(fees, false, true)}
               <span> ADA</span>
             </p>
           </div>

diff --git 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<Props, State> {
                 </div>
                 <div className={styles.amount}>
                   {// hide currency (we are showing symbol instead)
-                  formattedWalletAmount(data.amount, false)}
+                  formattedWalletAmount(data.amount, false, true)}
                   <SVGInline svg={symbol} className={styles.currencySymbol} />
                 </div>
               </div>

diff --git 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<Props> {
         <div className={styles.sourceWallet}>
           <WalletsDropdownOption
             label={sourceWallet.name}
-            detail={formattedWalletAmount(sourceWallet.amount)}
+            detail={formattedWalletAmount(sourceWallet.amount, true, true)}
             selected
           />
         </div>

diff --git 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<Props, State> {
   };
 
   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<Props, State> {
       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
@@ -57,7 +57,7 @@ export default class WalletsDropdown extends Component<Props> {
     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
@@ -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
@@ -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();
 };