feat: onState

src/transaction/components/Transaction.tsx

@@ -10,6 +10,7 @@ export function Transaction({
   children,
   contracts,
   onError,
+  onState,
   onSuccess,
 }: TransactionReact) {
   return (
@@ -19,6 +20,7 @@ export function Transaction({
       chainId={chainId}
       contracts={contracts}
       onError={onError}
+      onState={onState}
       onSuccess={onSuccess}
     >
       <div className={cn(className, 'flex w-full flex-col gap-2')}>

src/transaction/components/TransactionProvider.tsx

@@ -26,6 +26,7 @@ import { useCallsStatus } from '../hooks/useCallsStatus';
 import { useWriteContract } from '../hooks/useWriteContract';
 import { useWriteContracts } from '../hooks/useWriteContracts';
 import type {
+  LifeCycleStateName,
   TransactionContextType,
   TransactionProviderReact,
 } from '../types';
@@ -51,18 +52,24 @@ export function TransactionProvider({
   children,
   contracts,
   onError,
+  onState,
   onSuccess,
 }: TransactionProviderReact) {
+  // Core Hooks
+  const account = useAccount();
+  const config = useConfig();
   const [errorMessage, setErrorMessage] = useState('');
-  const [transactionId, setTransactionId] = useState('');
   const [isToastVisible, setIsToastVisible] = useState(false);
+  const [receiptArray, setReceiptArray] = useState<TransactionReceipt[]>([]);
+  const [stateName, setStateName] = useState<LifeCycleStateName>('init'); // Components lifecycle state name
+  const [stateData, setStateData] = useState({}); // Components lifecycle state data
+  const [transactionId, setTransactionId] = useState('');
   const [transactionHashArray, setTransactionHashArray] = useState<Address[]>(
     [],
   );
-  const [receiptArray, setReceiptArray] = useState<TransactionReceipt[]>([]);
-  const account = useAccount();
-  const config = useConfig();
   const { switchChainAsync } = useSwitchChain();
+
+  // Hooks that depend from Core Hooks
   const { status: statusWriteContracts, writeContractsAsync } =
     useWriteContracts({
       onError,
@@ -83,7 +90,6 @@ export function TransactionProvider({
     onError,
     transactionId,
   });
-
   const { data: receipt } = useWaitForTransactionReceipt({
     hash: writeContractTransactionHash || transactionHash,
   });

src/transaction/index.ts

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

src/transaction/types.ts

@@ -6,6 +6,11 @@ import type {
   TransactionReceipt,
 } from 'viem';
 
+/**
+ * Note: exported as public Type
+ */
+export type LifeCycleStateName = 'init';
+
 export type IsSpinnerDisplayedProps = {
   errorMessage?: string;
   hasReceipt?: boolean;
@@ -66,6 +71,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
   onSuccess?: (response: TransactionResponse) => void; // An optional callback function that exposes the transaction receipts
 };
 
@@ -80,6 +86,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
   onSuccess?: (response: TransactionResponse) => void; // An optional callback function that exposes the transaction receipts
 };