[SOLVED] Cannot interact with Smart Contract

Moralis General
#1

Hey Guys, I am having issues with this tutorial https://youtu.be/7TKqLJd_aYI. there’s no responds at all from Metamask when I click both the login button and the donate button. Please help

donate1
donate11366×768 64.2 KB

#2

Are you seeing any errors in the browser console?

#3

You can also add a conlsole.log(" ") in the function to check the function is called when the button is clicked.

#4

Yes, I am seeing errors in the browser console.

console
console1366×768 92 KB

#5

This is my index.html file

Vanilla Boilerplate 
 <body>
      <button id=”btn-login”>Moralis Metamask Login</button>
      <button id=”btn-logout”>Logout</button>
      <button id=”btn-donate”>Donate</button>
      <script type=”text/javascript” src=”./main.js”></script>
#6

it looks like it was not able to load moralis.js and web3.min.js, you can double checks those lines

#7

For a better view of the index.html file

<html>
     <head>
          <title>Vanilla Boilerplate</title>
          <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=”btn-login”>Moralis Metamask Login</button>
          <button id=”btn-logout”>Logout</button>
          <button id=”btn-donate”>Donate</button>
          <script type=”text/javascript” src=”./main.js”></script> 
   </body>
</html>
#8

try to use normal quotes maybe

#9

Here is the main.js file . Please tell me what I am doing wrong, the server is mumbai Polygon. but I do not have test token at thre moment. Is that the cause?

/** Connect to Moralis server */
const serverUrl = "https://xxxxxxxxxx.usemoralis.com:2053/server";
const appId = "your_appId";
Moralis.start({ serverUrl, appId });


        async function login() {
            let user = Moralis.User.current();
            if (!user) {
                try {
                    user = await Moralis.authenticate({ signingMessage: "Authenticate" })
                    await Moralis.enableWeb3();
                    console.log(user)
                    console.log(user.get('ethAddress'))
                } catch (error) {
                    console.log(error)
                }
            }
        }

        async function logOut() {
            await Moralis.User.logOut();
            console.log("logged out");
        }


async function logOut() {
  await Moralis.User.logOut();
  console.log("logged out");
}

async function donate() {
  let options = {
    contractAddress: "0x356d2E7a0d592bAd95E86d19479c37cfdBb68Ab9",
    functionName: "newDonation",
    abi: [
      {
        inputs: [
          { internalType: "string", name: "note", type: "string" },
        ],
        name: "newDonation",
        outputs: [],
        stateMutability: "payable",
        type: "function",
      }],
    params:{
      note: "Thanks for your work",
    },
    msgValue: Moralis.Units.ETH(0.1)
    }
  
  await Moralis.executeFunction(options);
}
        
        
      document.getElementById("btn-login").onclick = login;
      document.getElementById("btn-logout").onclick = logOut;
      document.getElementById("btn-donate").onclick = donate;
#10

it looks like these lines don’t work properly, try to use normal quotes here and also for main.js

#11

Alright, will try that now

#12

When I used normal quotes

console2
console21366×768 78 KB

#13

This is fixed, here is the the updated codes for anyone that will have issues with the tutorial in the future.

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Vanilla Boilerplate</title>
    <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="btn-login">Moralis Metamask Login</button>
    <button id="btn-logout">Logout</button>
    <button id="btn-donate">Donate</button>
    <script src="/main.js"></script>
  </body>
</html>

// main.js

const serverUrl = "https://xxxxxxxxx.usemoralis.com:2053/server";
        const appId = "your_appId";
        Moralis.start({ serverUrl, appId });

/** Add from here down */
async function login() {
  let user = Moralis.User.current();
  if (!user) {
   try {
      user = await Moralis.authenticate({ signingMessage: "Hello World!" })
      await Moralis.enableWeb3();
      console.log(user)
      console.log(user.get('ethAddress'))
   } catch(error) {
     console.log(error)
   }
  }
}

async function logOut() {
  await Moralis.User.logOut();
  console.log("logged out");
}

async function donate() {
  let options = {
    contractAddress: "0x356d2E7a0d592bAd95E86d19479c37cfdBb68Ab9",
    functionName: "newDonation",
    abi: [
      {
        inputs: [
          { internalType: "string", name: "note", type: "string" },
        ],
        name: "newDonation",
        outputs: [],
        stateMutability: "payable",
        type: "function",
      },
    ],
    params: {
      note: "Thanks for your work",
    },
    msgValue: Moralis.Units.ETH(0.1),
  };
  await Moralis.executeFunction(options);
}

document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;
document.getElementById("btn-donate").onclick = donate;
#14

Yes, Everything seems to be fine, try get some test tokens to test it out

#15

You can also put your code here in a try...catch block , it will help log for possible errors