Listening for metamask events with ethers in angular app

Question

I'm building an Angular app which connects to various blockchain accounts through metamask. One of my services connects to MetaMask by obtaining a provider and signer using

this.myProvider = new ethers.providers.Web3Provider(window.ethereum);
this.mySigner = this.myProvider.getSigner();

I would like my service to be aware when the user switches accounts or chains, or signs out of metamask and I am trying to find a way to be informed of those events when they happen.

I see that the object returned to myProvider is a Web3Provider, which contains an addListener method which takes 2 parameters, an EventType and a Listener but I can't find any documentation on how to access valid Event Types or how to set up a listener I assume that these events might provide what I am looking for. Can somebody point me to an example of how to use these events and listeners?

Answer 1

Those events are part of EIP-1193 definition of the provider API, they are not part of ethers.js or web3.js if I understand correctly. A nice documentation is also present here.

So to access them, you need to call directly on window.ethereum that is injected by Metamask.

window.ethereum.on("accountsChanged", (accounts) => {
/* do what you want here */
})

Similarly to watch for chain change :

window.ethereum.on("chainChanged", (chainId) => {
/* do what you want here */
/* full refresh is recommended */
})

Answer 2

I'm wondering the same ... I find out as @hroussille, but now, how can i properly use that in an Angular app... That's the question !

EDIT --- I found something !

In the constructor of a service i write something like that :

constructor() {
 (window as any).ethereum.on('accountsChanged',(accounts) =>{
   console.log(accounts) 
 })
}

And it's working :)