1. Home
  2. Docs
  3. SmartContracts
  4. SmartContracts Tutorials
  5. Call SmartContract methods from web

Call SmartContract methods from web

First you must create and deploy a SMART-CONTRACT in the Ethereum Test Net, you can follow these instructions:

This post is based in the information of the previous post:

To start, we have hosted a WordPress site and we want to create a “button” to interact with an Ethereum Smart-contract.

In this case, we will create a button to call the method “transfer”, it will transfer 88,88 tokens through MetaMask (it’s a Google Chrome Plugin). The code is inserted in a page of WordPress.

Then, we can start to create the WordPress page and insert the Javascript code.

Captura de pantalla 2017-12-27 a las 14.12.28

The code:

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273<script src="http://rawgit.com/ethereum/web3.js/0.16.0/dist/web3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/ethjs@0.3.0/dist/ethjs.min.js"></script><script>window.addEventListener('load', function() {// Check if Web3 has been injected by the browser:if (typeof web3 !== 'undefined') {// You have a web3 browser! Continue below!startApp(web3);//alert("Web3");} else {//alert("No hay web3");// Warn the user that they need to get a web3 browser// Or install MetaMask, maybe with a nice graphic.}})const abi = [{"constant": false,"inputs": [{"name": "_to","type": "address"},{"name": "_value","type": "uint256"}],"name": "transfer","outputs": [{"name": "success","type": "bool"}],"payable": false,"type": "function"}]const contract_address = '0xf035755df96ad968a7ad52c968dbe86d52927f5b'const etherValue = web3.toWei(10, 'ether');var address = '0x91612055A68aD74A6e756615941Ac59e9220A940'function startApp(web3) {//alert("entro");const eth = new Eth(web3.currentProvider)const token = eth.contract(abi).at(contract_address);listenForClicks(token,web3)//alert("llego");}function listenForClicks (miniToken, web3) {var button = document.querySelector('button.transferFunds')web3.eth.getAccounts(function(err, accounts) { console.log(accounts); address = accounts.toString(); })button.addEventListener('click', function() {miniToken.transfer(contract_address, '88888888888888888888', { from: address }).then(function (txHash) {console.log('Transaction sent')console.dir(txHash)waitForTxToBeMined(txHash)}).catch(console.error)})}async function waitForTxToBeMined (txHash) {let txReceiptwhile (!txReceipt) {try {txReceipt = await eth.getTransactionReceipt(txHash)} catch (err) {return indicateFailure(err)}}indicateSuccess()}</script><button class="transferFunds">Send Money!</button>

Then we can save the page and test it! (Remember to change the contract address and the amount of tokens to transfer!.. also to connect the MetaMask plugin!)

Captura de pantalla 2017-12-27 a las 14.19.34

Once we submit the transaction, we will see in Etherscan the result of calling the method “transfer“.

Captura de pantalla 2017-12-27 a las 13.35.03
Captura de pantalla 2017-12-27 a las 13.47.31

And we will see “Transaction sent” in the Console log!

Captura de pantalla 2017-12-27 a las 14.22.36

Now we want to call the method “buy” and send some Ether in the transaction to buy tokens from our Ethereum Smart-contract (for MAAT tokens).

Then we must change the javascript code (to change the function to call and to send some Ether). See below the code:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465<script src="http://rawgit.com/ethereum/web3.js/0.16.0/dist/web3.min.js"></script><script src="https://cdn.jsdelivr.net/npm/ethjs@0.3.0/dist/ethjs.min.js"></script><script>window.addEventListener('load', function() {// Check if Web3 has been injected by the browser:if (typeof web3 !== 'undefined') {// You have a web3 browser! Continue below!startApp(web3);//alert("Web3");} else {//alert("No hay web3");// Warn the user that they need to get a web3 browser// Or install MetaMask, maybe with a nice graphic.}})const abi = [{"constant": false,"inputs": [],"name": "buy","outputs": [{"name": "success","type": "bool"}],"payable": true,"type": "function"}]const contract_address = '0xf035755df96ad968a7ad52c968dbe86d52927f5b'const etherValue = web3.toWei(10, 'ether');var address = '0x91612055A68aD74A6e756615941Ac59e9220A940'function startApp(web3) {//alert("entro");const eth = new Eth(web3.currentProvider)const token = eth.contract(abi).at(contract_address);listenForClicks(token,web3)//alert("llego");}function listenForClicks (miniToken, web3) {var button = document.querySelector('button.transferFunds')web3.eth.getAccounts(function(err, accounts) { console.log(accounts); address = accounts.toString(); })button.addEventListener('click', function() {miniToken.buy( { from: address, value: '1000000000000000000' }).then(function (txHash) {console.log('Transaction sent')console.dir(txHash)waitForTxToBeMined(txHash)}).catch(console.error)})}async function waitForTxToBeMined (txHash) {let txReceiptwhile (!txReceipt) {try {txReceipt = await eth.getTransactionReceipt(txHash)} catch (err) {return indicateFailure(err)}}indicateSuccess()}</script><button class="transferFunds">Send Money!</button>

Now we can update the wordpress page and try pushing again the “button“.

MetaMask will be opened with 1 Ether to send to the method “buy” of the contract.

Captura de pantalla 2017-12-27 a las 16.47.49

Once approved the transaction, will be visible in Etherscan with the MAAT token result for us.

Captura de pantalla 2017-12-27 a las 16.48.05
Captura de pantalla 2017-12-27 a las 16.48.53

That’s all! Very easy!

If you want to read the smart-contract source, is here (in the Ethereum Testnet)

By MrAddon

Was this article helpful to you? Yes No

How can we help?

Leave a Reply

Your email address will not be published. Required fields are marked *