【NFT】ジェネラティブNFTを学ぶ - ミントアプリ作成 -
前回、Polygonチェーンでデプロイしたコントラクトの設定をPolygonscanからverifyを行い、変更可能とした。
今回はアプリケーションの作成を行う。
参考ページは↓
>プロジェクトを開く
VSCodeで hashlips_minting_dapp を開く。
>パッケージインストール
ターミナルを開き、パッケージをインストール
-----
npm install
-----
インストールが完了したことを確認
-----
added 2154 packages, and audited 2155 packages in 16m
-----
>開発サーバの起動
ローカル環境にサーバを起動する。
$npm run start
サーバが起動して以下の画面が起動すればOK
にしても両サイドに表示される画像には狂気を感じます。
>設定の変更
①設定ファイル１
public\config\config.json
②コントラクトへのアクセス設定ファイル
public\config\abi.json
③webアプリの見た目
public\index.html
④設定ファイル２
public\manifest.json
⑤webアプリの挙動部分
src\App.js
>>1. public\config\config.json
Webアプリの基本的な設定を行う。
・CONTRACT_ADDRESS・・・コントラクトアドレス
・SCAN_LINK・・・PolygonScanのアドレス
・NFT_NAME・・・NFT名
・SYNBOL・・・NFTシンボル
・MAX_SUPPLY・・・NFTの総数
・WEI_COST・・・ミントに必要な値段(wei単位)
・DISPLAY_COST・・・表示用価格
・MARKETPLACE_LINK・・・OpenSeaのリンク
・SHOW_BACKGROND・・・背景を表示するかどうか
>>public\config\abi.json
ABIはApplicationBinaryInterfaceの略で、Webアプリからコントラクトへアクセスするために必要な設定。
ABIはコントラクトが受ける入力と返す出力を定義する文字列。
EtherScanやPolygonScanで誰でも参照可能。
ConstractタブでContractABIのコピーボタンからコピー
コピーしたものをjsonファイルにペーストして保存する。
>>public\index.html
見た目に関わるファイルで、該当する部分のテキストを張り替える。
>>public\manifest.json
デバイス上にアプリがインストールされたときに使用される設定ファイル。 short_nameにNFシンボルを設定、nameにNFTの名前を入力する。
>>src\App.js
Webアプリの挙動に関連するファイル。
ここでは一度にMintできる最大数を設定する。
const incrementMintAmountを修正する。
>適切なガス代の設定
デフォルト設定だと、ガス代を手動で変更しないとミントが失敗する可能性が高い。
直近のガス代の中央値を取得して設定する修正を行う。
>>src\redux\blockchain\blocckchainActions.js
-----
if (networkId == CONFIG.NETWORK.ID) {
// 追加↓
const gasPrice = await web3.eth.getGasPrice()
// 追加↑
-----
>>src\redux\blockchain\blockchainReducer.js
-----
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,
// 追加↓
gasPrice: blockchain.gasPrice * mintAmount
// 追加↑
})
-----
>画像の差し替え
ミントサイトの画像は変更可能
bg.png #背景画像
example.gif #左右のアニメーション画像
logo.png #上部のタイトル画像
>>カラーコード設定
スタイルの設定は以下のファイルで行う。
primary・・・背景色
primary-text・・・枠外の文字色
secondary・・・ボタン、アドレス、点線の色
secondary-text・・・ボタン内の文字色
accent・・・枠内の背景色
accent-text・・・枠内の文字色
色のボタンから変更可能で、リアルタイムで反映される。
>アップロード
ミントサイトのソースをビルドしてアップロードを行う。
アップロードはアップロード先のサーバによって違うのでここではビルドまで
>>ビルド
-----
$npm run build
-----
ログ出力が止まると、buildフォルダ以下にファイルが出力される。
出力されたファイルをサーバにアップロードする。
アップロード先のサーバを用意する必要があるためこの記事はここまで。
次回サーバに実際にミントサイト用のファイルをアップロードする予定。
続く
