dope

src/transaction/components/TransactionProvider.tsx

@@ -62,7 +62,7 @@ export function TransactionProvider({
   const [isToastVisible, setIsToastVisible] = useState(false);
   const [lifeCycleState, setLifeCycleState] = useState<LifeCycleState>({
     stateName: 'init',
-    stateData: {},
+    stateData: null,
   }); // Component lifecycle
   const [receiptArray, setReceiptArray] = useState<TransactionReceipt[]>([]);
   const [transactionId, setTransactionId] = useState('');
@@ -104,7 +104,7 @@ export function TransactionProvider({
     }
     // Emit State
     onState?.(lifeCycleState.stateName, lifeCycleState.stateData);
-  }, [onState, lifeCycleState.stateData, lifeCycleState.stateName]);
+  }, [onError, onState, lifeCycleState.stateData, lifeCycleState.stateName]);
 
   const getTransactionReceipts = useCallback(async () => {
     const receipts = [];

src/transaction/hooks/useCallsStatus.ts

@@ -4,7 +4,7 @@ import type { UseCallsStatusParams } from '../types';
 const uncaughtErrorCode = 'UNCAUGHT_CALL_STATUS_ERROR';
 
 export function useCallsStatus({
-  onError,
+  setLifeCycleState,
   transactionId,
 }: UseCallsStatusParams) {
   try {
@@ -17,12 +17,13 @@ export function useCallsStatus({
         enabled: !!transactionId,
       },
     });
-
     const transactionHash = data?.receipts?.[0]?.transactionHash;
-
     return { status: data?.status, transactionHash };
   } catch (err) {
-    onError?.({ code: uncaughtErrorCode, error: JSON.stringify(err) });
+    setLifeCycleState({
+      stateName: 'error',
+      stateData: { code: uncaughtErrorCode, error: JSON.stringify(err) },
+    });
     return { status: 'error', transactionHash: undefined };
   }
 }

src/transaction/hooks/useWriteContract.ts

@@ -13,8 +13,8 @@ import type { UseWriteContractParams } from '../types';
  * Does not support transaction batching or paymasters.
  */
 export function useWriteContract({
-  onError,
   setErrorMessage,
+  setLifeCycleState,
   setTransactionHashArray,
   transactionHashArray,
 }: UseWriteContractParams) {
@@ -30,7 +30,10 @@ export function useWriteContract({
           } else {
             setErrorMessage(GENERIC_ERROR_MESSAGE);
           }
-          onError?.({ code: WRITE_CONTRACT_ERROR_CODE, error: e.message });
+          setLifeCycleState({
+            stateName: 'error',
+            stateData: { code: WRITE_CONTRACT_ERROR_CODE, error: e.message },
+          });
         },
         onSuccess: (hash: Address) => {
           setTransactionHashArray(
@@ -41,9 +44,12 @@ export function useWriteContract({
     });
     return { status, writeContractAsync, data };
   } catch (err) {
-    onError?.({
-      code: UNCAUGHT_WRITE_CONTRACT_ERROR_CODE,
-      error: JSON.stringify(err),
+    setLifeCycleState({
+      stateName: 'error',
+      stateData: {
+        code: UNCAUGHT_WRITE_CONTRACT_ERROR_CODE,
+        error: JSON.stringify(err),
+      },
     });
     setErrorMessage(GENERIC_ERROR_MESSAGE);
     return { status: 'error', writeContractAsync: () => {} };

src/transaction/hooks/useWriteContracts.ts

@@ -40,8 +40,8 @@ export function useWriteContracts({
             setErrorMessage(GENERIC_ERROR_MESSAGE);
           }
           setLifeCycleState({
-            stateName: 'error', 
-            stateDaat: { code: WRITE_CONTRACTS_ERROR_CODE, error: e.message }
+            stateName: 'error',
+            stateData: { code: WRITE_CONTRACTS_ERROR_CODE, error: e.message },
           });
         },
         onSuccess: (id) => {
@@ -52,12 +52,12 @@ export function useWriteContracts({
     return { status, writeContractsAsync };
   } catch (err) {
     setLifeCycleState({
-      stateName: 'error', 
+      stateName: 'error',
       stateData: {
-      code: UNCAUGHT_WRITE_CONTRACTS_ERROR_CODE,
-      error: JSON.stringify(err),
-    }
-  });
+        code: UNCAUGHT_WRITE_CONTRACTS_ERROR_CODE,
+        error: JSON.stringify(err),
+      },
+    });
     setErrorMessage(GENERIC_ERROR_MESSAGE);
     return {
       status: 'error',

src/transaction/index.ts

@@ -10,7 +10,7 @@ export { TransactionToastIcon } from './components/TransactionToastIcon';
 export { TransactionToastAction } from './components/TransactionToastAction';
 export { TransactionToastLabel } from './components/TransactionToastLabel';
 export type {
-  LifeCycleStateName,
+  LifeCycleState,
   TransactionButtonReact,
   TransactionError,
   TransactionReact,

src/transaction/types.ts

@@ -12,7 +12,7 @@ import type {
 export type LifeCycleState =
   | {
       stateName: 'init';
-      stateData: {};
+      stateData: null;
     }
   | {
       stateName: 'error';
@@ -79,7 +79,7 @@ export type TransactionProviderReact = {
   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.
   onError?: (e: TransactionError) => void; // An optional callback function that handles errors within the provider.
-  onState?: (stateName: string, stateData: Object) => void; // An optional callback function that exposes the component lifecycle state
+  onState?: (lifeCycleState: LifeCycleState) => void; // An optional callback function that exposes the component lifecycle state
   onSuccess?: (response: TransactionResponse) => void; // An optional callback function that exposes the transaction receipts
 };
 
@@ -94,7 +94,7 @@ export type TransactionReact = {
   className?: string; // An optional CSS class name for styling the component.
   contracts: ContractFunctionParameters[]; // An array of contract function parameters for the transaction.
   onError?: (e: TransactionError) => void; // An optional callback function that handles transaction errors.
-  onState?: (stateName: string, stateData: Object) => void; // An optional callback function that exposes the component lifecycle state
+  onState?: (lifeCycleState: LifeCycleState) => void; // An optional callback function that exposes the component lifecycle state
   onSuccess?: (response: TransactionResponse) => void; // An optional callback function that exposes the transaction receipts
 };
 
@@ -166,20 +166,20 @@ export type TransactionToastLabelReact = {
 };
 
 export type UseCallsStatusParams = {
-  onError?: (e: TransactionError) => void;
+  setLifeCycleState: (state: LifeCycleState) => void;
   transactionId: string;
 };
 
 export type UseWriteContractParams = {
-  onError?: (e: TransactionError) => void;
   setErrorMessage: (error: string) => void;
+  setLifeCycleState: (state: LifeCycleState) => void;
   setTransactionHashArray: (ids: Address[]) => void;
   transactionHashArray?: Address[];
 };
 
 export type UseWriteContractsParams = {
-  onError?: (e: TransactionError) => void;
   setErrorMessage: (error: string) => void;
+  setLifeCycleState: (state: LifeCycleState) => void;
   setTransactionId: (id: string) => void;
 };