From 638694e5e84cb499372b1a47fd6db0ebcbdf70e6 Mon Sep 17 00:00:00 2001
From: Fabian <frznhope@gmail.com>
Date: Wed, 13 Mar 2019 18:33:27 +0100
Subject: [PATCH] Fabo/2217 limited to max precision (#2258)

* limited to max precision

* fixed displaying small numbers on staking transactions

* fixed a test

* fixed prettydecimal for whole number
---
 PENDING.md                                    |  4 +++-
 .../renderer/components/common/TmFormMsg.vue  |  5 ++--
 .../components/governance/ModalDeposit.vue    |  4 ++--
 .../components/governance/ModalPropose.vue    |  4 ++--
 .../components/staking/DelegationModal.vue    |  4 ++--
 .../components/staking/UndelegationModal.vue  |  4 ++--
 .../transactions/LiStakeTransaction.vue       |  2 +-
 .../renderer/components/wallet/SendModal.vue  |  4 ++--
 app/src/renderer/scripts/num.js               | 24 ++++++++++++++++++-
 .../transactions/LiStakeTransaction.spec.js   |  2 +-
 .../LiStakeTransaction.spec.js.snap           |  8 +++----
 test/unit/specs/scripts/num.spec.js           |  8 +++++++
 12 files changed, 53 insertions(+), 20 deletions(-)

diff --git a/PENDING.md b/PENDING.md
index 598264e7e9..c0aa71afe5 100644
--- a/PENDING.md
+++ b/PENDING.md
@@ -8,4 +8,6 @@
 - [\#1959](https://github.com/cosmos/voyager/issues/1959) display transactions on block page @fedekunze
 
 ### Changed
-- Ignore changelog check on master @faboweb
\ No newline at end of file
+
+- Ignore changelog check on master @faboweb
+- [#\2217](https://github.com/cosmos/voyager/issues/2217) Limit inputs to max precision @faboweb
\ No newline at end of file
diff --git a/app/src/renderer/components/common/TmFormMsg.vue b/app/src/renderer/components/common/TmFormMsg.vue
index 51082b440a..3a66882fba 100644
--- a/app/src/renderer/components/common/TmFormMsg.vue
+++ b/app/src/renderer/components/common/TmFormMsg.vue
@@ -7,6 +7,7 @@
 </template>
 
 <script>
+import { prettyDecimals } from "../../scripts/num.js"
 export default {
   props: {
     type: {
@@ -52,7 +53,7 @@ export default {
           msg = `must contain only numerals`
           break
         case `between`:
-          msg = `must be between ${this.min} and ${this.max}`
+          msg = `must be between ${prettyDecimals(this.min)} and ${this.max}`
           break
         case `date`:
           msg = `must be a valid date`
@@ -149,4 +150,4 @@ export default {
   content: "priority_high";
   color: var(--warning);
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/app/src/renderer/components/governance/ModalDeposit.vue b/app/src/renderer/components/governance/ModalDeposit.vue
index 24cf138394..6eb41fc063 100644
--- a/app/src/renderer/components/governance/ModalDeposit.vue
+++ b/app/src/renderer/components/governance/ModalDeposit.vue
@@ -50,7 +50,7 @@
 
 <script>
 import { mapGetters } from "vuex"
-import { uatoms, atoms } from "../../scripts/num.js"
+import { uatoms, atoms, SMALLEST } from "../../scripts/num.js"
 import { between, decimal } from "vuelidate/lib/validators"
 import TmField from "common/TmField"
 import TmFormGroup from "common/TmFormGroup"
@@ -100,7 +100,7 @@ export default {
       amount: {
         required: x => !!x && x !== `0`,
         decimal,
-        between: between(0, atoms(this.balance))
+        between: between(SMALLEST, atoms(this.balance))
       }
     }
   },
diff --git a/app/src/renderer/components/governance/ModalPropose.vue b/app/src/renderer/components/governance/ModalPropose.vue
index d72cca608e..59895fb6f2 100644
--- a/app/src/renderer/components/governance/ModalPropose.vue
+++ b/app/src/renderer/components/governance/ModalPropose.vue
@@ -106,7 +106,7 @@ import {
   between,
   decimal
 } from "vuelidate/lib/validators"
-import { uatoms, atoms } from "../../scripts/num.js"
+import { uatoms, atoms, SMALLEST } from "../../scripts/num.js"
 import { isEmpty, trim } from "lodash"
 import TmField from "common/TmField"
 import TmFormGroup from "common/TmFormGroup"
@@ -173,7 +173,7 @@ export default {
       amount: {
         required: x => !!x && x !== `0`,
         decimal,
-        between: between(0, atoms(this.balance))
+        between: between(SMALLEST, atoms(this.balance))
       }
     }
   },
diff --git a/app/src/renderer/components/staking/DelegationModal.vue b/app/src/renderer/components/staking/DelegationModal.vue
index 7ef84e6029..deb494e9a8 100644
--- a/app/src/renderer/components/staking/DelegationModal.vue
+++ b/app/src/renderer/components/staking/DelegationModal.vue
@@ -79,7 +79,7 @@
 <script>
 import { mapGetters } from "vuex"
 import { between, decimal } from "vuelidate/lib/validators"
-import { uatoms, atoms } from "../../scripts/num.js"
+import { uatoms, atoms, SMALLEST } from "../../scripts/num.js"
 import TmField from "common/TmField"
 import TmFormGroup from "common/TmFormGroup"
 import TmFormMsg from "common/TmFormMsg"
@@ -186,7 +186,7 @@ export default {
       amount: {
         required: x => !!x && x !== `0`,
         decimal,
-        between: between(0, atoms(this.balance))
+        between: between(SMALLEST, atoms(this.balance))
       }
     }
   }
diff --git a/app/src/renderer/components/staking/UndelegationModal.vue b/app/src/renderer/components/staking/UndelegationModal.vue
index e3d3385a0c..41031758a7 100644
--- a/app/src/renderer/components/staking/UndelegationModal.vue
+++ b/app/src/renderer/components/staking/UndelegationModal.vue
@@ -65,7 +65,7 @@
 
 <script>
 import { mapGetters } from "vuex"
-import { uatoms, atoms } from "../../scripts/num.js"
+import { uatoms, atoms, SMALLEST } from "../../scripts/num.js"
 import { between, decimal } from "vuelidate/lib/validators"
 import ActionModal from "common/ActionModal"
 import TmField from "common/TmField"
@@ -115,7 +115,7 @@ export default {
       amount: {
         required: x => !!x && x !== `0`,
         decimal,
-        between: between(0, this.maximum)
+        between: between(SMALLEST, this.maximum)
       }
     }
   },
diff --git a/app/src/renderer/components/transactions/LiStakeTransaction.vue b/app/src/renderer/components/transactions/LiStakeTransaction.vue
index 5d69127452..f20ac39cf5 100644
--- a/app/src/renderer/components/transactions/LiStakeTransaction.vue
+++ b/app/src/renderer/components/transactions/LiStakeTransaction.vue
@@ -181,7 +181,7 @@ export default {
       const validator = this.validators.find(
         val => val.operator_address === validatorAddr
       )
-      return this.atoms(calculateTokens(validator, shares).toNumber())
+      return full(this.atoms(calculateTokens(validator, shares).toNumber()))
     }
   }
 }
diff --git a/app/src/renderer/components/wallet/SendModal.vue b/app/src/renderer/components/wallet/SendModal.vue
index efe3e97dfb..843bfc8563 100644
--- a/app/src/renderer/components/wallet/SendModal.vue
+++ b/app/src/renderer/components/wallet/SendModal.vue
@@ -94,7 +94,7 @@
 <script>
 import b32 from "scripts/b32"
 import { required, between, decimal } from "vuelidate/lib/validators"
-import { uatoms, atoms } from "../../scripts/num.js"
+import { uatoms, atoms, SMALLEST } from "../../scripts/num.js"
 import { mapActions, mapGetters } from "vuex"
 import TmFormGroup from "common/TmFormGroup"
 import TmField from "common/TmField"
@@ -186,7 +186,7 @@ export default {
       amount: {
         required: x => !!x && x !== `0`,
         decimal,
-        between: between(0, atoms(this.balance))
+        between: between(SMALLEST, atoms(this.balance))
       },
       denom: { required }
     }
diff --git a/app/src/renderer/scripts/num.js b/app/src/renderer/scripts/num.js
index df8e2d94d4..563bb21b2f 100644
--- a/app/src/renderer/scripts/num.js
+++ b/app/src/renderer/scripts/num.js
@@ -6,6 +6,7 @@ import BigNumber from "bignumber.js"
  * @module num
  */
 
+const SMALLEST = 1e-7
 const language = window.navigator.userLanguage || window.navigator.language
 function full(number = 0) {
   return new Intl.NumberFormat(language, { minimumFractionDigits: 7 })
@@ -20,6 +21,25 @@ function pretty(number = 0) {
     { minimumFractionDigits: 2, maximumFractionDigits: 2 }
   ).format(Math.round(number * 100) / 100)
 }
+// pretty print long decimals not in scientific notation
+function prettyDecimals(number = 0) {
+  let longDecimals = new Intl.NumberFormat(
+    language,
+    { minimumFractionDigits: 20, maximumFractionDigits: 20 }
+  ).format(number)
+
+  // remove all trailing zeros
+  while(longDecimals.charAt(longDecimals.length - 1) === `0`) {
+    longDecimals = longDecimals.substr(0, longDecimals.length - 1)
+  }
+
+  // remove decimal separator from whole numbers
+  if(Number.isNaN(Number(longDecimals.charAt(longDecimals.length - 1)))) {
+    longDecimals = longDecimals.substr(0, longDecimals.length - 1)
+  }
+
+  return longDecimals
+}
 function prettyInt(number = 0) {
   return new Intl.NumberFormat(language).format(Math.round(number))
 }
@@ -40,6 +60,7 @@ function uatoms(number = 0) {
 }
 
 module.exports = {
+  SMALLEST,
   atoms,
   uatoms,
   full,
@@ -47,5 +68,6 @@ module.exports = {
   pretty,
   prettyInt,
   percent,
-  percentInt
+  percentInt,
+  prettyDecimals
 }
diff --git a/test/unit/specs/components/transactions/LiStakeTransaction.spec.js b/test/unit/specs/components/transactions/LiStakeTransaction.spec.js
index 36f38eea3b..32eb893fa8 100644
--- a/test/unit/specs/components/transactions/LiStakeTransaction.spec.js
+++ b/test/unit/specs/components/transactions/LiStakeTransaction.spec.js
@@ -80,7 +80,7 @@ describe(`LiStakeTransaction`, () => {
       propsData.unbondingTime = Date.now() - 1000
       wrapper.setProps({ unbondingTime: Date.now() - 1000 })
       expect(wrapper.vm.$el).toMatchSnapshot()
-      expect(wrapper.text()).toContain(`1000`)
+      expect(wrapper.text()).toContain(`1,000.00`)
     })
 
     it(`should default to ended if no unbonding delegation is present`, () => {
diff --git a/test/unit/specs/components/transactions/__snapshots__/LiStakeTransaction.spec.js.snap b/test/unit/specs/components/transactions/__snapshots__/LiStakeTransaction.spec.js.snap
index 95724f84e3..76a6d31484 100644
--- a/test/unit/specs/components/transactions/__snapshots__/LiStakeTransaction.spec.js.snap
+++ b/test/unit/specs/components/transactions/__snapshots__/LiStakeTransaction.spec.js.snap
@@ -101,7 +101,7 @@ exports[`LiStakeTransaction redelegations should show redelegations and calculat
       
     <b>
       
-        3
+        3.0000000
       
     </b>
      
@@ -147,7 +147,7 @@ exports[`LiStakeTransaction unbonding delegations should default to ended if no
       
     <b>
       
-        1000
+        1,000.0000000
       
     </b>
      
@@ -185,7 +185,7 @@ exports[`LiStakeTransaction unbonding delegations should show unbonding delegati
       
     <b>
       
-        1000
+        1,000.0000000
       
     </b>
      
@@ -223,7 +223,7 @@ exports[`LiStakeTransaction unbonding delegations should show unbondings and cal
       
     <b>
       
-        1000
+        1,000.0000000
       
     </b>
      
diff --git a/test/unit/specs/scripts/num.spec.js b/test/unit/specs/scripts/num.spec.js
index 9fc949f282..9877436f0d 100644
--- a/test/unit/specs/scripts/num.spec.js
+++ b/test/unit/specs/scripts/num.spec.js
@@ -24,4 +24,12 @@ describe(`number helper`, () => {
   it(`should format percent with decimals`, () => {
     expect(num.percent(0.2612)).toBe(`26.12%`)
   })
+
+  it(`should format long decimals well`, () => {
+    expect(num.prettyDecimals(1e-8)).toBe(`0.00000001`)
+  })
+
+  it(`should format long decimals well if whole number`, () => {
+    expect(num.prettyDecimals(12)).toBe(`12`)
+  })
 })