feat: expose Chain type and refactor getDefaultConfig

packages/example/pages/_app.tsx

@@ -3,6 +3,7 @@ import './global.css';
 
 import {
   AvatarComponent,
+  type Chain,
   DisclaimerComponent,
   Locale,
   RainbowKitProvider,
@@ -59,7 +60,7 @@ import { SessionProvider, signOut } from 'next-auth/react';
 import type { AppProps } from 'next/app';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { WagmiProvider, useDisconnect } from 'wagmi';
 import {
   arbitrum,
@@ -79,6 +80,7 @@ import {
   zora,
   zoraSepolia,
 } from 'wagmi/chains';
+
 import { AppContextProps } from '../lib/AppContextProps';
 
 const RAINBOW_TERMS = 'https://rainbow.me/terms-of-use';
@@ -88,6 +90,26 @@ const projectId =
 
 const { wallets } = getDefaultWallets();
 
+const avalanche = {
+  id: 43_114,
+  name: 'Avalanche',
+  iconUrl: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png',
+  iconBackground: '#fff',
+  nativeCurrency: { name: 'Avalanche', symbol: 'AVAX', decimals: 18 },
+  rpcUrls: {
+    default: { http: ['https://api.avax.network/ext/bc/C/rpc'] },
+  },
+  blockExplorers: {
+    default: { name: 'SnowTrace', url: 'https://snowtrace.io' },
+  },
+  contracts: {
+    multicall3: {
+      address: '0xca11bde05977b3631167028862be2a173976ca11',
+      blockCreated: 11_907_934,
+    },
+  },
+} as const satisfies Chain;
+
 const config = getDefaultConfig({
   appName: 'RainbowKit Demo',
   projectId,
@@ -100,6 +122,7 @@ const config = getDefaultConfig({
     zora,
     bsc,
     zkSync,
+    avalanche,
     ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true'
       ? [
           goerli,

packages/rainbowkit/src/components/RainbowKitProvider/provideRainbowKitChains.ts

@@ -1,4 +1,3 @@
-import { Chain } from 'wagmi/chains';
 import { isNotNullish } from '../../utils/isNotNullish';
 import { RainbowKitChain } from './RainbowKitChainContext';
 
@@ -153,13 +152,16 @@ const chainMetadataById = Object.fromEntries(
     .map(({ chainId, ...metadata }) => [chainId, metadata]),
 );
 
-export const provideRainbowKitChains = (chains: readonly [Chain, ...Chain[]]) =>
+/** @description Decorates an array of wagmi `Chain` objects with RainbowKitChain property overrides */
+export const provideRainbowKitChains = <Chain extends RainbowKitChain>(
+  chains: readonly [Chain, ...Chain[]],
+): Chain[] =>
   chains.map((chain) => {
     const defaultMetadata = chainMetadataById[chain.id] ?? {};
     return {
       ...chain,
-      name: defaultMetadata.name ?? chain.name, // Favor colloquial names
-      iconUrl: defaultMetadata.iconUrl,
-      iconBackground: defaultMetadata.iconBackground,
-    } as RainbowKitChain;
+      name: defaultMetadata.name ?? chain.name, // favor colloquial names
+      iconUrl: chain.iconUrl ?? defaultMetadata.iconUrl,
+      iconBackground: chain.iconBackground ?? defaultMetadata.iconBackground,
+    } as Chain;
   });

packages/rainbowkit/src/config/getDefaultConfig.ts

@@ -1,7 +1,7 @@
 import { Transport } from 'viem';
 import { http, CreateConfigParameters } from 'wagmi';
 import { WagmiProviderProps, createConfig } from 'wagmi';
-import { type Chain } from 'wagmi/chains';
+import { type RainbowKitChain } from '../components/RainbowKitProvider/RainbowKitChainContext';
 import type { WalletList } from '../wallets/Wallet';
 import { computeWalletConnectMetaData } from '../wallets/computeWalletConnectMetaData';
 import { connectorsForWallets } from '../wallets/connectorsForWallets';
@@ -12,7 +12,7 @@ import {
   walletConnectWallet,
 } from '../wallets/walletConnectors';
 
-export type _chains = readonly [Chain, ...Chain[]];
+export type _chains = readonly [RainbowKitChain, ...RainbowKitChain[]];
 
 // Define the '_transports' type as a Record
 // It maps each 'Chain' id to a 'Transport'

packages/rainbowkit/src/index.ts

@@ -29,6 +29,7 @@ export type {
 export type { Locale } from './locales/';
 export type { DisclaimerComponent } from './components/RainbowKitProvider/AppContext';
 export type { AvatarComponent } from './components/RainbowKitProvider/AvatarContext';
+export type { RainbowKitChain as Chain } from './components/RainbowKitProvider/RainbowKitChainContext';
 export { lightTheme } from './themes/lightTheme';
 export { darkTheme } from './themes/darkTheme';
 export { midnightTheme } from './themes/midnightTheme';