fix: rpcUrl

packages/onchainkit/src/DefaultOnchainKitProviders.tsx

@@ -1,5 +1,5 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { type PropsWithChildren, useMemo } from 'react';
+import { type PropsWithChildren, useMemo, useState } from 'react';
 import { Config, WagmiProvider } from 'wagmi';
 import { coinbaseWallet } from 'wagmi/connectors';
 import { createWagmiConfig } from './core/createWagmiConfig';
@@ -48,15 +48,21 @@ function WagmiProviderWithDefault({
 }: PropsWithChildren<CreateWagmiConfigParams> & {
   providedWagmiConfig: Config | null;
 }) {
-  if (providedWagmiConfig) return children;
+  const [config] = useState(() => {
+    if (providedWagmiConfig) return providedWagmiConfig;
 
-  const config = createWagmiConfig({
-    apiKey,
-    appName,
-    appLogoUrl,
-    connectors,
+    return createWagmiConfig({
+      apiKey,
+      appName,
+      appLogoUrl,
+      connectors,
+    });
   });
 
+  if (providedWagmiConfig) {
+    return children;
+  }
+
   return <WagmiProvider config={config}>{children}</WagmiProvider>;
 }
 

packages/onchainkit/src/core/network/getChainPublicClient.test.ts

@@ -2,9 +2,14 @@
  * @vitest-environment jsdom
  */
 
-import { base } from 'viem/chains';
+import { base, baseSepolia, mainnet } from 'viem/chains';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { getChainPublicClient } from './getChainPublicClient';
+import { getOnchainKitConfig } from '../OnchainKitConfig';
+
+vi.mock('../OnchainKitConfig', () => ({
+  getOnchainKitConfig: vi.fn(),
+}));
 
 describe('getChainPublicClient', () => {
   beforeEach(() => {
@@ -15,4 +20,34 @@ describe('getChainPublicClient', () => {
     const publicClient = getChainPublicClient(base);
     expect(publicClient.chain.id).toBe(base.id);
   });
+
+  it('should use public RPC URL when no API key is provided', async () => {
+    vi.mocked(getOnchainKitConfig).mockReturnValue(null);
+    const publicClient = getChainPublicClient(base);
+    expect(publicClient.transport.url).toBe('https://mainnet.base.org');
+  });
+
+  it('should use public RPC URL when chain is not base or baseSepolia', async () => {
+    vi.mocked(getOnchainKitConfig).mockReturnValue('123');
+    const publicClient = getChainPublicClient(mainnet);
+    expect(publicClient.transport.url).toBe('https://eth.merkle.io');
+  });
+
+  it('should use user-provided RPC URL when an API key is provided and the chain is base or baseSepolia', async () => {
+    vi.mocked(getOnchainKitConfig).mockReturnValue(null);
+    const publicClient = getChainPublicClient(base);
+    expect(publicClient.transport.url).toBe('https://mainnet.base.org');
+
+    vi.mocked(getOnchainKitConfig).mockReturnValue('123');
+    const publicClientWithCustomRpc = getChainPublicClient(base);
+    expect(publicClientWithCustomRpc.transport.url).toBe(
+      'https://api.developer.coinbase.com/rpc/v1/base/123',
+    );
+
+    vi.mocked(getOnchainKitConfig).mockReturnValue('123');
+    const publicSepoliaClientWithCustomRpc = getChainPublicClient(baseSepolia);
+    expect(publicSepoliaClientWithCustomRpc.transport.url).toBe(
+      'https://api.developer.coinbase.com/rpc/v1/base-sepolia/123',
+    );
+  });
 });

packages/onchainkit/src/core/network/getChainPublicClient.ts

@@ -1,9 +1,16 @@
 import { http, createPublicClient } from 'viem';
-import type { Chain } from 'viem/chains';
+import { base, baseSepolia, type Chain } from 'viem/chains';
+import { getOnchainKitConfig } from '../OnchainKitConfig';
 
 export function getChainPublicClient(chain: Chain) {
+  const apiKey = getOnchainKitConfig('apiKey');
+  const rpcUrl =
+    chain === base
+      ? 'https://api.developer.coinbase.com/rpc/v1/base'
+      : 'https://api.developer.coinbase.com/rpc/v1/base-sepolia';
+  const useCustomRpc = (chain === base || chain === baseSepolia) && !!apiKey;
   return createPublicClient({
     chain: chain,
-    transport: http(),
+    transport: useCustomRpc ? http(`${rpcUrl}/${apiKey}`) : http(),
   });
 }

packages/playground/app/page.tsx

@@ -2,16 +2,13 @@
 
 import { AppProvider } from '@/components/AppProvider';
 import Demo from '@/components/Demo';
-import OnchainProviders from '@/components/OnchainProviders';
 
 export default function Home() {
   return (
-    <OnchainProviders>
+    <AppProvider>
       <main className="flex min-h-screen w-full bg-muted/40">
-        <AppProvider>
-          <Demo />
-        </AppProvider>
+        <Demo />
       </main>
-    </OnchainProviders>
+    </AppProvider>
   );
 }