Where to define the MetaMask window.ethereum.on Listener

Question

I have tried to include the window.ethereum.on listener to detect account changes in MetaMask, in my mounted () {} method. When the listener is triggered, it itself triggers the location.reload() method.

When including this listener and location.reload() method in my mounted () {} method, it is triggered in an infinite loop, the location.reload() method being infinitely re-triggered at every reload. However, if I include the listener outside the mounted method, it is never called. Where should the listener be defined?

 mounted () {
   ...
   window.ethereum.on('accountsChanged', function (accounts) {
     ...
     window.location.reload(true)
   })
 }

Thank you. J

Answer 1

I had a similar issue. I tried putting that listener inside

$(document).ready(function(){
...
    window.ethereum.enable().then(function(accounts){
    ...
       ethereum.on('accountsChanged', function (accounts) {
       //function to perform on account change
       })
    })
       
})

This seems to prevent the call to the listener callback function every time you load the page. Let me know if you find the same.