TypeScript Error: 'RelayProvider' is not assignable to parameter of type 'ExternalProvider | JsonRpcFetchFunc'

[varunsrin]

A typing error is encountered when following the gsn-with-ethers test example and yarn installing the most up-to-date versions of the libraries:

import { ethers } from "hardhat";
import { GsnTestEnvironment } from '@opengsn/gsn/dist/GsnTestEnvironment';
import { RelayProvider } from '@opengsn/gsn';
const Web3HttpProvider = require( 'web3-providers-http')

let env = await GsnTestEnvironment.startGsn('localhost');
const { paymasterAddress, forwarderAddress } = env.contractsDeployment;

const config = {
    paymasterAddress: paymasterAddress,
};

const web3provider = new Web3HttpProvider('http://localhost:8545');
const gsnProvider = await RelayProvider.newProvider({provider: web3provider, config}).init();
const etherProvider = new ethers.providers.Web3Provider(gsnProvider);

The assignment to etherProvider Results in the following TS Error:

Argument of type 'RelayProvider' is not assignable to parameter of type 'ExternalProvider | JsonRpcFetchFunc'.
  Type 'RelayProvider' is not assignable to type 'ExternalProvider'.
    Types of property 'send' are incompatible.
      Type '(payload: JsonRpcPayload, callback: JsonRpcCallback) => void' is not assignable to type '(request: { method: string; params?: any[] | undefined; }, callback: (error: any, response: any) => void) => void'.
        Types of parameters 'payload' and 'request' are incompatible.
          Property 'jsonrpc' is missing in type '{ method: string; params?: any[] | undefined; }' but required in type 'JsonRpcPayload'.ts(2345)

Workaround: the provider can still be used if the typing error is ignored.

[josipbagaric]

Confirming this error.

[kliyer-ai]

Can you let me know if this works?

class WrappedRelayProvider extends RelayProvider implements ethers.providers.ExternalProvider {

    send(request: { method: string, params?: Array<any> }, callback: (error: any, response: any) => void | undefined): void {
        super.send({
            jsonrpc: '2.0',
            method: request.method,
            params: request.params ?? []
        }, callback)
    }

}

const relayConfing = {
    paymasterAddress: CONFIG.PAYMASTER_ADDRESS
}
 const gsnProvider = (await gsn.RelayProvider.newProvider({ provider: ethereum, config: relayConfing }).init()) as WrappedRelayProvider
const ethersProvider = new ethers.providers.Web3Provider(gsnProvider )

[varunsrin]

yes, that resolves it