From 84ae8b9eaca33a1fff71be7e62a447dae54410fd Mon Sep 17 00:00:00 2001
From: kvhnuke <10602065+kvhnuke@users.noreply.github.com>
Date: Mon, 6 May 2024 14:57:26 -0700
Subject: [PATCH] fix: number input decimal error

---
 .../bitcoin/ui/send-transaction/index.vue     |   2 +-
 .../ui/send-transaction/send-input-amount.vue |  15 +-
 .../ethereum/ui/send-transaction/index.vue    |   2 +-
 .../components/send-input-amount.vue          | 168 -----------------
 .../kadena/ui/send-transaction/index.vue      |  13 +-
 .../components/send-input-amount.vue          | 169 ------------------
 .../polkadot/ui/send-transaction/index.vue    |  18 +-
 .../components/swap-token-amount-input.vue    |  16 +-
 8 files changed, 45 insertions(+), 358 deletions(-)
 delete mode 100644 packages/extension/src/providers/kadena/ui/send-transaction/components/send-input-amount.vue
 delete mode 100644 packages/extension/src/providers/polkadot/ui/send-transaction/components/send-input-amount.vue

diff --git a/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue b/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue
index e52a41789..8d309b56d 100644
--- a/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/bitcoin/ui/send-transaction/index.vue
@@ -389,7 +389,7 @@ const inputAmount = (inputAmount: string) => {
   }
   const inputAmountBn = new BigNumber(inputAmount);
   isMaxSelected.value = false;
-  amount.value = inputAmountBn.lt(0) ? "0" : inputAmountBn.toFixed();
+  amount.value = inputAmountBn.lt(0) ? "0" : inputAmount;
 };
 
 const toggleSelectFee = () => {
diff --git a/packages/extension/src/providers/common/ui/send-transaction/send-input-amount.vue b/packages/extension/src/providers/common/ui/send-transaction/send-input-amount.vue
index a0df84c6b..66adba85f 100644
--- a/packages/extension/src/providers/common/ui/send-transaction/send-input-amount.vue
+++ b/packages/extension/src/providers/common/ui/send-transaction/send-input-amount.vue
@@ -3,9 +3,10 @@
     <input
       ref="inputRef"
       v-model="amount"
-      type="number"
+      type="text"
       placeholder="0"
       :style="{ color: !hasEnoughBalance ? 'red' : 'black' }"
+      @keypress="onlyNumber"
       @focus="changeFocus"
       @blur="changeFocus"
     />
@@ -31,7 +32,7 @@ import SwitchArrowIcon from "@action/icons/send/switch-arrow-icon.vue";
 import BigNumber from "bignumber.js";
 
 const emit = defineEmits<{
-  (e: "update:inputAmount", address: string): void;
+  (e: "update:inputAmount", value: string): void;
   (e: "update:inputSetMax"): void;
 }>();
 
@@ -64,10 +65,18 @@ const fiatEquivalent = computed(() => {
 const amount = computed({
   get: () => props.amount,
   set: (value) => {
-    emit("update:inputAmount", value.toString());
+    let fValue = value.toString();
+    if (fValue === ".") fValue = "0.";
+    emit("update:inputAmount", fValue);
   },
 });
 
+const onlyNumber = ($event: KeyboardEvent) => {
+  const keyCode = $event.keyCode ? $event.keyCode : $event.which;
+  if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) {
+    $event.preventDefault();
+  }
+};
 const changeFocus = () => {
   isFocus.value = !isFocus.value;
 };
diff --git a/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue b/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
index 45b551633..e87798c72 100644
--- a/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/ethereum/ui/send-transaction/index.vue
@@ -614,7 +614,7 @@ const inputAmount = (inputAmount: string) => {
   }
   const inputAmountBn = new BigNumber(inputAmount);
   isMaxSelected.value = false;
-  amount.value = inputAmountBn.lt(0) ? "0" : inputAmountBn.toFixed();
+  amount.value = inputAmountBn.lt(0) ? "0" : inputAmount;
   if (isInputsValid.value) {
     updateTransactionFees(Tx.value);
   }
diff --git a/packages/extension/src/providers/kadena/ui/send-transaction/components/send-input-amount.vue b/packages/extension/src/providers/kadena/ui/send-transaction/components/send-input-amount.vue
deleted file mode 100644
index 8124653ea..000000000
--- a/packages/extension/src/providers/kadena/ui/send-transaction/components/send-input-amount.vue
+++ /dev/null
@@ -1,168 +0,0 @@
-<template>
-  <div class="send-input-amount" :class="{ focus: isFocus }">
-    <input
-      v-model="amount"
-      type="number"
-      placeholder="0"
-      :class="{ error: !isValid }"
-      @focus="changeFocus"
-      @blur="changeFocus"
-    />
-
-    <div class="send-input-amount__fiat">
-      <switch-arrow-icon />
-      <span>${{ $filters.formatFiatValue(fiatEquivalent).value }}</span>
-    </div>
-
-    <a class="send-input-amount__max" @click="emit('update:inputSetMax')">
-      Max
-    </a>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import SwitchArrowIcon from "@action/icons/send/switch-arrow-icon.vue";
-import BigNumber from "bignumber.js";
-
-const emit = defineEmits<{
-  (e: "update:inputAmount", address: string | undefined): void;
-  (e: "update:inputSetMax"): void;
-}>();
-
-const isFocus = ref(false);
-
-const props = defineProps({
-  isValid: {
-    type: Boolean,
-    default: false,
-  },
-  fiatValue: {
-    type: String,
-    default: "1",
-  },
-  amount: {
-    type: String,
-    default: "",
-  },
-});
-const fiatEquivalent = computed(() => {
-  return new BigNumber(props.fiatValue).times(props.amount).toString();
-});
-const amount = computed({
-  get: () => props.amount,
-  set: (value) => {
-    emit(
-      "update:inputAmount",
-      value ? new BigNumber(value).toFixed() : value.toString()
-    );
-  },
-});
-
-const changeFocus = () => {
-  isFocus.value = !isFocus.value;
-};
-</script>
-
-<style lang="less">
-@import "~@action/styles/theme.less";
-
-.send-input-amount {
-  height: 100px;
-  background: #ffffff;
-  margin: 0 32px 8px 32px;
-  box-sizing: border-box;
-  border: 1px solid @gray02;
-  box-sizing: border-box;
-  border-radius: 10px;
-  width: calc(~"100% - 64px");
-  padding: 16px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-direction: row;
-  position: relative;
-
-  &.focus {
-    border: 1px solid @primary;
-  }
-
-  input {
-    width: 290px;
-    height: 40px;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 34px;
-    line-height: 40px;
-    text-align: left;
-    letter-spacing: 0.25px;
-    color: @primaryLabel;
-    border: 0 none;
-    outline: none;
-    padding: 0;
-    caret-color: @primary;
-  }
-  input[type="number"]::-webkit-outer-spin-button,
-  input[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-
-  &__fiat {
-    position: absolute;
-    left: 16px;
-    bottom: 16px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: row;
-
-    svg {
-      margin-right: 4px;
-    }
-
-    span {
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      text-align: center;
-      letter-spacing: 0.25px;
-      color: @tertiaryLabel;
-    }
-  }
-
-  &__max {
-    position: absolute;
-    width: 43px;
-    height: 24px;
-    right: 16px;
-    top: 50%;
-    margin-top: -12px;
-    background: @buttonBg;
-    border-radius: 6px;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 11px;
-    line-height: 24px;
-    letter-spacing: 1.5px;
-    text-transform: uppercase;
-    color: @primaryLabel;
-    text-align: center;
-    text-decoration: none;
-    cursor: pointer;
-    display: block;
-
-    &:active {
-      opacity: 0.7;
-    }
-  }
-
-  .error {
-    color: @error !important;
-  }
-}
-</style>
diff --git a/packages/extension/src/providers/kadena/ui/send-transaction/index.vue b/packages/extension/src/providers/kadena/ui/send-transaction/index.vue
index 50d5507f8..e64dcf0b1 100644
--- a/packages/extension/src/providers/kadena/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/kadena/ui/send-transaction/index.vue
@@ -65,8 +65,9 @@
 
       <send-input-amount
         :amount="amount"
+        :show-max="true"
         :fiat-value="selectedAsset.price"
-        :is-valid="fieldsValidation.amount"
+        :has-enough-balance="fieldsValidation.amount"
         @update:input-amount="inputAmount"
         @update:input-set-max="setSendMax"
       />
@@ -103,7 +104,7 @@ import SendContactsList from "./components/send-contacts-list.vue";
 import SendFromContactsList from "./components/send-from-contacts-list.vue";
 import SendTokenSelect from "./components/send-token-select.vue";
 import AssetsSelectList from "@action/views/assets-select-list/index.vue";
-import SendInputAmount from "./components/send-input-amount.vue";
+import SendInputAmount from "@/providers/common/ui/send-transaction/send-input-amount.vue";
 import SendFeeSelect from "./components/send-fee-select.vue";
 import SendAlert from "./components/send-alert.vue";
 import BaseButton from "@action/components/base-button/index.vue";
@@ -399,9 +400,13 @@ const selectToken = (token: KDAToken | Partial<KDAToken>) => {
   isOpenSelectToken.value = false;
 };
 
-const inputAmount = (number: string | undefined) => {
+const inputAmount = (inputAmount: string) => {
+  if (inputAmount === "") {
+    inputAmount = "0";
+  }
+  const inputAmountBn = new BigNumber(inputAmount);
   sendMax.value = false;
-  amount.value = number ? (parseFloat(number) < 0 ? "" : number) : number;
+  amount.value = inputAmountBn.lt(0) ? "0" : inputAmount;
 };
 
 const sendButtonTitle = computed(() => {
diff --git a/packages/extension/src/providers/polkadot/ui/send-transaction/components/send-input-amount.vue b/packages/extension/src/providers/polkadot/ui/send-transaction/components/send-input-amount.vue
deleted file mode 100644
index 535dcd24e..000000000
--- a/packages/extension/src/providers/polkadot/ui/send-transaction/components/send-input-amount.vue
+++ /dev/null
@@ -1,169 +0,0 @@
-<template>
-  <div class="send-input-amount" :class="{ focus: isFocus }">
-    <input
-      v-model="amount"
-      type="number"
-      placeholder="0"
-      :class="{ error: !hasEnoughBalance }"
-      @focus="changeFocus"
-      @blur="changeFocus"
-      @input="emit('update:inputSetMax', false)"
-    />
-
-    <div class="send-input-amount__fiat">
-      <switch-arrow-icon />
-      <span>${{ $filters.formatFiatValue(fiatEquivalent).value }}</span>
-    </div>
-
-    <a class="send-input-amount__max" @click="emit('update:inputSetMax', true)">
-      Max
-    </a>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { ref, computed } from "vue";
-import SwitchArrowIcon from "@action/icons/send/switch-arrow-icon.vue";
-import BigNumber from "bignumber.js";
-
-const emit = defineEmits<{
-  (e: "update:inputAmount", address: string | undefined): void;
-  (e: "update:inputSetMax", max: boolean): void;
-}>();
-
-const isFocus = ref(false);
-
-const props = defineProps({
-  hasEnoughBalance: {
-    type: Boolean,
-    default: false,
-  },
-  fiatValue: {
-    type: String,
-    default: "1",
-  },
-  amount: {
-    type: String,
-    default: "",
-  },
-});
-const fiatEquivalent = computed(() => {
-  return new BigNumber(props.fiatValue).times(props.amount).toString();
-});
-const amount = computed({
-  get: () => props.amount,
-  set: (value) => {
-    emit(
-      "update:inputAmount",
-      value ? new BigNumber(value).toFixed() : value.toString()
-    );
-  },
-});
-
-const changeFocus = () => {
-  isFocus.value = !isFocus.value;
-};
-</script>
-
-<style lang="less">
-@import "~@action/styles/theme.less";
-
-.send-input-amount {
-  height: 100px;
-  background: #ffffff;
-  margin: 0 32px 8px 32px;
-  box-sizing: border-box;
-  border: 1px solid @gray02;
-  box-sizing: border-box;
-  border-radius: 10px;
-  width: calc(~"100% - 64px");
-  padding: 16px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-direction: row;
-  position: relative;
-
-  &.focus {
-    border: 1px solid @primary;
-  }
-
-  input {
-    width: 290px;
-    height: 40px;
-    font-style: normal;
-    font-weight: 400;
-    font-size: 34px;
-    line-height: 40px;
-    text-align: left;
-    letter-spacing: 0.25px;
-    color: @primaryLabel;
-    border: 0 none;
-    outline: none;
-    padding: 0;
-    caret-color: @primary;
-  }
-  input[type="number"]::-webkit-outer-spin-button,
-  input[type="number"]::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  input[type="number"] {
-    -moz-appearance: textfield;
-  }
-
-  &__fiat {
-    position: absolute;
-    left: 16px;
-    bottom: 16px;
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-direction: row;
-
-    svg {
-      margin-right: 4px;
-    }
-
-    span {
-      font-style: normal;
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 20px;
-      text-align: center;
-      letter-spacing: 0.25px;
-      color: @tertiaryLabel;
-    }
-  }
-
-  &__max {
-    position: absolute;
-    width: 43px;
-    height: 24px;
-    right: 16px;
-    top: 50%;
-    margin-top: -12px;
-    background: @buttonBg;
-    border-radius: 6px;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 11px;
-    line-height: 24px;
-    letter-spacing: 1.5px;
-    text-transform: uppercase;
-    color: @primaryLabel;
-    text-align: center;
-    text-decoration: none;
-    cursor: pointer;
-    display: block;
-
-    &:active {
-      opacity: 0.7;
-    }
-  }
-
-  .error {
-    color: @error !important;
-  }
-}
-</style>
diff --git a/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue b/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue
index 927f75aa4..36e767183 100644
--- a/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue
+++ b/packages/extension/src/providers/polkadot/ui/send-transaction/index.vue
@@ -63,6 +63,7 @@
 
       <send-input-amount
         :amount="amount"
+        :show-max="true"
         :fiat-value="selectedAsset.price"
         :has-enough-balance="hasEnough"
         @update:input-amount="inputAmount"
@@ -111,7 +112,7 @@ import SendContactsList from "./components/send-contacts-list.vue";
 import SendFromContactsList from "./components/send-from-contacts-list.vue";
 import SendTokenSelect from "./components/send-token-select.vue";
 import AssetsSelectList from "@action/views/assets-select-list/index.vue";
-import SendInputAmount from "./components/send-input-amount.vue";
+import SendInputAmount from "@/providers/common/ui/send-transaction/send-input-amount.vue";
 import SendFeeSelect from "./components/send-fee-select.vue";
 import SendAlert from "./components/send-alert.vue";
 import BaseButton from "@action/components/base-button/index.vue";
@@ -406,9 +407,13 @@ const selectToken = (token: SubstrateToken | Partial<SubstrateToken>) => {
   isOpenSelectToken.value = false;
 };
 
-const inputAmount = (number: string | undefined) => {
+const inputAmount = (inputAmount: string) => {
+  if (inputAmount === "") {
+    inputAmount = "0";
+  }
+  const inputAmountBn = new BigNumber(inputAmount);
   sendMax.value = false;
-  amount.value = number ? (parseFloat(number) < 0 ? "0" : number) : number;
+  amount.value = inputAmountBn.lt(0) ? "0" : inputAmount;
   validateFields();
 };
 
@@ -423,12 +428,7 @@ const sendButtonTitle = computed(() => {
   return title;
 });
 
-const setSendMax = (max: boolean) => {
-  if (!max) {
-    sendMax.value = false;
-    return;
-  }
-
+const setSendMax = () => {
   if (selectedAsset.value) {
     const humanBalance = fromBase(
       selectedAsset.value.balance!,
diff --git a/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/components/swap-token-amount-input.vue b/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/components/swap-token-amount-input.vue
index 7b28fd736..c24bd72b3 100644
--- a/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/components/swap-token-amount-input.vue
+++ b/packages/extension/src/ui/action/views/swap/components/swap-token-amount-input/components/swap-token-amount-input.vue
@@ -2,19 +2,19 @@
   <input
     ref="swapAmountInput"
     v-model="textValue"
-    type="number"
+    type="text"
     :placeholder="placeholder"
     autocomplete="off"
     :class="`swap-token-amount-input
   ${!error || 'swap-token-amount-error'}`"
     @focus="changeFocus"
     @blur="changeFocus"
+    @keypress="onlyNumber"
   />
 </template>
 
 <script setup lang="ts">
 import { computed, ref, onMounted } from "vue";
-import BigNumber from "bignumber.js";
 const isFocus = ref(false);
 const swapAmountInput = ref(null);
 
@@ -60,12 +60,22 @@ onMounted(() => {
 const emit = defineEmits(["update:value"]);
 const textValue = computed({
   get: () => props.value,
-  set: (value) => emit("update:value", BigNumber(value).toFixed()),
+  set: (value) => {
+    let fValue = value.toString();
+    if (fValue === ".") fValue = "0.";
+    emit("update:value", fValue);
+  },
 });
 const changeFocus = () => {
   isFocus.value = !isFocus.value;
   props.changeFocus(isFocus.value);
 };
+const onlyNumber = ($event: KeyboardEvent) => {
+  const keyCode = $event.keyCode ? $event.keyCode : $event.which;
+  if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) {
+    $event.preventDefault();
+  }
+};
 </script>
 
 <style lang="less">