From 17b6366502c377ca41204988513c5faffdc81265 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Fri, 17 Feb 2023 13:03:57 -0300
Subject: [PATCH 1/2] Add collasible effect to withdraw component

---
 .../ListingComponent/ListingComponent.vue     | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/ListingComponent/ListingComponent.vue b/src/components/ListingComponent/ListingComponent.vue
index 62d0115..9ef8990 100644
--- a/src/components/ListingComponent/ListingComponent.vue
+++ b/src/components/ListingComponent/ListingComponent.vue
@@ -19,6 +19,7 @@ const etherStore = useEtherStore();
 
 const itemsToShow = ref<Event[]>([]);
 const withdrawAmount = ref<string>("");
+const isCollapsibleOpen = ref<boolean>(false);
 
 const callWithdraw = async () => {
   if (withdrawAmount.value) {
@@ -115,7 +116,16 @@ showInitialItems();
         </div>
       </div>
       <div class="pt-5">
-        <div class="py-2 w-100">
+        <div v-show="!isCollapsibleOpen" class="flex justify-end items-center">
+          <div
+            class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
+            @click="[(isCollapsibleOpen = true)]"
+          >
+            <img alt="Withdraw image" src="@/assets/withdraw.svg" />
+            <span class="last-release-info">Sacar</span>
+          </div>
+        </div>
+        <div v-show="isCollapsibleOpen" class="py-2 w-100">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
           <input
             type="number"
@@ -126,8 +136,17 @@ showInitialItems();
             v-model="withdrawAmount"
           />
         </div>
-        <hr class="pb-3" />
-        <div class="flex justify-end items-center">
+        <hr v-show="isCollapsibleOpen" class="pb-3" />
+        <div
+          v-show="isCollapsibleOpen"
+          class="flex justify-between items-center"
+        >
+          <h1
+            @click="[(isCollapsibleOpen = false)]"
+            class="text-black font-medium cursor-pointer"
+          >
+            Cancelar
+          </h1>
           <div
             class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
             @click="callWithdraw"

From 671903b729b6d4cc09410ce93e9c16a2e5d2099d Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Fri, 17 Feb 2023 13:25:16 -0300
Subject: [PATCH 2/2] Add disabled effect to withdraw button when there is not
 a value

---
 .../ListingComponent/ListingComponent.vue     | 19 ++++++++++++++++++-
 1 file changed, 18 insertions(+), 1 deletion(-)

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<Event[]>([]);
 const withdrawAmount = ref<string>("");
+const withdrawButtonOpacity = ref<number>(0.6);
+const withdrawButtonCursor = ref<string>("not-allowed");
 const isCollapsibleOpen = ref<boolean>(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
           </h1>
           <div
-            class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
+            class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
             @click="callWithdraw"
           >
             <img alt="Withdraw image" src="@/assets/withdraw.svg" />
@@ -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;
 }