5

Hello I'm very new to developing.

I'm testing communication with Metamask via React.js

I managed to succesfully listen to Network and Account changes, but when I try to detect if someone "connected" or "disconnected" from my App, I'm not able to receive the event.

Metamask API Documentation I'm using: https://docs.metamask.io/guide/ethereum-provider.html#connect

Working:

  • ethereum.on('accountsChanged', handler: (accounts: Array<string>) => void);
  • ethereum.on('chainChanged', handler: (chainId: string) => void);

'

Not Working:

  • ethereum.on('connect', handler: (connectInfo: ConnectInfo) => void);
  • ethereum.on('disconnect', handler: (error: ProviderRpcError) => void);

the following Code is working flawless in my React.js app (using React.Component)

  async checkAccountChange() {
   const ethereum = window.ethereum
   if (ethereum) {
     // Listening to Event
     ethereum.on('accountsChanged', accounts => {
       console.log(accounts[0])
       this.setState({ account: accounts[0] })
  })
}

}

the following Code on the other hand is not giving me any console output

  async checkMetamaskHasConnected() {
    if (window.ethereum) {
      window.ethereum.on('connect', () => {
      console.log("Metamask connected")
      this.setState({ metamaskHasConnected: true })
  })
}

}

  async checkMetamaskHasDisconnected() {
    const ethereum = window.ethereum
      if (ethereum) {
      // Listening to Event
      ethereum.on('disconnect', () => {
        console.log("MetaMask discconnected")
        this.setState({ metamaskHasDisonnected: true })
  })
}

}

consider that I'm a very fresh beginner and just do learning by doing

Menlo
  • 63
  • 1
  • 2
  • 5

4 Answers4

3

If your requirement is:

detect if someone "connected" or "disconnected" from my App

the methods connect and disconnect you are trying might not help, as they are intended to know if your connection to the blockchain is available or not (for instance, when a user already connected tries to launch a transaction but the RPC connection is down).

Perhaps this post can help you. With the combination of getAccounts() and currentProvider you can deduce if a user is connected or not.

Otherwise, if this is only about knowing if a user is connected or not to your website, you may use WebSockets (depending on your architecture).

Sergi Juanati
  • 3,399
  • 3
  • 17
  • 38
2

Hello Sir You Could Wait For Event To Be Fired When Disconnecting(User Deletes Connection in Metamask From Dapp) And Then Dispatch A Action With New Address If there is any other Accounts Currently Connected To Dapp else you Can Call Disconnect Function

  const provider = await new web3(web3.givenProvider);
  provider.on('accountsChanged', (code: number, reason: string)=> {
      const accountSwitch = code[0];
                        if (accountSwitch){
                            if (accountSwitch) {
                                dispatch({
                                    type: _const.ADDRESS,
                                    payload: { address: accountSwitch }
                                })
                            }
                        }else{
                            DisconnectFromWallet();
                        }
                    });
Kay Albertus
  • 176
  • 1
  • 1
  • 7
0

I believe This is what you are looking for sir :

 window.ethereum.on("accountsChanged", async function(accounts) {

console.log(accounts)


const network = await Ethereum.eth.getChainId()


if (network !== 1 && network !== 4 ) //must be on mainnet or Testnet
  {


props.onAcountChange(false,false)



}
  else{


//Do this check to detect if the user disconnected their wallet from the Dapp
if( accounts &amp;&amp; accounts[0])
  props.onAcountChange(accounts[0], true)
else{ 

  /*
    @Arg1 : account address (String)
    @Arg2 : isAuthenticated (bool) 
  */
  props.onAcountChange(false,false) 

  /*
    @Arg1 : chain ID (Int)
    @Arg2 : isAuthenticated (bool) 
  */
  props.onNetworkChange(false,false)
}




} 
});
0xD1x0n
  • 140
  • 5
0

Use watchers from @wagmi/core to detect connection (same for the network change if needed)

    private setupWatchers(): void {
        watchAccount((accountData) => {
            console.log('accountData', accountData);
            if (accountData.isConnected) {
                // do your stuff
            } else {
                // do your stuff
            }
        });

    watchNetwork((networkData) =&gt; {
        if (networkData.chain) {
            // do your stuff
        }
    });
}
gabriellji
  • 1
  • 2