Zenn
📌

TypeScript使ったメタマスク操作まとめ

2023/02/06に公開
TypeScript
Solidity
ethersjs
tech

どうも！TABEです！
TokenMasksLabsというNFTプロジェクトをやったり、Udemyの講師をやったりしています。

今回はフロントでメタマスクの操作について
まとめとかないとなーと思ったので勢いでまとめます！

他にケースがあれば言ってもらえれると嬉しいです！

基本的にはファイルの冒頭にethersを使う場合は追加しておいてください。

import {　ethers } from "ethers";

を入れて、「yarn add ethers」 または 「npm install --save ethers」
のコマンドでインストールしておくのを忘れずに。

ケース①メタマスクのチェーンを対象チェーンに切り替えたい

await (window as any).ethereum.request({
    method: 'wallet_switchEthereumChain',
    params: [{ chainId: '0x1' }],
});

CHAINIDの部分を対象のチェーンのIDに変えてください。
イーサリアムなので「'0x1'」と入力しています

この部分がOnClickなどで通れば、メタマスクが起動し
ユーザに対してCHAINIDで選んだチェーンに変更するか？
という画面を出力してくれます。

ケース②メタマスクのチェーンを対象チェーンを追加したい

例えば、PolygonやAstarはメタマスクにあえて追加する必要があります。
対象チェーンを追加していないユーザの為にコードを入れておきましょう。

以下Ploygonの設定方法です。

await (window as any).ethereum.request({
　　　　method: 'wallet_addEthereumChain',
　　　　params: [{
　　　　　　　　chainId: '0x89',
　　　　　　　　chainName: 'Polygon',
　　　　　　　　nativeCurrency: {
　　　　　　　　　　　　name: 'MATIC',
　　　　　　　　　　　　symbol: 'MATIC',
　　　　　　　　　　　　decimals: 137,
　　　　　　　　},
　　　　　　　　rpcUrls: [RPC_URLS],
　　　　}],
});

※[RPC_URLS]の部分には https://www.infura.io/ で取得できるURLを使いましょう。

ケース③メタマスクのアドレスを取得する

const provider = await new ethers.providers.Web3Provider((window as any).ethereum);
await provider.send('eth_requestAccounts', []);　// メタマスクと接続
const signer = await provider.getSigner();
const address = await signer.getAddress();　// アドレスを取得できます。

ケース④GasLimitを取得し、GasLimitを調整する。

どんな時に必要か？

以下の様なガス欠エラーで、トランザクションが失敗することを防げます。
reason: 'cannot estimate gas; transaction may fail or may require manual gas limit', code: 'UNPREDICTABLE_GAS_LIMIT'

今回はNFTのミント関数を呼び出す為に
コントラクトにMintという関数があると想定して書きます。

const increaseGasLimit = (estimatedGasLimit: BigNumber) => {
  return estimatedGasLimit.mul(130).div(100) // increase by 30%
}

// mint関数のガス代の計算
 const tempgasfixlimit = await contract.estimateGas.mint(quantity, {value: ethers.utils.parseEther(String(price))});
 
// mint関数呼び出しにincreaseGasLimitを使用して、ガスだいを３０％増加させて設定
await contract.mint(quantity, {value: ethers.utils.parseEther(String(price)), gasLimit: increaseGasLimit(tempgasfixlimit)});

※補足

コントラクトの関数を呼び出す時
以下の様なSolidityのコードがある場合

function mint(uint _mintAmount) public payable {

フロント側のTypeScriptで呼ぶmint関数の引数は
先に「_mintAmount」を設定しpayableとgasLimitは以下の様に渡す必要があります。

await contract.mint(1,{value:xxxxxx,gasLimit:xxxxxx});

ケース⑤WalletアドレスのCSV整理時に

これは実際にあったことですが

NFTのALリストのCSVをもらった時に、ウォレットアドレスの英字が小文字で入力されていることがありました。

これの何が問題か？と言いますと
CSVのアドレスと上記ケース③のアドレスを突き合わせる時に

// 1.csvで取得した英字が全て小文字になった値
0x2690381abbe2bd89ae6318fc501746f92c0eb2a8

// 2.メタマスクで取得した値
0x2690381aBBE2bD89aE6318fC501746f92c0Eb2A8

この様に1は英文字が全て小文字で、２は大文字と小文字が混ざっています。
これだと不一致でALリストの確認がうまくできない様なことがありました。

少しイメージが湧きにくいと思いますのですが、CSVでアドレス一覧をもらう様な時があれば
大文字、小文字をチェックした方がいいということを覚えておいてください。

以下のethers.jsの変換を使えば、アドレスが大文字と小文字の形で出てくるので
これを使ってCSVファイルから一括変換して、吐き出すコードを書きましょう！

let ChangeAddress = ethers.utils.getAddress(address);

他にあれば追加しようと思います！
コメントなどいただけると幸いです。

最後宣伝になって恐縮ですが
Udemyのコースを初心者向けに作成しています。
簡単なSolidityのコントラクトを作成し、ミントサイトを作ってNFTしてみたい方におすすめです。

https://www.udemy.com/course/nft-mint/?referralCode=518E5FD952280DA9EFE9

Twitterで定期的にクーポンの配布も行っているので
気になる方はTwitterを見ていただくか、リンクがわからない場合は
DMなどでご連絡ください。

Discussion