小明這週已經將大部分的智能合約功能實作與測試完成，但仍需搭配前端UI才能進行展示。故這幾天開始進行前端UI的實作，今天先完成了 Admin 管理者功能的前端功能。

新增代幣 HTML

<div class="panel panel-default">
    <div class="panel-heading">新增代幣至交易所</div>
    <div class="panel-body">
        <form>
            <div class="form-group">
                <label for="inputNameTokenAddExchange">代幣名稱</label>
                <input type="text" name="inputNameTokenAddExchange" class="form-control" id="inputNameTokenAddExchange" placeholder="FIXED">
            </div>
            <div class="form-group">
                <label for="inputAddressTokenAddExchange">代幣合約地址</label>
                <input type="text" class="form-control" id="inputAddressTokenAddExchange" name="inputAddressTokenAddExchange" placeholder="e.g. 0x123ABde44...">
            </div>
                <button type="button" class="btn btn-default" onclick="App.addTokenToExchange();return false;">新增代幣</button>
        </form>

    </div>
</div>

新增代幣 JavaScript

var ExchangeContract = contract(exchange_artifacts);

ExchangeContract.setProvider(web3.currentProvider);

addTokenToExchange: function () {

    var nameOfToken = document.getElementById("inputNameTokenAddExchange").value;
    var addressOfToken = document.getElementById("inputAddressTokenAddExchange").value;
    ExchangeContract.deployed().then(function (instance) {
        return instance.addToken(nameOfToken, addressOfToken, {from: account});
    }).then(function (txResult) {
        console.log(txResult);
        App.setStatus("Token added");
    }).catch(function (e) {
        console.log(e);
        App.setStatus("Error getting balance; see log.");
    });
}

本文同時發佈於作者部落格：https://www.bdetw.com/blog

想找區塊鏈人才或想學習區塊鏈知識的夥伴。歡迎參加社群小聚，一起來輕鬆交流、互相學習成長、認識新朋友、發現新機會！
　
台北區塊鏈社群
https://bitlly.co/Q4dIK
　
BDE 區塊鏈學院 - 提供專業的區塊鏈培訓與顧問服務。
https://bitlly.co/mbDwX