How to convert contract ABI to HTML interface?

Question

How to convert ABI to HTML interface? For example:

https://oneclickdapp.com/

https://abi.hashex.org/

I want to be able to interact with my contract.

Answer 1

If you want to interact with your contract using VanillaJS, you first must include:

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

Than, if you have Metamask installed in your browser you can start with this code example I wrote:

 if (window.ethereum) {
    const accounts = await window.ethereum.request({method: 'eth_requestAccounts'});
    window.web3 = new Web3(window.ethereum);
    window.web3.eth.defaultAccount = accounts[0];
    const response = await fetch("ABI.json");
    const json = await response.json();
    window.contract = new window.web3.eth.Contract(json.abi, "0xCONTRACT_ADDRESS");
}
else{
    console.log("No metamask")
}

In the end window.contract will have the functions you need. Don't miss the "0xCONTRACT_ADDRESS" that you need to replace by your deployed contract and ABI.json that you need to have in your file system.

Note: You should run your html using http server or Metamask wouldn't inject window.ethereum