fix: add additional connector to createWagmiConfig

playground/nextjs-app-router/components/OnchainProviders.tsx

@@ -1,10 +1,8 @@
 'use client';
 import { ENVIRONMENT, ENVIRONMENT_VARIABLES } from '@/lib/constants';
 import { OnchainKitProvider } from '@coinbase/onchainkit';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { ReactNode } from 'react';
 import { http, createConfig } from 'wagmi';
-import { WagmiProvider } from 'wagmi';
 import { base, baseSepolia } from 'wagmi/chains';
 import { coinbaseWallet } from 'wagmi/connectors';
 
@@ -27,30 +25,24 @@ export const config = createConfig({
   ],
 });
 
-const queryClient = new QueryClient();
-
 function OnchainProviders({ children }: { children: ReactNode }) {
   return (
-    <WagmiProvider config={config}>
-      <QueryClientProvider client={queryClient}>
-        <OnchainKitProvider
-          apiKey={ENVIRONMENT_VARIABLES[ENVIRONMENT.API_KEY]}
-          chain={base}
-          config={{
-            appearance: {
-              name: 'OnchainKit Playground',
-              logo: 'https://onchainkit.xyz/favicon/48x48.png?v4-19-24',
-              mode: 'auto',
-              theme: 'default',
-            },
-          }}
-          projectId={ENVIRONMENT_VARIABLES[ENVIRONMENT.PROJECT_ID]}
-          schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
-        >
-          {children}
-        </OnchainKitProvider>
-      </QueryClientProvider>
-    </WagmiProvider>
+    <OnchainKitProvider
+      apiKey={ENVIRONMENT_VARIABLES[ENVIRONMENT.API_KEY]}
+      chain={base}
+      config={{
+        appearance: {
+          name: 'OnchainKit Playground',
+          logo: 'https://onchainkit.xyz/favicon/48x48.png?v4-19-24',
+          mode: 'auto',
+          theme: 'default',
+        },
+      }}
+      projectId={ENVIRONMENT_VARIABLES[ENVIRONMENT.PROJECT_ID]}
+      schemaId="0xf8b05c79f090979bf4a80270aba232dff11a10d9ca55c4f88de95317970f0de9"
+    >
+      {children}
+    </OnchainKitProvider>
   );
 }
 

src/OnchainKitProvider.test.tsx

@@ -2,14 +2,38 @@ import '@testing-library/jest-dom';
 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 { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { http, WagmiProvider, 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';
+import { useProviderDependencies } from './useProviderDependencies';
+
+vi.mock('wagmi', async (importOriginal) => {
+  const actual = await importOriginal();
+  return {
+    ...actual,
+    useConfig: vi.fn(),
+  };
+});
+
+vi.mock('./useProviderDependencies', () => ({
+  useProviderDependencies: vi.fn(() => ({
+    providedWagmiConfig: null,
+    providedQueryClient: null,
+  })),
+}));
+
+vi.mock('./useProviderDependencies', () => ({
+  useProviderDependencies: vi.fn(() => ({
+    providedWagmiConfig: null,
+    providedQueryClient: null,
+  })),
+}));
 
 const queryClient = new QueryClient();
 const mockConfig = createConfig({
@@ -51,8 +75,17 @@ describe('OnchainKitProvider', () => {
   const apiKey = 'test-api-key';
   const paymasterUrl =
     'https://api.developer.coinbase.com/rpc/v1/base/test-api-key';
-  const appLogo = undefined;
-  const appName = undefined;
+  const appLogo = '';
+  const appName = 'Dapp';
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    (useConfig as Mock).mockReturnValue(mockConfig);
+    (useProviderDependencies as Mock).mockReturnValue({
+      providedWagmiConfig: mockConfig,
+      providedQueryClient: queryClient,
+    });
+  });
 
   it('provides the context value correctly', async () => {
     render(
@@ -71,6 +104,22 @@ describe('OnchainKitProvider', () => {
     });
   });
 
+  it('provides the context value correctly without WagmiProvider', async () => {
+    (useProviderDependencies as Mock).mockReturnValue({
+      providedWagmiConfig: null,
+      providedQueryClient: null,
+    });
+    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);
@@ -24,6 +28,7 @@ export function OnchainKitProvider({
     throw Error('EAS schemaId must be 64 characters prefixed with "0x"');
   }
 
+  // biome-ignore lint/complexity/noExcessiveCognitiveComplexity: ignore
   const value = useMemo(() => {
     const defaultPaymasterUrl = apiKey
       ? `https://api.developer.coinbase.com/rpc/v1/${chain.name
@@ -36,8 +41,8 @@ export function OnchainKitProvider({
       chain: chain,
       config: {
         appearance: {
-          name: config?.appearance?.name,
-          logo: config?.appearance?.logo,
+          name: config?.appearance?.name ?? 'Dapp',
+          logo: config?.appearance?.logo ?? '',
           mode: config?.appearance?.mode ?? 'auto',
           theme: config?.appearance?.theme ?? 'default',
         },
@@ -51,6 +56,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,42 @@
+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',
+      }),
+      coinbaseWallet({
+        appName,
+        appLogoUrl,
+        preference: 'eoaOnly',
+      }),
+    ],
+    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/types.ts

@@ -15,6 +15,12 @@ export type AppConfig = {
   paymaster?: string | null; // Paymaster URL for gas sponsorship
 };
 
+export type CreateWagmiConfigParams = {
+  apiKey?: string;
+  appName?: string;
+  appLogoUrl?: string;
+};
+
 /**
  * Note: exported as public Type
  */