Merge branch 'search-tokens' into list-tokens

src/components/SearchComponent.vue

@@ -6,21 +6,28 @@ import { useEtherStore } from "@/store/ether";
 import { storeToRefs } from "pinia";
 import blockchain from "../utils/blockchain";
 
+// Store reference
 const etherStore = useEtherStore();
 
-const { walletAddress, depositList } = storeToRefs(etherStore);
+const { walletAddress, depositsAddedList } = storeToRefs(etherStore);
 
+// Reactive state
 const tokenValue = ref(0);
 const enableSelectButton = ref(false);
 const hasLiquidity = ref(true);
 const validDecimals = ref(true);
 const selectedDeposit = ref();
 
+// Emits
+const emit = defineEmits(["tokenBuy"]);
+
+// Blockchain methods
 const connectAccount = async () => {
   await blockchain.connectProvider();
   verifyLiquidity();
 };
 
+// Debounce methods
 const handleInputEvent = (event: any) => {
   const { value } = event.target;
 
@@ -36,6 +43,8 @@ const handleInputEvent = (event: any) => {
   verifyLiquidity();
 };
 
+// Enable button methods
+// Check if has more than 2 decimal places
 const decimalCount = (num: Number) => {
   const numStr = String(num);
   if (numStr.includes(".")) {
@@ -43,35 +52,36 @@ const decimalCount = (num: Number) => {
   }
   return 0;
 };
-
+// Verify if there is a valid deposit to buy
 const verifyLiquidity = () => {
   enableSelectButton.value = false;
   selectedDeposit.value = null;
 
-  if (!walletAddress.value || tokenValue.value == 0) return;
+  if (!walletAddress.value || tokenValue.value <= 0) return;
-
-  depositList.value.forEach((deposit) => {
-    const p2pixTokenValue = blockchain.verifyDepositAmmount(
-      deposit.args.amount
-    );
 
+  depositsAddedList.value.find((element) => {
+    const p2pixTokenValue = blockchain.formatBigNumber(element.args.amount);
     if (
       tokenValue.value!! <= Number(p2pixTokenValue) &&
-      tokenValue.value!! != 0
+      tokenValue.value!! != 0 &&
+      element.args.seller !== walletAddress.value
     ) {
       enableSelectButton.value = true;
       hasLiquidity.value = true;
-      selectedDeposit.value = deposit;
+      selectedDeposit.value = element;
-      return;
+      console.log(
+        "Selected is :",
+        blockchain.formatBigNumber(element.args.amount)
+      );
+      return true;
     }
+    return false;
   });
 
   if (!enableSelectButton.value) {
     hasLiquidity.value = false;
   }
 };
-
-const emit = defineEmits(["tokenBuy"]);
 </script>
 
 <template>

src/components/TopBar.vue

@@ -3,10 +3,12 @@ import { storeToRefs } from "pinia";
 import { useEtherStore } from "../store/ether";
 import blockchain from "../utils/blockchain";
 
+// Store reference
 const etherStore = useEtherStore();
 
 const { walletAddress, balance } = storeToRefs(etherStore);
 
+//Methods
 const connectMetaMask = () => {
   blockchain.connectProvider();
 };
@@ -15,8 +17,8 @@ const formatWalletAddress = (): string => {
   const walletAddressLength = walletAddress.value.length;
   const initialText = walletAddress.value.substring(0, 5);
   const finalText = walletAddress.value.substring(
-    walletAddressLength - 5,
+    walletAddressLength - 4,
-    walletAddressLength - 1
+    walletAddressLength
   );
   return `${initialText}...${finalText}`;
 };

src/store/ether.ts

@@ -4,7 +4,14 @@ export const useEtherStore = defineStore("ether", {
   state: () => ({
     walletAddress: "",
     balance: "",
-    depositList: [{}],
+    // Depósitos válidos para compra
+    depositsValidList: [{}],
+    // Depósitos adicionados na blockchain
+    depositsAddedList: [{}],
+    // Depósitos expirados na blockchain
+    depositsExpiredList: [{}],
+    // Locks adicionados na blockchain
+    locksAddedList: [{}],
   }),
   actions: {
     setWalletAddress(walletAddress: string) {
@@ -13,8 +20,17 @@ export const useEtherStore = defineStore("ether", {
     setBalance(balance: string) {
       this.balance = balance;
     },
-    setDepositList(depositList: any[]) {
+    setDepositsValidList(depositsValidList: any[]) {
-      this.depositList = depositList;
+      this.depositsValidList = depositsValidList;
+    },
+    setDepositsAddedList(depositsAddedList: any[]) {
+      this.depositsAddedList = depositsAddedList;
+    },
+    setDepositsExpiredList(depositsExpiredList: any[]) {
+      this.depositsExpiredList = depositsExpiredList;
+    },
+    setLocksAddedList(locksAddedList: any[]) {
+      this.locksAddedList = locksAddedList;
     },
   },
 });

src/utils/blockchain.ts

@@ -1,13 +1,70 @@
 import { useEtherStore } from "@/store/ether";
 import { BigNumber, ethers } from "ethers";
 
-// smart contract imports
+// Smart contract imports
 import mockToken from "./smart_contract_files/MockToken.json";
 import p2pix from "./smart_contract_files/P2PIX.json";
 import addresses from "./smart_contract_files/localhost.json";
-
+// Mock wallets import
 import { wallets } from "./smart_contract_files/wallets.json";
 
+// Provider methods
+const connectProvider = async () => {
+  const etherStore = useEtherStore();
+  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 tokenContract = new ethers.Contract(
+    addresses.token,
+    mockToken.abi,
+    signer
+  );
+
+  const walletAddress = await provider.send("eth_requestAccounts", []);
+  const balance = await tokenContract.balanceOf(walletAddress[0]);
+
+  etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress[0]));
+  etherStore.setBalance(String(balance));
+
+  const p2pEvents = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  const filterDeposits = p2pEvents.filters.DepositAdded(null);
+  const eventsDeposits = await p2pEvents.queryFilter(filterDeposits);
+  console.log("Deposits Added: ", eventsDeposits);
+  etherStore.setDepositsAddedList(eventsDeposits);
+
+  const filterLocks = p2pEvents.filters.LockAdded(null);
+  const eventsLocks = await p2pEvents.queryFilter(filterLocks);
+  console.log("Locks Added: ", eventsLocks);
+  etherStore.setLocksAddedList(eventsLocks);
+
+  const filterExpiredLocks = p2pEvents.filters.LockReturned(null);
+  const eventsExpiredLocks = await p2pEvents.queryFilter(filterExpiredLocks);
+  console.log("Expired Locks: ", eventsExpiredLocks);
+  etherStore.setDepositsExpiredList(eventsExpiredLocks);
+
+  // (TO DO) Filter valid deposits
+
+  connection.on("accountsChanged", (accounts: string[]) => {
+    updateWalletStatus(accounts[0]);
+  });
+};
+
+const getProvider = (): ethers.providers.Web3Provider | null => {
+  const window_ = window as any;
+  const connection = window_.ethereum;
+
+  if (!connection) return null;
+
+  return new ethers.providers.Web3Provider(connection);
+};
+
+// Wallet methods
+// Update wallet state (balance and address)
 const updateWalletStatus = async (walletAddress: string) => {
   const etherStore = useEtherStore();
   const provider = getProvider();
@@ -19,39 +76,10 @@ const updateWalletStatus = async (walletAddress: string) => {
   const balance = await contract.balanceOf(walletAddress);
 
   etherStore.setBalance(String(balance));
-  etherStore.setWalletAddress(walletAddress);
+  etherStore.setWalletAddress(ethers.utils.getAddress(walletAddress));
-};
-
-const connectProvider = async () => {
-  const etherStore = useEtherStore();
-  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 contract = new ethers.Contract(addresses.token, mockToken.abi, signer);
-
-  const walletAddress = await provider.send("eth_requestAccounts", []);
-  const balance = await contract.balanceOf(walletAddress[0]);
-
-  etherStore.setWalletAddress(walletAddress[0]);
-  etherStore.setBalance(String(balance));
-
-  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
-
-  const filter = p2pContract.filters.DepositAdded(null);
-  const events = await p2pContract.queryFilter(filter);
-
-  console.log(events);
-  etherStore.setDepositList(events);
-
-  connection.on("accountsChanged", (accounts: string[]) => {
-    updateWalletStatus(accounts[0]);
-  });
 };
 
+//  Split tokens between wallets in wallets.json
 const splitTokens = async () => {
   const etherStore = useEtherStore();
   const provider = getProvider();
@@ -70,13 +98,14 @@ const splitTokens = async () => {
   }
 };
 
-const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
+// Deposit methods
+// Gets value and pix key from user's form to create a deposit in the blockchain
+const addDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
   const etherStore = useEtherStore();
   const provider = getProvider();
+
   if (!provider) return;
-
   const signer = provider.getSigner();
-
   const tokenContract = new ethers.Contract(
     addresses.token,
     mockToken.abi,
@@ -84,14 +113,14 @@ const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
   );
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
-  // first get the approval
+  // First get the approval
   const apprv = await tokenContract.approve(
     addresses.p2pix,
     ethers.utils.parseEther(tokenQty)
   );
   await apprv.wait();
 
-  // deposit
+  // Now we make the deposit
   const deposit = await p2pContract.deposit(
     addresses.token,
     ethers.utils.parseEther(tokenQty),
@@ -101,63 +130,91 @@ const mockDeposit = async (tokenQty = "1000.0", pixKey = "00011122233") => {
 
   updateWalletStatus(etherStore.walletAddress);
 
-  const filter = p2pContract.filters.DepositAdded(null);
+  const p2pEvents = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
-  const events = await p2pContract.queryFilter(filter);
+  const filter = p2pEvents.filters.DepositAdded(null);
+  const events = await p2pEvents.queryFilter(filter);
 
-  console.log(events);
+  etherStore.setDepositsAddedList(events);
-
-  etherStore.setDepositList(events);
-};
-
-const countDeposit = async () => {
-  const provider = getProvider();
-  if (!provider) return;
-
-  const signer = provider.getSigner();
-  const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
-
-  const count = await contract.depositCount();
-
-  console.log(Number(count));
 };
 
+// Get specific deposit data by its ID
 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.toNumber());
-  const deposit = await contract.mapDeposits(depositId);
 
   console.log(deposit);
   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 etherStore = useEtherStore();
+  const provider = getProvider();
+
+  if (!provider) return;
+  const signer = provider.getSigner();
+  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
+  // Make lock
+  await p2pContract.lock(
+    depositId,
+    etherStore.walletAddress,
+    ethers.constants.AddressZero,
+    0,
+    ethers.utils.parseEther(amount.toString()),
+    []
+  );
+
+  const filterLocks = p2pContract.filters.LockAdded(null);
+  const eventsLocks = await p2pContract.queryFilter(filterLocks);
+  etherStore.setLocksAddedList(eventsLocks);
+};
+
+// Get specific lock data by its ID
+const mapLocks = async (lockId: string) => {
+  const provider = getProvider();
+
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+  const contract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+  const lock = await contract.mapLocks(lockId);
+
+  console.log(lock);
+  return lock;
+};
+
+// Releases lock by specific ID and other additional data
+// (TO DO)
+const releaseLock = async () => {
+  return;
+};
+
+// Formatting methods
 const formatEther = (balance: string) => {
   const formatted = ethers.utils.formatEther(balance);
   return formatted;
 };
 
-const verifyDepositAmmount = (ammountBigNumber: BigNumber): string => {
+const formatBigNumber = (num: BigNumber) => {
-  return ethers.utils.formatEther(ammountBigNumber);
+  const formattedNum = ethers.utils.formatEther(num);
-};
+  return formattedNum;
-
-const getProvider = (): ethers.providers.Web3Provider | null => {
-  const window_ = window as any;
-  const connection = window_.ethereum;
-
-  if (!connection) return null;
-
-  return new ethers.providers.Web3Provider(connection);
 };
 
 export default {
   connectProvider,
   formatEther,
   splitTokens,
-  mockDeposit,
+  addDeposit,
-  countDeposit,
   mapDeposits,
-  verifyDepositAmmount,
+  formatBigNumber,
+  addLock,
+  mapLocks,
+  releaseLock,
 };

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);
+  blockchain.addDeposit(depositValue.value.toString(), depositPixKey.value);
-};
-
-const countDeposit = () => {
-  blockchain.countDeposit();
 };
 
+// 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"
+        v-for="deposit in depositsAddedList"
-        :key="deposit['blockNumber']"
+        :key="deposit.blockNumber"
-        @click="mapDeposit(deposit['args']['depositID'])"
+        @click="mapDeposit(deposit.args.depositID)"
       >
-        Address:<br />{{ deposit["args"]["0"] }}<br />
+        Seller:<br />{{ formatWalletAddress(deposit.args.seller) }}<br />
-        MRBZ: {{ blockchain.formatEther(deposit["args"]["amount"]) }}
+        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>