差分

このページの2つのバージョン間の差分を表示します。

--- blockchain:ether.jsを使用したdapps開発 [2022/05/10 06:55] – dot
+++ blockchain:ether.jsを使用したdapps開発 [2022/08/04 08:56] (現在) – dot
@@ 行 1: / 行 1: @@
 ====== ether.jsを使用したDApps開発 ======
 ether.js と React を使用して DApps を開発します。
+完成したスースコードは [[https://github.com/shinoburc/SimpleReactEthereumClient|shinoburc/SimpleReactEthereumClient]] で管理しています。
+下記手順を実行するか、上記リポジトリを利用してください。
+===== 前提 =====
+[[blockchain:truffleを使ったスマートコントラクト開発|Truffleを使ったスマートコントラクト開発]] で作成した Counter スマートコントラクトを使用しますので、先に実施しておいてください。
+MetaMask を使用しますので、[[blockchain:metamaskの使用|MetaMaskの使用]] を実施しておいてください。
 ===== Reactプロジェクトの生成 =====
@@ 行 81: / 行 90: @@
 <code PowerShell>
 react-etherjs> npm install --save ethers
-</code>
-===== Counter.json のコピー =====
-[[blockchain:truffleを使ったスマートコントラクト開発|Truffleを使ったスマートコントラクト開発]] で Counter スマートコントラクトを build すると Counter スマートコントラクトの情報(ABIやaddressなど)が truffle_project\build\contracts\Counter.json に保存されています。今回はその Counter.json を react-etherjs\src\contracts\Counter.json にコピーして使用します。
-:!: 本来は truffle-config.js の設定を変更して、Counter.json を react-etherjs\src\contracts に保存するようにするのが一般的です。
-<code PowerShell>
-react-etherjs> mkdir .\src\contracts
-    ディレクトリ: C:\Users\miyazato\work\ethereum\react-etherjs\src
-Mode                 LastWriteTime         Length Name
-----                 -------------         ------ ----
-d-----        2022/05/08     20:50                contracts
-react-etherjs> cp ..\contracts\Counter.sol .\src\contracts\.
 </code>
@@ 行 119: / 行 107: @@
   const [provider, setProvider] = useState(null);
   const [counter, setCounter] = useState(null);
-  const [account, setAccount] = useState();
+  const [account, setAccount] = useState(null);
-  const [count, setCount] = useState();
+  const [count, setCount] = useState(null);
-  const [transactionHash, setTransactionHash] = useState();
+  const [transactionHash, setTransactionHash] = useState(null);
-  const [transactionInfo, setTransactionInfo] = useState();
+  const [transactionInfo, setTransactionInfo] = useState(null);
+  // counterAddress と counterAbi は環境によって書き換える必要があります。
+  // Counater.json を読み込んで利用するとよりスマート。
   const counterAddress = "0x5E5A16AaFb816F04E09a05d1C03d98D7b1ee56C2";
   const counterAbi = [
@@ 行 181: / 行 171: @@
             window.ethereum
                 .request({ method: "eth_requestAccounts" })
-                .then((result) => {
+                .then((accounts) => {
-                    setAccount(result[0]);
+                    setAccount(accounts[0]);
                     let provider = new ethers.providers.Web3Provider(window.ethereum);
+                    setProvider(provider);
                     let signer = provider.getSigner(0);
                     setCounter(new ethers.Contract(counterAddress, counterAbi, signer));
-                    setProvider(provider);
                 })
                 .catch((error) => {
@@ 行 205: / 行 195: @@
   const  incCount =  async () => {
     let transaction = await counter.inc();
+    // トランザクションが処理されるのを待つ
     await transaction.wait();
     setTransactionHash(transaction.hash);
@@ 行 213: / 行 204: @@
   const  decCount =  async () => {
     let transaction = await counter.dec();
+    // トランザクションが処理されるのを待つ
     await transaction.wait();
     setTransactionHash(transaction.hash);
@@ 行 253: / 行 245: @@
 export default App;
 </code>
+===== 実行 =====
+<code PowerShell>
+react-etherjs> npm start
+</code>
+「connect」をクリックすると MetaMask が立ち上がりますので、使用するアカウントを選択します。
+アカウントが選択できたら他のボタンをクリックすることで Counter スマートコントラクトの各メソッドが実行できます。
+{{:blockchain:react-etherjs.png?600|}}