diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue index 9ef8990..a030682 100644 --- a/src/components/ListingComponent/ListingComponent.vue +++ b/src/components/ListingComponent/ListingComponent.vue @@ -19,6 +19,8 @@ const etherStore = useEtherStore(); const itemsToShow = ref([]); const withdrawAmount = ref(""); +const withdrawButtonOpacity = ref(0.6); +const withdrawButtonCursor = ref("not-allowed"); const isCollapsibleOpen = ref(false); const callWithdraw = async () => { @@ -32,6 +34,16 @@ const callWithdraw = async () => { } }; +watch(withdrawAmount, (): void => { + if (!withdrawAmount.value) { + withdrawButtonOpacity.value = 0.7; + withdrawButtonCursor.value = "not-allowed"; + } else { + withdrawButtonOpacity.value = 1; + withdrawButtonCursor.value = "pointer"; + } +}); + const getRemaining = (): number => { if (props.validDeposits instanceof Array) { // Here we are getting only the first element of the list because @@ -148,7 +160,7 @@ showInitialItems(); Cancelar
Withdraw image @@ -249,6 +261,11 @@ p { @apply font-medium text-base text-gray-900 justify-self-center; } +.withdraw-button { + opacity: v-bind(withdrawButtonOpacity); + cursor: v-bind(withdrawButtonCursor); +} + input[type="number"] { -moz-appearance: textfield; }