An overview on how to create a React interface for an Ethereum smart contract
Now that you understand a little about how we can connect to the blockchain, let’s dive into how the King of the Dapp smart contract works. As stated before, the contract keeps track of two variables, the first is an address known as the King and the second is an amount of Ether named kingRansom. When a user connects their Metamask account, our dapp is watching the smart contract and will display the value of both variables. Since we are only initially reading data from the blockchain, the user doesn’t incur a cost in Ether. However, if a user wants make a state change, they must submit a transaction which does cost Ether. TLDR, in Ethereum reading data is free, but writing data costs Ether.
Contract Address and ABI
In order to interact with a smart contract we are going to need to know specific two things about the contract. First, the address where the contract resides (similar to a memory address). Transactions that we are sending to update the state of the contract will addressed to the contract’s address. Second, is the contract ABI (Application Binary Interface). When a contract is deployed to the blockchain, it is compiled and stored as bytecode. The software you are using to deploy your contract should return the resulting bytecode as well as the ABI. The ABI acts as a bridge for our front end code to be able to talk to the bytecode stored at the contract address. Lastly, we are going to also need to install web.js in the project. Web3.js is a collection of javascript libraries that will allows our javascript code to talk to the Ethereum blockchain.
web3.js docs
// Contract Address on Ropsten
0x2800cC9F11E0956B20FE48FcC8b69db310D93f02// Contract ABI[],"payable":false,"stateMutability":"view","type":"function"},],"payable":false,"stateMutability":"view","type":"function"},,,,,],"name":"Coronation","type":"event"}];
Since we have both the address and the ABI, we can now use web3.js to create a new instance of this contract in our application.
const contract = new web3.eth.Contract(abi, contractAddress);
Looking at the image above, under contract.methods you can see that we now have access to the methods that were defined in the contract ABI. The methods that we are most interested in are King, kingRansom, and becomeKing. King and kingRansom are both getter methods that will read the state of those corresponding values from the contract’s storage. While becomeKing is a method that will allow a user to lock up Ether and have their address changed to the King as long as the amount they locked up is at least 0.1 ETH greater than the current kingRansom. If it is not at least 0.1 ETH greater, then the transaction will fail the and state of the contract will not change. The Ether that was proposed to be locked up will be returned to the user’s account, however, the transaction fee that was appended to the transaction will not be refunded. In Ethereum, when the transaction is picked up by a miner and attempted to be executed, but fails the miner still keeps the transaction fee.
Contract Overview
Published at Sat, 16 Nov 2019 03:23:06 +0000
{flickr|100|campaign}
