Dapp Introduction

Ethereum Smart Contract Programming 201
#1

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

1 Like
#2

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?

#3

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:

2 Likes
#4

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

image
image1275×325 66.2 KB

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!

#5

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?

#6

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

#7

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.

#8

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

#9

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.

#10

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…

#11

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

image
image1292×375 32.7 KB

#12

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?

#15

Hi
Just from curiosity, I changed the “on event listener” in the inputData function as follows ( x instead of the Hash argument) :

contractInstance.methods.createPerson(name, age, height).send(config).
 on ("transactioHash", function(x) {
  console.log(x);
 })

and still, it gave in the console the transactionHash number…
"…
So it doesn’t matter what is the name of the anonymous function arguments. The function will always call for the first argument of the “on event listener” (in this example
to the transactionHash)?

thanks

#16

Yeah it probably has a fallback. Wouldn’t recommend relying on that though :laughing:

#17

Hi Filip @filip ,
sorry that I got very busy unexpectedly and had to take a break from the course. But now I finally got time to sit down and to start where I left off, I started setting up everything again.
I used a different laptop and used Brave instead of Chrome, the transaction got through, but the console.log information is not showing correctly. I can see the people created in Ganache under Contracts. Can you please take a look? Thank you very much!

image
image700×460 17.6 KB

The code is here:

var web3 = new Web3(Web3.givenProvider);
var contractInstance;

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

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)
    })
}
#18

It’s great to have you back! Hmmm, let’s see. Do you never get the txHash or receipt logged to the console?

#19

Hi Filip,
thank you for reply!
nope, the only thing I got in the console were the numbers as you can see from the screenshot above: 1211321, which I do not know what they mean. I am using Brave browser.
I was using Chrome at first, but the console would not show anything, not even the contractInstance, the error message says DevTools failed to parse SourceMap.

#21

Your javascript code looks fine to me. I tried to run your code (only change the contract address) and it shows all 3 console logs.

The part where you see 121321 is probably because you make transactions. As Filip told in the video, blocks are only mined on every transaction, so you would get a confirmation on every transaction.

On transaction 1, you would get no confirmation.
On transaction 2 you would get confirmation 1 of the first transaction
On transaction 3 you would get confirmation 2 of the first transaction and confirmation 1 on the second transaction
etc.

2 Likes
#22

Thank you very much for your reply.
I feel a bit strange that the console only shows the transactions.
What browser are you using?

1 Like
#23

I’m using Chrome.
Today I had a similar issue where I got no results from the blockchain, and also only showed the transactions. For me it was an issue with MetaMask. I solved it by switching to an other netwerk and connect back again to the localhost:7454 network.

1 Like