Get event call from solidity contract from react

Question

I am looking for doing something, if an event is emmited from solidity contract.

Here's my solidity contract::

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract QuoteV2{
string private quote;

event quoteUploaded(string newQuote);

// mapping(address => string) public users;
struct userQuoteTime {
    mapping(address => string) u;

    string _quote;
    string _time ;        
    

}

struct newUser {
        string userName;
        address walletAddress;
}
mapping (uint256 => newUser) public users;

    event newUserCame(uint256 indexed _userId);
uint256 public userCount;

function setQuote(string memory _quote) public {
    quote = _quote;

    emit quoteUploaded(_quote);
}
function getQuote() public view returns(string memory){
    return quote;
}
function newUserF(address _walletAddress, string memory _userName) public {
    newUser memory User;

    User.userName = _userName;
    User.walletAddress = _walletAddress;
    users[userCount] = newUser(_userName, _walletAddress);
    userCount++;

}
// function getUsers() public view returns(newUser memory) {
    
//     return users;
// }
function getUsers() public view returns (newUser[] memory){
  newUser[] memory id = new newUser[](userCount);
  for (uint i = 0; i < userCount; i++) {
      newUser storage user = users[i];
      id[i] = user;
  }
  return id;
  }

I want to catch the quoteUploaded event. I am using react typescript. Please help me.

Answer 1

heres what you need:

1. First create new javascript file. For example: eventListener.js
2. Copy and modify code here so it fits your contractAbi,contractAddress, and providerURL, make sure its starts with "wss".
3. Run the listenOnQuoteUploadedEvent function.(The script will stay open all the time, so you dont need to close it)
4. Emit events you need from solidity.

Make sure you installed ethers via NPM or YARN.

    const ethers = require("ethers");

let contractAbi;
let contractAddress;
let provider;
let CONTRACT;

const listenOnQuoteUploadedEvent = (_contractAbi, _contractAddress, 
websocketProviderURL) => {
    contractAbi = _contractAbi;
    contractAddress = _contractAddress;
    provider = new ethers.providers.WebSocketProvider(websocketProviderURL);
    CONTRACT = new ethers.Contract(contractAddress, contractAbi, provider);
    CONTRACT.on("quoteUploaded",(newQuote)=>{
    console.info(newQuote);
    })
}

I hope it helps.