Counter スマートコントラクトを使用するため、Truffleを使ったスマートコントラクト開発 を実施しておいてください。

Counter スマートコントラクトをデプロイした Ganache or ganache-cli を起動しておいてください。

「my_project\build\contracts\Counter.json」に Counter スマートコントラクトの ABI と address が記録されていますので、それをメモしておきます。

ABI

  "abi": [
    {
      "inputs": [],
      "name": "count",
      "outputs": [
        {
          "internalType": "uint256",
          "name": "",
          "type": "uint256"
        }
      ],
      "stateMutability": "view",
      "type": "function"
    },
    {
      "inputs": [],
      "name": "get",
      "outputs": [
        {
          "internalType": "uint256",
          "name": "",
          "type": "uint256"
        }
      ],
      "stateMutability": "view",
      "type": "function"
    },
    {
      "inputs": [],
      "name": "inc",
      "outputs": [],
      "stateMutability": "nonpayable",
      "type": "function"
    },
    {
      "inputs": [],
      "name": "dec",
      "outputs": [],
      "stateMutability": "nonpayable",
      "type": "function"
    }
  ],

address(下記では “address”: “0x791C2E0e40B2b96f3aE2F5D3F3661478f73fB49D”)

  "networks": {
    "1651628570834": {
      "events": {},
      "links": {},
      "address": "0x791C2E0e40B2b96f3aE2F5D3F3661478f73fB49D",
      "transactionHash": "0xa8743487adb9a9480ea0510ef29cc1ceba402c74f5cd3063f766c56b41d9bc66"
    },

ソースコードは GitHub SimpleEthereumClient で管理しています。

上記リポジトリから index.html を取得し、ABI(現在は同じはずなので、書き換える必要はありません)とaddressを書き換えてください。

index.html をブラウザで開くと、ブラウザから Counter スマートコントラクトが実行できることを確認できます。