設定値を変更しよう
目次 [hide]
はじめに
本パートではNFTの名前やコントラクトアドレス、価格といった設定値の変更を行っていきます。
変更するのは以下の5箇所となります
📁 public
┣ 📁 config
┃ ┣ 📄 1.config.json # 設定ファイル①
┃ ┗ 📄 2.abi.json # コントラクトへのアクセス設定ファイル
┣ 📄 3.index.html # Webアプリの見た目部分
┗ 📄 4.manifest.json # 設定ファイル②
📁 src
┗ 📄 5.App.js # Webアプリの挙動部分
1. public/config/config.json
まずはWebアプリの基本的な設定を行うconfig.jsonです。内容は以下のコメントの通りなので、ご自身の環境に応じて差し替えてみましょう。
public/config/config.json{
// 1. コントラクトアドレス
"CONTRACT_ADDRESS": "0xeeeBE90A0DDa5509129AFe31f84b11730aEd2206",
// 2. PolygonScanのリンク
"SCAN_LINK": "https://polygonscan.com/token/0xeeeBE90A0DDa5509129AFe31f84b11730aEd2206",
"NETWORK": {
"NAME": "Polygon",
"SYMBOL": "Matic",
"ID": 137
},
// 3. NFT名
"NFT_NAME": "Dot KANJI",
// 4. NFTシンボル
"SYMBOL": "DK",
// 5. NFTの総数
"MAX_SUPPLY": 1000,
// 6. ミントに必要な値段(wei単位)
"WEI_COST": 500000000000000000,
// 7. ミントに必要な値段(表示用)
"DISPLAY_COST": 0.5,
"GAS_LIMIT": 285000,
"MARKETPLACE": "Opeansea",
// 8. OpenSeaのリンク
"MARKETPLACE_LINK": "https://opensea.io/collection/dot-kanji",
// 9. 背景を表示するかどうか（表示する：true、表示しない：false）
"SHOW_BACKGROUND": false
}
一点だけ気をつける点として、WEI_COSTは「wei」単位での値段となり、通常のMaticでの値段の10の18乗となるので注意してください。（0.5Matic → 500000000000000000）
0の数が多すぎて間違えそう…という方は単位変換用のサイトがあるので、そちらをご活用ください！
2. public/config/abi.json
ABIとは「Application Binary Interface」の略で、Webアプリからコントラクトへアクセスするために必要な設定となり、HashLipsのWebアプリではabi.jsonというファイルで管理しています。
ABIはコントラクトがどんな入力を受け付けてどんな出力を返すかを定義した文字列で、Verify済みのコントラクトであればEtherScanやPolygonScanから誰でも見ることができます。
もしもコントラクトのVerifyを行っていない場合は、第4章の最後でやりかたを解説していますので、そちらを参考に作業をしてみてください。
PolygonScanの「Contract」タブ > 「Code」ボタンをクリックした先にContract ABIという欄があるので、コピーボタンをクリックしてコピーしましょう。
この中身をpublic/config/abi.jsonに貼り付けて保存すればOKです。
3. public/index.html
index.htmlはWebアプリの見た目側のベースファイルとなります。ここではタイトルと説明文を差し替えていきましょう。
<title>タブ内の文言と、<meta name"description">のcontentをご自身のNFT名に替えておけばOKです。
public/index.html<!DOCTYPE html>
<html lang="en">
<head>
︙
<title>DotKanji</title>
<meta name="description" content="Mint your DotKanji NFT" />
</head>
4. public/manifest.json
manifext.jsonはデバイス上にアプリがインストールされたときに使用される設定ファイルのようです。ここではshort_nameにNFTシンボルを、nameにNFTの名前を入力しましょう。
public/manifest.json{
"short_name": "DK", // NFTシンボル
"name": "DotKanji", // NFT名
"icons": [
{
// 以下略
5. src/App.js
最後にWebアプリの挙動を司るApp.jsです。ここではコントラクトで設定した、一度にMintできる最大数をWebアプリ側にも反映させていきます。
少し長いコードですがconst incrementMintAmountから始まる以下のコードを探して修正しましょう。
「10」となっている2箇所を、最大数に応じて変更＆保存すればOKです。
src/App.js const incrementMintAmount = () => {
let newMintAmount = mintAmount + 1;
if (newMintAmount > 10) { // ここと
newMintAmount = 10; // ここの数字を変更
}
setMintAmount(newMintAmount);
};
【おまけ】適切なガス代の設定
デフォルトの設定だと、Mintするユーザが手動でガス代を調整しないとトランザクションが失敗する可能性が高くよろしくない状態です。
ここではおまけのオススメ設定として、直近のガス代の中央値を取得して設定するというコードを追加していきます。
変更する箇所としては以下の3ファイルとなります。それぞれ1~2行追加するだけなのでササッと更新していきましょう。
① src/redux/blockchain/blockchainActions.js
② src/redux/blockchain/blockchainReducer.js
③ src/App.js
① src/redux/blockchain/blockchainActions.jsexport const connect = () => {
︙
if (networkId == CONFIG.NETWORK.ID) {
// 追加↓
const gasPrice = await web3.eth.getGasPrice()
// 追加↑
const SmartContractObj = new Web3EthContract(
abi,
CONFIG.CONTRACT_ADDRESS
);
dispatch(
connectSuccess({
account: accounts[0],
smartContract: SmartContractObj,
web3: web3,
// 追加↓
gasPrice: gasPrice,
// 追加↑
})
);
② src/redux/blockchain/blockchainReducer.jsconst blockchainReducer = (state = initialState, action) => {
switch (action.type) {
︙
case "CONNECTION_SUCCESS":
return {
...state,
loading: false,
account: action.payload.account,
smartContract: action.payload.smartContract,
web3: action.payload.web3,
// 追加↓
gasPrice: action.payload.gasPrice,
// 追加↑
};
③ src/App.js const claimNFTs = () => {
︙
blockchain.smartContract.methods
.mint(mintAmount)
.send({
gasLimit: String(totalGasLimit),
to: CONFIG.CONTRACT_ADDRESS,
from: blockchain.account,
value: totalCostWei,
// 追加↓
gasPrice: blockchain.gasPrice * mintAmount
// 追加↑
})