ziogaschr/web3-ebakus-examples.html

## web3-ebakus-examples.html
<!DOCTYPE html>
<html>

<head>
  <title>Ebakus examples</title>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />

  <script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.2.6/dist/web3.min.js"></script>
  <script src="https://unpkg.com/web3-ebakus"></script>

  <script>
    document.addEventListener("DOMContentLoaded", function () {
      window.web3 = Web3Ebakus(new Web3('wss://ws.ebakus-testnet.com'))

      // simply create a dumb account for playing
      var account = web3.eth.accounts.create()
      web3.eth.accounts.wallet.add(account)
    })

    function readAbi(abiForAddress) {
      var calledFromAnotherFunc = !!abiForAddress

      var systemContractAddress = '0x0000000000000000000000000000000000000101'
      var minSystemContractABI = [
        {
          "stateMutability": "view",
          "payable": false,
          "outputs": [
            {
              "type": "string",
              "name": "abi"
            }
          ],
          "type": "function",
          "inputs": [
            {
              "type": "address",
              "name": "address"
            }
          ],
          "constant": true,
          "name": "getAbiForAddress"
        }
      ]

      var systemContractAddress = '0x0000000000000000000000000000000000000101';
var stakeSystemContractABI = [{"inputs":[{"name":"amount","type":"uint64"}],"name":"stake","outputs":[],"stateMutability":"nonpayable","type":"function"}];
var systemContract = new web3.eth.Contract(stakeSystemContractABI, systemContractAddress)

var account = '0x3fe4fd89361aa0fdbf36a152142fdbc988ab5198';

web3.eth.getBalance(account).then(function(balance) {
  var stakeAmount = parseInt(1 * 10000);

  systemContract.methods.stake(stakeAmount).send({from: account})
      .then(function (receipt) {
          console.log('Tx receipt', receipt)
      })
})


      // var systemContract = new web3.eth.Contract(minSystemContractABI, systemContractAddress)

      // if (!calledFromAnotherFunc) {
      //   abiForAddress = document.getElementById('abiForAddress').value
      // }

      // return systemContract.methods.getAbiForAddress(abiForAddress).call()
      //   .then(function (abi) {
      //     abi = JSON.parse(abi)
      //     console.log('System contract ABI', abi)

      //     printToOutput(`ABI for address "${abiForAddress}"`, JSON.stringify(abi, null, 4))

      //     return abi
      //   })
    }

    function sendTx() {
      var from = web3.eth.accounts.wallet[0].address

      var to = document.getElementById('address').value
      var value = document.getElementById('amount').value

      var tx = {
        from: from,
        to: to,
        value: value
      }

      web3.eth.suggestDifficulty(from)
        .then(function (difficulty) {
          return web3.eth.calculateWorkForTransaction(tx, difficulty)
        })
        .then(function (txWithPow) {
          return web3.eth.sendTransaction(txWithPow)
        })
        .then(function (receipt) {
          console.log('Tx receipt', receipt)

          printToOutput(`Receipt for transaction`, JSON.stringify(receipt, null, 4))
        })
    }

    function getContractMethodTxData() {
      var contractAddress = document.getElementById('contractAddress').value
      var method = document.getElementById('method').value
      var params = document.getElementById('params').value
      var args = params != '' ? params.split(',') : []
      if (args.length > 0) {
        args = JSON.parse(args)
      }

      readAbi(contractAddress)
        .then(function (abi) {
          var contract = new web3.eth.Contract(abi, contractAddress)
          var data = contract.methods[method](args).encodeABI()
          printToOutput(`Data for calling method "${method}" at contract "${contractAddress}"`, `'${data}'`, true)
          printToOutput(`Example web3.js sendTransaction:`, `
          var from = web3.eth.accounts.wallet[0].address
          web3.eth.suggestDifficulty(from)
            .then(function (difficulty) {
              return web3.eth.calculateWorkForTransaction({
                from: from,
                to: '${contractAddress}',
                data: '${data}'
              }, difficulty)
            })
            .then(function (txWithPow) {
              return web3.eth.sendTransaction(txWithPow)
            })
            .then(function (receipt) {
              console.log('Tx receipt', receipt)
            })
          `, true)
        })
        .catch(function (err) {
          document.getElementById('output').innerHTML = `Error: \n\n${err.message}`
          printToOutput(`Error: \n\n${err.message}`, true)
        })
    }

    function printToOutput(title, data, append) {
      var root = document.getElementById('output')

      if (!append) root.innerHTML = ''

      var li = document.createElement('li')

      var heading = document.createElement('strong')
      heading.appendChild(document.createTextNode(title))
      li.appendChild(heading);

      var content = document.createElement('pre')
      content.appendChild(document.createTextNode(data))
      li.appendChild(content);


      root.appendChild(li);
    }
  </script>

  <style>
    input {
      min-width: 300px;
    }

    textarea {
      min-width: 500px;
      min-height: 80px;
    }

    pre {
      width: 96%;
      padding: 2%;
      white-space: pre-wrap;
      word-wrap: break-word;
      background-color: #eee;
    }
  </style>
</head>

<body>
  <h1>
    Ebakus examples
  </h1>

  <hr />

  <h2>1. Read ABI</h2>

  <input type="text" id="abiForAddress" name="abiForAddress" value="0x0000000000000000000000000000000000000101" />
  <button onClick="readAbi()">Fetch</button>

  <h2>2. Send some Ebakus</h2>

  <label for="address"> To (Address) </label>
  <input type="text" id="address" name="address" placeholder="i.e. 0xfbb1b73c4f0bda4f67dca266ce6ef42f520fbb98" />

  <label for="amount"> Amount </label>
  <input type="number" id="amount" name="amount" step="any" placeholder="0.0" />

  <button onClick="sendTx()">Send transaction</button>

  <h2>3. Get transaction data for a contract method</h2>
  <p><em>Example values are set for voting. Feel free to change them.</em></p>

  <p>
    <label for="contractAddress"> Contract Address </label>
    <input type="text" id="contractAddress" name="contractAddress" value="0x0000000000000000000000000000000000000101" />
  </p>

  <p>
    <label for="method"> Contract method </label>
    <input type="text" id="method" name="method" value="vote" />
  </p>

  <p>
    <label for="params"> Method params </label>
    <textarea type="text" id="params"
      name="params">["0x0000000000000000000000000000000000000103","0x0000000000000000000000000000000000000104"]</textarea>
  </p>

  <button onClick="getContractMethodTxData()">Get Tx data</button>

  <hr />

  <h3>Output (scroll down to see all steps):</h3>
  <ol id="output"></ol>
</body>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Ebakus examples</title>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />

	<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js@1.2.6/dist/web3.min.js"></script>
	<script src="https://unpkg.com/web3-ebakus"></script>

	<script>
	document.addEventListener("DOMContentLoaded", function () {
	window.web3 = Web3Ebakus(new Web3('wss://ws.ebakus-testnet.com'))

	// simply create a dumb account for playing
	var account = web3.eth.accounts.create()
	web3.eth.accounts.wallet.add(account)
	})

	function readAbi(abiForAddress) {
	var calledFromAnotherFunc = !!abiForAddress

	var systemContractAddress = '0x0000000000000000000000000000000000000101'
	var minSystemContractABI = [
	{
	"stateMutability": "view",
	"payable": false,
	"outputs": [
	{
	"type": "string",
	"name": "abi"
	}
	],
	"type": "function",
	"inputs": [
	{
	"type": "address",
	"name": "address"
	}
	],
	"constant": true,
	"name": "getAbiForAddress"
	}
	]

	var systemContractAddress = '0x0000000000000000000000000000000000000101';
	var stakeSystemContractABI = [{"inputs":[{"name":"amount","type":"uint64"}],"name":"stake","outputs":[],"stateMutability":"nonpayable","type":"function"}];
	var systemContract = new web3.eth.Contract(stakeSystemContractABI, systemContractAddress)

	var account = '0x3fe4fd89361aa0fdbf36a152142fdbc988ab5198';

	web3.eth.getBalance(account).then(function(balance) {
	var stakeAmount = parseInt(1 * 10000);

	systemContract.methods.stake(stakeAmount).send({from: account})
	.then(function (receipt) {
	console.log('Tx receipt', receipt)
	})
	})


	// var systemContract = new web3.eth.Contract(minSystemContractABI, systemContractAddress)

	// if (!calledFromAnotherFunc) {
	// abiForAddress = document.getElementById('abiForAddress').value
	// }

	// return systemContract.methods.getAbiForAddress(abiForAddress).call()
	// .then(function (abi) {
	// abi = JSON.parse(abi)
	// console.log('System contract ABI', abi)

	// printToOutput(`ABI for address "${abiForAddress}"`, JSON.stringify(abi, null, 4))

	// return abi
	// })
	}

	function sendTx() {
	var from = web3.eth.accounts.wallet[0].address

	var to = document.getElementById('address').value
	var value = document.getElementById('amount').value

	var tx = {
	from: from,
	to: to,
	value: value
	}

	web3.eth.suggestDifficulty(from)
	.then(function (difficulty) {
	return web3.eth.calculateWorkForTransaction(tx, difficulty)
	})
	.then(function (txWithPow) {
	return web3.eth.sendTransaction(txWithPow)
	})
	.then(function (receipt) {
	console.log('Tx receipt', receipt)

	printToOutput(`Receipt for transaction`, JSON.stringify(receipt, null, 4))
	})
	}

	function getContractMethodTxData() {
	var contractAddress = document.getElementById('contractAddress').value
	var method = document.getElementById('method').value
	var params = document.getElementById('params').value
	var args = params != '' ? params.split(',') : []
	if (args.length > 0) {
	args = JSON.parse(args)
	}

	readAbi(contractAddress)
	.then(function (abi) {
	var contract = new web3.eth.Contract(abi, contractAddress)
	var data = contract.methods[method](args).encodeABI()
	printToOutput(`Data for calling method "${method}" at contract "${contractAddress}"`, `'${data}'`, true)
	printToOutput(`Example web3.js sendTransaction:`, `
	var from = web3.eth.accounts.wallet[0].address
	web3.eth.suggestDifficulty(from)
	.then(function (difficulty) {
	return web3.eth.calculateWorkForTransaction({
	from: from,
	to: '${contractAddress}',
	data: '${data}'
	}, difficulty)
	})
	.then(function (txWithPow) {
	return web3.eth.sendTransaction(txWithPow)
	})
	.then(function (receipt) {
	console.log('Tx receipt', receipt)
	})
	`, true)
	})
	.catch(function (err) {
	document.getElementById('output').innerHTML = `Error: \n\n${err.message}`
	printToOutput(`Error: \n\n${err.message}`, true)
	})
	}

	function printToOutput(title, data, append) {
	var root = document.getElementById('output')

	if (!append) root.innerHTML = ''

	var li = document.createElement('li')

	var heading = document.createElement('strong')
	heading.appendChild(document.createTextNode(title))
	li.appendChild(heading);

	var content = document.createElement('pre')
	content.appendChild(document.createTextNode(data))
	li.appendChild(content);


	root.appendChild(li);
	}
	</script>

	<style>
	input {
	min-width: 300px;
	}

	textarea {
	min-width: 500px;
	min-height: 80px;
	}

	pre {
	width: 96%;
	padding: 2%;
	white-space: pre-wrap;
	word-wrap: break-word;
	background-color: #eee;
	}
	</style>
	</head>

	<body>
	<h1>
	Ebakus examples
	</h1>

	<hr />

	<h2>1. Read ABI</h2>

	<input type="text" id="abiForAddress" name="abiForAddress" value="0x0000000000000000000000000000000000000101" />
	<button onClick="readAbi()">Fetch</button>

	<h2>2. Send some Ebakus</h2>

	<label for="address"> To (Address) </label>
	<input type="text" id="address" name="address" placeholder="i.e. 0xfbb1b73c4f0bda4f67dca266ce6ef42f520fbb98" />

	<label for="amount"> Amount </label>
	<input type="number" id="amount" name="amount" step="any" placeholder="0.0" />

	<button onClick="sendTx()">Send transaction</button>

	<h2>3. Get transaction data for a contract method</h2>
	<p><em>Example values are set for voting. Feel free to change them.</em></p>

	<p>
	<label for="contractAddress"> Contract Address </label>
	<input type="text" id="contractAddress" name="contractAddress" value="0x0000000000000000000000000000000000000101" />
	</p>

	<p>
	<label for="method"> Contract method </label>
	<input type="text" id="method" name="method" value="vote" />
	</p>

	<p>
	<label for="params"> Method params </label>
	<textarea type="text" id="params"
	name="params">["0x0000000000000000000000000000000000000103","0x0000000000000000000000000000000000000104"]</textarea>
	</p>

	<button onClick="getContractMethodTxData()">Get Tx data</button>

	<hr />

	<h3>Output (scroll down to see all steps):</h3>
	<ol id="output"></ol>
	</body>

	</html>