MetaMask のネットワーク変更を検知する

MetaMask の仕様変更

• MetaMask のネットワークを変更したときに、これまではブラウザを自動的にリロードしていたが、自動的にリロードしないようになるとのことです。
  • 詳細: https://medium.com/metamask/breaking-change-no-longer-reloading-pages-on-network-change-4a3e1fd2f5e7
• したがって、 ポーリングで MetaMask に設定されているネットワークを確認する必要が出てくるようになりました。
• なお、どのネットワークが選択されているかについては、ローカルに値がキャッシュされているので、ポーリングしても通信は発生しないとのことです。

MetaMask のネットワーク変更を検知するプログラム例

• この例では web3.js 0.20.6 を使用

var web3js; // ローカルの Web3 オブジェクトを格納するための変数です。
window.onload = function() {
  if (typeof web3 !== 'undefined') {
    // Mist または MetaMask のプロバイダを使用して Web3 を初期化します。
    web3js = new Web3(web3.currentProvider);
    console.log(web3js.version.api);  // => 0.20.3

    // ポーリングし、使用しているネットワークをチェックします。
    setInterval(function () {
      web3js.version.getNetwork(checkNetwork)
    }, 1000);

    function checkNetwork (err, currentNetwork) {
      if (window.lastNetwork != currentNetwork) {
        alert("Ethereum Network has been changed: " + currentNetwork);
        window.lastNetwork = currentNetwork;
      }
    }
  } 
};

サンプル

• https://piyolab.github.io/playground/ethereum/checkMetaMaskNetworkChange/

参考

• https://medium.com/metamask/breaking-change-no-longer-reloading-pages-on-network-change-4a3e1fd2f5e7
• https://scrapbox.io/playground/Breaking_Change:_No_Longer_Reloading_Pages_on_Network_Change
• http://blog.playground.io/entry/2018/05/28/055946

Note

• Ethereum 関連の情報は https://scrapbox.io/sushiether/ に集約することにしました。
• この記事の内容に変更・更新がある場合は、以下の URL を更新します。
• https://scrapbox.io/sushiether/MetaMask_のネットワーク変更を検知する