Add support for ethers.js v5

ethers.js v5 is currently in beta, but I’ve used it with other providers such as MetaMask and haven’t had any issues with it. However, it seems Magic does not support ethers v5, as the following steps produced the error shown when using ethers 5.0.0-beta.186 but not when using ether v4.

This error showed up when loading the page. If you ignored it and proceeded to use the provider and signer, you would find they are invalid and unable to send transactions or read contract data. The resulting error in this case is similar the one below, but with a method of eth_accounts instead of eth_chainId

The Error

Steps to Reproduce

Relevant portions shown below

// ConnectWallet.vue ===========================================
// Initialize Magic
const magic = new Magic(process.env.MAGIC_API_KEY, { network: 'kovan' });
magic.preload();

// Check if user is logged in
const isLoggedIn = await magic.user.isLoggedIn();
if (isLoggedIn) {
  await this.$store.dispatch('main/setEthereumData', magic);
  return
}

// If not logged in, log them in
await magic.auth.loginWithMagicLink({ email: this.email });
await this.$store.dispatch('main/setEthereumData', magic);

// Contents of the `setEthereumData` action ======================
export async function setEthereumData({ commit }, magic) {
  const provider = magic.rpcProvider;
  const ethersProvider = new ethers.providers.Web3Provider(provider);
  const signer = ethersProvider.getSigner();
  const metadata = await magic.user.getMetadata();
  const { email, publicAddress } = metadata;
})

🌎 Environment

Software	Version(s)
magic-sdk	1.3.2
ethers.js	5.0.0-beta.186 (did not work) and 4.0.47 (worked)

[smithki]

I found the bug! We had a clash with our BaseModule.request method. It so happens that EIP1193 has “stabilized” around a promise-based request method. Thankfully, our interface already matched the EIP1193 proposal before that change was even written. We were not doing our regular check on the payload.id parameter from that method however!

I’ll have a patch released for you tomorrow!

[smithki]

Nice! Thanks for raising an issue. We will try to prioritize this soon, but considering Ethers V5 is beta software and we have other immediate priorities for improving Magic, it may not happen right away. We would also welcome a PR if you (or anyone else) is able to isolate the root cause! I would start my investigation here:

https://github.com/MagicHQ/magic-js/blob/797610986f3fc1d51a991a18cdaeaee132a3abd7/src/modules/rpc-provider/index.ts#L26

I’ll also ping our resident ethers-js expert and see if they have any ideas!