diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue index 7a88ad5..e3433bf 100644 --- a/src/components/ListingComponent/ListingComponent.vue +++ b/src/components/ListingComponent/ListingComponent.vue @@ -7,6 +7,8 @@ import { useEtherStore } from "@/store/ether"; import { storeToRefs } from "pinia"; import { ref, watch } from "vue"; import SpinnerComponent from "../SpinnerComponent.vue"; +import { decimalCount } from "@/utils/decimalCount"; +import { debounce } from "@/utils/debounce"; const etherStore = useEtherStore(); @@ -19,11 +21,35 @@ const props = defineProps<{ const emit = defineEmits(["depositWithdrawn"]); const { loadingWalletTransactions } = storeToRefs(etherStore); +const remaining = ref(0.0); const itemsToShow = ref([]); const withdrawAmount = ref(""); const withdrawButtonOpacity = ref(0.6); const withdrawButtonCursor = ref("not-allowed"); const isCollapsibleOpen = ref(false); +const validDecimals = ref(true); +const validWithdrawAmount = ref(true); +const enableConfirmButton = ref(false); + +// Debounce methods +const handleInputEvent = (event: any): void => { + const { value } = event.target; + + if (decimalCount(String(value)) > 2) { + validDecimals.value = false; + enableConfirmButton.value = false; + return; + } + validDecimals.value = true; + + if (value > remaining.value) { + validWithdrawAmount.value = false; + enableConfirmButton.value = false; + return; + } + validWithdrawAmount.value = true; + enableConfirmButton.value = true; +}; const callWithdraw = async () => { if (withdrawAmount.value) { @@ -51,6 +77,7 @@ const getRemaining = (): number => { // Here we are getting only the first element of the list because // in this release only the BRL token is being used. const deposit = props.validDeposits[0]; + remaining.value = deposit ? deposit.remaining : 0; return deposit ? deposit.remaining : 0; } return 0; @@ -146,11 +173,22 @@ showInitialItems(); type="number" name="" id="" + @input="debounce(handleInputEvent, 500)($event)" placeholder="0" class="text-2xl text-gray-900 w-full outline-none" v-model="withdrawAmount" /> +
+ Por favor utilize no máximo 2 casas decimais +
+
+ Saldo insuficiente +

Cancelar +