---
layout: post
current: post
cover: assets/images/panda-xx.png #封面圖片
navigation: True #上方導覽列
title: 13-如何使用程式查看區塊鏈資料 #id-標題名稱
date: 2019-12-14 #日期 YYYY-MM-DD
tags: fzth-post #標籤
class: post-template
subclass: 'post'
author: panda #作者
---

> 我們常常都透過 Etherscan 等區塊鏈瀏覽器 .. 有沒有想過自己新建一個 Web Page 來去查看區塊鏈上的資料！

準備：

- Chrome 
- Metamask 
- Vscode / Sublime (編輯器)

> 今天我們來透過程式查看自己身上的 Likecoin 有多少總額吧！

## Step 1 - 前端

<div aling="center">
<img src="https://ithelp.ithome.com.tw/upload/images/20191002/20118325oO7DFlnCnp.png" style="width:100%">
</div>

<br>

<center><strong>圖1 撰寫簡單的前端 Html </strong></center>

<div aling="center">
<img src="https://ithelp.ithome.com.tw/upload/images/20191002/20118325x9gfv4UqB3.png" style="width:100%">
</div>

<br>

<center><strong>圖2 前端畫面 </strong></center>

## Step 2 - import web3

> 添加 Web3 和 網頁做交互。

一般來說我們可以使用兩種方式，一種是 npm install 一種是 cdn

npm install web3

<script src="https://cdn.jsdelivr.net/gh/ethereum/web3.js/dist/web3.min.js"></script>

// 添加此至 javascript 中，讓程式在一載入就先判斷有沒有 web3 如果沒有的話我們採用 infura 主網的節點
window.onload = function() {
      if (typeof web3 !== 'undefined') {
        web3 = new Web3(web3.currentProvider);
      } else {
        web3 = new Web3(new Web3.providers.HttpProvider("https://mainnet.infura.io"));
      }
    }

因為方便，我們這裡採用 cdn 的方式。

## Step 3 - ABI

添加合約的 Function ，
之前我們也說過每個合約都有屬於自己的 ABI ，那麼 ABI 是什麼？
如果以網頁來說，他就等同於 API 的存在。

> ABI

## Step4 - 得到 ERC20 資訊

我們需要得到這些資訊，那麼我們會需要得知此 ERC20 合約地址、現在持有人的錢包地址，才可查看。

`
function getERC20TokenBalance(tokenAddress, walletAddress, callback)
`

將合約的一些宣告也寫入這個 function

let contract = web3.eth.contract(minABI).at(tokenAddress);
      contract.balanceOf(walletAddress, (error, balance) => {
        contract.decimals((error, decimals) => {
          balance = balance.div(10**decimals);
          console.log(balance.toString());
          callback(balance);
        });
      });

`
balanceOf 持有多少 token
decimals 小數
`

## Step5 - function 完成
得到錢包地址、以及載入 Likecoin 合約、得知錢有多少

> 如何得知自己錢包地址，那就要採用 web3 的 function 了

` ethereum.selectedAddress `

> LikeCoin 合約

`0x02f61fd266da6e8b102d4121f5ce7b992640cf98`

> GetBalance

function getBalance(){
    	let tokenAddress = document.getElementById('token-address').value; // 合約地址
      	let walletAddress = document.getElementById('wallet-address').value; // 錢包地址
      	// 倘若合約地址及錢包地址都有填寫，則執行 getERC20TokenBalance 此function 
        if(tokenAddress != "" && walletAddress != "") {
        getERC20TokenBalance(tokenAddress, walletAddress, (balance) => {
          document.getElementById('result').innerText = balance.toString();
        });        
      }
    }

## Step 6 執行

按照順序，點擊按鈕（得到錢包 -> 得到合約 -> 產生結果)

> 程式碼

<div align="center">
<img src="https://ithelp.ithome.com.tw/upload/images/20191002/201183255MZwp7vkJC.png" style="width:100%">
</div>

<br>

<center><strong>圖3 全部程式碼</strong></center>

<div align="center">
<img src="https://ithelp.ithome.com.tw/upload/images/20191002/20118325hbrZ1xu6Vt.png" style="width:100%">
</div>

<br>

<center><strong>圖4 前端填寫畫面輸出</strong></center>
<br>
就可以看到自己手上有多少顆 Likecoin 了呢！

## 小記

今天來用 web3 和前端做個互動，查看自己錢包中的 Token 數量！
若文章有任何的問題或要討論的部分，歡迎在底下留言。
歡迎透過 Email: `[e-mail]` 聯絡我。