Merge pull request Synthetixio#235 from Synthetixio/feature/update-de…

…pendencies

update ethers dependencies

packages/optimism-networks/package.json

@@ -35,8 +35,9 @@
 		"url": "https://github.com/Synthetixio/js-monorepo/issues"
 	},
 	"dependencies": {
-		"@metamask/providers": "^8.1.1",
-		"ethers": "^5.5.3"
+		"@ethersproject/bignumber": "^5.6.2",
+		"@ethersproject/bytes": "^5.6.1",
+		"@metamask/providers": "^8.1.1"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.11.0",

packages/optimism-networks/src/index.ts

@@ -1,5 +1,6 @@
 import type { MetaMaskInpageProvider } from '@metamask/providers';
-import { ethers, BigNumber } from 'ethers';
+import { hexStripZeros } from '@ethersproject/bytes';
+import { BigNumber } from '@ethersproject/bignumber';
 
 import {
 	OPTIMISM_NETWORKS,
@@ -42,7 +43,7 @@ const switchToL1 = async ({ ethereum }: { ethereum: MetaMaskInpageProvider }): P
 	const networkId =
 		L2_TO_L1_NETWORK_MAPPER[Number(ethereum.chainId)] ||
 		L2_TO_L1_NETWORK_MAPPER[DEFAULT_LAYER2_NETWORK];
-	const formattedChainId = ethers.utils.hexStripZeros(BigNumber.from(networkId).toHexString());
+	const formattedChainId = hexStripZeros(BigNumber.from(networkId).toHexString());
 	await ethereum.request({
 		method: 'wallet_switchEthereumChain',
 		params: [{ chainId: formattedChainId }],
@@ -55,7 +56,7 @@ const switchToL2 = async ({ ethereum }: { ethereum: MetaMaskInpageProvider }): P
 			L1_TO_L2_NETWORK_MAPPER[Number(ethereum.chainId)] ||
 			L1_TO_L2_NETWORK_MAPPER[DEFAULT_MAINNET_NETWORK];
 
-		const formattedChainId = ethers.utils.hexStripZeros(BigNumber.from(networkId).toHexString());
+		const formattedChainId = hexStripZeros(BigNumber.from(networkId).toHexString());
 		await ethereum.request({
 			method: 'wallet_switchEthereumChain',
 			params: [{ chainId: formattedChainId }],

packages/providers/package.json

@@ -35,10 +35,11 @@
 		"url": "https://github.com/Synthetixio/js-monorepo/issues"
 	},
 	"dependencies": {
+		"@ethersproject/bignumber": "^5.6.2",
+		"@ethersproject/bytes": "^5.6.1",
 		"@ethersproject/providers": "^5.6.8",
 		"@synthetixio/contracts-interface": "workspace:*",
-		"@synthetixio/optimism-networks": "workspace:*",
-		"ethers": "^5.5.3"
+		"@synthetixio/optimism-networks": "workspace:*"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.11.0",

packages/providers/src/index.ts

@@ -1,4 +1,6 @@
-import { BigNumber, providers as ethersProviders, utils } from 'ethers';
+import { BigNumber } from '@ethersproject/bignumber';
+import { Web3Provider, InfuraProvider, StaticJsonRpcProvider } from '@ethersproject/providers';
+import { hexStripZeros } from '@ethersproject/bytes';
 import {
 	L1_TO_L2_NETWORK_MAPPER,
 	L2_TO_L1_NETWORK_MAPPER,
@@ -10,39 +12,32 @@ import { NetworkIdByName } from '@synthetixio/contracts-interface';
 
 const loadProvider = ({ networkId = 1, infuraId, provider }: ProviderConfig): SynthetixProvider => {
 	if (provider) {
-		return new ethersProviders.Web3Provider(provider);
+		return new Web3Provider(provider);
 	}
 	if (infuraId) {
-		return new ethersProviders.InfuraProvider(networkId, infuraId);
+		return new InfuraProvider(networkId, infuraId);
 	}
 	throw new Error(ERRORS.noWeb3Provider);
 };
 
-const getOptimismProvider = ({
-	networkId,
-}: {
-	networkId: number;
-}): ethersProviders.StaticJsonRpcProvider => {
+const getOptimismProvider = ({ networkId }: { networkId: number }): StaticJsonRpcProvider => {
 	if (!networkId) throw new Error(ERRORS.noNetworkId);
 
 	const ovmNetworkId = L1_TO_L2_NETWORK_MAPPER[networkId] || networkId;
 	if (!OPTIMISM_NETWORKS[networkId]) throw new Error(ERRORS.wrongNetworkId);
 
-	return new ethersProviders.StaticJsonRpcProvider(OPTIMISM_NETWORKS[ovmNetworkId].rpcUrls[0]);
+	return new StaticJsonRpcProvider(OPTIMISM_NETWORKS[ovmNetworkId].rpcUrls[0]);
 };
 
 /**
  * @dev if the new network is not added already, for instance in meta mask, this will throw an error. Call `wallet_addEthereumChain`
  * @param web3Provider
  * @param isOVM
  */
-const handleSwitchChain = async (
-	web3Provider: ethersProviders.Web3Provider,
-	isOVM: boolean
-): Promise<boolean> => {
+const handleSwitchChain = async (web3Provider: Web3Provider, isOVM: boolean): Promise<boolean> => {
 	if (!web3Provider.provider?.request) return false;
 	const newNetworkId = getCorrespondingNetwork(isOVM);
-	const formattedChainId = utils.hexStripZeros(BigNumber.from(newNetworkId).toHexString());
+	const formattedChainId = hexStripZeros(BigNumber.from(newNetworkId).toHexString());
 	const success = await web3Provider.provider.request({
 		method: 'wallet_switchEthereumChain',
 		params: [{ chainId: formattedChainId }],

packages/queries/__tests__/debt.test.ts

@@ -2,20 +2,16 @@ import { getFakeQueryContext, getWrapper } from '../testUtils';
 import { renderHook } from '@testing-library/react-hooks';
 import useGetDebtL2 from '../src/queries/debt/useGetDebtL2';
 import { useGetDebtL1 } from '../generated/queryFuncs';
-import { providers } from 'ethers';
-
+import { getDefaultProvider } from '@ethersproject/providers';
 jest.setTimeout(20000);
 
 describe('@synthetixio/queries debt', () => {
 	it.skip('useGetDebtL2', async () => {
 		const ctx = getFakeQueryContext();
 		const wrapper = getWrapper();
-		const { result, waitFor } = renderHook(
-			() => useGetDebtL2(ctx, providers.getDefaultProvider()),
-			{
-				wrapper,
-			}
-		);
+		const { result, waitFor } = renderHook(() => useGetDebtL2(ctx, getDefaultProvider()), {
+			wrapper,
+		});
 		await waitFor(() => !!result.current.data?.length, { timeout: 20000 });
 		// uncomment for current state of debt on L2
 		/* 	result.current.data?.forEach((synth) =>
@@ -27,12 +23,9 @@ describe('@synthetixio/queries debt', () => {
 	it.skip('useGetDebtL1', async () => {
 		const ctx = getFakeQueryContext();
 		const wrapper = getWrapper();
-		const { result, waitFor } = renderHook(
-			() => useGetDebtL1(ctx, providers.getDefaultProvider()),
-			{
-				wrapper,
-			}
-		);
+		const { result, waitFor } = renderHook(() => useGetDebtL1(ctx, getDefaultProvider()), {
+			wrapper,
+		});
 		await waitFor(() => !!result.current.data?.length, { timeout: 20000 });
 
 		// uncomment for current state of debt on L1

packages/queries/__tests__/network.test.ts

@@ -1,7 +1,8 @@
 import { NetworkIdByName } from '@synthetixio/contracts-interface';
 import { wei } from '@synthetixio/wei';
 import { renderHook } from '@testing-library/react-hooks';
-import { ethers, BigNumber } from 'ethers';
+import { BigNumber } from '@ethersproject/bignumber';
+import { JsonRpcProvider } from '@ethersproject/providers';
 import { set } from 'lodash';
 import useEthGasPriceQuery, { computeGasFee } from '../src/queries/network/useEthGasPriceQuery';
 import { getFakeQueryContext, getWrapper } from '../testUtils';
@@ -14,7 +15,7 @@ describe('@synthetixio/queries network useEthGasPriceQuery', () => {
 		// set to 0.015 gwei
 		const defaultGasPrice = wei(0.015, 9).toBN();
 		//mock provider
-		set(ctx.provider as ethers.providers.JsonRpcProvider, 'getGasPrice', async () =>
+		set(ctx.provider as JsonRpcProvider, 'getGasPrice', async () =>
 			Promise.resolve(defaultGasPrice)
 		);
 
@@ -36,7 +37,7 @@ describe('@synthetixio/queries network useEthGasPriceQuery', () => {
 		// set to 0.015 gwei
 		const defaultGasPrice = wei(0.015, 9).toBN();
 		//mock provider
-		set(ctx.provider as ethers.providers.JsonRpcProvider, 'getGasPrice', async () =>
+		set(ctx.provider as JsonRpcProvider, 'getGasPrice', async () =>
 			Promise.resolve(defaultGasPrice)
 		);
 
@@ -87,7 +88,7 @@ describe('@synthetixio/queries network useEthGasPriceQuery', () => {
 		// set to 100 gwei
 		const defaultBaseFeePerGas = wei(100, 9).toBN();
 		//mock provider
-		set(ctx.provider as ethers.providers.JsonRpcProvider, 'getBlock', async () =>
+		set(ctx.provider as JsonRpcProvider, 'getBlock', async () =>
 			Promise.resolve({ baseFeePerGas: defaultBaseFeePerGas })
 		);
 

packages/queries/__tests__/rates.test.ts

@@ -5,7 +5,7 @@ import { renderHook } from '@testing-library/react-hooks';
 
 import { set } from 'lodash';
 import { wei } from '@synthetixio/wei';
-import { ethers } from 'ethers';
+import { formatBytes32String } from '@ethersproject/strings';
 
 describe('@synthetixio/queries rates', () => {
 	const ctx = getFakeQueryContext();
@@ -14,7 +14,7 @@ describe('@synthetixio/queries rates', () => {
 		const wrapper = getWrapper();
 
 		set(ctx.snxjs as any, 'contracts.SynthUtil.synthsRates', async () => [
-			[ethers.utils.formatBytes32String('sETH'), ethers.utils.formatBytes32String('sBTC')],
+			[formatBytes32String('sETH'), formatBytes32String('sBTC')],
 			[wei(1000).toBN(), wei(10000).toBN()],
 		]);
 		set(ctx.snxjs as any, 'contracts.ExchangeRates.ratesForCurrencies', async () => [

packages/queries/__tests__/walletBalances.test.ts

@@ -1,6 +1,7 @@
 import { wei } from '@synthetixio/wei';
 import { renderHook } from '@testing-library/react-hooks';
-import { ethers } from 'ethers';
+import { formatBytes32String } from '@ethersproject/strings';
+import { AddressZero } from '@ethersproject/constants';
 import { set } from 'lodash';
 import useSynthsBalancesQuery from '../src/queries/walletBalances/useSynthsBalancesQuery';
 import { getFakeQueryContext, getWrapper } from '../testUtils';
@@ -15,15 +16,14 @@ describe('@synthetixio/queries walletBalances', () => {
 		const fakeETHValue = wei(1000);
 
 		set(ctx.snxjs as any, 'contracts.SynthUtil.synthsBalances', async () => [
-			['sUSD', 'sETH', 'sBTC'].map(ethers.utils.formatBytes32String),
+			['sUSD', 'sETH', 'sBTC'].map(formatBytes32String),
 			[wei(100), wei(1), wei(0.2)].map((v) => v.toBN()),
 			[wei(100), wei(1).mul(fakeETHValue), wei(0.2).mul(fakeBTCValue)].map((v) => v.toBN()),
 		]);
 
-		const { result, waitFor } = renderHook(
-			() => useSynthsBalancesQuery(ctx, ethers.constants.AddressZero),
-			{ wrapper }
-		);
+		const { result, waitFor } = renderHook(() => useSynthsBalancesQuery(ctx, AddressZero), {
+			wrapper,
+		});
 		await waitFor(() => result.current.isSuccess);
 
 		expect(result.current.data).toEqual({

packages/queries/package.json

@@ -36,14 +36,22 @@
 		"url": "https://github.com/Synthetixio/js-monorepo/issues"
 	},
 	"dependencies": {
-		"@snapshot-labs/snapshot.js": "^0.3.22",
+		"@ethersproject/abstract-signer": "^5.6.2",
+		"@ethersproject/address": "^5.6.1",
+		"@ethersproject/bignumber": "^5.6.2",
+		"@ethersproject/constants": "^5.6.1",
+		"@ethersproject/contracts": "^5.6.2",
+		"@ethersproject/providers": "^5.6.8",
+		"@ethersproject/strings": "^5.6.1",
+		"@ethersproject/transactions": "^5.6.2",
+		"@ethersproject/units": "^5.6.1",
+		"@snapshot-labs/snapshot.js": "^0.4.13",
 		"@synthetixio/codegen-graph-ts": "workspace:*",
 		"@synthetixio/contracts-interface": "workspace:*",
 		"@synthetixio/optimism-networks": "workspace:*",
 		"@synthetixio/wei": "workspace:*",
 		"axios": "^0.21.4",
 		"date-fns": "^2.19.0",
-		"ethers": "^5.5.3",
 		"graphql": "^15.5.0",
 		"graphql-request": "^3.4.0",
 		"lodash": "^4.17.21"

packages/queries/src/context.ts

@@ -1,4 +1,5 @@
-import { ethers } from 'ethers';
+import { Signer } from '@ethersproject/abstract-signer';
+import { Provider } from '@ethersproject/providers';
 import { SynthetixJS, NetworkId } from '@synthetixio/contracts-interface';
 
 export interface SubgraphEndpoints {
@@ -10,8 +11,8 @@ export interface SubgraphEndpoints {
 
 export interface QueryContext {
 	networkId: NetworkId | null;
-	provider: ethers.providers.Provider | null;
-	signer: ethers.Signer | null;
+	provider: Provider | null;
+	signer: Signer | null;
 	snxjs: SynthetixJS | null;
 	subgraphEndpoints: SubgraphEndpoints;
 }

packages/queries/src/index.ts

@@ -1,7 +1,8 @@
 import clone from 'lodash/clone';
 import partial from 'lodash/partial';
 
-import ethers from 'ethers';
+import { Signer } from '@ethersproject/abstract-signer';
+import { Provider } from '@ethersproject/providers';
 import { QueryContext, SubgraphEndpoints } from './context';
 
 import { synthetix, NetworkId } from '@synthetixio/contracts-interface';
@@ -14,7 +15,7 @@ import * as issuance from '../generated/issuanceSubgraphQueries';
 import * as subgraph from '../generated/mainSubgraphQueries';
 
 import * as FUNCS from '../generated/queryFuncs';
-import React from 'react';
+import { createContext, useContext } from 'react';
 
 import { DEFAULT_SUBGRAPH_ENDPOINTS } from './constants';
 
@@ -66,8 +67,8 @@ export function createQueryContext({
 	subgraphEndpoints,
 }: {
 	networkId: NetworkId | null;
-	provider?: ethers.providers.Provider;
-	signer?: ethers.Signer;
+	provider?: Provider;
+	signer?: Signer;
 	subgraphEndpoints?: SubgraphEndpoints;
 }): SynthetixQueryContextContent {
 	const ctx: QueryContext = {
@@ -133,11 +134,11 @@ export function createQueryContext({
 	return { context: ctx, queries: allFuncs };
 }
 
-export const SynthetixQueryContext = React.createContext<SynthetixQueryContextContent | null>(null);
+export const SynthetixQueryContext = createContext<SynthetixQueryContextContent | null>(null);
 export const SynthetixQueryContextProvider = SynthetixQueryContext.Provider;
 
 export default function useSynthetixQueries(): SynthetixQueries {
-	const ctx = React.useContext(SynthetixQueryContext);
+	const ctx = useContext(SynthetixQueryContext);
 	if (!ctx) {
 		throw new Error('No QueryClient set, use QueryClientProvider to set one');
 	}

packages/queries/src/mutations/useContractTxn.ts

@@ -1,14 +1,16 @@
-import { ethers } from 'ethers';
+import { BigNumber } from '@ethersproject/bignumber';
+import { TransactionRequest } from '@ethersproject/providers';
+import { Contract } from '@ethersproject/contracts';
 
 import { QueryContext } from '../context';
 import useEVMTxn, { UseEVMTxnOptions } from './useEVMTxn';
 
 const useContractTxn = (
 	ctx: QueryContext,
-	contract: ethers.Contract | null,
+	contract: Contract | null,
 	method: string | null,
 	args: any[] = [],
-	txnOptions: Partial<ethers.providers.TransactionRequest> = {},
+	txnOptions: Partial<TransactionRequest> = {},
 	options?: UseEVMTxnOptions
 ) => {
 	const hasSigner = Boolean(ctx.signer);
@@ -18,7 +20,7 @@ const useContractTxn = (
 			{
 				to: contract.address,
 				data: contract.interface.encodeFunctionData(method, args),
-				value: txnOptions.value || ethers.BigNumber.from(0),
+				value: txnOptions.value || BigNumber.from(0),
 				...txnOptions,
 			},
 			options

packages/queries/src/mutations/useEVMTxn.test.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { renderHook } from '@testing-library/react-hooks';
-import { BigNumber } from 'ethers';
+import { BigNumber } from '@ethersproject/bignumber';
 import { getWrapper } from '../../testUtils';
 import useEVMTxn from './useEVMTxn';