Reactを使ってMetaMask対応のアプリケーションを開発する際、EVM系ネットワークと非EVM系ネットワークを切り替えて正しく表示させることは初心者にとって難しい課題です。本記事では、EVM系ネットワークだけ情報を反映し、非EVM系の場合はサポート外表示を行う方法と、以前のEVM情報が残らないようにする実装手法を解説します。
ネットワーク切り替えの問題の原因
ReactでMetaMask情報を管理する場合、useStateやコンテキストで保持している状態が切り替え時に更新されず、以前のEVM情報を引きずることがあります。これは、非EVMネットワークに切り替えた際に状態をクリアしていないためです。
特に非同期で取得したウォレット情報やアカウント情報を保持したままコンポーネントが再レンダリングされない場合、古い情報が表示され続けます。
ステート管理の基本方針
まず、ネットワークの種類をstateで管理し、EVM系か非EVM系かを判定するロジックを用意します。非EVM系の場合は、EVM情報をnullまたは初期状態にリセットすることが重要です。
例。
const [account, setAccount] = useState(null);
const [network, setNetwork] = useState(null);
非EVM検知時にsetAccount(null)を呼び出すことで、古い情報をクリアできます。
Effectフックでの状態更新
useEffectを使い、ネットワークやアカウントの変更を監視することで、切り替え時に自動的に状態を更新できます。
例。
useEffect(() => {
if (!isEVM(network)) {
setAccount(null);
setError(“非EVMネットワークはサポート外です”);
}
}, [network]);
表示の切り替えとブロック処理
JSX側では、状態に応じて表示を切り替えます。EVM系ネットワークの場合はウォレット情報を表示し、非EVM系の場合はサポート外のメッセージを表示します。
例。
{account ? (Connected: {account}) : ({error})}
まとめ
ReactとMetaMaskを使用する場合、ネットワーク切り替え時に古いEVM情報を残さないためには、stateの明示的なリセットとuseEffectでの監視が重要です。非EVM系を検知したら、account情報をクリアし、ユーザーにサポート外表示を行うことで、正しい情報反映と安全なUXを提供できます。
コメント