Merge branch 'develop' into transaction-history

src/components/SellerSteps/SellerSearchComponent.vue

@@ -2,27 +2,16 @@
 import { ref } from "vue";
 import CustomButton from "../../components/CustomButton.vue";
 import { debounce } from "@/utils/debounce";
-import { useEtherStore } from "@/store/ether";
-import { storeToRefs } from "pinia";
-
-// Store reference
-const etherStore = useEtherStore();
-
-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 () => {};
-
 // Debounce methods
 const handleInputEvent = (event: any) => {
   const { value } = event.target;
@@ -35,8 +24,6 @@ const handleInputEvent = (event: any) => {
     return;
   }
   validDecimals.value = true;
-
-  // verifyLiquidity();
 };
 
 // Enable button methods
@@ -49,31 +36,6 @@ 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;
-
-//   depositsAddedList.value.find((element) => {
-//     const p2pixTokenValue = blockchain.formatBigNumber(element.args.amount);
-//     if (
-//       tokenValue.value!! <= Number(p2pixTokenValue) &&
-//       tokenValue.value!! != 0 &&
-//       element.args.seller !== walletAddress.value
-//     ) {
-//       enableSelectButton.value = true;
-//       hasLiquidity.value = true;
-//       selectedDeposit.value = element;
-//       return true;
-//     }
-//     return false;
-//   });
-
-//   if (!enableSelectButton.value) {
-//     hasLiquidity.value = false;
-//   }
-// };
 </script>
 
 <template>

src/components/SellerSteps/SendNetwork.vue

@@ -4,9 +4,11 @@ import CustomButton from "@/components/CustomButton.vue";
 // Emits
 const emit = defineEmits(["sendNetwork"]);
 
-const sendNetworkHandle = () => {
+// props and store references
-  emit("sendNetwork");
+const props = defineProps({
-};
+  pixKey: String,
+  offer: Number,
+});
 </script>
 
 <template>
@@ -27,12 +29,12 @@ const sendNetworkHandle = () => {
       >
         <div>
           <p>Tokens ofertados</p>
-          <p class="text-2xl text-gray-900">100 BRZ</p>
+          <p class="text-2xl text-gray-900">{{ props.offer }} BRZ</p>
         </div>
         <div class="my-3">
           <p>Chave Pix</p>
           <p class="text-xl text-gray-900 break-words">
-            c02942far7047f6shri5ifh371908973
+            {{ props.pixKey }}
           </p>
         </div>
         <div class="mb-5">
@@ -44,7 +46,7 @@ const sendNetworkHandle = () => {
         </div>
         <CustomButton
           :text="'Enviar para a rede'"
-          @buttonClicked="sendNetworkHandle()"
+          @buttonClicked="emit('sendNetwork')"
         />
       </div>
     </div>

src/components/SellerSteps/WantSellComponent.vue

@@ -14,12 +14,6 @@ const validDecimals = ref(true);
 // Emits
 const emit = defineEmits(["approveTokens"]);
 
-// Blockchain methods
-const approveTokensHandle = async () => {
-  console.log(offer.value, pixKey.value);
-  emit("approveTokens");
-};
-
 // Debounce methods
 const handleInputEvent = (event: any) => {
   const { value } = event.target;
@@ -106,7 +100,7 @@ const decimalCount = (num: Number) => {
       </div>
       <CustomButton
         :text="'Aprovar tokens'"
-        @buttonClicked="approveTokensHandle()"
+        @buttonClicked="emit('approveTokens', { offer, pixKey })"
       />
     </div>
   </div>

src/utils/blockchain.ts

@@ -221,7 +221,9 @@ const updateDepositAddedEvents = async () => {
 
   const filterDeposits = p2pContract.filters.DepositAdded(null);
   const eventsDeposits = await p2pContract.queryFilter(filterDeposits);
+
   etherStore.setDepositsAddedList(eventsDeposits);
+  console.log("DEPOSITS", eventsDeposits);
 };
 
 const updateLockAddedEvents = async () => {
@@ -239,6 +241,7 @@ const updateLockAddedEvents = async () => {
   const filterLocks = p2pContract.filters.LockAdded(null);
   const eventsLocks = await p2pContract.queryFilter(filterLocks);
   etherStore.setLocksAddedList(eventsLocks);
+  console.log("LOCKS", eventsLocks);
 };
 
 const updateLockReleasedEvents = async () => {
@@ -253,9 +256,10 @@ const updateLockReleasedEvents = async () => {
   const signer = provider.getSigner();
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
-  const filterLocks = p2pContract.filters.LockReleased(null);
+  const filterReleases = p2pContract.filters.LockReleased(null);
-  const eventsLocks = await p2pContract.queryFilter(filterLocks);
+  const eventsReleases = await p2pContract.queryFilter(filterReleases);
-  etherStore.setLocksReleasedList(eventsLocks);
+  etherStore.setLocksReleasedList(eventsReleases);
+  console.log("RELEASES", eventsReleases);
 };
 
 // Provider methods
@@ -284,8 +288,7 @@ const getProvider = (): ethers.providers.Web3Provider | null => {
 };
 
 // Deposit methods
-// Gets value and pix key from user's form to create a deposit in the blockchain
+const approveTokens = async (tokenQty: Number) => {
-const addDeposit = async (tokenQty: Number, pixKey: string) => {
   const provider = getProvider();
   if (!provider) return;
 
@@ -296,20 +299,61 @@ const addDeposit = async (tokenQty: Number, pixKey: string) => {
     mockToken.abi,
     signer
   );
+
+  const apprv = await tokenContract.approve(
+    addresses.p2pix,
+    formatEther(String(tokenQty))
+  );
+  await apprv.wait();
+  return apprv;
+};
+
+// Gets value and pix key from user's form to create a deposit in the blockchain
+const addDeposit = async (tokenQty: Number, pixKey: String) => {
+  const provider = getProvider();
+  if (!provider) return;
+
+  const signer = provider.getSigner();
   const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
 
-  // First get the approval
+  const deposit = await p2pContract.deposit(
+    addresses.token,
+    formatEther(String(tokenQty)),
+    pixKey,
+    ethers.utils.formatBytes32String("")
+  );
+  await deposit.wait();
+
+  await updateWalletStatus();
+  await updateDepositAddedEvents();
+  await updateValidDeposits();
+};
+
+const mockDeposit = async (tokenQty: Number, pixKey: String) => {
+  const provider = getProvider();
+  if (!provider) return;
+
+  const signer = provider.getSigner();
+
+  const tokenContract = new ethers.Contract(
+    addresses.token,
+    mockToken.abi,
+    signer
+  );
+
   const apprv = await tokenContract.approve(
     addresses.p2pix,
     formatEther(String(tokenQty))
   );
   await apprv.wait();
 
-  // Now we make the deposit
+  const p2pContract = new ethers.Contract(addresses.p2pix, p2pix.abi, signer);
+
   const deposit = await p2pContract.deposit(
     addresses.token,
     formatEther(String(tokenQty)),
-    pixKey
+    pixKey,
+    ethers.utils.formatBytes32String("")
   );
   await deposit.wait();
 
@@ -379,6 +423,7 @@ const addLock = async (depositId: BigNumber, amount: Number) => {
     ethers.constants.AddressZero, // String "0x0000000000000000000000000000000000000000"
     0,
     formatEther(String(amount)), // BigNumber
+    [],
     []
   );
   lock.wait();
@@ -419,8 +464,12 @@ const releaseLock = async (
   );
 
   const messageToSign = ethers.utils.solidityKeccak256(
-    ["string", "uint256", "uint256"],
+    ["string", "uint256", "bytes32"],
-    [pixKey, formatEther(String(amount)), formatEther(e2eId)]
+    [
+      pixKey,
+      formatEther(String(amount)),
+      ethers.utils.formatBytes32String(e2eId),
+    ]
   );
 
   const messageHashBytes = ethers.utils.arrayify(messageToSign);
@@ -432,7 +481,8 @@ const releaseLock = async (
 
   const release = await p2pContract.release(
     lockId,
-    formatEther(e2eId),
+    ethers.constants.AddressZero,
+    ethers.utils.formatBytes32String(e2eId),
     sig.r,
     sig.s,
     sig.v
@@ -465,9 +515,11 @@ export default {
   listReleaseTransactionByWalletAddress,
   listDepositTransactionByWalletAddress,
   listLockTransactionByWalletAddress,
+  approveTokens,
   addDeposit,
   cancelDeposit,
   withdrawDeposit,
+  mockDeposit,
   mapDeposits,
   formatBigNumber,
   addLock,

src/utils/smart_contract_files/localhost.json

@@ -3,6 +3,6 @@
     "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
     "0x70997970C51812dc3A010C7d01b50e0d17dc79C8"
   ],
-  "p2pix": "0x5FbDB2315678afecb367f032d93F642f64180aa3",
+  "p2pix": "0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0",
-  "token": "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512"
+  "token": "0x5FbDB2315678afecb367f032d93F642f64180aa3"
 }

src/views/MockView.vue

@@ -36,7 +36,7 @@ const formatWalletAddress = (wallet: string): string => {
 // 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.addDeposit(depositValue.value, depositPixKey.value);
+  blockchain.mockDeposit(depositValue.value, depositPixKey.value);
 };
 
 // Get specific deposit data by its ID

src/views/SellerView.vue

@@ -2,9 +2,9 @@
 import WantSellComponent from "../components/SellerSteps/WantSellComponent.vue";
 import SendNetwork from "../components/SellerSteps/SendNetwork.vue";
 import ValidationComponent from "../components/LoadingComponent.vue";
+import blockchain from "../utils/blockchain";
 
 import { ref } from "vue";
-import router from "@/router";
 
 enum Step {
   Search,
@@ -15,41 +15,55 @@ enum Step {
 const flowStep = ref<Step>(Step.Sell);
 const loading = ref<boolean>(false);
 
-const walletConnect = async () => {
+const offerValue = ref<number>();
-  flowStep.value = Step.Sell;
+const pixKeyBuyer = ref<string>("");
-};
 
-const approveTokens = async () => {
+// Verificar tipagem
+const approveOffer = async ({ offer, pixKey }: any) => {
   loading.value = true;
-  setTimeout(() => {
+  try {
-    loading.value = false;
+    offerValue.value = offer;
+    pixKeyBuyer.value = pixKey;
+    await blockchain.approveTokens(Number(offerValue.value));
     flowStep.value = Step.Network;
-  }, 2000);
+    loading.value = false;
+  } catch {
+    flowStep.value = Step.Sell;
+    loading.value = false;
+  }
 };
 
 const sendNetwork = async () => {
   loading.value = true;
-  setTimeout(() => {
+  try {
+    if (offerValue.value && pixKeyBuyer.value) {
+      await blockchain.addDeposit(offerValue.value, pixKeyBuyer.value);
+      flowStep.value = Step.Sell;
       loading.value = false;
-    router.push("/");
+    }
-  }, 2000);
+  } catch (err) {
+    console.log(err);
+    flowStep.value = Step.Network;
+    loading.value = false;
+  }
 };
 </script>
 
 <template>
-  <!-- <SellerSearchComponent
-    v-if="flowStep == Step.Search"
-    @token-buy="walletConnect"
-  /> -->
   <div v-if="flowStep == Step.Sell">
-    <WantSellComponent v-if="!loading" @approve-tokens="approveTokens" />
+    <WantSellComponent v-if="!loading" @approve-tokens="approveOffer" />
     <ValidationComponent
       v-if="loading"
       :message="'A transação está sendo enviada para a rede.'"
     />
   </div>
   <div v-if="flowStep == Step.Network">
-    <SendNetwork v-if="!loading" @send-network="sendNetwork" />
+    <SendNetwork
+      :pixKey="pixKeyBuyer"
+      :offer="Number(offerValue)"
+      v-if="!loading"
+      @send-network="sendNetwork"
+    />
     <ValidationComponent
       v-if="loading"
       :message="'A transação está sendo enviada para a rede.'"