Fix custom modal css to align it at center independent of device

Co-authored-by: enzoggqs <eggqsaraiva@gmail.com>

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,
 };

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 {

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>
 

src/model/UnreleasedLock.ts

@@ -3,4 +3,4 @@ import type { Pix } from "./Pix";
 export type UnreleasedLock = {
   lockID: string;
   pix: Pix;
-};
+};

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();