Interact with Smart Contract

kapitankot · December 26, 2022, 1:22pm

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

cryptokid · February 11, 2022, 11:05am

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

kapitankot · February 11, 2022, 11:12am

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.

cryptokid · February 11, 2022, 11:13am

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

YosephKS · February 11, 2022, 11:16am

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

kapitankot · February 11, 2022, 11:17am

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

kapitankot · February 11, 2022, 11:49am

Okay so for the index.html

<!-- index.html -->

<!DOCTYPE html>
<html>
  <head>
    <title>Vanilla Boilerplate</title>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/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

YosephKS · February 11, 2022, 12:10pm

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.

kapitankot · February 11, 2022, 12:14pm

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

YosephKS · February 11, 2022, 12:31pm

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

kapitankot · February 11, 2022, 1:24pm

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

YosephKS · February 11, 2022, 1:31pm

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

kapitankot · February 11, 2022, 1:55pm

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.