Incompatible types MetaMaskInpageProvider and ethers.providers.Web3Provider()

[microHoffman]

Hello, I installed the typings for Metamask provider from this @metamask/providers package. Since we allow multiple providers to be used, we wrap the provider into standardized Web3Provider from ethers package. However, I am unable to pass the MetaMaskInpageProvider to Web3Provider constructor like this:

import { ethers } from 'ethers'
import type { MetaMaskInpageProvider } from '@metamask/providers'
  
const setWalletProvider = async (newWalletProvider: MetaMaskInpageProvider): Promise<void> => {
    walletProvider.value = new ethers.providers.Web3Provider(newWalletProvider) // this throws
}

Error is following:

Argument of type 'MetaMaskInpageProvider' is not assignable to parameter of type 'ExternalProvider | JsonRpcFetchFunc'.   
Type 'MetaMaskInpageProvider' is not assignable to type 'ExternalProvider'.     
Types of property 'sendAsync' are incompatible.       
Type '(payload: JsonRpcRequest<unknown>, callback: (error: Error, result?: JsonRpcResponse<unknown>) => void) => void' is not assignable to type '(request: { method: string; params?: any[]; }, callback: (error: any, response: any) => void) => void'.         
Types of parameters 'payload' and 'request' are incompatible.           
Type '{ method: string; params?: any[]; }' is missing the following properties from type 'JsonRpcRequest<unknown>': jsonrpc, id

I can easily surpress the error by @ts-ignore, but do you think it would be possible to make the MetaMaskInpageProvider compatible with the ethers.providers.Web3Provider? Or should I rather post an issue to the ethers? Thanks!

[wbt]

Any updates on this?

[mcmire]

This is still on our roadmap, but no updates so far, sorry.

[dhapoer]

Hi @mcmire, any update on this?

[mcmire]

@dhapoer No, sorry, no updates. Now that I look at this again I'm actually wondering whether this might be an issue with Ethers. Our type is more strict and requires the request object to be a JSON-RPC request object. I can look into this further.

[mcmire]

Okay, I've just done a quick check on a codesandbox, and it appears that this may be fixed in Ethers v6 if you use BrowserProvider instead of Web3Provider:

import { BrowserProvider } from 'ethers'
import type { MetaMaskInpageProvider } from '@metamask/providers'
  
const setWalletProvider = async (newWalletProvider: MetaMaskInpageProvider): Promise<void> => {
  walletProvider.value = new BrowserProvider(newWalletProvider)
}

Can you give that a shot and let me know?