ジェネラティブNFTの画像生成、スマートコントラクト、Mintサイト作成をする上で、HashLipsが提供しているコードは最初の題材、テンプレートとしてよく出てくる。
HashLips
https://github.com/HashLips
エンジニアのむなかたさんが提供している、「誰でもできる！ジェネラティブNFT開発」を見ながら進めていたのですが、Mintサイトでmint実行時に表題のエラーが出てしまいました
誰でもできる！ジェネラティブNFT開発
https://crypto-code.jp/materials/create-generative-nft
エラー詳細
Error: Invalid number of parameters for "mint". Got 1 expected 2!
▼ 2 stack frames were expanded.
InvalidNumberOfParams
c:/Dev/darejene/hashlips_nft_minting_dapp/node_modules/web3-core-helpers/lib/errors.js:33
_createTxObject
c:/Dev/darejene/hashlips_nft_minting_dapp/node_modules/web3-eth-contract/lib/index.js:669
▲ 2 stack frames were expanded.
claimNFTs
c:/Dev/darejene/hashlips_nft_minting_dapp/src/App.js:132
129 | console.log("Gas limit: ", totalGasLimit);
130 | setFeedback(`Minting your ${CONFIG.NFT_NAME}...`);
131 | setClaimingNft(true);
> 132 | blockchain.smartContract.methods
| ^ 133 | .mint(mintAmount)
134 | .send({
135 | gasLimit: String(totalGasLimit),
View compiled
onClick
c:/Dev/darejene/hashlips_nft_minting_dapp/src/App.js:360
357 | disabled={claimingNft ? 1 : 0}
358 | onClick={(e) => {
359 | e.preventDefault();
> 360 | claimNFTs();
| ^ 361 | getData();
362 | }}
363 | >この手のチュートリアルでエラーの原因はチュートリアル上の工程をすっ飛ばしてしまったり、誤字脱字によるタイポなわけです。
ただ、問題なのは、言われるがままにコードを修正する形になるので、そのあたりがつけづらいという点ですね。
特に今回のように、ゼロからコードを書くのではなく、テンプレートから作る場合はそもそも書いていないコードが多いので余計に原因にたどり着きづらいことが多いです。
質問しても良いのですが、それでは理解の助けにならないので自力で解決することを考えます。
mint関数の定義
コード内容としては、Reactで書かれたフロントエンドからスマートコントラクトの呼び出し時にエラー。
エラーメッセージからは「mint」関数の引数が、コード中では “mintAmount”一つに対して２つの引数を期待していると言われています。
というわけで確認するべきはmint関数の定義です。
mint関数の呼び出しとしては
blockchain.smartContract.methods.mint(mintAmount)
という呼び出しになっています。
スマートコントラクト上のコードとしては
// public
function mint(uint256 _mintAmount) public payable {
uint256 supply = totalSupply();
require(!paused);
require(_mintAmount > 0);
require(_mintAmount <= maxMintAmount);
require(supply + _mintAmount <= maxSupply);
if (msg.sender != owner()) {
require(msg.value >= cost * _mintAmount);
}
for (uint256 i = 1; i <= _mintAmount; i++) {
_safeMint(msg.sender, supply + i);
}
と、引数を一つで定義されているので、呼び出しの仕方が問題というよりも、Mintサイトから見たスマートコントラクト上の定義では引数は2つと判断されている、ということなのでは。
という訳で、そのあたりを参照していけば良いはずですが。。。
少なくとも blockchain や smartContract をimport してはいないので、探します。
バックエンド主体で動いてきた私にはなかなか興味深いです
追っかける
blockchain 変数は App.js 内で useSelector によって値が入っています。
function App() {
const dispatch = useDispatch();
const blockchain = useSelector((state) => state.blockchain);
useSelectorに関してはこちらを参照
Reac初心者でも読めば必ずわかるReactのRedux講座
https://reffect.co.jp/react/react-redux-for-beginner#useSelector_Hooks
なるほど、さっぱりわからん。
わからんが、スマートコントラクトの定義っぽいところを探すと、bockchainActions.jsに
const SmartContractObj = new Web3EthContract(
abi,
CONFIG.CONTRACT_ADDRESS
);
という記述がある。
引数として渡しているabiは誰ジェネでも説明されている
ABIとは「Application Binary Interface」の略で、Webアプリからコントラクトへアクセスするために必要な設定となり、HashLipsのWebアプリではabi.jsonというファイルで管理しています
https://crypto-code.jp/chapters/create-mint-dapp/update-setting#index_0-3-0
ん。これが原因っぽい気がする
abi.jsonを見ると、HashLipsデフォルトの記述が書かれていて、更新し忘れていることがわかった。やはりこれが原因だった
という訳で、ここを正しく更新することで問題なくMintできるところまで行けた
最後に
ABIに関しては、公式に仕様が書かれていた
Contract ABI Specification
https://solidity-jp.readthedocs.io/ja/latest/abi-spec.html
とりあえず、なんとなく進め方はわかったけど、実際のところ各工程で行っている作業に対して正しく理解できている場所は少ない気がする。
数こなしていけば自然と覚えるものもあれば、調べて納得して覚えるものもある。
これなんだっけ？となる部分を少しでも減らしていければと思う。