Metamask
如何檢測元遮罩帳戶已更改和鎖定?
我用反應!
useEffect(() => { window.ethereum.on('accountsChanged', function (accounts) { console.log(accounts[0]); }); }, []);
那沒起效。沒有console.log。
我認為瀏覽器不知道帳戶已更改。
無論如何,當我的錢包被鎖定時,我能注意到嗎?window.ethereum._metamask.isUnlocked() 已棄用函式 :(
const checkIfAccountChanged = async () => { try { ethereum.on('accontsChanged', accounts => { console.log('connected', accounts[0]); saveWalletAddress(accounts[0]); }); } catch (error) { console.log(error); } }; useEffect(() => { checkIfAccountChanged(); }, []);
我更新程式碼!
我連接一個錢包。
我點擊“연결”表示未連接。瀏覽器不知道
這是完整的程式碼
const App = () => { const { value: isLoading, setValue: setIsLoading } = useValue(true); const { walletAddress, saveWalletAddress, clearWalletAddress } = useWalletAddressStore(); const checkIfAccountChanged = async () => { try { ethereum.on('accontsChanged', accounts => { console.log('connected', accounts[0]); saveWalletAddress(accounts[0]); }); } catch (error) { console.log(error); } }; useEffect(() => { const walletCompany = getLocalStorage('wallet'); const connectMetamaskAuto = async () => { const res = await connetMetamask(); res.address && saveWalletAddress(res.address); setIsLoading(false); }; const connectCoinbaseAuto = async () => { const res = await connectCoinbase(); res.address && saveWalletAddress(res.address); setIsLoading(false); }; if (walletCompany) { walletCompany === 'metamask' ? connectMetamaskAuto() : connectCoinbaseAuto(); } else setIsLoading(false); }, []); useEffect(() => { checkIfAccountChanged(); }, []);
const { value: isLoading, setValue: setIsLoading } = useValue(true); const [wallet, setWallet] = useState<string>(''); // const { walletAddress, saveWalletAddress, clearWalletAddress } = useWalletAddressStore(); const checkIfAccountChanged = async () => { try { ethereum.on('accontsChanged', accounts => { console.log('connected', accounts[0]); setWallet(accounts[0]); }); } catch (error) { console.log(error); } }; useEffect(() => { const walletCompany = getLocalStorage('wallet'); const connectMetamaskAuto = async () => { const res = await connetMetamask(); res.address && saveWalletAddress(res.address); setIsLoading(false); }; const connectCoinbaseAuto = async () => { const res = await connectCoinbase(); res.address && saveWalletAddress(res.address); setIsLoading(false); }; if (walletCompany) { walletCompany === 'metamask' ? connectMetamaskAuto() : connectCoinbaseAuto(); } else setIsLoading(false); }, []); useEffect(() => { checkIfAccountChanged(); }, []);
這幾乎與您的答案相似。因為您忘記更新帳戶的狀態。
const [currentAccount, setCurrentAccount] = useState(""); const checkIfAccountChanged = async () => { try { const {ethereum} = window; ethereum.on('accountsChanged', (accounts) => { console.log("Account changed to:", accounts[0]); setCurrentAccount(accounts[0]); }); } catch (error) { console.log(error); } } useEffect(() => { checkIfAccountChanged(); }, []);
在 checkIfAccountChanged 函式中,當賬戶發生變化時,需要更新狀態。如果您將詳細資訊記錄到控制台中,它將僅顯示在您的控制台中。
告訴我它是否有幫助!
編輯:
另請記住,當您更改帳戶時,您應該在更改之前連接。
像這樣:
在第一張圖片中,即使我更改了帳戶,它也沒有連接,因此沒有更改。
在第二張圖片中,你可以看到有一個叫做連接的東西,你應該點擊它來真正更改帳戶。
編輯2:
APP.js
import React, { useState, useEffect } from "react"; import { ethers } from "ethers"; export default function App() { const [currentAccount, setCurrentAccount] = useState(""); const checkIfMetamaskIsInstalled = async () => { try { const { ethereum } = window; if (!ethereum) { console.log(`Install Metamask wallet`); } else { console.log(`we have ethereum object ${ethereum}`); } const accounts = await ethereum.request({ method: "eth_accounts" }); if (accounts.length !== 0) { const account = accounts[0]; console.log("Found an authorized account:", account); setCurrentAccount(account); } else { console.log("No authorized account found"); } } catch (error) { console.log(error); } }; const checkIfAccountChanged = async () => { try { const {ethereum} = window; ethereum.on("accountsChanged", (accounts) => { console.log("Account changed to:", accounts[0]); setCurrentAccount(accounts[0]); }); } catch (error) { console.log(error); } }; const connectWallet = async () => { try { const { ethereum } = window; if (!ethereum) { alert("get metamask!"); return; } const accounts = await ethereum.request({ method: "eth_requestAccounts", }); console.log("connected!", accounts[0]); setCurrentAccount(accounts[0]); } catch (error) { console.log(error); } }; useEffect(() => { checkIfMetamaskIsInstalled(); checkIfAccountChanged(); }, []); return ( <div className="mainContainer"> {!currentAccount ? ( <button className="waveButton" onClick={connectWallet}> Connect Wallet </button> ) : ( <button className="waveButton" onClick={connectWallet}> {currentAccount} </button> )} </div> ); }
主.js
import React from 'react' import ReactDOM from 'react-dom' import App from './App' ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') )
這是連接到錢包應用程序的簡單方法。檢查它是否在您的瀏覽器中工作。
連結在這裡