2

How can I auto-reload dapp base on Metamask account status?

I wish to design a metamask based authentication (like the one used in Crypokitties), for which I am able to design code which identifies if Metamask is locked or not. But the challenge is I have to manually refresh my web page to capture the latest status of metamask if it is locked or unlocked.

Suppose, if a user logs out of metamask, I want to catch that instance and close the dapp at the same time without any further action from the user (in my case this happens only after I manually refresh the page).

Will be grateful if someone has created similar feature and can guide with logic or code snippets.

3

As Metamask injects a Web3 instance in window object you can check for existence of the object. In order to detect if metamask is unlocked you can check in the Web3 instance if there's some address available.

To refresh the data automatically in JavaScript you can then use setInterval(MyCheckingMethod,1000); in your main application instance.

A quick example below, but you'll find that most is taken from the official page . Note that this is just a mostly empty but commented example you'll have to adapt for your own use-case & data flow :

export detectWeb3 = () => {
    if(typeof window.web3 !== "undefined" ){ // load metamask's provider
        const w3 = window.web3;

        // Calling method to retrieve accounts. Method available since Web3 v1.x.x-beta
        w3.eth.getAccounts().then( r => {
            if (r.length > 0) { 
                // some addresses found.
            } else {
                // No address found
            }
        }).catch(e => { // Error catched if method doesn't exist
            const accounts = w3.eth.accounts; // We'll try to get accounts from previous versions ( up to Web3 v0.20.x)
            if (accounts.length > 0) {
                // some addresses found 
            } else {
                // No address found
            }
        });
    }else{ 

        // Instructions to execute if no Web3 instance has been detected.  

    }
}

setInterval(detectWeb3,1000);

Another disclaimer : i took part of the code from a bunch of typescript files of mine. You might need to take this in consideration.

  • Thanks @Asone. The piece of code "setInterval(MyCheckingMethod,1000);" has solved my concern as of now. Just wanted to confirm if this logic (to periodically check web3 every few seconds) is considered as part of good dapp development guidelines and acceptable in the developer community. – tanmay Mar 22 '18 at 17:49
  • I don't think this is a major problem unless you put heavy logic and processing in your detection process. From my experience, i have been using this without any problem as you'll usually will mostly want to log-out and redirect user to home/non-privative part of your app if user changes its identity. Personally i don't know any other way of doing, unless there's a method that'd retrieve observable which would allow to subscribe, but if it exists i haven't been seing it in the docs. If it is so please feel free to notify in order to complete the answer. – Asone Mar 22 '18 at 18:31
  • I have accepted your answer. Even I searched multiple forums but could not find any alternatives. And yes I will keep the logic to minimal to avoid any overheads. – tanmay Mar 22 '18 at 18:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.