Fix alerts and modals

src/components/BuyConfirmedComponent/BuyConfirmedComponent.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
-import CustomAlert from "../CustomAlert/CustomAlert.vue";
-import { ref } from "vue";
 
 // props
 const props = defineProps<{
@@ -10,8 +8,6 @@ const props = defineProps<{
 
 // Emits
 const emit = defineEmits(["makeAnotherTransaction"]);
-
-const showAlert = ref<boolean>(true);
 </script>
 
 <template>
@@ -50,11 +46,6 @@ const showAlert = ref<boolean>(true);
         Fazer nova transação
       </button>
     </div>
-    <CustomAlert
-      v-if="showAlert"
-      :type="'buy'"
-      @close-alert="showAlert = false"
-    />
   </div>
 </template>
 

src/components/CustomAlert/CustomAlert.vue

@@ -6,11 +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 = "20rem";
+  alertPaddingLeft.value = "30%";
-} else {
+} else if (props.type === "buy") {
-  alertPaddingLeft.value = "18rem";
+  alertPaddingLeft.value = "30%";
+} else if (props.type === "redirect") {
+  alertPaddingLeft.value = "35%";
+  alertPaddingTop.value = "8rem";
 }
 
 switch (props.type) {
@@ -22,6 +26,9 @@ switch (props.type) {
     alertText.value =
       "Tudo certo! Os tokens já foram reservados e sua oferta está disponível.";
     break;
+  case "redirect":
+    alertText.value = "Existe uma compra em aberto. Continuar?";
+    break;
 }
 </script>
 <template>
@@ -29,9 +36,14 @@ switch (props.type) {
     class="modal-overlay inset-0 absolute backdrop-blur-sm sm:backdrop-blur-none"
   >
     <div class="modal px-12 pl-72 text-center flex justify-between">
-      <p class="text-black tracking-tighter leading-tight my-2">
+      <div class="flex items-center">
-        {{ alertText }}
+        <p class="text-black tracking-tighter leading-tight my-2">
-      </p>
+          {{ alertText }}
+        </p>
+        <button v-if="props.type === 'redirect'" @click="$emit('go-to-lock')">
+          Sim
+        </button>
+      </div>
       <img
         src="../../assets/closeAlertIcon.svg"
         alt="close alert"
@@ -44,14 +56,17 @@ switch (props.type) {
 <style scoped>
 .modal-overlay {
   display: flex !important;
-  height: 100%;
+  justify-content: center;
   width: 100%;
+  padding-top: 7rem;
+  height: 3rem;
+  z-index: 10;
 }
 
 .modal {
   background-color: rgba(251, 191, 36, 1);
-  height: 6%;
+  height: 3rem;
-  width: 100%;
+  width: 96%;
   border-radius: 10px;
   align-items: center;
   white-space: nowrap;
@@ -77,13 +92,16 @@ h6 {
 
 p {
   font-size: 20px;
+  font-weight: 600;
 }
 
 button {
-  width: 100px;
+  width: 50px;
-  height: 40px;
+  height: 30px;
   color: black;
-  font-size: 14px;
+  font-size: 16px;
   border-radius: 10px;
+  border: 2px solid white;
+  margin-left: 1rem;
 }
 </style>

src/components/SellerSteps/WantSellComponent.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
 import CustomButton from "../CustomButton/CustomButton.vue";
-import CustomAlert from "../CustomAlert/CustomAlert.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 import { pixFormatValidation, postProcessKey } from "@/utils/pixKeyFormat";
@@ -9,10 +8,6 @@ import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import { connectProvider } from "@/blockchain/provider";
 
-const props = defineProps<{
-  showAlert: boolean;
-}>();
-
 // Reactive state
 const etherStore = useEtherStore();
 const { walletAddress } = storeToRefs(etherStore);
@@ -24,7 +19,6 @@ const enableSelectButton = ref<boolean>(false);
 const hasLiquidity = ref<boolean>(true);
 const validDecimals = ref<boolean>(true);
 const validPixFormat = ref<boolean>(true);
-const showAlert = ref<boolean>(true);
 
 // Emits
 const emit = defineEmits(["approveTokens"]);
@@ -147,11 +141,6 @@ const handleButtonClick = async (
         @buttonClicked="handleButtonClick(offer, pixKey)"
       />
     </div>
-    <CustomAlert
-      v-if="props.showAlert"
-      :type="'sell'"
-      @close-alert="showAlert = false"
-    />
   </div>
 </template>
 

src/views/HomeView.vue

@@ -22,6 +22,7 @@ import {
 import { getNetworksLiquidity } from "@/blockchain/events";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
+import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
 
 enum Step {
   Search,
@@ -42,6 +43,7 @@ const loadingRelease = ref<boolean>(false);
 const showModal = ref<boolean>(false);
 const lastWalletTransactions = ref<WalletTransaction[]>([]);
 const depositList = ref<ValidDeposit[]>([]);
+const showBuyAlert = ref<boolean>(false);
 
 const confirmBuyClick = async (
   selectedDeposit: ValidDeposit,
@@ -71,6 +73,7 @@ const confirmBuyClick = async (
 
 const releaseTransaction = async (e2eId: string) => {
   flowStep.value = Step.List;
+  showBuyAlert.value = true;
   loadingRelease.value = true;
 
   if (lockID.value && tokenAmount.value && pixTarget.value) {
@@ -159,12 +162,19 @@ onMounted(async () => {
     v-if="flowStep == Step.Search"
     @token-buy="confirmBuyClick"
   />
-  <CustomModal
+  <CustomAlert
     v-if="flowStep == Step.Search && showModal"
-    :isRedirectModal="true"
+    :type="'redirect'"
-    @close-modal="showModal = false"
+    @close-alert="showModal = false"
     @go-to-lock="flowStep = Step.Buy"
   />
+  <CustomAlert
+    v-if="
+      flowStep == Step.List && showBuyAlert && !loadingLock && !loadingRelease
+    "
+    :type="'buy'"
+    @close-alert="showBuyAlert = false"
+  />
   <div v-if="flowStep == Step.Buy">
     <QrCodeComponent
       :pixTarget="String(pixTarget)"

src/views/ManageBidsView.vue

@@ -7,12 +7,14 @@ import { ref, watch, onMounted } from "vue";
 import {
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
+checkUnreleasedLock,
 } from "@/blockchain/wallet";
 import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import type { WalletTransaction } from "@/model/WalletTransaction";
 
 import router from "@/router/index";
+import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
 
 const etherStore = useEtherStore();
 
@@ -21,6 +23,7 @@ const loadingWithdraw = ref<boolean>(false);
 
 const depositList = ref<ValidDeposit[]>([]);
 const transactionsList = ref<WalletTransaction[]>([]);
+const showAlert = ref<boolean>(false);
 
 const callWithdraw = async (amount: string) => {
   if (amount) {
@@ -63,11 +66,25 @@ const getWalletTransactions = async () => {
   etherStore.setLoadingWalletTransactions(false);
 };
 
+const checkForUnreleasedLocks = async (): Promise<void> => {
+  const walletLocks = await checkUnreleasedLock(walletAddress.value);
+  if (walletLocks) {
+    showAlert.value = true;
+  } else {
+    showAlert.value = false;
+  }
+};
+
+const goToLock = () => {
+  router.push({ name: "home" });
+};
+
 onMounted(async () => {
   if (!walletAddress.value) {
     router.push({ name: "home" });
   }
   await getWalletTransactions();
+  await checkForUnreleasedLocks();
 });
 
 watch(walletAddress, async () => {
@@ -80,6 +97,12 @@ watch(networkName, async () => {
 </script>
 
 <template>
+  <CustomAlert
+    v-if="showAlert"
+    :type="'redirect'"
+    @close-alert="showAlert = false"
+    @go-to-lock="goToLock()"
+  />
   <div class="page">
     <div class="header" v-if="!loadingWithdraw && !walletAddress">
       Por Favor Conecte Sua Carteira

src/views/SellerView.vue

@@ -6,6 +6,7 @@ import { approveTokens, addDeposit } from "@/blockchain/sellerMethods";
 
 import { ref } from "vue";
 import { useEtherStore } from "@/store/ether";
+import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
 
 enum Step {
   Search,
@@ -61,16 +62,17 @@ const sendNetwork = async () => {
 
 <template>
   <div v-if="flowStep == Step.Sell">
-    <WantSellComponent
+    <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
-      v-if="!loading"
-      @approve-tokens="approveOffer"
-      :showAlert="showAlert"
-    />
     <LoadingComponent
       v-if="loading"
       :message="'A transação está sendo enviada para a rede.'"
     />
   </div>
+  <CustomAlert
+    v-if="flowStep == Step.Sell && showAlert"
+    :type="'sell'"
+    @close-alert="showAlert = false"
+  />
   <div v-if="flowStep == Step.Network">
     <SendNetwork
       :pixKey="pixKeyBuyer"