Sign metamask message using web3modal v2 -- Angular

Question

Now that walletconnect v2 has been launched, we must upgrade. What is the new method to sign message and get provider?

In version 1 I was using:

      this.web3Modal.clearCachedProvider();
      this.provider = await this.web3Modal.connect(); // set provider
      this.web3js = new Web3(this.provider); // create web3 instance
      this.accounts = await this.web3js.eth.getAccounts();
      const signedMessage = await this.web3js.eth.personal.sign('You are login into gamers passport,    This action will not cost you any transaction fee.', address);

But currently, we only have a few methods for web3modal, and none of them helps.

Now in v2 im trying to use web3modal like this:

import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'
import { configureChains, createConfig, getAccount  } from '@wagmi/core';
import { arbitrum, mainnet, polygon } from '@wagmi/core/chains';


const chains = [arbitrum, mainnet, polygon]
const projectId = 'my project id'

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
    const wagmiConfig = createConfig({
      autoConnect: true,
      connectors: w3mConnectors({ projectId, chains }),
      publicClient
    })
const ethereumClient = new EthereumClient(wagmiConfig, chains)
this.web3Modal = new Web3Modal({ projectId, themeVariables: {'--w3m-z-index': '1100'} }, ethereumClient)

And on my custom button im using:

this.web3Modal.openModal();

but we don't have:

await this.web3Modal.connect();

how am I to know when the user connected?

Answer 1

try to use

const unwatch =  watchAccount((account) => console.log(account));

watchAccount is under WagmiCore

Answer 2

This could help with Web3Modal personal_sign in React App (related to the question subject).

Docs : https://docs.walletconnect.com/web3modal/react/about

Packages : @web3modal/[email protected] [email protected]

    const ethersProvider = new BrowserProvider(walletProvider)
    const signer = await ethersProvider.getSigner()
    const signature = await signer.signMessage('message content')