WalletConnect V2 in vanilla JavaScript personalsign issue

Question

As many others, I am facing the migration to WC1 to WC2 on my site using HTML and simply vanilla JavaScript. There are many ways to do that, and I've tried many without good results.

Actually, I've made this solution that works well with metamask as the plugin browser, but not if used scanning a QR code.

After the address connection, I want to send a personalsign to that wallet; if I have scanned the QR code, I take this error:

Enter image description here

Here is my JavaScript code:

import {
  EthereumClient,
  w3mConnectors,
  w3mProvider,
  WagmiCore,
  WagmiCoreChains,
  WagmiCoreConnectors
} from "https://unpkg.com/@web3modal/[email protected]";

import { Web3Modal } from "https://unpkg.com/@web3modal/[email protected]";

// 0. Import wagmi dependencies
const { mainnet, polygon, avalanche, arbitrum } = WagmiCoreChains;
const { configureChains, createConfig, watchAccount, signMessage, disconnect  } = WagmiCore;

const projectId = "PRIVATE_ID";
const chains = [mainnet, polygon, avalanche, arbitrum];
// 2. Configure wagmi client
const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: [
      ...w3mConnectors({ chains, version: 2, projectId })
   ],
  publicClient
});

// 3. Create Ethereum and modal clients
const ethereumClient = new EthereumClient(wagmiConfig, chains);
export const web3Modal = new Web3Modal(
  {
    projectId

  },
  ethereumClient
);
const unwatch = watchAccount((account) => checkaccount(account));

document.getElementById('my-button').addEventListener('click', () => {
  web3Modal.openModal()
})

async function checkaccount(account)
{
  try {
    if (account.address) {
      const signature = await signMessage({
      message: 'prova 123',
    });
    console.log(signature);
        await disconnect();

    }
  }
  catch (err) {
      console.log(err);
  }
}

I have also tried to update https://unpkg.com/@web3modal/[email protected]" to https://unpkg.com/@web3modal/[email protected]", but I take another error about process.env undefined.

Answer 1

Use Web3.js to sign the message. It will be easier for you though their documentation is not clear, so you can only connect your wallet with web3modal and then sign the message with wagmi or Web3.js.

Answer 2

here is the solution for the second error "process.env undefined."

if (typeof process === 'undefined') { window.process = { env: { NODE_ENV: 'development' } }; }