Interact with Smart Contract

Moralis General
#1

Hey!

I would like to interact with my smart contract through my simple website where user click a button and receive tokens. Something like a faucet.

For a smart contract I used OpenZeppelin library. Code below.

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.2;

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract MyToken is ERC20 {
    constructor() ERC20("MyToken", "MTK") {
        _mint(msg.sender, 1000000 * 10 ** decimals());
    }

    function mint(address to, uint256 amount) external payable {
        _mint(to, amount);
    }
}

To interact I used the Moralis tutorial " Interact with Smart Contracts through your website (JS and REACT tutorial) "

when I set params: {
amount: 100 - this works fine and set it to 100.

but console shows me an error I need to specity “to” which is obvious. When i set “to” and address it works, but how to set “to” as a person who’s calling/clicking the button ?

Waiting for answer. Thanks

#2

You need to get the address from current wallet. You would need to use Moralis.enableWeb3 first

#3

Already done this. await Moralis.enableWeb3(); still i receive a message from console that " To, is required "

Basically everything works besides the To: in Params. I want it to be accessed by everyone, not just hard coded address.

#4

After you use that, you have to get the address from that it returns
It returns an web3 object or etherjs object depending on the sdk version that you use

1 Like
#5

the issue is probably you need to add to params in Moralis.executeFunction

btw can you show some code if you still get the issue? will be much easier to point things out

#6

Sure. Trying now everything from scratch and will send a code in a moment :slight_smile: Thank You

#7

Okay so for the index.html

<!-- 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-mint">Mint</button>
    <script src="/main.js"></script>
  </body>
</html>

Main.js file

// main.js

const serverUrl = "https://afk9sqf1jrbk.usemoralis.com:2053/server";
const appId = "ZQJUP1wv7GVAjnbFHokNO9i6CG2ibBDlGHNziZC1";
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 mint(){

  let options = {
    contractAddress:"0xB7c34156e959116A5B53a4DEB2787eFec1e42FF1",
    functionName:"mint",
    abi:[
      {
        "inputs": [],
        "stateMutability": "nonpayable",
        "type": "constructor"
      },
      {
        "anonymous": false,
        "inputs": [
          {
            "indexed": true,
            "internalType": "address",
            "name": "owner",
            "type": "address"
          },
          {
            "indexed": true,
            "internalType": "address",
            "name": "spender",
            "type": "address"
          },
          {
            "indexed": false,
            "internalType": "uint256",
            "name": "value",
            "type": "uint256"
          }
        ],
        "name": "Approval",
        "type": "event"
      },
      {
        "inputs": [
          {
            "internalType": "address",
            "name": "spender",
            "type": "address"
          },
          {
            "internalType": "uint256",
            "name": "amount",
            "type": "uint256"
          }
        ],
        "name": "approve",
        "outputs": [
          {
            "internalType": "bool",
            "name": "",
            "type": "bool"
          }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
      },
      {
        "inputs": [
          {
            "internalType": "address",
            "name": "spender",
            "type": "address"
          },
          {
            "internalType": "uint256",
            "name": "subtractedValue",
            "type": "uint256"
          }
        ],
        "name": "decreaseAllowance",
        "outputs": [
          {
            "internalType": "bool",
            "name": "",
            "type": "bool"
          }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
      },
      {
        "inputs": [
          {
            "internalType": "address",
            "name": "spender",
            "type": "address"
          },
          {
            "internalType": "uint256",
            "name": "addedValue",
            "type": "uint256"
          }
        ],
        "name": "increaseAllowance",
        "outputs": [
          {
            "internalType": "bool",
            "name": "",
            "type": "bool"
          }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
      },
      {
        "inputs": [
          {
            "internalType": "address",
            "name": "to",
            "type": "address"
          },
          {
            "internalType": "uint256",
            "name": "amount",
            "type": "uint256"
          }
        ],
        "name": "mint",
        "outputs": [],
        "stateMutability": "payable",
        "type": "function"
      },
      {
        "inputs": [
          {
            "internalType": "address",
            "name": "to",
            "type": "address"
          },
          {
            "internalType": "uint256",
            "name": "amount",
            "type": "uint256"
          }
        ],
        "name": "transfer",
        "outputs": [
          {
            "internalType": "bool",
            "name": "",
            "type": "bool"
          }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
      },
      {
        "anonymous": false,
        "inputs": [
          {
            "indexed": true,
            "internalType": "address",
            "name": "from",
            "type": "address"
          },
          {
            "indexed": true,
            "internalType": "address",
            "name": "to",
            "type": "address"
          },
          {
            "indexed": false,
            "internalType": "uint256",
            "name": "value",
            "type": "uint256"
          }
        ],
        "name": "Transfer",
        "type": "event"
      },
      {
        "inputs": [
          {
            "internalType": "address",
            "name": "from",
            "type": "address"
          },
          {
            "internalType": "address",
            "name": "to",
            "type": "address"
          },
          {
            "internalType": "uint256",
            "name": "amount",
            "type": "uint256"
          }
        ],
        "name": "transferFrom",
        "outputs": [
          {
            "internalType": "bool",
            "name": "",
            "type": "bool"
          }
        ],
        "stateMutability": "nonpayable",
        "type": "function"
      },
      {
        "inputs": [
          {
            "internalType": "address",
            "name": "owner",
            "type": "address"
          },
          {
            "internalType": "address",
            "name": "spender",
            "type": "address"
          }
        ],
        "name": "allowance",
        "outputs": [
          {
            "internalType": "uint256",
            "name": "",
            "type": "uint256"
          }
        ],
        "stateMutability": "view",
        "type": "function"
      },
      {
        "inputs": [
          {
            "internalType": "address",
            "name": "account",
            "type": "address"
          }
        ],
        "name": "balanceOf",
        "outputs": [
          {
            "internalType": "uint256",
            "name": "",
            "type": "uint256"
          }
        ],
        "stateMutability": "view",
        "type": "function"
      },
      {
        "inputs": [],
        "name": "decimals",
        "outputs": [
          {
            "internalType": "uint8",
            "name": "",
            "type": "uint8"
          }
        ],
        "stateMutability": "view",
        "type": "function"
      },
      {
        "inputs": [],
        "name": "name",
        "outputs": [
          {
            "internalType": "string",
            "name": "",
            "type": "string"
          }
        ],
        "stateMutability": "view",
        "type": "function"
      },
      {
        "inputs": [],
        "name": "symbol",
        "outputs": [
          {
            "internalType": "string",
            "name": "",
            "type": "string"
          }
        ],
        "stateMutability": "view",
        "type": "function"
      },
      {
        "inputs": [],
        "name": "totalSupply",
        "outputs": [
          {
            "internalType": "uint256",
            "name": "",
            "type": "uint256"
          }
        ],
        "stateMutability": "view",
        "type": "function"
      }
    ],
    params:{
      amount: 100
    }
  }
  await Moralis.executeFunction(options);
}

document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;
document.getElementById("btn-mint").onclick = mint;

I didn’t set the TO: as i don’t know what to put in here. When i set To: and address it works perfectly and it sends 100 tokens to a hard coded address, but how to make it access by anyone ?

I got the error

1
11110×48 15.6 KB

#8

Alright great, so in the options you just need to add to in the params

const options = {
   // all the same as yours no changes
  params: {
    amount: 100,
    to: "address you want to mint to"
  }
}

Also another note, I’m not sure what’s the decimal of the token, but if it is 18, then you might wanna convert amount to 100 * 10 ** 18 coz it needs the wei value.

#9

Thank You for answer, but how to make it accessible by anyone ? I don’t want to hard code an address here. Thanks

#10

then you should be able to get the address from Moralis.enableWeb3 response depending on which version of the SDK you use:

  • version >=1.0.0: ethersjs
  • version 0.0.0 - 0.0.184: web3js
#11

Still need to specify the To: in the params. Maybe i need to change something in the solidity smart contract ?

#12

If you would like to you can, but as you see in your solidity code, there are two parameters to and amount, if you wanna remove one of it, feel free to

Just understand what’s the consequence, especially for minting possibly you don’t want to let everyone to mint the token

1 Like
#13

Thank You guys for all the answers. I believe my problem is with the smart contract itself. I have just set the to in the _mint function which in my case is not necessary there.

1 Like