iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0
Blockchain

區塊鏈應用開發實戰系列 第 29

29. 去中心化交易所管理者前端功能實作

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

https://ithelp.ithome.com.tw/upload/images/20181105/20111706g6f2aXA1jh.png

新增代幣 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


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


上一篇
28. 去中心化交易所用戶取消下單功能實作
下一篇
30. 去中心化交易所用戶前端存提代幣功能實作
系列文
區塊鏈應用開發實戰30

尚未有邦友留言

立即登入留言