Merge branch 'search-tokens' into list-tokens

src/views/HomeView.vue

@@ -13,6 +13,12 @@ enum Step {
 const flowStep = ref<Step>(Step.Search)
 const tokenAmmount = ref()
 
+// (TO DO) Tirar isso tudo daqui
+// import p2pix from "../utils/smart_contract_files/P2PIX.json";
+// import addresses from "../utils/smart_contract_files/localhost.json";
+// import { useEtherStore } from "@/store/ether";
+// import { ethers } from "ethers";
+
 const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   // finish buy screen
   console.log(selectedDeposit);
@@ -20,10 +26,38 @@ const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   await blockchain
     .mapDeposits(selectedDeposit["args"]["depositID"])
     .then((deposit) => (depositDetail = deposit));
+    
   console.log(tokenValue);
   tokenAmmount.value = tokenValue
   flowStep.value = Step.List
   console.log(depositDetail);
+  console.log(depositDetail);
+
+  // Makes lock with deposit ID and the Amount
+  // if (depositDetail) {
+  //   const lock = await blockchain.addLock(
+  //     depositDetail.args.depositID,
+  //     tokenValue
+  //   );
+  //   console.log(lock);
+
+  //   // (TO DO) Tirar isso daqui
+  //   const window_ = window as any;
+  //   const connection = window_.ethereum;
+  //   let provider: ethers.providers.Web3Provider | null = null;
+  //   if (!connection) return;
+  //   provider = new ethers.providers.Web3Provider(connection);
+  //   const signer = provider.getSigner();
+  //   const etherStore = useEtherStore();
+  //   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+  //   const filterLocks = p2pContract.filters.LockAdded(null);
+  //   const eventsLocks = await p2pContract.queryFilter(filterLocks);
+  //   etherStore.setLocksAddedList(eventsLocks);
+
+    // Data to QRCode
+    // Chave Pix = depositDetail.pixTarget
+    // Valor = tokenValue
+  // }
 };
 </script>
 

src/views/MockView.vue

@@ -5,38 +5,59 @@ import { ref } from "vue";
 import { useEtherStore } from "../store/ether";
 import blockchain from "../utils/blockchain";
 
+// Blockchain Data
 const etherStore = useEtherStore();
+const { depositsAddedList } = storeToRefs(etherStore);
+const { locksAddedList } = storeToRefs(etherStore);
 
-const { depositList } = storeToRefs(etherStore);
-
+// Buyer's flow Data
 const depositValue = ref<Number>();
 const depositPixKey = ref<string>("");
 
+//  Split tokens between wallets in wallets.json
 const splitTokens = () => {
   blockchain.splitTokens();
 };
 
+// Formatting methods
+// Formats wallet address in 0x000...0000 format
+const formatWalletAddress = (wallet: string): string => {
+  const walletAddressLength = wallet.length;
+  const initialText = wallet.substring(0, 5);
+  const finalText = wallet.substring(
+    walletAddressLength - 4,
+    walletAddressLength
+  );
+  return `${initialText}...${finalText}`;
+};
+
+// Deposit methods
+// Gets value and pix key from user's form to create a deposit in the blockchain
 const mockDeposit = () => {
   if (!depositValue.value || !depositPixKey.value) return;
-  blockchain.mockDeposit(depositValue.value.toString(), depositPixKey.value);
-};
-
-const countDeposit = () => {
-  blockchain.countDeposit();
+  blockchain.addDeposit(depositValue.value.toString(), depositPixKey.value);
 };
 
+// Get specific deposit data by its ID
 const mapDeposit = (depositId: BigNumber) => {
   blockchain.mapDeposits(depositId);
 };
+
+// Lock methods
+// (TO DO) Releases lock by specific ID and other additional data
+const releaseLock = () => {
+  blockchain.releaseLock();
+};
+
+// Get specific lock data by its ID
+const mapLock = (lockId: string) => {
+  blockchain.mapLocks(lockId);
+};
 </script>
 
 <template>
   <div class="page">
     <div class="flex flex-col gap-4 justify-start items-start w-2/3">
-      <button type="button" class="default-button" @click="countDeposit()">
-        Contar depósitos
-      </button>
-
       <div class="flex gap-4 w-full justify-between">
         <input
           type="number"
@@ -60,17 +81,32 @@ const mapDeposit = (depositId: BigNumber) => {
       <button type="button" class="default-button" @click="splitTokens()">
         Dividir tokens
       </button>
+
+      <button type="button" class="default-button" @click="releaseLock()">
+        Release Lock
+      </button>
     </div>
 
     <ul class="flex flex-col justify-center items-center gap-4">
       <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'])"
+        v-for="deposit in depositsAddedList"
+        :key="deposit.blockNumber"
+        @click="mapDeposit(deposit.args.depositID)"
       >
-        Address:<br />{{ deposit["args"]["0"] }}<br />
-        MRBZ: {{ blockchain.formatEther(deposit["args"]["amount"]) }}
+        Seller:<br />{{ formatWalletAddress(deposit.args.seller) }}<br />
+        MRBZ: {{ blockchain.formatEther(deposit.args.amount) }}
+      </li>
+    </ul>
+    <ul class="flex flex-col justify-center items-center gap-4">
+      <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="lock in locksAddedList"
+        :key="lock.blockNumber"
+        @click="mapLock(lock.args.lockID)"
+      >
+        Buyer:<br />{{ formatWalletAddress(lock.args.buyer) }}<br />
+        MRBZ: {{ blockchain.formatEther(lock.args.amount) }}
       </li>
     </ul>
   </div>