diff --git a/.changeset/pretty-peas-laugh.md b/.changeset/pretty-peas-laugh.md new file mode 100644 index 0000000000..ef0b5d3ee0 --- /dev/null +++ b/.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. diff --git a/packages/rainbowkit/package.json b/packages/rainbowkit/package.json index 0de3b2f207..e6eedf6d57 100644 --- a/packages/rainbowkit/package.json +++ b/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", diff --git a/packages/rainbowkit/src/chains/apiProviders/ApiProvider.ts b/packages/rainbowkit/src/chains/apiProviders/ApiProvider.ts index 36b3fe7b6d..1a845df81f 100644 --- a/packages/rainbowkit/src/chains/apiProviders/ApiProvider.ts +++ b/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; diff --git a/packages/rainbowkit/src/chains/apiProviders/alchemy.ts b/packages/rainbowkit/src/chains/apiProviders/alchemy.ts index dc8586007c..c61feffcf7 100644 --- a/packages/rainbowkit/src/chains/apiProviders/alchemy.ts +++ b/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 => { +): 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), }; }; }; diff --git a/packages/rainbowkit/src/chains/apiProviders/fallback.ts b/packages/rainbowkit/src/chains/apiProviders/fallback.ts index 18cb8ca9c1..0815229857 100644 --- a/packages/rainbowkit/src/chains/apiProviders/fallback.ts +++ b/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), }; }; }; diff --git a/packages/rainbowkit/src/chains/apiProviders/infura.ts b/packages/rainbowkit/src/chains/apiProviders/infura.ts index 6a18d7bb90..4f1518e6d2 100644 --- a/packages/rainbowkit/src/chains/apiProviders/infura.ts +++ b/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 => { +): ApiProvider => { 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), }; }; }; diff --git a/packages/rainbowkit/src/chains/apiProviders/jsonRpc.ts b/packages/rainbowkit/src/chains/apiProviders/jsonRpc.ts index 213723a59b..690f62df69 100644 --- a/packages/rainbowkit/src/chains/apiProviders/jsonRpc.ts +++ b/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 => { +): 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), }), }; }; diff --git a/packages/rainbowkit/src/chains/configureChains.ts b/packages/rainbowkit/src/chains/configureChains.ts index 2ab45ebf2f..a60bacddde 100644 --- a/packages/rainbowkit/src/chains/configureChains.ts +++ b/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[] diff --git a/packages/rainbowkit/src/transactions/TransactionStoreContext.tsx b/packages/rainbowkit/src/transactions/TransactionStoreContext.tsx index c459ad6e23..9919adfa0c 100644 --- a/packages/rainbowkit/src/transactions/TransactionStoreContext.tsx +++ b/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(); + const provider = useProvider(); const address = useAddress(); const chainId = useChainId(); diff --git a/packages/rainbowkit/src/transactions/transactionStore.ts b/packages/rainbowkit/src/transactions/transactionStore.ts index 9e1400b810..928928a47c 100644 --- a/packages/rainbowkit/src/transactions/transactionStore.ts +++ b/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,7 +61,7 @@ function validateTransaction( export function createTransactionStore({ provider: initialProvider, }: { - provider: BaseProvider; + provider: providers.BaseProvider; }) { let data: Data = loadData(); @@ -69,7 +69,7 @@ export function createTransactionStore({ const listeners: Set<() => void> = new Set(); const transactionRequestCache: Map> = new Map(); - function setProvider(newProvider: BaseProvider): void { + function setProvider(newProvider: providers.BaseProvider): void { provider = newProvider; } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 86736ad23d..2a28f0f396 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -105,6 +105,7 @@ importers: autoprefixer: ^10.4.0 clsx: ^1.1.1 detect-browser: ^5.3.0 + ethers: ^5.0.0 focus-visible: ^5.2.0 nock: ^13.2.4 postcss: ^8.4.4 @@ -113,7 +114,6 @@ importers: react-remove-scroll: ^2.4.4 vitest: ^0.5.0 dependencies: - '@ethersproject/providers': 5.6.2 '@vanilla-extract/css': 1.6.8 '@vanilla-extract/dynamic': 2.0.2 '@vanilla-extract/sprinkles': 1.4.0_@vanilla-extract+css@1.6.8 @@ -124,9 +124,11 @@ importers: react-remove-scroll: 2.4.4_@types+react@18.0.5+react@18.0.0 devDependencies: '@ethersproject/abstract-provider': 5.6.0 + '@ethersproject/providers': 5.6.2 '@types/qrcode': 1.4.2 '@vanilla-extract/private': 1.0.3 autoprefixer: 10.4.2_postcss@8.4.6 + ethers: 5.6.2 nock: 13.2.4 postcss: 8.4.6 react: 18.0.0 @@ -2067,7 +2069,6 @@ packages: '@ethersproject/logger': 5.6.0 '@ethersproject/properties': 5.6.0 '@ethersproject/strings': 5.6.0 - dev: false /@ethersproject/abstract-provider/5.6.0: resolution: {integrity: sha512-oPMFlKLN+g+y7a79cLK3WiLcjWFnZQtXWgnLAbHZcN3s7L4v90UHpTOrLk+m3yr0gt+/h9STTM6zrr7PM8uoRw==} @@ -2088,7 +2089,6 @@ packages: '@ethersproject/bytes': 5.6.1 '@ethersproject/logger': 5.6.0 '@ethersproject/properties': 5.6.0 - dev: false /@ethersproject/address/5.6.0: resolution: {integrity: sha512-6nvhYXjbXsHPS+30sHZ+U4VMagFC/9zAk6Gd/h3S21YW4+yfb0WfRtaAIZ4kfM4rrVwqiy284LP0GtL5HXGLxQ==} @@ -2109,7 +2109,6 @@ packages: dependencies: '@ethersproject/bytes': 5.6.1 '@ethersproject/properties': 5.6.0 - dev: false /@ethersproject/bignumber/5.6.0: resolution: {integrity: sha512-VziMaXIUHQlHJmkv1dlcd6GY2PmT0khtAqaMctCIDogxkrarMzA9L94KN1NeXqqOfFD6r0sJT3vCTOFSmZ07DA==} @@ -2141,7 +2140,6 @@ packages: '@ethersproject/logger': 5.6.0 '@ethersproject/properties': 5.6.0 '@ethersproject/transactions': 5.6.0 - dev: false /@ethersproject/hash/5.6.0: resolution: {integrity: sha512-fFd+k9gtczqlr0/BruWLAu7UAOas1uRRJvOR84uDf4lNZ+bTkGl366qvniUZHKtlqxBRU65MkOobkmvmpHU+jA==} @@ -2154,7 +2152,6 @@ packages: '@ethersproject/logger': 5.6.0 '@ethersproject/properties': 5.6.0 '@ethersproject/strings': 5.6.0 - dev: false /@ethersproject/hdnode/5.6.0: resolution: {integrity: sha512-61g3Jp3nwDqJcL/p4nugSyLrpl/+ChXIOtCEM8UDmWeB3JCAt5FoLdOMXQc3WWkc0oM2C0aAn6GFqqMcS/mHTw==} @@ -2171,7 +2168,6 @@ packages: '@ethersproject/strings': 5.6.0 '@ethersproject/transactions': 5.6.0 '@ethersproject/wordlists': 5.6.0 - dev: false /@ethersproject/json-wallets/5.6.0: resolution: {integrity: sha512-fmh86jViB9r0ibWXTQipxpAGMiuxoqUf78oqJDlCAJXgnJF024hOOX7qVgqsjtbeoxmcLwpPsXNU0WEe/16qPQ==} @@ -2189,7 +2185,6 @@ packages: '@ethersproject/transactions': 5.6.0 aes-js: 3.0.0 scrypt-js: 3.0.1 - dev: false /@ethersproject/keccak256/5.6.0: resolution: {integrity: sha512-tk56BJ96mdj/ksi7HWZVWGjCq0WVl/QvfhFQNeL8fxhBlGoP+L80uDCiQcpJPd+2XxkivS3lwRm3E0CXTfol0w==} @@ -2210,7 +2205,6 @@ packages: dependencies: '@ethersproject/bytes': 5.6.1 '@ethersproject/sha2': 5.6.0 - dev: false /@ethersproject/properties/5.6.0: resolution: {integrity: sha512-szoOkHskajKePTJSZ46uHUWWkbv7TzP2ypdEK6jGMqJaEt2sb0jCgfBo0gH0m2HBpRixMuJ6TBRaQCF7a9DoCg==} @@ -2242,14 +2236,12 @@ packages: transitivePeerDependencies: - bufferutil - utf-8-validate - dev: false /@ethersproject/random/5.6.0: resolution: {integrity: sha512-si0PLcLjq+NG/XHSZz90asNf+YfKEqJGVdxoEkSukzbnBgC8rydbgbUgBbBGLeHN4kAJwUFEKsu3sCXT93YMsw==} dependencies: '@ethersproject/bytes': 5.6.1 '@ethersproject/logger': 5.6.0 - dev: false /@ethersproject/rlp/5.6.0: resolution: {integrity: sha512-dz9WR1xpcTL+9DtOT/aDO+YyxSSdO8YIS0jyZwHHSlAmnxA6cKU3TrTd4Xc/bHayctxTgGLYNuVVoiXE4tTq1g==} @@ -2263,7 +2255,6 @@ packages: '@ethersproject/bytes': 5.6.1 '@ethersproject/logger': 5.6.0 hash.js: 1.1.7 - dev: false /@ethersproject/signing-key/5.6.0: resolution: {integrity: sha512-S+njkhowmLeUu/r7ir8n78OUKx63kBdMCPssePS89So1TH4hZqnWFsThEd/GiXYp9qMxVrydf7KdM9MTGPFukA==} @@ -2284,7 +2275,6 @@ packages: '@ethersproject/logger': 5.6.0 '@ethersproject/sha2': 5.6.0 '@ethersproject/strings': 5.6.0 - dev: false /@ethersproject/strings/5.6.0: resolution: {integrity: sha512-uv10vTtLTZqrJuqBZR862ZQjTIa724wGPWQqZrofaPI/kUsf53TBG0I0D+hQ1qyNtllbNzaW+PDPHHUI6/65Mg==} @@ -2312,7 +2302,6 @@ packages: '@ethersproject/bignumber': 5.6.0 '@ethersproject/constants': 5.6.0 '@ethersproject/logger': 5.6.0 - dev: false /@ethersproject/wallet/5.6.0: resolution: {integrity: sha512-qMlSdOSTyp0MBeE+r7SUhr1jjDlC1zAXB8VD84hCnpijPQiSNbxr6GdiLXxpUs8UKzkDiNYYC5DRI3MZr+n+tg==} @@ -2332,7 +2321,6 @@ packages: '@ethersproject/signing-key': 5.6.0 '@ethersproject/transactions': 5.6.0 '@ethersproject/wordlists': 5.6.0 - dev: false /@ethersproject/web/5.6.0: resolution: {integrity: sha512-G/XHj0hV1FxI2teHRfCGvfBUHFmU+YOSbCxlAMqJklxSa7QMiHFQfAxvwY2PFqgvdkxEKwRNr/eCjfAPEm2Ctg==} @@ -2351,7 +2339,6 @@ packages: '@ethersproject/logger': 5.6.0 '@ethersproject/properties': 5.6.0 '@ethersproject/strings': 5.6.0 - dev: false /@fal-works/esbuild-plugin-global-externals/2.1.2: resolution: {integrity: sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==} @@ -4073,7 +4060,6 @@ packages: /aes-js/3.0.0: resolution: {integrity: sha1-4h3xCtbCBTKVvLuNq0Cwnb6ofk0=} - dev: false /aes-js/3.1.2: resolution: {integrity: sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==} @@ -4336,7 +4322,6 @@ packages: /bech32/1.1.4: resolution: {integrity: sha512-s0IrSOzLlbvX7yp4WBfPITzpAU8sqQcpsmwXDiKwrG4r491vwCO/XpejasRNl0piBMe/DvP4Tz0mIS/X1DPJBQ==} - dev: false /better-path-resolve/1.0.0: resolution: {integrity: sha512-pbnl5XzGBdrFU/wT4jqmJVPn2B6UHPBOhzMQkY/SPUPB6QtUXtmBHBIwCbXJol93mOpGMnQyP/+BB19q04xj7g==} @@ -5932,7 +5917,6 @@ packages: transitivePeerDependencies: - bufferutil - utf-8-validate - dev: false /ethjs-util/0.1.6: resolution: {integrity: sha512-CUnVOQq7gSpDHZVVrQW8ExxUETWrnrvXYvYz55wOU8Uj4VCgw56XC2B/fVqQN+f7gmrnRHSLVnFAwsCuNwji8w==} @@ -10007,7 +9991,6 @@ packages: optional: true utf-8-validate: optional: true - dev: false /ws/7.5.3: resolution: {integrity: sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg==}