[Feature]: Return walletState from useConnectWallet's connect function

[TadejPolajnar]

Is your request related to a problem?

I made a hook which handles all my web3 logic inside and wrapped connect function with my own function to handle additional stuff on connect.
The problem is that once the wallet is connected, the wallet state inside handleConnect will still be empty even though the wallet is connected.

const useWeb3 = () => {
  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();

  const handleConnect = async () => {
    await connect();
    console.log(wallet); // Throws null after successful connect

    // ...some additional logic
  };
};

Feature Description

Since useConnectWallet hook is just a wrapper around @web3-onboard/core the solution is pretty straight forward. Function called inside connect function already returns the WalletState, it just needs to be returned from connect function.

  const connect = useCallback(async (options?: ConnectOptions) => {
    setConnecting(true)

    const walletState = await connectWallet(options)

    setConnecting(false)
  
    return walletState;
  }, [])

Callback will then return WalletState which could be used like this:

  const handleConnect = async () => {
    const wallet = await connect();
    console.log(wallet);
  };

Alternative Solutions/workarounds

I made an useEffect which checks if wallet is connected, but I think this is just a bad workaround

  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();

  useEffect(() => {
    if (wallet) {
      // Do some stuff
    }
  }, [wallet]);

Or even more error proof, but requires two unnecessary re-renders:

  const [shouldTrigger, setShouldTrigger] = useState<boolean>(false);
  const [{ wallet, connecting }, connect, disconnect] = useConnectWallet();

  const handleConnect = async () => {
    await connect();
    setShouldTrigger(true);
  };

  const onConnect = useCallback(() => {
    console.log(wallet); // Works!!
  }, [wallet]);

  useEffect(() => {
    if (shouldTrigger) {
      onConnect();
      setShouldTrigger(false);
    }
  }, [onConnect, shouldTrigger]);

Anything else?

No response

[lnbc1QWFyb24]

Hey @TadejPolajnar thanks for pointing this out. We'll take a look at this as soon as possible. Like you say it should be pretty simple to return the connected wallet from the connect function.

[Adamj1232]

@TadejPolajnar I have a PR for this change you can see here - I also added the WalletState[] return for the disconnect hook. I will update here when the change is published with an alpha tag and again when it is fully released. Thanks again!

[TadejPolajnar]

@Adamj1232 I checked the PR and looks good! Thanks for quick response.

[Adamj1232]

@TadejPolajnar Changes have been published as an alpha version if you want to try out @web3-onboard/react v2.2.7-alpha.1. If any problems arise be sure to let us know! Thanks again!

[kristjank]

👏

[Adamj1232]

Closing as this fix is available with the latest release React Package v2.3.0
Thanks again for pointing this out and the feedback around the change!