fix: use ethers peer dependency for providers (#307)

.changeset/pretty-peas-laugh.md

@@ -0,0 +1,7 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Add `ethers` to peer dependencies to ensure consistent versioning with wagmi
+
+We previously had a direct dependency on `@ethersproject/providers`, but this meant that provider instances generated by RainbowKit could potentially clash with the version of Ethers.js installed alongside wagmi. To avoid this, we’re now relying on the `ethers` peer dependency that wagmi already requires, ensuring that there's only ever a single copy of `ethers` between them.

packages/rainbowkit/package.json

@@ -39,22 +39,24 @@
   "author": "Rainbow",
   "license": "MIT",
   "peerDependencies": {
+    "ethers": ">=5.5.1",
     "react": ">=17",
     "react-dom": ">=17",
     "wagmi": "^0.3.2"
   },
   "devDependencies": {
     "@ethersproject/abstract-provider": "^5.5.1",
+    "@ethersproject/providers": "^5.5.1",
     "@types/qrcode": "^1.4.2",
     "@vanilla-extract/private": "^1.0.2",
     "autoprefixer": "^10.4.0",
+    "ethers": "^5.0.0",
     "nock": "^13.2.4",
     "postcss": "^8.4.4",
     "react": "^18.0.0",
     "vitest": "^0.5.0"
   },
   "dependencies": {
-    "@ethersproject/providers": "^5.5.1",
     "@vanilla-extract/css": "^1.6.6",
     "@vanilla-extract/dynamic": "^2.0.2",
     "@vanilla-extract/sprinkles": "^1.4.0",

packages/rainbowkit/src/chains/apiProviders/ApiProvider.ts

@@ -1,12 +1,9 @@
-import {
-  BaseProvider,
-  WebSocketProvider as BaseWebSocketProvider,
-} from '@ethersproject/providers';
+import { providers } from 'ethers';
 import { Chain } from '../../components/RainbowKitProvider/RainbowKitChainContext';
 
 export type ApiProvider<
-  Provider extends BaseProvider = BaseProvider,
-  WebSocketProvider extends BaseWebSocketProvider = BaseWebSocketProvider
+  Provider extends providers.BaseProvider = providers.BaseProvider,
+  WebSocketProvider extends providers.WebSocketProvider = providers.WebSocketProvider
 > = (chain: Chain) => {
   chain: Chain;
   provider: () => Provider;

packages/rainbowkit/src/chains/apiProviders/alchemy.ts

@@ -1,16 +1,19 @@
-import {
-  AlchemyProvider,
-  AlchemyWebSocketProvider,
-} from '@ethersproject/providers';
+import { providers } from 'ethers';
 import { ApiProvider } from './ApiProvider';
 
 export const defaultAlchemyId = '_gg7wSSi0KMBsdKnGVfHDueq6xMB9EkC';
 
 export const alchemy = (
   alchemyId: string = defaultAlchemyId
-): ApiProvider<AlchemyProvider, AlchemyWebSocketProvider> => {
+): ApiProvider<
+  providers.AlchemyProvider,
+  providers.AlchemyWebSocketProvider
+> => {
   return function (chain) {
-    if (!chain.rpcUrls.alchemy) return null;
+    if (!chain.rpcUrls.alchemy) {
+      return null;
+    }
+
     return {
       chain: {
         ...chain,
@@ -19,9 +22,9 @@ export const alchemy = (
           default: `${chain.rpcUrls.alchemy}/${alchemyId}`,
         },
       },
-      provider: () => new AlchemyProvider(chain.id, alchemyId),
+      provider: () => new providers.AlchemyProvider(chain.id, alchemyId),
       webSocketProvider: () =>
-        new AlchemyWebSocketProvider(chain.id, alchemyId),
+        new providers.AlchemyWebSocketProvider(chain.id, alchemyId),
     };
   };
 };

packages/rainbowkit/src/chains/apiProviders/fallback.ts

@@ -1,19 +1,19 @@
-import {
-  StaticJsonRpcProvider,
-  WebSocketProvider,
-} from '@ethersproject/providers';
+import { providers } from 'ethers';
 import { ApiProvider } from './ApiProvider';
 
 export const fallback = (): ApiProvider<
-  StaticJsonRpcProvider,
-  WebSocketProvider
+  providers.StaticJsonRpcProvider,
+  providers.WebSocketProvider
 > => {
   return function (chain) {
-    if (!chain.rpcUrls.default) return null;
+    if (!chain.rpcUrls.default) {
+      return null;
+    }
+
     return {
       chain,
       provider: () =>
-        new StaticJsonRpcProvider(chain.rpcUrls.default, chain.id),
+        new providers.StaticJsonRpcProvider(chain.rpcUrls.default, chain.id),
     };
   };
 };

packages/rainbowkit/src/chains/apiProviders/infura.ts

@@ -1,16 +1,16 @@
-import {
-  InfuraProvider,
-  InfuraWebSocketProvider,
-} from '@ethersproject/providers';
+import { providers } from 'ethers';
 import { ApiProvider } from './ApiProvider';
 
 export const defaultInfuraId = '84842078b09946638c03157f83405213';
 
 export const infura = (
   infuraId: string = defaultInfuraId
-): ApiProvider<InfuraProvider, InfuraWebSocketProvider> => {
+): ApiProvider<providers.InfuraProvider, providers.InfuraWebSocketProvider> => {
   return function (chain) {
-    if (!chain.rpcUrls.infura) return null;
+    if (!chain.rpcUrls.infura) {
+      return null;
+    }
+
     return {
       chain: {
         ...chain,
@@ -19,8 +19,9 @@ export const infura = (
           default: `${chain.rpcUrls.infura}/${infuraId}`,
         },
       },
-      provider: () => new InfuraProvider(chain.id, infuraId),
-      webSocketProvider: () => new InfuraWebSocketProvider(chain.id, infuraId),
+      provider: () => new providers.InfuraProvider(chain.id, infuraId),
+      webSocketProvider: () =>
+        new providers.InfuraWebSocketProvider(chain.id, infuraId),
     };
   };
 };

packages/rainbowkit/src/chains/apiProviders/jsonRpc.ts

@@ -1,16 +1,20 @@
-import {
-  StaticJsonRpcProvider,
-  WebSocketProvider,
-} from '@ethersproject/providers';
+import { providers } from 'ethers';
 import { Chain } from '../../components/RainbowKitProvider/RainbowKitChainContext';
 import { ApiProvider } from './ApiProvider';
 
 export const jsonRpc = (
   getRpcUrls: (chain: Chain) => { rpcUrl: string; webSocketRpcUrl?: string }
-): ApiProvider<StaticJsonRpcProvider, WebSocketProvider> => {
+): ApiProvider<
+  providers.StaticJsonRpcProvider,
+  providers.WebSocketProvider
+> => {
   return function (chain) {
     const { rpcUrl, webSocketRpcUrl } = getRpcUrls(chain);
-    if (rpcUrl === '') return null;
+
+    if (rpcUrl === '') {
+      return null;
+    }
+
     return {
       chain: {
         ...chain,
@@ -19,10 +23,10 @@ export const jsonRpc = (
           default: rpcUrl,
         },
       },
-      provider: () => new StaticJsonRpcProvider(rpcUrl, chain.id),
+      provider: () => new providers.StaticJsonRpcProvider(rpcUrl, chain.id),
       ...(webSocketRpcUrl && {
         webSocketProvider: () =>
-          new WebSocketProvider(webSocketRpcUrl, chain.id),
+          new providers.WebSocketProvider(webSocketRpcUrl, chain.id),
       }),
     };
   };

packages/rainbowkit/src/chains/configureChains.ts

@@ -1,13 +1,10 @@
-import {
-  BaseProvider,
-  WebSocketProvider as BaseWebSocketProvider,
-} from '@ethersproject/providers';
+import { providers } from 'ethers';
 import { Chain } from '../components/RainbowKitProvider/RainbowKitChainContext';
 import { ApiProvider } from './apiProviders/ApiProvider';
 
 export const configureChains = <
-  Provider extends BaseProvider = BaseProvider,
-  WebSocketProvider extends BaseWebSocketProvider = BaseWebSocketProvider
+  Provider extends providers.BaseProvider = providers.BaseProvider,
+  WebSocketProvider extends providers.WebSocketProvider = providers.WebSocketProvider
 >(
   defaultChains: Chain[],
   apiProviders: ApiProvider<Provider, WebSocketProvider>[]

packages/rainbowkit/src/transactions/TransactionStoreContext.tsx

@@ -1,4 +1,3 @@
-import { BaseProvider } from '@ethersproject/providers';
 import React, { createContext, useContext, useEffect, useState } from 'react';
 import { useProvider } from 'wagmi';
 import { useAddress } from '../hooks/useAddress';
@@ -18,7 +17,7 @@ export function TransactionStoreProvider({
 }: {
   children: React.ReactNode;
 }) {
-  const provider = useProvider<BaseProvider>();
+  const provider = useProvider();
   const address = useAddress();
   const chainId = useChainId();
 

packages/rainbowkit/src/transactions/transactionStore.ts

@@ -1,4 +1,4 @@
-import type { BaseProvider } from '@ethersproject/providers';
+import { providers } from 'ethers';
 
 const storageKey = 'rk-transactions';
 
@@ -61,15 +61,15 @@ function validateTransaction(
 export function createTransactionStore({
   provider: initialProvider,
 }: {
-  provider: BaseProvider;
+  provider: providers.BaseProvider;
 }) {
   let data: Data = loadData();
 
   let provider = initialProvider;
   const listeners: Set<() => void> = new Set();
   const transactionRequestCache: Map<string, Promise<void>> = new Map();
 
-  function setProvider(newProvider: BaseProvider): void {
+  function setProvider(newProvider: providers.BaseProvider): void {
     provider = newProvider;
   }