Interact with Smart Contracts through your website (JS) error

Moralis General
#1

i was following this tutorial on you tube, Interact with Smart Contracts through your website (JS and REACT tutorial).

i have develop my own smartcontract : address-0x17162F8b6508aaFA79b9533e9683edDBA05726b6
its on bsc testnet. its a simple contract with increase counter. while i finish my code i am facing these errors

moralis.js:7565 Uncaught (in promise) Error: Missing web3 instance, make sure to call Moralis.enableWeb3() or Moralis.authenticate()
    at Function.value (moralis.js:7565:48)
    at Function.<anonymous> (moralis.js:7375:46)
    at tryCatch (moralis.js:74788:40)
    at Generator.invoke [as _invoke] (moralis.js:75019:22)
    at Generator.next (moralis.js:74844:21)
    at asyncGeneratorStep (moralis.js:30969:24)
    at _next (moralis.js:30991:9)
    at moralis.js:30998:7
    at new Promise (<anonymous>)
    at new Wrapper (moralis.js:57965:24)

my js file

const serverUrl = "https://42o5wyensnv6.usemoralis.com:2053/server"

  const appId = "9fjqg7uSqJQKwl8J7SgpMpWQWy4alUJfE4Au7LsR"

   Moralis.start({serverUrl, appId})

  async function login(){

    let user= Moralis.User.current();

    if(!user){

        try{

            user= await Moralis.authenticate({signMessage:" done"});

            await Moralis.enableWeb3();

             console.log(user)

            console.log(user.get('ethAddress'));

        }catch(error){

            console.log(error)

        }

    }
 }

async function btn(){

    let op={

        contractAddress:"0x17162F8b6508aaFA79b9533e9683edDBA05726b6",

        functionName:"setCount",

        Abi:[{"inputs":[],"name":"count","outputs":[{"internalType":"uint256","name":"","type":"uint256"}],"stateMutability":"view","type":"function"},{"inputs":[],"name":"setCount","outputs":[],"stateMutability":"nonpayable","type":"function"}],

    }

    await Moralis.executeFunction(op);

document.getElementById('logn').onclick= login;

document.getElementById('count').onclick= btn;

html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>web3</title>

    <!-- INSTALL THE SDK and WEB3 -->

 <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>  

 <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

 <!-- / -->

</head>

<body>

    <button id="logn">login</button>

  <button id="count">counter</button>

    <div id="fcount" >0</div>

    <script src="main.js"></script>

</body>

</html>

what i am doing wrong, any suggestions?

#2

Did you copy in your files correctly? E.g. your onclick code should be outside of the btn() function.

You don’t need enableWeb3() if you use Moralis.authenticate(). But if you reload the page and you don’t re-authenticate (but there is still a current user), then you will need enableWeb3.

async function login() {
  let user = Moralis.User.current();

  if (!user) {
    try {
      user = await Moralis.authenticate({ signingMessage: ' done' });

      console.log(user);

      console.log(user.get('ethAddress'));
    } catch (error) {
      console.log(error);
    }
  }
}

async function btn() {
  await Moralis.enableWeb3();

  let op = {
    contractAddress: '0x17162F8b6508aaFA79b9533e9683edDBA05726b6',

    functionName: 'setCount',

    abi: [
      {
        inputs: [],
        name: 'count',
        outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
        stateMutability: 'view',
        type: 'function',
      },
      {
        inputs: [],
        name: 'setCount',
        outputs: [],
        stateMutability: 'nonpayable',
        type: 'function',
      },
    ],
  };

  await Moralis.executeFunction(op);
}

Also it is signingMessage not signMessage, and Abi should be abi.

#3

well the transaction went trough successfully & the counter has increased on the contract( bsc scan testnet) but its not updating on webpage!! its showing still zero on webpage has not increased.

#4

It’s still showing zero because there is no code that updates it.

You can get this counter from your contract with a read call function using executeFunction and then update the fcount element.

You could call this read function after waiting for the setCount transaction to be confirmed.

E.g.

const transaction = await Moralis.executeFunction(op);
const result = await transaction.wait();

// call read function on your contract which then updates the counter
#5

can u plz show me how to call that,

// call read function on your contract which then updates the counter...
#6

Once the transaction is successful after transaction.wait(), you can

const options = {
  chain: "0x61",
  address: "0x17162F8b6508aaFA79b9533e9683edDBA05726b6",
  function_name: "count",
  abi: [
    {
        inputs: [],
        name: 'count',
        outputs: [{ internalType: 'uint256', name: '', type: 'uint256' }],
        stateMutability: 'view',
        type: 'function',
      }
  ]
};
const count = await Moralis.Web3API.native.runContractFunction(options);
document.getElementById("fcount").innerText = count;
#7

thank you. ```

chain: “0x61”, it is referring?

#8

Binance Smart Chain Testnet: https://docs.moralis.io/moralis-dapp/web3-api/supported-chains

#9

thank you. i will read the docs.