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

@@ -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
+
+- Ignore changelog check on master @faboweb
+- [#\2217](https://github.com/cosmos/voyager/issues/2217) Limit inputs to max precision @faboweb

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>

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))
       }
     }
   },

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))
       }
     }
   },

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

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)
       }
     }
   },

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

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 }
     }

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,12 +60,14 @@ function uatoms(number = 0) {
 }
 
 module.exports = {
+  SMALLEST,
   atoms,
   uatoms,
   full,
   shortNumber,
   pretty,
   prettyInt,
   percent,
-  percentInt
+  percentInt,
+  prettyDecimals
 }

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`, () => {

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>
      

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`)
+  })
 })