web3js – How to Implement WalletConnect with Vanilla JavaScript

Metamask do not expose the accounts by default anymore. You will need to request the user to allow your app to access the account.

You can use this code (see original post here: https://medium.com/metamask/https-medium-com-metamask-breaking-change-injecting-web3-7722797916a8 )

window.addEventListener('load', async () => {
    // Modern dapp browsers...
    if (window.ethereum) {
        window.web3 = new Web3(ethereum);
        try {
            // Request account access if needed
            await ethereum.enable();
            // Acccounts now exposed
            web3.eth.sendTransaction({/* ... */});
        } catch (error) {
            // User denied account access...
        }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
        window.web3 = new Web3(web3.currentProvider);
        // Acccounts always exposed
        web3.eth.sendTransaction({/* ... */});
    }
    // Non-dapp browsers...
    else {
        console.log('Non-Ethereum browser detected. You should consider trying MetaMask!');
    }
});

If the user has privacy mode anable, when you app loads it will open a metamask window asking to allow connection. If you disable privacy mode it won't ask for anything.

Hope this help.

If safeProxyContract.isValidSignature(msgHash, signature) (See CompatibilityFallbackHandler.sol#L66) returns the EIP1271 magic value, then the message with the msgHash is signed. If it doesn't, then it isn't signed

const UPDATED_EIP1271_MAGIC_VALUE = '0x1626ba7e'

let isValidSignature = await safeProxyContract.isValidSignature(msgHash, signature)

// if isValidSignature() returns the EIP-1271 magic value, the signature is valid
if (isValidSignature == UPDATED_EIP1271_MAGIC_VALUE) {
  signatureValid = true
}

But what I couldn't figure out was when to make the call to isValidSignature(). Because the WalletConnect modal actually resolves 0x right after the user issues the txn, without waiting for the txn to be confirmed. So there is no way to know the txn hash, nor when/if the sign message txn was mined or not

But GnosisSafe contract emits an event during those txn. So I added a once event listener to the contract to listen for that event, and then check isValidSignature()

const msgHash = ethers.utils.hashMessage(rawMessage)
const getMessageHash = await wsSafeProxyContract.getMessageHash(msgHash)
// login() only after the _signMessage() txn is mined and SignMsg(msgHash) event emitted
wsSafeProxyContract.once(wsSafeProxyContract.filters.SignMsg(getMessageHash), async () => {
  await login()
})

Thanks @Richard for helping out!