From 03c7d14b4b468ab49557d3616430bde5f84eb5ba Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 10 Feb 2023 16:59:28 -0300
Subject: [PATCH] Fix custom modal css to align it at center independent of
 device

Co-authored-by: enzoggqs <eggqsaraiva@gmail.com>
---
 src/blockchain/wallet.ts           | 14 +++++++-------
 src/components/CustomModal.vue     |  7 +++++--
 src/components/QrCodeComponent.vue |  5 +++++
 src/model/UnreleasedLock.ts        |  2 +-
 src/views/HomeView.vue             | 22 +++++++++++-----------
 5 files changed, 29 insertions(+), 21 deletions(-)

diff --git a/src/blockchain/wallet.ts b/src/blockchain/wallet.ts
index ec85e67..e708e77 100644
--- a/src/blockchain/wallet.ts
+++ b/src/blockchain/wallet.ts
@@ -105,9 +105,7 @@ const listLockTransactionByWalletAddress = async (
   const p2pContract = getContract(true);
 
   const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
-  const eventsReleasedLocks = await p2pContract.queryFilter(
-    filterAddedLocks
-  );
+  const eventsReleasedLocks = await p2pContract.queryFilter(filterAddedLocks);
 
   return eventsReleasedLocks.sort((a, b) => {
     return b.blockNumber - a.blockNumber;
@@ -123,10 +121,12 @@ const checkUnreleasedLocks = async (
   };
 
   const addedLocks = await listLockTransactionByWalletAddress(walletAddress);
-  const lockStatus = await p2pContract.getLocksStatus(addedLocks.map((lock) => lock.args?.lockID))
-  const unreleasedLockId = lockStatus.find((lock: any) => lock.status)
+  const lockStatus = await p2pContract.getLocksStatus(
+    addedLocks.map((lock) => lock.args?.lockID)
+  );
+  const unreleasedLockId = lockStatus.find((lock: any) => lock.status);
 
-  if (unreleasedLockId){
+  if (unreleasedLockId) {
     const lock = await p2pContract.mapLocks(unreleasedLockId);
 
     const pixTarget = lock.pixTarget;
@@ -148,5 +148,5 @@ export {
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
   listReleaseTransactionByWalletAddress,
-  checkUnreleasedLocks
+  checkUnreleasedLocks,
 };
diff --git a/src/components/CustomModal.vue b/src/components/CustomModal.vue
index 039f24e..4e165a8 100644
--- a/src/components/CustomModal.vue
+++ b/src/components/CustomModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref } from "vue";
 
 const props = defineProps({
   isRedirectModal: Boolean,
@@ -69,13 +69,16 @@ if (props.isRedirectModal) {
 <style scoped>
 .modal-overlay {
   display: flex !important;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  width: 100vw;
 }
 
 .modal {
   background-color: v-bind(modalColor);
   height: v-bind(modalHeight);
   width: 300px;
-  margin-top: 50%;
   border-radius: 10px;
 }
 .close {
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index cf94576..7ed347a 100644
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -154,6 +154,11 @@ const validatePix = async (): Promise<void> => {
         @button-clicked="emit('pixValidated', e2eId)"
       />
     </div>
+    <CustomModal
+      v-if="showModal"
+      @close-modal="showModal = false"
+      :isRedirectModal="false"
+    />
   </div>
 </template>
 
diff --git a/src/model/UnreleasedLock.ts b/src/model/UnreleasedLock.ts
index 0be47b2..c0ec3f6 100644
--- a/src/model/UnreleasedLock.ts
+++ b/src/model/UnreleasedLock.ts
@@ -3,4 +3,4 @@ import type { Pix } from "./Pix";
 export type UnreleasedLock = {
   lockID: string;
   pix: Pix;
-};
\ No newline at end of file
+};
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index c92b1f9..82fdc0d 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -27,7 +27,7 @@ const etherStore = useEtherStore();
 etherStore.setSellerView(false);
 
 // States
-const { loadingLock, walletAddress, networkName} = storeToRefs(etherStore);
+const { loadingLock, walletAddress, networkName } = storeToRefs(etherStore);
 const flowStep = ref<Step>(Step.Search);
 const pixTarget = ref<number>();
 const tokenAmount = ref<number>();
@@ -98,19 +98,19 @@ const checkForUnreleasedLocks = async () => {
     flowStep.value = Step.Search;
     showModal.value = false;
   }
-}
+};
 
-if (walletAddress){
-  await checkForUnreleasedLocks();
-}
+// if (walletAddress) {
+//   await checkForUnreleasedLocks();
+// }
 
-watch(walletAddress, async () => {
-  await checkForUnreleasedLocks();
-});
+// watch(walletAddress, async () => {
+//   await checkForUnreleasedLocks();
+// });
 
-watch(networkName, async () => {
-  await checkForUnreleasedLocks();
-});
+// watch(networkName, async () => {
+//   await checkForUnreleasedLocks();
+// });
 
 onMounted(async () => {
   await getNetworksLiquidity();