await connect() returns before it's connected

[vporton]

Current Behavior

It fails to operate with MetaMask (and probably others) wallet directly after connection:

const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();
await connect();
const ethersProvider = new ethers.BrowserProvider(wallet!.provider, 'any'); // Ethers.js v6
const signer = await ethersProvider.getSigner(); // fails

The minimal example. Clicking the button does not show any UI, moreover console.log calls are ignored.

Expected Behavior

await connect() should return control after full initialization of wallet.

In the minimal example, on button click the user should be asked for a signature.

Steps To Reproduce

• Clone the minimal example
• npm i
• npm start
• click the button

What package is effected by this issue?

@web3-onboard/react

Is this a build or a runtime issue?

Runtime

Package Version

2.8.13

Node Version

16.16.0

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.

[vporton]

Sorry, the app was erroneous, now fixed. And the error is not that console.log don't work, but:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'provider')
    at readScore (App.tsx:76:1)

[vporton]

Bug workaround:

  useEffect(() => {
    if (!wallet) {
      return;
    }
    (async () => {
      const provider = new ethers.BrowserProvider(wallet!.provider, 'any');
      console.log('provider', provider);
      const signer = await provider.getSigner();
      console.log('signer', signer);
      const address = await signer.getAddress()
      console.log('address', address);
      const message = "I certify that I am the owner of the Ethereum account\n" + address;
      const signature = await signer.signMessage(message);
    })()
  }, [wallet]);

  async function readScore() {
    if (!wallet) {
      await connect();
    }
  }

[Adamj1232]

@vporton thanks for posting!
I dont see this when working with our react demo project. We do something similar but not quite the same you can check it out here.

Let me know if this helps!

[vporton]

Let me know if this helps!

It does not help, because it involves an additional user action to start the next action after connecting, instead of the ability to start an additional blockchain action (such as requesting from user a signature) automatically upon connecting.

BTW, code similar to my above code is buggy: It sometimes produces 4 asks for a signature instead of one.