From 0c94a41eb94a83f2c7eecde14cd41146c2dbf4a8 Mon Sep 17 00:00:00 2001
From: Emre Kanatli <kanatliemre@gmail.com>
Date: Mon, 18 Jan 2021 15:32:13 -0500
Subject: [PATCH 1/4] Upgrade big.js dependency Update BignumInput to use
 vanilla html input number element

---
 package.json         |   2 +-
 src/App.vue          |  15 ++++---
 src/bignum_input.vue | 105 ++++++++++++++++++++++++++++---------------
 yarn.lock            |   5 +++
 4 files changed, 82 insertions(+), 45 deletions(-)

diff --git a/package.json b/package.json
index 476e7e9..40d0039 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/vue-fontawesome": "^0.1.9",
     "@zxing/library": "^0.15.2",
-    "big.js": "^5.2.2",
+    "big.js": "6.0.3",
     "bn.js": "^5.1.1",
     "core-js": "^3.6.4",
     "vue": "^2.6.11",
diff --git a/src/App.vue b/src/App.vue
index e21e8d2..e7b3c48 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,16 +9,17 @@
         <hr>
 
         <bignum_input :value="bigVal"
-                      :denomination="9"
+                      :denomination="18"
                       :max="big_max"
                       :min="0"
                       @change="bigInChange"
                       :step="stepSize"
-                      placeholder="0.0000000"
+                      placeholder="Amount"
                       ref="big_in"
         ></bignum_input>
         <p v-if="big_in_out">Out: {{big_in_out.toString()}}</p>
         <button @click="clearBigIn">Clear</button>
+        <button @click="maxOutBig">MAX</button>
         <div style="display: flex">
             <p>Denomination 9</p>
             <p>MAX: {{big_max.toString()}}</p>
@@ -56,13 +57,10 @@
         computed: {
             big_max(){
                 // return null;
-                return new BN('1000000000000000');
+                return new BN('36000000000000000');
             },
             stepSize(){
-                // let expo = 9-3;
-                //     expo = new BN(expo)
-                // let tens = new BN('10').pow(expo);
-                return new BN(1);
+                return new BN(1000000);
             }
         },
         methods: {
@@ -71,6 +69,9 @@
             },
             clearBigIn(){
                 this.$refs.big_in.clear();
+            },
+            maxOutBig(){
+                this.$refs.big_in.maxout();
             }
         },
         created(){
diff --git a/src/bignum_input.vue b/src/bignum_input.vue
index dfdc860..25899b4 100644
--- a/src/bignum_input.vue
+++ b/src/bignum_input.vue
@@ -1,29 +1,14 @@
 <template>
-    <CurrencyInput :allow-negative="false"
-                    v-model="val"
-                    locale="default"
-                    :currency="null"
-                    :value-as-integer="false"
-                    :precision="denomination"
-                    :auto-decimal-mode="true"
-                    :value-range="range"
-                   ref="curIn"
-                   @keydown.up.native="keyUp"
-                   @keydown.down.native="keyDown"
-    ></CurrencyInput>
+    <input type="number" :placeholder="placeholder" v-model="val" :min="min" :max="maxNum" :step="stepNum" @change="onChange">
 </template>
 <script>
     import Big from 'big.js';
     import * as BN from 'bn.js';
-    import {CurrencyInput} from 'vue-currency-input';
 
     export default {
-        components:{
-            CurrencyInput
-        },
         data(){
             return {
-                val: 0,
+                val: 0.00,
             }
         },
         computed: {
@@ -38,6 +23,27 @@
                     min: this.min.toString(),
                     max: maxStr
                 }
+            },
+            maxNum(){
+                if(!this.step) return null
+                try{
+                    let pow = (new Big(this.max.toString())).div(Math.pow(10,this.denomination))
+                    return pow.toNumber()
+                }catch (e){
+                    console.error(e)
+                    return null
+                }
+            },
+            stepNum(){
+                if(!this.step) return 0.01
+                try{
+                    let pow = (new Big(this.step.toString())).div(Math.pow(10,this.denomination))
+                    return pow.toNumber()
+                }catch (e){
+                    console.error(e)
+                    return 0.01
+                }
+
             }
         },
         props: {
@@ -65,33 +71,46 @@
         },
         watch: {
             val(val){
-                let mult = Math.pow(10,this.denomination);
-                let valBig = Big(val).times(mult);
-                let strVal = valBig.toString();
-                let bnVal = new BN(strVal);
-                this.$emit('change', bnVal);
+
+                //
+                try{
+                    let splitVal = val.toString().split('.')
+                    let wholeVal = splitVal[0]
+                    let denomVal = splitVal[1]
+                    if(denomVal){
+                        if(denomVal.length > this.denomination){
+                            let newDenom = denomVal.substring(0,this.denomination)
+                            this.val = parseFloat(`${wholeVal}.${newDenom}`)
+                            return
+                        }
+                    }
+                }catch (e){
+                    console.log(e)
+                }
+
+                if(!val){
+                    this.$emit('change', new BN(0));
+                    return
+                }
+                let valEdit = (parseFloat(val).toFixed(this.denomination)).split('.').join('')
+                let valBn = new BN(valEdit)
+                this.$emit('change', valBn);
             }
         },
         methods: {
-            keyUp(ev){
-                ev.preventDefault();
-                let dif = Big(1).div(Math.pow(10,this.denomination))
-                let newVal = Big(this.val).add(dif);
-                this.$refs.curIn.setValue(newVal.toString());
-            },
-            keyDown(ev){
-                ev.preventDefault();
-                let dif = Big(1).div(Math.pow(10,this.denomination))
-                let newVal = Big(this.val).sub(dif);
-                this.$refs.curIn.setValue(newVal.toString());
-            },
             maxout(){
-                if(this.max){
-                    this.$refs.curIn.setValue(this.max.toString());
+                if(this.maxNum){
+                    this.val = this.maxNum
                 }
             },
             clear(){
-                this.$refs.curIn.setValue('0');
+                this.val = 0
+            },
+            onChange(){
+                // If number is above max amount, correct it
+                if(this.val > this.maxNum){
+                    this.val = this.maxNum
+                }
             }
         }
     }
@@ -99,5 +118,17 @@
 <style scoped>
     input{
         text-align: right;
+        outline: none;
+    }
+    /* Chrome, Safari, Edge, Opera */
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+
+    /* Firefox */
+    input[type=number] {
+        -moz-appearance: textfield;
     }
 </style>
diff --git a/yarn.lock b/yarn.lock
index f6f0790..ddaa20f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1657,6 +1657,11 @@ bfj@^6.1.1:
     hoopy "^0.1.4"
     tryer "^1.0.1"
 
+big.js@6.0.3:
+  version "6.0.3"
+  resolved "https://registry.yarnpkg.com/big.js/-/big.js-6.0.3.tgz#8b4d99ac7023668e0e465d3f78c23b8ac29ad381"
+  integrity sha512-n6yn1FyVL1EW2DBAr4jlU/kObhRzmr+NNRESl65VIOT8WBJj/Kezpx2zFdhJUqYI6qrtTW7moCStYL5VxeVdPA==
+
 big.js@^3.1.3:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/big.js/-/big.js-3.2.0.tgz#a5fc298b81b9e0dca2e458824784b65c52ba588e"

From 7fc7adc09c5d1f1744dd06ebcd4fbb93cf1709d8 Mon Sep 17 00:00:00 2001
From: Emre Kanatli <kanatliemre@gmail.com>
Date: Mon, 18 Jan 2021 18:47:50 -0500
Subject: [PATCH 2/4] bug fixes

---
 src/bignum_input.vue | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/bignum_input.vue b/src/bignum_input.vue
index 25899b4..a16a00d 100644
--- a/src/bignum_input.vue
+++ b/src/bignum_input.vue
@@ -12,23 +12,10 @@
             }
         },
         computed: {
-            range(){
-                let maxStr = Number.MAX_SAFE_INTEGER.toString();
-                if(this.max){
-                    let bnStr = this.max.toString();
-                    let big = Big(bnStr).div(Math.pow(10,this.denomination));
-                    maxStr = big.toString();
-                }
-                return{
-                    min: this.min.toString(),
-                    max: maxStr
-                }
-            },
             maxNum(){
-                if(!this.step) return null
+                if(!this.max) return null
                 try{
-                    let pow = (new Big(this.max.toString())).div(Math.pow(10,this.denomination))
-                    return pow.toNumber()
+                    return this.bnToNum(this.max)
                 }catch (e){
                     console.error(e)
                     return null
@@ -37,8 +24,7 @@
             stepNum(){
                 if(!this.step) return 0.01
                 try{
-                    let pow = (new Big(this.step.toString())).div(Math.pow(10,this.denomination))
-                    return pow.toNumber()
+                    return this.bnToNum(this.step)
                 }catch (e){
                     console.error(e)
                     return 0.01
@@ -95,9 +81,17 @@
                 let valEdit = (parseFloat(val).toFixed(this.denomination)).split('.').join('')
                 let valBn = new BN(valEdit)
                 this.$emit('change', valBn);
+            },
+            value(valBn){
+                // this.val = this.bnToNum(valBn)
+                console.log("Parent Change",valBn.toString())
             }
         },
         methods: {
+            bnToNum(bnVal){
+                let pow = (new Big(bnVal.toString())).div(Math.pow(10,this.denomination))
+                return pow.toNumber()
+            },
             maxout(){
                 if(this.maxNum){
                     this.val = this.maxNum
@@ -108,8 +102,10 @@
             },
             onChange(){
                 // If number is above max amount, correct it
-                if(this.val > this.maxNum){
-                    this.val = this.maxNum
+                if(this.maxNum){
+                    if(this.val > this.maxNum){
+                        this.val = this.maxNum
+                    }
                 }
             }
         }

From 2a342349413ec3e278f66287c0f8ed46d5e5da87 Mon Sep 17 00:00:00 2001
From: Emre Kanatli <kanatliemre@gmail.com>
Date: Mon, 18 Jan 2021 18:59:18 -0500
Subject: [PATCH 3/4] bug fixes

---
 src/App.vue          |  5 +----
 src/bignum_input.vue | 22 ++++++++++++++++------
 2 files changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e7b3c48..d523826 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,11 +9,8 @@
         <hr>
 
         <bignum_input :value="bigVal"
-                      :denomination="18"
-                      :max="big_max"
-                      :min="0"
+                      :denomination="1"
                       @change="bigInChange"
-                      :step="stepSize"
                       placeholder="Amount"
                       ref="big_in"
         ></bignum_input>
diff --git a/src/bignum_input.vue b/src/bignum_input.vue
index a16a00d..62c8a49 100644
--- a/src/bignum_input.vue
+++ b/src/bignum_input.vue
@@ -22,7 +22,13 @@
                 }
             },
             stepNum(){
-                if(!this.step) return 0.01
+                if(!this.step) {
+                    if(this.denomination >= 2){
+                        return 0.01
+                    }else{
+                        return Math.pow(10, -this.denomination)
+                    }
+                }
                 try{
                     return this.bnToNum(this.step)
                 }catch (e){
@@ -66,7 +72,7 @@
                     if(denomVal){
                         if(denomVal.length > this.denomination){
                             let newDenom = denomVal.substring(0,this.denomination)
-                            this.val = parseFloat(`${wholeVal}.${newDenom}`)
+                            this.val = `${wholeVal}.${newDenom}`
                             return
                         }
                     }
@@ -78,13 +84,12 @@
                     this.$emit('change', new BN(0));
                     return
                 }
-                let valEdit = (parseFloat(val).toFixed(this.denomination)).split('.').join('')
-                let valBn = new BN(valEdit)
+
+                let valBn = this.stringToBN(val)
                 this.$emit('change', valBn);
             },
             value(valBn){
-                // this.val = this.bnToNum(valBn)
-                console.log("Parent Change",valBn.toString())
+                this.val = this.bnToNum(valBn)
             }
         },
         methods: {
@@ -92,6 +97,11 @@
                 let pow = (new Big(bnVal.toString())).div(Math.pow(10,this.denomination))
                 return pow.toNumber()
             },
+            stringToBN(strVal){
+                let tens = Big(10).pow(this.denomination)
+                let satoshis = Big(strVal).times(tens)
+                return new BN(satoshis.toString())
+            },
             maxout(){
                 if(this.maxNum){
                     this.val = this.maxNum

From 929dd77a042cc4c0d597f2d3f7f3e253c96a6a2b Mon Sep 17 00:00:00 2001
From: Emre Kanatli <kanatliemre@gmail.com>
Date: Tue, 19 Jan 2021 19:58:53 -0500
Subject: [PATCH 4/4] Initial value is null for bignum input Check for null max
 prop

---
 src/App.vue          | 2 +-
 src/bignum_input.vue | 9 +++++----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d523826..1bda7c9 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -9,7 +9,7 @@
         <hr>
 
         <bignum_input :value="bigVal"
-                      :denomination="1"
+                      :denomination="18"
                       @change="bigInChange"
                       placeholder="Amount"
                       ref="big_in"
diff --git a/src/bignum_input.vue b/src/bignum_input.vue
index 62c8a49..d84468b 100644
--- a/src/bignum_input.vue
+++ b/src/bignum_input.vue
@@ -8,12 +8,12 @@
     export default {
         data(){
             return {
-                val: 0.00,
+                val: null,
             }
         },
         computed: {
             maxNum(){
-                if(!this.max) return null
+                if(this.max===null) return null
                 try{
                     return this.bnToNum(this.max)
                 }catch (e){
@@ -44,6 +44,7 @@
                 default: 0
             },
             max: {
+                default: null,
                 type: [BN, Object],
             },
             min: {
@@ -103,7 +104,7 @@
                 return new BN(satoshis.toString())
             },
             maxout(){
-                if(this.maxNum){
+                if(this.maxNum != null){
                     this.val = this.maxNum
                 }
             },
@@ -112,7 +113,7 @@
             },
             onChange(){
                 // If number is above max amount, correct it
-                if(this.maxNum){
+                if(this.maxNum != null){
                     if(this.val > this.maxNum){
                         this.val = this.maxNum
                     }