Add alert to withdraw flow

src/components/CustomAlert/CustomAlert.vue

@@ -6,15 +6,15 @@ const props = defineProps<{
 
 const alertText = ref<string>("");
 const alertPaddingLeft = ref<string>("18rem");
-const alertPaddingTop = ref<string>("0rem");
 
 if (props.type === "sell") {
   alertPaddingLeft.value = "30%";
 } else if (props.type === "buy") {
   alertPaddingLeft.value = "30%";
+} else if (props.type === "withdraw") {
+  alertPaddingLeft.value = "40%";
 } else if (props.type === "redirect") {
   alertPaddingLeft.value = "35%";
-  alertPaddingTop.value = "8rem";
 }
 
 switch (props.type) {
@@ -29,6 +29,9 @@ switch (props.type) {
   case "redirect":
     alertText.value = "Existe uma compra em aberto. Continuar?";
     break;
+  case "withdraw":
+    alertText.value = "Tudo certo! Saque realizado com sucesso!";
+    break;
 }
 </script>
 <template>
@@ -148,22 +151,4 @@ button {
   border: 2px solid white;
   margin-left: 1rem;
 }
-
-.lg-view {
-  display: inline-block;
-}
-
-.sm-view {
-  display: none;
-}
-
-@media screen and (max-width: 500px) {
-  .lg-view {
-    display: none;
-  }
-
-  .sm-view {
-    display: inline-block;
-  }
-}
 </style>

src/components/ListingComponent/ListingComponent.vue

@@ -59,19 +59,13 @@ const handleInputEvent = (event: any): void => {
   enableConfirmButton.value = true;
 };
 
-const callWithdraw = async () => {
+const callWithdraw = () => {
-  if (withdrawAmount.value) {
+  emit("depositWithdrawn", withdrawAmount.value);
-    const withdraw = await withdrawDeposit(withdrawAmount.value);
-    if (withdraw) {
-      console.log(withdraw);
-      alert("Saque realizado!");
-      emit("depositWithdrawn");
-    }
-  }
 };
 
 watch(withdrawAmount, (): void => {
-  if (!withdrawAmount.value) {
+  console.log(enableConfirmButton.value)
+  if (!withdrawAmount.value || !enableConfirmButton.value) {
     withdrawButtonOpacity.value = 0.7;
     withdrawButtonCursor.value = "not-allowed";
   } else {
@@ -252,7 +246,6 @@ showInitialItems();
           </h1>
 
           <div
-            v-if="enableConfirmButton"
             class="withdraw-button flex gap-2 items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
             @click="callWithdraw"
           >

src/views/ManageBidsView.vue

@@ -3,6 +3,7 @@ import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
+import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
 import { ref, watch, onMounted } from "vue";
 import {
   listValidDepositTransactionsByWalletAddress,
@@ -19,6 +20,7 @@ const etherStore = useEtherStore();
 
 const { walletAddress, networkName } = storeToRefs(etherStore);
 const loadingWithdraw = ref<boolean>(false);
+const showAlert = ref<boolean>(false);
 
 const depositList = ref<ValidDeposit[]>([]);
 const transactionsList = ref<WalletTransaction[]>([]);
@@ -37,6 +39,7 @@ const callWithdraw = async (amount: string) => {
     if (withdraw) {
       console.log("Saque realizado!");
       await getWalletTransactions();
+      showAlert.value = true;
     } else {
       console.log("Não foi possível realizar o saque!");
     }
@@ -84,6 +87,11 @@ watch(networkName, async () => {
 </script>
 
 <template>
+  <CustomAlert
+    v-if="showAlert"
+    :type="'withdraw'"
+    @close-alert="showAlert = false"
+  />
   <div class="page">
     <div class="header" v-if="!loadingWithdraw && !walletAddress">
       Por Favor Conecte Sua Carteira