diff --git a/.changeset/popular-ducks-travel.md b/.changeset/popular-ducks-travel.md new file mode 100644 index 0000000000..4f870bee6c --- /dev/null +++ b/.changeset/popular-ducks-travel.md @@ -0,0 +1,5 @@ +--- +"@rainbow-me/rainbowkit": patch +--- + +Fixed a bug where wagmi would throw `ChainNotConfiguredError` if `mainnet` is not configured as a chain. This is happening when fetching ens name and ens avatar. diff --git a/packages/rainbowkit/src/hooks/useIsMainnetConfigured.ts b/packages/rainbowkit/src/hooks/useIsMainnetConfigured.ts new file mode 100644 index 0000000000..b75f4e4f0a --- /dev/null +++ b/packages/rainbowkit/src/hooks/useIsMainnetConfigured.ts @@ -0,0 +1,14 @@ +import { mainnet } from 'wagmi/chains'; +import { useRainbowKitChains } from '../components/RainbowKitProvider/RainbowKitChainContext'; + +export function useIsMainnetConfigured() { + const rainbowKitChains = useRainbowKitChains(); + + const chainId = mainnet.id; + + const configured = rainbowKitChains.some( + (rainbowKitChain) => rainbowKitChain.id === chainId, + ); + + return configured; +} diff --git a/packages/rainbowkit/src/hooks/useMainnetEnsAvatar.ts b/packages/rainbowkit/src/hooks/useMainnetEnsAvatar.ts index 601e9de7c4..f4e7c73c0d 100644 --- a/packages/rainbowkit/src/hooks/useMainnetEnsAvatar.ts +++ b/packages/rainbowkit/src/hooks/useMainnetEnsAvatar.ts @@ -1,11 +1,17 @@ import { GetEnsNameReturnType, normalize } from 'viem/ens'; import { useEnsAvatar } from 'wagmi'; import { mainnet } from 'wagmi/chains'; +import { useIsMainnetConfigured } from './useIsMainnetConfigured'; export function useMainnetEnsAvatar(name: GetEnsNameReturnType | undefined) { + const mainnetConfigured = useIsMainnetConfigured(); + const { data: ensAvatar } = useEnsAvatar({ chainId: mainnet.id, name: name ? normalize(name) : undefined, + query: { + enabled: mainnetConfigured, + }, }); return ensAvatar; diff --git a/packages/rainbowkit/src/hooks/useMainnetEnsName.ts b/packages/rainbowkit/src/hooks/useMainnetEnsName.ts index 14d642622e..3ace895f6c 100644 --- a/packages/rainbowkit/src/hooks/useMainnetEnsName.ts +++ b/packages/rainbowkit/src/hooks/useMainnetEnsName.ts @@ -1,11 +1,17 @@ import { Address } from 'viem'; import { useEnsName } from 'wagmi'; import { mainnet } from 'wagmi/chains'; +import { useIsMainnetConfigured } from './useIsMainnetConfigured'; export function useMainnetEnsName(address: Address | undefined) { + const mainnetConfigured = useIsMainnetConfigured(); + const { data: ensName } = useEnsName({ chainId: mainnet.id, address, + query: { + enabled: mainnetConfigured, + }, }); return ensName;