This post is the continuation of the previous post:

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:


<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 txReceipt
 while (!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

Advertisements
Posted by:.

10 replies on “How to call methods of Ethereum Smart-Contracts from WordPress with MetaMask, Web3 and Javascript (PART II)

    1. In the instruction:
      button.addEventListener(‘click’, function() {
      miniToken.buy(

      { from: address, value: ‘1000000000000000000’ }
      )

      where value: ’10..0′ you can place a variable and fill the variable using javascript in the beginning of the code.

      You can use “prompt” javascript standard function to ask the user for the amount of ether

      Like

  1. Hi is this still working? I get USD format instead of ETH and without setting up the value of ETH i want to send. It’s just the gas fee and total that shows. I just copied your code but it doesn’t work for me. Thanks in advance.

    Liked by 1 person

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s