withdraw integration

src/blockchain/buyerMethods.ts

@@ -1,7 +1,7 @@
 import { useEtherStore } from "@/store/ether";
 
 import { getContract, getProvider } from "./provider";
-import { getP2PixAddress } from "./addresses";
+import { getP2PixAddress, getTokenAddress } from "./addresses";
 
 import p2pix from "../utils/smart_contract_files/P2PIX.json";
 
@@ -84,15 +84,18 @@ const cancelDeposit = async (depositId: BigNumber): Promise<any> => {
   return cancel;
 };
 
-const withdrawDeposit = async (
-  depositId: BigNumber,
-  amount: string
-): Promise<any> => {
+const withdrawDeposit = async (amount: string): Promise<any> => {
   const contract = getContract();
 
-  const withdraw = await contract.withdraw(depositId, amount, []);
-  await withdraw.wait();
+  const withdraw = await contract.withdraw(
+    getTokenAddress(),
+    parseEther(String(amount)),
+    []
+  );
+  const with_rec = await withdraw.wait();
+  const [t] = with_rec.events;
 
+  console.log(t.args);
   return withdraw;
 };
 

src/blockchain/wallet.ts

@@ -64,11 +64,21 @@ const listAllTransactionByWalletAddress = async (
     filterReleasedLocks
   );
 
-  return [...eventsDeposits, ...eventsAddedLocks, ...eventsReleasedLocks].sort(
-    (a, b) => {
-      return b.blockNumber - a.blockNumber;
-    }
+  const filterWithdrawnDeposits = p2pContract.filters.DepositWithdrawn([
+    walletAddress,
+  ]);
+  const eventsWithdrawnDeposits = await p2pContract.queryFilter(
+    filterWithdrawnDeposits
   );
+
+  return [
+    ...eventsDeposits,
+    ...eventsAddedLocks,
+    ...eventsReleasedLocks,
+    ...eventsWithdrawnDeposits,
+  ].sort((a, b) => {
+    return b.blockNumber - a.blockNumber;
+  });
 };
 
 // get wallet's release transactions

src/components/ListingComponent/ListingComponent.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { withdrawDeposit } from "@/blockchain/buyerMethods";
 import { NetworkEnum } from "@/model/NetworkEnum";
 import type { ValidDeposit } from "@/model/ValidDeposit";
 import { useEtherStore } from "@/store/ether";
@@ -8,13 +9,36 @@ import { ref, watch } from "vue";
 
 // props
 const props = defineProps<{
+  depositList: (Event | ValidDeposit)[];
   walletTransactions: (Event | ValidDeposit)[];
   isManageMode: boolean;
 }>();
 
+const emit = defineEmits(["depositWithdrawn"]);
+
 const etherStore = useEtherStore();
 
 const itemsToShow = ref<(Event | ValidDeposit)[]>([]);
+const withdrawAmount = ref<string>("");
+
+const callWithdraw = async () => {
+  if (withdrawAmount.value) {
+    const withdraw = await withdrawDeposit(withdrawAmount.value);
+    if (withdraw) {
+      console.log(withdraw);
+      alert("Saque realizado!");
+      emit("depositWithdrawn");
+    }
+  }
+};
+
+const getRemaining = (): number => {
+  if (props.depositList instanceof Array) {
+    const deposit = props.depositList[0] as ValidDeposit;
+    return deposit ? deposit.remaining : 0;
+  }
+  return 0;
+};
 
 const getExplorer = (): string => {
   return etherStore.networkName == NetworkEnum.ethereum
@@ -56,6 +80,7 @@ const getEventName = (event: string | undefined): string => {
     DepositAdded: "Oferta",
     LockAdded: "Reserva",
     LockReleased: "Compra",
+    DepositWithdrawn: "Retirada",
   };
 
   return possibleEventName[event];
@@ -77,9 +102,6 @@ watch(props, async (): Promise<void> => {
         : props.walletTransactions;
 });
 
-//emits
-const emit = defineEmits(["withdrawDeposit"]);
-
 // initial itemsToShow valueb
 showInitialItems();
 </script>
@@ -92,20 +114,30 @@ showInitialItems();
           <p class="text-sm leading-5 font-medium text-gray-600">
             Saldo disponível
           </p>
-          <p class="text-xl leading-7 font-semibold text-gray-900">0 BRZ</p>
+          <p class="text-xl leading-7 font-semibold text-gray-900">
+            {{ getRemaining() }} BRZ
+          </p>
           <p class="text-xs leading-4 font-medium text-gray-600"></p>
         </div>
       </div>
       <div class="pt-5" v-if="props.isManageMode">
         <div class="py-2">
           <p class="text-sm leading-5 font-medium">Valor do saque</p>
-          <input type="number" name="" id="" placeholder="0" class="text-2xl" />
+          <input
+            type="number"
+            name=""
+            id=""
+            placeholder="0"
+            class="text-2xl"
+            v-model="withdrawAmount"
+          />
         </div>
 
         <hr class="pb-3" />
         <div class="flex justify-end items-center">
           <div
             class="flex gap-2 cursor-pointer items-center justify-self-center border-2 p-2 border-amber-300 rounded-md"
+            @click="callWithdraw"
           >
             <img alt="Withdraw image" src="@/assets/withdraw.svg" />
             <span class="last-release-info">Sacar</span>
@@ -138,7 +170,7 @@ showInitialItems();
             Finalizado
           </div>
           <div
-            v-if="!props.isManageMode"
+            v-if="props.isManageMode"
             class="flex gap-2 cursor-pointer items-center justify-self-center"
             @click="openEtherscanUrl((item as Event)?.transactionHash)"
           >
@@ -183,7 +215,7 @@ showInitialItems();
       </button>
       <span class="text-gray-300">
         ({{ itemsToShow.length }} de {{ props.walletTransactions.length }}
-        {{ isManageMode ? "ofertas" : "transações" }})
+        transações )
       </span>
     </div>
 

src/components/SellerSteps/WantSellComponent.vue

@@ -56,8 +56,9 @@ const handleButtonClick = async (
   offer: string,
   pixKey: string
 ): Promise<void> => {
-  console.log(postProcessKey(pixKey));
-  if (walletAddress.value) emit("approveTokens", { offer, pixKey });
+  const postProcessedPixKey = postProcessKey(pixKey);
+  if (walletAddress.value)
+    emit("approveTokens", { offer, postProcessedPixKey });
   else await connectProvider();
 };
 </script>

src/components/TopBar/TopBar.vue

@@ -284,14 +284,6 @@ onClickOutside(currencyRef, () => {
           >
             <div class="pl-4 mt-2">
               <div class="bg-white rounded-md z-10">
-                <div class="menu-button" @click="closeMenu()">
-                  <RouterLink to="/transaction_history" class="redirect_button">
-                    Histórico de transações
-                  </RouterLink>
-                </div>
-                <div class="w-full flex justify-center">
-                  <hr class="w-4/5" />
-                </div>
                 <div class="menu-button" @click="closeMenu()">
                   <RouterLink to="/manage_bids" class="redirect_button">
                     Gerenciar Ofertas
@@ -328,14 +320,6 @@ onClickOutside(currencyRef, () => {
           <div class="w-full flex justify-center">
             <hr class="w-4/5" />
           </div>
-          <div class="menu-button" @click="closeMenu()">
-            <RouterLink to="/transaction_history" class="redirect_button">
-              Histórico de transações
-            </RouterLink>
-          </div>
-          <div class="w-full flex justify-center">
-            <hr class="w-4/5" />
-          </div>
           <div class="menu-button" @click="closeMenu()">
             <RouterLink to="/manage_bids" class="redirect_button">
               Gerenciar Ofertas

src/router/index.ts

@@ -1,6 +1,5 @@
 import { createRouter, createWebHistory } from "vue-router";
 import HomeView from "../views/HomeView.vue";
-import TransactionHistoryView from "../views/TransactionHistoryView.vue";
 import FaqView from "../views/FaqView.vue";
 import ManageBidsView from "../views/ManageBidsView.vue";
 import SellerView from "@/views/SellerView.vue";
@@ -18,11 +17,6 @@ const router = createRouter({
       name: "seller",
       component: SellerView,
     },
-    {
-      path: "/transaction_history",
-      name: "transaction history",
-      component: TransactionHistoryView,
-    },
     {
       path: "/manage_bids",
       name: "manage bids",

src/views/ManageBidsView.vue

@@ -2,45 +2,69 @@
 import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
-import type { BigNumber } from "ethers";
 import { ref, watch, onMounted } from "vue";
-import { withdrawDeposit } from "@/blockchain/buyerMethods";
-import { listValidDepositTransactionsByWalletAddress } from "@/blockchain/wallet";
+import {
+  listValidDepositTransactionsByWalletAddress,
+  listAllTransactionByWalletAddress,
+} from "@/blockchain/wallet";
 import type { ValidDeposit } from "@/model/ValidDeposit";
+import type { Event } from "ethers";
 
 const etherStore = useEtherStore();
 
 const { walletAddress, networkName } = storeToRefs(etherStore);
 const depositList = ref<ValidDeposit[]>([]);
+const transactionsList = ref<(Event | ValidDeposit)[]>([]);
+
+const updateRemaining = async () => {
+  const walletDeposits = await listValidDepositTransactionsByWalletAddress(
+    walletAddress.value
+  );
+  depositList.value = walletDeposits;
+
+  const allUserTransactions = await listAllTransactionByWalletAddress(
+    walletAddress.value
+  );
+  transactionsList.value = allUserTransactions;
+};
 
 onMounted(async () => {
   if (walletAddress.value) {
     const walletDeposits = await listValidDepositTransactionsByWalletAddress(
       walletAddress.value
     );
+    console.log(walletDeposits);
+
+    const allUserTransactions = await listAllTransactionByWalletAddress(
+      walletAddress.value
+    );
+    console.log(allUserTransactions);
+
     if (walletDeposits) {
       depositList.value = walletDeposits;
     }
+    if (allUserTransactions) {
+      transactionsList.value = allUserTransactions;
+    }
   }
 });
 
-const handleWithDrawDeposit = async (token: BigNumber, index: number) => {
-  const fixedAmount = "1"; // Need to ask user for amount
-  const response = await withdrawDeposit(token, fixedAmount);
-  if (response) {
-    console.log("Token retirado com sucesso.");
-    depositList.value.splice(index, 1);
-  }
-};
-
-watch(walletAddress, async () => {
-  await listValidDepositTransactionsByWalletAddress(walletAddress.value)
+watch(walletAddress, async (newValue) => {
+  await listValidDepositTransactionsByWalletAddress(newValue)
     .then((res) => {
       if (res) depositList.value = res;
     })
     .catch(() => {
       depositList.value = [];
     });
+
+  await listAllTransactionByWalletAddress(newValue)
+    .then((res) => {
+      if (res) transactionsList.value = res;
+    })
+    .catch(() => {
+      transactionsList.value = [];
+    });
 });
 
 watch(networkName, async () => {
@@ -51,17 +75,26 @@ watch(networkName, async () => {
     .catch(() => {
       depositList.value = [];
     });
+
+  await listAllTransactionByWalletAddress(walletAddress.value)
+    .then((res) => {
+      if (res) transactionsList.value = res;
+    })
+    .catch(() => {
+      transactionsList.value = [];
+    });
 });
 </script>
 
 <template>
   <div class="page">
-    <div class="header">Gerenciar ofertas</div>
+    <div class="header">Gerenciar Ofertas</div>
     <div class="w-full max-w-4xl">
       <ListingComponent
-        :wallet-transactions="depositList"
+        :deposit-list="depositList"
+        :wallet-transactions="transactionsList"
         :is-manage-mode="true"
-        @withdraw-deposit="handleWithDrawDeposit"
+        @deposit-withdrawn="updateRemaining"
       ></ListingComponent>
     </div>
   </div>

src/views/TransactionHistoryView.vue

@@ -1,63 +0,0 @@
-<script setup lang="ts">
-import { useEtherStore } from "@/store/ether";
-import { storeToRefs } from "pinia";
-import { ref, watch, onMounted } from "vue";
-import ListingComponent from "@/components/ListingComponent/ListingComponent.vue";
-import { listAllTransactionByWalletAddress } from "@/blockchain/wallet";
-import type { Event } from "ethers";
-import type { ValidDeposit } from "@/model/ValidDeposit";
-
-const etherStore = useEtherStore();
-const { walletAddress, networkName } = storeToRefs(etherStore);
-const allUserTransactions = ref<(Event | ValidDeposit)[]>([]);
-
-onMounted(async () => {
-  if (walletAddress.value) {
-    await listAllTransactionByWalletAddress(walletAddress.value).then((res) => {
-      if (res) allUserTransactions.value = res;
-    });
-  }
-});
-
-watch(walletAddress, async (newValue) => {
-  await listAllTransactionByWalletAddress(newValue)
-    .then((res) => {
-      if (res) allUserTransactions.value = res;
-    })
-    .catch(() => {
-      allUserTransactions.value = [];
-    });
-});
-
-watch(networkName, async () => {
-  await listAllTransactionByWalletAddress(walletAddress.value)
-    .then((res) => {
-      if (res) allUserTransactions.value = res;
-    })
-    .catch(() => {
-      allUserTransactions.value = [];
-    });
-});
-</script>
-
-<template>
-  <div class="page">
-    <div class="header">Histórico de transações</div>
-    <div class="w-full max-w-4xl">
-      <ListingComponent
-        :wallet-transactions="allUserTransactions"
-        :is-manage-mode="false"
-      ></ListingComponent>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.page {
-  @apply flex flex-col gap-10 mt-20 w-full items-center;
-}
-
-.header {
-  @apply text-3xl text-white leading-9 font-bold justify-center flex;
-}
-</style>