Add isEnabled call to get extension authorization status

[VadimSaveljev]

Currently there is no way of checking if extension is already authorized without calling a popup, so most dapp devs are holding status in localstorage or similar, which is a workaround and adds unnecessary code.

This PR solves that by adding isEnabled call to extension-inject, which can be used to get the extension status.

UseCase: As a dapp dev I want to support multiple extensions, show their status connected/disconnected without calling .enable for all extensions at the same time and creating multiple popups, which is not a great UX. I also don't want to be creating a custom solution to this problem and maintain it.

[jacogr]

I don't get it - when enabled, there are no extension popups when calling web3Enable.

[VadimSaveljev]

If you open dapp for the first time in that browser and you have more than one extension installed - multiple popups will appear for each extension asking user to authorize. What I want is to have status for each extension, let user decide which one to enable In case when user already previously enabled an extension, I as dapp dev can immediately call .enable method for that extension and get user's accounts and other data if needed.

This solution will simplify things a lot and allow me to build multi-wallet selector library. A lib that will combine all the wallet connection solutions on polkadot network. Therefore I can't afford to have popup apocalypse.

P.S. this is a sort of continuation on the https://github.com/polkadot-js/apps/pull/7825 but a different approach, it solves the core of the problem, while allowing further development to make the one-lib-rules-them-all wallet selector solution for dapp devs to jump on our network faster, I think it's crucial to have such lib for our success. It also makes life easier for dapp devs, now they won't need to keep the status in localstorage and maintain that workaround.

[Tbaut]

Interesting issue I too had to deal with eventually. iiuc you would go through the list in window.injectedKeys and call the enable for the first extension that has isEnabled === true, otherwise you'd ask which one the UI should connect to?

Now how would you let a user actually disconnect from an extension if say I have Pjs and Talisman? This is something that the UI used to handle with localstorage, but would not work any more. Say I connected Pjs first, unless I uninstall it, there's no way to set the isEnabled to false and prevent my UI to call enable right away. We'd need to expose a disable here too right?

[VadimSaveljev]

Interesting issue I too had to deal with eventually. iiuc you would go through the list in window.injectedKeys and call the enable for the first extension that has isEnabled === true, otherwise you'd ask which one the UI should connect to?

Now how would you let a user actually disconnect from an extension if say I have Pjs and Talisman? This is something that the UI used to handle with localstorage, but would not work any more. Say I connected Pjs first, unless I uninstall it, there's no way to set the isEnabled to false and prevent my UI to call enable right away. We'd need to expose a disable here too right?

I get the full list from window.injectedWeb3, and later in UI show user which extension is connected/disconnected + automatically load accounts/data on those who are authorized, and I can do that because I know there won't be any unwanted popups. When user opens page for the first time, the extensions are all disconnected and wait for user to choose to connect, click and only then an auth popup appears, once approved next time user won't need to do anything else with that extension and all the data will be shown (what data will be shown and how fully depends on dapp developer, currently my goal is to create a polkadot wallet selector core functionality, that any dapp dev can take and quickly onboard to the system).

Currently you can only connect yes, disconnect can be done through extension and refreshing the page, which is not ideal I agree. Let's start with connecting first.

[VadimSaveljev]

@jacogr any thoughts/comments? Can we proceed in some way, cause this functionality is important and a semi-blocker right now.

[jacogr]

So what is exactly is wrong with multiple extensions asking the user to action? The user has them installed, so wish to use them. (Obviously if messages are shared, i.e. mis-configured extensions not specifying the correct environment and then getting multiple popups when signing - which seems to be the case out in the wild, that is different)

The extension environment, at the base, it meant to cater for multiple extensions - without dialogs in the dapps at all. Unlike other ecosystems, there is a single interface that can be used with multiples.

[hamidra]

@jacogr the main idea behind having this flag is to be able to enable granular wallet selection at the UX level. e.g. comparing the two behaviors(polkadot.js vs staking dashboard). https://www.youtube.com/watch?v=WcrnU646DXc

The changes definitely should be backward compatible, so anyone who wants to pull all accounts from all extensions can use the web3Enable ,.... , but if they want to provide a granular wallet selection currently they would need to track which wallets are connected and store it in storage, but having this zero cost flag enables the dapps to query the Authorization state from the source instead of guessing it based on what is stored in session/app storage (which will be reset often).

IMO, pulling all accounts makes sense for polkadot.js which mostly is used by savvy users, but for common users, it is better to guide them through connection so they know what are the popups and need to take action. since just popping multiple authz windows might confuse them and they might not take proper action to authorize the extensions and might get stuck in a pending state.

[fend25]

Hi @jacogr ! This is so needed, could you please accept this PR?

Right now I get much declines on the extension popup because the only working way is to call enable() at the page start. isEnabled is really necessary thing here for good UX.

@SaltyCucumber thank you really much, necessary thing.

[saltict]

Hi @jacogr and @SaltyCucumber ! I'm from SubWallet team.

I think this PR is really helpful to improve the UX of DApps. Wallet connection status checking and wallet interaction should be separated. Adding isEnabled() or isDisabled() is a way to do it, however, adding more detailed statuses is the best way. There are these cases to look into:

• DApp hasn't connected to the wallet
• Dapp has been accepted to connect to the wallet
• DApp is blocked by the wallet

In these cases, returning a simple boolean showing connection status is not enough. These cases have more complicated logic

Let's consider about something like that:

{
   permission: 'not-authorized' | 'authorized' | 'rejected'
}

It is also easy to check if the wallet has supported this feature or not, which means better versioning

wallet.permission === undefined

Hope my suggestion can help you.

[polkadot-js-bot]

This pull request has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.