Merge branch 'list-tokens' of https://github.com/liftlearning/P2Pix-Front-End into list-tokens

src/components/ListComponent.vue

@@ -1,18 +1,15 @@
 <script setup lang="ts">
 import CustomButton from "@/components/CustomButton.vue";
-import { BigNumber } from "ethers";
 import blockchain from "../utils/blockchain";
 
-// props and store references
+// props
 const props = defineProps({
-  lastWalletTransactions: Array,
-  tokenAmmount: BigNumber,
+  lastWalletReleaseTransactions: Array,
+  tokenAmount: Number,
 });
 
-const teste = (amount: any) => {
-  console.log(amount);
-  console.log("Teste");
-};
+// Emits
+const emit = defineEmits(["makeAnotherTransaction"]);
 
 const formatEventsAmount = (amount: any) => {
   try {
@@ -42,9 +39,7 @@ const openEtherscanUrl = (url: string) => {
       >
         <div>
           <p>Tokens recebidos</p>
-          <p class="text-2xl text-gray-900">
-            {{ teste(props.tokenAmmount) }} BRZ
-          </p>
+          <p class="text-2xl text-gray-900">{{ props.tokenAmount }} BRZ</p>
         </div>
         <div class="my-5">
           <p>
@@ -57,67 +52,60 @@ const openEtherscanUrl = (url: string) => {
           @buttonClicked="() => {}"
         />
       </div>
-    </div>
-    <div class="blur-container-row">
       <button
         type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 w-full"
-        @click="() => {}"
+        class="border-amber-500 border-2 rounded default-button text-white p-2 px-50 min-w-[198px]"
+        @click="emit('makeAnotherTransaction')"
       >
         Fazer nova transação
       </button>
-      <button
-        type="button"
-        class="border-amber-500 border-2 rounded default-button text-white p-2"
-        @click="() => {}"
-      >
-        Desconectar
-      </button>
     </div>
-    <div class="text-container mt-10">
+    <div class="text-container mt-16">
       <span class="text font-extrabold text-3xl max-w-[50rem]"
         >Últimas transações
       </span>
     </div>
-    <div class="blur-container">
+    <div class="blur-container min-w-[80%] gap-8">
+      <div class="flex flex-row justify-between w-full px-8">
+        <span class="text-xs text-gray-50 font-medium">Valor</span>
+        <span class="text-xs text-gray-50 font-medium">Tipo de transação</span>
+        <span class="text-xs text-gray-50 font-medium">Checar transação</span>
+      </div>
       <div
-        class="flex flex-row justify-between w-full bg-white p-5 rounded-lg"
-        v-for="deposit in lastWalletTransactions"
-        :key="deposit?.blockNumber"
+        class="flex flex-row justify-between w-full bg-white px-6 py-4 rounded-lg"
+        v-for="release in lastWalletReleaseTransactions"
+        :key="release?.blockNumber"
       >
-        <p class="last-deposit-info">
-          {{ formatEventsAmount(deposit?.args.amount) }} BRZ
-        </p>
-        <p class="last-deposit-info">
-          {{
-            deposit?.event == "DepositAdded"
-              ? "Depósito"
-              : deposit?.event == "LockAdded"
-              ? "Reserva"
-              : "Compra"
-          }}
-        </p>
+        <span class="last-release-info">
+          {{ formatEventsAmount(release?.args.amount) }} BRZ
+        </span>
+        <span class="last-release-info">
+          {{ "Compra" }}
+        </span>
         <div
           class="flex gap-2 cursor-pointer items-center"
           @click="
             openEtherscanUrl(
-              `https://etherscan.io/tx/${deposit?.transactionHash}`
+              `https://etherscan.io/tx/${release?.transactionHash}`
             )
           "
         >
-          <p class="last-deposit-info">Etherscan</p>
+          <span class="last-release-info">Etherscan</span>
           <img alt="Redirect image" src="@/assets/redirect.svg" />
         </div>
       </div>
-      <button
-        type="button"
-        class="text-white mt-2"
-        @click="() => {}"
-        v-if="lastWalletTransactions?.length != 0"
-      >
-        Carregar mais
-      </button>
-      <p class="font-bold" v-if="lastWalletTransactions?.length == 0">
+      <div class="flex justify-center w-full right-6 mt-2">
+        <button
+          type="button"
+          class="text-white"
+          @click="() => {}"
+          v-if="lastWalletReleaseTransactions?.length != 0"
+        >
+          Carregar mais
+        </button>
+      </div>
+
+      <p class="font-bold" v-if="lastWalletReleaseTransactions?.length == 0">
         Não há nenhuma transação anterior
       </p>
     </div>
@@ -145,11 +133,11 @@ p {
 }
 
 .blur-container {
-  @apply flex flex-col justify-center items-center px-8 py-6 gap-2 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-8 w-1/3;
+  @apply flex flex-col justify-center items-center px-8 py-6 gap-4 rounded-lg shadow-md shadow-gray-600 backdrop-blur-md mt-10 w-auto;
 }
 
-.last-deposit-info {
-  @apply font-medium text-base;
+.last-release-info {
+  @apply font-medium text-base text-gray-900;
 }
 
 input[type="number"] {

src/components/QrCodeComponent.vue

@@ -69,7 +69,6 @@ const validatePix = async () => {
 
 <template>
   <div class="page">
-    <h2>{{ e2eId }}</h2>
     <div class="text-container">
       <span class="text font-extrabold text-2xl max-w-[30rem]">
         Utilize o QR Code ou copie o código para realizar o Pix

src/components/SearchComponent.vue

@@ -60,9 +60,11 @@ const verifyLiquidity = () => {
   if (!walletAddress.value || tokenValue.value <= 0) return;
 
   depositsAddedList.value.find((element) => {
-    const p2pixTokenValue = blockchain.formatBigNumber(element.args.amount);
+    const p2pixTokenValue = Number(
+      blockchain.formatBigNumber(element.args.amount)
+    );
     if (
-      tokenValue.value!! <= Number(p2pixTokenValue) &&
+      tokenValue.value!! <= p2pixTokenValue &&
       tokenValue.value!! != 0 &&
       element.args.seller !== walletAddress.value
     ) {

src/components/TopBar.vue

@@ -38,7 +38,6 @@ const formatWalletBalance = (): string => {
       src="@/assets/logo.svg"
       width="75"
       height="75"
-      @load="connectMetaMask()"
     />
     <div class="flex gap-4 items-center">
       <button

src/utils/blockchain.ts

@@ -21,7 +21,6 @@ const updateWalletStatus = async () => {
   const walletAddress = await provider.send("eth_requestAccounts", []);
 
   const balance = await contract.balanceOf(walletAddress[0]);
-
   etherStore.setBalance(formatBigNumber(balance));
   etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress[0]));
 };
@@ -48,8 +47,8 @@ const splitTokens = async () => {
   }
 };
 
-// get wallet transactions
-const listTransactionByWalletAddress = async (
+// get all wallet transactions
+const listAllTransactionByWalletAddress = async (
   walletAddress: string
 ): Promise<any[] | undefined> => {
   const provider = getProvider();
@@ -76,6 +75,62 @@ const listTransactionByWalletAddress = async (
   );
 };
 
+// get wallet's deposit transactions
+const listDepositTransactionByWalletAddress = async (
+  walletAddress: string
+): Promise<any[] | undefined> => {
+  const provider = getProvider();
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  const filterDeposits = p2pContract.filters.DepositAdded([walletAddress]);
+  const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
+
+  return eventsDeposits.sort((a, b) => {
+    return b.blockNumber - a.blockNumber;
+  });
+};
+
+// get wallet's lock transactions
+const listLockTransactionByWalletAddress = async (
+  walletAddress: string
+): Promise<any[] | undefined> => {
+  const provider = getProvider();
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  const filterAddedLocks = p2pContract.filters.LockAdded([walletAddress]);
+  const eventsAddedLocks = await p2pContract.queryFilter(filterAddedLocks);
+
+  return eventsAddedLocks.sort((a, b) => {
+    return b.blockNumber - a.blockNumber;
+  });
+};
+
+// get wallet's release transactions
+const listReleaseTransactionByWalletAddress = async (
+  walletAddress: string
+): Promise<any[] | undefined> => {
+  const provider = getProvider();
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  const filterReleasedLocks = p2pContract.filters.LockReleased([walletAddress]);
+  const eventsReleasedLocks = await p2pContract.queryFilter(
+    filterReleasedLocks
+  );
+
+  return eventsReleasedLocks.sort((a, b) => {
+    return b.blockNumber - a.blockNumber;
+  });
+};
+
 // Update events at store methods
 const updateDepositAddedEvents = async () => {
   const etherStore = useEtherStore();
@@ -194,14 +249,14 @@ const mapDeposits = async (depositId: BigNumber) => {
 
   const signer = provider.getSigner();
   const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
-  const deposit = await contract.mapDeposits(depositId.toNumber());
+  const deposit = await contract.mapDeposits(depositId);
 
   return deposit;
 };
 
 // Lock methods
 // Gets value from user's form to create a lock in the blockchain
-const addLock = async (depositId: Number, amount: Number) => {
+const addLock = async (depositId: BigNumber, amount: Number) => {
   const etherStore = useEtherStore();
   const provider = getProvider();
 
@@ -212,17 +267,19 @@ const addLock = async (depositId: Number, amount: Number) => {
   // Make lock
   const oldEventsLen = etherStore.locksAddedList.length;
   const lock = await p2pContract.lock(
-    depositId,
-    etherStore.walletAddress,
-    ethers.constants.AddressZero,
+    depositId, // BigNumber
+    etherStore.walletAddress, // String "0x70997970C51812dc3A010C7d01b50e0d17dc79C8" (Example)
+    ethers.constants.AddressZero, // String "0x0000000000000000000000000000000000000000"
     0,
-    ethers.utils.parseEther(amount.toString()),
+    formatEther(String(amount)), // BigNumber
     []
   );
   lock.wait();
+
   while (etherStore.locksAddedList.length === oldEventsLen) {
     await updateLockAddedEvents();
   }
+
   return lock;
 };
 
@@ -236,17 +293,14 @@ const mapLocks = async (lockId: string) => {
   const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
   const lock = await contract.mapLocks(lockId);
 
-  console.log(lock);
-
-  console.log("Expiration block = ", Number(lock.expirationBlock));
   return lock;
 };
 
 // Releases lock by specific ID and other additional data
 const releaseLock = async (
   pixKey: string,
-  amount: string,
-  e2eId: Number,
+  amount: Number,
+  e2eId: string,
   lockId: string
 ) => {
   const provider = getProvider();
@@ -258,7 +312,7 @@ const releaseLock = async (
 
   const messageToSign = ethers.utils.solidityKeccak256(
     ["string", "uint256", "uint256"],
-    [pixKey, formatEther(amount), e2eId]
+    [pixKey, formatEther(String(amount)), formatEther(e2eId)]
   );
 
   const messageHashBytes = ethers.utils.arrayify(messageToSign);
@@ -268,7 +322,13 @@ const releaseLock = async (
   const signer = provider.getSigner();
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
-  const release = await p2pContract.release(lockId, e2eId, sig.r, sig.s, sig.v);
+  const release = await p2pContract.release(
+    lockId,
+    formatEther(e2eId),
+    sig.r,
+    sig.s,
+    sig.v
+  );
   release.wait();
   await updateLockReleasedEvents();
 
@@ -289,8 +349,12 @@ const formatBigNumber = (num: BigNumber) => {
 export default {
   connectProvider,
   formatEther,
+  updateWalletStatus,
   splitTokens,
-  listTransactionByWalletAddress,
+  listAllTransactionByWalletAddress,
+  listReleaseTransactionByWalletAddress,
+  listDepositTransactionByWalletAddress,
+  listLockTransactionByWalletAddress,
   addDeposit,
   mapDeposits,
   formatBigNumber,

src/views/HomeView.vue

@@ -24,18 +24,18 @@ const tokenAmount = ref<number>();
 const lockTransactionHash = ref<string>("");
 const lockId = ref<string>("");
 const loadingRelease = ref<Boolean>(false);
-const lastWalletTransactions = ref<any[] | undefined>([]);
+const lastWalletReleaseTransactions = ref<any[] | undefined>([]);
 
 const confirmBuyClick = async ({ selectedDeposit, tokenValue }: any) => {
   // finish buy screen
-  console.log(selectedDeposit);
   let depositDetail;
+  // depositId is BigNumber type object
   const depositId = selectedDeposit["args"]["depositID"];
   await blockchain
     .mapDeposits(depositId)
     .then((deposit) => (depositDetail = deposit));
   tokenAmount.value = tokenValue;
-  pixTarget.value = depositDetail?.pixTarget;
+  pixTarget.value = String(depositDetail?.pixTarget);
 
   // Makes lock with deposit ID and the Amount
   if (depositDetail) {
@@ -61,35 +61,27 @@ const releaseTransaction = async ({ e2eId }: any) => {
 
   const findLockId = locksAddedList.value.find((element) => {
     if (element.transactionHash === lockTransactionHash.value) {
-      lockId.value = element.args.lockID;
+      lockId.value = element.args.lockID; // BigNumber type
       return true;
     }
     return false;
   });
 
   if (findLockId) {
-    console.log(
-      pixTarget.value,
-      String(tokenAmount.value),
-      Number(e2eId),
-      lockId.value
-    );
-
     const release = await blockchain.releaseLock(
-      pixTarget.value,
-      String(tokenAmount.value),
-      Number(e2eId),
-      lockId.value
+      pixTarget.value, // String
+      tokenAmount.value ?? 0, // Number
+      e2eId, // String
+      lockId.value // String
     );
     release.wait();
 
-    lastWalletTransactions.value =
-      await blockchain.listTransactionByWalletAddress(
+    lastWalletReleaseTransactions.value =
+      await blockchain.listReleaseTransactionByWalletAddress(
         walletAddress.value.toLowerCase()
       );
 
-    console.log(tokenAmount);
-
+    await blockchain.updateWalletStatus();
     loadingRelease.value = false;
   }
 };
@@ -115,8 +107,9 @@ const releaseTransaction = async ({ e2eId }: any) => {
   <div v-if="flowStep == Step.List">
     <ListComponent
       v-if="!loadingRelease"
+      :last-wallet-release-transactions="lastWalletReleaseTransactions"
       :tokenAmount="tokenAmount"
-      :last-wallet-transactions="lastWalletTransactions"
+      @make-another-transaction="flowStep = Step.Search"
     />
     <ValidationComponent
       v-if="loadingRelease"

src/views/MockView.vue

@@ -15,7 +15,7 @@ const depositValue = ref<Number>();
 const depositPixKey = ref<string>("");
 
 //  Split tokens between wallets in wallets.json
-const splitTokens = () => {
+const splitTokens = async () => {
   blockchain.splitTokens();
 };
 
@@ -40,13 +40,15 @@ const mockDeposit = () => {
 
 // Get specific deposit data by its ID
 const mapDeposit = (depositId: BigNumber) => {
-  blockchain.mapDeposits(depositId);
+  const deposit = blockchain.mapDeposits(depositId);
+  return deposit;
 };
 
 // Lock methods
 // Get specific lock data by its ID
 const mapLock = (lockId: string) => {
-  blockchain.mapLocks(lockId);
+  const lock = blockchain.mapLocks(lockId);
+  return lock;
 };
 </script>