如何實現一鍵調用以太坊智能合約？
有人問如何用按鈕調用智能合約，在這篇文章中，我將給出一個簡單但有希望有效的演示，說明JavaScript開發人員如何創建一個能夠調用智能合約的網頁，并通過單擊即可向其匯款（以太幣）。
要做到這一點，用戶將需要使用支持Web3的瀏覽器，因此可以使用像Parity或Mist這樣的可安裝瀏覽器，或者他們可以使用像MetaMask這樣的瀏覽器擴展。
此外，雖然我可以教你如何直接使用web3API，但我將教你如何使用一個新的很方便的庫與以太網智能合約EthJS交互。
你的網站需要等待ready事件，然后檢查全局web3對象。看起來像這樣：
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);
} else {
// Warn the user that they need to get a web3 browser
// Or install MetaMask, maybe with a nice graphic.
})
從MetaMask開發人員指南中復制。
在這個例子中，我假設你正在使用像Browserify或Webpack這樣的JavaScript捆綁器，并且知道如何從NPM安裝模塊。
在你的應用程序設置中，你將使用一些不同的ethjs模塊，你將使用全局web3對象的currentProvider屬性初始化它們，這就是它與區塊鏈的對話方式。
const Eth = require('ethjs-query')
const EthContract = require('ethjs-contract')
function startApp(web3) {
const eth = new Eth(web3.currentProvider)
const contract = new EthContract(eth)
initCon
一旦實例化了合約，就可以使用它來創建對網絡上實時合約的引用。要做到這一點，你需要兩件事：
合約地址。
合約ABI。
ABI是應用程序二進制接口，它告訴你的JavaScript如何與智能合約通信。它只是描述合約方法的JSON數據。
通常，如果你發布合約，你知道如何獲得ABI，如果你要與其他人簽訂合約，他們應該提供ABI，盡管有時候你可以找到與Etherscan等區塊瀏覽器的合約相匹配的ABI。
假設你有可用的ABI和地址，并了解我們現在如何創建合約對象。在這個例子中，我將使用僅包含Token標準中的transfer(to,value)方法的ABI：
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 address = '0xdeadbeef123456789000000000000'
function initContract (contract) {
const MiniToken = contract(abi)
const miniToken = MiniToken.at(address)
listenForClicks(miniToken)
}
現在我們已經為智能合約初始化了一個JavaScript接口，所以我們只需要創建一個小HTML。
<button class="transferFunds">Send Money!</button>
還有一點JavaScript來響應點擊，并發送這些資金：
function listenForClicks (miniToken) {
var button = document.querySelector('button.transferFunds')
button.addEventListener('click', function() {
miniToken.transfer(toAddress, value, { from: addr })
.then(function (txHash) {
console.log('Transaction sent')
console.dir(txHash)
waitForTxToBeMined(txHash)
})
.catch(console.error)
})
}
請注意，如果此交易也發送以太，你將向包含from字段的選項哈希添加value：'10000'。該值以wei為單位，為1x10 ^ -18以太。轉換的簡單方法是這樣的：
var inWei = web3.toWei('10', 'ether')
對于普通的Web開發人員來說，一個奇怪的部分是交易響應并不意味著交易現在已經完成，它只是意味著它已經被傳輸到網絡。它仍然需要被挖掘，而在以太坊中，平均需要大約14秒（阻斷時間，查看EthStats.net上的統計數據）。
現在還沒有很好的訂閱方法可以等待挖掘交易，所以你需要用收到的txHash進行輪詢。是的，這很乏味，所以我會告訴你如何使用新的JavaScript async/await模式來減少痛苦：
async function waitForTxToBeMined (txHash) {
let txReceipt
while (!txReceipt) {
try {
txReceipt = await eth.getTransactionReceipt(txHash)
} catch (err) {
return indicateFailure(err)
}
}
indicateSuccess()
}
如此而已！