Dapp Introduction

Welcome to the forum discussion for this section. Here you can ask questions or post feedback.

Question:

When creating our event listeners, we used the syntax below

.on('transactionHash', (hash) => {
    console.log(hash);
  })

But we never declared variables called transactionHash or hash. Are these terms recognized by web3 automatically to return the promised event?

Would the event listener still work if we used “txHash” instead of “transactionHash”? Or do we need to use an exact word or phrase to receive the expected result?

I’m just unclear on how these event listeners are recognized or handled. Like are there only specific event listeners, with related keywords, that we can listen for? Or could we create event listeners for anything we can possibly think of using any keyword we decide as parameters?

That’s a great question! It shows you really analyze what you write.

The first argument to the on() function, the string where we wrote ‘transactionHash’ tells web3.js what we want to listen for. And there are a few option we can choose from as you saw in our code. So it’s not a variable called transactionHash, it’s a string, a text. So it would not work if you put ‘txHash’, because the web3.js library expects us to input one of the options.

The second argument to the on() function is a callback function. A function that will be called whenever web3.js gets the transactionHash. In this case, we have defined a so called anonymous function, or arrow function. That’s basically a function without a name. So when we write

(hash) => {
    console.log(hash);
  }

it is exactly the same as

function(hash){
   console.log(hash)
}

So the hash variable is defined then and there. It’s an input variable to a function. This one we can call whatever you want. We know that web3.js will send us 1 parameter when it calls our function and we can name that whatever we want. Then we can use that variable in our function.

I hope that makes sense :slight_smile:

1 Like

Hi @filip,
I was unable to add data, error message is:

the code is here:

var web3 = new Web3(Web3.givenProvider);

$(document).ready(function() {
    window.ethereum.enable().then(function(accounts){
        contractInstance = new web3.eth.Contract(abi, "0x023FC39a677ADDD6722e9166E8a86F53aDcd8F7C", {from: accounts[0]});
        console.log(contractInstance);
    });
    $("#add_data_button").click(inputData)
    $("#get_data_button").click(fetchAndDisplay)
});

function inputData(){
    var name = $("#name_input").val();
    var age = $("#age_input").val();
    var height = $("#height_input").val();

    var config = {
        value: web3.utils.toWei("1", "ether")
    }

    contractInstance.methods.createPerson(name, age, height).send(config)
    .on("transactionHash", function(hash){
        console.log(hash);
    })
    .on("confirmation", function(confirmationNr){
        console.log(confirmationNr);
    })
    .on("receipt", function(receipt){
        console.log(receipt);
        alert("Done");
    })
}
 
function fetchAndDisplay(){
    contractInstance.methods.getPerson().call().then(function(res){
        console.log(res);
    })
}

I have Ganache opened, python server is also running, MataMask is also on Ganache network.
Can you please take a look? Thank you very much!

I have another question:
do the html file, main.js, web3.min, abi.js need to be in the same folder as the Peopleproject files, or can they also be in a seperate Dapp folder?

Yes, that makes total sense. That was a very helpful explanation. And thank you for the encouragement!

I was reading through the web3.js documents and found some of the options web3 listens for. I’ve listed what I found below, but are these all the available options or are there others I overlooked?

-transactionHash
-receipt
-confirmation
-error

They shouldn’t need to be in the same folder as the People project files. It all worked for me while in a separate folder. They just need to be in the same parent directory.

I’m sure @filip can confirm whether this is the case though.

Hi @Jshanks21
Thank you!
Something else must be wrong to cause my transaction fail.

No problem. One thing I noticed in your code is that you didn’t declare the contractInstance variable at the beginning.

For example:

var web3 = new Web3(Web3.givenProvider);
var contractInstance; //Variable declared here

$(document).ready(() => {
    window.ethereum.enable().then(function(accounts){
      contractInstance = new web3.eth.Contract(abi, '0x023FC39a677ADDD6722e9166E8a86F53aDcd8F7C', {from: accounts[0]}); //Variable defined here
      console.log(contractInstance);
    });
    $('#add_data_button').click(inputData)
    $('#get_data_button').click(fetchAndDisplay)

});

instead of

var web3 = new Web3(Web3.givenProvider);
//No variable declaration

$(document).ready(function() {
    window.ethereum.enable().then(function(accounts){
        contractInstance = new web3.eth.Contract(abi, "0x023FC39a677ADDD6722e9166E8a86F53aDcd8F7C", {from: accounts[0]});
        console.log(contractInstance);
    });
    $("#add_data_button").click(inputData)
    $("#get_data_button").click(fetchAndDisplay)
});

I don’t know if this will solve the issue, but I hope it helps.

Thank you for pointing that out @Jshanks21

I added the line to my code, but the transaction still fails. I wonder where the problem is…

Hi everyone,
I watched all Dapp Intro videos again this morning and checked everything again, strangely there is still this transaction fail error :thinking::

I can’t see anything wrong with your code. I would add the contractInstance at the top though.

But are you sure the contract is actually deployed at the address in question? That the ABI is correct? And that you send enough gas through metamask?

Also, can you post the contract code as well?