1

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.

2 Answers 2

0

I believe that you have to use web socket provider for this to work.

Eg.

const ethers = require("ethers");
const ABI = require("./abi.json");
require("dotenv").config();
async function getTransfer(){
    const usdcAddress = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48"; ///USDC Contract
    const provider = new ethers.providers.WebSocketProvider(
        `wss://mainnet.infura.io/ws/v3/${process.env.API_KEY}`
    );
    const contract = new ethers.Contract(usdcAddress, ABI, provider);
    contract.on("Transfer", (from, to, value, event)=>{
        let transferEvent ={
            from: from,
            to: to,
            value: value,
            eventData: event,
        }
        console.log(JSON.stringify(transferEvent, null, 4))
    })
}
getTransfer()
0

Hardhat supports events. It looks like you have the race condition here. You send the Transaction, then subscribes to the event. You better listen to the event before, e.g. on the application start

const contract = new ethers.Contract(contractAddress, ABI, signer);

contract.on("NewDeposit", (buyerAddress, sellerAddress, depositAmount, counter) => {
  console.log("DOES thIS SHIT EVEN WORK");
  console.table({
    "Buyer address": buyerAddress,
    "Seller address": sellerAddress,
    "Escrow amount": JSON.stringify(depositAmount.toString()),
    "Escrow ID": counter
  });
})

async function blockchainTalk(e) {
  e.preventDefault();
  let tx = await contract.safeDeposit(_seller, { value: amount });
  let receipt = await tx.wait();
} 

Alternatively, you can get that Log and its Data from the transaction receipt.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.