lesson-3_WEBアプリからコントラクトを呼び出そう
📒 Web アプリケーションからスマ ートコントラクトを呼び出す
このレッスンでは、MetaMaskの認証機能を使用して、Webアプリケーションから実際にあなたのコントラクトを呼び出す機能を実装します。
WavePortal.sol
に実装したgetTotalWaves
関数を覚えていますか?
function getTotalWaves() public view returns (uint256) {
console.log("We have %d total waves!", totalWaves);
return totalWaves;
}
App.js
を以下のように更新して、フロントエンドからgetTotalWaves
関数へアクセスできるようにします。
/* ethers 変数を使えるようにする*/
import { ethers } from "ethers";
import React, { useEffect, useState } from "react";
import "./App.css";
const App = () => {
// ユーザーのパブリックウォレットを保存するために使用する状態変数を定義します。
const [currentAccount, setCurrentAccount] = useState("");
console.log("currentAccount: ", currentAccount);
// window.ethereumにアクセスできることを確認します。
const checkIfWalletIsConnected = async () => {
try {
const { ethereum } = window;
if (!ethereum) {
console.log("Make sure you have MetaMask!");
return;
} else {
console.log("We have the ethereum object", ethereum);
}
// ユーザーのウォレットへのアクセスが許可されているかどうかを確認します。
const accounts = await ethereum.request({ method: "eth_accounts" });
if (accounts.length !== 0) {
const account = accounts[0];
console.log("Found an authorized account:", account);
setCurrentAccount(account);
} else {
console.log("No authorized account found");
}
} catch (error) {
console.log(error);
}
};
// connectWalletメソッドを実装
const connectWallet = async () => {
try {
const { ethereum } = window;
if (!ethereum) {
alert("Get MetaMask!");
return;
}
const accounts = await ethereum.request({
method: "eth_requestAccounts",
});
console.log("Connected: ", accounts[0]);
setCurrentAccount(accounts[0]);
} catch (error) {
console.log(error);
}
};
// waveの回数をカウントする関数を実装
const wave = async () => {
try {
const { ethereum } = window;
if (ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const wavePortalContract = new ethers.Contract(
contractAddress,
contractABI,
signer
);
let count = await wavePortalContract.getTotalWaves();
console.log("Retrieved total wave count...", count.toNumber());
console.log("Signer:", signer);
} else {
console.log("Ethereum object doesn't exist!");
}
} catch (error) {
console.log(error);
}
};
// WEBページがロードされたときに下記の関数を実行しま す。
useEffect(() => {
checkIfWalletIsConnected();
}, []);
return (
<div className="mainContainer">
<div className="dataContainer">
<div className="header">
<span role="img" aria-label="hand-wave">
👋
</span>{" "}
WELCOME!
</div>
<div className="bio">
イーサリアムウォレットを接続して、「
<span role="img" aria-label="hand-wave">
👋
</span>
(wave)」を送ってください
<span role="img" aria-label="shine">
✨
</span>
</div>
{/* waveボタンにwave関数を連動させる。*/}
<button className="waveButton" onClick={wave}>
Wave at Me
</button>
{/* ウォレットコネクトのボタンを実装 */}
{!currentAccount && (
<button className="waveButton" onClick={connectWallet}>
Connect Wallet
</button>
)}
{currentAccount && (
<button className="waveButton" onClick={connectWallet}>
Wallet Connected
</button>
)}
</div>
</div>
);
};
export default App;
ここで実装した新しい機能は下記の3つです。
1 . ethers 変数を使えるようにする
import { ethers } from "ethers";