lesson-2_UIをアップグレードして自分だけのオリジナルアプリを作ろう
🎨 UI を完成させる
今回のプロジェクトでは、あなたは下記を達成しました 🎉
1 . WavePortal
コントラクトを作成して、ローカル環境でイーサリアムネットワークにデプロイする
- Solidityでコントラクトを書く
- コントラクトをローカルでコンパイルして実行する
- コントラクトにデータを保存する
- ローカル環境にWebアプリケーションを展開して、構築を行う
2 . ユーザーのウォレットを Web アプリケーションから接続して、コントラクトと通信する web3 アプリケーションを作成する
- MetaMaskを設定する
- コントラクトを実際のSepolia Test Networkにデプロイする
- ウォレットをWebアプリケーションに接続する
- Webアプリケーションからデプロイされたコントラクトを呼び出す
3 . Web アプリケーションからユーザーに ETH を送る
- コントラクトに送金機能を実装する
- WebアプリケーションからユーザーにランダムでETHを送る
最後に、UIを完成させましょう。
CSSや文章を変更したり、画像や動画を自分のWebアプリケーションに乗せてみてください 😊🎨
🔍 トランザクションの検証を行う
ユーザーにETHが送金されたか確認するために、App.js
に下記2つのコードを追加してみましょう。
1 . コントラクトの残高を取得
まず、App.js
の中にある下記のコードを確認します。
/* ABIを参照 */
const wavePortalContract = new ethers.Contract(
contractAddress,
contractABI,
signer
);
let count = await wavePortalContract.getTotalWaves();
console.log("Retrieved total wave count...", count.toNumber());
このコードの直下に下記を追加しましょう。
const contractBalance = await provider.getBalance(wavePortalContract.address);
console.log("Contract balance:", ethers.utils.formatEther(contractBalance));
これにより、コントラクトの現在の資金額がConsoleに出力されます。
2 . ユーザーが ETH を獲得したか検証
次に、App.js
の中にある下記のコードを確認します。
/* コントラクトに👋(wave)を書き込む */
const waveTxn = await wavePortalContract.wave(messageValue, {
gasLimit: 300000,
});
console.log("Mining...", waveTxn.hash);
await waveTxn.wait();
console.log("Mined -- ", waveTxn.hash);
count = await wavePortalContract.getTotalWaves();
console.log("Retrieved total wave count...", count.toNumber());
このコードの直下に下記を追加しましょう。
const contractBalancePost = await provider.getBalance(
wavePortalContract.address
);
/* コントラクトの残高が減っていることを確認 */
if (contractBalancePost.lt(contractBalance)) {
/* 減っていたら下記を出力 */
console.log("User won ETH!");
} else {
console.log("User didn't win ETH.");
}
console.log(
"Contract balance after wave:",
ethers.utils.formatEther(contractBalancePost)
);
ユーザーにETHが送金されたか確認するために、ローカル環境でWebアプリケーションを開いてwave
を送ってみましょう。
WebアプリケーションをInspect
して、下記のような結果がConsoleに出力されているか確認しましょう。
ここでは、ユーザーがETHを獲得したこと、コントラクトの資金が0.000996
から0.000995
に減少したことがわかります。
さらに詳しくトランザクションについて検証する場合は、Sepolia Etherscan を使用することをお勧めします。
Sepolia Etherscanにコントラクトのアドレスを貼り付けて、発生したトランザクションを表示できます。
それでは、上記で実行した最新のトランザクションを見ていきましょう。
下図のように、確認したいTxn Hash
を選択します。
トランザクションの情報が、確認できます。
枠で囲った部分に、先程のトランザクションの結果が表示されています。
少額のETHをコントラクトアドレスからユーザーアドレスに転送したことがわかります。