[Bug]: Changing wallets on account center doesn't change accounts

[AlissonRS]

Current Behavior

Changing wallets in the floating account center on top is not triggering connectedWallet computed property provided by useOnboard in Vue. In fact, it's not even changing the current account in MetaMask for example, so if I wanted to ask the user to sign a transaction, it'd open metamask with a different account than the one selected in the account center.

Changing the network from the Account Center is working though, it opens MetaMask and prompt the user to switch network.

This is a problem because if users are using multiple accounts in the Account Center, I'm not able to detect when they change the account, so I'm still showing data from the first selected wallet.

The problem doesn't seem related to Vue itself, when I change accounts directly from MetaMask, the computed properties are fired, but when changing from Account Center, I was expecting it to prompt MetaMask for switching account (or firing the computed property), so the problem seems related to the Core package, not Vue package.

Expected Behavior

Changing the wallet should fire the computed properties provided by useOnboard, OR/AND should change the current wallet on MetaMask.

Steps To Reproduce

1. Connect to a wallet using web3-onboard.
2. From action center, click "Connect another wallet". This will prompt MetaMask for account selection.
3. From MetaMask, select a second wallet.
4. The computed properties are fired as expected here.
5. Open the Account Center, choose the first wallet.
6. Now the computed properties are not fired, and in MetaMask the account is not changed either (should prompt the user).

What package is effected by this issue?

@web3-onboard/core

Is this a build or a runtime issue?

Runtime

Package Version

2.4.0

Node Version

16.13.2

What browsers are you seeing the problem on?

Chrome

Relevant log output

No response

Anything else?

No response

Sanity Check

• If this is a build issue, I have included my build config. If this is a runtime issue, I have included reproduction steps and/or a Minimal, Reproducible Example.

[Adamj1232]

@AlissonRS thanks for letting us know of this issue, we will work to get this fixed and will update here when a fix is available!
There won't be a prompt from MetaMask when switching accounts but we can implement usage of the setPrimaryWallet functionality that will updated the connectedWallets array with the switched wallet to the zero index. This functionality was added recently and doesn't look to be part of the Vue package

[ihorbond]

I don't think "I was expecting it to prompt MetaMask for switching account" is possible as metamask itself doesn't allow this and only ever returns 1 account even though it's an array. They say it's for future use.
https://docs.metamask.io/guide/rpc-api.html#eth-requestaccounts

[AlissonRS]

@ihorbond makes sense, and I don't think we need that either, as long as we have a way to know when the user selected a different account from the Onboard Account Center, we can get a signer (with ethersjs) using the wallet address. Makes sense?

[ihorbond]

@ihorbond makes sense, and I don't think we need that either, as long as we have a way to know when the user selected a different account from the Onboard Account Center, we can get a signer (with ethersjs) using the wallet address. Makes sense?

To get a signer you'd need either a private key or an EIP-1193 provider. Even if you bypass blocknative and just do ethers.providers.Web3Provider(window.ethereum) directly you will get a provider based on the currently connected and selected wallet in metamask. Blocknative widget is prob just showing the history of connected wallets. I do agree that widget's behavior creates an illusion of selecting a different wallet when it's not really possible so it's misleading.

[AlissonRS]

@ihorbond you just need the public wallet address to get a signer (not the private key), please refer to this: https://docs.ethers.io/v5/api/providers/jsonrpc-provider/#JsonRpcProvider-getSigner

If the connectedWallet could expose the public wallet address the user picked from the Account Center, we could easily use it as per below:

  setup() {
    const { connectedWallet } = useOnboard();
  
    const provider = new ethers.providers.Web3Provider(
        connectedWallet.provider, 'any'
    );
    // here `selectedAccountAddress` would be the public wallet address the user selected from Account Center
    const signer = provider.getSigner(connectedWallet.selectedAccountAddress);

    // use "signer" to send transactions as usual
  },

The method getSigner from the provider accepts an argument with the public wallet OR index in the array of currently connect accounts on metamask.

Alternatively, connectedWallet already exposes a provider (EIP-1193 I assume) which we use to create the Web3Provider. So when the user changes the account from Account Center, another idea is to just update this provider to a new one based on the new public address the user selected (as an alternative to adding a new field selectedAccountAddress).

[ihorbond]

Thanks, @AlissonRS but I still do not believe it will work because there is no Metamask API that would allow blocknative to select a different wallet even though it's technically connected. That can only be done in metamask itself which then emits 'accountsChanged' event that we can react to. If you find a way to do it'd love to see the implementation.

[AlissonRS]

@ihorbond I'm not suggesting you to do anything with Metamask API like changing a wallet to be honest, perhaps I'm failing to explain what is the request here, but I'm just asking for a way to know which wallet address the user selected from the Account Center.

With the wallet address, I can use ethersjs to send transactions, when sending a transaction (or signing a message for that matter), Metamask will prompt the user to sign with the account based on that wallet address.

[ihorbond]

With the wallet address, I can use ethersjs to send transactions, when sending a transaction (or signing a message for that matter), Metamask will prompt the user to sign with the account based on that wallet address.

I understand but you can't get to a signer from just the public address. For all you know the wallet that still shows up in Account Center has been long disconnected by the user and there is no way for blocknative to be aware of that because there is no 'wallet disconnected' event. This discussion has actually led me to think of a proposal I will submit as a separate ticket as to not hijack this one even more lol

[lnbc1QWFyb24]

@AlissonRS In Onboard core, when the user selects an account in Account Center it will trigger the wallets subscription and the wallet that the selected account belongs to will now be the first in the wallets array and the selected account will be the first in the accounts array. So I think this behavior will cover your desired outcome? It must be a bug in the Vue package that is causing this to not update. We'll take a look in to this and get a fix out.

[AlissonRS]

@ihorbond you are right in the sense that if the user has disconnected from MetaMask (or whatever wallet they use) we can't really use the signer to prompt the user to sign transactions with their wallet as the wallet no longer has knowledge about that public wallet, but if that's the case we can at least properly handle this and let the user know, maybe guide them into onboarding from scratch.

On the other hand if they have not disconnected that specific wallet from MetaMask, then we can safely use the signer, as MetaMask would prompt the user to sign transactions.

By the way I'm glad this discussion at least resulted in another feature you thought about 🚀