Fix issues with locking and solicitation.

src/components/BuyConfirmedComponent/__tests__/BuyConfirmedComponent.spec.ts

@@ -1,12 +1,7 @@
 import { mount } from "@vue/test-utils";
 import BuyConfirmedComponent from "../BuyConfirmedComponent.vue";
-import { createPinia, setActivePinia } from "pinia";
 
 describe("BuyConfirmedComponent.vue", async () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
   const wrapper = mount(BuyConfirmedComponent, {
     props: {
       tokenAmount: 1,

src/components/CustomModal/CustomModal.vue

@@ -19,7 +19,7 @@ if (props.isRedirectModal) {
 <template>
   <div>
     <div
-      class="modal-overlay inset-0 fixed justify-center backdrop-blur-sm sm:backdrop-blur-none"
+      class="modal-overlay inset-0 fixed hidden md:block justify-center backdrop-blur-sm sm:backdrop-blur-none"
       v-if="!isRedirectModal"
     >
       <div class="modal px-5 text-center">

src/components/ListingComponent/ListingComponent.vue

@@ -7,7 +7,6 @@ import { ref, watch, onMounted } from "vue";
 import SpinnerComponent from "../SpinnerComponent.vue";
 import { decimalCount } from "@/utils/decimalCount";
 import { debounce } from "@/utils/debounce";
-import { getTokenByAddress } from "@/blockchain/addresses";
 import { useFloating, arrow, offset, flip, shift } from "@floating-ui/vue";
 
 const user = useUser();
@@ -174,12 +173,12 @@ showInitialItems();
             Saldo disponível
           </p>
           <p class="text-xl leading-7 font-semibold text-gray-900">
-            {{ getRemaining() }} {{ etherStore.selectedToken }}
+            {{ getRemaining() }} {{ user.selectedToken.value }}
           </p>
           <div class="flex gap-2 w-32 sm:w-56" v-if="activeLockAmount != 0">
             <span class="text-xs font-normal text-gray-400" ref="infoText">{{
               `com ${activeLockAmount.toFixed(2)} ${
-                etherStore.selectedToken
+                user.selectedToken.value
               } em lock`
             }}</span>
             <div
@@ -283,10 +282,10 @@ showInitialItems();
             class="text-xl sm:text-xl leading-7 font-semibold text-gray-900"
           >
             {{ item.amount }}
-            {{ getTokenByAddress(item.token) }}
+            <!-- {{ getTokenByAddress(item.token) }} -->
           </span>
         </div>
-        <div>
+        <div class="flex flex-col items-center justify-center">
           <div
             class="bg-amber-300 status-text"
             v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1"
@@ -409,6 +408,7 @@ p {
 }
 
 input[type="number"] {
+  appearance: textfield;
   -moz-appearance: textfield;
 }
 

src/components/QrCodeComponent.vue

@@ -1,28 +1,54 @@
 <script setup lang="ts">
-import { onMounted, onUnmounted, ref } from "vue";
+import { ref, onMounted } from "vue";
 import CustomButton from "@/components/CustomButton/CustomButton.vue";
 import CustomModal from "@/components//CustomModal/CustomModal.vue";
+import { createSolicitation, type Offer } from "@/utils/bbPay";
+import { getSellerParticipantId } from "@/blockchain/wallet";
+import { hexToString } from "viem";
+import { getUnreleasedLockById } from "@/blockchain/events";
+
+// Props
+interface Props {
+  lockID: string;
+}
+
+const props = defineProps<Props>();
 
-const windowSize = ref<number>(window.innerWidth);
 const qrCode = ref<string>("");
 const isPixValid = ref<boolean>(false);
 const showWarnModal = ref<boolean>(true);
 const releaseSignature = ref<string>("");
+const solicitationData = ref<any>(null);
 
 // Emits
 const emit = defineEmits(["pixValidated"]);
 
-onMounted(() => {
-  window.addEventListener(
-    "resize",
-    () => (windowSize.value = window.innerWidth)
-  );
-});
-onUnmounted(() => {
-  window.removeEventListener(
-    "resize",
-    () => (windowSize.value = window.innerWidth)
-  );
+onMounted(async () => {
+  try {
+    const { tokenAddress, sellerAddress, amount } = await getUnreleasedLockById(
+      props.lockID
+    );
+
+    const participantId = await getSellerParticipantId(
+      sellerAddress as `0x${string}`,
+      tokenAddress
+    );
+
+    const offer: Offer = {
+      amount,
+      sellerId: hexToString(participantId as `0x${string}`, { size: 32 }),
+    };
+
+    const response = await createSolicitation(offer);
+    solicitationData.value = response;
+
+    // Update qrCode if the response contains QR code data
+    if (response?.informacoesPIX?.textoQrCode) {
+      qrCode.value = response.informacoesPIX?.textoQrCode;
+    }
+  } catch (error) {
+    console.error("Error creating solicitation:", error);
+  }
 });
 </script>
 
@@ -65,7 +91,7 @@ onUnmounted(() => {
       />
     </div>
     <CustomModal
-      v-if="showWarnModal && windowSize <= 500"
+      v-if="showWarnModal"
       @close-modal="showWarnModal = false"
       :isRedirectModal="false"
     />
@@ -122,6 +148,7 @@ h2 {
 }
 
 input[type="number"] {
+  appearance: textfield;
   -moz-appearance: textfield;
 }
 

src/components/TopBar/__tests__/TopBar.spec.ts

@@ -1,15 +1,8 @@
-import { describe, it, expect, beforeEach } from "vitest";
+import { describe, it, expect } from "vitest";
 import { mount } from "@vue/test-utils";
 import TopBar from "../TopBar.vue";
-import { useUser } from "@/composables/useUser";
-
-import { createPinia, setActivePinia } from "pinia";
 
 describe("TopBar.vue", () => {
-  beforeEach(() => {
-    setActivePinia(createPinia());
-  });
-
   it("should render connect wallet button", () => {
     const wrapper = mount(TopBar);
     expect(wrapper.html()).toContain("Conectar carteira");
@@ -20,13 +13,6 @@ describe("TopBar.vue", () => {
     expect(wrapper.html()).toContain("Quero vender");
   });
 
-  it("should render button to change to seller view when in buyer screen", () => {
-    const user = useUser();
-    user.setSellerView(true);
-    const wrapper = mount(TopBar);
-    expect(wrapper.html()).toContain("Quero comprar");
-  });
-
   it("should render the P2Pix logo correctly", () => {
     const wrapper = mount(TopBar);
     const img = wrapper.findAll(".logo");