Loading...
So to connect smart contract with front end we require web3 library or web3.min.js file which you can download by simply running one npm command
npm install web3
pragma solidity >=0.7.0 <0.9.0;
contract Storage {
uint256 number;
function store(uint256 num) public {
number = num;
}
function retrieve() public view returns (uint256){
return number;
}
}
In above smart contract we have two functions one is store which simply stores the number and sencond function is retrieve which return that number. To connect above contract with front end refer following code.
<!DOCTYPE html>
<html>
<head>
<title>HI</title>
<script src="./web3.min.js"></script>
</head>
<body>
<p>HI </p>
<script >
window.onload=async function(){
var abi=[
{
"constant": true,
"inputs": [],
"name": "retreive",
"outputs": [
{
"internalType": "uint256",
"name": "",
"type": "uint256"
}
],
"payable": false,
"stateMutability": "view",
"type": "function"
},
{
"constant": false,
"inputs": [
{
"internalType": "uint256",
"name": "_data",
"type": "uint256"
}
],
"name": "store",
"outputs": [
{
"internalType": "string",
"name": "",
"type": "string"
}
],
"payable": false,
"stateMutability": "nonpayable",
"type": "function"
}
]
var address='0x49a3273A57bc7bd3e784f2BA3f66cCF2197160ae'
if(window.ethereum){
var accounts=await ethereum.request({method :'eth_requestAccounts'});
var web3 = new Web3(window.ethereum);
var contract = new web3.eth.Contract(abi,address);
console.log(contract);
const result=await contract.methods.store(456).send({ from:accounts[0] });
console.log(result);
const result2 = await contract.methods.retreive().call();
console.log(result2);
}
else{
console.log("No metamask detected");
}
}
</script>
</body>
</html>
In above code I have included web3.min.js file to access web3 functions.
To access our smart contract we require two things which are contract ABI and contract ADDRESS . If you are running smart contract on remix then ABI is automatically generated whe simply have to copy and paste that ABI ,which is in the form JSON. And contract address is also required which we get after deploying smart contract.
Now coming towards the code In the if statement we have code like if(window.ethereum) it simply checks whether our browser has metamask extension or metamask is installed or not , if not then it just prints code present in the else statement.
If our browser has the metamask connection then it comes in if block.
In if block I have written a line
var accounts=await ethereum.request({method :'eth_requestAccounts'});
it simply gets the accounts of metamask which are connected. and all account address are stored in the accounts in the form of array.
On the next line we have creating the instance of web3
var web3 = new Web3(window.ethereum);
after creating instance we can access to our smart contract by simply running one function.
var contract = new web3.eth.Contract(abi,address);
Now our contract details are stored in the contract variable we can have access to smart contract functions by simply typing contract.methos.methodname
In the next line we have written a code to access our store function which is present in the smart contract.
const result=await contract.methods.store(456).send({ from:accounts[0] });
Now if we run our smart contract function retreive() then it simply return a value 456 because we have modified the number variable simply running above function.this method return us a promise but instead of that we can use async await which stopes further execution of programme until this method is completed.
If we want to retreive value of varible number through this function then we can use
const result2 = await contract.methods.retreive().call();
which gives us value of number varible as return.
Notice that in the first function call we have used send() method beacause we are modifying the state of smart contract and also passed the account address that who is modifying the state. but in the second function we have used call() methos because we are just reading the value.
so if we have a function which modifying the data in smart contract we must use send() function and if we just reading the data then we cas use call() method.