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, LifecycleStatus } from '@coinbase/onchainkit/earn';
+import { TransactionError } from '@coinbase/onchainkit/transaction';
+import { useCallback, useContext } from 'react';
+import { 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.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]);
+
   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
 };
 
 /**