test PR

package.json

@@ -41,10 +41,10 @@
     "clsx": "^2.1.1",
     "graphql": "^14 || ^15 || ^16",
     "graphql-request": "^6.1.0",
-    "permissionless": "^0.1.29",
+    "permissionless": "^0.2.10",
     "tailwind-merge": "^2.3.0",
-    "viem": "^2.17.4",
-    "wagmi": "^2.11.0"
+    "viem": "^2.21.33",
+    "wagmi": "^2.12.24"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
@@ -73,7 +73,7 @@
     "graphql-request": "^6.1.0",
     "jsdom": "^24.1.0",
     "packemon": "3.3.1",
-    "permissionless": "^0.1.29",
+    "permissionless": "^0.2.10",
     "react": "^18",
     "react-dom": "^18",
     "rimraf": "^5.0.5",

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

@@ -31,6 +31,7 @@ export enum TransactionTypes {
   ContractsPromise = 'contractsPromise',
   CallsCallback = 'callsCallback',
   ContractsCallback = 'contractsCallback',
+  ContractsAndCalls = 'contractsAndCalls',
 }
 
 export type Paymaster = {

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

playground/nextjs-app-router/components/demo/Transaction.tsx

@@ -1,5 +1,9 @@
-import { clickCalls, clickContracts } from '@/lib/transactions';
-import type { Call } from '@/onchainkit/esm/transaction/types';
+import {
+  clickCalls,
+  clickContracts,
+  heterogeneousClickCalls,
+} from '@/lib/transactions';
+import type { Call, Calls } from '@/onchainkit/esm/transaction/types';
 import type { LifecycleStatus } from '@/onchainkit/src/transaction';
 import {
   Transaction,
@@ -65,6 +69,12 @@ function TransactionDemo() {
       case TransactionTypes.Contracts:
         console.log('Playground.Transaction.contracts:', contracts);
         break;
+      case TransactionTypes.ContractsAndCalls:
+        console.log(
+          'Playground.Transaction.contractsAndCalls:',
+          heterogeneousClickCalls,
+        );
+        break;
       default:
         console.log(`Playground.Transaction.${transactionType}`);
         break;
@@ -74,31 +84,21 @@ function TransactionDemo() {
   const transactions = useMemo(() => {
     switch (transactionType) {
       case TransactionTypes.Calls:
-        return {
-          calls,
-          contracts: undefined,
-        };
+        return calls;
       case TransactionTypes.Contracts:
-        return {
-          calls: undefined,
-          contracts,
-        };
+        return contracts;
       case TransactionTypes.CallsPromise:
-        return {
-          calls: promiseCalls,
-          contracts: undefined,
-        };
+        return promiseCalls;
       case TransactionTypes.ContractsPromise:
-        return {
-          contracts: promiseContracts,
-          calls: undefined,
-        };
+        return promiseContracts;
       case TransactionTypes.CallsCallback:
-        return { calls: callsCallback, contracts: undefined };
+        return callsCallback;
       case TransactionTypes.ContractsCallback:
-        return { calls: undefined, contracts: contractsCallback };
+        return contractsCallback;
+      case TransactionTypes.ContractsAndCalls:
+        return heterogeneousClickCalls;
       default:
-        return { calls, contracts: undefined };
+        return calls;
     }
   }, [
     calls,
@@ -114,9 +114,9 @@ function TransactionDemo() {
     <div className="mx-auto grid w-1/2 gap-8">
       <Transaction
         chainId={chainId ?? 84532} // something breaks if we don't have default network?
-        {...transactions}
         isSponsored={isSponsored}
         onStatus={handleOnStatus}
+        calls={transactions as Calls}
       >
         <TransactionButton
           text="Click"

playground/nextjs-app-router/components/form/transaction-options.tsx

@@ -48,6 +48,9 @@ export function TransactionOptions() {
             <SelectItem value={TransactionTypes.ContractsCallback}>
               Contracts Callback
             </SelectItem>
+            <SelectItem value={TransactionTypes.ContractsAndCalls}>
+              Contracts and Calls
+            </SelectItem>
           </SelectContent>
         </Select>
       </div>

playground/nextjs-app-router/lib/transactions.ts

@@ -35,3 +35,26 @@ export const clickCalls = [
     to: deployedContracts[85432].click,
   },
 ];
+
+export const heterogeneousClickCalls = [
+  {
+    data: encodeFunctionData({
+      abi: clickAbi,
+      functionName: 'click',
+      args: [],
+    }),
+    to: deployedContracts[85432].click,
+  },
+  {
+    address: deployedContracts[85432].click,
+    abi: clickAbi,
+    functionName: 'click',
+    args: [],
+  },
+  {
+    address: deployedContracts[85432].click,
+    abi: clickAbi,
+    functionName: 'click',
+    args: [],
+  },
+];

playground/nextjs-app-router/package.json

@@ -35,13 +35,13 @@
     "graphql-request": "^6.1.0",
     "lucide-react": "^0.416.0",
     "next": "^14.2.5",
-    "permissionless": "^0.1.29",
+    "permissionless": "^0.2.10",
     "react": "^18",
     "react-dom": "^18",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
-    "viem": "^2.17.4",
-    "wagmi": "^2.11.0"
+    "viem": "^2.21.33",
+    "wagmi": "^2.12.24"
   },
   "devDependencies": {
     "@types/node": "^20",

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}