🦊
【React.js】簡単なMetaMaskとの接続方法
MetaMaskと接続する順番
- MetaMaskChrome拡張機能がインストールされているかどうかを確認
- インストールされていたらMetamaskと接続
1.MetaMaskChrome拡張機能がインストールされているかどうかを確認
const App = () => {
//MetaMaskChrome拡張機能がインストールされているかの変数を準備
const [metaMaskFlag, setMetaMaskFlag] = useState(false);
useEffect(() => {
tmpFlag = window.ethereum && window.ethereum.isMetaMask;
setMetaMaskFlag(tmpFlag);
},[]);
}
metaMaskFlagの変数に合わせてMetaMaskの接続を行うボタンのdisable属性をオンオフ切り替えておけば良いのかなって思っています。
2.インストールされていたらMetamaskと接続
const App = () => {
//・・・
const [account,setAccount] = useState(null);
const [errorMessage, setErrorMessage] = useState(null);
const connectWallet = () => {
window.ethereum
.request({ method: "eth_requestAccounts" })
.then((result) => {
setAccount(result[0]);
})
.catch((error) => {
setErrorMessage(error.message);
});
}
};
基本的には上記の関数をボタン要素などのonClickに繋いでおいて、着火させることが多そう...
const App = () => {
return(
<a onClick={connectWallet}>Connect Wallet</a>
)
}
実行結果
上記を利用したプログラムのGithubがこちら👇
実行結果👇
connect wallet押す前
connect wallet押した後
参考動画
基本的な接続方法は以下の動画を参考にしました！
接続方法周辺で躓いたポイント
ページが表示されるときに、関数を実行させる方法
親コンポーネントで定義した関数を子コンポーネントで実行させる方法
Discussion