小明今天繼續完成用戶存提代幣的前端功能

存入代幣 HTML

<div class="col-lg-6">
    <div class="panel panel-default panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">存入代幣</h3>
        </div>
        <div class="panel-body">
            <form>
                <div class="form-group">
                    <label for="inputNameDepositToken">代幣名稱</label>
                    <input type="text" name="inputNameDepositToken" class="form-control" id="inputNameDepositToken" placeholder="e.g. FIXED">
                </div>
                <div class="form-group">
                    <label for="inputAmountDepositToken">代幣數量</label>
                    <input type="number" name="inputAmountDepositToken" class="form-control" id="inputAmountDepositToken" placeholder="e.g., 95">
                </div>

            </form>
        </div>

        <div class="panel-footer">
            <button type="button" class="btn btn-default" onclick="App.depositToken();return false;">確認</button>
        </div>
    </div>
</div>

存入代幣 JavaScript

depositToken: function() {
  //deposit token function

  var amountToken = document.getElementById("inputAmountDepositToken").value;
  var nameToken = document.getElementById("inputNameDepositToken").value;
  var exchangeInstance;
  ExchangeContract.deployed().then(function(instance) {
    exchangeInstance = instance;
    return exchangeInstance.depositToken(nameToken, amountToken, {from: account, gas: 4500000});
  }).then(function(txResult) {
    console.log(txResult);
    App.refreshBalanceExchange();
  }).catch(function(e) {
    console.log(e);
    self.setStatus("Error getting balance; see log.");
  });
}

提領代幣 HTML

<div class="col-lg-6">
    <div class="panel panel-default panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">提領代幣</h3>
        </div>
        <div class="panel-body">
            <form>
                <div class="form-group">
                    <label for="inputNameWithdrawalToken">代幣名稱</label>
                    <input type="text" name="inputNameWithdrawalToken" class="form-control" id="inputNameWithdrawalToken" placeholder="e.g. FIXED">
                </div>
                <div class="form-group">
                    <label for="inputAmountWithdrawalToken">代幣數量</label>
                    <input type="number" name="inputAmountWithdrawalToken" class="form-control" id="inputAmountWithdrawalToken" placeholder="e.g., 95">
                </div>
            </form>
        </div>
            <div class="panel-footer">
                <button type="button" class="btn btn-default" onclick="App.withdrawToken();return false;">確認</button>
            </div>
    </div>
</div>

提領代幣 JavaScript

withdrawToken: function() {
  //The Withdraw Token function

  var nameToken = document.getElementById("inputNameWithdrawalToken").value;
  var amountTokens = document.getElementById("inputAmountWithdrawalToken").value;
  var exchangeInstance;
  ExchangeContract.deployed().then(function(instance) {
    exchangeInstance = instance;

    App.setStatus("Initiating Withdrawal...");
    return exchangeInstance.withdrawToken(nameToken, amountTokens,  {from: account});
  }).then(function() {
    document.getElementById("inputNameWithdrawalToken").value = "";
    document.getElementById("inputAmountWithdrawalToken").value = "";
    App.refreshBalanceExchange();

    App.setStatus("Withdrawal complete.");
  }).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