今回はNEMのトランザクションの履歴情報を取得してブラウザに表示する方法を説明します。
HTML構成は以下の通りです。
<h3>アドレス:<h3>
<div id="address"></div>
<h3>入出金履歴:<h3>
<table id="table" class="table">
<thead><tr>
<th>日時</th>
<th>区分</th>
<th>金額</th>
</tr></thead>
</table>
トランザクション履歴を取得するコマンドはこれです。(nem2-sdk 0.14.4時点)
accountHttp.transactions(alice)
以下のように指定して_に情報が出力されます。
accountHttp.transactions(alice)
.subscribe(_=>{
});
出力される情報は配列形式なので、ループ処理を行い出力されたトランザクションの数だけテーブルの行を追加していきます。
for( tx of _){
$("#table").append("<tr>"
+"<td>"+ 日付情報 + "</td>"
+"<td>"+ 区分情報 + "</td>"
+"<td>"+ 金額 + "</td>"
+ "</tr>"
);
}
上記ソースコード中の日本語で書いた部分は別途加工処理が必要です。順に見ていきましょう。
日付情報
トランザクションの取り込まれた時刻はtransactionInfo.id値の上8桁を見ればおおよその時間がわかります。mongoDBに登録された時間がID値の一部として利用されているので、そこから抽出します。厳密にブロックに取り込まれた時間を知るためにはブロック情報を取得してそこのタイムスタンプを調べる必要があります。
new Date(parseInt(tx.transactionInfo.id.substring(0, 8), 16) * 1000)
区分情報
調べているアカウントにとってトランザクションのデータが送金なのか着金なのかを調べる方法はトランザクションの中の受け取りアドレス（recipientAddress）が自分であれば入金であると知ることができます。
var txType = "出金";
if("SBSXJRXCHIFQIA4RK2DKOYXL43IXPQWSC5FES3XB" == tx.recipientAddress ){
txType = "入金"
}
金額情報
トランザクションが指定するモザイクの転送量を調べます。1つのトランザクション中に複数のモザイクを含めることができるので、今回はモザイクIDが 308F144790CD7BC4 のものだけを一覧表示するようにしました。
var mosaicAmount = "";
for(mosaic of tx.mosaics){
if(mosaic.id.id.toHex() == "308F144790CD7BC4"){
mosaicAmount = mosaic.amount.toString();
}
}
まとめ
全体的には以下のようなファイルになります。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h3>アドレス:<h3>
<div id="address"></div>
<h3>入出金履歴:<h3>
<table id="table" class="table">
<thead><tr>
<th>日時</th>
<th>区分</th>
<th>金額</th>
</tr></thead>
</table>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://s3-ap-northeast-1.amazonaws.com/xembook.net/nem2-sdk/symbol-sdk-0.18.0.js"></script>
<script>
const NODE = 'https://jp12.nemesis.land:3001';
const nem = require("/node_modules/symbol-sdk");
const accountHttp = new nem.AccountHttp(NODE);
const alice = nem.Address.createFromRawAddress("TCQSO3-LUEWJZ-X4ITOY-4YWVL5-TAOEJ5-6YXUMS-AJHH");
accountHttp.getAccountTransactions(alice)
.subscribe(_=>{
for( tx of _){
var mosaicAmount = "";
for(mosaic of tx.mosaics){
if(mosaic.id.id.toHex() == "747B276C30626442"){
mosaicAmount = mosaic.amount.toString();
}
}
var txType = "出金";
if("TCQSO3LUEWJZX4ITOY4YWVL5TAOEJ56YXUMSAJHH" == tx.recipientAddress ){
txType = "入金"
}
$("#table").append("<tr>"
+"<td>"+ new Date(parseInt(tx.transactionInfo.id.substring(0, 8), 16) * 1000) + "</td>"
+"<td>"+ txType + "</td>"
+"<td>"+ mosaicAmount + "</td>"
+ "</tr>"
);
}
});
</script>
</body>
</html>
記事一覧
NEM開発事始め(1) HTMLファイルの作成とNEMアカウントの生成
NEM開発事始め(2) NEMアカウント情報の取得と表示
NEM開発事始め(3) NEMトランザクション履歴の取得と表示
NEM開発事始め(4) NEM送金トランザクションの実行