feat: OnchainKitProvider default dependencies

src/OnchainKitProvider.test.tsx

@@ -2,15 +2,36 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render, screen, waitFor } from '@testing-library/react';
 import { base } from 'viem/chains';
-import { describe, expect, it, vi } from 'vitest';
-import { http, WagmiProvider, createConfig } from 'wagmi';
+import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
+import {
+  http,
+  WagmiProvider,
+  WagmiProviderNotFoundError,
+  createConfig,
+} from 'wagmi';
+import { useConfig } from 'wagmi';
 import { mock } from 'wagmi/connectors';
 import { setOnchainKitConfig } from './OnchainKitConfig';
 import { OnchainKitProvider } from './OnchainKitProvider';
 import { COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID } from './identity/constants';
 import type { EASSchemaUid } from './identity/types';
 import { useOnchainKit } from './useOnchainKit';
 
+vi.mock('wagmi', async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useConfig: vi.fn(),
+  };
+});
+
+vi.mock('./useProviderDependencies', () => ({
+  useProviderDependencies: vi.fn(() => ({
+    providedWagmiConfig: null,
+    providedQueryClient: null,
+  })),
+}));
+
 const queryClient = new QueryClient();
 const mockConfig = createConfig({
   chains: [base],
@@ -54,6 +75,12 @@
   const appLogo = undefined;
   const appName = undefined;
 
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useConfig as Mock).mockReturnValue(mockConfig);
+    use;
+  });
+
   it('provides the context value correctly', async () => {
     render(
       <WagmiProvider config={mockConfig}>
@@ -71,6 +98,21 @@
     });
   });
 
+  it('provides the context value correctly without WagmiProvider', async () => {
+    (useConfig as Mock).mockImplementation(() => {
+      throw new WagmiProviderNotFoundError();
+    });
+    render(
+      <OnchainKitProvider chain={base} schemaId={schemaId} apiKey={apiKey}>
+        <TestComponent />
+      </OnchainKitProvider>,
+    );
+    await waitFor(() => {
+      expect(screen.getByText(schemaId)).toBeInTheDocument();
+      expect(screen.getByText(apiKey)).toBeInTheDocument();
+    });
+  });
+
   it('throws an error if schemaId does not meet the required length', () => {
     expect(() => {
       render(

src/OnchainKitProvider.tsx

@@ -1,8 +1,12 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createContext, useMemo } from 'react';
+import { WagmiProvider } from 'wagmi';
 import { ONCHAIN_KIT_CONFIG, setOnchainKitConfig } from './OnchainKitConfig';
+import { createWagmiConfig } from './createWagmiConfig';
 import { COINBASE_VERIFIED_ACCOUNT_SCHEMA_ID } from './identity/constants';
 import { checkHashLength } from './internal/utils/checkHashLength';
 import type { OnchainKitContextType, OnchainKitProviderReact } from './types';
+import { useProviderDependencies } from './useProviderDependencies';
 
 export const OnchainKitContext =
   createContext<OnchainKitContextType>(ONCHAIN_KIT_CONFIG);
@@ -51,6 +55,47 @@ export function OnchainKitProvider({
     return onchainKitConfig;
   }, [address, apiKey, chain, config, projectId, rpcUrl, schemaId]);
 
+  // Check the React context for WagmiProvider and QueryClientProvider
+  const { providedWagmiConfig, providedQueryClient } =
+    useProviderDependencies();
+
+  const defaultConfig = useMemo(() => {
+    // IMPORTANT: Don't create a new Wagmi configuration if one already exists
+    // This prevents the user-provided WagmiConfig from being overriden
+    return (
+      providedWagmiConfig ||
+      createWagmiConfig({
+        apiKey,
+        appName: value.config.appearance.name,
+        appLogoUrl: value.config.appearance.logo,
+      })
+    );
+  }, [
+    apiKey,
+    providedWagmiConfig,
+    value.config.appearance.name,
+    value.config.appearance.logo,
+  ]);
+  const defaultQueryClient = useMemo(() => {
+    // IMPORTANT: Don't create a new QueryClient if one already exists
+    // This prevents the user-provided QueryClient from being overriden
+    return providedQueryClient || new QueryClient();
+  }, [providedQueryClient]);
+
+  // If both dependencies are missing, return a context with default parent providers
+  // If only one dependency is provided, expect the user to also provide the missing one
+  if (!providedWagmiConfig && !providedQueryClient) {
+    return (
+      <WagmiProvider config={defaultConfig}>
+        <QueryClientProvider client={defaultQueryClient}>
+          <OnchainKitContext.Provider value={value}>
+            {children}
+          </OnchainKitContext.Provider>
+        </QueryClientProvider>
+      </WagmiProvider>
+    );
+  }
+
   return (
     <OnchainKitContext.Provider value={value}>
       {children}

src/createWagmiConfig.test.ts

@@ -0,0 +1,96 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createConfig } from 'wagmi';
+import { http } from 'wagmi';
+import { base, baseSepolia } from 'wagmi/chains';
+import { coinbaseWallet } from 'wagmi/connectors';
+import { createWagmiConfig } from './createWagmiConfig';
+
+// Mock the imported modules
+vi.mock('wagmi', async () => {
+  const actual = await vi.importActual('wagmi');
+  return {
+    ...actual,
+    createConfig: vi.fn(),
+    createStorage: vi.fn(),
+  };
+});
+
+vi.mock('wagmi/chains', async () => {
+  const actual = await vi.importActual('wagmi/chains');
+  return {
+    ...actual,
+    base: { id: 8453 },
+    baseSepolia: { id: 84532 },
+  };
+});
+
+vi.mock('wagmi/connectors', async () => {
+  const actual = await vi.importActual('wagmi/connectors');
+  return {
+    ...actual,
+    coinbaseWallet: vi.fn(),
+  };
+});
+
+describe('createWagmiConfig', () => {
+  it('should create config with default values when no parameters are provided', () => {
+    createWagmiConfig({});
+    expect(createConfig).toHaveBeenCalledWith(
+      expect.objectContaining({
+        chains: [base, baseSepolia],
+        ssr: true,
+        transports: {
+          [base.id]: expect.any(Function),
+          [baseSepolia.id]: expect.any(Function),
+        },
+      }),
+    );
+    expect(coinbaseWallet).toHaveBeenCalledWith({
+      appName: undefined,
+      appLogoUrl: undefined,
+      preference: 'smartWalletOnly',
+    });
+  });
+
+  it('should create config with custom values when parameters are provided', () => {
+    const customConfig = {
+      appearance: {
+        name: 'Custom App',
+        logo: 'https://example.com/logo.png',
+      },
+    };
+    createWagmiConfig({
+      apiKey: 'test-api-key',
+      appName: customConfig.appearance.name,
+      appLogoUrl: customConfig.appearance.logo,
+    });
+    expect(createConfig).toHaveBeenCalledWith(
+      expect.objectContaining({
+        chains: [base, baseSepolia],
+        ssr: true,
+        transports: {
+          [base.id]: expect.any(Function),
+          [baseSepolia.id]: expect.any(Function),
+        },
+      }),
+    );
+    expect(coinbaseWallet).toHaveBeenCalledWith({
+      appName: 'Custom App',
+      appLogoUrl: 'https://example.com/logo.png',
+      preference: 'smartWalletOnly',
+    });
+  });
+
+  it('should use API key in transports when provided', () => {
+    const testApiKey = 'test-api-key';
+    const result = createWagmiConfig({ apiKey: testApiKey });
+    expect(result).toContain(
+      http(`https://api.developer.coinbase.com/rpc/v1/base/${testApiKey}`),
+    );
+    expect(result).toContain(
+      http(
+        `https://api.developer.coinbase.com/rpc/v1/base-sepolia/${testApiKey}`,
+      ),
+    );
+  });
+});

src/createWagmiConfig.ts

@@ -0,0 +1,37 @@
+import { http, cookieStorage, createConfig, createStorage } from 'wagmi';
+import { base, baseSepolia } from 'wagmi/chains';
+import { coinbaseWallet } from 'wagmi/connectors';
+import type { CreateWagmiConfigParams } from './types';
+
+// createWagmiConfig returns a WagmiConfig (https://wagmi.sh/react/api/createConfig) using OnchainKit provided settings.
+// This function should only be used if the user does not provide WagmiProvider as a parent in the React context.
+export const createWagmiConfig = ({
+  apiKey,
+  appName,
+  appLogoUrl,
+}: CreateWagmiConfigParams) => {
+  return createConfig({
+    chains: [base, baseSepolia],
+    connectors: [
+      coinbaseWallet({
+        appName,
+        appLogoUrl,
+        preference: 'smartWalletOnly',
+      }),
+    ],
+    storage: createStorage({
+      storage: cookieStorage,
+    }),
+    ssr: true,
+    transports: {
+      [base.id]: apiKey
+        ? http(`https://api.developer.coinbase.com/rpc/v1/base/${apiKey}`)
+        : http(),
+      [baseSepolia.id]: apiKey
+        ? http(
+            `https://api.developer.coinbase.com/rpc/v1/base-sepolia/${apiKey}`,
+          )
+        : http(),
+    },
+  });
+};

src/useProviderDependencies.test.tsx

@@ -0,0 +1,110 @@
+import { type QueryClient, useQueryClient } from '@tanstack/react-query';
+import { renderHook } from '@testing-library/react';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { type Config, WagmiProviderNotFoundError, useConfig } from 'wagmi';
+import { useProviderDependencies } from './useProviderDependencies';
+
+// Mock the wagmi and react-query hooks
+vi.mock('wagmi', async () => {
+  const actual = await vi.importActual('wagmi');
+  return {
+    ...actual,
+    useConfig: vi.fn(),
+  };
+});
+
+vi.mock('@tanstack/react-query', async () => {
+  const actual = await vi.importActual('@tanstack/react-query');
+  return {
+    ...actual,
+    useQueryClient: vi.fn(),
+  };
+});
+
+describe('useProviderDependencies', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should return both configs when they exist', () => {
+    const mockWagmiConfig = { testWagmi: true } as unknown as Config;
+    const mockQueryClient = { testQuery: true } as unknown as QueryClient;
+    vi.mocked(useConfig).mockReturnValue(mockWagmiConfig);
+    vi.mocked(useQueryClient).mockReturnValue(mockQueryClient);
+    const { result } = renderHook(() => useProviderDependencies());
+    expect(result.current).toEqual({
+      providedWagmiConfig: mockWagmiConfig,
+      providedQueryClient: mockQueryClient,
+    });
+  });
+
+  it('should handle missing WagmiProvider gracefully', () => {
+    vi.mocked(useConfig).mockImplementation(() => {
+      throw new WagmiProviderNotFoundError();
+    });
+    const mockQueryClient = { testQuery: true } as unknown as QueryClient;
+    vi.mocked(useQueryClient).mockReturnValue(mockQueryClient);
+    const { result } = renderHook(() => useProviderDependencies());
+    expect(result.current).toEqual({
+      providedWagmiConfig: null,
+      providedQueryClient: mockQueryClient,
+    });
+  });
+
+  it('should handle missing QueryClient gracefully', () => {
+    const mockWagmiConfig = { testWagmi: true } as unknown as Config;
+    vi.mocked(useConfig).mockReturnValue(mockWagmiConfig);
+    vi.mocked(useQueryClient).mockImplementation(() => {
+      throw new Error('No QueryClient set, use QueryClientProvider to set one');
+    });
+    const { result } = renderHook(() => useProviderDependencies());
+    expect(result.current).toEqual({
+      providedWagmiConfig: mockWagmiConfig,
+      providedQueryClient: null,
+    });
+  });
+
+  it('should log non-WagmiProvider errors and return null config', () => {
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const error = new Error('Different error');
+    vi.mocked(useConfig).mockImplementation(() => {
+      throw error;
+    });
+    const mockQueryClient = { testQuery: true } as unknown as QueryClient;
+    vi.mocked(useQueryClient).mockReturnValue(mockQueryClient);
+    const { result } = renderHook(() => useProviderDependencies());
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      'Error fetching WagmiProvider, using default:',
+      error,
+    );
+    expect(result.current).toEqual({
+      providedWagmiConfig: null,
+      providedQueryClient: mockQueryClient,
+    });
+    consoleErrorSpy.mockRestore();
+  });
+
+  it('should log non-QueryClient provider errors and return null client', () => {
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const mockWagmiConfig = { testWagmi: true } as unknown as Config;
+    vi.mocked(useConfig).mockReturnValue(mockWagmiConfig);
+    const error = new Error('Different query error');
+    vi.mocked(useQueryClient).mockImplementation(() => {
+      throw error;
+    });
+    const { result } = renderHook(() => useProviderDependencies());
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
+      'Error fetching QueryClient, using default:',
+      error,
+    );
+    expect(result.current).toEqual({
+      providedWagmiConfig: mockWagmiConfig,
+      providedQueryClient: null,
+    });
+    consoleErrorSpy.mockRestore();
+  });
+});