feat: add event handlers to earn component

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

@@ -1,13 +1,37 @@
 import { AppContext } from '@/components/AppProvider';
-import { Earn } from '@coinbase/onchainkit/earn';
-import { useContext } from 'react';
+import { Earn, type LifecycleStatus } from '@coinbase/onchainkit/earn';
+import type { TransactionError } from '@coinbase/onchainkit/transaction';
+import { useCallback, useContext } from 'react';
+import type { TransactionReceipt } from 'viem';
 
 export function EarnDemo() {
   const { vaultAddress } = useContext(AppContext);
 
+  const handleOnSuccess = useCallback(
+    (transactionReceipt?: TransactionReceipt) => {
+      console.log('Success: ', transactionReceipt);
+    },
+    [],
+  );
+
+  const handleOnError = useCallback((earnError: TransactionError) => {
+    console.log('Error:', earnError);
+  }, []);
+
+  const handleOnStatus = useCallback((lifecycleStatus: LifecycleStatus) => {
+    console.log('Status:', lifecycleStatus);
+  }, []);
+
   if (!vaultAddress) {
     return <div>Please set a vault address</div>;
   }
 
-  return <Earn vaultAddress={vaultAddress} />;
+  return (
+    <Earn
+      vaultAddress={vaultAddress}
+      onSuccess={handleOnSuccess}
+      onError={handleOnError}
+      onStatus={handleOnStatus}
+    />
+  );
 }

src/earn/components/Earn.tsx

@@ -54,10 +54,19 @@ export function Earn({
   className,
   vaultAddress,
   isSponsored,
+  onError,
+  onStatus,
+  onSuccess,
 }: EarnReact) {
   const componentTheme = useTheme();
   return (
-    <EarnProvider vaultAddress={vaultAddress} isSponsored={isSponsored}>
+    <EarnProvider
+      vaultAddress={vaultAddress}
+      isSponsored={isSponsored}
+      onError={onError}
+      onStatus={onStatus}
+      onSuccess={onSuccess}
+    >
       <div
         className={cn(
           componentTheme,

src/earn/components/EarnProvider.test.tsx

@@ -1,8 +1,9 @@
 import { useMorphoVault } from '@/earn/hooks/useMorphoVault';
 import { useGetTokenBalance } from '@/wallet/hooks/useGetTokenBalance';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { render, renderHook } from '@testing-library/react';
+import { fireEvent, render, renderHook, screen } from '@testing-library/react';
 import { act } from 'react';
+import type { TransactionReceipt } from 'viem';
 import { baseSepolia } from 'viem/chains';
 import { type Mock, beforeEach, describe, expect, it, vi } from 'vitest';
 import { http, WagmiProvider, createConfig, mock, useAccount } from 'wagmi';
@@ -23,7 +24,49 @@ const mockConfig = createConfig({
   },
 });
 
-const wrapper = ({ children }: { children: React.ReactNode }) => (
+const TestComponent = () => {
+  const context = useEarnContext();
+  const handleStatusError = async () => {
+    context.updateLifecycleStatus({
+      statusName: 'error',
+      statusData: {
+        code: 'code',
+        error: 'error_long_messages',
+        message: 'error_long_messages',
+      },
+    });
+  };
+  const handleStatusSuccess = async () => {
+    context.updateLifecycleStatus({
+      statusName: 'success',
+      statusData: {
+        transactionReceipts: [
+          { hash: '0x1235' } as unknown as TransactionReceipt,
+        ],
+      },
+    });
+  };
+
+  return (
+    <div data-testid="test-component">
+      <span data-testid="context-value-lifecycleStatus-statusName">
+        {context.lifecycleStatus.statusName}
+      </span>
+      <button type="button" onClick={handleStatusError}>
+        setLifecycleStatus.error
+      </button>
+      <button type="button" onClick={handleStatusSuccess}>
+        setLifecycleStatus.success
+      </button>
+    </div>
+  );
+};
+
+const wrapper = ({
+  children,
+}: {
+  children?: React.ReactNode;
+}) => (
   <WagmiProvider config={mockConfig}>
     <QueryClientProvider client={queryClient}>
       <EarnProvider vaultAddress={DUMMY_ADDRESS}>{children}</EarnProvider>
@@ -58,6 +101,54 @@ describe('EarnProvider', () => {
     });
   });
 
+  it('should emit onError when setLifecycleStatus is called with error', async () => {
+    const onErrorMock = vi.fn();
+    const onStatusMock = vi.fn();
+    (useMorphoVault as Mock).mockReturnValue({
+      asset: DUMMY_ADDRESS,
+      assetDecimals: 18,
+      assetSymbol: 'TEST',
+      balance: '100',
+      totalApy: '0.05',
+    });
+
+    render(
+      <EarnProvider
+        vaultAddress={DUMMY_ADDRESS}
+        onError={onErrorMock}
+        onStatus={onStatusMock}
+      >
+        <TestComponent />
+      </EarnProvider>,
+    );
+
+    const button = screen.getByText('setLifecycleStatus.error');
+    fireEvent.click(button);
+    expect(onErrorMock).toHaveBeenCalled();
+    expect(onStatusMock).toHaveBeenCalled();
+  });
+
+  it('should emit onSuccess when setLifecycleStatus is called with success', async () => {
+    const onSuccessMock = vi.fn();
+    (useMorphoVault as Mock).mockReturnValue({
+      asset: DUMMY_ADDRESS,
+      assetDecimals: 18,
+      assetSymbol: 'TEST',
+      balance: '100',
+      totalApy: '0.05',
+    });
+
+    render(
+      <EarnProvider vaultAddress={DUMMY_ADDRESS} onSuccess={onSuccessMock}>
+        <TestComponent />
+      </EarnProvider>,
+    );
+
+    const button = screen.getByText('setLifecycleStatus.success');
+    fireEvent.click(button);
+    expect(onSuccessMock).toHaveBeenCalledWith({ hash: '0x1235' });
+  });
+
   it('throws an error when vaultAddress is not provided', () => {
     expect(() =>
       renderHook(() => useEarnContext(), {

src/earn/components/EarnProvider.tsx

@@ -7,6 +7,7 @@ import {
   createContext,
   useCallback,
   useContext,
+  useEffect,
   useMemo,
   useState,
 } from 'react';
@@ -25,6 +26,9 @@ export function EarnProvider({
   vaultAddress,
   children,
   isSponsored,
+  onError,
+  onStatus,
+  onSuccess,
 }: EarnProviderReact) {
   if (!vaultAddress) {
     throw new Error(
@@ -43,6 +47,16 @@ export function EarnProvider({
   const [withdrawAmount, setWithdrawAmount] = useState('');
   const [depositAmount, setDepositAmount] = useState('');
 
+  useEffect(() => {
+    if (lifecycleStatus.statusName === 'error') {
+      onError?.(lifecycleStatus.statusData);
+    }
+    if (lifecycleStatus?.statusName === 'success') {
+      onSuccess?.(lifecycleStatus?.statusData?.transactionReceipts?.[0]);
+    }
+    onStatus?.(lifecycleStatus);
+  }, [lifecycleStatus, onStatus, onError, onSuccess]);
+
   const {
     asset,
     balance: depositedBalance,

src/earn/types.ts

@@ -1,10 +1,11 @@
+import type { TransactionError } from '@/api/types';
 import type { UseMorphoVaultReturnType } from '@/earn/hooks/useMorphoVault';
 import type { LifecycleStatusUpdate } from '@/internal/types';
 import type { Token } from '@/token';
 import type { Call } from '@/transaction/types';
 import type { LifecycleStatus as TransactionLifecycleStatus } from '@/transaction/types';
 import type React from 'react';
-import type { Address } from 'viem';
+import type { Address, TransactionReceipt } from 'viem';
 
 /**
  * Note: exported as public Type
@@ -14,6 +15,9 @@ export type EarnReact = {
   className?: string;
   vaultAddress: Address;
   isSponsored?: boolean;
+  onError?: (error: TransactionError) => void; // An optional callback function that handles errors within the provider.
+  onStatus?: (lifecycleStatus: LifecycleStatus) => void; // An optional callback function that exposes the component lifecycle state
+  onSuccess?: (transactionReceipt?: TransactionReceipt) => void; // An optional callback function that exposes the transaction receipt
 };
 
 /**
@@ -23,6 +27,9 @@ export type EarnProviderReact = {
   children: React.ReactNode;
   vaultAddress: Address;
   isSponsored?: boolean;
+  onError?: (error: TransactionError) => void; // An optional callback function that handles errors within the provider.
+  onStatus?: (lifecycleStatus: LifecycleStatus) => void; // An optional callback function that exposes the component lifecycle state
+  onSuccess?: (transactionReceipt?: TransactionReceipt) => void; // An optional callback function that exposes the transaction receipt
 };
 
 /**