feat: default chainId option with Transaction (#1261)

src/transaction/components/Transaction.test.tsx

@@ -1,23 +1,45 @@
 import { render, screen } from '@testing-library/react';
-import { describe, expect, it, vi } from 'vitest';
+import { base, baseSepolia } from 'viem/chains';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { useOnchainKit } from '../../useOnchainKit';
 import { Transaction } from './Transaction';
 import { TransactionProvider } from './TransactionProvider';
 
+function mock<T>(func: T) {
+  return func as vi.Mock;
+}
+
 vi.mock('./TransactionProvider', () => ({
-  TransactionProvider: vi.fn(({ children }: { children: React.ReactNode }) => (
-    <div>{children}</div>
-  )),
+  TransactionProvider: vi.fn(
+    ({ chainId, children }: { chainId: number; children: React.ReactNode }) => (
+      <div>
+        <div>{children}</div>
+        <div>{`chainId: ${chainId}`}</div>
+      </div>
+    ),
+  ),
+}));
+
+vi.mock('../../useOnchainKit', () => ({
+  useOnchainKit: vi.fn(),
 }));
 
+const useOnchainKitMock = mock(useOnchainKit);
+
 describe('Transaction', () => {
   beforeEach(() => {
+    useOnchainKitMock.mockReturnValue({
+      chain: baseSepolia,
+    });
+  });
+
+  afterEach(() => {
     vi.clearAllMocks();
   });
 
-  it('should renders the children inside the TransactionProvider', () => {
+  it('should render the children inside the TransactionProvider', () => {
     render(
       <Transaction
-        address="0x123"
         capabilities={{}}
         chainId={123}
         className="test-class"
@@ -31,10 +53,9 @@ describe('Transaction', () => {
     expect(screen.getByText('Test Child')).toBeInTheDocument();
   });
 
-  it('should applies the correct className', () => {
+  it('should apply the correct className', () => {
     render(
       <Transaction
-        address="0x123"
         capabilities={{}}
         chainId={123}
         className="test-class"
@@ -56,7 +77,6 @@ describe('Transaction', () => {
     const onSuccess = vi.fn();
     render(
       <Transaction
-        address="0x123"
         capabilities={{}}
         chainId={123}
         className="test-class"
@@ -71,4 +91,35 @@ describe('Transaction', () => {
     // Checking if the TransactionProvider is called
     expect(TransactionProvider).toHaveBeenCalledTimes(1);
   });
+
+  it('should use the chainId from the context if not provided', () => {
+    render(
+      <Transaction
+        capabilities={{}}
+        className="test-class"
+        contracts={[]}
+        onError={vi.fn()}
+        onSuccess={vi.fn()}
+      >
+        <div>Test Child</div>
+      </Transaction>,
+    );
+    expect(screen.getByText(`chainId: ${baseSepolia.id}`)).toBeInTheDocument();
+  });
+
+  it('should use the provided chainId if provided', () => {
+    render(
+      <Transaction
+        capabilities={{}}
+        chainId={base.id}
+        className="test-class"
+        contracts={[]}
+        onError={vi.fn()}
+        onSuccess={vi.fn()}
+      >
+        <div>Test Child</div>
+      </Transaction>,
+    );
+    expect(screen.getByText(`chainId: ${base.id}`)).toBeInTheDocument();
+  });
 });

src/transaction/components/Transaction.tsx

@@ -1,5 +1,6 @@
 import { cn } from '../../styles/theme';
 import { useIsMounted } from '../../useIsMounted';
+import { useOnchainKit } from '../../useOnchainKit';
 import type { TransactionReact } from '../types';
 import { TransactionProvider } from './TransactionProvider';
 
@@ -19,12 +20,16 @@ export function Transaction({
   if (!isMounted) {
     return null;
   }
+  const { chain } = useOnchainKit();
+  // If chainId is not provided,
+  // use the default chainId from the OnchainKit context
+  const accountChainId = chainId ? chainId : chain.id;
 
   return (
     <TransactionProvider
       calls={calls}
       capabilities={capabilities}
-      chainId={chainId}
+      chainId={accountChainId}
       contracts={contracts}
       onError={onError}
       onStatus={onStatus}

src/transaction/components/TransactionProvider.tsx

@@ -7,7 +7,6 @@ import {
   useState,
 } from 'react';
 import type { Address } from 'viem';
-import { baseSepolia } from 'viem/chains';
 import {
   useAccount,
   useConfig,
@@ -80,8 +79,8 @@ export function TransactionProvider({
 
   // Retrieve wallet capabilities
   const walletCapabilities = useCapabilitiesSafe({
-    chainId: chainId || baseSepolia.id,
-  }); // defaults to Base Sepolia if not provided
+    chainId,
+  });
 
   const { switchChainAsync } = useSwitchChain();
 

src/transaction/types.ts

@@ -125,7 +125,7 @@ export type TransactionError = {
 export type TransactionProviderReact = {
   calls?: Call[]; // An array of calls for the transaction. Mutually exclusive with the `contracts` prop.
   capabilities?: WalletCapabilities; // Capabilities that a wallet supports (e.g. paymasters, session keys, etc).
-  chainId?: number; // The chainId for the transaction.
+  chainId: number; // The chainId for the transaction.
   children: ReactNode; // The child components to be rendered within the provider component.
   contracts?: ContractFunctionParameters[]; // An array of contract function parameters provided to the child components. Mutually exclusive with the `calls` prop.
   onError?: (e: TransactionError) => void; // An optional callback function that handles errors within the provider.