prompt for wallet connection in TransactionButton

.changeset/polite-starfishes-sniff.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+**feat**: added prompt for wallet connection in `TransactionButton`. by @0xAlec #1216

src/transaction/components/TransactionButton.test.tsx

@@ -1,6 +1,6 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { useAccount, useChainId } from 'wagmi';
+import { useAccount, useChainId, useConnect } from 'wagmi';
 import { useShowCallsStatus } from 'wagmi/experimental';
 import { getChainExplorer } from '../../network/getChainExplorer';
 import { TransactionButton } from './TransactionButton';
@@ -13,6 +13,7 @@ vi.mock('./TransactionProvider', () => ({
 vi.mock('wagmi', () => ({
   useChainId: vi.fn(),
   useAccount: vi.fn(),
+  useConnect: vi.fn(),
 }));
 
 vi.mock('wagmi/experimental', () => ({
@@ -30,6 +31,10 @@ describe('TransactionButton', () => {
     (useShowCallsStatus as vi.Mock).mockReturnValue({
       showCallsStatus: vi.fn(),
     });
+    (useConnect as vi.Mock).mockReturnValue({
+      connectAsync: vi.fn(),
+      connectors: {},
+    });
   });
 
   it('renders correctly', () => {
@@ -130,6 +135,34 @@ describe('TransactionButton', () => {
     expect(button).not.toBeDisabled();
   });
 
+  it('should prompt for connection when address is missing', async () => {
+    const onSubmit = vi.fn();
+    const mockConnectAsync = vi.fn();
+    const mockConnector = { id: 'test' };
+    (useAccount as vi.Mock).mockReturnValue({ address: undefined });
+    (useConnect as vi.Mock).mockReturnValue({
+      connectAsync: mockConnectAsync,
+      connectors: [mockConnector],
+    });
+    (useTransactionContext as vi.Mock).mockReturnValue({
+      contracts: {},
+      isLoading: false,
+      lifeCycleStatus: { statusName: 'init', statusData: null },
+      transactionId: undefined,
+      transactionHash: undefined,
+      receipt: undefined,
+      onSubmit,
+    });
+    render(<TransactionButton text="Transact" />);
+    const button = screen.getByText('Transact');
+    await act(async () => {
+      fireEvent.click(button);
+    });
+    expect(mockConnectAsync).toHaveBeenCalled();
+    expect(mockConnectAsync).toHaveBeenCalledWith({ connector: mockConnector });
+    expect(onSubmit).toHaveBeenCalled();
+  });
+
   it('should open transaction link when only receipt exists', () => {
     const onSubmit = vi.fn();
     const chainExplorerUrl = 'https://explorer.com';

src/transaction/components/TransactionButton.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { useAccount, useChainId } from 'wagmi';
+import { useAccount, useChainId, useConnect } from 'wagmi';
 import { useShowCallsStatus } from 'wagmi/experimental';
 import { Spinner } from '../../internal/components/Spinner';
 import { getChainExplorer } from '../../network/getChainExplorer';
@@ -26,13 +26,14 @@ export function TransactionButton({
   } = useTransactionContext();
 
   const { address } = useAccount();
+  const { connectAsync, connectors } = useConnect();
 
   const accountChainId = chainId ?? useChainId();
   const { showCallsStatus } = useShowCallsStatus();
 
   const isInProgress =
     lifeCycleStatus.statusName === 'transactionPending' || isLoading;
-  const isMissingProps = !contracts || !address;
+  const isMissingProps = !contracts;
   const isWaitingForReceipt = !!transactionId || !!transactionHash;
 
   const isDisabled =
@@ -59,7 +60,10 @@ export function TransactionButton({
     return buttonText;
   }, [buttonText, errorMessage, receipt]);
 
-  const handleSubmit = useCallback(() => {
+  const handleSubmit = useCallback(async () => {
+    if (!address) {
+      await connectAsync({ connector: connectors[0] });
+    }
     // SW will have txn id so open in wallet
     if (receipt && transactionId) {
       showCallsStatus({ id: transactionId });
@@ -76,7 +80,10 @@ export function TransactionButton({
       onSubmit();
     }
   }, [
+    address,
     accountChainId,
+    connectAsync,
+    connectors[0],
     onSubmit,
     receipt,
     showCallsStatus,