Dapp Introduction

The request above has been handled in dm

It did not work @W1LL however after googling I found out that if you save main.js then clear cache in the browser and reload the page it updates accordingly. Thanks for your help!

1 Like

@acf
nicee!! Glad it works out for you! :+1:

2 Likes

I’m having issues my transactions wont go through

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

$(document).ready(function() {
    window.ethereum.enable().then(function(accounts){
      contractInstance = new web3.eth.Contract(abi, "0x1669C4668127B9897E2fe3D3Ccf9bC68403783CE", {fom: 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);
  })
}

function fetchAndDisplay(){
  contractInstance.methods.getPerson().call().then(function(res){
    $("#name_output").test(res.name);
    $("#age_output").test(res.age);
    $("#height_output").test(res.height);
  })
}

1 Like

Hey @kryptokrymmenos, hope you are well.

Now the “uncought reference error”, it said: In main.js file, code line #6 shows error abi is not defined, which could mean an issue when getting your abi.js file, are you sure this file is created or is exactly the last version of your contract?

Might be usefull if you could share the entire project in a github repository, that can give us a big advantage to debug your code :nerd_face:.

If you have any more questions, please let us know so we can help you! :slight_smile:

Carlos Z.

2 Likes

Hi guys,

Just wanna share my code here as well :slight_smile:

const web3 = new Web3(Web3.givenProvider);
let contractAddress;
let contractABI;
let contract;
let accountAddress;

$(document).ready(async function() {
  window.ethereum.enable();

  window.ethereum.on('accountsChanged', async() => {
    await render();
  });

  contractABI = [ ... ];
  contractAddress = '0x...';
  contract = new web3.eth.Contract(contractABI, contractAddress);

  await render();

  $('#add_data_button').click(inputData);
  $('#get_data_button').click(outputData);
});

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

  contract.methods.createPerson(name, age, height)
  .send({
    from: accountAddress,
    value: web3.utils.toWei('1', 'ether')
  })
  .then((result) => {
    console.log('createPerson_result..... ', result);
  });
};

function outputData() {
  var name = $('#name_output');
  var age = $('#age_output');
  var height = $('#height_output');

  contract.methods.getPerson().call()
  .then((result) => {
    name.text(result.name);
    age.text(result.age);
    height.text(result.height);
  });
};

async function render() {
  accountAddress = await web3.eth.getCoinbase(); // get current account address
  console.log('currentAccount..... ', accountAddress);
}; 
1 Like

Yea, I didn’t really do anything to the abi.js file

var abi = [
    {
      "anonymous": false,
      "inputs": [
        {
          "indexed": false,
          "internalType": "string",
          "name": "name",
          "type": "string"
        },
        {
          "indexed": false,
          "internalType": "bool",
          "name": "senior",
          "type": "bool"
        }
      ],
      "name": "personCreated",
      "type": "event"
    },
    {
      "anonymous": false,
      "inputs": [
        {
          "indexed": false,
          "internalType": "string",
          "name": "name",
          "type": "string"
        },
        {
          "indexed": false,
          "internalType": "bool",
          "name": "senior",
          "type": "bool"
        },
        {
          "indexed": false,
          "internalType": "address",
          "name": "deletedBy",
          "type": "address"
        }
      ],
      "name": "personDeleted",
      "type": "event"
    },
    {
      "constant": true,
      "inputs": [],
      "name": "balance",
      "outputs": [
        {
          "internalType": "uint256",
          "name": "",
          "type": "uint256"
        }
      ],
      "payable": false,
      "stateMutability": "view",
      "type": "function"
    },
    {
      "constant": true,
      "inputs": [],
      "name": "owner",
      "outputs": [
        {
          "internalType": "address",
          "name": "",
          "type": "address"
        }
      ],
      "payable": false,
      "stateMutability": "view",
      "type": "function"
    },
    {
      "constant": false,
      "inputs": [
        {
          "internalType": "string",
          "name": "name",
          "type": "string"
        },
        {
          "internalType": "uint256",
          "name": "age",
          "type": "uint256"
        },
        {
          "internalType": "uint256",
          "name": "height",
          "type": "uint256"
        }
      ],
      "name": "createPerson",
      "outputs": [],
      "payable": true,
      "stateMutability": "payable",
      "type": "function"
    },
    {
      "constant": true,
      "inputs": [],
      "name": "getPerson",
      "outputs": [
        {
          "internalType": "string",
          "name": "name",
          "type": "string"
        },
        {
          "internalType": "uint256",
          "name": "age",
          "type": "uint256"
        },
        {
          "internalType": "uint256",
          "name": "height",
          "type": "uint256"
        },
        {
          "internalType": "bool",
          "name": "senior",
          "type": "bool"
        }
      ],
      "payable": false,
      "stateMutability": "view",
      "type": "function"
    },
    {
      "constant": false,
      "inputs": [
        {
          "internalType": "address",
          "name": "creator",
          "type": "address"
        }
      ],
      "name": "deletePerson",
      "outputs": [],
      "payable": false,
      "stateMutability": "nonpayable",
      "type": "function"
    },
    {
      "constant": true,
      "inputs": [
        {
          "internalType": "uint256",
          "name": "index",
          "type": "uint256"
        }
      ],
      "name": "getCreator",
      "outputs": [
        {
          "internalType": "address",
          "name": "",
          "type": "address"
        }
      ],
      "payable": false,
      "stateMutability": "view",
      "type": "function"
    },
    {
      "constant": false,
      "inputs": [],
      "name": "withdrawAll",
      "outputs": [
        {
          "internalType": "uint256",
          "name": "",
          "type": "uint256"
        }
      ],
      "payable": false,
      "stateMutability": "nonpayable",
      "type": "function"
    }
  

I never really used github repository I’ll try to learn how to use that to upload the whole project.

Hey @kryptokrymmenos

I am checking this error you get in the console.

The ABI is an array which indeed starts with var abi = [ your are missing the closing ] at the end of the file.

Fix it, retry and let us know :slight_smile:

Cheers,
Dani

I closed it but still same issue this struggle is good for an amateur like me I didn’t realize those lines in the end lead you to the lines in the debugger. It is mentioning that contractInstance is undefined.

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

$(document).ready(function() {
    window.ethereum.enable().then(function(accounts){
      contractInstance = new web3.eth.Contract(abi, "0x8ae4981BB7f69cb66F6661218b4f44a0F07a1b6b", {from: accounts[0]});
      console.log(contractInstance);
    });
    $("#get_data_button").click(fetchAndDisplay);
    $("#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({value: web3.utils.toWei("1", "ether")})
    .on("transactionHash", function(hash){
      console.log(hash);
    })
    .on("confirmation", function(confirmationNr){
        console.log(confirmationNr);
    })
    .on("receipt", function(receipt){
      console.log(receipt);
    })
  };

  function fetchAndDisplay(){
    contractInstance.methods.getPerson().call().then(function(res){
      $("#name_output").test(res.name);
      $("#age_output").test(res.age);
      $("#height_output").test(res.height);
    });

    console.log(contractInstance.address)
  };

In your previous screenshot I can see that contractInstance was successfully logged on the console.
In which line do you get the contractInstance error?

It mentions that contractInstance is undefined.

I apologize if I am being difficult I am really amateur at programming just picked it up 3 months ago at the start of the academy. So please bare with me even if I ask silly questions.

1 Like

Hey @kryptokrymmenos

No worries!

Have you modified the abi file as suggested previously? I can still see the error message :slight_smile:

That is an old picture, I didn’t send you a recent pic I will tomorrow have to head to work but thank you for your patience.

1 Like

I want to make sure that the abi is fixed, in that case your contractInstance will be successfully processed and you should be able to use it.

Keep me posted and have a great day!

3 Likes

Hello friends

I have problems to create my contract instance for some days I tried with chrome, firefox and brave, the webserver in python is ok, and the network to ganache is ok( http://127.0.0.1:7525 (and chain id 1337). these are the screenshots



Hey @camarosan

There is a typo, it should be “window”

Screenshot 2020-12-10 at 09.36.38

Cheers,
Dani

1 Like

thanks @dan-i. it woks perfectly

1 Like


The undefined contract instance is in line 41 (not in your screenshot).
Paste here you main.js (not a screenshot) so that I can copy it.

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

$(document).ready(function() {
    window.ethereum.enable().then(function(accounts){
      contractInstance = new web3.eth.Contract(abi, "0x281cF6AF48D24C3846d0bF6109a5406c9C7cC42d", {from: accounts[0]});
    });
    $("#get_data_button").click(fetchAndDisplay);
    $("#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({value: web3.utils.toWei("1", "ether")})
    .on("transactionHash", function(hash){
      console.log(hash);
    })
    .on("confirmation", function(confirmationNr){
        console.log(confirmationNr);
    })
    .on("receipt", function(receipt){
      console.log(receipt);
    })
  };

  function fetchAndDisplay(){
    contractInstance.methods.getPerson().call().then(function(res){
      $("#name_output").test(res.name);
      $("#age_output").test(res.age);
      $("#height_output").test(res.height);
    });

    console.log(contractInstance.address)
  };