⏩Migration Guide ethers.js v5 to v6

How to migrate your code to ethers.js v6

With the @gelatonetwork/relay-sdk version 5, the package uses ethers.js v6. In this guide, we will review the main changes related to the usage of the relay-sdk.

For a comprehensive list of changes when migrating from ethers.js v5 to ethers.js v6, please consult the official documentation.

Creating the calldata: populateTransaction method

In all Relay requests, we send the calldata to be forwarded to the target contract. One way of creating this calldata was by invoking the populateTransaction method. The way this is done has changed from ethers v5 to v6: ethers@v5

// encoding increment method call
const contract = new ethers.Contract(counter, abi, signer);
const { data } = await contract.populateTransaction.increment();

ethers@v6

// encoding increment method call
const contract = new ethers.Contract(counter, abi, signer);
const { data } = await contract.increment.populateTransaction();

Providers

When instantiating a provider, either on the backend or frontend, you will have to update your code. This is because the package ethers.providers has been moved to ethers. So the change would look like this: ethers@v5

// Instantiating a JsonRpcProvider
const provider =  ethers.providers.JsonRpcProvider()

ethers@v6

// Instantiating a JsonRpcProvider
const provider = new ethers.JsonRpcProvider()

In addition to the change mentioned above, the Web3Provider, which was used to instantiate the frontend provider using (window.ethereum), is now called BrowserProvider. So, you'll need to make the following update: ethers@v5

// Instantiating a Web3Provider
const provider =  new ethers.providers.Web3Provider(window.ethereum)

ethers@v6

// Instantiating a BrowserProvider
const provider = new ethers.BrowserProvider(window.ethereum)

ChainId

When querying the chainId from the provider in ethers.js v5, the result was returned as a number. However, in v6, the chainId is returned as a BigInt. If you have code that relies on the chainId being a number, you'll need to update it to handle a BigInt instead.

Here's a simple example that may help you understand how to adapt your code: ethers@v5

// ChainId
const chainId = (await provider.getNetwork()).chainId;
const chainId = 5 // Goerli

ethers@v6

// ChainId
const chainId = (await provider.getNetwork()).chainId;
const chainId = 5n // Goerli
const chainId = BigInt(5) // Goerli

Examples

Please visit our examples GitHub repository, which showcases the usage of the new @gelatonetwork/relay-sdk v5 implementation for both frontend and backend.

GitHub - gelatodigital/relay-examples-frontend-backend-v5: Repo showcasing how to call the relay from a React UI as well as from nodeGitHub