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.
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": "_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 txReceipt while (!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!)
Once we submit the transaction, we will see in Etherscan the result of calling the method “transfer“.
And we will see “Transaction sent” in the Console log!
Post by MrAddon
Hi, thanks for this. I have a questions, can the user enter the amount they want?
Im using a points system, I need a user to be able to deposit my token into the points system and withdraw as well.
Can I make this work?
Thanks.
LikeLiked by 2 people
In the example of the post no, but you can do a small change in the Javascript to allow this.
For example, you can do a “prompt” to the user to fill the amount, then obtain the result of the prompt and set as “Amount”.
I recommend to read the second part of the post: https://mraddon.blog/2017/12/27/how-to-call-methods-of-ethereum-smart-contracts-from-wordpress-with-metamask-web3-and-javascript-part-ii/
Best regards
LikeLike
Thanks I read that last night.
LikeLiked by 1 person
It is possible to create a standard ERC-20 token with a WordPress plugin:
https://wpsmartcontracts.com
LikeLike
Muy interesante Dario!
LikeLike