Metamask

如何檢測元遮罩帳戶已更改和鎖定?

  • September 21, 2022

我用反應!

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();
 }, []);

我更新程式碼!


在此處輸入圖像描述

我連接一個錢包。

在此處輸入圖像描述嗨,我的 dapp 沒有檢測到元遮罩帳戶何時更改或鎖定。

我點擊“연결”表示未連接。瀏覽器不知道


這是完整的程式碼

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')
)

這是連接到錢包應用程序的簡單方法。檢查它是否在您的瀏覽器中工作。

連結在這裡

引用自:https://ethereum.stackexchange.com/questions/136065