handling decimals (#198)

packages/vue/package.json

@@ -13,8 +13,9 @@
   "main": "src/index.ts",
   "dependencies": {
     "@cosmjs/encoding": "0.27.0",
-    "@cosmjs/stargate": "0.27.0",
     "@cosmjs/proto-signing": "0.27.0",
+    "@cosmjs/stargate": "0.27.0",
+    "bignumber.js": "^9.0.2",
     "bip39": "^3.0.4",
     "buffer": "^6.0.3",
     "crypto-js": "^4.1.1",

packages/vue/src/components/SpAmountInput/SpAmountInput.vue

@@ -0,0 +1,99 @@
+<template>
+  <input
+    ref="inputRef"
+    v-model="model"
+    :placeholder="placeholder"
+    type="text"
+    inputmode="decimal"
+    pattern="^[0-9]*[.,]?[0-9]*$"
+    autocomplete="off"
+    minlength="1"
+    spellcheck="false"
+  />
+</template>
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from 'vue'
+
+export default defineComponent({
+  name: 'SpAmountInput',
+
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    maxDecimals: {
+      type: Number as PropType<number>,
+      default: 0
+    },
+    placeholder: {
+      type: String as PropType<string>,
+      default: '0'
+    }
+  },
+
+  emits: ['update'],
+
+  setup(props, { emit }) {
+    let inputRef = ref(null)
+
+    let format = (value: string): string => {
+      let newValue: string = value
+
+      // Replace commas
+      newValue = newValue.replace(',', '.')
+
+      // Disallow decimals if wished for
+      newValue = props.maxDecimals > 0 ? newValue : newValue.replace('.', '')
+
+      // Only numbers
+      newValue = newValue.replace(/[^0-9.]/g, '')
+
+      if (newValue.startsWith('.')) {
+        newValue = '0' + newValue
+      }
+
+      if (newValue.split('').filter((char) => char === '.').length > 1) {
+        // Remove subsequent separators
+        newValue = newValue.replace(/(?<=\..*)\./g, '')
+      }
+
+      let [integerDigits, fractionDigits] = newValue.split('.')
+
+      if (fractionDigits?.length > props.maxDecimals) {
+        newValue = `${integerDigits}.${fractionDigits.slice(
+          0,
+          props.maxDecimals
+        )}`
+      }
+
+      return newValue
+    }
+
+    let model = computed({
+      get: () => (props.modelValue || '').toString(),
+      set: (value) => {
+        if (!inputRef.value) {
+          return
+        }
+
+        let currentValue = value
+
+        while (parseFloat(currentValue) > Number.MAX_SAFE_INTEGER) {
+          currentValue = currentValue.slice(0, -1)
+        }
+
+        let formatted = format(currentValue)
+
+        emit('update', formatted)
+
+        let inputHTMLEl = inputRef.value as HTMLInputElement
+
+        inputHTMLEl.value = formatted
+      }
+    })
+
+    return { inputRef, format, model }
+  }
+})
+</script>

packages/vue/src/components/SpAmountInput/index.ts

@@ -0,0 +1,13 @@
+import { App as Application } from 'vue'
+
+import { registerComponent } from '../../utils/plugins/index'
+// @ts-ignore
+import C from './SpAmountInput.vue'
+
+export const Plugin = {
+  install(vue: Application): void {
+    registerComponent(vue, C)
+  }
+}
+
+export default C

packages/vue/src/components/SpAmountSelect/SpAmountSelect.vue

@@ -38,11 +38,9 @@
       </div>
 
       <div class="input-wrapper">
-        <input
+        <SpAmountInput
           class="input secondary"
-          :value="x.amount.amount"
-          placeholder="0"
-          @input="(evt) => handleAmountInput(evt, x)"
+          @update="(amount: string) => handleAmountInput(amount, x)"
         />
 
         <div class="focus-background"></div>
@@ -155,10 +153,13 @@
 <script lang="ts">
 import { computed, defineComponent, PropType, reactive } from 'vue'
 
+import BigNumber from 'bignumber.js'
+
 import { AssetForUI } from '@/composables/useAssets'
 
 import SpDenom from '../SpDenom'
 import SpModal from '../SpModal'
+import SpAmountInput from '../SpAmountInput'
 
 export interface State {
   tokenSearch: string
@@ -173,7 +174,7 @@ export let initialState: State = {
 export default defineComponent({
   name: 'SpAmountSelect',
 
-  components: { SpModal, SpDenom },
+  components: { SpModal, SpDenom, SpAmountInput },
 
   emits: ['update'],
 
@@ -213,14 +214,14 @@ export default defineComponent({
     let parseAmount = (amount: string): number => {
       return amount == '' ? 0 : parseInt(amount)
     }
-    let handleAmountInput = (evt: Event, x: AssetForUI) => {
-      let newAmount = (evt.target as HTMLInputElement).value
+    let handleAmountInput = (amount: string, x: AssetForUI) => {
+      let amountAsBigNumber = new BigNumber(amount)
 
       let newSelected: Array<AssetForUI> = [...props.selected]
 
-      newSelected[
-        newSelected.findIndex((y: AssetForUI) => findAsset(x, y))
-      ].amount.amount = newAmount
+      let index = newSelected.findIndex((y: AssetForUI) => findAsset(x, y))
+
+      newSelected[index].amount.amount = amountAsBigNumber.toString()
 
       emit('update', { selected: newSelected })
     }