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.

Improve this question

1 Answer 1

Reset to default
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.

Improve this answer
3
  • 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, 2018 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, 2018 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, 2018 at 18:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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