Cache selected active account in localStorage

[VinGitonga]

I've noticed that when i reload a page with one connected wallet account, the active account switches to the first account if there more than one account or wallet addresses in the wallet.

Especially on page refresh

This is before page refresh

After page refresh

[wottpal]

Hey @VinGitonga, that's a great suggestion. Will have a look at it. I guess I, therefore, need to store the latest selected account in the localStorage and pre-select that on connect. Are there any edge cases or scenarios where this behavior wouldn't make sense? Wdyt?

[VinGitonga]

At the moment None. But the implementation would be great since. Currently am building a dapp that supports diffrent user accounts based on their wallet addresses and reconnecting to the right wallet all the time seems to much.

[niklasp]

I would add storing one more thing in localStorage userWantsConnection. I had some discussions with ecosystem devs and the idea in our opinion was that no popups should show unless the user interacts with something (clicks). That is, no wallet connect popups that ask for a password or similar things. So the first visit to the website is not interrupted.

Currently there is the connectOnInit attribute of the provider. It offers a very good way to auto connect users when coming to the site (once they permitted the wallet extension connection). But if it is set to true it will bug the users with popups on the first connect, setting it to false however always needs user interaction. Imo it should only be required on the first connection and not on subsequent uses.

The workaround I currently have is in my connect component

  useEffect(() => {
    const userWantsConnection = ls.get("userWantsConnection");
    if (userWantsConnection) {
      connect?.();
    }
  }, []);
  
  ...
  
  <Button
    onClick={() => {
      ls.set("userWantsConnection", true);
    }}
  >Connect</Button>

where ls is just a localstorage helper.

One solution would be, to add the above effect to the provider and run if connectOnInit is set to true. connect would in that case set the localstorage value, and disconnect delete it.

[niklasp]

ping