update smart contract files and implement mapDeposits method to return specific info about a deposit

Co-authored-by: brunoedcf <brest.dallacosta@outlook.com>

src/utils/blockchain.ts

@@ -1,5 +1,5 @@
 import { useEtherStore } from "@/store/ether";
-import { ethers } from "ethers";
+import { BigNumber, ethers } from "ethers";
 
 // smart contract imports
 import mockToken from "./smart_contract_files/MockToken.json";
@@ -55,13 +55,9 @@ const connectProvider = async () => {
 
 const splitTokens = async () => {
   const etherStore = useEtherStore();
-  const window_ = window as any;
+  const provider = getProvider();
-  const connection = window_.ethereum;
+  if (!provider) return;
-  let provider: ethers.providers.Web3Provider | null = null;
 
-  if (!connection) return;
-
-  provider = new ethers.providers.Web3Provider(connection);
   const signer = provider.getSigner();
   const contract = new ethers.Contract(addresses.token, mockToken.abi, signer);
 
@@ -73,27 +69,23 @@ const splitTokens = async () => {
   
 };
 
-const mockDeposit = async () => {
+const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
   const etherStore = useEtherStore();
-  const window_ = window as any;
+  const provider = getProvider();
-  const connection = window_.ethereum;
+  if (!provider) return;
-  let provider: ethers.providers.Web3Provider | null = null;
 
-  if (!connection) return;
-
-  provider = new ethers.providers.Web3Provider(connection);
   const signer = provider.getSigner();
 
   const tokenContract = new ethers.Contract(addresses.token, mockToken.abi, signer);
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
   // first get the approval
-  const apprv = await tokenContract.approve(addresses.p2pix, ethers.utils.parseEther("1000.0"));
+  const apprv = await tokenContract.approve(addresses.p2pix, ethers.utils.parseEther(tokenQty));
   await apprv.wait();
 
+
   // deposit
-  const mockPixKey = "00011122233";
+  const deposit = await p2pContract.deposit(addresses.token, ethers.utils.parseEther(tokenQty), pixKey);
-  const deposit = await p2pContract.deposit(addresses.token, ethers.utils.parseEther("1000.0"), mockPixKey);
   await deposit.wait();
 
   updateWalletStatus(etherStore.walletAddress);
@@ -109,13 +101,9 @@ const mockDeposit = async () => {
 
 
 const countDeposit = async () => {
-  const window_ = window as any;
+  const provider = getProvider();
-  const connection = window_.ethereum;
+  if (!provider) return;
-  let provider: ethers.providers.Web3Provider | null = null;
 
-  if (!connection) return;
-
-  provider = new ethers.providers.Web3Provider(connection);
   const signer = provider.getSigner();
   const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
@@ -124,6 +112,18 @@ const countDeposit = async () => {
   console.log(Number(count))
 };
 
+const mapDeposits = async (depositId: BigNumber) => {
+  const provider = getProvider();
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+  const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  const deposit = await contract.mapDeposits(depositId);
+
+  console.log(deposit)
+};
+
 const formatEther = (balance: string) => {
   const formatted = ethers.utils.formatEther(balance);
   return formatted;
@@ -138,4 +138,4 @@ const getProvider = (): ethers.providers.Web3Provider | null => {
   return new ethers.providers.Web3Provider(connection);
 };
 
-export default { connectProvider, formatEther, splitTokens, mockDeposit, countDeposit };
+export default { connectProvider, formatEther, splitTokens, mockDeposit, countDeposit, mapDeposits };

src/utils/smart_contract_files/wallets.json

@@ -1,8 +1,6 @@
 {
     "wallets":[
         "0x70997970C51812dc3A010C7d01b50e0d17dc79C8",
-        "0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC",
+        "0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC"
-        "0x90F79bf6EB2c4f870365E785982E1f101E93b906",
-        "0x15d34AAf54267DB7D7c367839AAf71A00a2C6A65"
     ]
 }

src/views/MockView.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
+import type { BigNumber } from "ethers";
 import { storeToRefs } from "pinia";
+import { ref } from "vue";
 import { useEtherStore } from "../store/ether";
 import blockchain from "../utils/blockchain";
 
@@ -7,12 +9,16 @@ const etherStore = useEtherStore();
 
 const { walletAddress, balance, depositList } = storeToRefs(etherStore);
 
+const depositValue = ref<Number>();
+const depositPixKey = ref<string>("");
+
 const splitTokens = () => {
   blockchain.splitTokens();
 };
 
 const mockDeposit = () => {
-  blockchain.mockDeposit();
+  if(!depositValue.value || !depositPixKey.value) return;
+  blockchain.mockDeposit(depositValue.value.toString(), depositPixKey.value);
 };
 
 const countDeposit = () => {
@@ -29,6 +35,10 @@ const formatWalletAddress = (): string => {
   return `${initialText} ... ${finalText}`;
 };
 
+const mapDeposit = (depositId: BigNumber) => {
+  blockchain.mapDeposits(depositId)
+}
+
 const formatWalletBalance = (): string => {
   const formattedBalance = blockchain.formatEther(balance.value);
   const fixed = formattedBalance.substring(0, 8);
@@ -39,47 +49,77 @@ const formatWalletBalance = (): string => {
 
 <template>
   
-    <div class="flex gap-4 items-center">
+  <div class="page">
 
+    <div class="flex flex-col gap-4 justify-start items-start w-2/3">
       <button 
         type="button" 
-        class="p-2 rounded text-gray-50"
+        class="default-button"
         @click="countDeposit()"
       >
         Contar depósitos
       </button>
 
+      <div class="flex gap-4 w-full justify-between">
+        <input
+          type="number"
+          class="default-input"
+          placeholder="Quantidade de tokens"
+          v-model="depositValue"
+        />
+
+        <input
+          type="text"
+          class="default-input"
+          placeholder="Chave pix"
+          v-model="depositPixKey"
+        />
+        
         <button 
           type="button" 
-        class="p-2 rounded text-gray-50"
+          class="default-button"
           @click="mockDeposit()"
         >
           Mockar depósitos
         </button>
+      </div>
 
       <button 
         type="button" 
-        class="p-2 rounded text-gray-50"
+        class="default-button"
         @click="splitTokens()"
       >
         Dividir tokens
       </button>
-
     </div>
 
-    <br>
+    <ul class="flex flex-col justify-center items-center gap-4">
-    <br>
+      <li class="text-gray-900 font-semibold text-lg cursor-pointer border-2 border-amber-400 p-2 rounded-md bg-amber-200"  v-for="deposit in depositList" :key="deposit['blockNumber']" @click="mapDeposit(deposit['args']['depositID'])">{{deposit['args']['0']}} : MRBZ {{blockchain.formatEther(deposit['args']['amount'])}} </li>
-    <br>
-    <ul>
-      <center>
-        <li v-for="deposit in depositList" :key="deposit['blockNumber']">{{deposit['args']['0']}} : MRBZ {{blockchain.formatEther(deposit['args']['amount'])}} </li>
-      </center>
     </ul>
-
+  </div>
 </template>
 
 <style scoped>
 header {
   @apply flex flex-row justify-between w-full items-center;
 }
+
+.default-button{
+  @apply p-2 rounded border-2 border-amber-400 text-gray-50 font-extrabold text-base w-full
+}
+
+.default-input{
+  @apply border-none outline-none text-lg text-gray-900 w-64 p-2 rounded-lg
+}
+
+.page{
+  @apply flex gap-8 mt-24
+}
+
+@media (max-width: 1024px) {
+  .page {
+    @apply flex-wrap
+  }
+}
+
 </style>