Reality Keysを使ったWebサービス「BY MY COIN」について(3/4)

f:id:yzono:20141022131043j:plain

はじめに

BY MY COINのソースコードを読むシリーズ。第2回は画面を表示した時の処理について書きます。

状態としてざっくり以下2パターンあります。

初回表示
契約がある状態(window.localStorageにデータがある)

知りたいこと

seedの作り方、保存方法
window.localStorage内のデータから画面を作るところ

ソースコードを読む

1.initialize_pageメソッド呼び出し(index.html)

<script>
initialize_page();
</script>

2.initialize_pageメソッド実行

ざっくり以下2つ処理があります。

seed作成（既存あればそれを利用）
既存契約の画面表示

function initialize_page() {

(省略)

  if (default_seed = load_default_key()) {
      $('#mnemonic').val(seed_to_mnemonic(default_seed['seed']).toWords().join(' '));
      $('#is-testnet').val(default_seed['is_testnet'] ? '1' : '0');
      $('#public-key').text(default_seed['pub']);
      $('.public-key-display').show();
  }

  if ($('#mnemonic').val() == '') {
      var mne = new Mnemonic(128);
      $('#mnemonic').val(mne.toWords().join(' '));
  }

(省略)

  display_contracts();

(省略)

  $('body').addClass('initialized');
}

3.既存契約の画面表示

window.localStorageから既存契約を取り出して画面に表示します。表示ロジックはセットアップと同じです。

function display_contracts() {

  var contract_json_str = localStorage.getItem('contract_store');
  if (contract_json_str) {
      var contract_store = JSON.parse(contract_json_str);
      for (addr in contract_store['contracts']) {
          c = contract_store['contracts'][addr];
          c = populate_contract_and_append_to_display(c);
      }
  }

}