So I am running this code that is the standard code for logging events to the ReactJS App UI, but I cannot understand why it does not work. I am not getting any errors either.
import React, { useState } from 'react';
import { ethers } from "ethers";
const contractAddress = "0x5FbDB2315678afecb367f032d93F642f64180aa3"
const ABI = [
"function safeDeposit(address _seller) external payable",
"event NewDeposit(address buyerAddress, address sellerAddress, uint amount, uint256 counter)"
];
function App() {
const [amount, setDepositValue] = useState('')
const [_seller, setSellerAddress] = useState('')
const provider = new ethers.providers.Web3Provider(window.ethereum)
const signer = provider.getSigner();
const contract = new ethers.Contract(contractAddress, ABI, signer);
async function blockchainTalk(e) {
e.preventDefault();
if (contract.safeDeposit(_seller, { value: amount})) {
contract.on("NewDeposit", (buyerAddress, sellerAddress, depositAmount, counter) => {
console.log("DOES thIS SHIT EVEN WORK");
console.log(
"Buyer address: "+buyerAddress,
"Seller address: "+sellerAddress,
"Escrow amount: "+JSON.stringify(depositAmount.toString()),
"Escrow ID: "+counter
);
})
}
}
Basically when I hit the button and give input to the function for the smart contract, the smart contract works flawlessly, both through the UI and tests. The events are also delivering the correct args when testing. However the contract.on()
function seems to not work at all, nothing that is under that function is logged on the console.
What am I doing wrong? I checked many different tutorials and they all say this is the right way.