lesson-3_WEBアプリからコントラクトを呼び出そう
☘️ Web アプリケーションから NFT を Mint する
前回のレッスンでは、Webアプリケーションを立ち上げました。
これから、Web アプリケーションからMyEpicNFT.sol
コントラクトにアクセスして、NFT を発行するmakeAnEpicNFT
関数を呼び出していきましょう。
- 以前のレッスンで
makeAnEpicNFT
関数はMyEpicNFT.sol
に実装しました。
まず、App.js
の1行目に、下記のコードを追加してください。
// App.js
import { ethers } from "ethers";
ここでは、フロントエンドとコントラクトを連携させるライブラリethers
をインポートしています。
次に、下記のコードをApp.js
のconnectWallet
関数の下にaskContractToMintNft
関数を追加してください。
- フロントエンドに実装する
askContractToMintNft
関数が、コントラクトとWebサイトを連動させ、makeAnEpicNFT
関数を呼び出します。
// App.js
const askContractToMintNft = async () => {
const CONTRACT_ADDRESS =
"ここに Sepolia Test Network にデプロイしたコントラクトのアドレスを貼り付けてください";
try {
const { ethereum } = window;
if (ethereum) {
const provider = new ethers.providers.Web3Provider(ethereum);
const signer = provider.getSigner();
const connectedContract = new ethers.Contract(
CONTRACT_ADDRESS,
myEpicNft.abi,
signer
);
console.log("Going to pop wallet now to pay gas...");
let nftTxn = await connectedContract.makeAnEpicNFT();
console.log("Mining...please wait.");
await nftTxn.wait();
console.log(
`Mined, see transaction: https://sepolia.etherscan.io/tx/${nftTxn.hash}`
);
} else {
console.log("Ethereum object doesn't exist!");
}
} catch (error) {
console.log(error);
}
};
1行ずつ、コードを見ていきましょう。
// App.js
const CONTRACT_ADDRESS =
"ここに Sepolia Test Network にデプロイしたコントラクトのアドレスを貼り付けてください";
ここでは、コントラクトのアドレスをCONTRACT_ADDRESS
に格納しています。
ETH-NFT-Collection
ディレクトリ直下で、もう一度下記を実行し、コントラクトのアドレスを取得してください。
yarn contract deploy:sepolia