Lisk Elements で遊ぼう #2

2019年3月23日 18:15

週末の度に天気が悪くてうんざりな万博おじです。
花粉が少ないのは嬉しいのですが。。

はじめに

さて前回はLisk Elementsでアカウント情報を取得しましたね。
取得した情報をアレコレしてきれいに表示するのはいつかやるかもしれませんが、今回はLiskチェーンからトランザクション情報（送金などの情報）を引っこ抜いて見ましょう。

コーディング 1

前回作成したaccount.htmlをちょっと手直しします。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>account</title>
    <script src="https://js.lisk.io/lisk-elements-2.0.0.min.js"></script>
    <script type="text/javascript">
      const client = lisk.APIClient.createMainnetAPIClient();
      const getAccount = (liskAddress) => {
        client.accounts.get({ address: liskAddress })
        .then(res => {
          const pretag = document.createElement('pre');
          pretag.innerHTML = JSON.stringify(res.data, null , 2);
          document.querySelector('#account_area').append(pretag);
        });
      }
      const search = () => {
        const liskAddress = document.querySelector('#liskAddress').value;
        document.querySelector('#account_area').innerHTML = '';
        getAccount(liskAddress);
      }
    </script>
  </head>
  <body>
    <div id="contents">
      <div><input type="text" id="liskAddress" placeholder="Lisk Address"><button onclick="search()">search!</button></div>
      <div>[account]</div>
      <div id="account_area"></div>
      <br>
      <div>[transaction]</div>
      <div id="transaction_area"></div>
    </div>
  </body>
</html>

なんか変わってますね〜

前回から変わったのはこちら
・9行目のconst client = lisk.APIClient.createMainnetAPIClient();
　-> 8行目（関数：getAccountの上）へ移動

・14行目のdocument.querySelector('#contents').replaceWith〜
　-> document.querySelector('#account_area').append〜に変更

・関数：search が追加

const search = () => {
  const liskAddress = document.querySelector('#liskAddress').value;
  document.querySelector('#account_area').innerHTML = '';
  getAccount(liskAddress);
}

・<div id="contents">〜</div>の内容の変更

<div><input type="text" id="liskAddress" placeholder="Lisk Address"><button onclick="search()">search!</button></div>
<div>[account]</div>
<div id="account_area"></div>
<br>
<div>[transaction]</div>
<div id="transaction_area"></div>

コード説明

関数：search
id が liskAddress のコントロール（今回はテキストボックス）の値を取得し、関数：getAccount を実行。
実行結果を id が account_area の場所に上書き。

<input type="text" id="liskAddress" placeholder="Lisk Address">
id が liskAddress のテキストボックスを作成。
placeholder には Lisk Address と表示。

<button onclick="search()">search!</button>
search! というラベルのボタンを作成。
クリックすると関数：search を実行。

修正したら、前回同様ファイルをダブルクリック！

Lisk Address と薄く表示されているテキストボックスに自分のLisk Addressを入力して search! ボタンをクリックしましょう。
（画像は例のごとくoliverさんのアドレスです💦）

前回と同じ内容がボタンを押すことで表示できましたね！
では、次が今回の本題、トランザクション情報の取得です。

コーディング 2

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>account</title>
    <script src="https://js.lisk.io/lisk-elements-2.0.0.min.js"></script>
    <script type="text/javascript">
      const client = lisk.APIClient.createMainnetAPIClient();
      const getAccount = (liskAddress) => {
        client.accounts.get({ address: liskAddress })
        .then(res => {
          const pretag = document.createElement('pre');
          pretag.innerHTML = JSON.stringify(res.data, null , 2);
          document.querySelector('#account_area').append(pretag);
        });
      }
      const getTransaction = (liskAddress) => {
        client.transactions.get({
          senderId: liskAddress,
          sort: 'timestamp:desc'
        })
        .then(res => {
          const pretag = document.createElement('pre');
          pretag.innerHTML = JSON.stringify(res.data, null , 2);
          document.querySelector('#transaction_area').append(pretag);
        });
      }
      const search = () => {
        const liskAddress = document.querySelector('#liskAddress').value;
        document.querySelector('#account_area').innerHTML = '';
        getAccount(liskAddress);
        document.querySelector('#transaction_area').innerHTML = '';
        getTransaction(liskAddress);
      }
    </script>
  </head>
  <body>
    <div id="contents">
      <div><input type="text" id="liskAddress" placeholder="Lisk Address"><button onclick="search()">search!</button></div>
      <div>[account]</div>
      <div id="account_area"></div>
      <br>
      <div>[transaction]</div>
      <div id="transaction_area"></div>
    </div>
  </body>
</html>

変わったのはこちら

・関数：getTransaction が追加

const getTransaction = (liskAddress) => {
  client.transactions.get({
    senderId: liskAddress,
    sort: 'timestamp:desc'
  })
  .then(res => {
    const pretag = document.createElement('pre');
    pretag.innerHTML = JSON.stringify(res.data, null , 2);
    document.querySelector('#transaction_area').append(pretag);
  });
}

・関数：search に関数：getTransaction の実行処理を追加

document.querySelector('#transaction_area').innerHTML = '';
getTransaction(liskAddress);

コード説明

client.transactions.get
Liskチェーンのトランザクション情報を取得。
取得する条件は、senderId がパラメータで渡されたliskAddressに一致するもの。
その取得する情報の並び順（sort）は日時の降順（timestamp:desc）
※昇順で並び替えたい場合は desc を asc に変更。

あとは前回と今回のコーディング１で説明した通りです。

ここまで書いたら、ファイルをダブルクリック！
見た目はさっきと何もかわりありませんね。
ただし、Lisk Addressを入力後に search! ボタンをクリックすると。。

さっきまで表示されていなかった [transaction] の下に何か情報が表示されましたか？

この情報から読めること

timestamp
トランザクションの発生日時
Liskがローンチされてからの経過秒

type
トランザクションの種類
0：送金、1：セカンドパスフレーズ登録、2：デリゲート登録、3：vote、4：マルチシグ登録

senderId
送信したLisk Address
今回は検索時に入力したLisk Addressが表示

recipientId
受信したLisk Address
vote時などはsenderIdと同じ

amount
送金枚数（1億倍された値）

fee
手数料（1億倍された値）

asset
Referenceなどの情報
TipLiskに入金する場合の入金キーなどはここに表示

前回同様、トランザクション情報も割と簡単取得できたと思いませんか？

ということで、今日はここまで！
お疲れ様でした！

リンク

Lisk Elements ドキュメント(Transactions)
※検索条件は Lisk Core ドキュメント参照

応援

「おもろいやんけ！」と思ってもらえたら、コメントや万博おじへtweetしてくれると嬉しいです。
Lisk Japanもよろしくね！

この記事が気に入ったらサポートをしてみませんか？