add continue button on manage bids that allow user to continue lock and release it, also fix some responsive points

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

src/blockchain/events.ts

@@ -7,6 +7,8 @@ import { getContract } from "./provider";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { getP2PixAddress, getTokenAddress } from "./addresses";
 import { NetworkEnum } from "@/model/NetworkEnum";
+import type { UnreleasedLock } from "@/model/UnreleasedLock";
+import type { Pix } from "@/model/Pix";
 
 const getNetworksLiquidity = async (): Promise<void> => {
   const etherStore = useEtherStore();
@@ -100,4 +102,25 @@ const getValidDeposits = async (
   return Object.values(depositList);
 };
 
-export { getValidDeposits, getNetworksLiquidity };
+const getUnreleasedLockById = async (
+  lockID: string
+): Promise<UnreleasedLock> => {
+  const p2pContract = getContract();
+  const pixData: Pix = {
+    pixKey: "",
+  };
+
+  const lock = await p2pContract.mapLocks(lockID);
+
+  const pixTarget = lock.pixTarget;
+  const amount = formatEther(lock?.amount);
+  pixData.pixKey = String(Number(pixTarget));
+  pixData.value = Number(amount);
+
+  return {
+    lockID: lockID,
+    pix: pixData,
+  };
+};
+
+export { getValidDeposits, getNetworksLiquidity, getUnreleasedLockById };

src/blockchain/wallet.ts

@@ -80,6 +80,9 @@ const filterLockStatus = async (
         transactionHash: transaction.transactionHash
           ? transaction.transactionHash
           : "",
+        transactionID: transaction.args?.lockID
+          ? String(transaction.args?.lockID)
+          : "",
       };
 
       return tx;

src/components/ListingComponent/ListingComponent.vue

@@ -174,7 +174,7 @@ showInitialItems();
           <p class="text-xl leading-7 font-semibold text-gray-900">
             {{ getRemaining() }} BRZ
           </p>
-          <div class="flex gap-2 w-32 sm:w-44" v-if="activeLockAmount != 0">
+          <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)} BRZ em lock`
             }}</span>
@@ -272,22 +272,23 @@ showInitialItems();
       :key="item.blockNumber"
     >
       <div class="item-container">
-        <div>
+        <div class="flex flex-col self-start">
-          <p class="text-sm leading-5 font-medium text-gray-600">
+          <span class="text-xs sm:text-sm leading-5 font-medium text-gray-600">
             {{ getEventName(item.event) }}
-          </p>
+          </span>
-          <p class="text-xl leading-7 font-semibold text-gray-900">
+          <span
+            class="text-xl sm:text-xl leading-7 font-semibold text-gray-900"
+          >
             {{ item.amount }}
             BRZ
-          </p>
+          </span>
-          <p class="text-xs leading-4 font-medium text-gray-600"></p>
         </div>
         <div>
           <div
             class="bg-amber-300 status-text"
             v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1"
           >
-            Ativo
+            Em Aberto
           </div>
           <div
             class="bg-[#94A3B8] status-text"
@@ -305,11 +306,30 @@ showInitialItems();
             Finalizado
           </div>
           <div
-            class="flex gap-2 cursor-pointer items-center justify-self-center"
+            class="flex gap-2 cursor-pointer items-center justify-self-center w-full"
             @click="openEtherscanUrl(item.transactionHash)"
+            v-if="getEventName(item.event) != 'Reserva' || item.lockStatus != 1"
           >
             <span class="last-release-info">{{ getExplorer() }}</span>
-            <img alt="Redirect image" src="@/assets/redirect.svg" />
+            <img
+              alt="Redirect image"
+              src="@/assets/redirect.svg"
+              class="w-3 h-3 sm:w-4 sm:h-4"
+            />
+          </div>
+          <div
+            class="flex gap-2 justify-self-center w-full"
+            v-if="getEventName(item.event) == 'Reserva' && item.lockStatus == 1"
+          >
+            <RouterLink
+              :to="{
+                name: 'home',
+                force: true,
+                state: { lockID: item.transactionID },
+              }"
+              class="router-button"
+              >Continuar</RouterLink
+            >
           </div>
         </div>
       </div>
@@ -358,7 +378,7 @@ p {
 }
 
 .status-text {
-  @apply text-base font-medium text-gray-900 rounded-lg text-center mb-2 p-1;
+  @apply text-xs sm:text-base font-medium text-gray-900 rounded-lg text-center mb-2 px-2 py-1 mt-4;
 }
 .text {
   @apply text-white text-center;
@@ -373,13 +393,17 @@ p {
 }
 
 .last-release-info {
-  @apply font-medium text-sm sm:text-base text-gray-900 justify-self-center;
+  @apply font-medium text-xs sm:text-sm text-gray-900 justify-self-center;
 }
 
 .tooltip {
   @apply bg-white text-gray-900 font-medium text-xs md:text-base px-3 py-2 rounded border-2 border-emerald-500 left-5 top-[-3rem];
 }
 
+.router-button {
+  @apply rounded-lg border-amber-300 border-2 px-3 py-2 text-gray-900 font-semibold sm:text-base text-xs hover:bg-transparent w-full text-center;
+}
+
 .withdraw-button {
   opacity: v-bind(withdrawButtonOpacity);
   cursor: v-bind(withdrawButtonCursor);

src/model/WalletTransaction.ts

@@ -7,4 +7,5 @@ export type WalletTransaction = {
   event: string;
   lockStatus: number;
   transactionHash: string;
+  transactionID?: string;
 };

src/router/index.ts

@@ -11,6 +11,12 @@ const router = createRouter({
       path: "/",
       name: "home",
       component: HomeView,
+      props: true,
+    },
+    {
+      path: "/:lockID",
+      name: "redirect buy",
+      component: HomeView,
     },
     {
       path: "/seller",

src/views/HomeView.vue

@@ -10,6 +10,7 @@ import { addLock, releaseLock } from "@/blockchain/buyerMethods";
 import { updateWalletStatus, checkUnreleasedLock } from "@/blockchain/wallet";
 import { getNetworksLiquidity } from "@/blockchain/events";
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import { getUnreleasedLockById } from "@/blockchain/events";
 import CustomAlert from "@/components/CustomAlert/CustomAlert.vue";
 
 enum Step {
@@ -30,6 +31,7 @@ const lockID = ref<string>("");
 const loadingRelease = ref<boolean>(false);
 const showModal = ref<boolean>(false);
 const showBuyAlert = ref<boolean>(false);
+const paramLockID = window.history.state?.lockID;
 
 const confirmBuyClick = async (
   selectedDeposit: ValidDeposit,
@@ -89,17 +91,30 @@ const checkForUnreleasedLocks = async (): Promise<void> => {
   }
 };
 
-watch(walletAddress, async () => {
+if (paramLockID) {
-  await checkForUnreleasedLocks();
+  const lockToRedirect = await getUnreleasedLockById(paramLockID as string);
-});
+  if (lockToRedirect) {
+    lockID.value = lockToRedirect.lockID;
+    tokenAmount.value = lockToRedirect.pix.value;
+    pixTarget.value = Number(lockToRedirect.pix.pixKey);
+    flowStep.value = Step.Buy;
+  } else {
+    flowStep.value = Step.Search;
+  }
+} else {
+  watch(walletAddress, async () => {
+    await checkForUnreleasedLocks();
+  });
 
-watch(networkName, async () => {
+  watch(networkName, async () => {
-  if (walletAddress.value) await checkForUnreleasedLocks();
+    if (walletAddress.value) await checkForUnreleasedLocks();
-});
+  });
+}
 
 onMounted(async () => {
   await getNetworksLiquidity();
-  if (walletAddress.value) await checkForUnreleasedLocks();
+  if (walletAddress.value && !paramLockID) await checkForUnreleasedLocks();
+  window.history.state.lockID = "";
 });
 </script>