From 48972a64374aa5eeb85ee5c59ed8119bfd5cb885 Mon Sep 17 00:00:00 2001
From: enzoggqs <eggqsaraiva@gmail.com>
Date: Thu, 9 Feb 2023 16:44:11 -0300
Subject: [PATCH 1/9] Create Modal to redirect to active lock

---
 src/components/CustomModal.vue     | 51 +++++++++++++++++++++++++++---
 src/components/QrCodeComponent.vue |  6 +++-
 src/views/HomeView.vue             |  8 +++++
 3 files changed, 60 insertions(+), 5 deletions(-)

diff --git a/src/components/CustomModal.vue b/src/components/CustomModal.vue
index 983805d..039f24e 100644
--- a/src/components/CustomModal.vue
+++ b/src/components/CustomModal.vue
@@ -1,8 +1,25 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const props = defineProps({
+  isRedirectModal: Boolean,
+});
+
+const modalColor = ref<string>("white");
+const modalHeight = ref<string>("250px");
+const pFontSize = ref<string>("16px");
+
+if (props.isRedirectModal) {
+  modalColor.value = "rgba(251, 191, 36, 1)";
+  modalHeight.value = "150px";
+  pFontSize.value = "20px";
+}
+</script>
 
 <template>
   <div
     class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
+    v-if="!isRedirectModal"
   >
     <div class="modal px-5 text-center">
       <p
@@ -21,6 +38,32 @@
       </button>
     </div>
   </div>
+  <div
+    class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm"
+    v-if="isRedirectModal"
+  >
+    <div class="modal px-5 text-center">
+      <p
+        class="text-black text-lg tracking-tighter leading-tight my-6 mx-2 text-justify font-semibold"
+      >
+        Retomar a última compra?
+      </p>
+      <div class="flex justify-around items-center px-2">
+        <button
+          @click="$emit('close-modal')"
+          class="border-2 border-solid border-white-400 mt-2 font-semibold"
+        >
+          Não
+        </button>
+        <button
+          @click="$emit('go-to-lock')"
+          class="border-2 border-solid border-white-400 mt-2 font-semibold"
+        >
+          Sim
+        </button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <style scoped>
@@ -29,8 +72,8 @@
 }
 
 .modal {
-  background-color: white;
-  height: 250px;
+  background-color: v-bind(modalColor);
+  height: v-bind(modalHeight);
   width: 300px;
   margin-top: 50%;
   border-radius: 10px;
@@ -54,7 +97,7 @@ h6 {
 }
 
 p {
-  font-size: 16px;
+  font-size: v-bind(pFontSize);
 }
 
 button {
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index 343a21b..7ed347a 100644
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -154,7 +154,11 @@ const validatePix = async (): Promise<void> => {
         @button-clicked="emit('pixValidated', e2eId)"
       />
     </div>
-    <CustomModal v-if="showModal" @close-modal="showModal = false" />
+    <CustomModal
+      v-if="showModal"
+      @close-modal="showModal = false"
+      :isRedirectModal="false"
+    />
   </div>
 </template>
 
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 208a1f9..820d7c3 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -5,6 +5,7 @@ import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirm
 import { ref, onMounted } from "vue";
 import { useEtherStore } from "@/store/ether";
 import QrCodeComponent from "@/components/QrCodeComponent.vue";
+import CustomModal from "@/components/CustomModal.vue";
 import { storeToRefs } from "pinia";
 import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import {
@@ -31,6 +32,7 @@ const pixTarget = ref<number>();
 const tokenAmount = ref<number>();
 const _lockID = ref<string>("");
 const loadingRelease = ref<boolean>(false);
+const showModal = ref<boolean>(true);
 const lastWalletReleaseTransactions = ref<Event[]>([]);
 
 const confirmBuyClick = async (
@@ -94,6 +96,12 @@ onMounted(async () => {
     v-if="flowStep == Step.Search"
     @token-buy="confirmBuyClick"
   />
+  <CustomModal
+    v-if="flowStep == Step.Search && showModal"
+    :isRedirectModal="true"
+    @close-modal="showModal = false"
+    @go-to-lock="flowStep = Step.Buy"
+  />
   <div v-if="flowStep == Step.Buy">
     <QrCodeComponent
       :pixTarget="String(pixTarget)"

From a5d72650ee6322e8f32a37b29fa6df050232884f Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 10 Feb 2023 16:18:08 -0300
Subject: [PATCH 2/9] Add check unreleased lock function

---
 src/blockchain/wallet.ts    | 47 +++++++++++++++++++++++++++++++++++++
 src/model/UnreleasedLock.ts |  6 +++++
 2 files changed, 53 insertions(+)
 create mode 100644 src/model/UnreleasedLock.ts

diff --git a/src/blockchain/wallet.ts b/src/blockchain/wallet.ts
index 75d0470..ec85e67 100644
--- a/src/blockchain/wallet.ts
+++ b/src/blockchain/wallet.ts
@@ -9,6 +9,8 @@ import { ethers, type Event } from "ethers";
 import { formatEther } from "ethers/lib/utils";
 import { getValidDeposits } from "./events";
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import type { UnreleasedLock } from "@/model/UnreleasedLock";
+import type { Pix } from "@/model/Pix";
 
 const updateWalletStatus = async (): Promise<void> => {
   const etherStore = useEtherStore();
@@ -97,9 +99,54 @@ const listReleaseTransactionByWalletAddress = async (
   });
 };
 
+const listLockTransactionByWalletAddress = async (
+  walletAddress: string
+): Promise<Event[]> => {
+  const p2pContract = getContract(true);
+
+  const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
+  const eventsReleasedLocks = await p2pContract.queryFilter(
+    filterAddedLocks
+  );
+
+  return eventsReleasedLocks.sort((a, b) => {
+    return b.blockNumber - a.blockNumber;
+  });
+};
+
+const checkUnreleasedLocks = async (
+  walletAddress: string
+): Promise<UnreleasedLock | undefined> => {
+  const p2pContract = getContract();
+  const pixData: Pix = {
+    pixKey: "",
+  };
+
+  const addedLocks = await listLockTransactionByWalletAddress(walletAddress);
+  const lockStatus = await p2pContract.getLocksStatus(addedLocks.map((lock) => lock.args?.lockID))
+  const unreleasedLockId = lockStatus.find((lock: any) => lock.status)
+
+  if (unreleasedLockId){
+    const lock = await p2pContract.mapLocks(unreleasedLockId);
+
+    const pixTarget = lock.pixTarget;
+    const amount = formatEther(lock?.amount);
+    pixData.pixKey = pixTarget;
+    pixData.value = Number(amount);
+
+    return {
+      lockID: unreleasedLockId,
+      pix: pixData,
+    };
+  }
+
+  return;
+};
+
 export {
   updateWalletStatus,
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
   listReleaseTransactionByWalletAddress,
+  checkUnreleasedLocks
 };
diff --git a/src/model/UnreleasedLock.ts b/src/model/UnreleasedLock.ts
new file mode 100644
index 0000000..0be47b2
--- /dev/null
+++ b/src/model/UnreleasedLock.ts
@@ -0,0 +1,6 @@
+import type { Pix } from "./Pix";
+
+export type UnreleasedLock = {
+  lockID: string;
+  pix: Pix;
+};
\ No newline at end of file

From 2ea9f18cc179bd9d931a4513a68d1203175e155a Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 10 Feb 2023 16:27:55 -0300
Subject: [PATCH 3/9] Add logic to check for unreleased locks on homeview

---
 src/components/QrCodeComponent.vue |  5 ----
 src/views/HomeView.vue             | 42 ++++++++++++++++++++++++------
 2 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index 7ed347a..cf94576 100644
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -154,11 +154,6 @@ 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/views/HomeView.vue b/src/views/HomeView.vue
index 820d7c3..c92b1f9 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,7 +2,7 @@
 import SearchComponent from "@/components/SearchComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useEtherStore } from "@/store/ether";
 import QrCodeComponent from "@/components/QrCodeComponent.vue";
 import CustomModal from "@/components/CustomModal.vue";
@@ -11,6 +11,7 @@ import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import {
   updateWalletStatus,
   listReleaseTransactionByWalletAddress,
+  checkUnreleasedLocks,
 } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
 import type { Event } from "ethers";
@@ -26,13 +27,13 @@ const etherStore = useEtherStore();
 etherStore.setSellerView(false);
 
 // States
-const { loadingLock, walletAddress } = storeToRefs(etherStore);
+const { loadingLock, walletAddress, networkName} = storeToRefs(etherStore);
 const flowStep = ref<Step>(Step.Search);
 const pixTarget = ref<number>();
 const tokenAmount = ref<number>();
-const _lockID = ref<string>("");
+const lockID = ref<string>("");
 const loadingRelease = ref<boolean>(false);
-const showModal = ref<boolean>(true);
+const showModal = ref<boolean>(false);
 const lastWalletReleaseTransactions = ref<Event[]>([]);
 
 const confirmBuyClick = async (
@@ -49,8 +50,8 @@ const confirmBuyClick = async (
     etherStore.setLoadingLock(true);
 
     await addLock(selectedDeposit.seller, selectedDeposit.token, tokenValue)
-      .then((lockID) => {
-        _lockID.value = lockID;
+      .then((_lockID) => {
+        lockID.value = _lockID;
       })
       .catch((err) => {
         console.log(err);
@@ -65,12 +66,12 @@ const releaseTransaction = async (e2eId: string) => {
   flowStep.value = Step.List;
   loadingRelease.value = true;
 
-  if (_lockID.value && tokenAmount.value && pixTarget.value) {
+  if (lockID.value && tokenAmount.value && pixTarget.value) {
     const release = await releaseLock(
       pixTarget.value,
       tokenAmount.value,
       e2eId,
-      _lockID.value
+      lockID.value
     );
     release.wait();
 
@@ -86,6 +87,31 @@ const releaseTransaction = async (e2eId: string) => {
   }
 };
 
+const checkForUnreleasedLocks = async () => {
+  const walletLocks = await checkUnreleasedLocks(walletAddress.value);
+  if (walletLocks) {
+    lockID.value = walletLocks.lockID;
+    tokenAmount.value = walletLocks.pix.value;
+    pixTarget.value = Number(walletLocks.pix.pixKey);
+    showModal.value = true;
+  } else {
+    flowStep.value = Step.Search;
+    showModal.value = false;
+  }
+}
+
+if (walletAddress){
+  await checkForUnreleasedLocks();
+}
+
+watch(walletAddress, async () => {
+  await checkForUnreleasedLocks();
+});
+
+watch(networkName, async () => {
+  await checkForUnreleasedLocks();
+});
+
 onMounted(async () => {
   await getNetworksLiquidity();
 });

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 4/9] 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();

From 3346b96f18f555b2bc7d1bc2cc4cec19cdc3c2e0 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Fri, 10 Feb 2023 17:09:11 -0300
Subject: [PATCH 5/9] Fix test cases and improve test from custom modal

---
 .../{ => CustomModal}/CustomModal.vue         |  0
 .../CustomModal/__tests__/CustomModal.spec.ts | 27 ++++++++++++++++
 src/components/QrCodeComponent.vue            |  8 ++---
 src/views/HomeView.vue                        | 31 +++++++++----------
 4 files changed, 46 insertions(+), 20 deletions(-)
 rename src/components/{ => CustomModal}/CustomModal.vue (100%)
 create mode 100644 src/components/CustomModal/__tests__/CustomModal.spec.ts

diff --git a/src/components/CustomModal.vue b/src/components/CustomModal/CustomModal.vue
similarity index 100%
rename from src/components/CustomModal.vue
rename to src/components/CustomModal/CustomModal.vue
diff --git a/src/components/CustomModal/__tests__/CustomModal.spec.ts b/src/components/CustomModal/__tests__/CustomModal.spec.ts
new file mode 100644
index 0000000..3cb723b
--- /dev/null
+++ b/src/components/CustomModal/__tests__/CustomModal.spec.ts
@@ -0,0 +1,27 @@
+import { mount } from "@vue/test-utils";
+import CustomModal from "../CustomModal.vue";
+
+describe("CustomModal test", () => {
+  test("Test custom modal when receive is redirect modal props as false", () => {
+    const wrapper = mount(CustomModal, {
+      props: {
+        isRedirectModal: false,
+      },
+    });
+
+    expect(wrapper.html()).toContain("ATENÇÃO!");
+    expect(wrapper.html()).toContain("Entendi");
+  });
+
+  test("Test custom modal when receive is redirect modal props as true", () => {
+    const wrapper = mount(CustomModal, {
+      props: {
+        isRedirectModal: true,
+      },
+    });
+
+    expect(wrapper.html()).toContain("Retomar a última compra?");
+    expect(wrapper.html()).toContain("Não");
+    expect(wrapper.html()).toContain("Sim");
+  });
+});
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index 7ed347a..3321347 100644
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { pix } from "../utils/QrCodePix";
+import { pix } from "@/utils/QrCodePix";
 import { ref } from "vue";
 import { debounce } from "@/utils/debounce";
-import CustomButton from "./CustomButton/CustomButton.vue";
-import CustomModal from "./CustomModal.vue";
-import api from "../services/index";
+import CustomButton from "@/components/CustomButton/CustomButton.vue";
+import CustomModal from "@/components//CustomModal/CustomModal.vue";
+import api from "@/services/index";
 
 // props and store references
 const props = defineProps({
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 82fdc0d..907856a 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,16 +2,15 @@
 import SearchComponent from "@/components/SearchComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
-import { ref, onMounted, watch } from "vue";
+import { ref, onMounted } from "vue";
 import { useEtherStore } from "@/store/ether";
 import QrCodeComponent from "@/components/QrCodeComponent.vue";
-import CustomModal from "@/components/CustomModal.vue";
+import CustomModal from "@/components/CustomModal/CustomModal.vue";
 import { storeToRefs } from "pinia";
 import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import {
   updateWalletStatus,
   listReleaseTransactionByWalletAddress,
-  checkUnreleasedLocks,
 } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
 import type { Event } from "ethers";
@@ -27,7 +26,7 @@ const etherStore = useEtherStore();
 etherStore.setSellerView(false);
 
 // States
-const { loadingLock, walletAddress, networkName } = storeToRefs(etherStore);
+const { loadingLock, walletAddress } = storeToRefs(etherStore);
 const flowStep = ref<Step>(Step.Search);
 const pixTarget = ref<number>();
 const tokenAmount = ref<number>();
@@ -87,18 +86,18 @@ const releaseTransaction = async (e2eId: string) => {
   }
 };
 
-const checkForUnreleasedLocks = async () => {
-  const walletLocks = await checkUnreleasedLocks(walletAddress.value);
-  if (walletLocks) {
-    lockID.value = walletLocks.lockID;
-    tokenAmount.value = walletLocks.pix.value;
-    pixTarget.value = Number(walletLocks.pix.pixKey);
-    showModal.value = true;
-  } else {
-    flowStep.value = Step.Search;
-    showModal.value = false;
-  }
-};
+// const checkForUnreleasedLocks = async () => {
+//   const walletLocks = await checkUnreleasedLocks(walletAddress.value);
+//   if (walletLocks) {
+//     lockID.value = walletLocks.lockID;
+//     tokenAmount.value = walletLocks.pix.value;
+//     pixTarget.value = Number(walletLocks.pix.pixKey);
+//     showModal.value = true;
+//   } else {
+//     flowStep.value = Step.Search;
+//     showModal.value = false;
+//   }
+// };
 
 // if (walletAddress) {
 //   await checkForUnreleasedLocks();

From c65a885309867056cc0f97817c1d9c225b769efd Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Mon, 13 Feb 2023 14:44:40 -0300
Subject: [PATCH 6/9] add rule to only show warn modal when window width is
 under 500px

---
 src/components/CustomModal/CustomModal.vue |  4 ++--
 src/components/QrCodeComponent.vue         | 22 ++++++++++++++++++----
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/src/components/CustomModal/CustomModal.vue b/src/components/CustomModal/CustomModal.vue
index 4e165a8..f68de25 100644
--- a/src/components/CustomModal/CustomModal.vue
+++ b/src/components/CustomModal/CustomModal.vue
@@ -71,8 +71,8 @@ if (props.isRedirectModal) {
   display: flex !important;
   justify-content: center;
   align-items: center;
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
 }
 
 .modal {
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index 3321347..20de029 100644
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { pix } from "@/utils/QrCodePix";
-import { ref } from "vue";
+import { onMounted, onUnmounted, ref } from "vue";
 import { debounce } from "@/utils/debounce";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import CustomModal from "@/components//CustomModal/CustomModal.vue";
@@ -12,11 +12,12 @@ const props = defineProps({
   tokenValue: Number,
 });
 
+const windowSize = ref<number>(window.innerWidth);
 const qrCode = ref<string>("");
 const qrCodePayload = ref<string>("");
 const isPixValid = ref<boolean>(false);
 const isCodeInputEmpty = ref<boolean>(true);
-const showModal = ref<boolean>(true);
+const showWarnModal = ref<boolean>(true);
 const e2eId = ref<string>("");
 
 // Emits
@@ -68,6 +69,19 @@ const validatePix = async (): Promise<void> => {
     isPixValid.value = false;
   }
 };
+
+onMounted(() => {
+  window.addEventListener(
+    "resize",
+    () => (windowSize.value = window.innerWidth)
+  );
+});
+onUnmounted(() => {
+  window.removeEventListener(
+    "resize",
+    () => (windowSize.value = window.innerWidth)
+  );
+});
 </script>
 
 <template>
@@ -155,8 +169,8 @@ const validatePix = async (): Promise<void> => {
       />
     </div>
     <CustomModal
-      v-if="showModal"
-      @close-modal="showModal = false"
+      v-if="showWarnModal && windowSize < 500"
+      @close-modal="showWarnModal = false"
       :isRedirectModal="false"
     />
   </div>

From b181d380ebb2cb36db74f6c94aebfb42fb50a455 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Wed, 15 Feb 2023 15:14:47 -0300
Subject: [PATCH 7/9] Add correct implementation to check unreleased lock using
 getLocksStatus abi function

---
 src/blockchain/addresses.ts        |  8 ++---
 src/blockchain/events.ts           | 10 ++++---
 src/blockchain/wallet.ts           | 18 ++++++-----
 src/components/QrCodeComponent.vue |  2 +-
 src/views/HomeView.vue             | 48 ++++++++++++++++--------------
 src/views/SellerView.vue           |  5 +++-
 6 files changed, 51 insertions(+), 40 deletions(-)

diff --git a/src/blockchain/addresses.ts b/src/blockchain/addresses.ts
index 4619322..ef486b5 100644
--- a/src/blockchain/addresses.ts
+++ b/src/blockchain/addresses.ts
@@ -1,7 +1,7 @@
 import { useEtherStore } from "@/store/ether";
 import { NetworkEnum } from "@/model/NetworkEnum";
 
-const getTokenAddress = (): string => {
+const getTokenAddress = (network?: NetworkEnum): string => {
   const etherStore = useEtherStore();
 
   const possibleTokenAddresses: { [key: string]: string } = {
@@ -9,10 +9,10 @@ const getTokenAddress = (): string => {
     Polygon: "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
   };
 
-  return possibleTokenAddresses[etherStore.networkName];
+  return possibleTokenAddresses[network ? network : etherStore.networkName];
 };
 
-const getP2PixAddress = (): string => {
+const getP2PixAddress = (network?: NetworkEnum): string => {
   const etherStore = useEtherStore();
 
   const possibleP2PixAddresses: { [key: string]: string } = {
@@ -20,7 +20,7 @@ const getP2PixAddress = (): string => {
     Polygon: "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
   };
 
-  return possibleP2PixAddresses[etherStore.networkName];
+  return possibleP2PixAddresses[network ? network : etherStore.networkName];
 };
 
 const getProviderUrl = (): string => {
diff --git a/src/blockchain/events.ts b/src/blockchain/events.ts
index 503fd1f..75615a2 100644
--- a/src/blockchain/events.ts
+++ b/src/blockchain/events.ts
@@ -5,6 +5,8 @@ import p2pix from "../utils/smart_contract_files/P2PIX.json";
 import { formatEther } from "ethers/lib/utils";
 import { getContract } from "./provider";
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import { getP2PixAddress, getTokenAddress } from "./addresses";
+import { NetworkEnum } from "@/model/NetworkEnum";
 
 const getNetworksLiquidity = async (): Promise<void> => {
   const etherStore = useEtherStore();
@@ -20,23 +22,23 @@ const getNetworksLiquidity = async (): Promise<void> => {
   ); // mumbai provider
 
   const p2pContractGoerli = new ethers.Contract(
-    "0x2414817FF64A114d91eCFA16a834d3fCf69103d4",
+    getP2PixAddress(NetworkEnum.ethereum),
     p2pix.abi,
     goerliProvider
   );
   const p2pContractMumbai = new ethers.Contract(
-    "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
+    getP2PixAddress(NetworkEnum.polygon),
     p2pix.abi,
     mumbaiProvider
   );
 
   const depositListGoerli = await getValidDeposits(
-    "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00",
+    getTokenAddress(NetworkEnum.ethereum),
     p2pContractGoerli
   );
 
   const depositListMumbai = await getValidDeposits(
-    "0xC86042E9F2977C62Da8c9dDF7F9c40fde4796A29",
+    getTokenAddress(NetworkEnum.polygon),
     p2pContractMumbai
   );
 
diff --git a/src/blockchain/wallet.ts b/src/blockchain/wallet.ts
index e708e77..a4ac1fa 100644
--- a/src/blockchain/wallet.ts
+++ b/src/blockchain/wallet.ts
@@ -112,7 +112,7 @@ const listLockTransactionByWalletAddress = async (
   });
 };
 
-const checkUnreleasedLocks = async (
+const checkUnreleasedLock = async (
   walletAddress: string
 ): Promise<UnreleasedLock | undefined> => {
   const p2pContract = getContract();
@@ -124,18 +124,22 @@ const checkUnreleasedLocks = async (
   const lockStatus = await p2pContract.getLocksStatus(
     addedLocks.map((lock) => lock.args?.lockID)
   );
-  const unreleasedLockId = lockStatus.find((lock: any) => lock.status);
+  const unreleasedLockId = lockStatus[1].findIndex(
+    (lockStatus: number) => lockStatus == 1
+  );
 
-  if (unreleasedLockId) {
-    const lock = await p2pContract.mapLocks(unreleasedLockId);
+  console.log(lockStatus);
+  if (unreleasedLockId != -1) {
+    const _lockID = lockStatus[0][unreleasedLockId];
+    const lock = await p2pContract.mapLocks(_lockID);
 
     const pixTarget = lock.pixTarget;
     const amount = formatEther(lock?.amount);
-    pixData.pixKey = pixTarget;
+    pixData.pixKey = String(Number(pixTarget));
     pixData.value = Number(amount);
 
     return {
-      lockID: unreleasedLockId,
+      lockID: _lockID,
       pix: pixData,
     };
   }
@@ -148,5 +152,5 @@ export {
   listValidDepositTransactionsByWalletAddress,
   listAllTransactionByWalletAddress,
   listReleaseTransactionByWalletAddress,
-  checkUnreleasedLocks,
+  checkUnreleasedLock,
 };
diff --git a/src/components/QrCodeComponent.vue b/src/components/QrCodeComponent.vue
index 20de029..2e9357f 100644
--- a/src/components/QrCodeComponent.vue
+++ b/src/components/QrCodeComponent.vue
@@ -169,7 +169,7 @@ onUnmounted(() => {
       />
     </div>
     <CustomModal
-      v-if="showWarnModal && windowSize < 500"
+      v-if="showWarnModal && windowSize <= 500"
       @close-modal="showWarnModal = false"
       :isRedirectModal="false"
     />
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 907856a..0b8b932 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -2,7 +2,7 @@
 import SearchComponent from "@/components/SearchComponent.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
 import BuyConfirmedComponent from "@/components/BuyConfirmedComponent/BuyConfirmedComponent.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useEtherStore } from "@/store/ether";
 import QrCodeComponent from "@/components/QrCodeComponent.vue";
 import CustomModal from "@/components/CustomModal/CustomModal.vue";
@@ -11,6 +11,7 @@ import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import {
   updateWalletStatus,
   listReleaseTransactionByWalletAddress,
+  checkUnreleasedLock,
 } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
 import type { Event } from "ethers";
@@ -26,7 +27,7 @@ const etherStore = useEtherStore();
 etherStore.setSellerView(false);
 
 // States
-const { loadingLock, walletAddress } = storeToRefs(etherStore);
+const { loadingLock, walletAddress, networkName } = storeToRefs(etherStore);
 const flowStep = ref<Step>(Step.Search);
 const pixTarget = ref<number>();
 const tokenAmount = ref<number>();
@@ -86,30 +87,31 @@ const releaseTransaction = async (e2eId: string) => {
   }
 };
 
-// const checkForUnreleasedLocks = async () => {
-//   const walletLocks = await checkUnreleasedLocks(walletAddress.value);
-//   if (walletLocks) {
-//     lockID.value = walletLocks.lockID;
-//     tokenAmount.value = walletLocks.pix.value;
-//     pixTarget.value = Number(walletLocks.pix.pixKey);
-//     showModal.value = true;
-//   } else {
-//     flowStep.value = Step.Search;
-//     showModal.value = false;
-//   }
-// };
+const checkForUnreleasedLocks = async (): Promise<void> => {
+  const walletLocks = await checkUnreleasedLock(walletAddress.value);
+  console.log(walletLocks);
+  if (walletLocks) {
+    lockID.value = walletLocks.lockID;
+    tokenAmount.value = walletLocks.pix.value;
+    pixTarget.value = Number(walletLocks.pix.pixKey);
+    showModal.value = true;
+  } else {
+    flowStep.value = Step.Search;
+    showModal.value = false;
+  }
+};
 
-// if (walletAddress) {
-//   await checkForUnreleasedLocks();
-// }
+if (walletAddress.value) {
+  await checkForUnreleasedLocks();
+}
 
-// watch(walletAddress, async () => {
-//   await checkForUnreleasedLocks();
-// });
+watch(walletAddress, async () => {
+  await checkForUnreleasedLocks();
+});
 
-// watch(networkName, async () => {
-//   await checkForUnreleasedLocks();
-// });
+watch(networkName, async () => {
+  if (walletAddress.value) await checkForUnreleasedLocks();
+});
 
 onMounted(async () => {
   await getNetworksLiquidity();
diff --git a/src/views/SellerView.vue b/src/views/SellerView.vue
index 97dc494..ac67dc5 100644
--- a/src/views/SellerView.vue
+++ b/src/views/SellerView.vue
@@ -23,7 +23,10 @@ const offerValue = ref<string>("");
 const pixKeyBuyer = ref<string>("");
 
 // Verificar tipagem
-const approveOffer = async (args: { offer: string; postProcessedPixKey: string }) => {
+const approveOffer = async (args: {
+  offer: string;
+  postProcessedPixKey: string;
+}) => {
   loading.value = true;
   try {
     offerValue.value = args.offer;

From b07e4ca97d7b9385eb37603b1d46c8f46dd72e16 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Wed, 15 Feb 2023 15:17:05 -0300
Subject: [PATCH 8/9] Fix address tests with new smart contract address

---
 src/blockchain/__tests__/addresses.spec.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/blockchain/__tests__/addresses.spec.ts b/src/blockchain/__tests__/addresses.spec.ts
index 843e1f1..ed768c0 100644
--- a/src/blockchain/__tests__/addresses.spec.ts
+++ b/src/blockchain/__tests__/addresses.spec.ts
@@ -55,7 +55,7 @@ describe("addresses.ts functions", () => {
     const etherStore = useEtherStore();
     etherStore.setNetworkName(NetworkEnum.ethereum);
     expect(getP2PixAddress()).toBe(
-      "0xefa5cE4351cda51192509cf8De7d8881ADAE95DD"
+      "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
     );
   });
 
@@ -63,13 +63,13 @@ describe("addresses.ts functions", () => {
     const etherStore = useEtherStore();
     etherStore.setNetworkName(NetworkEnum.polygon);
     expect(getP2PixAddress()).toBe(
-      "0xA9258eBb157E4cf5e756b77FDD0DF09C2F73240b"
+      "0x4A2886EAEc931e04297ed336Cc55c4eb7C75BA00"
     );
   });
 
   it("getP2PixAddress Default", () => {
     expect(getP2PixAddress()).toBe(
-      "0xefa5cE4351cda51192509cf8De7d8881ADAE95DD"
+      "0x2414817FF64A114d91eCFA16a834d3fCf69103d4"
     );
   });
 

From 2968b6f7ee006da34026d7bb5ff44fa348e56723 Mon Sep 17 00:00:00 2001
From: RcleydsonR <rafael.cleydson@gmail.com>
Date: Wed, 15 Feb 2023 15:26:11 -0300
Subject: [PATCH 9/9] Update imports with alias @  that references src folder

---
 src/App.vue                                          | 2 +-
 src/blockchain/buyerMethods.ts                       | 2 +-
 src/blockchain/events.ts                             | 2 +-
 src/blockchain/provider.ts                           | 2 +-
 src/blockchain/wallet.ts                             | 5 +----
 src/components/SellerSteps/SellerSearchComponent.vue | 2 +-
 src/router/index.ts                                  | 6 +++---
 src/views/SellerView.vue                             | 6 +++---
 8 files changed, 12 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index cbdd5c7..176d6a0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import TopBar from "./components/TopBar/TopBar.vue";
+import TopBar from "@/components/TopBar/TopBar.vue";
 </script>
 
 <template>
diff --git a/src/blockchain/buyerMethods.ts b/src/blockchain/buyerMethods.ts
index 5c5890b..883cb16 100644
--- a/src/blockchain/buyerMethods.ts
+++ b/src/blockchain/buyerMethods.ts
@@ -3,7 +3,7 @@ import { useEtherStore } from "@/store/ether";
 import { getContract, getProvider } from "./provider";
 import { getP2PixAddress, getTokenAddress } from "./addresses";
 
-import p2pix from "../utils/smart_contract_files/P2PIX.json";
+import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 
 import { BigNumber, ethers } from "ethers";
 import { parseEther } from "ethers/lib/utils";
diff --git a/src/blockchain/events.ts b/src/blockchain/events.ts
index 75615a2..59608f6 100644
--- a/src/blockchain/events.ts
+++ b/src/blockchain/events.ts
@@ -1,7 +1,7 @@
 import { useEtherStore } from "@/store/ether";
 import { Contract, ethers } from "ethers";
 
-import p2pix from "../utils/smart_contract_files/P2PIX.json";
+import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 import { formatEther } from "ethers/lib/utils";
 import { getContract } from "./provider";
 import type { ValidDeposit } from "@/model/ValidDeposit";
diff --git a/src/blockchain/provider.ts b/src/blockchain/provider.ts
index 63bac1a..08448e7 100644
--- a/src/blockchain/provider.ts
+++ b/src/blockchain/provider.ts
@@ -1,6 +1,6 @@
 import { useEtherStore } from "@/store/ether";
 
-import p2pix from "../utils/smart_contract_files/P2PIX.json";
+import p2pix from "@/utils/smart_contract_files/P2PIX.json";
 
 import { updateWalletStatus } from "./wallet";
 import {
diff --git a/src/blockchain/wallet.ts b/src/blockchain/wallet.ts
index a4ac1fa..828a5eb 100644
--- a/src/blockchain/wallet.ts
+++ b/src/blockchain/wallet.ts
@@ -3,7 +3,7 @@ import { useEtherStore } from "@/store/ether";
 import { getContract, getProvider } from "./provider";
 import { getTokenAddress, possibleChains } from "./addresses";
 
-import mockToken from "../utils/smart_contract_files/MockToken.json";
+import mockToken from "@/utils/smart_contract_files/MockToken.json";
 
 import { ethers, type Event } from "ethers";
 import { formatEther } from "ethers/lib/utils";
@@ -128,7 +128,6 @@ const checkUnreleasedLock = async (
     (lockStatus: number) => lockStatus == 1
   );
 
-  console.log(lockStatus);
   if (unreleasedLockId != -1) {
     const _lockID = lockStatus[0][unreleasedLockId];
     const lock = await p2pContract.mapLocks(_lockID);
@@ -143,8 +142,6 @@ const checkUnreleasedLock = async (
       pix: pixData,
     };
   }
-
-  return;
 };
 
 export {
diff --git a/src/components/SellerSteps/SellerSearchComponent.vue b/src/components/SellerSteps/SellerSearchComponent.vue
index dac415e..d26cb0c 100644
--- a/src/components/SellerSteps/SellerSearchComponent.vue
+++ b/src/components/SellerSteps/SellerSearchComponent.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref } from "vue";
-import CustomButton from "../CustomButton/CustomButton.vue";
+import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
 import { decimalCount } from "@/utils/decimalCount";
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 43b0186..db7978c 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -1,7 +1,7 @@
 import { createRouter, createWebHistory } from "vue-router";
-import HomeView from "../views/HomeView.vue";
-import FaqView from "../views/FaqView.vue";
-import ManageBidsView from "../views/ManageBidsView.vue";
+import HomeView from "@/views/HomeView.vue";
+import FaqView from "@/views/FaqView.vue";
+import ManageBidsView from "@/views/ManageBidsView.vue";
 import SellerView from "@/views/SellerView.vue";
 
 const router = createRouter({
diff --git a/src/views/SellerView.vue b/src/views/SellerView.vue
index ac67dc5..167e3eb 100644
--- a/src/views/SellerView.vue
+++ b/src/views/SellerView.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import WantSellComponent from "../components/SellerSteps/WantSellComponent.vue";
-import SendNetwork from "../components/SellerSteps/SendNetwork.vue";
+import WantSellComponent from "@/components/SellerSteps/WantSellComponent.vue";
+import SendNetwork from "@/components/SellerSteps/SendNetwork.vue";
 import LoadingComponent from "@/components/LoadingComponent/LoadingComponent.vue";
-import { approveTokens, addDeposit } from "../blockchain/sellerMethods";
+import { approveTokens, addDeposit } from "@/blockchain/sellerMethods";
 
 import { ref } from "vue";
 import { useEtherStore } from "@/store/ether";