fix: enable ens fetching only if mainnet is configured (#1814)

.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.

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;
+}

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;

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;